3.3 JavaScript_Python高效开发实战：Django、Tornado、Flask、Twisted（第3版）-QQ阅读中文短篇网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

3.3　JavaScript

JavaScript是一种直译式脚本语言，是一种动态类型语言，内置支持类型。它的解释器被称为JavaScript引擎，该引擎内置于现代的所有浏览器中。在HTML网页上使用JavaScript可以为HTML网页增加动态功能。

3.3.1　在HTML中嵌入JavaScript

作为一种所有浏览器都支持的解释性脚本语言，在HTML中应用JavaScript一般有如下目的。

• 在客户端读写HTML元素，实现切换文字、滚动条等动态效果。

• 响应浏览器事件，如窗口变大、变小等。

• 验证表单输入，常见于密码的两次输入是否相同、出生年月是否小于当前时间等。

在HTML中嵌入JavaScript有两种方式：内部嵌入和外部链接。内部嵌入是指直接在HTML中用<script>标签写入脚本；外部链接是指在HTML中通过文件名引用独立的脚本文件。

【示例3-9】在HTML中嵌入JavaScript的示例如下：

技巧：外部JavaScript文件通常以*.js命名，这样有利于各种编辑器进行智能解析。

本例中在页面上定义了一个按钮，当用户单击它时界面显示“Hello world of JavaScript”。内部脚本可以写在HTML文件中的任何地方，可以写在<head>标签中，也可以写在<body>标签中。

3.3.2　JavaScript的基本语法

我们在3.3.1节中已经完成了JavaScript的“Hello World”的学习，可以体会到JavaScript的语法与Java很像，但其动态类型的特点与Python也有类似之处。本节对JavaScript的基本语法进行讲解。

1. 语句

JavaScript区分大小写，每条语句以分号“;”结尾，用大括号“{ }”表示作用域（而不是Python中的缩进），所以每条语句和变量之间可以有任意空格、Tab符或回车符。JavaScript用C、C++风格的“/* … */”表示注释。比如：

2. 变量及数据类型

JavaScript是动态数据类型，即一个变量的类型随着其值的变化而变化。变量用“var”关键字声明，变量名可以由字母、数字、下画线等组成。常用的数据类型有字符串、数字、布尔、数组、对象等，字符串用双引号表示。变量及数据类型的举例如下：

关键字new是JavaScript中用于新建组件实例的关键字，定义数组时需用new建立一个Array对象，并在其参数中给出数组元素（如本例中的变量xx）；也可以在定义数组时不给初始值，而在之后通过下标赋值（如本例中的变量arr）。JavaScript中的数组下标从0开始。

JavaScript中的对象类型与Python中的Dictionary类型相似，都是用大括号以键值对的方式表示，但其语法略有不同。在Python中Dictionary的“键”是任意数据类型，示例如下：

在JavaScript的对象中，“键”只能以成员变量的方式出现，定义时键上不加双引号，示例如下：

3. 操作符

常用操作符与Python类似，有+、-、*、/、%、==、>=、<=等。此外，JavaScript还允许自增操作（++）、自减操作（--）。操作符的示例如下：

4. 函数

JavaScript中用关键字function定义函数，语法如下：

和Python一样，JavaScript函数中的返回值是可选的，如果函数有返回值，则可以在block_of_function中用return语句返回，示例如下：

5. 判断语句

JavaScript中有两种判断语句：if和switch。if语句用于对不同的条件执行不同的代码块；switch语句用于对一个表达式的不同结果执行不同的代码块。判断语句的语法如下：

if语句的语义与Python中相似，此处不再举例。switch语句举例如下：

每个条件的block中可以放多条语句，但是每个块中都应该以break语句结尾。

注意：switch语句的每个块中都应该以break作为最后一条语句。

6. 循环语句

JavaScript的循环语句有for和while两种，各有两种用法。for的第1种语法如下：

其中sentence1在for语句开始时执行且只执行一次；sentence2在每个loop开始时执行，sentence2应该返回一个布尔值，如果sentence2的结果为true，则执行该loop，否则立即结束for循环；sentence3在每次循环结束时执行。for语句的典型用法如下：

本例中的循环体将执行10次，即在document中写入10个<br>标签。

for的第2种用法和while语句及Python中的for语句用法相似，此处只列出其语法规则，读者可以自行编写代码练习。

3.3.3　DOM及其读写

DOM（Document Object Model）是当网页被加载时浏览器创建的页面文档对象模型。DOM用结构化的方式描述了标记语言的文件内容。JavaScript中几乎所有有意义的行为都是围绕DOM展开的，如读写页面元素、响应页面事件、进行表单验证等。本节介绍DOM的基本语义及使用DOM实现HTML页面元素的读写。

HTML DOM被构建为树结构，在DOM内部每个HTML页面被描述为一个以document为根节点的树，HTML中的每一个标签<..>都被表示为该树中的一个节点，例如下面的HTML文件：

浏览器加载时生成的DOM树如图3.12所示。

图3.12　DOM树示例

通过操作DOM树，JavaScript可以读、增、删、改HTML标签的元素、内容、属性、样式等。DOM提供了一系列支持JavaScript遍历和修改DOM的方法，下面逐个举例。

1. 查找节点

一般情况下在DOM中查找节点时无须遍历树结构，而通过document对象的如下3个函数直接实现。

• getElementById( id )：返回对拥有指定id的第1个对象的引用。

• getElementsByName( name )：返回带有指定名称的对象集合。

• getElementsByTagName( tagName )：返回带有指定标签名的对象集合。

例如，对于图3.12中的DOM树可以编写如下脚本：

找到一个节点后，可以根据其相对位置的属性查找其周围的节点，这些相对位置查找的常用属性如表3.6所示。

表3.6　DOM相对位置查找的常用属性

注意：本节中的obj.xxxx表示该函数或属性是通过节点进行调用或访问的。

节点的相对位置属性举例如下：

2. 增加节点

查找到一个节点后可以在其中插入子节点，新增节点通过document.createElement()和obj.appendChild()/obj.insertBefore()/obj.replaceChild()等实现，仍然以图3.12为例：

3. 删除节点

删除节点通过obj.removeChild()方法实现，针对图3.12中的DOM举例如下：

4. 访问及修改属性节点

属性节点是指HTML标签中的属性，以键和值的方式呈现，例如，<div id="container">中的id = "container"就是<div>标签节点的一个属性节点。通过设置属性节点，可以控制一个HTML标签的id、name、CSS等。属性节点的读取与设置通过obj.getAttribute()和obj.setAttribute()函数完成。同时，JavaScript允许以成员变量的方式访问属性节点，举例如下：

5. 访问及修改节点的内容

大多数节点都有内容，例如，本例中的两个<p>节点都有文本内容，而两个<p>节点本身又是<div>的内容。DOM中通过obj.innerHTML访问和修改节点内容，示例如下：

3.3.4　window对象

在JavaScript编程中，除了用DOM模型访问HTML页面中的内容，有时还需要访问和操作除HTML本身外的一些信息，如浏览器的窗口大小、网址等，这些信息通过window对象和其子对象document（文档）、history（浏览历史）、location（URL相关）、navigator（浏览器）的一些固有属性和方法进行访问。常用的window对象的属性或方法如表3.7所示。

表3.7　常用的window对象的属性或方法