# JavaScript 使用 ## 1. script標籤 在 HTML 中，JavaScript 代碼必須在 <script> 与 </script> 標籤之間。 ``` <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; </script> ``` ## 2.Javascripts函數與事件 Javascripts函數是一種javascripts代碼方塊，可以在需要時被調用執行。 例如:當事件發生時執行，使用者按下按鈕時。 **<head> 或 <body> 中的 JavaScript** 你可以在<head>跟<body>位置中放置任意數量的腳本。腳本可以被放置在ｈｅａｄ或是ｂｏｄｙ中，或是都放置也沒關西。 **<head> 中的 JavaScript** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function change() { document.getElementById('demo').innerHTML = '我被改了' } </script> </head> <body> <p id="demo">我想要被更改</p> <button onclick="change()">更改</button> </body> </html> ``` **<body> 中的 JavaScript** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p id="demo">我想要被更改</p> <button onclick="change()">更改</button> <script> function change() { document.getElementById('demo').innerHTML = '我被改了' } </script> </body> </html> ``` --- ## 3.外部腳本 腳本可以放在外部文件中： 外部文件：test08.js ``` function change() { document.getElementById('demo').innerHTML = '我有連結到' } ``` 外部腳本很實用，因為相同的腳本可以被用在不同的網頁上。 要使用外部腳本時，在<srcipt>標籤裡的屬性(src)輸入外部文件的名稱。 ``` <script src="test08.js"></script> ``` **外部JS的優勢** * 分離了HTML跟代碼 * 讓HTML跟Javascript更容易閱讀跟維護 * 已緩存的Javascript文件可加速頁面載入 --- 如果一個網頁要用多個腳本，就插入多個標籤連結外部腳本。 ``` <script src="myScript1.js"></script> <script src="myScript2.js"></script> ``` ## 外部引用 可通過完整的 URL 或相對於當前網頁的的路徑引用外部腳本： 本例使用完整的 URL 来連接至腳本： ``` <script src="https://www.w3school.com.cn/js/myScript1.js"></script> ```