JavaScript 放在哪里?

JavaScript 放在哪里

刚才我们编写了第一个 JavaScript 程序,强调过 JavaScript 代码必须放置在 <script>……</script> 标签里。

我们把包含代码的 <script>……</script> 标签放在了 <body>……</body> 标签里。其实不止可以这样做,我们还有另外两种方式在 HTML 中使用 JavaScript 。

head 中的 JavaScript

我们除了可以把包含代码的 <script> 标签放在 <body>……</body> 标签里,还可以把它放在 <head>……</head> 标签里,比如这样:

<html>
<head>
<h1> JavaScript in head. </h1>
<script>
alert("hello word!");
</script>
</head>
<body></body>
</html>

这个程序的执行结果和刚才的没什么不同,但其实把 JavaScript 代码放在 <head></head> 和放在 <body></body> 里是有区别的:

简单地说,放在 <head></head> 里的会比放在 <body></body> 先执行。head 标签里的代码会在页面还未开始绘制之前被解析,而在 body 里的代码则会在页面渲染的同时在读取到这段代码的时候才被执行。

外部的 JavaScript

除了直接把 JavaScript 代码写在 HTML 里,我们还可以把 JavaScript 的代码写在一个 js 文件中,在 HTML 里调用这个 js 文件。我们还是以“hello world”举例。

在实验楼环境中,把以下代码保存并命名为“out.js”,放在桌面上:

alert("hello word!");

把以下代码保存并命名为“test2.html”,放在桌面:

<html>
<head>
<h1> my JavaScript code in "out.js" </h1>
</head>
<body>
<script src="out.js"></script>
</body>
</html>

同样,双击桌面上的“test2.html”文件,调用浏览器运行,你会发现运行效果和前两个程序也没什么区别。

其实,前两种方式都是直接把 JavaScript 代码放在 HTML 中,在页面加载的同时,那些 JavaScript 的代码就被解析了。而把 JavaScript 代码放在外部文件中,只有在事件被触发,需要该段 JavaScript 代码时,才调用执行。

这样做有个好处,当页面比较复杂的时候,把大量的 JavaScript 代码放到外部文件,只有在需要的时候才执行,那么会明显地加快页面加载速度。

在一个 HTML 文件中,不同位置加入不同的 JavaScript 代码,运行观察不同位置的 JavaScript 代码执行的顺序。

参考如下,观察弹框顺序:

嗯嗯


继续学习
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> RunJS 演示代码 </title> <script> var ck = function(){ var x = prompt ("输入数据: ", ""); alert(x); } </script> </head> <body> <button onclick="ck();"> 输入按钮 </button> </body> </html>
提交重置代码