Web技术基础教程 12_第1页
Web技术基础教程 12_第2页
Web技术基础教程 12_第3页
Web技术基础教程 12_第4页
Web技术基础教程 12_第5页
已阅读5页，还剩140页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaWeb开发技术与案例教程第3章JavaScript脚本语言第3章知识结构3.1JavaScript语言概述3.2HTML嵌入JavaScript方式3.3JavaScript语法基础•3.3.1输入与输出•3.3.2变量•3.3.3运算符•3.3.4流程控制•3.3.5函数3.4JavaScript浏览器对象3.5事件处理与绑定3.6JavaScript框架•3.6.1jQuery•3.6.2Vue•3.6.3React3.7本章小结1第3章课程导入

JavaScript是一种具有函数优先的轻量级、解释型或即时编译型的编程语言，广泛应用于网页开发中，主要用于增强网页的交互性和动态性。其跨平台和高适应性的特点，使得JavaScript成为全球最受欢迎和广泛使用的脚本语言之一。本章将学习如何运用JavaScript实现网页响应用户操作和处理数据，主要包括HTML嵌入JavaScript方式、JavaScript语法基础、JavaScript浏览器对象、事件处理与绑定、JavaScript框架等。◆本章要点•掌握在HTML页面中嵌入JavaScript的三种方式。•掌握prompt()、alert()、document.write()和console.log()等基本输入输出方法。•掌握var、let、const声明变量的区别以及JavaScript的数据类型。•熟悉window、document、location等BOM核心对象的使用。•理解jQuery、Vue、React三种主流前端框架的基本用法和引入方式。2第3章课程导入◆素养目标•筑牢用户隐私保护防线：在BOM事件处理中，强调用户行为数据采集的合法性，禁止未经授权的隐私数据上传。•倡导绿色计算，优化前端性能：通过虚拟DOM原理学习，理解前端渲染效率对用户体验的影响，培养节能意识。•防范前端安全漏洞：在表单验证实践中，掌握正则表达式过滤技术，防范XSS攻击，树立“安全从输入端开始”的防御思维。•推动技术创新，拓展应用场景：结合JavaScript案例，理解跨平台开发中的技术复用与创新价值。33.1JavaScript语言概述（1）

JavaScript（简称JS）作为Web开发的核心技术之一，与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处理样式和布局，而JavaScript则控制网页的行为和交互。用户可以利用JavaScript进行事件处理、表单交互和动态内容更新等多种功能。此外，JavaScript的应用已经扩展到服务器端（如Node.js）、移动应用开发和游戏开发等领域，成为现代编程环境中不可或缺的一部分。

JavaScript是遵循ECMAScript规范实现的一种编程语言，ECMAScript是定义脚本语言的规范，ECMAScript6.0是JavaScript语言的下一代标准，已经在2015年6月正式发布。ECMAScript6.0新增了许多特性，例如声明命令（let、const），模板字符串、解构赋值、扩展运算符、函数的默认参数和箭头函数、模版字符串、Set和Map集合，class类、Proxy、Promise等。43.1JavaScript语言概述（2）

ECMAScript与JavaScript的关系是：前者是后者的核心规范与标准，后者是前者的一种具体实现（此外，ECMAScript的常见实现还包括JScript和ActionScript等）。在日常开发和交流中，这两个名称通常可以互换使用。【注意】尽管JavaScript和Java的名称相似，但两者是完全不同的编程语言，在设计理念、应用场景以及语法特性等方面有着显著的区别。53.2HTML嵌入JavaScript方式（清单3-1javascript.html）

JavaScript代码可以嵌入到HTML页面中，清单3-1所示的代码中，采用内嵌式JavaScript代码引入方式。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>javascript</title></head><body><scripttype="text/javascript">alert("这是第一个JavaScript程序");</script></body></html>63.2HTML嵌入JavaScript方式在浏览器打开HTML文档，将看到一个弹窗，显示文字为“这是第一个JavaScript程序”。运行结果如图3-1所示。http://localhost:8080/ch03/javascript.html图3-1JavaScript运行结果73.2HTML嵌入JavaScript方式其实JavaScript可以通过多种方式嵌入到HTML页面中，包括内嵌式、外链式、CDN引入和动态加载，以下是这几种引入方式的使用方法。◆内嵌式直接在HTML文件中书写JavaScript代码，在页面打开的时候直接触发。<script>//JavaScript代码</script>【注意】JavaScript代码可以根据不同的需求放在HTML页面的不同位置，主要有三个位置：页面的<head>标签内、页面的<body>标签底部、外部文件中。其中，将JavaScript代码放在页面的<body>标签底部是最常见和推荐的做法，这样做的主要目的是提高页面加载速度。将代码放置在<body>标签底部，意味着在浏览器解析到JavaScript代码之前，它已经加载并显示了页面的内容，这样可以让用户更快地看到页面内容，而不必等待脚本加载完毕，从而提升用户体验。83.2HTML嵌入JavaScript方式◆外链式外链式代码是书写在一个“.js”的文件内，只要引入到HTML页面中，就会在页面打开的时候直接触发。新建一个“.js”后缀的文件，在文件内书写JavaScript代码，把写好的JavaScript文件引入HTML页面。例如：<scriptsrc="path/script.js"></script>93.2HTML嵌入JavaScript方式（代码示例）◆CDN引入通过内容分发网络（ContentDeliveryNetwork，CDN）引入外部的JS文件，此方法常用于大型网站。例如：<scriptsrc="/library.js"></script>103.2HTML嵌入JavaScript方式（代码示例）◆动态加载使用JavaScript代码动态创建<script>标签并插入到DOM中。例如：letscript=document.createElement('script');script.src='path/script.js';document.head.appendChild(script);113.3.1输入与输出◆输入在JavaScript中，与许多其他编程语言不同，并没有一个专门的“输入语句”直接从用户那里获取输入。相反，JavaScript通常依赖于特定的环境或API接收用户输入。以下是在不同环境中获取用户输入的方法。◆prompt()对话框

prompt()是一个对话框，可以获取用户输入的文本。例如：letuserInput=prompt("请输入你的名字：");console.log("用户输入的名字是："+userInput);123.3.1输入与输出清单3-2所示的代码中，在<head>中嵌入JavaScript代码，使用prompt()函数弹出输入框，提示用户输入名字，通过console.log()将用户输入的内容输出到浏览器控制台。完整的HTML文档代码如下。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>prompt</title><scripttype="text/javascript">letuserInput=prompt("请输入你的名字：");console.log("用户输入的名字是："+userInput);</script></head><body></body></html>133.3.1输入与输出上述代码运行结果如图3-2所示。http://localhost:8080/ch03/prompt.html图3-2prompt()对话框运行结果143.3.1输入与输出◆HTML表单和事件监听器利用HTML表单进行输入是更常见和灵活的方法，特别是在复杂的Web应用程序中。例如清单3-3所示的代码演示了表单输入的用法。153.3.1输入与输出（清单3-3input.html）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>输入</title></head><body><formid="myForm"><labelfor="name">名字：</label><inputtype="text"id="name"name="name"><buttontype="submit">提交</button></form><scripttype="text/javascript">document.getElementById('myForm').addEventListener('submit',function(event){event.preventDefault();//阻止表单的默认提交行为letuserName=document.getElementById('name').value;alert("用户输入的名字是："+userName);});</script></body></html>163.3.1输入与输出上述代码运行后访问input.html文档，浏览器弹出阻塞式输入对话框等待用户输入，显示结果如图3-3所示。http://localhost:8080/ch03/input.html图3-3表单输入事件运行结果173.3.1输入与输出◆输出在JavaScript中，有多种方式可以将数据输出到不同的目的地，比如浏览器控制台、HTML页面上的元素、或者通过命令行界面。以下是常用的输出语句和方法。◆alert()

alert()是以警告框形式输出的，一般用户体验比较差，不推荐使用此方法输出内容。例如清单3-4所示，加载该文档后会弹框显示“HelloWorld.”。183.3.1输入与输出（清单3-4alert.html）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>输出：alert</title></head><body><scripttype="text/javascript">alert("HelloWorld.");</script></body></html>193.3.1输入与输出上述代码运行结果如图3-4所示。http://localhost:8080/ch03/alert.html图3-4alert()弹出框运行结果203.3.1输入与输出（清单3-5write.html）◆document.write()

document.write()可以将参数内字符串作为HTML内容输出到网页，如清单3-5所示的代码。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>输出：write</title></head><body><scripttype="text/javascript">document.write("<divstyle='color:red'>HelloWorld.</div>");</script></body></html>213.3.1输入与输出上述代码运行结果如图3-5所示。http://localhost:8080/ch03/write.html图3-5write()使用实例运行结果【注意】document.write()会阻断页面的渲染流，且在文档加载完成后调用会重写整个页面。在现代单页应用（SinglePageApplication，SPA）和异步加载架构中，这是一个极度危险的方法。Chrome浏览器甚至在某些网络条件下（如2G）会拦截此调用以防止页面白屏。223.3.1输入与输出◆console.log()

console.log()是在浏览器的控制台（在浏览器中按〈F12〉键或者右键检查可打开控制台）上进行输出，一般用来辅助开发调试使用。如清单3-6所示的代码。233.3.1输入与输出（清单3-6console.html）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>输出：console.log()</title></head><body><scripttype="text/javascript">console.log("这是调试输出的信息");</script>在浏览器的控制台（按〈F12〉或者右键检查可找到控制台）查看输出结果。</body></html>243.3.1输入与输出上述代码运行结果如图3-6所示。http://localhost:8080/ch03/console.html图3-6console.log()使用实例运行结果253.3.2变量在JavaScript中，变量是用于存储信息的容器，在编程中是极其重要的基础。可以使用变量保存数字、文本、布尔值（true或false）、数组、对象，以及函数等。JavaScript是一种严格区分大小写的语言，例如变量A和变量a是两个不同的变量。下面是关于JavaScript变量使用的关键概念和实例。变量的声明在JavaScript中，声明变量需要使用特定的关键字，包括var、let和const。其中let和const是现代JavaScript（ES6+）的推荐标准。◆var

var可以声明全局或局部作用域的变量。如果在函数内部没有使用var声明，该变量会被视为全局变量。varmyVar='Hello,World!';263.3.2变量（代码示例）◆let

let用于声明块级作用域的变量，即在一对花括号{}内部。{letmyLet='Hello,Let!';console.log(myLet);//输出：Hello,Let!}//console.log(myLet);//报错：myLetisnotdefined(超出块级作用域)273.3.2变量（代码示例）◆const

const用于声明块级作用域的只读变量，一旦声明，其值就不能改变。constmyConst='Hello,Const!';【注意】const声明的变量必须在声明时就初始化，之后其值不能被改变。var具有函数作用域提升（Hoisting）的特性，极易导致变量污染和逻错误。在开发过程中应尽量避免使用var，除非是在历史遗留项目中特殊场景使用。283.3.2变量变量的初始化和赋值◆变量的初始化在声明变量的同时，可以对其进行初始化，即为其赋予一个初始值。例如：letx=10;//声明并初始化变量x，赋值为10。293.3.2变量（代码示例）◆变量的赋值变量可以在声明后随时被赋值。例如：x=20;//将20赋值给变量x，前提是变量x已被声明。303.3.2变量变量的数据类型

JavaScript中的变量是动态的，这意味着它们的类型是根据其值自动确定的，这一点和Python语言相似。JavaScript支持多种数据类型，包括：◆原始数据类型原始数据类型，也称为基本数据类型，例如：•number：数字类型，用于表示整数和浮点数。•string：字符串类型，用于表示文本数据。•boolean：布尔类型，用于表示真（true）或假（false）。•null：表示一个空值或不存在的值。•undefined：表示一个未定义的变量或未赋值的属性。•symbol：表示创建后独一无二且不可变的数据类型。313.3.2变量（代码示例）letinteger=42;letfloatNumber=3.14;console.log(integer);//输出:42console.log(floatNumber);//输出:3.14323.3.2变量◆引用数据类型在JavaScript中，引用数据类型（也称为对象类型）与原始数据类型（如字符串、数字、布尔值等）不同，它们是通过引用而不是值进行操作的。引用数据类型通常用于表示更复杂的数据结构，如数组、对象和函数等。下面是部分常用引用数据类型的实例。◆对象（Object）对象是最常见的引用数据类型之一，允许存储键值对（Key-ValuePairs）。例如：letperson={name:"Alice",age:25,greet:function(){console.log("Hello,mynameis"+);}};person.greet();//输出:Hello,mynameisAlice333.3.2变量（代码示例）◆数组（Array）数组是一种特殊的对象，用于存储有序的元素集合。例如：letfruits=["Apple","Banana","Cherry"];console.log(fruits[0]);//输出：Applefruits.push("Date");//添加一个新元素到数组末尾console.log(fruits);//输出：["Apple","Banana","Cherry","Date"]343.3.2变量（代码示例）◆函数（Function）函数在JavaScript中也是引用数据类型，它们可以被赋值给变量、作为参数传递给其他函数，以及从其他函数返回。例如：functionadd(a,b){returna+b;}letsum=add(5,3);console.log(sum);//输出：8353.3.3运算符在JavaScript中，运算符用于执行各种操作，比如算术运算、比较、赋值、逻辑运算等。它们在不同的上下文中发挥着重要的作用。理解和熟练使用运算符对于编写高效的JavaScript代码至关重要，下面是常见的JavaScript运算符。◆算术运算符

JavaScript算术运算符主要用于数值计算与类型转换，涵盖基础运算与特殊操作。基础运算符包括加减乘除（+、-、*、/）、取模（%）与指数（**），支持数字与字符串的隐式转换，如"5"+3会拼接成"53"，而"10"-2则转为数字8。一元运算符包含递增（++）、递减（--）及正负号转换（+、-），需注意前置与后置递增的区别：前置先运算后返回，后置先返回后运算。特殊场景需留意浮点数精度问题（如0.1+0.2≠0.3）、运算符优先级（括号可覆盖默认顺序）及自动类型转换规则（如空值转0、布尔值转1/0）。建议显式使用Number()转换避免隐式错误，严格比较时采用===替代==。实例用法如表3-1所示。363.3.3运算符表3-1算术运算符算术运算符说明实例结果+加法leta=5;letb=2;letc=a+b;c=7-减法leta=5;letb=2;letc=a-b;c=3*乘法leta=5;letb=2;letc=a*b;c=10/除法leta=5;letb=2;letc=a/b;c=2.5%取余leta=5;letb=2;letc=a%2;c=1++自增leta=5;letb=2;letc=a++;c=5--自减leta=5;letb=2;letc=a--;c=5**幂运算leta=5;letb=2;letc=a**b;c=25373.3.3运算符◆赋值运算符

JavaScript赋值运算符主要用于变量赋值操作，核心是基本赋值符=，其右侧值会覆盖左侧变量原有值。更高效的是复合赋值运算符（如+=、-=、*=等），可同步完成算术运算与赋值，例如a+=5等价于a=a+5，既简化代码又提升可读性。支持链式赋值（a=b=c=0）和解构赋值（ES6+），后者可从数组或对象提取值赋给变量。需注意赋值表达式本身会返回被赋的值，可能产生意外结果（如if(a=b)需用==替代）。合理使用复合运算符可减少重复变量引用，优化代码简洁性。具体用法实例如表3-2所示。383.3.3运算符表3-2赋值运算符赋值运算符说明实例结果=赋值leta=5;a=5+=加法赋值leta=5;a+=3;a=8-=减法赋值leta=5;a-=2;a=3*=乘法赋值leta=5;a*=2;a=10/=除法赋值leta=5;a/=2;a=2.5%=取余赋值leta=5;a%=2;a=1393.3.3运算符◆比较运算符JavaScript比较运算符用于判断值之间的关系，返回布尔结果。基本类型包括：等于（==）、严格等于（===）、不等于（!=）、严格不等于（!==）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）。其中==与!=会进行隐式类型转换（如5=="5"为true），而===与!==则直接比较值和类型（5==="5"为false），推荐优先使用严格比较以避免意外结果。字符串比较按字典序进行（"a"<"b"为true）。比较运算符常用于条件判断（如if语句）和循环控制，需注意其优先级低于算术运算符，建议用括号明确运算顺序。具体用法实例如表3-3所示。403.3.3运算符表3-3比较运算符比较运算符说明实例结果及分析==等于（比较值是否相等）leta=5;letb='5';letc=(a==b);c=true（会进行类型转换。）===严格等于（比较值和类型是否都相等）leta=5;letb='5';letc=(a===b);c=false（因为类型不同）!=不等于（值不相等）leta=5;letb='5';letc=(a!=b);c=false!==严格不等于（值和类型都不相等）leta=5;letb='5';letc=(a!==b);c=true>大于leta=5;letb='5';letc=(a>b);c=false（因为b被转换为数字5）<小于leta=5;letb='5';letc=(a<10);c=true>=大于等于leta=5;letb='5';letc=(a>=b);c=true<=小于等于leta=5;letb='5';letc=(a<=b);c=true413.3.3运算符◆逻辑运算符

JavaScript逻辑运算符用于布尔值或表达式的关系判断，核心包括逻辑与（&&）、逻辑或（||）、逻辑非（!）。逻辑与和逻辑或采用短路机制：&&若左操作数为假则直接返回左值，否则返回右值；||若左操作数为真则直接返回左值，否则返回右值。逻辑非会将操作数强制转为布尔值后取反（如!0为true，!""为true）。ES6+新增空值合并运算符（??），可处理null/undefined的默认值赋值（如a??b等价于a!==null&&a!==undefined?a:b）。逻辑运算符常用于条件控制、参数默认值设置及类型转换，需注意其优先级低于比较运算符，复杂表达式建议用括号明确运算顺序。具体用法实例如表3-4所示。423.3.3运算符表3-4逻辑运算符逻辑运算符说明实例结果&&逻辑与leta=true;letb=false;letc=a&&b;c=false||逻辑或leta=true;letb=false;letc=a||b;c=true!逻辑非leta=true;letc=!a;c=false433.3.3运算符◆位运算符

JavaScript位运算符直接操作数字的二进制位，适用于底层优化与位级操作。核心运算符包括：按位与（&）保留共同位，按位或（|）合并位，按位异或（^）取不同位，按位非（~）反转所有位，左移（<<）填充左侧0，右移（>>）保留符号位，无符号右移（>>>）填充0。例如：5&3（0101&0011=0001）结果为1，5|3（0101|0011=0111）结果为7。具体用法实例如表3-5所示。【注意】JavaScript数字按64位存储，但位运算会转换为32位有符号整数，大数可能溢出。按位非（~x）等价于-(x+1)，常用于快速取反。位运算符优先级低于算术运算符，复杂表达式建议用括号明确顺序。443.3.3运算符表3-5位运算符位运算符说明实例结果及分析&按位与leta=5;letb=3;letc=a&b;c=1（a=01012，b=00112，c=01012&00112=00012=1）|按位或leta=5;letb=3;letc=a|b;c=7（a=01012，b=00112，c=01012|00112=01112=7）^按位异或leta=5;letb=3;letc=a^b;c=6（a=01012，b=00112，c=01012^00112=01102=6）~按位非leta=5;letc=~a;c=-6（a=01012，c=~01012=-6）<<左移leta=5;letb=3;letc=a<<b;c=40（a=01012，b=00112，c=01012<<00112=1010002=40）>>右移leta=-5;letb=3;letc=a>>b;c=-1>>>无符号右移leta=-5;letb=3;letd=a>>>b;d=536870911453.3.3运算符关于位运算符“>>”和“>>>”解析如下：a=-5，转为二进制：111111111111111111111111111110112b=3，则：c=a>>3=111111111111111111111111111110112>>3。该操作符将数字的二进制表示向右移动3位数。移动后，左边用符号位（即最左边的位，0表示正数，1表示负数）的副本填充。这意味着正数用0填充，负数用1填充。因此：c=111111111111111111111111111111112=-1同样，d=a>>>3=111111111111111111111111111110112>>>3。463.3.3运算符该操作符也将数字的二进制表示向右移动3位数。但是，移动后，左边总是用0填充，无论原数是正是负。因此，对于负数来说，这会改变其符号位，使结果变为正数（在32位二进制范围内）。因此，d=000111111111111111111111111111112=536870911。总结：•>>是有符号右移，左边用符号位的副本填充。•>>>是无符号右移，左边总是用0填充。•这两个操作符在处理正数时结果相同，但在处理负数时结果不同。◆其他运算符

JavaScript运算符还可以用作条件判断、类型检查、实例检查、属性存在检查、属性删除和返回undefined等，例如：473.3.3运算符（代码示例）leta=5;letb=10;letmax=(a>b)?a:b;//max为10console.log(typeofa);//"number"functionPerson(){}letp=newPerson();console.log(pinstanceofPerson);//trueletobj={name:"Alice"};console.log("name"inobj);//trueletobj2={key:"value"};deleteobj2.key;//删除key属性console.log(void0);//undefined，通常用于避免表达式有返回值483.3.4流程控制

JavaScript代码由上而下依次加载。流程控制语句中最简单的一种是顺序结构语句。在JavaScript中，流程控制语句用于决定代码的执行顺序，使程序能够根据条件或循环逻辑执行特定的代码块。JavaScript的语法和Java很相似，因此具有Java学习基础的读者，很快可以上手。条件语句◆if语句

if语句用于在条件为真时执行代码块。例如：letage=18;if(age>=18){console.log("成年人。");}493.3.4流程控制（代码示例）◆if-else语句

if-else语句用于在条件为真时执行一个代码块，在条件为假时执行另一个代码块。例如：letage=16;if(age>=18){console.log("成年人。");}else{console.log("未成年。");}503.3.4流程控制（代码示例）◆if-elseif-else语句使用多个条件时，可以使用if-elseif-else语句。例如：letscore=85;if(score>=90){console.log("成绩优秀！");}elseif(score>=75){console.log("成绩良好。");}else{console.log("成绩一般。");}513.3.4流程控制◆switch语句

switch语句用于基于不同的条件执行不同的代码块。在每个case子句中，需要输入break语句，否则，即使符合条件，switch将继续往下执行case子句。例如：letfruit="apple";switch(fruit){case"banana":console.log("我喜欢吃香蕉。");break;case"apple":console.log("我喜欢吃苹果。");break;case"orange":console.log("我喜欢吃橙子。");break;default:console.log("我不知道这个水果。");}523.3.4流程控制循环语句◆for循环

for循环用于在指定次数内重复执行代码块。下面示例代码中，循环会执行5次，因为i从0开始，到4结束（i<5为true），然后i增加到5时条件为false，循环终止。例如：for(leti=0;i<5;i++){console.log(i);}533.3.4流程控制◆while循环

while循环将在条件为真时重复执行代码块。下面示例代码中，循环同样会执行5次，因为count从0开始，到4结束（count<5为true），然后count增加到5时条件为false，循环终止。例如：letcount=0;while(count<5){console.log(count);count++;}543.3.4流程控制（代码示例）◆do-while循环

do-while循环至少执行一次代码块，然后在条件为真时重复执行。例如：letcount=0;do{console.log(count);count++;}while(count<5);553.3.4流程控制（代码示例）◆for-in循环

for-in循环用于遍历对象的可枚举属性。例如：letperson={firstName:"John",lastName:"Doe",age:30};for(letkeyinperson){console.log(key+":"+person[key]);}563.3.4流程控制（代码示例）◆for-of循环

for-of循环用于遍历可迭代对象（如数组、字符串等）的值。例如：letfruits=["apple","banana","cherry"];for(letfruitoffruits){console.log(fruit);}573.3.4流程控制跳转语句◆break语句

break语句用于提前终止循环。下面示例代码中，当i=5时，break被触发，循环直接终止，因此5不会被输出，后续的6,7,8,9也不会被处理。例如：for(leti=0;i<10;i++){if(i===5){break;}console.log(i);}583.3.4流程控制◆continue语句

continue语句用于跳过当前循环中的剩余代码，并开始下一次循环迭代。下面示例代码，当i是偶数时（0,2,4,6,8），continue被触发，跳过console.log(i)，因此这些值不会被输出。当i是奇数时（1,3,5,7,9），continue不被触发，执行console.log(i)，输出这些值。例如：for(leti=0;i<10;i++){if(i%2===0){continue;}console.log(i);//仅打印奇数}593.3.4流程控制（代码示例）◆return语句

return语句用于从函数中返回值，并终止函数的执行。例如：functionadd(a,b){returna+b;}console.log(add(2,3));//输出:5603.3.4流程控制（代码示例）◆throw语句

throw语句用于抛出一个用户定义的异常。例如：functioncheckAge(age){if(age<18){thrownewError("未成年人不得进入！");}console.log("欢迎光临！");}try{checkAge(16);}catch(error){console.error(error.message);//输出:未成年人不得进入！}613.3.4流程控制上述代码，checkAge(age)是一个函数，接受一个参数age。在函数内部，检查age是否小于18。如果为真，使用thrownewError("未成年人不得进入！")抛出一个错误。如果为假，执行console.log("欢迎光临！")。在try块中调用checkAge(16)。由于16<18，throw语句被执行，抛出一个Error对象，并带有消息“未成年人不得进入！”。623.3.5函数◆自定义函数在JavaScript中，定义函数有以下三种常见方式：◆函数声明函数声明是最传统的定义函数的方式。它使用function关键字，后跟函数名、参数列表和函数体。函数声明会被提升，因此可以在定义之前调用。函数名在作用域内是可用的。例如：functionmyFunction(arg1,arg2){//函数体}上述代码中，myFunction为函数名，arg1和arg2为参数。633.3.5函数◆函数表达式函数表达式是将函数赋值给一个变量。这种方式可以匿名（没有函数名）或者使用命名函数表达式。函数表达式不会被提升，因此必须在定义之后才能调用。例如：constmyFunction=function(arg1,arg2){//函数体};643.3.5函数◆箭头函数箭头函数是ES6引入的一种简洁的函数定义方式，使用=>语法。箭头函数没有自己的this，因此this继承自外层作用域。不能用作构造函数（不能使用new调用），箭头函数具有语法简洁的特点，适合用于回调函数等场景。例如：constmyFunction=(arg1,arg2)=>{//函数体};653.3.5函数（代码示例）如果函数体很简单，可以省略花括号和return关键字，例如：constadd=(a,b)=>a+b;663.3.5函数◆系统函数除了自定义函数，JavaScript还提供了许多内置函数，可以帮助开发者执行常见的任务，比如处理字符串、数学计算和数组操作等。以下是常用的JavaScript内置函数及其简要说明。◆parseInt(string)

parseInt是JavaScript中一个常用的函数，用于将字符串转换为整数。parseInt函数会从字符串的开头解析数字，直到遇到非数字字符为止。如果字符串的开头不是数字字符，parseInt会返回NaN（NotaNumber）。例如：letstr="123";letnum=parseInt(str);console.log(num);//输出:123673.3.5函数上述代码作用是将字符串“123”转为整数123。◆eval(expression)

eval函数是JavaScript中一个强大的工具，用于执行字符串形式的JavaScript代码。例如：letcode="2+2";letresult=eval(code);console.log(result);//输出:4683.3.5函数上述代码中，声明一个字符串变量code，并将其赋值为“2+2”。计算表达式：letresult=eval(code)，使用eval函数将字符串code解析并执行其中的JavaScript表达式。eval函数会将字符串“2+2”解析为JavaScript表达式，并计算其结果。因此2+2的结果是4。【注意】eval()方法可以执行任何传递给它的代码，包括恶意代码。如果攻击者能够控制传递给eval的字符串，他们就可以执行任意代码，这可能导致数据泄露、网站篡改或其他安全问题。◆encodeURI(uri)用于对统一资源标识符（UniformResourceIdentifier，URI）进行编码。encodeURI()函数主要目的是将URI中的非ASCII字符和特殊字符转换成百分号“%”编码的字符实体，以确保URI在不同环境中的正确性和安全性。例如：leturi="/path?name=张三&age=30";letencodedURI=encodeURI(uri);console.log(encodedURI);//输出:/path?name=%E5%BC%A0%E4%B8%89&age=30693.3.5函数（代码示例）◆Math.random()返回0到1之间的伪随机数。random()函数是Math对象的一部分，因此需要通过Math对象调用。例如：letrandomNum=Math.random();console.log(randomNum);//输出一个在[0,1)范围内的随机数703.3.5函数（代码示例）◆Math.sqrt(x)返回数的平方根。用于计算数值的平方根。同样，sqrt()函数是Math对象的一部分。例如：letnumber=16;letsquareRoot=Math.sqrt(number);console.log(squareRoot);//输出:4713.3.5函数由于JavaScript的内置函数比较多，其他函数的用法本书不再赘述。函数实例◆计算两数之和的函数下面示例代码是一个JavaScript函数，用于计算两个数的和。functionsum(a,b){returna+b;}//使用自定义函数console.log(sum(1,2));//输出:3723.3.5函数◆不带参数的函数下面示例代码演示一个不带参数的JavaScript函数。这种类型的函数通常用于执行操作，而不需要输入参数。这个实例的功能是在控制台中打印“Hello,World！”。//不带参数的函数functionsayHello(){console.log('Hello,World!');}//调用不带参数的函数sayHello();733.3.5函数◆没有返回值的函数下面示例代码演示一个没有返回值的函数的定义和调用。函数名为printSum，接受两个参数a和b，函数体内使用console.log()将两个参数的和输出到控制台。注意，这个函数没有return语句，所以它不会返回任何值（严格来说，默认返回undefined）。functionprintSum(a,b){console.log(a+b);}//调用不返回值的函数printSum(3,4);743.4JavaScript浏览器对象

JavaScript浏览器对象，也称为BOM（BrowserObjectModel）对象，是浏览器提供的JavaScript代码与网页和浏览器本身交互的对象。这些对象允许JavaScript代码与浏览器窗口、文档、历史记录等进行交互。以下是常见的JavaScript浏览器对象及其简要说明。◆window对象

window对象是BOM的核心，代表浏览器窗口。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。全局变量是window对象的属性，全局函数是window对象的方法。window对象提供了许多方法和属性控制浏览器窗口，如window.open()打开新窗口，window.close()关闭窗口，window.innerHeight和window.innerWidth获取浏览器窗口的内部高度和宽度等。更多window对象的用法的代码如清单3-7所示。753.4JavaScript浏览器对象（清单3-7window.html）<html><head><metacharset="UTF-8"></head><body><scripttype="text/javascript">window.alert("欢迎访问");//提示框window.confirm("您是否确定?");//询问框mpt("请输入");//输入框window.setInterval(1000);//设定时间间隔，时间单位：毫秒window.clearInterval();//清除时间间隔window.setTimeout(1000);//倒计时多少时间以后执行函数，时间单位：毫秒window.open();//打开窗体window.close();//关闭窗体window.innerHeight;//浏览器窗体的内高window.innerWidth;//浏览器窗体的内宽window.outerHeight;//浏览器窗体的外高window.outerWidth;//浏览器窗体的外宽</script></body></html>763.4JavaScript浏览器对象上述代码运行结果如图3-7所示。http://localhost:8080/ch03/window.html图3-7window对象使用实例运行结果773.4JavaScript浏览器对象◆document对象

document对象代表网页中的文档，是DOM（DocumentObjectModel）树的根节点。通过document对象，可以获取和操作网页中的元素，如document.getElementById()获取指定ID的元素，document.createElement()创建新的HTML元素等。document对象还提供了许多属性和方法修改元素的内容、样式和属性。清单3-8所示的代码利用generateFibonacci()函数生成一个包含前n个斐波那契数的数组。displayFibonacci()函数接受一个斐波那契数列数组，并生成一个包含这些数字的HTML无序列表。然后，通过document.createElement()创建一个div元素，将HTML显示在该div上。783.4JavaScript浏览器对象（清单3-8fibonacci.html）1/3<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>斐波那契数列</title><!--页面标题--></head><body><script>/***动态创建并插入DOM元素*@param{string}html-需要插入的文本内容*/functionaddElement(html){//创建新的div容器（默认display:block特性）letnewDiv=document.createElement("div");//创建文本节点（比innerHTML更安全的DOM操作方式）letnewContent=document.createTextNode(html);//组装元素（形成完整的DOM节点树）newDiv.appendChild(newContent);//插入到现有元素之前letcurrentDiv=document.getElementById("div1");793.4JavaScript浏览器对象（清单3-8fibonacci.html）2/3document.body.insertBefore(newDiv,currentDiv);}/***生成斐波那契数列*@param{number}n-需要生成的数列项数*@returns{number[]}包含前n项的斐波那契数组*/functiongenerateFibonacci(n){//初始化前两项（符合数学定义的斐波那契数列起始值）letfibonacciSeries=[0,1];//从第三项开始迭代计算（索引2对应第三项）for(leti=2;i<n;i++){//每个新项=前两项之和（核心算法逻辑）fibonacciSeries.push(fibonacciSeries[i-1]+fibonacciSeries[i-2]);}returnfibonacciSeries;}/***格式化并显示数列*@param{number[]}series-需要显示的数列数组*/functiondisplayFibonacci(series){803.4JavaScript浏览器对象（清单3-8fibonacci.html）3/3//使用模板字符串拼接结果（比字符串拼接更高效）letoutput='';series.forEach(number=>{output+=`${number}`;//每个数字后添加空格分隔});addElement(output.trim());//移除末尾多余空格后插入DOM}//生成并显示前10项（注意初始数组已包含2项，实际生成8个新项）constfibonacciSeries=generateFibonacci(10);displayFibonacci(fibonacciSeries);</script></body></html>813.4JavaScript浏览器对象上述代码输出结果如图3-8所示。http://localhost:8080/ch03/fibonacci.html图3-8斐波那契数列实例输出结果823.4JavaScript浏览器对象◆location对象

location对象代表当前页面的URL信息。通过location对象，可以获取和修改当前页面的URL，实现页面跳转、刷新等功能。常用的属性和方法包括location.href获取或设置当前页面的URL，location.assign()加载新的文档，location.reload()重新加载当前页面等。清单3-9所示的代码是一个使用location对象的实例。833.4JavaScript浏览器对象（清单3-9location.html）<html><head></head><body><scripttype="text/javascript">document.write(tocol+'<br>');//'http'document.write(location.host+'<br>');//''document.write(location.port+'<br>');//'8080'document.write(location.pathname+'<br>');//'/path/index.html'document.write(location.search+'<br>');//'?a=1&b=2'document.write(location.hash+'<br>');//'TOP'</script></body></html>843.4JavaScript浏览器对象上述代码运行结果如图3-9所示。http://localhost:8080/ch03/location.html图3-9location对象使用实例运行结果853.4JavaScript浏览器对象◆navigator对象

navigator对象用于获取浏览器的相关信息。通过navigator对象，可以判断浏览器的版本、操作系统等信息，从而实现针对不同浏览器的兼容处理。常用的属性包括navigator.appName获取浏览器名称，navigator.appVersion获取浏览器版本，navigator.language获取浏览器设置的语言，navigator.platform获取操作系统类型，和navigator.userAgent获取浏览器设定的User-Agent字符串等。清单3-10所示的代码是一个使用navigator对象的实例。863.4JavaScript浏览器对象（清单3-10navigator.html）<html><head></head><body><scripttype="text/javascript">document.write('appName='+navigator.appName+'<br>');document.write('appVersion='+navigator.appVersion+'<br>');document.write('language='+navigator.language+'<br>');document.write('platform='+navigator.platform+'<br>');document.write('userAgent='+navigator.userAgent+'<br>');</script></body></html>873.4JavaScript浏览器对象上述代码运行结果如图3-10所示。http://localhost:8080/ch03/navigator.html图3-10navigator对象运行结果883.4JavaScript浏览器对象◆history对象

history对象包含浏览器的历史记录。通过history对象，可以实现前进、后退等导航功能。常用的方法包括history.back()后退一步，history.forward()前进一步，history.go()前进或后退指定的步数等。清单3-11所示的代码是一个使用history对象的实例。893.4JavaScript浏览器对象（清单3-11history.html）<html><head></head><body><scripttype="text/javascript">history.back();//前进history.forward();//后退history.go(-1);//后退一次</script></body></html>903.4JavaScript浏览器对象◆screen对象

screen对象包含有关用户屏幕的信息。通过screen对象，可以获取屏幕的宽度、高度、颜色位数等信息。常用的属性包括screen.width获取屏幕宽度，screen.height获取屏幕高度，screen.colorDepth获取颜色位数等。上述浏览器对象共同构成了JavaScript与浏览器交互的基础，开发者能够利用JavaScript控制浏览器的行为，实现丰富的网页交互效果。清单3-12所示的代码是一个使用screen对象的实例。913.4JavaScript浏览器对象（清单3-12screen.html）<html><head></head><body><scripttype="text/javascript">document.write(screen.height+'<br>')document.write(screen.width+'<br>');document.write(screen.colorDepth+'<br>');</script></body></html>923.4JavaScript浏览器对象上述代码运行结果如图3-11所示。http://localhost:8080/ch03/screen.html图3-11screen对象属性显示结果933.5事件处理与绑定

JavaScript是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JavaScript中有很多事件，其中一个事件是鼠标单击事件，对应的单词是click。任何事件都会对应一个事件句柄，事件句柄是在事件单词前添加一个on。事件是以HTML标签的属性存在的。

JavaScript中绑定事

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论