我們可以建立的最簡單正常運作的電路之一是點亮一個 LED 的電路。 我們將使用一個 9V 電池、一個 470歐姆的電阻和一個 LED。 關於電阻和 LED 的細節我們以後再談，現在讓我們創建我們的第一個電路。 如果你不想買任何設備或零件，這個並不是必須的，但我強烈建議你這樣做，而且從 Elegoo 購買一個名為「ELEGOO UNO R3 Project Most Complete Starter Kit」的入門套件。你可以在 Amazon 上找到它。 有很多在線工具可以用來模擬電路。在本文中，我們將使用 Tinkercad，它可以免費使用，網址是 https://tinkercad.com。 Tinkercad 是由著名的 AutoCAD 的創建者 Autodesk 開發的應用程式，它允許你創建和模擬電子電路，不僅如此，你還可以創建用於 3D 列印的設計。這是一個非常酷的網頁應用程式。 在這個網站上建立一個免費帳號，然後從儀表板選擇「Circuits」菜單： 點擊「Create new Circuit」按鈕，你將看到電路建立界面： 現在你可以從右側的側邊欄中拖動和放置電子元件到主屏幕中。 選擇一個 9V 電壓 電池，一個電阻和一個 LED： 現在將滑鼠懸停在每個元件上，你將看到可以從它們連接到的連接點。例如，電池有一個正極和一個負極： 將負極拖動到電阻器的一個極上： 現在將電阻連接到 LED 的右邊、直的極端，稱為陰極： 最後，將 LED 的另一邊、右邊的引腳連接到電池的正極： 你可以點擊線的顏色來更改它們的顏色： 你可以點擊每個元件來更改其設置。例如，點擊電阻器，了解並更改其電阻值（默認為1kΩ）： 雙擊線條可以在其中添加一個點，以便製作出更好看的電路： 整理一下，這就是最終的結果： 現在點擊「Start simulation」按鈕。你會看到LED亮起，直到你點擊「Stop simulation」： 現在試著將電阻值更改為220Ω： 再次運行模擬，你將看到警告 LED，告訴你通過它的電流太大了，而 LED 可以處理的最大電流建議是20mA： 在模擬運行時，你也可以更改電阻器的值。如果你將電阻值更改為1000Ω，你將看到 LED 的亮度會變暗。 增加10000Ω，LED 燈將不會亮。 電阻器的電阻值越大，電路中流動的電流越小，因此 LED 可以消耗的電流也越小，無法顯示出明亮的光。...

在使用Next.js連結兩個頁面中，我提到了如何使用Link Next.js組件在兩個頁面之間建立連結。當您使用它時，Next.js會透明地處理前端路由，當用戶點擊鏈接時，前端會負責在無需觸發新的客戶端/服務器請求和響應循環的情況下顯示新頁面，這通常是網頁的情況。 當使用Link時，Next.js為您做的還有一個事情。 只要使用<Link>包裹的元素出現在視口內（這意味著對於網站用戶而言是可見的），Next.js就會預取它指向的URL，只要它是本地鏈接（在您的網站上），使應用程式對於查看者來說極快。 這個行為只在生產模式下觸發（稍後我們將詳細討論這個），這意味著如果您使用npm run dev運行應用程式，您必須停止應用程式，使用npm run build編譯生產束，然後使用npm run start運行它。 使用DevTools中的網絡檢查器，您會注意到在頁面加載時，位於折疊部分以上的所有鏈接都會在load事件在您的頁面上觸發後（在頁面完全加載後觸發，且在DOMContentLoaded事件之後）開始預取。 任何其他不在視口內的Link標籤將在用戶滾動並且它可見時被預取。 預取在高速連接上是自動進行的（Wi-Fi和3G+連接，除非瀏覽器發送Save-Data HTTP標頭）。 您可以通過將prefetch屬性設置為false來取消對個別Link實例的預取： <Link href="/a-link" prefetch={false}> <a>一個鏈接</a> </Link>

如何使用 C 預處理器 預處理器在 C 編程中非常有用，它是 C 標準的一部分，就像語言、編譯器和標準庫一樣。 它解析我們的程式並確保編譯器在繼續處理之前獲得所有所需的東西。 實際上它做了什麼呢？ 例如，它查找所有使用 #include 指令包含的標頭文件。 它還查看您使用 #define 定義的所有常量並將其替換為其實際值。 這只是開始，我之前提到了這兩個操作，因為它們是最常見的操作。預處理器可以做更多的事情。 你有沒有注意到 #include 和 #define 在開頭有個 #？這是所有預處理器指令的共同特點。如果一行以 # 開頭，那就是預處理器的事。 條件語句 我們可以使用條件語句來根據表達式的值來改變程式的編譯方式。 例如，我們可以檢查 DEBUG 常量是否為 0： #include <stdio.h> const int DEBUG = 0; int main(void) { #if DEBUG == 0 printf("I am NOT debugging\n"); #else printf("I am debugging\n"); #endif } 符號常量 我們可以定義一個符號常量： #define VALUE 1 #define PI 3.14 #define NAME "Flavio" 當我們在程式中使用 NAME、PI 或 VALUE 時，預處理器會在執行程式之前用其值替換其名稱。...

在 JavaScript 中了解與鼠標事件的基本互動方式 在處理鼠標事件時，我們有以下能力： mousedown 鼠標按下 mouseup 鼠標釋放 click 點擊事件 dblclick 雙擊事件 mousemove 鼠標移動到元素上方時 mouseover 鼠標移動到元素或其子元素上方時 mouseenter 鼠標移動到元素上時。類似 mouseover 但不會冒泡（稍後會詳細解釋！） mouseout 鼠標移出元素或進入子元素時 mouseleave 鼠標移出元素時。類似 mouseout 但不會冒泡（稍後會詳細解釋！） contextmenu 右鍵點擊時打開上下文菜單 事件有重疊。在追踪 click 事件時，就如同追踪 mousedown 後跟著 mouseup 事件。在 dblclick 的情況下，click 也會被觸發兩次。 mousedown、mousemove 和 mouseup 可以組合使用以追踪拖放事件。 對於 mousemove，要小心，因為它在鼠標移動期間會觸發多次。我們需要進行節流處理，這是我們稍後在分析滾動時會談到的。 在事件處理程序中，我們可以訪問許多屬性。 例如，在鼠標事件中，可以通過檢查事件對象的 button 屬性來查看按下了哪個鼠標按鈕： const link = document.getElementById('my-link') link.addEventListener('mousedown', event => { // 鼠標按下 console.log(event.button) // 0=左鍵，2=右鍵 }) 以下是我們可以使用的所有屬性： altKey 如果事件觸發時按下了 Alt 鍵則為 true button 如果有，是觸發鼠標事件時按下的鍵的編號（通常 0 = 主按鈕，1 = 中間按鈕，2 = 右鍵）。適用於由點擊按鈕引起的事件（例如點擊事件） buttons 如果有，表示在任何鼠標事件上按下的按鈕的編號 clientX / clientY 鼠標指針相對於瀏覽器窗口的 x 和 y 坐標，不受滾動影響 ctrlKey 如果事件觸發時按下了 Ctrl 鍵則為 true metaKey 如果事件觸發時按下了 Meta 鍵則為 true movementX / movementY 鼠標指針相對於上次 mousemove 事件的位置的 x 和 y 坐標。用於跟踪移動時的鼠標速度 region 在 Canvas API 中使用 relatedTarget 事件的次要目標，例如在移動時 screenX / screenY 鼠標指針在屏幕坐標中的 x 和 y 坐標 shiftKey 如果事件觸發時按下了 Shift 鍵則為 true

我認識的大多數開發人員對商業不感興趣。他們對商業一無所知，甚至連商業常識都沒有。 我認識的大部分開發人員根本不在乎商業。他們對商業毫無了解，對商業的基本概念都不懂。 其中一些在大公司工作的人認為市場營銷是邪惡的。 有些人甚至將市場營銷郵件稱為“垃圾郵件”，即使他們主動訂閱了這些郵件。 順便說一下，讓我定義一下“垃圾郵件”——這是指來自尼日利亞王子，需要幫助從銀行取得錢的不想要的郵件。或者是和這個王子一樣，擴大你的某個部位的郵件。或者是來自你不認識的女孩的郵件。或者是沒有訂閱過的，大規模發送的推廣郵件，上面沒有“取消訂閱”鏈接。這才是垃圾郵件。 不管怎麼說，我認為市場營銷是開發人員非常有用的技能。 為什麼呢？因為你作為開發人員有一個特殊的位置和非常強大的技能組合，如果你具備這些技能的話。 大多數開發人員會繼續固守“市場營銷是邪惡的”思維，永遠不會嘗試跳出由編輯器配置文件和最佳實踐構成的舒適區域。 如果你只想在由他人管理的公司工作，在鍵盤前做工作，那這沒問題。 但是如果你有一個想法，想要自己將它推向市場怎麼辦？ 在這種情況下，我要說的是，如果你是一個平庸的開發人員，你平庸的市場營銷能力要比成為出色的開發人員卻一無所知市場營銷的能力要好得多。 想象一下，如果你是一個相當不錯的開發人員，同時你又能成為一個相當不錯的市場營銷人員，你可以做到什麼？ 這是一個非常非常強大的技能組合。

如何使用Node.js構建一個HTTP伺服器 以下是我們在Node.js介紹中使用的HTTP網絡伺服器，作為Node的Hello World應用程式。 const http = require('http') const hostname = 'localhost' const port = 3000 const server = http.createServer((req, res) => { res.statusCode = 200 res.setHeader('Content-Type', 'text/plain') res.end('Hello World\n') }) server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`) }) 讓我們簡單分析一下。我們導入了http模組。 我們使用這個模組來創建一個HTTP伺服器。 伺服器被設定為在指定的主機名localhost上，監聽3000端口。當伺服器準備就緒時，調用listen回調函數。 我們傳遞的回調函數是在每次收到請求時都會執行的函數。每當收到新的請求時，都會調用request事件，並提供兩個對象：一個請求（http.IncomingMessage對象）和一個響應（http.ServerResponse對象）。 request提供了請求的詳細信息。通過它，我們可以訪問請求標頭和請求數據。 response用於填充我們將返回給客戶端的數據。 在這個例子中，我們通過res.statusCode = 200將statusCode屬性設置為200，表示請求成功。 我們還設置了Content-Type標頭： res.setHeader('Content-Type', 'text/plain') 並且我們通過將內容作為end()方法的參數來關閉響應： res.end('Hello World\n')

讓我們討論演算法複雜度，特別是在演算法的背景下如何衡量複雜度。 不同的演算法在解決相同問題且輸入相同的情況下，需要不同的時間來解決問題。 有時候，這個差異非常巨大，特別是當它們需要處理的元素數量增加時。 這種複雜度被稱為大O符號，沒有別的原因，只是因為我們通常使用大寫字母O來表示：O(n)、O(1)等等。 最常見的大O符號度量，按效率從高到低排列，是： O(1) O(log n) O(n) O(n * log n) O(n^2) O(n!) 其中n是輸入的數量。例如，如果你需要對2個項目進行排序，則n為2；如果你需要對20,000個項目進行排序，則n為20,000。 但你不需要將值替換到O()的計算中。那只是一個符號，旨在向開發人員和查看演算法的任何人傳達它的效率。 具有O(1)效率的演算法是我們能找到的最佳演算法。執行所需的時間不取決於輸入的數量，它總是花相同的時間來執行。 具有O(n)的演算法與輸入的數量呈線性縮放。如果對於10個項目，它需要1秒，那麼對於100個項目，它將需要10秒。 具有O(n^2)的演算法，如果對於4個項目需要16秒，那麼對於10個項目將需要100秒。 在接下來的課程中，我們將分析和計算許多演算法的大O效率。 重要的是要注意，大O符號並不能給我們所有判斷一個演算法是否比另一個更快所需的所有信息，特別是當它們的大O值相同時。在這種情況下，你需要使用其他工具來測試效率。 但是，當演算法有不同的類別（例如O(n)與O(n^2)）時，毫無疑問。

在HTML中發現可訪問性的基礎知識。 設計HTML時要考慮到可訪問性非常重要。 具有可訪問性的HTML意味著殘障人士可以使用互聯網。完全失明或視力受損的用戶，聽力受損的人以及其他許多不同殘障人士都在使用互聯網。 不幸的是，這個話題沒有得到應有的重視，而且似乎不像其他話題那麼酷。 如果一個人不能“看見”您的頁面，但仍然希望閱讀其中的內容，怎麼辦？他們如何做到這一點呢？他們不能使用滑鼠，而是使用一種被稱為“螢幕閱讀器”的工具。您可以試試：Google提供免費的ChromeVox Chrome 擴展。可訪問性也應該確保工具能夠輕鬆選擇元素或通過頁面進行導航。 網頁和Web應用程序並不總是以可訪問性作為其首要目標來構建，也許版本1發布時它們並不可訪問，但是在事後仍然可以使網頁可訪問。越早越好，但永遠不算晚。 這對於我的國家非常重要，政府或其他公共組織建立的網站必須具備可訪問性。 那麼，使HTML可訪問意味著什麼？讓我舉個例子來說明您需要考慮的主要事項。 注意：還有其他一些事項需要注意，這些事項可能屬於CSS主題，例如顏色、對比和字型。或者如何使SVG圖像可訪問。我不在這裡談論這些。 使用語義化HTML 語義化的HTML非常重要，這是您需要注意的主要事項之一。讓我舉幾個常見的情境來說明。 對於標題標籤，使用正確的結構非常重要。最重要的是h1，次要的使用更高的數字，但是同級標題的含義應該相同（將其想像為樹狀結構） <h1> <h2> <h3> <h2> <h2> <h3> <h4> </h1> 使用strong和em代替b和i。在外觀上看起來是一樣的，但前兩個具有更多相關含義。b和i更多地用於視覺元素。 列表很重要。屏幕閱讀器可以檢測到列表並提供概覽，然後讓用戶選擇是否進入列表。 表格應該有一個描述其內容的caption標籤： <table> <caption>狗的年齡</caption> <tr> <th>狗</th> <th>年齡</th> </tr> <tr> <td>羅傑</td> <td>7</td> </tr> </table> 為圖像使用alt屬性 所有圖像都必須有一個alt標籤來描述圖像內容。這不僅是一種良好的實踐，而且是HTML標準所要求的，沒有alt屬性的HTML無法通過驗證。 <img src="dog.png" alt="我的狗的照片"> 這對於搜索引擎也很好，如果這對您來說是一個激勵。 使用role屬性 role屬性可讓您為頁面中的各個元素分配特定角色。 您可以分配很多不同的角色：補充、列表、列表項目、主要、導航、區域、標籤、警報、應用程序、文章、橫幅、按鈕、單元格、複選框、內容信息、對話框、文檔、饋源、圖片、列表框、行、行組、搜索、切換、表格、選項卡面板、文本框、計時器等等。 有很多角色，對於每個角色的完整參考，我給您提供此MDN鏈接。但您不需要為頁面中的每個元素都分配一個角色。大多數情況下，屏幕閱讀器可以根據HTML標籤推斷出元素的角色。例如，您不需要為像nav、button、form這樣的語義標籤添加角色標籤。 讓我們以nav標籤為例。您可以使用它來定義頁面的導航，就像這樣： <nav> <ul> <li><a href="/">首頁</a></li> <li><a href="/blog">博客</a></li> </ul> </nav> 如果您不得不使用div標籤而不是nav，則可以使用navigation角色： <div role="navigation"> <ul> <li><a href="/">首頁</a></li> <li><a href="/blog">博客</a></li> </ul> </div> 在這裡，我們給出了一個實際的例子：當標籤本身沒有傳達含義時，使用role來賦予其有意義的值。 使用tabindex屬性 tabindex 屬性允許您改變按 Tab 鍵時選擇“可選”元素的順序。默認情況下，只有鏈接和表單元素可以通過使用 Tab 鍵進行選擇（您不需要在它們上設置tabindex）。...

技術世界充滿了各種縮寫，很難將它們全部記住。 以下是網頁開發和相關領域中的一些常見縮寫： AI 人工智慧（Artificial Intelligence） AJAX 非同步 JavaScript 與 XML（Asynchronous JavaScript And XML） API 應用程式介面（Application Programming Interface） AWS 亞馬遜網路服務（Amazon Web Services） CD 持續佈署（Continuous Deployment） CDN 內容傳遞網路（Content Delivery Network） CI 持續整合（Continuous Integration） CLI 命令列介面（Command Line Interface） CMS 內容管理系統（Content Management System） CORS 跨來源資源共用（Cross Origin Resource Sharing） CRUD 建立、讀取、更新和刪除（Create, read, update, and delete） CSS 層疊樣式表（Cascading Style Sheets） CTA 呼籲至動作（Call To Action） DDD 領域驅動設計（Domain Driven Design） DNS 網域名稱系統（Domain Name System） DOM 文件物件模型（Document Object Model） DRY 不要重複自己（Don’t Repeat Yourself） FTP 檔案傳輸協定（File Transfer Protocol） GA 谷歌分析（Google Analytics） GCP 谷歌雲端平台（Google Cloud Platform） GNU GNU’s Not Unix（GNU’s Not Unix） GPL 通用公共許可證（General Public Licence） GUI 圖形使用者介面（Graphical User Interface） HTML 超文件標記語言（HyperText Markup Language） HTTP 超文本傳輸協定（Hyper Text Transfer Protocol） HTTPS 超文本傳輸安全協定（Hyper Text Transfer Protocol Secure） IAAS 基礎設施即服務（Infrastructure As A Service） IDE 整合開發環境（Integrated Development Environment） IE 網際網路瀏覽器（Internet Explorer）（已停止更新） IP 網際網路協定（Internet Protocol） JSON JavaScript 物件表示法（JavaScript Object Notation） KISS 保持簡單愚蠢（Keep It Simple Stupid） LTS 長期支援（Long Term Support） MDN 莫茲拉開發者網絡（Mozilla Developer Network） ML 機器學習（Machine Learning） MVC 模型-視圖-控制器（Model View Controller） MVP 最小可行產品（Minimum Viable Product） NPM Node 套件管理員（Node Package Manager） OOP 物件導向程式設計（Object Oriented Programming） OSS 開放原始碼軟體（Open Source Software） PAAS 平台即服務（Platform As A Service） PHP PHP 超文字預處理器（PHP Hypertext Preprocessor） PR 拉取請求（Pull Request） REPL 讀取-執行-輸出-環迴（Read Execute Print Loop） REST 表徵狀態傳輸（REpresentational State Transfer） RPC 遠程過程呼叫（Remote Procedure Call） SAAS 軟體即服務（Software As A Service） SEO 搜尋引擎優化（Search Engine Optimization） SFC 單檔案元件（Single File Component） SFTP 安全檔案傳輸協定（Secure File Transfer Protocol） SMTP 簡單郵件傳輸協定（Simple Mail Transfer Protocol） SPA 单页应用（Single Page Application） SQL 結構化查詢語言（Structured Query Language） SSH 安全殼層（Secure SHell） SSL 安全套接層（Secure Socket Layer） TCP/IP 傳輸控制協定/網際網路協定（Transmission Control Protocol/Internet Protocol） TDD 測試驅動開發（Test Driven Development） TLD 頂級網域（Top Level Domain） TLDR 太長不讀（Too Long Didn’t Read） VPN 虛擬私人網路（Virtual Private Network） VPS 虛擬私人伺服器（Virtual Private Server） W3C 世界廣泛網 (W3) 協會（World Wide Web (W*3) Consortium） WET 寫兩次所有（Write Everything Twice） WYSIWYG 所見即所得（What You See Is What You Get） XML 可延伸標記語言（Extensible Markup Language） XSS 跨網站指令碼（Cross Site Scripting） YAGNI 不需要就別加（You Ain’t Gonna Need It）

語音合成 API 是一個非常棒的工具，現代瀏覽器提供了這個 API，讓我們能夠嘗試建立新型的介面並讓瀏覽器與使用者互相對話。 該 API 於 2014 年被引入，現在已經被廣泛採用，Chrome、Firefox、Safari 和 Edge 都已提供支持。不過，IE 不支援。 它是 Web 語音 API 的一部分，還包括「語音辨識 API」，不過目前只有 Chrome 在實驗模式下支援該功能。 最簡單的使用語音合成 API 的示例是一行程式碼： speechSynthesis.speak(new SpeechSynthesisUtterance('嗨')) 將其複製並貼到瀏覽器控制台中，你的電腦應該會開始說話！ API 該 API 會將一些物件公開給 window 物件。 SpeechSynthesisUtterance SpeechSynthesisUtterance 表示一個語音請求。在上面的例子中，我們將字符串作為參數傳給它，這是瀏覽器應該要朗讀的內容。 一旦獲得了語音請求物件，你可以對它進行一些調整，以編輯語音的屬性： const utterance = new SpeechSynthesisUtterance('嗨') utterance.rate：設置語速，接受區間為 [0.1 - 10]，預設為 1 utterance.pitch：設置音調，接受區間為 [0 - 2]，預設為 1 utterance.volume：設置音量，接受區間為 [0 - 1]，預設為 1 utterance.lang：設置語言（使用 BCP 47 語言標籤，如 en-US 或 it-IT） utterance.text：可以在建構函式中設置，也可以作為屬性傳入。文本長度不能超過 32767 個字符。 utterance.voice：設置語音（關於這個後面會說明更多） 以下是一個示例： const utterance = new SpeechSynthesisUtterance('嗨') utterance....