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

下載本文檔

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

文檔簡介

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

JavaScript簡介

JavaScript基本語法對象化編程

瀏覽器對象模型與文檔對象模型JS開發(fā)框架技術(shù)JavaScript實(shí)例Ajax技術(shù)第5頁5.1JavaScript簡介

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

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

安全性

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

跨平臺(tái)性

第7頁5.1JavaScript簡介

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

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

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

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

兩者的代碼格式不同

兩者嵌入HTML的方式不一樣

第8頁5.1JavaScript簡介

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

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

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

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

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

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

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

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

瀏覽器“地址”欄輸入：

javascript:<JavaScript語句>使用鏈接： <ahref="javascript:<JavaScript語句>">...</a>第11頁5.1JavaScript簡介

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

JavaScript兼容性說明第13頁5.2JavaScript基本語法

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

第14頁5.2JavaScript基本語法

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

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

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

第17頁5.2JavaScript基本語法

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

“/*”和“*/”括起來的一行到多行文字

條件語句if語句

switch語句

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

第18頁5.2JavaScript基本語法

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

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

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

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

對象操作語句for...in語句with語句

this關(guān)鍵詞

new運(yùn)算符

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

對象方法的引用第21頁5.3對象化編程

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

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

自定義類及對象<!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頁5.4

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

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

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

瀏覽器對象模型(BOM)與文檔對象模型(DOM)第28頁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)頁最后更新時(shí)間："+update_date+"<BR>")document.write("本網(wǎng)頁最后更新日期："+formated_date+"<BR>")</script><br>測試文件對象的顏色屬性：<br><ahref="">南京郵電大學(xué)</a></body></html>5.4

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

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

文本對象Text

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

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

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

溫馨提示

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

最新文檔

評論

0/150

提交評論