Web前台技术-JavaScript

1Web前台技术——JavaScript2内容提要Unit1：JavaScript基础Unit2：JavaScript对象Unit3：HtmlDOM3Unit1：JavaScript基础4Unit1：JavaScript基础JS简介JS实现JS放置JS变量JSIf...ElseJSSwitchJS运算符JS消息框JS函数JSForLoopJSWhileLoopJSBreakLoopsJSFor...InJS事件5JavaScript简介什么是JavaScript？JavaScript被设计用来向HTML页面添加交互行为。JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）。JavaScript通常被直接嵌入HTML页面。JavaScript是一种解释型语言（就是说，代码执行不进行预编译）。所有的人无需购买许可证均可使用JavaScript。6JavaScript简介JavaScript能做什么？JavaScript为HTML设计师提供了一种编程工具JavaScript可以将动态的文本放入HTML页面JavaScript可以对事件作出响应JavaScript可以读写HTML元素JavaScript可被用来验证数据JavaScript可被用来检测访问者的浏览器JavaScript可被用来创建cookies7如何实现JavaScriptHTML的script标签被用来将JavaScript插入HTML页面当中。htmlbodyscripttype=text/javascriptdocument.write(HelloWorld!);/script/body/html8如何实现JavaScript用分号来结束声明？传统的编程语言中，例如C++和Java，每行语句都用分号来结束。在编写JavaScript时，许多程序员也保留了这个习惯，但是一般来说，分号是一个可选项。不过，假如您在一行中书写超过不止一条语句，那么分号则是必需的。9如何实现JavaScript如何与老的浏览器打交道那些不支持JavaScript的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的HTML注释标签：scripttype=text/javascript!--document.write(HelloWorld!);//--/script10把JavaScript放置到何处位于head部分的脚本：当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到head部分后，就可以确保在需要使用脚本之前，它已经被载入了。htmlheadscripttype=text/javascript..../script/head....11把JavaScript放置到何处位于body部分的脚本：在页面被载入时脚本就会被执行。当你把脚本放置于body部分后，它就会生成页面的内容。htmlhead/headbodyscripttype=text/javascript..../script/body/html12把JavaScript放置到何处在body和head部分的脚本：你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到body，又可以放置到head部分。htmlheadscripttype=text/javascript..../script/headbodyscripttype=text/javascript..../script/body/html13把JavaScript放置到何处使用外部JavaScript（1）有时，你也许希望在若干个页面中运行JavaScript，同时不在每个页面中写相同的脚本。为了达到这个目的，你可以将JavaScript写入一个外部文件之中。然后以.js为后缀保存这个文件。14把JavaScript放置到何处使用外部JavaScript（2）htmlheadscriptsrc=“myjs.js..../script/headbody/body/html15练习☺使用JavaScript将“Hello，JS!”打印到文档上。请在三个不同位置应用JavaScript。16JavaScript变量变量htmlbodyscripttype=text/javascriptvarname=Hegedocument.write(name)document.write(h1+name+/h1)/scriptpThisexampledeclaresavariable,assignsavaluetoit,andthendisplaysthevariable./ppThenthevariableisdisplayedonemoretime,onlythistimeasaheading./p/body/html【运行】17JavaScript变量变量是存储信息的容器。变量名的规则：变量名对大小写敏感变量名起始于字母或者下划线18JavaScript变量声明变量使用var语句来创建变量：varstrname=somevalue不使用var也可以创建变量：strname=somevalue19JavaScript变量为变量赋值像这样为变量赋值：varstrname=Hege或者像这样：strname=Hege20JavaScript变量变量的寿命局部变量全局变量21JavaScriptIf...Else语句条件语句在您编写代码时，经常需要根据不同的条件完成不同的行为。在JavaScript中，我们可以使用下面几种条件语句：if语句：在一个指定的条件成立时执行代码。if...else语句：在指定的条件成立时执行代码，当条件不成立时执行另外的代码。if...elseif....else语句：使用这个语句可以选择执行若干块代码中的一个。switch语句：使用这个语句可以选择执行若干块代码中的一个。22JavaScriptIf...Else语句If语句语法：if(条件){条件成立时执行代码}23JavaScriptIf...Else语句If语句实例scripttype=text/javascript//WriteaGoodmorninggreetingif//thetimeislessthan10vard=newDate()vartime=d.getHours()if(time10){document.write(bGoodmorning/b)}/script【运行】24JavaScriptIf...Else语句If...else语句语法：if(条件){条件成立时执行此代码}else{条件不成立时执行此代码}25练习☺If...else语句练习//Ifthetimeislessthan10,//youwillgetaGoodmorninggreeting.//OtherwiseyouwillgetaGooddaygreeting.26JavaScriptIf...Else语句If...elseif...else语句语法：if(条件1){条件1成立时执行代码}elseif(条件2){条件2成立时执行代码}else{条件1和条件2均不成立时执行代码}27练习☺If...elseif...else语句练习//Iftime10,//youwillgetaGoodmorninggreeting.//elseiftime=10&&time16//youwillgeta“Goodday”greeting.//OtherwiseyouwillgetaHelloJS!greeting.28JavaScriptSwitch语句语法：switch(n){case1:执行代码块1breakcase2:执行代码块2breakdefault:如果n即不是1也不是2，则执行此代码}29JavaScriptSwitch语句实例scripttype=text/javascriptvard=newDate()theDay=d.getDay()switch(theDay){case5:document.write(FinallyFriday)breakcase6:document.write(SuperSaturday)breakcase0:document.write(SleepySunday)breakdefault:document.write(I'mlookingforwardtothisweekend!)}/script【运行】30JavaScript运算符31JavaScript运算符32JavaScript运算符33JavaScript运算符34JavaScript运算符字符运算符字符串通常是文本，比如“HelloWorld!”。使用+运算符就可以将两个字符变量结合在一起变量txt3的现在的值是Whataveryniceday!。txt1=Whataverytxt2=niceday!txt3=txt1+txt235JavaScript运算符条件运算符JavaScript也包含条件运算符，这种运算符可以给基于条件的变量赋值。语法：变量名=(条件)?值1:值2实例：greeting=(visitor==PRES)?DearPresident:Dear36JavaScript消息框警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert(文本)37JavaScript消息框警告框实例htmlheadscripttype=text/javascriptfunctiondisp_alert(){alert(Iamanalertbox!!)}/script/headbodyinputtype=buttononclick=disp_alert()value=Displayalertbox//body/html【运行】38练习☺请编写代码，使得浏览器弹出如下警告框：39JavaScript消息框确认框确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false。语法：confirm(文本)40练习☺请编写确认框代码。当点击确认框“确定”按钮时，文档显示“YoupressedOK!”；当点击“取消”按钮时，文档显示“YoupressedCancel!”。41JavaScript消息框提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。语法：prompt(文本,默认值)42练习☺请编写提示框代码。当输入新的名字并点击确定后，文档打印出：“Helloname！Howareyoutoday?”43JavaScript函数函数实例：htmlheadscripttype=text/javascriptfunctionmyfunction(){alert(Helloworld!!)}/script/headbodyforminputtype=buttononclick=myfunction()value=Callfunction/formpBypressingthebutton,afunctionwillbecalled.Thefunctionwillalertamessage./p/body/html【运行】假如右面的例子中的alert(Helloworld!!)没有被写入函数，那么当页面被载入时它就会