網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch05 JavaScript語(yǔ)言與客戶端開(kāi)發(fā)_第1頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch05 JavaScript語(yǔ)言與客戶端開(kāi)發(fā)_第2頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch05 JavaScript語(yǔ)言與客戶端開(kāi)發(fā)_第3頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch05 JavaScript語(yǔ)言與客戶端開(kāi)發(fā)_第4頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch05 JavaScript語(yǔ)言與客戶端開(kāi)發(fā)_第5頁(yè)
已閱讀5頁(yè)，還剩36頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第5章JavaScript語(yǔ)言與客戶端開(kāi)發(fā)教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)過(guò)程第2頁(yè)教學(xué)目標(biāo)理解JavaScript腳本語(yǔ)言的基本概念掌握J(rèn)avaScript腳本語(yǔ)言的基本語(yǔ)法掌握J(rèn)avaScript的變量、各類控制語(yǔ)句和函數(shù)的用法了解JavaScript內(nèi)置對(duì)象和文檔對(duì)象模型的基本用法了解JavaScript開(kāi)發(fā)框架JavaScript典型案例第3頁(yè)教學(xué)重點(diǎn)JavaScript腳本語(yǔ)言的基本語(yǔ)法JavaScript的變量、各類控制語(yǔ)句和函數(shù)的用法JavaScript在網(wǎng)頁(yè)中的應(yīng)用第4頁(yè)教學(xué)過(guò)程

JavaScript簡(jiǎn)介

JavaScript基本語(yǔ)法對(duì)象化編程

瀏覽器對(duì)象模型與文檔對(duì)象模型JS開(kāi)發(fā)框架技術(shù)JavaScript實(shí)例Ajax技術(shù)第5頁(yè)5.1JavaScript簡(jiǎn)介

JavaScript是由Netscape公司的BrendanEich發(fā)明的，最初稱為L(zhǎng)iveScript1995年Java出現(xiàn)后，以Java的設(shè)計(jì)理念，對(duì)LiveScript進(jìn)行了改寫(xiě)，增加了對(duì)JavaApplet的支持，所以改名為JavaScriptJavaScript可增加網(wǎng)頁(yè)的互動(dòng)性簡(jiǎn)化HTML代碼中的重復(fù)代碼減少網(wǎng)頁(yè)下載時(shí)間對(duì)提交表單做即時(shí)的檢查，即時(shí)響應(yīng)用戶的操作第6頁(yè)5.1JavaScript簡(jiǎn)介

基于對(duì)象)和事件驅(qū)動(dòng)，并具有較高安全性能的腳本語(yǔ)言，特點(diǎn)如下：一種腳本語(yǔ)言基于對(duì)象簡(jiǎn)單性

安全性

動(dòng)態(tài)性

跨平臺(tái)性

第7頁(yè)5.1JavaScript簡(jiǎn)介

JavaScript不是Java的精簡(jiǎn)版，區(qū)別如下：

Java是面向?qū)ο蟮?，而JavaScript是基于對(duì)象的

JavaScript是解釋執(zhí)行的，而Java是編譯執(zhí)行

Java采用強(qiáng)變量，JavaScript采用弱變量

兩者的代碼格式不同

兩者嵌入HTML的方式不一樣

第8頁(yè)5.1JavaScript簡(jiǎn)介

JavaScript在網(wǎng)站開(kāi)發(fā)中具有以下作用：創(chuàng)建生動(dòng)的用戶界面

數(shù)據(jù)有效性驗(yàn)證工作

數(shù)據(jù)查找

JavaScript語(yǔ)言的組成JavaScript核心語(yǔ)言JavaScript客戶端擴(kuò)展JavaScript服務(wù)器端擴(kuò)展第9頁(yè)5.1JavaScript簡(jiǎn)介

將JavaScript引入網(wǎng)頁(yè)可直接將代碼加入網(wǎng)頁(yè)JavaScript可出現(xiàn)在網(wǎng)頁(yè)中的任意位置，但必須使用標(biāo)記<script>…</script>“<!—”和“//-->”的作用，是讓不能解析<script>標(biāo)簽的瀏覽器忽略JavaScript代碼第四行前邊的雙反斜杠“//”是JavaScript里的注釋標(biāo)號(hào)<script><!--...(JavaScript代碼)...//--></script>第10頁(yè)5.1JavaScript簡(jiǎn)介

將JavaScript引入網(wǎng)頁(yè)使用外部文件的方式，將某個(gè).js文件引入

<scriptsrc="javascript.js"></script>

在瀏覽器中直接調(diào)用JavaScript

瀏覽器“地址”欄輸入：

javascript:<JavaScript語(yǔ)句>使用鏈接： <ahref="javascript:<JavaScript語(yǔ)句>">...</a>第11頁(yè)5.1JavaScript簡(jiǎn)介

一個(gè)簡(jiǎn)單的JavaScript實(shí)例<!DOCTYPEhtml><html><head><title>一個(gè)簡(jiǎn)單的實(shí)例</title></head><body><scripttype="text/javascript">document.write("一個(gè)簡(jiǎn)單的實(shí)例");</script></body></html>第12頁(yè)5.1JavaScript簡(jiǎn)介

JavaScript兼容性說(shuō)明第13頁(yè)5.2JavaScript基本語(yǔ)法

一般語(yǔ)句具有如下格式：<語(yǔ)句>;用大括號(hào)“{}”括起來(lái)的一個(gè)或多個(gè)語(yǔ)句，相當(dāng)于一個(gè)復(fù)合語(yǔ)句允許語(yǔ)句塊的嵌套

第14頁(yè)5.2JavaScript基本語(yǔ)法

JavaScript的數(shù)據(jù)類型：第15頁(yè)5.2JavaScript基本語(yǔ)法

JavaScript的變量名稱符合：只包含字母、數(shù)字和/或下劃線；必須以字母開(kāi)頭；不能太長(zhǎng)；不能與JavaScript保留字重復(fù)變量是區(qū)分大小寫(xiě)的變量名及函數(shù)名一般用小寫(xiě)，多個(gè)單詞中除首單詞外其余單詞首字母大寫(xiě)聲明變量的方式：var<變量>[=<值>];變量的作用域及賦值方法

第16頁(yè)賦值操作符：=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=；條件表達(dá)式：status=(age>=18)?"adult":"minor"；算數(shù)操作符：+、-、*、/、%、++和--，y=++x；位邏輯運(yùn)算符：&、|、^;<<、>>、>>>布爾操作符：&&、||、!比較操作符：==、>、>=、<、<=、!=；連接操作符+用于連接兩個(gè)字符串：x="Hello";y="World!";x+y為"HelloWorld!"5.2JavaScript基本語(yǔ)法

第17頁(yè)5.2JavaScript基本語(yǔ)法

注釋語(yǔ)句雙反斜杠“//”標(biāo)記后面的部分將被忽略

“/*”和“*/”括起來(lái)的一行到多行文字

條件語(yǔ)句if語(yǔ)句

switch語(yǔ)句

循環(huán)語(yǔ)句for語(yǔ)句while語(yǔ)句do-while語(yǔ)句break和continue

第18頁(yè)5.2JavaScript基本語(yǔ)法

函數(shù)可以在腳本中被事件觸發(fā)或被其他語(yǔ)句調(diào)用

使用function關(guān)鍵字來(lái)定義一個(gè)函數(shù)functionaddAll(a,b,c){returna+b+c;}vartotal=addAll(20,40,60);第19頁(yè)5.3對(duì)象化編程

將編程所涉及的實(shí)體劃分成大大小小的對(duì)象，對(duì)象下面還可繼續(xù)劃分為更小的對(duì)象直至不能進(jìn)一步劃分為止對(duì)象是屬性和方法的集合

獲得對(duì)象的方式引用JavaScript的內(nèi)部對(duì)象由瀏覽器環(huán)境所提供的對(duì)象自行創(chuàng)建的對(duì)象第20頁(yè)5.3對(duì)象化編程

對(duì)象操作語(yǔ)句for...in語(yǔ)句with語(yǔ)句

this關(guān)鍵詞

new運(yùn)算符

對(duì)象屬性的引用使用“.”、下標(biāo)或字符串形式

對(duì)象方法的引用第21頁(yè)5.3對(duì)象化編程

事件處理事件：用戶對(duì)網(wǎng)頁(yè)的一些特定“操作”(這些操作通常直接對(duì)應(yīng)鼠標(biāo)的動(dòng)作)和系統(tǒng)行為。例如：加載一張網(wǎng)頁(yè)，點(diǎn)擊一個(gè)超鏈等發(fā)生事件->啟動(dòng)事件處理程序->事件處理程序作出反應(yīng)“on事件名”是JavaScript規(guī)定的對(duì)應(yīng)事件處理程序柄（eventhandler）的名字。例如：onClick、onfocus、onSubmit等用戶瀏覽器JavaScript事件處理機(jī)制鼠標(biāo)/鍵盤(pán)操作顯示處理結(jié)果事件提交調(diào)用事件處理函數(shù)完成處理第22頁(yè)5.3對(duì)象化編程

JavaScript的內(nèi)部對(duì)象“數(shù)字”對(duì)象Number字符串對(duì)象String數(shù)組對(duì)象Array算術(shù)對(duì)象Math日期對(duì)象DateJavaScript中的系統(tǒng)函數(shù)JavaScript的全局對(duì)象第23頁(yè)5.3對(duì)象化編程

自定義類及對(duì)象<!DOCTYPEhtml><html><body><scripttype="text/javascript">functionClass1(name,age){letperson={name:name,age:age,greet:function(){return'Hello,mynameis'+;}};returnperson;}letperson1=Class1('John',25);alert(person1.greet());//輸出:Hello,mynameisJohn='Bob';person1.age=30;alert(person1.greet());//輸出:Hello,mynameisBob</script></body></html>第24頁(yè)5.4

瀏覽器對(duì)象模型(BOM)與文檔對(duì)象模型(DOM)第25頁(yè)5.4

瀏覽器對(duì)象模型(BOM)與文檔對(duì)象模型(DOM)文檔對(duì)象(DOM)是從網(wǎng)頁(yè)文檔里劃分出來(lái)的對(duì)象在網(wǎng)頁(yè)特效或驗(yàn)證過(guò)程需要使用這些對(duì)象名稱含義名稱含義navigator瀏覽器對(duì)象location位置對(duì)象window窗口對(duì)象document文件對(duì)象screen屏幕對(duì)象Link鏈接對(duì)象event事件對(duì)象Form表單對(duì)象history歷史對(duì)象CookieCookie對(duì)象第26頁(yè)瀏覽器對(duì)象<!DOCTYPEhtml><html><body><script>with(document){write("你的瀏覽器信息：<OL>");write("<LI>代碼："+navigator.appCodeName);write("<LI>名稱："+navigator.appName);write("<LI>版本："+navigator.appVersion);write("<LI>語(yǔ)言："+navigator.language);write("<LI>編譯平臺(tái)："+navigator.platform);write("<LI>用戶表頭："+navigator.userAgent);}</script></body></html>5.4

瀏覽器對(duì)象模型(BOM)與文檔對(duì)象模型(DOM)第27頁(yè)屏幕對(duì)象<!DOCTYPEhtml><html><body><scripttype="text/javascript">with(document){write("您的屏幕顯示設(shè)定值如下：<P>");write("屏幕的實(shí)際高度為",screen.availHeight,"<BR>");write("屏幕的實(shí)際寬度為",screen.availWidth,"<BR>");write("屏幕的色盤(pán)深度為",screen.colorDepth,"<BR>");write("屏幕區(qū)域的高度為",screen.height,"<BR>");write("屏幕區(qū)域的寬度為",screen.width);}</script></body></html>5.4

瀏覽器對(duì)象模型(BOM)與文檔對(duì)象模型(DOM)第28頁(yè)document示例<!DOCTYPEhtml><html><body><scripttype="text/javascript">document.bgColor="gray";document.fgColor="blue";document.linkColor="red";document.alinkColor="blue";document.vlinkColor="purple";varupdate_date=document.lastModified;varformated_date=update_date.substring(0,10);document.write("本網(wǎng)頁(yè)最后更新時(shí)間："+update_date+"<BR>")document.write("本網(wǎng)頁(yè)最后更新日期："+formated_date+"<BR>")</script><br>測(cè)試文件對(duì)象的顏色屬性：<br><ahref="">南京郵電大學(xué)</a></body></html>5.4

瀏覽器對(duì)象模型(BOM)與文檔對(duì)象模型(DOM)第29頁(yè)5.4

瀏覽器對(duì)象模型(BOM)與文檔對(duì)象模型(DOM)表單對(duì)象

文本對(duì)象Text

按鈕對(duì)象、提交按鈕對(duì)象和重置按鈕對(duì)象單選按鈕對(duì)象Radio復(fù)選框?qū)ο驝heckbox選擇對(duì)象Select和選項(xiàng)對(duì)象Option文本區(qū)域?qū)ο骉extarea文件上傳對(duì)象FileUpload第30頁(yè)5.5JS開(kāi)發(fā)框架技術(shù)框架技術(shù)簡(jiǎn)介Bootstrap框架jQuery框架ExtJSDojoMootoolsPrototypeJSYUIFoundationKissyQWap

第31頁(yè)5.5JS開(kāi)發(fā)框架技術(shù)框架實(shí)例例5-32：angular+bootstrap實(shí)現(xiàn)無(wú)刷新翻頁(yè)及查找功能第32頁(yè)5.6JavaScript實(shí)例帶動(dòng)畫(huà)效果的進(jìn)度條例5-34第33頁(yè)5.6JavaScript實(shí)例旋轉(zhuǎn)變幻文字效果例5-35第34頁(yè)5.6JavaScript實(shí)例指針式時(shí)鐘的實(shí)現(xiàn)例5-36第35頁(yè)5.6JavaScript實(shí)例一個(gè)益智小游戲——貪吃蛇例5-37第36頁(yè)5.7Ajax技術(shù)

Ajax的現(xiàn)狀I(lǐng)BM、Oracle、Yahoo!、BEA、RedHat、Novell等業(yè)界領(lǐng)先的公司啟動(dòng)了OpenAjax項(xiàng)目微軟開(kāi)發(fā)了自己的Ajax框架Alt

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論