JavaScript-程序设计基础教程完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx

《JavaScript-程序设计基础教程完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx》由会员分享，可在线阅读，更多相关《JavaScript-程序设计基础教程完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx（537页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1.1 1.1 什么是什么是JavaScript? JavaScript? 1.2 JavaScript1.2 JavaScript与与JavaJava的区别的区别1.3 JavaScript1.3 JavaScript能做什么能做什么? ?1.4 JavaScript1.4 JavaScript不能做什么不能做什么? ?1.5 JavaScript1.5 JavaScript实现实现1.6 1.6 搭建搭建JavaScriptJavaScript环境环境1.7 1.7 编写第一个编写第一个JavaScriptJavaScript程序程序1.8 1.8 小结小结1.1 什么是JavaScrip

2、t? JavaScript JavaScript是一种基于对象（是一种基于对象（ObjectObject）和事件驱动（）和事件驱动（Event Event DrivenDriven）并具有安全性能的脚本语言。使用它的目的是与）并具有安全性能的脚本语言。使用它的目的是与HTMLHTML（超文本标记语言）、（超文本标记语言）、JavaJava脚本语言（脚本语言（JavaJava小程序）一起实现小程序）一起实现在一个在一个WebWeb页面中链接多个对象，与页面中链接多个对象，与WebWeb客户交互，从而可以开客户交互，从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的发客户端的应用程序等。它

3、是通过嵌入或调入在标准的HTMLHTML实实现的。它的出现弥补了现的。它的出现弥补了HTMLHTML的缺陷，它是的缺陷，它是JavaJava与与HTMLHTML折中的选折中的选择，具有以下几个基本特点。择，具有以下几个基本特点。1 1简单性简单性 JavaScript JavaScript的简单性主要体现在：首先，它是一种基于的简单性主要体现在：首先，它是一种基于JavaJava基本语句和控制流之上的简单而紧凑的设计，从而对学基本语句和控制流之上的简单而紧凑的设计，从而对学习习JavaJava是一种非常好的过渡；其次，它的变量类型采用弱类是一种非常好的过渡；其次，它的变量类型采用弱类型，并未使

4、用严格的数据类型。型，并未使用严格的数据类型。2 2动态性动态性 JavaScript JavaScript是动态的，它可以直接对用户或客户输入做是动态的，它可以直接对用户或客户输入做出响应，无须经过出响应，无须经过WebWeb服务程序。服务程序。 它对用户的响应，是采用以事件驱动的方式进行的。在它对用户的响应，是采用以事件驱动的方式进行的。在主页（主页（Home PageHome Page）中执行了某种操作所产生的动作称为）中执行了某种操作所产生的动作称为“事事件件”（EventEvent）。）。3 3跨平台性跨平台性 JavaScript JavaScript依赖于浏览器本身，与操作环境无

5、关，只要有依赖于浏览器本身，与操作环境无关，只要有能运行浏览器的计算机，以及支持能运行浏览器的计算机，以及支持JavaScriptJavaScript的浏览器就可以的浏览器就可以正确执行。从而实现了正确执行。从而实现了“编写一次，走遍天下编写一次，走遍天下”的梦想。的梦想。4 4节省服务器的开销节省服务器的开销 JavaScript JavaScript是一种基于客户端的语言，用户在浏览过程中是一种基于客户端的语言，用户在浏览过程中进行填表、验证等交互过程只需通过浏览器调入进行填表、验证等交互过程只需通过浏览器调入HTMLHTML文档中的文档中的JavaScriptJavaScript源代码来

6、进行解释，并执行已经编好的源代码来进行解释，并执行已经编好的JavaScriptJavaScript的相应程序来完成即可，大大减少了服务器的资源消耗。的相应程序来完成即可，大大减少了服务器的资源消耗。1.2 JavaScript与Java的区别1 1基于对象和面向对象基于对象和面向对象 Java Java是一种真正的面向对象的语言，即使是开发简单的是一种真正的面向对象的语言，即使是开发简单的程序，也必须设计对象。程序，也必须设计对象。 JavaScript JavaScript是种脚本语言，它可以用来制作与网络无关是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于

7、对象和事件的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。设计人员使用。2 2解释和编译解释和编译 两种语言在浏览器中所执行的方式不一样。两种语言在浏览器中所执行的方式不一样。JavaJava的源代的源代码在传递到客户端执行之前，必须经过编译，因而客户端上码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器。必须具有相应平台上的仿真器或解释器。 JavaScript JavaScript的源代码在发往客户端执行之前不需经过编的源代码在发往客

8、户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。执行。3 3强变量和弱变量强变量和弱变量 两种语言所采取的变量是不一样的。两种语言所采取的变量是不一样的。 Java Java采用强类型变量检查，即所有变量在编译之前必须采用强类型变量检查，即所有变量在编译之前必须做声明。做声明。 JavaScript JavaScript中的变量声明，采用弱类型，即变量在使用中的变量声明，采用弱类型，即变量在使用前不需做声明，而是解释器在运行时检查其数据类型。前不需做声明，而是解释器在运行时检查其数据类型。4 4代码格式不一样代

9、码格式不一样 Java Java是一种与是一种与HTMLHTML无关的格式，必须通过像无关的格式，必须通过像HTMLHTML中引用外中引用外媒体那样进行装载，其代码以字节代码的形式保存在独立的文媒体那样进行装载，其代码以字节代码的形式保存在独立的文档中。档中。 JavaScript JavaScript的代码是一种文本字符格式，可以直接嵌入的代码是一种文本字符格式，可以直接嵌入HTMLHTML文档中，并且可动态装载。编写文档中，并且可动态装载。编写HTMLHTML文档就像编辑文本文文档就像编辑文本文件一样方便。件一样方便。5 5嵌入方式不一样嵌入方式不一样 在在HTMLHTML文档中，两种编程

10、语言的标识不同，文档中，两种编程语言的标识不同，JavaScriptJavaScript使使用用.来标识，而来标识，而JavaJava使用使用./ .applet来标识。来标识。 6 6静态联编和动态联编静态联编和动态联编 Java Java采用静态联编，即采用静态联编，即JavaJava的对象引用必须在编译时进行，的对象引用必须在编译时进行，以使编译器能够实现强类型检查。以使编译器能够实现强类型检查。 JavaScript JavaScript采用动态联编，即采用动态联编，即JavaScriptJavaScript的对象引用在运的对象引用在运行时进行检查。行时进行检查。 1.3 JavaSc

11、ript能做什么? 用用JavaScriptJavaScript可以做许多事情，使网页更具交互性，为站可以做许多事情，使网页更具交互性，为站点的用户提供更好、更令人兴奋的体验。点的用户提供更好、更令人兴奋的体验。JavaScriptJavaScript可以创建可以创建活跃的用户界面，当用户在页面间浏览时向他们提供反馈。活跃的用户界面，当用户在页面间浏览时向他们提供反馈。 例如：使用例如：使用JavaScriptJavaScript的翻转器技术，实现当鼠标指针停的翻转器技术，实现当鼠标指针停留在页面按钮上时，会突出显示按钮。还可以使用留在页面按钮上时，会突出显示按钮。还可以使用JavaScrip

12、tJavaScript来确保用户以表单形式输入有效的信息，如果表单需要进行一来确保用户以表单形式输入有效的信息，如果表单需要进行一些校验工作，那么可以在用户机器上用些校验工作，那么可以在用户机器上用JavaScriptJavaScript来完成，而来完成，而不需要任何服务器端处理。不需要任何服务器端处理。 另外，使用另外，使用JavaScriptJavaScript，根据用户的操作可以创建自定，根据用户的操作可以创建自定义的义的WebWeb页面。假设用户正在访问一个美食站点，单击某个页面。假设用户正在访问一个美食站点，单击某个美食，可以在一个新窗口中显示该美食的相关信息。美食，可以在一个新窗口

13、中显示该美食的相关信息。 JavaScript JavaScript可以控制浏览器，可以打开新窗口、显示警可以控制浏览器，可以打开新窗口、显示警告框，还可以在浏览器窗口的状态栏中显示自定义的消息。告框，还可以在浏览器窗口的状态栏中显示自定义的消息。除此之外，除此之外，JavaScriptJavaScript还可以处理表单、设置还可以处理表单、设置cookiecookie，即时，即时构建构建HTMLHTML页面以及创建基于页面以及创建基于WebWeb的应用程序。的应用程序。 1.4 JavaScript不能做什么? JavaScript JavaScript是一种客户端语言。也就是说，设计它的目

14、是一种客户端语言。也就是说，设计它的目的是在用户的计算机上，而不是服务器上执行任务。因此，的是在用户的计算机上，而不是服务器上执行任务。因此，JavaScriptJavaScript有如下一些固有的限制。有如下一些固有的限制。 JavaScript JavaScript不允许写服务器上的文件。不允许写服务器上的文件。 JavaScript JavaScript不能关闭不是由它自己打开的窗口。不能关闭不是由它自己打开的窗口。 JavaScript JavaScript不能从来自另一个服务器的已经打开的网页不能从来自另一个服务器的已经打开的网页中读取信息。中读取信息。1.5 JavaScript实

15、现 一个完整的一个完整的JavaScriptJavaScript实现由实现由3 3个不同部分组成：核心个不同部分组成：核心（ECMAScriptECMAScript）、文档对象模型（）、文档对象模型（DOMDOM）和浏览器对象模型）和浏览器对象模型（BOMBOM），如图），如图1.11.1所示。所示。图1.1 JavaScript实现 1 1ECMAScriptECMAScript ECMAScript ECMAScript是一种通过是一种通过ECMA-262ECMA-262标准化的脚本程序设标准化的脚本程序设计语言。它可以为不同种类的宿主环境提供核心的脚本编程计语言。它可以为不同种类的宿主环

16、境提供核心的脚本编程能力。也就是说能力。也就是说ECMAScriptECMAScript描述了语言的语法和基本对象。描述了语言的语法和基本对象。它并不与任何具体浏览器相绑定，实际上，它也没有提到用它并不与任何具体浏览器相绑定，实际上，它也没有提到用于任何用户输入输出的方法（这点与于任何用户输入输出的方法（这点与C C这类语言不同，它需要这类语言不同，它需要依赖外部的库来完成这类任务）。依赖外部的库来完成这类任务）。 浏览器中的浏览器中的ECMAScriptECMAScript添加了与添加了与DOMDOM的接口，可以通过的接口，可以通过脚本改变网页的内容、结构和样式。脚本改变网页的内容、结构和样

17、式。2 2DOMDOM DOM DOM是是HTMLHTML和和XMLXML的应用程序接口（的应用程序接口（APIAPI）。）。DOMDOM将把整个将把整个页面规划成由节点层级构成的文档。页面规划成由节点层级构成的文档。HTMLHTML或或XMLXML页面的每个部页面的每个部分都是一个节点的衍生物。看下面的分都是一个节点的衍生物。看下面的HTMLHTML页面。页面。 Sample Page Sample Page hello world! hello world! 这段代码可以用这段代码可以用DOMDOM绘制成一个节点层次图，如图绘制成一个节点层次图，如图1.21.2所所示。示。图1.2 1.2

18、 节点层次图 DOM DOM将整个页面规划成由节点层次构成的文档，从而使开将整个页面规划成由节点层次构成的文档，从而使开发者对文档的内容和结构有很好的控制，可以很方便地删除、发者对文档的内容和结构有很好的控制，可以很方便地删除、添加和替换节点。添加和替换节点。3 3BOMBOM BOM BOM主要处理浏览器窗口和框架，不过通常浏览器特定的主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScriptJavaScript扩展都被看作扩展都被看作 BOM BOM 的一部分。这些扩展包括：的一部分。这些扩展包括： 弹出新的浏览器窗口；弹出新的浏览器窗口； 移动、关闭浏览器窗口以及调整窗口大小；移

19、动、关闭浏览器窗口以及调整窗口大小； 提供提供 Web Web 浏览器详细信息的定位对象；浏览器详细信息的定位对象； 提供用户屏幕分辨率详细信息的屏幕对象；提供用户屏幕分辨率详细信息的屏幕对象； 对对 cookie cookie 的支持；的支持； IE IE 扩展了扩展了BOMBOM，加入了，加入了ActiveXObjectActiveXObject类，可以通过类，可以通过JavaScriptJavaScript实例化实例化ActiveXActiveX对象。对象。1.6 搭建JavaScript环境 相比其他语言，相比其他语言，JavaScriptJavaScript的优势之一在于不用安装或配

20、的优势之一在于不用安装或配置任何复杂的环境就可以开始学习。每台计算机上都已具备所置任何复杂的环境就可以开始学习。每台计算机上都已具备所需的环境，哪怕使用者从未写过一行代码。有浏览器足矣！需的环境，哪怕使用者从未写过一行代码。有浏览器足矣！ 为了运行本书中的示例代码，建议安装为了运行本书中的示例代码，建议安装ChromeChrome或或FirefoxFirefox浏浏览器，一个合适的编辑器（如览器，一个合适的编辑器（如Sublime TextSublime Text或或NotePad+NotePad+），以），以及一个及一个WebWeb服务器（服务器（WAMPWAMP或或XAMPPXAMPP，这

21、一步是可选的）。，这一步是可选的）。1.6.1 1.6.1 浏览器浏览器 浏览器是最简单的开发环境。浏览器是最简单的开发环境。ChromeChrome浏览器或者浏览器或者FirefoxFirefox浏浏览器是最常用的。如果使用览器是最常用的。如果使用FirefoxFirefox浏览器，需要安装浏览器，需要安装FirebugFirebug插件，安装完成后，在浏览器的右上角会看到一个图标，如图插件，安装完成后，在浏览器的右上角会看到一个图标，如图1.31.3所示。所示。图1 1.3 Firebug插件图标 单击单击FirebugFirebug图标，打开浏览器控制台，在命令行区域图标，打开浏览器控制

22、台，在命令行区域中编写所有中编写所有JavaScriptJavaScript代码，如图代码，如图1.41.4所示（执行源代码可所示（执行源代码可以单击以单击“运行运行”按钮）。按钮）。图1.4 Firefox浏览器控制台编码 也可以扩展命令行，来适应也可以扩展命令行，来适应FirebugFirebug插件的整个可用区域。插件的整个可用区域。 使用使用ChromeChrome浏览器也是可以的，浏览器也是可以的，ChromeChrome已经集成了已经集成了Google Google Developer ToolsDeveloper Tools（谷歌开发者工具）。（谷歌开发者工具）。 打开打开Chr

23、omeChrome，单击设置及控制图标，选中更多工具，单击设置及控制图标，选中更多工具| |开发者开发者工具（英文为工具（英文为Tools| Developer ToolsTools| Developer Tools），如图），如图1.51.5所示（执行所示（执行源代码可按【源代码可按【EnterEnter】键）。】键）。图1.5 Chrome浏览器控制台编码1.6.2 Web1.6.2 Web服务器（服务器（WAMPWAMP） 安装安装WAMPWAMP，然后在，然后在WAMPWAMP安装文件夹下找到安装文件夹下找到htdocshtdocs目录。在目录。在该目录下新建一个文件夹，就可以在里面执

24、行本书中所讲述的该目录下新建一个文件夹，就可以在里面执行本书中所讲述的源代码，或直接将示例代码下载后提取到此目录。源代码，或直接将示例代码下载后提取到此目录。 接下来，在启动接下来，在启动WAMPWAMP服务器后，就可以通过服务器后，就可以通过localhostlocalhost这这个个URLURL，用浏览器访问源代码，注意别忘了打开，用浏览器访问源代码，注意别忘了打开FirebugFirebug或谷歌或谷歌开发者工具查看输出。开发者工具查看输出。1.7 编写第一个JavaScript程序 学习学习JavaScriptJavaScript或者其他新技术的最佳方法都是一样的，或者其他新技术的最佳

25、方法都是一样的，要多写多练。每一个范例都务必弄懂并亲自编写。要多写多练。每一个范例都务必弄懂并亲自编写。 下面通过一个例子：脚本下面通过一个例子：脚本1-11-1，编写第一个，编写第一个JavaScriptJavaScript程程序。通过它可以说明序。通过它可以说明JavaScriptJavaScript的脚本是怎样被嵌入到的脚本是怎样被嵌入到HTMLHTML文档中的。文档中的。 脚本1-1.html/ JavaScript Appears here/ JavaScript Appears herealert(这是第一个JavaScript例子!);alert(欢迎你进入JavaScript世

26、界!); 上例是一个上例是一个HTMLHTML文档，其标识格式为标准的文档，其标识格式为标准的HTMLHTML格式。格式。如同如同HTMLHTML一样，一样，JavaScriptJavaScript程序代码是一些可用字处理软件程序代码是一些可用字处理软件浏览的文件，它在描述页面的浏览的文件，它在描述页面的HTMLHTML相关区域出现。相关区域出现。alert()alert()是是JavaScriptJavaScript的窗口对象方法，其功能是弹出一个具有的窗口对象方法，其功能是弹出一个具有“确定确定”按钮的对话框，并显示按钮的对话框，并显示()()中的字符串。中的字符串。/用来标识注释，注用来

27、标识注释，注释内容不会被执行。使用注释是一个好的编程习惯，它使其释内容不会被执行。使用注释是一个好的编程习惯，它使其他人可以读懂你的代码。他人可以读懂你的代码。JavaScriptJavaScript以以标签结束。标签结束。从上面的实例分析中可以看出，编写一个从上面的实例分析中可以看出，编写一个JavaScriptJavaScript程序是程序是非常容易的。非常容易的。 运行这个实例分别弹出两个窗口，如图运行这个实例分别弹出两个窗口，如图1.61.6和图和图1.71.7所示。所示。图1.6 第一个JavaScript程序弹窗1图1.7 第一个JavaScript程序弹窗2 1.8 小结 Jav

28、aScript JavaScript是一种专为网页交互而设计的脚本语言。本是一种专为网页交互而设计的脚本语言。本章主要介绍了章主要介绍了JavaScriptJavaScript的实现、的实现、JavaScriptJavaScript的主要特点、的主要特点、JavaScriptJavaScript能做哪些事和不能做哪些事以及常用的两种开发能做哪些事和不能做哪些事以及常用的两种开发环境，最后以一个实例介绍了环境，最后以一个实例介绍了JavaScriptJavaScript在在HTMLHTML文档中的使文档中的使用。通过这一章的学习，应该对用。通过这一章的学习，应该对JavaScriptJavaSc

29、ript有一个清晰的认有一个清晰的认识。下一章将详细介绍识。下一章将详细介绍JavaScriptJavaScript基础知识。基础知识。2.1 JavaScript2.1 JavaScript在在HTMLHTML中的使用中的使用 2.2 JavaScript2.2 JavaScript代码调试方式代码调试方式2.3 2.3 语句语句2.4 2.4 变量变量2.5 2.5 数据类型数据类型2.6 2.6 表达式和运算符表达式和运算符2.7 2.7 关键字及保留字关键字及保留字2.8 2.8 正则表达式正则表达式2.9 2.9 注释注释2.10 2.10 实战实战2.11 2.11 小结小结 简单

30、了解一下简单了解一下HTMLHTML的常见标签，为后面各章节的常见标签，为后面各章节JavaScriptJavaScript的学习做好准备。的学习做好准备。HTMLHTML常用标签及属性如表常用标签及属性如表2.12.1所示。所示。标签/ /属性释义html描述网页head描述网页头部script存放JavaScript脚本body网页可见页面内容h1.h6页面内容标题a链接标签，定义锚src规定外部脚本文件的URLtitle网页标题表2.1 HTML2.1 HTML常用标签及属性2.1 JavaScript2.1 JavaScript在在HTMLHTML中的使用中的使用 JavaScript

31、 JavaScript在在HTMLHTML中有两种存放方式：直接在页面上嵌中有两种存放方式：直接在页面上嵌入入JavaScriptJavaScript代码、引用独立的代码、引用独立的jsjs文件。文件。1 1直接在页面上嵌入直接在页面上嵌入JavaScriptJavaScript代码代码在HTML中使用JavaScriptalert(Hello World!);脚本2-1.html 在上面的代码中，将在上面的代码中，将JavaScriptJavaScript脚本直接放在脚本直接放在HTMLHTML的的标签之间，保存为标签之间，保存为HTMLHTML文件，运行文件，运行HTMLHTML文件，文件

32、，弹出一个对话框，如图弹出一个对话框，如图2.12.1所示。所示。图2.1 弹出对话框2 2引用独立的引用独立的jsjs文件文件 示例代码如脚本示例代码如脚本2-22-2所示。所示。（1 1）先创建）先创建HTMLHTML文件。文件。在HTML中使用JavaScript脚本2-2.html（2 2）紧接着我们需要创建一个）紧接着我们需要创建一个JavaScriptJavaScript文件文件test-01.jstest-01.js，示例代码如下所示。示例代码如下所示。test-01.jstest-01.jsalert(Hello World!);alert(Hello World!);（3 3

33、）运行）运行HTMLHTML代码，结果如图代码，结果如图2.22.2所示。所示。图2.2 运行结果2.2 JavaScript2.2 JavaScript代码调试方式代码调试方式（1 1）使用）使用alert()alert()弹出警告框，示例代码如脚本弹出警告框，示例代码如脚本2-52-5所示。所示。 在JavaScript中使用警告框 alert(5+6); 脚本2-5.html 运行上面运行上面HTMLHTML代码，浏览器显示结果如图代码，浏览器显示结果如图2.52.5所示。所示。图2.5 alert弹出警告框 在JavaScript中使用document.write()方法 docume

34、nt.write(Date(); 脚本2-6.html 运行上面运行上面HTMLHTML代码，浏览器显示结果如图代码，浏览器显示结果如图2.62.6所示。所示。图2.6 document.write()显示结果（3 3）使用）使用console.log()console.log()写入到浏览器控制台，示例代码写入到浏览器控制台，示例代码如脚本如脚本2-72-7所示。所示。脚本2-7.html 在JavaScript中使用console.log()方法 a = 5; b = 6; c = a + b; console.log(c); 运行上面运行上面HTMLHTML代码，浏览器显示结果如图代码，

35、浏览器显示结果如图2.72.7所示。所示。图2.7 console.log()显示结果 比较这比较这3 3种调试技巧，种调试技巧，console.log()console.log()是一种更好的方是一种更好的方式，在实际应用中，更受开发人员的青睐。对比分析如下。式，在实际应用中，更受开发人员的青睐。对比分析如下。（1 1）如果在文档已完成加载后执行）如果在文档已完成加载后执行document.writedocument.write，整，整个个HTMLHTML页面将被覆盖，对程序的执行造成不便。页面将被覆盖，对程序的执行造成不便。（2 2）alert()alert()函数会阻断函数会阻断Java

36、ScriptJavaScript程序的执行，从而出程序的执行，从而出现副作用，而且使用现副作用，而且使用alert()alert()方法需要单击弹出窗的确认按方法需要单击弹出窗的确认按钮，操作麻烦，最重要的是钮，操作麻烦，最重要的是alert()alert()只能输出字符串。只能输出字符串。（3 3）console.log()console.log()仅在控制台打印相关信息，不会对仅在控制台打印相关信息，不会对JavaScriptJavaScript程序执行造成阻隔，此外，程序执行造成阻隔，此外，console.log()console.log()可以可以接受任何字符串、数字和接受任何字符串、

37、数字和JavaScriptJavaScript对象，可以看到清楚对象，可以看到清楚的对象属性结构，在的对象属性结构，在ajaxajax返回返回jsonjson数组对象时调试很方便。数组对象时调试很方便。2.3 语句 JavaScript JavaScript语句是向浏览器发出的命令。语句的作用是告语句是向浏览器发出的命令。语句的作用是告诉浏览器该做什么。下面的诉浏览器该做什么。下面的JavaScriptJavaScript语句将语句将“1+2”“1+2”的值赋给的值赋给变量变量a a，也叫变量赋值。，也叫变量赋值。var a = 1+2;var a = 1+2; var var是变量声明命令，

38、这里声明了变量是变量声明命令，这里声明了变量a a，然后将，然后将1+21+2的计算的计算结果赋值给变量结果赋值给变量a a。 1+2 1+2在在JavaScriptJavaScript中叫表达式，会返回一个计算结果。表达中叫表达式，会返回一个计算结果。表达式和语句的区别在于：表达式由运算符构成，并运算产生结果的式和语句的区别在于：表达式由运算符构成，并运算产生结果的语法结构，每个表达式都会返回一个值。而语句主要是为了进行语法结构，每个表达式都会返回一个值。而语句主要是为了进行某种操作，一般情况下不需要返回值。某种操作，一般情况下不需要返回值。 语句以分号结尾。一个分号代表一条语句结束。多条语

39、句语句以分号结尾。一个分号代表一条语句结束。多条语句可以写在一行内，如：可以写在一行内，如：var a = 1+2; var b = abc;var a = 1+2; var b = abc; 2.4 变量2.4.1 2.4.1 变量的概念变量的概念 在日常生活中，有些东西是固定不变的，而有些东西则在日常生活中，有些东西是固定不变的，而有些东西则会发生很多变化，如天气、时间等。在程序设计语言中，约会发生很多变化，如天气、时间等。在程序设计语言中，约定俗成将这些会改变的东西称之为变量。定俗成将这些会改变的东西称之为变量。 同代数一样，同代数一样，JavaScriptJavaScript变量可用于

40、存放值和表达式。变量可用于存放值和表达式。变量的命名遵循以下原则：变量的命名遵循以下原则： （1 1）变量必须以字母开头；）变量必须以字母开头；（2 2）变量也能以）变量也能以$ $和和_ _开头（不过不推荐这么做）；开头（不过不推荐这么做）；（3 3）变量名不能包含空格或其他标点符号；）变量名不能包含空格或其他标点符号；（4 4）变量名称对大小写敏感（）变量名称对大小写敏感（a a和和A A是不同的变量）。是不同的变量）。2.4.2 2.4.2 变量的类型变量的类型 JavaScript JavaScript是一种动态类型语言。变量的类型没有限制，是一种动态类型语言。变量的类型没有限制，可以

41、赋予各种类型的值。比如文本值（可以赋予各种类型的值。比如文本值（name=Johnname=John）。在）。在JavaScriptJavaScript中，类似中，类似JohnJohn这样一条文本被称为字符串。这样一条文本被称为字符串。 尽管尽管JavaScriptJavaScript变量有很多种类型，但是现在，我们只变量有很多种类型，但是现在，我们只需要关注数字和字符串两种类型。需要关注数字和字符串两种类型。 当向变量分配文本值时，应该用双引号或单引号来包围当向变量分配文本值时，应该用双引号或单引号来包围这个值。这个值。 当向变量赋的值是数值时，不要使用引号。如果用引号当向变量赋的值是数值时

42、，不要使用引号。如果用引号包围数值，该值会被作为文本来处理。包围数值，该值会被作为文本来处理。2.4.3 2.4.3 变量声明赋值变量声明赋值 在在JavaScriptJavaScript中，变量声明用关键词中，变量声明用关键词varvar，变量赋值用，变量赋值用= =。变量声明赋值其实是分开的两步操作，比如变量声明赋值其实是分开的两步操作，比如 var a = 1 var a = 1 这样一这样一条赋值语句实际的步骤是下面这样的：条赋值语句实际的步骤是下面这样的：var a; / var a; / 声明变量声明变量a aa = 1; / a = 1; / 给变量给变量a a赋值为赋值为1 1

43、 如果只是声明了变量如果只是声明了变量a a而没有给变量而没有给变量a a赋值，那么变量赋值，那么变量a a的值的值是是undefinedundefined。 变量必须声明之后才能使用，否则变量必须声明之后才能使用，否则JavaScriptJavaScript会报错：变会报错：变量未定义。量未定义。2.4.4 2.4.4 变量作用域变量作用域 JavaScript JavaScript变量分为全局变量和局部变量。变量分为全局变量和局部变量。 变量在函数内声明即为局部变量。局部变量有局部作用域：变量在函数内声明即为局部变量。局部变量有局部作用域：只能在函数内访问。只能在函数内访问。 变量在函数外

44、定义，即为全局变量。全局变量有全局作用变量在函数外定义，即为全局变量。全局变量有全局作用域：网页中所有脚本和函数均可使用。如果变量在函数内没有域：网页中所有脚本和函数均可使用。如果变量在函数内没有使用使用 var var 关键字声明，该变量也为全局变量。关键字声明，该变量也为全局变量。 变量生命周期：局部变量在函数开始执行时创建，函数执变量生命周期：局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁；全局变量在页面关闭后销毁。行完后局部变量会自动销毁；全局变量在页面关闭后销毁。 下面来看一个实例，如脚本下面来看一个实例，如脚本2-82-8所示。所示。全局变量和局部变量示例var a

45、= global;b = global;function testaFunction()var a = local;return a;function testbFunction()b = local;return b;console.log(a); / 1console.log(testaFunction(); / 2console.log(b); / 3console.log(testbFunction(); / 4console.log(b); / 5脚本2-8.html 运行脚本运行脚本2-82-8显示结果如图显示结果如图2.82.8所示。所示。图2.8 变量作用域示例结果2.4.5

46、2.4.5 变量提升变量提升 JavaScript JavaScript引擎工作方式是：先解析代码，获取所有被声引擎工作方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行代码。这样所有变量声明语明的变量，然后再一行一行地运行代码。这样所有变量声明语句都会被提升到代码头部执行。这就叫作变量提升。句都会被提升到代码头部执行。这就叫作变量提升。 先看一段简单的代码，如脚本先看一段简单的代码，如脚本2-92-9所示。所示。变量提升console.log(a);var a = 1;脚本2-9.html 按惯性逻辑来理解，首先在控制台打印出按惯性逻辑来理解，首先在控制台打印出a a的值，但这个

47、的值，但这个时候时候a a还未声明和赋值，所以应该会报错。但实际上并不会报还未声明和赋值，所以应该会报错。但实际上并不会报错，运行结果如图错，运行结果如图2.92.9所示。所示。图2.9 变量提升示例结果 因为存在变量提升，真正运行的是脚本因为存在变量提升，真正运行的是脚本2-102-10。变量提升var a;console.log(a);a = 1;脚本2-10.html 所以控制台显示的结果是所以控制台显示的结果是undefinedundefined，表明变量，表明变量a a已经声已经声明但未赋值。明但未赋值。 2.5 数据类型var a = 1;var a = 1;var b = abc

48、d;var b = abcd; 如上，变量如上，变量a a是数值类型，变量是数值类型，变量b b是字符串类型。虽然变是字符串类型。虽然变量量a a、b b是两种不同的数据类型，但在是两种不同的数据类型，但在JavaScriptJavaScript脚本中对它脚本中对它们声明和进行赋值的语法无任何区别。有些程序设计语言要们声明和进行赋值的语法无任何区别。有些程序设计语言要求程序员在声明变量的同时必须明确地指定其数据类型。像求程序员在声明变量的同时必须明确地指定其数据类型。像这种要求程序员必须明确地对数据类型做出声明的程序设计这种要求程序员必须明确地对数据类型做出声明的程序设计语言被称为强类型语言，

49、而像语言被称为强类型语言，而像JavaScriptJavaScript这样不要求声明数这样不要求声明数据类型的语言称为弱类型。据类型的语言称为弱类型。 所谓弱类型意味着程序员可随意改变某个变量的数据类所谓弱类型意味着程序员可随意改变某个变量的数据类型。型。 在在JavaScriptJavaScript中数据类型可分为两大类：基本数据类型中数据类型可分为两大类：基本数据类型和引用数据类型。和引用数据类型。 2.5.1 2.5.1 基本数据类型基本数据类型 JavaScript JavaScript中有中有5 5种基本数据类型，分别为字符串（种基本数据类型，分别为字符串（StringString）

50、类型、数值（类型、数值（NumberNumber）类型、布尔（）类型、布尔（BooleanBoolean）类型、）类型、NullNull类型、类型、UndefinedUndefined类型。类型。1 1StringString类型类型 String String类型用于表示由零或多个类型用于表示由零或多个1616位位UnicodeUnicode字符组成的字字符组成的字符序列，即字符串。字符串必须包括在引号之间，单引号和双符序列，即字符串。字符串必须包括在引号之间，单引号和双引号都可以。引号都可以。2 2NumberNumber类型类型 Number Number类型用来表示整数、浮点数值和另一