網(wǎng)頁設(shè)計與Web前端開發(fā)案例教程第6章使用JavaScript腳本CONTENT目錄初識JavaScript01JavaScript基本元素02操作屬性與樣式03條件語句04循環(huán)語句05JavaScript函數(shù)06對象操作語句07JavaScript常用內(nèi)置對象08DOM對象09BOM對象10localStorage對象及操作1101初識JavaScriptJS簡介：發(fā)展歷程、組成、安全性發(fā)展歷程LiveScript→JavaScript→ECMAScript標準組成要素ECMAScript（核心語法）+DOM（文檔對象）+BOM（瀏覽器對象）安全性特點禁止訪問本地硬盤不允許對網(wǎng)絡(luò)中的文本修改或刪除使用方式：標簽嵌入、外部引用、事件屬性標簽嵌入在HTML文檔中，可直接通過標簽嵌入JavaScript代碼，將腳本放置于標簽內(nèi)，能實現(xiàn)頁面交互邏輯，隨頁面加載而執(zhí)行，方便快捷地添加簡單功能。如：<script>for(i=0;i<3;i++)document.write("Hello!");</script>外部引用把JavaScript代碼寫在獨立文件中，通過在HTML中引用。這種方式可實現(xiàn)代碼復用，多個頁面共享同一腳本，便于維護和管理，提升開發(fā)效率。如：<scriptsrc="js/script.js"></script>事件屬性HTML元素可通過事件屬性直接綁定JavaScript代碼。

如：<ahref="javascript:alert(newDate());">單擊顯示當前時間</a>或<inputtype="button"value="單擊顯示當前時間"onclick="alert(newDate());"/>JavaScript代碼規(guī)范嚴格區(qū)分大小寫字符串區(qū)分大小寫變量名、函數(shù)名、關(guān)鍵字大小寫敏感英文輸入法所有內(nèi)置API和符號都是英文輸入法，也就是半角符號。書寫格式忽略語句間空白，即語句間的空格、空行、縮進等。使用這些格式的目的：使程序更加清晰，可讀性更高例如，可以使用Tab鍵縮進，不同的語句應當換行。分號的使用基礎(chǔ)規(guī)范：完整語句結(jié)尾需加分號（推薦顯式添加）換行符可能隱式插入分號循環(huán)結(jié)構(gòu)或者選擇結(jié)構(gòu)的條件語句后面不需要用分號注釋語句單行的注釋以//開始，其格式為：//注釋內(nèi)容多行注釋以/*開頭，以*/結(jié)尾，其格式為：/*注釋內(nèi)容注釋內(nèi)容*/彈窗與調(diào)試方法????用途??及示例返回值示例效果alert()信息通知alert("你好，我是一個警告框！");undefinedconsole.log()調(diào)試輸出a=5;b=6;c=a+b;console.log(c);-confirm()二元選擇confirm("按下按鈕");true/falseprompt()獲取用戶輸入prompt("請輸入你的名字","HarryPotter");string/null02JavaScript基本元素數(shù)據(jù)類型類型示例特點number（數(shù)值）3.14

/

NaN包含特殊值string（字符串）"Hello"單/雙引號包裹boolean（布爾）true

/

false條件判斷基礎(chǔ)null（空）leta=null;空對象指針undefined（未定義）letb;未初始化變量object（對象）{name:"Tom"}鍵值對集合symbol（符號）-ES6引入,避免屬性名沖突JavaScript常量——基本概念定義不可修改的固定值（字面量）與變量核心區(qū)別：初始化后不可變感ES5vsES6??ES5????ES6??無命名常量const關(guān)鍵字聲明命名常量直接使用字面量（如0,

"hi"）語法：constPI=3.14;JavaScript常量——六大核心規(guī)則不可重賦值PI=3.15;→靜默失敗塊級作用域??只在{}內(nèi)有效（同let）??禁止重復聲明constX=1;constX=2;→報錯聲明即賦值??constX;→語法錯誤無變量提升先聲明后使用作用域隔離??內(nèi)外同名常量互不影響JavaScript常量類型常量類型????子類/形式????描述????表示方式示例????特殊說明????數(shù)值型常量????整型??整數(shù)，支持十進制/八進制/十六進制42（十進制）0o52（八進制52，十進制42）0x2A（十六進制2A，十進制42）ES5中以0開頭的八進制寫法已過時（如020）??實型/浮點型??小數(shù)，支持標準寫法或科學計數(shù)法3.14（標準）6.02e23（科學計數(shù)法，6.02×1023）??布爾型常量??-邏輯值，表示真/假true（真）false（假）??嚴禁??用1/0替代（與C語言不同）??字符串型常量????常規(guī)字符串??引號包裹的文本"Hello'World'單/雙引號等效??特殊字符常量??反斜杠轉(zhuǎn)義的控制字符（需在字符串中使用）詳見下頁轉(zhuǎn)義字符表??空值常量??-表示空或無定義null（主動賦空值）undefined（未定義默認值）區(qū)別：null是類型為object的值JavaScript特殊字符常量轉(zhuǎn)義字符????名稱????功能說明????使用示例????輸出結(jié)果??\b退格(Backspace)刪除前一個字符"a\bc""c"（終端環(huán)境）\f換頁(FormFeed)打印機分頁符"Page1\fPage2"打印時分頁\n換行(NewLine)光標移到下一行行首"Line1\nLine2"兩行文本\r回車(CarriageReturn)光標回行首"Hello\rWorld""World"（覆蓋效果）\t水平制表符(Tab)插入Tab空白"Name:\tTom""Name:Tom"（4空格）\'單引號在單引號字符串中顯示單引號'It\'sOK'"It'sOK"\"雙引號在雙引號字符串中顯示雙引號"Hesaid:\"Hi\""'Hesaid:"Hi"'\\反斜杠顯示字面反斜杠"C:\\Windows""C:\Windows"運算符與表達式概述表達式定義變量、常量與運算符的組合（算術(shù)/字符串/布爾表達式）運算符作用??關(guān)聯(lián)值進行計算或比較操作數(shù)分類??類型????操作數(shù)數(shù)量????示例??雙目運算符2個a+b,

"Hi"+"!"單目運算符1個-5,

i++算術(shù)運算符運算符????描述????示例????結(jié)果??(y=5)+加x=y+27-減x=y-23*乘x=y*210/除x=y/22.5%取模x=y%21++前置遞增x=++y6--前置遞減x=--y4賦值運算符運算符????示例????等價形式????結(jié)果??(x=10,y=5)=x=y-x=5+=x+=yx=x+y15-=x-=yx=x-y5*=x*=yx=x*y50/=x/=yx=x/y2%=x%=yx=x%y0比較運算符運算符????描述????示例??(x=5)??結(jié)果??==值相等x=="5"true===值與類型相等x==="5"false!=不相等x!=8true!==值或類型不等x!=="5"true>

大于x>3true<

小于x<8true>=大于等于x>=5true<=小于等于x<=5true邏輯運算符??運算符????描述????示例??(x=6,y=3)??結(jié)果??&&邏輯與(x<10&&y>1)true||邏輯或(x==5||y==5)false!邏輯非!(x==y)true條件運算符三元操作條件?值1:值2執(zhí)行邏輯??條件為真→返回值1條件為假→返回值2??應用示例greeting=(visitor=="PRES")?"DearPresident":"Dear";如果變量visitor中的值是"PRES"，則向變量greeting賦值"DearPresident"，否則賦值"Dear"位運算符運算符????描述????示例????結(jié)果??&按位與1&31|按位或1|33^按位異或1^32~按位取反~0-1<<

左移8<<232>>

有符號右移-8>>2-2>>>

無符號右移8>>>22字符串運算符運算符????功能????示例????結(jié)果??+字符串連接"Hello"+"World""HelloWorld"+=連接并賦值lets="Hi";s+="!"s="Hi!"??隱式轉(zhuǎn)換??與其他類型連接"Age:"+25"Age:25"數(shù)據(jù)類型轉(zhuǎn)換兩種轉(zhuǎn)換類型???顯式轉(zhuǎn)換??：主動調(diào)用函數(shù)（Number()/String()等）???隱式轉(zhuǎn)換??：通過運算符自動觸發(fā)（+/-/*等）核心差異對比??類型控制方式典型場景顯式轉(zhuǎn)換程序員主動表單數(shù)據(jù)轉(zhuǎn)數(shù)值隱式轉(zhuǎn)換JS引擎觸發(fā)字符串拼接、運算Number()強制轉(zhuǎn)換規(guī)則輸入類型轉(zhuǎn)換結(jié)果示例數(shù)值原來的值Number(123)→123字符串如果可以解析為數(shù)值，則轉(zhuǎn)換成相應的數(shù)值；如果不可以被解析為數(shù)值，返回NaNNumber("123")→123Number("12abc")→NaN空字符串轉(zhuǎn)換為0Number("")→0布爾值true返回1；false返回0Number(true)→1Number(false)→0undefined返回NaNNumber(undefined)→NaNnull返回0Number(null)→0對象返回NaN，除非包含單個數(shù)據(jù)的數(shù)值數(shù)組只有一個數(shù)組項為數(shù)值的時候返回的是本身值，其它的就是NaNparseInt()&parseFloat()parseInt()核心行為從首位數(shù)字解析→遇非數(shù)字停止（parseInt("12.3")→12）基數(shù)參數(shù)：parseInt("1f",16)→31(16進制解析)parseFloat()區(qū)別??解析首個小數(shù)點→parseFloat("9.6.1")→9.6??對比表函數(shù)處理小數(shù)進制支持示例結(jié)果parseInt()?截斷?(基數(shù))parseInt("0xA")→10parseFloat()?保留首個?parseFloat("0xA")→0String()&Boolean()String(值)一切類型轉(zhuǎn)字符串（true→"true"）Boolean()轉(zhuǎn)換邏輯??false的值：0、""、null、undefined、NaN

true：其他值（包括"0"、[]、{}）??示例console.log(Boolean(1),String(1))→true"1"隱式轉(zhuǎn)換（場景化解析）運算符的陷阱字符串與非字符串→拼接轉(zhuǎn)換（1+"1"→"11"）非字符串+空字符串→強制轉(zhuǎn)字符串（true+""→"true"）其他算術(shù)運算符??自動轉(zhuǎn)數(shù)值（如布爾值在做算數(shù)運算的時候，true=1；false=0）??取反運算符轉(zhuǎn)布爾值（!"5"→false）運算符行為示例-,*,/,%字符串轉(zhuǎn)數(shù)值"15"*1→15(number)++

,--??強制轉(zhuǎn)數(shù)字??lety="20"++→20??練習分析"10"-5+"2"的結(jié)果（"52"）03操作屬性與樣式屬性操作：屬性分類體系四象限屬性模型┌───────────────────┬──────────────────────┐│HTML標簽屬性│JS對象屬性│├───────────────────┼─────────────────────┤│常規(guī)標簽屬性│JS對象自身屬性││(id,class,title)│(console.dir可查看)│├───────────────────┼──────────────────────┤│自定義標簽屬性│JS對象自定義屬性││(setAttribute)│(點運算符動態(tài)添加)│└───────────────────┴──────────────────────┘??關(guān)鍵特征對比存儲位置：HTML標簽屬性→DOM結(jié)構(gòu)；JS對象屬性→內(nèi)存可見性：標簽屬性在Elements面板可見；JS屬性在Console可見HTML標簽屬性操作——常規(guī)標簽屬性?操作方式??點運算符（.）特殊規(guī)則????示例演示結(jié)果：<divclass="textactive"title="新標題">

HTML標簽屬性操作——自定義標簽屬性?核心API??setAttribute(name,value)//設(shè)置屬性getAttribute(name)//獲取屬性特點????示例結(jié)果：<div...data-index="1">值自動轉(zhuǎn)為字符串類型會直接修改DOM結(jié)構(gòu)JS對象屬性操作——JS對象自身屬性?查看方式??console.dir()特征標識????操作方式??方法→帶括號click()??屬性→無括號id:"wrap"JS對象屬性操作——JS對象自定義屬性?創(chuàng)建方式??點運算符（.）關(guān)鍵特征????示例僅存在于JS內(nèi)存中不修改DOM結(jié)構(gòu)支持復雜數(shù)據(jù)類型樣式操作概覽三種操作路徑??操作范圍外部樣式表→JS無法直接操作內(nèi)部/內(nèi)聯(lián)樣式→JS可直接修改┌──────────────┬──────────────┬──────────────┐│內(nèi)部樣式│內(nèi)聯(lián)樣式│類名操作││(style標簽)│(style屬性)│(className)│├──────────────┼──────────────┼──────────────┤│操作innerHTML│點語法/cssText│設(shè)置/追加類名││?不推薦│?精細控制│??首選方案│└──────────────┴──────────────┴──────────────┘操作內(nèi)部樣式?實現(xiàn)方式??關(guān)鍵注意事項????示例????前提??：頁面必須已存在<style>標簽????風險??：覆蓋已有樣式（建議用+=追加）????缺點??：難以維護性能低下不推薦實際使用操作內(nèi)聯(lián)樣式——操作單一樣式屬性?基礎(chǔ)語法??特殊規(guī)則????示例????駝峰命名??：background-color→backgroundColor????保留字處理??：float→cssFloat元素.style.屬性="值"結(jié)果：<divstyle="width:200px;height:200px;background-color:blue;">操作內(nèi)聯(lián)樣式——操作多個樣式屬性?高效語法??優(yōu)勢????注意單次操作設(shè)置多個樣式避免重復DOM操作元素.style.cssText="屬性:屬性值;屬性:屬性值;..."會覆蓋現(xiàn)有內(nèi)聯(lián)樣式??示例通過類名操作樣式（最佳實踐）?語法??優(yōu)勢????示例復用預定義樣式樣式與邏輯解耦支持復雜樣式規(guī)則標簽元素.calssName="類名";元素.calssName+="類名";04條件語句條件語句概述條件判斷本質(zhì)???核心語句類型if語句：單分支/雙分支/多分支switch語句：多路分支選擇┌───────────────┬──────────────────────────────┐│條件成立│條件不成立│├───────────────┼──────────────────────────────┤│true值│false值││?非0數(shù)值│?0││?非空字符串│?“”(空字符串)││?true/真表達式│?false/假表達式││?對象/函數(shù)│?undefined/null/NaN│└───────────────┴──────────────────────────────┘單分支選擇?語法????時間案例if(條件){//條件成立執(zhí)行}雙分支選擇?語法????時間案例if(條件){//成立執(zhí)行}else{//不成立執(zhí)行}多分支選擇?語法????時間案例if(條件1){//...}elseif(條件2){//...}else{//...}switch語句?語法????關(guān)鍵要素switch(表達式){case值1://代碼塊1break;case值2://代碼塊2break;default://默認代碼塊}break：防止穿透執(zhí)行（必須！）default：默認處理（可選）??星期案例05循環(huán)語句循環(huán)類型語句概述循環(huán)的核心作用重復執(zhí)行代碼塊避免重復編寫相似代碼循環(huán)三要素????初始化??：設(shè)置循環(huán)起點??條件??：決定是否繼續(xù)循環(huán)??迭代??：更新循環(huán)變量??循環(huán)類型??for：明確循環(huán)次數(shù)while：條件滿足時循環(huán)dowhile：至少執(zhí)行一次for循環(huán)語句基礎(chǔ)語法for(變量=開始值;變量<=結(jié)束值;變量=變量+步長值){

需執(zhí)行的代碼}標題生成案例??for(leti=1;i<=6;i++){document.write("<h"+i+">本行是"+i+"級標題</h"+i+">");}??輸出效果???關(guān)鍵說明步長值可正可負（負步長需調(diào)整條件）適用場景：循環(huán)次數(shù)已知while循環(huán)語句基礎(chǔ)語法while(條件){

需執(zhí)行的代碼}標題生成改寫??i=1;while(i<=6){document.write("<h"+i+">本行是"+i+"級標題</h"+i+">");i++;}??注意事項????手動更新條件??：避免無限循環(huán)????適用場景??：循環(huán)次數(shù)未知（依賴復雜條件）dowhile循環(huán)語句基礎(chǔ)語法do{

需執(zhí)行的代碼}while(條件)標題生成改寫??i=0;do{i++;document.write("<h"+i+">本行是"+i+"級標題</h"+i+">");}while(i<6)??核心特點??先執(zhí)行，后判斷??→保證至少運行一次適用場景：需優(yōu)先執(zhí)行循環(huán)體再檢查條件）流程控制：break作用立即終止整個循環(huán)案例??for(leti=1;i<=6;i++){if(i===4)break;//i=4時終止document.write("<h"+i+">本行是"+i+"級標題</h"+i+">");}??輸出效果?流程控制：continue作用跳過本次循環(huán)剩余代碼，進入下一次迭代案例??for(leti=1;i<=6;i++){if(i%2===0)continue;//跳過偶數(shù)document.write("<h"+i+">本行是"+i+"級標題</h"+i+">");}??輸出效果?06JavaScript函數(shù)函數(shù)定義：函數(shù)聲明/函數(shù)表達式雙類型函數(shù)模型核心區(qū)別??提升機制（聲明提升vs表達式不提升）定義位置（全局作用域vs賦值位置）┌──────────────────────┬──────────────────────┐│函數(shù)聲明│函數(shù)表達式││(函數(shù)定義)│(匿名/變量賦值/IIFE)│├──────────────────────┼──────────────────────┤│functionfn(){...}│letfn=function..││提升機制│無提升││命名函數(shù)│匿名/命名│└──────────────────────┴──────────────────────┘函數(shù)聲明定義與語法function函數(shù)名(){//函數(shù)體}位置????示例通常位于<head>部分命名規(guī)范??描述性單詞/短語（如calculateSum）函數(shù)調(diào)用直接調(diào)用函數(shù)名()事件綁定??對象.事件=函數(shù)名特性??函數(shù)提升（可在聲明前調(diào)用）函數(shù)表達式定義形式//事件綁定形式document.onclick=function(){//函數(shù)體};關(guān)鍵特征???匿名函數(shù)（可命名但通常匿名）無提升（必須定義后調(diào)用）調(diào)用方式??//變量賦值形式constmyFunction=function(){//函數(shù)體};//變量形式調(diào)用constsayHi=function(){console.log("Hi!");};sayHi();//必須在定義后調(diào)用//自執(zhí)行形式(function(){console.log("立即執(zhí)行!");})();IIFE（立即執(zhí)行函數(shù)）兩種寫法應用場景??創(chuàng)建獨立作用域（避免變量污染）初始化代碼封裝函數(shù)參數(shù)參數(shù)的雙向角色核心概念??形參：函數(shù)定義時的接口實參：函數(shù)調(diào)用時的實際值不定參：動態(tài)參數(shù)處理機制┌───────────────┬─────────────────┐│定義階段│調(diào)用階段│├───────────────┼─────────────────┤│形參（形式參數(shù)）│實參（實際參數(shù)）││?占位符│?具體輸入值││?變量聲明│?常量/變量/表達式│└───────────────┴─────────────────┘形參定義與語法//多個形參間用逗號隔開，以此類推function函數(shù)名(形參名1,形參名2){函數(shù)體}關(guān)鍵特性????作用域隔離作用域限制在函數(shù)內(nèi)部命名與外部變量互不沖突實參調(diào)用方式參數(shù)匹配??場景??結(jié)果實參>形參多出參數(shù)可通過arguments獲取實參<形參缺少參數(shù)為undefined類型不匹配JS自動轉(zhuǎn)換不定參（arguments對象）?動態(tài)參數(shù)處理arguments特性類數(shù)組對象（非真正數(shù)組）包含所有傳入?yún)?shù)無視形參個數(shù)限制返回語句?實戰(zhàn)示例核心作用??返回值傳遞└─將函數(shù)結(jié)果輸出到外部??終止執(zhí)行└─立即停止函數(shù)運行（后續(xù)代碼不執(zhí)行）基礎(chǔ)語法function函數(shù)名(){//...return值;//顯式返回值

return;//終止函數(shù)（返回undefined）}

返回值類型任意JS數(shù)據(jù)類型（值/對象/函數(shù)等）

未顯式返回→undefined作用域基礎(chǔ)概念12定義作用域：變量的可訪問性范圍（代碼中特定部分）ES5vsES6var→全局/局部作用域let/const→塊作用域全局作用域vs局部作用域???全局作用域范圍：所有<script>標簽內(nèi)變量：函數(shù)外用var聲明（全局變量）特性：隨處可訪問/修改局部作用域（函數(shù)作用域）范圍：函數(shù)體內(nèi)部變量：函數(shù)內(nèi)用var聲明（局部變量）特性：僅當前函數(shù)及嵌套作用域可訪問關(guān)鍵規(guī)則作用域鏈：當前作用域→上層作用域→全局（未找到則報錯）避免意外全局變量：未用var聲明的變量變?yōu)槿肿兞浚ú煌扑]！）變量提升（Hoisting）?????機制var聲明的變量提升至??當前作用域頂部??（賦值不提升）初始值：undefined示例對比?例6-33??：未聲明直接賦值→意外改變?nèi)肿兞??例6-34??：變量聲明在尾部→提升至頂部（不影響賦值）??例6-35??：聲明未賦值→值為undefined（全局變量不受影響）??控制臺輸出對比例6-34輸出效果例6-35輸出效果ES6塊作用域????定義范圍：{}包含的區(qū)域（如if/for/switch）??let/const特性示例6-36圖6-26(a)正常輸出(b)報錯場景關(guān)鍵字作用域初始化要求是否可修改var無塊作用域否是let塊作用域否是const塊作用域??必須????否??跨塊訪問測試：var可訪問，let/const報錯常量修改測試：const賦值后不可修改（報錯）07對象操作語句對象操作概述??JavaScript對象本質(zhì)大多數(shù)事物都是對象（字符串/數(shù)組/API/自定義對象）作用：數(shù)據(jù)封裝與模塊化開發(fā)操作目標簡化對象訪問實現(xiàn)對象遍歷與屬性管理with語句：簡化對象引用?????問題背景重復書寫對象名（如Math.PI/Math.cos）導致代碼冗余語法結(jié)構(gòu)with(對象名){//直接使用屬性/方法}示例對比??適用場景集中操作同一對象的多個屬性/方法for...in循環(huán)：遍歷對象屬性????????核心功能遍歷對象所有可枚舉屬性無需提前知道屬性數(shù)量語法結(jié)構(gòu)for(let變量in對象){//操作屬性}示例演示??輸出結(jié)果letstudent={name:"Tom",gender:"male",age:18};for(letkeyinstudent){document.write("student."+key+"="+student[key]+"<br/>");}this關(guān)鍵字????????核心概念指向??當前執(zhí)行上下文??的對象引用綁定規(guī)則關(guān)鍵示例場景this指向示例全局環(huán)境window對象例6-38對象方法調(diào)用該方法的對象例6-39：o.f()→o事件處理程序觸發(fā)事件的元素-in關(guān)鍵字????????功能檢查對象是否包含指定屬性語法示例"屬性名"in對象名in關(guān)鍵字????????功能檢查對象是否包含指定屬性語法示例"屬性名"in對象名delete操作符?????????功能刪除對象屬性語法示例delete對象名.屬性名;08JavaScript常用內(nèi)置對象JavaScript內(nèi)置對象概述?????????定義嵌入系統(tǒng)的共享代碼，由開發(fā)商優(yōu)化的常用操作代碼集合（無需重復編寫）。常用類型??分類與訪問方式數(shù)組對象、字符串對象、數(shù)學對象、日期對象（最核心的4類）??動態(tài)對象??：需用new創(chuàng)建實例，通過實例名.成員訪問（如數(shù)組、字符串）??靜態(tài)對象??：無需new，直接通過對象名.成員訪問（如數(shù)學對象Math）數(shù)組對象??????????格式var數(shù)組對象名=newArray(數(shù)組列表);var數(shù)組對象名=Array(數(shù)組列表);var數(shù)組對象名=[數(shù)組列表];核心屬性???常用方法length：獲取數(shù)組長度（最大索引+1）方法功能示例sort()排序（默認字典序）[3,1,2].sort()//[1,2,3]reverse()反轉(zhuǎn)數(shù)組[1,2,3].reverse()//[3,2,1]concat()合并數(shù)組[1,2].concat([3,4])//[1,2,3,4]slice(start,end)截取子數(shù)組[1,2,3].slice(0,2)//[1,2]splice(index,count,item)增刪改查[1,2].splice(1,0,'a')//[1,'a',2]案例演示用戶交互排序（圖6-30至圖6-32）輸入1升序→圖6-30效果輸入-1降序→圖6-31效果無效輸入→圖6-32提示字符串對象??????????格式字符串變量名=newString("字符串");字符串變量名=String("字符串");字符串變量名="字符串"核心屬性???基礎(chǔ)方法length：統(tǒng)計字符數(shù)（含中文）外觀與高級操作?樣式方法：.bold()、.italic()、.fontsize(size)表單驗證案例（例6-43）：用戶名校驗規(guī)則：6-18位字母開頭+數(shù)字/字母密碼校驗規(guī)則：≥6位且含字母+數(shù)字組合方法功能示例indexOf(char)查找字符首次出現(xiàn)位置"abc".indexOf("b")//1substring(start,end)截取子串"hello".substring(1,3)//"el"split(separator)分割字符串"a,b,c".split(",")//["a","b","c"]數(shù)學對象??????????常用屬性Math.PI：圓周率（≈3.14159）Math.E：自然常數(shù)（≈2.71828）核心方法???案例應用隨機背景音樂播放（圖6-34至圖6-35）通過Math.random()實現(xiàn)隨機音樂選擇聲音圖標狀態(tài)切換（靜音?播放）方法功能示例Math.random()生成[0,1)隨機數(shù)Math.random()*10//0~10隨機數(shù)Math.max(a,b,c)返回最大值Math.max(2,5,1)//5Math.ceil(3.2)向上取整//4Math.floor(3.8)向下取整//3日期對象??????????格式newDate("monthdd,yyyyhh:mm:ss");newDate("monthdd,yyyy");newDate(yyyy,mth,dd,hh,mm,ss);newDate(yyyy,mth,dd);newDate(ms);日期對象創(chuàng)建舉例實戰(zhàn)案例動態(tài)日歷顯示（圖6-36）結(jié)合getDay()、getDate()顯示星期與日期問候語根據(jù)時間動態(tài)切換（上午/下午/晚上）方法功能示例getFullYear()獲取四位年份newDate().getFullYear()setMonth(month)設(shè)置月份（0-11）date.setMonth(0)//設(shè)置為1月日期對象方法舉例日期對象中的格式轉(zhuǎn)換??????使用語法描述Date.parse(string)靜態(tài)方法，將合法的描述日期的字符串轉(zhuǎn)換為日期對象并返回Date.UTC(yyyy,mth,dd,hh,mm,ss,ms)靜態(tài)方法，將日期統(tǒng)一轉(zhuǎn)換為自GMT時間1970年1月1日起經(jīng)過的毫秒數(shù)日期實例名.toLocaleString()將Date對象轉(zhuǎn)換為字符串，以用戶計算機上設(shè)置的時間格式顯示日期和時間日期實例名.toString()將Date對象轉(zhuǎn)換為字符串，以用戶本地時區(qū)顯示日期和時間（是Date對象轉(zhuǎn)換為字符串的默認規(guī)則）日期實例名.toGMTString()將Date對象轉(zhuǎn)換為字符串，以GMT格式顯示日期和時間09DOM對象HTMLDOM簡介??????????文檔對象模型（DOM）將HTML/XML文檔解析為節(jié)點樹，允許腳本語言（如JavaScript）動態(tài)操作文檔結(jié)構(gòu)、樣式和內(nèi)容。??關(guān)鍵作用??：建立頁面內(nèi)容與程序的橋梁。樹形結(jié)構(gòu)???文檔節(jié)點（根節(jié)點）→元素節(jié)點（如<div>）→文本節(jié)點（如文字內(nèi)容）。??圖示??：DOM樹狀結(jié)構(gòu)（圖6-38）節(jié)點類型與屬性???????主要節(jié)點類型示例???節(jié)點類型nodeTypenodeNamenodeValue元素節(jié)點1標簽名null文本節(jié)點3#text實際文本內(nèi)容屬性節(jié)點2屬性名屬性值DOM節(jié)點相鄰關(guān)系與訪問??????相鄰節(jié)點的三大分類示例說明???節(jié)點類型定義關(guān)鍵訪問屬性??子節(jié)點??當前節(jié)點的直接下級節(jié)點childNodes（所有子節(jié)點）、children（僅元素子節(jié)點）??父節(jié)點??當前節(jié)點的直接上級節(jié)點parentNode（通用父節(jié)點）??兄弟節(jié)點??與當前節(jié)點同屬一個父節(jié)點的同級節(jié)點nextSibling（下一個兄弟）、previousSibling（上一個兄弟）場景??：以左邊代碼為例：parent.childNodes→包含文本節(jié)點（換行符）和<p>、<span>；parent.children→僅<p>和<span>；<p>的parentNode→#parent；<span>的previousSibling→<p>（文本節(jié)點可能干擾，需過濾）。子節(jié)點集合訪問??????核心屬性示例???<divid="box">

第一行文字

<p>第一段文字</p>

第二行文字

<p>第二段文字</p>

第三行文字</div><script>varoBox=document.getElementById("box");console.log(oBox.childNodes);console.log(oBox.children);console.log(oBox.childNodes[0]);console.log(oBox.children[0]);</script>childNodes：獲取所有子節(jié)點（含文本節(jié)點）。children：僅獲取元素節(jié)點（忽略文本節(jié)點）。輸出效果第一個子節(jié)點訪問??????核心屬性示例???<divid="box">

第一行文字

<p>第一段文字</p>

第二行文字

<p>第二段文字</p></div><script>varoBox=document.getElementById("box");console.log(oBox.firstChild);console.log(oBox.firstElementChild);</script>firstChild：第一個子節(jié)點（可為文本節(jié)點）。firstElementChild：第一個元素節(jié)點。輸出效果最后一個子節(jié)點訪問??????核心屬性示例???<divid="box">

第一行文字

<p>第一段文字</p>

第二行文字

<p>第二段文字</p></div><script>varoBox=document.getElementById("box");console.log(oBox.lastChild);console.log(oBox.lastElementChild);</script>lastChild：最后一個子節(jié)點（可為文本節(jié)點）。lastElementChild：最后一個元素節(jié)點。輸出效果父節(jié)點與定位父級????????核心屬性示例???<divid="wrap"style="position:relative"><divid="box"><pid="content">

文章內(nèi)容

</p></div></div><script>varoP=document.getElementById("content");console.log(oP.parentNode);console.log(oP.offsetParent);</script>parentNode：直接父節(jié)點（與定位無關(guān)）。offsetParent：最近有定位屬性的父節(jié)點（默認為body）。輸出效果下一個兄弟節(jié)點訪問???????核心屬性示例???<div>

第一行文字

<pid="p1">第一段文字</p>

第二行文字

<p>第二段文字</p></div><script>varoP1=document.getElementById("p1");console.log(oP1.nextSibling);console.log(oP1.nextElementSibling);</script>nextSibling：下一個兄弟節(jié)點（可為文本節(jié)點）。nextElementSibling：下一個元素節(jié)點。輸出效果上一個兄弟節(jié)點訪問???????核心屬性示例???<div>

第一行文字

<pid="p1">第一段文字</p>

第二行文字

<pid="p2">第二段文字</p></div><script>varoP2=document.getElementById("p2");console.log(oP2.previousSibling);console.log(oP2.previousElementSibling);</script>previousSibling：上一個兄弟節(jié)點（可為文本節(jié)點）。previousElementSibling：上一個元素節(jié)點。輸出效果DOM節(jié)點的操作??????節(jié)點操作四大類型?查??：定位目標節(jié)點（詳見6.1.5節(jié)內(nèi)容）；??增??：新增節(jié)點到文檔中；??刪??：從文檔中移除節(jié)點；??改??：修改現(xiàn)有節(jié)點內(nèi)容或?qū)傩栽黾庸?jié)點的前置條件?????獲取現(xiàn)有節(jié)點??（作為父容器或參考位置）：示例：varparent=document.getElementById("list");（獲取列表容器）。??創(chuàng)建新節(jié)點??（需先創(chuàng)建再插入）：元素節(jié)點：document.createElement("li")；文本節(jié)點：document.createTextNode("新項")；克隆節(jié)點：existingNode.cloneNode(true)（可選）。關(guān)鍵邏輯總結(jié)???操作流程??：查（定位）→增（創(chuàng)建/獲取→插入）→改（內(nèi)容/屬性）→刪（移除）??核心依賴??：增刪改操作均需先明確節(jié)點位置（通過“查”或“獲取”）創(chuàng)建元素和文本節(jié)點???????????創(chuàng)建元素節(jié)點方法document.createElement(nodename)功能???根據(jù)標簽名生成新元素節(jié)點示例???????創(chuàng)建文本節(jié)點方法document.createTextNode(text)功能???生成包含指定文本的文本節(jié)點示例???復制節(jié)點??????方法?node.cloneNode(deep)參數(shù)?deep=true：深度克?。ê庸?jié)點）；deep=false（默認）：淺克?。▋H當前節(jié)點）。示例???<ulclass="List"><li>Coffee</li><listyle="color:red">Tea</li></ul><script>varoList=document.querySelector("ul.List"),clnLi1=oList.cloneNode(true),clnLi2=oList.cloneNode();console.log(clnLi1);console.log(clnLi2);</script>輸出效果元素節(jié)點的操作??????元素節(jié)點三大基礎(chǔ)操作???插入節(jié)點??appendChild(newNode)：在父節(jié)點末尾追加新節(jié)點。insertBefore(newNode,existingNode)：在指定子節(jié)點前插入新節(jié)點。??刪除節(jié)點??removeChild(targetNode)：移除父節(jié)點中的指定子節(jié)點。??替換節(jié)點??replaceChild(newNode,oldNode)：用新節(jié)點替換舊節(jié)點。操作原則???必須通過父節(jié)點調(diào)用方法?插入節(jié)點——末尾追加（appendChild()）???????格式?parent.appendChild(newnode)功能?將新節(jié)點添加到父節(jié)點的子節(jié)點列表末尾。示例???<ulid="list"><li>HTML5</li><li>CSS3</li></ul><button>插入列表項"JavaScript"</button><script>letoList=document.getElementById("list"),oBtn=document.getElementsByTagName("button")[0];oBtn.onclick=function(){letnewItem=document.createElement("LI"),textnode=document.createTextNode("JavaScript");

newItem.appendChild(textnode);oList.appendChild(newItem);this.disabled=true;//使用一次后禁用該按鈕

}</script>輸出效果插入節(jié)點前插入節(jié)點后插入節(jié)點——指定位置前插入（insertBefore()）????????格式?parent.insertBefore(newNode,existingNode);功能?將新節(jié)點插入到指定子節(jié)點之前。示例???<ulid="list"><li>CSS3</li><li>JavaScript</li></ul><button>插入列表項"HTML5"</button><script>letoList=document.getElementById("list"),oBtn=document.getElementsByTagName("button")[0];oBtn.onclick=function(){letnewItem=document.createElement("LI"),textnode=document.createTextNode("HTML5");newItem.appendChild(textnode);

oList.insertBefore(newItem,oList.children[0]);this.disabled=true;//使用一次后禁用該按鈕

}</script>輸出效果插入節(jié)點前插入節(jié)點后刪除節(jié)點——removeChild()方法????????格式?parent.removeChild(targetNode);功能?移除父節(jié)點中指定的子節(jié)點。示例???<ulid="list"><li>HTML5</li><li>CSS3</li><li>ES5</li><li>JavaScript</li></ul><button>刪除列表項"ES5"</button><script>letoList=document.getElementById("list"),oBtn=document.getElementsByTagName("button")[0];oBtn.onclick=function(){

oList.removeChild(oList.children[2]);this.disabled=true;//使用一次后禁用該按鈕

}</script>輸出效果刪除節(jié)點前刪除節(jié)點后替換節(jié)點——replaceChild()方法?????????格式?parent.replaceChild(newNode,oldNode);功能?用新節(jié)點替換父節(jié)點中的舊節(jié)點。示例???<ulid="list"><li>HTML5</li><li>CSS3</li><li>JavaScript</li></ul><button>替換第一個列表項</button><script>letoItem=document.getElementById("list").children[0],oBtn=document.getElementsByTagName("button")[0];oBtn.onclick=function(){lettextnode=document.createTextNode("H5");

oItem.replaceChild(textnode,oItem.firstChild);this.disabled=true;//使用一次后禁用該按鈕

}</script>輸出效果替換節(jié)點前替換節(jié)點后屬性節(jié)點操作——獲取屬性節(jié)點??????????方法?element.getAttributeNode(attributename)示例???<divid="box"title="top"></div><script>vart=document.getElementById("box");varidAttr=t.getAttributeNode("title");console.log(idAttr);console.log(idAttr.nodeType);console.log(idAttr.nodeName);console.log(idAttr.nodeValue);</script>輸出效果屬性節(jié)點操作——創(chuàng)建與添加屬性??????????創(chuàng)建屬性?varnewAttr=document.createAttribute("class");示例???<script>letoDiv=document.getElementById("box"),oBtn=document.getElementsByTagName("button")[0],att=document.createAttribute("class");att.value="democlass";oBtn.onclick=function(){

letdivSetAttr=oDiv.setAttributeNode(att);//添加屬性節(jié)點

console.log(divSetAttr);//輸出添加屬性節(jié)點方法的返回值

}</script>輸出效果綁定屬性?element.setAttributeNode(newAttr);//將屬性添加到元素添加屬性節(jié)點前添加屬性節(jié)點后第一次單擊第二次單擊10BOM對象BOM簡介??????????核心功能?實現(xiàn)JavaScript與瀏覽器的交互（非文檔內(nèi)容）。提供獨立于內(nèi)容的瀏覽器控制接口。層次結(jié)構(gòu)圖對象層次?window是頂層對象，包含其他子對象（如document、location、history）。窗口對象（window）???????????核心方法??動態(tài)交互案例?場景??：登錄按鈕跳轉(zhuǎn)并自動返回首頁。方法描述示例alert()顯示警告框window.alert("登錄成功！")prompt()用戶輸入對話框letinput=prompt("請輸入姓名:","默認值")open()打開新窗口window.open("page.html","_blank")setTimeout()延遲執(zhí)行setTimeout(()=>alert("5秒后"),5000)?步驟??：點擊按鈕打開歡迎頁面（login.html）；5秒后自動跳轉(zhuǎn)回首頁（index.html）。窗口對象（window）——核心方法???????????核心方法??動態(tài)交互案例?場景??：登錄按鈕跳轉(zhuǎn)并自動返回首頁。方法描述示例alert()顯示警告框window.alert("登錄成功！")prompt()用戶輸入對話框letinput=prompt("請輸入姓名:","默認值")open()打開新窗口window.open("page.html","_blank")setTimeout()延遲執(zhí)行setTimeout(()=>alert("5秒后"),5000)?步驟??：點擊按鈕打開歡迎頁面（login.html）；5秒后自動跳轉(zhuǎn)回首頁（index.html）。窗口對象（window）——核心屬性???????????核心屬性??動態(tài)交互案例?場景??：自動彈窗與關(guān)閉屬性描述示例status??設(shè)置狀態(tài)欄文本window.status="加載中...";//部分瀏覽器限制screenLeft/screenTop??窗口相對于屏幕的位置console.log(‘窗口坐標：’+screenLeft+screenTop);closed??判斷窗口是否關(guān)閉if(childWindow.closed){console.log("子窗口已關(guān)閉")