【正文】 case 表達(dá)式2: 代碼段2。} 當(dāng)條件滿足時(shí)，執(zhí)行滿足條件才執(zhí)行的代碼，否則，執(zhí)行else里面的代碼 3）else if結(jié)構(gòu) ①語(yǔ)法：if(條件1){滿足條件1才執(zhí)行的代碼。/script第八單元 function fun(a){ a=3。(a)。 (a)。 返回結(jié)果； } 注：參數(shù)列表和返回結(jié)果都可以省略2. 掌握函數(shù)的調(diào)用1) 語(yǔ)法：函數(shù)名(參數(shù)值列表)。 //相當(dāng)于a=a3 a*=3。 //10沒(méi)執(zhí)行 ②var n=10。 而且所有條件都為true，結(jié)果才為true；只要有一個(gè)條件為false，結(jié)果為false②邏輯或 || 或只要一個(gè)條件為true，結(jié)果就為true；所有條件為false，結(jié)果才為false③邏輯非 ！顛倒一切Boolean結(jié)果3） 邏輯短路前一個(gè)條件已經(jīng)能夠得出結(jié)果，后續(xù)條件不再執(zhí)行經(jīng)典案例： ①var n=10。 //true (undefined===null)。 //14） 強(qiáng)制轉(zhuǎn)換6. 了解運(yùn)算符分類(lèi)1） 算術(shù)運(yùn)算 + * / % ++ 2） 關(guān)系運(yùn)算 = = == === != !==3） 邏輯運(yùn)算 amp。 //一共創(chuàng)建了3個(gè)字符串4. 掌握Boolean類(lèi)型1） 專(zhuān)門(mén)定義真假的類(lèi)型2） 僅有兩個(gè)值:true和false3） 實(shí)際運(yùn)算中true=1，false=05. 掌握數(shù)據(jù)類(lèi)型轉(zhuǎn)換1） js是弱類(lèi)型編程語(yǔ)言，特點(diǎn)：①聲明變量時(shí)，不必提前規(guī)定變量的數(shù)據(jù)類(lèi)型②賦值時(shí)，根據(jù)存入的數(shù)據(jù)，動(dòng)態(tài)決定數(shù)據(jù)類(lèi)型③運(yùn)算時(shí)，js會(huì)根據(jù)需要，動(dòng)態(tài)轉(zhuǎn)換數(shù)據(jù)類(lèi)型2） 轉(zhuǎn)換的類(lèi)型(2類(lèi))①隱式轉(zhuǎn)換 不需要程序員干預(yù)，js會(huì)根據(jù)需要自動(dòng)轉(zhuǎn)換類(lèi)型②強(qiáng)制轉(zhuǎn)換 程序員通過(guò)調(diào)用專(zhuān)門(mén)的函數(shù)，明確的轉(zhuǎn)換數(shù)據(jù)類(lèi)型3） 隱式轉(zhuǎn)換(+運(yùn)算中的隱式轉(zhuǎn)換)規(guī)律：①?zèng)]有字符串參與，所有類(lèi)型都轉(zhuǎn)換為number類(lèi)型，做算術(shù)計(jì)算 ②如果有字符串參與，所有類(lèi)型都轉(zhuǎn)換為string類(lèi)型，做字符串拼接例如：var str1=”a”。var sex=男。 //5 (a)。 height: 800px。 backgroundcolor: yellow。 } }4. 項(xiàng)目四：按步驟實(shí)現(xiàn)以下動(dòng)畫(huà)1） 在頁(yè)面中插入一個(gè)div元素2） 定義div樣式：寬為200像素，高為200像素，背景色為黑色3） 定義動(dòng)畫(huà)（兼容谷歌瀏覽器）：0%時(shí)的樣式：寬高為300像素，背景色為紅色25%時(shí)的樣式，寬高為400像素，背景色為黃色50%時(shí)的樣式，寬高為500像素，背景色為藍(lán)色75%時(shí)的樣式，寬高為600像素，背景色為綠色100%時(shí)的樣式，寬高為800像素，背景色為紫色 4）鼠標(biāo)懸停時(shí)觸發(fā)動(dòng)畫(huà)，持續(xù)時(shí)間為5秒，勻速變化，沒(méi)有延遲，動(dòng)畫(huà)停在最后一幀5） css代碼如下：/*初始div樣式*/div{ width: 200px。 } 25%{ marginleft: 100px。 backgroundcolor:yellow。 transitionduration:4s,2s。animation的動(dòng)畫(huà)名和keyframes的動(dòng)畫(huà)名必須一致4） 使動(dòng)畫(huà)維持最后一幀狀態(tài)，在animation屬性最后加forwards5） 使動(dòng)畫(huà)循環(huán)播放，在animation屬性后面加infinite6） 停止動(dòng)畫(huà)：animationplaystate:paused。3） 如：d1{transition:background 3s linear 1s。默認(rèn)情況下，轉(zhuǎn)換的參照原點(diǎn)在元素的中心點(diǎn),坐標(biāo)（width/2,height/2）坐標(biāo)原點(diǎn)：在元素的左上角，坐標(biāo)（0,0）修改參照原點(diǎn)：transformorigin：數(shù)值/百分比/關(guān)鍵字；數(shù)值：一個(gè)值 表示所有軸的位置 兩個(gè)值 表示X軸和Y軸 三個(gè)值 表示X軸、Y軸和Z軸關(guān)鍵字：right、left、top、bottom2. 掌握變形的四個(gè)函數(shù)1） 旋轉(zhuǎn) rotate①定義：圍繞一個(gè)參照原點(diǎn)，旋轉(zhuǎn)指定角度②語(yǔ)法：transform:rotate(n deg)。}p[id]{ border:1px solid red。如：columnrule:2px solid red。 height:100px。1）元素從普通流中完全移除，不占用頁(yè)面空間2）當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)元素框并不隨著移動(dòng)3）語(yǔ)法： position:fixed。19. 掌握背景屬性1） 背景色 backgroundcolor2） 背景圖片 backgroundimage3） 背景重復(fù) backgroundrepeat4） 背景圖片尺寸 backgroundsize20. 了解幾種定位方式1） 普通流定位2） 浮動(dòng)定位3） 相對(duì)定位4） 絕對(duì)定位21. 掌握浮動(dòng)定位 float1） 將元素排除在普通流之外，元素將不在頁(yè)面占用空間2） 將浮動(dòng)元素放置在包含框左邊或者右邊3） 浮動(dòng)元素依舊位于包含框之內(nèi)4） 浮動(dòng)元素不會(huì)互相重疊5） 浮動(dòng)元素不會(huì)上下浮動(dòng)6） 左浮: float:left。6) 使用外邊距實(shí)現(xiàn)元素左右居中margin:0 auto。}13. 掌握后代選擇器1） 用空格分隔2） 如：html代碼：body h1 后代 span 選擇 /span 器 /h1 span后代選擇器/span/bodyCss代碼：h1 span{ color:red。我是一號(hào)標(biāo)題 /h1 5. 掌握內(nèi)部樣式表1） 樣式表定義在文檔頭元素中的style元素內(nèi)2） 在style元素中添加樣式規(guī)則3） 如：headstyle type=text/cssh1{color:red} /style/headbody h1html/h1 h1css/h1/body6. 掌握外部樣式表1） 創(chuàng)建一個(gè)單獨(dú)的樣式表文件用來(lái)保存樣式規(guī)則2） 3） 使用link/元素鏈接需要的外部樣式表4） link rel=stylesheet type=text/css href=文件路徑/5） 該文件只能包含樣式規(guī)則6） 樣式規(guī)則由選擇器和樣式聲明組成7） 如： 7. 掌握css選擇器分類(lèi)1） 通用選擇器 *2） 元素選擇器 html文檔中的元素，如：p,h13） 類(lèi)選擇器 .className4） id選擇器 idName5） 群組選擇器6） 后代選擇器7） 子代選擇器8） 偽類(lèi)選擇器8. 了解通用選擇器 *1） 可以與任何元素匹配2） 常用于設(shè)置一些默認(rèn)樣式3） 如：*{fontsize:10px。 169。., .. .. 《web前端開(kāi)發(fā)》教學(xué)大綱編寫(xiě)人： 石亞平 課 時(shí)： 80課時(shí) 一、 課程教學(xué)內(nèi)容及目標(biāo) 4（一） 知識(shí)目標(biāo) 41. 掌握html、 htmlcss、css3的基本語(yǔ)法； 42. 掌握html5的canvas繪圖； 43. 熟練應(yīng)用div+css 實(shí)現(xiàn)頁(yè)面布局； 44. 掌握J(rèn)avaScript基本語(yǔ)法； 45. 掌握DOM的基本用法； 46. 掌握jQuery的基本用法； 47. 熟悉w3c規(guī)范，了解各大主流瀏覽器的兼容性； 48. 熟悉bootstrap框架 4（二） 能力目標(biāo) 51. 通過(guò)本課程的學(xué)習(xí)要求學(xué)生掌握div+css實(shí)現(xiàn)頁(yè)面的布局，實(shí)現(xiàn)靜態(tài)頁(yè)面； 52. 通過(guò)JavaScript實(shí)現(xiàn)簡(jiǎn)單的交互功能； 53. 通過(guò)jQuery簡(jiǎn)化js的原生代碼，減少代碼量； 54. 通過(guò)bootstrap框架，實(shí)現(xiàn)頁(yè)面快速布局 55. 能解決各大瀏覽器的兼容性問(wèn)題； 5（三） 參考教材 5《JavaScript高級(jí)程序設(shè)計(jì)》、《W3School離線手冊(cè)》、《》 5二、 課程教學(xué)內(nèi)容及考核要求 5第一單元：HTML基礎(chǔ) 5 Web基礎(chǔ)知識(shí) 5 HTML快速入門(mén) 5 文本和圖像 6 表格和列表 6第二單元：css基礎(chǔ) 17 CSS語(yǔ)法 17 CSS基礎(chǔ)選擇器 17 框模型和背景 18 浮動(dòng)和定位 18第三單元：CSS3基礎(chǔ) 29 復(fù)雜選擇器 29 多列屬性 30 CSS Hack 30第四單元 CSS3高級(jí) 36 轉(zhuǎn)換 36 過(guò)渡 36 動(dòng)畫(huà) 36第五單元 JavaScript 45 JavaScript概述 45 JavaScript基礎(chǔ)語(yǔ)法 46 變量和常量 46第六單元 JavaScript數(shù)據(jù)類(lèi)型轉(zhuǎn)換和運(yùn)算符 49 49 49 數(shù)據(jù)類(lèi)型轉(zhuǎn)換 49 運(yùn)算符 49第七單元 JavaScript函數(shù) 54 函數(shù)的定義 54 函數(shù)的調(diào)用 54 變量的作用域 54 全局函數(shù) 54第八單元 版權(quán)amp。fontfamily:”Times New Roman”。}14. 掌握子代選擇器1） 子代選擇器要求選擇器之間只能存在父子關(guān)系2） 使用大于號(hào)()連接3）15. 掌握偽類(lèi)選擇器1） 使用冒號(hào)(:)連接，冒號(hào)左邊是其他選擇器，右邊是偽類(lèi)2） 選擇器:偽類(lèi)選擇器 3）分類(lèi)： ①動(dòng)態(tài)偽類(lèi):hover 適用于鼠標(biāo)懸停時(shí) 總尺寸=外邊距+邊框+內(nèi)邊距+內(nèi)容17. 掌握外邊距 margin1） 圍繞在元素邊框周?chē)目瞻讌^(qū)域是外邊距2） 外邊距是透明的3） 會(huì)在元素外創(chuàng)建額外的空白4） 單邊設(shè)置margintop/marginbottom/marginleft/marginright如：margintop:10px。18. 掌握內(nèi)邊距 padding1） 內(nèi)容區(qū)域和邊框之間的空間就是內(nèi)邊距2） 內(nèi)邊距會(huì)擴(kuò)大元素邊框所占用的區(qū)域3） 單邊設(shè)置paddingtop/paddingbottom/paddingleft/paddingright如：paddingtop:10px。 右?。?float:right。4）使用left和right設(shè)置水平方向的偏移量；使用top和bottom設(shè)置垂直方向的偏移量1) 在網(wǎng)頁(yè)中輸入段落標(biāo)簽p/p，在其中輸入6對(duì)span/span標(biāo)簽2) 在span標(biāo)簽內(nèi)部分別輸入字母：G、o、o、l、e3) 設(shè)置p標(biāo)簽樣式：字號(hào)130px、字體Times New Roman、文字顏色屬性4) .yellow .green5) 給相應(yīng)的span標(biāo)簽應(yīng)用相應(yīng)的類(lèi)選擇器6) 代碼為：Html代碼：pspanG/spanspan class=redo/spanspan class=yellowo/spanspang/spanspan class=greenl/spanspan class=rede/span/pcss代碼： p{fontsize:130px。 border:5px FF0000 solid。4） 例如：Html代碼：div大量文本...(大量文本略)/divCss代碼：div{ width:400px。}p[id=p2]{ color:red。n：度數(shù) deg：?jiǎn)挝蝗纾簍ransform:rotate(90 deg)。}d1:hover{background:red。1. 項(xiàng)目1及執(zhí)行步驟圖1圖2實(shí)現(xiàn)圖1到圖2的過(guò)渡1） 在頁(yè)面中插入一對(duì)div/div元素2） 在樣式表中定義div樣式：寬400px，高200px，背景色粉色，定位top 160px3） 勻速過(guò)渡到背景色為藍(lán)色，時(shí)間4S，延遲兩秒4） 位置勻速過(guò)渡到top為0，時(shí)間4s5） 當(dāng)鼠標(biāo)懸停時(shí)觸發(fā)6） 代碼如下：Html代碼：div id=adv/divCss代碼：adv{/*開(kāi)始樣式*/ width:400px。 transitiontim