JavaScript语言介绍

JavaScript语言主要内容背景几个简单例子语言基本要素JavaScript的对象模型JavaScript的事件模型背景JavaScript---使网页“可执行”的又一种手段•网页内容从信息到程序,具有革命性的意义.Netscape的技术(1995,afterJava,原来称为LiveScript),与Java没有什么直接关系所带来的好处•分担服务器的部分工作•减轻对网络的压力•改善与用户交互作用的质量理解JavaScriptJavaScript是一种脚本语言JavaScript是基于对象的语言JavaScript是事件驱动的语言JavaScript是安全的语言JavaScript是平台无关的语言JavaScript是廉价的(不需任何附加的软件)JavaScript与其他语言比较JavaScript不是JavaJavaScript与VBScriptJavaScript与PerlJavaScript与Java的比较项目JavaJavaScript所有者SunMicrosystemsNetscape语言类型面向对象基于对象执行机制编译/执行解释网络操作能力强弱图形操作能力强弱与Html交互能力没有强基本工作方式源程序直接嵌入HTML文档中scriptlanguage=JavaScript…/script外部程序结合到HTML文档中scriptlanguage=JavaScript“src=“myscript.js”/script浏览器解释执行主要能力控制文档的内容和表现控制浏览器的行为和文档的内容相互作用和用户交互在客户方读写cookie对图像进行操作无能为力之处图形(对比Java有很强的图形能力)读写客户方文件(和Javaapplet一样)网络(对比Javaapplet可以和发出它的服务器连接),除了可以引起浏览器去读一个URL外.多线程(Java支持多线程)典型例子--1:文档内容和表现HTMLBODYSCRIPTLanguage=JavaScriptdocument.write(fontcolor=red);document.write(H2Hello,Web!/H2);document.write(/font);/SCRIPTHowareyoutoday?/BODY/HTML典型例子--2:浏览器行为HEADscriptLanguage=JavaScriptwindow.status=Internetics=I+S+S/script/HEADBODYH1Seestatusbar/H1/BODY典型例子--3:和内容的作用HEADSCRIPTLANGUAGE=JavaScriptfunctioncompute(form){if(confirm(Areyousure?))form.result.value=eval(form.expr.value);elsealert(Pleaseinputagain);}/SCRIPT/HEADBODYFORMEnteranexpression:INPUTTYPE=textNAME=exprSIZE=15INPUTTYPE=buttonVALUE=CalculateONCLICK=“compute(this.form)”BRResult:INPUTTYPE=“text”NAME=“result”SIZE=15/FORM/BODY典型例子--4:和用户的交互SCRIPTLANGUAGE=JavaScriptfunctioncheckNum(str,min,max){if(str==){alert(Enteranumberinthefield,please.)returnfalse;}for(vari=0;istr.length;i++){varch=str.substring(i,i+1);if(ch0||ch9){alert(Tryanumber,please.)returnfalse;}}varval=parseInt(str,10);if((valmin)||(valmax)){alert(Tryanumberfrom1to10.);returnfalse;}returntrue;}functionthanks(){alert(Thankyouforyourinput.)}/SCRIPT/HEADBODYFORMNAME=ex5Enterasmallnumber:INPUTNAME=numonChange=if(!checkNum(this.value,1,10)){this.focus();this.select;}elsethanks()/FORM/BODY典型例子--5-1:建立cookieHTMLHEADscriptlanguage=JavaScripttemp=test=internet;expiration=newDate((newDate()).getTime()+24*60*60*1000);temp+=';expires='+expiration.toGMTString();document.cookie=temp;/script/HEADBODYH1Acookiehasbeenset/H1/BODY/HTML典型例子--5-2:收回cookieHTMLHEADscriptlanguage=JavaScripttemp=document.cookie;document.write(temp)/script/HEADBODYH1Acookiehasbeenretrievedmagically!/H1/BODY/HTML典型例子--6:摆弄图像HTMLHEADscriptfunctionreplace(){document.replaced.src=wcc.gif”}/script/HEADBODYimgsrc=lxm.gifname=replacedwidth=120height=150pforminputtype=buttonvalue=goonclick=replace()/form/BODY/HTMLJavaScript语言基本要素（1）数据类型变量与表达式数据类型转换表达式与操作符数据类型String“hello”‘hello’‘\n’(换行）‘\t’(tab)Number4.5BoolentruefalseNULLnullObjectFunction变量与表达式创建变量•varanumber=137;//变量的值是一个数•varanumber1=2;•varastring=“1”;//变量的值也可以是一个字符串•varastring1=“hello”;变量名•以字母开头，不能有空格•组合命名，myAge表达式•xx=astring1+astring//结果是x=“hello1”•xx=anumber+anumber1//结果是xx=139•xx=anumber+astring//结果是xx=“1371”数据类型转换转换字符串为数值•parseInt(“42”,10)=42(取整)0XFF(16)077(8)•parseFloat(“42.33”)=42.33varstr=77;vara=parseInt(str,8);varb=parseInt(str,10);varc=parseInt(str,16);vard=parseInt('abc',10);vare=parseInt('abc',16);varf=parseInt('abcHs',16);转换数值为字符串•最简单的方法是空串与数值字符相加“”+2500=“2500”表达式与操作符JavaScript表达式和基本操作符类似于C，PERL，和Java赋值操作符有=,+=,-=,*=,/=,%=,=,=,=,&=,^=,|=.其中•x+=y;表示x=x+y;•x%=y;表示x=x%y;//xmod(y)条件表达式:status=(age=18)?adult:minor;算数操作符和通常的用法相同，包括++和负号--,y=++x;//x加1，并把结果送给y表达式与操作符（cont‘d)位逻辑运算符&(与)|(或)^(异或)用于对两个32位整型数按位进行逻辑运算按位左移，最左端的位(高位)抛弃，右端填零.按位右移，最高位的符号位(位31)保留并复制填充左端零填充右移，不对符号位作特殊处理布尔操作符有&&(与),||(或),!(非)，只能对布尔变量使用比较操作符有==,,=,,=,!=.连接操作符+用于连接两个字符串•x=Hello;y=World!;x+y为HelloWorld!语言基本要素if(){}else{}for(){}、do{}while();和while(){}breakcontinue全局变量和局部变量for(xinobj){//x}对象模型JavaScript被称为是“基于对象的”(而不是面向对象的)•有对象的概念:数据和操作的封装,但没有继承的概念从定义的角度看,JavaScript程序中有两种对象•JavaScript提供的内置对象（built-inobject)•程序中定义的对象一个对象是一个由变量、其他对象或方法组成的一个集合.•在一个对象中包含的其他对象和变量被称为特性(property)•在一个对象内的函数(function)称为这个对象的方法(method)•在一个特定的对象中的一些特性的序列称为数组,例如document对象中的image[].•多维数组是由含有数组特性的对象数组构造的.JavaScript的内置对象文档对象，HTML文档及其显示环境相联的对象,例如window,document核心语言对象（全局对象）•字符串对象（String）•数学对象（Math)•日期对象(Date)•数组对象(Array)对应于HTML文档及其相关环境的对象--文档对象浏览器将这些系统对象组织成一个层次结构.•Window,对应于一个显示文档的窗口,这个层次结构的根•location,Window对象的一个属性,对应于当前URL.•history,又一个属性,对应于用户曾经访问过的URL.•document,又一个属性,对应所加载的文档.•…...JavaScript的文档对象模型historylinkanchorlayerpasswordtextareatextcheckboxradiosubmitresetbuttonfileUploadoptionselectformappletimageareadocumentlocationtoolbar等windowsJavaScript的文档对象模型(cont‘d)注意：前面的文档对象模型只是牵制层次关系，不是继承层次关系。没有对象继承一个高于系列之上的对象属性或方法。不存在任何方向上对象到对象的自动消息传递，通过文档或表单对象发送消息给它，所有对象引用一定是清楚的。对象引用当一个文档加载到浏览器后，它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让Script指出它要的是哪一个对象，这就是对象引用。JavaScript用严格的层次结构引导Script至文档的任何区域，对每个对象的引用必须包括从顶部到对象的所有层次，直至对象名，路径中各个相连的对象之间用句点分开。对象引用（cont‘d)变量可以写成下面的形式:•父对象.特性1[索引1].特性2..最后特性[索引N]对象的方法(method)可以如此引用：