JavaScript实验实训内容
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</script>
</BODY></HTML>
实验八
实验目的：内置对象的使用。
实验内容：
4．求PI的5次方，并四舍五入取整。
S06_04.HTM
<HTML><HEAD><TITLE>使用Math对象</TITLE>
<scriptlanguage=javascript>
alert(Math.round(Math.pow(Math.PI,5)));
<INPUTtype="button"value="问侯小姐"name="hello2"onclick="returnhello_girl();"></P>
</FORM>
</BODY></HTML>
实验五
实验目的：内置对象的使用。
实验内容：
1．在页面中显示当天日期。
S06_03.HTM：
<HTML><HEAD><TITLE>使用new运算符</TITLE></HEAD>
JavaScript表达式和逻辑控制语句的使用
实验一
一．实验目的
掌握JavaScript的变量；
掌握JavaScript的数据类型；
掌握JavaScript的运算符；
掌握JavaScript的逻辑控制语句。
二．实验内容
1、声明一个变量str，为其赋值"HelloWorld!"，显示该值；
改变该变量值为"HelloChina!"，然后再显示该值。
document.write("共有"+nb+"个数");
//-->
</script>
</pre>
</body>
</html>
实验三
实验目的：常用函数的使用。
实验内容：
利用全局变量和函数，设计模拟幸运数字机游戏。设幸运数字为8，每次由计算机随机生成3个1~9之间的随机数，当这3个随机数中有一个数字为8时，就算赢了一次。
</script>
</HEAD><BODY></BODY></HTML>
实验七
实验目的：内置对象的使用。
实验内容：
3．将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换成大写字母。
S06_07.HTM
<HTML><HEAD><TITLE>使用String</TITLE></HEAD><BODY>
<scriptlanguage=javascript>
varorigin_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));
二．实验内容
1、任意输入一个字符串，单击“确定”按钮，输出字符串的长度。
2、猜数游戏，实现效果如下：
3、设计实现一个带开关的时钟。
JavaScript事件的理解和使用
实验十一
一．实验目的
掌握JavaScript的常用的事件；
掌握JavaScript事件的处理方式；
了解如何通过HTML属性和JavaScript属性处理事件；
<head>
<scriptlanguage=javascript>
<!--
functionIsThatNumber(x)
{
returnx%3==0&&x%5==0&&x%7==0;
}
//-->
</script>
</head>
<body>
<pre><scriptlanguage=javascript>
二．实验内容
1、设计实现一个页面，当进入页面时提示“您好，欢迎光临”，当离开页面时提示“您好，欢迎您下次再来”。
2、设计实现如下页面，要求
（1）单击“提交”按钮时逐一验证页面各项信息不允许为空；
（2）如果哪一项信息不满足要求，页面焦点停留在该信息处；
（3）单击“重置”按钮时，将页面各项元素信息清空。
varmyDate=newDate();//当天的日期
varsYear=myDate.getFullYear();//年
varsMonth=myDate.getMonth()+1;//月
varsDate=myDate.getDate();//日
varsDay=sWeek[myDate.getDay()];//星期
</script>
</HEAD><BODY></BODY></HTML>
实验九
实验目的：内置对象的使用。
实验内容：
5．由图像表示日期。
ch3_14.htm
<scriptlanguage="JavaScript"><!--
varsWeek=newArray("日","一","二","三","四","五","六");
functionhello_girl()
{
alert("小姐,您好!");
}
</script>
</HEAD>
<BODY>
<FORMname="form1">
<INPUTtype="button"value="问侯先生"name="hello1"onclick="alert('先生,您好!');"></P>
<!--
returndocument_onmousemove()
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORMid="form1">
<P><INPUTtype="text"name="txtMousePosition"size="20"></P>
</FORM>
</BODY>
</HTML>
Ex050309.html
<HTML>
<HEAD>
<METAname="GENERATOR"content="MicrosoftFrontPage5.0">
<METAname="ProgId"content="FrontPage.Editor.Document">
<SCRIPTlanguage="javascript">
2、设计实现如下页面：
（1）输入学生信息后，单击“提交”按钮，页面呈现方式如下：
（2）单击“复位”按钮，页面呈现方式如下：
实验十三
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
设计一个含有一个表单的页面，并且在表单上放入一个文本框。编写程序，当鼠标在页面上移动时，鼠标的坐标将显示在这个文本框中。
varwin_rate=0;//赢率
varplay_times=0;//总次数
varwins=0;//赢的次数
varlast_digits;//上次数字串
varlast_win;//上次是否赢?
<!--
functionPlayOnce()
{//模拟玩一次数字机游戏
vari,digit;
play_times++;
ret+='<imgsrc="'+s.charAt(i)+'.gif">';
}
returnret;
}
//--></script>
JavaScript对象的理解和使用
实验十
一．实验目的
掌握JavaScript的常用的对象类型；
掌握JavaScript对象属性和方法的引用方式；
了解JavaScript对象的常用属性和方法；
<BODY>
<scriptlanguage=javascript>
vartoday;
today=newDate();
document.write("今天是"+today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日");
</script>
ex070303.htm
<HTML>
<HEAD>
<SCRIPTid="clientEventHandlersJS"language="javascript">
<!--
functiondocument_onmousemove()
{
=
}
//-->
</SCRIPT>
<SCRIPTlanguage="javascript"for="document"event="onmousemove">
if(s<10)return"0"+s;
elsereturns;
}
//将数转换为图像，注意，在本文件的相同目录下已有0－9的图像文件，文件名为0.gif，1.gif……以此类推
functionimageDigits(s){
varret="";
vars=newString(s);
for(vari=0;i<s.length;i++){
last_digits="";
last_win=false;
for(i=0;i<3;i++)
{
digit=Math.floor(Math.random()*9)+1;
last_digits+=digit;
if(digit==8)last_win=true;
}
if(last_win)wins++;
win_rate=Math.floor(100*(wins/play_times));
document.write(imageDigits(sYear)+" "+
imageDigits(sMonth)+" "+
imageDigits(sDate)+"<br>");
//如果输入数是1位数，在十位数上补0
functionformatTwoDigits(s){
while(current>-1){
//o为"需要移动"列表中当前选择项对象
varo=fromList.options[current];
functionmoveList(from,to){
varfromList=
varfromLen=
vartoList=
vartoLen=
//current为"需要移动"列表中的当前选项序号
varcurrent=fromList.selectedIndex;
//如果"需要移动"列表中有选择项，则进行移动操作
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<PRE><SCRIPTlanguage="javascript">
<!--
while(true)
{
PlayOnce();
if(!confirm(last_digits+"\n"+(last_win?"赢":"输")+"\n胜率"+win_rate+"%,继续吗?"))break;
2、将1~10之间的奇偶数分开，页面呈现方式如下：
3、任意输入一个年份，判断是否为闰年。
实验二函数部分
一．实验目的
掌握JavaScript的常用函数；
二．实验内容
编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7整除的证书，并要求每行显示6个这样的数。
ex050303.htm
<html>
</BODY></HTML>
实验六
实验目的：内置对象的使用。
实验内容：
2．在浏览器窗口的状态栏中显示当前浏览器的版本信息。
S06_02.HTM
<HTML><HEAD><TITLE>访问对象的属性</TITLE>
<scriptlanguage=javascript>
window.status=navigator.appVersion;
<!--
varn,nb=0;
for(n=1;n<1000;n++)
{
if(IsThatNumber(n))
{
if(nb%6>0)document.write(",");
nb++;
document.write(n);
if(nb%6==0)document.write("\n");
}
}ห้องสมุดไป่ตู้
document.write("\n\n");
1．在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。
ch4_07.htm
<html>
<head>
<scriptlanguage="JavaScript"><!--
//moveList用于对两个多选列表进行选项的移动操作
//from为"需要移动"的列表名称，to为"移动到"列表名称
}
//-->
</SCRIPT>
</PRE>
</BODY>
</HTML>
事件与对象
实验四
实验目的：表单的设计。
实验内容：设计一个表单，放入两个按钮，单击它们时将显示不同问候语。
S07_02.HTM
<HTML><HEAD><TITLE>处理事件-HTML标记方式</TITLE>
<scriptlanguage=javascript>
JavaScript的浏览器对象模型
实验十二
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
1、设计实现如下页面：
（1）单击“修改年龄”按钮，弹出一个对话框：
（2）单击“确定”按钮，将文本框内的年龄信息改为用户重新输入的信息；
（3）单击“取消”按钮提示用户“您按了’取消’按钮”。
</BODY></HTML>
实验八
实验目的：内置对象的使用。
实验内容：
4．求PI的5次方，并四舍五入取整。
S06_04.HTM
<HTML><HEAD><TITLE>使用Math对象</TITLE>
<scriptlanguage=javascript>
alert(Math.round(Math.pow(Math.PI,5)));
<INPUTtype="button"value="问侯小姐"name="hello2"onclick="returnhello_girl();"></P>
</FORM>
</BODY></HTML>
实验五
实验目的：内置对象的使用。
实验内容：
1．在页面中显示当天日期。
S06_03.HTM：
<HTML><HEAD><TITLE>使用new运算符</TITLE></HEAD>
JavaScript表达式和逻辑控制语句的使用
实验一
一．实验目的
掌握JavaScript的变量；
掌握JavaScript的数据类型；
掌握JavaScript的运算符；
掌握JavaScript的逻辑控制语句。
二．实验内容
1、声明一个变量str，为其赋值"HelloWorld!"，显示该值；
改变该变量值为"HelloChina!"，然后再显示该值。
document.write("共有"+nb+"个数");
//-->
</script>
</pre>
</body>
</html>
实验三
实验目的：常用函数的使用。
实验内容：
利用全局变量和函数，设计模拟幸运数字机游戏。设幸运数字为8，每次由计算机随机生成3个1~9之间的随机数，当这3个随机数中有一个数字为8时，就算赢了一次。
</script>
</HEAD><BODY></BODY></HTML>
实验七
实验目的：内置对象的使用。
实验内容：
3．将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换成大写字母。
S06_07.HTM
<HTML><HEAD><TITLE>使用String</TITLE></HEAD><BODY>
<scriptlanguage=javascript>
varorigin_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));
二．实验内容
1、任意输入一个字符串，单击“确定”按钮，输出字符串的长度。
2、猜数游戏，实现效果如下：
3、设计实现一个带开关的时钟。
JavaScript事件的理解和使用
实验十一
一．实验目的
掌握JavaScript的常用的事件；
掌握JavaScript事件的处理方式；
了解如何通过HTML属性和JavaScript属性处理事件；
<head>
<scriptlanguage=javascript>
<!--
functionIsThatNumber(x)
{
returnx%3==0&&x%5==0&&x%7==0;
}
//-->
</script>
</head>
<body>
<pre><scriptlanguage=javascript>
二．实验内容
1、设计实现一个页面，当进入页面时提示“您好，欢迎光临”，当离开页面时提示“您好，欢迎您下次再来”。
2、设计实现如下页面，要求
（1）单击“提交”按钮时逐一验证页面各项信息不允许为空；
（2）如果哪一项信息不满足要求，页面焦点停留在该信息处；
（3）单击“重置”按钮时，将页面各项元素信息清空。
varmyDate=newDate();//当天的日期
varsYear=myDate.getFullYear();//年
varsMonth=myDate.getMonth()+1;//月
varsDate=myDate.getDate();//日
varsDay=sWeek[myDate.getDay()];//星期
</script>
</HEAD><BODY></BODY></HTML>
实验九
实验目的：内置对象的使用。
实验内容：
5．由图像表示日期。
ch3_14.htm
<scriptlanguage="JavaScript"><!--
varsWeek=newArray("日","一","二","三","四","五","六");
functionhello_girl()
{
alert("小姐,您好!");
}
</script>
</HEAD>
<BODY>
<FORMname="form1">
<INPUTtype="button"value="问侯先生"name="hello1"onclick="alert('先生,您好!');"></P>
<!--
returndocument_onmousemove()
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORMid="form1">
<P><INPUTtype="text"name="txtMousePosition"size="20"></P>
</FORM>
</BODY>
</HTML>
Ex050309.html
<HTML>
<HEAD>
<METAname="GENERATOR"content="MicrosoftFrontPage5.0">
<METAname="ProgId"content="FrontPage.Editor.Document">
<SCRIPTlanguage="javascript">
2、设计实现如下页面：
（1）输入学生信息后，单击“提交”按钮，页面呈现方式如下：
（2）单击“复位”按钮，页面呈现方式如下：
实验十三
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
设计一个含有一个表单的页面，并且在表单上放入一个文本框。编写程序，当鼠标在页面上移动时，鼠标的坐标将显示在这个文本框中。
varwin_rate=0;//赢率
varplay_times=0;//总次数
varwins=0;//赢的次数
varlast_digits;//上次数字串
varlast_win;//上次是否赢?
<!--
functionPlayOnce()
{//模拟玩一次数字机游戏
vari,digit;
play_times++;
ret+='<imgsrc="'+s.charAt(i)+'.gif">';
}
returnret;
}
//--></script>
JavaScript对象的理解和使用
实验十
一．实验目的
掌握JavaScript的常用的对象类型；
掌握JavaScript对象属性和方法的引用方式；
了解JavaScript对象的常用属性和方法；
<BODY>
<scriptlanguage=javascript>
vartoday;
today=newDate();
document.write("今天是"+today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日");
</script>
ex070303.htm
<HTML>
<HEAD>
<SCRIPTid="clientEventHandlersJS"language="javascript">
<!--
functiondocument_onmousemove()
{
=
}
//-->
</SCRIPT>
<SCRIPTlanguage="javascript"for="document"event="onmousemove">
if(s<10)return"0"+s;
elsereturns;
}
//将数转换为图像，注意，在本文件的相同目录下已有0－9的图像文件，文件名为0.gif，1.gif……以此类推
functionimageDigits(s){
varret="";
vars=newString(s);
for(vari=0;i<s.length;i++){
last_digits="";
last_win=false;
for(i=0;i<3;i++)
{
digit=Math.floor(Math.random()*9)+1;
last_digits+=digit;
if(digit==8)last_win=true;
}
if(last_win)wins++;
win_rate=Math.floor(100*(wins/play_times));
document.write(imageDigits(sYear)+" "+
imageDigits(sMonth)+" "+
imageDigits(sDate)+"<br>");
//如果输入数是1位数，在十位数上补0
functionformatTwoDigits(s){
while(current>-1){
//o为"需要移动"列表中当前选择项对象
varo=fromList.options[current];
functionmoveList(from,to){
varfromList=
varfromLen=
vartoList=
vartoLen=
//current为"需要移动"列表中的当前选项序号
varcurrent=fromList.selectedIndex;
//如果"需要移动"列表中有选择项，则进行移动操作
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<PRE><SCRIPTlanguage="javascript">
<!--
while(true)
{
PlayOnce();
if(!confirm(last_digits+"\n"+(last_win?"赢":"输")+"\n胜率"+win_rate+"%,继续吗?"))break;
2、将1~10之间的奇偶数分开，页面呈现方式如下：
3、任意输入一个年份，判断是否为闰年。
实验二函数部分
一．实验目的
掌握JavaScript的常用函数；
二．实验内容
编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7整除的证书，并要求每行显示6个这样的数。
ex050303.htm
<html>
</BODY></HTML>
实验六
实验目的：内置对象的使用。
实验内容：
2．在浏览器窗口的状态栏中显示当前浏览器的版本信息。
S06_02.HTM
<HTML><HEAD><TITLE>访问对象的属性</TITLE>
<scriptlanguage=javascript>
window.status=navigator.appVersion;
<!--
varn,nb=0;
for(n=1;n<1000;n++)
{
if(IsThatNumber(n))
{
if(nb%6>0)document.write(",");
nb++;
document.write(n);
if(nb%6==0)document.write("\n");
}
}ห้องสมุดไป่ตู้
document.write("\n\n");
1．在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。
ch4_07.htm
<html>
<head>
<scriptlanguage="JavaScript"><!--
//moveList用于对两个多选列表进行选项的移动操作
//from为"需要移动"的列表名称，to为"移动到"列表名称
}
//-->
</SCRIPT>
</PRE>
</BODY>
</HTML>
事件与对象
实验四
实验目的：表单的设计。
实验内容：设计一个表单，放入两个按钮，单击它们时将显示不同问候语。
S07_02.HTM
<HTML><HEAD><TITLE>处理事件-HTML标记方式</TITLE>
<scriptlanguage=javascript>
JavaScript的浏览器对象模型
实验十二
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
1、设计实现如下页面：
（1）单击“修改年龄”按钮，弹出一个对话框：
（2）单击“确定”按钮，将文本框内的年龄信息改为用户重新输入的信息；
（3）单击“取消”按钮提示用户“您按了’取消’按钮”。