javascript实验_第1页
javascript实验_第2页
javascript实验_第3页
javascript实验_第4页
javascript实验_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、长江职业学院Javascript语言程序设计实验指导书专 业： 学 号： 姓 名： 班 级： 指导 老师： 软件教研室 编实验一 JavaScript基本操作一、 实验目的熟练掌握在HTML文件中编写JavaScript程序的基本操作，及在Microsoft InternetExplorer浏览器和Netscape的Nevigator浏览器中调试JavaScript的基本操作。二、 实验内容1、用NotePad创建一个简单的.htm文件，在Microsoft Internet Explorer浏览器中浏览效果。2、编写第1章中的实例源文件，并在Microsoft Internet Explor

2、er浏览器中进行测试。3、调试一段JavaScript程序，找出其中的错误。三、 实验步骤1、 通过windows的文件管理器，在c盘下新建一个文件夹jsp_ex,用于保存实验中的文件，如图1-1所示。 2、 在windows中打开“记事本”，（也可以用其他编辑html文件的工具软件，如Microsoft frontpage,Macromedia Dreamweaver等，编写例1-1的ch1_01.htm程序，然后将文件保存在C:jsp_ex文件夹中。3、 用下述任意一种方法，在浏览器中显示ch_01.htm，如图1-2。 A 在图1-1中双击“ch1_01.htm”文件名。B 在图1-1中

3、用鼠标右键单击“ch1_01.htm”，在打开的菜单列表中，如果有所需浏览器名就可以直接点击浏览器名。C 现在windows中打开所需浏览器，然后按【ctrl】+【o】，在打开的对话框中找到ch_01.htm文件。4、 再次编辑ch1_01.htm文件，将第21行中的“document.write”改写为“Document.write”然后按第3步的操作，得到如图1-3的效果，不能显示“上一次网页更新日期”，这时，通过浏览器的调试工具查找出出错的位置，修改后再次测试。 5、按1-2的步骤，将例1-1改写为“ch1_02.js”和“ch1_02.htm”两个文件即通过外部javascript文件

4、和html文件一起完成网页的制作。四、 思考练习1 为什么“上一次网页更新日期”在每一次打开都是同一个时间？2 请写出你在程序编写中出现的错误和改正方法，并分析。实验二 JavaScript编程基础一、 实验目的熟练掌握JavaScript的基本编程概念和编程技术，熟练掌握JavaScript程序语言的数据类型、表达式、运算符及基本控制语句，并学习基本的对象概念和事件处理程序。二、 实验内容1、编写第2章中的实例源文件，并且在Microsoft Internet Explorer浏览器中测试。2、编写一个显示学生成绩信息的网页，网页中有两个或更多的按钮，分别代表需要显示信息的学生，点击后可以得

5、到该学生的总成绩、平均成绩、平均成绩的级别等，如图2-1所示，并在Microsoft Internet Explorer浏览器中测试。三、 实验步骤a) 在c:jsp_ex文件夹下新建一个ch2_08.htm。b) 改写例2-5，其功能不变，即输入参数的总和，但是函数名改为sum，函数的返回值是计算后的总和。 function sum() var ret = 0; / ret为输入参数的总和 return ret; c) 用上述同样的方法编写一个计算输入参数平均数的函数，函数改名为average，函数的返回值是计算后的平均数。 function average() var ret = 0; /

6、 ret为输入参数的平均数 return ret; d) 编写一个函数，函数名为level，根据输入的参数返回该分数的级别：90以上为“A”，80以上为“B”，70以上为“C”，其他为“不及格”。用if-else if实现。 function level(score) var ret = ""/ ret为需要返回的分数级别 if (score>=90) . else if (score>=80) else if (score>=70) else . return ret; e) 编写一个函数，函数名为msg，根据输入参数返回不同的信息：如果级别是“A”,返

7、回“祝贺你去的了好成绩”；如果级别是“B”返回“成绩不错，继续加油”,如果级别是”C”,返回“必须加油啊”。用 switch实现。 function msg(level) var ret = ""/ ret为需要返回的信息 switch (level) case ("A"): . case ("B"): default: return ret; f) 编写一个对象函数，函数名为student，输入参数共有6项，分别为：学生姓名 name 数学成绩 math 语文成绩 chinese 英语成绩 english 自然成绩 science

8、体育成绩 gym 对象的属性包括了上述的输入参数项，对象的方法共有5个，分别为：总成绩 sum 平均成绩 average 平均成绩的级别 level 根据成绩返回的信息 msg 总信息 toString（） 其中前4个对象方法已经在步骤2-5中完成，最后一个方法可以在对象函数中直接定义，它将返回最终需要显示的所有信息。 function student(name,math,chinese,english,science,gym) = name; . this.toString = function toString() var s = + ":

9、n" var theSum = this.sum(this.math,this.chinese,this.english,this.science,this.gym); var theAve = this.ave(this.math,this.chinese,this.english,this.science,this.gym); var theLevel = this.level(theAve); s += "你的总成绩是 "+ theSum + "n" s += "你的平均成绩是 "+ theAve + "n&

10、quot; s += "你的平均成绩级别是 "+ theLevel + "n" s += "n" +this.msg(theLevel); return s; 7、最后制作HTML内容两个按钮，然后分别应用于onclick事件调用对象student的方法toString()四、 思考练习i. 增加一个函数maxScore，返回6门成绩的最高分，并显示在对话框中。ii. 增加一个函数minScore, 返回6门成绩的最低分，并显示在页面上。实验三 JavaScript常用内置对象一、 实验目的 熟练掌握JavaScript数组对象、字符

11、串对象、数学对象及日期对象。二、 实验内容1、编写第3章中的实例源文件，并在Microsoft Internet Explorer浏览器中进行调试。2、按下述要求编写常用的JavaScript函数。trim(s):去掉s中的首尾空格及连续空格中的多余空格，返回处理后的字串。replaceStr(inStr,oldStr,newStr):将字串inStr中的oldStr用newStr替换，返回替换后的新字串。isEmptyString(s):如果去空格后的s长度为0，返回true，否则，返回falseisValidString(s);给出有效字串，如果s在有效字串中，返回true，否则返回fal

12、seisNumber(s):使用isValidString(s)函数，其中有效字串为字数。isFloat(s):使用isValidString(s)函数，其中有效字串为数字及“.”。isMaxString(s,c);如果s长度小于等于c，返回true，否则，返回falseisRange(s,s1,s2);如果s长度大于等于c，返回true，否则，返回falseisRange(s,s1,s2)：如果s大于等于s1，并且小于等于s2，返回true，否则返回falseisArray(o): 如果o的constructor.toString（）中包含array，返回true，否则返回falseisEm

13、ail(s):如果s中包含“”和“.”，返回true，否则返回falsecapFirst(s):将s中的第一个字符变为大写字符，返回处理后的字串。indexOfArray(a,s):如果s为Array a中的一个元素，返回该元素的序列号，否则返回-1.3、编写一个“猜美国州名的游戏”的网页，如图3-1所示。 A:用户输入所猜的美国州名后，按回车。 B:如果猜错了，将会得到提示信息，一共有4次提示：第一个提示的是该州名的第1个字母，第2个提示的是该州名的最后一个字母，第3个提示的是该州名的长度，最后一个提示的是该州名第3个字母。 C:如果猜对了，将会得到祝贺信息，并显示回答问题的时间。三、 实验

14、步骤第一：在c:jsp_ex文件夹中新建一个ch3_16.htm文件。第二：首先编写HTML文件。a) <body>标记中应用onload事件，调用clearBox()的JavaScript程序，用于每次刷新网页时都清空用户输入域。b) 使用<h3>标记制作标题“猜美国州名游戏”。c) 制作一对<form>标记，名字为mForm，并且在<form>标记中应用onsubmit事件，该事件将调用一个guessit()中的JavaScript函数，然后return false，以保证用户输入完文字后按回车键将不会提交窗体，只是执行guessit()函数

15、。d) 在<form>标记中制作一对<div>标记，其id为hint，内容为“输入你的答案，然后按回车键”。e) 再制作一对<div>标记，在其中使用<input>的文字框标记，用于用户的输入，其名字为guess。f) 接着再制作一个“重玩”按钮，在其中应用onClick事件，调用JavaScript的newGame()函数。第三、在JavaScript程序中，按下述步骤操作。（1）首先将50个美国州名保存在一个全局变量的字符串数组中，数组名为state. state0="ALABAMA" state1="ALASK

16、A" state2="ARIZONA" state3="ARKANSAS" state4="CALIFORNIA" state5="COLORADO" state6="CONNECTICUT" state7="DELAWARE" state8="FLORIDA" state9="GEORGIA" state10="HAWAII" state11="IDAHO" state12="

17、;ILLINOIS" state13="INDIANA" state14="IOWA" state15="KANSAS" state16="KENTUCKY" state17="LOUISIANA" state18="MAINE" state19="MARYLAND" state20="MASSACHUSETTS" state21="MICHIGAN" state22="MINNESOTA&quo

18、t; state23="MISSISSIPPI" state24="MISSOURI" state25="MONTANA" state26="NEBRASKA" state27="NEVADA" state28="NEW HAMPSHIRE" state29="NEW JERSEY" state30="NEW MEXICO" state31="NEW YORK" state32="NORTH CAROLIN

19、A" state33="NORTH DAKOTA" state34="OHIO" state35="OKLAHOMA" state36="OREGON" state37="PENNSYLVANIA" state38="RHODE ISLAND" state39="SOUTH CAROLINA" state40="SOUTH DAKOTA" state41="TENNESSEE" state42="

20、TEXAS" state43="UTAH" state44="VERMONT" state45="VIRGINIA" state46="WASHINGTON" state47="WEST VIRGINIA" state48="WISCONSIN" state49="WYOMING"（2）设置全局变量猜的次数tries，开始时间startTime，结束时间endTime,随机产生一个049的随机数，变量名为sr，然后在state中设置第sr个数组为

21、正确答案，保存在全局变量answer中。 var sr = Math.floor(Math.random() * len); var answer = statesr; /* 初始化猜的次数 */ var tries = 0; var startTime = new Date(); var endTime = ""（3）编写函数newGame()，用于重新刷新网页，只要通过下述一个语句就可以了。function newGame() location.reload();/ 重新刷新网页 （4）编写函数clearBox（），用于清空用户输入域，初始化提示信息文字，并且将光标聚集

22、在用户输入域上。 function clearBox() document.mForm.guess.value = "" hint.innerHTML = "输入你的答案，然后按回车键:" document.mForm.guess.focus(); / 将光标聚集在文本框中 （5）编写函数diffTime(from,to),用于得到用户回答所用的秒数，其中from和to都是Date对象。function diffTime(from,to) var diffTime = parseInt(to - from) / 1000); return diffTim

23、e; （6）最后编写分析用户是否猜中的函数guessit（）：首先得到用户的输入内容，变量名为guess；然后将用户的输入内容guess与正确答案answer比较，如果输入正确，通过函数dffTime（）得到用户所使用的秒数，如果小于60秒，显示“回答正确！，州名是，你用了.秒”；如果用户输入的不正确，通过使用switch语句，对于不同的猜的次数显示不同的显示内容，第一次通过answer.charAt(0)显示第一个字母，第2次通过vanswer.charAt(answer.length-1)显示最后一个字母，第3次通过answer.length显示答案的长度，最后一次通过answer.cha

24、rAt(2)显示第3个字母，如果用户还是没猜中，显示“没有提示了”，如果用户再按回车键，则显示“对不起，州名是，还想再玩吗？”，如果再玩，则重新刷新网页。四、 思考练习i. 修改程序，时间到60秒即停止答题。ii. 修改程序，使答案提示中州名为小写。实验四 常用文档对象一、 实验目的 熟练掌握JavaScript文档对象，窗体及元素对象，锚点与链接对象及图像对象。二、 实验内容1、编写第4章中的实例源文件，并且在Microsoft Internet Explorer浏览器中进行调试。2、编写一个“学生成绩输入系统”的网页，如图4-1，假设有4名学生，他们的信息如表4-2所示，网页列表列出了学生

25、名单，当选择一个学生姓名时，浏览器标题栏显示该学生姓名，网页上显示该学生的照片，同时电子邮件链接为该学生的电子邮件地址：用户输入所选学生成绩后，按提交按钮将进行下述窗体校验。表4-2 学生信息姓名学号图片名电子邮件张小山001001.gif李小石002002.gif陈休休003003.gif王北北004004.gif（1）各项必须填写或选择。（2）除体育成绩外，其他成绩都是数字，并且小于100，体育为一位字符，范围为AF.三、 实验步骤第一：在c:jsp_ex文件夹中新建一个ch4_15.htm文件。第二：首先编写HTML文件。a) 学生列表名字为nameList，列表选项各值分别为学生的学号

26、。b) “语文”文字框名字为chinese。c) “数学”文字框名字为math。d) “历史、常识”单选按钮名字为optSelect，其文字框名字为anothere) “体育”文字框名字为gym。f) <body>标记中应用onload事件，调用JavaScript的clearAll()函数。g) <form>标记名字为mainForm。h) 学生列表<select>标记中应用onchange事件，调用doSelect()函数。i) “提交”按钮上应用onclick事件，调用doSubmit()函数。第三、编写JavaScript文件。 1、设置全局变量em

27、ails装载学生的电子邮件信息。 var emails = new Object(); emails"001"="zxs" emails"002"="lxs" emails"003"="cxx" emails"004"="wbb" var errMsg = "" 2、设置全局变量errMsg装载出错信息。 3、编写clearAll()函数，清空窗体中的用户输入内容。 function clearAll() docum

28、ent.mainFList.selectedIndex=-1; document.mainForm.chinese.value="" document.mainForm.math.value="" document.mainForm.optSubject0.click(); document.mainForm.another.value="" document.mainForm.gym.value="" 4、编写doSelect()函数，根据用户在学生列表中的选项，在网页标题栏上显示学生名字，在网页

29、中显示学生图片，修改电子邮件的链接为学生的电子邮件地址。 function doSelect() var selected = document.mainFList.selectedIndex; var selectedValue =document.mainFList.optionsselected.value; var selectedText =document.mainFList.optionsselected.text; document.images"studentImage".src = selectedValu

30、e + ".gif" document.links0.href="emailto:"+emailsselectedValue; document.title = "学生成绩输入系统 - " + selectedText 5、编写checkRequired(form,name,label)通用函数，用于检验用户是否填写或选择了指定的域，其中form为窗体对象，name为所要检查域的名字，label为提示信息中的域名，当用户没有填写或选择指定的域时，将出错信息添加到errMsg字串中。 function checkRequired(for

31、m, name,label) if (formname.value="") errMsg += '请输入"'+label+'"n' 6、编写isScore(s)函数，用于检验s是否是数字，并且小于等于100，如果满足条件，返回true，否则返回false。 function isScore(s) for (var i = 0; i < s.length; i+) var c = s.charAt(i); if (c < "0") | (c > "9") return

32、 false; if (parseInt(s)>100) return false; return true; 7、编写checkScore(form,name,label)函数用于检验用户输入是否是分数，当不满足条件时，将出错信息添加到errMsg字串中。 function checkScore(form,name,label) if (formname.value.length>0 && !isScore(formname.value) errMsg += '输入"'+label+'"无效n' 8、编写chec

33、kGym()函数，用于检验用户输入的是否AF，当条件不满足时，将出错信息添加到errMsg字串中。 function checkGym() var gymScore = document.mainForm"gym".value; var isValidString = true; if (gymScore.length>0) if (gymScore.length!=1) isValidString = false; var validChars = "abcdef" var c = gymScore.toLowerCase(); if (vali

34、dChars.indexOf(c) = -1) isValidString = false; if (!isValidString) errMsg += '输入"体育"无效n' 9、最后编写doSubmit()函数，用上述各函数检验各输入域，最后如果errMsg为空，则提交窗体，否则，报出错信息。 function doSubmit() var form = document.mainForm; checkRequired(form,"nameList","学生姓名"); checkRequired(form,&quo

35、t;chinese","语文"); checkScore(form,"chinese","语文"); checkRequired(form,"math","数学"); checkScore(form,"math","数学"); checkRequired(form,"another","历史或常识"); checkScore(form,"another","历史或常识"

36、;); checkRequired(form,"gym","体育"); checkGym(); if (errMsg.length>0) alert(errMsg); errMsg="" return false; else document.mainForm.submit(); 四、 思考练习i. 本实验中使用全局变量存储学生信息，试改用access数据库存储，完成与数据库的交互，并把相关代码给出。实验五 JavaScript其他常用窗口对象一、 实验目的 熟练掌握JavaScript屏幕对象、浏览器信息对象、网址对象、历史记

37、录对象及框架对象。二、 实验内容1、编写第5章中的实例源文件，并且分别在Microsoft Internet Explorer浏览器中进行调试。2、编写一个“学生成绩查阅系统”的网页，如图5-1，它包含左中右三个框架文件，左、右两个框架中的HTML文件具有相同的格式，不同的学生内容，当拖动其中任意一个滚动条时，另一个网页会同步滚动；中间一个框架包含了3个按钮，点击第1个按钮，左边网页将充满全屏幕，点击第2个按钮，右边网页将充满全屏幕，点击第3个按钮，还原到缺省状态。 三、 实验步骤第一：在c:jsp_ex文件夹中新建一个ch5_14.htm文件，它包含3个框架文件，左框架的id是frame1。

38、网页文件名是ch5_14_fram1.htm,右边的框架id是frame2，网页文件名是ch5_14_fram2.htm；中间的框架id是frame0，网页文件名是ch5_14_fram0.htm.<html><frameset cols="50%,30,*"> <frame src="ch5_14_frame1.htm" name="frame1" noresize frameborder="0" marginwidth="0" marginheight=&quo

39、t;0"> <frame src="ch5_14_frame0.htm" name="frame0" noresize frameborder="0" marginwidth="0" marginheight="0"> <frame src="ch5_14_frame2.htm" name="frame2" noresize frameborder="0" marginwidth="0&quo

40、t; marginheight="0"></frameset></html>第二：编写两个框架网页文件，在<body>标记中应用onscroll事件，在调用的JavaScript程序中让另一个框架中的文档的scrollTop与当前框架的scrollTop相等，起到同步滚动效果。<body onscroll= "parent.frame2.document.body.scrollTop= parent.frame1.document.body.scrollTop" style="text-align

41、:center">第三、编写中间框架框架的网页，包含3个按钮，id分别是b1,b2,b3分别应用onclick事件，在调用的JavaScript程序中通过parent.document.body.cols语句，调整框架的宽度，并且使刚按过的按钮不能再按。 function controler(flag) if (flag=1) parent.document.body.cols='99%,30,0' document.getElementById('b2').disabled=false;document.getElementById('

42、b1').disabled=true;document.getElementById('b3').disabled=false; else if (flag=2) parent.document.body.cols='0,30,99%' document.getElementById('b1').disabled=false;document.getElementById('b2').disabled=true;document.getElementById('b3').disabled=false; el

43、se parent.document.body.cols='50%,30,*' document.getElementById('b1').disabled=false;document.getElementById('b2').disabled=false;document.getElementById('b3').disabled=true; 四、 思考练习i. 试从access数据库提取数据显示，并写出相关代码。ii. 试与实验4网页结合，完成对数据库数据的存取操作。实验六 JavaScript与动态网页一、 实验目的 熟练

44、掌握动态网页内容、动态网页样式及动态网页位置等技术。二、 实验内容1、编写第6章中的实例源文件，并且分别在Microsoft Internet Explorer浏览器中进行调试。2、制作一个如图6-1所示的标签式的学生信息网页，“基本信息”标签，显示的是学生基本信息表，当光标置于某一行时，该行呈高亮状态，并且在右侧显示该学生的图片；“成绩”标签显示的是学生成绩表，同样，当光标置于某一行时，该行呈高亮状态。 三、 实验步骤第一：在c:jsp_ex文件夹中新建一个ch6_16.htm文件。第二：首先制作标签及底板部分。他们在HTML中都使用<div>标记，并且设置positon样式为a

45、bsolute：标签部分的<div>标记中包含有两个<span>标记，id分别是basic和score。定义标签的样式为tabs，底板的样式为section。.section position:absolute;left:10px;top:45px;border:1px solid #999; width:400px;height:340px;z-index:1;background-color:lightYellow;padding:20px;.tabs position:absolute;left:10px;top:20px;width:300px;height:2

46、0px;z-index:10.tabs divborder:1px solid #333; margin:4px; padding:2px;padding-left:20px; float:left;padding-right:20px; background-color:#eee;z-index:10; cursor:pointer 第三、在标签的两个<span>标记中分别应用onclick事件，调用JavaScript函数display()，用于交替显示当前标签及其相应内容。 <div class="tabs"> <div id="

47、;basic" onclick="display(this)">基本信息</div> <div id="score" onclick="display(this)">成绩</div></div>第四、底板的<div>标记的id分别是tabBasic 和tabScore，它们分别包含有一个<table>标记，用于显示信息，其中tabBasic的底板中还有一个<img>标记，用于显示学生的图片，它的定位也是设置为absolute样式值。第五

48、、在<table>标记中，为了达到光标处的行呈高亮状态，在每一个<tr>标记中应用onmouseover和onmouseout事件，分别使用JavaScript程序设置背景颜色，其中tabBasic底板<tr>标记onmouseover和onmouseout事件中还调用了JavaplayImg(),用于显示、隐藏学生图片。<div class="section" id="tabBasic"><table style="width:200px"><tr><th

49、>姓名</th><th>学号</th></tr><tr onmouseover="this.style.backgroundColor='#ccc'displayImg('001')" onmouseout="this.style.backgroundColor='#fff'displayImg('none')"><td>张小山</td><td>001</td></tr&g

50、t;<tr onmouseover="this.style.backgroundColor='#ccc'displayImg('002');" onmouseout="this.style.backgroundColor='#fff'displayImg('none')"><td>李小石</td><td>002</td></tr></table><img style="position:abs

51、olute;left:240px;top:20px;display:none;z-index:100" id="img" onclick="this.style.display='none'"></img></div>四、 思考练习i. 建立外部样式表文件，将样式信息与网页内容分离，并给出相关外部样式表文件代码。实验七 JavaScript实用技巧一、 实验目的 熟悉JavaScript的常用实用技巧。二、 实验内容1、编写第7章中的实例源文件，并且分别在Microsoft Internet Exp

52、lorer浏览器中进行调试。2、制作一个如图所示的效果，上方的文本框中为完整html代码书写处，为了提示用户，用“-完整的HTML代码放这-”标识。用户在文本区输入代码后，点击按钮“运行代码”，将在一个新的网页中运行用户输入的代码，点击按钮“复制到剪贴板”，将会把代码复制到剪贴板，以待使用；当点击按钮“另存为代码”，将会把文本区内代码转换成htm文件另存为到指定位置。 三、 实验步骤第一：在c:jsp_ex文件夹中新建一个ch7_25.htm文件。第二：首先制作HTML部分的内容，制作三个按钮，分别是“运行代码”，“复制到剪贴板”，“另存代码”。点击时分别调用函数runEx(),cycode(

53、),svcode()。<html><title>JSP</title><head><script language="JavaScript">.</script></head><body><div align="center"><P align=center><TEXTAREA rows='12' cols='78' class='fm' id='code'>-完整

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论