本节书摘来自异步社区《JavaScript入门经典(第6版)》一书中的第2章,第2.1节,作者: 【美】 Phil Ballard 译者:李 军陈冀康,更多章节内容可以访问云栖社区“异步社区”公众号查看。
第2章 创建简单的脚本
JavaScript入门经典(第6版)
本章主要内容包括:
在Web页面里添加JavaScript的各种方式
JavaScript语句的基本语法
声明和使用变量
使用算术操作符
代码的注释
捕获鼠标事件
第1章介绍了JavaScript是一种能够让Web页面更具有交互性的脚本语言。
本章将介绍如何向Web页面添加JavaScript,以及编写JavaScript程序的一些基本语法,比如语句、变量、操作符和注释。同时,本章将涉及更加实用的脚本范例。
2.1 在Web页面里添加JavaScript
正如上一章所介绍的,JavaScript代码是和页面内容一起发送给浏览器的,这是如何做到的呢?有两种方法可以把JavaScript代码关联到HTML页面,它们都要使用第1章介绍的标签。
第一种方法是把JavaScript语句直接包含在HTML文件里,就像上一章所介绍的一样。

第二种方法,也是更好的方法,是把JavaScript代码保存到单独的文件,然后利用< script>元素的src(源)属性来指定文件名,从而把这个文件包含到页面里。

前例包含了一个名为mycode.js的文件,其中有我们编写的JavaScript语句。如果JavaScript文件与调用脚本不在同一个文件夹,就需要添加一个相对或绝对路径:

或

把JavaScript代码保存到单独的文件中有不少好处:
当JavaScript代码有更新时,这些更新可以立即作用于使用这个JavaScript文件的页面。这对于JavaScript库是尤为重要的(本书稍后会有介绍)。
HTML页面的代码可以保持简洁,从而提高易读性和可维护性。
可以稍微提高一点性能。浏览器会把包含文件进行缓存,当前页面或其他页面再次需要使用这个文件时,就可以使用一个本地副本了。
说明:按照惯例,JavaScript代码文件的名称后缀是.js。但从实际情况来看,代码文件的名称可以使用任何后缀,浏览器都会把其中的内容当作JavaScript来解释。
注意:外部文件中的JavaScript语句不能放到标签中,也不能使用任何HTML标签,只能是纯粹的JavaScript代码。
程序清单2.1是第1章里Web页面的代码,但是现在,修改为在
区域里包含了一个JavaScript代码文件。JavaScript可以放置到HTML页面的或区域里,但一般情况下,我们把JavaScript代码放到页面的区域,从而让文档的其他部分能够调用其中的函数。第3章将介绍函数的有关内容。就目前而言,我们把范例代码暂时放到文档的区域。
程序清单2.1 包含了一个JavaScript文件的一个HTML文档

当JavaScript代码位于文档的body区域时,在页面被呈现时,遇到这些代码就会解释和执行,然后继续呈现,直到完成页面的内容。
提示:你并不是只能够使用一个script元素,需要的话,可以在页面中使用任意多个script元素。
说明:有时在< script>标签里可以看到HTML风格的注释标签,它们包含着JavaScript语句,比如:

这是为了兼容不能识别