《JavaScript編程技術(shù)項(xiàng)目式教程（微課版）》全套教學(xué)課件

項(xiàng)目一

輸出學(xué)生信息全套可編輯PPT課件何謂工匠呢？注重細(xì)節(jié)、追求完美是工匠精神的關(guān)鍵。彭祥華、高鳳林、胡雙錢(qián)等工匠，以高超技藝提升制造品質(zhì)與水平。熱愛(ài)勞動(dòng)，專注精神工匠故事前端開(kāi)發(fā)工程師崗位有哪些要求？精通HTML5、CSS等語(yǔ)言，熟悉DOM模型，熟練運(yùn)用網(wǎng)頁(yè)編輯、調(diào)試工具，具有跨瀏覽器設(shè)計(jì)開(kāi)發(fā)經(jīng)驗(yàn)。技能要求具有一定文檔編輯能力及邏輯思維能力。文檔編輯與邏輯思維精通JavaScript腳本語(yǔ)言，熟練使用jQuery、以及Bootstrap、Vue等前端框架。語(yǔ)言能力具有良好的學(xué)習(xí)能力，良好的團(tuán)隊(duì)意識(shí)。學(xué)習(xí)能力和團(tuán)隊(duì)意識(shí)學(xué)習(xí)目標(biāo)了解JavaScript的特點(diǎn)及組成熟悉JavaScript的用途和發(fā)展?fàn)顩r掌握HBuilder開(kāi)發(fā)工具的基本使用方法掌握J(rèn)avaScript的基本使用方法培養(yǎng)工匠精神項(xiàng)目描述引導(dǎo)學(xué)生初步認(rèn)識(shí)JavaScript是Web的編程語(yǔ)言。通過(guò)設(shè)置開(kāi)發(fā)環(huán)境，建立文件、熟悉頁(yè)面結(jié)構(gòu)、編寫(xiě)代碼等步驟了解JavaScript的特點(diǎn)，了解JavaScript作用，掌握在HTML文檔中嵌入JavaScript的方法，同時(shí)了解JavaScript程序是由瀏覽器負(fù)責(zé)解釋執(zhí)行的，為靜態(tài)頁(yè)面添加動(dòng)態(tài)效果，實(shí)現(xiàn)學(xué)生信息的輸出。項(xiàng)目分析嵌入方法工具選擇03在JavaScript代碼中使用document.getElementById()等方法操作HTML標(biāo)簽。嵌入方法01根據(jù)項(xiàng)目需求選擇合適的Web開(kāi)發(fā)工具。02在HTML文檔中通過(guò)script標(biāo)簽嵌入JavaScript代碼。測(cè)試方法04使用瀏覽器打開(kāi)HTML文檔，查看頁(yè)面效果并進(jìn)行調(diào)試。任務(wù)1搭建開(kāi)發(fā)環(huán)境由Netscape的BrendanEich設(shè)計(jì)，最初命名為L(zhǎng)iveScript，后改名為JavaScript。背景解釋型腳本語(yǔ)言，基于對(duì)象，數(shù)據(jù)安全性，跨平臺(tái)性，動(dòng)態(tài)性。特點(diǎn)ECMAScript、DOM、BOM。組成HBuilderX、SublimeText、AdobeDreamweaver、VisualStudioCode和WebStorm等。開(kāi)發(fā)工具任務(wù)2第一個(gè)JavaScript程序行內(nèi)式將JavaScript腳本代碼寫(xiě)在事件的屬性中或函數(shù)中直接調(diào)用。0102嵌入式使用<script>和</script>首尾標(biāo)簽包裹JavaScript代碼，可放在HTML文檔中任何需要的位置。03外鏈?zhǔn)桨袹avaScript腳本保存到外部文件中，通過(guò)<script>標(biāo)簽的“src”屬性引用?；A(chǔ)語(yǔ)法值、運(yùn)算符、表達(dá)式、關(guān)鍵詞和注釋。語(yǔ)句構(gòu)成01按編寫(xiě)順序逐一執(zhí)行。語(yǔ)句執(zhí)行02建議初學(xué)者每行代碼后加分號(hào)，忽略多余空格、換行符和制表符，注釋幫助理解代碼和調(diào)試程序。編寫(xiě)規(guī)則03任務(wù)實(shí)現(xiàn)在HTML頁(yè)面中編寫(xiě)JavaScript代碼，輸出“千里之行，始于足下”。編寫(xiě)代碼保存文件，注意文件路徑。保存文件測(cè)試代碼運(yùn)行效果，查看顯示結(jié)果。測(cè)試代碼項(xiàng)目實(shí)施使用JavaScript在頁(yè)面輸出學(xué)生個(gè)人信息，包括姓名、專業(yè)、班級(jí)和性別。JavaScript輸出信息項(xiàng)目總結(jié)網(wǎng)頁(yè)編程語(yǔ)言，用于實(shí)現(xiàn)網(wǎng)頁(yè)交互功能。JavaScript概述內(nèi)嵌式、外鏈?zhǔn)?、行?nèi)式。引入方式常用編輯器：VisualStudioCode、SublimeText等。編輯工具變量、數(shù)據(jù)類(lèi)型、運(yùn)算符、流程控制、函數(shù)等。語(yǔ)法規(guī)則理論題簡(jiǎn)述JavaScript語(yǔ)言特點(diǎn)，組成及引入方法。實(shí)操題將<script></script>標(biāo)簽中的代碼放在HTML不同位置查看頁(yè)面顯示效果。標(biāo)簽位置使用嵌入式實(shí)現(xiàn)網(wǎng)頁(yè)彈出“helloworld！”提示對(duì)話框。嵌入式實(shí)現(xiàn)使用調(diào)用外部js文件方式來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)彈出“helloworld！”提示對(duì)話框。外部js文件調(diào)用拓展訓(xùn)練使用JavaScript語(yǔ)言在頁(yè)面上輸出一首古詩(shī)：勤學(xué)【宋】汪洙學(xué)向勤中得，螢窗萬(wàn)卷書(shū)。三冬今足用，誰(shuí)笑腹空虛。謝謝項(xiàng)目二

計(jì)算體脂率倡導(dǎo)文明健康綠色環(huán)保生活方式倡導(dǎo)文明健康生活方式，提高健康意識(shí)，掌握健康知識(shí)和技能。健康生活方式推動(dòng)實(shí)施健康中國(guó)戰(zhàn)略，踐行人民至上、生命至上理念。健康中國(guó)戰(zhàn)略減鹽、減油、減糖、健康口腔、健康體重、健康骨骼，提高健康意識(shí)。三減三健理念學(xué)習(xí)目標(biāo)掌握輸入輸出語(yǔ)句的使用掌握J(rèn)avaScript中變量的使用掌握運(yùn)算符的使用掌握J(rèn)avaScript的數(shù)據(jù)類(lèi)型及類(lèi)型轉(zhuǎn)換方法倡導(dǎo)文明健康綠色環(huán)保生活方式項(xiàng)目描述通過(guò)開(kāi)發(fā)計(jì)算體脂率的項(xiàng)目，引導(dǎo)學(xué)生掌握J(rèn)avaScript輸入輸出語(yǔ)句、變量的使用、JavaScript的數(shù)據(jù)類(lèi)型的相關(guān)基礎(chǔ)知識(shí)，同時(shí)掌握并能合理使用不同的運(yùn)算符。體脂率可通過(guò)BMI計(jì)算法計(jì)算得出。BMI計(jì)算法：BMI=體重（公斤）÷（身高×身高）（米）項(xiàng)目分析使用JavaScript輸入輸出語(yǔ)句進(jìn)行交互。輸入輸出語(yǔ)句01遵循變量命名規(guī)范，確保代碼可讀性。變量命名規(guī)范02定義變量并賦值，存儲(chǔ)體重和身高數(shù)據(jù)。變量定義和賦值0304使用JavaScript數(shù)據(jù)類(lèi)型進(jìn)行計(jì)算。數(shù)據(jù)類(lèi)型使用在計(jì)算過(guò)程中進(jìn)行數(shù)據(jù)類(lèi)型轉(zhuǎn)換。數(shù)據(jù)類(lèi)型轉(zhuǎn)換05任務(wù)1輸出網(wǎng)頁(yè)版權(quán)信息包含聯(lián)系我們、網(wǎng)站地圖、服務(wù)調(diào)查、用戶留言、設(shè)為首頁(yè)和收藏本站等鏈接。底部導(dǎo)航欄輸入和輸出語(yǔ)句語(yǔ)句說(shuō)明alert(“msg”)瀏覽器彈出警告框prompt(“msg’”)瀏覽器彈出輸入框，用戶可以輸入內(nèi)容document.write(“msg”)向文檔寫(xiě)文本、HTML表達(dá)式或JavaScript代碼console.log(“msg”)瀏覽器控制臺(tái)輸出信息JavaScript不提供任何內(nèi)建的打印或顯示函數(shù)。為了方便信息的輸入和輸出，JavaScript提供了輸入和輸出語(yǔ)句。變量1.變量的作用在編寫(xiě)JavaScript程序時(shí)，如何將我們輸入的信息保存起來(lái)呢？JavaScript的變量就是存儲(chǔ)臨時(shí)數(shù)據(jù)值的容器，也是程序在內(nèi)存中申請(qǐng)的一塊用來(lái)存放數(shù)據(jù)的空間。2.變量的命名規(guī)范變量在命名時(shí)，需要遵守變量的命名規(guī)范，從而避免代碼運(yùn)行出錯(cuò)，增強(qiáng)代碼的可讀性，提高代碼的運(yùn)行效率。具體如下：(1）由字母、數(shù)字、下劃線和美元符號(hào)（$）組成，如name，user_name；(2）必須以字母開(kāi)頭，不能以數(shù)字開(kāi)頭，如age18正確，18age錯(cuò)誤；(3）嚴(yán)格區(qū)分大小寫(xiě)，如tom和Tom代表兩個(gè)變量； (4）保留字和關(guān)鍵字不能用于變量命名，如if、var和while等；(5）盡量做到“見(jiàn)其名知其意”，如name表示姓名，age表示年齡；(6）組合式變量名建議遵循駝峰式，如userName、myAge；任務(wù)2判斷平閏年閏年能被4整除但不能被100整除，或能被400整除。輸入年份，判斷是否能被4整除但不能被100整除，或能被400整除，彈出警告框顯示結(jié)果。判斷方法判斷代碼數(shù)據(jù)類(lèi)型分類(lèi)JavaScript同強(qiáng)類(lèi)型語(yǔ)言C、JAVA語(yǔ)言不同，它是弱數(shù)據(jù)類(lèi)型語(yǔ)言，編寫(xiě)程序時(shí)不需要提前聲明變量的數(shù)據(jù)類(lèi)型，程序在運(yùn)行過(guò)程中會(huì)自動(dòng)確定變量的數(shù)據(jù)類(lèi)型，我們可以把JavaScript理解為動(dòng)態(tài)類(lèi)型語(yǔ)言。運(yùn)算符與表達(dá)式關(guān)系運(yùn)算符賦值運(yùn)算符03用于比較兩個(gè)操作數(shù)的大小關(guān)系，其結(jié)果就是true或false。算數(shù)運(yùn)算符01用于給JavaScript變量賦值，將表達(dá)式右側(cè)的值賦給左邊的變量。02用于執(zhí)行加、減、乘和除等算數(shù)運(yùn)算。邏輯運(yùn)算符04邏輯運(yùn)算符用于對(duì)布爾型值執(zhí)行運(yùn)算，通常在條件語(yǔ)句中使用。任務(wù)實(shí)現(xiàn)01編寫(xiě)JavaScript代碼，判斷輸入的年份是否為閏年。編寫(xiě)代碼02彈出對(duì)話框，輸入要查詢的年份。輸入年份03根據(jù)閏年規(guī)則，判斷輸入的年份是否為閏年，并給出提示。判斷閏年項(xiàng)目實(shí)施使用JavaScript語(yǔ)言開(kāi)發(fā)計(jì)算體脂率的程序。項(xiàng)目總結(jié)學(xué)習(xí)JavaScript基礎(chǔ)知識(shí)，包括變量、數(shù)據(jù)類(lèi)型、數(shù)據(jù)類(lèi)型轉(zhuǎn)換和運(yùn)算符與表達(dá)式。制作頁(yè)面底部導(dǎo)航01掌握基礎(chǔ)語(yǔ)法知識(shí)，為后續(xù)學(xué)習(xí)打下基礎(chǔ)。計(jì)算平閏年02學(xué)習(xí)JavaScript基礎(chǔ)知識(shí)，為后續(xù)學(xué)習(xí)打下基礎(chǔ)。計(jì)算體脂率03理論題簡(jiǎn)述變量的命名規(guī)范?簡(jiǎn)述基本數(shù)據(jù)類(lèi)型的分類(lèi)?簡(jiǎn)述JavaScript強(qiáng)制轉(zhuǎn)換數(shù)據(jù)類(lèi)型的方法？實(shí)操題提示用戶輸入年齡，將用戶反饋賦值給變量，并彈出對(duì)話框輸出年齡。輸入年齡使用parseFloat()函數(shù)將華氏溫度轉(zhuǎn)換為攝氏度，轉(zhuǎn)換公式為：C=5/9(F-32)。華氏轉(zhuǎn)攝氏戰(zhàn)士連續(xù)作戰(zhàn)89小時(shí)，編程計(jì)算共多少天零多少小時(shí)。計(jì)算作戰(zhàn)時(shí)間拓展訓(xùn)練使用JavaScript語(yǔ)言完成體脂率程序的二次開(kāi)發(fā)，要求根據(jù)不同的性別計(jì)算結(jié)果并給出相應(yīng)提示！體脂率公示如下：（1）計(jì)算體重指數(shù)(BM1):BMI1=體重(千克)/身高的平方(米)（2）計(jì)算體脂率:1.2*BMI+0.23*年齡-5.4-10.8*性別(男為1，女為0)說(shuō)明：成年男性的體脂率為15到18%，女性為20%至25%。謝謝項(xiàng)目三

簡(jiǎn)易自動(dòng)取款機(jī)模擬系統(tǒng)01確保數(shù)據(jù)處于有效保護(hù)和合法利用的狀態(tài)，具備保障持續(xù)安全狀態(tài)的能力。數(shù)據(jù)安全定義02根據(jù)數(shù)據(jù)重要程度和危害程度，實(shí)行分類(lèi)分級(jí)保護(hù)。數(shù)據(jù)分類(lèi)分級(jí)保護(hù)制度03采取合法、正當(dāng)方式收集數(shù)據(jù)，不得竊取或非法獲取數(shù)據(jù)。數(shù)據(jù)收集合法性數(shù)據(jù)安全法學(xué)習(xí)目標(biāo)掌握if語(yǔ)句單分支、雙分支和多分支語(yǔ)法結(jié)構(gòu)掌握switch語(yǔ)句語(yǔ)法結(jié)構(gòu)掌握while語(yǔ)句語(yǔ)法結(jié)構(gòu)掌握f(shuō)or語(yǔ)句語(yǔ)法結(jié)構(gòu)掌握三元運(yùn)算符的使用掌握break和continue的區(qū)別并合理使用培養(yǎng)學(xué)生肩負(fù)民族振興使命項(xiàng)目描述通過(guò)簡(jiǎn)易自動(dòng)取款機(jī)模擬系統(tǒng)項(xiàng)目，引導(dǎo)學(xué)生掌握流程控制語(yǔ)句的使用，一個(gè)程序執(zhí)行的過(guò)程中，代碼的執(zhí)行順序會(huì)直接影響執(zhí)行結(jié)果。通過(guò)合理使用流程控制語(yǔ)句開(kāi)發(fā)滿足用戶需求。輸入數(shù)字1實(shí)現(xiàn)存款功能；輸入數(shù)字2實(shí)現(xiàn)取款功能；輸入數(shù)字3查詢余額，輸入數(shù)字4取卡退出。項(xiàng)目分析輸入輸出語(yǔ)句的使用。分支語(yǔ)句的使用。循環(huán)語(yǔ)句的使用。運(yùn)算結(jié)果的顯示。完成本項(xiàng)目使用的技術(shù)要點(diǎn)任務(wù)1學(xué)生成績(jī)等級(jí)劃分成績(jī)等級(jí)劃分根據(jù)成績(jī)，給出學(xué)生的成績(jī)考評(píng)結(jié)果。成績(jī)等級(jí)劃分條件90-100分，A，優(yōu)秀；80-89分，B，良好；70-79分，C，中等；60-69分，D，及格；否則，E，不及格。選擇結(jié)構(gòu)1.if語(yǔ)句語(yǔ)法格式一：if(條件表達(dá)式){如果條件為true時(shí)執(zhí)行的代碼塊；}語(yǔ)法格式二：if(條件){條件為true時(shí)執(zhí)行的代碼塊；}else{條件為false時(shí)執(zhí)行的代碼塊；}選擇結(jié)構(gòu)語(yǔ)法格式三：if(條件1){條件1為true時(shí)執(zhí)行的代碼塊；}elseif(條件2){條件2為true時(shí)執(zhí)行的代碼塊；}…elseif(條件n){條件n為true時(shí)執(zhí)行的代碼塊；}else{所有條件同時(shí)為false時(shí)執(zhí)行的代碼塊；}選擇結(jié)構(gòu)2.switch語(yǔ)句語(yǔ)法格式：switch(表達(dá)式){case值1:代碼塊1;break;case值1:代碼塊2;break;…default:默認(rèn)代碼塊;}任務(wù)2計(jì)算1到100的累加和先測(cè)試再循環(huán)，循環(huán)體和循環(huán)條件組成。while語(yǔ)句01先執(zhí)行再測(cè)試，至少執(zhí)行一次循環(huán)體。do...while語(yǔ)句02初始化變量，條件表達(dá)式，增量表達(dá)式組成。for語(yǔ)句03選擇結(jié)構(gòu)1.while語(yǔ)句語(yǔ)法格式：while(條件表達(dá)式){循環(huán)執(zhí)行的代碼塊；}2.do…while語(yǔ)句語(yǔ)法格式：do{循環(huán)執(zhí)行的代碼塊；}while(條件);3.for語(yǔ)句語(yǔ)法格式：for(初始化變量;條件表達(dá)式;增量表達(dá)式){循環(huán)執(zhí)行的代碼塊；}項(xiàng)目實(shí)施顯示當(dāng)前余額。查詢余額退出系統(tǒng)。取卡退出輸入取款金額，余額減少。取款輸入存款金額，余額增加。存款項(xiàng)目總結(jié)01學(xué)生成績(jī)等級(jí)劃分學(xué)習(xí)選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)，掌握流程控制語(yǔ)句。02計(jì)算1-100累加和學(xué)習(xí)循環(huán)結(jié)構(gòu)，掌握流程控制語(yǔ)句。03簡(jiǎn)易自動(dòng)取款機(jī)模擬系統(tǒng)學(xué)習(xí)選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)，掌握流程控制語(yǔ)句。04使用break和continue學(xué)習(xí)流程控制語(yǔ)句，掌握break和continue的使用。05案例學(xué)習(xí)通過(guò)案例熟練掌握J(rèn)avaScript的流程控制語(yǔ)句。理論題簡(jiǎn)述JavaScript條件語(yǔ)句的語(yǔ)法格式簡(jiǎn)述JavaScript循環(huán)語(yǔ)句的語(yǔ)法格式簡(jiǎn)述break和continue的區(qū)別實(shí)操題顯示用戶數(shù)據(jù)：提示用戶輸入1-100之間的數(shù)，如果用戶輸入數(shù)據(jù)不在范圍內(nèi)，提示“請(qǐng)輸入1-100之間的數(shù)”，如果在范圍內(nèi)，將用戶輸入的數(shù)據(jù)輸出。輸入范圍不同的時(shí)間顯示不同的問(wèn)候語(yǔ)，比如8點(diǎn)到11點(diǎn)之間顯示上午好，11-13點(diǎn)之間顯示中午好，13-17點(diǎn)顯示下午好，其他時(shí)間顯示晚上好。問(wèn)候語(yǔ)求10的階乘運(yùn)算結(jié)果。階乘運(yùn)算拓展訓(xùn)練使用JavaScript語(yǔ)言輸出正方形程序的開(kāi)發(fā)，要求：（1）如果用戶輸入的行數(shù)小于10，按照用戶輸入的行數(shù)輸出正方形；（2）如果用戶輸入的行數(shù)大于20，輸出20行列的正方形。輸入行數(shù)謝謝項(xiàng)目四

計(jì)算器的實(shí)現(xiàn)01職業(yè)理想、職業(yè)態(tài)度、職業(yè)責(zé)任、職業(yè)技能、職業(yè)紀(jì)律、職業(yè)良心、職業(yè)信譽(yù)、職業(yè)作風(fēng)。職業(yè)精神02精益求精，一絲不茍，培養(yǎng)學(xué)生對(duì)計(jì)算機(jī)知識(shí)的思考和運(yùn)用能力。工匠精神職業(yè)精神學(xué)習(xí)目標(biāo)掌握函數(shù)的定義和調(diào)用方法掌握函數(shù)的參數(shù)的合理使用方法掌握返回值的設(shè)置掌握變量的作用域掌握系統(tǒng)函數(shù)的使用培養(yǎng)精益求精的職業(yè)精神項(xiàng)目描述通過(guò)開(kāi)發(fā)簡(jiǎn)易計(jì)算器項(xiàng)目，引導(dǎo)學(xué)生掌握函數(shù)的定義、函數(shù)的調(diào)用和系統(tǒng)函數(shù)的使用。用戶在頁(yè)面輸入第一個(gè)操作數(shù)和第二個(gè)操作數(shù)，點(diǎn)擊相應(yīng)操作符將運(yùn)算結(jié)果顯示在計(jì)算結(jié)果文本框中。項(xiàng)目分析編寫(xiě)函數(shù)，實(shí)現(xiàn)加減乘除等基本運(yùn)算。函數(shù)定義在頁(yè)面輸入操作數(shù)和操作符，調(diào)用函數(shù)計(jì)算結(jié)果。函數(shù)調(diào)用0201使用系統(tǒng)函數(shù)，實(shí)現(xiàn)文本框顯示計(jì)算結(jié)果。系統(tǒng)函數(shù)使用03任務(wù)1控制文字變化本案例要求學(xué)生使用JavaScript編寫(xiě)文字變化程序，用戶選擇不同的按鈕，文字會(huì)發(fā)生不同的變化。函數(shù)的定義05函數(shù)返回值return語(yǔ)句指定，可以是任意的常量、變量或表達(dá)式。04函數(shù)體完成特定任務(wù)的一段程序代碼。03函數(shù)參數(shù)形式參數(shù)，用于接收調(diào)用函數(shù)時(shí)傳遞的變量和值，多個(gè)參數(shù)用逗號(hào)分隔。02函數(shù)名命名，任何有效的標(biāo)識(shí)符，賦予“所見(jiàn)即所得”的函數(shù)名。01函數(shù)定義定義完成特定任務(wù)的一段程序代碼，避免重復(fù)編寫(xiě)。函數(shù)的調(diào)用直接調(diào)用調(diào)用函數(shù)，直接使用函數(shù)名。事件調(diào)用計(jì)算按鈕點(diǎn)擊后，彈出兩個(gè)數(shù)的和。鏈接調(diào)用函數(shù)調(diào)用函數(shù)，實(shí)現(xiàn)鏈接跳轉(zhuǎn)。函數(shù)調(diào)用案例定義一個(gè)名為my_Function的函數(shù)，接收兩個(gè)參數(shù)num1和num2，計(jì)算它們的和并彈出提示框顯示結(jié)果。函數(shù)定義在HTML文件中定義一個(gè)超鏈接，點(diǎn)擊時(shí)調(diào)用my_Function函數(shù)，傳入?yún)?shù)3和4，計(jì)算它們的和并彈出提示框顯示結(jié)果。函數(shù)調(diào)用函數(shù)的參數(shù)和返回值調(diào)用函數(shù)時(shí)，實(shí)參和形參應(yīng)一一對(duì)應(yīng)，未提供實(shí)際參數(shù)的形參運(yùn)行結(jié)果為undefined。函數(shù)使用return語(yǔ)句返回值，控制權(quán)交給調(diào)用函數(shù)的程序。函數(shù)參數(shù)函數(shù)返回值任務(wù)實(shí)現(xiàn)使用JavaScript編寫(xiě)代碼，實(shí)現(xiàn)文字大小和顏色的變化。程序?qū)崿F(xiàn)01程序步驟02編寫(xiě)HTML和JavaScript代碼，實(shí)現(xiàn)文字變化和按鈕調(diào)用，保存文件并測(cè)試代碼運(yùn)行效果。任務(wù)2檢查參數(shù)是否是非數(shù)字值使用JavaScript完成用于檢查參數(shù)是否是非數(shù)字值的程序開(kāi)發(fā)，效果如圖4-3所示。使用JavaScript完成用于檢查參數(shù)是否是非數(shù)字值的程序開(kāi)發(fā)。變量的作用域變量生命周期變量在聲明時(shí)初始化，函數(shù)體內(nèi)用var定義的變量為局部變量，函數(shù)執(zhí)行完畢后銷(xiāo)毀；不在函數(shù)體內(nèi)聲明的變量為全局變量，頁(yè)面關(guān)閉后銷(xiāo)毀。局部變量在函數(shù)體內(nèi)用var定義的變量，僅在函數(shù)內(nèi)部有效。全局變量不在函數(shù)體內(nèi)聲明的變量，在整個(gè)頁(yè)面范圍內(nèi)有效。系統(tǒng)函數(shù)parseInt()將字符串轉(zhuǎn)換為整數(shù)，parseFloat()將字符串轉(zhuǎn)換為小數(shù)。解析字符串為數(shù)值01eval()計(jì)算表達(dá)式的值。計(jì)算表達(dá)式02isNaN()判斷數(shù)據(jù)是否為數(shù)值型，返回true或false。判斷數(shù)值類(lèi)型03任務(wù)實(shí)現(xiàn)定義isNum函數(shù)，獲取輸入值，判斷是否為非數(shù)字值。函數(shù)定義保存文件，測(cè)試代碼運(yùn)行效果，查看顯示結(jié)果。測(cè)試運(yùn)行在頁(yè)面中編寫(xiě)代碼，獲取輸入值，調(diào)用isNum函數(shù)，顯示結(jié)果。代碼實(shí)現(xiàn)項(xiàng)目實(shí)施實(shí)現(xiàn)加、減、乘、除四種運(yùn)算，輸出結(jié)果。計(jì)算器功能項(xiàng)目總結(jié)通過(guò)開(kāi)發(fā)文字變化、判斷非數(shù)字值和計(jì)算器，熟練掌握函數(shù)的應(yīng)用。理論題簡(jiǎn)述JavaScript函數(shù)定義的語(yǔ)法格式？簡(jiǎn)述JavaScript函數(shù)調(diào)用的語(yǔ)法格式？簡(jiǎn)述JavaScript常用的系統(tǒng)函數(shù)？實(shí)操題輸入三個(gè)數(shù)，輸出最大值。調(diào)用函數(shù)輸出100~1000之間所有素?cái)?shù)，每行6個(gè)。編寫(xiě)函數(shù)輸出2000～2100年所有閏年。編寫(xiě)函數(shù)接收三個(gè)參數(shù)，返回最大值。編寫(xiě)函數(shù)拓展訓(xùn)練編寫(xiě)一個(gè)帶一個(gè)參數(shù)（指定顯示多少層星號(hào)“*”)的函數(shù)，它在頁(yè)面上輸出的一個(gè)5層星號(hào)“*”圖案如下圖所示。其中，每行的星號(hào)“*”之間有一個(gè)空格間隔。謝謝項(xiàng)目五

內(nèi)置對(duì)象特效開(kāi)發(fā)全民國(guó)家安全教育日設(shè)立背景增強(qiáng)全民國(guó)家安全意識(shí)，維護(hù)國(guó)家安全。國(guó)家安全定義國(guó)家政權(quán)、主權(quán)統(tǒng)一和領(lǐng)土完整、人民福祉、經(jīng)濟(jì)社會(huì)可持續(xù)發(fā)展和國(guó)家其他重大利益相對(duì)處于沒(méi)有危險(xiǎn)和不受內(nèi)外威脅的狀態(tài)，以及保障持續(xù)安全狀態(tài)的能力。國(guó)家安全領(lǐng)域政治安全、軍事安全、國(guó)土安全、經(jīng)濟(jì)安全、文化安全、生物安全、網(wǎng)絡(luò)安全、社會(huì)安全、科技安全、生態(tài)安全、資源安全、核安全、海外利益安全、太空安全、深海安全、極地安全等。維護(hù)國(guó)家安全拾獲國(guó)家秘密及時(shí)上交，發(fā)現(xiàn)買(mǎi)賣(mài)國(guó)家秘密及時(shí)報(bào)告，制止盜竊、搶奪國(guó)家秘密，發(fā)現(xiàn)泄露線索及時(shí)舉報(bào)。學(xué)習(xí)目標(biāo)理解基于對(duì)象的程序設(shè)計(jì)思想掌握J(rèn)avaScript的常用內(nèi)置對(duì)象的使用方法掌握J(rèn)avaScript的數(shù)組的創(chuàng)建方法掌握String對(duì)象、Date對(duì)象、Math對(duì)象常用的

屬性和方法培養(yǎng)學(xué)生維護(hù)國(guó)家安全意識(shí)項(xiàng)目描述完成用戶注冊(cè)頁(yè)面的驗(yàn)證，按提示要求進(jìn)行輸入，如果輸入有誤，在文本框后面提示錯(cuò)誤信息，只有輸入格式全部正確，才能夠提交成功。項(xiàng)目分析1.用戶名是由4～16位字符組成，不能為空，加載頁(yè)面時(shí)提示相應(yīng)信息。2.密碼是由4～10位字符組成，且不能為空，加載頁(yè)面時(shí)提示相應(yīng)信息。密碼和確認(rèn)密碼必須一致。3.電子郵箱信息不能為空，且必須包含“@”符號(hào)和“.”符號(hào)，且“@”符號(hào)必須在“.”符號(hào)前面。4.手機(jī)號(hào)不能為空，必須是11位數(shù)字，且由1開(kāi)頭。5.全部信息均滿足條件后點(diǎn)擊注冊(cè)按鈕，提示注冊(cè)成功。任務(wù)1電子郵箱格式的簡(jiǎn)單驗(yàn)證完成電子郵箱格式的簡(jiǎn)單驗(yàn)證，引導(dǎo)學(xué)生注意電子郵箱的格式，電子郵箱要包含@，電子郵箱要包含.,并且在@后面，電子郵箱不能為空。JavaScript對(duì)象簡(jiǎn)介1.什么是JavaScript的對(duì)象?2.JavaScript包含四種對(duì)象3.內(nèi)置對(duì)象的分類(lèi)Number（數(shù)字）對(duì)象什么是Number對(duì)象？在JavaScript中，Number對(duì)象也被稱為數(shù)字對(duì)象，是用于處理數(shù)字類(lèi)型的對(duì)象。Number對(duì)象具有用于格式化數(shù)值的各種功能，并且可以釋放用于表達(dá)諸如最大值、最小值，數(shù)值類(lèi)型的無(wú)窮大或無(wú)限等值的各種屬性和方法。Number對(duì)象用于處理整數(shù)、浮點(diǎn)數(shù)等數(shù)值。String（字符串）對(duì)象1.什么是String對(duì)象？String字符串是我們熟悉的數(shù)據(jù)類(lèi)型，也是JavaScript的一種基本數(shù)據(jù)類(lèi)型，String對(duì)象可用于處理或格式化文本字符串的對(duì)象。我們可以使用String對(duì)象提供原始字符串的長(zhǎng)度屬性和大量的字符串操作方法。例如提取字符或子字符串。在JavaScript中類(lèi)型的轉(zhuǎn)換非常靈活，在對(duì)字符串的屬性或方法進(jìn)行訪問(wèn)時(shí)，JavaScript首先會(huì)在內(nèi)部為這個(gè)字符串創(chuàng)建一個(gè)字符串對(duì)象，然后用字符串對(duì)象代替字符串進(jìn)行操作。

2.創(chuàng)建String字符串對(duì)象

創(chuàng)建字符串對(duì)象有兩種方法。

（1）自動(dòng)創(chuàng)建字符串對(duì)象，用var關(guān)鍵字聲明。varstr1="helloworld";

調(diào)用字符串的對(duì)象屬性或方法時(shí)自動(dòng)創(chuàng)建對(duì)象，用完就丟棄。

（2）手工創(chuàng)建字符串對(duì)象，通過(guò)new關(guān)鍵字來(lái)創(chuàng)建。varstr1=newString("helloword");

String（字符串）對(duì)象3.String對(duì)象常見(jiàn)屬性和方法

任務(wù)實(shí)現(xiàn)任務(wù)分析代碼實(shí)現(xiàn)01電子郵箱不能為空，包含@和.,且.在@后面。02使用String對(duì)象的indexOf()方法，判斷電子郵箱格式是否正確。任務(wù)2

隨機(jī)數(shù)的產(chǎn)生完成在網(wǎng)頁(yè)上隨機(jī)輸出1-100的數(shù)字，按開(kāi)始按鈕，產(chǎn)生隨機(jī)數(shù)，按暫停按鈕停止產(chǎn)生隨機(jī)數(shù)，引導(dǎo)學(xué)生如何實(shí)現(xiàn)隨機(jī)輸出。任務(wù)2隨機(jī)數(shù)的產(chǎn)生使用Math.random()生成0-1之間的隨機(jī)數(shù)，乘以100并向下取整得到1-100的隨機(jī)整數(shù)。隨機(jī)數(shù)產(chǎn)生使用setInterval()方法，每50毫秒產(chǎn)生一個(gè)隨機(jī)數(shù)并將值賦給text，實(shí)現(xiàn)數(shù)字滾動(dòng)。定時(shí)器使用clearTimeout()方法結(jié)束計(jì)時(shí)器，顯示最終結(jié)果。結(jié)束計(jì)時(shí)器Math（算數(shù)）對(duì)象1.Math對(duì)象作用Math（算數(shù)）對(duì)象的作用是：執(zhí)行普通的算數(shù)任務(wù)。Math對(duì)象允許對(duì)數(shù)字執(zhí)行數(shù)學(xué)任務(wù)。Math對(duì)象是一個(gè)內(nèi)置對(duì)象，它為數(shù)學(xué)常量和數(shù)學(xué)函數(shù)提供了屬性和方法，而不是一個(gè)函數(shù)對(duì)象。與其它全局對(duì)象不同的是,Math不是一個(gè)構(gòu)造器，Math的所有屬性和方法都是靜態(tài)的。2.Math對(duì)象的屬性Math對(duì)象的屬性是數(shù)學(xué)中常用的常量，Math對(duì)象的所有屬性和方法都是靜態(tài)的，使用該對(duì)象時(shí)，不需要對(duì)其進(jìn)行創(chuàng)建。

Math（算數(shù)）對(duì)象3.Math對(duì)象的方法Math對(duì)象還提供了一些常用的數(shù)學(xué)方法

。

任務(wù)3根據(jù)不同時(shí)間段顯示問(wèn)侯語(yǔ)完成在網(wǎng)頁(yè)上輸出系統(tǒng)日期時(shí)間，并且通過(guò)當(dāng)前的時(shí)間進(jìn)行問(wèn)侯，引導(dǎo)學(xué)生如何實(shí)現(xiàn)日期時(shí)間輸出。Date（日期）對(duì)象使用new關(guān)鍵字創(chuàng)建Date對(duì)象，有4種常見(jiàn)方式。創(chuàng)建Date對(duì)象提供豐富的方法來(lái)操作日期和時(shí)間值。Date對(duì)象方法Date（日期）對(duì)象1.什么是Date對(duì)象？在JavaScript中，Date對(duì)象用來(lái)實(shí)現(xiàn)對(duì)日期和時(shí)間的控制。例如，我們想要在頁(yè)面上顯示計(jì)時(shí)時(shí)鐘，就得重復(fù)生成新的Date對(duì)象來(lái)獲取計(jì)算機(jī)的當(dāng)前時(shí)間。Date對(duì)象提供了豐富的方法來(lái)對(duì)這些值進(jìn)行操作。另外需要了解的是，Date對(duì)象存儲(chǔ)的日期是從1970年1月1日00:00:00以來(lái)的毫秒數(shù)。2.創(chuàng)建Date對(duì)象在使用Date對(duì)象類(lèi)時(shí)，必須先使用new關(guān)鍵字創(chuàng)建一個(gè)Date對(duì)象。創(chuàng)建Date對(duì)象的常見(jiàn)方式有以下4種。（1）創(chuàng)建當(dāng)前時(shí)刻的Date對(duì)象。（2）創(chuàng)建指定日期的Date對(duì)象。（3）創(chuàng)建指定日期和時(shí)間的Date對(duì)象。（4）通過(guò)時(shí)間戳創(chuàng)建Date對(duì)象。Date（日期）對(duì)象3.Date對(duì)象的方法

任務(wù)實(shí)現(xiàn)獲取系統(tǒng)時(shí)間，判斷上午、中午、下午或晚上，并顯示相應(yīng)問(wèn)候語(yǔ)。根據(jù)時(shí)間段顯示問(wèn)候語(yǔ)任務(wù)4輪播圖特效的制作完成網(wǎng)頁(yè)上輪播圖特效的制作，圖片可以自動(dòng)播放，也可以通過(guò)上一頁(yè)、下一頁(yè)按鈕進(jìn)行播放，使用六張世界名勝的圖片，引導(dǎo)學(xué)生如何實(shí)現(xiàn)圖片的輪播。Array（數(shù)組）對(duì)象1.什么是數(shù)組?數(shù)組是在內(nèi)存中保存一組數(shù)據(jù)的集合。實(shí)質(zhì)上數(shù)組也是一種變量，不過(guò)這個(gè)變量同其他變量只能保存一個(gè)值不同，數(shù)組變量能夠保存多個(gè)值，這也是數(shù)組變量同其他變量本質(zhì)的區(qū)別。數(shù)組變量的多值性相當(dāng)于一個(gè)數(shù)組變量可以包含多個(gè)子變量，而每個(gè)子變量與普通變量一樣，可以被賦值，也可以從中取值。為了區(qū)別數(shù)組變量和普通變量，我們把數(shù)組的子變量稱為數(shù)組元素變量（簡(jiǎn)稱數(shù)組元素）。另外，把數(shù)組中數(shù)組元素的個(gè)數(shù)稱為數(shù)組大小（或數(shù)組長(zhǎng)度）。

Array（數(shù)組）對(duì)象2.創(chuàng)建一個(gè)數(shù)組創(chuàng)建一個(gè)數(shù)組，有三種方法。下面的代碼定義了一個(gè)名為myCars的數(shù)組對(duì)象。1）常規(guī)方式varmyCars=newArray();myCars[0]="Saab";

myCars[1]="Volvo";myCars[2]="BMW";2）簡(jiǎn)潔方式varmyCars=newArray("Saab","Volvo","BMW");3）字面方式varmyCars=["Saab","Volvo","BMW"];Array（數(shù)組）對(duì)象3.訪問(wèn)數(shù)組通過(guò)指定數(shù)組名以及索引號(hào)碼，你可以訪問(wèn)某個(gè)特定的元素。以下代碼可以訪問(wèn)myCars數(shù)組的第一個(gè)值：varname=myCars[0];以下代碼可以修改數(shù)組myCars的第一個(gè)元素:myCars[0]="Opel";注：[0]是數(shù)組的第一個(gè)元素。[1]是數(shù)組的第二個(gè)元素。在一個(gè)數(shù)組中你可以有不同的對(duì)象，所有的JavaScript變量都是對(duì)象。數(shù)組元素是對(duì)象，函數(shù)是對(duì)象。因此，你可以在數(shù)組中有不同的變量類(lèi)型。你可以在一個(gè)數(shù)組中包含對(duì)象元素、函數(shù)、數(shù)組：myArray[0]=Date.now;myArray[1]=myFunction;myArray[2]=myCars;任務(wù)實(shí)現(xiàn)制作輪播圖特效，圖片自動(dòng)播放，也可通過(guò)按鈕播放。任務(wù)描述01定義數(shù)組存儲(chǔ)6張圖片。數(shù)組定義02每隔2秒自動(dòng)輪播圖片。自動(dòng)輪播0304實(shí)現(xiàn)向后播放圖片功能。后退按鈕實(shí)現(xiàn)向前播放圖片功能。前進(jìn)按鈕05項(xiàng)目實(shí)施驗(yàn)證用戶名長(zhǎng)度在4-16位之間。用戶名驗(yàn)證驗(yàn)證密碼長(zhǎng)度在4-10位之間。密碼驗(yàn)證驗(yàn)證兩次輸入的密碼是否一致。確認(rèn)密碼驗(yàn)證驗(yàn)證手機(jī)號(hào)碼開(kāi)始位是否為1，長(zhǎng)度是否為11位，且不包含字符。手機(jī)號(hào)碼驗(yàn)證驗(yàn)證郵箱格式是否包含@符號(hào)和.符號(hào)，且@符號(hào)在.符號(hào)前面。郵箱驗(yàn)證項(xiàng)目總結(jié)具有屬性和方法的實(shí)體，用于存儲(chǔ)和操作數(shù)據(jù)。對(duì)象概念內(nèi)置對(duì)象、宿主對(duì)象、自定義對(duì)象。對(duì)象分類(lèi)0201通過(guò)項(xiàng)目實(shí)施，學(xué)習(xí)內(nèi)置對(duì)象，增強(qiáng)實(shí)踐能力。任務(wù)驅(qū)動(dòng)教學(xué)03理論題簡(jiǎn)述面向?qū)ο笳Z(yǔ)言有三大特性？簡(jiǎn)述JavaScript包含四種對(duì)象？簡(jiǎn)述內(nèi)置對(duì)象包含哪些？實(shí)操題01計(jì)算長(zhǎng)度，獲取指定位置字符，查找指定字符，替換字符，截取子串。字符串操作02計(jì)算指定日期是當(dāng)前年的第幾天。日期計(jì)算03預(yù)加載圖片，定時(shí)切換，支持開(kāi)始和停止按鈕?；脽羝故就卣褂?xùn)練從學(xué)員名單中隨機(jī)選人。制作隨機(jī)選人系統(tǒng)謝謝項(xiàng)目六

BOM特效開(kāi)發(fā)《中華人民共和國(guó)個(gè)人信息保護(hù)法》保護(hù)個(gè)人信息權(quán)益，促進(jìn)合理利用，促進(jìn)數(shù)字經(jīng)濟(jì)健康發(fā)展。目的與意義合法、正當(dāng)、必要和誠(chéng)信原則，最小范圍原則，公開(kāi)透明原則，質(zhì)量保證原則，安全保障原則。個(gè)人信息處理原則個(gè)人信息受法律保護(hù)，處理個(gè)人信息需取得個(gè)人同意，個(gè)人有權(quán)撤回同意。公民權(quán)益法治關(guān)懷與人性溫度，避免“大數(shù)據(jù)殺熟”和“信息繭房”。信息化社會(huì)學(xué)習(xí)目標(biāo)理解瀏覽器對(duì)象模型的概念及作用掌握window對(duì)象的重要屬性和方法掌握l(shuí)ocation對(duì)象的重要屬性和方法掌握history對(duì)象、navigator對(duì)象及screen對(duì)象的

重要屬性和方法

作為計(jì)算機(jī)行業(yè)的從業(yè)人員，在保護(hù)好個(gè)人信息的同時(shí)，不泄露他人信息項(xiàng)目描述本項(xiàng)目主要完成旅游通網(wǎng)站的開(kāi)發(fā)，從使用HTML構(gòu)建網(wǎng)站結(jié)構(gòu)，設(shè)置CSS樣式到最后使用JavaScript開(kāi)發(fā)網(wǎng)站導(dǎo)航、輪播圖、表單等特效，網(wǎng)站主頁(yè)如下所示。項(xiàng)目分析使用瀏覽器測(cè)試倒計(jì)時(shí)效果。瀏覽器測(cè)試每秒鐘調(diào)用一次倒計(jì)時(shí)函數(shù)，實(shí)現(xiàn)動(dòng)態(tài)倒計(jì)時(shí)效果。定時(shí)器設(shè)置倒計(jì)時(shí)時(shí)長(zhǎng)=搶購(gòu)開(kāi)始時(shí)間-當(dāng)前時(shí)間，單位為毫秒。倒計(jì)時(shí)時(shí)長(zhǎng)計(jì)算將毫秒數(shù)轉(zhuǎn)換為秒數(shù)，再轉(zhuǎn)換為天、時(shí)、分、秒表示。時(shí)長(zhǎng)轉(zhuǎn)換任務(wù)1彈出廣告窗口在Web中使用JavaScript的時(shí)候，BOM對(duì)象——瀏覽器對(duì)象模型起著至關(guān)重要的作用。BOM中提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)，BOM由多個(gè)對(duì)象構(gòu)成，其中代表瀏覽器窗口的window對(duì)象是BOM的頂層對(duì)象，其他對(duì)象都是該對(duì)象的子對(duì)象。本任務(wù)制作一個(gè)彈窗效果，來(lái)學(xué)習(xí)BOM對(duì)象和window對(duì)象的屬性和方法。BOM簡(jiǎn)介1.BOM的定義BOM（BrowserObjectModel）即瀏覽器對(duì)象模型，是JavaScript的重要組成部分之一。它提供了一系列對(duì)象，用于與瀏覽器窗口進(jìn)行交互，這些對(duì)象統(tǒng)稱為BOM對(duì)象。2.BOM的作用BOM提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象，操作瀏覽器窗口及窗口上的控件，實(shí)現(xiàn)用戶和頁(yè)面的動(dòng)態(tài)交互。3.BOM的結(jié)構(gòu)

windowdocumentlocationnavigatorscreenhistory……BOM簡(jiǎn)介window子對(duì)象功能如下：（1）document（文檔對(duì)象）：也稱DOM對(duì)象，是HTML頁(yè)面當(dāng)前窗體的內(nèi)容，同時(shí)它也是JavaScript重要組成部分之一，將會(huì)在后續(xù)課程中進(jìn)行詳細(xì)講解。（2）screen（屏幕對(duì)象）：可獲取與屏幕相關(guān)的數(shù)據(jù)，例如屏幕的分辨率等。（3）location（地址欄對(duì)象）：用于獲取當(dāng)前瀏覽器中URL地址欄內(nèi)的相關(guān)數(shù)據(jù)。（4）history（歷史對(duì)象）：主要用于記錄瀏覽器的訪問(wèn)歷史記錄，也就是瀏覽網(wǎng)頁(yè)的前進(jìn)與后退功能。（5）navigator（瀏覽器對(duì)象）：用于獲取瀏覽器的相關(guān)數(shù)據(jù)，例如瀏覽器的名稱、版本等。

window對(duì)象1.window對(duì)象的作用window對(duì)象表示瀏覽器窗口，是BOM中所有對(duì)象的核心，也是BOM中所有對(duì)象的父對(duì)象，所有瀏覽器都支持window對(duì)象。JavaScript中所有全局對(duì)象、函數(shù)以及變量均自動(dòng)成為window對(duì)象的成員。其中，全局變量是window對(duì)象的屬性，全局函數(shù)是window對(duì)象的方法。2.window對(duì)象常用屬性window對(duì)象3.window對(duì)象常用方法4.window屬性和方法的調(diào)用window是不需要使用new運(yùn)算符來(lái)創(chuàng)建對(duì)象的，在使用window對(duì)象時(shí)，可以直接調(diào)用其方法和屬性。格式：window.屬性名；window.方法名(參數(shù));任務(wù)2

頁(yè)面定時(shí)跳轉(zhuǎn)在Web中使用JavaScript的時(shí)候，BOM對(duì)象——瀏覽器對(duì)象模型起著至關(guān)重要的作用。BOM中提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)，BOM由多個(gè)對(duì)象構(gòu)成，其中代表瀏覽器窗口的window對(duì)象是BOM的頂層對(duì)象，其他對(duì)象都是該對(duì)象的子對(duì)象。本任務(wù)制作一個(gè)彈窗效果，來(lái)學(xué)習(xí)BOM對(duì)象和window對(duì)象的屬性和方法。location對(duì)象1.location對(duì)象的作用location

對(duì)象可以獲得當(dāng)前瀏覽器中的URL，可以更改當(dāng)前瀏覽器中訪問(wèn)的URL，實(shí)現(xiàn)新文檔的載入或重載功能。URL：統(tǒng)一資源定位符（UniformResourceLocator），對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。互聯(lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。在URL中，包含了網(wǎng)絡(luò)協(xié)議、服務(wù)器的主機(jī)名、端口號(hào)、資源名稱字符串、參數(shù)、錨點(diǎn)等內(nèi)容。location對(duì)象2.location對(duì)象的常用屬性location對(duì)象2.location對(duì)象的常用方法location對(duì)象提供了用于改變URL地址的方法，所有主流瀏覽器都支持。任務(wù)實(shí)現(xiàn)實(shí)現(xiàn)頁(yè)面定時(shí)跳轉(zhuǎn)功能，跳轉(zhuǎn)目標(biāo)地址為百度首頁(yè)。任務(wù)描述01獲取和更改當(dāng)前瀏覽器中的URL，實(shí)現(xiàn)新文檔的載入或重載功能。location對(duì)象02定義定時(shí)跳轉(zhuǎn)函數(shù)，傳遞秒數(shù)和目標(biāo)地址參數(shù)，遞減秒數(shù)，當(dāng)秒數(shù)遞減到0時(shí)，跳轉(zhuǎn)到指定頁(yè)面。任務(wù)實(shí)現(xiàn)03任務(wù)3瀏覽歷史記錄跳轉(zhuǎn)在一些網(wǎng)頁(yè)中，經(jīng)常會(huì)有返回上一頁(yè)的功能，用戶點(diǎn)擊頁(yè)面上的按鈕或者鏈接就可以返回到上一個(gè)頁(yè)面，這樣使我們?cè)跒g覽網(wǎng)頁(yè)過(guò)程中操作很方便。本任務(wù)，我們將利用history對(duì)象，實(shí)現(xiàn)頁(yè)面的前進(jìn)返回功能，實(shí)現(xiàn)從this頁(yè)面跳轉(zhuǎn)到other頁(yè)面，并由other頁(yè)面返回this頁(yè)面功能。history對(duì)象的作用通過(guò)window.history屬性訪問(wèn)，實(shí)現(xiàn)“后退”和“前進(jìn)”功能。歷史記錄操作history對(duì)象的常用屬性和方法屬性length：獲取歷史記錄數(shù)量。0102方法history對(duì)象的常用屬性和方法：back()、forward()、go()，用于頁(yè)面跳轉(zhuǎn)。任務(wù)實(shí)現(xiàn)包含兩個(gè)按鈕，一個(gè)用于載入other頁(yè)面，一個(gè)用于前進(jìn)。this頁(yè)面01包含一個(gè)返回按鈕，用于返回this頁(yè)面。other頁(yè)面02使用location.assign()和history.go()實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和前進(jìn)返回功能。實(shí)現(xiàn)按鈕功能03任務(wù)4

獲取瀏覽器相關(guān)信息在開(kāi)發(fā)網(wǎng)頁(yè)過(guò)程中，為了讓網(wǎng)頁(yè)兼容常用瀏覽器，需要獲取當(dāng)前瀏覽器名稱、平臺(tái)版本信息、是否啟用cookie狀態(tài)、操作系統(tǒng)平臺(tái)等信息，因此，在使用瀏覽器顯示網(wǎng)頁(yè)時(shí)，瀏覽器可以創(chuàng)建一個(gè)navigator對(duì)象，利用該對(duì)象來(lái)獲取當(dāng)前頁(yè)面的瀏覽器相關(guān)信息。例如：來(lái)獲取瀏覽器名稱、瀏覽器版本號(hào)、瀏覽器運(yùn)行平臺(tái)等相關(guān)信息，并將獲取到的信息顯示。navigator對(duì)象BOM中的navigator對(duì)象，包含了有關(guān)瀏覽器的信息，可以使用這些屬性進(jìn)行平臺(tái)專用的配置，所有瀏覽器都支持該對(duì)象。navigator對(duì)象的實(shí)例是唯一的，可以用window對(duì)象的navigator屬性來(lái)引用它。navigator對(duì)象的常用屬性和方法任務(wù)實(shí)現(xiàn)02040103瀏覽器運(yùn)行平臺(tái)navigator.platform瀏覽器名稱navigator.appName瀏覽器版本號(hào)navigator.appVersion是否啟用cookienavigator.cookieEnabled任務(wù)5獲取瀏覽器顯示屏幕的相關(guān)信息在開(kāi)發(fā)網(wǎng)頁(yè)過(guò)程中，為了讓網(wǎng)頁(yè)顯示的更加合理美觀，需要獲取當(dāng)前瀏覽器顯示屏幕的尺寸、分辨率等信息，因此，在使用瀏覽器顯示網(wǎng)頁(yè)時(shí)，可以創(chuàng)建一個(gè)screen對(duì)象，利用該對(duì)象來(lái)獲取顯示瀏覽器屏幕的相關(guān)信息。screen對(duì)象每個(gè)window對(duì)象的screen屬性都引用一個(gè)screen對(duì)象。screen對(duì)象中存放有關(guān)顯示瀏覽器屏幕的信息。JavaScript程序?qū)⒗眠@些信息優(yōu)化它們的輸出，以達(dá)到用戶的顯示要求。例如：一個(gè)程序可以根據(jù)顯示器的尺寸,選擇使用大圖像還是小圖像，還可以根據(jù)顯示器顏色的深度,選擇使用16位色還是8位色的圖形。另外，JavaScript程序還能根據(jù)有關(guān)屏幕尺寸的信息將新的瀏覽器窗口定位在屏幕中間。screen對(duì)象screen對(duì)象的常用屬性任務(wù)實(shí)現(xiàn)使用screen對(duì)象的height和width屬性。使用screen對(duì)象的availHeight和availWidth屬性。獲取屏幕高度和寬度獲取可占用高度和寬度項(xiàng)目實(shí)施計(jì)算商品搶購(gòu)開(kāi)始時(shí)間與當(dāng)前時(shí)間差值，轉(zhuǎn)換為天、時(shí)、分、秒。倒計(jì)時(shí)實(shí)現(xiàn)在頁(yè)面中顯示倒計(jì)時(shí)，并設(shè)置計(jì)時(shí)器每秒更新倒計(jì)時(shí)。顯示倒計(jì)時(shí)項(xiàng)目總結(jié)提供全局屬性和方法，如document、location等。window對(duì)象01獲取和設(shè)置當(dāng)前頁(yè)面的URL。location對(duì)象02管理瀏覽器歷史記錄，如前進(jìn)、后退等。history對(duì)象03獲取瀏覽器和操作系統(tǒng)信息。navigator對(duì)象04獲取屏幕尺寸和顏色深度等信息。screen對(duì)象05理論題簡(jiǎn)述JavaScript的瀏覽器對(duì)象模型?簡(jiǎn)述window對(duì)象的作用?如何調(diào)用BOM各對(duì)象屬性及方法?實(shí)操題在頁(yè)面載入時(shí)自動(dòng)彈出一個(gè)歡迎訪問(wèn)窗口。自動(dòng)彈出窗口利用window對(duì)象，實(shí)現(xiàn)指定時(shí)間關(guān)閉當(dāng)前窗口案例。關(guān)閉當(dāng)前窗口利用screen對(duì)象，實(shí)現(xiàn)網(wǎng)頁(yè)顯示窗口屏幕最大化效果。屏幕最大化拓展訓(xùn)練編寫(xiě)一個(gè)頁(yè)面，包含四個(gè)按鈕，前一頁(yè)、后一頁(yè)、back、forward，分別能訪問(wèn)前一頁(yè)、后一頁(yè)、前進(jìn)和后退。謝謝項(xiàng)目七

DOM特效開(kāi)發(fā)把每一件簡(jiǎn)單的事做好，就是不簡(jiǎn)單；把每一件平凡的事做好，就是不平凡?！獜埲鹈籼煜麓笫卤刈饔诩?xì)，天下難事必作于易?！献犹┥讲痪芗?xì)壤，故能成其高；江海不擇細(xì)流，故能就其深。學(xué)習(xí)目標(biāo)了解DOM模型的組成掌握DOM中節(jié)點(diǎn)的常用屬性和方法掌握DOM節(jié)點(diǎn)的創(chuàng)建、插入、刪除、復(fù)制和替換培養(yǎng)嚴(yán)謹(jǐn)細(xì)致的工作作風(fēng)項(xiàng)目描述實(shí)現(xiàn)購(gòu)物車(chē)全選、取消全選特效，當(dāng)用戶選擇“全選”復(fù)選框時(shí)選中所有商品，當(dāng)用戶取消選中“全選”復(fù)選框時(shí)取消所有商品的選擇，基本功能如下：點(diǎn)擊上面全選復(fù)選框，下面所有的復(fù)選框都選中（全選）。再次點(diǎn)擊全選復(fù)選框，下面所有的復(fù)選框都不選中（取消全選）。如果下面復(fù)選框全部選中，上面全選按鈕就自動(dòng)選中。如果下面復(fù)選框有一個(gè)沒(méi)有選中，上面全選按鈕就不選中。項(xiàng)目分析讓下面所有復(fù)選框的checked屬性（選中狀態(tài)）跟隨全選按鈕即可。做法給下面所有復(fù)選框綁定點(diǎn)擊事件，每次點(diǎn)擊，都要循環(huán)查看下面所有的復(fù)選框是否有沒(méi)選中的，如果有一個(gè)沒(méi)選中的，上面全選就不選中。全選復(fù)選框設(shè)置一個(gè)變量，來(lái)控制全選是否選中?？刂迫x是否選中任務(wù)1繪制DOM節(jié)點(diǎn)樹(shù)根據(jù)下面一段HTML代碼，畫(huà)出該HTML頁(yè)面的DOM樹(shù)。<!DOCTYPEhtml><html> <head> <title>DOM節(jié)點(diǎn)樹(shù)</title> </head> <body> <h1>面向的崗位</h1> <p>web前端工程師</p> </body></html>任務(wù)描述包含一個(gè)html標(biāo)簽，包含head和body標(biāo)簽。HTML結(jié)構(gòu)包含一個(gè)h1標(biāo)簽，內(nèi)容為“面向的崗位”。標(biāo)題包含一個(gè)p標(biāo)簽，內(nèi)容為“web前端工程師”。正文DOM簡(jiǎn)介W3C標(biāo)準(zhǔn)，文檔對(duì)象模型，訪問(wèn)、更新文檔內(nèi)容、結(jié)構(gòu)和樣式。DOM定義頁(yè)面上數(shù)據(jù)和結(jié)構(gòu)的樹(shù)形表示，但可能并非實(shí)際實(shí)現(xiàn)方式。DOM結(jié)構(gòu)CoreDOM、XMLDOM和HTMLDOM是三種文檔類(lèi)型標(biāo)準(zhǔn)模型，用于實(shí)現(xiàn)項(xiàng)目七的特效開(kāi)發(fā)。DOM分類(lèi)操作HTML文檔的重要手段，獲取、訪問(wèn)、標(biāo)簽屬性和樣式的設(shè)置等操作。DOM與JavaScriptDOM節(jié)點(diǎn)樹(shù)文檔節(jié)點(diǎn)、元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)、注釋節(jié)點(diǎn)。節(jié)點(diǎn)類(lèi)型根節(jié)點(diǎn)、子節(jié)點(diǎn)、父節(jié)點(diǎn)、兄弟節(jié)點(diǎn)。節(jié)點(diǎn)關(guān)系任務(wù)實(shí)現(xiàn)任務(wù)2改變導(dǎo)航菜單樣式完成鼠標(biāo)移到菜單上時(shí)改變菜單樣式，鼠標(biāo)移出菜單時(shí)恢復(fù)為原來(lái)的樣式，使用style改變?cè)貥邮交蚴褂胏lassName改變?cè)貥邮健Ｈ蝿?wù)描述鼠標(biāo)移到菜單上時(shí)改變菜單樣式，移出菜單時(shí)恢復(fù)為原來(lái)的樣式，使用style或className改變?cè)貥邮?。獲取操作的元素獲取HTML元素通過(guò)ID、屬性名和元素名獲取元素對(duì)象或數(shù)組。document對(duì)象方法getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()。HTML5新增方法querySelector()、querySelectorAll()。改變?cè)貙傩允褂胹etAttribute（）方法設(shè)置指定屬性的值。設(shè)置屬性值使用getAttribute（）方法獲取指定元素的屬性值。獲取屬性值使用removeAttribute（）方法從元素中刪除指定的屬性。刪除屬性改變?cè)貥邮绞褂胹tyle屬性修改元素樣式，去掉CSS樣式名中的中橫線，并將第二個(gè)單詞首字母大寫(xiě)。行內(nèi)樣式01類(lèi)樣式02使用className屬性修改元素樣式，為元素添加或刪除類(lèi)樣式名。改變?cè)貎?nèi)容innerHTML、innerText、textContent常用屬性改變?cè)貎?nèi)容案例改變?cè)匚恢煤痛笮?1offsetLeft和offsetTop獲取元素到頁(yè)面邊框的距離。02offsetWidth和offsetHeight獲取元素自身的大小。03改變?cè)匚恢煤痛笮±胦ffsetLeft和offsetTop屬性改變?cè)匚恢?，利用offsetWidth和offsetHeight屬性改變?cè)卮笮??！镒⒁馐马?xiàng)：定位元素包含定位元素的最近父元素。offsetLeft和offsetTop改變?cè)貎?nèi)容。DOM特效開(kāi)發(fā)：offsetWidth和offsetHeight改變?cè)貎?nèi)容。任務(wù)實(shí)現(xiàn)任務(wù)分析操作步驟01鼠標(biāo)移入菜單時(shí)改變樣式，移出時(shí)恢復(fù)原樣式。02啟動(dòng)代碼編輯軟件，新建頁(yè)面，編寫(xiě)代碼，為<li>標(biāo)簽綁定事件，設(shè)置鼠標(biāo)移入移出效果。任務(wù)3動(dòng)態(tài)添加表格完成動(dòng)態(tài)添加表格任務(wù)，增加一行、刪除一行、復(fù)制一行、修改標(biāo)題模式等操作，使用DOM動(dòng)態(tài)操作表格。獲取節(jié)點(diǎn)獲取節(jié)點(diǎn)屬性，利用節(jié)點(diǎn)之間的關(guān)系操作HTML元素。創(chuàng)建和插入節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)使用createElement()、createTextNode()等方法創(chuàng)建元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)。0102插入節(jié)點(diǎn)使用appendChild()、insertBefore()等方法將節(jié)點(diǎn)添加到HTML文檔中的指定位置。刪除、復(fù)制和替換節(jié)點(diǎn)使用remove()方法刪除HTML元素。刪除節(jié)點(diǎn)使用replaceChild()方法替換子節(jié)點(diǎn)。替換節(jié)點(diǎn)使用cloneNode()方法復(fù)制元素，參數(shù)為true或false。復(fù)制節(jié)點(diǎn)任務(wù)實(shí)現(xiàn)任務(wù)分析增加一行、刪除一行、修改標(biāo)題樣式、復(fù)制一行。代碼編寫(xiě)文件保存代碼測(cè)試測(cè)試代碼運(yùn)行效果，查看顯示結(jié)果。保存文件，注意文件路徑。啟動(dòng)代碼編輯軟件，新建頁(yè)面，編寫(xiě)代碼。項(xiàng)目實(shí)施實(shí)現(xiàn)購(gòu)物車(chē)全選、取消全選特效01項(xiàng)目總結(jié)通過(guò)DOM方式操作HTML和CSS樣式、屬性及內(nèi)容，增強(qiáng)實(shí)踐能力。操作HTML和CSS通過(guò)節(jié)點(diǎn)方式創(chuàng)建、插入、復(fù)制、替換和刪除指定的元素。創(chuàng)建、插入、復(fù)制、替換和刪除元素理論題簡(jiǎn)述什么是DOM？簡(jiǎn)述DOM有哪些節(jié)點(diǎn)？查詢?cè)赜袔追N常見(jiàn)的方法？HTML5新增的元素選擇方法是什么?實(shí)操題在文本框輸入留言，點(diǎn)擊“發(fā)布”按鈕，發(fā)布留言，若留言為空，提示“您沒(méi)有輸入內(nèi)容”。留言發(fā)布操作點(diǎn)擊全選時(shí)五個(gè)復(fù)選框全部選中，點(diǎn)擊全不選時(shí)五個(gè)復(fù)選框都不選擇。復(fù)選框操作實(shí)現(xiàn)增加一行、刪除一行、復(fù)制一行功能。動(dòng)態(tài)添加表格拓展訓(xùn)練當(dāng)鼠標(biāo)經(jīng)過(guò)<li>標(biāo)簽時(shí)，改變當(dāng)前元素背景色為紅色，離開(kāi)時(shí)去掉背景色，實(shí)現(xiàn)鼠標(biāo)移入移出變色特效。謝謝項(xiàng)目八

應(yīng)用事件開(kāi)發(fā)特效讓青春在勞動(dòng)中閃光讓青春在勞動(dòng)中閃光，高爾基的詮釋，也是勞動(dòng)的真諦。如何把中國(guó)夢(mèng)變成現(xiàn)實(shí)？腳踏實(shí)地付出艱巨、艱苦的努力，將藍(lán)圖變?yōu)楝F(xiàn)實(shí)。工匠精神追求卓越，鉆研技術(shù)，做創(chuàng)新發(fā)展的先行者。實(shí)干精神弘揚(yáng)實(shí)干精神，實(shí)現(xiàn)中國(guó)夢(mèng)。我們當(dāng)代大學(xué)生應(yīng)怎樣努力？弘揚(yáng)勞動(dòng)精神腳踏實(shí)地，兢兢業(yè)業(yè)，追求卓越，干一行愛(ài)一行，專一行精一行，立足平凡崗位，干出不平凡業(yè)績(jī)。工匠精神任何大項(xiàng)目、新發(fā)明都需要不同勞動(dòng)完善，工匠無(wú)處不在，只有勞動(dòng)者發(fā)揚(yáng)工匠精神，企業(yè)才能多出效益。誠(chéng)實(shí)勞動(dòng)人世間美好夢(mèng)想、發(fā)展中難題、生命里輝煌，只有通過(guò)誠(chéng)實(shí)勞動(dòng)才能實(shí)現(xiàn)、破解、鑄就。學(xué)習(xí)目標(biāo)掌握事件及事件處理的概念掌握事件對(duì)象的概念及應(yīng)用掌握事件綁定的方法掌握常用事件（鼠標(biāo)事件、鍵盤(pán)事件、頁(yè)面事件和表單事件）的應(yīng)用培養(yǎng)學(xué)生的勞動(dòng)精神項(xiàng)目描述實(shí)現(xiàn)選項(xiàng)卡tab切換效果，鼠標(biāo)移入到不同的選項(xiàng)卡中國(guó)文學(xué)、中華詩(shī)詞和中化文字時(shí)，下方會(huì)顯示不同的內(nèi)容。項(xiàng)目分析本項(xiàng)目使用設(shè)置索引號(hào)切換內(nèi)容、添加tab樣式、鼠標(biāo)事件和display屬性實(shí)現(xiàn)顯示隱藏。任務(wù)1初識(shí)事件事件監(jiān)聽(tīng)行內(nèi)綁定0103給同一個(gè)DOM對(duì)象的同一個(gè)事件添加多個(gè)事件處理程序，具有兼容性問(wèn)題。通過(guò)HTML標(biāo)簽的屬性設(shè)置實(shí)現(xiàn)。02在JavaScript代碼中，為需要事件處理的DOM元素對(duì)象，添加事件與事件處理程序。動(dòng)態(tài)綁定任務(wù)2

跟隨鼠標(biāo)移動(dòng)特效實(shí)現(xiàn)在頁(yè)面上移動(dòng)鼠標(biāo)時(shí)，小天使圖片跟隨鼠標(biāo)移動(dòng)。事件觸發(fā)時(shí)產(chǎn)生的對(duì)象，包含事件相關(guān)信息。事件對(duì)象鼠標(biāo)操作導(dǎo)致的事件，如點(diǎn)擊、移動(dòng)、拖放等。鼠標(biāo)事件0201實(shí)時(shí)響應(yīng)事件，鼠標(biāo)指針位置發(fā)生變化時(shí)觸發(fā)。鼠標(biāo)移動(dòng)03任務(wù)2

跟隨鼠標(biāo)移動(dòng)特效鼠標(biāo)事件在JavaScript中，鼠標(biāo)事件是Web開(kāi)發(fā)中最常用的事件類(lèi)型，鼠標(biāo)事件詳細(xì)說(shuō)明如下所示：任務(wù)3快遞單號(hào)查詢當(dāng)用戶在快遞單號(hào)文本框中輸入內(nèi)容時(shí)，文本框上面自動(dòng)顯示大號(hào)字的內(nèi)容。如果用戶輸入為空，需要隱藏大號(hào)字內(nèi)容。任務(wù)3快遞單號(hào)查詢快遞單號(hào)輸入快遞單號(hào)隱藏快遞單號(hào)顯示快遞單號(hào)檢測(cè)輸入快遞單號(hào)，上面div以大號(hào)字體顯示快遞單號(hào)。給表單添加鍵盤(pán)事件，選擇使用onkeyup事件。把快遞單號(hào)里面的值獲取過(guò)來(lái)賦值給上面的div，以文本顯示。如果快遞單號(hào)里面內(nèi)容為空，則隱藏大號(hào)字體的div。鍵盤(pán)事件在JavaScript中，當(dāng)用戶操作鍵盤(pán)時(shí)，會(huì)觸發(fā)鍵盤(pán)事件，鍵盤(pán)事件主要包括下面3種類(lèi)型：keydown：在鍵盤(pán)上按下某個(gè)鍵時(shí)觸發(fā)。如果按住某個(gè)鍵，會(huì)不斷觸發(fā)該事件。該事件處理函數(shù)返回false時(shí)，會(huì)取消默認(rèn)的動(dòng)作（如輸入的鍵盤(pán)字符）。keypress：按下某個(gè)鍵盤(pán)鍵并釋放時(shí)觸發(fā)。如果按住某個(gè)鍵，會(huì)不斷觸發(fā)該事件。該事件處理