JavaScript实验实训内容.docx

JavaScript实验实训内容.docx

《JavaScript实验实训内容.docx》由会员分享，可在线阅读，更多相关《JavaScript实验实训内容.docx（50页珍藏版）》请在冰豆网上搜索。

JavaScript实验实训内容

JavaScript表达式和逻辑控制语句的使用

实验一

一．实验目的

掌握JavaScript的变量；

掌握JavaScript的数据类型；

掌握JavaScript的运算符；

掌握JavaScript的逻辑控制语句。

二．实验内容

1、声明一个变量str，为其赋值"HelloWorld!

"，显示该值；

改变该变量值为”HelloChina!

"，然后再显示该值。

2、将1～10之间的奇偶数分开，页面呈现方式如下：

3、任意输入一个年份，判断是否为闰年。

实验二函数部分

一．实验目的

掌握JavaScript的常用函数；

二．实验内容

编写一个函数,在页面上输出1～1000之间所有能同时被3，5，7整除的证书,并要求每行显示6个这样的数。

ex050303。

htm

〈html>

〈scriptlanguage=javascript>

〈!

—-

functionIsThatNumber（x）

｛

returnx%3==0＆＆x％5==0＆&x%7==0;

｝

//—-〉

〈pre〉

〈！

——

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+"个数”）；

//—->

〈/script>

〈/pre〉

〈/body〉

〈/html〉

实验三

实验目的：

常用函数的使用。

实验内容：

利用全局变量和函数，设计模拟幸运数字机游戏。

设幸运数字为8，每次由计算机随机生成3个1～9之间的随机数，当这3个随机数中有一个数字为8时，就算赢了一次。

Ex050309。

html

Editor.Document”>

〈SCRIPTlanguage=”javascript”〉

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））；

}

//—->

〈/SCRIPT>

〈/HEAD>

〈！
——
while（true）
｛
PlayOnce（）；
if（！
confirm（last_digits+"\n"+（last_win?
”赢”：
”输"）+”\n胜率"+win_rate+"％,继续吗？
"））break；
｝
//-—>
〈/SCRIPT>
〈/HTML〉
事件与对象
实验四
实验目的：
表单的设计.
实验内容：
设计一个表单，放入两个按钮，单击它们时将显示不同问候语。
S07_02.HTM
〈TITLE〉处理事件-HTML标记方式
〈scriptlanguage=javascript〉
functionhello_girl（）
{
alert（"小姐，您好！
"）；
｝
〈/script〉
〈/HEAD>
〈BODY>
'）；"〉
〈INPUTtype="button"value="问侯小姐"name="hello2”onclick=”returnhello_girl（）;">
〈/FORM〉
〈/BODY>
实验五
实验目的：
内置对象的使用。
实验内容：
1．在页面中显示当天日期。
S06_03.HTM：
〈HTML〉〈HEAD〉〈TITLE>使用new运算符〈/TITLE>〈/HEAD〉
〈scriptlanguage=javascript〉
vartoday；
today=newDate（）;
document.write（"今天是"+today。
getFullYear（）+"年"+（today.getMonth（）+1）+”月"+today.getDate（）+"日"）；
〈/BODY〉〈/HTML>
实验六
实验目的：
内置对象的使用。
实验内容：
2．在浏览器窗口的状态栏中显示当前浏览器的版本信息。
S06_02.HTM
〈scriptlanguage=javascript〉
window.status=navigator。
appVersion;
〈/script>
〈/HEAD>
实验七
实验目的：
内置对象的使用。
实验内容：
3．将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换成大写字母。
S06_07.HTM
〈HTML〉〈HEAD>
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
〈HEAD〉〈TITLE〉使用Math对象
〈scriptlanguage=javascript〉
alert（Math.round（Math。
pow（Math.PI，5）））;
〈BODY>〈/BODY〉〈/HTML>
实验九
实验目的：
内置对象的使用。
实验内容:
5．由图像表示日期。
ch3_14。
htm
〈scriptlanguage=”JavaScript">〈!
—-
varsWeek=newArray（"日","一”,”二”,”三”，”四"，"五","六"）;
varmyDate=newDate（）；//当天的日期
varsYear=myDate。
getFullYear（）;//年
varsMonth=myDate。
getMonth（）+1;//月
varsDate=myDate。
getDate（）;//日
varsDay=sWeek［myDate.getDay（）]；//星期
document。
write（imageDigits（sYear）+”  ；"+
imageDigits（sMonth）+"＆nbsp；＆nbsp；”+
imageDigits（sDate）+”〈br〉”）;
//如果输入数是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；i
length；i++）｛
ret+=’〈imgsrc="’+s.charAt（i）+’。
gif"〉’；
}
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
〈HTML>
--
functiondocument_onmousemove（）
｛
form1。
txtMousePosition。
value=window.event。
clientX+”，"+window.event.clientY;
｝
//-—〉
〈SCRIPTlanguage=”javascript"for="document”event="onmousemove”>
--
returndocument_onmousemove（）
//—-〉
〈/SCRIPT>
〈/HEAD>
〈FORMid=”form1">
〈P〉〈INPUTtype="text”name=”txtMousePosition”size=”20">
〈/BODY〉
1．在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。
反之亦然.
ch4_07.htm
〈head>
〈scriptlanguage="JavaScript"〉
--
//moveList用于对两个多选列表进行选项的移动操作
//from为”需要移动"的列表名称，to为"移动到”列表名称
functionmoveList（from，to）｛
varfromList=document.myForm。
elements[from];
varfromLen=fromList.options.length;
vartoList=document。
myForm。
elements[to］；
vartoLen=toList.options。
length；
//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;
｝
｝
//——>〈/script>
〈/head〉
〈formname=”myForm”〉
〈selectname="leftList”multiplesize="6”style="width：
50px；"〉
a〈/option〉
〈option>b
〈td〉
<！
——通过事件onclick调用JavaScript的moveList函数-—〉
〈inputtype="button”name="to"value=”〉>"onclick=”moveList（’leftList’,’rightList'）”>〈p>
〈p〉
〈td>
〈selectname=”rightList"multiplesize=”6”style="width：
50px；”〉
〈option>d〈/option〉
f
〈/td>
〈/tr>
〈/table>
〈/form>
〈/body〉
〈/html〉
实验十四
一．实验目的:
掌握表单的应用
二．实验内容
设计一个有3个超链接的页面，单击这些链接时分别打开和关闭窗口以及关闭本身窗口。
S08_01。
HTM
〈HTML>〈HEAD>〈TITLE>打开和关闭窗口
varnewwin;
functionopennewwin（）
｛
newwin=open（”http：
//”，"myWindow”,
”height=100,width=400，top=10，left=0,toolbar=no，menubar=no，"+
"scrollbars=no,resizable=no，location=no,status=no”）;
｝
functionclosenewwin（）
{
newwin。
close（）;
}
〈/SCRIPT〉
〈Ahref=”javascript:
opennewwin（）”〉打开新窗口
〈P>
closenewwin（）">关闭新窗口
close（）">关闭本窗口〈/A〉
〈/BODY>
2．设计一个表单，该表单有姓名和某种卡号两个文本输入框，其中这种卡号的格式为“XXXX-XXXX—XXXX-XXXX”（每个X代表一个数字），要求用户单击提交按钮之前验证这两个输入数据的有效性.
S08_11。
HTM
〈HTML>〈TITLE>验证表单
functionvalidate（）
{
if（！
checkName（document.myform。
myname.value））returnfalse；
if（!
checkNum（document.myform.mynumber。
value））returnfalse；
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;
}
〈P〉姓名:
〈P〉卡号：
〈P>
〈/BODY〉
3．设计3个按钮，当单击他们时分别使页面的背景色变成红、蓝和绿色。
S08_13。
HTM
〈HTML>〈HEAD〉〈TITLE〉使用按钮〈/TITLE〉
〈SCRIPTLanguage="javascript”>
functionChangeBgColor（new_bgcolor）
{
document.bgColor=new_bgcolor;
}
〈/SCRIPT>
〈P>〈INPUTtype=”button"value=”红”onClick=”ChangeBgColor（'red’）"〉
〈INPUTtype=”button”value=”蓝”onClick="ChangeBgColor（’blue'）”>
〈/FORM〉
〈/BODY〉
实验十五
一．实验目的
掌握表单的验证
二．实验内容
表单验证
单击.html
〈HTML>
〈HEAD>
〈ScriptLanguage="JavaScript”〉
functioncheck（）
{
varinst=”爱好:
”;
if（document。
myform.txt1。
value==”"）
｛
alert（”请输入姓名!
”）；
｝
else
{
alert（”姓名：
"+document。
myform。
txt1。
value）；
if（document.myform。
sex[0］.checked）alert（”性别：
男"）；
elsealert（”性别：
女"）;
if（document。
myform.inst[0］.checked）inst+=”游泳"；
if（document.myform.inst[1].checked）inst+=”,滑冰";
if（document。
myform。
inst[2］.checked）inst+=”,散步”；
if（inst=="爱好：
"）
alert（"赶快培养一个爱好吧！
”）；
else
alert（inst）;
｝
｝
〈/Script>
〈/HEAD>
〈p〉请输入您的姓名:
〈inputtype=”text"name="txt1"