web应用基础—Lab4 1预备知识 1.1 JavaScript简介 JavaScript是一种轻型的,解释性的程序设计语言,而且具有面向对象的能力。该语言 是当令Web客户端开发主流的脚本语言。如今它已在实现wb客户端应用逻辑(表单 验证),营造良好的用户体验(创建复杂的用户界面)等方面得到了广泛的应用。 JavaScrip的出现把可执行的内容添加到了网页中,使静态的HTML页面活跃了起来, 与之前单纯使用服务器端交互技术相比,为用户提供了更好的交互性。伴随着 Internet 普及的趋势越来越强, Web application在人们生活中所起的作用越来越明显,作为wcb 开发者必学的技术之一的 JavaScript也越来越得到人们的关注。 12 JavaScript核心语言的特性 JavaScript核心语言有以下特性 1、 JavaScript的语法构成上基本上与Jaa,CC+等主流语言一致。这一点配合 JavaScript提供的丰富的功能大大促进了 JavaScript的推广 Java script是一个弱类型的语言。弱类型语言通常在程序的严谨性不如Jaa等强类 型语言,但与此同时弱类型在类型转化时也给程序员提供强类型语言不具备的简单 性,不同类型的变量可以通过赋值直接转换,通常不会抛出异常 3、 JavaScript是一种基于对象的语言( Object- Based Language),注意不是一种面向对 象的语言(Obic- Oricnted Language),所以它在对“对象”的支持上有一定缺陷, 大家所熟悉的诸如对象继承,多态等面向对象语言所具有的基本特性在 JavaScript 中只能通过一些变通手段来实现(通常比较复杂) 4、 Java script作为一种解釋性语言·它在使用前不需要编译,只有在解释过程中岀错 才报出错误信息,笼统的错误信息往往会给新手在学习过程中调试程序带来了一些 小小的麻烦。但这一特性冋时也给 Java script带来了编译性语言CC++、Java中难 以支持的cva功能。 5、 JavaScript是一种具有丰富特性的语言,它为开发者提供许多实用的库函数。其中 包括日期,字符串,正则表达式等相关的函数,它们的存在大大丰富了 . Script 的功能。 13浏览器中使用 JavaScript的方法 在浏览器中使用 Javascript一共有以下四种方 1、链接标记的URL中
Web 应用基础——Lab4
web应用基础 <a href ="Javascript: alert('Hi !'):" >click Me </a> 这种做法通常只在教学演试中使用 HREF中的" Javascript"的协议头一定要加,其中可以写多句脚本,但不能写 return语句。 2、HTML标签的事件处理属性中 <a href ="# onclick ="Javascript: alert ('Hello !')return false; "> Click Me Too</a> 这种做法比较简单,比较常用。 return false是为了禁止页面跳转。 通常" Javascript:"的协议头可以不加,简写为 onclick=" alert(Hll!) return false;" 3、页面的 SCRIPT标签中 script language="javascript"type=text/javascript"> <!--//--><! [CDATA[//><!-- function testS)( alert('Hello !')7 //--><!11> </script> <a href ="# onclick testS();return false; " >Click Me Again</a> 这种做法把脚本与HTML做了一定的分离,代码的整体结构比较良好 在代码的周围加上<!-1/-><! CDATA><!-和∥-><!|>是为了避免不支持脚本的浏览器 把脚本当作普通文本输出,这两个符号也可以分别简写成<!-和/->。与之作用类似的还有 hscrp>标签,< noscript>标签在浏览器不支持脚本时显示出其中的提示性文字 sent>标签通常都放在<head>标签内。 4、外部脚本文件中 外部脚本文件 testS.js <!--//--><
web应用基础 览器将忽略有src属性的< script>标签中的脚本代码 这种方法从本质上来讲与第三种方法没有差别,但是由于把脚本和HTML做了完全的分离 所以是商业领域最常用的方法。 2实验1验证登录用户名 实验目的: (1)熟悉 JavaScript中页面元素对象的访问。 (2)熟悉 JavaScript中正则表达式对象的使用。 (3)熟悉 JavaScript中窗体对象属性。 实验任务 在点击“登录”按钮之后,使用正则表达式对象检测用户名是否是 ABC. com邮箱的 Emal,即 Usernamecabc.coM,忽略大小写,若是则弹出一个对话框告知用户“登 录成功”,并将浏览器状态栏显示文本设置成“欢迎<用户名>来访”,这里<用户名>指 代成功登录的用户名。如果登录失败,则弹出一个对话框告知用户“用户名必须是符合 规范的E-mai!”。 实验交付物: 1.HTML页面: check Emailhtml 实验步骤: 1.熟悉页面中元素的访问方式 虽然 JavaScript中页面元素对象层次结构实现在各浏览器之间有着很大的差别,但是 如果页面元素有ID属性的话,就可以通过一些标准的方法来找到我们所需要访问的元 素。这里提供了一个标准辅助例程$( JavaScript中可以用美元符号作为函数名称), 来访问页面中的元素。 function s(id)I if(document all) return document all[id] else if(document. getElementById) return document. getElementById(id)i else return null 现在已知输入框的ID为 email,请使用该函数找到该输入框对应的页面元素,然后通 过该元素的 value属性得到输入的字符串。 2.了解正则表达式
Web ᑨ⫼⸔ 3
web应用基础 正则表达式是一种文本模式,包括普通字符(例如,a到z之间的字母)和特殊字符 (称为“元字符”)。模式描述在搜索文本时要匹配的一个或多个字符串 下面是正则表达式的一些示例: 匹配 /\s*S/ 匹配空行。 ∧d{7}/ 匹配含有连续7位数字的字符串 /ABC. * 匹配以ABC开头的字符串。 下表包含了元字符的简要列表以及它们在正则表达式上下文中的行为: 将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如, “n”匹配字符“n”。“n”匹配换行符。序列“\”匹配“\”, “\(”匹“(”。 匹配输入字符串开始的位置。如果设置了 RegExp对象的 Multiline 属性,还会与“Ⅷn”或“\r”之后的位置匹配 匹配输入字符串结尾的位置。如果设置了 RegExp对象的 Multiline 属性,S还会与“Ⅶn”或“\r”之前的位置匹配 零次或多次匹配前面的字符或子表达式。例如,z0*匹配“z”和 zoo”。*等效于{0,}。 次或多次匹配前面的字符或子表达式。例如,“z0”与“2o”和 zoo”匹配,但与“z”不匹配。+等效于{1,}。 零次或一次匹配前面的字符或子表达式。例如,“do(es)?”匹配 do”或“does”中的“do”。?等效于{0,1})。 n是非负整数。正好匹配n次。例如,“o{2}”与“Bob”中的“ 不匹配,但与“food”中的两个“o”匹配 n是非负整数。至少匹配n次。例如,“o{2,}”不匹配“Bob”中 的“o”,而匹配“ foooood”中的所有o。'’o{1,’等效于'o’。 o{0,}’等效于’o*’。 m和n是非负整数,其中n<=m至少匹配n次,至多匹配m次 例如,“o(,3”匹配“oo的头三个o'o,等效 于’o?。注意:您不能将空格插入逗号和数字之间。 当此字符紧随任何其他限定符(*、、?、(m、{n、{n)之后 时,匹配模式是“非贪心的”。“非贪心的”模式匹配搜索到的、尽 可能短的字符串,而默认的“贪心的”模式匹配搜索到的、尽可能长 的字符串。例如,在字符串“o0o”中,“o+?”只匹配单个“o”, 而“o+”匹配所有“o”。 匹配除“n”之外的任何单个字符。若要匹配包括“n”在内的任意 字符,请使用诸如“[\sS]”之类的模式。 与x或y匹配。例如,“zfod”与“z”或“food”匹配。“(z f)ood”与“zood”或“food”匹配 [ryzl 字符集。匹配包含的任一字符。例如,“[abc]”匹配“ plain”中的
Web ᑨ⫼⸔ 4
web应用基础 [ryzl 反向字符集。匹配未包含的任何字符。例如,“[abel”匹配 “ plain”中的“p a-Z 字符范围。匹配指定范围内的任何字符。例如,“[a-z]”匹配“a” 到“z”范围内的任何小写字母 [a-z 反向范围字符。匹配不在指定的范围内的任何字符。例如,“[az]” 匹配任何不在“a”到“z”范围内的任何字符 换行符匹配。等效于\x0a和\cJ 匹配任何空白字符,包括空格、制表符、换页符等。与[\f\ n\r\t\vI sStdDw 等效。 匹配任何非空白字符。等价于[\ f\nr\t\]。 制表符匹配。与\x09和\cI等效。 数字字符匹配。等效于[09 非数字字符匹配。等效于[09]。 匹配任何字类字符,包括下划线。与“[A-Za-z09”等效。 W 任何非字字符匹配。与“[A-Za-z09]”等效。 根据以上规则,匹配ABC.com邮箱的正则表达式就是以“eABC.com”为后缀的字符串, 并且在该后缀之前只能出现英文字母和数字。此外正则表达式的选项i还能解决忽略大 小写的难题。请写出满足要求的正则表达式。 3.使用正则表达式对象 JavaScript的正则表达式对象有一个test方法,它能比较作为参数传入的字符串是否 匹配正则表达式所代表的模式。请使用该方法写出判断用户名是否符合的条件语句 了解窗体对象的属性 JavaScript的 Windows对象的 alert方法能够弹出一个包含指定信息的对话框, default Status属性对应着浏览器状态栏显示的信息。使用它们完成所要求的用户提示功 能 5.把它们整合在一起 以下是该实验的代码框架,补足其中的空缺部分代码代码不使最终页面满足给定 的要求 程序清单1-1: checkEmailhtml 2. <head> 3.< title>验证登录用户名</tile> 4. <script language="javascript"type="text/javascript"> 5. function $(id)f 6. 码1 8. function check Emailoi
Web ᑨ⫼⸔ 5