JavaScript前端开发入门

第 1章JavaScript概述
本章学习目标
?了解 JavaScript语言的历史背景。
?了解 JavaScript语言的特点及组成。
?通过“Hallo, World!”示例简单认识 JavaScript的运行机制。
本章先向读者介绍 JavaScript的历史以及其语言特点,让读者对 JavaScript语言整体有初步的了解和认识,讲述 JavaScript代码的写法,并通过一段简单的代码示例初窥 JavaScript编程的门径。
1.1 JavaScript简介
1.1.1 JavaScript的历史
JavaScript作为程序员“行走江湖”不可或缺的一门“武功”,一定有它不同于其他语言的特点,这就要从这门语言的起源说起。它昀早是由 Netscape公司开发,用来处理一些简单的表单验证的脚本语言。在没有 JavaScript的年代,一些简单的表单验证(如常见的密码复杂度验证)都是由服务端负责的,而且当时的网络速度是非常慢的,这种验证方式会导致网站的响应速度变得特别慢,于是便有了这门语言的诞生。当然它的作用**不仅仅是处理表单验证,它主要是用来使一些简单的逻辑可以在浏览器中实现而不需要去请求服务端的响应,负责使网页能和浏览器进行交互。
后来 Java语言火爆起来, Netscape也把原本叫做 LiveScript的语言改名为 JavaScript。其实从语言的角度,两者几乎没有什么关系。因为首先作为一种脚本语言,它本质上就与 Java不同,而且虽然 Netscape公司希望做出来的语言看起来能和 Java相似,但是这门语言的设计师 Brendan Eich却完全没把这个要求当回事,他的设计思路是:
(1)借鉴 C语言的基本语法。 (2)借鉴 Java语言的数据类型和内存管理。 (3)借鉴 Scheme语言,将函数提升到“**等公民”(first class)的地位。 (4)借鉴 Self语言,使用基于原型( prototype)的继承机制。
因此 JavaScript和 Java**的联系就是借鉴了 Java的数据类型和内存��理机制。随后微软发布了 IE 3.0浏览器并开发了一个名叫 JScript的脚本语言,实质就是一个能够在 IE 3.0上运行的 JavaScript。这两种语言虽然类似,但是标准不尽相同,这就害苦了很多 Web开发人员。昀后欧洲计算机制造商协会(European Computer Manufactures Association,ECMA) 采用了 ECMAScript作为标准定义这种语言,现在的 ECMAScript每年更新一个版本,如本
书编写的时候正是 2018年,而 ECMAScript 2019已经在起草了。
当然, Windows平台仍然有对 JavaScript的支持,并能通过 WSH环境直接运行。我们
偶尔意外双击了 .js文件,会发现它运行了并弹窗报错,是因为 JavaScript和我们现在一般
使用的 JavaScript的语法并不兼容,同时两者各自自带的对象亦不相同。
近些年和 JavaScript有关的一门比较流行的语言叫做 TypeScript,它是 ECMAScript的
超集,且是一种强类型语言,相较于 JavaScript更适合开发大型程序,受到多种主流前端框
架的青睐。 TypeScript需要使用 Babel等编译工具编译为 .js文件后才能够在浏览器中使用。 1.1.2 JavaScript的特点
JavaScript是一种动态类型、弱类型、基于原型的解释型脚本语言。
(1)动态类型:它的变量在声明时不需要声明类型,而是在运行时根据被赋值类型进行转换。 (2)弱类型:在计算时可以根据环境的变换自动转换变量类型。 (3)基于原型:没有面向对象语言中的类和实例的区别,只有对象这一概念,新的对象通过构造器函数继承原型对象,实例化后具有原型对象的属性以及本身定义的属性。 (4)解释型脚本语言:它的解释器被称为 JavaScript引擎,前端的 JavaScript的运行环境通常是在浏览器中,因此这个引擎也是浏览器的一个重要组成部分。 JavaScript的主要功能与它在被创立之初的目的是相同的,能够使页面与浏览器进行交互从而控制 HTML
(HyperText Mark-up Language)元素实现一些动态效果。 JavaScript代码可以直接嵌入到 HTML代码中,也可以单独写在文件中被 HTML页面调用。通常为了使代码结构更加清晰也方便分离一些功能模块,往往采用后一种做法。 1.1.3 JavaScript的组成
JavaScript的组成介绍如下。
(1)ECMAScript是 JavaScript的核心部分,它规定了 JavaScript的语法、类型、语句、关键字、保留字、运算符和对象。 (2)DOM(Document Object Model)通过把整个页面映射成一个树结构的文档,提供了一套可以访问 HTML和 XML(eXtensible Markup Language)节点的 API(Application Programming Interface),***可以利用它轻松地删除、添加、替换或修改任何节点。 (3)BOM(Browser Object Model)提供了访问浏览器窗口的方法,***可以控制浏览器窗口进行一些诸如移动窗口之类的操作。 BOM部分的有关定义,零散分布在各种标准中,主要位于 HTML标准。其他比如 WebRTC标准等内也定义了一些接口。
现在的 HTML、CSS、JS都走向了标准化,对浏览器的许多接口都有大量的标准文档进行了详尽的定义, DOM和 BOM只是其中的一部分,但是也是主要用到的部分。当然,如果要跟上时代的话,还是需要多了解各种新特性, W3C 专门建立了面向中国大众的 Chinese Web兴趣小组进行有关推广,有兴趣的读者可以了解一下。

第 1章 JavaScript概述 .1 1.1 JavaScript简介 1 1.1.1 JavaScript的历史 1 1.1.2 JavaScript的特点 2 1.1.3 JavaScript的组成 2 1.2 JavaScript简单程序示例 3 1.2.1 JavaScript写法 3 Hello, World!3 1. 2.2 小结.4 习题.5 第 2章 JavaScript基础语法 .6 2.1 JavaScript变量 6 2.1.1 JavaScript变量的特点 6 2.1.2 JavaScript变量的命名规范 6 2.1.3 JavaScript变量声明 8 2.1.4 变量的作用域 9 2.1.5 变量优先级 12 2.1.6 变量提升 12 2.2 JavaScript数据类型 13 2.2.1 字符串类型 14 2.2.2 数字类型 15 2.2.3 布尔类型 16 2.2.4 数组类型 16 2.2.5 对象类型 17 undefined17 2.2.6 null .19 2.2.7 2.2.8 函数类型 19 2.3 JavaScript常量 21 2.3.1 常量的声明 21 2.3.2 JavaScript内置常量 21 2.4 JavaScript运算符 22 2.4.1 算术运算符 22 2.4.2 字符串运算符 23 2.4.3 赋值运算符 24 2.4.4 比较运算符 25 2.4.5 逻辑运算符 27 2.4.6 位运算符 29 2.4.7 特殊运算符 30 2.4.8 运算符执行顺序 37 2.5 JavaScript基本语句 39 2.5.1 注释语句 39 2.5.2 条件语句 39 2.5.3 循环语句 44 2.5.4 with语句53 小结.55 习题.55 第 3章 JavaScript进阶 .57 3.1 JavaScript异常处理 57 3.1.1 抛出异常 57 3.1.2 捕获异常 59 3.1.3 finally语句 62 3.2 JavaScript函数 63 3.2.1 JavaScript函数简介 63 3.2.2 函数的声明 64 3.2.3 函数的嵌套 67 3.2.4 函数的返回值 67 3.2.5 函数的参数传递 68 3.2.6 函数的调用 70 3.2.7 回调函数 74 3.3 JavaScript对象 76 3.3.1 对象简介 76 3.3.2 对象的创建和使用 77 3.3.3 原型对象 77 3.3.4 通过原型对象继承 79 3.4 JavaScript核心对象 81 3.4.1 Number对象81 3.4.2 String对象 .83 3.4.3 Boolean对象 .90 3.4.4 Date对象 .91 3.4.5 Math对象 95 3.4.6 RegExp对象96 3.4.7 数组对象 102 小结.106 习题.106 第 4章 JavaScript动态页面 . 110 4.1 文档对象模型 110 4.1.1 获取节点元素 112 4.1.2 获取和修改元素的文本内容 117 4.1.3 获取和修改元素的属性 120 4.1.4 修改 HTML输出流 121 4.1.5 修改元素的 CSS样式.122 4.1.6 向页面中添加元素 123 4.1.7 删除页面中的元素 125 4.2 JavaScript事件驱动 126 4.2.1 事件类型 126 4.2.2 绑定事件 127 4.3 浏览器对象模型 130 4.3.1 window对象简介 130 4.3.2 screen对象 130 4.3.3 location对象131 4.3.4 history对象133 4.3.5 navigator对象135 4.3.6 网页弹窗 136 4.3.7 窗口操作 138 4.3.8 计时事件 139 Cookie 141 4.4 4.4.1 创建和获取 Cookie .141 4.4.2 使用 Cookie存储多条信息 143 4.4.3 删除 Cookie .145 4.5 表单验证 146 4.5.1 表单元素 146 4.5.2 表单对象 148 4.5.3 输入元素 150 4.5.4 表单验证示例 153 4.6 JavaScript实现简单动画效果 155 4.6.1 动画效果一:块元素平移 155 4.6.2 动画效果二:字体闪烁 157 4.6.3 动画效果三:进度条 158 小结.159 习题.159 目 录 第 5章 AJAX 161 5.1 AJAX概述 161 5.1.1 AJAX使用场景 161 5.1.2 异步处理 162 5.2 AJAX用法 162 5.2.1 创建 XMLHttpRequest对象.162 5.2.2 为 XMLHttpRequest绑定函数 .163 5.2.3 发送 HTTP请求165 5.2.4 服务器响应 166 5.3 AJAX实例 166 5.3.1 AJAX实例一:搜索建议 .166 5.3.2 AJAX实例二:用户名查重 .169 小结.172 习题.173 第 6章 jQuery 174 6.1 jQuery概述174 6.1.1 jQuery的简介174 6.1.2 jQuery的安装174 6.2 jQuery操作元素 175 6.2.1 jQuery获取元素 175 6.2.2 jQuery获取和修改文本内容 179 6.2.3 jQuery获取和修改元素属性 180 6.2.4 jQuery修改元素 CSS样式.181 6.2.5 jQuery为元素绑定事件 182 6.3 jQuery页面效果 183 6.3.1 隐藏/显示元素 .183 6.3.2 渐入/淡出效果 .183 6.3.3 jQuery动画效果 184 6.3.4 jQuery组合动画效果 185 jQuery AJAX186 6.3.5 6.3.6 jQuery实战:用户名查重 188 小结.190 习题.190 第 7章 JavaScript实战 .192 习题.201 参考文献 .202