第7章Javascript

《基于Web标准的网页设计》唐四薪编著清华大学出版社配套网站：标准行为层内容如何对事件做出响应表现层内容如何显示结构层内容的语义内容层内容网页是由四层信息构成的一个共同体：回顾：Web标准的描述语言描述网页结构的标准语言XML可扩展标记语言XHTML可扩展超文本标记语言描述网页表现的标准语言CSS层叠样式表描述网页行为的标准语言DOM文档对象模型ECMAScriptECMA制定的标准脚本语言描述web标准的语言在Web标准中，结构标准语言是XML和XHTML，表现标准语言是指CSS，行为标准语言一般指JavaScript。但是实际上HTML语言也有很弱的描述表现的能力，而CSS也有一定的响应行为的能力（如hover伪类）结构表现行为XHTMLCSSJavaScriptWhatisJavaScript?JavaScriptisascriptinglanguageJavaScriptwasdesignedtoaddinteractivitytoHTMLpagesAJavaScriptisusuallyembeddeddirectlyintoHTMLpagesJavaScriptisaninterpretedlanguage(meansthatscriptsexecutewithoutpreliminarycompilation)EveryonecanuseJavaScriptwithoutpurchasingalicenseAreJavaandJavaScripttheSame?JavaScript的组成ECMAScript是一种标准化的脚本程序语言规范，它定义了脚本语言的基本语法，但并不与任何浏览器绑定，因此，Flash中的ActionScript及Javascript都是ECMAScript的具体实现JavaScriptECMAScriptBOMDOMWhatcanaJavaScriptDo?JavaScriptisusedinmillionsofWebpagestoimprovethedesign,putdynamictextintoanHTMLpage,readandwriteHTMLelements,reacttoevents,validateforms,detectbrowsers,createcookies,andmuchmore.JavaScriptisthemostpopularscriptinglanguageontheinternet,andworksinallmajorbrowsers,suchasInternetExplorer,Mozilla,Firefox,Safari,andOpera.HowtoputaJavaScriptIntoanHTMLpage?bodyscripttype=text/javascriptdocument.write(HelloWorld!)/script/bodyThecodeabovewillproducethisoutputonanHTMLpage:HelloWorld!ExampleExplainedToinsertaJavaScriptintoanHTMLpage,weusethescripttag(alsousethetypeattributetodefinethescriptinglanguage).So,thescripttype=text/javascriptand/scripttellswheretheJavaScriptstartsandends:Theworddocument.writeisastandardJavaScriptcommandforwritingoutputtoapage.Byenteringthedocument.writecommandbetweenthescripttype=text/javascriptand/scripttags,thebrowserwillrecognizeitasaJavaScriptcommandandexecutethecodeline.InthiscasethebrowserwillwriteHelloWorld!tothepage:JavaScriptWhereTo...JavaScriptsinthebodysectionwillbeexecutedWHILEthepageloads.JavaScriptsintheheadsectionwillbeexecutedwhenCALLEDorwhenaneventistriggered,gointheheadsection.Whenyouplaceascriptinthebodysection,youwillensurethatthescriptisloadedbeforeanyoneusesit.网页中插入JavaScript脚本的方法JavaScript的最大特点便是和HTML结合，JavaScript需要被嵌入到HTML中才能对网页产生作用。就像网页中嵌入CSS一样，必须通过适当的方法将JavaScript引入到HTML中才能使JavaScript脚本正常的工作。在HTML语言中插入JavaScript脚本的方法有三种，即：使用script标记对将脚本嵌入到网页中（嵌入式）直接将脚本嵌入到HTML标记的事件中（行内式）通过script标记的src属性链接外部脚本文件（链接式）1.使用script标记对将脚本嵌入到网页中（嵌入式）htmlheadtitle第一个JavaScript程序/titlescriptlanguage=javascripttype=text/javascriptfunctionmsg()//JavaScript注释：建立函数{alert(Hello,theWEBworld!)}/script/headbodyponClick=msg()ClickHere/p/body/html2.直接将脚本嵌入到HTML标记的事件中（行内式）可以直接在HTML某些标记内添加事件，然后将JavaScript脚本写在该事件的值内，以响应输入元素的事件htmlheadtitle行内式引入JavaScript脚本/title/headbodyponClick=JavaScript:alert('Hello,theWEBworld!');ClickHere/p/body/html3.通过script标记的src属性链接外部脚本文件（链接式）如果需要同一段脚本供多个网页文件使用，可以把这一段脚本保存成一个单独的文件，JavaScript的外部脚本文件扩展名为“js”htmlheadtitle链接式插入Js脚本文件/titlescriptlanguage=javascripttype=text/javascriptsrc=7-3.js/script/headbodyponClick=msg()ClickHere/p/body/html7-3.js的代码functionmsg()//建立函数{alert(Hello,theWEBworld!)}JavaScript语言基础JavaScript变量JavaScript的变量是一种弱类型变量，所谓弱类型变量是指它的变量无特定类型，定义任何变量都是用“var”关键字，并可以将其初始化为任何值，而且可以随意改变变量中所存储的数据类型，当然为了程序规范应该避免这样操作varname=SixHang;varage＝28;varschool=CSU;varmale=true;变量命名规范：第一个单词所有字母都小写，以后每个单词第一个字母大写，例如：sMyString变量的命名原则首字符必须是字母、下划线（_）或美元符号（$）；余下的字母可以是下划线。美元符号、任意字母或者数字；变量名不能是关键字或保留字变量名对大小写敏感变量名中不能有空格、回车符或其他标点字符例如下面的变量名是非法的：var5zhao;//数字开头，非法vartang's;//对于变量名，单引号是非法字符varthis;//不能使用关键字作为变量名运算符运算符是指完成操作的一系列符号，也称为操作符。运算符用于将一个或多个值运算成结果值，使用运算符的值称为算子或操作数算术运算符OperatorDescriptionExampleResult+Additionx=2y=2x+y4-Subtractionx=5y=2x-y3*Multiplicationx=5y=4x*y20/Division15/55/232.5%Modulus5%210%810%2120++Incrementx=5x++x=6--Decrementx=5x--x=4赋值运算符OperatorExampleIsTheSameAs=x=yx=y+=x+=yx=x+y-=x-=yx=x-y*=x*=yx=x*y/=x/=yx=x/y%=x%=yx=x%y比较运算符OperatorDescriptionExample==isequalto5==8returnsfalse===isequalto(checksforbothvalueandtype)x=5y=5x==yreturnstruex===yreturnsfalse!=isnotequal5!=8returnstrueisgreaterthan58returnsfalseislessthan58returnstrue=isgreaterthanorequalto5=8returnsfalse=islessthanorequalto5=8returnstrue逻辑运算符OperatorDescriptionExample&&andx=6y=3(x10&&y1)returnstrue||orx=6y=3(x==5||y==5)returnsfalse!notx=6y=3!(x==y)returnstrue字符串连接运算符Astringismostoftentext,forexampleHelloWorld!.Tosticktwoormorestringvariablestogether,usethe+operator.txt1=Whataverytxt2=niceday!txt3=txt1+txt2Thevariabletxt3nowcontainsWhataveryniceday!条件运算符variablename=(condition)?value1:value2greeting=(visitor==PRES)?DearPresident:DearIfthevariablevisitorisequaltoPRES,thenputthestringDearPresidentinthevariablenamedgreeting.IfthevariablevisitorisnotequaltoPRES,thenputthestringDearintothevariablenamedgreeting.字符串（String）字符串由零个或多个字符构成，字符可以是字母、数字、标点符号或空格。字符串必须放在单引号或双引号中。例如：varcourse=datastructure“varcase='thebirthday19801106'还可以使用