《JavaScript语言(I).ppt》由会员分享，可在线阅读，更多相关《JavaScript语言(I).ppt（58页珍藏版）》请在三一办公上搜索。
1、第六讲 JavaScript 语言,参考书：Danny Goodman,作业四：用JavaScript完成一个计算器,用户只需用鼠标即可操作你的计算器尽可能使计算器功能完整,主要内容,背景几个简单例子语言基本要素JavaScript的对象模型JavaScript的事件模型,背景,JavaScript-使网页“可执行”的又一种手段网页内容从信息到程序,具有革命性的意义.Netscape的技术(1995,after Java,原来称为LiveScript),与Java没有什么直接关系所带来的好处分担服务器的部分工作减轻对网络的压力改善与用户交互作用的质量,理解JavaScript,JavaScri
2、pt是一种脚本语言JavaScript是基于对象的语言JavaScript是事件驱动的语言JavaScript是安全的语言JavaScript是平台无关的语言JavaScript是廉价的(不需任何附加的软件),JavaScript与其他语言比较,JavaScript不是JavaJavaScript与VBScriptJavaScript与Perl,JavaScript与Java的比较,Aspects Java JavaScript owner Sun Microsystems Netscape natural of the language Object oriented Object base
3、d execution mechanism compiled/interpreted interpreted networking capability strong little graphics capabilitystrong little interaction with HTML weak strong best for dynamic web pagesinteractive but plain webpages,基本工作方式,源程序直接嵌入HTML文档中 外部程序结合到HTML文档中 浏览器解释执行,客户端和服务器端的JavaScript,有公共的语言核心机制-比如变量控制结构,
4、数据类型等语言对象模型上不一致-客户端Script关心文档中的对象-服务器端的Script关心管理用户和服务器连接的对象,主要能力,控制文档的内容和表现控制浏览器的行为和文档的内容相互作用和用户交互在客户方读写cookie 对图像进行操作,无能为力之处,图形(对比Java有很强的图形能力)读写客户方文件(和Java applet一样)网络(对比Java applet可以和发出它的服务器连接),除了可以引起浏览器去读一个URL外.多线程(Java支持多线程),典型例子-1:文档内容和表现,document.write();document.write(Hello,Web!);document.w
5、rite();How are you today?,典型例子-2:浏览器行为,window.status=Internetics=I+S+SSee status bar,典型例子-3:和内容的作用,function compute(form)if(confirm(Are you sure?)form.result.value=eval(form.expr.value)else alert(Please input again)Enter an expression:Result:,典型例子-4:和用户的交互,function checkNum(str,min,max)if(str=)alert
6、(Enter a number in the field,please.)return false for(var i=0;i 9)alert(Try a number,please.)return false var val=parseInt(str,10);if(val max)alert(Try a number from 1 to 10.);return false return true function thanks()alert(Thank you for your input.)Enter a small number:,典型例子-5-1:建立cookie,temp=test=
7、internet;expiration=new Date(new Date().getTime()+3600000);temp+=;expires=+expiration.toGMTString();document.cookie=temp;A cookie has been set,典型例子-5-2:收回cookie,temp=document.cookie;document.write(temp)A cookie has been retrieved magically!,典型例子-6:摆弄图像,function replace()document.replaced.src=wcc.gif
8、”,JavaScript语言基本要素（1）,数据类型变量与表达式数据类型转换表达式与操作符,数据类型,String“hello”hello n(换行）t(tab)Number 4.5Boolen true falseNULL nullObject Function,变量与表达式,创建变量var anumber=137;/变量的值是一个数 var anumber1=2;var astring=“1”;/变量的值也可以是一个字符串 var astring1=“hello”;变量名 以字母开头，不能有空格组合命名，myAge表达式 xx=astring1+astring/结果是x=“hello1”x
9、x=anumber+anumber1/结果是xx=139xx=anumber+astring/结果是xx=“1371”,数据类型转换,转换字符串为数值ParseInt(“42”,10)=42ParseFloat(“42.33”,10)=42(截断小数，四舍五入）转换数值为字符串最简单的方法是空串与数值字符相加“”+2500=“2500”,表达式与操作符,JavaScript 表达式和基本操作符类似于C，PERL，和 Java 赋值操作符有=,+=,-=,*=,/=,%=,=,=,/x 加 1，并把结果送给 y,表达式与操作符（contd),位逻辑运算符 x+y 为 Hello World!,语
10、言基本要素(2),没有else if.if(condition).else.for 和 while.for(初始化表达式;条件;增值表达式)执行语句;.while(条件)条件为真执行.;break 可以用在 for 或 while 循环中，使循环中断，跳到for或while循 环结束的位置。continue 用在 for 或 while 循环可以跳过循环体中剩余的语句，直接 进行循环的下一次迭代.全局变量和局部变量,对象模型,JavaScript被称为是“基于对象的”(而不是面向对象的)有对象的概念:数据和操作的封装,但没有继承的概念 从定义的角度看,JavaScript程序中有两种对象Jav
11、aScript提供的内置对象（built-in object)程序中定义的对象一个对象是一个由变量、其他对象或方法组成的一个集合.在一个对象中包含的其他对象和变量被称为特性(property)在一个对象内的函数(function)称为这个对象的方法(method)在一个特定的对象中的一些特性的序列称为数组,例如document对象中的image.多维数组是由含有数组特性的对象数组构造的.,JavaScript 的内置对象,文档对象，HTML文档及其显示环境相联的对象,例如window,document 核心语言对象（全局对象）字符串对象（String）数学对象（Math)日期对象(Date)数
12、组对象(Array),对应于HTML文档及其相关环境的对象-文档对象,浏览器将这些系统对象组织成一个层次结构.Window,对应于一个显示文档的窗口,这个层次结构的根location,Window对象的一个属性,对应于当前URL.history,又一个属性,对应于用户曾经访问过的URL.document,又一个属性,对应所加载的文档.,JavaScript的文档对象模型,JavaScript的文档对象模型(contd),注意：前面的文档对象模型只是牵制层次关系，不是继承层次关系。没有对象继承一个高于系列之上的对象属性或方法。不存在任何方向上对象到对象的自动消息传递，通过文档或表单对象发送消息给
13、它，所有对象引用一定是清楚的。,对象引用,当一个文档加载到浏览器后，它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让Script指出它要的是哪一个对象，这就是对象引用。JavaScript用严格的层次结构引导Script至文档的任何区域，对每个对象的引用必须包括从顶部到对象的所有层次，直至对象名，路径中各个相连的对象之间用句点分开。,对象引用（contd),变量可以写成下面的形式:父对象.特性1索引1.特性2.最后特性索引N 对象的方法(method)可以如此引用：对象.特性.方法(参数组)一个含有典型特性和方法的对象的例子 document 是对应一个.htm
14、l文档的对象,浏览器读进文档后生成.document.writeln 是这个对象的一个方法，输出带换行的字符串 document.location 是该对象的一个特性，含有它的URL,Window对象:从浏览器程序的角度来看它,class Window 浏览器执行起来后就创建这样一个对象 Location location;String defaultStatus;History history;void alert(String);String prompt(String);Window window;指向自己 Window self;指向自己 Document document;Windo
15、w open(String,String);void close(Window);.网页中的JavaScript就是在这个对象的环境中执行的,可以引用这个对象的变量,调用函数等.上述只是Window对象的20个属性,10个方法和5个事件处理过程的一部分,Window对象:从浏览器程序的角度来看它,alert()和 window.alert()是等价的var newwin=open(“someURL”,“MyNewWindow”)将打开一个新浏览器窗口,并将一个指定的内容读进新窗口.在原始窗口中然后可用newwin来操作新的窗口.在新的窗口中,JavaScript可用opener来和原始窗口交流
16、.只能close自己打开的窗口!(不是每个浏览器都这样smart!),举例:,Open another window with JavaScriptx=open(newwin.html,NewWin)x.defaultStatus=Hello,new fellow!This is from your creator.This is a text in original window,Open another window with JavaScriptopener.defaultStatus=Hello,my creator!alert(The window is to beclosed);c
17、lose(self);This is a text in new window,用户对象的定义,JavaScript定义“类”,“函数”的语法是一样的,而且这样的函数就成了该类的构造函数!用户用函数定义来定义类,然后用new语句创建该类的一个实例 function add()this.result=this.left+this.right;function MyClass(n)this.left=n;this.right=6;this.result=0;this.sum=add;x=new MyClass(4);x.sum();document.write(x.result);,with 语句
18、:程序的简便写法,使得引用方法时可以省略相关对象的名字例如我们常写document.write(.)我们也可以写成with(document)write(.)如果语句很多,显然就有意义了.,对象与数组,JavaScript将对象也看成是一个数组.如果x是一对象,那么x0,x1,分别指它的第一,第二个成员等等.这个特性反过来可以用于定义语义上类似于数组的对象:function MakeArray(size)this.length=size;for(var i=1;i=size;i+)thisi=0;,对象与数组(contd),var maxNumObj=10;objs=new MakeArray
19、(maxNumObj);for(var n=1;n=maxNumObj;n+)objsn=new SomeClass(n);/设objs 的元素为某类对象objsi.property就指objs数组的第I个元素的某种特性如果将MakeArray这样的函数用于另外的函数中,我们就可以得到多维数组的效果.,对象与数组(contd),JavaScript提供了一个Array对象,用来创建数组teachers=new Array(3)teachers0=“Li”teachers1=“Sun”teachers1=“wang”teachers=new Array(“Li”,“Sun”,“wang”),Ja
20、vaScript的Math 对象,该对象不可创建，该对象是自动存在的访问对象的方法 Math.property|method(parameter.parameter),JavaScript的Math 对象(contd),Math 有一套特性(内部常数)包括 E,LN10,LN2,PI,SQRT1_2,SQRT2,所以有Math.PI=3.14159 等.Math方法包括Math.random()返回 0 到 1 之间的伪随机数Math.abs(x)返回 x 的绝对值Math.max(x1,x2)返回数值 x1 和 x2 中的最大值Math.cos(x)返回弧度为 x 的角的 cosine 值M
21、ath.round(x)按照离 x 最近的正整数或负整数取整,JavaScript的Date 对象,创建一个日期对象：var dateObjectName=new Date(parameters)访问对象的方法 dateObjectName.method(),JavaScript的Date 对象(contd),Date 对象能力强大,包括 21个方法 today=new Date();/设置 today 为当前日期和时间 asiwrite=new Date(February 26,1996 15:13:00);/按说明的日期和时间设置 asiwrite 注意,Java 和 JavaScript
22、 在内部都是以从1970年1月1日 00:00:00开始累计毫秒数来记录时间的.类似于 Java,Date.UTC(用一串数字表示日期)和 Date.parse(用文本串表示日期)是 class 或 static 方法 还有象 getMonth 这样的方法可以从一个日期中抽出月份,等等.,JavaScript的String对象,创建一个字符串对象：var myString=new String(“characters”)访问对象的方法 string.property|method,JavaScript的String对象(contd),任意字符串或含有字符串的变量都是string对象length
23、成员记录了字符串的长度(字符数)串中的字符从左向右以 0 到 actualstring.length-1索引 newstring=astring.substring(index1,index2);/返回一个位置在 index1.index2-1的字符串 特别是如果 index2 index1,子串返回 index2.index1-1部分!,事件模型,事件:用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。例如加载一张网页，点击一个超链，等。事件处理程序的引入（如何使一段JavaScript程序和事件的发生联系起来？）一些例子,Navigator4的事件模型,元素对象 事
24、件window Blur,Focus,Load,Unload,DragDrop,Move,ResizeLayer Blur,Focus,Load,MouseOut,MouseOver onMouseuplink Click,MouseOver,MouseOut,DbClick,MouseDown,MouseUparea MouseOut,MouseOver,Clickimage Abort,Error,Loadform Submit,Reset,Navigator4的事件模型(contd),元素对象 事件text,textarea Blur,KeyDownpassword Change,Foc
25、us,Select,KeyPress,KeyUpall buttons Click,MouseDown,MouseUpselect Blur,Change,FocusfileUpload Blur,Focus,Select,事件处理程序的引入,“on事件名”是JavaScript规定的对应事件处理程序柄（event handler）的名字。例如onClick,onfocus,onSubmit,等等.第一种引入方式：事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现,而对应的属性值是由网页编写者提供的JavaScript程序段（或事件处理函数名）第二种引入方式：将事件处理函数名赋
26、给浏览器为网页创建的相应对象的对应属性（property）document.forms0.age.onchange=isNumber,例子:让事件处理程序作为“属性值”,这里，事件处理程序柄的名字是“case insensitive”。这与HTML文本中对标记的属性名的松散要求是一致的。注意引号的用法OnLoad在网页完全加载完后执行(即包括图像,applet等)OnUnLoad在网页退出之前执行,例子:(see demo event-1),some text 如果return false给onClick,则浏览器不访问HREF指定的网址status是暂时量,只是在事件发生时有效;defaul
27、tStatus是缺省量,在没有其它事件发生时也有效.,例子:定时事件的应用,目标是编写一网页，使得当用户关注到含有该网页的浏览器窗口时，其状态区域显示一串动画文字，而当注意力移开后停止显示。与定时事件有关的Window对象方法的应用timer_id=setTimeout(“函数名”，毫秒数）,在指定时间过后执行该函数.Timer_id在此作为一个定时器的标识.clearTimeout(timer_id),取消一个定时器,意味着不再执行和它相关的计时操作.,var text=Welcome to PACT group at Peking University!;var len=text.leng
28、th;var width=50;var pos=1-width;var timerrunning=false;var xxx=null;function scrollText()pos+;var scroller=;if(pos=len)pos=1-width;if(pos,与表格(FORM)有关事件的例子,onSubmit在表格提交之前执行,若返回false,则不提交.这就是在客户方验证用户输入的典型方式.confirm是Window对象的一个方法,verify()是一个必须由用户提供的函数。和frames是Window的属性类似,forms是Document的一个数组属性.,与FORM元素
29、有关事件的例子,只是当第一个按钮被click后出现警示信息。Form有elements数组属性,这些元素中的name可直接用来引用相应元素.,关于图像,onLoad 图像成功装载后执行，onAbort 当用户中断装载过程时执行图像的预取与替换:JavaScript的动画技术(尽管很弱)image2=new Image();image2.src=“second.gif”;document.demo.src=image2.src;不难想象结合定时事件的应用实现动画效果。,例子:clock.html,var timerID=null;var timerrunning=false;function stopclock()if(timerrunning)clearTimeout(timerID);timerrunning=false;function showtime()date=new Date();timeValue=date.getHours()+:+date.getMinutes()+:+date.getSeconds();document.clock.face.value=timeValue;timerID=setTimeout(showtime(),1000);timerrunning=true;,
