javascript程序设计实验1
![javascript程序设计实验1](https://img.360docs.net/img68/1c8vohkzt3avl6erg83x0dtdc9bbux5f-81.webp)
![javascript程序设计实验1](https://img.360docs.net/img68/1c8vohkzt3avl6erg83x0dtdc9bbux5f-d2.webp)
实验项目1javascript程序设计
【实验内容】
1 、JavaScript 变量、表达式和运算符的使用
2 、JavaScript 对话框的使用
3 、JavaScript 函数的定义及调用
4 、JavaScript 分支结构程序设计
5 、JavaScript 循环结构程序设计
【实验参考书】
《网页设计与制作》………………………………………………………… 重庆大学出版社
《网页标题制作技巧与实例》……………………………………………… 清华大学出版社
《javascript 入门与提高》……………………………………………… 清华大学出版社
《javascript 宝典》……………………………………………………… 电子工业出版社
【实验设备】
计算机,多媒体
【实验目的与要求】
1 、掌握JavaScript 变量、表达式和运算符的使用
2 、掌握JavaScript 对话框的使用
3 、掌握JavaScript 函数的定义及调用
4 、掌握分支结构的JavaScript 程序设计
5 、掌握循环结构的JavaScript 程序设计
【实验重点】
1 、掌握JavaScript 函数的定义及调用
2 、掌握分支结构的JavaScript 程序设计
3 、掌握循环结构的JavaScript 程序设计
【实验难点】
1 、掌握分支结构的JavaScript 程序设计
2 、掌握循环结构的JavaScript 程序设计
【实验过程】
实验内容一:JavaScript 变量、表达式和运算符
1 、程序案例 1 -显示年龄
var name; // 声明变量name
var age; // 声明变量age
name=" 张三"; // 把字符串" 张三" 存储到变量name 中
age=20; // 把整数20 存储到变量age 中
document.write(name); // 读取变量name 的值,并将它显示在页面上
document.write(" 的年龄是:"); // 在页面上输出" 的年龄是:"
document.write(age); // 读取变量age 的值,并将它显示在页面上
2 、程序案例 2 -税额计算
var list,rate=0.05,paid=105,tax; // list: 标价; rate: 税率; paid: 付款额; tax: 税额
list = paid/(1+rate); // 标价= 付款额/ (1+ 税率)
tax = paid - list;
document.writeln(" 标价="+list);
document.writeln(" 税额=" + tax);
3 、思考题:
设计JavaScript 程序,在网页上输出半径为 3 的圆的面积和周长。
实验内容二:JavaScript 对话框
教师演示JavaScript 对话框的程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
1 、警示对话框程序案例
alert(" 欢迎浏览本页面!");
2 、确认对话框程序案例
var visited,show_text;
visited=confirm(" 您来过四川农业大学吗?");
show_text = visited?" 您也认为四川农业大学很美吧!":" 欢迎您有机会来四川农业大学参观!";
document.write(show_text);
3 、提示对话框程序案例
var name;
name=prompt(" 请输入您的姓名:","");
document.write(" 尊敬的"+name+" :欢迎您进入我的主页!");
4 、思考题:
设计密码检测程序,密码输入正确,显示“ 欢迎访问” ,不正确显示“ 密码不正确,好好想哟” 。
实验内容三:JavaScript 函数的定义及调用
教师演示JavaScript 函数的定义及调用的程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
1 、程序案例 1 -素数判断
function IsPrime(p)
{
if(p<1) return false;
var i;
for(i=2;i
return true;
}
var x;
x=parseInt(prompt(" 请输入1-100 之间的数字","1"));
alert(" 该数是否为素数:" + IsPrime(x));
2 、程序案例 2 -局部变量和全局变量
function first(p,q) {
p=p*2;
b=b+1;
var c=100;
document.writeln("P 的值为:",p,"
");
document.writeln("a 的值为:",a,"
");
document.writeln("b 的值为:",b,"
");
document.writeln("c 的值为:",c,"
");
}
var a=1, b=2, c=3;
first(a,b);
document.writeln("a 的值为:",a,"
");
document.writeln("b 的值为:",b,"
");
document.writeln("c 的值为:",c,"
");
3 、思考题:设计检测手机号码的程序。
提示:手机号码应该是11 位数字,并且手机号码应该以13 开头。在JavaScript中isNaN()方法如何使用:
isNaN(加你要判断的值,可以是变量) 判断这个值是不是不是一个数并返回true 或者false 比如
var temp = isNaN(123);
alert(temp);
那么提示的是false
实验内容四:JavaScript 分支结构程序设计
1 、分支结构程序案例 1 -两个数排序
var x,y,temp;
x = parseFloat(prompt(" 请输入x 的值:","0"));
y = parseFloat(prompt(" 请输入y 的值:","0"));
if (x>y)
{
temp = x;
x = y;
y = temp;
}
document.writeln(" 排序后,x=" + x +";y=" + y)
2 、分支结构程序案例 2 -常识问答
var answer;
answer = prompt(" 中国的首都在哪个城市?\nA. 香港\tB. 广州\tC. 北京\tD. 上海","E");
switch(answer)
{
case "a":
case "A":
alert(" 错!香港是中国的特别特政区");
break;
case "b":
case "B":
alert(" 错!广州是中国南部的大都市");
break;
case "c":
case "C":
alert(" 对!北京是中国的首都,在中国北方");
break;
case "d":
case "D":
alert(" 错!上海是中国东部的大都市");
break;
default:
alert(" 选择错误! 只能选填字母 A 、 B 、 C 或D");
break;
}
3 、思考题:
根据成绩给出学生的考评:如果成绩>=85, 考评“ 优” ,否则如果成绩>=60 ,考评“ 及格”, 否则考评为“ 不及格” 。
实验内容五:JavaScript 循环结构程序设计
教师演示JavaScript 循环结构程序设计的程序案例,学生按照教师的操作步骤,自己编写该程序。
1 、循环结构程序案例 1 -求1+2+3+…+100 的累计和
var i,sum=0;
for(i=1;i<=100;i++) {
sum += i;
}
document.write("1+2+3+...+100="+sum);
2 、循环结构程序案例 2 -二位整数相加的测试程序
var go_on,x,y,result,answer
do {
x = Math.floor(Math.random() *90)+10;
y = Math.floor(Math.random() *90)+10;
result = x+y;
answer = parseFloat(prompt(x + "+" + y + "=","0"));
go_on = confirm(((answer==result)?" 答对":" 答错") +" !\t 继续测试吗?")
} while(go_on)
3 、循环结构程序案例 3 -累加用户输入的整数
var input,input_number,sum
for(sum=0;;) {
input = prompt("sum="+sum + "\n 请输入新的累加数( 输入Q 结束):","0");
if (input==null || input=="Q" || input=="q") break;
if (isNaN(input)) continue;
input_number = parseFloat(input);
if (input_number<=0) continue;
sum += input_number;
}
alert("sum="+sum);
4 、思考题:
在页面上显示一个“9 × 9 乘法表” 。
【实验小结】
通过这次实验,同学们熟悉了JavaScript 变量、表达式和运算符,理解了JavaScript 对话框的使用,掌握了JavaScript 函数的定义及调用,掌握了分支结构的JavaScript 程序设计,掌握了循环结构的JavaScript 程序设计。
实验项目2内置函数和对象
【实验内容】
1 、JavaScript 内置函数的应用
2 、JavaScript 内置对象的应用
3 、JavaScript 浏览器对象的应用
【实验参考】
《网页设计与制作》………………………………………………………… 重庆大学出版社
《网页标题制作技巧与实例》……………………………………………… 清华大学出版社
《javascript 入门与提高》……………………………………………… 清华大学出版社
《javascript 宝典》……………………………………………………… 电子工业出版社
【实验设备】
计算机,投影机
【实验目的与要求】
1 、掌握JavaScript 内置函数的使用方法
2 、掌握JavaScript 常用内置对象的属性和方法
3 、掌握JavaScript 浏览器对象的含义
4 、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。
【实验重点】
1 、掌握JavaScript 内置函数的使用方法
2 、掌握JavaScript 常用内置对象的属性和方法
3 、掌握JavaScript 浏览器对象的含义
【实验难点】
1 、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。
【实验过程】
实验内容一:JavaScript 内置函数的应用
1 、eval( ) :计算字符串表达式的值
2 、parseFloat( ) 和parseInt( ) :将字符串开头的整数或浮点数分解出来,转换为整数或浮点数
3 、isNaN( ) :确定一个变量是否为NaN (Not a Number )
4 、escape( ) :将字符串中的非字母数字字符转换为按格式%XX 表示的数字
5 、unescape( ) :将字符串格式为%XX 的数字转换为字符
6 、程序案例1_1 :求用户在提示对话框中输入的表达式的值。
alert(eval(prompt(" 请输入一个常量表达式, 运算符可以是JavaScript 所
允许的任何运算符, 而操作数只能是常量。如 123*321/9, 我将为您计
算出结果。","65+98+96")))
7 、思考题:判断用户输入的字符是不是数字,如果是,分别将其转换成浮点数和整数,并显示到网页上。
var input = prompt(" 请输入字符!","");
alert(isNaN(input)?" 你输入的不是数字":" 你输入的是数字");
if(!isNaN(input)) {
document.write(parseInt(input)+"
");
document.write(parseFloat(input));
}
实验内容二:JavaScript 内置对象的应用
一、对象的基本概念
1 、什么是对象
对象用于描述客观世界存在的特定实体。在计算机世界中,不仅存在来自于客观世界的对象,也包含为解决问题而引入的抽象对象。
2 、对象的属性和方法
在JavaScript 中,对象就是属性和方法的集合。
方法是作为对象成员的函数表明对象所具有的行为,属性是作为对象成员的一组变量,表明对象的状态。
通过访问或设置对象的属性,并且调用对象的方法,就可以对对象进行各种操作,从而获得需要的功能。
调用对象的一个方法类似于调用一个函数。
使用对象的一个属性则类似于使用一个变量。
二、Math 对象
1 、Math 对象的属性是数学中常用的常量,如圆周率PI ,自然对数的底
E 等。
2 、Math 对象的方法则是一些十分有用的数学函数,如sin() 、random() 、log() 等。
3 、在调用Math 对象的属性和方法时,直接写成:Math. 属性和Math. 方法。
4 、案例2_1 :求PI 的
5 次方,并四舍五入取整。
var number = Math.round(Math.pow(Math.PI,5));
document.write("PI 的 5 次方的值为:"+number);
5 、思考题:设计javascript 程序,在网页上随机显示10 个两位整数。
三、Date 对象
1 、Date 对象的主要方法
常用方法: 设置和获取日期中的年、月、日、小时、分、秒和毫秒等
2 、创建Date 对象
要使用Date 对象,必须先使用new 运算符创建它。创建Date 对象的常见方式有三种:
(1) 不带参数var today = new Date();
(2) 创建一个指定日期的Date 变量var theDate = new Date(2000, 9, 1);
(3) 创建一个指定时间的Date 变量var theTime = new Date(2000, 9, 1, 10, 20,30,50)
3 、案例2_2 :计算求1+2+3+…10000 之和所需要的运行时间( 毫秒数) 。
var t1,t2,htime,i,sum=0;
t1 = new Date();
document.write(" 循环前的时
间:"+t1.toLocaleString()+":"+t1.getMilliseconds()+"
");
for(i=1;i<=10000;i++) sum+=i;
t2 = new Date();
document.write(" 循环后的时
间:"+t2.toLocaleString()+":"+t2.getMilliseconds()+"
");
htime = t2.getTime() - t1.getTime();
document.write(" 执行10000 次循环用时:"+ htime+" 毫秒
")
4 、思考题:在网页上显示当前日期和时间,并显示是星期几。
四、Number 对象
1 、Number 对象用于存放MAX_VALUE 、MIN_VALUE 、NaN 、NEGATIVE_INFINITY 、POSITIVE_INFINITY 等极端数值。
2 、案例2_
3 :在页面中显示JavaScript 可以处理的数的区间。
document.write("JavaScript 有效数的范围是: ["
+Number.MIN_VALUE+","+Number.MAX_VALUE+"]");
2 、确认对话框程序案例
var visited,show_text;
visited=confirm(" 您来过四川农业大学吗?");
show_text = visited?" 您也认为四川农业大学很美吧!":" 欢迎您有机会来四川农业大学参观!";
document.write(show_text);
五、String 对象
1 、String 对象提供对字符串进行处理的属性和方法。
2 、在使用String 对象时,首先要创建一个字符串变量。
3 、使用new 运算符来创建,如:
newstring = new String("This is a new string")
4 、也可以直接将字符串赋给变量。
newstring = "This is a new string"
5 、String 对象的最常用属性和方法length 、toLowerCase() 、toUpperCase() 、charAt(index) 、substr(start,len)
6 、程序案例2_4 :String 对象的常用方法
var mystr = "look at this";
document.writeln(mystr.charAt(5));
document.writeln(mystr.substring(5,7));
document.writeln(mystr.toUpperCase());
document.writeln(mystr.indexOf("oo"));
7 、思考题:将用户输入的字符串反向输出到页面上,并且要求将其中的小写字母转换为大写字母。例如,如果输入”abc123” ,则输出”321CBA” 。
六、Array 对象
1 、什么是数组
一个数组可以包含多个数组元素。数组中数组元素的个数称为数组长度。
2 、创建和访问数组
一个数组元素由数组名、一对方括号[ ] 和这对括号中的下标组合起来表示。如:arrayname[0] 、arrayname[1] 。
3 、for…in 语句
用for…in 语句处理数组,可以依次对数组中的每个数组元素执行一条或多条语句。
for…in 的格式是:for( 变量in 数组) 循环体语句;
4 、程序案例2_
5 :使用for…in 语句,显示数组的值。
var classmates,i;
classmates = new Array(" 张月"," 李良"," 王力"," 何芳");
for(i in classmates)
document.write(" 第"+(parseInt(i)+1)+" 个同学是:"+classmates[i]+"
");
实验内容三:JavaScript 内置对象的应用
一、窗口(window) 对象
1 、window 对象的属性和方法
窗口(window) 对象处于对象层次的顶端,它提供了处理浏览器窗口的方法和属性。
对于window 对象的使用,主要集中在窗口的打开和关闭、窗口状态的设置、定时执行程序以及各种对话框的使用等四个方面。
在JavaScript 中可直接引用window 对象的属性和方法。
2 、打开和关闭窗口
通过脚本可以打开新窗口,也可以关闭窗口。
3 、程序案例3_1 :设计一个有三个超链接的页面,单击这些链接时分别打开和关闭新窗口,以及关闭本身窗口
var newwin;
function opennewwin()
{
newwin=open("new.htm","myWindow",
"height=100,width=400,top=10,left=0,toolbar=no,menubar=no," +
"scrollbars=no,resizable=no,location=no,status=no");
}
function closenewwin()
{
newwin.close();
}
3 、使用定时器
使用window 对象的定时器机制,可以让一段程序每隔一段时间就执行一次。
4 、程序案例3_2 :在浏览器窗口的状态栏中滚动显示一次当前浏览器的信息。
var msg;
msg = " 浏览器代码名称:"+navigator.appCodeName+" ;";
msg += " 浏览器名称:"+navigator.appName+" ;";
msg += " 浏览器版本号:"+navigator.appVersion+" ;";
msg += " 是否支持Java:"+navigator.javaEnabled()+" ;";
msg += "MIME 类型数:"+navigator.mimeTypes.length+" ;";
msg += " 操作系统平台:"+navigator.platform+" ;";
msg += " 插件数:"+navigator.plugins.length+" ;";
msg += " 用户代理:"+https://www.360docs.net/doc/6310460610.html,erAgent+" ;";
function ShowMsg()
{
window.status = msg;
msg = msg.substr(3);
if (msg=="") window.clearInterval();
}
window.setInterval("ShowMsg()",100);
5 、页面跳转
在HTML 文档中,可以通过脚本控制窗口显示特定的页面。
6 、思考题:设计一个页面,当这个页面显示后 3 秒内用户没有移动过鼠标,将自动显示另一个页面。
二、文档(document) 对象
通过document 对象可以访问HTML 文档包含的任何HTML 元素,如各种表格、表单、图像、超链接等。所有HTML 元素在文档对象模型中都表现为一个对象。
1 、document 对象的属性和方法
案例3_4 :设计一个页面,显示document 对象中的一些属性。
document.write(" 当前文档的标题:"+document.title+"
");
document.write(" 当前文档的URL:"+document.URL+"
");
document.write(" 当前文档的背景色:"+document.bgColor+"
");
document.write(" 当前文档的最后修改日
期:"+https://www.360docs.net/doc/6310460610.html,stModified+"
");
document.write(" 当前文档包含"+document.links.length+" 个超链接
");
document.write(" 当前文档包含"+document.images.length+" 个图像
");
2 、使用all 属性访问HTML 元素
在document 对象中,all 是一个非常特殊的属性。通过它,可以访问文档中的所有HTML 元素对象。
3 、案例3_5 :显示当前HTML 文档中出现的所有标记。
var i,cell;
for(i=0;i { cell=document.all[i]; if(i>0) document.write(","); document.write(cell.tagName); } 4 、思考题:在页面上设计一个动态显示时间的电子时钟。 三、表单对象 1 、form 对象的属性、方法和事件 (1)在程序中,如果创建的表单有一个名字( 如myform) ,那么就可通过这个表单名访问它,如:document.myform 。 获取了form 对象之后,就可以通过使用其属性、方法和事件来实现各种功能。 (2)程序案例3_6 :列出表单中所有表单元素的名称。 var myform,element,i; myform = document.myform; document.write(" 表单中有"+myform.length+" 个元素:
");
for (i=0;i { element = myform.elements[i]; if(i>0) document.write(","); document.write(https://www.360docs.net/doc/6310460610.html,); } 2 、表单处理 ( 1 )表单验证是指确定用户提交的表单数据是否合法,例如填写的身份证号码是否有意义、年龄和学历是否相符等问题。 ( 2 )由于在表单正式提交到服务器之前,需要onSubmit 的值为true( 如 果不设置事件处理函数,则该值默认为true) ,因此可以通过为onSubmit 事件指定的处理函数来进行表单数据的验证。 ( 3 )程序案例3_7 :设计一个表单,该表单有姓名和某种卡号两个文本输入框,其中这种卡号的格式为XXXX-XXXX-XXXX-XXXX( 每个X 代表一位数字) ,要求在用户单击提交按钮“ 发送” 之前验证这两个输入数据的有效性。 function validate() { if(!checkName(document.myform.myname.value)) return false; if(!checkNum(document.myform.mynumber.value)) return false; alert(" 数据完全"); return true; } function checkName(s) { var ok = (s.length>0); if(!ok) alert(" 名字输入有误,请查核!") return ok; } function checkNum(n) { var ok,i,ch; ok = (n.charAt(4)=="-" && n.charAt(9)=="-" && n.charAt(14)=="-"); if(!ok) { alert("<"+n+"> 卡号输入有误,请查核!"); return false; } i=0; while(i<19) { ch = n.charAt(i); if (ch!="-" && (ch > "9" || ch < "0")){ alert("<"+n+"> 卡号输入有误,查核!") return false; } i++; } return true; } ( 4 )思考题:设计一个用户注册的表单检测程序,要求用户名和密码不能为空,密码和确认密码必须相同。 3 、表单元素对象的属性、方法和事件 ( 1 )表单可以有很多表单元素,称之为表单元素对象。 表单元素对象可以分为文本框(Text) 、文本区(TextArea) 、密码(Password) 、按钮(Button) 、重置按钮(Reset) 、提交按钮(Submit) 、单选框(Radio) 、复选框(Checkbox) 、列表(Select) 、列表选项(Option) 和隐藏(Hidden) 对象等。 4 、处理表单元素示例 对表单元素对象的引用,类似于引用表单的通用属性。 ( 1 )程序案例3_8 :检验在文本框中输入的年龄是否有效, 要求年龄在10~100 之间。 function isValidAge(s) { var i,ch,age; for(i=0;i { ch = s.charAt(i); if(ch<"0"||ch>"9") { alert(" 请输入数字!"); return false; } } age = parseInt(s); if(age<10||age>100) { alert(" 请输入真实年龄!"); return false; } return true; } function CheckAge() { var f; f = document.myform; if(isValidAge(f.age.value)) alert(" 您输入的年龄是:"+f.age.value); else{ // 如果输入的是无效年龄 f.age.focus(); // 设置焦点 f.age.select(); // 选中age 中的已有内容 } } ( 2 )程序案例3_9 :设计 3 个按钮,当单击它们时分别使页面的背景色变成红、蓝和绿色。 function ChangeBgColor(new_bgcolor) { document.bgColor=new_bgcolor; }
onClick="ChangeBgColor('red')">
onClick="ChangeBgColor('blue')">
onClick="ChangeBgColor('green')">
【实验小结】
通过本次实验,同学们学会了javascript 内置函数的使用方法,熟悉了javascript 多个内置对象的属性和方法,要求重点掌握浏览器对象的含义,以及如何使用浏览器对象提供的信息来完成一定功能的网页设计。
实验项目3javascript事件处理
【实验内容】
1. 浏览器事件及处理
2. 鼠标事件及处理
3. 键盘事件及处理
4. 其他事件及处理
【实验参考】
《网页设计与制作》……………………………………………………………重庆大学出版社
《网页标题制作技巧与实例》…………………………………………………清华大学出版社
《javascript入门与提高》……………………………………………………清华大学出版社
《javascript宝典》……………………………………………………………电子工业出版社
【实验设备】计算机
【实验目的与要求】
1. 了解JavaScript 事件处理的基本概念
2. 理解JavaScript 事件处理模型
3. 掌握JavaScript 常用事件及处理
【实验重点】
1. 理解JavaScript 事件处理模型
2. 掌握JavaScript 常用事件处理
【实验过程】
实验内容一:浏览器事件及处理
1、load 事件:发生在浏览器完成网页的加载之后。
欢迎访问我的主页!
2、unload 事件:发生在浏览器载入新网页之前。
3、submit 事件:发生在提交表单数据给服务器处理时。
function checkit() { // 数据验证函数
var strval = document.myform.mytext.value;
var intval = parseInt(strval);
if(0 < intval && intval < 10) {
alert(" 提交成功!");
return true;
}
else {
alert(" 输入值" + strval + " 超过了允许的范围!");
return false;
}
}
4. 思考题
用onUnload事件计算用户在网页上的停留时间。
//注意,在IE浏览器下运行,点击刷新
实验内容二:鼠标事件及处理
1. MouseMove 事件:发生在移动鼠标的时候。
var timeout;
function load()
{
timeout=setTimeout("navigate('index.html');",3000);
}
function mousemove()
{
clearTimeout(timeout);
}
2. MouseOver 事件:发生在鼠标扫过一个界面对象时。
function show()
{
pic.filters.alpha.opacity=100;
}
name="pic"style="filter:alpha(opacity=0)" onmouseover="show()">
3. MouseOut 事件:鼠标扫过并脱离一个界面对象时发生。
function show()
{
pic.filters.alpha.opacity=100;
}
function fade()
{
pic.filters.alpha.opacity=0;
}
name="pic"style="filter:alpha(opacity=0)" onmouseover="show()" onmouseout="fade()">
4. Click 事件:发生在表单上某个对象被单击时
function hello_girl()
{
alert(" 小姐, 您好!");
}
function hello_boy()
{
alert(" 先生,你好!");
}
5. 思考题:
订单模拟程序。
实验内容三:键盘事件及处理
1、KeyDown 事件:在键盘上按下一个键的时候发生。
2、KeyPress 事件:从键盘按下键直到松开键时发生。
3、KeyUp 事件:在键盘上松开一个键的时候发生。
4、思考题
显示按键的ASCII 码。
实验内容四:其他事件及处理
1. Change 事件:文本输入框失去焦点,同时其中的值发生改变时。
function change() {
var curform = document.all.myform;
curform.money.value=curform.country.options[curform.country.selectedIndex].value;
}
(2)编写自定义的JavaScript函数calculator(),用于实现计算器的功能,函数的具体代码如下:(计算器里要考虑异常处理,还要考虑如何把结果放在文本框中(赋值)) 练习:3:在文本框中输入一行字符串,然后分别运用三种编码和解码函数进行编码解码,并显示效果。 操作步骤如下: (1)在页面中添加用于输入一个字符串的表单及表单元素。具体代码如下: