javascript实验

长江职业学院Javascript语言程序设计实验指导书

专业：

学号：

姓名：

班级：

指导老师：

软件教研室编

实验一 JavaScript基本操作

一、实验目的

熟练掌握在HTML文件中编写JavaScript程序的基本操作，及在Microsoft Internet

Explorer浏览器和Netscape的Nevigator浏览器中调试JavaScript的基本操作。

二、实验内容

1、用NotePad创建一个简单的.htm文件，在Microsoft Internet Explorer浏览器中浏览效果。

2、编写第1章中的实例源文件，并在Microsoft Internet Explorer浏览器中进行测试。

3、调试一段JavaScript程序，找出其中的错误。

三、实验步骤

1、通过windows的文件管理器，在c盘下新建一个文件夹jsp_ex,用于保

存实验中的文件，如图1-1所示。

2、在windows中打开“记事本”，（也可以用其他编辑html文件的工具软

件，如Microsoft frontpage,Macromedia Dreamweaver等，编写例1-1的程序，然后将文件保存在C:\jsp_ex文件夹中。

3、用下述任意一种方法，在浏览器中显示，如图1-2。

A．在图1-1中双击“”文件名。

B．在图1-1中用鼠标右键单击“”，在打开的菜单列表中，如果有所需浏览器名就可以直接点击浏览器名。

C．现在windows中打开所需浏览器，然后按【ctrl】+【o】，在打开的对话框中找到文件。

4、再次编辑文件，将第21行中的“”改写为“”然后按第3步的操作，

得到如图1-3的效果，不能显示“上一次网页更新日期”，这时，通过浏览器的调试工具查找出出错的位置，修改后再次测试。

5、按1-2的步骤，将例1-1改写为“”和“”两个文件即通过外部javascript 文件和html文件一起完成网页的制作。

四、思考练习

1．为什么“上一次网页更新日期”在每一次打开都是同一个时间

2．请写出你在程序编写中出现的错误和改正方法，并分析。

实验二 JavaScript编程基础

一、实验目的

熟练掌握JavaScript的基本编程概念和编程技术，熟练掌握JavaScript程序语言的数据类型、表达式、运算符及基本控制语句，并学习基本的对象概念和事件处理程序。

二、实验内容

1、编写第2章中的实例源文件，并且在Microsoft Internet Explorer浏览器中测试。

2、编写一个显示学生成绩信息的网页，网页中有两个或更多的按钮，分别代表需要显示信息的学生，点击后可以得到该学生的总成绩、平均成绩、平均成绩的级别等，如图2-1所示，并在Microsoft Internet Explorer浏览器中测试。

三、实验步骤

a)在c:\jsp_ex文件夹下新建一个。

b)改写例2-5，其功能不变，即输入参数的总和，但是函数名改为sum，

函数的返回值是计算后的总和。

function sum() {

var ret = 0;

else if (score>=80)

……

else if (score>=70)

……

else

……..

return ret;

}

c)编写一个函数，函数名为msg，根据输入参数返回不同的信息：如果级

别是“A”,返回“祝贺你去的了好成绩”；如果级别是“B”返回“成绩不错，继续加油”,如果级别是”C”,返回“必须加油啊”。用 switch实现。

function msg(level) {

var ret = ""; case ("B"):

……

default:

……

}

return ret;

}

d)编写一个对象函数，函数名为student，输入参数共有6项，分别为：

学生姓名 name

数学成绩 math

语文成绩 chinese

英语成绩 english

自然成绩 science

体育成绩 gym

对象的属性包括了上述的输入参数项，对象的方法共有5个，分别为：总成绩 sum

平均成绩 average

平均成绩的级别 level

根据成绩返回的信息 msg

总信息 toString（）

其中前4个对象方法已经在步骤2-5中完成，最后一个方法可以在对象函数中直接定义，它将返回最终需要显示的所有信息。

function student(name,math,chinese,english,science,gym) {

= name;

…….

= function toString(){

var s = + ":\n";

var theSum = ,,,,;

var theAve = ,,,,;

var theLevel = (theAve);

s += "你的总成绩是 " + theSum + "\n";

s += "你的平均成绩是 " + theAve + "\n";

s += "你的平均成绩级别是 " + theLevel + "\n";

s += "\n" +(theLevel);

return s;

}

7、最后制作HTML内容——两个按钮，然后分别应用于onclick事件调用对象student的方法toString()

四、思考练习

i.增加一个函数maxScore，返回6门成绩的最高分，并显示在对话框中。

ii.增加一个函数minScore, 返回6门成绩的最低分，并显示在页面上。

实验三 JavaScript常用内置对象

一、实验目的

熟练掌握JavaScript数组对象、字符串对象、数学对象及日期对象。

二、实验内容

1、编写第3章中的实例源文件，并在Microsoft Internet Explorer浏览器中进行调试。

2、按下述要求编写常用的JavaScript函数。

trim(s):去掉s中的首尾空格及连续空格中的多余空格，返回处理后的字串。

replaceStr(inStr,oldStr,newStr):将字串inStr中的oldStr用newStr替换，返回替换后的新字串。

isEmptyString(s):如果去空格后的s长度为0，返回true，否则，返回false isValidString(s);给出有效字串，如果s在有效字串中，返回true，否则返回false

isNumber(s):使用isValidString(s)函数，其中有效字串为字数。

isFloat(s):使用isValidString(s)函数，其中有效字串为数字及“.”。

isMaxString(s,c);如果s长度小于等于c，返回true，否则，返回false

isRange(s,s1,s2);如果s长度大于等于c，返回true，否则，返回false

isRange(s,s1,s2)：如果s大于等于s1，并且小于等于s2，返回true，否则返回false

isArray(o): 如果o的（）中包含array，返回true，否则返回false

isEmail(s):如果s中包含“@”和“.”，返回true，否则返回false

capFirst(s):将s中的第一个字符变为大写字符，返回处理后的字串。

indexOfArray(a,s):如果s为Array a中的一个元素，返回该元素的序列号，否则返回-1.

3、编写一个“猜美国州名的游戏”的网页，如图3-1所示。

A:用户输入所猜的美国州名后，按回车。

B:如果猜错了，将会得到提示信息，一共有4次提示：第一个提示的是该州名的第1个字母，第2个提示的是该州名的最后一个字母，第3个提示的是该州名的长度，最后一个提示的是该州名第3个字母。

C:如果猜对了，将会得到祝贺信息，并显示回答问题的时间。

三、实验步骤

第一：在c:\jsp_ex文件夹中新建一个文件。

第二：首先编写HTML文件。

a)标记中应用onload事件，调用clearBox()的JavaScript程序，

用于每次刷新网页时都清空用户输入域。

b)使用

标记制作标题“猜美国州名游戏”。
c)制作一对
标记，名字为mForm，并且在标记中应用
onsubmit事件，该事件将调用一个guessit()中的JavaScript函数，然后return false，以保证用户输入完文字后按回车键将不会提交窗体，只是执行guessit()
函数。
d)在标记中制作一对
标记，其id为hint，内容为“输入你
的答案，然后按回车键”。
e)再制作一对
标记，在其中使用的文字框标记，用于用户
的输入，其名字为guess。
f)接着再制作一个“重玩”按钮，在其中应用onClick事件，调用
JavaScript的newGame()函数。
第三、在JavaScript程序中，按下述步骤操作。
（1）首先将50个美国州名保存在一个全局变量的字符串数组中，数组名为state.
state[0]="ALABAMA";
state[1]="ALASKA";
state[2]="ARIZONA";
state[3]="ARKANSAS";
state[4]="CALIFORNIA";
state[5]="COLORADO";
state[6]="CONNECTICUT";
state[7]="DELAWARE";
state[8]="FLORIDA";
state[9]="GEORGIA";
state[10]="HAWAII";
state[11]="IDAHO";
state[12]="ILLINOIS";
state[13]="INDIANA";
state[14]="IOWA";
state[15]="KANSAS";
state[16]="KENTUCKY";
state[17]="LOUISIANA";
state[18]="MAINE";
state[19]="MARYLAND";
state[20]="MASSACHUSETTS";
state[21]="MICHIGAN";
state[22]="MINNESOTA";
state[23]="MISSISSIPPI";
state[24]="MISSOURI";
state[25]="MONTANA";
state[26]="NEBRASKA";
state[27]="NEVADA";
state[28]="NEW HAMPSHIRE";
state[29]="NEW JERSEY";
state[30]="NEW MEXICO";
state[31]="NEW YORK";
state[32]="NORTH CAROLINA";
state[33]="NORTH DAKOTA";
state[34]="OHIO";
state[35]="OKLAHOMA";
state[36]="OREGON";
state[37]="PENNSYLVANIA";
state[38]="RHODE ISLAND";
state[39]="SOUTH CAROLINA";
state[40]="SOUTH DAKOTA";
state[41]="TENNESSEE";
state[42]="TEXAS";
state[43]="UTAH";
state[44]="VERMONT";
state[45]="VIRGINIA";
state[46]="WASHINGTON";
state[47]="WEST VIRGINIA";
state[48]="WISCONSIN";
state[49]="WYOMING";
（2）设置全局变量猜的次数tries，开始时间startTime，结束时间endTime,随机产生一个0~49的随机数，变量名为sr，然后在state中设置第sr个数组为正确答案，保存在全局变量answer中。
var sr = () * len);
var answer = state[sr];
/* 初始化猜的次数*/
var tries = 0;
var startTime = new Date();
var endTime = "";
（3）编写函数newGame()，用于重新刷新网页，只要通过下述一个语句就可以了。
function newGame()
{
(); ”；如果用户输入的不正确，通过使用switch语句，对于不同的猜的次数显示不同的显示内容，第一次通过(0)显示第一个字母，第2次通过显示最后一个字母，第3
次通过显示答案的长度，最后一次通过(2)显示第3个字母，如果用户还是没猜中，显示“没有提示了”，如果用户再按回车键，则显示“对不起，州名是……，还想再玩吗”，如果再玩，则重新刷新网页。
四、思考练习
i.修改程序，时间到60秒即停止答题。
ii.修改程序，使答案提示中州名为小写。
实验四常用文档对象
一、实验目的
熟练掌握JavaScript文档对象，窗体及元素对象，锚点与链接对象及图像对象。
二、实验内容
1、编写第4章中的实例源文件，并且在Microsoft Internet Explorer浏览器中进行调试。
2、编写一个“学生成绩输入系统”的网页，如图4-1，假设有4名学生，他们的信息如表4-2所示，网页列表列出了学生名单，当选择一个学生姓名时，浏览器标题栏显示该学生姓名，网页上显示该学生的照片，同时电子邮件链接为该学生的电子邮件地址：用户输入所选学生成绩后，按提交按钮将进行下述窗体校验。
陈休休
王北北
（1）各项必须填写或选择。
（2）除体育成绩外，其他成绩都是数字，并且小于100，体育为一位字符，范围为A~F.
三、实验步骤
第一：在c:\jsp_ex文件夹中新建一个文件。
第二：首先编写HTML文件。
a)学生列表名字为nameList，列表选项各值分别为学生的学号。
b)“语文”文字框名字为chinese。
c)“数学”文字框名字为math。
d)“历史、常识”单选按钮名字为optSelect，其文字框名字为another
e)“体育”文字框名字为gym。
f)标记中应用onload事件，调用JavaScript的clearAll()函数。
g)标记名字为mainForm。
h)学生列表