版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
网页设计与制作实践(微视频)
第4章JavaScript基础
本章学习目标
掌握JavaScript脚本的语言基础理解DOM（DocumentObjectModel，文档对象模型）及常用系统对象学会使用JavaScript操作DOM元素、属性和CSS样式掌握JavaScript基于事件驱动的编程模型及常用事件掌握jQuery框架的基本使用
4.1JavaScript语言基础
4.1.1JavaScript简介JavaScript（简称“JS”）是一种具有函数优先、轻量级、解释型或即时编译型的编程语言。在过去的十年间，Node.js的发展让浏览器环境外的JavaScript编程也变得开始流行起来。
4.1JavaScript语言基础
4.1.1JavaScript简介
JavaScript作为Web页面脚本语言的JavaScript是由以下三个部分组成。ES规范描述了该语言的语法和基本对象DOM模型描述处理网页内容的方法和接口BOM模型描述与浏览器进行交互的方法和接口
4.1JavaScript语言基础
4.1.2JavaScript初步探索
如何引入JS
使用<script></script>标签将JavaScript语言编写的程序代码嵌入到HTML页面
使用<script></script>标签将外部独立的“.js”程序文件导入到HTML页面中
JavaScript脚本可被放置在页面的<head>区域，也可以放置在<body>区域
4.1JavaScript语言基础
4.1.2JavaScript初步探索
控制台打印和弹窗
使用console.log()在控制台打印输出
使用alert()函数进行弹窗
浏览器打开Web开发者工具的方法是按下【F12】键
4.1JavaScript语言基础
4.1.2JavaScript初步探索JS执行顺序
默认按照代码出现的顺序依次加载执行
如果脚本中需要操作文档内容，则要等待HTML文档加载完成后再执行脚本，可以将脚本代码放在文档的最后，或者将JavaScript脚本代码放在window.onload事件的回调函数中
4.1JavaScript语言基础
4.1.2JavaScript初步探索JavaScript基础示例
参见教学视频4.01-4.05
4.1JavaScript语言基础
4.1.3JavaScript的词法结构
词法结构是最基本的程序编写规则1.程序文本：区分大小写字母2.注释
（1）单行，//...
（2）多行，/*...*/
4.1JavaScript语言基础
4.1.3JavaScript的词法结构
词法结构是最基本的程序编写规则3.标识符：用于命名常量、变量、属性、函数和类等
（1）以字母、下划线（_）或美元符（$）开头
（2）后续则可以是字母、数字、下划线（_）或者美元符号（$）
4.1JavaScript语言基础
4.1.3JavaScript的词法结构
词法结构是最基本的程序编写规则3.标识符：语言关键字
as、break、case、catch、class、const、continue、default、do、else、export、extends、false、finally、for、from、function、get、if、import、in、instanceof、let、new、null、of、return、set、static、super、switch、target、this、throw、true、try、typeof、var、void、while、with、yield等
4.1JavaScript语言基础
4.1.3JavaScript的词法结构
词法结构是最基本的程序编写规则4.字面量：直接出现的用于赋值或参与某种运算的数据
32//数值3264.35//数值64.35"helloeveryone！"//一个字符串"flowers"//另一个字符串true//布尔值truenull//空{"a":1,"b":"car"}//一个对象
4.1JavaScript语言基础
4.1.3JavaScript的词法结构
词法结构是最基本的程序编写规则5.语句分隔（1）使用分号“;”作为语句结束（2）如果两条语句分别写在两行，则分号是可以省略
4.1JavaScript语言基础
4.1.4JavaScript的原始类型
程序都是通过操作值来工作具有相同特征的值被设计为一种类型两大类：对象类型和原始类型
一元操作符typeof求得类型字符串
4.1JavaScript语言基础
4.1.4JavaScript的原始类型1.数值类型（Number）能够表示整数和实数支持二、八、十六进制表示5//数值50b1011//二进制数值10110xFF//十六进制数值FF45.3//实数45.31.635e-21//实数1.635×10-21
4.1JavaScript语言基础
4.1.4JavaScript的原始类型1.数值类型（Number）特殊数值Infinity：无穷值-Infinity：负无穷值NaN：非数值，NotaNumber
4.1JavaScript语言基础
4.1.4JavaScript的原始类型1.数值类型（Number）数值运算
算术运算：+（加法）、-（减法）、*（乘法）、/（除法）、%（取模）、**（取幂）等
Math对象提供的方法，例如：Math.E为自然对数的底数，Math.sqrt()为求平方根的函数
4.1JavaScript语言基础
4.1.4JavaScript的原始类型2.BigInt类型ES2020中新增的数值类型对任意长度整数的支持不可以把BigInt和常规数值类型混合使用
4.1JavaScript语言基础
4.1.4JavaScript的原始类型3.字符串类型（String）被放在一对匹配的单引号、双引号或者反引号中的字符序列，就是字符串，也称为字符串字面量
三类引号成为定界符，可互嵌套使用
4.1JavaScript语言基础
4.1.4JavaScript的原始类型3.字符串类型（String）反引号是ES6中才出现的新特性，内部可以包含JavaScript表达式letname="kitty";//声明变量name，值为kittyconsole.log("Hello${name}");//双引号定界符，输出：Hello
${name}console.log(`Hello${name}`); //反引号定界符，输出：Hellokitty
4.1JavaScript语言基础
4.1.4JavaScript的原始类型3.字符串类型（String）特殊字符使用反斜杠进行转义
（1）\\表示反斜杠本身
（2）\n表示换行符
（3）\t表示水平制表符
（4）\‘表示单引号等
4.1JavaScript语言基础
4.1.4JavaScript的原始类型3.字符串类型（String）字符串常用操作方法被封装在其原型对象中，示例如下lets="IloveJavaScript!";//声明变量s，值为一个字符串console.log(s.length);//获取字符串长度，输出：18console.log(s.indexOf("a"));//字符串中第1个字母a的位置，输出：8console.log(s.startsWith("Ilo"));//是否以“ILo”开头，输出：true
4.1JavaScript语言基础
4.1.4JavaScript的原始类型4.符号类型（Symbol）ES6新增，Symbol值表示唯一的标识符，能够保证值的唯一性letid1=Symbol("id");//创建Symbol类型值id1console.log(typeofid1);//输出：symbolletid2=Symbol("id");//创建Symbol类型值id2console.log(id1==id2);//结果：false
4.1JavaScript语言基础
4.1.4JavaScript的原始类型5.null通常用于表示某个值是不存在的console.log(typeofnull)的输出结果是object可以把null看成一个特殊的对象，表示“没有对象”或者“没有值”
4.1JavaScript语言基础
4.1.4JavaScript的原始类型6.undefinedundefined也表示值不存在
作为一个预定义的全局常量而存在（1）某个已声明未初始化的变量的值就是undefined（2）没有明确返回值的函数的返回值也是undefined
4.1JavaScript语言基础
4.1.4JavaScript的原始类型7.布尔类型（Boolean）只有两个取值：true和false
会自动进行类型转换（1）undefined、null、0、-0、NaN和空字符串会转换为false（2）其他的所有的值（也包括对象、数组等）都转换为true
4.1JavaScript语言基础
4.1.5JavaScript对象1.对象类型简介JavaScript中除了原始类型外，其他都是对象类型，对象特征：（1）属性的无序集合（2）属性是字符串到值的映射组成，属性名→属性值（3）属性值可以是任意的JavaScript值（4）属性可随时添加，属性可以继承自其原型对象
4.1JavaScript语言基础
4.1.5JavaScript对象2.创建对象通过对象字面量创建（1）属性定义在一对花括号{}中（2）属性定义时采用冒号分隔属性名和属性值（3）多个属性之间使用逗号（,）分割（4）书写在最后一个的属性后边的逗号可以省略
4.1JavaScript语言基础
4.1.5JavaScript对象2.创建对象通过对象字面量创建：示例leta={};//空对象，没有属性的对象letb={x:2,y:3};//包含两个数值属性值的对象letc={name:"JavaScript",version:"ES6"};//包含两个字符串属性对象letd={"p1":b,"p2":c};//包含两个对象属性值的对象letbook={//其中一个属性值就是一个使用字面量定义的对象 title:"网页设计实践",press: {name:"",address:"北京"}};
4.1JavaScript语言基础
4.1.5JavaScript对象2.创建对象通过new操作符创建（1）new操作符后边需要跟一个函数调用（2）函数用于初始化新创建的对象（3）具备此功能函数被称为构造函数（constructor）（4）内置的一些类型都有对应的构造函数（5）构造函数的首字母一般为大写形式
4.1JavaScript语言基础
4.1.5JavaScript对象2.创建对象通过new操作符创建：示例leto=newObject();//创建一个空对象，与{}相同letd=newDate();//创建一个表示当前时间的日期对象leta=newArray("C","Java","JavaScript");//创建一个数组对象，并初始化了该对象
4.1JavaScript语言基础
4.1.5JavaScript对象2.创建对象通过Object.create()方法（1）原型（prototype）对象（2）几乎所有的对象都有一个原型对象（3）通过对象隐含属性`__proto__`访问其原型对象（4）原型对象实现了类的继承（5）Object.create()方法可显示指定新对象的原型
4.1JavaScript语言基础
4.1.5JavaScript对象2.创建对象通过Object.create()方法：示例leto1={x:1,y:2};//使用字面量方式定义一个对象o1leto2=Object.create(o1);//使用o1作为原型创建新对象o2console.log(o2.x+o2.y);//输出结果：3
4.1JavaScript语言基础
4.1.5JavaScript对象3.对象属性的访问、设置与删除用点.或者方括号[]操作符获取属性创建新的属性或者修改已有的属性值时也是使用点.或者方括号[]操作符删除属性则是使用delete操作符
4.1JavaScript语言基础
4.1.5JavaScript对象3.对象属性的访问、设置与删除letpress={};//使用字面量方式创建一个空对象press="";//创建press对象一个新属性并赋值press["address"]="北京";//创建press对象的另一个新属性并赋值press.address="天津";//修改了一个属性值deletepress["name"];//删除了press对象的name属性console.log();//name属性已删除，输出：undefined
4.1JavaScript语言基础
4.1.5JavaScript对象4.对象属性特性可写特性（writable），指是否可以设置属性的值可枚举特性（enumerable），指是否可以在一些循环语句（如for/in）中返回属性的名称可配置特性（configurable），指是否可以删除属性，以及是否可以修改其特性
4.1JavaScript语言基础
4.1.5JavaScript对象5.属性的测试与枚举：示例leto={x:1,y:2};//使用字面量方式定义一个对象oconsole.log(o.x!==undefined);//输出：true，说明o有属性xconsole.log(o.z!==undefined);//输出：false，说明o没有属性zconsole.log("y"ino);//输出：true，说明o有属性yconsole.log("toString"ino);//输出true，说明o有属性toString，继承属性console.log(o.hasOwnProperty("y"));//o有自有属性y，输出：trueconsole.log(o.hasOwnProperty("toString"));//toString不是o的自有属性，输出：false
4.1JavaScript语言基础
4.1.5JavaScript对象6.序列化对象
对象转换为某种格式字符串，之后可以再把字符串解析为对象，称为对象序列化转换后的字符串称为JSON（JavaScriptObjectNotation）字符串JSON语法是JavaScript语法的子集支持字符串、有限数值、true、false、null以及在这些原始值的基础上构建起来的对象和数组
4.1JavaScript语言基础
4.1.5JavaScript对象6.序列化对象
JSON高效通用的优点，是语言无关的纯数据规范
实践中很多语言都支持JSONleto={x:1,y:2};//使用字面量方式定义一个对象olets=JSON.stringify(o);//获取对象o序列化后的结果console.log(typeofs);//对象o序列化后的类型是字符串，输出：stringconsole.log(s);//输出：{"x":1,"y":2}leto1=JSON.parse(s);//恢复重建为一个新对象o1
4.1JavaScript语言基础
4.1.5JavaScript对象7.全局对象
全局对象提供了可在任何地方使用的变量和函数
内置语言或环境中，浏览器中的名字是window全局对象的所有属性都可以被直接访问alert("JavaScript");window.alert("JavaScript");varstr="JavaScript";console.log(window.str);//输出JavaScript
4.1JavaScript语言基础
4.1.6JavaScript基础语法1.类型转换
类型转换非常灵活，例如当程序需要一个布尔类型的值的时候，JavaScript会尝试将其他类型自动转换为布尔类型console.log("6"*"7");//字符串转换为数字，输出：42leta="5";//a为字符串5console.log(32-a);//字符串a转换为了数值5，结果是27console.log(20+"JavaScript");//20转换为了字符串
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式
表达式是能够被求得一个值得JavaScript短语直接嵌入在程序中的一些字面量是最简单的表达式一个变量名也是一个表达式通过操作符来组合简单的表达式，从而构建更复杂的表达式
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→主表达式
独立存在不包含更简单表达式的表达式为主表达式包括常量、字面量、变量引用以及某些语言关键字"JavaScript";//字符串字面量92.5//数值字面量/^\w+$///正则表达式true//布尔值this//求值为当前对象 null//空值undefined//全局常量
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→对象与数组创建表达式
对象和数组的创建初始化也是表达式[]//空数组{}//空对象[1,2]//两个元素的数组{x:1,y:2}//两个属性的对象newObject()//空对象newArray()//空数组
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→属性访问表达式
对对象的属性或者数组元素进行求值的表达式leto={x:1,y:{i:3,j:4}};//定义对象oleta=[5,6,[7,8]];//定义数组aconsole.log(o.x);//输出：1console.log(o.y.j);//输出：4console.log(o["y"].i);//输出：3console.log(a[1]);//输出：6console.log(a[2][1]);//输出：8
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→属性访问表达式
ES2020增加了新的属性访问表达式可选链接操作符“?.”leto={x:1,y:null};//定义对象oconsole.log(o.y?.k);//输出undefinedconsole.log(o.y?.["k"]);//输出undefinedconsole.log(o.y.k);//程序报错，错误类型TypeError
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→函数定义与调用表达式
JavaScript语言使用关键字function定义函数，对函数的定义和调用也是一种表达式letsum=function(a,b){returna+b;};//定义用于求和的函数sumletc=sum(5,6);//调用求和函数sum
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→操作符
操作符用于组合多个表达式实现算术运算、比较、求逻辑值、赋值等功能一元操作符（一个操作数）、二元操作符（两个操作数）和三元操作符（三个操作数）操作符具有优先级控制，优先级高的操作符先运算优先级相同时，还要考虑操作符的结合性
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→算术操作表达式
一元算术操作符包含一元加（+）、一元减（-）、递增（++）和递减（--）二元算术操作符是幂（**）、乘（*）、除（/）、模（%）、加（+）和减（-）位操作符是对数值的二进制表示执行低级位操作，其操作数是数值且返回值也是数值，可以把它归类为算术操作
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→关系表达式
关系操作符用于测定两个操作数之间的关系用于判断相等的操作符有两个，一个是相等（==），一个是严格相等（===）小于（<）、大于（>）、小于等于（<=）、大于等于（>=）操作符用于比较两个操作数in操作符，左侧为字符串，右侧为对象，如果左侧的值是右侧的对象的属性名，则返回trueinstanceof操作符，左侧操作数是对象，右侧是对象类的标识
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→逻辑表达式与（&&）操作时当且仅当两个操作数都求值为true时，结果才为true或（||）操作时当且仅当两个操作数都求值为false时，结果才为false非（!）操作符出现在操作数前面，可以反转操作数的布尔值
4.1JavaScript语言基础
4.1.6JavaScript基础语法2.表达式→赋值表达式当为变量或者对象属性赋值时使用等号（=）操作符，如下示例letx=3;//给变量x赋值为3leto={};//声明一个对象oo.y=0;//设置对象o的属性y为0leti,j,k;//声明3个变量i=j=k=0;//同时将3个变量初始化为0
4.1JavaScript语言基础
4.1.6JavaScript基础语法3.变量与常量→声明变量是数据值的“命名存储”，即使用名字（或标识符）表示一个值使用变量或者常量之前需要先声明它ES6开始，我们使用let关键字来声明变量，声明变量的同时可以给变量赋初始值使用const关键字来声明常量，const必须在声明时初始化常量
4.1JavaScript语言基础
4.1.6JavaScript基础语法3.变量与常量→声明：示例letx;//声明变量x，未赋初始值console.log(x);//结果：undefinedlet_total,sum;//使用一条let语句声明多个变量leti=0;//声明变量的同时初始化i=5;//修改变量的值constPI=3.1415926;//声明一个常量PI
4.1JavaScript语言基础
4.1.6JavaScript基础语法3.变量与常量→作用域变量的作用域（scope）是指程序源码中的一个区域，在这个区域内变量有效通过let和const声明的变量和常量具有块级作用域多条语句组合能够以语句块的形式出现，通常将它们放在一个{}中，也称为一个代码块声明在一个代码块中的变量或常量，在代码块外是无法进行访问和使用
4.1JavaScript语言基础
4.1.6JavaScript基础语法3.变量与常量→作用域：示例letx=5;//声明全局变量x{//代码块，形成一个块级作用域leti=0;//声明局部变量iconsole.log(x);//此处可以访问全局变量xconsole.log(i);//作用域内可以访问局部变量i}console.log(i);//报错，作用域外不能访问局部变量i
4.1JavaScript语言基础
4.1.6JavaScript基础语法3.变量与常量→旧时的var在ES6之前，声明一个变量的唯一方式是使用var关键字，其语法和let相同，无法声明常量使用var声明的变量不具有块作用域拥有作用域提升的特性现代JavaScript脚本中一般不再使用var声明变量
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句语句可以在执行后往往会导致某个事件发生，也就是能够完成既定任务语句的默认执行顺序是从上而下，顺序执行使用控制语句可以改变程序执行顺序
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→if语句if语句的基本形式如下所示只有当条件表达式expression求值为true时，花括号中的语句才会执行if(expression){ 当条件表达式expression求值为true时执行的代码}
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→if语句if语句和else语句组合在一起，基本形式如下if(expression){ 当条件表达式expression求值为true时执行的代码}else{ 当条件表达式expression求值为false时执行的代码}
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→if语句
多个条件堆叠的判定可以使用多层ifelseif的形式if(expression1){ 当expression1为true时执行的代码}elseif(expression2){ 当expression2为true时执行的代码}else{ 当expression1和expression2都不为true时执行的代码}
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→switch语句
属于多分支语句，switch语句的基本形式如下switch(expression){casevalue1:
执行代码块1
break;casevalue2:
执行代码块2
break;default:
expression的求值与value1和value2不同时执行的代码}
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→while语句
while语句是基本循环语句，基本形式如下执行while语句时，解释器首先会求值表达式，求值为true的情况下，循环体部分会一直执行。如果条件不成立，则循环体不执行while(expression){ 需要执行的代码（循环体）}
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→do-while语句
while循环的变体，基本形式如下循环会先执行一次代码块，然后再检查表达式是否为真，如果表达式为真的话，就会重复这个循环do{ 需要执行的代码}while(expression);
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→for语句
循环for用于重复执行代码块，直到条件不再成立第一，initialize会在循环开始前执行；第二，test定义运行循环的条件，如果条件成立，则执行循环体，如果不成立则跳出循环；
第三，increment在循环已被执行之后执行，一般用于递增变量for(initialize;test;increment){ 被执行的代码块（循环体）}
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→for-of语句
ES6定义了一个专门用于可迭代对象的循环语句for-of
用于遍历可迭代对象的元素目前，我们只需要知道字符串、数组、集合和映射都是可迭代的就行了for(propertyofexpression){ 被执行的代码块（循环体）}
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→for-in语句
for-in循环的in后面可以是任意的对象，它是用于枚举对象中的可枚举的（enumerable）非符号属性执行for-in语句时，会首先求值object，对求值对象的每一个可枚举的对象属性执行一次循环体for(variableinobject){ 被执行的代码块（循环体）}
4.1JavaScript语言基础
4.1.6JavaScript基础语法4.语句→break和continue辅助语句，break用于跳出循环或用在case之后，防止case击穿
continue用于跳过一次循环，开始下一次循环
4.1JavaScript语言基础
4.1.7JavaScript引用类型
引用类型是把数据和功能组织到一起的数据结构，可以理解为一类对象的定义
一般是通过使用new操作符后跟一个构造函数（constructor）来创建
4.1JavaScript语言基础
4.1.7JavaScript引用类型1.日期和时间（Date）
日期（Date）对象存储日期和时间，并提供了日期/时间的管理方法
Date类型将日期保存为自协调世界时（UTC，UniversalTimeCoordinated），保存的是从1970年1月1日午夜（零时）至今所经过的毫秒数可精确表示1970年1月1日之前及之后285616年的日期
4.1JavaScript语言基础
4.1.7JavaScript引用类型1.日期和时间（Date）→创建
调用newDate()创建一个新的Date对象
newDate(milliseconds)，传入毫秒值newDate(datestring)，传入表示日期的字符串newDate(year,month,date,hours,minutes,seconds,ms)，只有前两个参数是必须的
4.1JavaScript语言基础
4.1.7JavaScript引用类型1.日期和时间（Date）→访问日期
可以从一个Date对象中访问年、月等信息getFullYear()，获取年份，4位数getMonth()，获取月份，从0到11getDate()，获取当月具体日期，从1到31getHours()，获取小时
getMinutes()，获取分钟
4.1JavaScript语言基础
4.1.7JavaScript引用类型1.日期和时间（Date）→访问日期
可以从一个Date对象中访问年、月等信息getSeconds()，获取秒getMilliseconds()，获取毫秒getDays()，获取一周中的第几天getTime()，获取日期对应的时间戳
4.1JavaScript语言基础
4.1.7JavaScript引用类型1.日期和时间（Date）→设置日期
以下方法用于设置日期/时间对象setFullYear(year,[month],[date])，设置年月日setMonth(month,[date])，设置月日setDate(date)，设置日setHours(hour,[min],[sec],[ms])，设置时、分、秒、毫秒
4.1JavaScript语言基础
4.1.7JavaScript引用类型1.日期和时间（Date）→设置日期
以下方法用于设置日期/时间对象setMinutes(min,[sec],[ms])，设置分、秒、毫秒setSeconds(sec,[ms])，设置秒、毫秒setMilliseconds(ms)，设置毫秒setTime(timestamp)，使用给定的时间戳设置日期
4.1JavaScript语言基础
4.1.7JavaScript引用类型2.正则表达式（RegExp）
用于描述和匹配文本中字符串的类型，被称为正则表达式RegExp通过一种特殊的字面量语法来创建，一对正斜杠（/）之间的文本就构成了正则表达式字面量第二个正斜杠（/）后还可以跟一个或多个字母，指定不同的匹配模式
4.1JavaScript语言基础
4.1.7JavaScript引用类型2.正则表达式（RegExp）：示例/JavaScript///匹配字符串“JavaScript”/^\d+\.\d+$///匹配带小数点的数字/^[0-9]{8}$///匹配字符串是否为8位数字/^\w+$/ //匹配字符串是否由数字、字母、下划线组成/^(0\d{2,3}-\d{7,8}///匹配座机号码
4.1JavaScript语言基础
4.1.7JavaScript引用类型2.正则表达式（RegExp）：使用示例"JavaScript".search(/cri/);//返回第一个匹配项起始位置，结果：5"html".search(/cri/);//未找到匹配项返回-1，结果：-1"Q5B54".replace(/\d/g,"0");//所有单个数字替换为0，结果：Q0B00"12+8=".match(/\d+/g); //未找到匹配项则返回null，否则返回数组，结果：["12","8"]"how,are,you".split(/,/);//字符串分割，返回分割后数组，结果：["how","are","you"]/\d{2}/.test("int64")//找到匹配项，返回true，否则返回false，结果：true
4.1JavaScript语言基础
4.1.7JavaScript引用类型3.数组类型（Array）
表示一组有序的数据一个数组中不同的元素可以存储不同类型的数据数组也是动态大小的，会随着数据添加而自动的增长
4.1JavaScript语言基础
4.1.7JavaScript引用类型3.数组类型（Array）→创建
可以使用Array构造函数创建数组letbooks=newArray();//创建一个数组，未指定长度letcolors=newArray(10);//创建一个数组，长度为10letvalues=newArray("red","blue","green");//创建时初始化letmovies=Array();//new操作符号可以省略
4.1JavaScript语言基础
4.1.7JavaScript引用类型3.数组类型（Array）→创建
直接使用数组字面量也可以创建数组，它使用中括号包含以逗号分隔的元素列表表示letcolors=["red","blue","green"];letbooks=[];//创建一个空数组
4.1JavaScript语言基础
4.1.7JavaScript引用类型3.数组类型（Array）→创建
ES6对Array构造函数增加了两个用于创建数组的静态方法，分别是from()和of()from()用于将类数组结构转换为数组的实例of()则用于将一组参数转换为数组实例letchars=Array.from("hello");//结果：["h","e","l","l","o"]letvalues=Array.of(1,2,3);//结果：["1","2","3"]
4.1JavaScript语言基础
4.1.7JavaScript引用类型3.数组类型（Array）→数组索引
索引表示数据在数组中的顺序，可以用来设置或者获取元素的值索引从0开始，在数组的属性length中保存了数组的元素个数letvalues=[1,2,3,4];console.log(values.length);//输出：4letx=values[2];//结果：x=3values[3]=5;//将数组第4个元素的值修改为5
4.1JavaScript语言基础
4.1.7JavaScript引用类型3.数组类型（Array）→数组遍历
Array的原型有3个用于遍历数组内容的迭代器方法
keys()，返回数组索引的迭代器values()，返回数组元素的迭代器
entries()，返回[索引，值]对的迭代器letcolors=["r","g","b"];console.log(Array.from(colors.values()));//输出：["r","g","b"]for(let[i,e]ofcolors.entries()){ //遍历数组console.log("第"+i+"个元素是："+e);}
4.1JavaScript语言基础
4.1.7JavaScript引用类型3.数组类型（Array）→常用操作方法push()，末尾添加，可传入多个元素pop()，删除数组的最后一个元素shift()，删除数组的第一个元素并返回unshift()，开头添加，可传入多个元素sort()，默认按照升序重新排列数组元素，可传比较函数reverse()，按照降序重新排列数组元素
4.1JavaScript语言基础
4.1.7JavaScript引用类型3.数组类型（Array）→常用操作方法concat()，创建新的数组，将参数附加到新数组末尾slice()，取子数组,传参start(开始索引)和end(结束索引)splice()，删除、插入或者替换元素，可传三个参数，start(开始操作索引)、num(要删除的元素数量)、后续参数为要插入的元素indexOf()，从前往后搜，返回第一个匹配元素索引lastIndexOf()，从后往前搜索，用法同indexOf()
4.1JavaScript语言基础
4.1.7JavaScript引用类型3.数组类型（Array）→常用操作方法filter()，传入一个函数，每个元素为参数运行函数，结果为true的项组成一个新的数组forEach()，传入函数，每个元素执行函数，无返回值map()，传入函数，每个元素执行函数，返回调用结果组成的新数组reduce()，归并执行，传入一个归并函数
4.1JavaScript语言基础
4.1.7JavaScript引用类型4.映射（Map）
ES6之前，在JavaScript中实现“键/值”对存储可以使用Object对象来实现
使用new操作符和Map构造函数创建映射使用属性size获取Map的大小set()方法再添加新的键/值对，使用get()方法获取，使用has()方法查询，还可以使用delete()方法和clear()方法删除值
4.1JavaScript语言基础
4.1.7JavaScript引用类型4.映射（Map）→示例letperson=newMap([//创建并初始化一个Map
["name","Julie"],
["age","18"],
["sex","girl"]]);person.set("nation","china");//添加一个新的键/值对console.log(person.size);//4console.log(person.get("age"));//18console.log(person.has("nation"));//trueperson.delete("name");//删除一个键值对console.log(person.has("name"));//falseperson.clear();//清空所有映射console.log(person.size);//0
4.1JavaScript语言基础
4.1.7JavaScript引用类型5.集合（Set）
集合Set也是ES6新增的类型
与Map类似，所不同的是Set仅仅是值的集合Set会维护值插入时的顺序，因此支持按顺序迭代集合的实例有一个迭代器，可以通过values()方法或者keys()方法获得，进而使用for-of语句遍历集合
4.1JavaScript语言基础
4.1.7JavaScript引用类型5.集合（Set）→示例letcolors=newSet(["red","green","blue"]);//创建并初始化一个Setcolors.add("orange");//添加一个新的集合值console.log(colors.size);//4console.log(colors.has("green"));//truecolors.delete("blue");//删除一个值console.log(colors.has("blue"));//falsecolors.clear();//清空所有值console.log(colors.size);//0
4.1JavaScript语言基础
4.1.8JavaScript函数
函数是参数化的，定义函数时可以包含一组形参，调用发生时会提供实参
每个调用还有另外一个值，称为调用上下文，是this关键字的值，函数有自己的作用域函数是对象，可以有自己的属性把函数赋值给另外一个对象的属性，称方法
4.1JavaScript语言基础
4.1.8JavaScript函数1.函数声明
函数是由function关键字声明，格式如下将函数的名字理解为是一个变量函数的声明语句会被提升到所在作用域顶部functionfunc_name(param1,param2,...){//函数体语句块}
4.1JavaScript语言基础
4.1.8JavaScript函数2.命名函数表达式
函数表达式中定义的函数是可以没有名字将定义的函数赋给一个变量或者常量命名函数表达式定义的函数不能在定义之前调用
4.1JavaScript语言基础
4.1.8JavaScript函数2.命名函数表达式→示例console.log(f1(3));//错误：f1未被初始化console.log(f2(1,2));//错误：f2未被初始化console.log(plus(1,2));//错误：plus未被定义//函数表达式定义函数f1constf1=function(x){returnx*x;
}//函数表达式定义函数f2constf2=functionplus(a,b){returna+b;
}console.log(f1(3));//正常执行，输出结果：9console.log(f2(1,2));//正常执行，输出结果：3console.log(plus(1,2));////错误：plus未被定义
4.1JavaScript语言基础
4.1.8JavaScript函数3.箭头函数ES6之后出现的更加简洁的定义函数的语法
使用符号“=>”分隔参数部分和函数体部分函数参数和箭头之间不能存在换行符
箭头函数无this值
4.1JavaScript语言基础
4.1.8JavaScript函数3.箭头函数→示例constf1=(a,b)=>{returna+b};//一般写法constf2=(a,b)=>a+b;//仅有return语句的简写constf3=x=>x*x;//仅有一个参数的简写constf4=()=>23;//没有参数时constf5=x=>({name:x});//返回对象字面量时letfiltered=[1,2,3,4].filter(x=>x>2);//箭头函数作为参数传递console.log(filtered);//输出数组：[3,4]
4.1JavaScript语言基础
4.1.8JavaScript函数4.嵌套函数与闭包→嵌套函数
函数是可以嵌套在其他函数中的
需要理解的是他们的变量作用域规则
内部函数可以访问包含自己的函数（或者更外层函数）的参数和变量
外部函数是不能够访问函数内部的变量
4.1JavaScript语言基础
4.1.8JavaScript函数4.嵌套函数与闭包→嵌套函数→示例leti=1;//全局变量functionouter(x){//外层函数定义letj=3;//外部变量//console.log(k);functioninner(){//内部嵌套函数定义letk=4;//内部变量returni+j+k+x;}returninner();}console.log(outer(2));//10
4.1JavaScript语言基础
4.1.8JavaScript函数4.嵌套函数与闭包→闭包
词法环境使函数声明会立即变为即用型函数
当代码要访问一个变量时首先会搜索内部词法环境，然后搜索外部环境，然后搜索更外部的环境，以此类推，直到全局词法环境内部函数和创建它时的词法环境（例如外部函数定义的变量等）永远的绑定在一起了，闭包就是指内部函数总是可以访问其所在的外部函数中声明的变量和参数在JavaScript中，所有函数都是天生闭包的
4.1JavaScript语言基础
4.1.8JavaScript函数4.嵌套函数与闭包→闭包→示例functioncounter(){//外部函数letcount=0;returnfunction(){//匿名内部嵌套函数returncount=count+1;}}letinner=counter();//调用外部函数将内部的嵌套函数返回并赋给变量innerconsole.log(inner());//输出：1console.log(inner());//输出：2console.log(inner());//输出：3
4.1JavaScript语言基础
4.1.8JavaScript函数5.rest参数与spread语法→rest参数
定义函数时不知将来调用者会提供多少参数可以使用rest参数来接收任意数量的参数rest参数使用三个点...并在后面跟着包含剩余参数的数组名称，将它们包含在函数定义中将剩余参数收集到数组中，必须放在末尾
4.1JavaScript语言基础
4.1.8JavaScript函数5.rest参数与spread语法→rest参数functionsumAll(...args){//参数将被收集到一个叫args的数组中letsum=0;for(letargofargs){sum+=arg;}returnsum;}console.log(sumAll(1,2));//输出：3console.log(sumAll(1,2,3,4,5));//输出：15
4.1JavaScript语言基础
4.1.8JavaScript函数5.rest参数与spread语法→spread语法
看起来和Rest参数一样，也是使用`...`，但是作用相反在函数调用时使用把可迭代对象的元素逐一“展开”到参数列表中
4.1JavaScript语言基础
4.1.8JavaScript函数5.rest参数与spread语法→spread语法letarr=[1,2,3,4,5];console.log(sumAll(...arr));//15letarr2=[6,7,8];console.log(sumAll(...arr,...arr2));//33console.log(sumAll(...arr,10,...arr2));//43letmerged=[0,...arr,...arr2,9,10];//合并数组letstr="JavaScript";console.log([...str]);//字符串转换为字符数组
4.1JavaScript语言基础
4.1.8JavaScript函数6.函数对象
函数就是对象，可把它们当作对象来处理把函数想象成可被调用的“行为对象”增/删属性，按引用传递等函数对象具有内部属性name和length，name就是函数的名字，length则返回函数入参的个数可以在函数对象上添加自定义的属性
4.1JavaScript语言基础
4.1.8JavaScript函数6.函数对象→示例functionsum(a,b){returna+b};//函数声明sum.count=5;//给函数对象定义属性console.log();//sumconsole.log(sum.length);//2console.log(sum.count);//5letsumAll=function(a,b,...more){//命名函数表达式letsum=a+b;for(letargofmore){sum+=arg;}}console.log(sumA);//sumAllconsole.log(sumAll.length);//2
4.1JavaScript语言基础
4.1.8JavaScript函数7.方法
方法其实就是JavaScript的函数，只不过它被保存为了某个对象的属性而已方法调用与函数调用的有一个重要的区别是它们的调用上下文this指向不同箭头函数没有this
4.1JavaScript语言基础
4.1.8JavaScript函数7.方法→示例letstr="outer";letf=function(){varstr="inner";console.log("this="+this);console.log("this.str="+this.str);}leto={str:"inObject",order:1}o.m=f;f();//输出结果：this=Window,this.str=undefinedo.m();//输出结果this=o,this.str=inObject
4.2JavaScript常用系统对象
4.2.1DOM与BOM概述
ES（ECMAScript）语言规范部分
DOM（DocumentObjectModel，文档对象模型）BOM（BrowserObjectModal，浏览器对象模型）
4.2JavaScript常用系统对象
4.2.2window对象
window对象处于对象层次的顶端
window对象表示浏览器中打开的窗口如果文档包含框架（frame或iframe标签），浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象window对象的属性和方法是全局的
4.2JavaScript常用系统对象
4.2.2window对象→属性示例closed，窗口是否已被关闭document，对Document对象的只读引用outerheight，窗口的外部高度outerwidth，窗口的外部宽度self，对当前窗口的引用top，最顶层的先辈窗口screenLeft，窗口的左上角在屏幕上的坐标值
4.2JavaScript常用系统对象
4.2.2window对象→方法示例alert()，弹出警告框setInterval()，按指定的周期来调用函数或计算表达式close()，关闭浏览器窗口confirm()，弹出确认框open()，打开一个新的浏览器窗口resizeTo()，把窗口的大小调整到指定的宽度和高度scrollTo()，把内容滚动到指定的坐标
4.2JavaScript常用系统对象
4.2.3document对象
可通过window.document属性对其访问每个载入浏览器的HTML文档都会成为一个document对象使用document对象可以实现从脚本中对HTML页面中的所有元素进行访问
4.2JavaScript常用系统对象
4.2.3document对象→属性示例body，提供对<body>元素的直接访问cookie，设置或返回与当前文档有关的所有cookiedomain，返回当前文档的域名lastModified，返回文档被最后修改的日期和时间referrer，返回载入当前文档的URLtitle，返回当前文档的标题URL，返回当前文档的URL
4.2JavaScript常用系统对象
4.2.3document对象→方法示例close()，关闭用document.open()方法打开的输出流getElementById()，返回拥有指定id的第一个对象的引用getElementsByName()，返回带有指定名称的对象集合getElementsByTagName()，返回指定标签名的对象集合
open()，打开一个流write()，向文档写HTML表达式或JavaScript代码writeln()，同write()方法，再输出换行
4.2JavaScript常用系统对象
4.2.4navigator对象
navigator对象封装有关浏览器的详细信息appCodeName，浏览器的代码名appName，浏览器的名称appVersion，浏览器的平台和版本信息browserLanguage，当前浏览器的语言cookieEnabled，浏览器中是否启用cookie的布尔值userAgent，客户机发送服务器的user-agent头部的值
4.2JavaScript常用系统对象
4.2.5location对象
表示浏览器窗口中当前显示文档的Web地址host，设置或返回主机名和当前URL的端口号hostname，设置或返回当前URL的主机名href，设置或返回完整的URLpathname，设置或返回当前URL的路径部分port，设置或返回当前URL的端口号protocol，设置或返回当前URL的协议
4.2JavaScript常用系统对象
4.2.5location对象
还有三个方法assign()，加载新的文档reload()，重新加载当前文档replace()，用新的文档替换当前文档
4.2JavaScript常用系统对象
4.2.6history对象
设计来表示窗口的浏览历史，history对象的属性只有length，方法如下back()，加载history列表中的前一个URL
forward()，加载history列表中的下一个URLgo()，加载history列表中的某个具体页面
4.3DOM操作
DOM模型显示它是一个树型结构所有操作都是以这棵树的根节点document对象作为一个主“入口点”通过JavaScript脚本程序，可以任意动态的添加元素（节点）、删除元素（节点）、访问并操纵元素（节点）等
4.3DOM操作
4.3.1定位并获取元素1.通过方法获取
getElementById()，通过id获取getElementsByTagName()，通过标签名获取getElementsByClassName()，通过类名获取getElementsByName()，通过name属性获取querySelector()，通过选择器获取一个元素querySelectorAll()，通过选择器获取多个元素
4.3DOM操作
4.3.1定位并获取元素1.通过方法获取→示例
<!--HTML代码略-->
letlist1=document.getElementById("list1");list1.style.color="red";letlist=document.getElementsByTagName("li");console.log(list.length);letlist3=document.getElementsByName("list3");letu1=document.querySelector("#u1");letu1_list2=u1.querySelectorAll(".list2");
4.3DOM操作
4.3.1定位并获取元素2.通过节点关系获取
DOM树是一个由节点构成的层级关系每段标记都可以表示为这个树型结构中的一个节点DOM中共有12种节点类型每个节点都具有nodeType、nodeName和nodeValue这样三个属性每个节点都与其他节点存在联系
4.3DOM操作
4.3.1定位并获取元素2.通过节点关系获取→节点关系图
4.3DOM操作
4.3.1定位并获取元素2.通过节点关系获取→【例4-3】<ulid="u1"><liid="list1">列表项1</li><liid="list2">列表项2</li></ul><scripttype="text/javascript">letu1=document.getElementById("u1");letu1_childNodes=u1.childNodes;console.log(u1_childNodes.length);//5letu1_firstNode=u1_childNodes[0];//取出第1个子节点console.log(u1_firstNode.nodeType);//3console.log(u1_firstNode.nodeName);//#textconsole.log(u1_firstNode.nodeValue);//换行</script>
4.3DOM操作
4.3.1定位并获取元素2.通过节点关系获取→【例4-4】<div><ulid="u1"><liid="list1">列表项1</li><liid="list2">列表项2</li></ul></div><scripttype="text/javascript">letu1=documen
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 光缆安全教育培训课件
- 高尿酸血症与痛风诊疗指南
- 消防安全经验学习手册
- 光伏维护工程师培训课件
- 2025-2026学年人教版九年级化学上学期期末常考题之水的净化方法
- 光伏支架安装安全培训课件
- 光伏市场开发培训课件
- 关键过程与特殊过程培训课件（经典）-1-26
- 佳龙安全培训课件
- 余杭安全生产培训课件
- DB42T 1941.1-2022 湖北省市县级国土空间总体规划数据库技术规范 第1部分：汇交要求
- 团支部培训课件
- 北京市朝阳区人民法院人身保险合同纠纷案件审判白皮书（2020年度-2024年度）
- 种植项目预算方案(3篇)
- 会场各项设备管理制度
- 《国际货代基础》 课件 项目五任务一 体验国际海运代理业务
- 电镀厂员工工作报告总结
- 高精度体温计与红外测温仪行业深度调研及发展项目商业计划书
- 盒马生鲜合作协议书
- 直播中控合同协议
- 新闻传播学媒介伦理与法规试卷
评论
0/150
提交评论