S SmartDocs

网页开发

HTML5、React、Angular、Next.js、Vite 与现代前端开发指南与项目。

HTML5 更新于 2026-02-12

第 23 課:陣列和物件

// 新增元素 fruits.push'葡萄'; // 加到最後 fruits.unshift'草莓'; // 加到最前

阅读文章 →
HTML5 更新于 2026-02-12

第 24 課:DOM 操作

DOM(Document Object Model)是網頁的程式化表示,讓 JavaScript 可以存取和操作 HTML 元素。

阅读文章 →
HTML5 更新于 2026-02-12

第 25 課:事件處理

// 輸入事件 input.addEventListener'input', functionevent { console.log'輸入值:', event.target.value; };

阅读文章 →
HTML5 更新于 2026-02-12

第 26 課:表單驗證

範例:examples/lesson26/example01validation.html

阅读文章 →
HTML5 更新于 2026-02-12

第 27 課:AJAX 和 Fetch API

// POST 請求 fetch'https://api.example.com/data', { method: 'POST', headers: { 'ContentType': 'application/json' }, body: JSON.stringify{name: '小明', age: 25} } .thenresponse = response.json .thendata = console.logdata;

阅读文章 →
HTML5 更新于 2026-02-12

第 28 課:ES6+ 新特性

// 物件解構 let {name, age} = {name: '小明', age: 25};

阅读文章 →
HTML5 更新于 2026-02-12

第 29 課:本地儲存和 API

學會使用 localStorage 了解 sessionStorage 掌握資料的儲存和讀取

阅读文章 →
HTML5 更新于 2026-02-12

第 30 課:整合實戰專題

整合以下技術: HTML5 語義化標籤 CSS Flexbox/Grid 布局 JavaScript DOM 操作 事件處理 localStorage 儲存 表單驗證

阅读文章 →
JavaScript Canvas 更新于 2026-02-03

HTML Canvas with JavaScript Teaching Materials

A comprehensive curriculum for learning HTML Canvas from beginner to advanced levels.

阅读文章 →
React.js 更新于 2026-04-01

React.js 完整教材

本教材涵蓋 React.js 從入門到進階的所有核心概念,包含大量範例程式碼與詳細說明。

阅读文章 →
React.js 更新于 2026-04-01

Lesson 01:React 簡介與環境建置

React 是由 Facebook(現 Meta)開發的 JavaScript UI 函式庫,用於建構使用者介面。

阅读文章 →
React.js 更新于 2026-04-02

Getting Started with Create React App

This project was bootstrapped with Create React Apphttps://github.com/facebook/createreactapp.

阅读文章 →
React.js 更新于 2026-04-03

Lesson 02:JSX 語法

JSX(JavaScript XML)是 React 使用的語法擴展,讓你可以在 JavaScript 中撰寫類似 HTML 的程式碼。

阅读文章 →
React.js 更新于 2026-04-03

Getting Started with Create React App

This project was bootstrapped with Create React Apphttps://github.com/facebook/createreactapp.

阅读文章 →
React.js 更新于 2026-04-01

Lesson 03:元件 Components

// 方法 2:箭頭函式(更常用) const Welcome = = { return <h1歡迎來到 React!</h1; };

阅读文章 →
React.js 更新于 2026-04-01

Lesson 04:Props 屬性傳遞

Props(Properties)是父元件傳遞資料給子元件的機制,類似 HTML 標籤的屬性。

阅读文章 →
React.js 更新于 2026-04-02

Lesson 05:State 與 useState

State 是元件內部的「記憶」,用來儲存會隨時間改變的資料。當 state 改變時,React 會自動重新渲染元件。

阅读文章 →
React.js 更新于 2026-04-02

Lesson 06:事件處理 Event Handling

React 使用合成事件 Synthetic Events,提供跨瀏覽器一致的事件 API。

阅读文章 →
React.js 更新于 2026-04-02

Lesson 07:條件渲染 Conditional Rendering

return <div <h1請登入</h1 <button登入</button </div ; }

阅读文章 →
React.js 更新于 2026-04-02

Lesson 08:列表與鍵值 Lists & Keys

return <ul {fruits.mapfruit, index = <li key={index}{fruit}</li } </ul ; }

阅读文章 →
React.js 更新于 2026-04-02

Lesson 09:表單處理 Forms

在受控元件中,表單的值由 React 的 state 控制。每次使用者輸入,都透過 onChange 更新 state,再由 state 驅動 UI。

阅读文章 →
React.js 更新于 2026-04-02

Lesson 10:useEffect 與副作用

useEffect = { // 副作用程式碼 return = { // 清除函式(可選) }; }, 依賴1, 依賴2; // 依賴陣列

阅读文章 →
React.js 更新于 2026-04-02

Lesson 11:useRef

useRef 回傳一個可變的 ref 物件,其 .current 屬性在整個元件生命週期中保持不變。

阅读文章 →
React.js 更新于 2026-04-02

Lesson 12:useContext 與 Context API

const ThemeContext = createContext'light'; // 預設值

阅读文章 →