網頁開發

開發資訊網站

網站開發服務

我們提供:

客製化網站設計

提供專屬於您的網站設計，確保符合品牌形象及業務需求，提升使用者體驗與吸引力。

響應式網頁開發

打造適應多種裝置的網站，無論是桌面、平板還是手機，都能提供最佳瀏覽效果。

電子商務平台建置

支援完整的電子商務功能，包括商品展示、購物車系統、線上付款整合等，助您輕鬆進行線上銷售。

後端系統開發

建立穩定且高效的後端系統，包括資料庫管理、API整合及伺服器配置，支持網站的順暢運行。

網站優化服務

針對網站進行速度優化及SEO優化，提高網站效能及搜尋引擎排名，吸引更多流量。

網站維護與更新

提供定期網站維護及內容更新服務，確保網站安全性與最新資訊同步。

技術支援與諮詢

隨時提供技術支援，解決問題並提供專業諮詢，協助您提升網站的運營效率。

網頁: 網頁規劃設計; 網頁展現圖設計製作

網頁應用系統：網路排行榜、生涯與生活管理幫手、語言學習智慧幫手等各式應用系統

.NET,C++,Java,PHP,JSP,JavaScript Programming Oracle DB, Microsoft SQL, MySQL, MariaDB

JavaScript

JavaScript 的特色

JavaScript 是一種高效、靈活且具備動態特性的腳本語言，廣泛應用於前端和後端開發。以下是 JavaScript 的主要特點：

1. 動態型別語言

JavaScript 是一種動態型別語言，變數在宣告時不需要指定資料型別。這意味著變數的型別可以在程式執行過程中動態改變。


let value = 10;        // 初始化為數字型
value = "Hello";       // 可以改為字串型

2. 物件導向支援

JavaScript 支援物件導向，並使用 原型繼承 的方式來實現物件的繼承與重用。這讓 JavaScript 能夠更靈活地定義和操作物件。


let person = {
name: "Alice",
greet: function() {
    return "Hello, " + this.name;
}
};

3. 函式即物件 (高階函式)

在 JavaScript 中，函式也是物件，可以作為參數傳遞、返回，或賦值給變數。這特性支援許多函式式程式設計的模式。


function greet(name) {
return "Hello, " + name;
}
let sayHello = greet;
console.log(sayHello("Alice")); // 可以將函式作為變數使用

4. 非同步操作支援

JavaScript 原生支援非同步操作，特別是透過 Promise 和 async/await 讓處理非同步行為更加直觀。這對於處理網路請求和計時事件等異步操作非常有用。


async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
}
fetchData();

5. 廣泛的跨平台應用

JavaScript 最初是用於網頁瀏覽器中的前端開發，但現在已廣泛應用於後端開發（如 Node.js）、桌面應用程式、行動應用程式甚至物聯網設備。

JavaScript 的靈活性與多樣性使其成為現代網頁開發的核心技術之一，並在各種應用領域中提供強大的支援。

JavaScript 陣列新增陣列

使用 concat 方法

您可以使用 concat 方法將兩個陣列合併：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4, 5, 6]

使用展開運算符

使用展開運算符（spread operator）也是一個常見的方式：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = [...arr1, ...arr2];
console.log(result); // [1, 2, 3, 4, 5, 6]

使用 push 方法與展開運算符

如果您希望將第二個陣列的元素加入到第一個陣列中，可以結合 push 與展開運算符：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

取得目前執行函式名稱

目的

將 console.log('op_panel_htm()') 改為動態取得函式名稱的方式輸出，例如 console.log(get_curr_method_name())。

函式寫法


function get_curr_method_name() {
  const stack = new Error().stack;
  const lines = stack.split("\n");

  // 第0行是 Error，第1行是 get_curr_method_name，第2行是呼叫它的函式
  const callerLine = lines[2] || '';
  const match = callerLine.match(/at (.+?) \(/);
  return match ? match[1] : 'anonymous';
}

應用範例


TableOperator.prototype.op_panel_htm = function () {
  console.log(get_curr_method_name());
};

輸出結果

如果你這樣執行：


const t = new TableOperator();
t.op_panel_htm();

可能會在控制台輸出：

TableOperator.op_panel_htm

實際輸出取決於瀏覽器堆疊格式，Chrome/Edge 一般會輸出函式完整路徑。

注意事項

本方法依賴 Error().stack，不同瀏覽器格式略有差異。
適用於除錯與開發時使用，不建議於正式環境依賴此方式執行邏輯。

延伸建議

可將其封裝成自訂除錯函式：


function debug_log(msg = '') {
  console.log(`[${get_curr_method_name()}] ${msg}`);
}

使用方式：


debug_log("初始化完成");

輸出結果如：

[TableOperator.op_panel_htm] 初始化完成

JavaScript 函式的分檔與分類管理

目的

當 JavaScript 專案變大、函式眾多時，應透過模組化與分類來提升維護性與可讀性。以下說明如何有效管理多個函式，包括是否使用 class。

建議作法

1. 使用 ES6 模組分檔

將相關函式依功能分類儲存在不同的檔案中，例如：


/utils/mathUtils.js        → 數學運算相關函式
/utils/domUtils.js         → DOM 操作函式
/modules/tableOperator.js  → 表格操作相關 class 或函式

每個檔案使用 export / import 語法：


// mathUtils.js
export function add(a, b) {
  return a + b;
}


// main.js
import { add } from './utils/mathUtils.js';
console.log(add(2, 3));

2. 相似功能歸類為同一模組

將具相關邏輯的函式包裝在一個物件或 class 中更具結構性，例如：


// domUtils.js
export const DomUtils = {
  createElement(tag) {
    return document.createElement(tag);
  },
  removeElement(el) {
    el.parentNode.removeChild(el);
  }
};

或使用 class：


// tableOperator.js
export class TableOperator {
  constructor(tableId) {
    this.table = document.getElementById(tableId);
  }

  highlightRow(index) {
    // ...
  }

  sortByColumn(colIndex) {
    // ...
  }
}

3. 何時適合用 class？

需要封裝狀態（如 DOM 元素、內部資料）的功能模組
會建立多個實例（如：多個表格、多個元件）
有繼承、擴充的需求

如果只是工具性函式（如字串處理、數學運算），建議使用 export function 或 export const obj = { ... } 管理即可。

4. 搭配工具與框架

開發中使用 VSCode + ESM + 專案結構目錄
正式專案可配合 Webpack、Vite 等模組打包工具
大型前端專案建議使用 TypeScript + class + 模組化 管理

範例結構建議


/src
  /utils
    stringUtils.js
    mathUtils.js
  /components
    tableOperator.js
    chartViewer.js
  main.js

JavaScript 的 class 成員變數與方法用法

基本語法

JavaScript 中的 class 使用與其他 OOP 語言類似，包含建構子 constructor、成員變數與方法（函式）定義。

範例


class Person {
  // 成員變數（public）
  name;
  age;

  // 建構子
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 成員方法
  greet() {
    console.log(`你好，我是 ${this.name}，今年 ${this.age} 歲`);
  }

  // 靜態方法（無需實例化）
  static species() {
    return '人類';
  }
}

使用方式


const p = new Person("小明", 25);
p.greet();               // 輸出：你好，我是 小明，今年 25 歲
console.log(p.name);     // 小明
console.log(Person.species()); // 人類

成員變數類型

公開成員：如 this.name，可由外部存取。
私有成員（#開頭）：只能在 class 內使用。

私有變數與方法（ES2022 標準）


class Counter {
  #count = 0; // 私有變數

  increment() {
    this.#count++;
    console.log(this.#count);
  }

  #secret() {
    console.log("這是私有方法");
  }

  revealSecret() {
    this.#secret(); // 可以內部呼叫
  }
}

繼承與覆寫


class Animal {
  speak() {
    console.log("發出聲音");
  }
}

class Dog extends Animal {
  speak() {
    console.log("汪汪！");
  }
}

this 的注意事項

class 方法中的 this 指向該實例。但若在事件或 callback 中使用，請用 bind() 或箭頭函式確保指向。


class Button {
  constructor() {
    this.label = "Click";
    document.addEventListener("click", this.handleClick.bind(this));
  }

  handleClick() {
    console.log(`你按了 ${this.label}`);
  }
}

結論

JavaScript 的 class 提供類似其他語言的封裝、繼承、方法與屬性支援，適合中大型專案使用，也方便與模組結合。若需更嚴謹型別與控制，可考慮搭配 TypeScript。

JavaScript 模組的類似 class 用法

說明

JavaScript 模組（module）提供一種將變數與函式封裝在檔案中的方式，可透過 import/export 機制實現類似 class 的分工與結構化功能，適合用於工具函式或單一功能邏輯單元。

模組與 class 差異比較

功能	class	module
封裝資料與行為	✅	✅（透過 export 封裝）
可實例化	✅	❌（以單例方式存在）
繼承與多型	✅	❌（需手動管理）
單一功能組件	可	更適合

模組範例：使用物件封裝


// file: mathUtils.js
export const MathUtils = {
  add(a, b) {
    return a + b;
  },
  multiply(a, b) {
    return a * b;
  }
};


// file: main.js
import { MathUtils } from './mathUtils.js';

console.log(MathUtils.add(3, 4));       // 7
console.log(MathUtils.multiply(2, 5));  // 10

模組範例：使用函式封裝


// file: stringHelper.js
export function toUpper(str) {
  return str.toUpperCase();
}

export function truncate(str, len) {
  return str.length > len ? str.slice(0, len) + '…' : str;
}


// file: main.js
import { toUpper, truncate } from './stringHelper.js';

console.log(toUpper("hello"));          // HELLO
console.log(truncate("JavaScript", 5)); // JavaS…

模組範例：模擬單例物件


// file: config.js
let config = {
  env: "dev",
  version: "1.0"
};

export function getConfig() {
  return config;
}

export function setEnv(env) {
  config.env = env;
}


// file: app.js
import { getConfig, setEnv } from './config.js';

console.log(getConfig()); // { env: "dev", version: "1.0" }
setEnv("prod");
console.log(getConfig()); // { env: "prod", version: "1.0" }

結論

模組適合封裝工具函式、常數與設定，與 class 不同，模組在 載入時就自動執行且全域唯一，非常適合邏輯分類與程式架構整齊化。當需要可多次建立的物件實例或物件導向繼承時，則使用 class 較為適合。

AJAX

什麼是 AJAX

AJAX（Asynchronous JavaScript and XML）是一種在網頁上非同步與伺服器通訊的技術，讓頁面不需重新載入就能更新資料。常用於表單提交、資料查詢、自動完成等動態應用。

使用 XMLHttpRequest 實作 AJAX

<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
    }
};
xhr.open("GET", "data.php", true);
xhr.send();
</script>

POST 請求範例

<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        alert("伺服器回應：" + xhr.responseText);
    }
};
xhr.send("name=小明&score=90");
</script>

處理 JSON 回傳

<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log("姓名：" + json.name);
    }
};
xhr.send();
</script>

使用 jQuery 簡化 AJAX

$.ajax({
    url: "data.php",
    method: "GET",
    success: function(response) {
        $("#result").html(response);
    },
    error: function(xhr) {
        alert("錯誤：" + xhr.status);
    }
});

常見應用

即時搜尋建議
資料無刷新載入
後台表單提交
伺服器資料更新

注意事項

AJAX 請求需由伺服器處理，前端無法直接讀取本地檔案。
跨網域請求需後端允許 CORS。
資料請求過程中可加入 loading 效果提升使用體驗。

XMLHttpRequest

建立 XMLHttpRequest

使用 JavaScript 的內建 `XMLHttpRequest` 物件可以向伺服器發送 HTTP 請求，常用於 AJAX 應用：

var xmlhttp = new XMLHttpRequest();

設定回應處理函式

使用 `onreadystatechange` 監聽狀態變化，當伺服器回應完成（readyState 為 4）且成功（status 為 200）時執行回傳處理：

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log("回應內容：" + xmlhttp.responseText);
    }
};

發送 GET 請求

xmlhttp.open("GET", "api/data.php", true);
xmlhttp.send();

發送 POST 請求

xmlhttp.open("POST", "api/save.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=測試&value=123");

處理 JSON 回應

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var data = JSON.parse(xmlhttp.responseText);
        console.log("狀態：" + data.status);
    }
};

完整範例

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        try {
            var json = JSON.parse(xmlhttp.responseText);
            console.log("資料接收成功：", json);
        } catch (e) {
            console.error("回傳內容不是有效 JSON", xmlhttp.responseText);
        }
    }
};
xmlhttp.open("GET", "data.php", true);
xmlhttp.send();
</script>

注意事項

請確認伺服器回傳的是正確格式（如純 JSON）。
若回傳夾帶 PHP 錯誤訊息，會造成 JSON 無法解析，請在 PHP 端使用 error_reporting(0) 關閉錯誤輸出。
如需跨網域請求，伺服器需設置 CORS header。

XMLHttpRequest 回傳包含 PHP 錯誤訊息的處理方式

問題描述

當使用 JavaScript 的 XMLHttpRequest 取得伺服器資料時，若 PHP 程式中出現錯誤、警告或 Deprecated 訊息，這些文字會與預期的 JSON 一起混合在 responseText 中，造成前端無法解析 JSON，甚至報錯。

錯誤範例

以下是你實際收到的 responseText 範例內容：

<br />
<b>Deprecated</b>: Facebook\FacebookApp implements the Serializable interface...
...
{ "status": "ok", "data": [...] }

原因

這是因為 PHP 執行時產生錯誤輸出訊息（如 warning、notice、deprecated），這些訊息會與正常的輸出合併，導致前端收到的內容不再是純 JSON 格式。

解決方法一：在 PHP 中關閉錯誤輸出

在 PHP 程式碼最前方加上以下程式，防止錯誤訊息輸出到瀏覽器：

error_reporting(0);
ini_set('display_errors', 0);

這樣可以讓 PHP 不輸出任何錯誤或警告訊息。

解決方法二：設定正確的 JSON 回應

確保輸出只有 JSON，並正確設定 Content-Type：

<?php
error_reporting(0);
ini_set('display_errors', 0);

header('Content-Type: application/json');

// 假設這是要回傳的資料
$data = ["status" => "ok", "value" => 123];
echo json_encode($data);
exit;
?>

解決方法三：更新 SDK 套件

錯誤訊息指出 Facebook SDK 使用了 PHP 8.1 以上不建議的 Serializable 介面，請執行以下命令更新套件：

composer update facebook/graph-sdk

或檢查 composer.json 中的版本需求，使用符合 PHP 8.1 的版本。

補救方法（不建議）

若無法修正後端，也可以在前端試圖濾除非 JSON 的部分，但這方式風險高：

let response = xmlhttp.responseText;
let jsonStart = response.indexOf("{");
if (jsonStart >= 0) {
    let jsonStr = response.substring(jsonStart);
    let json = JSON.parse(jsonStr);
    // 使用 json 處理資料
}

總結建議

請優先從 PHP 端清除錯誤輸出，確保回傳格式純粹。
避免在生產環境中讓錯誤訊息輸出到使用者端。
建議配合錯誤日誌（log）儲存錯誤，而非直接顯示。

JavaScript 的 debug_log 階段性控制

目的

模擬 C/C++ 的 #ifdef DEBUG 條件編譯機制，在 JavaScript 中實現可控制的 debug_log()，依據開發階段（開發中、測試中、正式版）控制日誌的輸出層級與開關。

實作方式

1. 設定全域 LOG_LEVEL


// 0 = 無輸出, 1 = 錯誤, 2 = 警告, 3 = 訊息, 4 = 除錯
const LOG_LEVEL = 3;

function debug_log(msg, level = 3) {
  if (level <= LOG_LEVEL) {
    const name = get_curr_method_name();
    console.log(`[${name}] ${msg}`);
  }
}

2. 輔助取得目前函式名稱


function get_curr_method_name() {
  const stack = new Error().stack;
  const lines = stack.split("\n");
  const callerLine = lines[2] || '';
  const match = callerLine.match(/at (.+?) \(/);
  return match ? match[1] : 'anonymous';
}

3. 使用範例


function initApp() {
  debug_log("初始化中", 4); // 除錯級別
  debug_log("載入設定成功", 3); // 訊息
  debug_log("設定值可能過舊", 2); // 警告
  debug_log("載入失敗", 1); // 錯誤
}

4. 發佈階段調整

開發中：LOG_LEVEL = 4（全開）
測試階段：LOG_LEVEL = 2（只顯示錯誤與警告）
正式上線：LOG_LEVEL = 0（完全靜默）

5. 進階方式：打包階段移除日誌

搭配工具如 Webpack/Vite/ESBuild，可透過條件常數 process.env.NODE_ENV 移除日誌：


if (process.env.NODE_ENV === 'development') {
  debug_log("開發環境中的訊息");
}

也可以搭配 Babel 外掛（如 babel-plugin-transform-remove-console）在打包時移除所有 console.*。

結論

雖然 JavaScript 沒有條件編譯，但可以透過變數控制與打包優化策略，實現類似 C++ 的除錯等級與發佈控制機制，確保開發階段資訊完整，正式版本乾淨無雜訊。

瀏覽器 Console

簡介

瀏覽器 Console（控制台）是開發者工具的一部分，用來：

執行 JavaScript 程式碼
查看錯誤訊息與日誌
即時操作 DOM
除錯網站問題

---

開啟方式

Windows / Linux：按 F12 或 Ctrl + Shift + I → 點選「Console」分頁
macOS：按 Cmd + Option + I

---

基本功能

console.log("訊息")：印出訊息
$0：選取 Elements 面板中目前選到的元素
document.querySelector()：選取 DOM 元素
dir(obj)：列出物件屬性
copy(obj)：複製變數到剪貼簿

---

常用範例

// 印出訊息
console.log("Hello Console");

// 取得頁面元素並操作
const btn = document.querySelector("button");
btn.textContent = "新標籤";
btn.click();

// 查看物件
console.dir(btn);

---

貼上防護

若 Console 出現以下訊息，表示 Chrome 為安全起見禁止直接貼上多行程式碼：

Don’t paste code into the DevTools Console ... Please type ‘allow pasting’ below and press Enter

輸入 allow pasting 並按 Enter，即可解除限制。

---

Console 小技巧

clear()：清除 Console 訊息
inspect(element)：直接跳到 Elements 面板定位該元素
$ 和 $$：是 querySelector 與 querySelectorAll 的縮寫

---

用途

測試 JavaScript 片段
即時修改樣式
觀察 API 回傳資料
操作 Shadow DOM

Chrome DevTools Console 出現「禁止貼上」訊息的解決方法

原因說明

Chrome 為了安全，防止惡意網站或他人誘導貼上危險程式碼，預設禁止直接貼上多行程式碼到 Console。

出現訊息：

Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. 
This could allow attackers to steal your identity or take control of your computer. 
Please type ‘allow pasting’ below and press Enter to allow pasting.

---

解決步驟

在 Console 最底行 輸入文字 allow pasting（不含引號）
按下 Enter
之後就可以正常貼上多行程式碼了

---

示範

// 1. Console 輸入 allow pasting 然後按 Enter
allow pasting

// 2. 再貼上你要執行的 JavaScript 程式碼
const host = document.querySelector('i18n-message[key="login.button.loginWithLine"]');
// ...（後續程式碼）

---

注意事項

只有在你完全信任程式碼來源時才允許貼上
避免貼上不明或來歷不明的程式碼，保障安全
這是 Chrome 的安全機制，避免社交工程攻擊

JavaScript UI

響應式網頁

什麼是響應式設計？

響應式網頁設計是一種網站設計方法，使網站可以適應不同裝置的螢幕尺寸和解析度。這意味著無論是手機、平板電腦，還是桌面電腦，網站的內容都會自動調整，以提供最佳的使用體驗。

響應式設計的關鍵技術

響應式設計的關鍵在於靈活的佈局、可調整的圖片以及CSS媒體查詢。這些技術可以讓網站依據裝置的寬度自動調整元素的大小和排列。

範例

在CSS中使用媒體查詢來調整版面，例如：

@media (max-width: 600px) { body { font-size: 14px; } }

響應式設計的優勢

響應式設計可以改善用戶體驗，減少開發成本，並增加SEO效果。由於無需為每種裝置設計不同的版本，響應式網頁更加容易維護。

JavaScript UI 程式保護與授權機制

挑戰與現實

JavaScript 是前端程式語言，其程式碼會被下載到用戶的瀏覽器中執行，因此很容易被查看或複製。雖然無法完全防止程式碼被逆向工程，但可以採取多種措施增加保護強度，並實現試用與正式版的授權機制。

保護程式碼的主要方法

程式碼混淆（Code Obfuscation）

使用工具將原始程式碼轉換為難以閱讀的格式。

npm install -g javascript-obfuscator
javascript-obfuscator input.js --output output.js

混淆後的程式碼範例：

var _0x1a2b=["\x68\x65\x6C\x6C\x6F"];console[_0x1a2b[0]]("Hello World!");

程式碼壓縮（Minification）
利用壓縮工具移除空白與註解，減少程式碼可讀性，例如使用 UglifyJS。
動態載入
將重要邏輯存於伺服器，通過 API 提供服務，而非直接執行於前端。
```
fetch('https://example.com/api').then(response => response.json()).then(data => console.log(data));
```

瀏覽器偵測

在頁面中加入偵測機制，阻止開發者工具的使用。

document.addEventListener('keydown', (event) => {
    if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
        event.preventDefault();
    }
});

試用與正式版的實現方式

基於授權的控制

將試用與正式版邏輯與 API 結合，例如根據授權碼檢查用戶身份。

fetch('https://example.com/verify_license', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ licenseKey: userLicenseKey })
}).then(response => response.json()).then(data => {
    if (data.valid) {
        console.log('正式版啟用');
    } else {
        console.log('試用版限制功能');
    }
});

功能限制
在試用版中禁用部分功能，例如 UI 元件的可用性或數據存取權限。

試用期驗證

基於用戶的首次使用日期，設置試用期檢查邏輯。

const startDate = localStorage.getItem('startDate') || new Date();
localStorage.setItem('startDate', startDate);
if (new Date() - new Date(startDate) > 14 * 24 * 60 * 60 * 1000) {
    console.log('試用期已結束');
} else {
    console.log('試用期內');
}

實務上的考量

完全防止程式碼被檢視是不可能的，但增加破解難度是可行的。
使用混淆、API 驗證、伺服器端邏輯等多重手段結合，提供最大化保護。
定期更新程式碼與授權機制，避免長期使用相同的邏輯。

處理滾動位置變更的事件

滾動位置變更事件介紹

在網頁中，監聽滾動位置的變更可以實現許多動態效果，例如顯示返回頂部按鈕、懸浮導航欄等。使用 JavaScript 可以輕鬆實現這類事件的監聽。

實現滾動事件的基本步驟

在 JavaScript 中，可以透過 window.addEventListener('scroll', handler) 方法來監聽滾動事件。在滾動時觸發 handler 函式，進行相應的處理。

範例：顯示滾動位置

以下範例顯示當前頁面滾動的垂直位置，並在頁面下方顯示。

<script>
    // 定義滾動事件處理函式
    function handleScroll() {
        const scrollPosition = window.scrollY; // 獲取垂直滾動位置
        document.getElementById("scrollPositionDisplay").textContent = "目前滾動位置：" + scrollPosition + " px";
    }

    // 添加滾動事件監聽器
    window.addEventListener('scroll', handleScroll);
</script>

<div id="scrollPositionDisplay" style="position: fixed; bottom: 20px; left: 20px; background-color: #eee; padding: 10px;">
    目前滾動位置：0 px
</div>

注意事項

在滾動事件中添加太多運算可能會影響性能，建議使用 requestAnimationFrame 或 setTimeout 進行節流（throttling），減少事件觸發的頻率。

結論

監聽滾動位置變更的事件可用於多種動態效果，從而增強網頁的交互性。透過簡單的 JavaScript 即可實現滾動事件的監聽，提升用戶體驗。

讓 <pre> 元素從新行開始，但不佔滿整行

解法 1: 使用 `width: max-content`

這種方法讓元素的寬度根據內容自動調整，同時保持在新行。

pre {
  display: inline-block;
  width: max-content;
}

效果：

這是一段文字。

這是一個代碼區塊。

解法 2: 使用 `float: left`

此方法使用 float 讓元素浮動至左邊，並讓其新行開始。

pre {
  display: inline-block;
  float: left;
}

效果：

這是一段文字。

這是一個代碼區塊。

解法 3: 使用 `::before` 虛擬元素

透過虛擬元素強制元素換行，同時保持寬度自適應。

pre {
  display: inline-block;
}
pre::before {
  content: '';
  display: block;
  clear: both;
}

效果：

這是一段文字。

這是一個代碼區塊。

解法 4: 使用 `white-space: pre`

使用 white-space 控制換行行為，讓區塊寬度自然適應內容。

pre {
  display: inline-block;
  white-space: pre;
}

效果：

這是一段文字。

這是一個代碼區塊。

模擬 Windows App UI View

程式碼


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Windows App UI 模擬</title>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    .app-window {
      width: 800px;
      height: 500px;
      margin: 50px auto;
      background: #ffffff;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .title-bar {
      background: #0078d7;
      color: #ffffff;
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .title-bar h1 {
      font-size: 16px;
      margin: 0;
    }

    .title-bar .buttons {
      display: flex;
      gap: 5px;
    }

    .title-bar .buttons button {
      width: 20px;
      height: 20px;
      background: #ffffff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
    }

    .title-bar .buttons button:hover {
      background: #e0e0e0;
    }

    .content {
      flex: 1;
      padding: 15px;
      overflow: auto;
    }

    .sidebar {
      width: 200px;
      background: #f3f3f3;
      border-right: 1px solid #ddd;
      display: inline-block;
      vertical-align: top;
    }

    .main-content {
      display: inline-block;
      width: calc(100% - 200px);
      vertical-align: top;
    }

    .sidebar ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .sidebar ul li {
      padding: 10px 15px;
      cursor: pointer;
      border-bottom: 1px solid #ddd;
    }

    .sidebar ul li:hover {
      background: #e9e9e9;
    }

    .main-content p {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div class="app-window">
    <div class="title-bar">
      <h1>My Windows App</h1>
      <div class="buttons">
        <button title="Minimize"></button>
        <button title="Maximize"></button>
        <button title="Close" style="background: #e81123;"></button>
      </div>
    </div>
    <div class="content">
      <div class="sidebar">
        <ul>
          <li onclick="showContent('Home')">Home</li>
          <li onclick="showContent('Settings')">Settings</li>
          <li onclick="showContent('About')">About</li>
        </ul>
      </div>
      <div class="main-content" id="mainContent">
        <p>Select an item from the sidebar to view content.</p>
      </div>
    </div>
  </div>

  <script>
    function showContent(section) {
      const content = {
        Home: '<h2>Home</h2><p>Welcome to the home page.</p>',
        Settings: '<h2>Settings</h2><p>Adjust your application preferences here.</p>',
        About: '<h2>About</h2><p>This is a mock Windows App created using HTML and JavaScript.</p>',
      };

      document.getElementById('mainContent').innerHTML = content[section] || '<p>Content not found.</p>';
    }
  </script>
</body>
</html>

步驟

將程式碼儲存為 index.html。
打開檔案以在瀏覽器中檢視效果。
點擊側邊欄中的項目以切換主要內容。

My Windows App

Select an item from the sidebar to view content.

JavaScript UI設計 Libs

React

React 是由 Facebook 開發的熱門 JavaScript 庫，適合構建動態且高效的使用者介面。其元件化設計使開發者能快速建立和重複使用 UI 元件。

Vue.js

Vue.js 是一個輕量且易於上手的框架，適合開發中小型應用程式。其簡單的 API 和直觀的設計讓快速設計 UI 成為可能。

Bootstrap

Bootstrap 是一個前端框架，提供多種現成的 UI 元件和排版工具，能快速建構響應式網站。

Material-UI

Material-UI 是基於 Google Material Design 的 React UI 框架，包含許多精美的元件，適合快速設計高品質的介面。

Tailwind CSS

Tailwind 是一個實用的 CSS 框架，結合 JavaScript 使用時能快速構建客製化的 UI。它的原子化設計讓開發者能靈活控制樣式。

Foundation

Foundation 是一個響應式前端框架，提供多種 UI 元件與網格系統，適合快速建立現代化的網頁設計。

Chakra UI

Chakra UI 是一個簡單且可客製化的 React UI 框架，提供直觀的 API 和多樣的元件。

Quasar Framework

Quasar 是基於 Vue.js 的 UI 框架，能快速構建響應式和跨平台的應用程式。

React Database View 範例

程式碼


import React, { useState, useEffect } from 'react';

function DatabaseView() {
  // 模擬的資料庫資料
  const [data, setData] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  // 模擬從資料庫獲取資料
  useEffect(() => {
    const fetchData = async () => {
      const mockData = [
        { id: 1, name: 'John Doe', email: '[email protected]', age: 28 },
        { id: 2, name: 'Jane Smith', email: '[email protected]', age: 34 },
        { id: 3, name: 'Alice Brown', email: '[email protected]', age: 25 },
        { id: 4, name: 'Bob White', email: '[email protected]', age: 40 },
      ];
      setData(mockData);
    };

    fetchData();
  }, []);

  // 過濾資料
  const filteredData = data.filter(
    (item) =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.email.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Database View</h1>
      <input
        type="text"
        placeholder="Search by name or email"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{
          marginBottom: '20px',
          padding: '10px',
          width: '300px',
          fontSize: '16px',
        }}
      />
      <table
        style={{
          width: '100%',
          borderCollapse: 'collapse',
          marginTop: '10px',
        }}
      >
        <thead>
          <tr>
            <th style={{ border: '1px solid #ddd', padding: '10px' }}>ID</th>
            <th style={{ border: '1px solid #ddd', padding: '10px' }}>Name</th>
            <th style={{ border: '1px solid #ddd', padding: '10px' }}>Email</th>
            <th style={{ border: '1px solid #ddd', padding: '10px' }}>Age</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map((item) => (
            <tr key={item.id}>
              <td style={{ border: '1px solid #ddd', padding: '10px' }}>
                {item.id}
              </td>
              <td style={{ border: '1px solid #ddd', padding: '10px' }}>
                {item.name}
              </td>
              <td style={{ border: '1px solid #ddd', padding: '10px' }}>
                {item.email}
              </td>
              <td style={{ border: '1px solid #ddd', padding: '10px' }}>
                {item.age}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default DatabaseView;

步驟

建立 React 專案，例如使用 create-react-app。
將程式碼儲存為 DatabaseView.js。
在 App.js 中匯入並使用 <DatabaseView />。
啟動開發伺服器以檢視結果。

JavaScript 畫圖

Canvas 與 Context

Canvas 的基本概念

HTML5 的 <canvas> 元素是一個可供使用 JavaScript 繪圖的區域，允許在網頁上呈現 2D 和 3D 圖像。它是一個容器，可以透過程式碼進行繪製操作，如畫線、圖形和圖片，適合遊戲、圖形編輯等需要即時生成的應用。

以下是 canvas 元素的基本語法：

<canvas id="myCanvas" width="500" height="500"></canvas>

getContext 的作用

要在 canvas 元素上繪製內容，必須使用 getContext 方法。這個方法允許取得繪圖的上下文，目前最常用的選項是 "2d"。它會返回一個 CanvasRenderingContext2D 物件，提供許多繪圖方法。

例如，以下 JavaScript 程式碼可以取得 canvas 的 2D 繪圖上下文：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

基本繪圖操作

使用 getContext("2d") 獲得的繪圖上下文，能夠進行如畫線、畫矩形、填充顏色等基本繪圖操作。例如：

畫線：使用 moveTo(x, y) 和 lineTo(x, y) 方法來定義線段，並使用 stroke() 畫出線條。
畫矩形：使用 fillRect(x, y, width, height) 繪製填滿的矩形，或 strokeRect(x, y, width, height) 繪製空心矩形。
填充顏色：可以使用 fillStyle 設定填充顏色，例如 ctx.fillStyle = "blue";

範例程式碼：

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100); // 畫一個藍色矩形
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.stroke(); // 畫一條紅色線條

清除 Canvas

若要清除 canvas 中的圖像，可以使用 clearRect(x, y, width, height) 方法。例如，清除整個畫布的程式碼為：

ctx.clearRect(0, 0, canvas.width, canvas.height);

動態繪圖與動畫

利用 requestAnimationFrame() 可以實現平滑的動畫效果。透過每次更新畫面前先清除上一幀的內容，可以繪製出動態效果。以下是簡單的動畫範例：

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, 50, 50); // 繪製方塊
x += 1; // 更新位置
requestAnimationFrame(draw);
}
draw();

Canvas 使用注意事項

Canvas 的尺寸應設定在 HTML 中，若使用 CSS 改變大小可能導致畫面失真。此外，canvas 並非為了代替高解析度的影像，而是用來即時生成和動態繪圖。

SVG

概念

SVG（Scalable Vector Graphics）是一種基於 XML 的向量圖形格式，可在網頁中繪製線條、圖形、文字，並支援縮放與動畫。與點陣圖不同，SVG 在放大縮小時不會失真，適合圖表、ICON、地圖與流程圖等應用。

特點

純文字格式，可編輯與壓縮
可用 CSS/JavaScript 操作
支援事件處理與動畫
可與 HTML5 整合

基本語法範例


<svg width="200" height="100">
  <rect x="10" y="10" width="50" height="50" fill="blue" />
  <circle cx="100" cy="35" r="25" fill="green" />
  <line x1="150" y1="10" x2="190" y2="60" stroke="red" stroke-width="2" />
  <text x="10" y="90" font-size="14" fill="black">這是SVG</text>
</svg>

常用元素

<rect>：矩形
<circle>：圓形
<ellipse>：橢圓
<line>：線段
<polyline>、<polygon>：折線與多邊形
<path>：自由繪圖路徑（可畫曲線、複雜形狀）
<text>：文字

事件與互動


<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="orange" onclick="alert('你點到了圓形')" />
</svg>

動畫與樣式

可透過 CSS 或 <animate> 標籤製作動畫：


<circle cx="30" cy="50" r="20" fill="blue">
  <animate attributeName="cx" from="30" to="170" dur="2s" repeatCount="indefinite" />
</circle>

與 JavaScript 結合


<svg id="mysvg" width="200" height="100">
  <circle id="c1" cx="50" cy="50" r="30" fill="gray" />
</svg>

<script>
  document.getElementById("c1").setAttribute("fill", "red");
</script>

應用範圍

圖表（可搭配 D3.js）
UI 圖示（iconfont、responsive icon）
流程圖、UML、網路拓撲圖
地圖與動畫插畫

結論

SVG 是網頁前端中非常重要的圖形標準之一，具有高解析度、互動性與動畫性，並可與 HTML/CSS/JavaScript 無縫整合。適合需要精確、縮放性強的圖形表現場景。

使用 SVG 定義與重複使用圖案

目的

在 SVG 中可透過 <symbol> 或 <defs> 定義一次圖案，再用 <use> 在其他地方重複引用，節省代碼並提高一致性。

基本語法


<svg width="0" height="0" style="position:absolute">
  <symbol id="star" viewBox="0 0 100 100">
    <polygon points="50,5 61,39 98,39 68,59 79,91 50,70 21,91 32,59 2,39 39,39"
             fill="gold" stroke="black" stroke-width="2"/>
  </symbol>
</svg>

<svg width="200" height="100">
  <use href="#star" x="0" y="0" width="50" height="50"/>
  <use href="#star" x="60" y="0" width="50" height="50" fill="red"/>
  <use href="#star" x="120" y="0" width="50" height="50" fill="blue"/>
</svg>

展示

說明

<symbol>：定義圖案內容，可重複使用
<use>：插入圖案，可指定位置與大小
href：指向 symbol 的 id（舊寫法為 xlink:href）

屬性繼承

<use> 可改變 fill、stroke 等屬性，覆蓋原始定義。

應用範圍

icon 組件庫
圖示地圖（地標、節點重複）
流程圖、架構圖的圖元重用

相容性

<use href="#id"> 為現代寫法（舊版瀏覽器使用 xlink:href）
建議 HTML 中定義 <symbol> 放在 DOM 頂部或絕對隱藏

結論

透過 <symbol> + <use>，SVG 可實現元件化、模組化圖形開發，既可重複使用也方便管理樣式與位置，非常適合圖示設計與資料視覺化應用。

WebGL

概念

WebGL（Web Graphics Library）是一套基於 OpenGL ES 的 JavaScript API，可在瀏覽器中使用 HTML5 的 <canvas> 元素進行 2D 和 3D 圖形的硬體加速繪製，不需要任何外掛。

特點

基於 OpenGL ES 2.0 標準
直接使用 GPU 繪圖，效能佳
可與 HTML、CSS、JavaScript 整合
支援著色器（Shader）語言 GLSL

簡單範例

繪製一個有顏色的三角形：


<canvas id="glCanvas" width="300" height="300"></canvas>
<script>
  const canvas = document.getElementById('glCanvas');
  const gl = canvas.getContext('webgl');

  if (!gl) {
    alert("你的瀏覽器不支援 WebGL");
  }

  const vertexShaderSource = `
    attribute vec2 a_position;
    void main() {
      gl_Position = vec4(a_position, 0, 1);
    }
  `;

  const fragmentShaderSource = `
    void main() {
      gl_FragColor = vec4(1, 0, 0, 1); // 紅色
    }
  `;

  function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    return shader;
  }

  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  gl.useProgram(program);

  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    0, 1,
   -1, -1,
    1, -1
  ]), gl.STATIC_DRAW);

  const posAttribLoc = gl.getAttribLocation(program, "a_position");
  gl.enableVertexAttribArray(posAttribLoc);
  gl.vertexAttribPointer(posAttribLoc, 2, gl.FLOAT, false, 0, 0);

  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

顯示

應用範圍

3D 模型與遊戲引擎（如：Three.js、Babylon.js）
科學視覺化、數據圖表（如：Plotly.js 3D 模型）
AR/VR 整合、WebXR 技術基礎

常用套件

Three.js：高階封裝 WebGL 的 3D 圖形引擎
Babylon.js：功能完整的 3D 遊戲引擎
regl / TWGL.js：輕量化 WebGL 輔助函式庫

結論

WebGL 為網頁開發者提供 GPU 加速的 3D 圖形繪製能力，是現代 Web 遊戲、數位藝術、模擬與視覺化的核心技術之一。雖然原生 WebGL 較為底層，但可搭配高階函式庫簡化開發流程。

Spirograph

什麼是 Spirograph？

Spirograph 是一種用於創建複雜圖形的幾何圖案，其原理是利用兩個圓形的轉動來描繪出多重圓形和波浪形的曲線。這種圖形通常用於藝術創作和教育，能夠展現數學中的幾何美感。

在 HTML5 中實作 Spirograph

以下是使用 HTML5 的 <canvas> 元素和 JavaScript 實現 Spirograph 的範例：

R: r: d: 速度:

向量圖 JavaScript 程式庫比較

程式庫名稱	語法表達性	圖形類型	適合對象	是否支援互動	是否支援動畫
Mermaid.js	極高（使用類 Markdown 語法）	流程圖、序列圖、甘特圖、ER圖、Class圖	文件視覺化、快速原型	有限支援	部分支援
D3.js	中等（需要理解資料綁定與 DOM 操作）	幾乎所有圖形（自訂性極高）	進階資料視覺化開發者	完整支援	完整支援
Cytoscape.js	高（以 JSON 定義節點與邊）	網路圖、流程圖	生物資訊、社交網絡分析	完整支援	部分支援
Vega / Vega-Lite	高（使用 JSON 宣告式描述圖表）	統計圖表（條狀圖、散佈圖等）	資料科學、儀表板設計	支援	部分支援
Graphviz via Viz.js	高（DOT 語法類似文字編程）	流程圖、圖論結構	學術用途、快速架構圖	不支援	不支援
JSXGraph	高（幾何語意清晰）	幾何圖形、座標圖	數學教育	支援	支援

使用 HTML 繪製 UML 圖的範例

1. 使用 SVG 畫出簡單的類別圖

在 HTML 中，您可以使用 <svg> 標籤來繪製基本的 UML 類別圖。以下是一個範例，展示如何使用矩形和文字來代表一個簡單的類別。

<svg width="300" height="200">
    <rect x="50" y="20" width="200" height="30" fill="lightblue" stroke="black"/>
    <text x="60" y="40" font-family="Arial" font-size="16">Class Name</text>
    
    <rect x="50" y="50" width="200" height="50" fill="white" stroke="black"/>
    <text x="60" y="70" font-family="Arial" font-size="14">+ attribute1 : Type</text>
    <text x="60" y="90" font-family="Arial" font-size="14">+ attribute2 : Type</text>
    
    <rect x="50" y="100" width="200" height="50" fill="white" stroke="black"/>
    <text x="60" y="120" font-family="Arial" font-size="14">+ method1() : ReturnType</text>
    <text x="60" y="140" font-family="Arial" font-size="14">+ method2() : ReturnType</text>
</svg>

2. 使用 HTML 和 CSS 自訂 UML 元素

可以利用 HTML 和 CSS 的樣式來定義不同的 UML 元件。下面的範例展示如何使用 <div> 和 CSS 來繪製一個類別框，並調整其樣式來模仿 UML 類別圖的結構。

<style>
.class-box {
    width: 200px;
    border: 1px solid black;
    margin: 10px;
}
.header {
    background-color: lightblue;
    text-align: center;
    font-weight: bold;
}
.attributes, .methods {
    padding: 10px;
    border-top: 1px solid black;
}
</style>

<div class="class-box">
    <div class="header">ClassName</div>
    <div class="attributes">
        + attribute1 : Type <br>
        + attribute2 : Type
    </div>
    <div class="methods">
        + method1() : ReturnType <br>
        + method2() : ReturnType
    </div>
</div>

+ attribute1 : Type
+ attribute2 : Type

+ method1() : ReturnType
+ method2() : ReturnType

3. 使用 mermaid.js 繪製更複雜的 UML 圖

為了在 HTML 中繪製更複雜的 UML 圖，可以使用 mermaid.js 這樣的外部 JavaScript 庫。它支援多種 UML 圖表，並且可以直接嵌入 HTML。首先需要引用 mermaid.js，然後使用 <pre> 標籤撰寫 UML 圖表定義。

<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>

<pre class="mermaid">
classDiagram
    Class01 <|-- Class02 : Inheritance
    Class01 : +method1() void
    Class02 : +method2() void
    Class03 : +attribute int
    Class04 : +method() void
</pre>

classDiagram
    Class01 <|-- Class02 : Inheritance
    Class01 : +method1() void
    Class02 : +method2() void
    Class03 : +attribute int
    Class04 : +method() void

這樣的範例可以輕鬆地使用 mermaid.js 繪製出更複雜且清晰的 UML 圖，並且支援不同的圖表類型。

使用 Mermaid.js 繪製複雜 UML 圖的範例

範例 1: 複雜的類別關係圖

此範例展示類別之間的繼承、組合、聚合和關聯。

<pre class="mermaid">
classDiagram
    Animal <|-- Mammal
    Animal <|-- Bird
    Mammal o-- Dog : has-a
    Bird --> Wing : has-a
    class Animal {
        +String name
        +int age
        +eat() void
    }
    class Mammal {
        +hasFur() bool
    }
    class Dog {
        +bark() void
    }
    class Bird {
        +fly() void
    }
    class Wing {
        +wingSpan int
    }
</pre>

classDiagram
    Animal <|-- Mammal
    Animal <|-- Bird
    Mammal o-- Dog : has-a
    Bird --> Wing : has-a
    class Animal {
        +String name
        +int age
        +eat() void
    }
    class Mammal {
        +hasFur() bool
    }
    class Dog {
        +bark() void
    }
    class Bird {
        +fly() void
    }
    class Wing {
        +wingSpan int
    }

說明：此範例展示了多種關係：

繼承：Animal 是 Mammal 和 Bird 的超類別。
組合：Mammal 與 Dog 的組合關係由 o-- 表示。
聚合：Bird 與 Wing 的聚合關係由 --> 表示。
屬性與方法：每個類別包含屬性和方法，顯示更清晰的結構。

範例 2: 關聯與多重性

此範例展示如何在類別之間表示多重性（1..*、0..1 等）和角色。

<pre class="mermaid">
classDiagram
    Customer "1" --> "0..*" Order : places
    Order "1" --> "1" Payment : includes
    class Customer {
        +String name
        +String email
        +placeOrder() void
    }
    class Order {
        +int orderId
        +String date
        +calculateTotal() float
    }
    class Payment {
        +float amount
        +String method
        +processPayment() void
    }
</pre>

classDiagram
    Customer "1" --> "0..*" Order : places
    Order "1" --> "1" Payment : includes
    class Customer {
        +String name
        +String email
        +placeOrder() void
    }
    class Order {
        +int orderId
        +String date
        +calculateTotal() float
    }
    class Payment {
        +float amount
        +String method
        +processPayment() void
    }

說明：

多重性：Customer 可以擁有多個 Order，每個 Order 都對應一個 Payment。
角色：每個關係皆有角色描述（如 places 和 includes）。

範例 3: 介面與抽象類別

此範例展示如何在 Mermaid.js 中定義介面和抽象類別。

<pre class="mermaid">
classDiagram
    class Shape {
        <<_abstract_>>
        +area() float
        +perimeter() float
    }
    Shape <|-- Rectangle
    Shape <|-- Circle
    class Rectangle {
        +width float
        +height float
        +area() float
        +perimeter() float
    }
    class Circle {
        +radius float
        +area() float
        +perimeter() float
    }
</pre>

classDiagram
    class Shape {
        <<_abstract_>>
        +area() float
        +perimeter() float
    }
    
    Shape <|-- Rectangle
    Shape <|-- Circle
    
    class Rectangle {
        +width : float
        +height : float
        +area() float
        +perimeter() float
    }
    
    class Circle {
        +radius : float
        +area() float
        +perimeter() float
    }

說明：

抽象類別：Shape 是抽象類別，以 <<abstract>> 標記。
繼承：Rectangle 和 Circle 繼承了 Shape 並實現其方法。

範例 4: 複雜的類別與介面實作

此範例展示類別繼承和介面實作的混合用法。

<pre class="mermaid">
classDiagram
    class Flyable {
        <<_interface_>>
        +fly() void
    }
    class Bird {
        +String species
        +String color
        +sing() void
    }
    class Airplane {
        +String model
        +int capacity
        +takeOff() void
    }
    Bird ..|> Flyable : implements
    Airplane ..|> Flyable : implements
</pre>

classDiagram
    class Flyable {
        <<_interface_>>
        +fly() void
    }
    class Bird {
        +String species
        +String color
        +sing() void
    }
    class Airplane {
        +String model
        +int capacity
        +takeOff() void
    }
    Bird ..|> Flyable : implements
    Airplane ..|> Flyable : implements

說明：

介面：Flyable 為介面，並定義 fly() 方法。
介面實作：Bird 和 Airplane 都實作了 Flyable 介面，使用 ..|> 符號表示。

Mermaid 測試工具

生成結果

    flowchart TD
    A[開始] --> B{是否需要繼續？}
    B -- 是 --> C[執行操作]
    B -- 否 --> D[結束]
    C --> D

如何檢查 Mermaid 語法錯誤

1. 使用 Mermaid Live Editor

Mermaid 提供官方的 Mermaid Live Editor，可以即時測試並檢查語法錯誤。將 Mermaid 語法貼上後，如果有錯誤，編輯器會顯示具體錯誤訊息，讓你更快地排除問題。

2. 減少複雜性進行測試

如果你的 Mermaid 圖表過於複雜，建議分段測試。例如，先移除一些類別或關係，只留下最基本的結構，逐步增加元素，這樣可以更快找出可能的語法錯誤來源。

3. 確認 Mermaid.js 版本

Mermaid.js 的不同版本可能對語法有不同的支持。確保你使用的是最新版，或者在測試環境中確認你的 Mermaid.js 版本是否支持使用的語法功能。

4. 檢查常見錯誤

屬性或方法格式：確保屬性和方法的格式正確，例如使用 +attribute : type 來標示屬性。
空格和符號：檢查空格、特殊符號（如 <|-- 或 -->）是否正確，這些符號用於表示類別關係。
避免無效標記：例如，某些編輯器可能不支持 <<abstract>> 或其它特殊標記，建議逐一移除或修改來確認是否造成錯誤。

5. 使用開發者工具查看錯誤訊息

在瀏覽器的開發者工具中查看 JavaScript console，如果 Mermaid 圖表未正確生成，console 中可能會顯示具體錯誤訊息或提示，幫助你找出語法錯誤。

6. 參考官方文件

Mermaid 官方文件提供詳細的語法指南，可以幫助你確認語法使用是否正確。官方文件位於 Mermaid.js 官方網站。

流程圖

流程圖概述

以下是一個簡單的流程圖範例，說明決策與行動之間的邏輯關係。

流程圖範例

flowchart TD
    A[開始] --> B{是否需要繼續？}
    B -- 是 --> C[執行操作]
    B -- 否 --> D[結束]
    C --> D

範例說明

開始：流程從「開始」節點啟動。
決策：檢查是否需要繼續進行操作。
執行操作：如果答案是「是」，則執行相應的操作。
結束：流程最終結束，不論是否執行操作。

如何使用

將上述流程圖語法粘貼到支持 Mermaid 的工具（如 Markdown 編輯器或 Mermaid 在線工具）中，即可生成出圖形。

Mermaid.js 縮放滑桿函式庫

功能說明

此 JavaScript 函式庫可為 Mermaid.js 圖表加入可縮放的滑桿功能，使用者可透過 <input type="range"> 控制圖表的縮放比例。函式庫使用 transform: scale() 實現視覺縮放，無需重新渲染 Mermaid。

函式庫程式碼（mermaidZoomSlider.js）


// mermaidZoomSlider.js
export function setupMermaidZoomSlider({
  sliderId = "zoomSlider",
  diagramContainerId = "mermaidContainer",
  min = 0.1,
  max = 3,
  step = 0.1,
  initial = 1
} = {}) {
  window.addEventListener("load", () => {
    const slider = document.getElementById(sliderId);
    const container = document.getElementById(diagramContainerId);

    if (!slider || !container) {
      console.warn("Mermaid zoom slider: Missing slider or container element");
      return;
    }

    // 初始化 slider 屬性
    slider.min = min;
    slider.max = max;
    slider.step = step;
    slider.value = initial;

    // 設定初始縮放
    container.style.transformOrigin = "top left";
    container.style.transform = `scale(${initial})`;

    // 事件監聽：縮放
    slider.addEventListener("input", () => {
      const scale = parseFloat(slider.value);
      container.style.transform = `scale(${scale})`;
    });
  });
}

使用方式


<!-- HTML -->
<div>
  <input type="range" id="zoomSlider">
</div>
<div id="mermaidContainer">
  <pre class="mermaid">
    graph TD;
      A-->B;
      B-->C;
  </pre>
</div>

<!-- JavaScript 模組引入 -->
<script type="module">
  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
  import { setupMermaidZoomSlider } from "./mermaidZoomSlider.js";

  mermaid.initialize({ startOnLoad: true });

  setupMermaidZoomSlider({
    sliderId: "zoomSlider",
    diagramContainerId: "mermaidContainer",
    min: 0.2,
    max: 3,
    step: 0.1,
    initial: 1
  });
</script>

參數說明

sliderId：指定滑桿的 HTML 元素 ID。
diagramContainerId：Mermaid 圖表的容器 ID。
min / max / step：滑桿的範圍與間距。
initial：初始縮放倍率。

建議

若需要拖曳移動、縮放重設等進階功能，可進一步擴充此函式庫，例如整合滑鼠拖拉與縮放重設按鈕。

Mermaid.js 線條的各種樣式

基本線條語法

在 Mermaid.js 的圖中使用 -->、===> 等標記來建立節點之間的連線，不同的符號代表不同的線條樣式。

常見線條樣式

語法	樣式	說明
`-->`	──>	一般實線箭頭
`--->`	───>	與 `-->` 相同（語法容錯）
`-- text -->`	── text ──>	帶文字標籤的實線箭頭
`-.->`	-.->	虛線箭頭
`-. text .->`	-. text .->	帶文字的虛線箭頭
`==>`	===>	粗實線箭頭
`== text ==>`	== text ==>	帶文字的粗線箭頭
`--o`	──○	圓頭無方向線（class diagram 常用）
`--\|>`	──▷	實心箭頭（class diagram 常用）
`--> \| label \|`	──>（帶雙側文字）	Mermaid 支援樣式註解標籤

使用範例


graph TD
  A[開始] --> B[步驟一]
  B -.-> C[非同步處理]
  C ==> D[強烈依賴]
  D -- text --> E[帶文字的連線]
  E --o F[圓頭]
  F --|> G[實心箭頭]

其他說明

節點之間可加入說明文字，提升可讀性
線條也可使用樣式進行 CSS 自訂（搭配 classDef）
流程圖（graph）、類別圖（classDiagram）、狀態圖等樣式略有差異

結論

Mermaid.js 提供多種線條語法樣式，讓使用者能清晰表達流程、邏輯與關聯，透過實線、虛線、粗線與圖示端點等搭配，可建立簡潔又結構分明的圖表。

D3.js 介紹

什麼是 D3.js？

D3.js (Data-Driven Documents) 是一個基於 JavaScript 的開源程式庫，用於將數據轉換為動態且互動的可視化效果。它使用網頁標準技術如 SVG、HTML 和 CSS，提供強大的工具來處理數據和繪製圖形。

D3.js 的特色

數據驅動： 提供了一套功能強大的 API，允許開發者根據數據生成 DOM 元素，並動態更新圖表。
靈活性： 支持多種可視化類型，包括條形圖、折線圖、樹狀圖、地圖等，並能完全自訂樣式。
基於標準： 使用 SVG 和 Canvas 等標準技術，適用於所有現代瀏覽器。
動畫與互動性： 支持平滑的過渡效果，並能添加互動功能，如縮放、拖曳和點擊事件。

D3.js 的主要功能

選擇元素： 使用類似 CSS 的選擇器來選擇和操作 DOM 元素，例如：d3.select() 和 d3.selectAll()。
數據綁定： 將數據綁定到 DOM 元素，並根據數據更新視圖。
縮放與比例尺： 提供縮放工具和比例函數，方便數據映射到像素。
繪製圖形： 使用 SVG 路徑和形狀工具創建各種圖表，如圓形、矩形和曲線。
過渡效果： 內建動畫功能，支持平滑的數據變化。

應用範例

D3.js 被廣泛應用於各種數據可視化場景，例如：

折線圖和柱狀圖，用於顯示統計數據。
地圖可視化，用於展示地理資訊數據。
網絡圖，用於分析關聯或社交網絡。
動態更新的儀表板，用於監控數據變化。

學習資源

要學習 D3.js，可以參考以下資源：

D3.js 官方網站 - 提供完整的 API 文檔和範例。
Observable - 一個專門用於分享 D3.js 代碼和範例的平台。
線上課程與書籍，例如 《Interactive Data Visualization for the Web》。

結論

D3.js 是一個功能強大且靈活的數據可視化工具，適合需要高度自訂化圖表和互動效果的開發者。雖然學習曲線稍高，但一旦掌握，其應用潛力無窮。

D3.js 樹狀圖範例

範例說明

本範例使用 D3.js 繪製一個簡單的樹狀圖，展示如何將階層結構資料視覺化。以下是主要步驟：

建立階層結構資料。
使用 D3.js 的 tree() 函數生成樹狀佈局。
繪製節點（圓形）和節點之間的連線（路徑）。

範例程式碼


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>D3.js Tree Diagram Example</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    .node circle {
      fill: steelblue;
    }
    .node text {
      font: 12px sans-serif;
    }
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 1.5px;
    }
  </style>
</head>
<body>
  <script>
    const width = 800;
    const height = 600;

    const treeData = {
      name: "CEO",
      children: [
        {
          name: "CTO",
          children: [
            { name: "Engineering Manager" },
            { name: "Product Manager" }
          ]
        },
        {
          name: "CFO",
          children: [
            { name: "Accountant" },
            { name: "Finance Analyst" }
          ]
        }
      ]
    };

    const svg = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(40,40)");

    const treeLayout = d3.tree().size([height - 100, width - 160]);

    const root = d3.hierarchy(treeData);
    treeLayout(root);

    svg.selectAll(".link")
      .data(root.links())
      .enter()
      .append("path")
      .attr("class", "link")
      .attr("d", d3.linkHorizontal()
        .x(d => d.y)
        .y(d => d.x)
      );

    const nodes = svg.selectAll(".node")
      .data(root.descendants())
      .enter()
      .append("g")
      .attr("class", "node")
      .attr("transform", d => `translate(${d.y},${d.x})`);

    nodes.append("circle").attr("r", 5);

    nodes.append("text")
      .attr("dy", 3)
      .attr("x", d => d.children ? -10 : 10)
      .style("text-anchor", d => d.children ? "end" : "start")
      .text(d => d.data.name);
  </script>
</body>
</html>

結果展示

運行此程式碼後，您將看到一個樹狀圖：

樹的根節點位於左側（CEO）。
子節點（如 CTO 和 CFO）向右展開。
每個節點由一個圓形表示，節點名稱顯示於旁。

應用與擴展

此範例可以擴展至更複雜的階層結構，或調整樣式以適應不同需求。例如：

更改節點樣式（如顏色或大小）。
加入互動功能（如點擊節點展開子節點）。
處理來自外部資料源的動態數據。

矩形樹狀圖 Treemapping

概念說明

矩形樹狀圖是一種用巢狀矩形方式來顯示階層資料的視覺化技術。每個矩形的面積代表一個數值大小，例如銷售額或檔案容量，而每個矩形也可以進一步巢狀，用來表示子分類。

應用場景

檔案系統中檔案或資料夾大小比較
公司預算或支出分佈
市場佔有率或產品銷售分佈
網站流量或內容分類分析

範例 (使用 D3.js 製作)

優點

能有效利用空間顯示大量資料
一目了然的數值大小比較
易於理解階層結構與分佈

注意事項

當層級過多或區塊過小時，文字標示可能不清楚
不適合精確比較非常接近的數值
建議搭配互動式工具提高可讀性

Cytoscape.js 網路圖範例

基本用法

Cytoscape.js 是用來繪製網路圖（Graph）的 JavaScript 函式庫，使用 JSON 定義節點與邊，語法簡潔，支援互動與樣式客製化。

簡單網路圖示例

說明

elements：定義節點（node）與邊（edge）資料
style：控制樣式，如顏色、箭頭、標籤
layout：圖形排列方式（可選 grid、circle、cose 等）

Cytoscape.js 不同應用範例

1. 環狀排列圖（Circle Layout）

2. 拖曳與點擊互動

3. 分群與樣式（Style by Class）

說明

circle layout：適合單一中心節點關係圖
互動事件：可偵測滑鼠點擊與拖曳
分類樣式：可透過 classes 定義節點群組並指定不同樣式

適合繪製電路圖的 JavaScript 向量圖程式庫

程式庫名稱	適用性	特點	是否支援互動	說明
JointJS	★★★★★	繪圖自由度高、可擴充電路元件符號	✔️	可繪製邏輯電路、流程圖，免費版功能已足夠
GoJS	★★★★☆	強大的圖形與資料模型支援	✔️	非自由軟體，但有免費試用；常用於產線圖與電路圖
SVG.js	★★★☆☆	輕量、支援精準繪圖	✔️	需自行設計元件（電阻、電容等），適合細部控制
Konva.js	★★★☆☆	Canvas 與 SVG 都支援	✔️	適合需要拖曳、點擊等互動行為的設計工具
ELK.js	★★☆☆☆	自動佈局優秀	✖️	只負責佈局演算法（可與 JointJS 搭配）

JointJS 顯示基本電路圖元件

3D 方程式繪圖

功能說明

本工具可將以 x 和 y 為自變數的 z = f(x, y) 方程式繪製成 3D 曲面圖，並提供滑鼠操作旋轉、縮放、平移的互動功能。

HTML 結構


<div id="plot3d" style="width:100%; height:600px;"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="module">
  // 定義 z = f(x, y) 的函數（可更換為任意方程式）
  function computeZ(x, y) {
    return Math.sin(x) * Math.cos(y);  // z = sin(x) * cos(y)
  }

  const xRange = numeric.linspace(-5, 5, 50);
  const yRange = numeric.linspace(-5, 5, 50);

  // 建立 z 資料
  const zValues = xRange.map(x =>
    yRange.map(y => computeZ(x, y))
  );

  const data = [{
    type: 'surface',
    x: xRange,
    y: yRange,
    z: zValues,
    colorscale: 'Viridis'
  }];

  const layout = {
    title: 'z = sin(x) * cos(y)',
    autosize: true,
    scene: {
      xaxis: { title: 'X 軸' },
      yaxis: { title: 'Y 軸' },
      zaxis: { title: 'Z 軸' }
    }
  };

  Plotly.newPlot('plot3d', data, layout);
</script>

<!-- numeric.js 用來產生 linspace 數列 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>

操作說明

滑鼠左鍵拖曳：旋轉視角
滑鼠右鍵拖曳：平移畫面
滑鼠滾輪：放大縮小

函數可替換範例

z = Math.sin(x * y) → 波紋狀
z = x * x - y * y → 鞍形曲面
z = Math.exp(-(x * x + y * y)) → 高斯峰

說明

此範例使用 Plotly.js 提供互動式 3D 視覺化，並搭配 numeric.js 輔助產生數值網格。你可以自由變更 computeZ 函數中的內容來畫出任意的三維曲面。

3D化學結構繪製的JavaScript函式庫

3Dmol.js

3Dmol.js 是一個開源且專為瀏覽器設計的 WebGL 化學分子可視化函式庫，可直接在網頁中繪製分子結構。

支援格式：SMILES、PDB、SDF、XYZ、Mol2 等
特點：輕量、無需外部插件、互動性佳
網址：https://3dmol.org

<div id="viewer" style="width:400px;height:400px;"></div>
<script src="https://3dmol.org/build/3Dmol-min.js"></script>
<script>
  const viewer = $3Dmol.createViewer("viewer", { backgroundColor: "white" });
  viewer.addModel("C1=CC=CC=C1", "smi");  // 苯的 SMILES 結構
  viewer.setStyle({}, {stick: {}, sphere: {scale: 0.3}});
  viewer.zoomTo();
  viewer.render();
</script>

ChemDoodle Web Components

ChemDoodle 提供 2D 與 3D 結構繪圖，支援多種化學格式，適用於教學與網頁應用。

支援格式：MOL、SDF、SMILES、InChI 等
特點：功能完整，可整合光譜圖與結構繪圖（需授權）
網址：https://web.chemdoodle.com

JSmol

JSmol 是 Jmol 的 JavaScript 版本，適合顯示大分子如蛋白質或晶體結構。

支援格式：PDB、CIF、XYZ 等
特點：功能強大，可執行完整的 Jmol 指令語言
網址：http://wiki.jmol.org/index.php/JSmol

Mol*

Mol*（MolStar）是由 RCSB PDB 開發的高階結構視覺化工具，專為生物大分子設計。

支援格式：PDB、mmCIF 等
特點：能呈現電子密度圖、結構比對與高解析圖像
網址：https://molstar.org

比較表

函式庫	主要用途	是否開源	是否需授權
3Dmol.js	通用3D分子視覺化	✅	❌
ChemDoodle	2D與3D教學、展示	部分	✅
JSmol	學術研究與教學	✅	❌
Mol*	蛋白質與生物分子視覺化	✅	❌

3Dmol.js 顯示苯分子

使用說明

此範例使用 3Dmol.js 並採用 XYZ 格式 定義苯分子的原子座標，以正確顯示 3D 分子結構。

如果使用 SMILES 格式（"smi"）會出現錯誤 Unknown format: smi，因為該格式在部分 3Dmol.js 版本中未被支援。

使用步驟

將以下程式儲存為 benzene.html。
使用本地 HTTP 伺服器（例如 Python 的 python -m http.server）開啟。
在瀏覽器中進入 http://localhost:8000 檢視結果。

HTML 程式碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>3Dmol.js 渲染苯分子</title>
  <script src="https://3dmol.org/build/3Dmol-min.js"></script>
  <style>
    #viewer {
      width: 600px;
      height: 600px;
      position: relative;
      border: 1px solid #aaa;
    }
  </style>
</head>
<body>

<h2>3Dmol.js 苯分子展示 (XYZ 格式)</h2>
<div id="viewer"></div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const viewer = $3Dmol.createViewer("viewer", { backgroundColor: "white" });

    const xyzData = `
12
benzene
C       0.0000    1.3968    0.0000
H       0.0000    2.4903    0.0000
C      -1.2096    0.6984    0.0000
H      -2.1471    1.2451    0.0000
C      -1.2096   -0.6984    0.0000
H      -2.1471   -1.2451    0.0000
C       0.0000   -1.3968    0.0000
H       0.0000   -2.4903    0.0000
C       1.2096   -0.6984    0.0000
H       2.1471   -1.2451    0.0000
C       1.2096    0.6984    0.0000
H       2.1471    1.2451    0.0000
`;

    viewer.addModel(xyzData, "xyz");
    viewer.setStyle({}, {stick: {}, sphere: {scale: 0.3}});
    viewer.zoomTo();
    viewer.render();
  });
</script>

</body>
</html>

注意事項

3Dmol.js 不一定支援 SMILES（"smi"）格式，建議改用 XYZ 或 SDF。
WebGL 必須在瀏覽器中啟用，否則畫面可能為空白。
請勿直接以 file:// 開啟 HTML，建議使用本地 HTTP 伺服器。

3Dmol.js 苯分子展示 (XYZ 格式)

聲音 in Web

JavaScript 播放 do re mi 使用 MIDI API

說明

要在瀏覽器中播放指定的 MIDI 音色（例如吉他），可使用 Web MIDI API 或更簡單的是使用 Web Audio API 搭配 SoundFont 播放器，如 SoundFont Player 套件 soundfont-player。

範例：用吉他音色播放 Do Re Mi


<script src="https://unpkg.com/[email protected]/dist/soundfont-player.js"></script>
<button onclick="playDoReMi()">播放 Do Re Mi</button>

<script>
async function playDoReMi() {
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const player = await Soundfont.instrument(audioCtx, 'acoustic_guitar_nylon');

  const now = audioCtx.currentTime;
  player.play('C4', now);        // Do
  player.play('D4', now + 0.5);  // Re
  player.play('E4', now + 1);    // Mi
}
</script>

說明

C4, D4, E4：代表 Do Re Mi
acoustic_guitar_nylon：SoundFont 的吉他音色（也可改為 electric_guitar_jazz 等）
每個音延遲 0.5 秒依序播放

支援的吉他音色

acoustic_guitar_nylon
acoustic_guitar_steel
electric_guitar_jazz
electric_guitar_clean
electric_guitar_muted
overdriven_guitar
distortion_guitar
guitar_harmonics

結論

使用 soundfont-player 搭配 Web Audio API 能輕鬆實現 MIDI 級別的樂器播放功能，不需要安裝任何插件。只要指定音色與音高，即可快速實作如「do re mi」的音階旋律。

JavaScript 播放 Do Re Mi 使用 AudioContext 合成器

說明

如果無法透過外部 SoundFont 播放音色，我們可以直接使用 Web Audio API 的 OscillatorNode 合成器播放 Do Re Mi，並模擬吉他風格（例如：短促聲音 + 弱音）

範例程式：內建聲音播放 Do Re Mi


<button onclick="playDoReMi()">播放 Do Re Mi</button>

<script>
function playTone(frequency, startTime, duration, context) {
  const osc = context.createOscillator();
  const gain = context.createGain();

  osc.type = "triangle"; // 接近吉他聲的合成波形，可改為 "square"、"sawtooth"
  osc.frequency.value = frequency;

  gain.gain.setValueAtTime(0.2, startTime);
  gain.gain.exponentialRampToValueAtTime(0.001, startTime + duration);

  osc.connect(gain);
  gain.connect(context.destination);

  osc.start(startTime);
  osc.stop(startTime + duration);
}

function playDoReMi() {
  const context = new (window.AudioContext || window.webkitAudioContext)();
  const now = context.currentTime;

  // Do Re Mi 的頻率 (C4, D4, E4)
  playTone(261.63, now,      0.4, context); // C4
  playTone(293.66, now + 0.5, 0.4, context); // D4
  playTone(329.63, now + 1.0, 0.4, context); // E4
}
</script>

特色

使用內建音源產生器，不依賴外部檔案
聲音可即時產生，不會延遲載入
可透過改變 osc.type 或加上濾波器來模擬吉他音色

模擬吉他技巧建議

使用 triangle 或 sawtooth 波形
加上快速音量減衰（gain.exponentialRampToValueAtTime()）模擬撥弦
可加濾波器進一步美化（低通、帶通）

結論

使用純 Web Audio API 是最穩定與相容性最高的方式。若有進階需求，可再加上濾波器、回音、或整合 MIDI 音源。

OscillatorNode 的 type 類型與音色說明

內建的 osc.type 類型

osc.type	中文名稱	音色特性	常見模擬樂器
`"sine"`	正弦波	最純淨、無諧波	純音、音叉、笛子、電子合成音
`"square"`	方波	奇數諧波豐富，音色尖銳	合成器、8-bit 音效、電子鍵盤
`"sawtooth"`	鋸齒波	包含所有諧波，音色厚實明亮	弦樂、吉他、銅管模擬
`"triangle"`	三角波	只有奇數諧波，聲音較柔和	木管、柔和電吉他聲
`"custom"`	自定波形	可自製任意波形	特殊合成音、真實模擬音色

示範使用方式


const osc = audioContext.createOscillator();
osc.type = "sawtooth"; // 可改為 "sine", "square", "triangle", "custom"
osc.frequency.value = 440; // A4
osc.start();

補充：自定波形


const real = new Float32Array([0, 1, 0.5, 0.25]);
const imag = new Float32Array(real.length);
const wave = audioContext.createPeriodicWave(real, imag);

osc.setPeriodicWave(wave);
osc.type = "custom";

結論

不同 osc.type 可模擬不同風格的樂器音色。若想模擬吉他建議從 sawtooth 或 triangle 開始，並搭配 Envelope（音量包絡）、濾波器與回音來細緻調整音質。

使用 WebAudioFont 播放 Do Re Mi 樂句

說明

建議使用WebAudioFont這個開源 JavaScript 庫，它支援超過數千種 MIDI 音色，並包含吉他等樂器音色，音質較佳又易於整合。

快速範例：播放 Do Re Mi（使用鋼琴或吉他音色）

重點解說

採用 WebAudioFont，可挑選豐富 MIDI 樂器音色，可替換為鋼琴、電吉他、木吉他等 :contentReference[oaicite:0]{index=0}。
使用 `queueWaveTable()` 播放指定 MIDI 編號音高（60=C4、62=D4、64=E4）。
加入 `audioContext.resume()` 可解決許多瀏覽器因使用者互動前處於暫停導致無聲問題。

可替換音色

'acoustic_guitar_steel'
'acoustic_guitar_nylon'
'electric_guitar_clean' ⋯⋯

總結

透過 WebAudioFont 結合 Web Audio API，你可以方便地使用真實 MIDI 音色（例如吉他）播放音符，解決純 Oscillator 合成音色單一的問題，同時避免之前 SoundFont 玩家無聲的狀況。

Web API

定義

Web API（Web 應用程式介面）是一種基於 HTTP 協定的介面，允許不同系統之間交換資料，常用於前端與後端之間的溝通。

常見格式

JSON（JavaScript Object Notation）
XML（eXtensible Markup Language）

HTTP 方法

方法	用途
GET	取得資料
POST	新增資料
PUT	更新資料
DELETE	刪除資料

範例

以下是一個使用 JavaScript 發送 GET 請求的範例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('錯誤:', error));

用途

前端與後端通訊
系統整合（例如：串接第三方平台）
跨裝置資料共享（例如：Web、App）

優點

標準化通訊格式
跨平台支援
可重用與擴充

常見應用

Google Maps API
OpenWeather API
LINE Messaging API

查詢中文字符的注音

請輸入一個中文字，系統將會顯示出該字的注音：

注音結果

尚未查詢

使用Google ID登入自己的網頁

什麼是Google ID登入？

Google ID登入是一種基於OAuth 2.0協議的認證方式，允許用戶使用其Google帳戶登入第三方網站或應用程式。這樣的方式不僅提高了用戶的便利性，還能增強安全性，因為用戶不需要記住額外的密碼。

為何選擇Google ID登入？

方便性：用戶只需使用現有的Google帳戶登入，無需創建新帳號。
安全性：Google提供了強大的安全性保障，包括兩步驟驗證和帳戶恢復選項。
統一管理：用戶可以在一個帳號下管理多個應用程式，減少密碼記憶的負擔。

如何在自己的網頁中實現Google ID登入？

建立Google Cloud專案：前往Google Cloud Console，創建一個新的專案。
啟用Google登入API：在專案中，啟用「Google登入」API，並生成OAuth 2.0憑證。
設置授權範圍：在憑證設置中，添加授權的回調URI，這是用戶登入後重定向的地址。
前端實作：在你的網頁中使用Google提供的JavaScript庫，並創建一個登入按鈕。以下是一個簡單的範例：


<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signin_with" data-size="large" data-logo_alignment="left"></div>

5. 驗證用戶身份：

當用戶點擊登入按鈕後，Google會進行身份驗證。成功登入後，使用者的資訊（如電子郵件、名字等）會回傳給你的應用程式，你可以根據這些資訊進行後續的處理。

結論

使用Google ID登入為用戶提供了一種簡單、安全的登入方式，並且減少了管理多個帳號的麻煩。透過整合Google的登入系統，開發者可以提高用戶體驗，並吸引更多的使用者使用其網站或應用程式。

嵌入 YouTube 影片

如何嵌入

若想嵌入 YouTube 影片，請將原本的連結修改為嵌入格式：

<iframe width="560" height="315" src="https://www.youtube.com/embed/{vid}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

其中 {vid} 為 YouTube 影片的 ID。

範例

例如，影片連結為 https://www.youtube.com/watch?v=dQw4w9WgXcQ，則嵌入代碼如下：

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

注意事項

這樣的嵌入格式可以避免 X-Frame-Options 限制，讓影片可以正常顯示在頁面中。

Node.js

什麼是 Node.js

Node.js 是一個基於 Chrome V8 JavaScript 引擎的伺服器端執行環境，讓開發者可以使用 JavaScript 撰寫後端應用程式。

主要特點

非同步與事件驅動架構，適合高併發應用
單執行緒模型，減少資源耗費
大量開源模組可使用（npm）
跨平台支援，能在 Windows、macOS、Linux 上運行

應用場景

即時聊天應用
RESTful API 伺服器
串流服務（如影片、音樂）
單頁應用（SPA）後端支援

常用模組

express：輕量級 Web 應用框架
fs：檔案系統操作
http：建立 HTTP 伺服器
path：處理檔案路徑

範例程式碼

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello, Node.js!');
});

server.listen(3000, () => {
  console.log('伺服器已啟動，監聽埠口 3000');
});

結語

Node.js 為前端開發者帶來統一語言的後端開發環境，提升開發效率並適合建構現代網路應用。

NPM

什麼是 NPM

NPM（Node Package Manager）是 Node.js 的套件管理工具，用來管理 JavaScript 程式碼的函式庫與模組。它讓開發者能夠安裝、分享與版本控制專案所需的各種套件。

基本功能

安裝與解除套件：可安裝本地或全域的 JavaScript 套件。
版本控制：管理各個套件的版本以確保專案穩定性。
套件發布：開發者可將自己開發的模組上傳至 NPM Registry 分享給他人。

常用指令

npm init：初始化一個新的專案並建立 package.json 檔案。
npm install：安裝 package.json 中列出的所有相依套件。
npm install [套件名稱]：安裝指定套件。
npm uninstall [套件名稱]：移除指定套件。
npm update：更新已安裝的套件。

package.json

package.json 是專案的核心檔案，記錄了專案的名稱、版本、描述、依賴套件等資訊，是 NPM 管理套件的基礎。

常見用途

前端框架如 React、Vue 的依賴管理。
後端 Node.js 專案的模組整合。
建置工具（如 Webpack、Babel）套件管理。

NPM 與 Yarn

NPM 是最早也是最廣泛使用的 JavaScript 套件管理工具，但後來也出現了如 Yarn 等替代方案，提供更快的安裝速度與平行處理等功能。兩者皆可使用於大部分的 Node.js 專案。

Electron

什麼是 Electron

Electron 是一個開源框架，讓開發者可以使用 HTML、CSS 和 JavaScript 建立跨平台的桌面應用程式。它結合了 Chromium 和 Node.js，讓網頁技術可以存取本機系統資源。

主要特點

跨平台支援：Windows、macOS、Linux
同時使用前端與 Node.js API
使用 Web 技術製作桌面應用
社群活躍與大量套件支援

適用場景

聊天程式（如 Slack）
程式編輯器（如 Visual Studio Code）
桌面版網頁應用
跨平台系統工具

安裝與初始化

npm install --save-dev electron

最簡範例

// main.js
const { app, BrowserWindow } = require('electron');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

HTML 主頁

<!DOCTYPE html>
<html>
  <body>
    <h1>你好，Electron！</h1>
  </body>
</html>

啟動應用

npx electron .

開發建議

分離主行程與渲染行程
使用 IPC 溝通主程式與前端頁面
打包工具如 electron-builder 可用來產生安裝檔

PHP

PHP資訊網址

PHP手冊

PHP include 路徑優先順序

優先順序	說明
1.	指定的絕對路徑或相對路徑：直接指定檔案的路徑，PHP 會首先尋找此路徑下的檔案。
2	執行檔案的當前目錄：如果沒有指定完整路徑，PHP 會先在執行檔案所在的目錄尋找檔案。
3	include_path 設定：若在執行目錄下找不到檔案，PHP 將檢查 `php.ini` 中設定的 `include_path` 路徑。
4	檔案不存在：若以上所有路徑均無法找到檔案，則會產生一個警告（`Warning`），並返回 `false`。

PHP檢查當前頁面名稱

使用 $_SERVER['PHP_SELF']

可以透過 $_SERVER['PHP_SELF'] 獲取當前執行的檔案路徑，然後使用 basename 取得檔案名稱：

<?php
$current_page = basename($_SERVER['PHP_SELF']);
echo "當前頁面名稱：" . $current_page;
?>

使用 $_SERVER['REQUEST_URI']

透過 $_SERVER['REQUEST_URI'] 獲取完整的URL路徑，然後使用 parse_url 和 basename 解析檔案名稱：

<?php
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$current_page = basename($url_path);
echo "當前頁面名稱：" . $current_page;
?>

區分檔案名稱與附加參數

如果URL包含查詢參數，可以分開處理：

<?php
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$query_string = parse_url($_SERVER['REQUEST_URI'], PHP_URL_QUERY);
$current_page = basename($url_path);

echo "檔案名稱：" . $current_page . "<br>";
echo "查詢參數：" . $query_string;
?>

應用範例

假設當前URL是 https://example.com/page.php?id=123：

當前頁面名稱：page.php
檔案名稱：page.php
查詢參數：id=123

PHP 的 debug_backtrace()

用途

debug_backtrace() 是 PHP 用來取得目前執行堆疊（呼叫路徑）的函式，常用於除錯、記錄呼叫來源。

基本用法


$trace = debug_backtrace();
print_r($trace);

回傳結構說明

debug_backtrace() 會回傳一個陣列，依照呼叫順序排列：

[0]：目前檔案（當前函式或包含的檔案）
[1]：呼叫它的來源（上層檔案或函式）
[2]、[3]...：更上層呼叫

常見欄位

file：檔案路徑
line：程式行號
function：呼叫的函式名稱
class：所屬類別名稱（若有）
args：傳入參數

範例：取得上一層的檔案路徑


function showCaller() {
    $trace = debug_backtrace();
    echo '來自：' . $trace[1]['file'] . ' 第 ' . $trace[1]['line'] . ' 行';
}

include 'subpageA.php'; // subpageA.php 內呼叫 showCaller()

範例：多層包含情境

main.php include subA.php
subA.php include subB.php
subB.php 使用：


$trace = debug_backtrace();
echo '目前檔案：' . $trace[0]['file'] . "\n";
echo '上一層：' . $trace[1]['file'] . "\n"; // subA.php
echo '主頁：' . $trace[2]['file'] . "\n";   // main.php

小結

debug_backtrace() 是查看包含/函式呼叫來源最實用的方法
適合除錯、記錄、權限檢查等需求

解析 URL 查詢字串的名稱與數值

取得查詢字串

在 PHP 中，可以使用 parse_url() 函式搭配 PHP_URL_QUERY 常數，從完整的網址中擷取查詢字串部分。例如：

$url = "https://example.com/page.php?name=John&age=30&lang=php";
$query = parse_url($url, PHP_URL_QUERY); // 結果為 "name=John&age=30&lang=php"

解析查詢字串為鍵值對

使用 parse_str() 函式可以將查詢字串解析為關聯式陣列，其中每一組名稱與數值都會自動解碼並轉換為陣列元素：

parse_str($query, $params);

此時 $params 的內容為：

[
  "name" => "John",
  "age" => "30",
  "lang" => "php"
]

完整範例

<?php
$url = "https://example.com/page.php?name=John&age=30&lang=php";
$query = parse_url($url, PHP_URL_QUERY);
parse_str($query, $params);

foreach ($params as $key => $value) {
    echo "$key = $value\n";
}
?>

執行結果

name = John
age = 30
lang = php

注意事項

parse_url() 只會擷取查詢部分，不會解析內容。
parse_str() 可處理 URL 編碼，例如 %20 會轉為空格。
使用第二個參數來接收結果陣列，可避免將變數寫入全域命名空間。
支援陣列格式，例如 tags[]=php&tags[]=html 將轉為陣列。

如何在 PHP 中獲取 H1 內容

方法 1: 使用 JavaScript

使用 JavaScript 獲取 <h1> 的內容，然後將其發送到 PHP：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>獲取 H1 內容</title>
<script>
    function sendH1Content() {
        var h1Content = document.querySelector('h1').innerText;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'process.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('h1Content=' + encodeURIComponent(h1Content));
    }

    window.onload = sendH1Content;
</script>
</head>
<body>
<h1>這是頁面的標題</h1>
</body>
</html>

PHP 端處理

在 process.php 中接收並處理 H1 內容：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$h1Content = $_POST['h1Content'] ?? '';
// 處理 $h1Content，例如儲存到資料庫或進行其他操作
echo "收到的 H1 內容: " . htmlspecialchars($h1Content);
}
?>

方法 2: 使用伺服器端解析

如果 HTML 文件是靜態的，可以使用 PHP 來讀取該文件並解析它：

<?php
$htmlContent = file_get_contents('path/to/your/file.html');

preg_match('/<h1>(.*?)<\/h1>/', $htmlContent, $matches);
$h1Content = $matches[1] ?? '';

// 處理 $h1Content
echo "H1 內容: " . htmlspecialchars($h1Content);
?>

總結

最常見的方式是使用 JavaScript 在客戶端獲取內容，然後透過 AJAX 將其發送給 PHP 進行處理。伺服器端解析通常用於靜態內容，不建議用於動態生成的頁面。

PHP 的輸出緩衝

簡介

輸出緩衝（Output Buffering）是 PHP 的一項功能，允許將輸出的內容暫存，而不是立即送到瀏覽器。這讓開發者可以在輸出前對內容進行修改、格式化、壓縮等處理。

常用函式

ob_start()：啟用輸出緩衝。
ob_get_contents()：取得目前緩衝的內容。
ob_end_clean()：結束緩衝，並清除不輸出。
ob_end_flush()：結束緩衝並輸出內容。
ob_get_clean()：取得內容並結束緩衝。

範例：修改輸出內容

<?php
ob_start(); // 啟動輸出緩衝

echo "Hello World!";

$content = ob_get_clean(); // 取得並清除緩衝內容
echo strtoupper($content); // 輸出修改後內容：HELLO WORLD!
?>

範例：在所有內容輸出前插入統一樣式

<?php
ob_start();
register_shutdown_function(function () {
    $html = ob_get_clean();
    echo "<div class='container'>" . $html . "</div>";
});
?>

<h1>內容標題</h1>
<p>這是內容段落。</p>

用途

自動處理整體 HTML 輸出（如壓縮、樣式包裝）
防止錯誤訊息干擾 JSON 或 XML 輸出
將輸出先行處理或暫存，稍後再決定是否輸出
合併輸出並壓縮以減少網頁大小

注意事項

使用緩衝後，header() 可在 echo 之後呼叫，因為尚未真正輸出
避免多重開啟與結束緩衝，否則會造成混亂
若緩衝區未結束，可能會造成輸出延遲

自動將圖檔顯示於每個 h2 區塊右側的 PHP 函式庫

功能說明

此 PHP 函式庫會攔截整頁輸出內容，自動尋找每個 <h2> 標題及其下方區塊，並在右側加入對應的圖檔。圖檔依序命名為 h2-1.jpg、h2-2.jpg... 以此類推，需預先放在指定圖檔資料夾中。

使用方法

在 PHP 頁面開頭引用以下程式（例如存成 h2-image-right.php）：

<?php
ob_start();

function add_images_next_to_h2($html) {
    $pattern = '/(<h2.*?>.*?<\/h2>)(.*?)(?=<h2|\z)/is';
    $index = 1;
    return preg_replace_callback($pattern, function($matches) use (&$index) {
        $h2 = $matches[1];
        $body = $matches[2];
        $imgPath = "/images/h2-$index.jpg";
        $imgFile = $_SERVER['DOCUMENT_ROOT'] . $imgPath;

        if (file_exists($imgFile)) {
            $output = "<div style='display: flex; align-items: flex-start; gap: 20px; margin-bottom: 1.5em;'>";
            $output .= "<div style='flex: 1;'>" . $h2 . $body . "</div>";
            $output .= "<img src='$imgPath' style='max-width: 200px; height: auto; border: 1px solid #ccc;'>";
            $output .= "</div>";
        } else {
            $output = $h2 . $body;
        }

        $index++;
        return $output;
    }, $html);
}

register_shutdown_function(function() {
    $html = ob_get_clean();
    echo add_images_next_to_h2($html);
});
?>

圖檔準備

將對應的圖檔依序命名並存放於網站根目錄的 /images/ 資料夾中，例如：

/images/h2-1.jpg
/images/h2-2.jpg
/images/h2-3.jpg

範例使用方式

<?php include "h2-image-right.php"; ?>

<h2>第一段標題</h2>
<p>這是第一段的內容。</p>

<h2>第二段標題</h2>
<p>這是第二段的內容。</p>

注意事項

圖檔順序依照 <h2> 出現的順序對應，請依此命名。
此方法會包裝 <h2> ~ 下方內容 為一個 flex 區塊，適合純內容頁。
若與其他輸出緩衝使用衝突，請確認不要重複 ob_start()。

檢查流量來源是否來自搜尋引擎機器人

1. 使用伺服器日誌

檢查伺服器日誌是辨識搜尋引擎機器人的一個重要方法。以下是一些搜尋引擎機器人的User-Agent範例：

Googlebot: Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
Bingbot: Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)
Baidu Spider: Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)

2. 使用robots.txt檔案

檢查網站的 robots.txt 文件，可以了解哪些搜尋引擎機器人被允許或禁止訪問網站的某些部分。例如：

User-agent: * 
Disallow: /private/

3. 判斷IP地址

搜尋引擎機器人的IP地址通常來自特定範圍。你可以比對訪問者的IP地址是否屬於這些範圍。例如：

Googlebot的IP地址範圍
Bingbot的IP地址範圍

可使用工具來驗證訪問者的IP是否真的來自搜尋引擎。

4. 使用後端程式碼進行判斷

以下是如何在伺服器端使用PHP進行User-Agent檢查的範例：

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($userAgent, 'Googlebot') !== false) {
    echo "這是Googlebot的流量";
} else {
    echo "這不是搜尋引擎機器人的流量";
}
?>

5. 監控與分析工具

使用Google Analytics或其他網站分析工具，可以幫助追蹤流量來源。這些工具通常會自動過濾大部分的機器人流量。

URL 的 Hash 值

1. 定義

URL 的 Hash 值是指位於 URL 中「#」符號後面的部分，又稱為片段識別符（Fragment Identifier）。它通常用於標識頁面內的某個位置或狀態。

2. 用途

導航到網頁中的特定位置，例如錨點。
表示應用程式的狀態，例如單頁應用程式（SPA）的路由。
用於儲存用戶界面的狀態，例如篩選條件或滾動位置。

3. 範例

以下是一些常見的 URL Hash 範例：

錨點導航：https://example.com/page#section1
SPA 路由：https://example.com/app#/dashboard
狀態保存：https://example.com/search#filter=active

4. 工作原理

當瀏覽器遇到 URL 中的 Hash 值時，它不會向伺服器發送此部分資料。
Hash 值由客戶端（通常是 JavaScript）進行處理，用於觸發特定的邏輯或操作。
在 HTML 中，Hash 可以用於定位特定元素的 id。

5. 注意事項

Hash 不會影響 HTTP 請求，因此可以動態修改而不重新加載頁面。
在 SPA 中，應用程式需要手動解析和處理 Hash 值來實現路由功能。
避免過於複雜的 Hash 值設計，保持結構簡單明瞭。

取得 URL 的 Hash 值

JavaScript 範例

<script>
  // 獲取 URL 的 Hash 值
  const hashValue = window.location.hash.substring(1);

  // 顯示 Hash 值
  console.log("Hash 值是:", hashValue);
</script>

PHP 範例

<?php
// 模擬 URL
$url = "http://example.com/page#section2";

// 使用 parse_url 解析 Hash 值
$parsedUrl = parse_url($url);
$hash = isset($parsedUrl['fragment']) ? $parsedUrl['fragment'] : null;

// 輸出 Hash 值
if ($hash) {
    echo "Hash 值是: " . htmlspecialchars($hash, ENT_QUOTES, 'UTF-8');
} else {
    echo "URL 中沒有 Hash 部分。";
}
?>

注意事項

JavaScript 可以直接取得當前頁面的 Hash 值，使用 window.location.hash。
伺服器無法直接取得 URL 的 Hash，需通過 JavaScript 傳送到伺服器。

不使用 id 的情況下連結到特定的標籤

方法 1: 使用 `name` 屬性

雖然較少使用，但可以將 name 屬性加入一個 <a> 標籤，並將其放在目標標籤前。

<a name="specific-heading1"></a>
<h3>目標標題1</h3>

<a href="#specific-heading1">連結到特定標題</a>

效果：

目標標題2

連結到特定標題

方法 2: 使用 `data-attribute` 配合 JavaScript

透過設定自訂屬性，例如 data-anchor，並使用 JavaScript 處理跳轉行為。

<h3 data-anchor="heading-1">目標標題3</h3>

<a href="#" onclick="jumpToHeading('heading-1')">連結到特定標題</a>

<script>
  function jumpToHeading(anchor) {
    const target = document.querySelector(`[data-anchor="${anchor}"]`);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  }
</script>

效果：

目標標題4

連結到特定標題

方法 3: 使用 `h2` 的文字內容配合 JavaScript

透過查找 h2 的文字內容來定位，使用 JavaScript 動態定位到目標。

<h3>目標標題5</h3>

<a href="#" onclick="jumpToText('目標標題')">連結到特定標題</a>

<script>
  function jumpToText(text) {
    const target = Array.from(document.querySelectorAll('h2')).find(el => el.textContent === text);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  }
</script>

效果：

目標標題6

連結到特定標題-目標標題6

cURL

用途

cURL 是 PHP 中用來發送 HTTP 請求的函式庫，支援 GET、POST、PUT、DELETE 等方法，常用於 API 資料存取。

基本步驟

初始化：curl_init()
設定選項：curl_setopt()
執行請求：curl_exec()
關閉連線：curl_close()

GET 範例

<?php
$url = "https://api.example.com/data";
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>

POST 範例

<?php
$url = "https://api.example.com/post";
$data = ['name' => '測試', 'email' => '[email protected]'];
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>

加上標頭與 JSON

<?php
$url = "https://api.example.com/json";
$data = json_encode(['id' => 123]);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
  'Content-Type: application/json',
  'Content-Length: ' . strlen($data)
]);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>

常見選項

CURLOPT_URL：設定目標網址
CURLOPT_RETURNTRANSFER：是否回傳結果（不直接輸出）
CURLOPT_POSTFIELDS：送出的資料
CURLOPT_HTTPHEADER：自訂 HTTP 標頭

錯誤處理

<?php
if(curl_errno($ch)) {
  echo '錯誤：' . curl_error($ch);
}
?>

網頁舊技術

Java Applet

基本概念

Java Applet 是一種以 Java 語言編寫的小型應用程式，可透過網頁瀏覽器執行，並嵌入至 HTML 頁面中。它最早於 1990 年代被廣泛應用於製作互動式網頁，例如動畫、遊戲及圖表視覺化。

執行方式

Applet 必須在支援 Java Plugin 的瀏覽器上執行，透過 <applet> 或 <object> 標籤嵌入於 HTML 中，由使用者端 JVM（Java Virtual Machine）負責載入與執行。

安全限制

由於 Applet 可在用戶端執行，因此為了防止惡意行為，執行環境採取了「沙盒機制」進行安全隔離，例如禁止存取本機檔案系統或執行外部程式。

支援情況與現況

Google Chrome：自 2015 年起全面移除 NPAPI 支援，不再支援 Java Applet。
Mozilla Firefox：於 2017 年正式停止支援 NPAPI 外掛。
Microsoft Edge：自推出起即未支援 Java Applet。
Safari：自 macOS Catalina 起全面移除 Java Applet 執行支援。

Oracle 官方政策

Oracle 自 Java 9 起即宣佈移除 Applet API，並在 Java 11 完全廢止 Applet。Java Web Start（另一種桌面執行技術）也一併終止維護。

替代方案

JavaFX： 提供更現代的 GUI 框架與 Web 整合能力，但無瀏覽器內嵌支援。
HTML5 + JavaScript： 成為主流替代技術，支援跨平台與更高的互動性。
WebAssembly： 可將其他語言編譯為瀏覽器可執行格式，是高效能計算的潛在選擇。

總結

Java Applet 已進入淘汰階段，現代網頁開發趨勢傾向使用 HTML5、JavaScript 與 WebAssembly 等開放標準技術。開發者應避免再使用 Applet，並將現有應用程式轉移至現代技術平台。

Java Applet 示例

以下是顯示一個簡單訊息的 Java Applet 範例：

HTML 代碼

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Java Applet 範例</title>
</head>
<body>
<h1>Java Applet 示例</h1>
<applet code="HelloWorldApplet.class" width="300" height="300>
    <param name="message" value="你好，世界！">
    您的瀏覽器不支持 Java Applet。
</applet>
</body>
</html>

Java Applet 代碼

import java.applet.Applet;
import java.awt.Graphics;

public class HelloWorldApplet extends Applet {
String message;

public void init() {
    message = getParameter("message");
}

public void paint(Graphics g) {
    g.drawString(message, 20, 20);
}
}

編譯和執行

1. 將 Java 代碼保存為 HelloWorldApplet.java，並在命令行中執行 javac HelloWorldApplet.java 來編譯。

2. 確保生成的 .class 文件與 HTML 文件在同一個目錄下。

3. 使用支持 Java Applet 的環境來執行 HTML 文件。

注意事項

由於大多數現代瀏覽器不再支持 Java Applet，建議考慮使用其他技術（如 JavaFX 或網頁應用程式）來實現類似的功能。

PHP v: 7.4.10

email: [email protected]

T:0000

資訊與搜尋 | 回dev首頁電話: 02-27566655 ,03-5924828 email: [email protected]

阿央
泱泱科技
捷昱科技泱泱企業

網頁開發

電腦的使用

軟體開發

網路伺服

網路行銷

演算法

Python

編碼

開發資訊網站

網站開發服務

客製化網站設計

響應式網頁開發

電子商務平台建置

後端系統開發

網站優化服務

網站維護與更新

技術支援與諮詢

JavaScript

JavaScript 的特色

1. 動態型別語言

2. 物件導向支援

3. 函式即物件 (高階函式)

4. 非同步操作支援

5. 廣泛的跨平台應用

JavaScript 陣列新增陣列

使用 concat 方法

使用展開運算符

使用 push 方法與展開運算符

取得目前執行函式名稱

目的

函式寫法

應用範例

輸出結果

注意事項

延伸建議

JavaScript 函式的分檔與分類管理

目的

建議作法

1. 使用 ES6 模組分檔

2. 相似功能歸類為同一模組

3. 何時適合用 class？

4. 搭配工具與框架

範例結構建議

JavaScript 的 class 成員變數與方法用法

基本語法

範例

使用方式

成員變數類型

私有變數與方法（ES2022 標準）

繼承與覆寫

this 的注意事項

結論

JavaScript 模組的類似 class 用法

說明

模組與 class 差異比較

模組範例：使用物件封裝

模組範例：使用函式封裝

模組範例：模擬單例物件

結論

AJAX

什麼是 AJAX

使用 XMLHttpRequest 實作 AJAX

POST 請求範例

處理 JSON 回傳

使用 jQuery 簡化 AJAX

常見應用

注意事項

XMLHttpRequest

建立 XMLHttpRequest

設定回應處理函式

發送 GET 請求

發送 POST 請求

處理 JSON 回應

完整範例

注意事項

XMLHttpRequest 回傳包含 PHP 錯誤訊息的處理方式

問題描述

錯誤範例

原因

解決方法一：在 PHP 中關閉錯誤輸出

解法 1: 使用 `width: max-content`

解法 2: 使用 `float: left`

解法 3: 使用 `::before` 虛擬元素

解法 4: 使用 `white-space: pre`