《基于HTML5的网页设计及应用（第2版）实验指导书.docx》由会员分享，可在线阅读，更多相关《基于HTML5的网页设计及应用（第2版）实验指导书.docx（38页珍藏版）》请在课桌文档上搜索。
1、使用说明：本文档仅供读者教学或自学使用，请勿随意转载或上传网络,侵权必究。JavaScript部分实验指导书实验规则2基本实验方法3实脸环境3实验一JavaScriptS4实验二JaVaSCriPt中的循环程控制语句、异常处理语句和函数18实验三JaVaSCriPt中内置对象应用28实验四JaVaSCriPt的BOM对象操作53实验五JaVaSCriPt的DOM对象操作61实验六JavaScript事件处理69实验规则为0I利完成实验教学任务，确保人身设得安全，培养严i革、踏实、实事求是的科学作风和爱护国家财产的优良品质，特制定以下实验规则：1、实验纪律(I)在实险室不得做和实验无关的事情.(
2、2)遵守纪律，不迟到，不旷课。(3)不能拆卸硬件，更不能京走实验设备或仪器。(4)保持实验室安静、整洁，爱护公物。2、实验过程(1)预习实验内容(2)上机操作。每执行一句记录执行情况,主要是错误信息和错误原因.(3)检查操作结果是否正确。(4)根据实验过程的记录书写实验作业。基本实验方法本实5佥要求熟悉SublimeText3或DreaInWeaVer软件的使用和JaVaSCriPt编程语言的相关知识。实验环境SublimeText3或Dreanweaver实验一JaVaSCript基础一、实验学时2学时二、实验目的（）掌握JaVaSCri3嵌入网页的基本方式：（二）掌握JavaScript程
3、序代码的编写习惯和常用输出谙句:（三）掌握J;IVaSCriPt的数据类型、变J鼠（四）理解数据类型之间的转换。（五）掌握JaVaSerip中的运算符、表达式：（六）掌握JRVaSCriPt中的条件拽制语旬Qf语句、switch一句）三、实践要求（一）在E盘卜建立一个文件夹,命名为实脸一,将本次实验内容的所有网页保存在该文件夹下.（二）完成学习通中发布的相应的实脸作业1.四、实跄内容（一）documcnt.wrilc（“这是第一个JaVaSeriPl例子!”）;语句的作用是在网页中显示“这是第一个JaVaSCriPl例子咒按照下面的要求把它嵌入到下面网页代码中并运行,理解并掌握JS代码运行Ii
4、序.（1）使得执行网页时，首先显示“这是第一个JaVaScriPl例子!，再显示标题-内容，（2）使得执行网页时，首先显示标的一内容,再显示“这是第一个JavaScripl例子（3）加何使得单击标起内容时,在页面中显示“这是第一个JUYaSCriM例子!”.（4）思考，JS代码的运行顺序是什么？heaVmCtacharset=utf8-这是第一个JavaScript例子VAitle今后大家将一起学习JavaSeriPt知识！（二）在页面中定义下面函数，funct沁na（）IdocumentWriIeC这是第个JavaScript例子!）；）通过调用函数m）,完成下面操作.（1（史得执行网页时，
5、首先显示“这是第一个JaVaSCriPt例子再显示标国-内容.（2）使得执行网页时，首先显示标题一内容,再显示这是第一个JaVaSCriPI例子!”(3)如何使得单击标题一内容时，在页面中显示“这是第个JavaScript例子(三)把上面的函数a,定义在一个外部的UstlJs文件中，在网页中用下面格式导入该文件：注意跖径的问题，完成下面操作：(1)使得执行四页时首先显示“这是第一个JaVaSCrim例子!二再显示标题内容(2)使用执行网页时，首先显示标SS-内容，再显示“这是第一个JasSCriPt例子!二(3)如何使得球击标题J内容时，在页面中显示“这是第一个JavaScripi例子(4)输
6、入并运行如卜代码，思考超锥接与OndiCk事件的不同之处？alcrt(,TisisaJSprogran);点击我河南科技大学校园网uiIyPe=tMmon”value=ENTER.OndiCk=Heft(将要进入主页面71(四)运行下面的代码，通过理解运行的结果掌握alert。、Connrm()、prompt。、ConSUIe.log()和Ci(KUnWnt.write(C的使用VkloclypchtmlVliHO常用输出语句的使用scriptIyPe二,(extjavascrip(,akrlCaaaaaa!):VarSS=8nfirm(你是张三吗?):if(ss=-tnc)alcn(“我是张
7、T;elsealei(我不是张三FxVarSlr=PmmPlC谛输入你的姓名:“JXXX)alcrt(str);consolc.log(str);documen,wri(e(str);document.wrie(我不是张!*):(ku11wnl.writc(我不是张V!):(五)掌握IyPeof运算符的使用.在网页中定义5个a.b.c.d.e变量,为前四个变量分别赋123、Zbcdef、Irue、null.用decUmmtNTiIC语句或alert语句分别显示5个变Jft的值与类观察结果.注意：变量的类型用IyPeM(变玳1.(六)运行下面代码，掌握数值型常量(特别是两个特殊值Infinity
8、与NaN)的情况、字符串常量的使用VmCklcharset=utf8,数值型常盘、字符小常量所配scripttype三(extjavascripf数值型常附vara=()xad;Varb=3.12clIvarC=O28：vard=6*0:varc=610:varf=(4)H6Q;console.log(a.b,c.d.e.f);consle.log(lypeof(d).lypecf(e).typeoftn.(ypeof(0.D),isNaN(0-(0);字符串常量，注意转义字符“5”的使用documcm.wric(”在字符小中，既可以加入小引号Y,也可以加入双引号V,欢迎学习SjavaScri
9、piF);d(u11ent.wi(e(欢迎学习XnjavaScripl!Oh1*):USCriP注意:判断某个值是否是NaN.不能使用=或A=运算符，而她用isNaN()方法”(七)运行下面代码，观察结果.理解两个特殊数据类型，UndennCd和null的使用.思考在哪些情况下可以获取到Undenned或null值？.undcfincd类型和null类型vtillcscripvarb;dcuncnl.wriic(typeofb:alcrt（三）;vara=null;ale11(iyeofa);document,wrie（八）;document,writc(typeofwindow.status
10、l)vars=locunem.ge(Eleme11ById(d);console.Iog(s.(ypcfs):（八）运行下面代码，观察结果.理解JaVaSCriPt中全局变:与局部变量的使用.变量的使用scrip(type=tcxtjavascripvara：a在函数外声明，是全局变盘，作用于整个脚本代码func(ionsend()(a=欢迎进入：/a在函数内直接赋值，是全局变量Varb=JavaScript;b在函数内声明.只作用于该函数体C=JS程序设计“；”C在函数内直接M值，是全局变质alert(a+b);H显示欢迎进入JaVaSCriplalert(a+c);U显示欢迎进入JS程序设
11、计”Iscnd();调用函数4nd,从而执行Send()中的代码akrt(aK);H显示欢迎进入JS程序设计”ae11(a+b);出锚，因为无法访问局部变量bscripcad(九)运行下面的代码掌握Javascript中数据类型的障式转换vara=123+rue:Varb=I23+”123”：varc=l232a-;vard=123+NaN;varc=123+undcfinxi:varf=123+null;consolc.log(a,b,c.d,c,D;(十)掌握JSnaseriPt中数据类型强制转换方法的使用.运行下面谙句,观察结果.理解NUmber()ParSCIn1()、ParSCHOa
12、o方法的作用vara=xrsel11(,l2.23as)alert(a:varaa=Numbcr(,123.4aa);alcrt(aa):varaaa=Number(H23.4m);alert(aaa)varh=parsclnt(*aal2.23as,*)alcrt(b):varc=arselH(ine):alert(c):vard=pnicHoat(Ml2.23as*)：alcrt(d):varC=a*seFloa(*,aal2.23asw)alert(e;varf=parscEloat(true)：alcrt(f):vars(r=010”；alert(Panidnustr);t!0alcr
13、t(pa11iclnt(str.8);/8注意NaN的含义，实验过程中改变不同的数字，观察结果.运行下面语句，观察结果，理解IoSuing(泻Suing()的作用。varss=lness.toString():结果为true(IO).(oString(2;结果为IOlOString(nuU):结果为MnUlr(十一)运行下面代码，掌握JaVHSeriPt中“+”运算符的使用.vara-ruc;alert(l300,)alcrt(lrue+I(K)a!crt(truc+l()O,)MertarUC+take)alert(undefined+false)alert(,valueisF13+14)：
14、a!crt(,va!ucish+13+14);U返回100300U返回10!U返回truclU返回I返回NaN返回valueis27document.wrhcC100+30(片JOCHF(XT);(十二)制作一个如图1所示简单的个人所得税计算叁，并能进行相应的计算.个人所得税计费器演谕入你的月收入：词话N三1月呦、31泊入所内晚起征颔：ZJtc所遇聪元t图】个人所得税法口用界面(I)在进行界面布局时，注意复习上学期学过的表格标记、我单标记，可以参考文件example?-1.(nl,(2)运行时，输入数据，单击计算，显示结果，如下图2所示，可以参考文件example2-2.hlml)个人1所得税
15、计算器iW输入你的月收入：36JJc濡徜入所沟税起征歌1000(7C所得凭|200沅J1.三*J图2个人所称收计灯制运行界向所得税计算要求如下，所理税计算的方式：(月收入起征额尸所得税率超过起征额：100O以内按5%收税超过起征额：1000-3000按10%收税超过起征额：3000以上按2()%收税(3)在该实验中也点掌握表单元素数据的扶取方式.比如有如下表单：获取文本框的输入值的语句为：varincme=parscF1oat(docu11enJ.getEle11entByIdCincotne).value);或者varincomc=parscFloat(dcumcnt.myForm.inco
16、nw.value);说明；上面获取文本框的方式推卷用第一种，通用性更覆，第：种方式只适合获取表单内的元素。JS核心代眄部分一单击“计算按钮完成个人所得税的计算：functioncal()(varincme=parseFlt(docunnt.11yF11.income.value):varbasc=parscHoat(dbasc)月收入大于起征额(mge=income-base;if(range=1000)判断征税的范困documcnt.myForm.tax.valuc=rangc4,0.05:elseif(rangce11,inyFornnax.value=rangetO.1;dsedocun
17、cnl.myFo11n.lax.vale=rangc0.2:ClMHaIen（收入比起征额低,不收税！”）;document,inyfonn.tex.value=O;I）（4）思考，在该实聆中通过document.我服名称交单元家名称点取衣单元素时,如果出现名称相同将如何获取？03分类讨论区（十三）制作一个树形菜单，展开前和部分展开后的效果如下图3所示.BBS系统共建水木站务公告栏39分类讨怆区妆点水木申请版主刈会信息a7休闲娱乐s。电脑技术社Wl言息ffl尸休闲娱乐国。电脑拉术BBS安装管理CAD技术数字图像设计电融音乐制作软件加密与解密计苴机体系结构图3树形蕖单展开1和部分展开后的效果(I
18、)新健页面而加网页元素部分,可以参考文件exanple3-1.htm1.VliXahref=,javascripcshow(,d)f分类讨论Kulid=,dlwslyle=display:nuBBS系统vli共建水木站务公告栏妆点水木申请版主E11,lBBS系统共建水木站务公告栏妆点水木申请版主viqhrcf=javascriprshowCd3r)ximgrc=image/z3.jpg”/休闲娱乐p.giBBS系统vliimgsrc=imagcz-t共建水木站务公告栏妆点水木申请版主电陋技术BBS系统vli共建水木站务公告栏妆点水木imgsrc=*imagc申请版主CSS样式部分的设设.ul.
19、li(padding:();margin:。；IiM-StyIernone;!div.menu(margin-lcft:50px:margin-top:50px;|aJinkta:visitedIfont-size:14px:tcxt-dccoration:none:h3.style.color=Mred,*;elseif(ra1.checked)h3.slylc.color=,grccn:elseh3.stylc.color=hluc,;注意：要在每个input元索中添加属性OndiCk=sctCclor():进行调用。(十五)练习书上例95,创建一个HTM1.网页，使用if语句根据不同的时
20、间，在网页上显示不同的信息.vard=newDatd：vartime=d.gctHours()if(time10)docunem.wite(,bX)xxinoming;)elseif(time1()&time16)documcm.wrim(Gooddayw);)else(docu11cnt.itc(,HclloWor!d!*);I(十六)练习书上例96,创建一个HTM1.网页，使用SWitCh语句，在网页上显示星期信息.vard=newDHte0：varweek=d.gc(Day();switch(week)case0:document.writc(星期H)：break;case 1:doci
21、imen【.wrhe星期一)：break;case 2:document.wrhc(“星期二);break;case3：docuneN.wrhe星期三”):break;case 4:documcnt.writc”星期IIIr：break:case 5:document.write(星期五”);break;case 6:document.wrhc(星期六);break;上面两个实验中注意11期对欧DaIe的用法。(十七)创建一个HTM1.网页如下图5,实现根据*入的出生年份计算生肖.，.U8图5将人的出生年份计算生也的牧果(D新建页面添加如下贞向元素,参考文件examplc7-l.html.Vk
22、gCnd根据出生年份计算生肖UlCgCnd请辘入您的出生年份:nd=blnShow,valuc=WjlNm fieldse(2)给“显示生日”按钮添加属性OnCIiCkTshowShcngxiao();,定义SbOWSbCngXiao参考(rexample7-2.h(mh!tutinshowShengxiao()VariRemainder.sShenxiao;variYear=dixrument.fonn1.lx(Year.value;if(iYcar=)(加ItC请输入出生年份！docume11.fb11nI.(XiYearfocusO;relum:Jclsc(iRemainder
23、三iYear%12:)switch(iRcmaindcr)caseO:sShengxiao=眠：break:case1:b、表单元素的idM性值和name谒性值一般设置为一样。(限务器慑通过name获取数据，客户掂通过id或name获取)c、获取表总元素的方法document.表单名称.元素幺称,ld(dd)d、文本框获取焦点的方法对象.focusOe、document.writc与在对望中写内容的效!K不同.对软InnerHTM1.=所写内容”JB考I在本实3中将对跳的属性inncrIITM1.改为inncrTcxt会有什么不同，这两个属性在具体使用时应该注意什么？实验二JaVaSCriPt
24、中的循环程控制语句、异常处理语句和函数一、实设学时2学时二、实验目的（）掌握JaVaSCriPl中的循环控制语句（WhiIe语句、dowhile语句、for语句、for-in语句）。（二）了解JaVaSCriPt中的异常处理语句。（三）堪握JavaScript中参数数目可变的函数用法（四）掌握JavaScript中国片函数的用法三、实要求（一）在E盘下建立一个文件夹,命名为实5金二.将本次实脸内容的所有网页保存在该文件夹下.（二）完成学习通中发布的相应的实验作业2.四、实验内容（一）运行下面代码,理解并掌握JaVHSCriPt中、”运算法在进行字符串拼接中的使用.while语句与dowhile
25、语句scripvari=1;/whilc（i7）1Hdocument.write（MJavascripc程序设计）;i+;ffdodocument.wrheClf+l+JavascripttW5设计”）;i+；whilc（i7）;scrip（二）在页面上输出九九乘法表，理解循环控制语句与网页的结合使用，如下图I标.(I)JS核心代码部分一总击“产生表格”按钮实现表格的生成：scripttype=MtexbjavascripfunctionCreatcTabIeOvarrl=documcnt.gctElcmcn(ById(*row).valuc;从页面块取行数varcl=docunen,geEl
26、e11)entById(mco).value;从页面荻取列数varn=1;单元格中的文字varstr=:for(i=0;irlji)sir=str,for(j=OJckj)sir=sir+M-+(n+)+MM注总字符中的拼接str=Sit什Ivar11=document.getElemenById(,d,);d1.innerlITM1.=slr+-,:Jcrip注意：本例中要拿字符串拼接的方法.(2)将上面的例子改为如下页面效果图5,从下拉列衣机中选择行数和列数，单击”生成衣格按钮可以在页面中动态生成一个表格.参考文件cxaniplc3-2.html.-动态创格-行数：4样5：6三ts,8第1
27、行SH列第1行第2列第1行第3列第1行第4列Iftl行第S列行第网第2行第1列羯2行第2列$2行第3列M2行第4列险2行第5列162行第6列第汨知列绣玲第2列第3行第3列WB行第4刊WB行第5列第3行第6列第4行第1列第4行第2列第4行第3列第4行第4列第峪第S列第4行第6列图5唯击“生成表格一石的效JK图VsCriPlIype=YexUjavascripQ!functionCreatCTablC()(variRowNum=document.orml.ls(RwNum.value;从贯面获取行数variColNun=document.forml.lstColNum.value;/从页面获取列数
28、varsMsg=;sMsg=”:fbr(vari=1;i=iRowNum;i+)(sMsg+=;for(varj=1;j第“+i+行第+j+”列vtd;注意字符串的拼接1sMsg+=w;)sMsg+=:rfiPTK-CSftH:/1JavaSVSdeCtd=Provincconchangc=*showCily();stylc=width:l(X)pxop-请选择省份-slyle=widlh:100px*op-iff选择城市JavaScript核心代码部分tvarCity1.ist=newArray();Cily1.iStr北京市=,朝阳区；东城区？西城区海淀区：左武区；丰台区怀柔；延庆房山Ci
29、Iy1.iW上海初=C宝山区：长宁区,年货区虹口区Y黄浦因洎浦区：南汇区徐汇区1卢湾区*City1.M,广州省，=广州市；惠州市；汕头市珠海市；佛山市？中山市？东莞市上CiIy1.iW深圳市=福田区:罗湖区丁款田区丁宝安区J龙询区丁南山区丁深圳周边1；Cily1.iSU重庆市=1俞中区丁南岸区江北区丁沙坪坝区九龙坡区丁渝北区T大渡口区北陪区上Cily1.iStr天津市=*和平区*1西区丁天开区,轲北区丁河东区丁红桥区7塘古区丁开发区+Cily1.iW江苏省)=南京市：苏州市Y无锡Il),:Chy1.iW浙江省)=r杭州帜宁波市,温州巾City1.iSlr四川省=成都市*缁阳市3CiIy1.i海
30、南省=湖口市*三亚市CiIy1.istr福建11=(福州市I厦门市泉州市,漳州市)：City1.iMl,山东省=济南市.倩岛市：烟台市上正则表达式说明(0-9*d11tNdSJ$Adm,n)$(01-90-9)(l-90-9*)+(.0-9(l,2)7SA(-|+)Ad+(.d+)?!Ad+$或l-9d*0S数字n位的数字至少n位的数字m-n位的数字零和琴零开头的数字非零开头的最多带两位小数的数字正数、负数、和小数誉负整数Tl-9d*3或(-d+)KO+)S隼正整数(u4e00-u9fa5K0,5汉字A-Za-zO-9+或A-Za-z0-94,40AA-Za-z+$英文和数字Itl26个英文字
31、母组成的字符串AA-Za-zQ-9+$w+或人w(3,20$(u4E00-u9FA5A-Za-z0-9J+5Aw+(-+.w+)*w+(-.w+)*.w+(-.Jw+)*$(a-zA-z+s*或http:/(w-+.)+w-+(/w-./?%&=)?$d15d18由数字和26个英文字母组成的字符事由数字、26个英文字母或个下文字组成的字符串中文、英文、数字包括下划线Email地址UR1.地址身份证号（15位、18位黑字）(Q-9)7,18)(xX)7S或W8z180-9x8,18)(0-9X8,18?$A(a-zA-Z(a-zA-Z0-9J4f15)$a-zA-Zw5,17l以数字、字母X结尾
32、的短身份证号码帐号是否合法（字母开头.允许5-16字节,允许字母数字F划线）密码（以字母开头,长度在618之间，只能包含字母、数字和下划线）（1）用正则表达式实现注册页面的客户疆证，初始页面如下图14所示.新用户注册通行证用户名：163XOEas三:asIS14初始页面效果页面结构代码如下:border:$oIidIpx#a4c8eO；width:150px;height:15px:1.UserWidth(width:!l()px;.conie11div(oaclefufont-size:12px;color:MKX);)dlclcar:b(xh:)dt.ddfloacleft:Idtwironp(border:SOIidIpxIVcdOO:hackgr新用户注册通行证用户名：l2jhhhJJ-163.xn遇行谈UV或人正.I登5缰码：砌fflIB通行证用户名文本框获失去偏口时的效果3)(3)当密码文本框获取到焦壁1.提Wr入值息如图19标.新用户注册通行证用户名：163.xn登录巴日：I三6-16i三图19密码支本也获取到焦点时的效果(4)当密码文本据失去焦点时，要对其，入的内容进行验证，如果输入为空，提示信息如图2。所示I如果不空但是输入错误，提示信息如图21所示I如果愉入正确，提示信息如图22所示；新用户注册通行证用户名：登录冬码：I塞碎=丽人8：西三图2
