复旦大学：《Web应用基础》实验练习_Lab04

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应用基础 click Me 这种做法通常只在教学演试中使用 HREF中的" Javascript"的协议头一定要加,其中可以写多句脚本,但不能写 return语句。 2、HTML标签的事件处理属性中 Click Me Too 这种做法比较简单,比较常用。 return false是为了禁止页面跳转。 通常" Javascript:"的协议头可以不加,简写为 onclick=" alert(Hll!) return false;" 3、页面的 SCRIPT标签中 script language="javascript"type=text/javascript"> Click Me Again 这种做法把脚本与HTML做了一定的分离,代码的整体结构比较良好 在代码的周围加上是为了避免不支持脚本的浏览器 把脚本当作普通文本输出,这两个符号也可以分别简写成。与之作用类似的还有 hscrp>标签,标签在浏览器不支持脚本时显示出其中的提示性文字 sent>标签通常都放在标签内。 4、外部脚本文件中 外部脚本文件 testS.js click Me Nowww! 外部脚本就是把脚本保存在一个单独的*js文件中,通过指定<scrp标签的sre属性,把 脚本引入。效果相当于在原先的< script标签中间插入外部文件中的脚本文本。注意某些浏 onclick表示在用户单击标签有效区域时触发的函数,若为mul则不产生任何动作

Web ᑨ⫼෎⸔ 2

web应用基础 览器将忽略有src属性的标签中的脚本代码 这种方法从本质上来讲与第三种方法没有差别,但是由于把脚本和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. 3.验证登录用户名 4. 5. function $(id)f 6. 码1 8. function check Emailoi

Web ᑨ⫼෎⸔ 5

web应用基础 9. var str=S(代码2 value; 10. var pattern=代码3 12 代码」 else 码 17.} 19. 21. 22.用户名 23. 26. 27. 思考: (1)如果使用基本的字符串处理函数,如何实现用户名字符串格式的判断? 实验提示本实验中用到的正则表达式的直接量的表示“/模式字符串选项”。 实验点评通过使用正则表达式,我们可以有效的实现字符串格式的判断。 3实验2验证注册信息 实验目的 (1)熟悉 JavaScript中页面元素对象的访问。 (2)熟悉 JavaScript中字符串处理函数的使用。 (3)熟悉 JavaScript中窗体对象属性。 实验任务: 在点击“注册”按钮之后,使用字符串处理函数检查ID卡号码是否与出生年月信息对

Web ᑨ⫼෎⸔ 6

web应用基础 应。ID卡号码必须满足以下三个条件,长度为8个字符,第三个字符到第六个字符是 出生年份YYYY,最后两个字符是出生月份MM,月份不足两位数时补零位。若ID卡 号码满足条件则弹出一个对话框告知用户“注册成功”,如果验证失败,则弹出一个对 话框告知用户“ID号码长度不正确,或者后六位与出生年月不对应!”。 实验交付物 2.HTML页面: checkIDNum. html 实验步骤: 1.熟悉页面中元素的访问方式 虽然 JavaScript中页面元素对象层次结构实现在各浏览器之间有着很大的差别,但是 如果页面元素有ID属性的话,就可以通过一些标准的方法来找到我们所需要访问的元 素。这里提供了一个标准辅助例程$( JavaScript中可以用美元符号作为函数名称), 来访问页面中的元素 function s(id)( if(document all) return document all[id]i else if(document. getElementById return document. getElementById (id)i else return null 现在已知ID卡号码输入框的ID为iNm,出生年份下拉列表框的ID为year,出生月 份下拉列表框的ID为 month,请使用该函数找到该输入框对应的页面元素,然后通过 元素的 value属性得到相应输入值。 2.了解字符串属性和处理函数 Javascript中的 String对象提供了一系列方法来进行字符串操作,其中 length属性 记录了字符串的长度, substring函数则返回指定区间的子字符串, Javascript中的字 符串可以用=操作符直接比较其中的内容。请使用以上信息完成ID卡号码有效性的 判断 3.了解窗体对象的属性 Javascript的 Windows对象的 alert方法能够弹出一个包含指定信息的对话框,使用它完 成所要求的用户提示功能。 4.把它们整合在一起 以下是该实验的代码框架,补足其中的空缺部分代码斗代码1,使最终页面满足给定 的要求。 程序清单1-2: checkIDNum. html 1

Web ᑨ⫼෎⸔ 7

web应用基础 3. 4. 5. function S(id)& 6 代码1 8. function checkIDNumOf var str:=S代码)vaue 10 var vear=S代码3 value ∥/ check length 代码5=8){ 14. f代码 改&代码=monh 16 码8 eturn 21.} 24. 25. 26.出生年 27. 1988 28. 1989 9. 1990 31. 32. 01 33. 02 34. 03 35. 0411 39.ID卡号码 44. 思考:

Web ᑨ⫼෎⸔ 8

web应用基础 (1)如果使用正则表达式对象,能否完成相同功能的字符串格式判断? 实验提示本实验中用到的表单组件,表单组件对象的值都可以通过lue属性得到。 实验点评通过使用字符串处理函数,我们可以有效的实现字符串格式的判断。 4实验3网页中 Javascript的使用及计算访问次数 实验目的 (1)熟悉 Javascript在网页中的调用方法。 (2)熟悉 Javascript中页面元素对象的使用 (3)熟悉 Javascript对 cookies的操作。 (4)熟悉 Javascript中数据类型的显示转换 实验任务 打开页面时显示用户上次访问本页面的时间,格式为“欢迎第x次光临本站!上次访问时间 为x年xx月xx日xx时xx秒”;若为第一次访问本页面,显示欢迎信息的格式为“欢迎 您首次光临本站!”。页面的背景色设置为用户上次访问本页面保存的颜色;若为首次访问 设置为默认颜色。更新本页面的访问次数和最近访问时间 通过下拉框设置页面的背景色,并保存用户设置的页面背景色为下次访问使用,选定后页面 背景随即变为选定的颜色。点击链接“删除访问历史”,实现删除访问次数、最近访问时间 用户保存的背景色,即在删除后的下次访问本页面时为首次访问。点击“关闭窗口”实现窗 口关闭功能。 实验交付文件 1.Hml页面Lab53html 2. Javascript文件Lab53js 实验步骤 1.熟悉 Javascript对 Cookie的操作 由于网页是无状态连接,为了实现访问计数和用户配置保存,需要通过 cookie实现。 Javascript操作 cookies比较复杂,面对的是 cookie的字符串,编写这个字符串写入客 户端,然后解析这个字符串 var Days=360;此 cookie将被保存360天 首先建立日期对象 var exp =new DateO; //new Date("December 31, 9998 ) exp setTime(exp getTime(+ Days"24 6060*1000)

Web ᑨ⫼෎⸔ 4 ᅲ偠 3 㔥义Ё Javascript ⱘՓ⫼ঞ䅵ㅫ䆓䯂⃵᭄ ᅲ偠Ⳃⱘ ˄1˅ ❳ᙝ Javascript ೼㔥义Ёⱘ䇗⫼ᮍ⊩DŽ ˄2˅ ❳ᙝ Javascript Ё义䴶ܗ㋴ᇍ䈵ⱘՓ⫼DŽ ˄3˅ ❳ᙝ Javascript ᇍ cookies ⱘ᪡԰DŽ ˄4˅ ❳ᙝ Javascript Ё᭄᥂㉏ൟⱘᰒ⼎䕀ᤶDŽ ࡵᅲ偠ӏ ᠧᓔ义䴶ᯊᰒ⼎⫼᠋Ϟ⃵䆓䯂ᴀ义䴶ⱘᯊ䯈ˈḐᓣЎĀ⃶䖢㄀ x ⃵ܝЈᴀキʽϞ⃵䆓䯂ᯊ䯈 Ў xxxx ᑈ xx ᳜ xx ᮹ xx ᯊ xx ⾦ā˗㢹Ў㄀ϔ⃵䆓䯂ᴀ义䴶ˈᰒ⼎⃶䖢ֵᙃⱘḐᓣЎĀ⃶䖢 ᙼ佪⃵ܝЈᴀキʽāDŽ义䴶ⱘ㚠᱃㡆䆒㕂Ў⫼᠋Ϟ⃵䆓䯂ᴀ义䴶ֱᄬⱘ买㡆˗㢹Ў佪⃵䆓䯂ˈ 䆒㕂Ў咬䅸买㡆DŽ᳈ᮄᴀ义䴶ⱘ䆓䯂⃵᭄੠᳔䖥䆓䯂ᯊ䯈DŽ 䗮䖛ϟᢝḚ䆒㕂义䴶ⱘ㚠᱃㡆ˈᑊֱᄬ⫼᠋䆒㕂ⱘ义䴶㚠᱃㡆Ўϟ⃵䆓䯂Փ⫼ˈ䗝ᅮৢ义䴶 㚠᱃䱣ेবЎ䗝ᅮⱘ买㡆DŽ⚍ߏ䫒᥹Āߴ䰸䆓䯂ग़৆āˈᅲ⦄ߴ䰸䆓䯂⃵᭄ǃ᳔䖥䆓䯂ᯊ䯈ǃ ⫼᠋ֱᄬⱘ㚠᱃㡆ˈे೼ߴ䰸ৢⱘϟ⃵䆓䯂ᴀ义䴶ᯊЎ佪⃵䆓䯂DŽ⚍ߏĀ݇䯁にষāᅲ⦄に ষ݇䯁ࡳ㛑DŽ ᅲ偠ѸҬ᭛ӊ 1. Html 义䴶 Lab5_3.html 2. Javascript ᭛ӊ Lab5_3.js ᅲ偠ℹ偸 1. ❳ᙝ Javascript ᇍ Cookie ⱘ᪡԰ ⬅Ѣ㔥义ᰃ᮴⢊ᗕ䖲᥹ˈЎњᅲ⦄䆓䯂䅵᭄੠⫼᠋䜡㕂ֱᄬˈ䳔㽕䗮䖛 cookie ᅲ⦄DŽ Javascript ᪡԰ cookies ↨䕗໡ᴖˈ䴶ᇍⱘᰃ cookie ⱘᄫヺІˈ㓪ݭ䖭ϾᄫヺІݭܹᅶ ᠋ッˈ✊ৢ㾷ᵤ䖭ϾᄫヺІDŽ var Days = 360; //ℸ cookie ᇚ㹿ֱᄬ 360 ໽ 佪ܜᓎゟ᮹ᳳᇍ䈵˗ var exp = new Date(); //new Date("December 31, 9998"); exp.setTime(exp.getTime() + Days*24*60*60*1000); 9

web应用基础 将 cookie内容写入客户端。将日期格式转换成GMT格式:GMT即格林威治标准时 间,现在也称UTC即全球标准时间。 document. cookie= name +=" escape(value)+"expires="+ exp. toGMTStringO 其中 expires是系统使用的,表示 cookie的失效日期(也可以省略), expires不可读。 escape是对 cookie值进行编码,这是为了处理中文、空格等而设立的 取 cookie是比较简单的,需要使用正则表达式获取对应 cookie的值 本实验中涉及到3个 cookie:访问次数、最近访问时间、用户保存背景色,在一个j文 件中创建三个函数,分别处理设置、获取、删除 cookie。代码框架如下 代码清单Lab53 cooKies 函数 nction Setcookie(name, value)/两个参数,一个是 cookie的名字,一个是值 代码1 nction get Cookie(name/取 cookies函数 代码2 unction delCookie(name)/删除 cookie 代码3 2.熟悉页面中 Javascript的调用 本实验中涉及到调用外部操作 cookie的js文件、内部定义修改背景色的事件触发函数 访问历史函数以及清除访问历史函数,同时还有标签事件处理属性中关闭窗口的 Javascript代码片断。 3.控制页面元素动作 显示访问历史记录可以在加载页面时通过 onload作相应的操作实现此功能,需要判断 是否为首次访问,同时要获取当前时间用以更新最近访问时间和访问次数;判断是否存 在保存的用户自定义背景色,如果没有背景色为默认(例如白色),否则为用户保存背 景色。下拉框设置当前页面背景色,通过 enchange设置背景色,并保存当前设置的背 景色。“清除访问历史”通过 onclick(调用自定义函数删除 cookie实现清除历史。“关闭 窗口”通过 onclick调用j代码片断实现功能。关于访问历史的显示,可以在页面中设 置一个区域,通过js控制该DⅠV的显示,获取该DIⅤ可通过ID或 4.整合代码

Web ᑨ⫼෎⸔ ᇚ cookie ݙᆍݭܹᅶ᠋ッDŽᇚ᮹ᳳḐᓣ䕀ᤶ៤ GMT Ḑᓣ˗GMT ेḐᵫ࿕⊏ᷛޚᯊ 䯈ˈ⦄೼г⿄ UTC ेܼ⧗ᷛޚᯊ䯈DŽ document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); ݊Ё expires ᰃ㋏㒳Փ⫼ⱘˈ㸼⼎ cookie ⱘ༅ᬜ᮹ᳳ˄гৃҹⳕ⬹˅ˈexpires ϡৃ䇏DŽ escape ᰃᇍ cookie ؐ䖯㸠㓪ⷕˈ䖭ᰃЎњ໘⧚Ё᭛ǃぎḐㄝ㗠䆒ゟⱘDŽ প cookie ᰃ↨䕗ㅔऩⱘˈ䳔㽕Փ⫼ℷ߭㸼䖒ᓣ㦋পᇍᑨ cookie ⱘؐDŽ ᴀᅲ偠Ё⍝ঞࠄ 3 Ͼ cookie˖䆓䯂⃵᭄ǃ᳔䖥䆓䯂ᯊ䯈ǃ⫼᠋ֱᄬ㚠᱃㡆ˈ೼ϔϾ js ᭛ ӊЁ߯ᓎϝϾߑ᭄ˈ߿ߚ໘⧚䆒㕂ǃ㦋পǃߴ䰸 cookieDŽҷⷕḚᶊབϟ ҷⷕ⏙ऩ Lab5_3.js 2. ❳ᙝ义䴶Ё Javascript ⱘ䇗⫼ ᴀᅲ偠Ё⍝ঞࠄ䇗⫼໪䚼᪡԰ cookie ⱘ js ᭛ӊǃݙ䚼ᅮНׂᬍ㚠᱃㡆ⱘџӊ㾺থߑ᭄ǃ 䆓䯂ग़৆ߑ᭄ҹঞ⏙䰸䆓䯂ग़৆ߑ᭄ˈৠᯊ䖬᳝ᷛㅒџӊ໘⧚ሲᗻЁ݇䯁にষⱘ javascript ҷⷕ⠛ᮁDŽ ҷⷕ 3 ҷⷕ 2 ҷⷕ 1 ԰ࡼ㋴ܗ义䴶ࠊ᥻ .3 ᰒ⼎䆓䯂ग़৆䆄ᔩৃҹ೼ࡴ䕑义䴶ᯊ䗮䖛 onload()԰Ⳍᑨⱘ᪡԰ᅲ⦄ℸࡳ㛑ˈ䳔㽕߸ᮁ ᰃ৺Ў佪⃵䆓䯂ˈৠᯊ㽕㦋পᔧࠡᯊ䯈⫼ҹ᳈ᮄ᳔䖥䆓䯂ᯊ䯈੠䆓䯂⃵᭄˗߸ᮁᰃ৺ᄬ ೼ֱᄬⱘ⫼᠋㞾ᅮН㚠᱃㡆ˈབᵰ≵᳝㚠᱃㡆Ў咬䅸˄՟བⱑ㡆˅ˈ৺߭Ў⫼᠋ֱᄬ㚠 ᱃㡆DŽϟᢝḚ䆒㕂ᔧࠡ义䴶㚠᱃㡆ˈ䗮䖛 onchange()䆒㕂㚠᱃㡆ˈᑊֱᄬᔧࠡ䆒㕂ⱘ㚠 ᱃㡆DŽĀ⏙䰸䆓䯂ग़৆ā䗮䖛 onclick()䇗⫼㞾ᅮНߑ᭄ߴ䰸 cookie ᅲ⦄⏙䰸ग़৆DŽĀ݇䯁 にষā䗮䖛 onclick()䇗⫼ js ҷⷕ⠛ᮁᅲ⦄ࡳ㛑DŽ݇Ѣ䆓䯂ग़৆ⱘᰒ⼎ˈৃҹ೼义䴶Ё䆒 㕂ϔϾऎඳˈ䗮䖛 js ᥻ࠊ䆹 DIV ⱘᰒ⼎ˈ㦋প䆹 DIV ৃ䗮䖛 ID ៪ nameDŽ 4. ᭈড়ҷⷕ 10