基于HTML5的网页设计及应用（第2版）实验指导书.docx
使用说明：本文档仅供读者教学或自学使用，请勿随意转载或上传网络,侵权必究。JavaScript部分实验指导书实验规则2基本实验方法3实脸环境3实验一JavaScriptS4实验二JaVaSCriPt中的循环程控制语句、异常处理语句和函数18实验三JaVaSCriPt中内置对象应用28实验四JaVaSCriPt的BOM对象操作53实验五JaVaSCriPt的DOM对象操作61实验六JavaScript事件处理69实验规则为0®I利完成实验教学任务，确保人身设得安全，培养严i革、踏实、实事求是的科学作风和爱护国家财产的优良品质，特制定以下实验规则：1、实验纪律(I)在实险室不得做和实验无关的事情.(2)遵守纪律，不迟到，不旷课。(3)不能拆卸硬件，更不能京走实验设备或仪器。(4)保持实验室安静、整洁，爱护公物。2、实验过程(1)预习实验内容(2)上机操作。每执行一句记录执行情况,主要是错误信息和错误原因.(3)检查操作结果是否正确。(4)根据实验过程的记录书写实验作业。基本实验方法本实5佥要求熟悉SublimeText3或DreaInWeaVer软件的使用和JaVaSCriPt编程语言的相关知识。实验环境SublimeText3或Dreanweaver实验一JaVaSCript基础一、实验学时2学时二、实验目的（）掌握JaVaSCri3嵌入网页的基本方式：（二）掌握JavaScript程序代码的编写习惯和常用输出谙句:（三）掌握J;IVaSCriPt的数据类型、变J鼠（四）理解数据类型之间的转换。（五）掌握JaVaSerip<中的运算符、表达式：（六）掌握JRVaSCriPt中的条件拽制语旬Qf语句、switch一句）三、实践要求（一）在E盘卜建立一个文件夹,命名为实脸一,将本次实验内容的所有网页保存在该文件夹下.（二）完成学习通中发布的相应的实脸作业1.四、实跄内容（一）documcnt.wrilc（“这是第一个JaVaSeriPl例子!”）;语句的作用是在网页中显示“这是第一个JaVaSCriPl例子咒按照下面的要求把它嵌入到下面网页代码中并运行,理解并掌握JS代码运行Ii序.（1）使得执行网页时，首先显示“这是第一个JaVaScriPl例子!，再显示标题-内容，（2）使得执行网页时，首先显示标的一内容,再显示“这是第一个JavaScripl例子（3）加何使得单击标起内容时,在页面中显示“这是第一个JUYaSCriM例子!”.（4）思考，JS代码的运行顺序是什么？<html><hea<J>VmCtacharset="utf"8-><ilc>这是第一个JavaScript例子VAitle><bead><body><hl>今后大家将一起学习JavaSeriPt知识！<hl><bod）,><tml>（二）在页面中定义下面函数，funct沁na（）IdocumentWriIeC这是第"个JavaScript例子!"）；）通过调用函数m）,完成下面操作.（1（史得执行网页时，首先显示“这是第一个JaVaSCriPt例子再显示标国-内容.（2）使得执行网页时，首先显示标题一内容,再显示"这是第一个JaVaSCriPI例子!”(3)如何使得单击标题一内容时，在页面中显示“这是第个JavaScript例子(三)把上面的函数a,定义在一个外部的UstlJs文件中，在网页中用下面格式导入该文件：<scrip(src="testI.jstypc="tcxtjavascript"><script>注意跖径的问题，完成下面操作：(1)使得执行四页时首先显示“这是第一个JaVaSCrim例子!二再显示标题内容(2)使用执行网页时，首先显示标SS-内容，再显示“这是第一个JasSCriPt例子!二(3)如何使得球击标题J内容时，在页面中显示“这是第一个JavaScripi例子(4)输入并运行如卜代码，思考超锥接与OndiCk事件的不同之处？<script>alcrt(,TisisaJSprogran);<script><ahM="javas5pl：idert(,单击了我！)”>点击我<><ahref=*http*,OnCliCk="alcrt(招要转去校园网!'>河南科技大学校园网<a><in>uiIyPe="tMmon”value="ENTER.OndiCk=Heft('将要进入主页面71>(四)运行下面的代码，通过理解运行的结果掌握alert。、Connrm()、prompt。、ConSUIe.log()和Ci(KUnWnt.write(C的使用Vkloclypchtml><hlnl><head><metacharset="utf-8*>VliHO常用输出语句的使用<MiUc>scriptIyPe二,'(extjavascrip(',>akrlCaaaaaa!"):VarSS=8nfirm("你是张三吗?"):if(ss=-tn>c)alcn(“我是张T>elsealei("我不是张三FxVarSlr=PmmPlC谛输入你的姓名:“JXXX)alcrt(str);consolc.log(str);documen,wri(e(str);document.wrie(我不是张£!*):(ku11wnl.writc(<b>我不是张V<b>!"):<scrip(><head><bdy><body><tml>(五)掌握IyPeof运算符的使用.在网页中定义5个a.b.c.d.e变量,为前四个变量分别赋123、Zbcdef、Irue、null.用decUmmtNTiIC语句或alert语句分别显示5个变Jft的值与类观察结果.注意：变量的类型用IyPeM(变玳1.(六)运行下面代码，掌握数值型常量(特别是两个特殊值Infinity与NaN)的情况、字符串常量的使用<!doctypchtml><h(n)><head>VmCklcharset="utf8,><liUc>数值型常盘、字符小常量所配>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,欢迎学习SjavaScripiF);d(u11ent.wi(e("<h1>欢迎学习XnjavaScripl!Oh1>*):USCriP<><hcad><body><.'body><html>注意:判断某个值是否是NaN.不能使用=或A=运算符，而她用isNaN()方法”(七)运行下面代码，观察结果.理解两个特殊数据类型，UndennCd和null的使用.思考在哪些情况下可以获取到Undenned或null值？.<!d(typchtml><html><head><11c(acharsei=*'utf-8*><tiilc>undcfincd类型和null类型vtillc><scrip<type="tcxtjavascript',>varb;d>cuncnl.wriic(typeofb>:alcrt（三）;vara=null;ale11(iyeofa);document,wrie（八）;document,writc(typeofwindow.statusl)vars=<locunem.ge(Eleme11ById("d);console.Iog(s.(ypcfs):<script><hcad><body><body><html>（八）运行下面代码，观察结果.理解JaVaSCriPt中全局变:与局部变量的使用.<!doctypehlnl><html><hcad><meacharsec="utf-8,*><i(le>变量的使用<dde><scrip(type="tcxtjavascrip<>vara：a在函数外声明，是全局变盘，作用于整个脚本代码func(ionsend()(a=欢迎进入：/a在函数内直接赋值，是全局变量Varb="JavaScript"b在函数内声明.只作用于该函数体C=JS程序设计“；”C在函数内直接M值，是全局变质alert(a+b);H显示"欢迎进入JaVaSCripl"alert(a+c);U显示"欢迎进入JS程序设计”Iscnd();"调用函数4nd,从而执行Send()中的代码akrt(aK);H显示"欢迎进入JS程序设计”ae11(a+b);出锚，因为无法访问局部变量b<scrip<>'cad><body><body><html>(九)运行下面的代码掌握Javascript中数据类型的障式转换<script(y|)e=wtexi.'javascriptM>vara=123+<rue:Varb=I23+”123”：varc=l23÷2a-;vard=123+NaN;varc=123+undcfin<xi:varf=123+null;consolc.log(a,b,c.d,c,D;<script>(十)掌握JSnaseriPt中数据类型强制转换方法的使用.运行下面谙句,观察结果.理解NUmber()ParSCIn1()、ParSCHOao方法的作用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(in>e):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!0alcrt(pa11iclnt(str.8);/8注意NaN的含义，实验过程中改变不同的数字，观察结果.运行下面语句，观察结果，理解IoSuing(泻Suing()的作用。varss=lness.toString():结果为"true"(IO).(oString(2>"结果为IOlOString(nuU):"结果为MnUlr(十一)运行下面代码，掌握JaVHSeriPt中“+”运算符的使用.<scripttypc=
