JavaScript实验实训内容.docx

1、JavaScript实验实训内容JavaScript表达式和逻辑控制语句的使用实验一 一实验目的掌握JavaScript的变量；掌握JavaScript的数据类型； 掌握JavaScript的运算符；掌握JavaScript的逻辑控制语句。二实验内容1、声明一个变量str，为其赋值Hello World!，显示该值；改变该变量值为Hello China!，然后再显示该值。2、将110之间的奇偶数分开，页面呈现方式如下：3、任意输入一个年份，判断是否为闰年。实验二 函数部分一实验目的掌握JavaScript的常用函数；二实验内容编写一个函数，在页面上输出11000之间所有能同时被3，5，7整除的

2、证书，并要求每行显示6个这样的数。ex050303.htm!-var n,nb=0;for(n=1;n 0) document.write(,); nb+; document.write(n); if (nb%6 = 0) document.write(n); document.write(nn);document.write(共有+nb+个数);/-实验三 实验目的：常用函数的使用。实验内容：利用全局变量和函数，设计模拟幸运数字机游戏。设幸运数字为8，每次由计算机随机生成3个19之间的随机数，当这3个随机数中有一个数字为8时，就算赢了一次。Ex050309.htmlvar win_rate=

3、0; /赢率 var play_times=0; /总次数var wins=0; /赢的次数var last_digits; /上次数字串var last_win; /上次是否赢?!-function PlayOnce()/模拟玩一次数字机游戏 var i,digit; play_times+; last_digits=; last_win=false; for(i=0;i事件与对象实验四实验目的：表单的设计。实验内容：设计一个表单，放入两个按钮，单击它们时将显示不同问候语。S07_02.HTM处理事件-HTML标记方式function hello_girl() alert(小姐,您好!);

4、实验五实验目的：内置对象的使用。实验内容： 1 在页面中显示当天日期。S06_03.HTM：使用new运算符var today;today = new Date();document.write(今天是+today.getFullYear()+年+(today.getMonth()+1)+月+today.getDate()+日);实验六实验目的：内置对象的使用。实验内容： 2 在浏览器窗口的状态栏中显示当前浏览器的版本信息。S06_02.HTM访问对象的属性window.status = navigator.appVersion;实验七实验目的：内置对象的使用。实验内容： 3 将用户输入的字符

5、串反向输出到页面上，并且要求将其中的小写字母转换成大写字母。S06_07.HTM使用Stringvar origin_s,upper_s,i;origin_s = prompt(请输入一行文字:,);upper_s = origin_s.toUpperCase();for(i=upper_s.length-1;i=0;i-) document.write(upper_s.charAt(i);实验八实验目的：内置对象的使用。实验内容： 4 求PI的5次方，并四舍五入取整。S06_04.HTM使用Math对象alert(Math.round(Math.pow(Math.PI,5);实验九实验目的：

6、内置对象的使用。实验内容： 5 由图像表示日期。ch3_14.htm !-var sWeek = new Array(日,一,二 ,三,四,五,六);var myDate = new Date(); / 当天的日期var sYear = myDate.getFullYear(); / 年var sMonth = myDate.getMonth()+1; / 月var sDate = myDate.getDate(); / 日var sDay = sWeekmyDate.getDay(); / 星期document.write(imageDigits(sYear) +   

7、+ imageDigits(sMonth) +    + imageDigits(sDate) + );/ 如果输入数是1位数，在十位数上补0function formatTwoDigits(s) if (s10) return 0+s; else return s;/ 将数转换为图像，注意，在本文件的相同目录下已有09的图像文件，文件名为0.gif，1.gif 以此类推function imageDigits(s) var ret = ; var s = new String(s); for (var i=0; is.length; i+) ret += ; return

8、 ret;/-JavaScript对象的理解和使用实验十一实验目的掌握JavaScript的常用的对象类型；掌握JavaScript对象属性和方法的引用方式；了解JavaScript对象的常用属性和方法；二实验内容1、任意输入一个字符串，单击“确定”按钮，输出字符串的长度。2、猜数游戏，实现效果如下：3、设计实现一个带开关的时钟。JavaScript事件的理解和使用实验十一一实验目的掌握JavaScript的常用的事件；掌握JavaScript事件的处理方式；了解如何通过HTML属性和JavaScript属性处理事件；二实验内容1、设计实现一个页面，当进入页面时提示“您好，欢迎光临”，当离开页

9、面时提示“您好，欢迎您下次再来”。2、设计实现如下页面，要求（1）单击“提交”按钮时逐一验证页面各项信息不允许为空；（2）如果哪一项信息不满足要求，页面焦点停留在该信息处；（3）单击“重置”按钮时，将页面各项元素信息清空。 JavaScript的浏览器对象模型实验十二一实验目的掌握JavaScript浏览器对象的层次结构；掌握JavaScript浏览器对象的属性和方法；二实验内容1、设计实现如下页面： （1）单击“修改年龄”按钮，弹出一个对话框： （2）单击“确定”按钮，将文本框内的年龄信息改为用户重新输入的信息； （3）单击“取消”按钮提示用户“您按了取消按钮”。2、设计实现如下页面：（1）

10、输入学生信息后，单击“提交”按钮，页面呈现方式如下：（2）单击“复位”按钮，页面呈现方式如下：实验十三一实验目的掌握JavaScript浏览器对象的层次结构；掌握JavaScript浏览器对象的属性和方法；二实验内容设计一个含有一个表单的页面，并且在表单上放入一个文本框。编写程序，当鼠标在页面上移动时，鼠标的坐标将显示在这个文本框中。ex070303.htm 1 在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。ch4_07.htm -1) / o为需要移动列表中当前选择项对象 var o = fromList.optionscurrent; var t =

11、o.text; var v = o.value; / 根据已选项新建一个列表选项 var optionName = new Option(t, v, false, false); / 将该选项添加到移动到列表中 toList.optionstoLen= optionName; toLen+; / 将该选项从需要移动列表中清除 fromList.optionscurrent=null; current = fromList.selectedIndex; /- a b c onclick=moveList(leftList,rightList) input type=button name=bac

12、kTo value= d e f 实验十四一实验目的：掌握表单的应用二实验内容设计一个有3个超链接的页面，单击这些链接时分别打开和关闭窗口以及关闭本身窗口。S08_01.HTM打开和关闭窗口var newwin;function opennewwin() height=100,width=400,top=10,left=0,toolbar=no,menubar=no, + scrollbars=no,resizable=no,location=no,status=no);function closenewwin() newwin.close();打开新窗口关闭新窗口关闭本窗口2 设计一个表单，

13、该表单有姓名和某种卡号两个文本输入框，其中这种卡号的格式为“XXXX-XXXX-XXXX-XXXX”（每个X代表一个数字），要求用户单击提交按钮之前验证这两个输入数据的有效性。S08_11.HTM验证表单function validate() alert(数据完全); return true;function checkName(s) var ok = (s.length0); if(!ok) alert(名字输入有误，请查核！) return ok;function checkNum(n) var ok,i,ch; ok = (n.charAt(4)=- & n.charAt(9)=- &

14、n.charAt(14)=-); if(!ok) alert( 卡号输入有误，请查核！); return false; i=0; while(i 9 | ch 0) alert( 卡号输入有误，查核！) return false; i+; return true; 姓名： 卡号： 3 设计3个按钮，当单击他们时分别使页面的背景色变成红、蓝和绿色。S08_13.HTM使用按钮function ChangeBgColor(new_bgcolor) document.bgColor=new_bgcolor; 实验十五一实验目的掌握表单的验证二实验内容表单验证单击.html function chec

15、k() var inst = 爱好：; alert(请输入姓名！); else else alert(性别：女); if(inst=爱好：) alert(赶快培养一个爱好吧！); else alert(inst); 请输入您的姓名： 请选择您的性别： 男 女 请选择您的爱好： 游泳 滑冰 散步 JavaScript的应用与实践实验十六一实验目的掌握JavaScript的综合应用。二实验内容1、设计实现如下页面：要 求： （1）“姓名”、“学号”要求输入本人的真实姓名与学号； （2）“年龄”要求验证不允许为空，且只能是小于100的正整数； （3）“出生日期”要求验证年不允许为空，且只能为4位数字； （4）“身份证号”要求验证不允许为空，且为有效的身份证号； （5）“家庭住址”要求验证不允许为空，且最大长度为50个字符，且需验证只能为中文、数字和字母； （6）“性别”、“班级”、“课程”要求验证不允许为空； （7）“兴趣”要求设置为高3行、宽30列，最大输入长度为200，且需验证不允许为空，且只能为中文、字母、符号。浏览器对象1 设计一个表单，可以