如果您剛剛開始學習JavaScript，您需要多深入地了解這門語言呢？ 作為初學者，在您對編程能力充滿信心之前確實很難達到這一點。 在學習編程的過程中，您可能會感到困惑，不知道JavaScript在哪裡結束，Node.js從哪裡開始，反之亦然。 在潛入Node.js之前，我建議您對主要的JavaScript概念有良好的掌握： 語法結構 表達式 類型 變量 函數 this 箭頭函數 迴圈 迴圈和作用域 數組 模板字面量 分號 嚴格模式 ECMAScript 6、2016、2017 掌握了這些概念，您就可以成為一名熟練的JavaScript開發人員，在瀏覽器和Node.js兩個環境中都能夠應對自如。 以下概念也是理解非同步編程的關鍵，而非同步編程是Node.js的一個基本部分： 非同步編程和回調函數 計時器 Promises Async和Await 閉包 事件循環
解決 JavaScript 疲勞的旅程 直到幾個月前，我一看到 JavaScript 就會感到焦慮不安。 我完全受困於所謂的 JavaScript 疲勞中，無法擺脫它。 這種情況持續了好幾年。 今天，我喜歡 JavaScript 及其生態系統。 這是怎麼發生的呢？ 我從九十年代就開始以某種形式使用 JavaScript，而現在我架上有一些書，看起來在今天顯得非常有趣，書中滿滿的 document.write 陳述。 大概是在 2012-2013 年間，關於 ES6 將會帶來的巨大變化的消息在各處都跳著。 起初，我無法掌握所有事情的進展。我無法一次接受這麼多變化。JavaScript 改變了，但我表示抗拒。學好它已經費了我很多時間，而它卻在我腳下改變。 我在一篇博文的評論中看到一個真實的 點子，它表示“如果你從一開始就一直在這裡的話（對，我就是那個老人），學習現代 JavaScript 會更加困難”： 我會認為，以前（對，我就是那麼老）在那裡是更加困難的 - Tim Tate 我在 2012 年正式開始深入研究 JavaScript 和 Node.js，之前從未經歷過像 ES6 這樣的語言變革。此前一個重大變化發生在 2009 年的 ES5。ES6 徹底改變了一切。它是 JavaScript 的一次巨大改進，每天你都會遇到很多可能出現在 ES6 規範中的新功能，但你真的不知道它們是否真的會包含進去，需要每天跟上進度，其他人在推特上都在談論這些也許會成為下一個大事的東西。 var 被抛棄了。 function 不再存在。 花了很長時間才學會的原型繼承，被類（class）的奧妙所覆蓋。 這只是冰山一角。整個 JavaScript 生態系統在過去幾年中發生了巨大變化。 建置一切事物 正在發生的一個重大轉變是"建置"。 我們從一個非常簡單的東西（使用 script 標籤引入 JavaScript）發展到需要構建步驟將我們的語言編譯到某個難以理解的巨大文件中。起初我強烈抵抗，我站在我的塔樓上，拿著大砲抵抗建置的部隊。 但當 Babel 軍力出現時，我起初更加抵抗，但最終我舉起了白旗，並加入了敵人。 我意識到 Babel 不僅僅是一個引入未來、邊緣功能的時髦庫，而是在未來可以使用作為 ES2017 的工具，同樣地適用於 ES2018、ES2019 等。無路可逃。擁抱未來，Babel 是你的朋友。...
我花了 2 個多月開發了一個用來提供 JavaScript 課程的 web 應用程式。它是使用 Next.js、NextAuth.js、Prisma、SQLite 等優秀技術構建的。 然後我意識到我失去了對重要事物的關注，那就是內容。 於是我將它轉換為 Notion 網站。 這就是它的外觀： 我在過去幾年中有時使用 Notion，但今年夏天的一天，我決定全力以赴。 我將我生活中的一切都添加到了 Notion 中，並且擺脫了多個重疊的應用程式。 然後我發現你可以將任何頁面共享為網站。 在 Web 上共享一個頁面可以讓 Notion 成為我見過的最好的內容管理系統。我見過很多系統，但它是如此容易更新頁面，幾乎是即時的，非常新鮮。 而且還有一些工具在此基礎上提供了一些功能增強，比如 Super 或 Potion。這些工具讓你可以創建快速、靜態的網站。 在我的自定義解決方案中創建網站和內容之後，我開始將所有東西都搬到 Notion 上，並且非常開心。 這是我第一個使用這種技術棧的課程。 對於之前的課程，我使用了使用 Hugo 構建的靜態網站，但是升級到更高的層次很好。 我是一位開發人員，但我並不總是需要編碼。 在製作東西時，無代碼或低代碼是一個很好的幫助。 我還在考慮使用 Notion 和 Super 來製作落地頁面。它們非常容易通過預製的塊（如價格、推薦評語等）來創建落地頁面，這類似於 Webflow，只是你可以在 Notion 中管理所有內容。 即將推出的 JavaScript 課程將成為第一個測試並使用該系統的課程。和其他一切一樣，這都是一次測試。 我不知道它是否會取得成功。可能會成功，也可能不會。我們拭目以待。問題可能會出現，我會尋找解決方案。然後我會決定是否值得，以及將來是否會再次使用。
在編寫JavaScript代碼時，您可能需要延遲函數的執行。了解如何使用setTimeout和setInterval在未來安排函數的執行。 setTimeout() 零延遲 setInterval() 遞迴setTimeout setTimeout() 在編寫JavaScript代碼時，您可能需要延遲函數的執行。 這就是setTimeout的工作。您指定一個將要延遲執行的回調函數，以及以毫秒表示的延遲時間： setTimeout(() => { // 2秒後執行 }, 2000) setTimeout(() => { // 50毫秒後執行 }, 50) 這個語法定義了一個新函數。您可以在其中調用任何其他函數，或者可以傳遞一個現有的函數名稱和一組參數： const myFunction = (firstParam, secondParam) => { // 做些事情 } // 2秒後執行 setTimeout(myFunction, 2000, firstParam, secondParam) setTimeout返回計時器id。這通常不會使用，但您可以存儲這個id，如果要刪除該計劃的函數執行，則可以清除它： const id = setTimeout(() => { // 應該在2秒後執行 }, 2000) // 我改變了主意 clearTimeout(id) 零延遲 如果將延遲時間設置為0，則回調函數將盡快執行，但在當前函數執行之後執行： setTimeout(() => { console.log('after ') }, 0) console.log(' before ') 將打印before after。 這對於避免在密集任務上阻塞CPU並在執行繁重計算時讓其他函數執行非常有用，通過在調度程序中對函數進行排隊。 某些瀏覽器（IE和Edge）實現了一個setImmediate()方法，具有完全相同的功能，但它不是標準的，並且在其他瀏覽器上不可用。但它是Node.js中的標準函數。 setInterval() setInterval是一個與setTimeout類似的函數，但有一個區別：它不僅運行一次回調函數，而是以您指定的特定時間間隔（以毫秒為單位）無限次運行：...
什麼是方法？什麼是函數？它們之間有什麼區別？ 一個函數是獨立存在的： const bark = () => { console.log('wof!') } bark() 或者： function bark() { console.log('wof!') } bark() 而方法是指分配給對象屬性的函數： const dog = { bark: () => { console.log('wof!') }, } dog.bark() 方法可以訪問對象的屬性，但只有在它是一個常規函數而不是箭頭函數時才可以： const dog = { name: 'Roger', bark: function () { console.log(`我叫${this.name}。wof!`) }, } dog.bark()
歷史API是瀏覽器讓你與地址欄和導航歷史進行交互的方式。 介紹 訪問歷史API 導航歷史 向歷史記錄中添加條目 修改歷史記錄條目 訪問當前的歷史記錄條目狀態 onpopstate事件 介紹 歷史API允許你與瀏覽器歷史進行交互，觸發瀏覽器導航方法並更改地址欄的內容。 它在現代的單頁應用程序中特別有用，這種應用程序通常不會為新頁面發出服務器端請求，而只是內容發生變化而已。 如果一個在瀏覽器中運行的現代JavaScript應用程序不明確地或在框架層面上與歷史API進行交互，將會給用戶帶來很差的體驗，因為前進和後退按鈕將無法使用。 同時，當導航應用程序時，視圖會改變，但地址欄不會變化。 且刷新按鈕無法使用：刷新頁面時，由於缺少深度鏈接，瀏覽器會顯示一個不同的頁面。 歷史API是在HTML5引入的，並且現在所有現代瀏覽器都支持。IE自10版就支持，如果你需要支持IE9及更早版本，可使用History.js庫。 訪問歷史API 歷史API可在window對象上使用，所以你可以像這樣調用它：window.history或history，因為window是全局對象。 導航歷史 先從歷史API中最簡單的操作開始。 返回上一頁： history.back() 這將返回到會話歷史的前一個條目。你可以使用以下方式前往下一頁： history.forward() 這和使用瀏覽器的前進和後退按鈕是一樣的。 go()方法可讓你多級路徑地返回或前進。例如： history.go(-1) //等同於`history.back()` history.go(-2) //等同於連續兩次調用`history.back()` history.go(1) //等同於`history.forward()` history.go(3) //等同於連續三次調用`history.forward()` 要知道歷史記錄中有多少條目，你可以調用： history.length 向歷史記錄中添加條目 使用 pushState() 方法可以以程式方式創建一個新的歷史記錄條目。你需要傳遞3個參數。 第一個參數是一個對象，可以包含任何內容（然而有大小限制並且對象需要可序列化）。 第二個參數目前由主要瀏覽器未用到，因此通常傳遞空字符串。 第三個參數是與新狀態相關聯的URL。請注意，該URL必須屬於與當前URL相同的起源域。 const state = { name: 'Flavio' } history.pushState(state, '', '/user') 調用此方法不會更改頁面的內容，也不會引起任何像更改window.location一樣的瀏覽器動作。 修改歷史記錄條目 pushState() 可以添加新的狀態到歷史記錄，而replaceState()則可以編輯當前的歷史記錄狀態。 history.pushState({}, '', '/posts') const state = { post: 'first' } history.pushState(state, '', '/post/first') const state = { post: 'second' } history....
動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 而且，您有很多不同且具有不同目的的選擇。 CSS 通常被認為更加高效，儘管 JavaScript 也可以非常高效。一切取決於您需要做什麼，以及每幀渲染所需的時間。 CSS 過渡效果 CSS 動畫 SVG 動畫 Canvas API 動畫 Web Animations API WebGL 讓我們總結這些選項，找出哪一種是合適的選擇。 CSS 過渡效果 CSS 過渡效果 有一個起點和終點。它們將一點從 X 移動到 Y，或從可見變為不可見。 它是最簡單的動畫，主要用於與頁面其餘部分無縫集成的微妙動畫。 通過過渡效果，您可以從一個狀態轉換到另一個狀態，但您無法做更多。 CSS 動畫 與 CSS 過渡效果相比，CSS 動畫 允許您具有不止 2 個狀態，事實上，您可以擁有很多狀態，並且可以用於創建更複雜的動畫。 當您需要相對簡單且無法使用過渡效果實現的動畫時，建議使用 CSS 動畫。 SVG 動畫 SVG 是一種出色的基於矢量的格式，可以使用 SMIL（SVG 動畫的"本地"格式）創建動畫。 由於存在跨瀏覽器的不一致性（並且 IE/Edge 不支援），SMIL 快將在 Chrome 中廢棄，但是團隊已暫時撤銷了此決定。 他們希望推動 CSS 動畫和 Web Animations API 來代替 SMIL。 Canvas API 動畫 Canvas API 提供了一種在屏幕上繪製的方法，使用的是點陣而不是向量。 儘管動畫是可能的，但不如其他選項高效。...
瀏覽器開發工具是前端開發者工具箱中的基本元素，並且在所有現代瀏覽器中都可用。了解它們對您有什麼幫助的基礎知識。 瀏覽器開發工具 HTML結構和CSS HTML面板 CSS樣式面板 控制台 執行自定義JavaScript 錯誤報告 模擬器 網絡面板 JavaScript調試器 應用程序和存儲 存儲 應用程序 安全選項卡 審計 瀏覽器開發工具 我認為網站和 Web 應用程序的建構從來都不是一個容易的任務，就像後端技術那樣，但是總的來說，客戶端開發相對較容易。 一旦你弄清楚了 Internet Explorer 和 Netscape Navigator 之間的差異，並避免了專屬的標籤和技術，你所需要使用的只有 HTML，稍後是 CSS。 JavaScript 是一種用於創建對話框等功能的技術，但絕對不像今天這樣普及。 雖然許多網頁仍然是純 HTML+CSS 的形式，就像這個頁面一樣，但是許多其他網站則是在瀏覽器中運行的真正應用程序。 僅僅提供網頁的源代碼，像瀏覽器一樣過去一樣的那樣，是不夠的。 瀏覽器需要提供關於它們如何呈現頁面以及頁面當前正在做什麼的更多信息，因此它們引入了一個用於開發人員的功能：它們的開發人員工具。 每個瀏覽器都不同，所以它們的開發人員工具也略有不同。在撰寫本文時，我最喜歡的開發人員工具是由 Chrome 提供的，這也是我們在這裡討論的瀏覽器，儘管 Firefox 和 Edge 也有很好的工具。 HTML結構和CSS 最基本和常見的用法是檢查網頁的內容。打開開發人員工具時，你會看到的是元素面板： HTML面板 在左側是組成頁面的HTML。 在HTML面板上將鼠標懸停在元素上會突顯該元素在頁面中的位置，點擊工具欄中的第一個圖標可以點擊頁面中的元素並在檢查器中進行分析。 您可以將元素拖放到檢查器中，即時更改它們在頁面中的位置。 CSS樣式面板 在右側是應用於當前選中元素的CSS樣式。 除了編輯和禁用屬性之外，您可以通過點擊“+”圖標添加新的CSS屬性，並為所需的任何目標添加。 您還可以觸發選定元素的狀態，以便在活動、懸停或焦點時查看應用的樣式。 在底部，選中元素的框模型可以讓您快速查看邊距、填充、邊框和尺寸: 控制台 開發工具的第二個最重要的元素是控制台。 可以單獨查看控制台面板，也可以在元素面板中按下 Esc 鍵，它將顯示在底部。 控制台主要有兩個用途：執行自定義JavaScript 和錯誤報告。 執行自定義JavaScript 在控制台底部有一個閃爍的光標。您可以在這裡輸入任何JavaScript，它將立即執行。例如，嘗試運行： alert('test') 特殊標識符 $0允許您引用當前在元素檢查器中選中的元素。如果要將其作為 jQuery 選擇器引用，請使用 $($0)。 您可以使用 shift-enter 來編寫多行。在腳本的末尾按 enter 鍵運行它。...
有許多在線工具可以幫助您 lint 或格式化程式碼。本文列出了一些對 HTML、CSS 和 JavaScript 最有用的工具。 改進您的JavaScript程式碼的流行專案的官方在線版本 Prettier（格式化程式碼） https://prettier.io/playground/ ESLint（程式碼檢查工具） https://eslint.org/demo JSHint （程式碼檢查工具） http://jshint.com/ 其他語言的工具 CSS http://www.codebeautifier.com/ HTML http://htmlformatter.com/ JSON https://jsonformatter.curiousconcept.com/ https://jsonformatter.org/ GraphQL http://toolbox.sangria-graphql.org/format 通用工具（能處理不止一種語法） https://ctrlq.org/beautifier/
理由一，JavaScript是建構網站的主要語言。 網站是在網路上進行任何事情的頭號工具。每家公司都需要一個網站或電子商務網站，每個新業務也都會需要一個。 理由二，JavaScript是有史以來最受歡迎的語言之一。有很多部落格、課程和書籍可以幫助你解決任何問題。 理由三，相較於其他程式語言，JavaScript實際上非常容易學習和撰寫。 理由四，由於JavaScript的普及，你可以找到很多JavaScript開發人員的工作。 遠程工作越來越普遍，公司很難找到有能力的JavaScript開發人員，因此如果你正在尋找工作，這是一個完美的選擇！