2020.6.20 JavaScript 會寫在哪裡？

# 2020.6.20 JavaScript 會寫在哪裡？撰寫 JavaScript 時，需注意它的位置，位置可能影響代碼執行的優先順序。 ### 寫在 HTML 文件的 `<script>` 標籤內也就是內嵌在 `<head>` 或 `<body>` 標籤結束前。兩者差別在於： 1. head 部分：會在被調用的時候才執行。 2. body 部分：會在頁面載入的時候被執行。放在接近檔案底部，可確保 JavaScript 較晚被讀取，再去影響先被生成的 HTML 程式碼。但卻可能導致腳本載入受阻，拖慢網站效能。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>這是範例</title> <script > console.log('放在 head 結尾標籤之前') </script> </head> <body> <script> console.log('或是 body 結尾標籤之前') </script> </body> </html> ``` 程式碼運行結果： ![JS 內嵌](https://i.imgur.com/jBmBA6I.png) ### 外部引入 JavaScript 文件建立 `.js` 檔案後，在 HTML 檔案中的 <body> 或 <head> 透過 `<script src= "">` 標籤引用。此為通常使用的方法，可橫跨多個 HTML 檔案使用。 ``` // .js 檔案路徑為:scripts/main.js <script src="scripts/main.js"></script> ``` 參考資料 1. [JavaScript 寫在哪裡？ - HiSKIO](https://hiskio.com/courses/51/lectures/856) 2. [JavaScript 是什麼? - 學習該如何開發Web | MDN](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript)

Read more

【學習筆記】Next.js 錯誤修復紀錄： 「Window is not defined」&「use client & missing generateStaticParams() error」

【學習筆記】Next.js 實現多國語系：react-i18next & next-i18next

【學習筆記】Next.js 路由系統：App Router vs Page Router

【學習筆記】談談 Next.js：基於 React 的 SSR 框架

【學習筆記】Next.js 錯誤修復紀錄：「Window is not defined」&「use client & missing generateStaticParams() error」