開發資訊網站

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]

JavaScript UI

響應式網頁

什麼是響應式設計？

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

響應式設計的關鍵技術

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

響應式設計的優勢

響應式設計可以改善用戶體驗，減少開發成本，並增加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

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

這是一個代碼區塊。

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

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

這是一個代碼區塊。

解法 4: 使用 white-space: pre

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>

步驟

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

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 並非為了代替高解析度的影像，而是用來即時生成和動態繪圖。

Spirograph

什麼是 Spirograph？

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

在 HTML5 中實作 Spirograph

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

使用 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>

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 在線工具）中，即可生成出圖形。

D3.js 介紹

什麼是 D3.js？

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

D3.js 的特色

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

D3.js 的主要功能

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

應用範例

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）向右展開。
• 每個節點由一個圓形表示，節點名稱顯示於旁。

應用與擴展

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

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

查詢中文字符的注音

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

注音結果

尚未查詢

使用Google ID登入自己的網頁

什麼是Google ID登入？

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

為何選擇Google ID登入？

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

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

1. 建立Google Cloud專案：前往Google Cloud Console，創建一個新的專案。
2. 啟用Google登入API：在專案中，啟用「Google登入」API，並生成OAuth 2.0憑證。
3. 設置授權範圍：在憑證設置中，添加授權的回調URI，這是用戶登入後重定向的地址。
4. 前端實作：在你的網頁中使用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的登入系統，開發者可以提高用戶體驗，並吸引更多的使用者使用其網站或應用程式。

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 或網頁應用程式）來實現類似的功能。

嵌入 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 限制，讓影片可以正常顯示在頁面中。

PHP

PHP資訊網址

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

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

<?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;
?>

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

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

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

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

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

User-agent: * 
Disallow: /private/

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

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

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

<?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 部分。";
}
?>

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

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

<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>

<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>

email: [email protected]