javascript程序设计实验复习题(11页).doc
-javascript程序设计实验复习题-第 11 页实验项目1 javascript程序设计 3 、思考题: 设计 JavaScript 程序,在网页上输出半径为 3 的圆的面积和周长。 <script language="javascript"> var r=3; var pi=3.1415; document.writeln(" 圆的半径为: " + r); document.writeln(" 圆的面积为: " + pi*r*r); document.writeln(" 圆的周长为: " + 2*pi*r); </script> 实验内容二: JavaScript 对话框 4 、思考题: 设计密码检测程序,密码输入正确,显示 “ 欢迎访问 ” ,不正确显示 “ 密码不正确,好好想哟 ” 。 <script> var password= "123456" var answer= prompt(" 请输入你的密码 ",""); alert(answer = password) ? " 欢迎访问 " : " 密码不正确,好好想想哟! "); </script> 实验内容三: JavaScript 函数的定义及调用 教师演示 JavaScript 函数的定义及调用的程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。 1 、程序案例 1 素数判断 <script language=javascript> function IsPrime(p) if(p<1) return false; var i; for(i=2;i<p;i+) if (p%i=0) return false; return true; var x; x=parseInt(prompt(" 请输入 1-100 之间的数字 ","1"); alert(" 该数是否为素数: " + IsPrime(x); </script> 实验内容四: JavaScript 分支结构程序设计 1 、分支结构程序案例 1 两个数排序 <script language=javascript> var x,y,temp; x = parseFloat(prompt(" 请输入 x 的值: ","0"); y = parseFloat(prompt(" 请输入 y 的值: ","0"); if (x>y) temp = x; x = y; y = temp; document.writeln(" 排序后 ,x=" + x +"y=" + y) </script> 3 、思考题: 根据成绩给出学生的考评:如果成绩 >=85, 考评 “ 优 ” ,否则如果成绩 >=60 ,考评 “ 及格 ”, 否则考评为 “ 不及格 ” 。 <script language=javascript> var score,grade; score = parseFloat(prompt(" 请输入学生的成绩 :",""); if (score>=85) grade=" 优 " else if (score>=75) grade=" 中 " else if (score>=60) grade=" 及格 " else grade=" 不及格 " alert(" 根据学生成绩 :" + score +", 评定为 :" + grade); </script> 实验内容五: JavaScript 循环结构程序设计 教师演示 JavaScript 循环结构程序设计的程序案例,学生按照教师的操作步骤,自己编写该程序。 1 、循环结构程序案例 1 求 1+2+3+100 的累计和 <script language=javascript> var i,sum=0; for(i=1;i<=100;i+) sum += i; document.write("1+2+3+.+100="+sum); </script> 2 、循环结构程序案例 2 二位整数相加的测试程序 <script language=javascript> var go_on,x,y,result,answer do x = Math.floor(Math.random() *90)+10; y = Math.floor(Math.random() *90)+10; result = x+y; answer = parseFloat(prompt(x + "+" + y + "=","0"); go_on = confirm(answer=result)?" 答对 ":" 答错 ") +" ! t 继续测试吗 ?") while(go_on) </script> 3 、循环结构程序案例 3 累加用户输入的整数 <script language=javascript> var input,input_number,sum for(sum=0;) input = prompt("sum="+sum + "n 请输入新的累加数 ( 输入 Q 结束 ):","0"); if (input=null | input="Q" | input="q") break; if (isNaN(input) continue; input_number = parseFloat(input); if (input_number<=0) continue; sum += input_number; alert("sum="+sum); </script> 4 、思考题: 在页面上显示一个 “9 × 9 乘法表 ” 。 <script language=javascript> var i,j document.write("<PRE>") for(i=1;i<=9;i+) for(j=1;j<=i;j+) if(j>1) document.write("t"); document.write(j+"×"+i+"="+j*i); document.writeln(); document.write("</PRE>") </script> 实验项目2内置函数和对象7 、思考题:判断用户输入的字符是不是数字,如果是,分别将其转换成浮点数和整数,并显示到网页上。 <script language=javascript> var input = prompt(" 请输入字符! ",""); alert(isNaN(input)?" 你输入的不是数字 ":" 你输入的是数字 "); if(!isNaN(input) document.write(parseInt(input)+"<br>"); document.write(parseFloat(input); </script> 实验内容二: JavaScript 内置对象的应用 5 、思考题:设计 javascript 程序,在网页上随机显示 10 个两位整数。 <script language=javascript> for(i=1;i<=10;i+) var number = Math.floor(Math.random()*90)+10; document.write(" 随机数 "+i+" : "+number+"<br>"); </script> 三、 Date 对象 4 、思考题:在网页上显示当前日期和时间,并显示是星期几 。 <script language=javascript> var week,today,week_i; week=new Array(" 星期日 "," 星期一 "," 星期二 "," 星期三 "," 星期四 "," 星期五 "," 星期六 "); today=new Date(); year=today.getYear();/ 年 month=today.getMonth()+1;/ 月 date=today.getDate();/ 日 hour=today.getHours();/ 小时 minute=today.getMinutes();/ 分 second=today.getSeconds();/ 秒 week_i=today.getDay(); document.write(year+" 年 "+month+" 月 "+date+" 日 "+"t"); document.write(hour+":"+minute+":"+second+"t"+weekweek_i) </script> 五、 String 对象 5 、 String 对象的最常用属性和方法 length 、 toLowerCase() 、 toUpperCase() 、 charAt(index) 、 substr(start,len) 6 、程序案例 2_4 : String 对象的常用方法 <script language=javascript> var mystr = "look at this" document.writeln(mystr.charAt(5); document.writeln(mystr.substring(5,7); document.writeln(mystr.toUpperCase(); document.writeln(mystr.indexOf("oo"); </script> 7 、思考题:将用户输入的字符串反向输出到页面上,并且要求将其中的小写字母转换为大写字母。例如,如果输入 ”abc123” ,则输出 ”321CBA” 。 <script language=javascript> var 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); </script> 六、 Array 对象 3 、 forin 语句 用 forin 语句处理数组,可以依次对数组中的每个数组元素执行一条或多条语句。 forin 的格式是: for( 变量 in 数组 ) 循环体语句 ; 4 、程序案例 2_5 :使用 forin 语句,显示数组的值 。 <script language=javascript> var classmates,i; classmates = new Array(" 张月 "," 李良 "," 王力 "," 何芳 "); for(i in classmates) document.write(" 第 "+(parseInt(i)+1)+" 个同学是 :"+classmatesi+"<BR>"); </script> 实验内容三: JavaScript 内置对象的应用 3 、程序案例 3_1 :设计一个有三个超链接的页面,单击这些链接时分别打开和关闭新窗口,以及关闭本身窗口 <SCRIPT language="javascript"> var newwin; function opennewwin() newwin=open("new.htm","myWindow", "height=100,width=400,top=10,left=0,toolbar=no,menubar=no," + "scrollbars=no,resizable=no,location=no,status=no"); function closenewwin() newwin.close(); </SCRIPT> </HEAD> <BODY> <P><A href="javascript:opennewwin()"> 打开新窗口 </A></P> <P><A href="javascript:closenewwin()"> 关闭新窗口 </A></P> <P><A href="javascript:close()"> 关闭本窗口 </A></P> 6 、思考题:设计一个页面,当这个页面显示后 3 秒内用户没有移动过鼠标,将自动显示另一个页面。 <SCRIPT language="javascript"> var timeout; function window_onload() timeout=setTimeout("navigate('');",3000); function window_onmousemove() clearTimeout(timeout); </SCRIPT> </HEAD> <body onmousemove="window_onmousemove()" onload="window_onload()"> </body></html>二、文档 (document) 对象 1 、 document 对象的属性和方法 案例 3_4 :设计一个页面,显示 document 对象中的一些属性。 <SCRIPT language="javascript"> document.write(" 当前文档的标题 :"+document.title+"<BR>"); document.write(" 当前文档的 URL:"+document.URL+"<BR>"); document.write(" 当前文档的背景色 :"+document.bgColor+"<BR>"); document.write(" 当前文档的最后修改日期 :"+document.lastModified+"<BR>"); document.write(" 当前文档包含 "+document.links.length+" 个超链接 <BR>"); document.write(" 当前文档包含 "+document.images.length+" 个图像 <BR>"); </SCRIPT> 2 、使用 all 属性访问 HTML 元素 在 document 对象中, all 是一个非常特殊的属性。通过它,可以访问文档中的所有 HTML 元素对象。 3 、案例 3_5 :显示当前 HTML 文档中出现的所有标记。 <script language=javascript> var i,cell; for(i=0;i<document.all.length;i+) / 遍历文档中的所有标记 cell=document.alli; if(i>0) document.write(","); document.write(cell.tagName); </script> 三、表单对象 2 、表单处理 ( 3 )程序案例 3_7 :设计一个表单,该表单有姓名和某种卡号两个文本输入框,其中这种卡号的格式为 XXXX-XXXX-XXXX-XXXX( 每个 X 代表一位数字 ) ,要求在用户单击提交按钮 “ 发送 ” 之前验证这两个输入数据的有效性。 <SCRIPT Language="javascript"> function validate() if(!checkName(document.myform.myname.value) return false; if(!checkNum(document.myform.mynumber.value) return false; alert(" 数据完全 "); return true; function checkName(s) var ok = (s.length>0); if(!ok) alert(" 名字输入有误,请查核! ") return ok; function checkNum(n) var ok,i,ch; ok = (n.charAt(4)="-" && n.charAt(9)="-" && n.charAt(14)="-"); if(!ok) alert("<"+n+"> 卡号输入有误,请查核! "); return false; i=0; while(i<19) ch = n.charAt(i); if (ch!="-" && (ch > "9" | ch < "0") alert("<"+n+"> 卡号输入有误,查核! ") return false; i+; return true; </SCRIPT> 实验内容一:浏览器事件及处理 1、 load 事件:发生在浏览器完成网页的加载之后。 <BODY onload="alert(' 欢迎访问我的主页! ')"> 欢迎访问我的主页! </BODY> 2、 unload 事件:发生在浏览器载入新网页之前。 3、submit 事件:发生在提交表单数据给服务器处理时。 <script language="javascript"> function checkit() / 数据验证函数 var strval = document.myform.mytext.value; var intval = parseInt(strval); if(0 < intval && intval < 10) alert(" 提交成功! "); return true; else alert(" 输入值 " + strval + " 超过了允许的范围! "); return false; </script> 4. Click 事件:发生在表单上某个对象被单击时 <script language=javascript> function hello_girl() alert(" 小姐 , 您好 !"); function hello_boy() alert(" 先生,你好! "); </script></HEAD> <BODY> <FORM name="form1"> <INPUT type="button" value=" 问侯先生 " name="hello1" onclick="hello_boy();"></P> <INPUT type="button" value=" 问侯小姐 " name="hello2" onclick="hello_girl();"></P> </FORM> </BODY> 实验内容四: 其他事件及处理 1. Change 事件:文本输入框失去焦点,同时其中的值发生改变时。 <html> <head> <title>chang 事件处理 </title> <script language="javascript"> function change() var curform = document.all.myform; curform.money.value=curform.country.optionscurform.country.selectedIndex.value; </script> </head> <body> <form name="myform"> <p> 人民币和各种外汇比价折算。 </p> <b> 请选择一种外汇 .</b><br> <p> <select name="country" onchange="change()"> <option value="7.80"> 美元 </option> <option value="12.00"> 英镑 </option> <option value="10.00"> 欧元 </option> <option value="0.30"> 日元 </option> </select> 一元这样的外币可以兑换 <input type="text" name="money" value="0"> 元人民币 </p> </form> </body> </html> 2. Select 事件:选定文本输入框的一段文本后