第一篇〓JavaScript基础 第1章初识JavaScript 第2章JavaScript基础知识 第3章控制语句 第4章函数 第5章对象 第6章浏览器对象 第7章文档对象 第8章DOM事件 第9章JavaScript代码优化 JavaScript与jQuery案例教程 第1章初识JavaScript 第1章初识JavaScript 1.1什么是JavaScript JavaScript(简称JS)是一门用于前端开发的计算机语言，在不与服务器交互的情况下，可修改HTML内容， 为网页添加各种动态效果。它是网页动画与交互的效果之源，也是构建Web应用的核心部分。 随着5G移动网络的普及，在各种新技术、新标准的推动下，今天的Web前端技术已形成了一个大的技术系统，涉及知识点如图11所示。 图11Web前端开发技术 （1） Web前端泛指在Web应用中，用户可以看得见的内容，包括Web页面的结构、Web的外观表现以及Web的交互实现。HTML语言属结构，决定网页的内容是什么； CSS样式属表现，展示网页的效果是什么样子； 而JavaScript技术属行为，它是一种基于对象和事件驱动的脚本语言，用于控制网页的交互行为。在Web前端开发技术中，JavaScript技术是最重要的，它的语法和Java类似，属于解释型语言，边执行边解释。JavaScript的最大特点是“一切皆对象”，它是一种拥有属性、方法的特殊数据类型。 (2) Web后端更多的是与数据库进行交互、处理相应的业务逻辑，需要考虑的是数据的存取、平台的稳定性与性能等。Web后端编程语言是百花齐放，有PHP、JSP、node.js等编程语言，但Web前端的脚本是一枝独秀，处理前端效果，非JavaScript语言不可。不过，JavaScript也可以应用在其他方面，比如node.js使JS变成了服务器端脚本，类似PHP。 1.2JavaScript的发展史 1994年，网景公司(Netscape)发布Navigator浏览器，但是这款浏览器只能浏览页面，为了解决这个问题，网景决定发明一种全新的语言。 1995年，网景公司的布兰登·艾奇(Brendan Eich)为Navigator浏览器开发了一种名为LiveScript的脚本语言。当时，Netscape为了搭上媒体热炒Java的“顺风车”，临时将LiveScript改名为JavaScript，所以从本质上讲，JavaScript和Java是没有什么关系的。 因为网景公司开发的JavaScript 1.0获得了巨大的成功，一年后微软迫于竞争对手的压力模仿JavaScript开发了JScript。为了让JavaScript标准化，微软、网景、ScriptEase等公司联合ECMA(欧洲计算机制造商协会)组织定制了JavaScript语言的标准，称为ECMAScript标准。虽然JavaScript和ECMAScript通常被人们用于表达相同的意思，但JavaScript的含义比ECMA262中规定的多得多。一个完整的JavaScript实现由ECMAScript(语法标准，核心)、BOM浏览器对象模型、DOM文档对象模型3个部分组成。 由于ECMA262定义的ECMAScript只是这门语言的基础，与Web浏览器没有依赖关系，Web浏览器只是ECMAScript实现可能的宿主环境之一，因此，在ECMAScript基础上，Web浏览器就可能构建出更完善的脚本语言，不仅提供了基本的JavaScript的实现，还提供了该语言的扩展，如BOM、DOM。 JavaScript的ECMAScript标准在不断发展，平时讲到JavaScript版本，实际上就是说它是实现了ECMAScript标准的哪个版本。 1997年7月，ECMAScript 1.0发布，实质上与Netscape的JavaScript 1.0相同，只是做了一些小改动，支持Unicode标准，对象与平台无关。 2009年12月，ECMAScript 5.0正式发布。它添加了新功能，包括原生JSON对象、继承的方法和高级属性定义以及严格模式。 2011年6月，ECMAScript 5.1发布并且成为ISO国际标准。 2015年6月，ECMAScript 6.0正式发布，并更名为ECMAScript 2015。ECMAScript 6.0的目标是使JavaScript语言可以用来编写大型的、复杂的应用程序，称为企业级开发语言。 2020年6月，发布ECMA262(第11版)，即ECMAScript 2020通用编程语言的标准。 1.3JavaScript的功能 通过JavaScript脚本，主要实现两项功能： 对DOM(HTML)的增删改查、对事件(event)的响应和处理。例如，单击图12购物车中的“删除”图标，可以删除选购的商品。光标滑过图13所示的选项卡，可以切换扫码登录或账户登录的界面。 图12购物车的删除功能 下面通过案例来体验一下JavaScript的用途。 【例11】打开页面，输出“hello world!”，如图14所示。 分析： 最简单的实现方式，就是把输出内容写在标签内。 图13登录切换功能 图14页面输出一条信息 参考代码： hello world! 【例12】在例11静态页面的基础上，输出1万条“hello world！”的信息，如图15所示。 图15输出多条记录 分析： 如果直接用制作静态网页的方式去实现，必然存在一定困难，需要在标签内输入1万条“hello world！”。显然，这种方式是极其低效的。但是用JavaScript循环语句实现就简单多了，只需保存几行代码，而且文件相对比较小。需要注意，在HTML内嵌入JavaScript语句，需要用 1.4JavaScript运行环境 浏览器内置JavaScript代码解释器，所以安装浏览器后就可以运行JavaScript代码。不同的浏览器，解释器可能存在差异。本书的案例是使用Google Chrome浏览器进行测试与调试的。 JavaScript的执行流程如图16所示。用户通过浏览器的地址栏输入页面的地址，向服务器发出请求，请求查找包含JavaScript代码的页面。服务器接到请求后，返回保存在服务器上包含JavaScript的源文件。需要注意的是，服务端不进行JavaScript代码的处理，其只完成查找、传递JavaScript源文件的任务。当请求的网页返回浏览器端后，浏览器进行解析、渲染HTML+CSS+JavaScript代码。JavaScript代码运行在浏览器端，故属于客户端的脚本。 图16JavaScript执行流程 1.5JavaScript代码位置 在网页中引用JavaScript有3种方式。 （1） 内嵌。将内容直接写在HTML标签中，该方式不常用。例如： （2） 内置。在和标签的任何位置嵌入“” 代码。 （3） 外联。导入外部JavaScript文件。在HTML文档中，用标签引用。其中×××.js 是单独保存的JavaScript文件。使用外部脚本的优点是可实现页面内容和功能的分离，代码结构清晰，易于维护。 【例13】在网页中用3种方式引用JavaScript。 参考代码： jsFile.js文件内容如下。 //外部JavaScript文件 alert("成功导入JavaScript文件") ; 注意： HTML文档的解析顺序是自上向下，此时因为JavaScript代码放置的位置不同，会产生不同的运行结果。 (1) 放置在标签内。由于HTML文档是由浏览器从上往下依次载入的，故在执行JavaScript代码时，由于HTML元素还未载入，此时是无法操作HTML元素的。 (2) 放置在的结束标签前，可改善页面显示速度，因为脚本编译会拖慢显示。 一般情况下，建议把JavaScript代码放在之前。如果要放置在标签内，最佳解决方案是用window对象的onload事件控制JavaScript代码的执行时机。当网页代码加载完成时，才触发JavaScript运行代码。 1.6JavaScript代码调试 代码调试是将编写好的程序进行测试，对测试结果中出现的错误进行分析，找出原因和具体的位置，并进行纠正，这是保证代码正确性必不可少的步骤。调试PC端JavaScript代码的方式有很多种，可以通过以下方式进行。 1. 通过Console（控制台）查看代码运行情况 专业开发人员编写代码时，需要不停调试与测试。JavaScript代码运行后，可以切换到Console(控制台)进行调试。打开Google Chrome控制台的快捷键是F12。 假设在file.js源文件的末尾添加一句代码： alert(a); //a为变量，但没赋值 运行例13.html代码，在Console控制台就会显示对应错误的提示，如图17所示。需要注意的是，不是所有错误都能在控制台中正确显示出来。 图17控制台错误提示 2. 通过console.log()在Console控制台打印信息 假设在调试过程中需要查看中间过程的信息，可通过在JavaScript中添加console.log(msg)语句，把输出结果显示在控制台。msg为需要在控制台打印的信息(如变量值)。运行程序后，打开浏览器并按F12键，即可在控制台查看到打印的信息。 【例14】获取id="zcool"的元素，并通过console.log打印该元素、元素的href属性以及元素的文本内容，如图18所示。 参考代码： 站酷 图18在控制台打印信息 3. 通过alert弹出窗口查看信息 alert与console.log一样，alert通过在JavaScript中添加alert(msg)进行调试，msg为需要在弹出窗口中显示的信息。 例如，例14的JavaScript代码可修改如下。 需要注意的是，弹窗是强制阻塞，只有关闭窗口，才能解除阻塞，因此需要谨慎使用。 4. 通过Sources选项卡设置断点进行程序调试 Sources选项卡的左边是内容源，包括页面中的各种资源。中间区域展示左边资源文件的内容。右边是调试功能区，最上面的一排按钮分别是暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用所有断点。下面是各种具体的功能区，如图19所示。注意，左右两边的区域默认收缩在两侧没有显示出来，单击两侧的“伸缩”按钮可展示出来。 图19Google Chrome的Sources选项卡 通过左边的内容源，打开对应的JavaScript文件。单击文件的行号，就可以设置和删除断点。添加的每个断点都会出现在右侧调试区的Breakpoints列表中，单击列表中的断点就会定位到内容区的断点上。对于每个已添加的断点都有两种状态： 激活和禁用。刚添加的断点都是激活状态，禁用状态就是保留断点但临时取消该断点功能。 也可以设置条件断点。在断点位置的右键菜单中选择Edit Breakpoint命令设置触发断点的条件，就是写一个表达式，表达式的值为 true 时才触发断点。 5. 通过Network选项卡查看页面加载过程 查看HTTP请求后可得到的各个请求资源的详细信息，如状态、资源类型、大小、所用时间等，可以根据这个进行网络性能优化，如图110所示。 图110Google Chrome的Network选项卡 但在开发移动端应用时，不像开发PC端那样可以在控制台中查看各种网络请求，以及打印的日志，但可以借助微信团队开发的移动端调试器vconsole。