### [談談 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>
<!-- 引入 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 中，`==` 和 `===` 是用來比較兩個值是否相等的運算符，但它們之間有一些重要的差異：
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 塊來處理可能的錯誤。