markdown-it demo

clear permalink

### [談談 JavaScript 的 setTimeout 與 setInterval](https://kuro.tw/posts/2019/02/23/%E8%AB%87%E8%AB%87-JavaScript-%E7%9A%84-setTimeout-%E8%88%87-setInterval/)

```js
$('.result-html').html(md.render($('#markdowncontent').text()));
function refreshResult() {
	if ("Changed" === $("#response").text()) {
		$('.result-html').html(md.render($('#markdowncontent').val()));
	}
	window.setTimeout(refreshResult, 10000);
}
window.setTimeout(refreshResult, 10000);
```

### JSDoc
```js
/**
 * 加法函式
 * @param {number} a - 第一個加數
 * @param {number} b - 第二個加數
 * @returns {number} 兩個數字的和
 * @example
 * // 使用方式
 * var result = add(5, 3);
 * console.log(result); // 輸出 8
 */
function add(a, b) {
    return a + b;
}

/**
 * 計算數字的平方
 * @param {number} num - 要計算平方的數字
 * @returns {number} 平方值
 * @description 這個函式接受一個數字作為參數，並返回該數字的平方值。
 */
function square(num) {
    return num * num;
}
```

### setTimeout
該函式用於在指定的時間延遲後執行一次程式碼。
```js
setTimeout(function() {
  console.log("這段程式碼將在 2 秒後執行");
}, 2000);
```
### setInterval
該函式用於以指定的間隔重複執行程式碼。
```js
// 使用 setInterval() 每隔 1 秒重複執行程式碼
let counter = 0;
const intervalId = setInterval(function() {
  console.log("每秒執行一次，目前計數：" + counter);
  counter++;

// 設定停止條件
  if (counter === 5) {
    clearInterval(intervalId); // 停止執行
  }
}, 1000);
```

### Base64編碼和解碼
```js
// 编碼
var originalString = "Hello, World!";
var encodedString = btoa(originalString);
console.log("Encoded String: " + encodedString);

// 解碼
var decodedString = atob(encodedString);
console.log("Decoded String: " + decodedString);
```
### 將 Array 中第一個項目移至另一個 Array
```js
const array1 = [1, 2, 3, 4];
const array2 = [];

const firstItem = array1.shift(); // 移除 array1 的第一個項目並返回該項目
array2.push(firstItem); // 將該項目添加到 array2

console.log(array1); // 輸出：[2, 3, 4]
console.log(array2); // 輸出：[1]
```

### List
```js
var fruits = ["apple", "banana", "orange"];
var joinedFruits = fruits.join(", "); // 將陣列元素以逗號和空格分隔合併為一個字串
console.log(joinedFruits); // "apple, banana, orange"

var numbers = [1, 2, 3, 4, 5];
var joinedNumbers = numbers.join("-"); // 將陣列元素以破折號分隔合併為一個字串
console.log(joinedNumbers); // "1-2-3-4-5"

var text = "Hello";
var joinedText = Array.from(text).join(" "); // 將字串分隔合併為一個字串，以空格分隔字母
console.log(joinedText); // "H e l l o"
```

### Map
```js
// 定義一個文字對應函式的映射物件
const functionMap = {
  'greet': function() {
    console.log('Hello!');
  },
  'add': function(a, b) {
    return a + b;
  },
  'multiply': function(a, b) {
    return a * b;
  }
};

// 使用映射物件執行相應的函式
functionMap['greet'](); // 印出 "Hello!"
const result1 = functionMap['add'](3, 5); // result1 = 8
const result2 = functionMap['multiply'](2, 4); // result2 = 8
```

### Class
```js
// 定義一個名為 "Person" 的類別
function Person(name, age) {
  // 類別的建構子，用來初始化物件的屬性
  this.name = name;
  this.age = age;
}

// 在類別的原型上定義方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 在類別的原型上定義共用的屬性（可選）
Person.prototype.nationality = 'Unknown';

// 創建一個 Person 物件
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

// 呼叫物件的方法
person1.sayHello(); // 輸出：Hello, my name is Alice and I am 25 years old.
person2.sayHello(); // 輸出：Hello, my name is Bob and I am 30 years old.

// 存取共用的屬性
console.log(person1.nationality); // 輸出：Unknown
console.log(person2.nationality); // 輸出：Unknown

```
```js
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

static staticMethod() {
    console.log('This is a static method.');
  }
}

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

person1.sayHello(); // 輸出：Hello, my name is Alice and I am 25 years old.
person2.sayHello(); // 輸出：Hello, my name is Bob and I am 30 years old.

Person.staticMethod(); // 輸出：This is a static method.
```

### 字串處理
```js
var mainString = "Hello, world!";
var subString = "world";
console.log(mainString.length); // 字串長度：13
console.log(subString.length); // 字串長度：5

if (mainString.includes(subString)) {
    console.log("字串包含指定的子字串");
} else {
    console.log("字串不包含指定的子字串");
}

var sentence = "This is a sample sentence.";
var words = sentence.split(" "); // 將句子按空格切割成單字陣列
console.log(words); // ["This", "is", "a", "sample", "sentence."]

var originalStr = "Hello, world!";
var subStr1 = originalStr.substring(0, 5); // 從索引 0 到索引 4 的子字串
var subStr2 = originalStr.substr(7, 5); // 從索引 7 開始，取 5 個字元的子字串
console.log(subStr1); // "Hello"
console.log(subStr2); // "world"

// 將 "world" 替換為 "universe"
var str = "Hello, world!";
var newStr = str.replace(/world/, "universe"); // 使用正則表達式進行替換
console.log(newStr); // "Hello, universe!"

// 替換所有數字為 "#"
var text = "12345 and 67890";
var replacedText = text.replace(/\d/g, "#");
console.log(replacedText); // "##### and #####"

// 將 yyyy-mm-dd 格式的日期轉換成 mm/dd/yyyy 格式
var dateStr = "2023-05-25";
var formattedDate = dateStr.replace(/(\d{4})-(\d{2})-(\d{2})/, "$2/$3/$1");
console.log(formattedDate); // "05/25/2023"
```
### 模板字串（Template literals）：
使用模板字串可以更清晰地格式化字串，通過在字串周圍使用反引號，全在字串中使用${}來插入變數。例如：
```js
var name = "John";
var age = 30;
var formattedString = `My name is ${name} and I am ${age} years old.`;
console.log(formattedString);
```

### MD5
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
```
```js
// 要計算 MD5 的字串
const inputString = 'Hello, World!';
// 計算 MD5 雜湊
const md5Hash = CryptoJS.MD5(inputString);
// 將 MD5 雜湊轉換為字串
const md5String = md5Hash.toString();
// 輸出 MD5 雜湊
console.log(md5String);
```

### ISO 8601 Duration 時間操作
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期操作範例</title>
    
    <script src="https://moment.github.io/luxon/global/luxon.js"></script>
</head>
<body>

// 示例用法
    const inputDate = "2023-11-16";
    const duration1 = "P2D";
    const duration2 = "-PT1H"; // 循環時間表示法，表示減少一小時

const resultDate1 = manipulateDate(inputDate, duration1);
    const resultDate2 = manipulateDate(inputDate, duration2);

console.log(resultDate1); // 輸出: 2023-11-18
    console.log(resultDate2); // 輸出: 2023-11-16
</script>

</body>
</html>
```
### == VS ===
在 JavaScript 中，`==` 和 `===` 是用來比較兩個值是否相等的運算符，但它們之間有一些重要的差異：

1. `==` (Equality Operator):
   - 使用`==`進行比較時，JavaScript 會在比較之前進行類型轉換。
   - 如果比較的兩個值的類型不同，JavaScript 會嘗試將它們轉換為相同的類型，然後再進行比較。
   - 例如，`'5' == 5` 會返回 `true`，因為 JavaScript 會將字符串 `'5'` 轉換為數字 `5`，然後比較它們的值。

2. `===` (Strict Equality Operator):
   - 使用`===`進行比較時，不會進行類型轉換。
   - 如果比較的兩個值的類型不同，`===` 將直接返回 `false`，即使它們的值相等。
   - 例如，`'5' === 5` 會返回 `false`，因為類型不同。

簡而言之，`==` 允許類型轉換，而 `===` 不允許類型轉換，並要求值和類型都相等。

建議使用 `===` 進行比較，因為它更嚴格，不會引起類型不明確的問題，有助於減少錯誤。

### forEach

```javascript
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function (number) {
  console.log(number);
});
numbers.forEach(number => console.log(number));
```

### map

```javascript
const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function (number) {
  return number * number;
});
// same with
squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers);
```

### onclick 帶參數
```html
<!DOCTYPE html>
<html>
<head>
    <title>Button Onclick Function with Parameter Example</title>
    <script>
        function handleButtonOnClick(param) {
            alert("Button clicked with parameter: " + param);
        }
    </script>
</head>
<body>
    <button onclick="handleButtonOnClick('example')">Click Me</button>
</body>
</html>
```

在這個例子中，當按下按鈕時會觸發 `handleButtonOnClick` 函式，並且將字串 `example` 傳遞作為參數。當按下按鈕時，會彈出一個警告對話框，顯示出按鈕被點擊的訊息。

### async function
在 JavaScript 中，async 函數是一種用來處理異步操作的函數。當一個函數被聲明為 async 時，該函數內部的代碼會被當做 Promise 對象執行，並且可以使用 await 關鍵字來等待異步操作的完成。

簡單來說，async 函數允許你以同步的方式編寫異步操作的程式碼，使得程式碼更易讀且更易維護。當調用 async 函數時，該函數將返回一個 Promise 對象，可以使用 then 方法來處理成功的結果，也可以使用 catch 方法來處理錯誤的情況。

以下是一個示例，展示了如何定義一個 async 函數並使用 await 關鍵字來等待異步操作的完成：

```javascript
async function fetchData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

### await
在 JavaScript 中，await 關鍵字用於等待一個 promise 物件變為 resolved 狀態（成功）或 rejected 狀態（失敗）後再繼續執行程式碼。在使用 await 時，必須在 async 函數內部使用。例如：

```javascript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();
```

在上面的例子中，fetchData 函數是一個 async 函數，其中使用了 await 來等待 fetch 和 response.json() 這兩個 promise 物件的解析結果。在最後，我們可以使用 try/catch 塊來處理可能的錯誤。

html source debug

談談 JavaScript 的 setTimeout 與 setInterval

$('.result-html').html(md.render($('#markdowncontent').text()));
function refreshResult() {
	if ("Changed" === $("#response").text()) {
		$('.result-html').html(md.render($('#markdowncontent').val()));
	}
	window.setTimeout(refreshResult, 10000);
}
window.setTimeout(refreshResult, 10000);

JSDoc

/**
 * 加法函式
 * @param {number} a - 第一個加數
 * @param {number} b - 第二個加數
 * @returns {number} 兩個數字的和
 * @example
 * // 使用方式
 * var result = add(5, 3);
 * console.log(result); // 輸出 8
 */
function add(a, b) {
    return a + b;
}

/**
 * 計算數字的平方
 * @param {number} num - 要計算平方的數字
 * @returns {number} 平方值
 * @description 這個函式接受一個數字作為參數，並返回該數字的平方值。
 */
function square(num) {
    return num * num;
}

setTimeout

該函式用於在指定的時間延遲後執行一次程式碼。

setTimeout(function() {
  console.log("這段程式碼將在 2 秒後執行");
}, 2000);

setInterval

該函式用於以指定的間隔重複執行程式碼。

// 使用 setInterval() 每隔 1 秒重複執行程式碼
let counter = 0;
const intervalId = setInterval(function() {
  console.log("每秒執行一次，目前計數：" + counter);
  counter++;

  // 設定停止條件
  if (counter === 5) {
    clearInterval(intervalId); // 停止執行
  }
}, 1000);

Base64編碼和解碼

// 编碼
var originalString = "Hello, World!";
var encodedString = btoa(originalString);
console.log("Encoded String: " + encodedString);

// 解碼
var decodedString = atob(encodedString);
console.log("Decoded String: " + decodedString);

將 Array 中第一個項目移至另一個 Array

const array1 = [1, 2, 3, 4];
const array2 = [];

const firstItem = array1.shift(); // 移除 array1 的第一個項目並返回該項目
array2.push(firstItem); // 將該項目添加到 array2

console.log(array1); // 輸出：[2, 3, 4]
console.log(array2); // 輸出：[1]

List

var fruits = ["apple", "banana", "orange"];
var joinedFruits = fruits.join(", "); // 將陣列元素以逗號和空格分隔合併為一個字串
console.log(joinedFruits); // "apple, banana, orange"

var numbers = [1, 2, 3, 4, 5];
var joinedNumbers = numbers.join("-"); // 將陣列元素以破折號分隔合併為一個字串
console.log(joinedNumbers); // "1-2-3-4-5"

var text = "Hello";
var joinedText = Array.from(text).join(" "); // 將字串分隔合併為一個字串，以空格分隔字母
console.log(joinedText); // "H e l l o"

Map

// 定義一個文字對應函式的映射物件
const functionMap = {
  'greet': function() {
    console.log('Hello!');
  },
  'add': function(a, b) {
    return a + b;
  },
  'multiply': function(a, b) {
    return a * b;
  }
};

// 使用映射物件執行相應的函式
functionMap['greet'](); // 印出 "Hello!"
const result1 = functionMap['add'](3, 5); // result1 = 8
const result2 = functionMap['multiply'](2, 4); // result2 = 8

Class

// 定義一個名為 "Person" 的類別
function Person(name, age) {
  // 類別的建構子，用來初始化物件的屬性
  this.name = name;
  this.age = age;
}

// 在類別的原型上定義方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 在類別的原型上定義共用的屬性（可選）
Person.prototype.nationality = 'Unknown';

// 創建一個 Person 物件
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

// 呼叫物件的方法
person1.sayHello(); // 輸出：Hello, my name is Alice and I am 25 years old.
person2.sayHello(); // 輸出：Hello, my name is Bob and I am 30 years old.

// 存取共用的屬性
console.log(person1.nationality); // 輸出：Unknown
console.log(person2.nationality); // 輸出：Unknown

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  static staticMethod() {
    console.log('This is a static method.');
  }
}

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

person1.sayHello(); // 輸出：Hello, my name is Alice and I am 25 years old.
person2.sayHello(); // 輸出：Hello, my name is Bob and I am 30 years old.

Person.staticMethod(); // 輸出：This is a static method.

字串處理

var mainString = "Hello, world!";
var subString = "world";
console.log(mainString.length); // 字串長度：13
console.log(subString.length); // 字串長度：5

if (mainString.includes(subString)) {
    console.log("字串包含指定的子字串");
} else {
    console.log("字串不包含指定的子字串");
}

var sentence = "This is a sample sentence.";
var words = sentence.split(" "); // 將句子按空格切割成單字陣列
console.log(words); // ["This", "is", "a", "sample", "sentence."]

var originalStr = "Hello, world!";
var subStr1 = originalStr.substring(0, 5); // 從索引 0 到索引 4 的子字串
var subStr2 = originalStr.substr(7, 5); // 從索引 7 開始，取 5 個字元的子字串
console.log(subStr1); // "Hello"
console.log(subStr2); // "world"

// 將 "world" 替換為 "universe"
var str = "Hello, world!";
var newStr = str.replace(/world/, "universe"); // 使用正則表達式進行替換
console.log(newStr); // "Hello, universe!"

// 替換所有數字為 "#"
var text = "12345 and 67890";
var replacedText = text.replace(/\d/g, "#");
console.log(replacedText); // "##### and #####"

// 將 yyyy-mm-dd 格式的日期轉換成 mm/dd/yyyy 格式
var dateStr = "2023-05-25";
var formattedDate = dateStr.replace(/(\d{4})-(\d{2})-(\d{2})/, "$2/$3/$1");
console.log(formattedDate); // "05/25/2023"

模板字串（Template literals）：

使用模板字串可以更清晰地格式化字串，通過在字串周圍使用反引號，全在字串中使用${}來插入變數。例如：

var name = "John";
var age = 30;
var formattedString = `My name is ${name} and I am ${age} years old.`;
console.log(formattedString);

MD5

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

// 要計算 MD5 的字串
const inputString = 'Hello, World!';
// 計算 MD5 雜湊
const md5Hash = CryptoJS.MD5(inputString);
// 將 MD5 雜湊轉換為字串
const md5String = md5Hash.toString();
// 輸出 MD5 雜湊
console.log(md5String);

ISO 8601 Duration 時間操作

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期操作範例</title>
    <!-- 引入 luxon 库 -->
    <script src="https://moment.github.io/luxon/global/luxon.js"></script>
</head>
<body>

<script>
    function manipulateDate(inputDate, duration) {
        // 將輸入的日期字串轉換為 DateTime 物件
        const currentDate = luxon.DateTime.fromISO(inputDate);
        // 解析 ISO 8601 持續時間
        const durationObject = luxon.Duration.fromISO(duration);
        // 根據持續時間調整日期
        const manipulatedDate = currentDate.plus(durationObject);
        // 格式化結果日期物件為 "YYYY-MM-DD" 格式的字串
        const resultDateStr = manipulatedDate.toISODate();
        return resultDateStr;
    }

    // 示例用法
    const inputDate = "2023-11-16";
    const duration1 = "P2D";
    const duration2 = "-PT1H"; // 循環時間表示法，表示減少一小時

    const resultDate1 = manipulateDate(inputDate, duration1);
    const resultDate2 = manipulateDate(inputDate, duration2);

    console.log(resultDate1); // 輸出: 2023-11-18
    console.log(resultDate2); // 輸出: 2023-11-16
</script>

</body>
</html>

== VS ===

在 JavaScript 中，== 和 === 是用來比較兩個值是否相等的運算符，但它們之間有一些重要的差異：

== (Equality Operator):
- 使用==進行比較時，JavaScript 會在比較之前進行類型轉換。
- 如果比較的兩個值的類型不同，JavaScript 會嘗試將它們轉換為相同的類型，然後再進行比較。
- 例如，'5' == 5 會返回 true，因為 JavaScript 會將字符串 '5' 轉換為數字 5，然後比較它們的值。
=== (Strict Equality Operator):
- 使用===進行比較時，不會進行類型轉換。
- 如果比較的兩個值的類型不同，=== 將直接返回 false，即使它們的值相等。
- 例如，'5' === 5 會返回 false，因為類型不同。

簡而言之，== 允許類型轉換，而 === 不允許類型轉換，並要求值和類型都相等。

建議使用 === 進行比較，因為它更嚴格，不會引起類型不明確的問題，有助於減少錯誤。

forEach

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function (number) {
  console.log(number);
});
numbers.forEach(number => console.log(number));

map

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function (number) {
  return number * number;
});
// same with
squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers);

onclick 帶參數

<!DOCTYPE html>
<html>
<head>
    <title>Button Onclick Function with Parameter Example</title>
    <script>
        function handleButtonOnClick(param) {
            alert("Button clicked with parameter: " + param);
        }
    </script>
</head>
<body>
    <button onclick="handleButtonOnClick('example')">Click Me</button>
</body>
</html>

在這個例子中，當按下按鈕時會觸發 handleButtonOnClick 函式，並且將字串 example 傳遞作為參數。當按下按鈕時，會彈出一個警告對話框，顯示出按鈕被點擊的訊息。

async function

在 JavaScript 中，async 函數是一種用來處理異步操作的函數。當一個函數被聲明為 async 時，該函數內部的代碼會被當做 Promise 對象執行，並且可以使用 await 關鍵字來等待異步操作的完成。

以下是一個示例，展示了如何定義一個 async 函數並使用 await 關鍵字來等待異步操作的完成：

async function fetchData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));

await

在 JavaScript 中，await 關鍵字用於等待一個 promise 物件變為 resolved 狀態（成功）或 rejected 狀態（失敗）後再繼續執行程式碼。在使用 await 時，必須在 async 函數內部使用。例如：

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

fetchData();