《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

这是为了兼容不能识别

相关文章
|
2月前
|
编解码 JavaScript 前端开发
百度地图:使用javascript和web服务API自动实现经纬度编码的解决方案
百度地图:使用javascript和web服务API自动实现经纬度编码的解决方案
36 1
|
2月前
|
JSON 前端开发 JavaScript
Javascript 常用语法 Web前端基础
Javascript 常用语法 Web前端基础
|
2月前
越往下走,越有味道。认我们走进HTML5+Css3+javaScript+Jquery+web服务器。(二)
越往下走,越有味道。认我们走进HTML5+Css3+javaScript+Jquery+web服务器。(二)
23 0
|
2月前
|
前端开发
越往下走,越有味道。认我们走进HTML5+Css3+javaScript+Jquery+web服务器。(一)
越往下走,越有味道。认我们走进HTML5+Css3+javaScript+Jquery+web服务器。(一)
40 0
|
3月前
|
前端开发 JavaScript
web前端面试高频考点——JavaScript 篇(二)【JS 异步进阶】Event Loop、then 和 catch、async/await、宏任务微任务、手撕 Promise 源码
web前端面试高频考点——JavaScript 篇(二)【JS 异步进阶】Event Loop、then 和 catch、async/await、宏任务微任务、手撕 Promise 源码
107 0
|
3月前
|
JavaScript 前端开发 测试技术
web前端面试高频考点——JavaScript 篇(一)【JS的三座大山 】 原型和原型链、作用域和闭包、异步
web前端面试高频考点——JavaScript 篇(一)【JS的三座大山 】 原型和原型链、作用域和闭包、异步
|
4月前
|
机器学习/深度学习 Web App开发 JavaScript
「Web趋势」JavaScript和Web开发InfoQ趋势报告
「Web趋势」JavaScript和Web开发InfoQ趋势报告
|
4月前
|
存储 JSON 前端开发
web应用 —— JavaScript(下)
web应用 —— JavaScript
|
4月前
|
前端开发 JavaScript Java
web应用 —— JavaScript(上)
web应用 —— JavaScript
|
5月前
|
前端开发 JavaScript
web前端-JavaScript中的call、apply和bind方法(改变this指向)
web前端-JavaScript中的call、apply和bind方法(改变this指向)
51 0
相关产品
云迁移中心
推荐文章
更多