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.")