|
關(guān)于我們
 書單推薦 新書推薦 |
JavaScript前端開發(fā)模塊化教程 
定 價(jià)：59.8 元 叢書名：工業(yè)和信息化“十三五”人才培養(yǎng)規(guī)劃教材
9 7 4 8 9 7 9 1 1 1 6 5 5 
本書以 HTML5、CSS3、JavaScript及jQuery為技術(shù)支撐，以WebStorm為開發(fā)環(huán)境，將網(wǎng)頁前端開發(fā)過程的任務(wù)規(guī)范化、模塊化和組件化。全書設(shè)計(jì)了斑馬線表格、JavaScript輪播圖、相冊、全屏廣告 、標(biāo)簽頁 、彈出框、下拉菜單、折疊、視頻播放、圖片特效 、一點(diǎn)多響、窗口特效等模塊。
1.模塊化的寫作手法，突出實(shí)踐動手能力，更符合學(xué)習(xí)要求。
2.突出前端工程師職業(yè)能力培養(yǎng)
3.融入jQuery UI和Bootstrap UI組件開發(fā)模式
4.直戳前端組件開發(fā)核心技術(shù)
5.成果導(dǎo)向理念
6.任務(wù)驅(qū)動教學(xué)
趙建保，擔(dān)任廣東省品牌專業(yè)、廣東省示范性高職教育專業(yè)、自主招生試點(diǎn)專業(yè)-數(shù)字媒體應(yīng)用技術(shù)專業(yè)負(fù)責(zé)人10余年；曾獲廣東省高職高專IT專業(yè)優(yōu)質(zhì)課評比二等獎，廣東省第四屆信息技術(shù)類專業(yè)帶頭人說專業(yè)競賽三等獎，學(xué)院十佳教師；以第一作者發(fā)表論文《基于Citespace的大數(shù)據(jù)研究可視化分析》、《高職能力型課程學(xué)習(xí)評價(jià)指標(biāo)體系構(gòu)建》等16篇，主持或參與國家、省級和校級課題5項(xiàng)；以第一主編和獨(dú)編教材4部，多次重印。
任務(wù)1 搭建JavaScript開發(fā)
環(huán)境 1 1.1 任務(wù)導(dǎo)入 2 1.2 成果目標(biāo) 2 1.3 核心知識 3 1.3.1 JavaScript演進(jìn) 3 1.3.2 JavaScript介紹 4 1.3.3 Web頁面渲染過程 5 1.3.4 Visual Studio Code介紹 6 1.3.5 Visual Studio Code快捷鍵 6 1.3.6 EMMET語法 9 1.3.7 Node.js介紹 10 1.3.8 http-server介紹 10 1.3.9 在HTML中使用JavaScript 11 1.3.10 高性能JavaScript 12 1.3.11 JavaScript執(zhí)行順序 12 1.3.12 腳本位置 13 1.3.13 組織腳本 13 1.3.14 無阻塞腳本 14 1.3.15 選取DOM對象 17 1.3.16 addEventListener 20 1.3.17 讀寫HTML DOM style對象 屬性 20 1.3.18 cssText 21 1.4 任務(wù)實(shí)施 22 1.4.1 安裝和配置Visual Studio Code 22 1.4.2 安裝常用擴(kuò)展 23 1.4.3 Chrome瀏覽器 24 1.4.4 Chrome開發(fā)者工具 24 1.4.5 安裝Node.js 25 1.4.6 安裝與配置http-server 25 1.4.7 編寫HTML和CSS 25 1.4.8 編寫JavaScript 27 1.4.9 測試頁面 28 1.5 強(qiáng)化訓(xùn)練 28 1.6 學(xué)習(xí)成果評量 29 任務(wù)2 斑馬線表格制作 30 2.1 任務(wù)導(dǎo)入 31 2.2 成果目標(biāo) 31 2.3 核心知識 32 2.3.1 表格常用標(biāo)簽 32 2.3.2 表格斑馬線原理 33 2.3.3 讀寫HTML DOM className 屬性 33 2.3.4 嚴(yán)格模式（use strict） 34 2.3.5 定義變量 35 2.3.6 常量 35 2.3.7 變量命名規(guī)則 35 2.3.8 JavaScript語法規(guī)范 36 2.3.9 變量類型 37 2.3.10 變量作用域 38 2.3.11 避免變量污染 40 2.3.12 閉包函數(shù) 40 2.3.13 JavaScript轉(zhuǎn)義字符 40 2.3.14 相等操作符 41 2.3.15 toNumber 41 2.3.16 使用typeof檢測類型 42 2.3.17 使用constructor檢測類型 42 2.3.18 使用toString()檢測封裝類型 42 2.3.19 事件委托 43 2.4 任務(wù)實(shí)施 44 2.4.1 編寫HTML 44 2.4.2 編寫CSS樣式 46 2.4.3 編寫JavaScript 47 2.4.4 測試頁面 48 2.5 強(qiáng)化訓(xùn)練 49 2.6 學(xué)習(xí)成果評量 49 任務(wù)3 彈出消息框 50 3.1 任務(wù)導(dǎo)入 51 3.2 成果目標(biāo) 51 3.3 核心知識 51 3.3.1 基于負(fù)邊距的垂直居中 51 3.3.2 基于transform屬性的垂直 居中 52 3.3.3 元素動畫制作 53 3.3.4 警告對話框alert() 53 3.3.5 確認(rèn)對話框confirm() 54 3.3.6 提示對話框prompt() 54 3.3.7 BOM介紹 54 3.3.8 window對象 54 3.3.9 location對象 55 3.3.10 screen對象 56 3.3.11 history對象 57 3.4 任務(wù)實(shí)施 57 3.4.1 編寫HTML 57 3.4.2 編寫CSS樣式 58 3.4.3 編寫JavaScript 60 3.4.4 測試頁面 60 3.5 強(qiáng)化訓(xùn)練 61 3.6 學(xué)習(xí)成果評量 61 任務(wù)4 圖片縮放特效 62 4.1 任務(wù)導(dǎo)入 63 4.2 成果目標(biāo) 63 4.3 核心知識 63 4.3.1 DOM編程 63 4.3.2 DOM訪問與修改 64 4.3.3 DOM遍歷 64 4.3.4 innerHTML對比DOM方法 65 4.3.5 字符串連接 65 4.3.6 HTML集合length 66 4.3.7 減少瀏覽器重排與重繪 67 4.4 任務(wù)實(shí)施 69 4.4.1 編寫頁面結(jié)構(gòu) 69 4.4.2 編寫CSS樣式 71 4.4.3 編寫JavaScript 72 4.4.4 測試頁面 73 4.5 強(qiáng)化訓(xùn)練 73 4.6 學(xué)習(xí)成果評量 74 任務(wù)5 網(wǎng)頁換膚 75 5.1 任務(wù)導(dǎo)入 76 5.2 成果目標(biāo) 76 5.3 核心知識 76 5.3.1 網(wǎng)頁換膚原理 76 5.3.2 HTML文檔對象模型 77 5.3.3 HTML DOM節(jié)點(diǎn)樹 77 5.3.4 document對象屬性和方法 78 5.3.5 element對象屬性和方法 79 5.3.6 獲取元素屬性getAttribute() 82 5.3.7 設(shè)置元素屬性setAttribute() 83 5.3.8 本地?cái)?shù)據(jù)存儲方案 83 5.3.9 WebStorage 84 5.3.10 WebStorage基本屬性和 方法 84 5.3.11 使用sessionStorage對象 84 5.3.12 使用localStorage對象 86 5.3.13 使用storage事件 86 5.3.14 cookie介紹 87 5.3.15 cookie構(gòu)成 87 5.3.16 寫入cookie信息 88 5.3.17 讀取cookie信息 90 5.4 任務(wù)實(shí)施 91 5.4.1 編寫HTML 91 5.4.2 編寫CSS 92 5.4.3 編寫JavaScript 94 5.4.4 測試頁面 95 5.5 強(qiáng)化訓(xùn)練 95 5.6 學(xué)習(xí)成果評量 95 任務(wù)6 下拉廣告 96 6.1 任務(wù)導(dǎo)入 97 6.2 成果目標(biāo) 97 6.3 核心知識 97 6.3.1 transition屬性 97 6.3.2 超時(shí)調(diào)用setTimeout()方法 98 6.4 任務(wù)實(shí)施 99 6.4.1 編寫HTML 99 6.4.2 編寫CSS樣式 100 6.4.3 編寫JavaScript代碼 101 6.4.4 測試頁面 102 6.5 強(qiáng)化訓(xùn)練 102 6.6 學(xué)習(xí)成果評量 103 任務(wù)7 輪播圖 104 7.1 任務(wù)導(dǎo)入 105 7.2 成果目標(biāo) 105 7.3 核心知識 105 7.3.1 間歇調(diào)用setInterval() 105 7.3.2 避免常見JavaScript錯(cuò)誤 106 7.3.3 理解Error對象 106 7.3.4 錯(cuò)誤處理思路 107 7.3.5 使用瀏覽器控制臺調(diào)試 程序 108 7.3.6 使用斷點(diǎn)調(diào)試程序 109 7.3.7 使用try-catch處理異�！�110 7.4 任務(wù)實(shí)施 111 7.4.1 編寫HTML 111 7.4.2 編寫CSS樣式 113 7.4.3 編寫JavaScript 116 7.4.4 測試頁面 117 7.5 強(qiáng)化訓(xùn)練 117 7.6 學(xué)習(xí)成果評量 118 任務(wù)8 滾動公告 119 8.1 任務(wù)導(dǎo)入 120 8.2 學(xué)習(xí)成果 120 8.3 核心知識 120 8.3.1 HTML事件模型 120 8.3.2 DOM0級事件模型 121 8.3.3 DOM2級事件模型 122 8.3.4 IE事件模型 123 8.4 任務(wù)實(shí)施 124 8.4.1 編寫HTML 124 8.4.2 編寫CSS樣式 125 8.4.3 編寫JavaScript 126 8.4.4 測試頁面 127 8.5 強(qiáng)化訓(xùn)練 128 8.6 學(xué)習(xí)成果評量 128 任務(wù)9 貸款計(jì)算器 129 9.1 任務(wù)導(dǎo)入 130 9.2 成果目標(biāo) 130 9.3 核心知識 130 9.3.1 表單類型 130 9.3.2 表單結(jié)構(gòu) 132 9.3.3 form對象 133 9.3.4 表單事件 134 9.3.5 表達(dá)式與操作符 135 9.3.6 轉(zhuǎn)換為數(shù)字 136 9.3.7 設(shè)置小數(shù)位數(shù) 137 9.3.8 Math對象 137 9.3.9 條件語句 138 9.3.10 for循環(huán) 141 9.3.11 while循環(huán) 142 9.3.12 do-while循環(huán) 142 9.3.13 for-in循環(huán) 142 9.3.14 優(yōu)化循環(huán)性能 143 9.3.15 forEach() 143 9.4 任務(wù)實(shí)施 143 9.4.1 編寫HTML 143 9.4.2 編寫CSS樣式 145 9.4.3 編寫JavaScript 147 9.4.4 測試頁面 147 9.5 強(qiáng)化訓(xùn)練 148 9.6 學(xué)習(xí)成果評量 148 任務(wù)10 計(jì)算器 149 10.1 任務(wù)導(dǎo)入 150 10.2 成果目標(biāo) 150 10.3 核心知識 150 10.3.1 函數(shù)介紹 150 10.3.2 定義函數(shù) 151 10.3.3 嵌套函數(shù) 152 10.3.4 調(diào)用函數(shù) 152 10.3.5 函數(shù)的實(shí)參和形參 155 10.3.6 將對象屬性用作實(shí)參 157 10.3.7 實(shí)參類型 157 10.3.8 作為值的函數(shù) 157 10.3.9 自定義函數(shù)屬性 158 10.3.10 slice() 158 10.3.11 isNaN() 158 10.4 任務(wù)實(shí)施 159 10.4.1 編寫HTML 159 10.4.2 編寫CSS樣式 160 10.4.3 編寫JavaScript 162 10.4.4 測試頁面 164 10.5 強(qiáng)化訓(xùn)練 165 10.6 學(xué)習(xí)成果評量 165 任務(wù)11 投票 166 11.1 任務(wù)導(dǎo)入 167 11.2 成果目標(biāo) 167 11.3 核心知識 167 11.3.1 匿名函數(shù) 167 11.3.2 數(shù)據(jù)存取方式 168 11.3.3 對象成員 169 11.3.4 函數(shù)作用域 170 11.3.5 閉包 171 11.3.6 閉包函數(shù) 173 11.3.7 遞歸函數(shù) 174 11.4 任務(wù)實(shí)施 174 11.4.1 編寫HTML 174 11.4.2 編寫CSS樣式 175 11.4.3 編寫JavaScript 176 11.4.4 測試頁面 177 11.5 強(qiáng)化訓(xùn)練 177 11.6 學(xué)習(xí)成果評量 178 任務(wù)12 折疊面板 179 12.1 任務(wù)導(dǎo)入 180 12.2 成果目標(biāo) 180 12.3 核心知識 180 12.4 任務(wù)實(shí)施 181 12.4.1 編寫HTML 181 12.4.2 編寫CSS 182 12.4.3 編寫JavaScript 183 12.4.4 測試頁面 184 12.5 強(qiáng)化訓(xùn)練 184 12.6 學(xué)習(xí)成果評量 185 任務(wù)13 銀行客服電話查詢 186 13.1 任務(wù)導(dǎo)入 187 13.2 成果目標(biāo) 187 13.3 核心知識 187 13.3.1 Ajax簡介 187 13.3.2 Ajax原理 188 13.3.3 HTTP請求 188 13.3.4 HTTP狀態(tài)碼 189 13.3.5 定義XMLHttpRequest 對象 190 13.3.6 建立XMLHttpRequest 連接 191 13.3.7 跟蹤狀態(tài) 192 13.3.8 中止請求 192 13.3.9 Ajax請求與響應(yīng)模板 192 13.3.10 獲取數(shù)據(jù) 193 13.3.11 獲取純文本 194 13.3.12 使用Ajax加載HTML 194 13.3.13 使用Ajax加載JSON 194 13.3.14 獲取JavaScript腳本 194 13.3.15 使用Ajax加載其他服務(wù)器的 數(shù)據(jù) 194 13.3.16 獲取頭部信息 195 13.3.17 JSONP工作原理 195 13.4 任務(wù)實(shí)施 196 13.4.1 編寫HTML 196 13.4.2 編寫CSS樣式 196 13.4.3 編寫JSON 197 13.4.4 編寫JavaScript 199 13.4.5 測試頁面 200 13.5 強(qiáng)化訓(xùn)練 200 13.6 學(xué)習(xí)成果評量 200 任務(wù)14 省、市、區(qū)聯(lián)動菜單 201 14.1 任務(wù)導(dǎo)入 202 14.2 成果目標(biāo) 202 14.3 核心知識 202 14.3.1 下拉列表select 202 14.3.2 HTML DOM Option對象 203 14.3.3 select add()方法 203 14.3.4 JSON簡介 203 14.3.5 JSON語法 204 14.3.6 JSON與XML比較 205 14.3.7 訪問JSON對象值 206 14.3.8 遍歷JSON對象 206 14.3.9 修改JSON值 207 14.3.10 刪除對象屬性 207 14.3.11 解析JSON對象 207 14.3.12 JSON.stringify() 207 14.3.13 JSON轉(zhuǎn)換為JavaScript 對象 208 14.4 任務(wù)實(shí)施 208 14.4.1 編寫HTML 208 14.4.2 編寫CSS 209 14.4.3 JSON數(shù)據(jù)準(zhǔn)備 210 14.4.4 編寫JavaScript 211 14.4.5 測試頁面 212 14.5 強(qiáng)化訓(xùn)練 213 14.6 學(xué)習(xí)成果評量 213 任務(wù)15 滾動監(jiān)聽 214 15.1 任務(wù)導(dǎo)入 215 15.2 成果目標(biāo) 215 15.3 核心知識 215 15.3.1 滾動監(jiān)聽 215 15.3.2 CSS腳本化 215 15.3.3 訪問CSS行內(nèi)樣式 216 15.3.4 使用styleSheets對象 217 15.3.5 計(jì)算樣式 218 15.3.6 元素尺寸 220 15.3.7 window.scrollY 220 15.4 任務(wù)實(shí)施 221 15.4.1 編寫HTML 221 15.4.2 編寫CSS樣式 222 15.4.3 編寫JavaScript 223 15.4.4 測試頁面 224 15.5 強(qiáng)化訓(xùn)練 224 15.6 學(xué)習(xí)成果評量 225 任務(wù)16 視頻播放器 226 16.1 任務(wù)導(dǎo)入 227 16.2 成果目標(biāo) 227 16.3 核心知識 227 16.3.1 HTML video標(biāo)簽 227 16.3.2 HTML音頻/視頻方法 228 16.3.3 HTML音頻/視頻屬性 228 16.3.4 HTML音頻/視頻事件 229 16.3.5 瀏覽器支持的視頻格式 230 16.3.6 瀏覽器視頻能力檢測 231 16.3.7 實(shí)現(xiàn)播放列表功能 231 16.4 任務(wù)實(shí)施 232 16.4.1 編寫HTML 232 16.4.2 編寫CSS樣式 233 16.4.3 編寫JavaScript 235 16.4.4 測試頁面 236 16.5 強(qiáng)化訓(xùn)練 236 16.6 學(xué)習(xí)成果評量 236 任務(wù)17 刮刮樂 237 17.1 任務(wù)導(dǎo)入 238 17.2 成果目標(biāo) 238 17.3 核心知識 238 17.3.1 事件基礎(chǔ) 238 17.3.2 事件流 239 17.3.3 事件冒泡 239 17.3.4 事件捕獲 240 17.3.5 事件對象 240 17.3.6 IE中的事件對象 243 17.3.7 跨瀏覽器的事件對象 245 17.3.8 共享onload事件 247 17.3.9 事件委托 248 17.3.10 事件類型 249 17.3.11 UI事件 249 17.3.12 焦點(diǎn)事件 250 17.3.13 鼠標(biāo)事件 250 17.3.14 鍵盤事件 251 17.3.15 鼠標(biāo)/鍵盤事件對象屬性 251 17.3.16 鼠標(biāo)/鍵盤事件方法 252 17.3.17 框架/對象（Frame/Object） 事件 252 17.3.18 表單事件 253 17.3.19 剪貼板事件 253 17.3.20 打印事件 253 17.3.21 拖動事件 253 17.3.22 多媒體（Media）事件 254 17.3.23 動畫事件 254 17.3.24 過渡事件 255 17.3.25 其他事件 255 17.3.26 模擬事件過程 255 17.3.27 模擬鼠標(biāo)事件 256 17.3.28 模擬鍵盤事件 257 17.3.29 globalCompositeOperation 屬性 257 17.4 任務(wù)實(shí)施 258 17.4.1 編寫HTML 258 17.4.2 編寫CSS樣式 258 17.4.3 編寫JavaScript 259 17.4.4 測試頁面 260 17.5 強(qiáng)化訓(xùn)練 260 17.6 學(xué)習(xí)成果評量 260 任務(wù)18 微信運(yùn)動步數(shù)統(tǒng)計(jì)圖 261 18.1 任務(wù)導(dǎo)入 262 18.2 成果目標(biāo) 262 18.3 核心知識 262 18.3.1 HTML5 canvas 262 18.3.2 canvas坐標(biāo) 263 18.3.3 canvas繪圖步驟 263 18.3.4 canvas繪制漸變色 263 18.3.5 canvas繪制文本 263 18.3.6 canvas繪制直線 264 18.3.7 canvas繪制矩形 264 18.3.8 canvas繪制圓形 265 18.3.9 canvas繪制曲線 265 18.4 任務(wù)實(shí)施 265 18.4.1 編寫HTML 265 18.4.2 編寫JavaScript 266 18.4.3 測試頁面 267 18.5 強(qiáng)化訓(xùn)練 267 18.6 學(xué)習(xí)成果評量 268 任務(wù)19 相冊 269 19.1 任務(wù)導(dǎo)入 270 19.2 成果目標(biāo) 270 19.3 任務(wù)實(shí)施 270 19.3.1 編寫HTML 270 19.3.2 編寫CSS樣式 273 19.3.3 編寫JavaScript 276 19.3.4 測試頁面 277 19.4 強(qiáng)化訓(xùn)練 278 19.5 學(xué)習(xí)成果評量 278 任務(wù)20 選項(xiàng)卡 279 20.1 任務(wù)導(dǎo)入 280 20.2 成果目標(biāo) 280 20.3 核心知識 281 20.3.1 選項(xiàng)卡HTML模型 281 20.3.2 重置ul屬性 281 20.3.3 浮動（float） 282 20.3.4 絕對定位（absolute） 283 20.3.5 選項(xiàng)卡切換原理 283 20.4 任務(wù)實(shí)施 283 20.4.1 編寫HTML 283 20.4.2 編寫CSS 286 20.4.3 編寫JavaScript腳本 288 20.4.4 瀏覽器測試 289 20.5 強(qiáng)化訓(xùn)練 289 20.6 學(xué)習(xí)成果評量 289 任務(wù)21 JavaScript抽獎器 290 21.1 任務(wù)導(dǎo)入 291 21.2 成果目標(biāo) 291 21.3 核心知識 291 21.3.1 數(shù)據(jù)存儲 291 21.3.2 數(shù)組 292 21.3.3 創(chuàng)建數(shù)組 292 21.3.4 數(shù)組元素的讀和寫 293 21.3.5 數(shù)組元素的添加和刪除 293 21.3.6 稀疏數(shù)組 293 21.3.7 數(shù)組長度 294 21.3.8 數(shù)組遍歷 294 21.3.9 ECMAScript3數(shù)組方法 294 21.3.10 ECMAScript5數(shù)組方法 296 21.4 任務(wù)實(shí)施 298 21.4.1 編寫HTML 298 21.4.2 編寫CSS 299 21.4.3 編寫JavaScript 300 21.4.4 測試頁面 301 21.5 強(qiáng)化訓(xùn)練 301 21.6 學(xué)習(xí)成果評量 302 任務(wù)22 座位預(yù)訂程序 303 22.1 任務(wù)導(dǎo)入 304 22.2 成果目標(biāo) 304 22.3 核心知識 304 22.3.1 面向?qū)ο蟊尘啊?04 22.3.2 對象的屬性和方法 305 22.3.3 創(chuàng)建對象方法字面量 語法 305 22.3.4 創(chuàng)建對象方法構(gòu)造函數(shù) 語法 305 22.3.5 添加和刪除屬性 307 22.3.6 訪問對象 307 22.3.7 this關(guān)鍵字 307 22.3.8 OOP相關(guān)概念 308 22.3.9 瀏覽器內(nèi)置對象 308 22.3.10 瀏覽器對象模型BOM 309 22.3.11 document對象 309 22.3.12 window對象 311 22.3.13 navigator對象集合 313 22.3.14 screen對象 313 22.3.15 history對象 314 22.3.16 location對象 314 22.3.17 字符串對象 314 22.3.18 日期對象 315 22.3.19 數(shù)組對象 317 22.3.20 邏輯對象 317 22.3.21 算術(shù)對象 318 22.3.22 Number對象 318 22.3.23 Form對象 319 22.3.24 iframe對象屬性 319 22.4 任務(wù)實(shí)施 320 22.4.1 編寫HTML 320 22.4.2 編寫CSS樣式 321 22.4.3 編寫JavaScript 323 22.4.4 測試頁面 324 22.5 強(qiáng)化訓(xùn)練 324 22.6 學(xué)習(xí)成果評量 325 任務(wù)23 注冊表單驗(yàn)證 326 23.1 任務(wù)導(dǎo)入 327 23.2 成果目標(biāo) 327 23.3 核心知識 327 23.3.1 正則表達(dá)式的概念 327 23.3.2 正則表達(dá)式的工作原理 328 23.3.3 定義正則表達(dá)式 328 23.3.4 元字符 329 23.3.5 反義字符 329 23.3.6 限定字符 330 23.3.7 轉(zhuǎn)義字符 330 23.3.8 字符分支 330 23.3.9 字符分組 330 23.3.10 貪婪匹配和懶惰匹配 331 23.3.11 后向引用 331 23.3.12 零寬斷言 331 23.3.13 其他語法 332 23.3.14 常用簡易規(guī)則 332 23.3.15 常用正則表達(dá)式 333 23.4 任務(wù)實(shí)施 338 23.4.1 編寫HTML 338 23.4.2 編寫CSS樣式 339 23.4.3 編寫JavaScript 341 23.4.4 測試頁面 342 23.5 強(qiáng)化訓(xùn)練 343 23.6 學(xué)習(xí)成果評量 343 參考文獻(xiàn) 344
你還可能感興趣
我要評論
|
