JavaScript实验实训内容
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（3）单击“重置”按钮时，将页面各项元素信息清空。
JavaScript的浏览器对象模型
实验十二
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
1、设计实现如下页面：
（1）单击“修改年龄”按钮，弹出一个对话框：
（2）单击“确定”按钮，将文本框内的年龄信息改为用户重新输入的信息；
<script language=javascript>
</script>
</HEAD><BODY></BODY></HTML>
实验九
实验目的：内置对象的使用。
实验内容：
5．由图像表示日期。
<script language="JavaScript"> <!--
var sWeek = new Array("日","一","二 ","三","四","五","六");
<INPUT type="button" value="问侯小姐" name="hello2" onclick="return hello_girl();"></P>
</FORM>
</BODY></HTML>
实验五
实验目的：内置对象的使用。
实验内容：
1．在页面中显示当天日期。
：
<HTML><HEAD><TITLE>使用new运算符</TITLE></HEAD>
// o为"需要移动"列表中当前选择项对象
//根据已选项新建一个列表选项
var optionName = new Option(t, v, false, false);
// 将该选项添加到"移动到"列表中
toLen++;
// 将该选项从"需要移动"列表中清除
}
}
//--></script>
</head>
2、将1~10之间的奇偶数分开，页面呈现方式如下：
3、任意输入一个年份，判断是否为闰年。
实验二 函数部分
一．实wenku.baidu.com目的
掌握JavaScript的常用函数；
二．实验内容
编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7整除的证书，并要求每行显示6个这样的数。
<html>
<head>
<script language=javascript>
掌握JavaScript对象属性和方法的引用方式；
了解JavaScript对象的常用属性和方法；
二．实验内容
1、任意输入一个字符串，单击“确定”按钮，输出字符串的长度。
2、猜数游戏，实现效果如下：
3、设计实现一个带开关的时钟。
JavaScript事件的理解和使用
实验十一
一．实验目的
掌握JavaScript的常用的事件；
<script language=javascript>
</script>
</HEAD><BODY></BODY></HTML>
实验七
实验目的：内置对象的使用。
实验内容：
3．将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换成大写字母。
<HTML><HEAD><TITLE>使用String</TITLE></HEAD><BODY>
{
if (IsThatNumber(n))
{
nb++;
}
}
//-->
</script>
</pre>
</body>
</html>
实验三
实验目的：常用函数的使用。
实验内容：
利用全局变量和函数，设计模拟幸运数字机游戏。设幸运数字为8，每次由计算机随机生成3个1~9之间的随机数，当这3个随机数中有一个数字为8时，就算赢了一次。
"scrollbars=no,resizable=no,location=no,status=no");
}
//-->
</SCRIPT>
</PRE>
</BODY>
</HTML>
事件与对象
实验四
实验目的：表单的设计。
实验内容：设计一个表单，放入两个按钮，单击它们时将显示不同问候语。
<HTML><HEAD><TITLE>处理事件-HTML标记方式</TITLE>
<script language=javascript>
}
if (last_win) wins++;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<PRE><SCRIPT language="javascript">
<!--
while(true)
{
PlayOnce();
if (!confirm(last_digits +"\n" + (last_win"赢":"输") + "\n胜率"+win_rate+"%,继续吗")) break;
{
}
//-->
</SCRIPT>
<SCRIPT language="javascript" for="document" event="onmousemove">
<!--
return document_onmousemove()
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM id="form1">
<option>d</option>
<option>e</option>
<option>f</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
实验十四
一．实验目的：掌握表单的应用
二．实验内容
设计一个有3个超链接的页面，单击这些链接时分别打开和关闭窗口以及关闭本身窗口。
设计一个含有一个表单的页面，并且在表单上放入一个文本框。编写程序，当鼠标在页面上移动时，鼠标的坐标将显示在这个文本框中。
<HTML>
<HEAD>
<SCRIPT id="clientEventHandlersJS" language="javascript">
<!--
function document_onmousemove()
<BODY>
<script language=javascript>
var today;
today = new Date();
</script>
</BODY></HTML>
实验六
实验目的：内置对象的使用。
实验内容：
2．在浏览器窗口的状态栏中显示当前浏览器的版本信息。
<HTML><HEAD><TITLE>访问对象的属性</TITLE>
else return s;
}
…… 以此类推
function imageDigits(s) {
var ret = "";
var s = new String(s);
}
return ret;
}
//--></script>
JavaScript对象的理解和使用
实验十
一．实验目的
掌握JavaScript的常用的对象类型；
<!--
function IsThatNumber(x)
{
return x%3==0 && x%5==0 && x%7==0;
}
//-->
</script>
</head>
<body>
<pre><script language=javascript>
<!--
var n,nb=0;
for(n=1;n<1000;n++)
<!--
function PlayOnce()
{//模拟玩一次数字机游戏
var i,digit;
play_times++;
last_digits="";
last_win=false;
for(i=0;i<3;i++)
{
last_digits += digit;
if (digit==8) last_win=true;
<option>c</option>
</select>
</td>
<td>
<!-- 通过事件onclick调用JavaScript的moveList函数 -->
<input type="button" name="to" value=" >> " onclick="moveList('leftList','rightList')"><p>
JavaScript表达式和逻辑控制语句的使用
实验一
一．实验目的
掌握JavaScript的变量；
掌握JavaScript的数据类型；
掌握JavaScript的运算符；
掌握JavaScript的逻辑控制语句。
二．实验内容
1、声明一个变量str，为其赋值"Hello World!"，显示该值；
改变该变量值为"Hello China!"，然后再显示该值。
// moveList用于对两个多选列表进行选项的移动操作
// from为"需要移动"的列表名称，to为"移动到"列表名称
function moveList(from,to) {
// current 为"需要移动"列表中的当前选项序号
// 如果"需要移动"列表中有选择项，则进行移动操作
while (current>-1) {
function hello_girl()
{
alert("小姐,您好!");
}
</script>
</HEAD>
<BODY>
<FORM name="form1">
<INPUT type="button" value="问侯先生" name="hello1" onclick="alert('先生,您好!');"></P>
<input type="button" name="backTo" value=" << " onclick="moveList('rightList','leftList')"><p>
</td>
<td>
<select name="rightList" multiple size="6" style="width: 50px;">
（3）单击“取消”按钮提示用户“您按了’取消’按钮”。
2、设计实现如下页面：
（1）输入学生信息后，单击“提交”按钮，页面呈现方式如下：
（2）单击“复位”按钮，页面呈现方式如下：
实验十三
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
E
<HTML>
<HEAD>
<META
<META
<SCRIPT language="javascript">
var win_rate=0;//赢率
var play_times=0;//总次数
var wins=0;//赢的次数
var last_digits;//上次数字串
var last_win;//上次是否赢
<body>
<form name="myForm">
<table>
<tr valign="top">
<td>
<select name="leftList" multiple size="6" style="width:50px;">
<option>a</option>
<option>b</option>
掌握JavaScript事件的处理方式；
了解如何通过HTML属性和JavaScript属性处理事件；
二．实验内容
1、设计实现一个页面，当进入页面时提示“您好，欢迎光临”，当离开页面时提示“您好，欢迎您下次再来”。
2、设计实现如下页面，要求
（1）单击“提交”按钮时逐一验证页面各项信息不允许为空；
（2）如果哪一项信息不满足要求，页面焦点停留在该信息处；
var myDate = new Date(); // 当天的日期
imageDigits(sMonth) + " " +
imageDigits(sDate) + "<br>");
// 如果输入数是1位数，在十位数上补0
function formatTwoDigits(s) {
if (s<10) return "0"+s;
<script language=javascript>
var origin_s,upper_s,i;
origin_s = prompt("请输入一行文字:","");
</script>
</BODY></HTML>
实验八
实验目的：内置对象的使用。
实验内容：
4．求PI的5次方，并四舍五入取整。
<HTML><HEAD><TITLE>使用Math对象</TITLE>
<P><INPUT type="text" name="txtMousePosition" size="20"></P>
</FORM>
</BODY>
</HTML>
1．在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。
<html>
<head>
<script language="JavaScript"> <!--
<HTML><HEAD><TITLE>打开和关闭窗口</TITLE>
<SCRIPT language="javascript">
var newwin;
function opennewwin()
{
"height=100,width=400,top=10,left=0,toolbar=no,menubar=no," +
JavaScript的浏览器对象模型
实验十二
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
1、设计实现如下页面：
（1）单击“修改年龄”按钮，弹出一个对话框：
（2）单击“确定”按钮，将文本框内的年龄信息改为用户重新输入的信息；
<script language=javascript>
</script>
</HEAD><BODY></BODY></HTML>
实验九
实验目的：内置对象的使用。
实验内容：
5．由图像表示日期。
<script language="JavaScript"> <!--
var sWeek = new Array("日","一","二 ","三","四","五","六");
<INPUT type="button" value="问侯小姐" name="hello2" onclick="return hello_girl();"></P>
</FORM>
</BODY></HTML>
实验五
实验目的：内置对象的使用。
实验内容：
1．在页面中显示当天日期。
：
<HTML><HEAD><TITLE>使用new运算符</TITLE></HEAD>
// o为"需要移动"列表中当前选择项对象
//根据已选项新建一个列表选项
var optionName = new Option(t, v, false, false);
// 将该选项添加到"移动到"列表中
toLen++;
// 将该选项从"需要移动"列表中清除
}
}
//--></script>
</head>
2、将1~10之间的奇偶数分开，页面呈现方式如下：
3、任意输入一个年份，判断是否为闰年。
实验二 函数部分
一．实wenku.baidu.com目的
掌握JavaScript的常用函数；
二．实验内容
编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7整除的证书，并要求每行显示6个这样的数。
<html>
<head>
<script language=javascript>
掌握JavaScript对象属性和方法的引用方式；
了解JavaScript对象的常用属性和方法；
二．实验内容
1、任意输入一个字符串，单击“确定”按钮，输出字符串的长度。
2、猜数游戏，实现效果如下：
3、设计实现一个带开关的时钟。
JavaScript事件的理解和使用
实验十一
一．实验目的
掌握JavaScript的常用的事件；
<script language=javascript>
</script>
</HEAD><BODY></BODY></HTML>
实验七
实验目的：内置对象的使用。
实验内容：
3．将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换成大写字母。
<HTML><HEAD><TITLE>使用String</TITLE></HEAD><BODY>
{
if (IsThatNumber(n))
{
nb++;
}
}
//-->
</script>
</pre>
</body>
</html>
实验三
实验目的：常用函数的使用。
实验内容：
利用全局变量和函数，设计模拟幸运数字机游戏。设幸运数字为8，每次由计算机随机生成3个1~9之间的随机数，当这3个随机数中有一个数字为8时，就算赢了一次。
"scrollbars=no,resizable=no,location=no,status=no");
}
//-->
</SCRIPT>
</PRE>
</BODY>
</HTML>
事件与对象
实验四
实验目的：表单的设计。
实验内容：设计一个表单，放入两个按钮，单击它们时将显示不同问候语。
<HTML><HEAD><TITLE>处理事件-HTML标记方式</TITLE>
<script language=javascript>
}
if (last_win) wins++;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<PRE><SCRIPT language="javascript">
<!--
while(true)
{
PlayOnce();
if (!confirm(last_digits +"\n" + (last_win"赢":"输") + "\n胜率"+win_rate+"%,继续吗")) break;
{
}
//-->
</SCRIPT>
<SCRIPT language="javascript" for="document" event="onmousemove">
<!--
return document_onmousemove()
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM id="form1">
<option>d</option>
<option>e</option>
<option>f</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
实验十四
一．实验目的：掌握表单的应用
二．实验内容
设计一个有3个超链接的页面，单击这些链接时分别打开和关闭窗口以及关闭本身窗口。
设计一个含有一个表单的页面，并且在表单上放入一个文本框。编写程序，当鼠标在页面上移动时，鼠标的坐标将显示在这个文本框中。
<HTML>
<HEAD>
<SCRIPT id="clientEventHandlersJS" language="javascript">
<!--
function document_onmousemove()
<BODY>
<script language=javascript>
var today;
today = new Date();
</script>
</BODY></HTML>
实验六
实验目的：内置对象的使用。
实验内容：
2．在浏览器窗口的状态栏中显示当前浏览器的版本信息。
<HTML><HEAD><TITLE>访问对象的属性</TITLE>
else return s;
}
…… 以此类推
function imageDigits(s) {
var ret = "";
var s = new String(s);
}
return ret;
}
//--></script>
JavaScript对象的理解和使用
实验十
一．实验目的
掌握JavaScript的常用的对象类型；
<!--
function IsThatNumber(x)
{
return x%3==0 && x%5==0 && x%7==0;
}
//-->
</script>
</head>
<body>
<pre><script language=javascript>
<!--
var n,nb=0;
for(n=1;n<1000;n++)
<!--
function PlayOnce()
{//模拟玩一次数字机游戏
var i,digit;
play_times++;
last_digits="";
last_win=false;
for(i=0;i<3;i++)
{
last_digits += digit;
if (digit==8) last_win=true;
<option>c</option>
</select>
</td>
<td>
<!-- 通过事件onclick调用JavaScript的moveList函数 -->
<input type="button" name="to" value=" >> " onclick="moveList('leftList','rightList')"><p>
JavaScript表达式和逻辑控制语句的使用
实验一
一．实验目的
掌握JavaScript的变量；
掌握JavaScript的数据类型；
掌握JavaScript的运算符；
掌握JavaScript的逻辑控制语句。
二．实验内容
1、声明一个变量str，为其赋值"Hello World!"，显示该值；
改变该变量值为"Hello China!"，然后再显示该值。
// moveList用于对两个多选列表进行选项的移动操作
// from为"需要移动"的列表名称，to为"移动到"列表名称
function moveList(from,to) {
// current 为"需要移动"列表中的当前选项序号
// 如果"需要移动"列表中有选择项，则进行移动操作
while (current>-1) {
function hello_girl()
{
alert("小姐,您好!");
}
</script>
</HEAD>
<BODY>
<FORM name="form1">
<INPUT type="button" value="问侯先生" name="hello1" onclick="alert('先生,您好!');"></P>
<input type="button" name="backTo" value=" << " onclick="moveList('rightList','leftList')"><p>
</td>
<td>
<select name="rightList" multiple size="6" style="width: 50px;">
（3）单击“取消”按钮提示用户“您按了’取消’按钮”。
2、设计实现如下页面：
（1）输入学生信息后，单击“提交”按钮，页面呈现方式如下：
（2）单击“复位”按钮，页面呈现方式如下：
实验十三
一．实验目的
掌握JavaScript浏览器对象的层次结构；
掌握JavaScript浏览器对象的属性和方法；
二．实验内容
E
<HTML>
<HEAD>
<META
<META
<SCRIPT language="javascript">
var win_rate=0;//赢率
var play_times=0;//总次数
var wins=0;//赢的次数
var last_digits;//上次数字串
var last_win;//上次是否赢
<body>
<form name="myForm">
<table>
<tr valign="top">
<td>
<select name="leftList" multiple size="6" style="width:50px;">
<option>a</option>
<option>b</option>
掌握JavaScript事件的处理方式；
了解如何通过HTML属性和JavaScript属性处理事件；
二．实验内容
1、设计实现一个页面，当进入页面时提示“您好，欢迎光临”，当离开页面时提示“您好，欢迎您下次再来”。
2、设计实现如下页面，要求
（1）单击“提交”按钮时逐一验证页面各项信息不允许为空；
（2）如果哪一项信息不满足要求，页面焦点停留在该信息处；
var myDate = new Date(); // 当天的日期
imageDigits(sMonth) + " " +
imageDigits(sDate) + "<br>");
// 如果输入数是1位数，在十位数上补0
function formatTwoDigits(s) {
if (s<10) return "0"+s;
<script language=javascript>
var origin_s,upper_s,i;
origin_s = prompt("请输入一行文字:","");
</script>
</BODY></HTML>
实验八
实验目的：内置对象的使用。
实验内容：
4．求PI的5次方，并四舍五入取整。
<HTML><HEAD><TITLE>使用Math对象</TITLE>
<P><INPUT type="text" name="txtMousePosition" size="20"></P>
</FORM>
</BODY>
</HTML>
1．在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。
<html>
<head>
<script language="JavaScript"> <!--
<HTML><HEAD><TITLE>打开和关闭窗口</TITLE>
<SCRIPT language="javascript">
var newwin;
function opennewwin()
{
"height=100,width=400,top=10,left=0,toolbar=no,menubar=no," +