Web前端開發(fā)（JavaScript+jQuery）課件全套 盧秋錦 項(xiàng)目1-10 JavaScript- 綜合信息類網(wǎng)站首頁的實(shí)現(xiàn)_第1頁
Web前端開發(fā)（JavaScript+jQuery）課件全套 盧秋錦 項(xiàng)目1-10 JavaScript- 綜合信息類網(wǎng)站首頁的實(shí)現(xiàn)_第2頁
Web前端開發(fā)（JavaScript+jQuery）課件全套 盧秋錦 項(xiàng)目1-10 JavaScript- 綜合信息類網(wǎng)站首頁的實(shí)現(xiàn)_第3頁
Web前端開發(fā)（JavaScript+jQuery）課件全套 盧秋錦 項(xiàng)目1-10 JavaScript- 綜合信息類網(wǎng)站首頁的實(shí)現(xiàn)_第4頁
Web前端開發(fā)（JavaScript+jQuery）課件全套 盧秋錦 項(xiàng)目1-10 JavaScript- 綜合信息類網(wǎng)站首頁的實(shí)現(xiàn)_第5頁
已閱讀5頁，還剩246頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

Web前端技術(shù)

JavaScript目錄1.1JavaScript基礎(chǔ)JavaScript函數(shù)1.3?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)程序控制結(jié)構(gòu)和語句1.2?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)

1.1JavaScript基礎(chǔ)1.1.1認(rèn)識(shí)JavaScriptJavaScript是Web開發(fā)領(lǐng)域中的一種功能強(qiáng)大的編程語言，主要用于開發(fā)交互式的Web頁面，可廣泛應(yīng)用于服務(wù)器、PC端、移動(dòng)端和智能手機(jī)等設(shè)備。JavaScript內(nèi)嵌于HTML網(wǎng)頁中，通過瀏覽器內(nèi)置的JavaScrpt引擎進(jìn)行解釋執(zhí)行，把一個(gè)原本只是用來顯示內(nèi)容的靜態(tài)頁面轉(zhuǎn)變?yōu)橹С钟脩艚换サ膭?dòng)態(tài)頁面。1.1.2javascript的前世今生121995年由網(wǎng)景公司的工程師BrendanEich設(shè)計(jì)，最初名為“Mocha”，后改為“LiveScript”1997年產(chǎn)生了第一版ECMAScript標(biāo)準(zhǔn)32000年隨著Ajax技術(shù)的興起，JavaScript的重要性進(jìn)一步提升，推動(dòng)了JavaScript框架和庫的發(fā)展4現(xiàn)在JavaScript在前端開發(fā)中占主導(dǎo)地位，新技術(shù)如React、Angular、Vue等框架推動(dòng)了其發(fā)展1.1.3JavaScript的特點(diǎn)不需要編譯就可以運(yùn)行不是一種純面向?qū)ο缶幊陶Z言，但它支持面向?qū)ο蟮木幊陶Z法相對(duì)簡單直觀，網(wǎng)絡(luò)上有大量的學(xué)習(xí)資源和社區(qū)支持動(dòng)態(tài)類型語言，變量在聲明時(shí)不需要定義類型幾乎可以在所有的現(xiàn)代瀏覽器上運(yùn)行，通過Node.js，JavaScript也可以運(yùn)行在服務(wù)器端腳本語言基于對(duì)象簡單易學(xué)動(dòng)態(tài)性跨平臺(tái)性1.1.4JavaScript的作用增強(qiáng)網(wǎng)頁交互性頁面內(nèi)容的動(dòng)態(tài)操作異步數(shù)據(jù)處理事件驅(qū)動(dòng)編程前端框架和庫的支持全棧開發(fā)能力跨平臺(tái)應(yīng)用開發(fā)<script>alert("我的第一個(gè)JavaScript");</script>1.1.5JavaScript的用法<script>標(biāo)簽在HTML頁面中插入JavaScript，需使用<script>標(biāo)簽。例如：<!DOCTYPEhtml><html><head><title>內(nèi)聯(lián)JavaScript示例</title></head><body><h1>JavaScript示例</h1></body></html>1.1.5JavaScript的用法通常，這些<script>標(biāo)簽放置在HTML的<head>部分或<body>部分的末尾。2.JavaScript的引入方式內(nèi)聯(lián)JavaScript：將JavaScript代碼直接嵌入到HTML文件中。使用<script>標(biāo)簽在HTML文檔中編寫JavaScript代碼。<!DOCTYPEhtml><html><head><scriptsrc="js/my-script.js"></script></head><body><h1>JavaScript示例</h1></body></html>1.1.5JavaScript的用法這種方法有利于代碼的重用和維護(hù)，特別是當(dāng)相同的JavaScript代碼需要在多個(gè)頁面中使用時(shí)2.JavaScript的引入方式外部JavaScript：將JavaScript代碼寫在單獨(dú)的.js文件中，然后通過<script>標(biāo)簽的src屬性引入。console.log("Hello,JavaScript!");1.1.5JavaScript的用法3.JavaScript的數(shù)據(jù)輸出console.log()：console.log()是在控制臺(tái)輸出信息的常用方法，用于調(diào)試和查看程序執(zhí)行過程中的結(jié)果。alert("Hello,JavaScript!");1.1.5JavaScript的用法3.JavaScript的數(shù)據(jù)輸出alert()：alert()方法彈出一個(gè)包含指定文本的警告框，常用于向用戶顯示一些簡單的信息。<!DOCTYPEhtml><html><body> <pid="output"></p> <script>//JavaScript代碼

document.getElementById("output").innerHTML="Hello,JavaScript!";</script></body></html>1.1.5JavaScript的用法在HTML頁面中輸出內(nèi)容：通過修改HTML元素的內(nèi)容來實(shí)現(xiàn)在頁面中輸出數(shù)據(jù)。3.JavaScript的數(shù)據(jù)輸出document.write("Hello,JavaScript!");1.1.5JavaScript的用法3.JavaScript的數(shù)據(jù)輸出document.write()：document.write()方法可用于直接向文檔寫入內(nèi)容。varx=10;1.1.6JavaScript語句3.JavaScript的數(shù)據(jù)輸出賦值語句：用于給變量賦值。1.1.6JavaScript語句3.JavaScript的數(shù)據(jù)輸出條件語句：根據(jù)條件執(zhí)行不同的代碼塊。if(x>5){//如果x大于5，則執(zhí)行這里的代碼}else{//否則執(zhí)行這里的代碼}for(vari=0;i<5;i++){//循環(huán)體，會(huì)執(zhí)行5次}1.1.6JavaScript語句3.JavaScript的數(shù)據(jù)輸出循環(huán)語句：用于重復(fù)執(zhí)行一段代碼。functionmyFunction(){//函數(shù)體}myFunction();//調(diào)用函數(shù)1.1.6JavaScript語句3.JavaScript的數(shù)據(jù)輸出函數(shù)調(diào)用語句：調(diào)用函數(shù)執(zhí)行特定的操作。functionadd(a,b){returna+b;}1.1.6JavaScript語句3.JavaScript的數(shù)據(jù)輸出返回語句：在函數(shù)中用于返回值。varvariableName;//聲明變量functionmyFunction(){//聲明函數(shù)

//函數(shù)體}1.1.6JavaScript語句3.JavaScript的數(shù)據(jù)輸出聲明語句：用于聲明變量或函數(shù)。varresult=x+y;//表達(dá)式語句1.1.6JavaScript語句3.JavaScript的數(shù)據(jù)輸出表達(dá)式語句：包含一個(gè)表達(dá)式，通常以分號(hào)結(jié)束。console.log("Hello,World!");輸出語句：在瀏覽器控制臺(tái)輸出信息。try{//可能發(fā)生錯(cuò)誤的代碼}catch(error){//處理錯(cuò)誤的代碼}1.1.6JavaScript語句3.JavaScript的數(shù)據(jù)輸出異常處理語句：用于處理可能發(fā)生的錯(cuò)誤。a=5;b=6;c=a+b;1.1.7JavaScript代碼規(guī)范1.分號(hào)分號(hào)用于分隔JavaScript語句。通常我們?cè)诿織l可執(zhí)行的語句結(jié)尾添加分號(hào)。使用分號(hào)的另一用處是在一行中編寫多條語句。以上示例也可以寫成以下代碼:a=5;b=6;c=a+b;varperson="Hege";varperson="Hege";1.1.7JavaScript代碼規(guī)范2.空格JavaScript會(huì)忽略多余的空格。我們可以向腳本添加空格，來提高其可讀性。下面這兩行代碼是等效的：document.write("你好\世界!");1.1.7JavaScript代碼規(guī)范3.對(duì)代碼行進(jìn)行折行我們可以在文本字符串中使用反斜杠對(duì)代碼行進(jìn)行換行。如下面的例子都會(huì)正確顯示出其內(nèi)容：//document.getElementById("myH1").innerHTML="歡迎來到我的主頁";document.getElementById("myP").innerHTML="這是我的第一個(gè)段落。";1.1.7JavaScript代碼規(guī)范4.JavaScript注釋單行注釋：以//開頭，下方代碼運(yùn)行結(jié)果，第一個(gè)語句將不執(zhí)行。多行注釋：以/*開始，以*/結(jié)尾，下方代碼運(yùn)行結(jié)果，兩個(gè)語句都不執(zhí)行。/*document.getElementById("myH1").innerHTML="歡迎來到我的主頁";document.getElementById("myP").innerHTML="這是我的第一個(gè)段落。";*/1.1.8JavaScript數(shù)據(jù)結(jié)構(gòu)1.標(biāo)識(shí)符命名規(guī)范：標(biāo)識(shí)符只能由字母、數(shù)字或下劃線和中文組成，而不能包含空格、標(biāo)點(diǎn)符號(hào)、運(yùn)算符等其他符號(hào)。標(biāo)識(shí)符的第一個(gè)字符必須是字母、下劃線或者中文。標(biāo)識(shí)符不能與JavaScript中的關(guān)鍵字名稱相同，即不能是iclse

等。1.1.8JavaScript數(shù)據(jù)結(jié)構(gòu)2.關(guān)鍵字關(guān)鍵字標(biāo)識(shí)了JavaSoript語向的開頭或結(jié)尾。根據(jù)規(guī)定，關(guān)鍵字是保留的，不能用作變量名或函數(shù)名。breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewithJavaScript中的關(guān)鍵字1.1.8JavaScript數(shù)據(jù)結(jié)構(gòu)3.保留字保留字在某種意義上是為將來的關(guān)鍵字而保留的單詞。因此保留字不能被用作變量名或函數(shù)名。JavaScript中的保留字abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile

1.1.8JavaScript數(shù)據(jù)結(jié)構(gòu)4.常量簡單地說，常量是字面變量，是固化在程序代碼中的信息，常量的值從定義開始就是固定的。常量主要用于為程序提供固定和精確的值，如數(shù)值、字符串、迎輯值真(true)、邏輯值假（false)等都是常量。常量通常使用const聲明。語法格式如下：const常量名：數(shù)據(jù)類型二值；1.1.8JavaScript數(shù)據(jù)結(jié)構(gòu)5.變量變量是用于存儲(chǔ)信息的"容器"，在編程語言中，變量用于存儲(chǔ)數(shù)據(jù)值。命名規(guī)則：變量必須以字母開頭變量也能以$和_符號(hào)開頭（不過我們不推薦這么做）變量名稱對(duì)大小寫敏感（y和Y是不同的變量）注意：JavaScript語句和JavaScript變量對(duì)大小寫都是敏感的。當(dāng)編寫JavaScript語句時(shí)，請(qǐng)留意是否關(guān)閉大小寫切換鍵。1.1.9數(shù)據(jù)類型1.JavaScript字符串字符串是存儲(chǔ)字符（比如"BillGates"）的變量。字符串可以是引號(hào)中的任意文本，可以使用單引號(hào)或雙引號(hào)。varcarname="VolvoXC60";varcarname='VolvoXC60';1.1.9數(shù)據(jù)類型2.JavaScript數(shù)字JavaScript只有一種數(shù)字類型。數(shù)字可以帶小數(shù)點(diǎn)，也可以不帶。varx1=34.00;//使用小數(shù)點(diǎn)來寫varx2=34;//不使用小數(shù)點(diǎn)來寫極大或極小的數(shù)字可以通過科學(xué)（指數(shù)）計(jì)數(shù)法來書寫。vary=123e5;//12300000varz=123e-5;//0.001231.1.9數(shù)據(jù)類型3.JavaScript布爾布爾（邏輯）只能有兩個(gè)值：true或false。varx=true;vary=false;1.1.9數(shù)據(jù)類型4.JavaScript數(shù)組下面的代碼創(chuàng)建名為cars的數(shù)組：數(shù)組下標(biāo)是基于零的，所以第一個(gè)項(xiàng)目是[0]，第二個(gè)是[1]，以此類推。varcars=newArray();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";1.1.9數(shù)據(jù)類型5.JavaScript對(duì)象對(duì)象由花括號(hào)分隔。在括號(hào)內(nèi)部，對(duì)象的屬性以名稱和值對(duì)的形式(name:value)來定義。屬性由逗號(hào)分隔：varperson={firstname:"John",lastname:"Doe",id:5566};對(duì)象屬性有兩種尋址方式：name=person.lastname;name=person["lastname"];1.1.9數(shù)據(jù)類型6.Undefined和NullUndefined這個(gè)值表示變量不含有值?？梢酝ㄟ^將變量的值設(shè)置為null來清空變量。cars=null;person=null;1.1.9數(shù)據(jù)類型7.聲明變量類型當(dāng)聲明新變量時(shí)，可以使用關(guān)鍵詞"new"來聲明其類型：varcarname=newString;varx=newNumber;vary=newBoolean;varcars=newArray;varperson=newObject;1.1.10運(yùn)算符和表達(dá)式1.算術(shù)運(yùn)算符算術(shù)運(yùn)算符用于連接運(yùn)算表達(dá)式，主要包括加（+）、減（-）、乘（*）、除（/）、取模（%）、自增（++）、自減（--）等。舉例：指定變量值，并將值相加，語句執(zhí)行后，x的值是：7：y=5;z=2;x=y+z;1.1.10運(yùn)算符和表達(dá)式2.比較運(yùn)算符比較運(yùn)算符在邏輯語句中使用，用于判斷變量或值是否相等。其運(yùn)算過程需要首先對(duì)操作數(shù)進(jìn)行比較，然后返回一個(gè)布爾值true或false。運(yùn)算符說明示例==等于，只根據(jù)表面值進(jìn)行判斷，不涉及數(shù)據(jù)類型“5”==5的值為true===絕對(duì)等于，同時(shí)根據(jù)表面值和數(shù)據(jù)類型進(jìn)行判斷“5”===5的值為false！=不等于，只根據(jù)表面值進(jìn)行判斷，不涉及數(shù)據(jù)類型“5”！=5的值為false!==不絕對(duì)等于，同時(shí)根據(jù)表面值和數(shù)據(jù)類型進(jìn)行判斷“5”！==5的值為true>

大于“5”>3的值為true>=大于等于“5”>=3的值為false<

小于“5”=3的值為false<=小于等于“5”<=3的值為false1.1.10運(yùn)算符和表達(dá)式3.賦值運(yùn)算符賦值運(yùn)算符是用于給JavaScript變量賦值。給定x=10和y=5，下面的表格解釋了賦值運(yùn)算符。運(yùn)算符例子等同于運(yùn)算結(jié)果=x=y

x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=01.1.10運(yùn)算符和表達(dá)式4.邏輯運(yùn)算符通常用于執(zhí)行邏輯運(yùn)算，它們常與比較運(yùn)算符一起使用，來表示復(fù)雜比較運(yùn)算，而且常用于if、while和for語句中。運(yùn)算符說明示例&&邏輯與，若兩邊表達(dá)式的值都為true，則返回true；任意一個(gè)值為false，則返回false10>7&&10<15,true10>7&&10>15,false||邏輯或，只有表達(dá)式的值都為false時(shí)，才返回false10>7||100>15,true10<7||100<15,false！邏輯非，若表達(dá)式的值為true，則返回false，否則返回true!(10>7),false!(100<15),true1.1.10運(yùn)算符和表達(dá)式5.條件運(yùn)算符條件運(yùn)算是JavaScript中的一種特殊的三元運(yùn)算符，它有三個(gè)部分，其語法格式為：條件？表達(dá)式1：表達(dá)式2在使用條件運(yùn)算符時(shí)，如果條件為真，則表達(dá)式使用表達(dá)式1的值，否則使用表達(dá)式2的值。1.1.10運(yùn)算符和表達(dá)式6.運(yùn)算符的優(yōu)先級(jí)Javascript運(yùn)算符均有明確的優(yōu)先級(jí)與結(jié)合性。優(yōu)先級(jí)較高的運(yùn)算符將先于優(yōu)先級(jí)低的運(yùn)算符進(jìn)行運(yùn)算。結(jié)合性則是指具有同等優(yōu)先級(jí)的運(yùn)算符將按照怎樣的順序進(jìn)行運(yùn)算，結(jié)合性有向左結(jié)合和向右結(jié)合兩種。1.1.10運(yùn)算符和表達(dá)式6.運(yùn)算符的優(yōu)先級(jí)運(yùn)算符的優(yōu)先級(jí)優(yōu)先級(jí)（1最高）說明運(yùn)算符1邏輯非！2括號(hào)（）3自加/自減運(yùn)算符++--4乘法、除法、取余運(yùn)算符*/%5加法、減法運(yùn)算符+-6小于、小于等于、大于、大于等于<<=>>=7等于、不等于==！=8邏輯與&&9邏輯或||10賦值運(yùn)算符和快捷運(yùn)算符=+=*=/=%=-=動(dòng)手實(shí)踐：簡單加法器的實(shí)現(xiàn)1.案例介紹關(guān)鍵點(diǎn)：使用prompt()獲取用戶輸入。使用parseFloat()確保將用戶輸入解析為浮點(diǎn)數(shù)。執(zhí)行數(shù)值運(yùn)算并將結(jié)果存儲(chǔ)在變量中。使用alert()輸出結(jié)果。動(dòng)手實(shí)踐：簡單加法器的實(shí)現(xiàn)2.實(shí)現(xiàn)過程輸入javascript語言標(biāo)簽聲明變量num1=prompt();和num2=prompt();定義變量result用alert()輸出運(yùn)算結(jié)果動(dòng)手實(shí)踐：簡單加法器的實(shí)現(xiàn)3.小結(jié)通過一個(gè)簡單的加法器案例，展示了在JavaScript中進(jìn)行數(shù)值運(yùn)算的基本方法。學(xué)習(xí)者可以通過自定義不同的數(shù)值進(jìn)行加法運(yùn)算，從而加深對(duì)基本數(shù)值運(yùn)算和JavaScript語言特性的理解。

1.2程序控制結(jié)構(gòu)和語句1.2.1程序控制結(jié)構(gòu)和語句1.基本處理流程對(duì)數(shù)據(jù)結(jié)構(gòu)的處理流程。稱為基本處理流程。在JavaScript中，基本的處理流程包含三種結(jié)構(gòu)，循序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。順序結(jié)構(gòu)單項(xiàng)選擇和雙向選擇結(jié)構(gòu)1.2.1程序控制結(jié)構(gòu)和語句1.基本處理流程循環(huán)結(jié)構(gòu)（左：當(dāng)型；右：直線型）變量名=表達(dá)式；賦值語句往往需要大量的變量來存儲(chǔ)程序中用到的數(shù)據(jù)，所以用來對(duì)變量進(jìn)行賦值的賦值語句也會(huì)在程序中大量出現(xiàn)。其格式如下：1.2.1程序控制結(jié)構(gòu)和語句當(dāng)使用關(guān)鍵字var聲明變量時(shí)，可以同時(shí)使用賦值語句對(duì)聲明的變量進(jìn)行賦值。varusername=“book”;varblue=true;varvariable=“萬事如意”;3.條件判斷語句條件判斷語句就是對(duì)語句中不同條件的值進(jìn)行判斷，進(jìn)而根據(jù)不同的條件執(zhí)行不同的語句。if語句：1.2.1程序控制結(jié)構(gòu)和語句If（條件語句）{執(zhí)行語句;}3.條件判斷語句if-else語句：通常用于一個(gè)條件需要兩個(gè)程序分支來執(zhí)行的情況。1.2.1程序控制結(jié)構(gòu)和語句If（條件）{當(dāng)條件為true時(shí)執(zhí)行的代碼}else{當(dāng)條件不為true時(shí)執(zhí)行的代碼}3.條件判斷語句If-elseif語句：選擇多個(gè)代碼塊之一來執(zhí)行。1.2.1程序控制結(jié)構(gòu)和語句If（條件1）{當(dāng)條件1為true時(shí)執(zhí)行的代碼}elseif(條件2){當(dāng)條件2為true時(shí)執(zhí)行的代碼}else{當(dāng)條件1和條件2不為true時(shí)執(zhí)行的代碼}3.條件判斷語句switch語句：一種多分支選擇結(jié)構(gòu)，用于將一個(gè)表達(dá)式的結(jié)果與多個(gè)值進(jìn)行比較，并根據(jù)比較結(jié)果選擇執(zhí)行語句。1.2.1程序控制結(jié)構(gòu)和語句switch（表達(dá)式）{case數(shù)值1：

語句塊1；break； case數(shù)值2：

語句塊2；break； …….. case數(shù)值n：

語句塊n；break； Default;

語句塊n+1； }4.循環(huán)控制語句while循環(huán)語句：是一種在循環(huán)開始之前不知道具體循環(huán)次數(shù)的情況下執(zhí)行代碼的循環(huán)結(jié)構(gòu)。它在每次迭代之前檢查循環(huán)條件，只有在條件為真時(shí)才執(zhí)行代碼塊。1.2.1程序控制結(jié)構(gòu)和語句while(循環(huán)條件){//待執(zhí)行的代碼塊}4.循環(huán)控制語句dowhile循環(huán)語句：do-while循環(huán)與while循環(huán)類似，但它會(huì)先執(zhí)行一次代碼塊，然后再檢查循環(huán)條件。1.2.1程序控制結(jié)構(gòu)和語句do{//待執(zhí)行的代碼塊}while(循環(huán)條件);4.循環(huán)控制語句for循環(huán)語句：是一種計(jì)數(shù)循環(huán)，用于在已知循環(huán)次數(shù)的情況下執(zhí)行一段代碼。它通常包括初始化變量、循環(huán)條件和每次迭代后更新變量的步進(jìn)操作。1.2.1程序控制結(jié)構(gòu)和語句for（初始化表達(dá)式;循環(huán)條件表達(dá)式;循環(huán)后的操作表達(dá)式;）{//待執(zhí)行語句塊}5.對(duì)話框在JavaScript中有三種樣式的對(duì)話框，可分別用作提示、確認(rèn)和輸入、對(duì)應(yīng)三個(gè)函數(shù)：alert()、confirm()、prompt()。1.2.1程序控制結(jié)構(gòu)和語句函數(shù)作用alert()該對(duì)話框在只用于提醒，不能對(duì)腳本產(chǎn)生任何改變。它只有一個(gè)參數(shù)，即為需要提示的信息，沒有返回值。confirm()該對(duì)話框一般用于確認(rèn)信息。它只有一個(gè)參數(shù)，返回值為true或false。prompt()該對(duì)話框可以進(jìn)行輸入，并返回用戶輸入的字符串。它有兩個(gè)參數(shù)，第一個(gè)參數(shù)顯示提示信息，第二個(gè)參數(shù)顯示輸入框和默認(rèn)值（未設(shè)置默認(rèn)值時(shí)則不顯示）。動(dòng)手實(shí)踐：九九乘法口訣表的實(shí)現(xiàn)1.布局分析關(guān)鍵點(diǎn)：在HTML中使用<table>標(biāo)簽表示表格。使用JavaScript的document.write()方法將表格動(dòng)態(tài)生成。外層循環(huán)控制行數(shù)，內(nèi)層循環(huán)控制列數(shù)，根據(jù)乘法規(guī)則生成每個(gè)單元格的內(nèi)容。使用<th>標(biāo)簽表示表頭，即乘法表的每個(gè)乘法式。添加CSS樣式對(duì)表格進(jìn)行簡單修飾。動(dòng)手實(shí)踐：簡單加法器的實(shí)現(xiàn)2.實(shí)現(xiàn)過程使用for嵌套實(shí)現(xiàn)乘法口訣的基本樣式在for循環(huán)中直接添加表格對(duì)表格進(jìn)行CSS樣式修飾動(dòng)手實(shí)踐：簡單加法器的實(shí)現(xiàn)3.小結(jié)九九乘法口訣表的生成通過嵌套循環(huán)結(jié)構(gòu)實(shí)現(xiàn)，靈活運(yùn)用了外層循環(huán)控制行數(shù)，內(nèi)層循環(huán)控制列數(shù)的邏輯。JavaScript的document.write()方法用于在頁面中動(dòng)態(tài)生成HTML內(nèi)容。CSS樣式的添加可以提升表格的可讀性和美觀性。

1.3JavaScript函數(shù)1.3.1函數(shù)函數(shù)是一段被命名的可重用的代碼塊，用于執(zhí)行特定的任務(wù)或計(jì)算。函數(shù)提供了一種將代碼模塊化的方式，使得代碼更加結(jié)構(gòu)化、可讀性更強(qiáng)，并且方便維護(hù)和重用。關(guān)鍵特征：重命名參數(shù)代碼塊返回值調(diào)用分類方法：按參數(shù)個(gè)數(shù)按返回值按函數(shù)的來源1.3.2定義函數(shù)1.不指定函數(shù)名應(yīng)用場(chǎng)合：把函數(shù)直接賦值給變量網(wǎng)頁事件直接調(diào)用函數(shù)function（[參數(shù)1，參數(shù)2，…..]）{//函數(shù)體}1.3.2定義函數(shù)2.指定函數(shù)名說明：function為關(guān)鍵字，在此用來定義函數(shù)函數(shù)名必須是唯一的中括號(hào)[]括起來部分是可選部分，參數(shù)（形參）是可選的可使用return將值返回function函數(shù)名（[參數(shù)1，參數(shù)2，……]）{//函數(shù)體[return表達(dá)式]}1.3.2定義函數(shù)3.函數(shù)參數(shù)的使用函數(shù)參數(shù)是函數(shù)定義的一部分，用于指定函數(shù)可以接收的輸入值。關(guān)鍵點(diǎn)：定義參數(shù)傳遞參數(shù)默認(rèn)參數(shù)可變參數(shù)列表命名參數(shù)參數(shù)的作用域1.3.2定義函數(shù)4.函數(shù)的返回值函數(shù)的返回值是函數(shù)執(zhí)行完成后返回給調(diào)用者的值。示例：functionmultiply(a,b){returna*b;}varproduct=multiply(3,4);console.log(product);//輸出121.3.2函數(shù)的調(diào)用1.函數(shù)的簡單調(diào)用當(dāng)函數(shù)定義完成后，要想在程序中發(fā)揮函數(shù)的作用，必須得調(diào)用這個(gè)函數(shù)。函數(shù)名稱([參數(shù)1，參數(shù)2，…….])//其中參數(shù)1，參數(shù)2，是可選的1.3.2函數(shù)的調(diào)用2.在表達(dá)式中調(diào)用函數(shù)在表達(dá)式中調(diào)用函數(shù)的方式，一般比較適合有返回值的函數(shù)，函數(shù)的返回值參與表達(dá)式的計(jì)算。functionYears(year){ if(year%4==0&&year%100!=0||year%400==0) { returnyear+"年是閏年"; }else { returnyear+"年是平年"; }}1.3.2函數(shù)的調(diào)用3.在事件響應(yīng)中調(diào)用函數(shù)JavaScript是基于事件模型的編程語言，頁面加載、用戶單擊、移動(dòng)光標(biāo)都會(huì)產(chǎn)生事件，當(dāng)事件產(chǎn)生時(shí)，JavaScript可以調(diào)用某個(gè)函數(shù)來響應(yīng)這個(gè)事件。functionshow(){varcount=document.myForm.txtName.value

for(i=0;i<count;i++){document.write("<h2>歡迎來到我的課堂</h2>");}}<inputtype="submit"name="Submit"value="歡迎來到我的課堂"onClick="show()">1.3.2函數(shù)的調(diào)用4.通過鏈接來調(diào)用函數(shù)在<a>標(biāo)簽中的href標(biāo)記中使用“JavaScript:函數(shù)名()”來調(diào)用函數(shù)，當(dāng)用戶單擊該鏈接時(shí)，相關(guān)函數(shù)就會(huì)被執(zhí)行。functiontest(){alert("歡迎來到web前端課堂");}<ahref="javascript:test();"> web前端</a>1.3.3JavaScript中常用的函數(shù)1.嵌套函數(shù)嵌套函數(shù)就是在函數(shù)的內(nèi)部再定義一個(gè)函數(shù)。優(yōu)點(diǎn)：可以使用內(nèi)部函數(shù)輕松獲得外部函數(shù)的參數(shù)以及函數(shù)的全局變量。function外部函數(shù)名（參數(shù)1，參數(shù)2）{ function內(nèi)部函數(shù)名（）{

函數(shù)體 }}1.3.3JavaScript中常用的函數(shù)2.遞歸函數(shù)函數(shù)直接或間接調(diào)用函數(shù)本身。必要條件：首先包括一個(gè)結(jié)束遞歸的條件其次包括一個(gè)遞歸調(diào)用語句function遞歸函數(shù)名（參數(shù)1）{

遞歸函數(shù)名（參數(shù)1）；}1.3.3JavaScript中常用的函數(shù)3.內(nèi)置函數(shù)語言內(nèi)部事先定義好的函數(shù)。常用內(nèi)置函數(shù)作用eval（expr）把一個(gè)字符串當(dāng)做一個(gè)JavaScript表達(dá)式一樣去執(zhí)行isFinite用來確定參數(shù)是有是一個(gè)有限數(shù)值isNaN用于指明是否是保留值NaNparseInt/parseFloat將數(shù)值字符串轉(zhuǎn)化為一個(gè)數(shù)值Number/String將對(duì)象轉(zhuǎn)換為數(shù)值或字符串1.布局分析布局時(shí)主要使用了div層的嵌套，以及標(biāo)題和img標(biāo)簽。動(dòng)手實(shí)踐：簡單加法器的實(shí)現(xiàn)動(dòng)手實(shí)踐：簡單加法器的實(shí)現(xiàn)2.實(shí)現(xiàn)過程新建HTML文檔，創(chuàng)建基本布局添加CSS樣式表書寫JavaScript代碼本章小結(jié)本項(xiàng)目首先針對(duì)JavaScript基礎(chǔ)進(jìn)行了介紹，包括引入方式、輸出語句、注釋、標(biāo)識(shí)符、變量的聲明與賦值以及數(shù)據(jù)類型、表達(dá)式和運(yùn)算符的使用，然后講解了如何使用流程控制語句實(shí)現(xiàn)條件判斷和代碼的重復(fù)執(zhí)行，最后介紹了什么是函數(shù)、函數(shù)的定義、調(diào)用和返回值以及常用函數(shù)。主講人：盧秋錦Web前端技術(shù)

數(shù)組與對(duì)象目錄2.1數(shù)組對(duì)象2.2?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)

數(shù)組2.1.1初始數(shù)組數(shù)組（array）是存儲(chǔ)一系列變量的組合，它有一個(gè)或多個(gè)元素組成，各個(gè)元素之間用逗號(hào)分割。vararr=['a','b','c'];2.1.2創(chuàng)建數(shù)組實(shí)例化Array對(duì)象的方式創(chuàng)建數(shù)組是通過new關(guān)鍵字實(shí)現(xiàn)的。1.使用Array對(duì)象創(chuàng)建數(shù)組varname=newArray('Lucy','Jack','Limin');//元素值類型為字符型varage=newArray(18,38,62,44);//元素值類型為數(shù)值型varmix=newArray(112,'abc',null,true,undefined);//元素值類型為混合型vararrl=newArray（）；//或vararr2=newArray：//空數(shù)組2.1.2創(chuàng)建數(shù)組使用“[]”創(chuàng)建數(shù)組的方式與Array()對(duì)象的使用方式類似，只需將newArray()替換為[]即可。2.使用“[]”創(chuàng)建數(shù)組varweather=['wind'，'fine'，]；//相當(dāng)于：newArray（'wind'，'fine'，）varempty=[];//相當(dāng)于：newArrayvarmood=["sad"，empty×3，"hAppy"];//控制臺(tái)輸出mood：（5）varmood=['sad',,'hAppy'];控制臺(tái)輸出mood：（3）2.1.3數(shù)組的基本操作Array對(duì)象提供的length屬性可以獲取數(shù)組的長度，其值為數(shù)組元素最大下標(biāo)加1。1.獲取數(shù)組長度vararrl=[78,88,98];vararr2=['a',,,'b','c'];console.log（arrl.length）；//輸出結(jié)果為：3console.log（arr2.length）；//輸出結(jié)果為：52.1.3數(shù)組的基本操作訪問數(shù)組元素：數(shù)組創(chuàng)建完成后，若想要查看數(shù)組中某個(gè)具體的元素，可以通過“數(shù)組名[下標(biāo)]”的方式獲取指定下標(biāo)的值。2.數(shù)組的訪問與遍歷vararr=['Limin','JavaScript',1156,true];console.log(arr[0]);2.1.3數(shù)組的基本操作遍歷數(shù)組元素：依次訪問數(shù)組中所有元素的操作，可以使用for或for...in語句。2.數(shù)組的訪問與遍歷vararray=[1,2,3,4,5];//定義一個(gè)數(shù)組//使用for...in語句遍歷數(shù)組for(varindexinarray){varelement=array[index];console.log(element);}2.1.3數(shù)組的基本操作數(shù)組創(chuàng)建后，可以根據(jù)實(shí)際需求，通過自定義數(shù)組元素下標(biāo)的方式添加元素。3.添加數(shù)組元素vararr=['Honghong',‘Jim’];arr[2]='Tom';arr[3]='Jack';console.log(arr);//輸出結(jié)果:（4）["Honghong"，"Jim"，"Tom"，"Jack"]2.1.3數(shù)組的基本操作修改元素與添加元素的使用方式相同，不同的是修改元素是為已含有值的元素重新賦值。4.修改元素vararr=['a','b','c','d'];arr[2]=123;arr[3]=456;console.log(arr);//輸出結(jié)果：（4）["a"，"b"，123，456]2.1.3數(shù)組的基本操作可以利用delete關(guān)鍵字刪除該數(shù)組元素的值。5.元素的刪除varstu=['Tom','Jimmy','Lucy'];console.log（stu）；//輸出結(jié)果：（3）["Tom"，"Jimmy"，"Lucy"]deletestu[1]；

//刪除數(shù)組中第2個(gè)元素console.log（stu）；//輸出結(jié)果：（3）["Tom"，empty，"Lucy"]2.1.4數(shù)組的排序重復(fù)走訪過要排序的數(shù)列，一次比較兩個(gè)數(shù)，如果順序錯(cuò)誤就進(jìn)行交換，直到?jīng)]有再需要交換。1.冒泡排序2.1.4數(shù)組的排序在未排序的數(shù)組中找到最小或者最大的元素，存放在排序數(shù)組的起始位置。然后再從未排序的數(shù)列中去找到這個(gè)數(shù)組中第二大或這第二小的數(shù)放在已排序的數(shù)之后，以此類推，不斷重復(fù)直到所有元素排列完畢。2.選擇排序2.1.4數(shù)組的排序?qū)⒁粋€(gè)未排序的元素插入到已經(jīng)排序好的數(shù)組中，從而使得已排序的數(shù)組增加一個(gè)元素，通過插入不斷完善已排序數(shù)組。3.插入排序2.1.4數(shù)組的排序三種排序方式優(yōu)劣比較：名稱優(yōu)點(diǎn)缺點(diǎn)冒泡排序穩(wěn)定性好；慢，每次只能移動(dòng)相鄰兩個(gè)數(shù)據(jù)。選擇排序移動(dòng)數(shù)據(jù)的次數(shù)已知（n-1次）比較次數(shù)多，是一種不穩(wěn)定的排序方法。插入排序穩(wěn)定性好，速度快；比較次數(shù)不一定，比較次數(shù)越少，插入點(diǎn)后的數(shù)據(jù)移動(dòng)越多，特別是當(dāng)數(shù)據(jù)總量龐大的時(shí)候，但用鏈表可以解決這個(gè)問題。2.1.5常見數(shù)組方法JavaScript中可以利用Array對(duì)象提供的方法，實(shí)現(xiàn)在數(shù)組的末尾或開頭添加數(shù)組的新元素，或在數(shù)組的末尾或開頭移出數(shù)組元素。利用這些方法可以模擬棧和隊(duì)列的操作。1.棧和隊(duì)列方法方法名稱功能描述push()將一個(gè)或多個(gè)元素添加到數(shù)組的末尾，并返回?cái)?shù)組的新長度unshift()將一個(gè)或多個(gè)元素添加到數(shù)組的開頭，并返回?cái)?shù)組的新長度pop()從數(shù)組的末尾移出并返回一個(gè)元素，若是空數(shù)組則返回undefinedshift()從數(shù)組的開頭移出并返回一個(gè)元素，若是空數(shù)組則返回undefined2.1.5常見數(shù)組方法在開發(fā)中，若要檢測(cè)給定的值是否是數(shù)組，或是查找指定的元素在數(shù)組中的位置，則可以利用Array對(duì)象提供的檢索方法。2.檢索方法方法名稱功能描述includes()用于確定數(shù)組中是否含有某個(gè)元素，含有返回true，否則返回falseArray.isArray()用于確定傳遞的值是否是一個(gè)Array，是返回true，不是返回falseindexOf()返回在數(shù)組中可以找到給定值的第1個(gè)索引，如果不存在，則返回-1lastIndexOf()返回指定元素在數(shù)組中的最后一個(gè)的素引，如果不存在則返回-12.1.5常見數(shù)組方法在項(xiàng)目開發(fā)中,若需要將數(shù)組轉(zhuǎn)換為字符串,則可以利用JavaScript提供的join()和toString()方法實(shí)現(xiàn)。3.數(shù)組轉(zhuǎn)字符串方法名稱功能描述join()將數(shù)組的所有元素連接到一個(gè)字符串中。toString()返回一個(gè)字符串，表示指定的數(shù)組及其元素。2.1.5常見數(shù)組方法JavaScript還提供了很多其他常用的數(shù)組方法。例如，合并數(shù)組、數(shù)組淺拷貝、顛倒數(shù)組元素的順序等。4.其他方法方法名稱功能描述sort()對(duì)數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組。fill()用一個(gè)固定值填充數(shù)組中指定下標(biāo)范圍內(nèi)的全部元素reverse()顛倒數(shù)組中元素的位置splice()對(duì)一個(gè)數(shù)組在指定下標(biāo)范圍內(nèi)刪除或添加元素slice()從一個(gè)數(shù)組的指定下標(biāo)范圍內(nèi)拷貝數(shù)組元素到一個(gè)新數(shù)組中concat()返回一個(gè)合并兩個(gè)或多個(gè)數(shù)組后的新數(shù)組2.1.5常見數(shù)組方法一群猴子排成一圈，按“1，2，......，n”依次編號(hào)。然后從第1只開始數(shù)，數(shù)到第m只，把它踢出圈，其后的猴子再從1開始數(shù)，數(shù)到第m只，再把它踢出去·....·.如此不停地進(jìn)行下去，直到最后只剩下一只猴子為止，那只猴子就是我們要找的大王。5.案例--猴子選大王2.1.5常見數(shù)組方法模擬游戲：假設(shè)n（猴子總數(shù)）：8、m（踢出圈的）：3；第一圈：踢出的猴子編號(hào)為3、6，位置編號(hào)為3、6。第二圈：踢出的猴子編號(hào)為1、5，位置編號(hào)為9、12。第三圈：踢出的猴子編號(hào)為2、8，位置編號(hào)為15、18。第四圈：無。第五圈：踢出的猴子編號(hào)為4，位置編號(hào)為21。得出猴王編號(hào)：75.案例--猴子選大王實(shí)現(xiàn)思路：通過prompt()接收用戶傳遞的猴子總數(shù)n和踢出的第m只猴子；利用數(shù)組保存所有猴子的編號(hào)（1~n）；設(shè)置一個(gè)變量i，記錄每次參與游戲（報(bào)數(shù)）的猴子位置；通過while循環(huán)，只要猴子數(shù)組內(nèi)元素個(gè)數(shù)大于1，就繼續(xù)循環(huán)；在循環(huán)中判斷當(dāng)前猴子的位置i與m求余是否為0，若為零，刪除該數(shù)組元素。提示：通過出棧的方式取出猴子，如判斷不為0，再將該元素入棧。5.案例2.1.5常見數(shù)組方法通常使用3個(gè)下拉菜單分別表示省份、城市和區(qū)域，為了使代碼更好維護(hù)，可以利用數(shù)組存儲(chǔ)數(shù)據(jù)，再創(chuàng)建函數(shù)來控制二三級(jí)下拉菜單。1.動(dòng)態(tài)生成下拉菜單動(dòng)手實(shí)踐：三級(jí)聯(lián)動(dòng)菜單的實(shí)現(xiàn)functioncreateOption(obj，data){for(variindata){varop=newOption(data[i]，i);obj.options.add(op);}}varprovince=document.getElementById(provincecreateOption(province，provinceArr);用戶選擇完省份后，其后下拉列表中自動(dòng)獲取該省份的所有城市，并依次類推，選擇完城市后，其后的下拉列表中自動(dòng)獲取該城市中的所有區(qū)域。2.實(shí)現(xiàn)下拉菜單三級(jí)聯(lián)動(dòng)動(dòng)手實(shí)踐：三級(jí)聯(lián)動(dòng)菜單的實(shí)現(xiàn)//獲取城市下拉菜單的元素對(duì)象varcity=document.getElementById('city’);//為省份下拉列表添加事件province.onchange=function(){optioncity.options.length=0；createOption(city，cityArr[province.value]);}編寫代碼修改省份province的onchange事件，使得區(qū)域的下拉菜單內(nèi)容隨省份修改進(jìn)行變動(dòng)。2.實(shí)現(xiàn)下拉菜單三級(jí)聯(lián)動(dòng)動(dòng)手實(shí)踐：三級(jí)聯(lián)動(dòng)菜單的實(shí)現(xiàn)province.onchange=function(){city.options.length=0;createOption(city，cityArr[province.value]);if(province.value>=0){city.onchange();//自動(dòng)添加城市對(duì)應(yīng)區(qū)域下拉菜單}else{ country.options.length=0;}};

對(duì)象2.2.1對(duì)象在JavaScript中，對(duì)象是一組無序的相關(guān)屬性和方法的集合，所有的事物都是對(duì)象，例如字符串、數(shù)值、數(shù)組、函數(shù)等。對(duì)象是由屬性和方法組成的。屬性：事物的特征，在對(duì)象中用屬性來表示（常用名詞）方法：事物的行為，在對(duì)象中用方法來表示（常用動(dòng)詞）1.什么是對(duì)象2.2.1對(duì)象在javascript中的對(duì)象表達(dá)結(jié)構(gòu)更清晰，更強(qiáng)大，如Lucy的個(gè)人信息在對(duì)象中的表達(dá)結(jié)構(gòu)如下：2.為什么需要對(duì)象Lucy.姓名=‘Lucy’；=‘Lucy’;Lucy.性別=‘女’；person.sex=‘女’;Lucy.年齡=‘12’；person.age=‘12’;Lucy.身高=‘156’；person.heigh=‘156’;2.2.2對(duì)象的創(chuàng)建對(duì)象字面量：就是花括號(hào){}里面包含了表達(dá)這個(gè)具體事物（對(duì)象）的屬性和方法。{}里面采取鍵值對(duì)的形式表示。鍵：相當(dāng)于屬性名；值：相當(dāng)于屬性值，可以是任意類型的值1.利用字面量創(chuàng)建對(duì)象varstudent={ name:‘李明’; age:18; sex:’男’;S sayHello:function(){ alert(‘Helloeveryone!’)}; };2.2.2對(duì)象的創(chuàng)建Object（）：第一個(gè)字母大寫newObject（）：需要new關(guān)鍵字使用的格式：對(duì)象.屬性=值；2.利用newObject創(chuàng)建對(duì)象varJim=newObect();J='pink';andy.age=18;Jim.sex='男'；Jim.sayHello=function(){alert（'Helloeveryone!'）；}2.2.2對(duì)象的創(chuàng)建構(gòu)造函數(shù)用于創(chuàng)建某一類對(duì)象，其首字母要大寫構(gòu)造函數(shù)要和new一起使用才有意義3.利用構(gòu)造函數(shù)創(chuàng)建對(duì)象functionPerson(name){=name;this.sayHi=function(){ alert（’我的名字叫：’+）； }}varbigboy=newPerson（'大男孩'）；console.log();2.2.3new關(guān)鍵字使用new關(guān)鍵字創(chuàng)建一個(gè)新的對(duì)象實(shí)例：創(chuàng)建一個(gè)空的普通JavaScript對(duì)象（{}）1將新創(chuàng)建的對(duì)象的原型（__proto__）連接到構(gòu)造函數(shù)的原型對(duì)象中2將構(gòu)造函數(shù)內(nèi)部的this關(guān)鍵字指向新創(chuàng)建的對(duì)象3執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼，初始化新對(duì)象的屬性和方法4如果構(gòu)造函數(shù)沒有顯示返回一個(gè)對(duì)象，則返回新創(chuàng)建的對(duì)象52.2.3new關(guān)鍵字//構(gòu)造函數(shù)functionPerson(name,age){=name;this.age=age;}//使用new關(guān)鍵字創(chuàng)建對(duì)象varperson1=newPerson("Alice",30);varperson2=newPerson("Bob",25);console.log(person1);//Person{name:'Alice',age:30}console.log(person2);//Person{name:'Bob',age:25}示例：2.2.4遍歷對(duì)象對(duì)象是鍵值對(duì)的集合，通?？赡苄枰闅v它的鍵（key）、值（value）或者兩者?？捎胒or...in語句對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行循環(huán)操作。for(varkinobj){console.log(k);//這里的k是屬性名console.log(obj[k]);//這里的obj[k]是屬性值}for（變量in對(duì)象名字）{//在此執(zhí)行代碼}2.2.5內(nèi)置對(duì)象JavaScript中的對(duì)象分為3種：自定義對(duì)象、內(nèi)置對(duì)象、瀏覽器對(duì)象。內(nèi)置對(duì)象：就是指JavaScript語言自帶的一些對(duì)象，這些對(duì)象供開發(fā)者使用，并提供了一些常用的或是最基本而必要的功能（屬性和方法）。優(yōu)點(diǎn)：可幫助我們快速開發(fā)。1.概述2.2.5內(nèi)置對(duì)象2.Math對(duì)象常用方法功能Math.abs(x)返回一個(gè)數(shù)的絕對(duì)值。Math.ceil(x)向上取整，返回大于等于給定數(shù)字的最小整數(shù)。Math.floor(x)向下取整，返回小于等于給定數(shù)字的最大整數(shù)。Math.round(x)四舍五入，返回最接近給定數(shù)字的整數(shù)。Math.PI圓周率π的近似值，約為3.141592653589793。Math.max(x1,x2,...xn)返回一組數(shù)中的最大值。Math.pow(x,y)返回x的y次冪。Math.random()返回一個(gè)介于0（包含）和1（不包含）之間的隨機(jī)浮點(diǎn)數(shù)。Math.log(x)返回一個(gè)數(shù)的自然對(duì)數(shù)（以e為底）。2.2.5內(nèi)置對(duì)象3.Date對(duì)象方法名說明代碼getFullYear():獲取年份（4位）dObj.getFullYear()getMonth():獲取月份（0表示一月，11表示十二月）dObj.getMonth()getDate():獲取日期（1-31）。dObj.getDate()getDay():獲取星期幾（0表示星期日，6表示星期六）dObj.getDay()getHours():獲取小時(shí)（0-23）dObj.getHours()getMinutes():獲取分鐘（0-59）dObj.getMinutes()getSeconds():獲取秒數(shù)（0-59）dObj.getseconds()getMilliseconds():獲取毫秒數(shù)（0-999）dObj.getMilliseconds()2.2.5內(nèi)置對(duì)象4.String對(duì)象方法作用length獲取字符串的長度charAt(index)獲取index位置的字符，位置從0開始計(jì)算indexOf(searchValue)獲取searchValue在字符串中首次出現(xiàn)的位置lastindexOf(searchValue)獲取searchValue在字符串中最后出現(xiàn)的位置substring(startl,end)截取從start位置到end位置之間的一個(gè)子字符串substr(start,length）截取從start位置開始到length長度的子字符串toLowerCase()獲取字符串的小寫形式toUpperCase()獲取字符串的大寫形式split(separatorl,limit)使用separator分隔符將字符串分隔成數(shù)組，limit用于限制數(shù)量replace(str1,str2)使用str2替換字符串中的str1，返回替換結(jié)果2.2.5內(nèi)置對(duì)象5.Number對(duì)象方法作用MAXVALUE在JavaScnipt中所能表示的最大數(shù)值(靜態(tài)成員)MINVALUE在JavaScript中所能表示的最小正值(靜態(tài)成員)toFixed(digits)使用定點(diǎn)表示法來格式化一個(gè)數(shù)值Number對(duì)象用于處理整數(shù)、浮點(diǎn)數(shù)等數(shù)值，常用的屬性和方法如下所示。動(dòng)手實(shí)踐：日歷的制作實(shí)現(xiàn)思路利用prompt()函數(shù)接收用戶設(shè)置的年份。編寫calendar()函數(shù)，根據(jù)指定的年份生成年歷。設(shè)計(jì)并輸出日歷的顯示樣式。獲取指定年份1月1日的星期值，獲取每個(gè)月共有多少天。循環(huán)遍歷每個(gè)月中的日期。將日期顯示到對(duì)應(yīng)的星期下面本章小結(jié)本節(jié)課講述了JavaScript的數(shù)組和對(duì)象數(shù)據(jù)結(jié)構(gòu)，數(shù)組的元素類型及常見操作、對(duì)象的基本概念、屬性和方法等，通過本節(jié)課，學(xué)習(xí)者能夠使用數(shù)組的常見操作解決實(shí)際問題；能夠創(chuàng)建自定義對(duì)象，并使用對(duì)象訪問語句進(jìn)行操作。主講人：盧秋錦Web前端技術(shù)

文檔對(duì)象模型與瀏覽器對(duì)象模型目錄3.1DOM文檔對(duì)象模型?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)Window對(duì)象3.2?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)

3.1DOM文檔對(duì)象模型3.1.1什么是DOM？DOM全稱DocumentObjectModel文檔對(duì)象模型JavaScript中通過DOM來對(duì)HTML文檔進(jìn)行操作，只要理解了DOM就可以操作WEB頁面。文檔：文檔表示整個(gè)的HTML網(wǎng)頁文檔 對(duì)象：對(duì)象表示將網(wǎng)頁中的每一個(gè)部分都轉(zhuǎn)換為了一個(gè)對(duì)象模型：使用模型來表示對(duì)象之間的關(guān)系，這樣方便我們獲取對(duì)象3.1.2什么是DOMHTMLDOMHTML指的是DOM中為操作HTML文檔提供的屬性和方法。3.1.3HTML元素操作元素的獲取方法說明document.getElementById()返回對(duì)擁有指定id的第一個(gè)對(duì)象的引用document.getElementByName()返回帶有指定名稱的對(duì)象集合document.getElementByTagName()返回帶有指定標(biāo)簽名的對(duì)象集合document.getElementByClassName()返回帶有指定類名的對(duì)象集合document對(duì)象提供了一些用于查找元素的方法，利用這些方法可以根據(jù)元素的id、name、和class屬性以及標(biāo)簽名稱的方式獲取操作的元素。3.1.3HTML元素操作2.元素的內(nèi)容JavaScript中，若要對(duì)獲取的元素內(nèi)容進(jìn)行操作，則可以利用DOM提供的屬性和方法實(shí)現(xiàn)。分類名稱說明屬性innerHTML設(shè)置或返回元素開始和結(jié)束標(biāo)簽之間的HTMLinnerText設(shè)置或返回元素中去除文本內(nèi)容textContent設(shè)置或返回指定節(jié)點(diǎn)的文本內(nèi)容方法document.write()向文檔寫入指定的內(nèi)容document.writeIn()向文檔寫入指定的內(nèi)容后并換行3.1.3HTML元素操作3.元素屬性在DOM中，為了方便JavaScript獲取、修改和遍歷指定的HTML元素的相關(guān)屬性，提供了操作的屬性和方法。分類名稱描述屬性attribute返回一個(gè)元素的屬性集合方法setAttribute(name,value)設(shè)置或者改變指定屬性的值getAttribute(name)返回指定元素的屬性值removeAttribute(name)從元素中刪除指定的屬性3.1.4DOM節(jié)點(diǎn)操作文檔對(duì)象模型（DOM）通過引入nodeType來表示HTML文檔中不同節(jié)點(diǎn)的類型。由于HTML文檔的復(fù)雜性，每個(gè)節(jié)點(diǎn)都被賦予一個(gè)特定的nodeType。appendChild()把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)removeChild()刪除子節(jié)點(diǎn)replaceChild()替換子節(jié)點(diǎn)insertBefore()在指定的直接點(diǎn)前面插入新的子節(jié)點(diǎn)createAttribute()創(chuàng)建屬性節(jié)點(diǎn)createElemnet()創(chuàng)建元素節(jié)點(diǎn)createTextNode()創(chuàng)建文本節(jié)點(diǎn)getAttribute()返回指定的屬性值setAttribute()把指定屬性設(shè)置或修改為指定的值3.1.5事件處理事件處理指的就是與事件關(guān)聯(lián)的JavaScript對(duì)象，當(dāng)與頁面特定部分關(guān)聯(lián)的事件發(fā)生時(shí)，事件處理器就會(huì)被調(diào)用。具體步驟：發(fā)生事件啟動(dòng)事件處理程序事件處理程序作出反應(yīng)3.1.5事件處理鼠標(biāo)事件通過鼠標(biāo)動(dòng)作觸發(fā)的事件。1.鼠標(biāo)事件類別事件說明鼠標(biāo)事件onclick鼠標(biāo)單擊時(shí)觸發(fā)的事件ondbclick鼠標(biāo)雙擊時(shí)觸發(fā)的事件onmousedown鼠標(biāo)按下時(shí)觸發(fā)的事件onmouseup鼠標(biāo)彈起時(shí)觸發(fā)的事件onmouseover鼠標(biāo)移動(dòng)到某個(gè)設(shè)置了此事件的元素上時(shí)觸發(fā)的事件onmousemove鼠標(biāo)移動(dòng)時(shí)觸發(fā)的事件onmouseout鼠標(biāo)從某個(gè)設(shè)置了此事件的元素上離開時(shí)觸發(fā)的事件3.1.5事件處理鍵盤事件是指通過鍵盤動(dòng)作觸發(fā)的事件。2.鍵盤事件類別事件說明鍵盤事件onkeydown鍵盤上的某個(gè)按鍵被按下時(shí)觸發(fā)的事件onkeyup鍵盤上的某個(gè)按鍵被按下后彈起時(shí)觸發(fā)的事件onketpress當(dāng)輸入有效的字符按鍵時(shí)觸發(fā)的事件3.1.5事件處理鼠標(biāo)事件通過鼠標(biāo)動(dòng)作觸發(fā)的事件。3.表單事件類別事件說明表單事件onfocus當(dāng)某個(gè)元素獲得焦點(diǎn)時(shí)觸發(fā)的事件onblur當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)的事件onchange當(dāng)前元素失去焦點(diǎn)并且元素內(nèi)容發(fā)生改變時(shí)觸發(fā)的事件onreset當(dāng)表單被重置時(shí)觸發(fā)的事件onsubmit當(dāng)表單被提交時(shí)觸發(fā)的事件動(dòng)手實(shí)踐：動(dòng)態(tài)添加課程實(shí)現(xiàn)步驟：創(chuàng)建響應(yīng)click事件的按鈕；將onClick設(shè)置為"addCourseName()"；書寫響應(yīng)onclick的addCourseName()函數(shù)。

3.2Window對(duì)象window對(duì)象在客戶端JavaScript中扮演著重要的角色，它是客戶端程序的全局（默認(rèn)）對(duì)象，它還是客戶端對(duì)象層次的根節(jié)點(diǎn)，也是JS中最大的對(duì)象，它描述的是一個(gè)瀏覽器窗口，window對(duì)象表示瀏覽器中打開的窗口。1.基本概念3.2.1Window對(duì)象2.常用屬性和方法3.2.1Window對(duì)象分類名稱說明屬性closed返回一個(gè)布爾值，該值聲明了窗口是否已經(jīng)關(guān)閉name設(shè)置或返回存放窗口名稱的一個(gè)字符串opener返回對(duì)創(chuàng)建該窗口的window對(duì)象的引用parent返回當(dāng)前窗口的父窗口self對(duì)當(dāng)前窗口的引用，等價(jià)于window屬性top返回最頂層的父窗口2.常用屬性和方法3.2.1Window對(duì)象分類名稱說明方法alert()顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框confirm()顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框prompt()顯示可以提示用戶輸入的對(duì)話框open()打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口close()關(guān)閉瀏覽器窗口focus()把鍵盤焦點(diǎn)給予一個(gè)窗口print()打印當(dāng)前窗口的內(nèi)容scrollBy()按照指定的像素值來滾動(dòng)內(nèi)容scrollTo()把內(nèi)容滾動(dòng)到指定的坐標(biāo)3.窗口的操作3.2.1Window對(duì)象實(shí)現(xiàn)彈出窗口就需要使用window對(duì)象的open方法。open()方法用于打開一個(gè)新的瀏覽器窗口，或者查找一個(gè)已命名的窗口。3.窗口的操作3.2.1Window對(duì)象open（URL,name,space,replace）URL：指定新窗口要打開網(wǎng)頁的URL地址；name：指定被打開新窗口的名稱；space：用于設(shè)置瀏覽器窗口的特征（如大小、位置、滾動(dòng)條等；replace：true表示替換瀏覽器歷史中的當(dāng)前條目，false（默認(rèn)值）表示在瀏覽器歷史中創(chuàng)建新的條目。4.定時(shí)器3.2.1Window對(duì)象JavaScript中可通過window對(duì)象提供的方法實(shí)現(xiàn)在指定時(shí)間后執(zhí)行特定的操作，也可以讓程序代碼每隔一段時(shí)間執(zhí)行一次，實(shí)現(xiàn)間歇操作。方法說明setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或執(zhí)行一段代碼clearTimeout()清除或取消由setTimeout()方法設(shè)置的定時(shí)器setInterval()按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或執(zhí)行一段代碼clearInterval()清除或取消由setInterval()方法設(shè)置的定時(shí)器3.2.2location對(duì)象BOM中l(wèi)ocation對(duì)象提供的方法，可以更改當(dāng)前用戶在瀏覽器中訪問的URL，實(shí)現(xiàn)新文檔的載入、重載以及替換功能。方法與屬性說明href返回當(dāng)前頁面的URLpathname()返回當(dāng)前頁面的路徑和文件名port()返回web主機(jī)的端口（80或443）protocol()返回所使用的web協(xié)議（http:或https:）assign()載入一個(gè)新的文檔reload()重新載入當(dāng)前文檔replace用新的文檔替換當(dāng)前文檔3.2.3history對(duì)象BOM提供的history對(duì)象，保存著用戶上網(wǎng)的歷史記錄，從窗口被打開的那一刻算起。分類名稱說明屬性length返回歷史列表中的網(wǎng)址數(shù)方法back加載history列表中的前一個(gè)URLforward加載history列表中的下一個(gè)URLgo加載history列表中的某個(gè)具體頁面3.2.4navigator對(duì)象Navigator提供了有關(guān)瀏覽器的信息，但每個(gè)瀏覽器中的navigator對(duì)象中都有一套自己的屬性。下面列舉了主流瀏覽器中的一些方法和屬性。

名稱說明屬性AppCodeName返回瀏覽器的代碼名AppName返回瀏覽器的名稱AppVersion返回瀏覽器的平臺(tái)和版本信息cookieEnabled返回指明瀏覽器中是否啟用cookie的布爾值platform返回返回用戶操作系統(tǒng)的信息userAgent返回由客戶機(jī)發(fā)送服務(wù)器的user-agent頭部的值方法javaEnabled()指定是否在瀏覽器中啟用JavataintEnabled()規(guī)定瀏覽器是否啟用數(shù)據(jù)污點(diǎn)(datatainting)3.2.5screen對(duì)象每個(gè)Window對(duì)象的screen屬性都引用一個(gè)Screen對(duì)象。Screen對(duì)象中存放著有關(guān)顯示瀏覽器屏幕的信息。屬性描述availHeight返回顯示器屏幕的高度(除Windows任務(wù)欄之外)。availWidth返回顯示器屏幕的寬度(除Windows任務(wù)欄之外)。bufferDepth設(shè)置或返回調(diào)色板的比特深度。colorDepth返回目標(biāo)設(shè)備或緩沖器上的調(diào)色板的比特深度。deviceXDPI返回顯示器屏幕的每英寸水平點(diǎn)數(shù)。deviceYDPI返回顯示器屏幕的每英寸垂直點(diǎn)數(shù)。fontSmoothingEnabled返回用戶是否在顯示控制面板中啟用了字體平滑。動(dòng)手實(shí)踐：漂浮效果的實(shí)現(xiàn)實(shí)現(xiàn)步驟：使用document.getElementById獲取廣告容器的引用；定義變量x和y來追蹤廣告的當(dāng)前位置；定義變量speed來設(shè)置廣告的移動(dòng)速度；編寫moveAd

函數(shù)，處理廣告位置的更新和邊界檢查；使用requestAnimationFrame

實(shí)現(xiàn)連續(xù)的動(dòng)畫效果。本章小結(jié)本章主要介紹了文檔對(duì)象模型（DOM）以及瀏覽器對(duì)象模型（BOM）的基本概念和常見操作，常用事件的調(diào)用和事件處理程序的編寫，計(jì)時(shí)器的創(chuàng)建、啟動(dòng)和停止方法，以及計(jì)時(shí)器的應(yīng)用場(chǎng)景等。主講人：盧秋錦Web前端技術(shù)

jQuery目錄jQuery選擇器4.24.1jQuery基礎(chǔ)jQuery動(dòng)畫效果4.3?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)jQuery事件機(jī)制4.4?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)

4.1jQuery基礎(chǔ)4.1.1

什么是jQuery？jQuery是一款快速、輕巧而功能豐富的JavaScript庫。特點(diǎn)和優(yōu)勢(shì)：簡化的DOM操作事件處理動(dòng)畫和效果Ajax支持跨瀏覽器兼容性插件開發(fā)簡潔的語法4.1.2

網(wǎng)頁中如何添加jQuery有兩個(gè)版本的jQuery可供下載：Productionversion-用于實(shí)際的網(wǎng)站中，已被精簡和壓縮。Developmentversion-用于測(cè)試和開發(fā)（未壓縮，是可讀的代碼）在HTML文檔中使用<script>標(biāo)簽引入jQuery文件。本地文件引入<!--下載的jQuery文件應(yīng)該在相應(yīng)的路徑下--><scriptsrc="path/to/jquery.min.js"></script>4.1.2

網(wǎng)頁中如何添加jQuery在HTML文件的<head>部分添加一個(gè)指向jQuery庫的<script>標(biāo)簽，通過CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引用它。示例：

百度引用的方法。2.通過CDN引入動(dòng)手實(shí)踐：我的第一個(gè)jQuery程序創(chuàng)建HTML頁面，在HTML文檔中使用<script>標(biāo)簽引入jQuery文件。1.創(chuàng)建HTML頁面<scriptsrc="jquery-1.12.4.js"></script>動(dòng)手實(shí)踐：我的第一個(gè)jQuery程序2.書寫jQuery代碼<script>$(document).ready(function(){ alert("歡迎來到j(luò)Query課堂"); });</script>

4.2jQuery選擇器4.2.1jQuery語法在jQuery中，基礎(chǔ)語法始于定義$，表示jQu

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論