顯示任務

JavaScript 語言

• 引言
  • JavaScript 簡介
  • 手冊和規格
  • 程式碼編輯器
  • 開發人員主控台
• JavaScript 基礎
  • 你好，世界！
    • 顯示警示
    • 使用外部腳本顯示警示
  • 程式碼結構
  • 現代模式，「嚴格模式」
  • 變數
    • 使用變數
    • 取個好名字
    • 大寫的 const？
  • 資料類型
    • 字串引號
  • 互動：alert、prompt、confirm
    • 一個簡單的頁面
  • 類型轉換
  • 基本運算子，數學
    • 後綴和前綴形式
    • 指定結果
    • 類型轉換
    • 修正加法
  • 比較
    • 比較
  • 條件分支：if、'?'
    • if (零字串)
    • JavaScript 的名稱
    • 顯示符號
    • 將「if」改寫成「?」
    • 將「if..else」改寫成「?」
  • 邏輯運算子
    • OR 的結果是什麼？
    • OR 警示的結果是什麼？
    • AND 的結果是什麼？
    • AND 警示的結果是什麼？
    • OR AND OR 的結果
    • 檢查範圍介於
    • 檢查範圍不在
    • 關於「if」的問題
    • 檢查登入
  • Nullish 合併運算子「??」
  • 迴圈：while 和 for
    • 最後迴圈值
    • while 迴圈顯示哪些值？
    • 「for」迴圈顯示哪些值？
    • 在迴圈中輸出偶數
    • 用「while」取代「for」
    • 重複執行直到輸入正確
    • 輸出質數
  • 「switch」語法
    • 將「switch」改寫成「if」
    • 將「if」改寫成「switch」
  • 函式
    • 需要「else」嗎？
    • 使用「?」或「||」改寫函式
    • 函式 min(a, b)
    • 函式 pow(x,n)
  • 函式表達式
  • 箭頭函式，基礎
    • 使用箭頭函式改寫
  • JavaScript 特殊功能
• 程式碼品質
  • 在瀏覽器中除錯
  • 編碼風格
    • 糟糕的風格
  • 註解
  • 忍者程式碼
  • 使用 Mocha 進行自動化測試
    • 測試中哪裡出錯了？
  • Polyfill 和轉譯器
• 物件：基礎
  • 物件
    • 你好，物件
    • 檢查是否為空
    • 加總物件屬性
    • 將數字屬性值乘以 2
  • 物件參考和複製
  • 垃圾回收
  • 物件方法，「this」
    • 在物件字面值中使用「this」
    • 建立計算器
    • 串接
  • 建構函式，運算子「new」
    • 兩個函式 – 一個物件
    • 建立新的計算器
    • 建立新的累加器
  • 可選串接「?.」
  • 符號型別
  • 物件轉換為原始型別
• 資料類型
  • 原始型別的方法
    • 我可以新增字串屬性嗎？
  • 數字
    • 從訪客中加總數字
    • 為什麼 6.35.toFixed(1) == 6.3？
    • 重複直到輸入為數字
    • 偶爾發生的無限迴圈
    • 從最小值到最大值的隨機數字
    • 從最小值到最大值的隨機整數
  • 字串
    • 將第一個字元轉為大寫
    • 檢查垃圾郵件
    • 截斷文字
    • 擷取金額
  • 陣列
    • 陣列是否被複製？
    • 陣列操作。
    • 在陣列內容中呼叫
    • 加總輸入數字
    • 最大子陣列
  • 陣列方法
    • 將 border-left-width 轉換為 borderLeftWidth
    • 過濾範圍
    • 「原地」過濾範圍
    • 以遞減順序排序
    • 複製並排序陣列
    • 建立可擴充的計算器
    • 對應到名稱
    • 對應到物件
    • 依年齡對使用者排序
    • 洗牌陣列
    • 取得平均年齡
    • 過濾陣列中唯一的成員
    • 從陣列建立鍵值物件
  • 可迭代物件
  • Map 和 Set
    • 過濾陣列中唯一的成員
    • 過濾同位異構詞
    • 可迭代鍵
  • WeakMap 和 WeakSet
    • 儲存「未讀」旗標
    • 儲存已讀日期
  • Object.keys、values、entries
    • 加總屬性
    • 計算屬性數量
  • 解構賦值
    • 解構賦值
    • 最高薪資
  • 日期和時間
    • 建立日期
    • 顯示星期幾
    • 歐洲星期幾
    • 多天前是哪一天？
    • 本月最後一天？
    • 今天過去了幾秒？
    • 距離明天還有幾秒？
    • 格式化相對日期
  • JSON 方法，toJSON
    • 將物件轉換為 JSON 並返回
    • 排除反向參照
• 進階函式操作
  • 遞迴和堆疊
    • 加總所有數字直到給定的數字
    • 計算階乘
    • 費氏數列
    • 輸出單向連結串列
    • 以相反順序輸出單向連結串列
  • 剩餘參數和展開語法
  • 變數作用域，閉包
    • 函式會擷取最新變更嗎？
    • 有哪些變數可用？
    • 計數器是獨立的嗎？
    • 計數器物件
    • if 中的函式
    • 使用閉包求和
    • 變數可見嗎？
    • 透過函式篩選
    • 依欄位排序
    • 函式大軍
  • 舊的「var」
  • 全域物件
  • 函式物件，NFE
    • 設定和遞減計數器
    • 使用任意數量括弧求和
  • 「new Function」語法
  • 排程：setTimeout 和 setInterval
    • 每秒輸出
    • setTimeout 會顯示什麼？
  • 裝飾器和轉送，call/apply
    • 間諜裝飾器
    • 延遲裝飾器
    • 防彈裝飾器
    • 節流裝飾器
  • 函式繫結
    • 繫結函式作為方法
    • 第二次繫結
    • 繫結後的函式屬性
    • 修復會遺失「this」的函式
    • 登入的部分應用
  • 箭頭函式回顧
• 物件屬性設定
  • 屬性旗標和描述
  • 屬性 getter 和 setter
• 原型，繼承
  • 原型繼承
    • 使用原型
    • 搜尋演算法
    • 它寫在哪裡？
    • 為什麼兩隻倉鼠都吃飽了？
  • F.prototype
    • 變更「prototype」
    • 建立具有相同建構函式的物件
  • 原生原型
    • 將方法「f.defer(ms)」新增至函式
    • 將裝飾「defer()」新增至函式
  • 原型方法，沒有 __proto__ 的物件
    • 將 toString 新增至字典
    • 呼叫之間的差異
• 類別
  • 類別基本語法
    • 重寫為類別
  • 類別繼承
    • 建立執行個體時發生錯誤
    • 延伸時鐘
  • 靜態屬性和方法
    • 類別會延伸 Object 嗎？
  • 私有和受保護的屬性和方法
  • 延伸內建類別
  • 類別檢查：「instanceof」
    • 奇怪的 instanceof
  • 混入
• 錯誤處理
  • 錯誤處理，「try...catch」
    • finally 還是只有程式碼？
  • 自訂錯誤，延伸 Error
    • 繼承自 SyntaxError
• 承諾，async/await
  • 簡介：回呼函式
  • 承諾
    • 重新解決承諾？
    • 使用承諾延遲
    • 使用承諾的動畫圓圈
  • 承諾串連
    • 承諾：then 與 catch
  • 使用承諾處理錯誤
    • setTimeout 中的錯誤
  • 承諾 API
  • 承諾化
  • 微任務
  • 非同步/等待
    • 使用非同步/等待重寫
    • 使用非同步/等待重寫「rethrow」
    • 從非非同步呼叫非同步
• 產生器，進階迭代
  • 產生器
    • 偽亂數產生器
  • 非同步迭代和產生器
• 模組
  • 模組簡介
  • 匯出和匯入
  • 動態匯入
• 其他
  • Proxy 和 Reflect
    • 讀取不存在的屬性時發生錯誤
    • 存取陣列[-1]
    • 可觀察物件
  • Eval：執行程式碼字串
    • Eval 計算器
  • 柯里化
  • 參考型別
    • 語法檢查
    • 解釋「this」的值
  • BigInt
  • Unicode、字串內部結構
  • WeakRef 和 FinalizationRegistry

瀏覽器：文件、事件、介面

• 文件
  • 瀏覽器環境、規格
  • DOM 樹
  • 瀏覽 DOM
    • DOM 子項
    • 同層級問題
    • 選取所有對角線儲存格
  • 搜尋：getElement*、querySelector*
    • 搜尋元素
  • 節點屬性：類型、標籤和內容
    • 計算後代
    • nodeType 中有什麼？
    • 註解中的標籤
    • 「文件」在階層結構中的位置？
  • 屬性和特質
    • 取得屬性
    • 將外部連結設為橘色
  • 修改文件
    • createTextNode 與 innerHTML 與 textContent
    • 清除元素
    • 為什麼「aaa」仍然存在？
    • 建立清單
    • 從物件建立樹狀結構
    • 在樹狀結構中顯示後代
    • 建立行事曆
    • 使用 setInterval 的彩色時鐘
    • 將 HTML 插入清單中
    • 排序表格
  • 樣式和類別
    • 建立通知
  • 元素大小和捲動
    • 從底部捲動多少？
    • 捲軸列寬度是多少？
    • 將球放置在球場中央
    • 差異：CSS 寬度與 clientWidth
  • 視窗大小和捲動
  • 座標
    • 找出球場的視窗座標
    • 在元素附近顯示備註
    • 在元素附近顯示備註（絕對）
    • 將備註定位在裡面（絕對）
• 事件簡介
  • 瀏覽器事件簡介
    • 按一下隱藏
    • 隱藏自己
    • 哪些處理常式會執行？
    • 將球移動到球場另一邊
    • 建立滑動選單
    • 新增一個關閉按鈕
    • 輪播
  • 冒泡和捕獲
  • 事件委派
    • 使用委派隱藏訊息
    • 樹狀選單
    • 可排序表格
    • 工具提示行為
  • 瀏覽器預設動作
    • 為什麼「return false」不起作用？
    • 捕捉元素中的連結
    • 圖片畫廊
  • 派送自訂事件
• UI 事件
  • 滑鼠事件
    • 可選取清單
  • 移動滑鼠：mouseover/out、mouseenter/leave
    • 改善工具提示行為
    • 「智慧型」工具提示
  • 使用滑鼠事件進行拖放
    • 滑桿
    • 在場地上拖曳超級英雄
  • 指標事件
  • 鍵盤：keydown 和 keyup
    • 延伸熱鍵
  • 捲動
    • 無限頁面
    • 向上/向下按鈕
    • 載入可見圖片
• 表單、控制項
  • 表單屬性和方法
    • 新增可選取的選項
  • 聚焦：focus/blur
    • 可編輯的 div
    • 按一下編輯 TD
    • 鍵盤驅動的滑鼠
  • 事件：change、input、cut、copy、paste
    • 存款計算器
  • 表單：event 和 method submit
    • 模式表單
• 文件和資源載入
  • 頁面：DOMContentLoaded、load、beforeunload、unload
  • 腳本：async、defer
  • 資源載入：onload 和 onerror
    • 使用回呼載入圖片
• 其他
  • 突變觀察器
  • 選取和範圍
  • 事件迴圈：微任務和巨任務
    • 這段程式碼的輸出會是什麼？

其他文章

• 框架和視窗
  • 快顯視窗和視窗方法
  • 跨視窗通訊
  • 點選劫持攻擊
• 二進位資料、檔案
  • ArrayBuffer、二進位陣列
    • 串接類型化陣列
  • TextDecoder 和 TextEncoder
  • Blob
  • File 和 FileReader
• 網路要求
  • Fetch
    • 從 GitHub 擷取使用者
  • FormData
  • Fetch：下載進度
  • Fetch：中止
  • Fetch：跨來源要求
    • 為什麼我們需要 Origin？
  • Fetch API
  • URL 物件
  • XMLHttpRequest
  • 可恢復的檔案上傳
  • 長輪詢
  • WebSocket
  • 伺服器傳送事件
• 在瀏覽器中儲存資料
  • Cookie、document.cookie
  • LocalStorage、sessionStorage
    • 自動儲存表單欄位
  • IndexedDB
• 動畫
  • 貝茲曲線
  • CSS 動畫
    • 動畫一個平面 (CSS)
    • 動畫飛行中的飛機 (CSS)
    • 動畫圓圈
    • 帶有回呼的動畫圓圈
  • JavaScript 動畫
    • 動畫彈跳球
    • 動畫球向右彈跳
• Web 元件
  • 從軌道高度
  • 自訂元素
    • 即時計時器元素
  • Shadow DOM
  • 範本元素
  • Shadow DOM 插槽、組成
  • Shadow DOM 造型
  • Shadow DOM 和事件
• 正規表示式
  • 模式和旗標
  • 字元類別
  • Unicode：旗標「u」和類別 \p{...}
  • 錨點：字串開頭 ^ 和結尾 $
    • 正規表示式 ^$
  • 錨點 ^ $ 的多行模式，旗標「m」
  • 字詞邊界：\b
    • 找出時間
  • 跳脫、特殊字元
  • 集合和範圍 [...]
    • Java[^script]
    • 找出時間為 hh:mm 或 hh-mm
  • 量詞 +、*、? 和 {n}
    • 如何找出省略號「...」？
    • HTML 顏色的正規表示式
  • 貪婪和非貪婪量詞
    • /d+? d+?/ 的匹配
    • 找出 HTML 註解
    • 找出 HTML 標籤
  • 擷取群組
    • 檢查 MAC 位址
    • 找出格式為 #abc 或 #abcdef 的顏色
    • 找出所有數字
    • 剖析表達式
  • 模式中的反向參照：\N 和 \k<name>
  • 交替 (OR) |
    • 找出程式語言
    • 找出 bbtag 成對
    • 找出帶引號的字串
    • 找出完整的標籤
  • 前瞻和後瞻
    • 找出非負整數
    • 插入在標頭之後
  • 災難性回溯
  • 黏著旗標「y」，在位置上搜尋
  • RegExp 和 String 的方法