到目前為止還沒有接觸到如何在元件中執行客戶端 JavaScript，在本章節將會介紹「本地腳本」與「外部腳本」兩種方法。通常操縱 DOM 的行為都會放在客戶端腳本中，像是事件監聽、動畫……一切與瀏覽器貼近的行為都會放在這裡。
可以透過在元件模板中添加 <script> 標籤來引入 JavaScript 在元件中，預設 Astro 會將元件模板中的 <script> 經過以下處理並注入到 <head> 中連帶添加 type="module"。
import 將會連帶打包，引入本地檔案或 Node 套件---
---
<script>
console.log('Welcome, browser console!');
</script>
如果不希望 Astro 管理元件中的腳本也可以設定使用 is:inline 指令來直接將這段腳本插入 HTML 之中，但必須留意使用該指令將會導致每當元件被重複引入就會被重複執行。
<script is:inline>
// 將會被寫入 HTML 中，套件引入將無法運作且每當元件重複使用時該片段也會被重複執行
</script>
當你的腳本放置在 src/ 時可以直接連接該檔案，Astro 同樣會打包處理。
<!-- 腳本路徑： `src/scripts/local.js` -->
<script src="../scripts/local.js"></script>
<!-- TypeScript 同樣支援 -->
<script src="./script-with-types.ts"></script>
當你的腳本放置在 public 或 CDN 上時，同樣可以使用 is:inline 將其不做處理的加入進頁面中。
<!-- 腳本路徑： `public/my-script.js` -->
<script is:inline src="/my-script.js"></script>
<!-- 連向遠端伺服器的腳本位址 -->
<script is:inline src="https://my-analytics.com/script.js"></script>
當你希望 Astro 處理腳本時可以直接撰寫 <script> 標籤到元件模板之中，當需要直接插入行內腳本可以使用 is:inline 模板指令。嘗試看看用客戶端腳本替你的頁面製作一些功能吧！像是：
都會是很好的小練習。
(目前 iT 邦不支援 Astro 語法的高光 😅，因此歡迎到我的部落格閱讀本系列相關文章，正同步更新中！)
iThome鐵人賽
看影片追技術