PHP+MySQL动态网页技术教程动态网页技术教程主编：王彦辉主编：王彦辉5.1 项目导引：用户注册验证项目导引：用户注册验证v大家在网站登录注册时是不是有这样的体会？大家在网站登录注册时是不是有这样的体会？n如果有必填项而没有填写，网站会提示我们此项目不能为空；n如果设置密码的长度不够，网站会提示我们密码长度不够；n如果注册密码与确认密码不一致，网站会提示我们密码不一致；n如果信息格式输入不正确（如邮箱地址、手机号码），网站会提示我们格式不正确。v那么这些功能是如何实现的呢？那么这些功能是如何实现的呢？n通过JavaScript客户端脚本可以对用户输入的数据进行检查 5.2 项目分析项目分析vJavaScript脚本语言是一种面向浏览器的网页脚本语言是一种面向浏览器的网页脚本编程语言，脚本编程语言，JavaScript脚本在客户端浏览脚本在客户端浏览器执行。器执行。 v用户注册过程中的主要验证包括：用户注册过程中的主要验证包括：n用户名、密码和邮箱地址等内容的非空验证；n密码长度为6-20个字符，且是英文字母、数字及符号的组合；n注册密码与确认密码是否一致；n电子邮箱格式是否正确。5.3 技术准备技术准备v5.3.1 JavaScript基础基础nJavaScript语句的基本语法规则与PHP语法类似，每条语句以“；”为结束符，注释语句有单行注释（/）和多行注释（/*/）两种，变量、函数名以及关键词都是区分大小写的。n1在网页中加入JavaScriptn（1）直接嵌入HTML文档n（2）引用方式n例5-15.3 技术准备技术准备v5.3.1 JavaScript5.3.1 JavaScript基础基础n2 2数据类型数据类型 数据数据类类型型数据数据类类型名称型名称示例示例number数值类型整数：23、023、0x23 浮点数:：2.56 string字符串类型字符串、字符串boolean布尔类型True、falseobject对象类型Date对象、Math对象、Window对象null空类型Nullundefined未定义类型Txtname、tmp、txtstr5.3 技术准备技术准备v5.3.1 JavaScript基础基础n3变量变量n变量名是一种标识符，由字母、数字、下划线（_）或美元符号（$）构成的字符序列组成，但首字符不能是数字，也不能包含空格、+、-等特殊字符。nJavaScript中通过var关键字来声明变量nvar 变量名=初值，变量名=初值，n例5-2 5.3 技术准备技术准备v5.3.1 JavaScript基础基础n4运算符与表达式运算符与表达式nJavaScript中运算符与表达式与php基本相同nJavaScript中字符串连接运算符与php不同，JavaScript中把“+”或“+=”作为字符串连接运算符。n例5-3 5.3 技术准备技术准备v5.3.2 JavaScript流程语句流程语句n1条件语句（条件语句（if.else）if () else n例5-4 5.3 技术准备技术准备v5.3.2 JavaScript流程语句流程语句n2循环语句循环语句n（1）while语句n其语法格式如下所示：nwhile ()nnn（2）do.while语句：n其语法格式如下所示：ndo nn while ()5.3 技术准备技术准备v5.3.2 JavaScript流程语句流程语句n2循环语句循环语句n（3）for语句：n其语法格式如下所示：nfor(初值表达式，循环判定表达式，更新表达式)nnn例5-5、例5-6 、例5-7 5.3 技术准备技术准备v5.3.3浏览器对象浏览器对象nJavaScript是一种基于对象（Object）的编程语言，可以使用内置对象、浏览器对象和自定义对象。nJavaScript语言提供的内置对象主要包括：数学对象（Math）、日期对象（Date）、字符串对象（String）和数组对象（Array）等n浏览器对象（BOM）用于访问与操纵浏览器窗口n窗口对象（window）n文档对象（document）n地址对象（location）n浏览器对象（navigator）n屏幕对象（screen）n历史对象（history）。5.3 技术准备技术准备v5.3.35.3.3浏览器对象浏览器对象n1 1windowwindow对象对象nwindowwindow对象表示整个浏对象表示整个浏览器窗口，通过对象的览器窗口，通过对象的方法我们可以定制、打方法我们可以定制、打开和关闭浏览器窗口。开和关闭浏览器窗口。其常用方法如表所示。其常用方法如表所示。方法方法说说明明alert(信息字串信息字串)弹弹出警告信息出警告信息confirm(信息字串信息字串)显显示确示确认认信息信息对话对话框框prompt(提示字串提示字串，默，默认认值值)显显示提示信息，并提供可示提示信息，并提供可输输入的字段入的字段open(URL，窗口名称，窗口名称，窗口窗口规规格格)用来打开一个新窗口，其中，接受的用来打开一个新窗口，其中，接受的参数分参数分别为别为新窗口的新窗口的URL、新窗、新窗口的名称、新建窗口的大小和外口的名称、新建窗口的大小和外观观特性。特性。close()关关闭浏览闭浏览器窗口器窗口moveBy(水平点数，垂直水平点数，垂直点数点数)将窗口移将窗口移动动指定位移量。以像素指定位移量。以像素为单为单位位moveTo(x坐坐标标，y坐坐标标)将窗口移到指定位置。以像素将窗口移到指定位置。以像素为单为单位位resizeBy(水平点数，垂水平点数，垂直点数直点数)按照按照给给定的位移量重新定的位移量重新设设定窗口大小。定窗口大小。以像素以像素为单为单位位resizeTo(宽宽度，高度度，高度)将窗口将窗口设设置置为为指定的大小。以像素指定的大小。以像素为为单单位位setInterval(表达式，毫表达式，毫秒秒)设设置一个延器，使每隔指定毫秒后周置一个延器，使每隔指定毫秒后周期性地期性地执执行表达式。行表达式。该该方法返回方法返回定定时时器器对对象。象。setTimeout(表达式，毫表达式，毫秒秒)设设置一个定置一个定时时器，使在指定毫秒后自器，使在指定毫秒后自动执动执行一次表达式。行一次表达式。该该方法返回方法返回定定时时器器对对象。象。clearInterval(定定时时器器对对象象)取消由取消由clearInterval()设设置的定置的定时时操作操作clearTimeout(定定时时器器对对象象)取消由取消由clearTimeout()设设置的延置的延时时操作操作5.3 技术准备技术准备v5.3.3浏览器对象浏览器对象n1window对象对象n（1）使用对话框n使用window对象的alert()、confirm()和prompt()方法，可以弹出警示、确认和提示对话框。n例5-8、例5-9 n（2）打开和关闭窗口n使用window对象的open()、close()方法可以打开、关闭窗口。n例5-10 n（3）使用定时器n使用window对象的setInterval()方法，可以实现让一段程序每隔一段时间就执行一次的定时机制。n例5-11 5.3 技术准备技术准备v5.3.3浏览器对象浏览器对象n2Document 对象对象nDocument对象表示在浏览器窗口中显示的页面文档。除了提供文档整体信息的属性外，Document对象还有很多的重要属性，这些属性提供文档内容信息。如，forms集合属性存放的Form对象是文档中的所有表单，images集合属性和links集合属性存放的是文档中的所有图像和超链接对象。n（1）表单的访问n如下面的HTML页面：nn用户: nn引用该文档中的表单可以使用document.formslogin或document.login。5.3 技术准备技术准备v5.3.3浏览器对象浏览器对象n2Document 对象对象n（2）表单元素的访问n设置了一个表单元素的name属性，就创建了一个引用该元素的Form对象的新属性，这个属性的名字就是name属性的值。通过此属性能够从表单中读取用户输入的数据。n若访问上例中的用户元素，则需为用户元素添加name属性，如，则访问用户元素代码可写为：ndocument.login.usernamen例5-12、例5-13 5.3 技术准备技术准备v5.3.3浏览器对象浏览器对象n3location对象对象 nlocation对象的主要作用是分析和设置页面的URL地址。n通过设置location.href属性可以跳转到新的页面，如：location.href=。n例5-14 n4history对象对象 nhistory 对象可以用来访问浏览器窗口已浏览过的历史页面。n例5-15 5.3 技术准备技术准备v5.3.4 JavaScript事件事件nJavaScript是基于对象的语言。而事件编程是JavaScript中最吸引人的地方，因为它提供了一个平台，让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。n1事件的基本概念事件的基本概念n通常鼠标或热键的动作我们称之为事件（event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（event driver）。而对事件进行处理的程序或函数，我们称之为事件处理程序。n事件绑定：是指将一个函数与某个 HTML 元素的事件属性关联起来，使得当相应事件发生时就会触发该函数的执行。5.3 技术准备技术准备v5.3.4 JavaScript事件事件n2静态绑定事件静态绑定事件n是指将处理事件的程序代码直接指定为 HTML 元素的事件属性值。语法格式为 ，如：n问侯先生n函数调用形式：如果触发事件时要执行的语句比较多，则可以将代码放到函数中，然后在事件属性中写入函数调用的语句，如：n问侯小姐n例5-165.3 技术准备技术准备v5.3.4 JavaScript5.3.4 JavaScript事事件件n3 3事件的类型事件的类型n（1 1）鼠标事件）鼠标事件事件事件说说明明onclick单击单击鼠鼠标标左左键时键时触触发发此事件此事件onmouseover鼠鼠标标指指针针移到另一个元素上移到另一个元素上时时触触发发此事件此事件onmouseout鼠鼠标标指指针针在某个元素上，移出在某个元素上，移出该该元素元素边边界界时时触触发发此事件此事件5.3 技术准备技术准备v5.3.4 JavaScript5.3.4 JavaScript事件事件n3 3事件的类型事件的类型n（2 2）表单事件）表单事件n例例5-175-17、例、例5-185-18 事件事件说说明明onblur当控件失去焦点当控件失去焦点时时触触发发此事件此事件onchange当控件失去焦点并且元素的内容当控件失去焦点并且元素的内容发发生改生改变时变时触触发发此事件此事件onfocus当控件当控件获获得焦点得焦点时时触触发发此事件此事件onreset当用当用户单击户单击“重置重置”按按钮钮（即（即）时时触触发发onselect当当选择选择了文本框中的一个或多个字符了文本框中的一个或多个字符时时触触发发onsubmit当用当用户单击户单击“提交提交”按按钮钮（即（即）时时触触发发5.3 技术准备技术准备v5.3.5正则表达式正则表达式n1正则表达式介绍正则表达式介绍n正则表达式（regular expression）描述了一种字符串匹配的模式。元字符就是指那些在正则表达式中具有特殊含义的专用字符，可以用来指定各种匹配关系。n在程序语言中引入正则表达式，可以测试字符串是否匹配某个模式，从而实现数据格式的有效性验证。例如，对用户在Web表单中输入的电子邮件地址格式进行确认（必须有和.字符），这称为数据验证。5.3 技术准备技术准备v5.3.5正则表达式正则表达式n2正则表达式的语法正则表达式的语法n3 RegExp对象对象nJavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能，每一条正则表达式模式对应一个RegExp实例。JavaScript使用RegExp对象封装与正则表达式相关的功能和操作，每一个该对象的实例对应着一条正则表达式。和其他对象一样，在使用之前必须取得其引用或新建一个对象实例。n例例5-19 、例例5-205.4 项目实施项目实施v在用户注册页面中，对用户名、密码和邮箱地址的必填验证就是检查在用户注册页面中，对用户名、密码和邮箱地址的必填验证就是检查输入表单元素的值是否为空；对于登录密码与确认密码一致性验证就输入表单元素的值是否为空；对于登录密码与确认密码一致性验证就是判断两个输入表单元素的值是否相等；而用户注册页面数据验证的是判断两个输入表单元素的值是否相等；而用户注册页面数据验证的难点在于对用户名、密码和邮箱地址的格式进行合法性验证，通常这难点在于对用户名、密码和邮箱地址的格式进行合法性验证，通常这种对复杂格式数据的合法性验证通常借助正则表达式实现。我们对用种对复杂格式数据的合法性验证通常借助正则表达式实现。我们对用户注册过程中数据的合法性验证遵循由易到难，循序渐进的过程进行。户注册过程中数据的合法性验证遵循由易到难，循序渐进的过程进行。即：第一步，实现必填字段的验证；第二步，实现复杂格式数据的验即：第一步，实现必填字段的验证；第二步，实现复杂格式数据的验证。证。5.4 项目实施项目实施v1制作注册页面制作注册页面v2非空性验证程序非空性验证程序v3复杂格式数据的验证复杂格式数据的验证n用户注册时除了非空验证之外，通常的验证还包括：n注册帐号只能以字母开头，长度在6-18之间，只能包含字符、数字和下划线；n登录密码只能是6-20位英文字母或者数字建议采用易记的英文数字组合；n邮箱地址格式是否正确。n登录密码与确认密码是否一致；5.5 技术拓展技术拓展v5.5.1数组对象数组对象n简单地说，数组就是由名称相同的多个值构成的一个集合。集合中的每个值都是这个数组的元素。数组中数组元素的个数称为数组长度。 n1数组对象的创建与使用n数组对象的创建有三种格式：n格式1：数组对象名称=new Array(元素个数)n格式2：数组对象名称=new Array(元素1，元素2，.)n格式3：数组对象名称=元素1，元素2，.n例5-25、例5-26 5.5 技术拓展技术拓展v5.5.2 String对象对象n在JavaScript中，使用String对象来处理字符串，它是JavaScript最重要的核心对象之一，也是在编程过程中使用最多的对象。n1String对象的创建nString对象的创建有两种方式：n方式一：new 运算符nnewstring = This is a new string.n方式二：直接赋值字符串nnewstring =new String(This is a new string.)n2字符串对象的常用属性n3字符串对象的常用方法n例5-27 5.5 技术拓展技术拓展v5.5.3 Math对象对象nMath对象主要是执行数学计算任务，Math对象的属性是数学中常用的常量，Math对象的方法是数学中常用的函数。n在JavaScript程序中，关键字Math是对一个已创建好的Math对象的引用，因此使用Math对象时不必先使用new运算符创建它。也就是，在调用Math对象的属性和方法时，直接写成“Math.属性”和“Math.方法”即可。n例5-28 5.5 技术拓展技术拓展v5.5.4 Date对象对象nDate对象主要提供获取和设置日期与时间的方法。n1Date对象的创建n语法格式：var 变量名=new Date(参数) n2Date对象获取时间的常用方法n3Date对象设置时间的常用方法n例例5-29 5.6 本章小结本章小结v本章主要介绍了本章主要介绍了JavaScript事件驱动编程的方法，主要包括向事件驱动编程的方法，主要包括向 html 页面添加页面添加 JavaScript、JavaScript脚本的基本语法、脚本的基本语法、JavaScript常用对象的用法、如何创建对事件的响应、正则表达式、常用对象的用法、如何创建对事件的响应、正则表达式、egExp对象的有关知识等。通过本章学习，读者应当对对象的有关知识等。通过本章学习，读者应当对JavaScript中的事件驱动、数据验证部分有一个比较全面的了解，中的事件驱动、数据验证部分有一个比较全面的了解，并初步掌握使用事件驱动机制与正则表达式相关知识编写表单数据验并初步掌握使用事件驱动机制与正则表达式相关知识编写表单数据验证程序。证程序。5.7 强化练习强化练习v一、选择题一、选择题n1 下列方法一定会被调用的是（ ）nAf1( ) Bf2( ) Cg1( ) Dg2( ) n2在JavaScript中，如果不指明对象直接调用某个方法，则该方法默认属于哪个对象（ ）nAdocument Bwindow nCform Dlocation n3下列正则表达式中描述有误的是（ ）nA ：匹配范围内的任意一个字符nBn：匹配n次 nCw：匹配任意字母、数字、下划线、符号nDd：匹配0-9之间的任意数字 5.7 强化练习强化练习v一、选择题一、选择题n1 下列方法一定会被调用的是（ ）nAf1( ) Bf2( ) Cg1( ) Dg2( ) n2在JavaScript中，如果不指明对象直接调用某个方法，则该方法默认属于哪个对象（ ）nAdocument Bwindow nCform Dlocation n3下列正则表达式中描述有误的是（ ）nA ：匹配范围内的任意一个字符nBn：匹配n次 nCw：匹配任意字母、数字、下划线、符号nDd：匹配0-9之间的任意数字 5.7 强化练习强化练习v一、选择题一、选择题n4一年有12个月。现要求月份的正确格式为：1，2，.9，10，11，12。以下哪个正则表达式可以符合要求？（ ）nA/1-12$/ B/1-9d?$/ nC/(1-910-2)$/ D/d111210$/ n5下列与表达式/d3,5$/相符的是（ ）nA a345 B 345a Ca D345 n6下列选项中，哪一条语句可以打开一个无状态栏的页面？（ ）Awindow.open(“myPage.html”)Bwindow.open(“myPage.html”,”mywindow”,”toolbars=0,scrollbars=0,location=0,location=0,status=1,menubar=0,resizable=0,width=320,height=380”)Cwindow.open(“myPage.html”,”mywindow”,”toolbars=0,scrollbars=0,location=0,location=0,status=yes,menubar=0,resizable=0,width=320,height=380”)Dwindow.open(“myPage.html”,”mywindow”,”toolbars=0,scrollbars=0,location=0,location=0,status=no,menubar=0,resizable=0,width=320,height=380”)5.7 强化练习强化练习v一、选择题一、选择题n7在JavaScript中，setInterval(move,20)意味着（ ）n A每隔20秒，move()函数就会被调用一次n B经过20毫秒后，move()函数就会被调用一次n C每隔20毫秒，move()函数就会被调用一次n Dmove()函数被调用20次n8光标移到文本框上方时，文本框边框的颜色就改变，这是因为激发了下列的（ ）事件nAonFocus BonMouseUp nConMouseOver DonMouseMoven9能够与onFocus事件外理程序相关联的表单元素有（ ）nA文本框 B复选框 nC窗口 D按钮5.7 强化练习强化练习v二二 、操作题、操作题n1做一个简易的登录界面，实现当用户输入的用户名和密码正确时就跳转到指定页面。n2编写一段倒计算程序，显示格式：“时-分-秒”