JavaScript实验实训内容.docx
《JavaScript实验实训内容.docx》由会员分享，可在线阅读，更多相关《JavaScript实验实训内容.docx（31页珍藏版）》请在冰豆网上搜索。
JavaScript实验实训内容
JavaScript表达式和逻辑控制语句的使用
实验一
一．实验目的
掌握JavaScript的变量；
掌握JavaScript的数据类型；
掌握JavaScript的运算符；
掌握JavaScript的逻辑控制语句。
二．实验内容
1、声明一个变量str，为其赋值"HelloWorld!
"，显示该值；
改变该变量值为"HelloChina!
"，然后再显示该值。
2、将1~10之间的奇偶数分开，页面呈现方式如下：
3、任意输入一个年份，判断是否为闰年。
实验二函数部分
一．实验目的
掌握JavaScript的常用函数；
二．实验内容
编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7整除的证书，并要求每行显示6个这样的数。
ex050303.htm
--
functionIsThatNumber（x）
{
returnx%3==0&&x%5==0&&x%7==0;
}
//-->
--
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"）;
document.write（"共有"+nb+"个数"）;
//-->
实验三
实验目的：
常用函数的使用。
实验内容：
利用全局变量和函数，设计模拟幸运数字机游戏。
设幸运数字为8，每次由计算机随机生成3个1~9之间的随机数，当这3个随机数中有一个数字为8时，就算赢了一次。
Ex050309.html
varwin_rate=0;//赢率
varplay_times=0;//总次数
varwins=0;//赢的次数
varlast_digits;//上次数字串
varlast_win;//上次是否赢?
--
functionPlayOnce（）
{//模拟玩一次数字机游戏
vari,digit;
play_times++;
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））;
}
//-->
--
while（true）
{
PlayOnce（）;
if（!
confirm（last_digits+"\n"+（last_win?
"赢":
"输"）+"\n胜率"+win_rate+"%,继续吗?
"））break;
}
//-->
事件与对象
实验四
实验目的：
表单的设计。
实验内容：
设计一个表单，放入两个按钮，单击它们时将显示不同问候语。
S07_02.HTM
处理事件-HTML标记方式
functionhello_girl（）
{
alert（"小姐,您好!
"）;
}
'）;">
实验五
实验目的：
内置对象的使用。
实验内容：
1．在页面中显示当天日期。
S06_03.HTM：
使用new运算符
vartoday;
today=newDate（）;
document.write（"今天是"+today.getFullYear（）+"年"+（today.getMonth（）+1）+"月"+today.getDate（）+"日"）;
实验六
实验目的：
内置对象的使用。
实验内容：
2．在浏览器窗口的状态栏中显示当前浏览器的版本信息。
S06_02.HTM
访问对象的属性
window.status=navigator.appVersion;
实验七
实验目的：
内置对象的使用。
实验内容：
3．将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换成大写字母。
S06_07.HTM
使用String
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））;
实验八
实验目的：
内置对象的使用。
实验内容：
4．求PI的5次方，并四舍五入取整。
S06_04.HTM
使用Math对象
alert（Math.round（Math.pow（Math.PI,5）））;
实验九
实验目的：
内置对象的使用。
实验内容：
5．由图像表示日期。
ch3_14.htm
--
varsWeek=newArray（"日","一","二","三","四","五","六"）;
varmyDate=newDate（）;//当天的日期
varsYear=myDate.getFullYear（）;//年
varsMonth=myDate.getMonth（）+1;//月
varsDate=myDate.getDate（）;//日
varsDay=sWeek[myDate.getDay（）];//星期
document.write（imageDigits（sYear）+" "+
imageDigits（sMonth）+" "+
imageDigits（sDate）+"
"）;
//如果输入数是1位数，在十位数上补0
functionformatTwoDigits（s）{
if（s<10）return"0"+s;
elsereturns;
}
//将数转换为图像，注意，在本文件的相同目录下已有0－9的图像文件，文件名为0.gif，1.gif……以此类推
functionimageDigits（s）{
varret="";
vars=newString（s）;
for（vari=0;iret+='';
}
returnret;
}
//-->
JavaScript对象的理解和使用
实验十
一．实验目的
掌握JavaScript的常用的对象类型；
掌握JavaScript对象属性和方法的引用方式；
了解JavaScript对象的常用属性和方法；
二．实验内容
1、任意输入一个字符串，单击“确定”按钮，输出字符串的长度。
2、猜数游戏，实现效果如下：
3、设计实现一个带开关的时钟。
JavaScript事件的理解和使用
实验十一
一．实验目的
掌握JavaScript的常用的事件；
掌握JavaScript事件的处理方式；
了解如何通过HTML属性和JavaScript属性处理事件；
二．实验内容
1、设计实现一个页面，当进入页面时提示“您好，欢迎光临”，当离开页面时提示“您好，欢迎您下次再来”。
2、设计实现如下页面，要求
（1）单击“提交”按钮时逐一验证页面各项信息不允许为空；
（2）如果哪一项信息不满足要求，页面焦点停留在该信息处；
（3）单击“重置”按钮时，将页面各项元素信息清空。
JavaScript的浏览器对象模型
实验十二
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
1、设计实现如下页面：
（1）单击“修改年龄”按钮，弹出一个对话框：
（2）单击“确定”按钮，将文本框内的年龄信息改为用户重新输入的信息；
（3）单击“取消”按钮提示用户“您按了’取消’按钮”。
2、设计实现如下页面：
（1）输入学生信息后，单击“提交”按钮，页面呈现方式如下：
（2）单击“复位”按钮，页面呈现方式如下：
实验十三
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
设计一个含有一个表单的页面，并且在表单上放入一个文本框。
编写程序，当鼠标在页面上移动时，鼠标的坐标将显示在这个文本框中。
ex070303.htm
--
functiondocument_onmousemove（）
{
}
//-->
--
returndocument_onmousemove（）
//-->
1．在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。
反之亦然。
ch4_07.htm
--
//moveList用于对两个多选列表进行选项的移动操作
//from为"需要移动"的列表名称，to为"移动到"列表名称
functionmoveList（from,to）{
var
//current为"需要移动"列表中的当前选项序号
varcurrent=fromList.selectedIndex;
//如果"需要移动"列表中有选择项，则进行移动操作
while（current>-1）{
//o为"需要移动"列表中当前选择项对象
varo=fromList.options[current];
vart=o.text;
varv=o.value;
//根据已选项新建一个列表选项
varoptionName=newOption（t,v,false,false）;
//将该选项添加到"移动到"列表中
toList.options[toLen]=optionName;
toLen++;
//将该选项从"需要移动"列表中清除
fromList.options[current]=null;
current=fromList.selectedIndex;
}
}
//-->
50px;">
| --通过事件onclick调用JavaScript的moveList函数--> >"onclick="moveList（'leftList','rightList'）">
| 50px;">
|
实验十四
一．实验目的：
掌握表单的应用
二．实验内容
设计一个有3个超链接的页面，单击这些链接时分别打开和关闭窗口以及关闭本身窗口。
S08_01.HTM
打开和关闭窗口
varnewwin;
functionopennewwin（）
{
"height=100,width=400,top=10,left=0,toolbar=no,menubar=no,"+
"scrollbars=no,resizable=no,location=no,status=no"）;
}
functionclosenewwin（）
{
newwin.close（）;
}
opennewwin（）">打开新窗口
closenewwin（）">关闭新窗口
close（）">关闭本窗口
2．设计一个表单，该表单有姓名和某种卡号两个文本输入框，其中这种卡号的格式为“XXXX-XXXX-XXXX-XXXX”（每个X代表一个数字），要求用户单击提交按钮之前验证这两个输入数据的有效性。
S08_11.HTM
验证表单
functionvalidate（）
{
alert（"数据完全"）;
returntrue;
}
functioncheckName（s）
{
varok=（s.length>0）;
if（!
ok）alert（"名字输入有误，请查核！
"）
returnok;
}
functioncheckNum（n）
{
varok,i,ch;
ok=（n.charAt（4）=="-"&&n.charAt（9）=="-"&&n.charAt（14）=="-"）;
if（!
ok）
{
alert（"<"+n+">卡号输入有误，请查核！
"）;
returnfalse;
}
i=0;
while（i<19）
{
ch=n.charAt（i）;
if（ch!
="-"&&（ch>"9"||ch<"0"））{
alert（"<"+n+">卡号输入有误，查核！
"）
returnfalse;
}
i++;
}
returntrue;
}
姓名：
卡号：
3．设计3个按钮，当单击他们时分别使页面的背景色变成红、蓝和绿色。
S08_13.HTM
使用按钮
functionChangeBgColor（new_bgcolor）
{
document.bgColor=new_bgcolor;
}
实验十五
一．实验目的
掌握表单的验证
二．实验内容
表单验证
单击.html
functioncheck（）
{
varinst="爱好：
";
{
alert（"请输入姓名！
"）;
}
else
{
elsealert（"性别：
女"）;
if（inst=="爱好：
"）
alert（"赶快培养一个爱好吧！
"）;
else
alert（inst）;
}
}
请输入您的姓名：
请选择您的性别：
男
女
请选择您的爱好：
游泳
滑冰
散步
JavaScript的应用与实践
实验十六
一．实验目的
掌握JavaScript的综合应用。
二．实验内容
1、设计实现如下页面：
要求：
（1）“姓名”、“学号”要求输入本人的真实姓名与学号；
（2）“年龄”要求验证不允许为空，且只能是小于100的正整数；
（3）“出生日期”要求验证年不允许为空，且只能为4位数字；
（4）“身份证号”要求验证不允许为空，且为有效的身份证号；
（5）“家庭住址”要求验证不允许为空，且最大长度为50个字符，且需验证只能为中文、数字和字母；
（6）“性别”、“班级”、“课程”要求验证不允许为空；
（7）“兴趣”要求设置为高3行、宽30列，最大输入长度为200，且需验证不允许为空，且只能为中文、字母、符号。
浏览器对象
1．设计一个表单，可以
升级会员 