JavaScript技术在商城中的应用.ppt

PHP MySQL动态网页技术教程 第5章JavaScript技术在商城中的应用 5 1项目导引 用户注册验证 大家在网站登录注册时是不是有这样的体会 如果有必填项而没有填写 网站会提示我们此项目不能为空 如果设置密码的长度不够 网站会提示我们密码长度不够 如果注册密码与确认密码不一致 网站会提示我们密码不一致 如果信息格式输入不正确 如邮箱地址 手机号码 网站会提示我们格式不正确 那么这些功能是如何实现的呢 通过JavaScript客户端脚本可以对用户输入的数据进行检查 5 2项目分析 JavaScript脚本语言是一种面向浏览器的网页脚本编程语言 JavaScript脚本在客户端浏览器执行 用户注册过程中的主要验证包括 用户名 密码和邮箱地址等内容的非空验证 密码长度为6 20个字符 且是英文字母 数字及符号的组合 注册密码与确认密码是否一致 电子邮箱格式是否正确 5 3技术准备 5 3 1JavaScript基础JavaScript语句的基本语法规则与PHP语法类似 每条语句以 为结束符 注释语句有单行注释 和多行注释 两种 变量 函数名以及关键词都是区分大小写的 1 在网页中加入JavaScript 1 直接嵌入HTML文档 2 引用方式例5 1 5 3技术准备 5 3 1JavaScript基础2 数据类型 5 3技术准备 5 3 1JavaScript基础3 变量变量名是一种标识符 由字母 数字 下划线 或美元符号 构成的字符序列组成 但首字符不能是数字 也不能包含空格 等特殊字符 JavaScript中通过var关键字来声明变量var变量名 初值 变量名 初值 例5 2 5 3技术准备 5 3 1JavaScript基础4 运算符与表达式JavaScript中运算符与表达式与php基本相同JavaScript中字符串连接运算符与php不同 JavaScript中把 或 作为字符串连接运算符 例5 3 5 3技术准备 5 3 2JavaScript流程语句1 条件语句 if else if else 例5 4 5 3技术准备 5 3 2JavaScript流程语句2 循环语句 1 while语句其语法格式如下所示 while 2 do while语句 其语法格式如下所示 do while 5 3技术准备 5 3 2JavaScript流程语句2 循环语句 3 for语句 其语法格式如下所示 for 初值表达式 循环判定表达式 更新表达式 例5 5 例5 6 例5 7 5 3技术准备 5 3 3浏览器对象JavaScript是一种基于对象 Object 的编程语言 可以使用内置对象 浏览器对象和自定义对象 JavaScript语言提供的内置对象主要包括 数学对象 Math 日期对象 Date 字符串对象 String 和数组对象 Array 等浏览器对象 BOM 用于访问与操纵浏览器窗口窗口对象 window 文档对象 document 地址对象 location 浏览器对象 navigator 屏幕对象 screen 历史对象 history 5 3技术准备 5 3 3浏览器对象1 window对象window对象表示整个浏览器窗口 通过对象的方法我们可以定制 打开和关闭浏览器窗口 其常用方法如表所示 5 3技术准备 5 3 3浏览器对象1 window对象 1 使用对话框使用window对象的alert confirm 和prompt 方法 可以弹出警示 确认和提示对话框 例5 8 例5 9 2 打开和关闭窗口使用window对象的open close 方法可以打开 关闭窗口 例5 10 3 使用定时器使用window对象的setInterval 方法 可以实现让一段程序每隔一段时间就执行一次的定时机制 例5 11 5 3技术准备 5 3 3浏览器对象2 Document对象Document对象表示在浏览器窗口中显示的页面文档 除了提供文档整体信息的属性外 Document对象还有很多的重要属性 这些属性提供文档内容信息 如 forms 集合属性存放的Form对象是文档中的所有表单 images 集合属性和links 集合属性存放的是文档中的所有图像和超链接对象 1 表单的访问如下面的HTML页面 用户 引用该文档中的表单可以使用document forms login 或document login 5 3技术准备 5 3 3浏览器对象2 Document对象 2 表单元素的访问设置了一个表单元素的name属性 就创建了一个引用该元素的Form对象的新属性 这个属性的名字就是name属性的值 通过此属性能够从表单中读取用户输入的数据 若访问上例中的用户元素 则需为用户元素添加name属性 如 则访问用户元素代码可写为 document login username例5 12 例5 13 5 3技术准备 5 3 3浏览器对象3 location对象location对象的主要作用是分析和设置页面的URL地址 通过设置location href属性可以跳转到新的页面 如 location href 例5 144 history对象history对象可以用来访问浏览器窗口已浏览过的历史页面 例5 15 5 3技术准备 5 3 4JavaScript事件JavaScript是基于对象的语言 而事件编程是JavaScript中最吸引人的地方 因为它提供了一个平台 让用户不仅能够浏览页面中的内容 而且还可以和页面元素进行交互 1 事件的基本概念通常鼠标或热键的动作我们称之为事件 event 而由鼠标或热键引发的一连串程序的动作 称之为事件驱动 eventdriver 而对事件进行处理的程序或函数 我们称之为事件处理程序 事件绑定 是指将一个函数与某个HTML元素的事件属性关联起来 使得当相应事件发生时就会触发该函数的执行 5 3技术准备 5 3 4JavaScript事件2 静态绑定事件是指将处理事件的程序代码直接指定为HTML元素的事件属性值 语法格式为 如 问侯先生函数调用形式 如果触发事件时要执行的语句比较多 则可以将代码放到函数中 然后在事件属性中写入函数调用的语句 如 问侯小姐例5 16 5 3技术准备 5 3 4JavaScript事件3 事件的类型 1 鼠标事件 5 3技术准备 5 3 4JavaScript事件3 事件的类型 2 表单事件例5 17 例5 18 5 3技术准备 5 3 5正则表达式1 正则表达式介绍正则表达式 regularexpression 描述了一种字符串匹配的模式 元字符就是指那些在正则表达式中具有特殊含义的专用字符 可以用来指定各种匹配关系 在程序语言中引入正则表达式 可以测试字符串是否匹配某个模式 从而实现数据格式的有效性验证 例如 对用户在Web表单中输入的电子邮件地址格式进行确认 必须有 和 字符 这称为数据验证 5 3技术准备 5 3 5正则表达式2 正则表达式的语法3 RegExp对象JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能 每一条正则表达式模式对应一个RegExp实例 JavaScript使用RegExp对象封装与正则表达式相关的功能和操作 每一个该对象的实例对应着一条正则表达式 和其他对象一样 在使用之前必须取得其引用或新建一个对象实例 例5 19 例5 20 5 4项目实施 在用户注册页面中 对用户名 密码和邮箱地址的必填验证就是检查输入表单元素的值是否为空 对于登录密码与确认密码一致性验证就是判断两个输入表单元素的值是否相等 而用户注册页面数据验证的难点在于对用户名 密码和邮箱地址的格式进行合法性验证 通常这种对复杂格式数据的合法性验证通常借助正则表达式实现 我们对用户注册过程中数据的合法性验证遵循由易到难 循序渐进的过程进行 即 第一步 实现必填字段的验证 第二步 实现复杂格式数据的验证 5 4项目实施 1 制作注册页面2 非空性验证程序3 复杂格式数据的验证用户注册时除了非空验证之外 通常的验证还包括 注册帐号只能以字母开头 长度在6 18之间 只能包含字符 数字和下划线 登录密码只能是6 20位英文字母或者数字建议采用易记的英文数字组合 邮箱地址格式是否正确 登录密码与确认密码是否一致 5 5技术拓展 5 5 1数组对象简单地说 数组就是由名称相同的多个值构成的一个集合 集合中的每个值都是这个数组的元素 数组中数组元素的个数称为数组长度 1 数组对象的创建与使用数组对象的创建有三种格式 格式1 数组对象名称 newArray 元素个数 格式2 数组对象名称 newArray 元素1 元素2 格式3 数组对象名称 元素1 元素2 例5 25 例5 26 5 5技术拓展 5 5 2String对象在JavaScript中 使用String对象来处理字符串 它是JavaScript最重要的核心对象之一 也是在编程过程中使用最多的对象 1 String对象的创建String对象的创建有两种方式 方式一 new运算符newstring Thisisanewstring 方式二 直接赋值字符串newstring newString Thisisanewstring 2 字符串对象的常用属性3 字符串对象的常用方法例5 27 5 5技术拓展 5 5 3Math对象Math对象主要是执行数学计算任务 Math对象的属性是数学中常用的常量 Math对象的方法是数学中常用的函数 在JavaScript程序中 关键字Math是对一个已创建好的Math对象的引用 因此使用Math对象时不必先使用new运算符创建它 也就是 在调用Math对象的属性和方法时 直接写成 Math 属性 和 Math 方法 即可 例5 28 5 5技术拓展 5 5 4Date对象Date对象主要提供获取和设置日期与时间的方法 1 Date对象的创建语法格式 var变量名 newDate 参数 2 Date对象获取时间的常用方法3 Date对象设置时间的常用方法例5 29 5 6本章小结 本章主要介绍了JavaScript事件驱动编程的方法 主要包括向html页面添加JavaScript JavaScript脚本的基本语法 JavaScript常用对象的用法 如何创建对事件的响应 正则表达式 egExp对象的有关知识等 通过本章学习 读者应当对JavaScript中的事件驱动 数据验证部分有一个比较全面的了解 并初步掌握使用事件驱动机制与正则表达式相关知识编写表单数据验证程序 5 7强化练习 一 选择题1 下列方法一定会被调用的是 A f1 B f2 C g1 D g2 2 在JavaScript中 如果不指明对象直接调用某个方法 则该方法默认属于哪个对象 A documentB windowC formD location3 下列正则表达式中描述有误的是 A 匹配范围内的任意一个字符B n 匹配n次C w 匹配任意字母 数字 下划线 符号D d 匹配0 9之间的任意数字 5 7强化练习 一 选择题1 下列方法一定会被调用的是 A f1 B f2 C g1 D g2 2 在JavaScript中 如果不指明对象直接调用某个方法 则该方法默认属于哪个对象 A documentB windowC formD location3 下列正则表达式中描述有误的是 A 匹配范围内的任意一个字符B n 匹配n次C w 匹配任意字母 数字 下划线 符号D d 匹配0 9之间的任意数字 5 7强化练习 一 选择题4 一年有12个月 现要求月份的正确格式为 1 2 9 10 11 12 以下哪个正则表达式可以符合要求 A 1 12 B 1 9 d C 1 9 1 0 2 D d 11 12 10 5 下列与表达式 d 3 5 相符的是 A a345B 345aC aD 3456 下列选项中 哪一条语句可以打开一个无状态栏的页面 A window open myPage html B window open myPage html mywindow toolbars 0 scrollbars 0 location 0 location 0 status 1 menubar 0 resizable 0 width 320 height 380 C window open myPage html mywindow toolbars 0 scrollbars 0 location 0 location 0 status yes menubar 0 resizable 0 width 320 height 380 D window open myPage html mywindow toolbars 0 scrollbars 0 location 0 location 0 status no menubar 0 resizable 0 width 320 height 380 5 7强化练习 一 选择题7 在JavaScript中 setInterval move 20 意味着 A 每隔20秒 move 函数就会被调用一次B 经过20毫秒后 move 函数就会被调用一次C 每隔20毫秒 move 函数就会被调用一次D move 函数被调用20次8 光标移到文本框上方时 文本框边框的颜色就改变 这是因为激发了下列的 事件A onFocusB onMouseUpC onMouseOverD onMouseMove9 能够与onFocus事件外理程序相关联的表单元素有 A 文本框B 复选框C 窗口D 按钮 5 7强化练习 二 操作题1 做一个简易的登录界面 实现当用户输入的用户名和密码正确时就跳转到指定页面 2 编写一段倒计算程序 显示格式 时 分 秒