Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第4章 JavaScript基础_第1页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第4章 JavaScript基础_第2页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第4章 JavaScript基础_第3页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第4章 JavaScript基础_第4页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第4章 JavaScript基础_第5页
已阅读5页，还剩44页未读， 继续免费阅读

下载本文档

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

文档简介

E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3第4章JavaScript基础新用户注册验证介绍背景知识新用户注册验证的实现步骤本章小结01020304-了解JavaScript的概念和引用方式；-掌握JavaScript基础语法：变量、数据类型、运算符、控制结构；理解JavaScript函数的定义、调用方式以及作用域；-学习JavaScript事件，包括鼠标、键盘、表单事件；了解JavaScript对象的概念、常用对象的使用方法；掌握正则表达式在JavaScript中应用，包括正则表达式语法、字符串匹配和替换。010203040506E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3新用户注册验证介绍01需求分析1.1新用户注册验证功能的需求如下：

1.表单提交验证规则验证不成功时需要阻止表单的默认提交行为。检查所有字段（手机、短信验证码、密码、确认密码等）是否为空。验证手机格式是否符合中国大陆的手机号码格式。验证短信验证码格式（字母+数字的4位随机组合）。判断密码强度。检查密码和确认密码是否匹配。验证用户是否勾选了同意用户协议的复选框。如果所有验证通过，提交表单。2.密码强度的判断

密码强度的判断通常基于几个关键因素，如长度、字符的多样性（包括字母、数字、特殊字符）以及字母的大小写等。以下是一个常见的标准，密码强度分为“弱密码”、“中等密码”和“强密码”：弱密码

密码长度较短，通常少于6个字符。只包含单一类型的字符，如只有小写字母或只有数字。密码很容易被猜到，如常见词汇、连续数字等（例如“123456”或“qwerty”）。中等密码

长度至少为8个字符。包含两种类型的字符，如字母和数字的组合。不包含用户的个人信息，如生日、姓名等。强密码

长度至少为12个字符。包含三种或更多类型的字符，结合使用大小写字母、数字和特殊字符。不包含任何容易被猜到的词汇、数字或用户个人信息。需求分析1.1新用户注册验证运行截图：新用户注册验证实现思路1.21.

引入表单验证脚本首先，需要在注册页面中引入专用的表单验证JavaScript脚本，以确保页面具备必要的客户端验证逻辑。2.实现验证逻辑编写JavaScript代码，完成以下关键步骤的校验，只有在所有验证条件都满足的情况下，才允许表单提交。（1）阻止表单的默认提交行为，以允许我们的验证逻辑先行执行。（2）检查所有必填字段，如手机号、验证码、密码以及确认密码，确保它们都被填写。（3）对手机号和验证码的格式进行验证，以确保它们符合预定的标准。（4）评估密码的强度，确保它满足安全要求。（5）检查密码和确认密码是否一致，以防止输入错误。（6）确认用户是否勾选了同意用户协议的复选框，这是注册的必要条件。知识导图1.3E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3背景知识02JavaScript概述2.1（1）什么是JavaScriptJavaScript是一种广泛使用的编程语言，主要用于网页开发和创建交互式页面。它是网页的主要客户端脚本语言，意味着JavaScript代码在用户的浏览器上运行，而不是直接在服务器上执行。这使得网页可以实现交互性，提供更丰富的用户体验。以下是JavaScript的一些关键特点：①客户端脚本语言：JavaScript主要在用户的浏览器上运行，不需要在服务器上处理，这降低了服务器的负载，并可以快速响应用户的操作。②动态性：JavaScript支持动态内容更新，这意味着网页的内容可以在不重新加载整个页面的情况下更新。③对象导向：虽然它支持多种编程范式，但JavaScript主要是一种基于对象的语言，允许创建复杂的应用程序。④跨平台：几乎所有现代浏览器都支持JavaScript，这使得它成为跨平台开发的理想选择。⑤与HTML和CSS协同工作：JavaScript经常与HTML（用于结构化内容）和CSS（用于样式化内容）一起使用，以创建复杂的网页和应用程序。⑥事件驱动：JavaScript可以响应用户操作，如点击、悬停、键入等，使网页更加互动。⑦框架和库：有许多JavaScript框架和库（如React、Angular、Vue）可帮助开发人员快速有效地构建复杂的应用程序。JavaScript概述2.1（2）JavaScript入门案例创建一个示例，在网页上显示一个按钮，当点击这个按钮时，会弹出一个警告框并显示一条消息。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>简单JavaScript示例</title></head><body><h1>简单JavaScript示例</h1><!--按钮，点击时显示警告框--><buttononclick="alert('欢迎学习JavaScript!')">点击我</button></body></html>代码清单4-101JavaScriptDemo.htmlJavaScript概述2.1（3）分离HTML与JavaScript代码将JavaScript代码从HTML中分离出来有利于提高代码的可维护性，使代码更加清晰和易于理解。为了实现这一点，可以将JavaScript代码存入一个单独的文件中，然后在HTML文件中引用它。首先，创建一个保存JavaScript文件的文件夹js，然后在该文件夹中创建01JavaScriptDemo.js文件，然后，修改HTML文件引用这个JavaScript文件//弹出欢迎消息的函数functionshowWelcomeMessage(){alert('欢迎学习JavaScript!');}<body><h1>JavaScript代码分离示例</h1><!--点击按钮时调用JavaScript文件中的函数--><buttononclick="showWelcomeMessage()">点击我</button><!--引入外部JavaScript文件--><scriptsrc="js/01JavaScriptDemo.js"></script></body>01JavaScriptDemo.js02JavascriptDemo.htmlJavaScript基础语法2.2（1）声明变量在JavaScript中，变量是用来存储和操作数据的基本单位。变量可以存储各种类型的数据，如数值类型、字符串类型和逻辑值类型等。使用var、let或const关键字来声明变量。var是最传统的声明方式，但它存在作用域仅限于当前函数体的限制。let引入了块级作用域（blockscope），是声明变量更好的选择。const用于声明常量，常量一旦被赋值则不可改变。（2）命名规则变量名可以包含字母、数字、下划线（_）和美元符号（$）。变量名首字符必须以字母、下划线（_）或美元符号（$）开始。变量名不能使用保留字和关键字。（3）变量数据类型JavaScript是一种动态类型语言，这意味着同一个变量可以存储不同类型的数据。数据类型包括：字符串（String）、数字（Number）、布尔值（Boolean）、对象（Object）、数组（Array）、null、undefined等，JavaScript基础语法2.2数据类型描述示例String用于表示文本数据。由字符组成的序列。"Hello,World!"Number用于表示数值。可以是整数或浮点数。42,3.14Boolean用于逻辑操作。仅有两个值：true和false。true,falseObject用于表示键值对的集合。用于存储更复杂的数据结构。{name:"Alice",age:30}Array用于存储数据的有序列表。[1,2,3],["a","b","c"]null通常用来表示空或不存在的值。nullundefined表示变量已声明但未赋值，或者不存在这个值。undefinedJavaScript基础语法2.2编写一个程序来记录一个学生的基本信息。包括学生的姓名（字符串）、年龄（数字）、是否毕业（布尔值）、所学课程列表（数组）以及一个可能没有值的辅导员名称（null或undefined）。<!DOCTYPEhtml><html>

<head><title>JavaScript示例</title></head>

<body><script>//字符串：学生姓名conststudentName="Alice";//数字：年龄letage=20;//布尔值：是否已毕业lethasGraduated=false;//数组：课程列表constcourses=["Mathematics","English","ComputerScience"];//null或undefined：辅导员名称letcounselor=null;//或者undefined

//输出变量console.log("StudentName:",studentName);console.log("Age:",age);console.log("HasGraduated:",hasGraduated);console.log("Courses:",courses);console.log("Counselor:",counselor);

</script></body>

</html>JavaScript基础语法2.2（4）运算符在JavaScript中，运算符用于执行程序代码的运算。表4-2列出了一些基本的JavaScript运算符及其用法。运算符类别运算符描述例子结果算术+加法5+38-减法5-32*乘法5*315/除法5/31.666...%求余5%32++递增leta=5;a++6--递减leta=5;a--4赋值=赋值leta=55+=加法赋值a+=3a=a+3-=减法赋值a-=3a=a-3*=乘法赋值a*=3a=a*3/=除法赋值a/=3a=a/3比较==相等5=='5'TRUE===严格相等5==='5'FALSE!=不等5!='5'FALSE!==严格不等5!=='5'TRUE>

大于5>3TRUE<

小于5<3FALSE>=大于或等于5>=5TRUE<=小于或等于5<=5TRUE逻辑

&&逻辑与true&&falseFALSE||逻辑或true||falseTRUE!逻辑非!trueFALSEJavaScript基础语法2.2通过一个示例来演示各种运算符的使用。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>JavaScript运算符示例</title></head><body><h1>JavaScript运算符示例</h1><script>//算术运算符letsum=5+3;//加法letdifference=5-3;//减法letproduct=5*3;//乘法letquotient=5/3;//除法letremainder=5%3;//求余

//赋值运算符leta=5;a+=3;//加法赋值letb=5;b-=2;//减法赋值

//比较运算符letisEqual=(5=='5');//相等letisStrictEqual=(5==='5');//严格相等

//逻辑运算符letand=(true&&false);//逻辑与letor=(true||false);//逻辑或letnot=!true;//逻辑非

//输出结果console.log("Sum:"+sum);console.log("Difference:"+difference);console.log("Product:"+product);console.log("Quotient:"+quotient);console.log("Remainder:"+remainder);console.log("aafter+=3:"+a);console.log("bafter-=2:"+b);console.log("isEqual(5=='5'):"+isEqual);console.log("isStrictEqual(5==='5'):"+isStrictEqual);console.log("LogicalAND(true&&false):"+and);console.log("LogicalOR(true||false):"+or);console.log("LogicalNOT(!true):"+not);</script></body></html>JavaScript基础语法2.2（5）流程控制JavaScript流程控制是指导程序按照特定路径或条件执行代码的语句和结构。它包括条件语句、循环语句和跳转语句等。JavaScript基础语法2.2流程控制类型描述示例if如果指定条件为真，则执行一段代码。if(age>18){console.log('成年');}else如果相应的if条件为假，则执行此代码。if(age>18){console.log('成年');}else{console.log('未成年');}elseif在多个条件之间进行选择。if(age>18){console.log('成年');}elseif(age==18){console.log('刚成年');}else{console.log('未成年');}switch根据不同的情况执行不同的代码块。switch(fruit){case'苹果':console.log('这是苹果');break;case'香蕉':console.log('这是香蕉');break;default:console.log('未知水果');}for创建一个循环结构，指定循环变量的初值、循环条件和迭代。for(leti=0;i<5;i++){console.log(i);}while创建一个循环结构，如果条件为真，就循环执行语句。leti=0;while(i<5){console.log(i);i++;}do...while至少执行一次代码块，然后判断条件是否成绩，再确定是否继续执行循环语句。leti=0;do{console.log(i);i++;}while(i<5);break终止循环或switch语句。for(leti=0;i<10;i++){if(i==5){break;}console.log(i);}continue跳过当前循环迭代中的剩余代码。for(leti=0;i<10;i++){if(i==5){continue;}console.log(i);}JavaScript基础语法2.2通过示例来演示各种流程控制语法的使用。<!DOCTYPEhtml><html>

<head><title>JavaScript流程控制示例</title></head>

<body><script>/*

声明了一个变量age并赋值为20。然后使用if语句检查age是否大于18。

如果条件为真（在这个例子中是的），则执行console.log('成年')，在控制台输出成年。*/letage=20;if(age>18){console.log('成年');}

/*

将age的值更改为16，然后检查它是否大于18。

因为age现在是16，所以if条件为假，执行else代码块，输出未成年。*/age=16;if(age>18){console.log('成年');}else{console.log('未成年');}

/*

将age设置为18，然后检查它是否大于18，等于18，或者两者都不是。

在这种情况下，第一个条件age>18为假，第二个条件age==18为真，因此输出刚成年。*/age=18;if(age>18){console.log('成年');}elseif(age==18){console.log('刚成年');}else{console.log('未成年');}

/*

这里声明了一个变量fruit并赋值为'苹果'。switch语句用来根据fruit的值执行不同的代码块。

在这个例子中，因为fruit等于'苹果'，所以执行第一个case，输出这是苹果。*/letfruit='苹果';switch(fruit){case'苹果':console.log('这是苹果');break;case'香蕉':console.log('这是香蕉');break;default:console.log('未知水果');}

/*JavaScript基础语法2.2这些示例展示了不同类型的循环结构。

在for循环中，我们初始化变量i为0，然后只要i小于5，循环就会继续，并在每次迭代后递增i。while循环先检查条件（i<5），然后执行代码块。do...while循环至少执行一次代码块，然后检查条件。*/for(leti=0;i<5;i++){console.log(i);}

leti=0;while(i<5){console.log(i);i++;}

i=0;do{console.log(i);i++;}while(i<5);

/*break用于完全终止循环。当j等于5时，循环终止。continue用于跳过当前循环迭代中的剩余代码并继续下一次迭代。

当k等于5时，该迭代被跳过，循环继续下一次迭代。*/for(letj=0;j<10;j++){if(j==5){break;}console.log(j);}

for(letk=0;k<10;k++){if(k==5){continue;}console.log(k);}</script></body></html>JavaScript函数2.3（1）JavaScript函数是什么JavaScript的函数是将一段代码封装用以执行特定任务的结构。函数可以接收输入（称为参数）值，执行一些操作，并返回函数值。函数的使用可以使代码更加模块化，易于重用和维护。（2）自定义函数JavaScript中的自定义函数指的是由开发者根据需要创建的函数，而不是使用JavaScript语言内置的函数。自定义函数可以执行特定的任务，并在需要时被调用。自定义函数可以接收参数、执行一系列操作，可以选择性地返回函数值。基本语法如下：functionfunctionName(parameters){//函数体returnresult;//可选}其中：function关键字用于声明函数，functionName是函数的名称。函数体中包含了要执行的代码。parameters是函数接收的参数（可选）。return语句用于返回函数的结果（可选）。JavaScript函数2.3使用自定义函数来计算两数之和。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>传统函数示例</title></head><body><h1>使用传统函数计算两数之和</h1><script>//使用传统函数来计算两个数的和functionaddNumbers(a,b){returna+b;}

//调用函数并传递参数letsum=addNumbers(10,5);console.log("和是："+sum);//输出到控制台</script></body></html>JavaScript函数2.3（3）箭头函数在JavaScriptES6中，箭头函数提供了一种更简洁的定义函数的方式。相比传统的函数声明，箭头函数不需要function关键字，并且对于单个表达式的函数，它甚至可以省略大括号和return语句。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>箭头函数示例</title></head><body><h1>使用箭头函数计算两数之和</h1><script>//使用箭头函数来计算两个数的和constaddNumbers=(a,b)=>a+b;

//调用箭头函数并传递参数letsum=addNumbers(10,5);console.log("和是："+sum);//输出到控制台</script></body></html>JavaScript函数2.3（4）内置函数JavaScript提供了许多内置函数，这些内置函数可用于执行各种常见任务，如数据处理、计时、数学运算等。这些内置函数是预先定义好的，可以直接在任何JavaScript代码中直接使用。表4-4列出了一些常用的JavaScript内置函数及示例。内置函数用途示例console.log()在控制台输出信息。console.log("这是一条消息。");parseInt()将字符串转换为整数。letnum=parseInt("123");parseFloat()将字符串转换为浮点数。letnum=parseFloat("123.45");isNaN()检查值是否为“非数字”。isNaN("Hello");//trueencodeURI()对URI进行完整的编码。encodeURI("/测试");decodeURI()对编码的URI进行解码。decodeURI("http%3A%2F%2F%2F%E6%B5%8B%E8%AF%95");setTimeout()设置一个定时器，延迟执行函数。setTimeout(()=>console.log("Hello"),3000);//3秒后输出clearTimeout()清除由setTimeout()设置的定时器。lettimerId=setTimeout(()=>console.log("Hello"),3000);clearTimeout(timerId);setInterval()设置一个间隔重复执行的定时器。setInterval(()=>console.log("Hello"),3000);//每3秒重复输出JavaScript函数2.3第一个案例用来学习parseInt、parseFloat、isNaN、encodeURI、decodeURI等内置函数的使用方式。<!DOCTYPEhtml><html>

<head><title>JavaScript内置函数示例</title></head>

<body><script>//console.log示例console.log("这是一条消息。");

//parseInt示例letintNum=parseInt("123");console.log("parseInt转换结果:",intNum);

//parseFloat示例letfloatNum=parseFloat("123.45");console.log("parseFloat转换结果:",floatNum);

//isNaN示例letisNotNumber=isNaN("Hello");console.log("isNaN检查结果:",isNotNumber);

//encodeURI示例letencodedURI=encodeURI("/测试");console.log("encodeURI编码结果:",encodedURI);

//decodeURI示例letdecodedURI=decodeURI("http%3A%2F%2F%E6%B5%8B%E8%AF%95");console.log("decodeURI解码结果:",decodedURI);</script></body>

</html>JavaScript函数2.3第二个案例是一个定时器，它会在指定的时间间隔内重复输出一条消息，然后在一定次数后自动停止。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>定时器示例</title></head><body><h1>JavaScript定时器示例</h1><p>查看控制台以查看定时器输出。</p>

<script>//重复消息的定时器函数functionrepeatMessage(message,interval,repeatTimes){letcount=0;letintervalId=setInterval(()=>{console.log(message);count++;if(count>=repeatTimes){clearInterval(intervalId);console.log("定时器停止。");}},interval);}//调用函数repeatMessage("Hello!",2000,5);//每隔2秒重复输出"Hello!"，总共重复5次</script></body></html>JavaScript函数2.3（5）函数作用域

在JavaScript中，函数作用域是一个非常重要的概念。它指的是在函数内声明的变量只能在该函数内部访问，这些变量对于函数外部是不可见的。这个概念对于理解如何组织和保护代码中的变量非常关键。函数作用域的基本规则：局部作用域：在函数内部声明的变量拥有局部作用域，即它们只能在函数内部被访问和修改。全局作用域：在函数外部声明的变量拥有全局作用域，即它们可以在代码的任何地方被访问。JavaScript函数2.3通过一个示例来学习变量在局部作用域和全局作用域中访问的不同之处。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>函数作用域示例</title></head><body><h1>JavaScript函数作用域示例</h1><p>请查看浏览器的控制台以了解输出。</p>

<script>letglobalVar="这是一个全局变量";

functionexampleFunction(){letlocalVar="这是一个局部变量";console.log(globalVar);//可以访问全局变量console.log(localVar);//可以访问局部变量}exampleFunction();

console.log(globalVar);//输出:这是一个全局变量console.log(localVar);//错误：localVar在这里是不可见的</script></body></html>JavaScript事件2.4（1）什么是JavaScript事件JavaScript中的事件是指在浏览器中或用户与网页互动时发生的各种事件。这些事件可以是用户行为（如点击、滚动、按键）或者浏览器行为（如页面加载完成、页面大小改变）。在JavaScript中，事件被用来触发代码的执行，这是构建交互式网页的基础。事件处理的作用：①用户互动使网页能够响应用户的操作，如点击按钮、移动鼠标、填写表单等。②动态内容更新不需要重新加载整个页面就可以更新网页的某部分内容。③表单验证在表单提交前检查用户输入的有效性。④动画和视觉效果对用户的行为做出动态反应，例如悬停时改变元素的样式或显示隐藏的菜单。⑤与服务器的交互发送AJAX请求来实现无需刷新页面的数据交换。JavaScript事件2.4（2）鼠标事件鼠标事件是JavaScript中用于处理用户与鼠标交互的重要部分。表4-5列出了各类鼠标事件及简单示例。事件名称描述示例使用click当用户点击元素时触发element.onclick=function(){/*处理点击事件*/};dblclick当用户双击元素时触发element.ondblclick=function(){/*处理双击事件*/};mouseover当鼠标移动到元素上时触发element.onmouseover=function(){/*处理鼠标悬停事件*/};mouseout当鼠标从元素移开时触发element.onmouseout=function(){/*处理鼠标移出事件*/};mousemove当鼠标在元素内部移动时触发element.onmousemove=function(){/*处理鼠标移动事件*/};mousedown当鼠标按钮在元素上按下时触发element.onmousedown=function(){/*处理鼠标按下事件*/};mouseup当鼠标按钮在元素上释放时触发element.onmouseup=function(){/*处理鼠标释放事件*/};JavaScript事件2.4使用下面示例学习不同的鼠标事件（例如点击、双击、鼠标悬停等）。<!DOCTYPEhtml><html><head><title>鼠标事件示例</title><style>.highlight{background-color:yellow;}</style><script>functionhandleClick(){alert('按钮被点击！');}

functionhandleDoubleClick(){alert('按钮被双击！');}

functionhandleMouseOver(){document.getElementById('mouseStatus').textContent='鼠标悬停在按钮上';document.getElementById('button').classList.add('highlight');}

functionhandleMouseOut(){document.getElementById('mouseStatus').textContent='鼠标不在按钮上';document.getElementById('button').classList.remove('highlight');}

functionhandleMouseDown(){document.getElementById('mouseStatus').textContent='鼠标按钮按下';}

functionhandleMouseUp(){document.getElementById('mouseStatus').textContent='鼠标按钮释放';}</script></head><body>

<buttonid="button"onclick="handleClick()"ondblclick="handleDoubleClick()"onmouseover="handleMouseOver()"onmouseout="handleMouseOut()"onmousedown="handleMouseDown()"onmouseup="handleMouseUp()">

点击我</button>

<pid="mouseStatus">鼠标事件状态将显示在这里</p>

</body></html>JavaScript事件2.4（3）键盘事件键盘事件是JavaScript中用于处理用户键盘输入的事件。表4-6列出了每个键盘事件的名称、描述以及简单的使用示例。事件名称描述示例使用keydown当用户按下任意键时触发。element.onkeydown=function(event){alert('按下的键是:'+event.key);};keypress当用户按下字符键时触发element.onkeypress=function(event){alert('按下的字符键是:'+event.key);};keyup当用户释放按键时触发。element.onkeyup=function(event){alert('释放的键是:'+event.key);};JavaScript事件2.4使用键盘事件实现当用户按下并释放键盘上的任意键时显示该键的名称，可以通过监听keydown和keyup事件来实现。<!DOCTYPEhtml><html><head><title>键盘事件示例</title></head><body><inputtype="text"id="myInput"placeholder="在此输入并按键"><script>varinput=document.getElementById('myInput');

input.onkeydown=function(event){console.log('按下的键是:'+event.key);};

input.onkeyup=function(event){console.log('释放的键是:'+event.key);};</script>

</body></html>JavaScript事件2.4（4）表单事件表单事件是在用户与表单交互时触发的事件。这些事件可以用来处理用户的输入，验证数据，或者在特定条件下改变表单的行为。表4-7是一些常见的表单事件及其描述和示例。事件名称描述示例使用onchange当表单元素的值发生改变时触发element.onchange=function(){alert('元素值已更改');};onsubmit当表单提交时触发form.onsubmit=function(){alert('表单正在提交');returnfalse;};onfocus当表单元素获得焦点时触发element.onfocus=function(){console.log('元素获得焦点');};onblur当表单元素失去焦点时触发element.onblur=function(){console.log('元素失去焦点');};JavaScript事件2.4使用案例学习表单事件是如何应用的。<!DOCTYPEhtml><html><head><title>表单事件示例</title><script>//当文本框的值发生改变时触发functionhandleChange(){alert('文本已更改');}

//当表单提交时触发functionhandleSubmit(){alert('表单正在提交');returnfalse;//阻止表单实际提交，以便查看效果}

//当文本框获得焦点时触发functionhandleFocus(){console.log('元素获得焦点');}

//当文本框失去焦点时触发functionhandleBlur(){console.log('元素失去焦点');}

//当文本框的输入值改变时触发functionhandleInput(){console.log('输入值改变');}

//当按钮被点击时触发functionhandleClick(){alert('按钮被点击');}</script></head><body><formonsubmit="returnhandleSubmit()"><labelfor="text-input">输入用户名：</label><inputtype="text"id="text-input"onchange="handleChange()"onfocus="handleFocus()"onblur="handleBlur()"oninput="handleInput()"><buttontype="submit"onclick="handleClick()">提交</button></form></body></html>JavaScript对象2.5JavaScript对象是一种复合数据类型，它允许存储多个值作为一个单一的实体。这些值可以是属性和方法。如表4-8所示，列出了一些常见的JavaScript对象及其描述和示例。对象名称描述示例使用Array用于存储多个值的高级列表对象varfruits=["apple","banana","cherry"];Date表示日期和时间的对象varnow=newDate();Math提供数学计算功能的对象varpi=Math.PI;String表示和操作字符串的对象vargreeting="HelloWorld";Number包装原始数值的对象varnum=Number("123");ObjectJavaScript中所有对象的基类varperson={firstName:"John",lastName:"Doe"};RegExp用于字符串的正则表达式匹配varregex=newRegExp("\\w+");Function表示函数的对象varmyFunction=function(){return"HelloWorld!";};JSON用于解析和格式化JSON数据的对象varobj=JSON.parse('{"name":"John","age":30}');Window表示浏览器窗口，并提供与之相关的方法和属性window.alert("HelloWorld!");Document代表网页文档，提供文档的操作和查询方法varelem=document.getElementById("myId");JavaScript对象2.5通过一个案例展示每个对象的基本用法<!DOCTYPEhtml><html><head><title>JavaScript对象示例</title></head><body><pid="demo"></p>

<script>//创建了一个数组fruits并且在页面上显示。varfruits=["apple","banana","cherry"];document.getElementById("demo").innerHTML="Fruits:"+fruits.join(",");

//使用Date对象获取当前日期和时间。varnow=newDate();console.log("CurrentDateandTime:"+now.toString());

//使用Math对象获取π的值varpi=Math.PI;console.log("PiValue:"+pi);

//创建了一个字符串greeting并在控制台中显示。vargreeting="HelloWorld";console.log(greeting);

//将字符串"123"转换为数字类型。varnum=Number("123");console.log("Number:"+num);

//创建了一个对象person并在控制台中显示其属性。varperson={firstName:"John",lastName:"Doe"};console.log("Person:"+person.firstName+""+person.lastName);

//使用正则表达式RegExp测试一个字符串。varregex=newRegExp("\\w+");console.log("RegexTeston'Hello':"+regex.test("Hello"));

//定义了一个函数myFunction并调用它。varmyFunction=function(){return"HelloWorld!";};console.log(myFunction());

//解析了一个JSON字符串并访问它的属性。varobj=JSON.parse('{"name":"John","age":30}');console.log("JSONObject:Nameis"++",Ageis"+obj.age);

//window.alert弹窗。window.alert("HelloWorld!");//弹出窗口

//使用document.getElementById获取一个DOM元素并显示其内容。varelem=document.getElementById("demo");console.log("Elementcontent:"+elem.innerHTML);</script></body></html>正则表达式及应用2.6（1）什么是正则表达式正则表达式（RegularExpression）是一种强大的文本处理工具，它用于在字符串中执行模式匹配和“查找-替换”操作。正则表达式提供了一种灵活的方式来搜索或匹配复杂的字符串。正则表达式的关键特点如下：①模式匹配：可以定义复杂的匹配模式，例如单个字符、字符组、字符范围、重复次数、可选字符等。②元字符：正则表达式使用特殊的字符（称为元字符），如.（匹配任何单个字符），*（匹配前一个字符的零次或多次出现），+（匹配前一个字符的一次或多次出现），?（使前一个字符变成可选的），以及字符类如\d（匹配任何数字）。③标志：可以设置不同的标志，例如全局搜索（g）、多行搜索（m）、区分大小写（i）等。④捕获组：使用括号()创建子表达式，称为捕获组，可以从匹配的字符串中提取或引用这些子表达式。⑤断言：提供如前瞻断言和后瞻断言等高级匹配模式。正则表达式的应用如下：数据验证：如邮箱、电话号码、密码强度等格式的验证。文本搜索：在大量文本中快速定位特定模式的字符串。文本替换：在字符串中查找并替换特定模式的文本。数据抽取：从文本中提取信息，如特定格式的数字、单词等。正则表达式的这些特点使其成为处理和分析文本数据时的强大工具，广泛应用于编程、数据分析、日志处理等多个领域。正则表达式及应用2.6（2）正则表达式语法正则表达式的语法包含多种符号和构造，用于定义搜索或匹配的模式。以下是一些基本的正则表达式语法元素及其用途，如表4-9所示。语法元素描述示例示例匹配^匹配输入的开始^Hi匹配以"Hi"开始的字符串$匹配输入的结束end$匹配以"end"结束的字符串.匹配任意单个字符（除了换行符）a.b匹配"acb"、"a-b"等*匹配前面的元素零次或多次bo*匹配"b"、"bo"、"boo"等+匹配前面的元素一次或多次a+匹配"a"、"aa"、"aaa"等?匹配前面的元素零次或一次colou?r匹配"color"和"colour"\d匹配任意数字（等价于[0-9]）\d\d匹配"12"、"34"等\w匹配任意字母数字字符（等价于[A-Za-z0-9_]）\w\w匹配"ab"、"1_”等\s匹配任意空白字符（空格、制表符等）a\sb匹配"ab"、"a\tb"等[]匹配方括号内的任意字符[abc]匹配"a"、"b"、"c"[^]匹配不在方括号内的任意字符[^abc]不匹配"a"、"b"、"c"\转义特殊字符\.匹配"."``匹配``左右的任意一种模式正则表达式及应用2.6创建一个用来验证电子邮件地址格式的案例。这个案例包括一个简单的表单，用户可以在其中输入电子邮件地址，并且当表单提交时，会使用JavaScript中的正则表达式来验证输入的格式是否正确，<!DOCTYPEhtml><html><head>

<title>EmailValidationwithRegularExpression</title>

<script>

functionvalidateEmail(){

varemail=document.getElementById("email").value;

varregex=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

if(regex.test(email)){

alert("有效电子邮件地址.");

}else{

alert("无效电子邮件地址.");

}

returnfalse;//Preventformsubmission

}

</script></head><body>

<h2>电子邮件验证</h2>

<formonsubmit="returnvalidateEmail()">

<labelfor="email">Email:</label>

<inputtype="text"id="email"name="email">

<inputtype="submit"value="验证">

</form></body></html>

E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3新用户注册验证的实现步骤03修改新用户注册页面3.1在新用户注册页面添加表单验证的js代码链接，<scriptsrc="js/validate.js"></script>为新用户注册页面的表单选项加入验证3.2根据新用户注册验证业务描述，使用正则表达式完成这些功能，在js文件夹下创建validate.js文件。

document.addEventListener('DOMContentLoaded',function(){varform=document.querySelector('.reg_formform');varphoneInput=document.querySelector('.inp[type="text"]');varcodeInput=document.querySelectorAll('.inp[type="text"]')[1];varpasswordInput=document.querySelector('.inp[type="password"]');varconfirmPasswordInput=document.querySelectorAll('.inp[type="password"]')[1];varagreeCheckbox=document.querySelector('.agreeinput[type="checkbox"]');varpasswordStrengthDisplay=document.querySelector('.safe');

//监听密码输入变化，更新密码强度显示passwordInput.addEventListener('input',function(){varstrength=getPasswordStrength(passwordInput.value);updatePasswordStrengthDisplay(strength);});

form.addEventListener('submit',function(e){e.preventDefault();

//验证每个字段if(!validatePhone(phoneInput.value)||!validateCode(codeInput.value)||!validatePassword(passwordInput.value)||!validateConfirmPassword(passwordInput.value,confirmPasswordInput.value)||!validateAgreement(agreeCheckbox.checked)){return;}

//所有验证通过，提交表单form.submit();});

functionvalidatePhone(phone){if(!phone){

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

温馨提示

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

最新文档

评论

0/150

提交评论