《JavaScript程序設(shè)計(jì)案例教程》課件-案例1_第1頁(yè)
《JavaScript程序設(shè)計(jì)案例教程》課件-案例1_第2頁(yè)
《JavaScript程序設(shè)計(jì)案例教程》課件-案例1_第3頁(yè)
《JavaScript程序設(shè)計(jì)案例教程》課件-案例1_第4頁(yè)
《JavaScript程序設(shè)計(jì)案例教程》課件-案例1_第5頁(yè)
已閱讀5頁(yè)，還剩50頁(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)介

案例一、百花爭(zhēng)妍學(xué)習(xí)目標(biāo)知識(shí)鏈接案例實(shí)現(xiàn)效果演示目錄學(xué)完本章節(jié)應(yīng)該能做到的事情學(xué)習(xí)目標(biāo)壹學(xué)習(xí)目標(biāo)掌握J(rèn)S的基本使用方法。掌握J(rèn)S變量的使用方法。掌握數(shù)組的字面量表示法和使用forin遍歷。PPT模板/moban/了解無(wú)參函數(shù)的意思。理解DOM的涵義。能獲取、創(chuàng)建DOM元素。會(huì)使用定時(shí)器setTimeout。能生成指定范圍的隨機(jī)數(shù)。掌握使用類名獲取元素的方法。效果演示完成本案例應(yīng)該具備的知識(shí)知識(shí)鏈接貳知識(shí)鏈接列表JS的三種引入方式。JS的注釋。變量定義和賦值。PPT模板/moban/數(shù)組定義、初始化、遍歷(for..in)。無(wú)參函數(shù)定義和調(diào)用。DOM元素。定時(shí)器setTimeout和clearTimeout。onload事件。隨機(jī)數(shù)和取整。getElementsByClassName方法。選擇結(jié)構(gòu)。JS的三種引入方式1在HTML標(biāo)簽中的語(yǔ)法格式：<開(kāi)始標(biāo)簽on+事件類型=“js代碼”></結(jié)束標(biāo)簽>行內(nèi)引入（行內(nèi)式）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><ahref=""onclick="alert('您將要跳轉(zhuǎn)到百度')">百度</a></body></html>JS的三種引入方式1在HTML中定義script標(biāo)簽，然后在script標(biāo)簽里面寫(xiě)js代碼：<script>Js代碼</script>內(nèi)部引入（內(nèi)嵌式）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><script>alert('這是內(nèi)嵌式');</script></body></html>JS的三種引入方式1一、定義外部js文件（擴(kuò)展名是JS的文件）；二、在HTML文件中引入JS文件，格式如下：<scripttype="text/javascript"src="js文件的路徑"></script>注意：script標(biāo)簽內(nèi)部不要有任何代碼外部引入（外鏈?zhǔn)剑?lt;!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><scripttype="text/javascript"src="importjsjs.js"></script></head><body>//這是JS文件importjsjs.js的內(nèi)容alert("這是外鏈?zhǔn)降氖褂?);JS的注釋2以/*開(kāi)頭，以*/結(jié)尾，任何位于/*和*/之間的文本都會(huì)被JavaScript忽略。01單行注釋02多行注釋以//開(kāi)頭，任何位于//與行末之間的文本都是注釋內(nèi)容，不會(huì)執(zhí)行。JS的注釋2<!doctypehtml><html> <head> <metacharset="utf-8"> <title>無(wú)標(biāo)題文檔</title> </head>

<body> <script> //初始化value變量為0 varvalue=0;/***設(shè)置節(jié)點(diǎn)透明度*node節(jié)點(diǎn)*val透明度的值*/functionsetOpacity(node,val){node.style.opacity=val;} </script></body></html>變量定義和賦值3Javascript是一種弱類型語(yǔ)言，其變量類型由它的值來(lái)決定。定義變量需要用關(guān)鍵字'var'varnum=1;//數(shù)值型變量varb=true;//布爾型變量varud;//未賦值，其值是undefined,其類型也是undefined變量varstr='我是字符串';//字符串變量console.log(num,b,ud,str);//輸出到控制臺(tái)變量，函數(shù)，屬性，函數(shù)參數(shù)命名規(guī)范：(1)區(qū)分大小寫(xiě)(2)第一個(gè)字符必須是字母，下劃線（_）或者美元符號(hào)(3)其他字符可以是字母，下劃線，美元符或數(shù)字?jǐn)?shù)組定義、初始化、遍歷(for..in)4數(shù)組對(duì)象用來(lái)在單獨(dú)的變量名中存儲(chǔ)一系列的值。數(shù)組對(duì)象的字面量表示形式是[]。數(shù)組定義、初始化、遍歷(for..in)4數(shù)組的字面量定義方法以及初始化注意：JS中的數(shù)組存儲(chǔ)的數(shù)據(jù)不必是相同的數(shù)據(jù)類型。vararr1=[];//定義元素個(gè)數(shù)為0的數(shù)組vararr2=['a',2,true];//定義并初始化數(shù)組console.log(arr1,arr2);數(shù)組定義、初始化、遍歷(for..in)4使用for..in遍歷數(shù)組vararr2=['a',2,true];//定義并初始化數(shù)組for(varminarr2)//for..in語(yǔ)法遍歷數(shù)組時(shí)in前的變量代表下標(biāo){ console.log(arr2[m]);//訪問(wèn)數(shù)組元素}無(wú)參函數(shù)定義和調(diào)用5無(wú)參函數(shù)的定義語(yǔ)法function函數(shù)名(){

函數(shù)體……}無(wú)參函數(shù)定義和調(diào)用5無(wú)參函數(shù)的演示（sayHello.html）functionsayHello(){ console.log('hello');}sayHello();DOM元素6DOM是W3C（WorldWideWebConsortium）標(biāo)準(zhǔn)。同時(shí)也定義了訪問(wèn)諸如XML和HTML文檔的標(biāo)準(zhǔn)；DOM是一個(gè)使程序和腳本有能力動(dòng)態(tài)地訪問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式的平臺(tái)和語(yǔ)言中立的接口。在HTML和JavaScript的學(xué)習(xí)中，DOM操作可謂時(shí)重中之重。DOM元素--DOM樹(shù)6<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>Mytitle</title> </head> <body> <ahref="#">mylink</a> <h1>myheader</h1> </body></html>對(duì)應(yīng)的DOM樹(shù)文本節(jié)點(diǎn)屬性節(jié)點(diǎn)元素節(jié)點(diǎn)DOM元素--獲取或修改網(wǎng)頁(yè)元素上的內(nèi)容或?qū)傩灾档?歸根結(jié)底是為了獲取或修改文本結(jié)點(diǎn)或者屬性結(jié)點(diǎn)獲取元素結(jié)點(diǎn)獲取/修改文本或?qū)傩越Y(jié)點(diǎn)DOM元素--獲取或修改網(wǎng)頁(yè)元素上的內(nèi)容或?qū)傩灾档?<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>getElementById演示</title> </head> <body> <ahref="#"id="link">mylink</a> <scripttype="text/javascript"> varlink_a=document.getElementById('link'); console.log(link_a.innerHTML); </script> </body></html>使用document.getElementById獲取元素內(nèi)的文字（getElementById.html）DOM元素--獲取或修改網(wǎng)頁(yè)元素上的內(nèi)容或?qū)傩灾档?<body> <h1class="flower">myheader1</h1> <h2class="flower">myheader2</h2> <pclass="flower">myp</p> <scripttype="text/javascript"> varflowers=document.getElementsByClassName('flower'); for(varone_flowerinflowers) { console.log(flowers[one_flower].innerHTML); } </script></body>使用document.getElementsByClassName獲取頁(yè)面類名相同的多個(gè)元素（getElementsByClassName.html）DOM元素--向網(wǎng)頁(yè)元素上添加新元素或給元素添加新屬性等（順序1）6想在此添加新子結(jié)點(diǎn)新建元素結(jié)點(diǎn)安裝安裝安裝安裝新建文本結(jié)點(diǎn)DOM元素--向網(wǎng)頁(yè)元素上添加新元素或給元素添加新屬性等（順序2）6想在此添加新子結(jié)點(diǎn)新建元素結(jié)點(diǎn)安裝安裝新建文本結(jié)點(diǎn)安裝安裝課堂練習(xí)使用innerHTML給body標(biāo)簽安裝兩個(gè)子節(jié)點(diǎn)分別用上述兩種方法定時(shí)器7語(yǔ)法格式：setTimeout(JavaScript函數(shù),等待的毫秒數(shù))其返回值表示代表該定時(shí)器的句柄。setTimeout語(yǔ)法格式：clearTimeout(定時(shí)器句柄)其返回值無(wú)。clearTimeout432105點(diǎn)擊鼠標(biāo)開(kāi)啟定時(shí)器開(kāi)始執(zhí)行代碼定時(shí)器7在控制臺(tái)輸出1-10后停止輸出（setTimeout.html）varn=1;//下面這段代碼能輸出到10嗎？varid=setTimeout(function(){ console.log(n++); if(n>10)clearTimeout(id);},1000);

//下面這段代碼能輸出到10嗎？varm=1;varim;functionhi(){ console.log(m++); im=setTimeout(hi,1000); if(m>10)clearTimeout(im);}hi();onload事件8010203該事件發(fā)生的對(duì)象：頁(yè)面圖像該事件發(fā)生的時(shí)間點(diǎn)：加載完成的時(shí)刻頁(yè)面onload事件的語(yǔ)法：在HTML中用法:<bodyonload="SomeJavaScriptCode">在JavaScript中用法:window.onload=function(){SomeJavaScriptCode};onload事件8onload的演示（onload.html）<head><metacharset="utf-8"><title>onload演示</title><script> //下句代碼會(huì)出錯(cuò)，為什么？

document.getElementById('myp').innerHTML='你好'; window.onload=function(){ //下句代碼不會(huì)出錯(cuò)，為什么？

document.getElementById('myp').innerHTML='你好'; }</script></head><body> <pid="myp">hi,everyone</p> <scripttype="text/javascript"> //下句代碼不會(huì)出錯(cuò)，上面相同的語(yǔ)句會(huì)出錯(cuò)，為什么？

document.getElementById('myp').innerHTML='你好'; </script></body>隨機(jī)數(shù)和取整95.5可以取整成哪個(gè)整數(shù)隨機(jī)數(shù)和取整9方法描述ceil(x)對(duì)數(shù)進(jìn)行上舍入。floor(x)對(duì)數(shù)進(jìn)行下舍入。random()返回0~1之間的隨機(jī)數(shù)。round(x)把數(shù)四舍五入為最接近的整數(shù)。表1-1Math對(duì)象與隨機(jī)數(shù)和取整有關(guān)的方法隨機(jī)數(shù)和取整--隨機(jī)獲取[n,m)之間整數(shù)的思路9第一步：獲取0-1之間的隨機(jī)數(shù)，注意這里是小數(shù)varr=Math.random();第二步：擴(kuò)展隨機(jī)數(shù)的范圍到m-n（m減n），調(diào)整后的范圍為最小為0，最大為m-nr=r*(m-n);第四步：采取合適的取整方式取整例：向下取整獲得整數(shù)[n,m)r=Math.floor(r);第三步：調(diào)整區(qū)間最小值為n,最大值為mr=r+n;隨機(jī)數(shù)和取整9隨機(jī)顏色（mathRandom.html）//第一步：獲取0-1之間的隨機(jī)數(shù)，注意這里是小數(shù)varr=Math.random(),g=Math.random(),b=Math.random();//第二步：擴(kuò)展隨機(jī)數(shù)的范圍到m-n（m減n），調(diào)整后的范圍為最小為0，最大為m-n//r=r*(m-n);r=r*(255-0);g=g*255;b=b*255;//第三步：調(diào)整區(qū)間最小值為n,最大值為m;本例最小值為0，此步跳過(guò)//r=r+n;//第四步：向下取整獲得整數(shù)[n,m)//r=Math.floor(r);r=Math.floor(r);g=Math.floor(g);b=Math.floor(b);document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";getElementsByClassName方法10語(yǔ)法：document.getElementsByClassName(classname)方法返回文檔中所有指定類名的元素集合，作為NodeList對(duì)象。NodeList對(duì)象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList對(duì)象我們可通過(guò)節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號(hào)來(lái)訪問(wèn)列表中的節(jié)點(diǎn)(索引號(hào)由0開(kāi)始)。getElementsByClassName方法10getElementsByClassName演示（getElementsByClassName2.html）<pclass='duan'>第一段</p><pclass='luo'>第一段</p><pclass='duan'>第一段</p><pid='duan'>第一段</p><script> varduans=document.getElementsByClassName('duan'); for(vari=0;i<duans.length;i++) { duans[i].style.border='1pxsolidred'; }</script>選擇結(jié)構(gòu)11IF單分支當(dāng)滿足特定條件時(shí)執(zhí)行的代碼塊。語(yǔ)法：if(條件){

如果條件為true時(shí)執(zhí)行的代碼}if(age>18){ console.log(“youarenotachildren”);}選擇結(jié)構(gòu)11IF雙分支當(dāng)滿足特定條件時(shí)執(zhí)行一部代碼塊，不滿足時(shí)執(zhí)行另一部代碼塊。語(yǔ)法：if(條件){

條件為true時(shí)執(zhí)行的代碼塊}else{

條件為false時(shí)執(zhí)行的代碼塊if(age>18){ console.log(“youarenotachildren”);}else{ console.log(“youarenotanadult”);}選擇結(jié)構(gòu)11IF多分支當(dāng)滿足不同的條件時(shí)執(zhí)行不同的代碼塊。語(yǔ)法：if(條件1){

條件1為true時(shí)執(zhí)行的代碼塊}elseif(條件2){

條件1為false而條件2為true時(shí)執(zhí)行的代碼塊

}else{

條件1和條件2同時(shí)為false時(shí)執(zhí)行的代碼塊}if(age<3){ console.log(“youareababy”);}elseif(age<18){ console.log(“youareachildren”);}else{ console.log(“youareanadult”);}完成本章綜合案例案例實(shí)現(xiàn)貳設(shè)計(jì)思路1使花卉形像在頁(yè)面中從左到右，從上到下排列，花卉列表下面設(shè)計(jì)一按鈕用于控制選擇，點(diǎn)擊按鈕時(shí)實(shí)現(xiàn)的效果是：第一次點(diǎn)擊按鈕將開(kāi)始不停地隨機(jī)選擇英雄，選中的花卉突出顯示，再次點(diǎn)擊按鈕停止選擇并突出顯示最后選擇中花卉；第三次點(diǎn)擊效果同第一次點(diǎn)擊，第四次點(diǎn)擊效果同第二次點(diǎn)擊，。。。依次類推。實(shí)現(xiàn)步驟--設(shè)計(jì)頁(yè)面架構(gòu)2實(shí)現(xiàn)步驟--設(shè)計(jì)頁(yè)面架構(gòu)2<divid="mybox"> <divid="title">看看和哪種花有緣</div><divid="flowers"></div><divid="btn"><buttononClick="btnclick();">選擇花花</button></div></div>實(shí)現(xiàn)步驟--美化元素2#mybox{ margin:0auto; width:50%; margin-top:50px; background:#f3edf4;display:flex;flex-direction:column;/*子元素從上到下排列*/align-items:center;padding:10px0; text-align:center;/*使所有子元素中文字水平對(duì)齊*/}#title{ font-family:"黑體"; font-size:24px;}實(shí)現(xiàn)步驟--美化元素2花卉列表盒子（#flowers）其內(nèi)所有花（.flower）水平排列，惹一行不足以顯示所有花卉則自動(dòng)換行，同一行的花圖片平均分布。#flowers{display:flex;flex-wrap:wrap;/*子元素水平平均分布*/justify-content:space-around;}實(shí)現(xiàn)步驟--美化元素2.flower{ width:120px; height:160px; border:2pxsolid#999; margin:5px; position:relative; background-size:100%100%; background-position:center;}寬120px高160px2個(gè)像素的實(shí)線灰邊框花以盒子背景圖的形式出現(xiàn)名字顯示在底部，背景半透明的黑色，文字白色.flowername{ position:absolute; bottom:0; width:100%; background:rgba(0,0,0,0.5); color:white;}實(shí)現(xiàn)步驟--美化元素2圖1-5初始化花卉后的效果注意：這些花需要由JS動(dòng)態(tài)生成添加實(shí)現(xiàn)步驟--美化元素2選中效果：黃色邊框，黃色外陰影.selected{ border:#FF0solid2px; box-shadow:yellow0015px;}實(shí)現(xiàn)步驟--初始化花卉列表顯示2實(shí)現(xiàn)步驟--初始化花卉列表顯示—準(zhǔn)備素材2實(shí)現(xiàn)步驟--初始化花卉列表顯示—構(gòu)建數(shù)據(jù)結(jié)構(gòu)2數(shù)組：數(shù)組里的值與圖片名稱一致，文件類型統(tǒng)一varflowers=["雞蛋花","杜娟花","漏斗花","芍藥","蘭花","梅花","牡丹","茶花","荷花","桂花","水仙花","彼岸花","櫻花","梔子花"];實(shí)現(xiàn)步驟--初始化花卉列表顯示—JS動(dòng)態(tài)創(chuàng)建2functionshowflowers(){ varflowersElement=document.getElementById("flowers"); for(h

溫馨提示

  • 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)論