javascript程序设计实验.docx

上传人:b****1 文档编号:23128592 上传时间:2023-05-08 格式:DOCX 页数:31 大小:25.43KB
下载 相关 举报
javascript程序设计实验.docx_第1页
第1页 / 共31页
javascript程序设计实验.docx_第2页
第2页 / 共31页
javascript程序设计实验.docx_第3页
第3页 / 共31页
javascript程序设计实验.docx_第4页
第4页 / 共31页
javascript程序设计实验.docx_第5页
第5页 / 共31页
点击查看更多>>
下载资源
资源描述

javascript程序设计实验.docx

《javascript程序设计实验.docx》由会员分享,可在线阅读,更多相关《javascript程序设计实验.docx(31页珍藏版)》请在冰豆网上搜索。

javascript程序设计实验.docx

javascript程序设计实验

实验项目1 javascript程序设计

【实验内容】

  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-显示年龄

  

  varname;//声明变量name

  varage;//声明变量age

  name="张三";//把字符串"张三"存储到变量name中

  age=20;//把整数20存储到变量age中

  document.write(name);//读取变量name的值,并将它显示在页面上

  document.write("的年龄是:

");//在页面上输出"的年龄是:

"

  document.write(age);//读取变量age的值,并将它显示在页面上

  

  2、程序案例2-税额计算

  

  varlist,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、确认对话框程序案例

  

  varvisited,show_text;

  visited=confirm("您来过四川农业大学吗?

");

  show_text=visited?

"您也认为四川农业大学很美吧!

":

"欢迎您有机会来四川农业大学参观!

";

  document.write(show_text);

  

  

  3、提示对话框程序案例

  

  varname;

  name=prompt("请输入您的姓名:

","");

  document.write("尊敬的"+name+":

欢迎您进入我的主页!

");

  

  

  4、思考题:

  设计密码检测程序,密码输入正确,显示“欢迎访问”,不正确显示“密码不正确,好好想哟”。

  

 

  实验内容三:

JavaScript函数的定义及调用

  教师演示JavaScript函数的定义及调用的程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。

  1、程序案例1-素数判断

  

  functionIsPrime(p)

  {

  if(p<1)returnfalse;

  vari;

  for(i=2;i

  returntrue;

  }

  varx;

  x=parseInt(prompt("请输入1-100之间的数字","1"));

  alert("该数是否为素数:

"+IsPrime(x));

  

  

  2、程序案例2-局部变量和全局变量

  

  functionfirst(p,q){

  p=p*2;

  b=b+1;

  varc=100;

  document.writeln("P的值为:

",p,"
");

  document.writeln("a的值为:

",a,"
");

  document.writeln("b的值为:

",b,"
");

  document.writeln("c的值为:

",c,"
");

  }

  vara=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比如 

vartemp=isNaN(123);

alert(temp); 

那么提示的是false

 

  

  实验内容四:

JavaScript分支结构程序设计

    1、分支结构程序案例1-两个数排序

  

  varx,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-常识问答

  

  varanswer;

  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的累计和

  

  vari,sum=0;

  for(i=1;i<=100;i++){

  sum+=i;

  }

  document.write("1+2+3+...+100="+sum);

  

  2、循环结构程序案例2-二位整数相加的测试程序

  

  vargo_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-累加用户输入的整数

  

  varinput,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(NotaNumber)

  4、escape():

将字符串中的非字母数字字符转换为按格式%XX表示的数字

  5、unescape():

将字符串格式为%XX的数字转换为字符

  6、程序案例1_1:

求用户在提示对话框中输入的表达式的值。

  

  alert(eval(prompt("请输入一个常量表达式,运算符可以是JavaScript所允许的任何运算符,而操作数只能是常量。

如       123*321/9,我将为您计算出结果。

","65+98+96")))

  

  7、思考题:

判断用户输入的字符是不是数字,如果是,分别将其转换成浮点数和整数,并显示到网页上。

  

  varinput=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次方,并四舍五入取整。

  

  varnumber=Math.round(Math.pow(Math.PI,5));

  document.write("PI的5次方的值为:

"+number);

  

  5、思考题:

设计javascript程序,在网页上随机显示10个两位整数。

 

 

  三、Date对象

  1、Date对象的主要方法

  常用方法:

设置和获取日期中的年、月、日、小时、分、秒和毫秒等

  2、创建Date对象

  要使用Date对象,必须先使用new运算符创建它。

创建Date对象的常见方式有三种:

  

(1)不带参数vartoday=newDate();

  

(2)创建一个指定日期的Date变量vartheDate=newDate(2000,9,1);

  (3)创建一个指定时间的Date变量vartheTime=newDate(2000,9,1,10,20,30,50)

  3、案例2_2:

计算求1+2+3+…10000之和所需要的运行时间(毫秒数)。

  

  vart1,t2,htime,i,sum=0;

  t1=newDate();

  document.write("循环前的时间:

"+t1.toLocaleString()+":

"+t1.getMilliseconds()+"
");

  for(i=1;i<=10000;i++)sum+=i;

  t2=newDate();

  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、确认对话框程序案例

  

  varvisited,show_text;

  visited=confirm("您来过

四川农业大学吗?

");

  show_text=visited?

"您也认为四川农业大学很美吧!

":

"欢迎您有机会来四川农业大学参观!

";

  document.write(show_text);

  

  

  五、String对象

  1、String对象提供对字符串进行处理的属性和方法。

  2、在使用String对象时,首先要创建一个字符串变量。

  3、使用new运算符来创建,如:

  newstring=newString("Thisisanewstring")

  4、也可以直接将字符串赋给变量。

  newstring="Thisisanewstring"

  5、String对象的最常用属性和方法length、toLowerCase()、toUpperCase()、charAt(index)、substr(start,len)

  6、程序案例2_4:

String对象的常用方法

  

  varmystr="lookatthis";

  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语句,显示数组的值。

  

  v

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > IT计算机 > 电脑基础知识

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1