《Web前端設(shè)計(jì)實(shí)訓(xùn)》課件-任務(wù)18 JavaScript的應(yīng)用_第1頁
《Web前端設(shè)計(jì)實(shí)訓(xùn)》課件-任務(wù)18 JavaScript的應(yīng)用_第2頁
《Web前端設(shè)計(jì)實(shí)訓(xùn)》課件-任務(wù)18 JavaScript的應(yīng)用_第3頁
《Web前端設(shè)計(jì)實(shí)訓(xùn)》課件-任務(wù)18 JavaScript的應(yīng)用_第4頁
《Web前端設(shè)計(jì)實(shí)訓(xùn)》課件-任務(wù)18 JavaScript的應(yīng)用_第5頁
已閱讀5頁，還剩33頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

任務(wù)18JavaScript的應(yīng)用學(xué)習(xí)目標(biāo)掌握J(rèn)avaScript的函數(shù)使用JavaScript的基本語法JavaScript的語言基礎(chǔ)1.事件及事件驅(qū)動(dòng)2.JavaScript對象了解:學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作商品精選模塊任務(wù)目標(biāo)強(qiáng)化訓(xùn)練——制作焦點(diǎn)圖廣告知識準(zhǔn)備1.JavaScript簡介JavaScript：Web頁面中的一種腳本編程語言，也是一種通用的、跨平臺的、基于對象和事件驅(qū)動(dòng)并具有安全性的腳本語言。特點(diǎn)：不需要編譯，直接嵌入在HTML頁面中，實(shí)現(xiàn)實(shí)時(shí)的、動(dòng)態(tài)的、可交互的網(wǎng)頁效果。作用：表單驗(yàn)證、網(wǎng)頁動(dòng)畫效果、焦點(diǎn)圖切換效果、浮動(dòng)廣告窗口、旋轉(zhuǎn)文字特效。知識準(zhǔn)備1.JavaScript簡介JavaScript引入方式一：內(nèi)嵌式<head><script>//此處為JavaScript代碼</script></head>知識準(zhǔn)備示例：內(nèi)嵌式引入<!doctypehtml><html><head><metacharset="utf-8"><title>內(nèi)嵌式引入</title><script>document.write("此處為JavaScript代碼。");//輸出語句。</script></head><body><p>此處為網(wǎng)頁內(nèi)容。</p></body></html>知識準(zhǔn)備1.JavaScript簡介JavaScript引入方式二：外鏈?zhǔn)?lt;head><scriptsrc="js文件的路徑"></script></head>知識準(zhǔn)備示例：外鏈?zhǔn)揭?lt;!doctypehtml><html><head><metacharset="utf-8"><title>外鏈?zhǔn)揭?lt;/title><scriptsrc="18-2.js"></script></head><body><p>此處為網(wǎng)頁內(nèi)容。</p></body></html>//JavaScriptDocumentdocument.write("此處為js文件代碼。");//輸出語句?！?8-2.js”文件代碼：

提示：外部腳本不能包含<script>標(biāo)簽。知識準(zhǔn)備JavaScript基本語法執(zhí)行順序：JavaScript程序按照在HTML文件中出現(xiàn)的順序逐行執(zhí)行。大小寫敏感：嚴(yán)格區(qū)分字母大小寫。如：myname和myName是兩個(gè)不同的變量。每行語句結(jié)尾的分號可有可無：為了規(guī)范，應(yīng)以分號結(jié)束。注釋：1.JavaScript簡介//單行注釋文本/*單行注釋文本*//*多行注釋文本多行注釋文本*/知識準(zhǔn)備2.JavaScript語言基礎(chǔ)關(guān)鍵字：關(guān)鍵字不能作為變量名和函數(shù)名使用。abstractargumentsbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelseenumevalexportextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportininstanceofintinterfaceletlongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransienttruetrytypeofvarvoidvolatilewhilewithyield

知識準(zhǔn)備2.JavaScript語言基礎(chǔ)標(biāo)識符：用來命名變量和函數(shù)。命名規(guī)則：第一個(gè)字符必須是字母、下劃線（_）或美元符號（$）第一個(gè)字符其后的字符可以是字母、數(shù)字、下劃線或美元符號標(biāo)識符不能和JavaScript中的關(guān)鍵字同名不能包含空格等特殊符號合法：i、user_name、_name、$name、n1不合法：1a、mn、55、long知識準(zhǔn)備2.JavaScript語言基礎(chǔ)常量：程序運(yùn)行時(shí)，值不能改變的量為常量（Constant）。語法格式：const常量名:數(shù)據(jù)類型=值;知識準(zhǔn)備2.JavaScript語言基礎(chǔ)變量：程序中一個(gè)已經(jīng)命名的存儲單元，為數(shù)據(jù)操作提供存放信息的容器。命名規(guī)則：必須以字母或下劃線開頭，中間可以是數(shù)字、字母或下劃線變量名不能包含空格、加、減等符號不能使用JavaScript中的關(guān)鍵字JavaScript的變量名嚴(yán)格區(qū)分大小寫，如myname不等同myName知識準(zhǔn)備2.JavaScript語言基礎(chǔ)變量的聲明與賦值：var變量名;建議：變量先聲明，后使用vara,b,c;//同時(shí)聲明a，b，c三個(gè)變量。vara=1,b=2,c=3;//同時(shí)聲明a，b，c三個(gè)變量，并分別對其進(jìn)行初始化賦值。知識準(zhǔn)備3.JavaScript函數(shù)函數(shù)：計(jì)算機(jī)程序中由多條語句組成的邏輯單元定義：<script>

function

函數(shù)名([參數(shù)1,參數(shù)2,……]){

函數(shù)體[return表達(dá)式;]}</script>調(diào)用：函數(shù)名([參數(shù)1,參數(shù)2,……])注意：關(guān)鍵字function

必須小寫知識準(zhǔn)備示例：函數(shù)的調(diào)用<!doctypehtml><html><head><metacharset="utf-8"><title>函數(shù)的調(diào)用</title><script>functionshow(){alert("歡迎學(xué)習(xí)JavaScript！");//alert()方法可以彈出警告框

}</script></head><body><!--鼠標(biāo)點(diǎn)擊事件調(diào)用函數(shù)show()--><inputtype="button"value="點(diǎn)擊我"onClick="show()"></body></html>知識準(zhǔn)備4.事件及事件驅(qū)動(dòng)事件：用戶與Web頁面交互時(shí)產(chǎn)生的操作，比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等。事件驅(qū)動(dòng)：當(dāng)事件發(fā)生后，會(huì)由此而引發(fā)一連串程序的執(zhí)行，這些程序稱為事件處理程序。常用事件：鼠標(biāo)事件、鍵盤事件、表單事件、頁面事件知識準(zhǔn)備4.事件及事件驅(qū)動(dòng)

類別事件當(dāng)以下情況發(fā)生時(shí)，觸發(fā)此事件鼠標(biāo)事件onclick鼠標(biāo)點(diǎn)擊某個(gè)對象ondblclick鼠標(biāo)雙擊某個(gè)對象onmousedown某個(gè)鼠標(biāo)按鍵被按下onmouseup某個(gè)鼠標(biāo)按鍵被松開onmouseover鼠標(biāo)被移到某元素之上onmousemove鼠標(biāo)被移動(dòng)onmouseout鼠標(biāo)從某元素移開知識準(zhǔn)備4.事件及事件驅(qū)動(dòng)類別事件當(dāng)以下情況發(fā)生時(shí)，觸發(fā)此事件鍵盤事件onkeydown按下任何鍵盤鍵（包括系統(tǒng)按鈕，如箭頭鍵和功能鍵）時(shí)發(fā)生。onkeyup用戶放開任何先前按下的鍵盤鍵時(shí)發(fā)生。onkeypress按下并放開任何字母數(shù)字鍵時(shí)發(fā)生。但是系統(tǒng)按鈕（例如：箭頭鍵、功能鍵）無法得到識別。知識準(zhǔn)備4.事件及事件驅(qū)動(dòng)類別事件當(dāng)以下情況發(fā)生時(shí)，觸發(fā)此事件表單事件onblur元素失去焦點(diǎn)onchange元素失去焦點(diǎn)且內(nèi)容發(fā)生改變onfocus元素獲得焦點(diǎn)onreset表單被重置時(shí)onsubmit表單提交時(shí)頁面事件onload當(dāng)頁面加載完成時(shí)onunload當(dāng)頁面卸載時(shí)知識準(zhǔn)備示例：事件及事件驅(qū)動(dòng)<script>functionchangetext(id){id.innerHTML="鼠標(biāo)未移開！";//innerHTML屬性用于設(shè)置或返回指定標(biāo)簽之間的HTML內(nèi)容。

}functionresettext(id){id.innerHTML="鼠標(biāo)已移開！";}</script><body><h1onmouseover="changetext(this)"onmouseout="resettext(this)">鼠標(biāo)已移開！</h1></body>知識準(zhǔn)備5.JavaScript對象對象：“一切皆對象”，如字符串、數(shù)值、函數(shù)、數(shù)組等屬性：用來描述對象特性的數(shù)據(jù)，即若干變量方法：用來操作對象的若干動(dòng)作，即若干函數(shù)例如：一個(gè)Web頁可以看做一個(gè)對象，它包含背景色、段落文本、標(biāo)題等特性，同時(shí)又包含打開、關(guān)閉和寫入等動(dòng)作。語法：對象名.屬性名對象名.方法名知識準(zhǔn)備6.內(nèi)置對象：Array對象類型名稱說明屬性length獲取數(shù)組長度（數(shù)組元素個(gè)數(shù)）方法reverse()反轉(zhuǎn)數(shù)組的元素順序sort()對數(shù)組的元素進(jìn)行排序join(分隔字符)將數(shù)組內(nèi)各個(gè)元素以分隔符連接成一個(gè)字符串，默認(rèn)按逗號連接push()向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長度splice(m,n)刪除在m位置的n個(gè)元素concat() 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果知識準(zhǔn)備示例：數(shù)組對象的使用<script>varstudent=newArray("張三","李四","王五");varstudent1=newArray("zhangsan","lisi","wangwu");document.write("<ol>");document.write("<li>",student,"</li>");//輸出各個(gè)元素

document.write("<li>",student.join(),"</li>");//用逗號連接各個(gè)元素

document.write("<li>",student.join("、"),"</li>");//用頓號連接各個(gè)元素

document.write("<li>",student.reverse(),"</li>");//倒序

document.write("<li>",student.concat(student1),"</li>");//連接兩個(gè)數(shù)組

document.write("<li>",student1.sort(),"</li>");//按字典順序重新排序

document.write("</ol>");</script>知識準(zhǔn)備6.內(nèi)置對象：String對象類型名稱說明屬性length用于返回字符串中字符的個(gè)數(shù)。注：一個(gè)漢字也是一個(gè)字符方法charAt(index)返回指定索引（index）位置處的字符。第1個(gè)字符的索引為0，第2個(gè)字符的索引為1，以此類推indexOf(str[,startIndex])返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置lastIndexOf(search[,startIndex])從后向前搜索字符串，并從起始位置（0）開始計(jì)算返回字符串最后出現(xiàn)的位置substr(startIndex[,length])從起始索引號提取字符串中指定數(shù)目的字符substring(startIndex[,endIndex])提取字符串中兩個(gè)指定的索引號之間的字符split(separator[,limitInteger])把字符串分割為字符串?dāng)?shù)組search(substr)檢索字符串中指定子字符串或與正則表達(dá)式相匹配的值replace(substr,replacement)在字符串中查找匹配的子串，并替換與正則表達(dá)式匹配的子串toLowerCase()把字符串轉(zhuǎn)換為小寫toUpperCase()把字符串轉(zhuǎn)換為大寫知識準(zhǔn)備示例：字符串對象的使用<script>varstr=newString("Thisisastudent");varfirstIndex=str.indexOf("s");varlastIndex=str.lastIndexOf("s");vararr=newArray();arr=str.split("");len=str.length;result="第一個(gè)s的位置是："+firstIndex+"<br>最后一個(gè)s的位置是："+lastIndex+"<br>字符串對象的長度是："+len+"<br>數(shù)組arr中的各個(gè)元素為："+"<br>"+arr[0]+"<br>"+arr[1]+"<br>"+arr[2]+"<br>"+arr[3];document.write(result);document.write("<br>字符串對象的顏色為紅色："+str.fontcolor("red"));</script>知識準(zhǔn)備6.內(nèi)置對象：Math對象類型名稱說明屬性E返回算術(shù)常量e，即自然對數(shù)的底數(shù)（約等于2.718）LN2返回2的自然對數(shù)（約等于0.693）LN10返回10的自然對數(shù)（約等于2.302）PI返回圓周率（約等于3.14159）方法abs(x)返回x的絕對值ceil(x)返回大于等于x的最小整數(shù)floor(x)返回小于等于x的最大整數(shù)max(x,y,z,...,n)返回x,y,z,...,n中的最大值min(x,y,z,...,n)返回x,y,z,...,n中的最小值pow(x,y)返回x的y次冪random()返回0~1之間的隨機(jī)數(shù)round(x)返回x四舍五入的取整數(shù)sqrt(x)返回?cái)?shù)的平方根知識準(zhǔn)備示例：Math對象的使用<script>functiongetRandom(min,max){varnum=Math.random();//生成[0~1)之間的隨機(jī)小數(shù)

num=num*(max-min)+min;//取得min到max之間的隨機(jī)數(shù)

num=Math.floor(num);//向下取整

returnnum;}document.write("<b>獲取10~20之間的隨機(jī)數(shù)是：</b>"+getRandom(10,20));</script>知識準(zhǔn)備6.內(nèi)置對象：Date對象類型名稱說明方法getDate()從Date對象返回一個(gè)月中的某一天(1~31)getDay()從Date對象返回一周中的某一天(0~6，0表示星期天，1表示星期一，依次類推)getFullYear()從Date對象以四位數(shù)字返回年份getHours()返回Date對象的小時(shí)(0~23)getMilliseconds()返回Date對象的毫秒(0~999)getMinutes()返回Date對象的分鐘(0~59)getMonth()從Date對象返回月份(0~11)getSeconds()返回Date對象的秒數(shù)(0~59)getTime()返回1970年1月1日至今的毫秒數(shù)toLocaleDateString()根據(jù)本地時(shí)間格式，把Date對象的日期部分轉(zhuǎn)換為字符串toLocaleTimeString()根據(jù)本地時(shí)間格式，把Date對象的時(shí)間部分轉(zhuǎn)換為字符串toLocaleString()據(jù)本地時(shí)間格式，把Date對象轉(zhuǎn)換為字符串知識準(zhǔn)備類型名稱說明方法setDate()設(shè)置Date對象中月的某一天(1~31)setFullYear()設(shè)置Date對象中的年份（四位數(shù)字）setHours()設(shè)置Date對象中的小時(shí)(0~23)setMilliseconds()設(shè)置Date對象中的毫秒(0~999)setMinutes()設(shè)置Date對象中的分鐘(0~59)setMonth()設(shè)置Date對象中月份(0~11)setSeconds()設(shè)置Date對象中的秒鐘(0~59)setTime()setTime()方法以毫秒設(shè)置Date對象toString()把

溫馨提示

  • 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)僅提供信息存儲空間，僅對用戶上傳內(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

提交評論