亚洲精品成人片在线观看精品字幕,亚洲a∨无码男人的天堂,新婚少妇无套内谢国语播放,亚欧免费无码aⅴ在线观看,销魂老女人老熟妇69xx

碼上未來(lái)IT培訓(xùn)老師直接接聽(tīng)

400-029-09** 400-029-0997 轉(zhuǎn) 36015
查看完整號(hào)碼
掃碼撥號(hào)
微信掃碼撥號(hào)

AI大模型全棧開(kāi)發(fā)|前端基礎(chǔ):JavaScript基礎(chǔ)-BOM

2025/6/28 0:24:31

前端基礎(chǔ)JavaScript基礎(chǔ)BOM課程前言Course...

前端基礎(chǔ)JavaScript基礎(chǔ)BOM

課程前言Course Introduction同學(xué)們,本課程聚焦 JavaScript 核心進(jìn)階內(nèi)容,詳解常用鍵盤(pán)事件(含 keydown 等三大事件及 keyCode 應(yīng)用)、瀏覽器對(duì)象模型(BOM)架構(gòu)(window 對(duì)象、加載事件、定時(shí)器等),以及 JS 單線程執(zhí)行機(jī)制,助你掌握網(wǎng)頁(yè)交互開(kāi)發(fā)關(guān)鍵技術(shù)。讓我們開(kāi)始今天的課程吧!一常用鍵盤(pán)事件詳解

CodingFuture

1.1鍵盤(pán)事件基礎(chǔ)

鍵盤(pán)事件是網(wǎng)頁(yè)交互中重要的用戶輸入方式,JavaScript 提供了三種核心鍵盤(pán)事件,它們的觸發(fā)時(shí)機(jī)和特性各有不同:1.1.1三大鍵盤(pán)事件對(duì)比事件類型觸發(fā)時(shí)機(jī)功能鍵識(shí)別能力大小寫(xiě)敏感性onkeydown按鍵按下瞬間觸發(fā)支持(如 Ctrl、箭頭)不區(qū)分大小寫(xiě)onkeypress按鍵按下并產(chǎn)生字符時(shí)觸發(fā)不支持(功能鍵無(wú)效)區(qū)分大小寫(xiě)(A/a 不同)onkeyup按鍵松開(kāi)時(shí)觸發(fā)支持(如 Ctrl、箭頭)不區(qū)分大小寫(xiě)代碼示例:三種事件的基本用法// 方法1:傳統(tǒng)事件綁定document.onkeydown = function() {  console.log("keydown觸發(fā)");};// 方法2:事件監(jiān)聽(tīng)(推薦,可綁定多個(gè)事件)document.addEventListener("keypress", function() {  console.log("keypress觸發(fā)");});document.addEventListener("keyup", function() {  console.log("keyup觸發(fā)");});1.1.2 鍵盤(pán)事件對(duì)象與 keyCode 屬性鍵盤(pán)事件對(duì)象提供了 keyCode 屬性,用于獲取按鍵對(duì)應(yīng)的 ASCII 碼值,是識(shí)別用戶輸入的關(guān)鍵:document.addEventListener("keyup", function(e) {  console.log("按鍵碼:", e.keyCode);    // 示例:判斷用戶是否按下 A 鍵(keyCode 65,不區(qū)分大小寫(xiě))  if (e.keyCode === 65) {    console.log("用戶按下了 A 或 a 鍵");  }});// keypress 事件區(qū)分大小寫(xiě)(a:97,A:65)document.addEventListener("keypress", function(e) {  if (e.keyCode === 65) {    console.log("用戶按下了 A 鍵");  }  if (e.keyCode === 97) {    console.log("用戶按下了 a 鍵");  }});1.1.3 實(shí)戰(zhàn)案例:模擬京東搜索框按鍵定位需求: 當(dāng)用戶按下 S 鍵時(shí),自動(dòng)將光標(biāo)定位到搜索框。<input type="text" id="searchInput"><script>const searchInput = document.getElementById("searchInput");  document.addEventListener("keyup", function(e) {// S 鍵的 keyCode 為 83(不區(qū)分大小寫(xiě))if (e.keyCode === 83) {      searchInput.focus(); // 元素獲取焦點(diǎn)      searchInput.value = ""; // 可選:清空輸入框    }  });</script>focus() 方法使輸入框獲得焦點(diǎn)keyup 事件在按鍵松開(kāi)時(shí)觸發(fā),避免連續(xù)觸發(fā)實(shí)際開(kāi)發(fā)中可結(jié)合 keydown 事件實(shí)現(xiàn)更靈敏的響應(yīng)二瀏覽器對(duì)象模型(BOM)深度解析

CodingFuture

2.1BOM 基礎(chǔ)概念

2.1.1 什么是 BOMBOM(Browser Object Model)即瀏覽器對(duì)象模型,是 JavaScript 操作瀏覽器窗口的接口,核心對(duì)象是 window。它與 DOM 的區(qū)別如下:DOM(文檔對(duì)象模型)BOM(瀏覽器對(duì)象模型)操作頁(yè)面文檔結(jié)構(gòu)操作瀏覽器窗口功能頂層對(duì)象是 document頂層對(duì)象是 windowW3C 標(biāo)準(zhǔn)化規(guī)范瀏覽器廠商自定義,兼容性差2.1.2 BOM 的核心構(gòu)成BOM 包含以下主要對(duì)象:window:瀏覽器窗口的頂級(jí)對(duì)象document:DOM 頂層對(duì)象(BOM 包含 DOM)location:URL 操作對(duì)象navigation:瀏覽器導(dǎo)航歷史screen:屏幕信息history:瀏覽器歷史記錄2.2window 對(duì)象詳解

2.2.1 window 對(duì)象的特性頂級(jí)對(duì)象身份:所有全局變量、函數(shù)默認(rèn)都是 window 的屬性瀏覽器接口:提供對(duì)話框(alert/prompt/confirm)、定時(shí)器等功能全局作用域:window.變量名 與 變量名 等價(jià)代碼示例:window 對(duì)象的使用// 顯式調(diào)用 window 屬性window.console.log("碼上未來(lái)");window.alert("Hello BOM");// 隱式調(diào)用(等價(jià)于 window 調(diào)用)var age = 23;console.log(age); // 等價(jià)于 window.age2.2.2 window 常用事件窗口 / 頁(yè)面加載事件第 1 種:window.onload觸發(fā)時(shí)機(jī):頁(yè)面所有資源(HTML、CSS、JS、圖片等)加載完成后語(yǔ)法:window.onload = function() {}; // 傳統(tǒng)方式window.addEventListener("load", function() {}); // 事件監(jiān)聽(tīng)方式注意:可在 HTML 頭部編寫(xiě) JS 代碼,因 onload 會(huì)等待所有資源加載第 2 種:DOMContentLoaded觸發(fā)時(shí)機(jī):僅當(dāng) DOM 結(jié)構(gòu)加載完成,不等待 CSS/JS/ 圖片語(yǔ)法:document.addEventListener("DOMContentLoaded", function() {});優(yōu)勢(shì):資源較多時(shí)響應(yīng)更快,適合首屏交互對(duì)比示例:<button id="btn">點(diǎn)擊我</button><script>// window.onload 等待所有資源  window.onload = function() {    document.getElementById("btn").onclick = function() {      alert("onload 綁定");    };  };// DOMContentLoaded 僅等 DOM 結(jié)構(gòu)  document.addEventListener("DOMContentLoaded", function() {    document.getElementById("btn").onclick = function() {      alert("DOMContentLoaded 綁定");    };  });</script>窗口大小調(diào)整事件事件名:window.onresize觸發(fā)時(shí)機(jī):窗口寬度或高度發(fā)生變化時(shí)應(yīng)用場(chǎng)景:響應(yīng)式布局、動(dòng)態(tài)調(diào)整元素尺寸代碼示例:響應(yīng)式布局實(shí)現(xiàn)<div id="adaptDiv"></div><script>  const div = document.getElementById("adaptDiv");    window.addEventListener("resize", function() {    const screenWidth = window.innerWidth; // 獲取當(dāng)前屏幕寬度        if (screenWidth > 1000) {      div.style.width = "800px";      div.style.backgroundColor = "blue";    } else {      div.style.width = "600px";      div.style.backgroundColor = "green";    }  });</script>2.3定時(shí)器機(jī)制與實(shí)戰(zhàn)

2.3.1 setTimeout:?jiǎn)未螆?zhí)行定時(shí)器(炸彈定時(shí)器)功能:延遲指定時(shí)間后執(zhí)行一次函數(shù)語(yǔ)法:setTimeout(回調(diào)函數(shù), 延遲毫秒數(shù))返回值:定時(shí)器標(biāo)識(shí)符(用于停止定時(shí)器)代碼示例:三種調(diào)用方式// 1. 匿名函數(shù)方式(推薦)setTimeout(function() {  alert("2秒后爆炸!");}, 2000);// 2. 命名函數(shù)方式function explode(){  alert("命名函數(shù)爆炸!");}setTimeout(explode, 3000);// 3. 字符串方式(不推薦,性能差)setTimeout("explode(5)", 4000);function explode(sec){  alert(`${sec}秒后爆炸!`);}2.3.2 停止定時(shí)器:clearTimeout語(yǔ)法:clearTimeout(定時(shí)器標(biāo)識(shí)符)注意:必須保存 setTimeout 的返回值才能正確停止實(shí)戰(zhàn)案例:3 秒后關(guān)閉廣告<img src="ad.jpg" class="ad" alt="廣告圖"><script>const adImg = document.querySelector(".ad");// 保存定時(shí)器標(biāo)識(shí)符const timerId = setTimeout(function() {    adImg.style.display = "none"; // 隱藏廣告圖  }, 3000);// 提供提前關(guān)閉按鈕(可選)  document.addEventListener("click", function() {    clearTimeout(timerId); // 點(diǎn)擊頁(yè)面任意位置取消定時(shí)器  });</script>2.3.3 setInterval:循環(huán)執(zhí)行定時(shí)器(鬧鐘定時(shí)器)功能:按指定間隔重復(fù)執(zhí)行函數(shù)語(yǔ)法:setInterval(回調(diào)函數(shù), 間隔毫秒數(shù))應(yīng)用場(chǎng)景:倒計(jì)時(shí)、輪播圖、實(shí)時(shí)數(shù)據(jù)刷新代碼示例:每秒打印一次信息// 開(kāi)啟定時(shí)器const intervalId = setInterval(function() {const now = new Date();  console.log(`當(dāng)前時(shí)間:${now.toLocaleTimeString()}`);}, 1000);// 10秒后停止定時(shí)器setTimeout(function() {  clearInterval(intervalId);  console.log("定時(shí)器已停止");}, 10000);2.3.4 定時(shí)器疊加問(wèn)題與解決方案問(wèn)題現(xiàn)象: 多次點(diǎn)擊開(kāi)啟按鈕會(huì)導(dǎo)致定時(shí)器疊加,無(wú)法正確停止。解決方案:使用布爾值標(biāo)記定時(shí)器狀態(tài)<button class="start">開(kāi)啟定時(shí)器</button><button class="stop">停止定時(shí)器</button><script>  let timerId = null;  let isRunning = false; // 標(biāo)記定時(shí)器是否運(yùn)行const startBtn = document.querySelector(".start");const stopBtn = document.querySelector(".stop");  startBtn.onclick = function() {if (!isRunning) {      isRunning = true;      timerId = setInterval(function() {        console.log("定時(shí)器工作中...");      }, 1000);    }  };  stopBtn.onclick = function() {if (isRunning) {      isRunning = false;      clearInterval(timerId);      console.log("定時(shí)器已停止");    }  };</script>2.3.5 實(shí)戰(zhàn)案例:短信倒計(jì)時(shí)功能需求: 點(diǎn)擊發(fā)送按鈕后,按鈕變?yōu)榈褂?jì)時(shí)狀態(tài),60 秒內(nèi)不可重復(fù)點(diǎn)擊。手機(jī)號(hào)碼:<input type="number" id="phone"><button id="sendBtn">發(fā)送驗(yàn)證碼</button><script>  const sendBtn = document.getElementById("sendBtn");  let countdown = 60; // 倒計(jì)時(shí)秒數(shù)    sendBtn.onclick = function() {    // 禁用按鈕    this.disabled = true;    this.innerText = `剩余 ${countdown} 秒`;        const timerId = setInterval(() => {      countdown--;            if (countdown <= 0) {        // 倒計(jì)時(shí)結(jié)束        this.innerText = "發(fā)送驗(yàn)證碼";        this.disabled = false;        clearInterval(timerId);        countdown = 60; // 重置倒計(jì)時(shí)      } else {        this.innerText = `剩余 ${countdown} 秒`;      }    }, 1000);  };</script>2.4 this 指向深入理解

this 的指向在函數(shù)執(zhí)行時(shí)確定,遵循以下規(guī)則:1.全局環(huán)境 / 普通函數(shù):指向 windowfunction fn(){  console.log(this); // window}fn();2.對(duì)象方法調(diào)用:指向調(diào)用者對(duì)象const person = {  name: "張三",  sayHi() {    console.log(this.name); // 張三  }};person.sayHi();3.事件處理函數(shù):指向事件源元素button.onclick = function() {this.style.backgroundColor = "red"; // 點(diǎn)擊的按鈕變紅色};4.定時(shí)器函數(shù):指向 windowsetInterval(function() {  console.log(this); // window}, 1000);5.構(gòu)造函數(shù):指向新創(chuàng)建的實(shí)例function Person(name){  this.name = name;}const p = new Person("李四");console.log(p.name); // 李四2.5location 對(duì)象與 URL 操作

2.5.1 URL 結(jié)構(gòu)解析URL(統(tǒng)一資源定位符)的標(biāo)準(zhǔn)結(jié)構(gòu):協(xié)議://主機(jī):端口/路徑?參數(shù)1=值1&參數(shù)2=值2#錨點(diǎn)示例:http://localhost:8080/path/to/page?name=張三&age=18#section12.5.2 location 對(duì)象常用屬性屬性名示例值(以 http://a.com:8080/path?k=v#錨點(diǎn) 為例)location.href完整 URL:http://a.com:8080/path?k=v#錨點(diǎn)location.search參數(shù)部分:?k=vlocation.pathname路徑:/pathlocation.host主機(jī) + 端口:a.com:8080location.port端口:80802.5.3 實(shí)戰(zhàn)案例:自動(dòng)跳轉(zhuǎn)頁(yè)面需求: 5 秒后自動(dòng)跳轉(zhuǎn)到首頁(yè),同時(shí)提供 “立即跳轉(zhuǎn)” 按鈕。<button id="jumpNow">立即跳轉(zhuǎn)</button><div id="countdown">5秒后返回首頁(yè)</div><script>  const jumpBtn = document.getElementById("jumpNow");  const countdownDiv = document.getElementById("countdown");  let seconds = 5;    // 立即跳轉(zhuǎn)功能  jumpBtn.onclick = function() {    location.href = "http://www.baidu.com"; // 跳轉(zhuǎn)到百度  };    // 定時(shí)跳轉(zhuǎn)功能  const timerId = setInterval(function() {    seconds--;    countdownDiv.innerText = `${seconds}秒后返回首頁(yè)`;        if (seconds <= 0) {      location.href = "http://www.baidu.com";      clearInterval(timerId);    }  }, 1000);</script>三JavaScript 執(zhí)行機(jī)制揭秘

CodingFuture

3.1JS 單線程特性

JavaScript 是單線程語(yǔ)言,意味著:同一時(shí)間只能執(zhí)行一個(gè)任務(wù)所有任務(wù)按順序排隊(duì)執(zhí)行長(zhǎng)時(shí)間任務(wù)會(huì)阻塞頁(yè)面渲染影響:避免在主線程中執(zhí)行耗時(shí)操作(如大循環(huán)、復(fù)雜計(jì)算)耗時(shí)任務(wù)需通過(guò)異步處理(如定時(shí)器、AJAX)3.2同步任務(wù)與異步任務(wù)

3.2.1 同步任務(wù)定義:在主線程上按順序執(zhí)行的任務(wù)特點(diǎn):前一個(gè)任務(wù)完成后才執(zhí)行下一個(gè)示例:console.log(1); // 同步任務(wù)1console.log(2); // 同步任務(wù)23.2.2 異步任務(wù)定義:不進(jìn)入主線程,放入 “任務(wù)隊(duì)列” 的任務(wù)特點(diǎn):主線程空閑時(shí)才執(zhí)行類型:定時(shí)器事件(setTimeout/setInterval)事件監(jiān)聽(tīng)(點(diǎn)擊、滾動(dòng)等)資源加載(圖片、AJAX 請(qǐng)求等)代碼示例:同步與異步對(duì)比console.log(1); // 同步任務(wù)1// 異步任務(wù):2秒后執(zhí)行setTimeout(function() {  console.log(3); // 異步任務(wù)回調(diào)}, 2000);console.log(2); // 同步任務(wù)2// 輸出順序:1 → 2 → 3(2秒后)3.3事件循環(huán)(Event Loop)機(jī)制

3.3.1 核心概念執(zhí)行棧:主線程中正在執(zhí)行的任務(wù)隊(duì)列任務(wù)隊(duì)列:存放異步任務(wù)的回調(diào)函數(shù)事件循環(huán):主線程不斷從任務(wù)隊(duì)列中提取異步任務(wù)執(zhí)行3.3.2 執(zhí)行流程先執(zhí)行執(zhí)行棧中的所有同步任務(wù)異步任務(wù)產(chǎn)生時(shí),將回調(diào)函數(shù)放入任務(wù)隊(duì)列同步任務(wù)執(zhí)行完畢后,從任務(wù)隊(duì)列中按順序提取異步任務(wù)放入執(zhí)行棧執(zhí)行重復(fù)步驟 3,形成 “事件循環(huán)”3.3.3 案例解析:異步任務(wù)執(zhí)行順序案例 1:console.log(1);setTimeout(function() {  console.log(3);}, 0); // 延遲0毫秒(立即進(jìn)入任務(wù)隊(duì)列)console.log(2);// 輸出順序:1 → 2 → 3// 解析:setTimeout 是異步任務(wù),進(jìn)入任務(wù)隊(duì)列,主線程先執(zhí)行完同步任務(wù)1和2案例2:console.log(1);setTimeout(function() {  console.log(3);}, 0);// 模擬耗時(shí)的同步任務(wù)for (let i = 0; i < 10000; i++) {  console.log(2);}// 輸出順序:1 → 2(10000次)→ 3// 解析:for循環(huán)是同步任務(wù),阻塞主線程,任務(wù)隊(duì)列中的定時(shí)器回調(diào)需等待其完成3.4異步編程的重要性

避免頁(yè)面卡頓:耗時(shí)任務(wù)(如網(wǎng)絡(luò)請(qǐng)求、大文件處理)不阻塞主線程優(yōu)化用戶體驗(yàn):界面交互與后臺(tái)任務(wù)可并行處理典型應(yīng)用:圖片懶加載無(wú)限滾動(dòng)加載實(shí)時(shí)數(shù)據(jù)推送(WebSocket)

結(jié)言陳詞Closing statement同學(xué)們,今天的課程系統(tǒng)講解鍵盤(pán)事件交互邏輯、BOM 各對(duì)象操作(如 window 事件、location 跳轉(zhuǎn))與定時(shí)器實(shí)戰(zhàn),剖析 JS 同步 / 異步任務(wù)執(zhí)行原理。掌握這些知識(shí)可提升網(wǎng)頁(yè)交互開(kāi)發(fā)能力,優(yōu)化用戶體驗(yàn)與代碼執(zhí)行效率。下期課程預(yù)告:JavaScript基礎(chǔ)-ES6碼上未來(lái)為同學(xué)們安排統(tǒng)一答疑掃碼添加微信領(lǐng)取詳細(xì)課程大綱

微信號(hào):CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨詢
夏老師 @大連碼上未來(lái)IT培訓(xùn)

資深職業(yè)咨詢規(guī)劃師

微信號(hào):155******12

立即咨詢

“大連碼上未來(lái)IT培訓(xùn)”是碼上未來(lái)科技(大連)有限公司在教育寶平臺(tái)開(kāi)設(shè)的店鋪,若該店鋪內(nèi)信息涉嫌虛假或違法,請(qǐng)點(diǎn)擊這里向教育寶反饋,我們將及時(shí)進(jìn)行處理。

機(jī)構(gòu)評(píng)分

環(huán)境:5.0師資:5.0服務(wù):5.0效果:5.0

公示信息

店鋪名稱:大連碼上未來(lái)IT培訓(xùn)

單位名稱:碼上未來(lái)科技(大連)有限公司

賬號(hào)名稱:mswl(158******92)

所屬城市:遼寧大連

入駐時(shí)長(zhǎng):6年

在線客服:在線聊

微信咨詢

返回頂部