基于HTML5的网页设计及应用（第2版）实验指导书.docx

《基于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!0alcrt(pa11iclnt(str.8);/8注意NaN的含义，实验过程中改变不同的数字，观察结果.运行下面语句，观察结果，理解IoSuing(泻Suing()的作用。varss=lness.toString():结果为true(IO).(oString(2;结果为IOlOString(nuU):结果为MnUlr(十一)运行下面代码，掌握JaVHSeriPt中“+”运算符的使用.scripttypc=