web第三次.docx

1、web第三次南京信息工程大学 Web技术 实验(实习)报告实验(实习)名称 Javascript编程 实验(实习)日期 2017.11.27 得分 指导老师 系 专业 班级 姓名 学号 一、实验目的1、掌握基本的JavaScript语法。2、掌握将JavaScript脚本嵌入HTML文件的方法3、掌握使用JavaScript脚本语言设计应用程序的过程二、 实验内容与步骤1、对象和事件（1）在文本编辑器中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： function myfunction() alert(HELLO); By pressing the butto

2、n, a function will be called. The function will alert a message. 将页面中在标记间的JS代码改成.js文件的使用格式，改写Html文件中包含.js文件代码。Hello.js文件代码:function myfunction() alert(HELLO); HTML文件代码： By pressing the button, a function will be called. The function will alert a message. 运行结果：（2）创建一个网页，在文本框分别输入两个数，实现两个数的+、-、*、/运算，点击

3、“=”按钮将结果显示在文本框中。界面设计可参考下图。注意在前两个文本框内容改变的时候对输入的数据是否是数字要进行判断，在最后一个文本框获得光标的时候得到计算结果。代码：titlefunction $(id)return document.getElementById(id);window.onload = function()$(btn).onclick=function()var n1=$(num1).value;var n2=$(num2).value;if($(fun1).value=+)$(result1).innerText=Number(n1)+Number(n2);if($(fu

4、n1).value=-)$(result1).innerText=Number(n1)-Number(n2);if($(fun1).value=*)$(result1).innerText=Number(n1)*Number(n2);if($(fun1).value=/)$(result1).innerText=Number(n1)/Number(n2); + -*/ 截图：2、内置对象（1）判断用户名和密码文本框不能为空，同时要求密码在4到8位之间。代码：function validate()var username = document.getElementById(username).v

5、alue; var password = document.getElementById(password).value;if(!regex(password)alert( 密码长度在4-8位之间);return;document.login.submit();function regex(value)var re = /a-zA-Z0-9_4,8$/;if(!re.test(value)return false;return true;用户名：密码： 截图：（2）编制一个实现能自动根据时间显示网页上不同问候语的程序hi.htm，要求： 5点以后8点以前显示早上好！； 12点以前显示：“上午好

6、！” 18点以前显示：“下午好！” 21点以前显示：“晚上好！” 23点以前显示：“祝你晚安！” 23点5点以前显示：“网虫：该休息了，明天还有课呢！”说明：显示全部使用弹出提示窗口方式实现。代码：var time=new Date();var h=time.getHours();if(h23&h5&h8&h12&h18&h21&h=23) alert(祝你晚安！);截图3JavaScript表单处理（1）设计一个在线调查的表单页面（含有单选、多选项），当用户单击提交按钮时将显示一个对话框显示用户的选择结果。代码 function showMsg() var string1=你觉得本站：+(d

7、ocument.getElementById(Radio1).checked? 一般:优秀)+rn +您的性别：+document.getElementById(Select1).value+ rn +您觉得需要添加的版块：+(document.getElementById(Checkbox1).checked? document.getElementById(Checkbox1).value+,):) +(document.getElementById(Checkbox2).checked? document.getElementById(Checkbox2).value+,):) +(do

8、cument.getElementById(Checkbox3).checked? document.getElementById(Checkbox3).value+,):) +(document.getElementById(Checkbox4).checked? document.getElementById(Checkbox4).value+,):) +(document.getElementById(Checkbox5).checked? document.getElementById(Checkbox5).value+,):); alert(string1);你觉得本站:一般&nbs

9、p;  优秀 您的性别:男 女 您觉得需要添加的版块:新闻   娱乐   游戏   音乐   视频 截图：4、浏览器对象模型BOM（1）设计一个用户注册页面。注册内容包括用户名、密码及密码确认框、年龄、邮箱、一个提交按钮、一个重置按钮（清空所有文本框内容）。 对用户数据的具体要求： 密码及密码为4-12位任意字符并且两个密码框内容要相同；年龄在16和40之间；邮箱含有“”及“.” 。当用户点击提交按钮时需要验证数据的合法性，如果不满足以上要求，利用警告框（alert）给出相应的提示。并且第一个不符合要求的

10、文本框自动获得焦点，里面文本内容被选中。 如果用户填写正确，则在新窗口中显示“注册成功！”（新窗口没有菜单条，工具条和地址栏）。 代码：function checkform()if (document.login.userid.value = =) alert(请输入用户名); document.login.userid.focus(); return;if(document.login.uerkey1.value = = ); alert(请输入密码); document.login.userkey1.focus(); return;if(document.login.uerkey1.val

11、ue ! = document.login.uerkey2.value) alert(两个密码不一致); document.login.userkey1.focus(); return;if(email_str = document.login.email.value.indexof()= = -1) alert(电子邮件的格式不正确); document.login.email.focus(); return;alert(验证都已通过); 用户注册 用户名: 密码: 重复密码: 性别: 男 女 电子邮箱: 截图：（2）将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换成大写字母

12、。代码：var str = prompt(脚本提示：n 请输入一行文字:,);var upper_str = str.toUpperCase();for(var i=upper_str.length-1;i=0;i-) document.write(upper_str.charAt(i);截图：5、文档对象模型DOM（1）设计如下网页，并在页面列出表单中所有元素的名称。代码：姓名: 密码: 性别:男   女 学历:初中 高中大学 硕士博士 爱好:阅读   写作   运动   音乐   编程&nb

13、sp;  书法 截图：（2）设计一个含有一个表单的页面，在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。代码： abc onclick=moveList(leftList,rightList)input type=button name=backTo value= def function moveList(from,to) var fromList = document.myForm.elementsfrom;var fromLen = fromList.options.length;var toList = document.myForm.el

14、ementsto;var toLen = toList.options.length;var current = fromList.selectedIndex;while (current-1) var o = fromList.optionscurrent;var t = o.text;var v = o.value;var optionName = new Option(t, v, false, false);toList.optionstoLen= optionName;toLen+;fromList.optionscurrent=null;current = fromList.selectedIndex;截图：