版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《网站前端技术》签到扫码下载文旌课堂APP扫码签到（2022.3.2515:00至2022.3.2515:10）签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。全课导航第1章网站建设概述第2章HTML与HTML5第3章CSS与CSS3第4章JavaScript基础第5章JQuery常用函数第6章开发者商务网站建设04PARTFOUR
第4章JavaScript基础01*12掌握JavaScript的作用和语法。掌握常量、变量、数据类型、运算符的使用方法。掌握常用的流程控制语句、函数和数组的使用方法。理解对象的使用方法，掌握常用的内置对象。理解正则表达式，掌握常见的正则表达式和相关方法。掌握DOM和BOM常用的方法。掌握JavaScript的相关知识，增加学生的知识储备。制作美丽的时钟，巩固所学理论知识，提升学生的实践能力。学习目标素质目标学习目标13浏览器对象模型BOM目录CONTNETS本章导航14综合案例——美丽的时钟07函数JavaScript常量与变量0305JavaScript运算符08数组10JavaScript内置对象11正则表达式12文档对象模型DOMJavaScript概述0109对象JavaScript语法02JavaScript数据类型04流程控制语句0601*01JavaScript概述01*4.1.1认识JavaScriptJavaScript是一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言，使用它可以开发Internet客户端的应用程序。它的解释器称为JavaScript引擎，是浏览器的一部分。JavaScript在HTML网页中以语句的形式出现，并执行相应操作，主要用于给HTML网页增加动态功能。不同于服务器端脚本语言，JavaScript作为可以直接在客户端浏览器上运行的脚本语言，有着其自身独特的功能和特点，具体如下。（1）简单性。JavaScript采用小程序段的方式实现编程，并提供了一个简易的开发过程。它的基本结构形式与C、C++、VB和Delphi十分类似，但它不像这些语言一样需要先编译，而是在程序运行过程中被逐行地解释。JavaScript与HTML标签结合在一起，从而方便用户使用和操作。（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。01*4.1.1认识JavaScript（3）动态性。JavaScript是动态的，它可以直接对用户输入做出响应，无须经过Web服务程序。它对用户的响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在网页中执行了某种操作所产生的动作，这些操作称为“事件”（Event）。例如，按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。（4）跨平台性。JavaScript是依赖于浏览器本身，与操作环境无关的脚本语言。也就是说，无论计算机是Windows操作系统还是其他操作系统，只要它能运行浏览器，且浏览器支持JavaScript，计算机就可以正确执行JavaScript脚本语言。（5）安全性。JavaScript是一种安全性语言，它不允许访问本地硬盘，且不能将数据存入服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。01*4.1.2JavaScript的作用JavaScript最广泛的应用毫无疑问是在web前端。目前，使用JavaScript实现的动态网页在Web前端随处可见。在网页制作过程中，JavaScript的作用如下。（1）将动态文本嵌入HTML页面。（2）对浏览器事件做出响应。（3）读写HTML元素。（4）在数据提交到服务器之前验证数据。（5）检测访客的浏览器信息。控制cookies，包括创建和修改等。（6）基于Node.js技术进行服务器端编程。01*4.1.3JavaScript代码嵌入HTML中的方法将JavaScript代码嵌入HTML文档中需要使用<script></script>标签，该标签可以放在HTML文档中的任意位置。但是，为了使页面代码结构清晰，设计者经常把含有JavaScript代码的<script></script>标签放置在HTML文档的<head></head>标签内。因为浏览器按照自上而下的顺序解析HTML文档，设计者需要确保JavaScript代码可以被优先解析。通常情况下，将JavaScript代码嵌入到HTML文档中的方法有三种，包括在HTML文档中直接嵌入JavaScript代码；连接外部JavaScript文件；作为特定标签的属性值使用。1．在HTML文档中直接嵌入JavaScript代码：在HTML文档中，将JavaScript代码直接放在<script></script>标签内，基本格式如下：<scriptlanguage="javascript"> JavaScript程序代码</script>01*4.1.3JavaScript代码嵌入HTML中的方法language属性用于设置所使用的脚本语言及版本。但是，在Web标准中，建议使用type属性代替language属性。【示例4-1-1】在HTML文档<head>标签内输入<script>标签，代码如下：<scriptlanguage="javascript"> alert("欢迎您的到来！");</script>【效果】页面加载后，弹出对话框，显示“欢迎您的到来！”，如图4-1-1所示。图4-1-1对话框显示效果01*4.1.3JavaScript代码嵌入HTML中的方法2．连接外部JavaScript文件：编写外部JavaScript文件（文件后缀名为.js），并通过<script>标签的src属性将该文件导入HTML文档中，基本格式如下：<scriptlanguage="javascript"src="JavaScript文件路径"></script>【示例4-1-2】新建ex40102.js文件并保存在网站的js目录中，接着在该文件中输入以下代码：alert("欢迎您的到来！");将ex40102.js文件导入HTML文档中，即在HTML文档<head>标签内输入<script>标签，代码如下：<scriptlanguage="javascript"src="js/ex40102.js"></script>【效果】页面加载后，同样弹出对话框，且显示“欢迎您的到来！”，如图4-1-1所示。01*4.1.3JavaScript代码嵌入HTML中的方法3．作为特定标签的属性值使用在<script></script>标签内或在外部JavaScript文件内定义函数，然后在某标签的某事件属性中引入函数名。【示例4-1-3】在HTML文档<head>标签内输入<script>标签，代码如下：<scriptlanguage="javascript"> functionfun(){alert("欢迎您的到来！"); }</script>在HTML文档<body>标签内输入<input>标签，代码如下：<inputtype="button"value="弹出信息"onClick="fun()"/>【效果】页面加载后，显示“弹出信息”按钮，如图4-1-2所示。单击该按钮后弹出对话框，且显示“欢迎您的到来！”，如图4-1-1所示。图4-1-2页面显示的“弹出信息”按钮02*02JavaScript语法02*4.2.1
JavaScript代码格式每条JavaScript代码语句以英文分号“;”作为结束标志。有时候也可以省略英文分号，以换行符作为语句结束的标志。JavaScript代码的编写比较自由，它一般会忽略分隔符，如空格符、制表符和换行符等。在保证不引起歧义的情况下，用户可以利用分隔符对脚本进行排版。为了增强程序可读性，方便进一步编辑和修改，排版建议一行只写一条语句，并在运算符前后各加一个空格。JavaScript代码的编写格式如下：vara1=20;varh=40;varsum;sum=a1+h;在书写JavaScript代码时，还应该注意以下几点。（1）在函数名、变量名等标识符中，不可以加入空白字符。（2）字符串和正则表达式的空白字符是其组成部分，JavaScript解释器将会保留。（3）编写代码时应根据结构进行缩进，提高程序的可读性。02*4.2.2
大小写规范JavaScript对字母的大小写是敏感的，它严格区分字母大小写，即在输入语言的关键字、函数名、变量和其他标识符时，必须采用正确的大小写形式。例如，定义变量时，China和china是两个不同的变量，在使用时一定要注意，防止出错，尤其是要保持变量定义和使用的一致性。02*4.2.3
注释JavaScript代码也有注释标记，可以对某一段代码进行注释，JavaScript解释器将忽略注释部分。和其他的程序语言相同，JavaScript的注释可以分为单行注释和多行注释。1．单行注释以“//”开头，其后的同一行内容为注释内容。2．多行注释以“/*”开头，以“*/”结尾，包含在该符号内的部分为注释内容。【示例4-2-1】在HTML文档<script>标签内输入以下代码：varx=30;//单行注释：定义名为x的变量，其初值为30vartext="网页设计";/*多行注释：定义名为text的变量，
并且其值为字符串“网页设计”*/代码第2行为单行注释行，代码第4、5行为多行注释行。小提示02*4.2.4
JavaScript中的保留字编程语言都有属于自己的保留字，一般在一些特殊场合使用这些单词。保留字都含有特定的含义，它们都不可以用作变量、标签或函数名。JavaScript中的保留字如表4-2-1所示。表4-2-1JavaScript中的保留字abstractbooleanbreakbyteCasecatchcharclassconstcontinuedefaultDeletedodoubleelseextendsfalsefinalFinallyfloatforfunctiongotoifimplementsImportininstanceofintinterfacelongnativeNewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowThrowstransientturetrytypeofvarvoidvolatilewhilewith02*4.2.5
输出方法JavaScript的输出方式有三种，即页面输出、控制台输出、弹窗输出。1．页面输出页面输出是根据用户动作触发事件将元素加载到页面上的。该输出方法采用函数document.write("要输出的内容")实现，其中“要输出的内容”中可以含有标签。【示例4-2-2】在HTML文档<script>标签内输入以下代码：document.write("<div>页面输出函数<div>");【效果】在页面添加<div>元素，内容为“页面输出函数”。2．控制台输出控制台输出是在控制台输出内容，应用于调试。它的代码实现格式为console.log("要输出的内容")，开发者常使用该函数设置断点测试程序。【示例4-2-3】在HTML文档<script>标签内输入以下代码：console.log("控制台消息");【效果】页面加载后，没有任何东西。单击F12，打开开发人员工具视图，选择“Console”（控制台）选项卡，便可以看到控制台中的输出内容“控制台消息”。02*4.2.5
输出方法3．弹窗输出弹窗输出是指在浏览器中弹出一个对话框，然后把要输出的内容展示出来。根据作用的不同，弹窗可分为警告框、确认框、提示框。（1）警告框alert("要输出的内容")可以弹出窗口，显示信息，并测试程序运行效果。【示例4-2-4】在HTML文档<script>标签内输入以下代码：alert("弹出框消息");【效果】当相关联的HTML页面加载或触发相关事件时，弹出警告框，内容为“弹出框消息”。不同的浏览器打开开发人员工具视图的方式略有不同。小提示（2）确认框confirm("要输出的内容")用于用户确认某项信息。确认框必须做出“确定”或“取消”操作后，才能让程序继续运行。当选择“确定”按钮则返回true，当选择“取消”按钮则返回false。02*4.2.5
输出方法【示例4-2-5】在HTML文档<script>标签内输入以下代码：vara=confirm("您是大学生吗？");if(a){ alert("欢迎您，您将是大学生俱乐部的一员！");}else{ alert("对不起，大学生俱乐部只接受大学生！")}【效果】页面加载后，弹出确认框“您是大学生吗？”，如图4-2-1（a）所示。当选择“确定”按钮，则弹出“欢迎您，您将是大学生俱乐部的一员！”，如图4-2-1（b）所示；当选择“取消”按钮，则弹出“对不起，大学生俱乐部只接受大学生！”，如图4-2-1（c）所示。图4-2-1确认框运行效果（a）（b）
（c）02*4.2.5
输出方法（3）提示框prompt("要输出的内容")用于弹出输入信息框，提示用户输入某种类型的数据，可以接收用户输入数据，并返回输入的信息。【示例4-2-6】在HTML文档<script>标签内输入以下代码：varname=prompt("请输入您的姓名");alert("您的姓名是"+name);【效果】页面加载后，弹出提示框，提示内容为“请输入您的姓名”，输入姓名“闫妮”，如图4-2-2（a）所示。此时，如果单击“确定”按钮，弹出“您的姓名是闫妮”，如图4-2-2（b）所示；如果单击“取消”按钮，弹出“您的姓名是null”，如图4-2-2（c）所示。（a）（b）
（c）图4-2-2提示框运行效果03*03JavaScript常量与变量03*4.3.1
常量每一种计算机语言都有自己的数据结构。在JavaScript中，常量和变量是数据结构的重要组成部分。常量是指在程序运行的过程中值不发生改变的数据。例如，“123”是数值型常量，“JavaScript脚本”是字符串型常量，“ture”或“false”是布尔型常量等。常量主要用于为程序提供固定的值或精确的值，使用const进行声明，其语法格式如下：const常量名称=常量值；03*4.3.2
变量变量是指程序中一个已经命名的存储单元，它的主要作用是为数据操作提供存放信息的容器。使用变量之前，首先需要了解变量的命名规则、声明方法及引用方法。1．变量的命名规则在JavaScript中，变量的命名规则如下。（1）变量名必须以字母或下划线（_）开头，不能以数字开头。（2）变量名可以包含字母、数字或下划线（_），不能包含空格、加号或减号等符号。（3）变量名不能使用JavaScript中的关键字或保留字。（4）变量名严格区分大小写。（5）见名知意，即变量名最好能够描述出变量中存储的信息含义。（6）可以依据个人习惯采用驼峰式命名法对变量命名。03*4.3.2
变量2．变量的声明方法在JavaScript语言规范里，要求变量在使用之前进行声明，声明变量的方法可以分为三种。（1）单变量声明。声明的变量只有一个，关键字为var或者let，它们的语法格式如下：var变量名称;或者let变量名称;驼峰式命名法是指混合使用大小写字母来构成变量和类的名字。分为小驼峰命名法和大驼峰命名法。（1）小驼峰命名法是指除第一个单词之外，其他单词首字母均大写，常用于定义变量名。（2）大驼峰命名法与小驼峰命名法类似，只是它把第一个单词的首字母也大写了，常用于定义类名。03*高手点拨
var声明的变量为全局变量并且可以重复声明；let声明的变量为局部变量且不可以重复声明。变量的数据类型由赋给变量的值决定03*4.3.2
变量（2）多变量声明。使用一个关键字var声明多个变量，其语法格式如下：var变量名称1,变量名称2,…,变量名称n;【示例4-3-1】在HTML文档<script>标签内输入以下代码：varName;【效果】该代码声明了一个变量Name。【示例4-3-2】在HTML文档<script>标签内输入以下代码：varname,gender;【效果】该代码声明了两个变量name和gender，变量名称之间用英文逗号“,”隔开。（3）边声明边赋值。在声明变量的同时对其赋值，即初始化，其语法格式如下：var变量名称=变量值;var变量名称1=变量值1,变量名称2=变量值2,…,变量名称n=变量值n;【示例4-3-3】
在HTML文档<script>标签内输入以下代码：varName="张三";varname="李四",gender="男";【效果】该代码声明了三个变量Name、name和gender，并分别对它们赋了初值。03*4.3.2
变量【示例4-3-4】
在HTML文档<script>标签内输入以下代码：varName="张三";varname="李四",gender="男";varstr="姓名："+name+"；性别："+gender;【效果】该代码声明了四个变量Name、name、gender和str。其中，变量str的值为字符串“姓名：李四；性别：男”。3．变量的引用方法在JavaScript语言规范里，变量在参与运算时直接引用变量名称即可。03*高手点拨
上述语句中变量name和gender参与了字符串运算。04*04JavaScript数据类型04*4.4JavaScript数据类型在JavaScript语言规范里，数据类型分为基本数据类型和复合数据类型两大类。基本数据类型包括数值型、字符串型、布尔型、未定义型和Null型；复合数据类型包括数组、对象和函数等。本节详细介绍JavaScript的基本数据类型，复合数据类型会在后面的章节详细介绍。JavaScript数据类型04*4.4.1数值型数值型是JavaScript中最基本的数据类型。在JavaScript中，所有的数值不区分整型和浮点型，全部都是由浮点型表示的。当一个数字直接出现在JavaScript程序中时，称它为数值直接量。JavaScript支持的数值直接量的形式有整型、浮点型。在任何数值直接量前面加负号（−）可以构成负数，但是负号是一元求反运算符，不是数值直接量语法的一部分。小提示1．整型整型数据有十进制、八进制和十六进制。十进制数据是一个由0～9组成的数字序列，如2、60、100等。JavaScript能够处理十进制的整型数据。04*4.4.1数值型虽然某些JavaScript实现允许采用八进制格式的整型数据，但是有些实现不支持，所以在实际的应用中最好不要使用八进制格式的整型数据。小提示十六进制数据是以“0X”或“0x”开头，其后跟一个十六进制的数字序列。该数字序列可以是0～9的某些数字，也可以是a（A）～f（F）的某些字母，还可以是数字和字母的组合，如0X123、0xfa、0X12ab等。这些数字和字母用来表示0～15的某个值。JavaScript能够识别十六进制的整型数据。【示例4-4-1】
在HTML文档<script>标签内输入以下代码：varnumber1=32,number2=-36,number3=010,number4=0x10;alert(typeof32);alert(typeof-32);alert(typeof(number3));alert(typeof(number4));04*4.4.1数值型在JavaScript语言规范里，表达式的数据类型可以通过typeof方法判断，其语法格式如下：typeof表达式或者typeof(表达式)小提示【效果】
页面中出现弹窗，内容为“number”，如图4-4-1所示。单击“确定”按钮，接着出现同样的弹窗（共出现4个）。测试变量的数据类型均为number类型。图4-4-1含有“number”的弹窗04*4.4.1数值型2．浮点型浮点型数据可以带有小数点，它的表示方法有两种。（1）传统计数法，将浮点数分为整数部分、小数点和小数部分，如1.5、2.445等。若整数部分为0，则可以省略整数部分，如.3、.456等。（2）科学计数法，即实数后跟字母e或E，后面加上一个带正号或负号的整数指数，其中正号可以省略，如4e+3、3.2e45、1.12E−11等。【示例4-4-2】在HTML文档<script>标签内输入以下代码：varfloat1=32.12,float2=-38.00;alert(typeof32.12);alert(typeof(float2));【效果】页面中出现弹窗，内容为“number”，单击“确定”按钮，接着出现一个弹窗，内容也为“number”，如图4-4-1所示。测试变量的数据类型均为number类型。04*4.4.2
字符串型字符串是由0个或多个字符组成的序列，它可以包含大小写字母、汉字、数字、标点符号或其他字符。字符串是JavaScript用来表示文本的数据类型。程序中，字符串数据包含在单引号或双引号中。如果字符串数据本身含有单引号或双引号，则用来包含该数据的符号应使用不同的引号。即如果字符串数据本身含有单引号，则使用双引号包含该数据；如果字符串数据本身含有双引号，则使用单引号包含该数据。简单地理解，就是外双内单或外单内双。有时，字符串数据中使用的引号会导致匹配混乱，如字符串"字符串包含在单引号'或双引号"中"。对于这种情况，必须使用转义字符。转义字符由“\”开始。使用转义字符不仅可以避免引号匹配混乱问题的出现，还可以在字符串中添加不可显示的特殊字符。常用的转义字符如表4-4-1所示。04*4.4.2
字符串型转义字符含
义转义字符含
义转义字符含
义\'英文单引号\b退格字符\n换行字符\tTab字符\\反斜杠字符\f换页字符\r回车字符\"英文双引号\eEsc字符表4-4-1常用转移字符表多个字符串可以使用加号（+）进行拼接，字符串和任何数据类型拼接的结果都是字符串型。04*4.4.2
字符串型【示例4-4-3】在HTML文档<script>标签内输入以下代码：varstring1="Thisisa'car'.",string2='Thatisa"boat".\n';varstring3="Thisisa'student'.";varstring4="Sheis"+18;alert(string1+string2+string3+string4);【效果】页面中出现弹窗，内容为字符串，如图4-4-2所示。图4-4-2含有字符串的弹窗04*【示例4-4-4】
在HTML文档<script>标签内输入以下代码：varbool1=true,bool2=false;alert(bool1);【效果】页面中出现弹窗，内容为“true”，如图4-4-3所示。4.4.3
布尔型布尔数据的类型只有两个值，即true（真）和false（假），用于说明每个事物是真还是假。图4-4-3含有“true”的弹窗04*【示例4-4-5】在HTML文档<script>标签内输入以下代码：vardefine;alert(define);【效果】页面中出现弹窗，内容为“undefined”，如图4-4-4所示。4.4.4
未定义型在变量只定义未赋值之前，变量均为未定义（undefined）型。
图4-4-4含有“undefined”的弹窗未定义数据和字符串数据拼接的结果为字符串型，未定义数据和数值数据相加的结果为NaN，即NotaNumber。小提示04*【示例4-4-6】在HTML文档<script>标签内输入以下代码：varv=null;alert("Thisisa"+v);alert(18+v);【效果】页面中出现弹窗，内容为“Thisisanull”，单击“确定”按钮后，接着出现弹窗，内容为“18”，如图4-4-5所示。4.4.5
null型null是一个特殊的值，表示空值，用于定义空的或不存在的引用。null不等同于空的字符串（""）或0。
null和字符串数据拼接的结果为字符串型，null和数字相加的结果为数字本身。null的数据类型为object，学习了对象后再研究。小提示（a）
（b）图4-4-5页面依次弹出的两个弹窗05*05JavaScript运算符05*4.5JavaScript运算符程序最基本的功能就是运算。运算符也称操作符，是完成一系列操作的符号。运算符用于将一个或几个值进行计算，然后生成一个新的值，这些参与计算的值称为操作数。操作数可以是常量，也可以是变量。运算符和操作数组成的式子称为表达式。表达式的运算规则基本是先运算括号，再按照运算符的优先级从左到右依次进行。表达式的值就是对操作数进行运算后的结果。根据操作数个数的不同，运算符可以分为单目运算符、双目运算符、三目运算符。根据功能的不同，运算符可以分为算术运算符、关系运算符、赋值运算符、逻辑运算符、条件运算符。05*4.5.1
算术运算符1．加减乘除（+−*/）加减乘除运算符都属于双目运算符，它们的运算规则如同数学中的规则，即乘除的优先级高于加减。算术运算符包括加（+）、减（−）、乘（*）、除（/）、自加（++）、自减（−−）、取余（%）运算符。【示例4-5-1】
在HTML文档<script>标签内输入以下代码：varnumber1=2.2;varnumber2=3;varnumber3=number1*2+number2/3;alert(number3);【效果】页面中出现弹窗，内容为运算结果“5.4”。05*4.5.1
算术运算符2．自加（++）自加运算符属于单目运算符，它可以使变量的值自动加1。该运算符有两种情况：（1）i++，表示在使用i之后，使i的值加1。（2）++i，表示在使用i之前，先使i的值加1。【示例4-5-2】在HTML文档<script>标签内输入以下代码：vari=2.12;i++;alert(i);【效果】页面中出现弹窗，内容为运算结果“3.12”。05*4.5.1
算术运算符3．自减（−−）自减运算符属于单目运算符，它可以使变量的值自动减1。该运算符有两种情况：（1）i−−，表示在使用i之后，使i的值减1。（2）−−i，表示在使用i之前，先使i的值减1。【示例4-5-3】在HTML文档<script>标签内输入以下代码：vari=8;i--;alert(i);【效果】页面中出现弹窗，内容为运算结果“7”。自减运算一般不用于浮点数，因为用于浮点数时运算结果不能被开发者控制。如果将【示例4-5-3】中的8修改为8.12，则弹出的运算结果为7.119999999999999。小提示05*4.5.1
算术运算符4．取余（%）取余运算符属于双目运算符，它是指整数a对整数b求余。【示例4-5-4】在HTML文档<script>标签内输入以下代码：varnumber1=38;varnumber2=number1%3;alert(number2);【效果】面中出现弹窗，内容为运算结果“2”。取余运算的两个操作数的数据类型都要求为整型。小提示05*4.5.2
关系运算符1．小于（<）小于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数小于右边的操作数，则返回true；否则返回false。它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-5】在HTML文档<script>标签内输入以下代码：varnumber=39;alert(18<number);【效果】面中出现弹窗，内容为运算结果“true”。关系运算符主要用于测试操作数之间的关系，包括小于（<）、大于（>）、小于等于（<=）、大于等于（>=）、等于（==）、全等于（===）、不等于（!=）、非全等于（!==）。根据这些关系存在与否返回一个布尔型数值，即true或false。05*4.5.2
关系运算符2．大于（>）大于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数大于右边的操作数，则返回true；否则返回false。它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-6】
在HTML文档<script>标签内输入以下代码：varnumber=39;alert(18>number);【效果】面中出现弹窗，内容为运算结果“false”。3．小于等于（<=）小于等于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数小于或等于右边的操作数，则返回true；否则返回false。它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。05*4.5.2
关系运算符【示例4-5-7】在HTML文档<script>标签内输入以下代码：varnumber=39;alert(18
<=
number);【效果】面中出现弹窗，内容为运算结果“true”。4．大于等于（>=）大于等于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数大于或等于右边的操作数，则返回true；否则返回false。它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-8】
在HTML文档<script>标签内输入以下代码：varnumber=39;alert(18>=number);【效果】面中出现弹窗，内容为运算结果“false”。05*4.5.2
关系运算符5．等于（==）等于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数等于右边的操作数，即模糊比较相等，则返回true；否则返回false。它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-9】在HTML文档<script>标签内输入以下代码：varx=5;alert(x=="5");【效果】面中出现弹窗，内容为运算结果“true”。等于运算符是两个等于号，不同于赋值运算符（=）。小提示05*4.5.2
关系运算符6．全等于（===）
全等于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数值与类型都等于右边的操作数，即精准比较相等，则返回true；否则返回false。它可以应用于数字型、字符型和布尔型数据之间。【示例4-5-10】在HTML文档<script>标签内输入以下代码：varx=5;alert(x==="5");【效果】面中出现弹窗，内容为运算结果“false”。x变量为数字5，而右侧是字符5。全等于运算符是三个等于号，不同于赋值运算符（=）。小提示05*4.5.2
关系运算符7．不等于（!=）
不等于运算符属于双目运算符，用于比较操作数的关系。如果模糊比较左边的操作数值不等于右边的操作数，则返回true；否则返回false。它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-11】
在HTML文档<script>标签内输入以下代码：varx=5;alert(x!="5");【效果】面中出现弹窗，内容为运算结果“false”。05*4.5.2
关系运算符8．不全等于（!==）
不全等于运算符属于双目运算符，用于比较操作数的关系。如果精准比较左边的操作数值或类型不等于右边的操作数，则返回true；否则返回false。它可以应用于数字型、字符型和布尔型数据之间。【示例4-5-12】
在HTML文档<script>标签内输入以下代码：varx=5;alert(x!=="5");【效果】面中出现弹窗，内容为运算结果“true”。05*4.5.3
赋值运算符赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中。复合赋值运算混合了其他运算符（如算术运算符）和赋值运算符，如+=、−=、*=、/=等，表示将运算符左边的变量与右边的变量或常量进行运算，然后将运算结果赋值给左边的变量。【示例4-5-13】
在HTML文档<script>标签内输入以下代码：vara=16,b=10;a+=b;//表示a=a+b=16+10=26alert(a);【效果】页面中出现弹窗，内容为运算结果“26”。05*4.5.4
逻辑运算符逻辑运算符一般用于布尔型数据，通常逻辑运算符与关系表达式配合使用。逻辑运算符的返回值是true或false。逻辑运算符包含与（&&）、或（||）、非（!）。1．逻辑与（&&）
逻辑与运算符属于双目运算符，其运算对象均为真时，结果为真；运算对象只要有一个为假，结果为假。【示例4-5-14】
在HTML文档<script>标签内输入以下代码：vara=12,b=16,c=23.89;alert(a>b&&b<c);alert(a<b&&b<c);【效果】页面中依次弹出“false”和“true”。因为a>b的结果是false，b<c的结果是true，真与假得假；a<b的结果是true，真与真得真。05*4.5.4
逻辑运算符2．逻辑或（||）
逻辑与运算符属于双目运算符，其运算对象均为真时，结果为真；运算对象只要有一个为假，结果为假。【示例4-5-15】
在HTML文档<script>标签内输入以下代码：vara=12,b=16,c=23.89;alert(a>b||b<c);alert(a<b||b<c);【效果】页面中依次弹出“true”和“true”。因为a>b的结果是false，b<c的结果是true，真或假得真；a<b的结果是true，真或真得真。05*4.5.4
逻辑运算符3．逻辑非（!）
逻辑非运算符属于单目运算符，其运算对象为真时，结果为假；运算对象为假时，结果为真。【示例4-5-16】
在HTML文档<script>标签内输入以下代码：vara=12,b=16,c=23.89;alert(!(a>b));alert(!(b<c));【效果】页面中依次弹出“true”和“false”。因为a>b的结果是false，非假即真；b<c的结果是true，非真即假。05*4.5.5
条件运算符在JavaScript语言规范里，提供了条件运算符“?:”，它属于三目运算符，其语法格式如下：表达式1?表达式2:表达式3当表达式1的值为真或非0时，结果为表达式2的值，否则结果为表达式3的值。【示例4-5-17】
在HTML文档<script>标签内输入以下代码：vara=12,b=16;varmax=a>b?a:b;alert(max);【效果】页面中弹出“16”。因为a=12，b=16，a>b不成立，结果为false，所以max的值为b的值16。06*06流程控制语句06*4.6.1
if语句1．if语句的基本结构if语句的基本结构如下：if(条件表达式){ 程序代码段1;}else{ 程序代码段2;}程序执行的过程中，首先判断括号中条件表达式的值，若条件表达式的值为true，则程序将执行程序代码段1；否则执行程序代码段2。JavaScript提供了多种流程控制语句，可以分为条件语句和循环语句。其中，条件语句包括if语句和switch语句，循环语句包括for语句、while语句和do…while语句。if语句是最基本、最常用的流程控制语句，它通过判断条件表达式的值来选择不同的执行路线。06*4.6.1
if语句【示例4-6-1】随机输入两个数，并判断它们的最大值。在HTML文档<script>标签内输入以下代码：vara,b;a=prompt("请您输入第1个数","");b=prompt("请您输入第2个数","");varmax;if(a>b){ max=a;}else{ max=b;}alert("两个数中的最大值是："+max);【效果】页面中分别弹出两个提示框，若在这两个提示框中分别输入数12和42，最终弹窗中显示“两个数中的最大值是：42”。06*4.6.1
if语句2．if语句的简略形式当if语句结构中的一个程序代码段为空时，其结构相对简略，如下所示：if(条件表达式){ 程序代码段;}程序执行的过程中，首先判断括号中条件表达式的值，若条件表达式的值为true，则程序将执行程序代码段；否则直接跳过，执行if条件语句之后的程序代码。【示例4-6-2】判断输入的年份是否为闰年。在HTML文档<script>标签内输入以下代码：vara;a=prompt("请您输入一个年份","");if((a%4==0&&a%100!=0)||(a%400==0)){ alert(a+"年是闰年");}【效果】页面中弹出提示框，若输入的年份为“2004”，则弹出“2004年是闰年”；若输入的年份为“1900”，则不弹出任何信息。06*4.6.1
if语句3．if语句的嵌套和变形if语句不仅可以单独使用，还可以嵌套使用，即在if语句结构中的一个程序代码段或两个程序代码段中嵌套其他的if语句，其语法格式如下：if(条件表达式1){ if(条件表达式2){ 程序代码段1 }else{ 程序代码段2 }}else{ if(条件表达式3){ 程序代码段3 }else{ 程序代码段4 }}if语句结构根据每个程序代码段是否为空又有很多变形，这里不再赘述。06*4.6.1
if语句【示例4-6-3】求输入的三个数的最大值。在HTML文档<script>标签内输入以下代码：vara,b,c,max;a=prompt("请您输入第1个数","");b=prompt("请您输入第2个数","");c=prompt("请您输入第3个数","");if(a>b){ if(a>c){ max=a; }else{ max=c; }}else{ if(b>c){ max=b; }else{ max=c; }}alert(a+"、"+b+"、"+c+"三个数中的最大值为"+max);【效果】页面中依次弹出三个提示框，若依次输入的数为28、12、49，则弹出“28、12、49三个数中的最大值为49”。06*4.6.2
switch语句switch语句是典型的多路分支语句，其作用与if语句基本相同，但是它比if语句更工整和清晰，且在编写代码的过程中也不容易出错。switch语句可以根据一个表达式的值，选择执行不同的分支，其语法格式如下：switch(表达式){ case常量表达式1: 程序代码段1 break; case常量表达式2: 程序代码段2 break; … case常量表达式n: 程序代码段n break; default: 程序代码段n+1}06*4.6.2
switch语句程序执行的过程中，若表达式的值与常量表达式的值相等，则执行此case分支后面的程序代码段，接着跳出switch语句。若表达式的值与常量表达式的值都不相等，则执行default后面的程序代码段。【示例
4-6-4】
求一个百分制成绩对应的等级。在HTML文档<script>标签内输入以下代码：varchengJi,b,dengJi; chengJi=prompt("请您输入一个百分制成绩",""); b=Math.floor(chengJi/10); switch(b){ case10: case9: dengJi="A"; break; case8: dengJi="B"; break; case7: dengJi="C"; break;
06*4.6.2
switch语句 dengJi="D"; break; default: dengJi="E"; } alert(chengJi+"对应的等级为"+dengJi);【效果】页面中弹出一个提示框，若输入的百分制成绩为“98”，则弹出“98对应的等级为A”。switch语句结构中，每一个case分支中的程序代码段后必须添加break语句。若【示例4-6-4】中每个break语句均漏写，则无论输入的成绩为何值，程序最终都会执行default后面的程序代码段。小提示06*4.6.3
for语句for语句又称计次循环语句，一般用于已知循环次数的情况，在JavaScript中应用比较广泛。for语句的语法格式如下：for(初始化循环变量;终止循环条件表达式;循环变量自加1或自减1){ 循环体}程序从循环变量初值开始运行循环体，每执行完一次循环体，循环变量就增加1或减去1，直到循环变量不符合终止循环条件表达式。【示例4-6-5】求一个自然数的阶乘。在HTML文档<script>标签内输入以下代码：varn,jieCheng=1;n=prompt("请输入一个自然数"
,
"");for(vari=1;i<=n;i
++){ jieCheng=jieCheng*i;}alert(n+"!"+"="+jieCheng);06*4.6.3
for语句【效果】页面中弹出提示框，若输入的自然数为“6”，则弹出“6!=720”。此外，for语句还有一个特殊的形式，如下所示：for(声明变量in集合类变量){ 循环体}该形式的for语句用于遍历集合类变量，每次循环将集合类变量中的每一个元素依次赋值给声明变量，并执行循环体，遍历完集合类变量的所有元素后，循环结束。【示例4-6-6】
求一个数字数组的元素之和。在HTML文档<script>标签内输入以下代码：varnumbers=[98,87,73,94],sum=0;for(variinnumbers){ sum=sum+numbers[i];}alert("总分为："+sum);06*4.6.3
for语句【效果】页面中弹出“总分为：352”。【示例4-6-6】中的代码“numbers=[98,87,73,94]”表示数组，页面中弹出的总分352是该数组中四个元素的和。数组的内容将在后面的章节详细介绍。小提示06*4.6.4
while语句while语句又称前测试循环语句，它在执行循环体前测试条件。若条件成立则进入循环，执行循环体；否则，跳出循环，执行while语句后面的第一个语句。while语句的语法格式如下：while(条件表达式){ 循环体}【示例4-6-7】
在HTML文档<script>标签内输入以下代码：varnumbers=
[98,87,73,94],sum
=
0,i
=
0;while(i<4){ sum=numbers[i]+sum;
i++;}alert("总分为："+sum);【效果】实现效果与【示例4-6-6】一样，页面中弹出“总分为：352”。06*4.6.5
do…while语句do…while语句又称后测试循环语句，它先执行循环体再测试条件。若条件成立则进入循环，执行循环体；否则，跳出循环，执行do…while语句后面的第一个语句。do…while语句的语法格式如下：do{ 循环体}while(条件表达式)【示例4-6-8】在HTML文档<script>标签内输入以下代码：varnumbers=[98,87,73,94],sum=0,i=0;do{ sum=numbers[i]+sum; i++;}while(i<4)alert("总分为："+sum);【效果】实现效果与【示例4-6-6】一样，页面中弹出“总分为：352”。do…while语句与while语句的不同是do…while语句至少会执行一次循环体，而while语句不一定会执行循环体。小提示07*07函数07*4.7
函
数在JavaScript中，函数就是实现某特定功能的一组代码，是实现模块化程序设计的基础。使用函数不仅可以提高代码重复使用的频率，还可以让代码更简洁，从而大大提高工作效率。在JavaScript程序中，如果一段具有特定功能的程序代码需要多次使用，就可以先将这段代码定义为函数，然后在需要这个功能的地方调用函数即可。函数07*4.7.1
函数的定义及函数的形参
函数的定义其实就是将完成某一特定功能的代码段划分在一起，为其整体命名，并定义好入口参数。在JavaScript中，函数的定义方式比较灵活，每个函数都是作为一个对象被维护和运行的。定义函数的常用方法有以下几种。（1）使用function语句直接定义函数，其语法格式如下：function函数名(参数1,参数2,…){函数体return返回值;}01（2）将一匿名函数值赋给一个变量，其语法格式如下：var函数名=function(参数1,参数2,…){函数体return返回值;}0207*4.7.1
函数的定义及函数的形参（3）将函数“函数名2”的返回值赋给变量“函数名1”，其语法格式如下：var函数名1=function函数名2(参数1,参数2,…){函数体return返回值;}0304（4）声明“函数名”为一个对象，其语法格式如下：var函数名=newFunction();通过函数对象的性质，可以方便地将函数的值赋给变量，也可将函数的值作为参数进行传递。小提示
形参
：定义函数时，指定的参数（如“参数1,参数2,…”）称为形式参数。它们可以直接使用，不需要定义。形参可以是一个或多个（多个参数之间用英文逗号“,”隔开），其作用是调用函数时，可以为被调用的函数传递一个或多个值。函数不一定有返回值，即函数定义中不一定含有语句“return返回值;”。07*4.7.2
函数的调用及函数的实参函数定义之后并不会自动执行，要执行函数，就需要在特定的位置调用函数。调用函数就像启动机器一样，机器本身不会自行工作，只有启动机器，机器才能执行相应的操作。
调用函数需要创建调用语句，其语法格式如下：函数名(传递给函数的参数1,传递给函数的参数2,…)
实参：调用函数时，实际传递给函数的参数（如“传递给函数的参数1,传递给函数的参数2,…”）称为实际参数。通常，在定义函数时使用了多少个形参，在调用函数时也必须给出多少个实参，且多个实参之间用英文逗号“,”隔开。在程序执行的过程中，函数的调用其实就是将实参传递给函数的形参，然后将函数体运行一次，直到函数体结束。如果有返回值，则将值返回；如果没有返回值，则直接执行调用函数语句之后的语句。07*4.7.2
函数的调用及函数的实参【示例4-7-1】定义并调用一个求三个数中最大值的函数。在HTML文档<script>标签内输入以下代码：functionmaxS(a,b,c){ //定义函数maxS varmax; if(a>b){ if(a>c){ max=a; }else{ max=c; } }else{ if(b>c){ max=b; }else{ max=c; } } returnmax;}alert(maxS(12,34,9)); //调用函数maxS【效果】页面中弹出12、34、9三个数中的最大值“34”。07*4.7.2
函数的调用及函数的实参【示例4-7-2】
定义并调用一个求三个数中最小值的函数。在HTML文档<script>标签内输入以下代码：varminS=function(a,b,c){ //定义函数minS varmin; if(a<b){ if(a<c){ min=a; }else{ min=c; } }else{ if(b<c){ min=b; }else{ min=c; } } returnmin;}alert(minS(12,34,9)); //调用函数minS【效果】页面中弹出12、34、9三个数中的最小值“9”。07*4.7.2
函数的调用及函数的实参【示例4-7-3】定义并调用一个求自然数阶乘的函数。在HTML文档<script>标签内输入以下代码：varjieCheng=functionjieCheng1(n){ //定义函数jieCheng varjieCheng=1; for(vari=1;i<=n;i++){ jieCheng=jieCheng*i; } returnjieCheng;}alert(jieCheng(6)); //调用函数jieCheng【效果】页面中弹出6的阶乘结果“720”。07*4.7.2
函数的调用及函数的实参【示例4-7-4】
定义并调用一个求余函数。在HTML文档<script>标签内输入以下代码：varmod=newFunction("n","k","return(n%k)"); //定义函数modalert(mod(12,5)); //调用函数mod【效果】页面中弹出12对5求余的结果“2”。【示例4-7-4】中，“n”和“k”表示函数的参数（形参），“n%k”表示函数体，“return(n%k)”表示函数的返回值。小提示07*4.7.3
变量的作用域在JavaScript中，变量根据作用域的不同可分为全局变量和局部变量。全局变量是定义在函数外部的变量，其作用范围为整个HTML文档；局部变量是定义在函数体内部的变量，其作用范围仅限于函数体内部。例如，下面程序代码中的变量a为全局变量，变量b为局部变量。vara="我是全局变量";functiontest(m,n){ varb="我是局部变量"; …07*高手点拨
【示例4-7-1】中的变量max、【示例4-7-2】中的变量min、【示例4-7-3】中的变量jieCheng均为局部变量。07*4.7.4
函数的嵌套在JavaScript中，允许函数进行嵌套，也就是说在一个函数的函数体中可以使用其他函数。使用嵌套函数可以在函数体内部定义函数或调用函数。（1）在函数体内部定义函数的语法格式如下：function函数名1(){ function函数名2(){ //函数体内部定义函数名2 代码段 } 代码段}在函数体内部定义的函数只能作用于函数体自身，对函数体外部没有任何作用。小提示（2）在函数体内部调用函数的语法格式如下：function
函数名1(){
代码段}function函数名2(){
函数名1(); //函数体内部调用函数名1}07*4.7.5
时间函数在JavaScript中，除了自定义函数，还有内置函数。JavaScript的内置时间函数可以支持时间延迟和时间间隔，详细介绍如下所示。（1）时间延迟函数setTimeout()，表示延迟一定时间后开始执行延时行为，其语法格式如下：var变量名称=setTimeout(function(){延时行为},延时时间);（2）清除时间延迟函数clearTimeout()，用于清除延时函数变量，其语法格式如下：clearTimeout(延时函数变量);（3）时间间隔函数setInterval()，表示每间隔一定的时间运行一次间隔行为，且将该对象赋值给指定变量，所得变量数据类型为对象（Object），其语法格式如下：var变量名称=setInterval(function(){间隔行为},间隔时间);（4）清除时间间隔函数clearInterval()，用于清除时间间隔函数赋值的对象，其语法格式如下：clearInterval(间隔时间函数对象名称)08*08数组08*4.8
CSS盒子模型数组是一组数据的集合，是JavaScript中用来存储和操作有序数据集的数据结构。一个数组中可以包含多个元素，每个元素的类型可以是不同的。数组中元素的类型可以是数值型、字符串型、布尔型、数组型、对象型等。数组08*4.8.1
数组的声明声明数组可以采用赋值法、构造法，也可以直接将捕获的对象数组赋值给变量。（1）采用赋值法声明数组的语法格式如下：var
数组变量名=[值1,值2,…,值n];【示例4-8-1】
声明数组charS，代码如下：varcharS=["a","b","c","d","e","f","g","h","i","j"];（2）采用构造法声明数组的语法格式如下：var
数组变量名=newArray();【示例4-8-2】
声明数组persons，代码如下：varpersons=newArray();（3）直接将捕获的对象数组赋值给变量，其语法格式如下：var
数组变量名=document.类或标签选择器方法名();【示例4-8-3】
将捕获的对象数组赋值给变量text，代码如下：vartext=document.getElementsByClassName("text");08*4.8.2
数组元素的引用每个数组元素都有一个索引号（数组的下标），通过索引号可以方便地引用数组元素。数组的下标从0开始编号。例如，第一个数组元素的下标是0，第二个数组元素的下标是1，以此类推。引用数组元素的语法格式如下：数组名称[下标值]【示例4-8-4】在HTML文档<script>标签内输入以下代码：varcharS=["a","b","c","d","e","f","g","h","i","j"];alert(charS[2]);【效果】页面中弹出charS数组中的第3个元素的值“c”。08*4.8.3
数组的属性和方法数组的属性和方法有很多，常用的属性是length，它表示数组元素的个数，其语法格式如下：数组名称.length常用的方法是sort()，用于对数组元素进行排序，其语法格式如下：数组名称.sort()【示例4-8-5】在HTML文档<script>标签内输入以下代码：varnums=[68,79,32,17,90];alert(nums.sort());【效果】页面中弹出nums数组元素排序后的结果“17,32,68,79,90”。08*4.8.4
数组的遍历在JavaScript中，通常使用for语句遍历数组元素，语法格式如下：for(vari=0;i<数组名称.length;i++){数组名称[i]相关表达式}【示例4-8-6】在HTML文档<script>标签内输入以下：window.onload=function(){ vartext=document.getElementsByClassName("text"); varstringS=["衣服","帽子","裤子","鞋","围巾","手套","头饰"]; for(vari=0;i<stringS.length;i++){ text[i].innerHTML=stringS[i]; }}08*4.8.4
数组的遍历在HTML文档<body>标签内输入以下7个相同的<div>标签，代码如下：<divclass="text"></div>…<divclass="text"></div>【效果】页面加载后，程序获取类名为“text”的7个div盒子，通过for语句遍历text数组和字符串数组stringS，并将stringS中的元素值一一赋给text数组，最终7个div盒子在页面上的显示效果如图4-8-1所示。图4-8-1页面显示效果小提示若想要对页面元素进行操作，必须要在窗口加载事件中完成。【示例4-8-6】中的for语句还可以写成以下形式：for(iintext){ text[i].innerHTML=stringS[i];}09*09对象09*4.9
对象对象的概念来自对客观世界的认识，用于描
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年度专业版私人二手房购买协议3篇
- 2024-2030年中国大豆水解蛋白市场现状分析及前景趋势预测报告
- 2024-2030年中国城市地下管线探测行业需求趋势预测发展规划研究报告
- 2024-2030年中国垃圾发电项目可行性研究报告
- 2024-2030年中国地热采暖专用地板产业未来发展趋势及投资策略分析报告
- 2024-2030年中国土地储备产业发展状况规划研究报告
- 2024年度人工智能领域股权补偿协议3篇
- 2024年度校园物业管理及优化合同版B版
- 2024年物联网技术应用开发合作协议
- 马鞍山职业技术学院《数据库应用技术案例》2023-2024学年第一学期期末试卷
- GB/T 5195.1-2006萤石氟化钙含量的测定
- 2023年艺术学概论彭吉象知识点提要
- GB/T 3452.1-2005液压气动用O形橡胶密封圈第1部分：尺寸系列及公差
- 2023年自考传播学概论试题及答案
- GB/T 18277-2000公路收费制式
- 2023年住院医师规范化培训胸外科出科考试
- 11468工作岗位研究原理与应用第7章
- 2023实施《中华人民共和国野生动物保护法》全文学习PPT课件（带内容）
- 2022年初级育婴师考试题库附答案
- 系统家庭疗法课件
- 新版GSP《医疗器械经营质量管理规范》培训试题
评论
0/150
提交评论