Java Web开发技术 课件 2.4 JavaScript

JavaWeb开发技术2.4JavaScript1

本讲介绍JavaScript，涉及其增强网页交互、操作HTML/CSS等特点，讲解语法基础（变量、运算符、流程控制等），阐述BOM（窗口操作、定时器）与DOM（节点操作、事件处理）应用，还介绍正则表达式、ES6+箭头函数与模板字符串等扩展知识。主要内容2.4JavaScriptJavaScript（简称JS）是一种轻量级的解释型编程语言，它在网页开发中扮演着至关重要的角色。JavaScript以其作为开发Web页面的脚本语言而闻名，但也被广泛应用于非浏览器环境中。JavaScript具有函数优先的特性，支持面向对象、命令式、声明式和函数式编程范式，是一种基于原型编程、多范式的动态脚本语言。JavaScriptJavaScript主要用于增强网页的交互性。通过JavaScript，可以响应用户的操作（如点击、输入等），从而改变页面的外观和行为。例如，实现下拉菜单、轮播图、动态表单验证等功能。0103022.4.1JavaScript基础02030405JavaScript的特点增强网页的交互性JavaScript提供了丰富的API来操作HTML文档的内容和结构，如获取和修改元素内容、属性等。同时，JavaScript也可以与CSS交互，动态地修改网页的样式，实现页面的动态布局和效果。操作HTML和CSS在Web开发中，HTML、CSS和JavaScript通常一起使用，相互协作，以创建丰富、交互性强的用户体验。HTML定义了网页的结构，CSS负责网页的样式和布局，而JavaScript则负责网页的行为和交互逻辑。协同工作JavaScript代码可以在几乎所有的现代浏览器上运行，无论是Windows、macOS还是Linux操作系统，这使得基于JavaScript的Web应用具有良好的跨平台性。跨平台性除了在浏览器中运行外，JavaScript还可以通过Node.js等技术在服务器端运行，甚至可以通过ReactNative、Electron等框架开发跨平台的移动应用和桌面应用。非浏览器环境应用2.4.1JavaScript基础单行注释：//这是单行注释多行注释：/*这是多行注释*/01注释使用var、let或const声明变量。数据类型包括：Number、String、Boolean、Object、Null、Undefined、Symbol（ES6+）和BigInt（ES2020+）。02变量和数据类型算术运算符：+、-、*、/、%等。比较运算符：==、===、!=、!==、<、>等。逻辑运算符：&&、||、!等。赋值运算符：=、+=、-=等。三元运算符?：cond_expr?if_true:if_false03运算符JavaScript语法基础2.4.1JavaScript基础JavaScript语法基础单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字4.条件语句(2)switch语句多分支选择语句用switch实现，其语法格式为：(1)if语句双分支条件语句的语法格式为：若只有条件为真时执行的部分，可简写为以下形式if(condition){//当condition为真时执行的代码

}else{//当condition为假时执行的代码

}switch(expression){casevalue1://当expression等于value1时执行的代码

break;casevalue2://当expression等于value2时执行的代码

break;default://如果没有匹配的值时执行的代码

}if(condition){//当condition为真时执行的代码

}2.4.1JavaScript基础JavaScript语法基础单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字5.循环(2)while循环当条件为真时要执行的循环操作可用while循环，其语法为：(1)for循环下面是非常典型的for循环结构。执行1次的是s1，循环过程为s2→s4→s3→s2。通常s1用于设置初值，s2用作条件，s4用作循环体。例：求自然数1-100的和。遍历集合对象时可用下面的形式：while(condition){//循环体

}(3)do...while循环在判定循环条件前至少要执行一次循环任务时，可用dowhile循环，其语法为：do{//循环体

}while(condition);for(s1;s2;s3){s4;}letsum=0for(leti=1;i<100;i++){sum+=I;}for(keyinobj){//obj[key];}2.4.1JavaScript基础函数单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字1.函数声明代码的模块化可借助函数来实现，其典型语法结构为2.函数调用在需要的地方调用函数时，可直接写成下面形式：functionfunctionName(parameters){//函数体

returnvalue;}varret_value=functionName(parameters);若没有返回值，不要写return部分即可。如果函数中没有返回值，则直接写为：functionName(parameters);2.4.1JavaScript基础对象单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字1.定义对象可用以下形式进行定义：2.访问对象成员对象中的属性与方法可用下列形式进行访问：constobj={propertyName:value,methodName:function(){//方法体

}};constvalue=pertyName;constresult=obj.methodName();2.4.1JavaScript基础数组单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字单击此处输入你的正文，请尽量言简意赅的阐述观点，以便观者可以准确理解您所传达的信息关键字1.定义以下方式均可定义数组：vararr=[];vararr=[eleList];vararr=newArray();vararr=newArray(5);vararr=newArray(eleList);Javascrip中的数组长度可变、存储的数据类型可以不同。2.引用数组元素采用以下方式进行引用：arr[i]=value;3.遍历遍历数组时通常使用for|foreachinarray|arr.forEachfor等方法来实现。for(vari=0;i<arr.length;i++){//code}4.属性数组中用得最多的属性是length，其用于设置或返回数组中元素的数量。constarr=[item1,item2,item3];console.log(arr.lenth)//22.4.1JavaScript基础以下是Javascript数组中常用的一些方法，简要列出，供参考5.数组方法push()：在数组的末尾添加一个或多个元素，并返回新的长度。pop()：删除数组的最后一个元素，并返回那个元素。shift()：删除数组的第一个元素，并返回那个元素。unshift()：在数组的开头添加一个或多个元素，并返回新的长度。splice()：通过删除现有元素和/或添加新元素来改变一个数组的内容。slice()：返回一个新的数组对象，这一对象是一个由开始和结束选择的原数组的浅拷贝（包括开始，不含结束）。原始数组不会被修改。concat()：用于合并两个或多个数组。此方法不会改变现有数组，而仅仅会返回被合并数组的一个副本。join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。reverse()：颠倒数组中元素的顺序。sort()：对数组的元素进行排序。indexOf()：搜索数组中的元素，并返回它所在的位置。lastIndexOf()：返回一个指定的元素在数组中最后出现的位置，如果不存在，则返回-1。filter()：创建一个新数组,其包含通过所提供函数实现的测试的所有元素。map()：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。forEach()：用于调用数组的每个元素，并将元素传递给回调函数。find()：返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。findIndex()：返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。some()：测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个布尔值。every()：测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。reduce()：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。reduceRight()：接受一个函数作为累加器，数组中的每个值（从右到左）开始缩减，最终计算为一个值。flat()：按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。flatMap()：首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它相当于map()接着flat()的效果。这些方法使得JavaScript数组非常强大和灵活，可以用于各种数据处理任务。2.3.1JavaScript基础JavaScript中的String对象主要用来处理字符串。其常用属性是length，用于返回字符串的长度。字符串charAt(index)：返回在指定位置的字符。concat(...strings)：将一个或多个字符串与原字符串连接合并，形成一个新的字符串。includes(searchString,position)：判断一个字符串是否包含在另一个字符串中，根据情况返回true或false。indexOf(searchValue,fromIndex)：返回指定值在字符串中首次出现的位置，如果未找到则返回-1。slice(startIndex,endIndex)：提取字符串的某个部分并返回新的字符串，不修改原字符串。split(separator,limit)：将字符串分割成字符串数组。toLowerCase()：将整个字符串转换成小写。toUpperCase()：将整个字符串转换成大写。trim()：去除字符串两端的空白字符。replace(searchFor,replaceWith)：在字符串中用一些字符替换另一些字符，或者替换一个与正则表达式匹配的子串。match(regexp)：根据正则表达式，执行一个搜索匹配。search(regexp)：搜索与正则表达式相匹配的字符串，返回匹配到的位置索引，否则返回-1。substr(start,length)：通过指定起始位置和长度来返回一个子字符串。substring(startIndex,endIndex)：返回字符串中指定两个下标之间的字符。padStart(targetLength,padString)：用另一个字符串填充当前字符串（如果需要的话），以便产生的字符串达到指定的长度。填充是应用在原字符串开头的。padEnd(targetLength,padString)：用另一个字符串填充当前字符串（如果需要的话），以便产生的字符串达到指定的长度。填充是应用在原字符串结尾的。repeat(count)：返回一个新字符串，表示将原字符串重复n次。startsWith(searchString,position)：判断当前字符串是否以另外一个给定的子字符串开头，根据判断结果返回true或false。endsWith(searchString,length)：判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回true或false。codePointAt(pos)：返回在指定的位置的字符的Unicode编码点。normalize(form)：返回调用字符串值的Unicode正规形式。这些方法为处理和分析字符串提供了丰富的功能，是JavaScript中处理文本时不可或缺的工具。2.4.2Bom与DOMBOM（BrowserObjectModel，浏览器对象模型）是JavaScript的一部分，它提供了与浏览器交互的接口，允许开发者通过JavaScript代码来操作浏览器窗口、导航、历史记录、屏幕信息、定位信息、本地存储等。BOM不是由任何标准化组织定义的，而是由不同的浏览器厂商实现的，因此其实现方式可能有所不同，但大多数现代浏览器都支持一套相似的BOM功能。BOM为JavaScript提供了丰富的接口来与浏览器进行交互，是Web开发中不可或缺的一部分BOMwindow.open(URL,name,specs,replace)：打开一个新窗口或查找一个已命名的窗口。window.close()：关闭当前窗口。window.resizeTo(width,height)和window.resizeBy(width,height)：调整窗口大小。window.moveTo(x,y)和window.moveBy(x,y)：移动窗口。window.scrollTo(x,y)和window.scrollBy(x,y)：滚动窗口到指定位置或滚动一定距离。0103022.4.2Bom与DOM02030405BOM应用方法窗口对象（Window）window.location：用于获取或设置当前页面的URL，并可用于导航到新页面。window.history：提供了对浏览器会话历史的访问，允许你前进或后退到会话中的其他页面。导航和历史记录window.screen：包含了有关用户屏幕的信息，如屏幕宽度、高度和颜色深度。

屏幕信息alert(message)：显示带有一段消息和一个确认按钮的警告框。confirm(message)：显示带有一段消息以及确认按钮和取消按钮的对话框。prompt(text,defaultText)：显示可提示用户输入的对话框。对话框setTimeout(function,milliseconds)：在指定的毫秒数后执行函数。setInterval(function,milliseconds)：每隔指定的毫秒数重复执行函数。clearTimeout(timeoutID)和clearInterval(intervalID)：取消由setTimeout()和setInterval()设置的定时器。定时器2.4.2Bom与DOM

由于BOM不是标准化的，因此在使用时需要注意不同浏览器之间的兼容性问题。过度使用BOM可能会导致用户体验不佳，特别是在未经用户同意的情况下打开新窗口或弹出对话框。在使用BOM进行页面导航时，应谨慎使用，以避免破坏用户的浏览体验。BOM的注意事项2.4.2Bom与DOMDOM（DocumentObjectModel，文档对象模型）是Web开发中用于表示和操作网页内容的一种标准编程接口。它提供了一种方式，使得网页可以被视为一个由节点（Node）组成的层次结构，每个节点代表文档中的一个元素、属性、文本或注释。通过DOM，开发人员可以使用脚本语言（如JavaScript）来访问和操作文档中的各个节点，实现动态地修改网页内容、样式和结构，从而增强网页的交互性和动态性。DOM2.4.2Bom与DOM层次结构DOM将网页表示为一个树状结构，其中每个节点都有父节点、子节点和兄弟节点的关系。01对象化DOM将网页中的每个部分都转换为了一个对象，使得可以通过编程方式访问和操作这些对象。02动态性DOM允许在网页加载后动态地修改其内容和结构，而无需重新加载整个页面。03DOM的主要特点2.4.2Bom与DOMdocument.getElementById(id)：根据元素的ID获取元素节点。document.getElementsByTagName(tagName)：根据标签名获取元素节点列表。document.getElementsByClassName(className)：根据类名获取元素节点列表。document.querySelector(selector)：根据CSS选择器获取符合条件的第一个元素节点。document.querySelectorAll(selector)：根据CSS选择器获取所有符合条件的元素节点列表。01

获取元素document.createElement(tagName)：创建一个新的元素节点。document.createTextNode(text)：创建一个包含指定文本内容的文本节点。parentNode.appendChild(node)：将指定节点作为最后一个子节点添加到目标节点。parentNode.insertBefore(newNode,referenceNode)：将新节点插入到参考节点之前。02创建和添加节点修改元素属性：使用element.setAttribute(name,value)设置元素的属性，使用element.getAttribute(name)获取属性的值。修改元素内容：使用element.innerHTML或element.textContent来修改元素的文本内容或HTML结构。修改元素样式：使用perty设置元素的样式属性，如element.style.color="red"。03修改节点DOM的主要应用方法DOM提供了一系列的方法和属性，用于访问和操作文档中的节点。以下是一些常见的DOM应用方法。2.4.2Bom与DOMparentNode.removeChild(node)：从父节点中移除指定节点。04删除节点使用parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等属性来遍历DOM树。05遍历DOM树使用element.addEventListener(event,callback)为元素添加事件监听器，以响应用户的交互动作。06事件处理DOM的主要应用方法2.4.2Bom与DOMJavaScript中常见事件名称及其作用事件名称作用事件名称作用click当用户点击某个元素时触发。unload当用户离开页面（如点击链接跳转到新页面）时触发（注意：在现代浏览器中，由于安全限制，unload事件的处理程序可能不会执行）。dblclick当用户双击某个元素时触发。scroll当元素或页面滚动时触发。mouseover当鼠标指针移动到某个元素上方时触发。resize当浏览器窗口或元素的大小发生变化时触发。mouseout当鼠标指针从某个元素上移开时触发。focus当元素获得焦点时触发（如用户点击输入框）。mousedown当用户按下鼠标按钮在元素上时触发。blur当元素失去焦点时触发（如用户点击输入框外的区域）。mouseup当用户在元素上释放鼠标按钮时触发。change当表单元素的值发生变化且失去焦点时触发（如用户更改<input>、<select>或<textarea>的值）。mousemove当鼠标指针在元素内部移动时持续触发。submit当表单提交时触发。keydown当用户按下键盘上的任意键时触发。reset当表单重置时触发。keyup当用户释放键盘上的键时触发。touchstart当触摸点放在触摸屏上时触发。keypress当用户按下并释放键盘上的键，同时生成字符时触发（注意：并非所有按键都会生成字符，如功能键）。touchmove当触摸点在触摸屏上移动时触发。load当页面或资源（如图片、脚本等）完全加载后触发。touchend当触摸点从触摸屏上移开时触发。表2-4JavaScript中的常见事件名称及其作用注：这些事件的作用可能会根据具体的上下文（如事件绑定到的元素类型）和浏览器的实现而略有不同。此外，随着Web技术的发展，可能还会出现新的事件类型。2.4.3JavaScript扩展知识JavaScript中的正则表达式（RegularExpressions）是一种强大的文本处理工具，用于匹配字符串中的字符组合的模式。它们被广泛用于搜索、替换和验证字符串中的文本。正则表达式可以包含字符类、边界匹配器、量词、分组和反向引用等元素，以实现复杂的文本处理功能。

正则表达式是JavaScript中非常强大的工具，可以用于各种文本处理任务，如数据验证、数据清洗、数据提取等。掌握正则表达式的用法可以大大提高JavaScript编程的效率和灵活性。正则表达式2.4.3JavaScript扩展知识正则表达式的创建在JavaScript中，可以通过两种方式来创建正则表达式：字面量语法：使用斜杠（/）将正则表达式的模式包围起来。例如，letregex=/abc/;匹配包含“abc”的字符串。构造函数语法：使用RegExp对象的构造函数。例如，letregex=newRegExp('abc');同样匹配包含“abc”的字符串。这种方式允许在运行时动态地构建正则表达式。正则表达式的元素字符类：方括号[]中的字符集合，表示匹配任意一个方括号内的字符。例如，[abc]匹配“a”、“b”或“c”。边界匹配器：^表示行的开始，$表示行的结束。例如，^abc匹配以“abc”开头的字符串，abc$匹配以“abc”结尾的字符串。量词：指定前面的字符或字符类出现的次数。例如，a+匹配一个或多个“a”，a?匹配零个或一个“a”，a{3}匹配恰好三个“a”。分组：使用圆括号()将多个字符或字符类组合为一个单元。分组还可以用于反向引用。特殊字符：.匹配除换行符之外的任何单个字符，\d匹配数字，\w匹配字母、数字或下划线等。标志：紧跟在正则表达式字面量或RegExp构造函数的第二个参数中的标志，用于改变正则表达式的行为。例如，g表示全局搜索，i表示不区分大小写的搜索。

正则表达式的用法正则表达式在JavaScript中主要通过String对象的方法使用，如match()、search()、replace()和split()，以及RegExp对象自己的方法，如test()和exec()。match()：在字符串中执行一个搜索匹配，返回一个包含匹配结果的数组。search()：