2.3.1 script標簽 · Web全棧技術指南

# 2.3.1 script標簽 ### 2.3.1 script標簽 HTML文檔一般通過`<script></script>`標簽引入JavaScript代碼。例如： ``` <html> <head> <meta charset="utf-8" /> <title>你好</title> </head> <body> <button id="btn1">點我</button> <script> var btn = document.getElementById('btn1'); btn.onclick = function() { document.body.innerHTML = '<h1>你好，JavaScript！</h1>'; }; </script> </body> </html> ``` 但我們一般把JavaScript代碼放在一個單獨的文件里，并從HTML文檔里引用它[1](#fn_1)。例如： ``` <html> <head> <meta charset="utf-8" /> <title>你好</title> </head> <body> <button id="btn1">點我</button> <script src=”hello.js”></script> </body> </html> ``` 其中hello.js的內容是： ``` var btn = document.getElementById('btn1'); btn.onclick = function() { document.body.innerHTML = '<h1>你好，JavaScript！</h1>'; }; ``` 讀者應試著運行一下以上兩個示例，看看是什么效果。另外，`<script></script>`標簽還可以包含在`<head></head>`標簽里。讀者可以修改示例代碼，看看結果有什么不同，并研究一下原因[2](#fn_2)。 > 1. 在上文CSS的部分我們提到“樣式（代碼）與內容（代碼）相分離”的原則，在此我們遵循類似的規則，即“行為（代碼）與內容（代碼）相分離”。至此，內容（HTML），樣式（CSS）和行為（JavaScript）都已登場，它們相互“獨立”又關聯。讀者可在實踐中細細體會。[?](#reffn_1 "Jump back to footnote [1] in the text.") > 2. 一般瀏覽器都有JavaScript調試器（debugger）。如果你遇到了問題，不妨打開調試器看看原因是什么。不同瀏覽器的調試器打開方式不同，請查找一下。[?](#reffn_2 "Jump back to footnote [2] in the text.")