项目七 JavaScript交互技术基础

网站前端开发项目教程单元一网站前端开发基础01020304目录单元二HTML结构化语言单元三

CSS表现技术单元四JavaScript交互技术05综合实训企业网站设计项目七

JavaScript交互技术基础知识单元四JavaScript交互技术任务一学习JavaScript基础任务二利用JavaScript进行用户注册信息验证JavaScript是互联网上最流行的脚本语言之一，可用于开发交互式的WEB页面，在服务器、PC机、平板电脑和智能手机等移动设备上也有着非常广泛的运用。JavaScript是一种轻量级的编程语言，它直接嵌入在WEB页面中，不需要进行编译，可以把静态网页转变成可以和用户进行交互的动态网页。本章将对JavaScript的基本知识进行一个全面大致的介绍，包括JavaScript的语法规则、基本数据结构、程序控制语句、函数、HTMLDOM对象、事件处理过程等，并利用JavaScript对“用户注册”页面中的用户信息进行验证。1

学习目标：项目概述2

知识要求：掌握JavaScript的语法规则，会书写正确的程序语句。掌握JavaScript的基本数据结构、程序控制语句，会使用它们编写简单的程序代码。掌握JavaScript的函数定义与调用，会使用它们编写简单的程序段。掌握JavaScript事件的相关内容。掌握JavaScriptHTMLDOM对象操作的相关内容。JavaScript的基本语法规则及在WEB中的引用JavaScript的基本数据结构JavaScript的程序控制语句和数组JavaScript的函数定义与调用学习JavaScript基础01任务情境小白终于将网站主页制作完毕，但是他发现整个页面太死板了，没有一些动态的特效让网页“活”起来。想设计网页特效，必须用到JavaScript技术，需要先了解JavaScript交互技术基础知识。学习JavaScript基础01任务分析预览常用的幻灯片、菜单等特效，从基础概念开始介绍JavaScript交互技术。一、BOM操作学习JavaScript基础01知识准备一、JavaScript简介 JavaScript是互联网上最流行的脚本语言之一，可用于开发交互式的WEB页面，在服务器、PC机、平板电脑和智能手机等移动设备上也有着非常广泛的运用。JavaScript是一种轻量级的编程语言，它直接嵌入在WEB页面中，不需要进行编译，可以把静态网页转变成可以和用户进行交互的动态网页。只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。随着HTML5在PC和移动端越来越流行，JavaScript变得更加重要了。并且，新兴的Node.js把JavaScript引入到了服务器端，JavaScript已经变成了全能型选手。一、BOM操作学习JavaScript基础01知识准备1.什么是面向对象

面向对象程序设计是目前世界上最主流的计算机编程思想，它有别于结构化程序设计方法即面向过程的程序设计思想，更适合于描述自然界当中的各种复杂问题。

在面向对象的编程思想中，主要包含了对象、类、封装、继承、属性与方法等概念。简单来说，系统中一切事物皆为对象；对象是属性及其操作的封装体；对象可按其性质划分为类，对象称为类的实例；实例关系和继承关系是对象之间的静态关系；消息传递是对象之间动态联系的唯一形式，也是计算的唯一形式；方法是消息的序列。一、BOM操作学习JavaScript基础01知识准备（1）对象对象是人们要进行研究的任何事物，从最简单的整数到复杂的飞机等均可看作对象，它不仅能表示具体的事物，还能表示抽象的规则、计划或事件。（2）对象的状态和行为对象具有状态，一个对象用数据值来描述它的状态。这个被称为对象的属性。对象还有操作，用于改变对象的状态，操作就是对象的行为。这个被称为对象的方法。一、BOM操作学习JavaScript基础01知识准备（3）类

具有相同或相似性质的对象的抽象就是类。因此，对象的抽象是类，类的具体化就是对象，也可以说类的实例是对象。

类具有属性，它是对象的状态的抽象，用数据结构来描述类的属性。类具有操作，它是对象的行为的抽象，用操作名和实现该操作的方法来描述。（4）事件驱动

所谓事件驱动，简单地说就是你做了什么事情，计算机就执行对应的什么操作。例如，用户点击了一个登录按钮，这就是一个事件，计算机接受到事件指令，就去执行对应的程序代码。这就是事件处理机制。一、BOM操作学习JavaScript基础01知识准备2.JavaScript语法规则字符串（String）必须使用单引号(‘’)或双引号(“”)括起来；每行语句是用分号(;)分隔；JavaScript语句通常以一个语句标识符(即保留关键字)为开始，并执行该语句；JavaScript对大小写是敏感的,例如变量myVariable与MyVariable是不同的；JavaScript会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。一、BOM操作学习JavaScript基础01知识准备3.JavaScript在WEB页中的用法（1）内嵌式

在HTML文档中，引入JavaScript代码使用的是通过<script>标签。

语法格式：<scripttype="text/javascript">//JavaScript代码段</script>

说明：在HTML5中可以其语法可以直接写成<script></script>一、BOM操作学习JavaScript基础01知识准备（2）外接式

当一段代码同时需要被多个网页文件使用时，可以创建一个扩展名为.js的文件用来专门存储这些代码，然后在网页头部引入该js文件。

语法格式：

<scripttype="text/javascript"src="JS文件的路径"></script>

在WEB页面中我们可以同时引用多个外部JavaScript文件。一、BOM操作学习JavaScript基础01知识准备4.JavaScript注释单行注释以//开头。多行注释以/*开始，以*/结尾。一、BOM操作学习JavaScript基础01知识准备二、JavaScript变量和运算符

1、变量（1）变量的命名命名规则如下：标识符由数字、字母、下划线或美元（$）组成，但是必须以字母、下划线或者$开头。标识符中不能包含空格、加、减等特殊符号。不能使用JavaScript中已有的关键字作为标识符名，如varchar。标识符名严格区分大小写，如Demo_Int1与demo_int1代表两个完全不同的变量。一、BOM操作学习JavaScript基础01知识准备（2）变量的声明与赋值

在JavaScript中，变量需要先声明才能使用。

语法格式：var变量名；

也可以在在声明变量的同时对其进行赋值。如：varsum=0;

可以使用一个关键字var同时声明多个变量，变量名之间用“，”分隔开。同样可以在声明变量的时候对其进行赋值。

JavaScript采用的是弱变量类型的形式,因此无需指定变量的数据类型,而是根据所赋予的值来决定其数据类型。一、BOM操作学习JavaScript基础01知识准备2、运算符（1）JavaScript算术运算符

常用的算术运算符有+、-、*、/、%、++、--。（2）JavaScript赋值运算符

常用的赋值运算符有=、+=、-=、*=、/=、%=。（3）字符串链接运算符“+”

字符串链接运算符“+”，用于把文本值或字符串变量连接起来。（4）比较运算符

比较运算符在逻辑语句中使用，用于判断变量或值是否相等。其运算过程需要首先对操作数进行比较，然后返回一个布尔值true或false。一、BOM操作学习JavaScript基础01知识准备常用比较运算符如右表所示。（5）逻辑运算符逻辑运算符是根据表达式的值来返回真值或是假值，常用比较运算符如下表所示。一、BOM操作学习JavaScript基础01知识准备（6）JavaScript运算符的优先级及结合性如右表示。0最高，数字越大，优先级越低。优先级结合性运算符0向左.、[]、（）1向右++、--、-、!、delete、new、typeof、void2向左*、/、%3向左+、-4向左<<、>>、>>>5向左<、<=、>、>=、in、instanceof6向左==、!=、===、!===7向左&8向左^9向左|10向左&&11向左||12向右?:13向右=14向右*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=15向左，一、BOM操作学习JavaScript基础01知识准备三、程序控制结构

1、条件语句

通常在写代码时，当需要为不同的决定来执行不同的动作，我们可以在代码中使用条件语句来完成该任务。

在

JavaScript中可使用以下几种条件语句：if语句：只有当指定条件为true时，使用该语句来执行代码。if...else语句：当条件为true时执行代码，当条件为false时执行其他代码。if...elseif....else语句使用该语句来选择多个代码块之一来执行。switch语句：使用该语句来选择多个代码块之一来执行。一、BOM操作学习JavaScript基础01知识准备（1）if语句语法格式:if(条件){当条件为true时执行的代码;}【例7-1】利用if语句判断成绩（2）if...else语句语法格式:if(条件){当条件为true时执行的代码;}else{当条件不为true时执行的代码;}【例7-2】利用if...else语句判断成绩一、BOM操作学习JavaScript基础01知识准备（3）if...elseif...else语句语法格式:if(条件1){当条件1为true时执行的代码;}elseif(条件2){当条件2为true时执行的代码;}else{当条件1和条件2都不为true时执行的代码;}【例7-3】利用if...elseif...else语句判断成绩一、BOM操作学习JavaScript基础01知识准备（4）switch语句语法格式:switch(n){case1:执行代码块1;break;case2:执行代码块2;break;default:与case1和case2不同时执行的代码;}【例7-4】利用if...elseif...else语句判断生肖一、BOM操作学习JavaScript基础01知识准备2.循环语句在实际问题中会遇到许多具有规律性的重复操作，,因此在程序中就需要重复执行某些代码块,使用循环语句可以完成该任务。JavaScript中可使用以下几种循环语句:for语句：循环代码块一定的次数。for/in语句：循环遍历对象的属性。while语句：当指定的条件为true时循环指定的代码块。do/while语句：同样当指定的条件为true时循环指定的代码块。一、BOM操作学习JavaScript基础01知识准备2.循环语句在实际问题中会遇到许多具有规律性的重复操作，,因此在程序中就需要重复执行某些代码块,使用循环语句可以完成该任务。JavaScript中可使用以下几种循环语句:for语句：循环代码块一定的次数。for/in语句：循环遍历对象的属性。while语句：当指定的条件为true时循环指定的代码块。do/while语句：同样当指定的条件为true时循环指定的代码块。一、BOM操作学习JavaScript基础01知识准备（1）for语句语法格式:for(语句1;语句2;语句3){被执行的代码块;}【例7-5】利用for语句输出数字1-4（2）while语句语法格式:while(条件){

需要执行的代码块;}【例7-6】利用while语句输出数字1-4一、BOM操作学习JavaScript基础01知识准备（3）do/while语句语法格式:do{需要执行的代码块;}while(条件)【例7-7】利用do/while语句输出数字1-4一、BOM操作学习JavaScript基础01知识准备3．break和continue语句break语句用于跳出循环。continue用于跳过循环中的一个迭代，继续执行该循环之后的代码（如果有的话）。【例7-8】利用break和continue语句跳出循环一、BOM操作学习JavaScript基础01知识准备四、数组1.创建数组JavaScript使用数组对象用来在单独的变量名中存储一系列的值。在JavaScript中，使用内置对象类Array和关键词New可以创建数组对象。

语法格式：var数组名=newArray();//新建一个长度为0的数组

var数组名=newArray(n);//新建一个指定长度为n的数组

var数组名=newArray(元素1,元素2,元素3,...);//新建一个指定长度的数组，并赋值

一、BOM操作学习JavaScript基础01知识准备每一个数组元素都有由数组名、方括号[]、数组下标组成，下标从0开始。2.访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。【例7-9】在网页中输出数组中第一项内容3.for...in语句JavaScript的for...in语句是一种特殊的for语句，专门用于处理与数组和对象相关的循环操作。用for…in语句处理数组，可以依次对数组中一、BOM操作学习JavaScript基础01知识准备的每个数组元素执行一条或多条语句。

语法格式：

for(变量in对象){//需要执行的代码}【例7-10】利用for...in语句输出数组里面的元素值4.数组的常用属性和方法

数组是一组有序排列的数据的集合，其常用的属性和方法如下表所示。【例7-11】输出数组的长度及返回一个包含数组中的所有元素的字符串一、BOM操作学习JavaScript基础01知识准备五、函数的声明与调用

1.函数的声明在JavaScript程序设计中,为了使代码更为简洁并可以重复使用,通常会将某段实现，特定功能的代码定义成一个函数函数就是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数在使用之前需要进行声明。语法格式：function函数名([参数1,参数2,……])｛

函数体；｝一、BOM操作学习JavaScript基础01知识准备2.函数的调用函数定义后并不会自动执行,而是需要在特定的位置调用函数。

语法格式：

函数名称([参数1,参数2,……])函数的调用有不带参数的调用和带参数的调用两种。

(1)不带参数的调用

【例7-12】不带参数的函数调用

(2)带参数的函数调用【例7-13】带参数的函数调用利用JavaScript进行用户注册信息验证02任务情境在“用户注册”页面中我们已经设计了一个漂亮的表单,用户在填写或者选择表单内容时,经常需要进行用户信息的验证,如下图所示,打“*”为必填项,当鼠标移到相应输入框上,会出现提示信息“请填写此字段”,所有的验证信息在相应输入框的右侧。具体验证如下：利用JavaScript进行用户注册信息验证02任务情境当用户名输入格式不正确时,输入框右侧的验证信息会变“请输入正确格式的用户名”,正确时,输入框右侧的验证信息消失。当密码输入格式不正确时,输入框右侧的验证信息会变“请输入正确格式的密码”,正确时,输入框右侧的验证信息消失。当确认密码与密码不一致时,输入框右侧的验证信息会变“两次输入的密码不一致!”。当手机号码输入格式不正确时,输入框右侧的验证信息会变“请输入6位数字的手机号码!”,正确时,输入框右侧的验证信息消失。当单击“提交”按钮提交表单时,如果所有验证都通过,会弹出“注册成功!”消息框。利用JavaScript进行用户注册信息验证02任务分析表单的验证涉及到JavaScriptHTMLDOM对象和表单处理事件,正则表达式匹配等用户信息。。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备一、DOM节点树 文档对象模型DOM(DocumentObjectModel)是一个表示和处理文档的应用程序接口(API),当网页被加载时,浏览器就会创建页面的DOM模型。通过HTMLDOM,就可以访问HTML文档的所有元素。DOM模型被设计为一颗对象树,它将网页中文档的对象关系规划为节点层级,构成它们之间的等级关系,如下图所示。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备一、JavaScript简介 JavaScript是互联网上最流行的脚本语言之一，可用于开发交互式的WEB页面，在服务器、PC机、平板电脑和智能手机等移动设备上也有着非常广泛的运用。JavaScript是一种轻量级的编程语言，它直接嵌入在WEB页面中，不需要进行编译，可以把静态网页转变成可以和用户进行交互的动态网页。只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。随着HTML5在PC和移动端越来越流行，JavaScript变得更加重要了。并且，新兴的Node.js把JavaScript引入到了服务器端，JavaScript已经变成了全能型选手。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备

根据DOM规范,整个文档是一个文档节点,每个标签是一个元素节点,元素包含的文本是文本节点,元素的属性是一个属性节点,注释属于注释节点,以此类推。1.查找HTML元素可以通过3种方法找到你要访问的指定元素，具体方法如下表。（1）通过id找到HTML元素。（2）通过标签名找到HTML元素。（3）通过类名找到HTML元素。

一、BOM操作利用JavaScript进行用户注册信息验证02知识准备【例7-14】利用DOM访问HTML元素2.改变HTML元素样式（1）style属性每个元素对象都有一个style属性,使用这个属性可以修改元素的样式,从而获得所需要的效果。【例7-15】通过style属性改变元素的宽度（2）className属性元素对象的className属性用于切换元素的类名,或为元素追加类名。【例7-16】通过className属性改变HTML样式一、BOM操作利用JavaScript进行用户注册信息验证02知识准备一、表单处理事件事件概念JavaScript采用的是事件驱动机制,这里所谓的事件是指用户在访问页面时执行的操作,例如一个网页页面完成加载、表单中的内容发生改变时或者一个按钮被点击时。当在HTML页面中使用JavaScript时,JavaScript就可以触发这些事件。2.事件处理程序事件处理指的就是与事件关联的JavaScript对象,当与页面特定部分关联的事件发生时,事件处理器就会被调用。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备事件处理的过程一般分为三个步鄹:•发生事件;•启动事件处理程序;•事件处理程序作出反应;(1)HTML元素指定自己的事件处理程序它的处理方法大致可以划分为两步。第一步获得处理对象的引用,第二步将要执行的处理函数赋值给对应的事件。【例7-17】单击按钮弹出消息框1一、BOM操作利用JavaScript进行用户注册信息验证02知识准备(2)在网页中直接执行JavaScript代码在网页中直接执行事件处理程序,只需要在网页元素标签中直接添加事件,然后执行对应的函数或者代码即可。【例7-18】单击按钮弹出消息框23.常用事件下面是一些常见的HTML事件的列表，如下表所示。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备一、BOM操作利用JavaScript进行用户注册信息验证02知识准备4.正则表达式正则表达式是一种特殊的字符串模式,用于匹配一组字符串,定义一种规则去匹配符合规则的字符。语法格式:/正则表达式主体/修饰符(可选)正则表达式主体描述了表达式的模式,修饰符则用于指定全局匹配、区分大小写的匹配和多行匹配。位于“/”与“/”之间的部分就是正则表达式主体,即要在目标对象中进行匹配的目标对象。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备4.正则表达式正则表达式是一种特殊的字符串模式,用于匹配一组字符串,定义一种规则去匹配符合规则的字符。语法格式:/正则表达式主体/修饰符(可选)正则表达式主体描述了表达式的模式,修饰符则用于指定全局匹配、区分大小写的匹配和多行匹配。位于“/”与“/”之间的部分就是正则表达式主体,即要在目标对象中进行匹配的目标对象。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备为了让用户更加灵活的定制模式内容,正则表达式提供了专门的“标识符”。常用的标识符有量词、方括号、元字符、修饰符几种。（1）量词常用的量词如右表所示。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备（2）方括号在正则表达式中,我们可以使用方括号用于查找某个范围内的字符，如右表所示。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备（3）元字符元字符是在正则表达式中拥有特殊含义的字符，如右表所示。一、BOM操作利用JavaScript进行用户注册信息验证02知识准备（4）修饰符修饰符规定在全局搜索中是否区分大小写等搜索要求，如右表所示。

下面学习一个简单的正则表达式例子：在写用户注册表单时，只允许用户名包含字符、数字、下划线，并设置用户名的长度，我们就可以使用以下正则表达式来设定，如右图。设计与美化表单02任务实现一、BOM操作1.结构分析打开“register.html”文件,在代码上进行如下修改:（1）在form标签中添加表单提交事件,调用checkisnull()函数。（2）在用户名对应的输入文本框中设置相关的验证信息和事件处理。（3）在密码对应的输入文本框中设置相关的验证信息和事件处理。（4）在确认密码对应的输入文本框中设置相关事件处理。（5）在手机对应的输入文本框中设置相关的验证信息和相关事件处理。设计与美化表单02任务实现一、BOM操作2.

编写JavaScript代码，实现表单的验证继续在该文件,紧跟<body>标签编写代码,具体设计如下。（1）引入JavaScript代码（2）验证输入的用户名格式是否正确,不正确输入框右侧的约束条件信息显示″请输入正确格式的用户名!″,正确显示信息为空,在<script></script>标签对里编写代码。（3）验证输入的密码格式是否正确,不正确输入框右侧的约束条件信息显示″请输入正确格式的密码!″,正确显示为空。（4）验证输入的手机号码格式是否正确,不正确输入框右侧的约束条件信息显示″请输入6位数字的手机号码!″,正确显示为空。设计与美化表单02任务实现一