項(xiàng)目二JavaScript網(wǎng)頁特效制作主講：陳倩htmlh5imgjavascriptwebcsscolorhr任務(wù)一

選項(xiàng)卡特效制作目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實(shí)施學(xué)習(xí)資源考核評(píng)價(jià)課后拓展1+X考證練習(xí)htmlh5imgjavascriptwebcolorhr任務(wù)情境在當(dāng)前網(wǎng)絡(luò)無處不在的信息化時(shí)代，當(dāng)我們?yōu)g覽一些網(wǎng)頁時(shí)，會(huì)發(fā)現(xiàn)有很多文章或圖片會(huì)不停地進(jìn)行各種各樣的變化，這使得網(wǎng)站更加的生動(dòng)和活潑，這些動(dòng)畫的效果很大程度是由JavaScript控制的。JavaScript是Web頁面中的一種腳本編程語言，也是一種通用的、跨平臺(tái)的、基于對(duì)象和事件驅(qū)動(dòng)并具有安全性的腳本語言。它不需要進(jìn)行編譯，直接嵌入到HTML頁面中，把靜態(tài)頁面轉(zhuǎn)變成支持用戶交互并響應(yīng)事件的動(dòng)態(tài)頁面。JavaScript在網(wǎng)頁中常用于讀寫HTML元素、嵌入動(dòng)態(tài)文本、動(dòng)態(tài)修改CSS樣式表、對(duì)瀏覽器事件做出響應(yīng)、表單數(shù)據(jù)驗(yàn)證、檢測訪客的瀏覽器信息等等。工作任務(wù)單工作任務(wù)單任務(wù)要求在古跡頁面中“新聞聚焦”欄目基礎(chǔ)上制作“通知公告”欄目，并為其添加選項(xiàng)卡切換效果甲方提供的設(shè)計(jì)圖

如右圖所示評(píng)判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果1+X技能考核標(biāo)準(zhǔn)能掌握J(rèn)avaScript基礎(chǔ)語言、函數(shù)、DOM的功能技能大賽考核要求1.創(chuàng)建符合并通過W3C標(biāo)準(zhǔn)驗(yàn)證的代碼（HTML5，CSS3）2.能創(chuàng)建JavaScript代碼，實(shí)現(xiàn)選項(xiàng)卡切換效果，增強(qiáng)網(wǎng)站功能性3.JavaScript代碼具有模塊化和可重用性作品提交要求站點(diǎn)文件夾評(píng)判標(biāo)準(zhǔn)1.能正確運(yùn)用HTML標(biāo)簽、CSS樣式和JavaScript相關(guān)知識(shí)實(shí)現(xiàn)設(shè)計(jì)圖效果2.代碼編寫符合W3C標(biāo)準(zhǔn)驗(yàn)證3.JavaScript語法使用正確，具有可重用性切換前：切換后：任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握變量的命名規(guī)則和聲明方法。能夠掌握函數(shù)的聲明和調(diào)用方法。了解常用的HTML事件，掌握事件的使用方法。了解DOM模型的概念，掌握運(yùn)用DOM訪問節(jié)點(diǎn)，改變節(jié)點(diǎn)屬性的方法。任務(wù)描述

選項(xiàng)卡也可以簡稱為Tab，它是將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，在重疊的內(nèi)容區(qū)里每次只有其中一層是可見的。用戶通過鼠標(biāo)點(diǎn)擊或移到內(nèi)容區(qū)所對(duì)應(yīng)的標(biāo)簽上，來請(qǐng)示顯示該層內(nèi)容區(qū)。在如今的網(wǎng)頁設(shè)計(jì)中，Web界面的設(shè)計(jì)趨勢是縮短頁面屏長，降低信息的顯示密度，但同時(shí)又不能犧牲可視的信息量。在這種趨勢下，Tab這種交互元素成為了一個(gè)越來越普遍的應(yīng)用。基本在每個(gè)網(wǎng)站中都有這樣的效果被應(yīng)用到前臺(tái)的設(shè)計(jì)中去。本次專題任務(wù)將為廣西少數(shù)民族文化資源網(wǎng)古跡頁面中“新聞聚焦”欄目添加選項(xiàng)卡切換效果。任務(wù)實(shí)施分析任務(wù)構(gòu)建HTML+CSS美化頁面JavaScript特效默認(rèn)狀態(tài)時(shí)，效果分析：（1）添加“通知公告”選項(xiàng)卡，設(shè)置未選中狀態(tài)的樣式。（2）添加“通知公告”欄目內(nèi)容，設(shè)置樣式，默認(rèn)不顯示。任務(wù)實(shí)施分析任務(wù)構(gòu)建HTML+CSS美化頁面JavaScript特效特效后，效果分析：（1）“新聞聚焦”選項(xiàng)卡樣式改變，為未選中狀態(tài)樣式（.title2）。（2）“通知公告”選項(xiàng)卡樣式改變，為選中狀態(tài)樣式(.title1）。（3）“新聞聚焦”欄目內(nèi)容不顯示（display:none）。（4）“通知公告”欄目內(nèi)容顯示（display:block）。任務(wù)實(shí)施分析任務(wù)構(gòu)建HTML+CSS美化頁面JavaScript特效構(gòu)建HTML標(biāo)準(zhǔn)流布局+CSS頁面美化操作步驟步驟一：制作通知公告選項(xiàng)卡構(gòu)建HTML結(jié)構(gòu)構(gòu)建CSS樣式步驟二：制作通知公告欄目內(nèi)容構(gòu)建HTML結(jié)構(gòu)構(gòu)建CSS樣式單擊選項(xiàng)卡時(shí)，調(diào)用不同的函數(shù)。步驟八任務(wù)實(shí)施分析任務(wù)構(gòu)建HTML+CSS美化頁面JavaScript特效編寫JavaScript腳本，實(shí)現(xiàn)特效新建JavaScript文件聲明變量newsT，通過DOM獲取“新聞聚焦”選項(xiàng)卡所在的<span>標(biāo)簽。聲明變量noticeT，通過DOM獲取“通知公告”選項(xiàng)卡所在的<span>標(biāo)簽。聲明變量newsB，通過DOM獲取新聞聚焦欄目內(nèi)容所在的<div>標(biāo)簽。步驟一步驟二步驟三步驟四聲明變量noticeB，通過DOM獲取通知公告欄目內(nèi)容所在的<div>標(biāo)簽。步驟五聲明單擊“通知公告”選項(xiàng)卡時(shí)調(diào)用的函數(shù)步驟六聲明單擊“新聞聚焦”選項(xiàng)卡時(shí)調(diào)用的函數(shù)。步驟七學(xué)習(xí)資源DOM變量什么是變量？函數(shù)事件通俗的說，變量是用于存放數(shù)據(jù)的容器，就像一個(gè)裝東西的盒子，我們通過變量名獲取數(shù)據(jù)，甚至修改數(shù)據(jù)。

學(xué)習(xí)資源DOM變量變量的使用函數(shù)事件聲明變量var

sum;

//聲明一個(gè)

名稱為sum的變量

（1）var是一個(gè)JS關(guān)鍵字，用來聲明變量。

（2）sum是變量名。賦值sum=10;//給sum這個(gè)變量賦值為10注意：=

這里的等號(hào)是賦值的意思，用來把右邊的值賦給左邊的變量空間。學(xué)習(xí)資源DOM變量變量的使用函數(shù)事件變量的初始化varsum=10;//聲明變量sum，同時(shí)將10賦值給sum聲明一個(gè)變量的同時(shí)進(jìn)行賦值，我們稱之為變量的初始化。更新變量varsum=10;sum=100;//最后的結(jié)果就是100,因?yàn)?0已被覆蓋一個(gè)變量被重新復(fù)賦值后，它原有的值就會(huì)被覆蓋，變量值將以最后一次賦的值為準(zhǔn)。同時(shí)聲明多個(gè)變量，只需要寫一個(gè)var，多個(gè)變量名之間使用英文逗號(hào)隔開，如：varname='zs',sex=1,age=18;學(xué)習(xí)資源DOM變量變量的命名規(guī)范函數(shù)事件由字母(A-Za-z)、數(shù)字(0-9)、下劃線(_)、美元符號(hào)($)組成，如：usrAge,num01,_name嚴(yán)格區(qū)分大小寫。varapp;和varApp;是兩個(gè)變量不能以數(shù)字開頭。18age是錯(cuò)誤的不能是關(guān)鍵字、保留字。例如：var、for、while變量名必須有意義。MMDBBD nl→ age遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。myFirstName學(xué)習(xí)資源DOM變量什么是DOM函數(shù)事件文檔對(duì)象模型（DocumentObjectModel，簡稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言（HTML或者XML）的標(biāo)準(zhǔn)編程接口，通過這些DOM接口可以改變網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式。

DOM樹文檔一個(gè)頁面就是一個(gè)文檔，DOM中使用document表示元素頁面中的所有標(biāo)簽都是元素，DOM中使用element表示節(jié)點(diǎn)網(wǎng)頁中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等），DOM中使用node表示學(xué)習(xí)資源DOM變量獲取元素函數(shù)事件在JavaScript中，通過設(shè)置節(jié)點(diǎn)的屬性和方法可以訪問指定節(jié)點(diǎn)和相關(guān)節(jié)點(diǎn)。訪問節(jié)點(diǎn)的幾種常見方法如下：方法說明getElementById(“ID”)返回匹配指定ID的節(jié)點(diǎn)getElementsByName(“名稱”)返回匹配指定名稱的所有節(jié)點(diǎn)的節(jié)點(diǎn)列表（集合/節(jié)點(diǎn)數(shù)組）getElementsByTagName(“標(biāo)簽名”)返回匹配指定標(biāo)簽名稱的所有節(jié)點(diǎn)的節(jié)點(diǎn)列表getElementsByClassName(“類名”)返回匹配指定類名的所有節(jié)點(diǎn)的節(jié)點(diǎn)列表querySelector('選擇器')返回匹配指定選擇器的第一個(gè)節(jié)點(diǎn)querySelectorAll('選擇器')返回文檔中匹配指定CSS選擇器的所有節(jié)點(diǎn)學(xué)習(xí)資源DOM變量操作元素函數(shù)事件元素的常用操作方法說明createElement()創(chuàng)建元素節(jié)點(diǎn)createTextNode()創(chuàng)建文本節(jié)點(diǎn)appendChild()為當(dāng)前節(jié)點(diǎn)增加一個(gè)子節(jié)點(diǎn)（作為最后一個(gè)子節(jié)點(diǎn)）insertBefore()為當(dāng)前節(jié)點(diǎn)增加一個(gè)子節(jié)點(diǎn)（插入在指定子節(jié)點(diǎn)前）removeChild()刪除當(dāng)前節(jié)點(diǎn)的某子節(jié)點(diǎn)學(xué)習(xí)資源DOM變量操作元素函數(shù)事件元素的內(nèi)容和樣式操作除對(duì)元素進(jìn)行節(jié)點(diǎn)操作外，還能對(duì)其進(jìn)行屬性和內(nèi)容操作，常見操作如下：類型屬性/方法說明元素內(nèi)容innerHTML獲取或設(shè)置元素的HTML內(nèi)容樣式屬性className獲取或設(shè)置元素的class屬性style獲取或設(shè)置元素的style樣式屬性學(xué)習(xí)資源DOM變量什么是函數(shù)函數(shù)事件函數(shù)：就是封裝了一段可被重復(fù)調(diào)用執(zhí)行的代碼塊。通過此代碼塊可以實(shí)現(xiàn)大量代碼的重復(fù)使用。函數(shù)在使用時(shí)分為兩步：聲明函數(shù)和調(diào)用函數(shù)。學(xué)習(xí)資源DOM變量函數(shù)的聲明函數(shù)事件function函數(shù)名([參數(shù)1，參數(shù)2,...]){//函數(shù)體代碼}function：關(guān)鍵字function必須小寫。函數(shù)名：必選。在同一個(gè)頁面中，函數(shù)名必須是唯一的，并且區(qū)分字母大小寫。由于函數(shù)一般是為了實(shí)現(xiàn)某個(gè)功能才定義的，所以通常我們將函數(shù)名命名為動(dòng)詞，比如getSum。參數(shù)：可選。外界傳遞給函數(shù)的值，當(dāng)有多個(gè)參數(shù)時(shí)，參數(shù)之間需用逗號(hào)分隔。函數(shù)體：必選。用于實(shí)現(xiàn)函數(shù)功能的代碼。學(xué)習(xí)資源DOM變量函數(shù)的調(diào)用函數(shù)事件函數(shù)名([參數(shù)1，參數(shù)2,...])調(diào)用時(shí)，函數(shù)名后需添加小括號(hào)。聲明函數(shù)本身并不會(huì)執(zhí)行代碼，只有調(diào)用函數(shù)時(shí)才會(huì)執(zhí)行函數(shù)體代碼。學(xué)習(xí)資源DOM變量什么是事件函數(shù)事件事件是可以被JavaScript偵測到的行為，即用戶與Web頁面交互時(shí)產(chǎn)生的操作，如單擊、雙擊、選擇菜單等。事件的三要素事件源（誰）事件類型（發(fā)生什么事件）事件驅(qū)動(dòng)，也叫事件處理程序（做什么）學(xué)習(xí)資源DOM變量函數(shù)事件常見的JavaScript事件可以分為鼠標(biāo)事件、鍵盤事件、表單事件、頁面事件等。類

別事

件觸發(fā)條件鼠標(biāo)事件onclick鼠標(biāo)單擊某對(duì)象ondblclick鼠標(biāo)雙擊某對(duì)象onmousedown某鼠標(biāo)按鍵被按下onmouseup某鼠標(biāo)按鍵被放開onmouseover鼠標(biāo)被移至某元素上onmousemove鼠標(biāo)被移動(dòng)onmouseout鼠標(biāo)從某元素上移開鍵盤事件onkeydown按下任何鍵盤按鍵時(shí)發(fā)生onkeyup用戶放開任何先前按下的鍵盤按鍵時(shí)發(fā)生onkeypress按下并放開任何字母或數(shù)字鍵時(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í)考核評(píng)價(jià)班級(jí)：姓名：學(xué)號(hào)任務(wù)名稱：選項(xiàng)卡特效制作評(píng)價(jià)項(xiàng)目評(píng)價(jià)標(biāo)準(zhǔn)自評(píng)情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結(jié)構(gòu)分析能夠進(jìn)行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進(jìn)行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標(biāo)準(zhǔn)□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實(shí)現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成JavaScrip代碼編寫JavaScript腳本書寫規(guī)范，并能實(shí)現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項(xiàng)目成果（20%）工作完整能夠按時(shí)完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表達(dá)，