web程序设计第7章_第1页
web程序设计第7章_第2页
web程序设计第7章_第3页
web程序设计第7章_第4页
web程序设计第7章_第5页
已阅读5页，还剩41页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章JavaScript概述JavaScript是介于Java与HTML之间，基于对象和事件驱动的编程语言。它提供了一种实时的、动态的、可交互的表达能力，用交互式的Web页面取代了静态的HTML页面，有效实现了网络计算和网络计算机的蓝图。7.1第一个JavaScript程序<html><head><scriptlanguage="JavaScript"><!--varname=prompt("请输入您的大名：","");//弹出提示窗口//--></script></head><body><scriptlanguage="JavaScript"><!--document.write("欢送",name,"光临!");//在页面上输出信息//--></script></body></html>演示7.1第一个JavaScript程序使用JavaScript编写程序的特点：JavaScript是一种脚本语言，采用小程序段的方式实现编程，可以直接嵌入HTML文档中。在标识<scriptlanguage="JavaScript">…</script>之间可以参加JavaScript脚本。可将<script>…</script>标识放在<head>…</head>或<body>…</body>之间。将JavaScript脚本置于<head>…</head>之间，可使之在主页和其余局部代码之前装载。JavaScript是一种基于对象的语言，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。7.1第一个JavaScript程序使用JavaScript编写程序的特点：对于不支持JavaScript的浏览器，所有在<!--…//-->中的代码均被忽略；对于支持JavaScript的浏览器，那么执行<!--…//-->中的代码。//是JavaScript的注释标识，其后的信息不被浏览器解释。7.2JavaScript根本数据结构JavaScript脚本语言同其他语言一样，有它自身的根本数据类型、表达式、运算符以及程序的根本框架结构。根本数据类型和常量数值型：最根本的数据类型，包括整型和实型整型常量：可以使用十进制、八进制或十六进制表示，如1234、0745、0x93C等；实型常量：可以使用小数或指数方法表示，如12.34、5e7、4e-5等。字符串型：表示字符序列的数据类型字符串常量：用""或''括起来的假设干个字符，如"JavaScript"、'ThisisabookofC++'等；控制字符：以反斜杠\开头的具有特殊功能的字符，如'\n'、'\r'、'\t'等。7.2JavaScript根本数据结构根本数据类型和常量布尔型：表示状态的数据类型布尔常量：只有两个可能的值true和false，表示“真”和“假”两种状态。null和undefinednull：null的类型是Object，用来表示一个变量没有任何数值。例如：varempty=null;//empty的值为nullundefined：undefined的类型也是undefined，表示变量没有定义任何值。例如：varvalue;//value的值为undefined7.2JavaScript根本数据结构变量变量的主要作用是存取数据和提供存放信息的容器，在JavaScript程序中必须明确变量的命名、声明和作用域。变量的命名：必须以字母或下划线开头，后面可以跟数字、字母和下划线。不能使用JavaScript中的关键字作为变量名。例如：正确的变量名：num1、_value、thisbook错误的变量名：1_max、C++、this、true变量的声明：在JavaScript中，不管变量的数据类型为什么，都用var关键字来声明。例如：varnum=1;varstr="JavaScriptLanguage";7.2JavaScript根本数据结构变量的实际类型视变量数据的内容而定。例如，上例中的num为数值型变量，str为字符串型变量。变量的类型也可以随时被改变，只要指定不同类型的数据，变量的类型就会跟着改变。例如：varnum=1;//num为数值型变量……num="HelloWorld!";//num为字符串型变量变量也可以不用var声明而直接使用，这时必须设定变量的初始值，否那么会产生编译错误。例如：x=100;//x为数值型变量y="China";//y为字符串型变量z=true//z为布尔型变量好的编程风格：每个变量在第一次使用时都用var声明！7.2JavaScript根本数据结构变量的作用域：分为全局变量和局部变量全局变量：在所有函数外声明的变量，在程序的每个地方都可以使用；局部变量：在某函数内声明的变量，只对该函数可见。

例如：

varattr=1;//attr为全局变量

functiontestFunc(){vartmp=attr+1;//tmp为局部变量

returntmp;}varsum=testFunc();//sum为全局变量

document.write("attr

=

",

attr,

"<br>");

document.write("sum

=

",

sum,

"<br>");

document.write("tmp

=

",

tmp);演示？7.2JavaScript根本数据结构运算符和表达式JavaScript提供了丰富的运算符，包括算术运算符、逻辑运算符等。表达式是常量、变量及运算符的集合，根据运算符类型不同，表达式可分为算术表达式、逻辑表达式等。算术运算符及算术表达式算术运算符说明例子+两个操作数的加法3+5=8-两个操作数的减法9-2=7*两个操作数的乘法2*3=6/两个操作数的除法3/2=1.5%求两个操作数相除的余数12%5=2++单一操作数加一varx=3;++x;--单一操作数减一vary=16;y--;-单一操作数取反varx=3;x=-3;7.2JavaScript根本数据结构比较运算符及比较表达式比较运算符说明例子==等于2==2(true)3=="3"(true)!=不等于3!=4(true)1!="1"(false)>大于7>4(true)3>"2"(true)<小于5<2(false)'6'<8(true)>=大于等于7>=7(true)"3">=2(true)<=小于等于4<=1(false)5<='3'(false)===恒等于2===2(true)3==="3"(false)!==恒不等于3!==4(true)1!=='1'(true)当操作数类型不同时进行类型转换当操作数类型不同时不进行类型转换7.2JavaScript根本数据结构逻辑运算符及逻辑表达式逻辑运算符说明例子&&逻辑于(全真为真，其余为假)true&&true(true)(true&&false)&&true(false)||逻辑或(全假为假，其余为真)false||(true&&false)(false)(false&&true)||true(true)

!逻辑非(非真即假，非假即真)!true(false)!((true||false)&&false)(true)7.2JavaScript根本数据结构位运算符及位表达式位运算符说明例子&将两个操作数的对应二进制位作与运算3&5=1|将两个操作数的对应二进制位作或运算3|5=7^将两个操作数的对应二进制位作异或运算3^5=6~将单个操作数的二进制位作取反运算~5=-6<<将操作数的二进制位向左移动指定位数，最右边的位(最低位)补04<<2=16

-5<<3=-40>>将操作数的二进制位向右移动指定位数，最左边的位(最高位)补符号位4>>2=1

-5>>3=-1>>>将操作数的二进制位向右移动指定位数，最左边的位(最高位)补04>>>2=1

-5>>>3=229-17.2JavaScript根本数据结构赋值运算符及赋值表达式赋值运算符例子等价于=x=5+=x+=7x=x+7-=x-=6x=x-6*=x*=5+3x=x*(5+3)/=x/=6-4x=x/(6-4)%=x%=3x=x%3&=x&=4x=x&4|=x|=5x=x|5^=x^=2x=x^2<<=x<<=3x=x<<3>>=x>>=5x=x>>3>>>=x>>>=2x=x>>>27.2JavaScript根本数据结构字符串运算符及字符串表达式字符串运算符说明例子+连接两个字符串varstrA="Java";

varstrB="Script";

str=strA+strB;str的值是"JavaScript"+=连接两个字符串，然后赋值varstrA="Hello";

varstrB="World";

strA+=strB;strA的值是"HelloWorld"7.2JavaScript根本数据结构条件运算符及条件表达式条件运算符有3个操作数，格式如下：varvarA=条件式?valueB:valueC当条件式成立时，valueB会被赋给varA，否那么将valueC赋给varA。例如：varmin=6<=7?6:7;varmax=6>7?6:7;思考：假设x、y、z三个变量均以赋值，请写出求三个变量中最大值和最小值的条件表达式。7.3JavaScript程序构成JavaScript程序的根本构成包括语句、函数、对象、方法和属性等，通过它们来实现编程。程序控制结构选择结构：通过判断给定的条件是否成立，从给定的各种可能中选择一种执行。if语句的三种形式：单分支结构：if(表达式)语句段例1：if(count>10)count=0;例2：if(count>10){count=0;alert("count被重设为0!");}注意：如果语句段中的语句不止一条，应用大括号将它们括起来。7.3JavaScript程序构成双分支结构：if(表达式)语句段1else语句段2

例1：if(num%2==0)

alert("num是一个偶数");else

alert("num是一个奇数");

注意：else不能单独使用，必须与if配对使用；每一个else总是与离它最近的一个尚未匹配的if配对。

例2：if(a>=b)

if(a>=c)alert("a是最大值");elsealert("c是最大值");else

if(b>=c)alert("b是最大值");elsealert("c是最大值");7.3JavaScript程序构成多分支结构：if(表达式1)语句段1elseif(表达式2)语句段2……elseif(表达式n-1)语句段n-1[else语句段n]

例如：if(x<0)alert("x<0");elseif(x<5)alert("0<=x<5");elseif(x<10)alert("5<=x<10");elsealert("x>=10");7.3JavaScript程序构成例根据用户的不同操作在页面上显示不同的信息<html><head><scriptlanguage="JavaScript"><!--varname=prompt("请输入您的大名：","");//弹出提示窗口if(name=="")//不在提示窗口中输入任何值document.write("您没有输入任何信息!");elseif(name==null)//按下取消按钮或直接关闭提示窗口document.write("您取消了操作!");else//在提示窗口中输入字符串并按下确定按钮document.write("欢送",name,"光临!");//--></script></head></html>演示7.3JavaScript程序构成switch语句根本格式：switch(表达式){case常量表达式1:语句段1;break;case常量表达式2:语句段2;break;……case常量表达式n-1:语句段n-1;break;default:语句段n;}执行过程：首先计算表达式的值，当表达式的值与某个case后面的常量表达式的值相等时，就执行此case后面的语句段；假设所有case后的常量表达式的值都不与表达式的值相等，就执行default后面的语句段。7.3JavaScript程序构成例根据用户的不同操作在页面上显示不同的信息<html><head><scriptlanguage="JavaScript">varname=prompt("请输入您的大名：","");//弹出提示窗口varuser="DaVinci";switch(name){case"":document.write("您没有输入任何信息!");break;casenull:document.write("您取消了操作!");break;caseuser:document.write("欢送",name,"光临!");break;default:document.write("欢送",name,"参加!");}</script></head></html>演示7.3JavaScript程序构成switch语句break的作用：当某个case后面的语句段执行完后，直接跳出整个switch控制语句。如果省略break，在执行完某个case后面的语句段后会继续执行下一个case后面的语句段，直到遇上break或者所有的语句段都被执行完。思考：省略上例中所有的break语句，当用户在提示窗口中执行不同操作时，页面上会显示什么信息？演示7.3JavaScript程序构成JavaScript程序的根本构成包括语句、函数、对象、方法和属性等，通过它们来实现编程。程序控制结构循环结构：在某条件成立时反复执行相同的语句段(循环体)。循环语句的三种形式for语句格式：for(表达式1;表达式2;表达式3)循环体;各局部的作用：表达式1：给循环控制变量赋初值；表达式2：设置循环条件；表达式3：修改循环控制变量的值；循环体：当循环条件成立时反复执行。7.3JavaScript程序构成执行流程：求解表达式1；求解表达式2，假设其值为true，那么进入c；假设为false，那么进入f；执行循环体；求解表达式3；返回b继续执行;结束循环，执行for语句的后续语句。例如：varsum=0,i;for(i=1;i<=100;i++)sum=sum+i;注意：如果循环体中的语句不止一条，应用大括号将它们括起来。7.3JavaScript程序构成while语句格式：while(循环条件)

循环体;功能：当循环条件为true时，反复执行循环体；当循环条件为false时，退出循环，执行while语句的后续语句。例如：varsum=0,i=1;while(i<=100){sum=sum+i;i++;}7.3JavaScript程序构成do-while语句格式：do循环体;while(循环条件);执行流程：先执行循环体，再判断循环条件，假设为true，那么重新执行循环体，如此反复，直到循环条件为false时退出循环，执行do-while语句的后续语句。例如：varsum=0,i=1;do{sum=sum+i;i++;}while(i<=100);7.3JavaScript程序构成例求1!+2!+3!+…+10!<html><head><scriptlanguage="JavaScript">vari,t=1,s=0;for(i=1;i<=10;i++){t=t*i;s+=t;}alert("1!+2!+3!+…+10!="+s);</script></head></html>演示7.3JavaScript程序构成程序控制结构break和continue语句break语句格式：break;功能：提前退出循环或从switch结构中直接跳出。例：varsum=0,i=1;while(i<=100){if(i%2==0)break;sum=sum+i;i++;}程序运行结果：sum=17.3JavaScript程序构成continue语句格式：continue;功能：跳过循环体内剩余的语句，提前进入下一次循环。例：varsum=0,i=0;while(i<=100){i++;if(i%2==0)continue;sum=sum+i;}程序运行结果：sum=26017.3JavaScript程序构成函数JavaScript函数用来封装那些在程序中要屡次用到的功能模块，并可作为事件驱动的结果而被调用。定义方式：function函数名(参数表)函数体;function：定义函数的关键字；函数名：自定义函数的名称；参数表：包含假设干个参数，不同参数间用逗号间隔。当调用函数时，可以向参数表中传入常量值、变量值或其他表达式的值，函数体可通过参数名来引用这些传进来的值；函数体：实现函数功能的程序代码。当函数体包含的语句不止一条时，应用大括号将它们括起来。7.3JavaScript程序构成例定义一个求阶乘的函数

functionfact(n){vars=1,i; for(i=1;i<=n;i++) s=s*i; returns;}定义函数的关键字函数名参数表函数体7.3JavaScript程序构成调用方式：函数名(实参表);实参是传送给被调用函数的实际参数值。实参可以是常量、变量和表达式，实参必须有确定的值；在函数体内改变某个传进来的参数值，并不会对函数外的实参值造成影响。例如：functioninc(n){n++;

alert(n);}

varx=5;

inc(x);

alert(x);调用函数inc参数传递程序运行结果：n=6x=57.3JavaScript程序构成返回值：在JavaScript中经常需要将函数的执行结果传回程序，一般格式为：

return返回值;

例如：functioninc(n){n++;returnn;}

varx=5;

vary=inc(x);

alert(x);

alert(y);参数传递返回值调用函数inc程序运行结果：x=5y=67.3JavaScript程序构成变量的作用范围：在函数内才会用到的局部变量应该用var声明，否那么一旦函数执行完毕，没有用var声明的局部变量会变成全局变量。例如：程序运行结果：sum=8程序运行结果：

'y'未定义functioninc(n){y=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);functioninc(n){vary=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);7.3JavaScript程序构成事件驱动及事件处理JavaScript是基于对象和事件驱动的脚本语言，通常把由鼠标或热键引发的一连串程序的动作称为事件驱动。对事件进行处理的程序或函数，称为事件处理程序。JavaScript主要有以下一些常用事件：单击事件onClick：当用户单击元件时，触发onClick事件，同时onClick指定的事件处理程序将被调用执行。通常在以下根本对象中产生：

button〔按钮〕

checkbox〔复选框〕

radio〔单项选择按钮〕7.3JavaScript程序构成例单击按钮激活btnClick()处理程序<html><head><scriptlanguage="JavaScript">functionbtnClick(){alert("Youhaveclickedthebutton!");}</script></head><body><form><inputtype="button"name="buttonA"value="clickme"

onClick="btnClick();"></form></body></html>演示7.3JavaScript程序构成改变事件onChange：当text、textarea和select元件失去焦点且内容被改变时，触发该事件。

例如：

<scriptlanguage="JavaScript">functiontextChange(textObj){

alert(textObj.value);}</script><form><inputtype="text"name="textA"

onChange="textChange(this);"></form>演示7.3JavaScript程序构成载入事件onLoad：当网页载入完成时，触发该事件。卸载事件onUnload：当用户离开网页时，触发该事件。例如：<scriptlanguage="JavaScript">functionloadFile(){dovarname=prompt("请输入您的大名：","");while(name==""||name==null);alert("欢送"+name+"光临!");}</script><bodyonLoad="loadFile();"onUnload="alert('Seeyoulater!');"></body>演示7.4JavaScript对象利用JavaScript基于对象的功能，可以大大简化程序的设计，用更直观、模块化和可复用的方式进行程序开发。对象的根本知识对象的根本结构：对象是由属性和方法两个根本元素构成的。属性用来描述对象的数据特征，与变量相关联；方法用来描述作用在属性上的操作(行为)，与函数相关联。例如：大型客机可视为对象，它具有位置、速度、颜色、容量等属性，对于该对象可施行起飞、降落、加速、维修等操作，这些操作将或多或少地改变飞机的属性值。7.4JavaScript对象引用对象的方式：要

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论