javascript实验.docx

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

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

3、表中，如果有所需浏览器名就可以直接点击浏览器名。C 现在windows中打开所需浏览器，然后按【ctrl】+【o】，在打开的对话框中找到文件。4、 再次编辑文件，将第21行中的“”改写为“”然后按第3步的操作，得到如图1-3的效果，不能显示“上一次网页更新日期”，这时，通过浏览器的调试工具查找出出错的位置，修改后再次测试。 5、按1-2的步骤，将例1-1改写为“”和“”两个文件即通过外部javascript文件和html文件一起完成网页的制作。四、 思考练习1 为什么“上一次网页更新日期”在每一次打开都是同一个时间2 请写出你在程序编写中出现的错误和改正方法，并分析。实验二 JavaScrip

4、t编程基础一、 实验目的熟练掌握JavaScript的基本编程概念和编程技术，熟练掌握JavaScript程序语言的数据类型、表达式、运算符及基本控制语句，并学习基本的对象概念和事件处理程序。二、 实验内容1、编写第2章中的实例源文件，并且在Microsoft Internet Explorer浏览器中测试。2、编写一个显示学生成绩信息的网页，网页中有两个或更多的按钮，分别代表需要显示信息的学生，点击后可以得到该学生的总成绩、平均成绩、平均成绩的级别等，如图2-1所示，并在Microsoft Internet Explorer浏览器中测试。三、 实验步骤a) 在c:jsp_ex文件夹下新建一个

5、。b) 改写例2-5，其功能不变，即输入参数的总和，但是函数名改为sum，函数的返回值是计算后的总和。 function sum() var ret = 0; else if (score=80) else if (score=70) else . return ret; c) 编写一个函数，函数名为msg，根据输入参数返回不同的信息：如果级别是“A”,返回“祝贺你去的了好成绩”；如果级别是“B”返回“成绩不错，继续加油”,如果级别是”C”,返回“必须加油啊”。用 switch实现。 function msg(level) var ret = ; case (B): default: retu

6、rn ret; d) 编写一个对象函数，函数名为student，输入参数共有6项，分别为：学生姓名 name 数学成绩 math 语文成绩 chinese 英语成绩 english 自然成绩 science 体育成绩 gym 对象的属性包括了上述的输入参数项，对象的方法共有5个，分别为：总成绩 sum 平均成绩 average 平均成绩的级别 level 根据成绩返回的信息 msg 总信息 toString（） 其中前4个对象方法已经在步骤2-5中完成，最后一个方法可以在对象函数中直接定义，它将返回最终需要显示的所有信息。 function student(name,math,chinese,

7、english,science,gym) = name; . = function toString() var s = + :n; var theSum = ,; var theAve = ,; var theLevel = (theAve); s += 你的总成绩是 + theSum + n; s += 你的平均成绩是 + theAve + n; s += 你的平均成绩级别是 + theLevel + n; s += n +(theLevel); return s; 7、最后制作HTML内容两个按钮，然后分别应用于onclick事件调用对象student的方法toString()四、 思考

8、练习i. 增加一个函数maxScore，返回6门成绩的最高分，并显示在对话框中。ii. 增加一个函数minScore, 返回6门成绩的最低分，并显示在页面上。实验三 JavaScript常用内置对象一、 实验目的 熟练掌握JavaScript数组对象、字符串对象、数学对象及日期对象。二、 实验内容1、编写第3章中的实例源文件，并在Microsoft Internet Explorer浏览器中进行调试。2、按下述要求编写常用的JavaScript函数。trim(s):去掉s中的首尾空格及连续空格中的多余空格，返回处理后的字串。replaceStr(inStr,oldStr,newStr):将字串

9、inStr中的oldStr用newStr替换，返回替换后的新字串。isEmptyString(s):如果去空格后的s长度为0，返回true，否则，返回falseisValidString(s);给出有效字串，如果s在有效字串中，返回true，否则返回falseisNumber(s):使用isValidString(s)函数，其中有效字串为字数。isFloat(s):使用isValidString(s)函数，其中有效字串为数字及“.”。isMaxString(s,c);如果s长度小于等于c，返回true，否则，返回falseisRange(s,s1,s2);如果s长度大于等于c，返回true，否

10、则，返回falseisRange(s,s1,s2)：如果s大于等于s1，并且小于等于s2，返回true，否则返回falseisArray(o): 如果o的（）中包含array，返回true，否则返回falseisEmail(s):如果s中包含“”和“.”，返回true，否则返回falsecapFirst(s):将s中的第一个字符变为大写字符，返回处理后的字串。indexOfArray(a,s):如果s为Array a中的一个元素，返回该元素的序列号，否则返回-1.3、编写一个“猜美国州名的游戏”的网页，如图3-1所示。 A:用户输入所猜的美国州名后，按回车。 B:如果猜错了，将会得到提示信息，

11、一共有4次提示：第一个提示的是该州名的第1个字母，第2个提示的是该州名的最后一个字母，第3个提示的是该州名的长度，最后一个提示的是该州名第3个字母。 C:如果猜对了，将会得到祝贺信息，并显示回答问题的时间。三、 实验步骤第一：在c:jsp_ex文件夹中新建一个文件。第二：首先编写HTML文件。a) 标记中应用onload事件，调用clearBox()的JavaScript程序，用于每次刷新网页时都清空用户输入域。b) 使用标记制作标题“猜美国州名游戏”。c) 制作一对标记，名字为mForm，并且在标记中应用onsubmit事件，该事件将调用一个guessit()中的JavaScript函数，然

12、后return false，以保证用户输入完文字后按回车键将不会提交窗体，只是执行guessit()函数。d) 在标记中制作一对标记，其id为hint，内容为“输入你的答案，然后按回车键”。e) 再制作一对标记，在其中使用的文字框标记，用于用户的输入，其名字为guess。f) 接着再制作一个“重玩”按钮，在其中应用onClick事件，调用JavaScript的newGame()函数。第三、在JavaScript程序中，按下述步骤操作。（1）首先将50个美国州名保存在一个全局变量的字符串数组中，数组名为state. state0=ALABAMA; state1=ALASKA; state2=AR

13、IZONA; state3=ARKANSAS; state4=CALIFORNIA; state5=COLORADO; state6=CONNECTICUT; state7=DELAWARE; state8=FLORIDA; state9=GEORGIA; state10=HAWAII; state11=IDAHO; state12=ILLINOIS; state13=INDIANA; state14=IOWA; state15=KANSAS; state16=KENTUCKY; state17=LOUISIANA; state18=MAINE; state19=MARYLAND; state

14、20=MASSACHUSETTS; state21=MICHIGAN; state22=MINNESOTA; state23=MISSISSIPPI; state24=MISSOURI; state25=MONTANA; state26=NEBRASKA; state27=NEVADA; state28=NEW HAMPSHIRE; state29=NEW JERSEY; state30=NEW MEXICO; state31=NEW YORK; state32=NORTH CAROLINA; state33=NORTH DAKOTA; state34=OHIO; state35=OKLAHO

15、MA; state36=OREGON; state37=PENNSYLVANIA; state38=RHODE ISLAND; state39=SOUTH CAROLINA; state40=SOUTH DAKOTA; state41=TENNESSEE; state42=TEXAS; state43=UTAH; state44=VERMONT; state45=VIRGINIA; state46=WASHINGTON; state47=WEST VIRGINIA; state48=WISCONSIN; state49=WYOMING;（2）设置全局变量猜的次数tries，开始时间startT

16、ime，结束时间endTime,随机产生一个049的随机数，变量名为sr，然后在state中设置第sr个数组为正确答案，保存在全局变量answer中。 var sr = () * len); var answer = statesr; /* 初始化猜的次数 */ var tries = 0; var startTime = new Date(); var endTime = ;（3）编写函数newGame()，用于重新刷新网页，只要通过下述一个语句就可以了。function newGame() (); ”；如果用户输入的不正确，通过使用switch语句，对于不同的猜的次数显示不同的显示内容，第

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

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

19、文”文字框名字为chinese。c) “数学”文字框名字为math。d) “历史、常识”单选按钮名字为optSelect，其文字框名字为anothere) “体育”文字框名字为gym。f) 标记中应用onload事件，调用JavaScript的clearAll()函数。g) 标记名字为mainForm。h) 学生列表标记中应用onchange事件，调用doSelect()函数。i) “提交”按钮上应用onclick事件，调用doSubmit()函数。第三、编写JavaScript文件。 1、设置全局变量emails装载学生的电子邮件信息。 var emails = new Object();

20、emails001= emails002= emails003= emails004= var errMsg = ; 2、设置全局变量errMsg装载出错信息。 3、编写clearAll()函数，清空窗体中的用户输入内容。 function clearAll() ; ; ; ; 4、编写doSelect()函数，根据用户在学生列表中的选项，在网页标题栏上显示学生名字，在网页中显示学生图片，修改电子邮件的链接为学生的电子邮件地址。 function doSelect() var selected = var selectedValue = var selectedText = studentIm

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

22、+= 请输入+label+n; 6、编写isScore(s)函数，用于检验s是否是数字，并且小于等于100，如果满足条件，返回true，否则返回false。 function isScore(s) for (var i = 0; i ; i+) var c = (i); if (c 9) return false; if (parseInt(s)100) return false; return true; 7、编写checkScore(form,name,label)函数用于检验用户输入是否是分数，当不满足条件时，将出错信息添加到errMsg字串中。 function checkScore(

23、form,name,label) if (formname.0 & !isScore(formname.value) errMsg += 输入+label+无效n; 8、编写checkGym()函数，用于检验用户输入的是否AF，当条件不满足时，将出错信息添加到errMsg字串中。 function checkGym() var gymScore = gym.value; var isValidString = true; if 0) if !=1) isValidString = false; var validChars = abcdef; var c = (); if (c) = -1)

24、isValidString = false; if (!isValidString) errMsg += 输入体育无效n; 9、最后编写doSubmit()函数，用上述各函数检验各输入域，最后如果errMsg为空，则提交窗体，否则，报出错信息。 function doSubmit() var form = ; checkRequired(form,nameList,学生姓名); checkRequired(form,chinese,语文); checkScore(form,chinese,语文); checkRequired(form,math,数学); checkScore(form,mat

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

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

27、，网页文件名是；中间的框架id是frame0，网页文件名是. 第二：编写两个框架网页文件，在标记中应用onscroll事件，在调用的JavaScript程序中让另一个框架中的文档的scrollTop与当前框架的scrollTop相等，起到同步滚动效果。第三、编写中间框架框架的网页，包含3个按钮，id分别是b1,b2,b3分别应用onclick事件，在调用的JavaScript程序中通过语句，调整框架的宽度，并且使刚按过的按钮不能再按。 function controler(flag) if (flag=1) 99%,30,0; (b2).disabled=false; (b1).disabled=true; (b3).disabled=false; else if (flag=2) 0,30,99%; (b1).disabled=false; (b2).disabled=true; (b3).disabled=false; else 50%,30,*; (b1).disabled=false; (b2).disabled=