則與常用輸出語句實戰(zhàn))
文檔教程前端【免費下載鏈接】Web千古前端圖文教程超詳細的前端入門到進階知識庫。從零開始學前端做一名精致優(yōu)雅的前端工程師。項目地址https://gitcode.com/gh_mirrors/we/Web點擊查看免費下載導讀本文是「千古前端圖文教程」JavaScript 基礎篇的第一堂實戰(zhàn)課講解如何寫出并運行你的第一行 JavaScripthello world。核心內容包括JavaScript 代碼的三種引入方式行內式、內嵌式、外鏈式及各自的適用場景、window.onload與noscript兩個關鍵的降級與延遲執(zhí)行技巧、四條入門必知的語法規(guī)則、前端三種語言HTML / CSS / JavaScript的注釋規(guī)范與 JSDoc 文檔注釋以及alert()、console.log()、confirm()、prompt()、document.write()五種常用輸出語句的用法與區(qū)別。學完本文你可以在瀏覽器中獨立編寫并調試一段可交互的前端腳本為后續(xù)學習變量、函數(shù)與 DOM 操作打下基礎。一、JS 代碼的書寫位置三種引入方式JS 代碼寫在哪里這個問題也可以理解成引入 JS 代碼有哪幾種方式共有三種方式且與 CSS 的引入方式類似行內式寫在 HTML 標簽內部。內嵌式內聯(lián)式寫在script標簽中。外鏈式引入外部 JS 文件。方式 1行內式將單行或少量 JS 代碼寫在 HTML 標簽的事件屬性中以on開頭的屬性如onclick點擊事件input typebutton value點我點我 onclickalert(千古壹號 Hello 方式1) /完整的可執(zhí)行代碼如下!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body input typebutton value點我點我 onclickalert(千古壹號 Hello 方式1) / /body /html需要理解的關鍵點onclick屬于 JavaScript 的事件屬性。在倉庫的《事件簡介》一節(jié)中有更系統(tǒng)的講解事件有三要素——事件源、事件、事件驅動程序。這里的input標簽是事件源onclick是事件alert(...)就是事件被觸發(fā)后執(zhí)行的事件驅動程序。事件屬性中寫入的 JS 代碼會在事件被觸發(fā)時才執(zhí)行。不推薦在生產中使用這種寫法原因是可讀性差尤其是需要編寫大量 JS 代碼時很難維護引號多層嵌套時容易出錯。關于代碼中的引號在 HTML 標簽中推薦使用雙引號在 JS 中推薦使用單引號這樣能有效避免引號沖突。方式 2內嵌式內聯(lián)式在 HTML 頁面的body標簽里放入script typetext/javascript/script標簽對并在script里書寫 JavaScript 代碼!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body script typetext/javascript // 在這里寫 js 代碼 alert(千古壹號 hello 方式2); console.log(qianguyihao hello 方式2); /script /body /html需要理解的關鍵點type屬性中的text表示純文本因為 JavaScript 代碼本身就是純文本。當然type屬性可以省略因為 JavaScript 是所有現(xiàn)代瀏覽器以及 HTML5 中的默認腳本語言。在倉庫的《HTML5詳解》等文檔中可以看到大量省略type直接書寫script的代碼示例?？梢詫⒍嘈?JS 代碼寫到script標簽中。內嵌式 JS 是學習時最常用的書寫方式適合課程練習與臨時調試。方式 3外鏈式引入獨立的 JS 文件!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body !-- 外鏈式引入外部的 js 文件這個 utils.js 文件與當前的 html 文件處于同一級目錄 -- script srcutils.js/script /body /html需要理解的關鍵點上面的script標簽依然放在body里可以與內嵌的 JS 代碼并列放置。一旦script標簽通過src引入了外部 JS 文件這個標簽內部就不可以再寫 JS 代碼。方式 2 和方式 3 不能混用——同一個script標簽要么內嵌代碼要么引入外部文件二者只能取其一。總結在實戰(zhàn)開發(fā)中基本都采用方式 3外鏈式。將 HTML 文件與 JS 文件分離有利于代碼的結構化和復用符合高內聚、低耦合的思想。很少有人會把一大堆 JS 代碼塞進單個 HTML 文件里。二、拓展知識一window.onload —— 先加載最后執(zhí)行上面的三種方式有一個共同點JS 代碼都寫在body標簽內準確來說是在頁面標簽元素如title的后面、/body結束標簽的前面。為什么一般按這個順序寫因為瀏覽器默認遵循 HTML 文檔的加載順序即從上至下解析網頁這句話很重要。所以通常情況下我們會把 JS 代碼寫在body內部的末尾。這里引出一個關鍵問題當你需要通過 JS操作界面上的標簽元素時如果 JS 代碼或script標簽被寫進了head標簽中或者寫在 HTML 標簽元素的前面那么這段 JS 是無效的——因為標簽元素此時還沒來得及加載自然無法操作。關于操作頁面元素可以進一步閱讀倉庫的《DOM簡介和DOM操作》DOM 正是 JS 操作頁面元素的 API 規(guī)范。重點來了當你需要通過 JS 操作界面上的標簽元素又實在想把 JS 寫到head標簽中時就必須用window.onload將 JS 代碼包裹起來head window.onload function(){ // 這里可以寫操作界面元素的JS代碼等頁面加載完畢后再執(zhí)行。這里面的JS代碼會延遲執(zhí)行。 ... } /headwindow.onload的含義是等界面上所有內容都加載完畢后不僅要等文本加載完畢還要等圖片等資源加載完畢再執(zhí)行window.onload內部的代碼。它做到了先加載最后執(zhí)行也就是延遲執(zhí)行。我們可以根據具體需要決定將window.onload寫在head標簽中或者寫在script標簽中。三、拓展知識二noscript標簽 —— 瀏覽器不支持 JS 時的降級方案如果有些瀏覽器不支持 JS 腳本或者用戶主動禁用了瀏覽器的 JS 腳本該如何給用戶一個友好的提示我們可以通過noscript標簽作為降級的處理方案。noscript是一種 HTML 標簽用于提供在瀏覽器禁用 JavaScript 或無法執(zhí)行 JavaScript 腳本時的替代內容。它允許開發(fā)者在需要時向用戶顯示備用內容有助于提高網站的可訪問性和用戶體驗?；A語法noscript !-- 降級方案這里放置備用內容當瀏覽器禁用 JS 或者瀏覽器不支持 JS 時將顯示 -- p請啟用JavaScript以獲得最佳網站體驗。/p /noscript使用說明noscript標簽內部可以包含任何 HTML 內容通常包括用于向用戶傳達信息或提供備用功能的文本、圖像、鏈接等。noscript的內容僅在瀏覽器不支持或禁用 JS 的情況下才會顯示。也就是說如果用戶的瀏覽器支持 JS 腳本noscript里的內容將不會顯示會被忽略如果瀏覽器不支持 JS或用戶關閉了 JS則會顯示noscript里的內容。四、JavaScript 一些簡單的語法規(guī)則學習編程語言是有規(guī)律可循的程序會有相同的部分這些部分就是一種規(guī)定不能更改我們稱之為語法。先來了解四條最基礎的語法規(guī)則。規(guī)則 1JS 對換行、縮進、空格不敏感語句以分號結尾也就是說下面兩段代碼是完全等價的代碼一script typetext/javascript alert(今天藍天白云); alert(我很高興); /script等價于代碼二script typetext/javascript alert(今天藍天白云);alert(我很高興); /script規(guī)則 2每一條語句末尾建議加上分號當存在換行符line break時大多數(shù)情況下可以省略分號——JavaScript 會將換行符理解成隱式的分號進而自動添加分號。也就是說分號不是必須加的如果不寫分號瀏覽器會在換行符的位置自動添加分號但會消耗一些系統(tǒng)資源和性能甚至可能添加錯誤導致一些奇怪的 bug。因此規(guī)范做法是每條語句末尾顯式寫上分號。規(guī)則 3所有的符號都是英文的括號、引號、分號等符號都必須使用英文半角符號。如果你用的是搜狗拼音建議不要用 Shift 切換中英文可以在搜狗軟件里進行設置否則很容易輸入中文的分號建議用Ctrl Space切換中英文輸入法。規(guī)則 4JS 嚴格區(qū)分大小寫HTML 和 CSS 不區(qū)分大小寫但是JS 嚴格區(qū)分大小寫。例如alert和Alert、console和Console在 JS 中是截然不同的標識符寫錯大小寫會導致程序報錯。五、前端代碼的注釋注釋即解釋、注解。注釋有利于提高代碼的可讀性且有利于程序員之間的溝通和工作交接。注釋可以用來解釋某一段代碼的功能和作用通過注釋還可以補充代碼中未體現(xiàn)出來的部分——代碼只是開發(fā)工作的結果注釋可以闡述開發(fā)工作的過程、思路、注意事項以及踩過的坑。注釋可以是任何文字可以寫中文。注意不要把 HTML、CSS、JavaScript 三者的注釋格式搞混淆了。HTML 的注釋格式!-- 我是 HTML 注釋 --舉例!--頭部開始-- div classheader/div !--頭部結束-- !--內容開始-- div classmain/div !--內容結束-- !--底部開始-- div classfooter/div !--底部結束--CSS 的注釋舉例style typetext/css /* 我是 CSS 注釋 */ p { font-weight: bold; font-style: italic; color: red; } /style注意CSS 只有/* */這種注釋沒有//這種注釋而且注釋要寫在style標簽里面才算生效。JavaScript 的注釋單行注釋// 我是注釋多行注釋寫法 1/* 多行注釋1 多行注釋2 */多行注釋寫法 2/** * 多行注釋1 * 多行注釋2 */VS Code 中的注釋快捷鍵補充在 VS Code 中單行注釋的快捷鍵是Ctrl /多行注釋的默認快捷鍵是Alt Shift A。如果覺得多行注釋的默認快捷鍵不方便可以自行修改VS Code -- 首選項 -- 鍵盤快捷方式 -- 查找注釋 -- 將原來的快捷鍵修改為其他快捷鍵比如 Ctrl Shift /。注釋的高級用法文檔注釋JSDocJSDoc是 JavaScript 中用于文檔注釋的一種標準化格式。寫完 JSDoc 注釋后再通過相關工具開發(fā)者便可以為函數(shù)、方法、類和變量等添加注釋以便生成可讀性強的 API 文檔。以下是一個基本的 JSDoc 注釋示例/** * 這是一個示例函數(shù)用于求兩個數(shù)字的和。 * param {number} num1 - 第一個數(shù)字 * param {number} num2 - 第二個數(shù)字 * returns {number} - 兩個數(shù)字的和 */ function sum(num1, num2) { return num1 num2; }使用效果鼠標懸停在函數(shù)調用的地方就能看到關于這個函數(shù)的文檔說明而不需要定位到函數(shù)的源碼處。JSDoc 經常應用于工具函數(shù)開發(fā)者甚至可以借助 JSDoc 相關工具生成函數(shù)的一系列 API 文檔并部署到網站上方便其他開發(fā)者查閱——這種協(xié)作方式在日常開發(fā)中極為常見。另外需要說明VS Code 默認集成了文檔注釋的顯示功能可以在單獨的 JS 文件中顯示文檔注釋的效果但無法在 HTML 文件中顯示效果。對注釋的認知很多人認為代碼注釋是多余的理由是注釋太多說明代碼寫得不清晰代碼更新的同時如果注釋沒更新那段注釋就成了磁盤上的垃圾誤導他人。還有人認為注釋應該盡可能詳細像寫小作文一樣。這兩種觀點都不全面寫注釋的真正理由在于注釋有利于提高代碼的可讀性且有利于程序員之間的溝通和工作交接。并非所有注釋都是必要的。注釋不應該用來解釋某些代碼正在做什么——如果代碼無法清楚到解釋自己那么代碼需要變得更簡單。但也有例外正則表達式和復雜算法通常能從解釋它們正在做什么的注釋中獲益很多。注釋在解釋為什么某些代碼存在時很有用。大多數(shù)注釋都針對代碼本身無法包含的信息例如決策背后的推理、業(yè)務流程、業(yè)務邏輯、注意事項、踩坑經驗總結、參考鏈接。注釋的本質是文檔需要持續(xù)更新維護、新陳代謝。文檔也會過期但不能因噎廢食——即便文檔過期至少它記載了曾經的開發(fā)記錄。關于注釋還有一個悖論我最喜歡的事情是別人寫注釋我最不喜歡的事情是自己寫注釋。無論如何建議各位開發(fā)者多寫注釋、多寫技術文檔越詳細越好、越系統(tǒng)越好這樣才能提高協(xié)作效率促進良性循環(huán)。六、JavaScript 輸出語句在下面的這幾個輸出語句中按照使用頻率排序console.log()用得最多其次是alert()其他語句用得較少了解即可。彈窗alert() 語句要學習的第一個語句就是alert語句。代碼舉例如下!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body script alert(千古壹號); /script /body /htmlalert中文翻譯為警報、警告的用途是彈出警告框。它會在彈窗中顯示一條信息并等待用戶按下 OK。如果代碼中寫了兩個alert()語句網頁的效果是彈出第一個警告框點擊確定后繼續(xù)彈出第二個警告框。補充該方法只能傳入一個參數(shù)。控制臺輸出console.log() 打印日志console.log()用于在瀏覽器的控制臺中輸出信息里面可以傳入一個或多個參數(shù)常用于代碼調試和測試。console表示控制臺log表示輸出。括號里可以寫字符串、數(shù)字、變量、表達式等。語法格式console.log(傳入一個參數(shù) arg1); // 傳入多個參數(shù)時可以用逗號隔開 console.log(傳入多個參數(shù), arg2, arg3);控制臺是程序員調試程序的地方?？梢允褂?console 語句打印日志在控制臺的 console 面板查看打印的內容測試程序是否運行正常。在 Chrome 瀏覽器中按F12即可打開控制臺選擇「console」欄查看打印內容。console 語句可以設置不同的打印等級console.log(千古壹號1); // 普通打印 console.warn(千古壹號2); // 警告打印 console.error(千古壹號3); // 錯誤打印不同的打印等級區(qū)別主要在于顏色、背景上的差別方便肉眼區(qū)分、過濾信息。做前端開發(fā)時需要經常使用控制臺調試甚至可以直接在控制臺輸入 JS 語句并打印執(zhí)行結果。總結alert()主要用來顯示消息給用戶console.log()用來給程序員做調試用。彈窗confirm() 語句含確認/取消代碼舉例如下var result confirm(你聽說過千古壹號嗎); console.log(result);代碼運行后頁面上會顯示一個彈窗彈窗上有確認和取消兩個按鈕點擊確定返回true點擊取消返回false。返回值可以通過變量接收并在控制臺查看——這正是 JS 中用變量接收函數(shù)返回值的最早實踐關于變量的詳細知識可參考倉庫的《常量和變量》。彈出輸入框prompt() 語句prompt()專門彈出能夠讓用戶輸入內容的對話框用得少測試的時候偶爾會用。JS 代碼如下var a prompt(請隨便輸入點什么東西吧); console.log(a);上方代碼中用戶輸入的內容將被傳遞到變量a里面并在控制臺打印出來。alert() 和 prompt() 的區(qū)別alert()語句中可以輸出數(shù)字和字符串如果要輸出字符串則必須用引號括起來。而prompt()語句中用戶不管輸入什么內容都是字符串。prompt()會返回用戶輸入的內容我們可以用一個變量來接收用戶輸入的內容。網頁內容區(qū)域輸出document.write() 語句該方法的作用是向網頁中寫入文本內容可以是 HTML 代碼傳入的參數(shù)可以是一個或多個字符串。代碼舉例document.write(千古前端圖文教程);頁面效果網頁正文區(qū)域直接顯示千古前端圖文教程這段文字。需要注意document.write()會直接改寫文檔流實際項目中使用較少多用于學習演示。七、本篇小結與下一步本文完成了一次完整的 JavaScript 入門閉環(huán)主題核心結論三種引入方式行內式不推薦、內嵌式學習常用、外鏈式實戰(zhàn)標準加載順序瀏覽器從上至下解析 HTMLJS 寫在 body 末尾操作 DOM 需借助window.onload延遲執(zhí)行降級方案noscript在瀏覽器禁用 JS 時顯示備用內容語法規(guī)則分號結尾、英文符號、區(qū)分大小寫、對換行縮進不敏感注釋規(guī)范HTML 用!-- --、CSS 用/* */、JS 用//與/** */進階可用 JSDoc 生成 API 文檔輸出語句alert()面向用戶、console.log()面向開發(fā)者調試、confirm()返回布爾、prompt()接收輸入、document.write()寫入頁面學完本文后建議按順序繼續(xù)閱讀倉庫中同一目錄下的進階篇章《常量和變量》理解var/let/const與字面量、《事件簡介》理解事件三要素、《DOM簡介和DOM操作》理解 JS 如何操作頁面元素逐步構建完整的 JavaScript 知識體系。贊分享文檔教程前端【免費下載鏈接】Web千古前端圖文教程超詳細的前端入門到進階知識庫。從零開始學前端做一名精致優(yōu)雅的前端工程師。項目地址https://gitcode.com/gh_mirrors/we/Web點擊查看免費下載相關推薦千古前端圖文教程JavaScript 正則表達式入門與實戰(zhàn)RegExp 對象、匹配模式與 String 正則方法全解千古前端圖文教程JavaScript 正則表達式入門與實戰(zhàn)RegExp 對象、匹配模式與 String 正則方法全解 正則表達式是 JavaScript文檔教程前端千古前端圖文教程JavaScript async 異步函數(shù)詳解——聲明語法、返回值規(guī)律與 async/await 實戰(zhàn)千古前端圖文教程JavaScript async 異步函數(shù)詳解——聲明語法、返回值規(guī)律與 async/await 實戰(zhàn) 本文是「千古前端圖文教程」Web 前端文檔教程前端千古前端圖文教程用 innerHTML 動態(tài)創(chuàng)建 DOM 元素的三種方式與實戰(zhàn)詳解千古前端圖文教程用 innerHTML 動態(tài)創(chuàng)建 DOM 元素的三種方式與實戰(zhàn)詳解 導讀 在前端開發(fā)中頁面內容往往需要根據用戶操作或服務器數(shù)據動態(tài)生成這時文檔教程前端上一篇Flair 自定義數(shù)據集加載完全指南ColumnCorpus、CSV 與 FastText 格式實戰(zhàn)下一篇GSD Beta 特性實戰(zhàn)/gsd-ultraplan-phase 將 Plan Phase 搬進 Claude Code 云端瀏覽器創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 千古前端圖文教程：開始寫JavaScript —— 三種引入方式、基礎語法規(guī)則與常用輸出語句實戰(zhàn)
文檔教程前端【免費下載鏈接】Web千古前端圖文教程超詳細的前端入門到進階知識庫。從零開始學前端做一名精致優(yōu)雅的前端工程師。項目地址https://gitcode.com/gh_mirrors/we/Web點擊查看免費下載導讀本文是「千古前端圖文教程」JavaScript 基礎篇的第一堂實戰(zhàn)課講解如何寫出并運行你的第一行 JavaScripthello world。核心內容包括JavaScript 代碼的三種引入方式行內式、內嵌式、外鏈式及各自的適用場景、window.onload與noscript兩個關鍵的降級與延遲執(zhí)行技巧、四條入門必知的語法規(guī)則、前端三種語言HTML / CSS / JavaScript的注釋規(guī)范與 JSDoc 文檔注釋以及alert()、console.log()、confirm()、prompt()、document.write()五種常用輸出語句的用法與區(qū)別。學完本文你可以在瀏覽器中獨立編寫并調試一段可交互的前端腳本為后續(xù)學習變量、函數(shù)與 DOM 操作打下基礎。一、JS 代碼的書寫位置三種引入方式JS 代碼寫在哪里這個問題也可以理解成引入 JS 代碼有哪幾種方式共有三種方式且與 CSS 的引入方式類似行內式寫在 HTML 標簽內部。內嵌式內聯(lián)式寫在script標簽中。外鏈式引入外部 JS 文件。方式 1行內式將單行或少量 JS 代碼寫在 HTML 標簽的事件屬性中以on開頭的屬性如onclick點擊事件input typebutton value點我點我 onclickalert(千古壹號 Hello 方式1) /完整的可執(zhí)行代碼如下!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body input typebutton value點我點我 onclickalert(千古壹號 Hello 方式1) / /body /html需要理解的關鍵點onclick屬于 JavaScript 的事件屬性。在倉庫的《事件簡介》一節(jié)中有更系統(tǒng)的講解事件有三要素——事件源、事件、事件驅動程序。這里的input標簽是事件源onclick是事件alert(...)就是事件被觸發(fā)后執(zhí)行的事件驅動程序。事件屬性中寫入的 JS 代碼會在事件被觸發(fā)時才執(zhí)行。不推薦在生產中使用這種寫法原因是可讀性差尤其是需要編寫大量 JS 代碼時很難維護引號多層嵌套時容易出錯。關于代碼中的引號在 HTML 標簽中推薦使用雙引號在 JS 中推薦使用單引號這樣能有效避免引號沖突。方式 2內嵌式內聯(lián)式在 HTML 頁面的body標簽里放入script typetext/javascript/script標簽對并在script里書寫 JavaScript 代碼!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body script typetext/javascript // 在這里寫 js 代碼 alert(千古壹號 hello 方式2); console.log(qianguyihao hello 方式2); /script /body /html需要理解的關鍵點type屬性中的text表示純文本因為 JavaScript 代碼本身就是純文本。當然type屬性可以省略因為 JavaScript 是所有現(xiàn)代瀏覽器以及 HTML5 中的默認腳本語言。在倉庫的《HTML5詳解》等文檔中可以看到大量省略type直接書寫script的代碼示例?？梢詫⒍嘈?JS 代碼寫到script標簽中。內嵌式 JS 是學習時最常用的書寫方式適合課程練習與臨時調試。方式 3外鏈式引入獨立的 JS 文件!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body !-- 外鏈式引入外部的 js 文件這個 utils.js 文件與當前的 html 文件處于同一級目錄 -- script srcutils.js/script /body /html需要理解的關鍵點上面的script標簽依然放在body里可以與內嵌的 JS 代碼并列放置。一旦script標簽通過src引入了外部 JS 文件這個標簽內部就不可以再寫 JS 代碼。方式 2 和方式 3 不能混用——同一個script標簽要么內嵌代碼要么引入外部文件二者只能取其一。總結在實戰(zhàn)開發(fā)中基本都采用方式 3外鏈式。將 HTML 文件與 JS 文件分離有利于代碼的結構化和復用符合高內聚、低耦合的思想。很少有人會把一大堆 JS 代碼塞進單個 HTML 文件里。二、拓展知識一window.onload —— 先加載最后執(zhí)行上面的三種方式有一個共同點JS 代碼都寫在body標簽內準確來說是在頁面標簽元素如title的后面、/body結束標簽的前面。為什么一般按這個順序寫因為瀏覽器默認遵循 HTML 文檔的加載順序即從上至下解析網頁這句話很重要。所以通常情況下我們會把 JS 代碼寫在body內部的末尾。這里引出一個關鍵問題當你需要通過 JS操作界面上的標簽元素時如果 JS 代碼或script標簽被寫進了head標簽中或者寫在 HTML 標簽元素的前面那么這段 JS 是無效的——因為標簽元素此時還沒來得及加載自然無法操作。關于操作頁面元素可以進一步閱讀倉庫的《DOM簡介和DOM操作》DOM 正是 JS 操作頁面元素的 API 規(guī)范。重點來了當你需要通過 JS 操作界面上的標簽元素又實在想把 JS 寫到head標簽中時就必須用window.onload將 JS 代碼包裹起來head window.onload function(){ // 這里可以寫操作界面元素的JS代碼等頁面加載完畢后再執(zhí)行。這里面的JS代碼會延遲執(zhí)行。 ... } /headwindow.onload的含義是等界面上所有內容都加載完畢后不僅要等文本加載完畢還要等圖片等資源加載完畢再執(zhí)行window.onload內部的代碼。它做到了先加載最后執(zhí)行也就是延遲執(zhí)行。我們可以根據具體需要決定將window.onload寫在head標簽中或者寫在script標簽中。三、拓展知識二noscript標簽 —— 瀏覽器不支持 JS 時的降級方案如果有些瀏覽器不支持 JS 腳本或者用戶主動禁用了瀏覽器的 JS 腳本該如何給用戶一個友好的提示我們可以通過noscript標簽作為降級的處理方案。noscript是一種 HTML 標簽用于提供在瀏覽器禁用 JavaScript 或無法執(zhí)行 JavaScript 腳本時的替代內容。它允許開發(fā)者在需要時向用戶顯示備用內容有助于提高網站的可訪問性和用戶體驗?；A語法noscript !-- 降級方案這里放置備用內容當瀏覽器禁用 JS 或者瀏覽器不支持 JS 時將顯示 -- p請啟用JavaScript以獲得最佳網站體驗。/p /noscript使用說明noscript標簽內部可以包含任何 HTML 內容通常包括用于向用戶傳達信息或提供備用功能的文本、圖像、鏈接等。noscript的內容僅在瀏覽器不支持或禁用 JS 的情況下才會顯示。也就是說如果用戶的瀏覽器支持 JS 腳本noscript里的內容將不會顯示會被忽略如果瀏覽器不支持 JS或用戶關閉了 JS則會顯示noscript里的內容。四、JavaScript 一些簡單的語法規(guī)則學習編程語言是有規(guī)律可循的程序會有相同的部分這些部分就是一種規(guī)定不能更改我們稱之為語法。先來了解四條最基礎的語法規(guī)則。規(guī)則 1JS 對換行、縮進、空格不敏感語句以分號結尾也就是說下面兩段代碼是完全等價的代碼一script typetext/javascript alert(今天藍天白云); alert(我很高興); /script等價于代碼二script typetext/javascript alert(今天藍天白云);alert(我很高興); /script規(guī)則 2每一條語句末尾建議加上分號當存在換行符line break時大多數(shù)情況下可以省略分號——JavaScript 會將換行符理解成隱式的分號進而自動添加分號。也就是說分號不是必須加的如果不寫分號瀏覽器會在換行符的位置自動添加分號但會消耗一些系統(tǒng)資源和性能甚至可能添加錯誤導致一些奇怪的 bug。因此規(guī)范做法是每條語句末尾顯式寫上分號。規(guī)則 3所有的符號都是英文的括號、引號、分號等符號都必須使用英文半角符號。如果你用的是搜狗拼音建議不要用 Shift 切換中英文可以在搜狗軟件里進行設置否則很容易輸入中文的分號建議用Ctrl Space切換中英文輸入法。規(guī)則 4JS 嚴格區(qū)分大小寫HTML 和 CSS 不區(qū)分大小寫但是JS 嚴格區(qū)分大小寫。例如alert和Alert、console和Console在 JS 中是截然不同的標識符寫錯大小寫會導致程序報錯。五、前端代碼的注釋注釋即解釋、注解。注釋有利于提高代碼的可讀性且有利于程序員之間的溝通和工作交接。注釋可以用來解釋某一段代碼的功能和作用通過注釋還可以補充代碼中未體現(xiàn)出來的部分——代碼只是開發(fā)工作的結果注釋可以闡述開發(fā)工作的過程、思路、注意事項以及踩過的坑。注釋可以是任何文字可以寫中文。注意不要把 HTML、CSS、JavaScript 三者的注釋格式搞混淆了。HTML 的注釋格式!-- 我是 HTML 注釋 --舉例!--頭部開始-- div classheader/div !--頭部結束-- !--內容開始-- div classmain/div !--內容結束-- !--底部開始-- div classfooter/div !--底部結束--CSS 的注釋舉例style typetext/css /* 我是 CSS 注釋 */ p { font-weight: bold; font-style: italic; color: red; } /style注意CSS 只有/* */這種注釋沒有//這種注釋而且注釋要寫在style標簽里面才算生效。JavaScript 的注釋單行注釋// 我是注釋多行注釋寫法 1/* 多行注釋1 多行注釋2 */多行注釋寫法 2/** * 多行注釋1 * 多行注釋2 */VS Code 中的注釋快捷鍵補充在 VS Code 中單行注釋的快捷鍵是Ctrl /多行注釋的默認快捷鍵是Alt Shift A。如果覺得多行注釋的默認快捷鍵不方便可以自行修改VS Code -- 首選項 -- 鍵盤快捷方式 -- 查找注釋 -- 將原來的快捷鍵修改為其他快捷鍵比如 Ctrl Shift /。注釋的高級用法文檔注釋JSDocJSDoc是 JavaScript 中用于文檔注釋的一種標準化格式。寫完 JSDoc 注釋后再通過相關工具開發(fā)者便可以為函數(shù)、方法、類和變量等添加注釋以便生成可讀性強的 API 文檔。以下是一個基本的 JSDoc 注釋示例/** * 這是一個示例函數(shù)用于求兩個數(shù)字的和。 * param {number} num1 - 第一個數(shù)字 * param {number} num2 - 第二個數(shù)字 * returns {number} - 兩個數(shù)字的和 */ function sum(num1, num2) { return num1 num2; }使用效果鼠標懸停在函數(shù)調用的地方就能看到關于這個函數(shù)的文檔說明而不需要定位到函數(shù)的源碼處。JSDoc 經常應用于工具函數(shù)開發(fā)者甚至可以借助 JSDoc 相關工具生成函數(shù)的一系列 API 文檔并部署到網站上方便其他開發(fā)者查閱——這種協(xié)作方式在日常開發(fā)中極為常見。另外需要說明VS Code 默認集成了文檔注釋的顯示功能可以在單獨的 JS 文件中顯示文檔注釋的效果但無法在 HTML 文件中顯示效果。對注釋的認知很多人認為代碼注釋是多余的理由是注釋太多說明代碼寫得不清晰代碼更新的同時如果注釋沒更新那段注釋就成了磁盤上的垃圾誤導他人。還有人認為注釋應該盡可能詳細像寫小作文一樣。這兩種觀點都不全面寫注釋的真正理由在于注釋有利于提高代碼的可讀性且有利于程序員之間的溝通和工作交接。并非所有注釋都是必要的。注釋不應該用來解釋某些代碼正在做什么——如果代碼無法清楚到解釋自己那么代碼需要變得更簡單。但也有例外正則表達式和復雜算法通常能從解釋它們正在做什么的注釋中獲益很多。注釋在解釋為什么某些代碼存在時很有用。大多數(shù)注釋都針對代碼本身無法包含的信息例如決策背后的推理、業(yè)務流程、業(yè)務邏輯、注意事項、踩坑經驗總結、參考鏈接。注釋的本質是文檔需要持續(xù)更新維護、新陳代謝。文檔也會過期但不能因噎廢食——即便文檔過期至少它記載了曾經的開發(fā)記錄。關于注釋還有一個悖論我最喜歡的事情是別人寫注釋我最不喜歡的事情是自己寫注釋。無論如何建議各位開發(fā)者多寫注釋、多寫技術文檔越詳細越好、越系統(tǒng)越好這樣才能提高協(xié)作效率促進良性循環(huán)。六、JavaScript 輸出語句在下面的這幾個輸出語句中按照使用頻率排序console.log()用得最多其次是alert()其他語句用得較少了解即可。彈窗alert() 語句要學習的第一個語句就是alert語句。代碼舉例如下!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body script alert(千古壹號); /script /body /htmlalert中文翻譯為警報、警告的用途是彈出警告框。它會在彈窗中顯示一條信息并等待用戶按下 OK。如果代碼中寫了兩個alert()語句網頁的效果是彈出第一個警告框點擊確定后繼續(xù)彈出第二個警告框。補充該方法只能傳入一個參數(shù)。控制臺輸出console.log() 打印日志console.log()用于在瀏覽器的控制臺中輸出信息里面可以傳入一個或多個參數(shù)常用于代碼調試和測試。console表示控制臺log表示輸出。括號里可以寫字符串、數(shù)字、變量、表達式等。語法格式console.log(傳入一個參數(shù) arg1); // 傳入多個參數(shù)時可以用逗號隔開 console.log(傳入多個參數(shù), arg2, arg3);控制臺是程序員調試程序的地方?？梢允褂?console 語句打印日志在控制臺的 console 面板查看打印的內容測試程序是否運行正常。在 Chrome 瀏覽器中按F12即可打開控制臺選擇「console」欄查看打印內容。console 語句可以設置不同的打印等級console.log(千古壹號1); // 普通打印 console.warn(千古壹號2); // 警告打印 console.error(千古壹號3); // 錯誤打印不同的打印等級區(qū)別主要在于顏色、背景上的差別方便肉眼區(qū)分、過濾信息。做前端開發(fā)時需要經常使用控制臺調試甚至可以直接在控制臺輸入 JS 語句并打印執(zhí)行結果。總結alert()主要用來顯示消息給用戶console.log()用來給程序員做調試用。彈窗confirm() 語句含確認/取消代碼舉例如下var result confirm(你聽說過千古壹號嗎); console.log(result);代碼運行后頁面上會顯示一個彈窗彈窗上有確認和取消兩個按鈕點擊確定返回true點擊取消返回false。返回值可以通過變量接收并在控制臺查看——這正是 JS 中用變量接收函數(shù)返回值的最早實踐關于變量的詳細知識可參考倉庫的《常量和變量》。彈出輸入框prompt() 語句prompt()專門彈出能夠讓用戶輸入內容的對話框用得少測試的時候偶爾會用。JS 代碼如下var a prompt(請隨便輸入點什么東西吧); console.log(a);上方代碼中用戶輸入的內容將被傳遞到變量a里面并在控制臺打印出來。alert() 和 prompt() 的區(qū)別alert()語句中可以輸出數(shù)字和字符串如果要輸出字符串則必須用引號括起來。而prompt()語句中用戶不管輸入什么內容都是字符串。prompt()會返回用戶輸入的內容我們可以用一個變量來接收用戶輸入的內容。網頁內容區(qū)域輸出document.write() 語句該方法的作用是向網頁中寫入文本內容可以是 HTML 代碼傳入的參數(shù)可以是一個或多個字符串。代碼舉例document.write(千古前端圖文教程);頁面效果網頁正文區(qū)域直接顯示千古前端圖文教程這段文字。需要注意document.write()會直接改寫文檔流實際項目中使用較少多用于學習演示。七、本篇小結與下一步本文完成了一次完整的 JavaScript 入門閉環(huán)主題核心結論三種引入方式行內式不推薦、內嵌式學習常用、外鏈式實戰(zhàn)標準加載順序瀏覽器從上至下解析 HTMLJS 寫在 body 末尾操作 DOM 需借助window.onload延遲執(zhí)行降級方案noscript在瀏覽器禁用 JS 時顯示備用內容語法規(guī)則分號結尾、英文符號、區(qū)分大小寫、對換行縮進不敏感注釋規(guī)范HTML 用!-- --、CSS 用/* */、JS 用//與/** */進階可用 JSDoc 生成 API 文檔輸出語句alert()面向用戶、console.log()面向開發(fā)者調試、confirm()返回布爾、prompt()接收輸入、document.write()寫入頁面學完本文后建議按順序繼續(xù)閱讀倉庫中同一目錄下的進階篇章《常量和變量》理解var/let/const與字面量、《事件簡介》理解事件三要素、《DOM簡介和DOM操作》理解 JS 如何操作頁面元素逐步構建完整的 JavaScript 知識體系。贊分享文檔教程前端【免費下載鏈接】Web千古前端圖文教程超詳細的前端入門到進階知識庫。從零開始學前端做一名精致優(yōu)雅的前端工程師。項目地址https://gitcode.com/gh_mirrors/we/Web點擊查看免費下載相關推薦千古前端圖文教程JavaScript 正則表達式入門與實戰(zhàn)RegExp 對象、匹配模式與 String 正則方法全解千古前端圖文教程JavaScript 正則表達式入門與實戰(zhàn)RegExp 對象、匹配模式與 String 正則方法全解 正則表達式是 JavaScript文檔教程前端千古前端圖文教程JavaScript async 異步函數(shù)詳解——聲明語法、返回值規(guī)律與 async/await 實戰(zhàn)千古前端圖文教程JavaScript async 異步函數(shù)詳解——聲明語法、返回值規(guī)律與 async/await 實戰(zhàn) 本文是「千古前端圖文教程」Web 前端文檔教程前端千古前端圖文教程用 innerHTML 動態(tài)創(chuàng)建 DOM 元素的三種方式與實戰(zhàn)詳解千古前端圖文教程用 innerHTML 動態(tài)創(chuàng)建 DOM 元素的三種方式與實戰(zhàn)詳解 導讀 在前端開發(fā)中頁面內容往往需要根據用戶操作或服務器數(shù)據動態(tài)生成這時文檔教程前端上一篇Flair 自定義數(shù)據集加載完全指南ColumnCorpus、CSV 與 FastText 格式實戰(zhàn)下一篇GSD Beta 特性實戰(zhàn)/gsd-ultraplan-phase 將 Plan Phase 搬進 Claude Code 云端瀏覽器創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考