《JavaScript入门经典(第6版)》——第2章 创建简单的脚本2.1 在Web页面里添加JavaScript-阿里云开发者社区

开发者社区> 开发与运维> 正文

《JavaScript入门经典(第6版)》——第2章 创建简单的脚本2.1 在Web页面里添加JavaScript

简介: 本节书摘来自异步社区《JavaScript入门经典(第6版)》一书中的第2章,第2.1节,作者: 【美】 Phil Ballard 译者:李 军陈冀康,更多章节内容可以访问云栖社区“异步社区”公众号查看。

本节书摘来自异步社区《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文件里,就像上一章所介绍的一样。

screenshot

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

screenshot

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

screenshot

screenshot

把JavaScript代码保存到单独的文件中有不少好处:

当JavaScript代码有更新时,这些更新可以立即作用于使用这个JavaScript文件的页面。这对于JavaScript库是尤为重要的(本书稍后会有介绍)。
HTML页面的代码可以保持简洁,从而提高易读性和可维护性。
可以稍微提高一点性能。浏览器会把包含文件进行缓存,当前页面或其他页面再次需要使用这个文件时,就可以使用一个本地副本了。

说明:按照惯例,JavaScript代码文件的名称后缀是.js。但从实际情况来看,代码文件的名称可以使用任何后缀,浏览器都会把其中的内容当作JavaScript来解释。

注意:外部文件中的JavaScript语句不能放到标签中,也不能使用任何HTML标签,只能是纯粹的JavaScript代码。
程序清单2.1是第1章里Web页面的代码,但是现在,修改为在

区域里包含了一个JavaScript代码文件。JavaScript可以放置到HTML页面的或区域里,但一般情况下,我们把JavaScript代码放到页面的区域,从而让文档的其他部分能够调用其中的函数。第3章将介绍函数的有关内容。就目前而言,我们把范例代码暂时放到文档的区域。

程序清单2.1 包含了一个JavaScript文件的一个HTML文档

screenshot

当JavaScript代码位于文档的body区域时,在页面被呈现时,遇到这些代码就会解释和执行,然后继续呈现,直到完成页面的内容。

提示:你并不是只能够使用一个script元素,需要的话,可以在页面中使用任意多个script元素。

说明:有时在< script>标签里可以看到HTML风格的注释标签,它们包含着JavaScript语句,比如:

screenshot

这是为了兼容不能识别

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章