RenTianNote.json

[
	[
		{ "title": "HTML🦴" },
		{
			"tag": "p",
			"text": "HTML(Hypertext Markup Language)，中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成可能包含了段落、清單、圖片或表格等。HTML 是一種基礎技術，常與 CSS、JavaScript 一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面。網頁瀏覽器可以讀取 HTML 檔案，並將其彩現成視覺化網頁。"
		},
		{
			"tag": "h2",
			"text": "基礎架構"
		},
		{
			"tag": "p",
			"text": "HTML相當於網頁的骨架。以下為HTML最簡易的結構，其中<head></head>標籤內放置網頁中不會被顯示的重要資訊；<body></body>內則放置顯示於頁面的物件；<script></script>內則放置JavaScript程式碼。"
		},
		{
			"tag": "precode",
			"text": "<!DOCTYPE html>   <!-- 宣告瀏覽器要用什麼版本翻譯 -->\n<html>\n    <head>\n      <meta charset='UTF-8'>     <!-- 以「UTF-8」萬國碼編碼 -->\n      <meta name='viewport' content='width=device-width, initial-scale=1.0'>   <!-- 要使用RWD響應式網頁的程式碼 -->\n      <meta name='description' content='搜尋引擎上會呈列的引文'>\n      <meta name='ketwords' content='搜尋引擎搜尋的字串(用空格隔開)'>\n      \n      <title>人天的網頁</title>\n   \n   <style>\n     /*這裡放CSS*/ \n   </style>\n   \n    </head>\n    \n    <body>\n   \n     <!--這裡放各種元素-->\n\n   \n   <script>\n     // 這裡放JavaScript\n   </script>\n    </body>\n</html>"
		},
		{
			"tag": "h2",
			"text": "引入外部檔案"
		},
		{
			"tag": "h3",
			"text": "引入CSS"
		},
		{
			"tag": "p",
			"text": "將以下語句放入<meta></meta>則可匯入CSS，其中style.css是要匯入的檔名。"
		},
		{
			"tag": "precode",
			"text": "<link rel='stylesheet' href='style.css'>"
		},
		{
			"tag": "h3",
			"text": "引入JavaScript"
		},
		{
			"tag": "p",
			"text": "將以下語句放入<body></body>標籤內的最下方可以引入Js，其中js/all.js是要匯入的檔名。"
		},
		{
			"tag": "precode",
			"text": "<script src='js/all.js'></script>"
		},
		{
			"tag": "h2",
			"text": "常用的特殊字元"
		},
		{
			"tag": "precode",
			"text": "<!--程式碼寫在內文的換行是沒有作用的-->\n\n<br>  <!--內文中的換行-->\n&nbsp;  <!--內文中的半形空格-->"
		},
		{
			"tag": "h2",
			"text": "語意標籤（Semantic Elements）"
		},
		{
			"tag": "p",
			"text": "語意標籤與<div></div>標籤的功能相同，\n但能讓使用者或與人協作時能更加容易辨識區塊中所放的內容為何。使用語意標籤不僅讓網頁結構更具邏輯性，還能提升 SEO(搜尋引擎最佳化)、可存取性、可讀性，並且使程式碼更容易維護，符合現代 Web 開發的最佳實踐。"
		},
		{
			"tag": "precode",
			"text": "<header>放頁首、上方板塊、通常包含標題</header>"
		},
		{
			"tag": "precode",
			"text": "<nav>選單、導覽、常用於menu</nav>"
		},
		{
			"tag": "precode",
			"text": "<main>主要內容的區塊</main>"
		},
		{
			"tag": "precode",
			"text": "<aside>側欄、附加內容、廣告、非主要資訊</aside>"
		},
		{
			"tag": "precode",
			"text": "<article>文章內容</article>"
		},
		{
			"tag": "precode",
			"text": "<section>自訂的區塊，例如數篇摘要要組成的空間</section>"
		},
		{
			"tag": "precode",
			"text": "<mark>強調的內容區塊，像是螢光筆的部分</mark>"
		},
		{
			"tag": "precode",
			"text": "<time>顯示時間的區塊</time>"
		},
		{
			"tag": "precode",
			"text": "<details>定義可查看額外細節的部份</details>"
		},
		{
			"tag": "precode",
			"text": "<footer>頁尾，網頁最底部的區塊</footer>"
		},
		{
			"tag": "h2",
			"text": "錨點"
		},
		{
			"tag": "p",
			"text": "HTML中的錨點（Anchor）用法允許您在同一頁面內或不同頁面之間創建超連結，直接跳轉到指定的位置。這在長頁面或文檔中非常有用，可以快速導航到感興趣的部分。以下是HTML錨點的基本用法："
		},
		{
			"tag": "precode",
			"text": "<!--使用id創建錨點-->\n<h2 id='section1'>第一節</h2>\n\n<!--使用a標籤創建錨點的超連結-->\n<a href='#section1'>跳轉到第一節</a>\n\n\n<!--跨頁面的跳轉-->\n<a href='page2.html#section1'>前往第二頁的第一節</a>"
		},
		{
			"tag": "h2",
			"text": "figure 圖片組"
		},
		{
			"tag": "precode",
			"text": "<figure>\n    <img src='images/600x400/peach-flowers.jpg' width='600' alt='粉紅色的花'>\n    <figcaption>圖片說明</figcaption>\n</figure>"
		},
		{
			"tag": "h2",
			"text": "table 表格"
		},
		{
			"tag": "p",
			"text": "以下是表格標籤所代表的意義："
		},
		{
			"tag": "precode",
			"text": "<table> <!-- 定義整個表格 -->\n<tr> <!-- table row -->\n<th> <!-- table heading -->\n<td> <!-- table data -->"
		},
		{
			"tag": "p",
			"text": "<thead>標籤代表表頭，<tbody>代表表身，<tfoot>代表表尾。"
		},
		{
			"tag": "precode",
			"text": "<table>\n  <thead>\n    <tr>\n      <th colspan=3 >國立故宮博物院</th>  <!-- colspan=3 代表橫跨3欄位的意思 -->\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>所屬部門</th>\n      <th>員額</th>\n      <th>授權法源</th>\n    </tr>\n  </tbody>\n  <tr>\n    <td>行政院</td>\n    <td>502人</td>\n    <td>行政院故宮博物院組織法</td>\n  </tr>\n  <tfoot>\n    \n  </tfoot>\n</table>"
		},
		{
			"tag": "img",
			"text": "./img/1_表格範例.png"
		},
		{
			"tag": "h2",
			"text": "input 使用者輸入"
		},
		{
			"tag": "p",
			"text": "<input> 標籤是 HTML 中用來建立可互動的輸入欄位，用於讓用戶在表單中輸入資料。它是表單最常用的元素之一，並且可以透過不同的 type 屬性來定義多種類型的輸入欄位。"
		},
		{
			"tag": "h3",
			"text": "常見的屬性"
		},
		{
			"tag": "b",
			"text": "type"
		},
		{
			"tag": "p",
			"text": "定義輸入欄位的類型，如 text, password, email, number, checkbox, radio 等。"
		},
		{
			"tag": "b",
			"text": "name"
		},
		{
			"tag": "p",
			"text": "表單中用來標識該輸入欄位的名稱，表單提交時這個名稱將與輸入值一起發送。"
		},
		{
			"tag": "b",
			"text": "value"
		},
		{
			"tag": "p",
			"text": "定義輸入欄位的預設值。"
		},
		{
			"tag": "b",
			"text": "placeholder"
		},
		{
			"tag": "p",
			"text": "顯示在輸入欄位中的提示文字，當欄位為空時可見。"
		},
		{
			"tag": "b",
			"text": "required"
		},
		{
			"tag": "p",
			"text": "指定此輸入欄位在提交表單前必須填寫。"
		},
		{
			"tag": "b",
			"text": "disabled"
		},
		{
			"tag": "p",
			"text": "使輸入欄位無法被修改或選取。"
		},
		{
			"tag": "b",
			"text": "readonly"
		},
		{
			"tag": "p",
			"text": "讓欄位僅供讀取，但可被選中。"
		},
		{
			"tag": "b",
			"text": "autofocus"
		},
		{
			"tag": "p",
			"text": "當頁面載入時會直接選取在此input上。"
		},
		{
			"tag": "b",
			"text": "pattern🚧"
		},
		{
			"tag": "p",
			"text": "可以撰寫正規表達式以客製化表單應該正確輸入的內容。"
		},
		{
			"tag": "p",
			"text": "[範例與客製的反饋內容🚧...]"
		},
		{
			"tag": "h3",
			"text": "type的屬性值"
		},
		{
			"tag": "b",
			"text": "text"
		},
		{
			"tag": "p",
			"text": "單行文字輸入。"
		},
		{
			"tag": "b",
			"text": "password"
		},
		{
			"tag": "p",
			"text": "密碼輸入，輸入內容會以隱藏符號顯示。"
		},
		{
			"tag": "b",
			"text": "email"
		},
		{
			"tag": "p",
			"text": "電子郵件輸入，會自動驗證格式。"
		},
		{
			"tag": "b",
			"text": "number"
		},
		{
			"tag": "p",
			"text": "數字輸入，可以設置最小值和最大值。"
		},
		{
			"tag": "precode",
			"text": "<label for='quantity'>數量:</label>\n<input type='number' id='quantity' name='quantity' min='1' max='10' step='1' value='1'>\n\n<!--\nmin:最小值\nmax:最大值\nstep:控制數量每次增加或減少的量\nvalue:初始值\n-->"
		},
		{
			"tag": "b",
			"text": "range"
		},
		{
			"tag": "p",
			"text": "範圍控制項的UI，也可以設定以上number所提及的屬性。"
		},
		{
			"tag": "b",
			"text": "checkbox"
		},
		{
			"tag": "p",
			"text": "多選框，允許多個選項。"
		},
		{
			"tag": "b",
			"text": "radio"
		},
		{
			"tag": "p",
			"text": "單選按鈕，從多個選項中選擇一個。"
		},
		{
			"tag": "b",
			"text": "submit"
		},
		{
			"tag": "p",
			"text": "送出表單的按鈕。通常在<form></form>內部的button的預設行為。"
		},
		{
			"tag": "h3",
			"text": "datalist🚧"
		},
		{
			"tag": "p",
			"text": "HTML 中的 <datalist> 元素用來定義一組選項，供 <input> 元素使用。當用戶在輸入欄位中輸入時，會根據 <datalist> 提供的選項顯示建議列表，類似於自動完成功能。"
		},
		{
			"tag": "h3",
			"text": "details🚧"
		},
		{
			"tag": "p",
			"text": "<details> 是 HTML5 中的一個互動元素，用來顯示可展開/收合的內容區域，通常搭配 <summary> 元素一起使用。當用戶點擊 <summary> 標籤時，會顯示或隱藏內部的細節內容，這在顯示額外資訊、FAQ（常見問題）或提供更多詳細內容時非常實用。"
		},
		{
			"tag": "precode",
			"text": "<details>\n  <summary>更多資訊</summary>\n  <p>這裡是展開後的詳細內容。</p>\n</details>"
		},
		{
			"tag": "h2",
			"text": "form 表單🚧"
		},
		{
			"tag": "p",
			"text": "⚠️form中有設定name屬性的資料才會送到後端。"
		},
		{
			"tag": "precode",
			"text": "<form action='' method='get' > <!-- 寄送隱密資訊要用POST method='post' 不然預設都是'get' -->\n  <label for='email'>帳號： </label>\n  <input id='email' type='text' name='email' required> <!-- required代表必填否則無法提交 -->\n  \n  <br>\n  <label for='passwords'>密碼： </label>\n  <input id='passwords' type='text' name='passwords' required>\n  \n  <br>\n  <button type='submit'>登入系統</button>\n</form>"
		},
		{
			"tag": "img",
			"text": "./img/2_表單範例.png"
		},
		{
			"tag": "h3",
			"text": "autocomplete"
		},
		{
			"tag": "p",
			"text": "HTML 中的 <form> 元素和 <input> 元素可以使用 autocomplete 屬性來控制是否讓瀏覽器自動填充表單。這個屬性會根據用戶以前輸入的資料提供建議，或者自動填入先前的數據。其可以應用於 <form> 標籤，控制整個表單的自動填充行為。也可以應用於 <input> 元素，控制單個輸入欄位的自動填充行為。"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "mark",
			"text": "填在<form></form>上的情況"
		},
		{
			"tag": "b",
			"text": "autocomplete='on'"
		},
		{
			"tag": "p",
			"text": "允許瀏覽器自動填充表單（預設值）。"
		},
		{
			"tag": "b",
			"text": "autocomplete='off'"
		},
		{
			"tag": "p",
			"text": "禁止瀏覽器自動填充表單。"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "mark",
			"text": "填在<input></input>上的情況"
		},
		{
			"tag": "b",
			"text": "name"
		},
		{
			"tag": "p",
			"text": "用戶的全名。"
		},
		{
			"tag": "b",
			"text": "email"
		},
		{
			"tag": "p",
			"text": "電子郵件地址。"
		},
		{
			"tag": "b",
			"text": "username"
		},
		{
			"tag": "p",
			"text": "用戶名。"
		},
		{
			"tag": "b",
			"text": "current-password"
		},
		{
			"tag": "p",
			"text": "目前的密碼。"
		},
		{
			"tag": "b",
			"text": "new-password"
		},
		{
			"tag": "p",
			"text": "新密碼。"
		},
		{
			"tag": "b",
			"text": "tel"
		},
		{
			"tag": "p",
			"text": "電話號碼。"
		},
		{
			"tag": "b",
			"text": "address-line1"
		},
		{
			"tag": "b",
			"text": "address-line2"
		},
		{
			"tag": "p",
			"text": "地址欄。"
		},
		{
			"tag": "b",
			"text": "postal-code"
		},
		{
			"tag": "p",
			"text": "郵政編碼。"
		},
		{
			"tag": "h2",
			"text": "contenteditable 允許編輯"
		},
		{
			"tag": "p",
			"text": "contenteditable 屬性可以讓 HTML 元素變成可編輯的區域，使用者可以直接在頁面上修改內容，有點類似<textarea>。以下是一個簡單的 contenteditable 範例。"
		},
		{
			"tag": "precode",
			"text": "<div class='editable' contenteditable='true'>\n  這是一個可編輯的區域，點擊後你可以直接修改這裡的文字。\n</div>"
		},
		{
			"tag": "h2",
			"text": "video 影片"
		},
		{
			"tag": "p",
			"text": "以下程式碼可以讓網頁播放影片,其中可以設定較多的<source>，當source來源取得不到時會往下取用可使用的來源播放。"
		},
		{
			"tag": "precode",
			"text": "<video autoplay muted poster='./images/09_laydown_scone.jpg' width='100%' loop controls controlslist='nodownload nofullscreen' disablepictureinpicture>\n  <source src='./videos/video1.mp4' />\n  <source src='./videos/video2.mp4' />\n  <p>不支援影片播放</p>\n</video>\n\n<!-- \n以下為屬性的說明\n  autoplay 自動播放\n  muted 靜音\n  poster 當影片不存在時可指定顯示的圖片\n  loop 重複播放\n  controls 影片控制項\n  controlslist='nodownload nofullscreen' 不能下載以及不能全螢幕的設定\n  disablepictureinpicture 不能子母畫面\n-->"
		},
		{
			"tag": "h2",
			"text": "檔案預覽🚧"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		}
	],
	[
		{ "title": "CSS🎨" },
		{
			"tag": "mark",
			"text": "內容過於基礎 暫時停更"
		},
		{
			"tag": "h2",
			"text": "介紹"
		},
		{
			"tag": "p",
			"text": "CSS（階層式樣式表） 是一種用來設定網頁的樣式及佈局的語言。它能讓你在 HTML 文件中的元素上套用不同的頁面樣式，例如改變字體、顏色、尺寸、擺放位置、拆分為多欄，或是添加動畫效果和其他裝飾的特性。CSS 既非標準程式語言，也不是標記語言，而是一種風格頁面語言。透過 CSS，你可以為網頁元素指定不同的外觀和排版，使網頁更具吸引力且易於閱讀。"
		},
		{
			"tag": "h2",
			"text": "選擇器"
		},
		{
			"tag": "b",
			"text": "1. 通配符選擇器：使用「*」表示，選取頁面中所有元素，通常用於基本設定，例如設定字體或內外邊距。"
		},
		{
			"tag": "b",
			"text": "2. 元素（標籤）選擇器：選取某種元素的所有實例，例如 <p>、<h1>、<div> 等。"
		},
		{
			"tag": "b",
			"text": "3. 類別（Class）選擇器：根據元素的 Class 值選中某些元素，用於差異化樣式設定。"
		},
		{
			"tag": "b",
			"text": "4. ID 選擇器：根據元素的唯一 ID 值選中某個元素，每個 ID 在頁面中應該是唯一的。"
		},
		{
			"tag": "precode",
			"text": "selector {\n    屬性:屬性值;\n    ...\n}"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "盡可能不要使用id選擇器去選取物件，因為其權重太高不容易被覆蓋，且因為id具有唯一性，CSS只能選取到一個物件，故並不方便使用。"
		},
		{
			"tag": "mark",
			"text": "MDN CSS 各種選擇器查詢"
		},
		{
			"tag": "a",
			"text": "https://developer.mozilla.org/zh-TW/docs/Glossary/CSS_Selector"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "mark",
			"text": "CSS Diner | 選擇器小遊戲"
		},
		{
			"tag": "a",
			"text": "https://flukeout.github.io/"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "超連結選擇器"
		},
		{
			"tag": "precode",
			"text": "/*以下順序不可調換*/\n\na:link{ text-decorate:none; }  /*定義預設的超連結樣式*/\na:visited{ color:red; }  /*定義瀏覽過的超連結樣式*/\na:hover{ text-decoration:underline; color:green }  /*定義滑鼠移至的超連結樣式*/\na:active{ color:yellow; }  /*定義選取的超連結樣式*/"
		},
		{
			"tag": "h2",
			"text": "圓角 boreder-radius"
		},
		{
			"tag": "p",
			"text": "用於設定元素的邊框圓角。這個屬性可以讓元素的邊框從鋭角變成圓角，從而創建更柔和、更圓潤的視覺效果。"
		},
		{
			"tag": "img",
			"text": "img/css/01_border-radius-1.png"
		},
		{
			"tag": "precode",
			"text": ".border-radius-1{\n  /* 全部設定 */\n  border-radius: 20px;\n}\n.border-radius-2{\n  /* 只設定某一個角 */\n  border-bottom-left-radius: 30px;\n}\n.border-radius-3{\n  /*可以設定4個值分別代表 左上 右上 右下 左下*/\n  border-radius: 10px 20px 30px 40px;\n}\n.border-radius-4{\n  /*可以設定3個值分別代表 左上 右上和左下 右下 */\n  border-radius: 0 10px 40px;\n}\n.border-radius-5{\n  /*可以設定成百分比*/\n  border-radius: 0 100%;\n}\n.border-radius-6{\n  /*50%就變成圓形*/\n  border-radius: 50%;\n}\n.border-radius-7{\n  /*分數型式會將圓角變為橢圓形*/\n  border-radius: 10px/40px;\n}"
		},
		{
			"tag": "h2",
			"text": "區塊陰影 box-shadow"
		},
		{
			"tag": "p",
			"text": "用於為元素設置陰影效果。這個屬性可以添加陰影來增強視覺層次感和立體感。"
		},
		{
			"tag": "precode",
			"text": "box-shadow: [水平偏移] [垂直偏移] [模糊半徑] [擴散半徑] [顏色];"
		},
		{
			"tag": "img",
			"text": "img/css/02_box-shadow-1.png"
		},
		{
			"tag": "precode",
			"text": "        .shadow1{\n            /* x軸 y軸 暈開 顏色*/\n            box-shadow: 10px 10px 10px #000;\n        }\n        .shadow2{\n            box-shadow: -10px -10px 5px rgb(233, 36, 36);\n        }\n        .shadow3:hover{\n            box-shadow: 0 0 20px rgb(131,7,7,0.7);\n        }\n\n        .shadow4{\n            box-shadow: -10px -10px 5px 5px rgb(233, 36, 36);\n        }\n        .shadow5{\n            box-shadow: 0px 0px 20px rgb(233, 36, 36) inset;\n        }\n        .shadow6{\n            box-shadow: -10px 0 10px blue, 10px 0 10px green;\n        }\n        .shadow7:hover{\n            box-shadow: -120px 0 0 red, 120px 0 0 blue, 0 -120px 0 orange, 0 120px 0 green;\n        }\n\n        .sun{\n            border-radius: 50%;\n            background: yellow;\n            box-shadow: 0 0 30px orange inset, 0 0 10px red inset, 0 0 20px rgb(255, 153, 0);\n        }"
		},
		{
			"tag": "h2",
			"text": "文字陰影 text-shadow"
		},
		{
			"tag": "p",
			"text": "用於為文字添加陰影效果。這個屬性可以設置陰影的偏移量、模糊半徑和顏色，從而讓文字看起來更具立體感和視覺效果。"
		},
		{
			"tag": "precode",
			"text": "text-shadow: [水平偏移] [垂直偏移] [模糊半徑] [顏色];"
		},
		{
			"tag": "img",
			"text": "img/css/03_text-shadow-1.png"
		},
		{
			"tag": "precode",
			"text": ".shadow1{\n            text-shadow: 1px 1px 10px rgb(50, 144, 221);\n        }\n.shadow2{\n            /*老師推薦的好看字體*/\n            color: #fff;\n            background: gray;\n            padding: 15px;\n        }\n\n.shadow2:hover{\n            /*可以設定好幾層，看起來更有層次*/\n            text-shadow: 0 0 2px #fff ,0 0 3px orange, 0 0 10px rgb(255, 136, 0);\n        }"
		},
		{
			"tag": "h2",
			"text": "邊框圖片 border-image"
		},
		{
			"tag": "p",
			"text": "用於將圖片作為元素的邊框。這個屬性提供了一種創建自定義邊框樣式的方法，允許你使用圖片來設置邊框的外觀。border-image 屬性結合了邊框圖片的來源、切片、寬度和填充等屬性。"
		},
		{
			"tag": "precode",
			"text": "border-image: [來源] [切片] / [寬度] / [填充] [平鋪模式];\n\n/*\n來源（source）：圖片的 URL 或數據 URI，指定作為邊框的圖片。\n切片（slice）：用於劃分圖片的區域，可以使用像素值或百分比。\n寬度（width）：邊框的寬度。\n填充（outset）：邊框超出內容區的距離。\n平鋪模式（repeat）：圖片如何平鋪，可以是 stretch、repeat、round 或 space。\n*/"
		},
		{
			"tag": "a",
			"text": "https://www.minwt.com/webdesign-dev/css/6143.html"
		},
		{
			"tag": "mark",
			"text": "參考網站: 梅問題 | border-image"
		},
		{
			"tag": "img",
			"text": "img/css/04_border-image-1.png"
		},
		{
			"tag": "h2",
			"text": "背景 background"
		},
		{
			"tag": "mark",
			"text": "以下還未整理"
		},
		{
			"tag": "precode",
			"text": ".class_1{\n    background-color: [屬性值]; /*設定的背景顏色*/\n    background-image: none | url(背景圖片網址) ; /*控制背景來源*/\n    background-attachment : [屬性值]; /*用於設定背景圖像的位置是在視口內固定，還是會隨著包含它的區塊滾動。這個屬性影響背景圖像的行為*/\n    background-repeat:[屬性值] ;  /*控制背景是否重複*/\n    background-position: [x] [y];  /*可以設定非重複背景出現的位置*/\n    background-size: [x] [y];  /*用於設定背景圖像的大小*/\n    \n}\n\n/*\n🔔background-attachment 有三種屬性\n fixed：背景相對於視口固定，即使元素有滾動機制，背景也不會隨著元素的內容滾動。\n local：背景相對於元素的內容固定，如果元素有滾動機制，背景會隨著元素的內容滾動。\n scroll：背景相對於元素本身固定，不會隨著元素的內容滾動。\n\n🔔background-repeat\n repeat 重複\n no-repeat 不重複\n repeat-x X方向重複\n repeat-y y方向重複\n \n🔔background-size\n cover：這個值會拉伸或縮放背景圖片，以完全覆蓋背景區域。如果圖片的寬高比例不同於背景區域，則部分圖片可能看不見。\n contain：這個值會縮放背景圖片，以完全容納在背景區域內。如果圖片的寬高比例不同於背景區域，則可能會出現空白區域。\n\n 如果使用具體的寬高值例如 50%、3em 或 12px。如果只提供一個值，則高度預設為 auto，即按比例縮放。\n\n 使用 auto auto，這會保持圖片的原始大小。\n\n*/"
		},
		{
			"tag": "h3",
			"text": "背景圖片 background-image"
		},
		{
			"tag": "p",
			"text": "用於設定元素的背景圖片。這個屬性可以使元素的背景更加豐富多樣，從而增強網頁的視覺效果。"
		},
		{
			"tag": "precode",
			"text": "/*基礎語法*/\nbackground-image: url('image-url');"
		},
		{
			"tag": "img",
			"text": "img/css/05_background-img-1.png"
		},
		{
			"tag": "precode",
			"text": "<style>\n    .block{\n        max-width: 800px;\n        margin-inline: auto;\n        height: 300px;\n\n        /*多重背景的效果；越前面則越上層*/\n        background: url(../../assets/images/1.png) left center no-repeat,url(../../assets/images/4.png) right center no-repeat,url(../../assets/images/map.png) center center;\n\n        /*\n            按照順序轉寫每個背景的大小 [x軸 y軸]\n            避免變形的方式就是固定一軸另外一軸使用auto能避免圖片變形\n        */\n\n        background-size: 220px auto/*未變形*/, 190px 190px/*變形*/, auto;\n    }\n</style>"
		},

		{
			"tag": "h3",
			"text": "背景尺寸 background-size"
		},
		{
			"tag": "p",
			"text": "用於指定背景圖片的尺寸。這個屬性可以控制背景圖片如何適應元素的大小，可以設置具體的尺寸值或使用關鍵字來自動調整。"
		},
		{
			"tag": "img",
			"text": "img/css/06_background-size-1.png"
		},
		{
			"tag": "precode",
			"text": ".block {\n        max-width: 800px;\n        margin-inline: auto;\n        height: 300px;\n        border: 4px solid #ccc;\n        margin-block: 15px;\n\n        /*多重背景的效果；越前面則越上層*/\n        background: url(../../assets/images/map.png) center center no-repeat;\n\n        /* background-size: cover; */\n      }\n\n      .contain {\n        /*可以將圖片在容器內完整看到，但會有部分留白*/\n        background-size: contain;\n      }\n\n      .cover {\n        /*圖片會填滿容器，但部分內容會在容器外顯示不出來，但不會留白*/\n        background-size: cover;\n      }"
		},
		{
			"tag": "h3",
			"text": "background-clip"
		},
		{
			"tag": "p",
			"text": "用於控制背景（背景顏色或背景圖片）繪製的區域。它決定了背景是否延伸到邊框、內邊距或內容區域。"
		},
		{
			"tag": "img",
			"text": "img/css/07_background-clip-1.png"
		},
		{
			"tag": "precode",
			"text": "background-clip: border-box | padding-box | content-box | text ;。"
		},
		{
			"tag": "img",
			"text": "img/css/07_background-clip-2.png"
		},
		{
			"tag": "precode",
			"text": ".Hello {\ntext-align: center;\nfont-family: Arial, Helvetica, sans-serif;\nbackground: linear-gradient(to top, purple, rgb(254, 219, 225) 70%);\n-webkit-background-clip: text; /*文字出現的範圍*/\ncolor: transparent;\nfont-size: 5rem;\n\n/*-webkit-前贅字代表瀏覽器可能尚未支援測試階段 */\n}"
		},
		{
			"tag": "h2",
			"text": "opacity 透明度"
		},
		{
			"tag": "p",
			"text": "用於設置元素的透明度。通過調整透明度，可以讓元素部分或完全透明，從而達到不同的視覺效果。"
		},
		{
			"tag": "precode",
			"text": "opacity: [0~1]; /*設定0~1之間的值*/\n\nopacity: 0;  /*透明*/\nopacity: 1;  /*不透明*/"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "注意: 設定父層透明度，會讓其子階元素繼承透明度。"
		},
		{
			"tag": "mark",
			"text": "更新中🚧..."
		}
	],
	[
		{ "title": "JavaScript🧩" },
		{
			"tag": "h2",
			"text": "介紹"
		},
		{
			"tag": "p",
			"text": "JavaScript（簡稱 JS）是一種跨平台、面向對象的腳本語言，它在 Web 頁面中實現互動功能，例如動畫、可點擊的按鈕、菜單等，是 Web 開發人員必須學習的三門語言之一，它控制網頁的行為，並與 HTML 和 CSS 一起工作。此外，它還有高級的服務端版本，例如 「Node.js」，可以在 Web 上添加更多功能，不僅僅是下載文件，還包括多台電腦之間的協同合作。以下式一些特點:"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "輕量級：JavaScript 是一種輕量級的編程語言。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "可插入 HTML 頁面：我們可以將 JavaScript 插入到 HTML 頁面中，並由所有現代瀏覽器執行。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "動態、弱型別、基於原型的物件導向程式語言：JavaScript 具有這些特性，使其適合用於 Web 開發。"
		},
		{
			"tag": "h2",
			"text": "宣告變數與常數"
		},
		{
			"tag": "h3",
			"text": "var"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "mark",
			"text": "全域變數"
		},
		{
			"tag": "mark",
			"text": "可重複宣告"
		},
		{
			"tag": "mark",
			"text": "Hoisting"
		},
		{
			"tag": "p",
			"text": "宣告的變數具有函數作用域(function scope)，也就是說，變數在函數內部是局部的，在函數外部是全局的。同一作用域內可以重複宣告同名變數。宣告的變數會被提升到作用域的頂部，但變數初始化不會提升。"
		},
		{
			"tag": "precode",
			"text": "function example() {\n    console.log(x); // undefined\n    var x = 5;\n    console.log(x); // 5\n}\nexample();"
		},
		{
			"tag": "h3",
			"text": "let"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "mark",
			"text": "區塊變數"
		},
		{
			"tag": "mark",
			"text": "不可重複宣告"
		},
		{
			"tag": "mark",
			"text": "Hoisting"
		},
		{
			"tag": "p",
			"text": "宣告的變數具有塊作用域（block scope），也就是說，變數在其宣告的代碼塊內是局部的。同一作用域內不能重複宣告同名變數。宣告的變數也會提升，但在變數宣告前使用會導致引用錯誤（ReferenceError）。"
		},
		{
			"tag": "precode",
			"text": "function example() {\n    console.log(x); // ReferenceError: x is not defined\n    let x = 5;\n    console.log(x); // 5\n}\nexample();"
		},
		{
			"tag": "h3",
			"text": "const"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "mark",
			"text": "區塊常數"
		},
		{
			"tag": "mark",
			"text": "不可重複宣告"
		},
		{
			"tag": "mark",
			"text": "不可重新賦值"
		},
		{
			"tag": "mark",
			"text": "Hoisting"
		},
		{
			"tag": "p",
			"text": " 宣告的變數也具有塊作用域（block scope），類似於 let，同一作用域內不能重複宣告同名變數。宣告的變數必須在宣告時賦值，且之後不能重新賦值。宣告的變數也會提升，但在變數宣告前使用會導致引用錯誤（ReferenceError）。"
		},
		{
			"tag": "precode",
			"text": "const myConst; // 這行會報錯，因為沒有初始化\nconst myConst = 10; // 正確的宣告方式\n\n\nconst myConst2 = 10;\nmyConst2 = 20; // 這行會報錯，因為不能重新賦值\n\nif (true) {\n    const myConst3 = 10;\n    console.log(myConst3); // 10\n}\nconsole.log(myConst3); // 這行會報錯，因為 myConst3 在這裡是未定義的\n\n"
		},
		{
			"tag": "h2",
			"text": "資料型別"
		},
		{
			"tag": "h3",
			"text": "型別判斷 typeof()"
		},
		{
			"tag": "p",
			"text": "typeof 是 JavaScript 中的運算符，用於檢查變數或表達式的數據類型。它返回一個字符串，表示操作數的數據類型。"
		},
		{
			"tag": "precode",
			"text": "let a =10;\nconsole.log(a,typeof(a));    //number\n\nlet b =false;\nconsole.log(b,typeof(b));    //boolean\n\nlet c ='Hello';\nconsole.log(c,typeof(c));    //string\n\nlet d =[];\nconsole.log(d,typeof(d));    //object\n\nlet e ={};\nconsole.log(e,typeof(e));    //object\n"
		},
		{
			"tag": "h3",
			"text": "轉換字串 toString()"
		},
		{
			"tag": "p",
			"text": "用於將數據轉換為字符串。"
		},
		{
			"tag": "precode",
			"text": "//轉換數字\nlet num = 123;\nlet str = num.toString();\nconsole.log(str); // '123'\n\n//轉換布林值\nlet bool = true;\nlet str = bool.toString();\nconsole.log(str); // 'true'\n\n//轉換物件\nlet obj = { key: 'value' };\nlet str = obj.toString();\nconsole.log(str); // '[object Object]'"
		},
		{
			"tag": "h3",
			"text": "轉換數值 Number()"
		},
		{
			"tag": "p",
			"text": "用於將一個值轉換為數字類型。它可以處理各種類型的輸入，如字符串、布林值和其他數字類型。"
		},
		{
			"tag": "precode",
			"text": "//轉換字串\nlet str = '123';\nlet num = Number(str); // 123\n\n//可以處理小數點\nlet str = '123.45';\nlet num = Number(str); // 123.45\n\n//布林值會被轉成0或1\nlet boolTrue = true;\nlet boolFalse = false;\nlet numTrue = Number(boolTrue); // 1\nlet numFalse = Number(boolFalse); // 0\n\n//處理非數字的數\nlet str = 'abc';\nlet num = Number(str); // NaN (Not-a-Number)\n\n//其它\nlet nullValue = null;\nlet num = Number(nullValue); // 0\n\nlet undefinedValue;\nlet num = Number(undefinedValue); // NaN\n\n"
		},
		{
			"tag": "h3",
			"text": "與parseInt()和parseFloat的區別"
		},
		{
			"tag": "b",
			"text": "parseInt()"
		},
		{
			"tag": "p",
			"text": "會解析字符串並返回整數，而 Number() 則會嘗試轉換整個字符串。"
		},
		{
			"tag": "b",
			"text": "parseFloat()"
		},
		{
			"tag": "p",
			"text": "會解析字符串並返回浮點數，而 Number() 會嘗試轉換整個字符串。"
		},
		{
			"tag": "precode",
			"text": "let str = '123abc';\nlet numParseInt = parseInt(str); // 123\nlet numParseFloat = parseFloat(str); // 123\nlet numNumber = Number(str); // NaN\n"
		},
		{
			"tag": "h2",
			"text": "運算符 Operator"
		},
		{
			"tag": "p",
			"text": "運算符 (Operators) 用於執行數值運算、字符串運算、比較和邏輯運算。"
		},
		{
			"tag": "h3",
			"text": "算數運算符"
		},
		{
			"tag": "precode",
			"text": "//加法\nlet sum = 5 + 3; // 8\nlet concatenated = 'Hello' + ' ' + 'World'; // 'Hello World'\n\n//減法\nlet difference = 5 - 3; // 2\n\n//乘法\nlet product = 5 * 3; // 15\n\n//除法\nlet quotient = 6 / 3; // 2\n\n//取餘數\nlet remainder = 5 % 2; // 1\n\n//求指數\nlet power = 2 ** 3; // 8\nlet power2 = Math.pow(2,3) // 8，此方法同上\n"
		},
		{
			"tag": "h3",
			"text": "賦值運算符"
		},
		{
			"tag": "p",
			"text": "賦值 (=)：將右側的值賦給左側的變量。"
		},
		{
			"tag": "precode",
			"text": "//將10賦予給x\nlet x = 10;\n\n\nlet x = 10;\nx += 5;  // x = x + 5的意思,x = 15\n"
		},
		{
			"tag": "p",
			"text": "減法賦值 (-=)、乘法賦值 (*=)、除法賦值 (/=)、取餘賦值 (%=)、指數賦值 (**=) 類似。"
		},
		{
			"tag": "h3",
			"text": "比較運算符"
		},
		{
			"tag": "p",
			"text": "通常回傳布林值。"
		},
		{
			"tag": "precode",
			"text": "//(==)檢查是否相等\nlet isEqual = (5 == '5'); // true\n\n//(===)檢查是否相等以外還檢查型別是否相同\nlet isStrictEqual = (5 === '5'); // false\n\n//(!=)值不相等與\nlet isNotEqual = (5 != '5'); // false\n\n//(!==)值或型別完全不相等\nlet isStrictNotEqual = (5 !== '5'); // true\n"
		},
		{
			"tag": "p",
			"text": "大於 (>)、小於 (<)、大於或等於 (>=)、小於或等於 (<=)：進行數值比較。"
		},
		{
			"tag": "h3",
			"text": "邏輯運算符"
		},
		{
			"tag": "precode",
			"text": "//And 兩個都是\nlet andResult = (true && false); // false\n\n//OR 其中一個是\nlet orResult = (true || false); // true\n\n//NOT 反轉布林\nlet notResult = (!true); // false"
		},
		{
			"tag": "h3",
			"text": "三元運算符 Ternary Operator"
		},
		{
			"tag": "p",
			"text": "又稱作條件運算符"
		},
		{
			"tag": "precode",
			"text": "//條件 ? 條件成立回傳 : 條件不成立回傳 \n\n//範例\nlet age = 18;\nlet canVote = (age >= 18) ? 'Yes, you can vote.' : 'No, you cannot vote.';\nconsole.log(canVote); // 输出: Yes, you can vote."
		},
		{
			"tag": "h3",
			"text": "擴展運算符 Spread Operator"
		},
		{
			"tag": "p",
			"text": "擴展運算符（spread operator）是三個點 (...) 的語法形式，用來展開可迭代物件（如陣列或字串）或對象。擴展運算符的用途非常多樣化，以下是常見的場景。"
		},
		{
			"tag": "precode",
			"text": "//用於陣列合併\nlet arr1 = [1, 2, 3];\nlet arr2 = [4, 5, 6];\nlet combined = [...arr1, ...arr2];\nconsole.log(combined); // 輸出: [1, 2, 3, 4, 5, 6]\n\n//用於複製陣列\nlet arr = [1, 2, 3];\nlet copy = [...arr];  //淺拷貝\nconsole.log(copy); // 輸出: [1, 2, 3]\n\n//用於添加陣列元素\nlet arr = [2, 3];\nlet newArr = [1, ...arr, 4];\nconsole.log(newArr); // 輸出: [1, 2, 3, 4]\n\n//用於將陣列拆給函數的參數用\nfunction sum(x, y, z) {\n  return x + y + z;\n}\n\nlet numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // 輸出: 6\n\n//用於字串轉陣列\nlet str = 'hello';\nlet chars = [...str];\nconsole.log(chars); // 輸出: ['h', 'e', 'l', 'l', 'o']\n\n//用於擴展物件\nlet obj1 = { a: 1, b: 2 };\nlet obj2 = { c: 3, ...obj1 };\nconsole.log(obj2); //輸出: { c: 3, a: 1, b: 2 }\n\n//用於解構賦值\nlet [first, ...rest] = [1, 2, 3, 4];\nconsole.log(first); // 輸出: 1\nconsole.log(rest);  // 輸出: [2, 3, 4]\n\n//用於合併物件\nlet obj1 = { a: 1 };\nlet obj2 = { b: 2 };\nlet merged = { ...obj1, ...obj2 };\nconsole.log(merged); // 輸出: { a: 1, b: 2 }\n\n//用於陣列插入\nlet arr1 = [1, 2, 5, 6];\nlet arr2 = [3, 4];\narr1.splice(2, 0, ...arr2);\nconsole.log(arr1); // 輸出: [1, 2, 3, 4, 5, 6]\n\n//用於取得物件屬性\nlet obj = { a: 1, b: 2, c: 3 };\nlet { a, ...rest } = obj;\nconsole.log(a);    // 輸出: 1\nconsole.log(rest); // 輸出: { b: 2, c: 3 }"
		},
		{
			"tag": "h2",
			"text": "條件判斷 if & switch"
		},
		{
			"tag": "h3",
			"text": "if"
		},
		{
			"tag": "p",
			"text": "if 語句根據條件的布爾值來決定是否執行代碼塊。"
		},
		{
			"tag": "b",
			"text": "語法"
		},
		{
			"tag": "precode",
			"text": "if (條件) {\n    // 當條件為真時執行的代碼\n} else if (其他條件) {\n    // 當其他條件為真時執行的代碼\n} else {\n    // 當上述條件都不為真時執行的代碼\n}\n"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "let x = 10;\n\nif (x > 10) {\n  console.log('x is greater than 10');\n} else if (x === 10) {\n  console.log('x is 10');\n} else {\n  console.log('x is less than 10');\n}\n"
		},
		{
			"tag": "h3",
			"text": "switch"
		},
		{
			"tag": "p",
			"text": "switch 語句根據表達式的值來執行對應的代碼塊。"
		},
		{
			"tag": "b",
			"text": "語法"
		},
		{
			"tag": "precode",
			"text": "switch (表達式) {\n    case 值1:\n        // 當表達式的值等於 值1 時執行的代碼\n        break;\n    case 值2:\n        // 當表達式的值等於 值2 時執行的代碼\n        break;\n    // 其他 case\n    default:\n        // 當表達式的值不匹配任何 case 時執行的代碼\n}\n"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "let fruit = 'apple';\n\nswitch (fruit) {\n\n  case 'apple':\n    console.log('It's an apple');\n    break;  //如果此處忘記break則會導致此區塊不中斷，讓下面的banana會一起輸出\n\n  case 'banana':\n    console.log('It's a banana');\n    break;\n\n  default:\n    //類似if判斷式的else\n    console.log('Unknown fruit');\n\n}\n"
		},
		{
			"tag": "h2",
			"text": "迴圈 loop"
		},
		{
			"tag": "p",
			"text": "在 JavaScript 中，迴圈（loop）是用來重複執行一段程式碼的結構。不同的迴圈可以用來遍歷陣列、物件或執行重複的計算。"
		},
		{
			"tag": "h3",
			"text": "for"
		},
		{
			"tag": "p",
			"text": "for 迴圈是最常用的迴圈之一，用於在知道迴圈執行次數的情況下進行迭代。"
		},
		{
			"tag": "precode",
			"text": "// 基本語法\nfor (initialization; condition; increment) {\n    // 迴圈內的程式碼\n}\n\n//initialization：初始化變數。\n//condition：每次迭代前檢查的條件。\n//increment：每次迭代後的增量（或減量）。\n\n// 範例\nfor (let i = 0; i < 5; i++) {\n    console.log(i); // 輸出: 0 1 2 3 4\n}\n"
		},
		{
			"tag": "h3",
			"text": "for...in"
		},
		{
			"tag": "p",
			"text": "for...in 迴圈用於遍歷物件的可列舉屬性。"
		},
		{
			"tag": "precode",
			"text": "// 基本語法\nfor (let key in object) {\n    // 迴圈內的程式碼\n}\n\n//key：物件的每個屬性名稱。\n//object：要遍歷的物件。\n\n// 範例\nlet person = { name: 'Alice', age: 25 };\nfor (let key in person) {\n    console.log(key + ': ' + person[key]);\n}\n// 輸出:\n// name: Alice\n// age: 25\n"
		},
		{
			"tag": "h3",
			"text": "for...of"
		},
		{
			"tag": "p",
			"text": "for...of 迴圈用於遍歷可迭代物件（如陣列、字串、Map、Set 等）的值。"
		},
		{
			"tag": "precode",
			"text": "// 基本語法\nfor (let value of iterable) {\n    // 迴圈內的程式碼\n}\n\n//value：可迭代物件中的每個值。\n//iterable：要遍歷的可迭代物件。\n\n// 範例\nlet numbers = [1, 2, 3, 4, 5];\nfor (let number of numbers) {\n    console.log(number); // 輸出: 1 2 3 4 5\n}\n"
		},
		{
			"tag": "h3",
			"text": "while"
		},
		{
			"tag": "p",
			"text": "while 迴圈在條件為 true 時執行迴圈內的程式碼。當條件為 false 時，迴圈停止。"
		},
		{
			"tag": "precode",
			"text": "// 基本語法\nwhile (condition) {\n    // 迴圈內的程式碼\n}\n\n//condition：每次迭代前檢查的條件。如果條件為 true，則執行迴圈內容。\n\n// 範例\nlet i = 0;\nwhile (i < 5) {\n    console.log(i); // 輸出: 0 1 2 3 4\n    i++;\n}\n"
		},
		{
			"tag": "h3",
			"text": "do...while"
		},
		{
			"tag": "p",
			"text": "do...while 迴圈至少執行一次，然後再檢查條件。"
		},
		{
			"tag": "precode",
			"text": "// 基本語法\ndo {\n    // 迴圈內的程式碼\n} while (condition);\n\n//condition：每次迭代後檢查的條件。如果條件為 true，則繼續執行迴圈內容。\n\n// 範例\nlet i = 0;\ndo {\n    console.log(i); // 輸出: 0 1 2 3 4\n    i++;\n} while (i < 5);\n"
		},
		{
			"tag": "h2",
			"text": "函式 function"
		},
		{
			"tag": "p",
			"text": "在 JavaScript 中，函數 (function) 是一段可以被多次調用的程式碼。"
		},
		{
			"tag": "precode",
			"text": "function callName(name='Jack', name2='Sue'){      // name可以設定預設值 沒有設定則會出現undefined\n            console.log(`Hello, ${name}, I'm ${name2}`);\n}\n\ncallName()  //呼叫函數的方法\ncallName('Joe','Steven')\ncallName('May')"
		},
		{
			"tag": "p",
			"text": "使用return能將函式內的資料往外丟。"
		},
		{
			"tag": "mark",
			"text": "return"
		},
		{
			"tag": "precode",
			"text": "function callName(name){\n    let welcome= `Hello, ${name}.`;\nreturn welcome;     //return可以將函式內的資料丟出函式\n}\n\nlet str1 = callName('Joe')\nconsole.log(str1);  //'Hello, Joe'"
		},
		{
			"tag": "p",
			"text": "另外一種的函式宣告方式:"
		},
		{
			"tag": "mark",
			"text": "default value"
		},
		{
			"tag": "precode",
			"text": "//另外一種的宣告方式\nlet callName = function( name1='Jack' , name2='May' ){\n    //可以利用上方括號內方法設定預設值，若沒有傳值進來則函數會用預設值替代。\n\n    console.log(`Hello, ${name1}, I'm ${name2}.`);\n}\n\ncallName();\ncallName('Tom','Sam');"
		},
		{
			"tag": "h3",
			"text": "IIFE"
		},
		{
			"tag": "p",
			"text": "IIFE（Immediately Invoked Function Expression，即時執行函數表達式）是一種 JavaScript 函數，這種函數在定義後立即執行。IIFE 通常用來創建一個新的作用域，避免變量污染全局空間。"
		},
		{
			"tag": "b",
			"text": "語法"
		},
		{
			"tag": "precode",
			"text": "(function() {\n    // 函數主體\n})();\n// 或者\n(function() {\n    // 函數主體\n}());\n"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "//立即執行function的方法\nlet hello = function(name){\n    console.log(`Hello, ${name}.`);\n}('Jack');\n\n//可直接不定義名稱\n(function(){\n    console.log('IIFE');\n})();\n"
		},
		{
			"tag": "b",
			"text": "創建獨立作用域，可避免變量汙染全局的命名空間"
		},
		{
			"tag": "precode",
			"text": "let result = (function() {\n    let privateVariable = 'I am private';\n    return privateVariable;\n})();\n\nconsole.log(result); // 輸出: I am private\n\n"
		},
		{
			"tag": "h3",
			"text": "bind()"
		},
		{
			"tag": "p",
			"text": "bind 是 JavaScript 中 Function 對象的一個方法，用於創建一個新的函數，當這個新函數被調用時，其 this 關鍵字會被設置為指定的值，並且可以在創建時為新函數預先設定一部分參數。"
		},
		{
			"tag": "precode",
			"text": "fun.bind(thisArg[, arg1[, arg2[, ...]]])\n\n/*\nthisArg: 調用綁定函數時，this 關鍵字的值。\narg1, arg2, ...: 預設的參數，這些參數會在綁定函數被調用時，依次作為參數傳入。\n*/"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "let objA={\n    name: 'Joe',\n}\n\nlet objB={\n    name: 'Jack',\n    writeName(age){\n        console.log(`${this.name}'s age is ${age} years old.`);\n    }\n}\n\nobjB.writeName(20);\n\n//將 objB 的function給 objA 用,並可以帶入參數。\nlet func = objB.writeName.bind(objA,22);  \nconsole.log(func);\n\nfunc();\nconsole.log(objA);\n\n\n//可以定義好function再帶參數進去\nlet func1 = objB.writeName.bind(objA);\nfunc1(15);\nfunc1(10);\nconsole.log(func1);"
		},
		{
			"tag": "h2",
			"text": "字串 string"
		},
		{
			"tag": "p",
			"text": "JavaScript 的字串就像是一串文字，你可以用單引號 ' 或雙引號 ' 將它們包起來。這些字串可以包含任何文字、數字、甚至是特殊符號。你可以想像它們就像是一個盒子，裡面裝著一段文字。"
		},
		{
			"tag": "h2",
			"text": "進階字串操作"
		},
		{
			"tag": "h3",
			"text": "padStart()"
		},
		{
			"tag": "p",
			"text": "padStart() 是 JavaScript ES2017 新增的一個字串方法，主要用於在字串的開頭（左側）填充特定字元，直到達到指定的長度。"
		},
		{
			"tag": "precode",
			"text": "str.padStart(targetLength, padString)"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "str: 要進行填充的原始字串。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "targetLength: 目標字串的長度。如果這個長度小於或等於原始字串的長度，則返回原始字串。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "padString: 用於填充的字串。如果未提供，則默認填充空格。"
		},
		{
			"tag": "precode",
			"text": "// 將 'hello' 填充到長度為 10，用 'x' 填充\nlet str = 'hello';\nlet paddedStr = str.padStart(10, 'x');\nconsole.log(paddedStr); // 输出：xxxxxhello"
		},
		{
			"tag": "h2",
			"text": "陣列 array"
		},
		{
			"tag": "p",
			"text": "在 JavaScript 中，陣列（Array）是一種用於存儲多個值的資料結構。陣列可以包含任何類型的資料，包括數字、字串、物件、甚至其他陣列。"
		},
		{
			"tag": "h3",
			"text": "陣列的宣告"
		},
		{
			"tag": "precode",
			"text": "let arr = []; // 宣告一個空陣列\nlet numbers = [1, 2, 3, 4, 5]; // 宣告一個包含數字的陣列\nlet mixed = [1, 'two', true, null, undefined, {name: 'Alice'}, [6, 7]]; // 宣告一個混合類型的陣列\n"
		},
		{
			"tag": "b",
			"text": "使用構造函數"
		},
		{
			"tag": "precode",
			"text": "let arr = new Array(); // 宣告一個空陣列\nlet numbers = new Array(1, 2, 3, 4, 5); // 宣告一個包含數字的陣列\n"
		},
		{
			"tag": "h3",
			"text": "訪問與修改陣列中的元素"
		},
		{
			"tag": "b",
			"text": "訪問"
		},
		{
			"tag": "precode",
			"text": "let numbers = [1, 2, 3, 4, 5];\nconsole.log(numbers[0]); // 輸出: 1\nconsole.log(numbers[2]); // 輸出: 3\n"
		},
		{
			"tag": "b",
			"text": "修改"
		},
		{
			"tag": "precode",
			"text": "numbers[0] = 10;\nconsole.log(numbers); // 輸出: [10, 2, 3, 4, 5]\n"
		},
		{
			"tag": "h3",
			"text": "length"
		},
		{
			"tag": "p",
			"text": "length 屬性可以獲取陣列的長度(即陣列中元素的數量)。"
		},
		{
			"tag": "precode",
			"text": "let numbers = [1, 2, 3, 4, 5];\nconsole.log(numbers.length); // 輸出: 5\n"
		},
		{
			"tag": "h2",
			"text": "基本陣列操作"
		},
		{
			"tag": "p",
			"text": "JavaScript 的陣列（Array）對象提供了許多方法來操作和處理數據。"
		},
		{
			"tag": "h3",
			"text": "push()、pop()"
		},
		{
			"tag": "mark",
			"text": "操作最後一個元素"
		},
		{
			"tag": "b",
			"text": "push：在陣列末尾添加一個或多個元素，並返回新的陣列長度。"
		},
		{
			"tag": "b",
			"text": "pop：移除陣列的最後一個元素，並返回該元素。"
		},
		{
			"tag": "precode",
			"text": "const array = [1, 2, 3];\narray.push(4); // [1, 2, 3, 4]\nconst lastElement = array.pop(); // [1, 2, 3], lastElement = 4\n"
		},
		{
			"tag": "h3",
			"text": "shift()、unshift()"
		},
		{
			"tag": "mark",
			"text": "操作第一個元素"
		},
		{
			"tag": "b",
			"text": "shift：移除陣列的第一個元素，並返回該元素。"
		},
		{
			"tag": "b",
			"text": "unshift：在陣列開頭添加一個或多個元素，並返回新的陣列長度。"
		},
		{
			"tag": "precode",
			"text": "const array = [1, 2, 3];\nconst firstElement = array.shift(); // [2, 3], firstElement = 1\narray.unshift(0); // [0, 2, 3]\n"
		},
		{
			"tag": "h3",
			"text": "concat()"
		},
		{
			"tag": "mark",
			"text": "合併陣列"
		},
		{
			"tag": "b",
			"text": "concat：合併兩個或多個陣列，不改變原始陣列，並返回新陣列。"
		},
		{
			"tag": "precode",
			"text": "const array1 = [1, 2];\nconst array2 = [3, 4];\nconst newArray = array1.concat(array2); // [1, 2, 3, 4]\n"
		},
		{
			"tag": "h3",
			"text": "slice()"
		},
		{
			"tag": "mark",
			"text": "切割陣列"
		},
		{
			"tag": "b",
			"text": "slice：返回陣列的一部分，從 start 到 end（不包括 end），不改變原始陣列。"
		},
		{
			"tag": "precode",
			"text": "const array = [1, 2, 3, 4, 5];\nconst slicedArray = array.slice(1, 3); // [2, 3]\n"
		},
		{
			"tag": "h3",
			"text": "splice()"
		},
		{
			"tag": "mark",
			"text": "從中插入或刪除元素"
		},
		{
			"tag": "b",
			"text": "splice：從陣列中添加或移除元素，並返回被移除的元素。"
		},
		{
			"tag": "precode",
			"text": "//splice(索引,要移除的元素個數[,要插入的第一筆資料,要插入的第二筆資料...])\n\nconst array = [1, 2, 3, 4, 5];\nconst removedElements = array.splice(2, 2); // [3, 4], array = [1, 2, 5]\narray.splice(1, 0, 'a', 'b'); // array = [1, 'a', 'b', 2, 5]\n\n"
		},
		{
			"tag": "h2",
			"text": "進階陣列操作"
		},
		{
			"tag": "h3",
			"text": "forEach()"
		},
		{
			"tag": "p",
			"text": "forEach 方法是一種遍歷陣列的方法。它允許你為陣列中的每一個元素執行指定的回調函數。forEach 方法不會返回新的陣列，而是對每一個元素執行回調函數。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "array.forEach(function(currentValue, index, array) {\n    // 你的代碼\n});\n\n//currentValue: 當前處理的元素。\n//index（可選）：當前處理元素的索引。\n//array（可選）：正在遍歷的陣列。"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "const fruits = ['apple', 'banana', 'mango'];\n\nfruits.forEach(function(fruit, index) {\n    console.log(`${index}: ${fruit}`);\n});\n"
		},
		{
			"tag": "b",
			"text": "注意事項"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "1. forEach無法使用break跳出迴圈，如果須要此種行為，請改用for迴圈或some、every。2.forEach方法不會影響或改變原始陣列。"
		},
		{
			"tag": "h3",
			"text": "filter()"
		},
		{
			"tag": "p",
			"text": "filter 方法用於創建一個新陣列，該陣列包含所有通過指定回調函數測試的元素。這個方法不會改變原始陣列。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "const newArray = array.filter(function(element, index, array) {\n    // 測試條件，返回 true 或 false\n});\n\n//element: 當前處理的元素。\n//index（可選）：當前處理元素的索引。\n//array（可選）：正在遍歷的陣列。"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "numbers = [1, 2, 3, 4, 5];\nlet nums = numbers.filter(function (myNum) {\n    return myNum > 3;\n});\n\nconsole.log(nums);  //[4,5]\n"
		},
		{
			"tag": "b",
			"text": "注意事項"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "1. filter方法返回的新陣列可能是空的，如果沒有任何元素通過回調函數的測試。2. 回調函數中的邏輯需要返回布林值 true 或 false，以決定當前元素是否應包含在新陣列中。"
		},
		{
			"tag": "h3",
			"text": "find()"
		},
		{
			"tag": "p",
			"text": "find 方法用於遍歷陣列並返回第一個符合提供的測試函數的元素。如果沒有符合條件的元素，則返回 undefined。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "const foundElement = array.find(function(element, index, array) {\n    // 測試條件，返回 true 或 false\n});\n\n//element: 當前處理的元素。\n//index（可選）：當前處理元素的索引。\n//array（可選）：正在遍歷的陣列。"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "const numbers = [5, 12, 8, 130, 44];\n\nconst found = numbers.find(function(number) {\n    return number > 10;\n});\n\nconsole.log(found); // 12\n"
		},
		{
			"tag": "b",
			"text": "注意事項"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "1. find 方法不會改變原始陣列。2. 回調函數中的邏輯需要返回布林值 true 或 false，以決定當前元素是否符合條件。3. 如果陣列中有多個元素符合條件，find 僅返回第一個符合條件的元素。"
		},
		{
			"tag": "h3",
			"text": "map()"
		},
		{
			"tag": "p",
			"text": "map 方法用於建立一個新陣列，這個新陣列中的每個元素都是通過調用提供的函數對原陣列中的每個元素進行處理後得到的結果。map 不會改變原始陣列。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "const newArray = array.map(function(element, index, array) {\n    // 你的處理邏輯\n    return newElement;\n});\n\n//element: 當前處理的元素。\n//index（可選）：當前處理元素的索引。\n//array（可選）：正在遍歷的陣列。"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "let scores = [51, 21, 62, 63, 36, 78];\nlet newScores = scores.map(function (score) {\n    return score * 2;\n});\nconsole.log(newScores);  //[102,42,124,126,72,156]"
		},
		{
			"tag": "b",
			"text": "注意事項"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "1. map 方法返回的新陣列長度與原始陣列相同。2. map 方法不會改變原始陣列，但回調函數中的操作可以改變原始陣列的元素。3. 回調函數需要有一個返回值，這個返回值將構成新陣列的元素。"
		},
		{
			"tag": "mark",
			"text": "大陣列縮減成小陣列"
		},
		{
			"tag": "p",
			"text": "有時候我們從別處獲取的陣列通常資料量非常大，我們可以重新map一次，將需要的部分重新轉換成一個新的陣列加以利用，以方便閱讀及節省效能。"
		},
		{
			"tag": "precode",
			"text": "//資料縮減的方法\n\nlet people2 = people.map(function (user) {\n    let newPerson = {};\n    newPerson.name = user.name;\n    newPerson.gender = user.gender;\n    return newPerson;\n});"
		},
		{
			"tag": "h3",
			"text": "reduce()"
		},
		{
			"tag": "p",
			"text": "reduce 是 JavaScript 陣列上的一個高階方法，用於對陣列中的每個元素執行一個 reducer 函數，最終將其彙總為單個值。reduce 可以用來實現從簡單的加總到複雜的資料結構轉換等多種操作。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)\n\n\n//callback：一個在陣列的每個元素上執行的函數，包含四個參數：\n\n//accumulator（累加器）：回調函數的返回值的累積。\n//currentValue（當前值）：正在處理的陣列元素。\n//currentIndex（當前索引）：正在處理的陣列元素的索引。\n//array（原始陣列）：調用 reduce 的陣列。\n\n//initialValue（初始值）：作為第一次調用回調函數時 accumulator 的值。如果未提供初始值，則將使用陣列中的第一個元素，並從第二個元素開始執行回調函數。"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "let numbers = [1, 2, 3, 4, 5];\n\n//陣列中值的加總\nlet sum = numbers.reduce(function(accumulator, currentValue) {\n    return accumulator + currentValue;\n}, 0);\n\nconsole.log(sum); // 輸出: 15\n\n//陣列中值的乘積\nlet product = numbers.reduce(function(accumulator, currentValue) {\n    return accumulator * currentValue;\n}, 1);\n\nconsole.log(product); // 輸出: 120\n"
		},
		{
			"tag": "mark",
			"text": "將陣列中的基數偶數分開"
		},
		{
			"tag": "precode",
			"text": "let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];\nlet grouped = numbers.reduce(function(accumulator, currentValue) {\n    if (currentValue % 2 === 0) {\n        accumulator.evens.push(currentValue);\n    } else {\n        accumulator.odds.push(currentValue);\n    }\n    return accumulator;\n}, { evens: [], odds: [] });\n\nconsole.log(grouped);\n// 輸出: { evens: [2, 4, 6, 8], odds: [1, 3, 5, 7, 9] }\n"
		},
		{
			"tag": "mark",
			"text": "陣列中重複值的計數器"
		},
		{
			"tag": "p",
			"text": "以下以水果陣列為範例"
		},
		{
			"tag": "precode",
			"text": "let fruits = ['apple', 'banana', 'orange', 'apple', 'orange', 'banana', 'banana'];\nlet fruitCount = fruits.reduce(function(accumulator, currentFruit) {\n    if (accumulator[currentFruit]) {    //判斷累加的物件中是否有此水果\n        accumulator[currentFruit]++;\n    } else {\n        accumulator[currentFruit] = 1;\n    }\n    return accumulator;\n}, {});\n\nconsole.log(fruitCount);\n// 輸出: { apple: 2, banana: 3, orange: 2 }"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "reduce 非常靈活，可以用來實現多種資料處理需求，但由於其功能強大，可能會增加代碼的複雜度。\n使用 reduce 時，確保你了解每次迭代中 accumulator 和 currentValue 的變化，以免邏輯錯誤。"
		},
		{
			"tag": "h3",
			"text": "some()"
		},
		{
			"tag": "p",
			"text": "在 JavaScript 中，some 是一個陣列方法，用於測試陣列中的至少一個元素是否通過提供的測試函數。只要有一個元素通過測試，some 方法就會返回 true，否則返回 false。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "array.some(callback(element, index, array), thisArg)\n\n\n//callback：一個用來測試每個元素的函數，接收三個參數：\n\n//element：當前處理的元素。\n//index（可選）：當前處理的元素的索引。\n//array（可選）：正在操作的陣列。\n//thisArg（可選）：執行 callback 時，用作 this 的值。"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "let numbers = [1, 2, 3, 4, 5];\n\nlet hasEven = numbers.some(function(element) {\n    return element % 2 === 0;\n});\n\nconsole.log(hasEven); // 輸出: true (因為有偶數)"
		},
		{
			"tag": "mark",
			"text": "使用thisArg"
		},
		{
			"tag": "precode",
			"text": "let validator = {\n    minAge: 18,\n    isValid: function(element) {\n        return element.age >= this.minAge;\n    }\n};\n\nlet people = [\n    { name: 'John', age: 16 },\n    { name: 'Jane', age: 22 }\n];\n\nlet allValid = people.some(validator.isValid, validator);\n\nconsole.log(allValid); // 輸出: true (因為至少有一個人的年齡大於或等於18歲)\n"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "some 方法不會改變原始陣列。\n一旦 callback 函數返回 true，some 方法會立即返回 true，不會繼續檢查後面的元素。\n如果陣列是空的，some 方法將直接返回 false。"
		},
		{
			"tag": "h3",
			"text": "every()"
		},
		{
			"tag": "p",
			"text": "every 方法是 JavaScript 中用於檢查陣列中所有元素是否都滿足指定條件的一個方法。當所有元素都滿足條件時，它返回 true，否則返回 false。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "array.every(callback(element[, index[, array]])[, thisArg])\n\n/*\nelement: 當前處理的元素。\nindex（可選）: 當前處理元素的索引。\narray（可選）: 調用 every 方法的陣列。\nthisArg（可選）: 執行回調函數時用作 this 的值。\n*/"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "//檢查陣列中的值是否皆大於0\nconst numbers = [1, 2, 3, 4, 5];\n\nconst allPositive = numbers.every(function(number) {\n  return number > 0;\n});\n\nconsole.log(allPositive); // 輸出: true\n\n\n//檢查陣列中的值是否皆為字串格式\nconst items = ['apple', 'banana', 'cherry'];\n\nconst allStrings = items.every(function(item) {\n  return typeof item === 'string';\n});\n\nconsole.log(allStrings); // 輸出: true\n\n"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "every方法並不會改變原始陣列。如果處理的是空陣列則方法會直接回傳 true 因為沒有違反任何條件。every方法遇到第一個不滿足條件的元素時停止迭代不會繼續檢查後面的元素。"
		},
		{
			"tag": "h3",
			"text": "includes()"
		},
		{
			"tag": "p",
			"text": "includes 方法是 JavaScript 中用於判斷陣列或字串是否包含指定元素的一個方法。當包含時，它返回 true，否則返回 false。這個方法對於檢查元素或子字串是否存在非常有用。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "array.includes(searchElement[, fromIndex])\n\n/*\nsearchElement: 需要查找的元素。\nfromIndex\n*/"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "const fruits = ['apple', 'banana', 'mango', 'orange'];\n\nconst hasBanana = fruits.includes('banana');\nconsole.log(hasBanana); // 輸出: true\n\nconst hasGrapes = fruits.includes('grapes');\nconsole.log(hasGrapes); // 輸出: false\n\n\n//從特定索引開始搜尋\nconst fruits = ['apple', 'banana', 'mango', 'orange'];\n\nconst hasBananaFromIndex2 = fruits.includes('banana', 2);\nconsole.log(hasBananaFromIndex2); // 輸出: false\n\n"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "字串也可以使用includes方法。其大小寫是敏感的，若搜尋的對象有大小寫之分，還是會視為false。如果傳入的fromIndex索引值為-1則會從陣列或字串的末尾開始。"
		},
		{
			"tag": "h3",
			"text": "join()"
		},
		{
			"tag": "p",
			"text": "join 方法是 JavaScript 中用於將陣列的所有元素連接成一個字串的一個方法。它通過指定的分隔符來連接每個元素，並返回一個新的字串。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "array.join([separator])\n\n/*\nseparator（可選）: 用於分隔陣列元素的字串。如果省略，默認使用逗號（,）。\n*/"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "const elements = ['Fire', 'Wind', 'Earth', 'Water'];\n\nconst result = elements.join();  //默認為逗號\nconsole.log(result); // 輸出: 'Fire,Wind,Earth,Water'\n\n\n\n//另外一種結果\nconst elements = ['Fire', 'Wind', 'Earth', 'Water'];\n\nconst result = elements.join(' - ');\nconsole.log(result); // 輸出: 'Fire - Wind - Earth - Water'\n"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "join 方法不會改變原陣列，它僅返回一個新的字串。分隔符號可以是空字串，則陣列元素將直接連接在一起，沒有任何分隔符。陣列元素為 undefined 或 null：這些元素在連接時會被轉換為空字串。"
		},
		{
			"tag": "h3",
			"text": "sort()"
		},
		{
			"tag": "p",
			"text": "sort 方法是 JavaScript 中用於對陣列中的元素進行排序的一個方法。默認情況下，sort 會按照字串的Unicode碼點順序對元素進行排序，但可以通過傳入比較函數來實現自定義排序。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "array.sort([compareFunction])\n\n/*\ncompareFunction（可選）：用來指定排序順序的函數。如果省略，元素將按照字串的Unicode碼點順序進行排序。\n*/\n"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "const fruits = ['banana', 'apple', 'cherry'];\nfruits.sort();\nconsole.log(fruits); // 輸出: ['apple', 'banana', 'cherry']\n"
		},
		{
			"tag": "b",
			"text": "自定義排序"
		},
		{
			"tag": "mark",
			"text": "升序排序數字"
		},
		{
			"tag": "precode",
			"text": "const numbers = [4, 2, 5, 1, 3];\nnumbers.sort((a, b) => a - b);\nconsole.log(numbers); // 輸出: [1, 2, 3, 4, 5]\n"
		},
		{
			"tag": "mark",
			"text": "降序排序數字"
		},
		{
			"tag": "precode",
			"text": "const numbers = [4, 2, 5, 1, 3];\nnumbers.sort((a, b) => b - a);\nconsole.log(numbers); // 輸出: [5, 4, 3, 2, 1]\n"
		},
		{
			"tag": "mark",
			"text": "按字串長度排序"
		},
		{
			"tag": "precode",
			"text": "const words = ['banana', 'apple', 'cherry', 'date'];\nwords.sort((a, b) => a.length - b.length);\nconsole.log(words); // 輸出: ['date', 'apple', 'banana', 'cherry']\n"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "此方法會改變原陣列，排序過程中，undefined 元素通常會被移到陣列末尾。sort 方法的實現因瀏覽器而異，某些情況下可能會導致不穩定排序（即相同元素的相對順序可能會改變）。然而，現代瀏覽器中大多數實現都是穩定的。對於較大的陣列，使用高效的比較函數非常重要，以避免性能問題。"
		},
		{
			"tag": "h3",
			"text": "reverse()"
		},
		{
			"tag": "p",
			"text": "reverse 方法是 JavaScript 中用於反轉陣列中元素順序的方法。它會改變原陣列，將陣列中元素的順序顛倒過來。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "array.reverse()"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "const numbers = [1, 2, 3, 4, 5];\nnumbers.reverse();\nconsole.log(numbers); // 輸出: [5, 4, 3, 2, 1]\n\n\nconst fruits = ['apple', 'banana', 'cherry'];\nfruits.reverse();\nconsole.log(fruits); // 輸出: ['cherry', 'banana', 'apple']\n"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "reverse 方法會直接改變原陣列，並返回被反轉的陣列。這意味著操作是不可逆的，原陣列的元素順序將被永久改變，除非再進行一次 reverse 操作如果陣列中包含 undefined 元素，這些元素在反轉過程中也會被正常處理。"
		},
		{
			"tag": "h3",
			"text": "indexOf()"
		},
		{
			"tag": "p",
			"text": "indexOf 方法是 JavaScript 中用於在數組或字串中查找指定元素或子字串第一次出現位置的一個方法。當找到匹配元素時，它返回該元素的第一個索引，否則返回 -1。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "array.indexOf(searchElement[, fromIndex])\n\n/*\nsearchElement: 需要查找的元素。\nfromIndex（可選）: 開始搜索的索引。默認值為 0。如果為負數，則從數組末尾開始計算索引。\n*/"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "const fruits1 = ['apple', 'banana', 'cherry', 'banana'];\nconst index = fruits1.indexOf('banana');\nconsole.log(index); // 輸出: 1\n\n\n//找不到元素時\nconst fruits2 = ['apple', 'banana', 'cherry'];\nconst index = fruits2.indexOf('grape');\nconsole.log(index); // 輸出: -1\n\n//從特定索引開始搜尋\nconst fruits3 = ['apple', 'banana', 'cherry', 'banana'];\nconst index = fruits3.indexOf('banana', 2);\nconsole.log(index); // 輸出: 3\n\n"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "indexOf 在字串中也可以使用，其也是大小寫敏感的。indexOf 方法在查找數組中 NaN 時會返回 -1，因為 NaN 與自身不相等。如果 fromIndex 是負數，則計算開始位置將從數組或字串的末尾開始。在陣列中查找 undefined 時，indexOf 可以正常找到。"
		},
		{
			"tag": "h3",
			"text": "findIndex()"
		},
		{
			"tag": "p",
			"text": "findIndex 是 JavaScript 中 Array 對象的一個方法，用於找到第一個滿足提供的測試函數的陣列元素的索引。若找不到符合條件的元素，則返回 -1。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "arr.findIndex(callback(element[, index[, array]])[, thisArg])\n\n/*\ncallback: 用於測試每個元素的函數，接受三個參數：\nelement: 當前正在處理的元素。\nindex（可選）：當前正在處理的元素的索引。\narray（可選）：調用 findIndex 的數組。\nthisArg（可選）：執行回調時用作 this 的對象。\n*/"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "//範例1\nconst array = [5, 12, 8, 130, 44];\n\n// 找到第一個大於 10 的元素的索引\nconst index = array.findIndex(element => element > 10);\n\nconsole.log(index); // 輸出: 1\nconsole.log(array[index]); // 輸出: 12\n\n\n//範例2\nconst inventory = [\n  { name: 'apple', quantity: 2 },\n  { name: 'banana', quantity: 0 },\n  { name: 'cherry', quantity: 5 }\n];\n\n// 找到第一個數量為 0 的水果的索引\nconst index = inventory.findIndex(item => item.quantity === 0);\n\nconsole.log(index); // 輸出: 1\nconsole.log(inventory[index]); // 輸出: { name: 'banana', quantity: 0 }"
		},
		{
			"tag": "h3",
			"text": "lastIndexOf()"
		},
		{
			"tag": "p",
			"text": "lastIndexOf 是 JavaScript 中 Array 對象和 String 對象的一個方法，用於查找元素在數組或字符串中的最後一次出現的位置。"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "arr.lastIndexOf(searchElement[, fromIndex])\n\n/*\nsearchElement: 要查找的元素。\nfromIndex（可選）：從該索引開始向前搜索，默認為數組的最後一個索引。\n*/"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "const array = [2, 5, 9, 2];\n\n// 查找元素 2 最後一次出現的位置\nconsole.log(array.lastIndexOf(2)); // 輸出: 3\n\n// 查找元素 7 最後一次出現的位置\nconsole.log(array.lastIndexOf(7)); // 輸出: -1\n\n// 從索引 2 開始向前查找元素 2\nconsole.log(array.lastIndexOf(2, 2)); // 輸出: 0\n\n// 從索引 -2（即倒數第二個元素）開始向前查找元素 2\nconsole.log(array.lastIndexOf(2, -2)); // 輸出: 0\n"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "字串型別的資料也可以使用 lastIndexOf。這些方法是大小寫敏感的。fromIndex 參數是可選的，如果省略，默認從數組或字符串的末尾開始搜索。對於數組，searchElement 使用嚴格相等（===）進行比較；對於字符串，searchValue 是子字符串匹配。"
		},
		{
			"tag": "h2",
			"text": "解構賦值👍"
		},
		{
			"tag": "p",
			"text": "解構賦值（Destructuring Assignment）是 JavaScript 中的一個新特性，它允許我們從陣列或物件中提取資料並賦值給獨立的變數。"
		},
		{
			"tag": "h3",
			"text": "1.陣列解構"
		},
		{
			"tag": "precode",
			"text": "const colors = ['red', 'green', 'blue'];\nconst [firstColor, secondColor, thirdColor] = colors;\nconsole.log(firstColor); // 'red'\nconsole.log(secondColor); // 'green'\nconsole.log(thirdColor); // 'blue'"
		},
		{
			"tag": "h3",
			"text": "2.物件解構"
		},
		{
			"tag": "precode",
			"text": "const person = { name: 'Alice', age: 30 };\nconst { name, age } = person;\nconsole.log(name); // 'Alice'\nconsole.log(age); // 30"
		},
		{
			"tag": "h3",
			"text": "3.預設值"
		},
		{
			"tag": "precode",
			"text": "let a, b;\n[a = 5, b = 7] = [1];\nconsole.log(a); // 1\nconsole.log(b); // 7"
		},
		{
			"tag": "h3",
			"text": "4.其餘元素"
		},
		{
			"tag": "precode",
			"text": "const [a, ...b] = [1, 2, 3];\nconsole.log(a); // 1\nconsole.log(b); // [2, 3]"
		},
		{
			"tag": "h2",
			"text": "JSON"
		},
		{
			"tag": "mark",
			"text": "輕量級"
		},
		{
			"tag": "mark",
			"text": "易讀性"
		},
		{
			"tag": "mark",
			"text": "語言無關性"
		},
		{
			"tag": "p",
			"text": "JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，易於人類閱讀和編寫，也易於機器解析和生成。JSON 是基於 JavaScript 語法，但獨立於語言，並且支持多種現代編程語言，JSON 已成為現代網絡應用和 API 的主要數據交換格式，因其簡單、靈活和高效的特性，受到了開發者的廣泛青睞。JSON主要由兩種結構組成:"
		},
		{
			"tag": "precode",
			"text": "//物件\n{\n    'name': 'Alice',\n    'age': 25,\n    'isStudent': false,\n    'courses': ['Math', 'Science'],\n    'address': {\n        'city': 'Wonderland',\n        'zip': '12345'\n    }\n}\n\n//陣列\n[\n    'Apple',\n    'Banana',\n    'Cherry',\n    42,\n    true,\n    null,\n    {\n        'name': 'Bob',\n        'age': 30\n    }\n]"
		},
		{
			"tag": "b",
			"text": "常用函式"
		},
		{
			"tag": "precode",
			"text": "//以此JSON為例\nlet user = {\n      name: 'Jack',\n      height: 100,\n      weight: 72,\n};"
		},
		{
			"tag": "h3",
			"text": "JSON.stringify()"
		},
		{
			"tag": "precode",
			"text": "//物件轉換為字串\nlet userString = JSON.stringify(user);\nconsole.log(userString);\nconsole.log(userString.name); //undefined"
		},
		{
			"tag": "h3",
			"text": "JSON.parse()"
		},
		{
			"tag": "precode",
			"text": "//字串再轉換為陣列\nlet parseUser = JSON.parse(userString);\nconsole.log(parseUser);\nconsole.log(parseUser.name);"
		},
		{
			"tag": "h2",
			"text": "內建的JavaScript物件"
		},
		{
			"tag": "h3",
			"text": "聲音物件 Audio"
		},
		{
			"tag": "p",
			"text": "利用new Audio建立一個聲音物件，並利用事件監聽將播放完的sound記憶體清空，避免佔用記憶體，利用play()方法可以進行播放。如以下程式碼。"
		},
		{
			"tag": "precode",
			"text": "let sound = new Audio('./sounds/shoot.mp3');\n\nsound.addEventListener('ended', (e) => {\n  e.currentTarget = null;\n});\n\nsound.play();"
		},
		{
			"tag": "b",
			"text": "鍵盤事件播放音訊的範例"
		},
		{
			"tag": "p",
			"text": "以下範例利用物件格式整理了聲音物件的名稱與來源,並利用鍵盤事件去觸發聲音的播放。"
		},
		{
			"tag": "precode",
			"text": "let soundObj = {\n  shoot: './sounds/shoot.mp3',\n  expolosion: './sounds/explo.mp3'\n};\n\nwindow.addEventListener('keyup', (e) => {\n  if (e.key == ' ') {\n    playSound('shoot');\n  } else if (e.key == 'Enter') {\n    playSound('expolosion');\n  }\n});\n\nfunction playSound(key) {\n  let shoot = new Audio(soundObj[key]);\n  shoot.addEventListener('ended', (e) => {\n    // 清空記憶體\n    e.currentTarget = null;\n  });\n  shoot.play();\n}"
		},
		{
			"tag": "h3",
			"text": "時間物件 Time"
		},
		{
			"tag": "precode",
			"text": "// 取得目前時間的方法\nlet now = new Date();\n\n//利用js內建的時間函數可以取得該計時單位的值\nlet year = now.getFullYear();\nlet date = now.getDate();\nlet month = now.getMonth() + 1;\nlet weekday = now.getDay();\nlet hrs = now.getHours();\nlet min = now.getMinutes();\nlet sec = now.getSeconds();\n\n//做成格式為: 2024/07/22(Mon) 15:34:00\nmonth = month < 10 ? '0' + month : month;\nhrs = hrs < 10 ? '0' + hrs : hrs;\nmin = min < 10 ? '0' + min : min;\nsec = sec < 10 ? '0' + sec : sec;\n\nlet weekdaysName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\nweekday = weekdaysName[weekday];\nconsole.log(`${year}/${month}/${date}(${weekday}) ${hrs}:${min}:${sec}`);"
		},
		{
			"tag": "h3",
			"text": "正規表達式 Regular Expression"
		},
		{
			"tag": "p",
			"text": "JavaScript 的正規表達式（Regular Expressions, 簡稱 Regex）是一種強大且靈活的模式匹配工具，常用於字串的檢查、查找、替換等操作。正規表達式由模式和修飾符組成，透過這些模式可以用來對字串進行匹配。"
		},
		{
			"tag": "mark",
			"text": "正規表達式參考文件 | MDN"
		},
		{
			"tag": "a",
			"text": "https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions"
		},
		{
			"tag": "b",
			"text": "正規表達式的創建："
		},
		{
			"tag": "precode",
			"text": "const regex = /pattern/flags;  //用斜線表示正規表達式的模式。\n\nconst regex = new RegExp('pattern', 'flags');  //使用構造函數(動態生成時使用)"
		},
		{
			"tag": "b",
			"text": "常用的正規表達式："
		},
		{
			"tag": "mark",
			"text": "手機號碼"
		},
		{
			"tag": "precode",
			"text": "function isValidPhoneNumber(phone) {\n    const phoneRegex = /^09\\d{8}$/;\n    return phoneRegex.test(phone);\n}\nconsole.log(isValidPhoneNumber('0912345678')); // true"
		},
		{
			"tag": "mark",
			"text": "電子信箱"
		},
		{
			"tag": "precode",
			"text": "function isValidEmail(email) {\n    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,6}$/;\n    return  emailRegex.test(email);\n}\n\nconsole.log(isValidEmail('test@example.com')); // true"
		},
		{
			"tag": "h3",
			"text": "錯誤物件 Error"
		},
		{
			"tag": "p",
			"text": "在 JavaScript 中，錯誤物件 (Error object) 用於處理和捕捉程式中的錯誤。當程序遇到異常情況時，會拋出錯誤物件來通知開發者，這些錯誤可以由 try...catch 語句來捕捉和處理。JavaScript 提供了多種類型的錯誤物件，並且開發者還可以自定義錯誤物件來處理特定情況。以下為一些常見的物件類型："
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "Error：基礎的錯誤物件，所有其他錯誤類型都繼承自此。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "ReferenceError：當引用的變數不存在時拋出。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "TypeError：當操作數或變量與預期的類型不符時拋出。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "RangeError：當數字超出合法範圍時拋出。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "SyntaxError：當 JavaScript 語法無效時拋出。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "EvalError：與 eval() 函數相關的錯誤。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "URIError：當 URI 操作失敗時（例如 decodeURIComponent）拋出。"
		},
		{
			"tag": "mark",
			"text": "常見方法"
		},
		{
			"tag": "precode",
			"text": "//可以使用 throw 關鍵字手動拋出錯誤，通常是 Error 類型的物件或它的子類。\n\nfunction divide(a, b) {\n  if (b === 0) {\n    throw new Error('除數不能為零');\n  }\n  return a / b;\n}\n\ntry {\n  console.log(divide(10, 0));\n} catch (error) {\n  console.error(error.message); // 輸出: 除數不能為零\n}\n"
		},
		{
			"tag": "mark",
			"text": "try...catch...finally 語句"
		},
		{
			"tag": "p",
			"text": "try 塊用來包裹可能會拋出錯誤的代碼，catch 塊用來處理錯誤。無論錯誤是否發生，finally 塊中的代碼都會執行。"
		},
		{
			"tag": "precode",
			"text": "function riskyFunction() {\n  throw new Error('發生錯誤');\n}\n\ntry {\n  riskyFunction();\n} catch (error) {\n  console.error('錯誤訊息:', error.message);\n} finally {\n  console.log('無論如何都會執行這段代碼');\n}\n"
		},
		{
			"tag": "mark",
			"text": "錯誤物件的屬性"
		},
		{
			"tag": "precode",
			"text": "try {\n  throw new Error('Something went wrong');\n} catch (error) {\n  console.log(error.message); // 輸出: Something went wrong\n  console.log(error.name);    // 輸出: Error\n  console.log(error.stack);   // 輸出: 堆疊資訊\n}\n"
		},
		{
			"tag": "h2",
			"text": "建構函式 Constructor Function"
		},
		{
			"tag": "p",
			"text": "在 JavaScript 中，建構函式（Constructor Function）是用來創建並初始化物件的特殊函式。使用建構函式可以創建具有相同結構和方法的多個物件。"
		},
		{
			"tag": "h3",
			"text": "建構函式的特點與慣例"
		},
		{
			"tag": "b",
			"text": "1. 名稱慣例"
		},
		{
			"tag": "p",
			"text": "建構函式的名稱通常以大寫字母開頭（例如 Person），這是 JavaScript 的命名慣例，表示這是一個可以用來創建物件的函式。"
		},
		{
			"tag": "b",
			"text": "2. this 關鍵字"
		},
		{
			"tag": "p",
			"text": "在建構函式內，this 代表的是新創建的物件實例。建構函式中的屬性和方法都會被賦值給這個新實例。"
		},
		{
			"tag": "b",
			"text": "3. new 關鍵字"
		},
		{
			"tag": "p",
			"text": "當使用 new 關鍵字調用建構函式時，會創建一個新物件，並將這個物件設為建構函式中的 this。最後，建構函式會自動返回這個物件。"
		},
		{
			"tag": "h3",
			"text": "建構函式範例"
		},
		{
			"tag": "precode",
			"text": "function Person(name, age) {\n  this.name = name;\n  this.age = age;\n\n  this.sayHello = function() {\n    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n  };\n}\n\n// 使用建構函式創建兩個新物件\nlet person1 = new Person('Alice', 25);\nlet person2 = new Person('Bob', 30);\n\nperson1.sayHello(); // 輸出: Hello, my name is Alice and I am 25 years old.\nperson2.sayHello(); // 輸出: Hello, my name is Bob and I am 30 years old.\n"
		},
		{
			"tag": "p",
			"text": "在這裡，Person 是一個建構函式，當使用 new Person('Alice', 25) 時，JavaScript 會創建一個新物件，並將 name 和 age 設置到新物件的屬性上。"
		},
		{
			"tag": "h3",
			"text": "使用原型方法"
		},
		{
			"tag": "p",
			"text": "將方法放在建構函式的 prototype 上，而不是直接在建構函式內定義，可以節省記憶體，因為所有實例將共享這些方法，而不會每個實例都創建一個新方法。"
		},
		{
			"tag": "precode",
			"text": "function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\n// 將方法放在原型上，所有實例都可以共用這個方法\nPerson.prototype.sayHello = function() {\n  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n};\n\nlet person1 = new Person('Alice', 25);\nlet person2 = new Person('Bob', 30);\n\nperson1.sayHello(); // 輸出: Hello, my name is Alice and I am 25 years old.\nperson2.sayHello(); // 輸出: Hello, my name is Bob and I am 30 years old.\n"
		},
		{
			"tag": "h3",
			"text": "使用class定義建構函式"
		},
		{
			"tag": "p",
			"text": "在 ECMAScript 6 (ES6) 中，引入了 class 語法，這是一種更清晰的方式來定義建構函式，但背後的機制與傳統建構函式相同。"
		},
		{
			"tag": "precode",
			"text": "class Person {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n\n  sayHello() {\n    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n  }\n}\n\nlet person1 = new Person('Alice', 25);\nlet person2 = new Person('Bob', 30);\n\nperson1.sayHello(); // 輸出: Hello, my name is Alice and I am 25 years old.\nperson2.sayHello(); // 輸出: Hello, my name is Bob and I am 30 years old.\n"
		},
		{
			"tag": "h3",
			"text": "避免漏掉new關鍵字"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "如果你忘記使用 new 調用建構函式，this 會指向全域對象（在瀏覽器中是 window），而不是一個新物件。這會導致意外行為。可以通過在建構函式中檢查 this 是否正確指向新實例來避免這種情況："
		},
		{
			"tag": "precode",
			"text": "//漏掉的解決辦法\nfunction Person(name, age) {\n  if (!(this instanceof Person)) {\n    return new Person(name, age); // 如果忘記使用 `new`，自動補上\n  }\n  this.name = name;\n  this.age = age;\n}\n"
		},
		{
			"tag": "h2",
			"text": "時間套件 | Moment.js"
		},
		{
			"tag": "p",
			"text": "Moment.js 是一個非常受歡迎的 JavaScript 庫，用來解析、驗證、操作和顯示日期和時間。儘管 Moment.js 現在已被官方建議改用其他現代化替代方案（如 Day.js 或原生的 JavaScript API），但它仍然在許多專案中廣泛使用。"
		},
		{
			"tag": "h3",
			"text": "匯入方式"
		},
		{
			"tag": "precode",
			"text": "//cdn引入moment.js 2.29.1版本\n<script src='https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js'></script>  \n\nnpm install moment  //使用npm安裝的方式\nconst moment = require('moment');    //在需要的文件引入"
		},
		{
			"tag": "h3",
			"text": "使用方式"
		},
		{
			"tag": "p",
			"text": "以下是一些常用的方法。"
		},
		{
			"tag": "precode",
			"text": "const now = moment();\nconsole.log(now.format()); // 輸出當前時間\n\n/*格式化日期*/\nconsole.log(now.format('YYYY-MM-DD')); // 2024-10-03\nconsole.log(now.format('MMMM Do YYYY, h:mm:ss a')); // October 3rd 2024, 2:30:00 pm\n\n/*自訂格式解析*/\nconst customDate = moment('03-10-2024', 'DD-MM-YYYY');\nconsole.log(customDate.format('YYYY-MM-DD')); // 2024-10-03\n\n/*時間的加減*/\nconst future = now.add(7, 'days');\nconsole.log(future.format('YYYY-MM-DD')); // 當前日期加 7 天\n\nconst past = moment().subtract(1, 'month');\nconsole.log(past.format('YYYY-MM-DD')); // 當前日期減 1 個月\n\n/*時間的比較*/\nconst tomorrow = moment().add(1, 'day');\nconsole.log(now.isBefore(tomorrow)); // true\n\nconst yesterday = moment().subtract(1, 'day');\nconsole.log(now.isAfter(yesterday)); // true\n\nconst date1 = moment('2024-10-03');\nconst date2 = moment('2024-10-03');\nconsole.log(date1.isSame(date2)); // true\n\nconst start = moment('2024-10-01');\nconst end = moment('2024-10-03');\nconsole.log(end.diff(start, 'days')); // 2\n\n/*時間的設定與取得*/\ndate.set('year', 2025);  // 設置年份\ndate.set('month', 0);    // 設置為一月（0 是一月）\nconsole.log(date.format('YYYY-MM-DD')); // 2025-01-03\n\nconsole.log(now.get('year'));  // 獲取年份\nconsole.log(now.get('month')); // 獲取月份 (0 是一月)"
		},
		{
			"tag": "mark",
			"text": "Moment.js 官方文檔"
		},
		{
			"tag": "a",
			"text": "https://momentjs.com/"
		},
		{
			"tag": "h2",
			"text": "瀏覽器物件模型 BOM"
		},
		{
			"tag": "p",
			"text": "BOM(Browser Object Model)又稱作「瀏覽器物件模型」，是瀏覽器所有功能的核心，與網頁的內容無關。早期沒有規範時，各家瀏覽器廠商自行開發瀏覽器的功能，非常混亂。 直到最近幾年， W3C 把各家瀏覽器統一集合起來納入了 HTML5 的標準中。因為在DOM Level 1標準定制前，BOM已經存在了，所以也可以稱作Level 0 DOM。"
		},
		{
			"tag": "mark",
			"text": "Meduim | BOM和DOM筆記 →"
		},
		{
			"tag": "a",
			"text": "https://medium.com/%E5%BF%AB%E6%A8%82%E5%AD%B8%E7%A8%8B%E5%BC%8F/javascript%E5%85%A5%E9%96%80%E7%B3%BB%E5%88%97-%E4%BD%95%E8%AC%82bom%E5%92%8Cdom-b6eeab2ee5fd"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "Window Object"
		},
		{
			"tag": "p",
			"text": "代表目前程式碼正在運作的電腦視窗(通常是指我們的瀏覽器視窗)，其常見的method如下："
		},
		{
			"tag": "b",
			"text": "常見的方法"
		},
		{
			"tag": "precode",
			"text": "window.alert( )    //在視窗顯示對話框\n\nwindow.prompt( )    //return用戶在提示對話框輸入的文字\n\nwindow.setInterval(執行的函式,輸入毫秒)    //每次經過給定的毫秒數時安排一個函式執行\n\nwindow.clearInterval(要暫停的函示)    //將setInterval所重複執行的程式暫停\n\nwindow.addEventListener( )    //將事件監聽附加到Window Object"
		},
		{
			"tag": "mark",
			"text": "MDN Window.Object 的 methods"
		},
		{
			"tag": "a",
			"text": "https://developer.mozilla.org/en-US/docs/Web/API/Window#instance_methods"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "物件導向程式設計概念"
		},
		{
			"tag": "p",
			"text": "一個物件可以是另一個物件的屬性。例如，人的配偶也是一個人。Window Object可使用的常見Properties包含："
		},
		{
			"tag": "precode",
			"text": "window.console    //對瀏覽器的控制台進行訪問\n\nconsole.log( )    //將括弧內的內容輸出到控制台。\nconsole.error( )    //將括弧內的錯誤訊息輸出到控制台。\n\nwindow.document    //回傳window包含的文檔，就是HTML。\n\nwindow.localStorage    //回傳一個local storage物件。\n\nwindow.sessionStorage    //回傳一個session storage物件。"
		},
		{
			"tag": "h3",
			"text": "取得目前所選取的文字"
		},
		{
			"tag": "precode",
			"text": " window.getSelection();"
		},
		{
			"tag": "p",
			"text": "此方法搭配mouseup事件監聽可以有效地取得到所選取的內容，請參照以下範例:"
		},
		{
			"tag": "precode",
			"text": "<!DOCTYPE html>\n<html lang='zh-Hant'>\n<head>\n  <meta charset='UTF-8'>\n  <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n  <title>Contenteditable 範例</title>\n  <style>\n    .editor {\n      border: 2px solid #ccc;\n      padding: 10px;\n      min-height: 100px;\n      width: 300px;\n      font-size: 16px;\n    }\n  </style>\n</head>\n<body>\n\n<h1>在可編輯區域中選取內容並加上標記</h1>\n\n<div class='editor' contenteditable='true'>\n  這裡的文字是可編輯的。你可以選取一些文字，並且它們將被高亮顯示。\n</div>\n\n<script>\n  document.querySelector('.editor').addEventListener('mouseup', () => {\n    const selection = window.getSelection();\n    const text = selection.toString().trim();\n\n    if (text.length <= 0) {\n      return;\n    }\n    \n    // 確認選取範圍\n    const range = selection.getRangeAt(0);\n\n    // 創建一個 <mark> 元素\n    const mark = document.createElement('mark');\n    mark.appendChild(range.extractContents());\n\n    // 插入 <mark> 標籤包裹選取的內容\n    range.insertNode(mark);\n\n    // 清除選取狀態\n    selection.removeAllRanges();\n  });\n</script>\n\n</body>\n</html>\n"
		},
		{
			"tag": "h2",
			"text": "文件物件模型 DOM⭐"
		},
		{
			"tag": "p",
			"text": "DOM（文件物件模型） 是用來表示和與任何 HTML 或 XML 文件互動的 API。它在瀏覽器中以樹狀結構的形式表達，其中每個節點代表著文件的一部分，例如元素、文字或留言。DOM 提供了操作 HTML 元素的能力，讓開發人員能夠使用 JavaScript 來修改 HTML 元素的內容、屬性和樣式等。"
		},
		{
			"tag": "p",
			"text": "簡單來說，DOM 將 HTML 元素轉換成 JavaScript 物件，使得我們可以通過 JavaScript 來操作和修改網頁的內容。它是 Web 開發中最常用的 API 之一，讓我們能夠動態地操作網頁，例如新增、刪除、修改元素，或是綁定事件等..."
		},
		{
			"tag": "img",
			"text": "./img/4_DOM TREE"
		},
		{
			"tag": "p",
			"text": "透過DOM我們可以："
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "獲取元素"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "移除元素"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "創建元素"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "添加元素到頁面"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "綁定事件"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "修改、增加、刪除物件屬性"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "添加CSS樣式"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "添加 CSS 的 class 或 id 等等"
		},
		{
			"tag": "p",
			"text": "所謂的Document Object Model，顧名思義可知HTML也被視為是物件，這種架構也被稱為模型(Model)。在DOM這顆樹上的每個點被稱之為節點(Node)。節點分為三種："
		},

		{
			"tag": "p",
			"class":"nli",
			"text": "HTML元素節點(稱為element nodes or element objects)"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "文字節點(text node)"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "註解節點(comment node)"
		},
		{
			"tag": "p",
			"text": "⚠️DOM提供2種節點集合：「HTMLCollection」 以及「NodeList」。其中HTMLCollection僅包含上面第一個元素節點，NodeList則包含以上三種。",
			"class": "yellow"
		},
		{
			"tag": "h2",
			"text": "DOM物件的選取"
		},
		{
			"tag": "h3",
			"text": "document.getElementById(id)"
		},
		{
			"tag": "p",
			"text": "getElementById()此介面的方法傳回Document一個對象，表示其屬性與指定字串匹配的Element元素。id由於元素 ID 在指定時必須是唯一的，因此它們是快速存取特定元素的有用方法。"
		},
		{
			"tag": "precode",
			"text": "<h1 id='myHeading1'>我的標題</h1>\n\n<script>\n    let myHeading = document.getElementById('myHeading1');    //將id叫做myHeading1的物件取得並放入變數myHeading中\n    console.log(myHeading)    //顯示取得的h1物件\n    \n</script>"
		},
		{
			"tag": "h3",
			"text": "document.querySelector()"
		},
		{
			"tag": "p",
			"text": "通過 CSS 選擇器語法來選擇第一個符合條件的元素。"
		},
		{
			"tag": "precode",
			"text": "let element = document.querySelector('.myClass'); // 選擇第一個匹配的元素"
		},
		{
			"tag": "h3",
			"text": "document.querySelectorAll()"
		},
		{
			"tag": "p",
			"text": "通過 CSS 選擇器語法來選擇所有符合條件的元素，返回一個 NodeList。"
		},
		{
			"tag": "precode",
			"text": "let elements = document.querySelectorAll('.myClass');"
		},
		{
			"tag": "h2",
			"text": "DOM物件的修改"
		},
		{
			"tag": "h3",
			"text": "innerHTML"
		},
		{
			"tag": "p",
			"text": "設定或獲取元素的 HTML 內容。"
		},
		{
			"tag": "precode",
			"text": "element.innerHTML = '<p>這是新內容</p>';"
		},
		{
			"tag": "h3",
			"text": "textContent & innerText"
		},
		{
			"tag": "p",
			"text": "只操作純文字內容，不會解析 HTML。"
		},
		{
			"tag": "precode",
			"text": "element.textContent = '這是新的純文字內容';"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "「textContent」的功能與「innerText」大致相同，但他們有一些關鍵的差異，textContent 會返回元素中所有的文字內容，不管它們是否被顯示或隱藏，完全不受 CSS 樣式的影響有別於innerText； textContent 不會觸發重繪和重排，所以性能比 innerText 更好，尤其在大量 DOM 操作時。"
		},
		{
			"tag": "h3",
			"text": "getAttribute() & setAttribute()"
		},
		{
			"tag": "p",
			"text": "獲取或設定元素的屬性值。"
		},
		{
			"tag": "precode",
			"text": "// 獲取屬性\nlet src = element.getAttribute('src');\n\n// 設定屬性\nelement.setAttribute('src', 'newImage.png');"
		},
		{
			"tag": "p",
			"text": "刪除元素的指定屬性。"
		},
		{
			"tag": "precode",
			"text": "element.removeAttribute('src');"
		},
		{
			"tag": "h3",
			"text": "style"
		},
		{
			"tag": "p",
			"text": "直接修改元素的CSS樣式。"
		},
		{
			"tag": "precode",
			"text": "element.style.color = 'red';\nelement.style.fontSize = '20px';"
		},
		{
			"tag": "h3",
			"text": "classList"
		},
		{
			"tag": "p",
			"text": "操作元素的類別(class)，以下皆為常用的classList方法。"
		},
		{
			"tag": "precode",
			"text": "element.classList.add('active');    //元素class新增active。\nelement.classList.remove('hidden');   //元素class移除hidden。\nelement.classList.toggle('highlight');    //元素class開關highlight (無則新增,有則移除)。\nclassList.contains('cover');    //檢查元素class是否含有cover。\n"
		},
		{
			"tag": "p",
			"text": "[157. get element by id or class 7:50🚧]"
		},
		{
			"tag": "h2",
			"text": "進階概念👍"
		},
		{
			"tag": "h3",
			"text": "閉包 (closure)"
		},
		{
			"tag": "p",
			"text": "想像一下，你家裡就像一個 JavaScript 的「作用域」，裡面有不同的房間 (函式)。有些東西 (變數) 你可以放在客廳 (全域變數)，大家都可以用。但有些東西你可能只想放在自己的房間 (函式內的變數)，只有自己能用。"
		},
		{
			"tag": "p",
			"class":"yellow",
			"text": "閉包就像是一個「小幫手」，它可以讓你即使離開了自己的房間，還是可以偷偷回去拿東西。"
		},
		{
			"tag": "precode",
			"text": "function 我家() {\n  const 客廳的東西 = '電視'; // 全域變數，大家都可以用\n\n  function 我的房間() {\n    const 我的東西 = '玩具'; // 函式內的變數，只有自己能用\n    console.log('我在房間裡玩' + 我的東西); // 我在房間裡玩玩具\n    console.log('我也在客廳看' + 客廳的東西); // 我也在客廳看電視\n  }\n\n  return 我的房間; // 把「我的房間」這個小幫手交出去\n}\n\nconst 小明 = 我家(); // 小明拿到了「我的房間」這個小幫手\n小明(); // 小明即使不在「我家」了，還是可以回去拿「我的東西」和「客廳的東西」"
		},
		{
			"tag": "b",
			"text": "簡單來說"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "閉包就是一個函式，它可以記住自己被創造時周圍的環境 (變數)。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "即使函式已經離開了它原本的作用域，它還是可以存取那些被記住的變數。"
		},
		{
			"tag": "b",
			"text": "閉包有什麼用處?"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "保持變數的私有性： 可以把一些變數藏在函式裡面，不讓外面的人隨便改動。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "延長變數的生命週期： 有些變數在函式結束後就應該消失，但閉包可以讓它們繼續存在。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "實現一些特殊的功能： 像是一些計數器、延遲執行等等。"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "p",
			"text": "在這個範例中，outerFunction 是一個外部函式，它定義了一個變數 outerVar 和一個內部函式 innerFunction。 innerFunction 可以訪問 outerVar。  當 outerFunction 返回 innerFunction，並將返回的函式賦值給 closureExample 時，即使 outerFunction 已經執行完畢，closureExample (也就是 innerFunction) 仍然可以記住並存取 outerVar。"
		},
		{
			"tag": "precode",
			"text": "function outerFunction() {\n  let outerVar = '我來自外部函式';\n\n  function innerFunction() {\n    console.log(outerVar);\n  }\n\n  return innerFunction;\n}\n\nlet closureExample = outerFunction();\nclosureExample(); // 輸出: 我來自外部函式"
		},
		{
			"tag": "p",
			"text": "閉包常用於創建私有變數和資料封裝。  在下面的例子中，createCounter 函式返回一個物件，這個物件包含兩個方法：increment 和 getValue。  變數 count 被定義在 createCounter 函式的作用域內，外部無法直接訪問 count。  但是，透過 increment 和 getValue 這兩個閉包函式，我們可以間接地操作和訪問 count，實現了類似私有變數的效果。"
		},
		{
			"tag": "precode",
			"text": "function createCounter() {\n  let count = 0; // 私有變數\n\n  return {\n    increment: function() {\n      count++;\n    },\n    getValue: function() {\n      return count;\n    }\n  };\n}\n\nlet counter = createCounter();\ncounter.increment();\ncounter.increment();\nconsole.log(counter.getValue()); // 輸出: 2\nconsole.log(counter.count); // 輸出: undefined (無法直接訪問 count)"
		},
		{
			"tag": "p",
			"text": "這個範例示範了在使用迴圈和閉包時，var 和 let 的不同行為。  var 宣告的變數具有函式作用域，而 let 宣告的變數具有塊級作用域。  在使用 var 的情況下，所有的閉包都會共享同一個 i 變數，導致輸出都是最後的 i 值。 而使用 let 時，每次迴圈迭代都會創建一個新的 i 變數，每個閉包都記住的是當次迭代的 i 值。"
		},
		{
			"tag": "precode",
			"text": "// 使用 var\nfunction varExample() {\n  for (var i = 1; i <= 3; i++) {\n    setTimeout(function() {\n      console.log('var 迴圈 i:', i);\n    }, 1000);\n  }\n}\n\nvarExample(); // 輸出三次 'var 迴圈 i: 4' (因為 var i 是函式作用域，迴圈結束後 i 的值變成了 4)\n\n\n// 使用 let\nfunction letExample() {\n  for (let i = 1; i <= 3; i++) {\n    setTimeout(function() {\n      console.log('let 迴圈 i:', i);\n    }, 1000);\n  }\n}\n\nletExample(); // 輸出 'let 迴圈 i: 1', 'let 迴圈 i: 2', 'let 迴圈 i: 3' (因為 let i 是塊級作用域，每次迴圈都產生新的 i)"
		},
		{
			"tag": "h3",
			"text": "Proxy 與 Reflect"
		},
		{
			"tag": "p",
			"text": "Proxy 和 Reflect 是 ES6 引入的用於元編程 (meta-programming) 的 API。"
		},
		{
			"tag": "b",
			"text": "Proxy"
		},
		{
			"tag": "p",
			"text": "Proxy 物件可以攔截並自訂物件的基本操作 (例如屬性訪問、賦值、函式呼叫等)。你可以使用 Proxy 創建物件的代理，並在這些操作發生時執行自訂的行為。"
		},
		{
			"tag": "b",
			"text": "Reflect"
		},
		{
			"tag": "p",
			"text": "Reflect 是一個內建物件，提供了一組與 Proxy 處理器方法相對應的靜態方法。Reflect 的方法與物件的預設行為相同，但它們可以被 Proxy 攔截和自訂。"
		},
		{
			"tag": "p",
			"class":"yellow",
			"text": "Proxy 和 Reflect 提供了強大的元編程能力，可以用於實現各種高級模式，例如資料驗證、追蹤物件訪問、實現虛擬物件、建立高效的框架和庫等。"
		},
		{
			"tag": "precode",
			"text": "const target = {\n  name: '原始物件'\n};\n\nconst handler = {\n  get: function(target, property, receiver) {\n    console.log(`正在訪問屬性: ${property}`);\n    return Reflect.get(target, property, receiver); // 使用 Reflect.get 獲取原始行為\n  },\n  set: function(target, property, value, receiver) {\n    console.log(`正在設定屬性: ${property} 為 ${value}`);\n    return Reflect.set(target, property, value, receiver); // 使用 Reflect.set 設定原始行為\n  }\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.name);   // 輸出: 正在訪問屬性: name, 然後輸出: 原始物件\nproxy.name = '代理物件'; // 輸出: 正在設定屬性: name 為 代理物件\nconsole.log(proxy.name);   // 輸出: 正在訪問屬性: name, 然後輸出: 代理物件"
		},
		{
			"tag": "h3",
			"text": "Generators 與 Iterators"
		},
		{
			"tag": "b",
			"text": "生成器(Generators)"
		},
		{
			"tag": "p",
			"text": "生成器是一種特殊的函式，可以使用 function* 語法定義。生成器函式可以暫停執行 (使用 yield 關鍵字) 並在之後恢復執行。生成器函式返回一個迭代器。"
		},
		{
			"tag": "b",
			"text": "迭代器(Iterators)"
		},
		{
			"tag": "p",
			"text": "迭代器是一種讓你可以遍歷 (iterate) 集合 (例如陣列、字串、Map, Set 等) 的機制。迭代器物件有一個 next() 方法，每次調用 next() 方法會返回一個包含 value 和 done 屬性的物件，value 是當前迭代的值，done 是一個布林值，指示迭代是否完成。"
		},
		{
			"tag": "p",
			"class":"yellow",
			"text": "迭代器和生成器提供了更強大的控制流程，特別是在處理大量數據或需要延遲計算 (lazy evaluation) 的場景。生成器可以簡化異步程式碼的編寫，例如處理異步迭代。"
		},
		{
			"tag": "precode",
			"text": "function* numberGenerator() {\n  yield 1;\n  yield 2;\n  yield 3;\n}\n\nconst generator = numberGenerator();\n\nconsole.log(generator.next()); // 輸出: { value: 1, done: false }\nconsole.log(generator.next()); // 輸出: { value: 2, done: false }\nconsole.log(generator.next()); // 輸出: { value: 3, done: false }\nconsole.log(generator.next()); // 輸出: { value: undefined, done: true }\n\n// 可以用 for...of 循環迭代生成器\nfor (const number of numberGenerator()) {\n  console.log(number); // 輸出: 1, 2, 3\n}"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "ES 模組"
		},
		{
			"tag": "p",
			"text": "ES 模組是 JavaScript 官方的模組化系統，它允許你將程式碼分割成獨立的模組 (檔案)，然後在需要時匯入和匯出模組。 ES 模組使用 import 和 export 語法。"
		},
		{
			"tag": "p",
			"class":"yellow",
			"text": "模組化是大型專案的基礎。ES 模組讓程式碼更有組織、更容易維護、並且可以更好地重用程式碼。"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "//moduleA.js\n\n// 匯出變數和函式\nexport const message = '來自模組 A 的訊息';\n\nexport function greet(name) {\n  console.log(`你好, ${name}!`);\n}"
		},
		{
			"tag": "precode",
			"text": "//main.js\n\n// 從 moduleA.js 匯入\nimport { message, greet } from './moduleA.js';\n\nconsole.log(message); // 輸出: 來自模組 A 的訊息\ngreet('使用者');    // 輸出: 你好, 使用者!"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h2",
			"text": "推薦的函式庫"
		},
		{
			"tag": "h3",
			"text": "動畫函式庫"
		},
		{
			"tag": "mark",
			"text": "GSAP"
		},
		{
			"tag": "a",
			"text": "https://gsap.com/"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "圖表函式庫"
		},
		{
			"tag": "mark",
			"text": "Chart.js"
		},
		{
			"tag": "a",
			"text": "https://www.chartjs.org/"
		},
		{
			"tag": "mark",
			"text": "D3.js"
		},
		{
			"tag": "a",
			"text": "https://d3js.org/"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "3D函式庫"
		},
		{
			"tag": "mark",
			"text": "Three.js"
		},
		{
			"tag": "a",
			"text": "https://threejs.org/"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "地圖函式庫"
		},
		{
			"tag": "mark",
			"text": "leaflet.js"
		},
		{
			"tag": "a",
			"text": "https://leafletjs.com/"
		}
	],
	[
		{ "title": "Ajax🚧" },
		{
			"tag": "h2",
			"text": "介紹"
		},
		{
			"tag": "p",
			"text": "AJAX即「Asynchronous JavaScript and XML」(非同步的JavaScript與XML技術)，指的是一套綜合了多項技術的瀏覽器端網頁開發技術。"
		},
		{
			"tag": "p",
			"text": "AJAX在客戶端使用各種Web技術來創建異步(asynchronous)Web應用程序。應用程序可以在背景從服務器發送和獲得數據,而不干擾現有頁面的顯示和行為。通過將數據交換層與表示層分離,Ajax允許網頁以及擴展的Web應用程序動態地更改內容,而無需重新加載整個頁面。在實踐中,數據的傳送通常使用JSON而不是XML。"
		},
		{
			"tag": "p",
			"text": "常見的Ajax應用的例子是,我們在YouTube或是Google搜尋時,網站會根據我們前面打的幾個字,猜想我們想要搜尋的關鍵字是什麼。這就是不干擾現有頁面的顯示和行為的情況下,從服務器發送和獲得數據,並且更新網頁的方法。"
		},
		{
			"tag": "h2",
			"text": "同步與異步"
		},
		{
			"tag": "p",
			"text": "在計算機程式中，異步(asynchronous)代表著一個程式process獨立於其他process運行，而同步(synchronous)代表著一個process僅在某個其他process完成或移交後而運行。"
		},
		{
			"tag": "p",
			"text": "JavaScript有內建的asynchronous function，例如:"
		},
		{
			"tag": "precode",
			"text": "setTimeout( code, delay )"
		},
		{
			"tag": "p",
			"text": "此函數會設置一個計時器，一旦計時器時間到，計時器就會執行一個函數或指定的一段代碼；其中code是delay結束時要執行的程式碼，delay是在執行指定的函數或代碼之前計時器等待的時間(以毫秒為單位)，如果省略此參數則預設值為0，表示立即執行。"
		},
		{
			"tag": "h3",
			"text": "異步函數範例:"
		},
		{
			"tag": "precode",
			"text": "console.log('start');\n\nsetTimeout(( )=>{\nconsole.log('Here is the code');\n},2000)\n\nconsole.log('end');\n\n\n//程式碼結果如下\n//start\n//end\n//Here is the code"
		},
		{
			"tag": "h2",
			"text": "Promise"
		},
		{
			"tag": "mark",
			"text": "超重要!!!"
		},
		{
			"tag": "p",
			"text": "Promise是一個由asynchronous function所return的特殊物件，主要功能是，Promise會代理一個建立時不用預先得知結果的值，且它有三種狀態:。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "pending(處理中)：初始狀態擱置中。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "fullfilled(已完成)：表示操作成功地完成。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "rejected(已拒絕)：表示操作失敗了。"
		},
		{
			"tag": "h3",
			"text": "流程圖"
		},
		{
			"tag": "p",
			"text": "當上述任一狀態轉換發生時，Promise物件可以調用兩個函數。一個叫做.then()，一個叫做.catch()。"
		},
		{
			"tag": "img",
			"text": "./img/3_Promise狀態流程.png"
		},
		{
			"tag": "h3",
			"text": ".then()"
		},
		{
			"tag": "p",
			"text": "以下範例中，fetch是一個可以向網址發送HTTP requests的異步函數，當promiseObject從pending狀態變為fullfilled之後，.then()內部的callback function就會被js自動執行。執行時帶入的參數就是從URL獲得的HTTP Response內容(通常會得到一些數據)。"
		},
		{
			"tag": "precode",
			"text": "let promiseObject = fetch(URL);\n\npromiseObject.then((response)=>{\n\n    console.log(response);    //獲得接收到的數據\n\n    let jsonPromise = response.json().then((data)=>{          //可將文字部分做成JSON物件\n         console.log(data);\n   });    \n    \n})"
		},
		{
			"tag": "p",
			"text": "其中.json()是一個可以將data轉換成JSON格式的函數，其本身也是一個異步函數，故也會回傳一個promise物件。所以要再加一個.then()才能取出裡面的json物件。也可以改寫成:"
		},
		{
			"tag": "precode",
			"text": "promiseObject\n    .then( (response) => response.json( ) )\n    .then( (data) => {\n        console.log(data);\n    });"
		},
		{
			"tag": "h3",
			"text": ".catch()"
		},
		{
			"tag": "p",
			"text": ".catch()函數是在調用當Promise物件狀態轉換為rejected時，會去調用的函數。如果將catch()添加調Promise Chain的末尾，那麼當任何異步函數調用失敗時都會調用它。如以下範例:"
		},
		{
			"tag": "precode",
			"text": "let promiseObject = fetch(URL);   //錯誤或不存在的URL或者網路異常\n\npromiseObject\n    .then( (response) => response.json( ) )\n    .then( (data) => {\n        console.log(data);\n    })\n    .catch(e)=>{\n        console.log(fetchPromise);   //顯示status:rejected\n        console.log(e);   //顯示錯誤訊息\n    });"
		},
		{
			"tag": "h2",
			"text": "Combining Multiple Promise"
		},
		{
			"tag": "p",
			"text": "當我們的操作由多個異步函數組成時，我們需要用到promise chaining，讓我們在開始下一個函數之前完成前一個函數。這種情況下，每個Promise都互相依賴。有時，我們需要所有Promise都被fulfilled，但它們並不相互依賴。在這種情況下，將它們全部一起啟動，然後在它們全部fulfilled時收到通知會更有效。JavaScript當中，提供了Promise.all()這個static method，它接受一個promisearray並返回一個promise。"
		},
		{
			"tag": "p",
			"text": "[279. 網頁全端開發課程..🚧]"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h2",
			"text": "JQuery Ajax"
		},
		{
			"tag": "p",
			"text": "使用jquery提供的Ajax可以利用簡短的程式碼輕鬆的對API進行ajax請求。所以在請求前須先引入jquery API才能夠使用，例如以下程式碼，如想使用其它版本，請去官網或者cdn.js查詢。"
		},
		{
			"tag": "b",
			"text": "引入jquery"
		},
		{
			"tag": "precode",
			"text": "<script src='https://code.jquery.com/jquery-3.7.1.min.js' integrity='sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=' crossorigin='anonymous'></script>"
		},
		{
			"tag": "b",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "$.ajax({\n    method: '/*方法*/',\n    url: '/*發送請求的網址*/',\n    dataType: '/*資料型式*/',\n    data: { \n        //傳入的資料 \n    }\n})\n.done(function( response ) {\n     //成功接收資料執行的函式\n     console.log(response);     //查看接收到的資料\n\n}).fail(function( jqXHR, textStatus ) {\n    //請求失敗產生錯誤訊息\n    console.log( 'Request failed: ' + textStatus );     \n})"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "p",
			"text": "如以下範例，ajax使用POST方法將JSON格式的資料發送到網址「/api/user.php」做請求，並傳入id數據，若請求成功則執行done區塊內的結果，並辨識接收到的狀態碼，如果為0則將訊息從網頁alert出來。並將需要的值放入變數內方便取用。若請求失敗則於主控台輸出失敗訊息。"
		},
		{
			"tag": "precode",
			"text": "//...部分程式碼省略\n\n$.ajax({\n    method: 'POST',\n    url: '/api/user.php',\n    dataType: 'json',\n    data: { \n        id: id \n    }\n})\n.done(function( response ) {\n    // console.log(response);\n    let status = response.status;\n\n    if(status==0){\n        alert(response.message);\n        return\n    }\n\n    account.textContent = response.user.account\n    name.textContent = response.user.name\n    email.textContent = response.user.email\n    phone.textContent = response.user.phone\n\n}).fail(function( jqXHR, textStatus ) {\n    console.log( 'Request failed: ' + textStatus );\n})"
		},
		{
			"tag": "p",
			"text": "[...🚧]"
		}
	],
	[
		{ "title": "Jquery🚧" },
		{
			"tag": "mark",
			"text": "官方文檔"
		},
		{
			"tag": "a",
			"text": "https://jquery.com/"
		},
		{
			"tag": "h2",
			"text": "介紹"
		},
		{
			"tag": "p",
			"text": "jQuery 是一個快速、輕量且功能強大的 JavaScript 函式庫，主要用來簡化 HTML 文件的操作、事件處理、動畫效果以及與伺服器之間的 AJAX 交互。它的口號是「Write Less, Do More」，意思是用更少的程式碼完成更多的工作。"
		},

		{
			"tag": "mark",
			"text": "DOM元素操作"
		},
		{
			"tag": "mark",
			"text": "事件處理"
		},
		{
			"tag": "mark",
			"text": "動畫和效果"
		},
		{
			"tag": "mark",
			"text": "ajax"
		},
		{
			"tag": "mark",
			"text": "快瀏覽器相容性"
		},

		{
			"tag": "h2",
			"text": "引入jQuery"
		},
		{
			"tag": "h3",
			"text": "使用CDN"
		},
		{
			"tag": "p",
			"text": "以下僅快速提供CDN引入方式。請在<body></body>標籤的尾端並自定義<script></script>的前面貼入以下程式碼即可使用jQuery。以下為jquery/3.7.1/jquery.min.js版本。也可透過在官方網站下載jQuery放入專案中使用。"
		},
		{
			"tag": "precode",
			"text": "<!DOCTYPE html>\n<html lang='en'>\n  <head>\n    <meta charset='UTF-8' />\n    <meta name='viewport' content='width=device-width, initial-scale=1.0' />\n    <title></title>\n  </head>\n  <body>\n    <script\n      src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'\n      integrity='sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=='\n      crossorigin='anonymous'\n      referrerpolicy='no-referrer'\n    ></script>\n    <script></script>\n  </body>\n</html>"
		},
		{
			"tag": "mark",
			"text": "CDN.js"
		},
		{
			"tag": "a",
			"text": "https://cdnjs.com/libraries/jquery"
		},
		{
			"tag": "h2",
			"text": "選擇器 | selector"
		},
		{
			"tag": "p",
			"text": "jQuery 的選擇器是 jQuery 最強大的功能之一，它允許你使用類似於 CSS 的語法來選取和操作 HTML 元素。這些選擇器能夠根據元素的標籤、ID、類別、屬性等來選取 DOM 中的對應元素。標記JQ代表是僅限jQuery的特定選擇方式"
		},
		{
			"tag": "h3",
			"text": "基本選擇器"
		},
		{
			"tag": "precode",
			"text": "$('*')  // 選取所有 HTML 元素\n$('p')  // 選取所有 <p> 標籤\n$('#myId')  // 選取 ID 為 'myId' 的元素\n$('.myClass')  // 選取所有類別為 'myClass' 的元素\n$('.chair,table') // 選取所有類別為 'chair'和'table'的元素"
		},
		{
			"tag": "h3",
			"text": "階層結構"
		},
		{
			"tag": "precode",
			"text": "$('div p')  // 選取所有位於 <div> 標籤內的 <p> 標籤，不論層級\n$('ul > li')  // 選取所有 <ul> 的直接子元素 <li>\n$('h1 ~ p')  // 選取所有位於 <h1> 之後的 <p> 標籤，不限於第一個\n\n$('p').parent()  // 選取所有 <p> 元素的父元素\n$('p').parents('div')  // 選取所有 <p> 元素的祖先 <div>\n$('div').find('span')  // 在 <div> 元素中找到所有 <span> 元素\n"
		},
		{
			"tag": "h3",
			"text": "基本選擇條件"
		},
		{
			"tag": "precode",
			"text": "$('li:not(.highlight)')  // 選取除了具有 'highlight' 類別的 <li> 元素\n$('li:first')  // 選取第一個 <li> 元素(JQ)\n$('li:last')   // 選取最後一個 <li> 元素(JQ)\n$('li:even')  // 選取索引為偶數的 <li> 元素(JQ)\n$('li:odd')   // 選取索引為奇數的 <li> 元素(JQ)\n$('li:eq(2)')  //  選取索引值為2也就是第三個 <li>(JQ)\n\n$('div:gt(2)')  // 選取索引值大於2的div元件(JQ)\n$('div:lt(2)')  // 選取索引值小於2的div元件\n\n$(':header') //選取<h1>~<h6>的元件(JQ)\n$(':animated') //選取套用動畫效果的元件(JQ)\n$(':focus') //選取目前聚焦的元件"
		},
		{
			"tag": "h3",
			"text": "內容選擇器"
		},
		{
			"tag": "precode",
			"text": "$('p:contains('甜點')')  //選取包含特定文字的元素\n$('div:empty')  //選取無子元素或文字的元件\n$(':parent')  //選取有子元件的元件\n$('.box:has(.target)')  //選取包含特定子元素的父元素，此範例終能選取類別.box中含有.target類別的元素。\n"
		},
		{
			"tag": "h3",
			"text": "可視性選擇器"
		},
		{
			"tag": "precode",
			"text": "$(':hidden')  //選取所有隱藏的元件(JQ)\n$(':visible')  //選取所有沒有佔據顯示空間的元件(JQ)"
		},
		{
			"tag": "h3",
			"text": "子元件選擇器"
		},
		{
			"tag": "precode",
			"text": "$('li:nth-child(3)')  //選取第 n 個子元素（參數從 1 開始不可為0）。\n$('div:first-child')  //選取父元素的第一個子元素。\n$('div:last-child')   //選取父元素的最後一個子元素。\n$('div:only-child')  //選取只有一個子元件的元件"
		},
		{
			"tag": "h3",
			"text": "屬性選擇器"
		},
		{
			"tag": "precode",
			"text": "$('[attribute]')  //具備attribute屬性的元件\n$('[attribute=value]')  //具備attribute屬性的和value屬性值的元件\n\n$('[attribute!=value]')  //具備attribute屬性且屬性值非value的元件(JQ)\n$('[attribute^=value]')  //具備attribute屬性且屬性值以value開頭的元件\n$('[attribute$=value]')  //具備attribute屬性且屬性值以value結尾的元件\n$('[attribute*=value]')  //具備attribute屬性且屬性值含有value的元件\n$('[attribute|=value]')  //具備attribute屬性且屬性值等於或以value開頭並接續' -'的元件\n$('[attribute~=value]')  //具備attribute屬性且屬性值其中之一是value的元件"
		},
		{
			"tag": "h3",
			"text": "表單"
		},
		{
			"tag": "precode",
			"text": "$(':input')  //選擇所有輸入框元件(JQ)\n$(':text')  //選擇所有文字元件(JQ)\n$(':password')  //選擇密碼輸入框元件(JQ)\n$(':radio')  //選擇單選按鈕元件(JQ)\n$(':checkbox')  //選擇核取方塊元件(JQ)\n$(':submit')  //選擇送出按鈕元件(JQ)\n$(':image')  //選擇<img>元件(JQ)\n$(':reset')  //選擇重置按鈕元件(JQ)\n$(':button')  //選擇<button>元件(JQ)\n$(':file')  //選擇檔案上傳元件(JQ)\n$(':selected')  //選擇下拉選單被選取的元件(JQ)\n$(':enabled')  //選擇被啟用的元件(預設是所有表單元件)\n$(':disabled')  //選擇被停用的元件\n$(':checked')  //選擇單選按鈕或多選按鈕被選取的元件"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "jQuery官方承認寫在$()內含有冒號的選擇器其效能並不是那麼好，請斟酌使用或者選擇其他方式。"
		},
		{
			"tag": "h2",
			"text": "取得元件內容"
		},
		{
			"tag": "h3",
			"text": ".html()"
		},
		{
			"tag": "p",
			"text": "此方法可以擷取選取元件的HTML內容和它子孫元件的內容，但是如果選取的項目是一個集合，則只會回傳集合中的第一個HTML內容。如果想取得所有內容請使用.each()。"
		},
		{
			"tag": "precode",
			"text": "<body>\n    <ul>\n        <li id='one'><em>fresh</em> milk</li>\n        <li id='two'>peanuts</li>\n        <li id='three'>honey</li>\n        <li id='four'>vinegar</li>\n    </ul>\n</body>\n<script>\n    $('ul').html()  //會取得整個ul內部的元件\n    $('li').html()  //<em>fresh</em> milk\n</script>"
		},
		{
			"tag": "h3",
			"text": ".text()"
		},
		{
			"tag": "p",
			"text": "此方法可以擷取選取元件的文字內容和它子孫元件的內容，但是如果選取的項目是一個集合，他會回傳每一個元件的文字內容和它子孫元件的文字內容。"
		},
		{
			"tag": "precode",
			"text": "<script>\n    console.log($('ul').text());\n    /*\n    fresh milk\n    peanuts\n    honey\n    vinegar\n    */\n\n\n    console.log($('li').text());\n    /*\n    fresh milkpeanutshoneyvinegar\n    */\n</script>"
		},
		{
			"tag": "h2",
			"text": "變更元件內容"
		},
		{
			"tag": "h3",
			"text": ".html()"
		},
		{
			"tag": "p",
			"text": "此方法可以選取元件集合中每個元件，並設定相同的新內容，並且可以包含HTML格式。"
		},
		{
			"tag": "h3",
			"text": ".text()"
		},
		{
			"tag": "p",
			"text": "此方法可以選取元件集合中每個元件，並設定相同的新文字。文字中如果包含HTML標籤則也會被解析為純文字。"
		},
		{
			"tag": "h3",
			"text": ".replaceWith()"
		},
		{
			"tag": "p",
			"text": "此方法可將選取集合中的每個元件取代為新內容，他會回傳被取代的元件。"
		},
		{
			"tag": "h3",
			"text": ".remove()"
		},
		{
			"tag": "p",
			"text": "此方法會將選取集合中的所有元件移除。"
		},
		{
			"tag": "h2",
			"text": "插入元件"
		},
		{
			"tag": "img",
			"text": "./img/jq/before-prepend-append-after.svg"
		},
		{
			"tag": "h3",
			"text": ".before()"
		},
		{
			"tag": "p",
			"text": "此方法可以將內容插入至選取的元素之前"
		},
		{
			"tag": "h3",
			"text": ".after()"
		},
		{
			"tag": "p",
			"text": "此方法可以將內容插入至選取的元素之後"
		},
		{
			"tag": "h3",
			"text": ".prepend()"
		},
		{
			"tag": "p",
			"text": "此方法可將內容插入至元件內的起始標籤之後。"
		},
		{
			"tag": "h3",
			"text": ".append()"
		},
		{
			"tag": "p",
			"text": "此方法可將內容插入至元件內的結束標籤之前。"
		},
		{
			"tag": "h2",
			"text": "擷取與設定元件屬性值"
		},
		{
			"tag": "h3",
			"text": ".attr()"
		},
		{
			"tag": "p",
			"text": "用來獲取或設置 HTML 元素的屬性（attribute）"
		},
		{
			"tag": "precode",
			"text": "// 獲取屬性\nvar href = $('a').attr('href');  // 獲取第一個 <a> 標籤的 href 屬性\n\n// 設置屬性\n$('img').attr('src', 'new_image.jpg');  // 將所有 <img> 的 src 設為 'new_image.jpg'\n"
		},
		{
			"tag": "h3",
			"text": ".removeAttr()"
		},
		{
			"tag": "p",
			"text": "用來移除 HTML 元素的指定屬性。"
		},
		{
			"tag": "precode",
			"text": "$('input').removeAttr('disabled');  // 移除 <input> 元素的 disabled 屬性，使其可用\n"
		},
		{
			"tag": "h3",
			"text": ".addClass()"
		},
		{
			"tag": "p",
			"text": "用來為 HTML 元素添加一個或多個類別（class）。"
		},
		{
			"tag": "precode",
			"text": "$('p').addClass('highlight bold');  // 添加多個類別"
		},
		{
			"tag": "h3",
			"text": ".removeClass()"
		},
		{
			"tag": "p",
			"text": "用來從 HTML 元素中移除一個或多個類別。"
		},
		{
			"tag": "precode",
			"text": "$('p').removeClass('highlight bold');  // 移除多個類別"
		},
		{
			"tag": "h2",
			"text": "擷取與設定CSS"
		},
		{
			"tag": "h3",
			"text": ".css()"
		},
		{
			"tag": "b",
			"text": "擷取CSS"
		},
		{
			"tag": "p",
			"text": "如果想要擷取CSS特性值時，必須在小括號中指定想要擷取的特性名稱；若符合條件的的有多個元件，則它將會回傳第一個元件的特性值。"
		},
		{
			"tag": "precode",
			"text": "var background = $('li').css('background-color');"
		},
		{
			"tag": "b",
			"text": "設定CSS"
		},
		{
			"tag": "p",
			"text": "如果想要設定元件的CSS特性值時，必須在小括號中的第一個引數中指定特性名稱，第二個引數則給予欲設定的值，它會變更符合條件的集合元件的css。"
		},
		{
			"tag": "precode",
			"text": "$('li').css('background-color','#272727');"
		},
		{
			"tag": "b",
			"text": "設定多個css特性"
		},
		{
			"tag": "p",
			"text": "可以通過傳遞一個 JavaScript 「物件」來實現，其中包含 CSS 屬性名稱和對應的值，如以下範例。"
		},
		{
			"tag": "precode",
			"text": "$('.box').css({\n  'background-color': 'lightblue',\n  'font-size': '20px',\n  'margin': '15px'\n});\n"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "在JavaScript檔案中，以變更class屬性值去取代變更css的特性值，為較佳的程式設計方法。"
		},
		{
			"tag": "h2",
			"text": "操作選取集合中的每一個元件"
		},
		{
			"tag": "h3",
			"text": ".each()"
		},
		{
			"tag": "p",
			"text": "each() 方法用來遍歷（迭代）一組元素或物件，並對每個元素或物件執行指定的函數。這個方法非常實用，當你需要對多個元素進行相同操作時，可以使用 each() 來簡化程式碼。此功能就類似於JavaScript的迴圈。"
		},
		{
			"tag": "precode",
			"text": "//基本架構\n$(selector).each(function(index, element) {\n  // index 是當前元素的索引值\n  // element 是當前的 DOM 元素\n});\n"
		},
		{
			"tag": "p",
			"text": "以下範例會遍歷每一個選取到的img元素，並將其alt屬性值設定為甜點+流水碼。"
		},
		{
			"tag": "precode",
			"text": "$('img').each(function(index) {\n  $(this).attr('alt', '甜點 ' + (index + 1));  // 為每張圖片的 alt 屬性加上編號\n});\n"
		},
		{
			"tag": "h3",
			"text": "搭配 this 或 $(this)"
		},
		{
			"tag": "p",
			"text": "當使用each()方法巡訪選取集合中的元件時，可以透過this關鍵字來選取目前元件；我們也可以使用$(this)將this元件轉換成jquery處理過的j物件，如此一來就可以使用jquery方法執行各樣功能。"
		},
		{
			"tag": "precode",
			"text": "$('li').each(function () {\n    var ids = this.id;\n    $(this).append(`<span class='oreder'> ${ids}</span>`);\n});"
		},
		{
			"tag": "h2",
			"text": "事件方法"
		},
		{
			"tag": "h3",
			"text": ".on()"
		},
		{
			"tag": "p",
			"text": "用於監控用戶在網頁上與元素的互動。這些方法可以幫助你對不同的事件（例如點擊、滑鼠移動、鍵盤輸入等）做出反應。.on()是jquery中添加事件監聽的方法，相當於JavaScript的addEventListener語法。"
		},
		{
			"tag": "precode",
			"text": "//基本架構\n$(selector).on(event, childSelector, data, function)\n\n/*\nevent：要監聽的事件名稱（如 click、mouseover 等）。\nchildSelector：可選，事件委託的子選擇器。\ndata：可選，傳遞給事件處理程序的額外數據。\nfunction：事件觸發時要執行的函數。\n*/n"
		},
		{
			"tag": "p",
			"text": "以下程式碼為將button元素設定點擊事件的範例，它會將文件中所有button添加一個事件監聽，點擊以後會跳出提醒視窗。"
		},
		{
			"tag": "precode",
			"text": "$('button').on('click', function() {\n  alert('按鈕被點擊了！');\n});\n"
		},
		{
			"tag": "h3",
			"text": "event | 事件"
		},
		{
			"tag": "b",
			"text": "使用者介面"
		},
		{
			"tag": "mark",
			"text": "focus | 聚焦"
		},
		{
			"tag": "mark",
			"text": "blur | 失焦"
		},
		{
			"tag": "mark",
			"text": "change | 變更"
		},
		{
			"tag": "b",
			"text": "鍵盤"
		},
		{
			"tag": "mark",
			"text": "input | 鍵盤輸入"
		},
		{
			"tag": "mark",
			"text": "keydown | 鍵盤按下"
		},
		{
			"tag": "mark",
			"text": "keyup | 鍵盤抬起"
		},
		{
			"tag": "mark",
			"text": "keypress | 鍵盤按下"
		},
		{
			"tag": "b",
			"text": "滑鼠"
		},
		{
			"tag": "mark",
			"text": "click | 滑鼠點擊"
		},
		{
			"tag": "mark",
			"text": "dblclick | 滑鼠雙擊"
		},
		{
			"tag": "mark",
			"text": "mouseenter | 滑鼠進入元素邊界"
		},
		{
			"tag": "mark",
			"text": "mouseleave | 滑鼠離開元素邊界"
		},
		{
			"tag": "mark",
			"text": "mousemove | 滑鼠在元素上移動"
		},
		{
			"tag": "mark",
			"text": "mousedown | 按下滑鼠按鈕時"
		},
		{
			"tag": "mark",
			"text": "mouseup | 釋放滑鼠按鈕時"
		},
		{
			"tag": "mark",
			"text": "hover | 滑鼠懸浮於物件時"
		},
		{
			"tag": "b",
			"text": "表單"
		},
		{
			"tag": "mark",
			"text": "submit | 表單提交"
		},
		{
			"tag": "mark",
			"text": "select | 選取時"
		},
		{
			"tag": "mark",
			"text": "change | 變更時"
		},
		{
			"tag": "b",
			"text": "文件頁面"
		},
		{
			"tag": "mark",
			"text": "ready | 文件載入以後"
		},
		{
			"tag": "mark",
			"text": "load"
		},
		{
			"tag": "mark",
			"text": "unload"
		},
		{
			"tag": "b",
			"text": "瀏覽器"
		},
		{
			"tag": "mark",
			"text": "error | 發生錯誤時"
		},
		{
			"tag": "mark",
			"text": "resize | 瀏覽器視窗大小調整時"
		},
		{
			"tag": "mark",
			"text": "scroll | 滾動頁面時"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": "var ids = '';\nvar $listItems = $('li');\n\n$listItems.on('mouseover click', function () {\n    ids = this.id;\n    $listItems.children('span').remove();\n    $(this).append(' <span class='priority'>' + ids + '</span>');\n});\n\n$listItems.on('mouseout', function () {\n    $(this).children('span').remove();\n});"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		}
	],
	[{ "title": "Version Control🚧" }],

	[
		{ "title": "Vue.js🚧" },
		{
			"tag": "mark",
			"text": "vue官方文檔"
		},
		{
			"tag": "a",
			"text": "https://vuejs.org/"
		},
		{
			"tag": "mark",
			"text": "尚硅谷禹神新版Vue3"
		},
		{
			"tag": "a",
			"text": "https://www.youtube.com/watch?v=d5mrJfl6UWM&list=PLmOn9nNkQxJEnGM4Jf0liBcyedAtuQq-O"
		},
		{
			"tag": "h2",
			"text": "介紹"
		},
		{
			"tag": "img",
			"text": "img/vue/3_Vue.png"
		},
		{
			"tag": "p",
			"text": "Vue是一套用於構建用戶界面的 JavaScript 框架。它基於標準 HTML、CSS 和 JavaScript 構建，並提供了一套宣告式的、組件化的編程模型，幫助你高效地開發用戶界面。無論是簡單還是複雜的界面，Vue 都可以勝任。"
		},
		{
			"tag": "h2",
			"text": "Vue3 創建與配置"
		},
		{
			"tag": "h3",
			"text": "創建方法"
		},
		{
			"tag": "p",
			"text": "Vue3官方推薦使用Vite新一代構建工具。其輕量快速能實現快速服務，支援TypeScript、JSX、CSS，按需求編譯不用像webpack等待整個應用編譯完成。以下為使用vite構建工具的創建命令。"
		},
		{
			"tag": "precode",
			"text": "npm create vue@latest"
		},
		{
			"tag": "h3",
			"text": "運行方法"
		},
		{
			"tag": "precode",
			"text": "npm run dev"
		},
		{
			"tag": "p",
			"text": "終端機中使用此語法能夠像是go live一樣，開啟瀏覽器檢視所撰寫的網頁。"
		},
		{
			"tag": "h3",
			"text": "main.js或main.ts程式碼架構"
		},
		{
			"tag": "precode",
			"text": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')"
		},
		{
			"tag": "p",
			"text": "1. import { createApp } from 'vue'：這行程式碼從 Vue.js 框架中導入了 createApp 函數。createApp 是 Vue 3 中用於創建應用程式實例的入口函數。"
		},
		{
			"tag": "p",
			"text": "2. import App from './App.vue'：這行程式碼從當前目錄下的 App.vue 文件中導入了 App 組件。App.vue 通常是一個單文件組件，它包含了應用程式的根組件。"
		},
		{
			"tag": "p",
			"text": "3. createApp(App).mount('#app')：這行程式碼首先使用 createApp 函數創建了一個新的 Vue 應用程式實例，並將 App 組件作為根組件。然後，它調用了 mount 方法將應用程式掛載到 DOM 中的 #app 元素。"
		},
		{
			"tag": "h3",
			"text": "Vue元件的基礎架構"
		},
		{
			"tag": "precode",
			"text": "<template>\n  <!--HTML-->\n</template>\n\n <script lang='ts'>   //lang='ts'代表使用ts語言\n  //JS或TS\n    export default {      //使用暴露才能在其他地方被import\n        name:'App'\n    }\n</script> \n\n<style>\n  /*CSS*/\n</style>"
		},
		{
			"tag": "h3",
			"text": "將Vue子元件(components)引入App.vue"
		},
		{
			"tag": "mark",
			"text": "【极简Vue3】005 一个简单的效果"
		},
		{
			"tag": "a",
			"text": "https://youtu.be/UgT78vtiKUo?si=N0jfj-GTOTUHZ2aL"
		},
		{
			"tag": "p",
			"text": "必須讓根元件認識子元件(以Person.vue為例)，必須在根元件(App.vue)的<script></script>內撰寫以下語法:"
		},
		{
			"tag": "precode",
			"text": "<script>\nimport Person from '/components/Person.vue'  //引入元件\n\nexport default {\n    name:'App',   //根元件名\n    components:{ Person }    //註冊元件\n}\n</script>"
		},
		{
			"tag": "p",
			"text": "其中 '/components/Person.vue' 是告訴 App.vue(根元件) 子元件從哪裡取用。 components:{ Person }則是用來註冊子元件，多個子元件需要用逗號隔開。這麼一來就可以在根元件的<template></template>中使用<Person/>來放入Person元件了!"
		},
		{
			"tag": "precode",
			"text": "<template>\n    <Person/>  <!--使用子元件-->\n</template>"
		},
		{
			"tag": "h2",
			"text": "setup"
		},
		{
			"tag": "p",
			"text": "setup 是 Vue3中的一個新的配置項，值是一個函數，它是Components API 組合式API的表演舞台，組件中所用到的 數據、方法、計算屬性、監視等等都配置在setup中，其有以下特點:"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "setup 函數返回的對象中的內容可直接在模板中使用。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "setup 中訪問的this是undefined。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "setup 會在beforeCreate之前調用，他是領先所有鉤子執行的。"
		},
		{
			"tag": "precode",
			"text": "<script>\nexport default {\n    name:'App',\n    components:{ Person }\n    setup( ){\n      //將數據、方法配置於此處\n\n       return{  } //將配置好的數據方法等放於return內交出去   \n    } \n}\n</script>"
		},
		{
			"tag": "p",
			"text": "Vue3的語法中，其實還是可以撰寫Vue2的語法data()來配置數據或方法等數據，其中setup()中寫的數據是可以利用Vue2中寫的data()讀取到的，由此可知，setup()比data()配置的還更早，所以Vue3的setup()語法中是讀取不到data()的；故建議Vue3語法不要跟Vue2語法混用。"
		},
		{
			"tag": "precode",
			"text": "data( ){\n    return{\n        c: this.name  //會讀取到張三\n    },\n\nsetup( ){\n    let name = '張三'\n}"
		},
		{
			"tag": "h3",
			"text": "🍬setup的語法糖"
		},
		{
			"tag": "p",
			"text": "setup( )語法使用到的數據等資料在配置時都一定要使用 return 才能讓模板讀取，所以Vue官方提供了一個語法糖，能夠讓寫法變得更單純簡單。撰寫方法如下，我們須要另外寫一處setup的標籤，且內部不用再寫setup()和return，直接寫數據和方法即可達到自動回傳數據到模板的功能。"
		},
		{
			"tag": "precode",
			"text": "<script>\nexport default {\n    name:'App',\n    components:{ Person }\n}\n</script>\n\n<script lang='ts' setup>\n    let a = 123\n\n    function SayHello( ){\n        console.log( 'Hello' )\n    } \n</script>"
		},

		{
			"tag": "h3",
			"text": "🪄setup定義元件名的插件"
		},
		{
			"tag": "p",
			"text": "在尚硅谷中提供一辦法，就是安裝插件。我們可以在終端機視窗中打以下安裝指令:"
		},
		{
			"tag": "precode",
			"text": "npm i vite-plugin-vue-setup-extend -D"
		},
		{
			"tag": "p",
			"text": "並且必須在vite.config.js或vite.config.ts的檔案中新增兩行程式碼於以下位置:"
		},
		{
			"tag": "precode",
			"text": "import VueSetupExtend from 'vite-plugin-vue-setup-extend'   //引入插件\n\n VueSetupExtend()   //調用插件"
		},
		{
			"tag": "precode",
			"text": "import { fileURLToPath, URL } from 'node:url'\n\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport VueSetupExtend from 'vite-plugin-vue-setup-extend'      //新增，其中VueSetupExtend是自由取名的\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n    plugins: [\n      vue(),\n      VueSetupExtend()   //新增，追加調用\n    ],\n    resolve: {\n      alias: {\n          @': fileURLToPath(new URL('./src', import.meta.url))\n      }\n    }\n})"
		},
		{
			"tag": "p",
			"text": "完成以上步驟以後，我們就將以下程式碼:"
		},
		{
			"tag": "precode",
			"text": "<script>\nexport default {\n    name:'Person',\n}\n</script>\n\n<script lang='ts' setup>\n\n</script>"
		},
		{
			"tag": "p",
			"text": "取代成以下程式碼:"
		},
		{
			"tag": "precode",
			"text": "<script lang='ts' setup name='Person'>\n\n<script>"
		},
		{
			"tag": "h2",
			"text": "配置響應式數據"
		},
		{
			"tag": "h3",
			"text": "ref( )"
		},
		{
			"tag": "a",
			"text": "https://youtu.be/t5XjTkbiSYE?si=AxDZJQLSpQoIgGxG"
		},
		{
			"tag": "p",
			"text": "ref()是一個Vue3中可以定義基本類型的響應式數據的函數，其語法範例如下:"
		},
		{
			"tag": "precode",
			"text": "<script>\n    import { ref } from 'vue'    //引入Vue中的ref函數\n\n\n    //let 響應式變數 = ref(初始值)  例如:\n    let name = ref('張小天')\n    let age = ref(18)\n</script>"
		},
		{
			"tag": "p",
			"text": "使用此語法時須要注意，若要在JS中操作數據，需要在數據後加.value，但在<template>模板(以下稱模板)中卻不需要加.value；對於let name = ref('張小天')來說，name不是響應式的，name.value才是響應式的。"
		},
		{
			"tag": "precode",
			"text": "<template>\n    <h2>姓名:{{ name }}</h2>    <!-- 不需要加.value -->\n</template>\n\n\n<script>\n    name.value = '張大天'    //此處要加.value才能操作數據\n</script>"
		},
		{
			"tag": "p",
			"text": "ref()其實也是可以在Vue3中定義物件類型的響應式數據的函數，但其最根本的程式碼仍舊會調用到reactive()讓物件成為響應式數據。"
		},
		{
			"tag": "precode",
			"text": "let car = ref({brand:'賓士',price:100})"
		},
		{
			"tag": "mark",
			"text": "😮若用ref( )定義了物件以後可以透過操作.value來更改數據，其物件仍然是響應式。"
		},
		{
			"tag": "precode",
			"text": "let car = ref({brand:'賓士',price:100})\n\n//例如調用了以下函式數據仍然式響應式\nfunction changeCar( ){\n    car.value = {brand:'BMW' , price:90}\n}\n"
		},
		{
			"tag": "h3",
			"text": "reactive( )"
		},
		{
			"tag": "a",
			"text": "https://youtu.be/VdeQ0g0AV_g?si=EKb6xNIECkgVn5Pe"
		},
		{
			"tag": "p",
			"text": "reactive()是一個Vue3中「只能」定義物件類型響應式數據的函數，其語法範例如下:"
		},
		{
			"tag": "precode",
			"text": "<script>\n    import {reactive} from 'vue'    //引入Vue中的reactive函數\n\n    let car =reactive({brand:'奔馳',price:100})\n    let games = reactive([\n        {id:'aysdytfsatr01',name:'王者榮耀'},\n        {id:'aysdytfsatr02',name:'原神'},\n        {id:'aysdytfsatr03',name:'三國志'}\n    ])\n\n    // 方法\n    function changePrice(){\n      car.price += 10\n      console.log(car.price)\n    }\n\n    function changeFirstGame(){\n      games[0].name = '流星蝴蝶劍'\n      console.log(games[0].name)\n    }\n</script>"
		},
		{
			"tag": "p",
			"text": "此語法可以讓物件中每一層的數據都成為響應式的，並且在JS與模板中並不須要加上.value就可以操控數據。"
		},
		{
			"tag": "mark",
			"text": "😮若用reactive( )定義了物件以後，若把整個物件改掉，則會失去響應式功能。"
		},
		{
			"tag": "precode",
			"text": "let car = reactive({brand:'賓士',price:100})\n\n//例如調用了以下函式去替換了整個物件，就會失去響應式功能，頁面也不會有任何反應\nfunction changeCar( ){\n    car = {brand:'BMW' , price:90}\n}\n"
		},
		{
			"tag": "p",
			"text": "我們可以透過Object.assign(原物件,新物件)函數來重新指派物件。"
		},
		{
			"tag": "precode",
			"text": "function changeCar( ){\n    //其中Object.assign(原物件,指派的新物件)\n    Object.assign(car,{brand:'賓士',price:100})\n}"
		},

		{
			"tag": "h3",
			"text": "🔔ref( ) 與 reactive( ) 使用原則"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "若是需要一個基本類型的響應式數據，必須使用ref()。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "若是需要一個響應式物件，但其內部層級不深，ref(),reactive()都可以使用。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "若是需要一個響應式物件，層級較深，則推薦使用reactive()。"
		},
		{
			"tag": "img",
			"text": "img/vue/7_ref和reactive差異整理.png"
		},
		{
			"tag": "h2",
			"text": "toRef 與 toRefs"
		},
		{
			"tag": "mark",
			"text": "【极简Vue3】015 toRefs与toRef"
		},
		{
			"tag": "a",
			"text": "https://youtu.be/a9QAmiVjlPI?si=553tkw7lrW341Yfx"
		},
		{
			"tag": "p",
			"text": "toRef( )和toRefs( )是Vue3中的兩個特殊函數，都是把一個被定義的響應式物件解構放置於另外的變數，並且使其變數仍然維持響應式狀態。例如以下範例利用toRefs( )將person.name和person.age中的數據解構出來，並且用name和age變數放置解構出來的值，其中toRefs會將每個解構出來的值加上一層ref( )使其維持在響應是狀態，person.name與解構出來的name.value是連動的，person.age與解構出來的age.value也是連動的。"
		},
		{
			"tag": "precode",
			"text": "//toRef(物件變數,物件中的屬性)，處理單一數據(不常用)。\n\nimport { reactive, toRef } from 'vue';\n\nconst info = reactive({\n  name: 'Tony',\n  greet: 'Hello',\n});\n\n// 複製 info 中的 greet 屬性並轉換為 ref\nconst rGreet = toRef(info, 'greet');\n\n// 修改 rGreet 的值\nconst onChangeGreet = () => {\n  rGreet.value = 'world!';\n};"
		},

		{
			"tag": "precode",
			"text": "//toRefs(物件變數)，處理多個數據(較常用)\n\nimport {reactive, toRefs} from 'vue'\n\n//數據\nlet person = reactive(\n    name:'張小天 ' ,\n    age: 18\n}\n\nlet {name, age} = toRefs(person)\n\n// 方法\nfunction changeName(){\n    name.value += '~'\n    console.log(name. value, person.name)  //兩數據得出的結果會一樣。\n}"
		},
		{
			"tag": "h2",
			"text": "計算屬性(computed)"
		},
		{
			"tag": "mark",
			"text": "【极简Vue3】016 computed计算属性"
		},
		{
			"tag": "a",
			"text": "https://youtu.be/9PhQoYMQjWw?si=-BUmF9vM1kC2Sf0I"
		},
		{
			"tag": "p",
			"text": "計算屬性(computed properties)是一個強大的功能，它允許你聲明一個依賴於其他響應式數據屬性的屬性，並且這個屬性的值會根據其依賴的數據變化而自動更新。以下為計算屬性的特點及尚硅谷示例："
		},
		{
			"tag": "b",
			"text": "1. 計算屬性是基於其依賴關係進行緩存的，只有在其相關依賴發生改變時才會重新求值。"
		},
		{
			"tag": "b",
			"text": "2. 它通常用於處理一些複雜的邏輯，例如根據其他數據的變化來計算一個值。"
		},
		{
			"tag": "precode",
			"text": "<template>\n    <div class='person'>\n    姓：<input type='text' v-model='firstName'> <br>\n    名：<input type='text' v-model='lastName'> <br>\n    全名：<span>{{ fullName }}</span><br>\n    </div>\n</template>\n\n<script lang='ts' setup name='Person'>\n    import {ref, computed} from 'vue'     //引入computed\n\n    let firstName = ref('zhang')\n    let lastName = ref('san')\n\n    let fullName = computed(()=>{\n        return firstName. value. slice(0,1). toUpperCase() + firstName.value.slice(1)   //定義為較複雜的計算並回傳\n    }\n\n</script>"
		},
		{
			"tag": "h3",
			"text": "如何直接更動計算屬性?"
		},
		{
			"tag": "p",
			"text": "計算屬性通常只能讀寫不能改動，但利用以下特殊方式可以將計算屬性的值做更動。"
		},
		{
			"tag": "precode",
			"text": "\n    let fullName = computed({\n        get( ){\n             return firstName. value. slice(0,1). toUpperCase() + firstName.value.slice(1)\n        },\n        set( val ){    //用set接收計算屬性被更改的觸發函數，並接收val\n\n              //此處再利用客製方法將val去更動此計算屬性所依賴的響應式數據，計算屬性就會被更動\n\n        }\n    })\n"
		},
		{
			"tag": "h2",
			"text": "監視屬性(watch)"
		},
		{
			"tag": "p",
			"text": "Vue中的監視屬性是一個強大的功能，用於監視數據的變化並執行相應的操作。以下為Vue的監視屬性能監視的四種數據。"
		},
		{
			"tag": "precode",
			"text": "watch(監視的數據,回調函數)"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "ref()定義的數據。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "reactive()定義的數據。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "函數回傳一個值。"
		},
		{
			"tag": "p",
			"class":"nli",
			"text": "一個包含上述內容的陣列。"
		},

		{
			"tag": "h3",
			"text": "🐻情況一"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "mark",
			"text": "【极简Vue3】017 watch监视 情况一"
		},
		{
			"tag": "a",
			"text": "https://youtu.be/c2ZaqEyLVZI?si=O599YaKmK-EZZ_cr"
		},
		{
			"tag": "p",
			"text": "監視ref()定義的【基本類型數據】:直接寫數據名即可，監視的是其Value值的改變。以下程式碼利用watch()能監視到sum當按下按鈕時發生的改變，並且回調函數可以接收到新數據(newValue)和舊數據(oldValue)；在此處監視的數據(此為sum)是不需要加上.value的，這一點須要注意不然功能會無法正常運作。"
		},
		{
			"tag": "precode",
			"text": "<templatete>\n  <div class='person'>\n    <h1>情況一</h1>\n    <h2>當前求和為:{{ sum }}</h2>\n    <button @click='changeSum'>點我sum+1</button>\n  </div>\n</templatete>\n\n<script lang='ts' setup name=''person'>\n  import {ref,watch} from 'vue'\n\n  //數據\n  let sum =ref(0)\n\n  //方法\n  function changeSum(){\n    sum.value +=1\n  }\n\n  //監視\n  watch(sum, (newValue,oldValue)=>{\n    console.log('sum變化了!',newValue,oldValue);\n  })\n</script>"
		},
		{
			"tag": "h3",
			"text": "條件停止數據監視的方法"
		},
		{
			"tag": "p",
			"text": "延續上方範例，以下此方法可以在newValue被加到10的時候停止數據監視。"
		},
		{
			"tag": "precode",
			"text": "//監視\nconst stopWatch = watch(sum, (newValue,oldValue)=>{\n  console.log('sum變化了!',newValue,oldValue);\n\n  if(newValue >= 10){\n    stopWatch()\n  }\n})"
		},

		{
			"tag": "h3",
			"text": "🐻情況二"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "mark",
			"text": "【极简Vue3】018 watch监视 情况二"
		},
		{
			"tag": "a",
			"text": "https://youtu.be/slSOx0xI-CY?si=Nl_UU_lIsWhJhDOS"
		},
		{
			"tag": "p",
			"text": "監視ref()定義的【物件類型數據】:監視的是物件的地址值，簡單來說以下情況只會監視person這個物件是否整體都被改變，只有第三個按鈕才會起作用。"
		},
		{
			"tag": "precode",
			"text": "<templatete>\n  <div class='person'>\n    <h1>情況二</h1>\n    <h2>姓名:{{ person.name }}</h2>\n    <h2>年齡:{{ person.age }}</h2>\n\n    <button @click='changeName'>修改名字</button>\n    <button @click='changeAge'>修改年齡</button>\n    <button @click='changePerson'>修改整個人</button>\n  </div>\n</templatete>\n\n<script lang='ts' setup name=''person'>\n  import { ref, watch } from 'vue';\n\n  //數據\n  let person = ref({\n    name: '小天',\n    age: 18,\n  });\n\n  //方法\n  function chanegeName() {\n    person.value.name += '~';\n  }\n  function chanegeAge() {\n    person.value.age += 1;\n  }\n  function chanegePerson() {\n    person.value = { name: '大天', age: 90 };\n  }\n\n  //監視\n  watch(person, (newValue, oldValue) => {\n    console.log('person變化了!', newValue, oldValue);\n  });\n</script>"
		},
		{
			"tag": "h3",
			"text": "深度監視和立即監視的方法"
		},
		{
			"tag": "p",
			"text": "若想監視物件內部的變化時，須手動開啟深度監視。如下方的方式添加第三個參數就可以監測到物件內部的值發生變化，並調用回調函數。"
		},
		{
			"tag": "precode",
			"text": "watch(監視的數據,回調函數,{deep:true})"
		},
		{
			"tag": "p",
			"text": "如果想再加一功能，是讓頁面一載入就立即調用監視屬性內的回調函數的話，要再加上以下語法。deep和immediate可按需求選擇使用，不寫的話此兩功能默認都是false。"
		},
		{
			"tag": "precode",
			"text": "watch(監視的數據,回調函數,\n    {deep:true,immediate:true}\n)"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "若修改的是ref定義的物件中的屬性，newValue和oldValue所呈現的值會是同一個物件。若修改整個ref定義的物件，newValue是新值，oldValue是舊值，因為不是同一個物件了。"
		},
		{
			"tag": "h3",
			"text": "🐻情況三"
		},
		{
			"tag": "h2",
			"text": "watchEffect"
		},
		{
			"tag": "p",
			"text": "watchEffect 是 Vue 3 中的一個響應式 API，用於自動追踪響應式變量的變化並執行副作用（effect）。與傳統的 watch 方法不同，watchEffect 不需要明確地指出需要監視的變量，而是根據副作用函數內使用到的響應式變量進行自動追踪。"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "import { ref, watchEffect } from 'vue';\n\nconst count = ref(0);\n\nwatchEffect(() => {\n  console.log(`The count is: ${count.value}`);\n});\n\ncount.value++; // 此時會觸發 watchEffect，打印出 'The count is: 1'\n"
		},
		{
			"tag": "b",
			"text": "另外一個範例"
		},
		{
			"tag": "mark",
			"text": "【极简Vue3】022 watchEffect"
		},
		{
			"tag": "a",
			"text": "https://youtu.be/EZlN-rjN_Bo?si=i3KRtNZgVs044m_L"
		},
		{
			"tag": "precode",
			"text": "<!--(template)-->\n<div class='person'>\n\t<h2>需求:當水溫達到60度時，或水位達到80cm時，向伺服器發出請求</h2>\n\t<h2>當前水溫:{{temp}}℃</h2>\n\t<h2>當前水位:{{height}}cm</h2>\n\t<button @click='changeTemp'>水溫+10</button>\n\t<button @click='changeHeight'>水位+10</button>\n</div>"
		},
		{
			"tag": "precode",
			"text": "//(js)\nimport { ref, watch, watchEffect } from 'vue';\n\n//數據\nlet temp = ref(10);\nlet height = ref(0);\n\n//方法\nfunction changeTemp() {\n\ttemp.value += 10;\n}\nfunction changeHeight() {\n\theight.value += 10;\n}\n\n//⭐使用watch監視，缺點是要監視幾個就要寫幾個到陣列中。\n// watch([temp,height], (value) => {\n// \tconsole.log(value);\n// \tlet [newTemp, newHeight] = value;\n// \tif (newTemp >= 60 || newHeight >= 80) {\n// \t\tconsole.log('向伺服器發出請求');\n// \t}\n// });\n\n//⭐使用watchEffect監視，缺點是要監視幾個就要寫幾個到陣列中\nwatchEffect(() => {\n\tif (temp.value >= 60 || height.value >= 80) {\n\t\tconsole.log('向伺服器發出請求');\n\t}\n});"
		},
		{
			"tag": "h2",
			"text": "ref"
		},
		{
			"tag": "p",
			"text": "ref 屬性用於獲取 DOM 元素或 Vue 組件實例的引用。這在處理原生 DOM 操作或需要直接訪問組件方法時特別有用。在 Vue 3 中，可以使用 ref API 來創建一個響應式引用。"
		},
		{
			"tag": "precode",
			"text": "<template>\n  <div ref='myDiv'>Hello, Vue!</div>\n</template>\n\n<script>\nimport { ref, onMounted } from 'vue';\n\nexport default {\n  setup() {\n    const myDiv = ref(null);\n\n    onMounted(() => {\n      console.log(myDiv.value); // 獲取到 DOM 元素的引用\n    });\n\n    return {\n      myDiv,\n    };\n  },\n};\n</script>\n"
		},
		{
			"tag": "p",
			"text": "在 Vue 中，其實是可以使用 document.querySelector 或者 document.getElementById 來獲取 DOM 元素的。但是，這種方式並不推薦，原因如下："
		},
		{
			"tag": "mark",
			"text": "破壞響應式系統"
		},
		{
			"tag": "mark",
			"text": "維護困難"
		},
		{
			"tag": "mark",
			"text": "生命週期管理"
		},
		{
			"tag": "mark",
			"text": "抽象化"
		},
		{
			"tag": "p",
			"text": "試想我們如果在許多元件配置到同名id，如果同時引入這些含有同名id的原件，則應用就會出現不正確，所以建議利用ref將選擇dom的方式交給Vue管理，才能避免錯誤。"
		},
		{
			"tag": "h2",
			"text": "Props"
		},
		{
			"tag": "mark",
			"text": "數據傳遞"
		},
		{
			"tag": "p",
			"text": "props 是父組件向子組件傳遞數據的一種方式。在 Vue 中，父組件可以通過 props 屬性將數據傳遞給子組件，子組件則通過 props 定義來接收這些數據。"
		},
		{
			"tag": "precode",
			"text": "<!--父元件-->\n<template>\n  <ChildComponent :message='greeting' />\n</template>\n\n<script setup>\nconst greeting = 'Hello, world!'\n</script>"
		},
		{
			"tag": "precode",
			"text": "<!--子元件-->\n<template>\n  <p>{{ message }}</p>\n</template>\n\n<script setup>\ndefineProps({\n  message: String,\n})\n</script>"
		},
		{
			"tag": "h3",
			"text": "Props 的重要特性"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "單向數據流： 子組件不能直接修改從父組件接收到的 Props 值。如果子組件需要修改數據，應該觸發一個事件，讓父組件來更新數據。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "類型檢查： Vue 可以對 Props 的類型進行檢查，確保傳遞的數據類型正確。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "必填 Props： 可以通過 required: true 讓 Props 成為必填。"
		},
		{
			"tag": "precode",
			"text": "defineProps({\n    message: {\n        type: String,\n        required: true\n    }\n})"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "預設值： 可以為 Props 提供一個預設值。"
		},
		{
			"tag": "precode",
			"text": "defineProps({\n    count: {\n        type: Number,\n        default: 0\n    }\n})\n\n//陣列或物件的預設值\ndefineProps({\n    options: {\n        type: Object,\n        default: () => ({\n            color: 'blue',\n            size: 'medium'\n        })\n    }\n})"
		},
		{
			"tag": "h2",
			"text": "生命週期"
		},
		{
			"tag": "p",
			"text": "這些生命週期鉤子可以在 setup() 函數中多次使用，它們會按照定義的順序依次執行。在使用 <script setup> 語法時，可以直接在頂層使用這些函數，不需要放在 setup() 函數內。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "創建(created)"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "掛載(mounted)"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "更新(updated)"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "銷毀(destroyed)"
		},
		{
			"tag": "h3",
			"text": "創建"
		},
		{
			"tag": "b",
			"text": "setup"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "掛載"
		},
		{
			"tag": "b",
			"text": "onBeforeMount()"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "b",
			"text": "onMounted()⭐"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "更新"
		},
		{
			"tag": "b",
			"text": "onBeforeUpdate()"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "b",
			"text": "onUpdated()⭐"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "卸載"
		},
		{
			"tag": "b",
			"text": "onBeforeUnmount()⭐"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "b",
			"text": "onUnmounted()"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h2",
			"text": "Pinia"
		},
		{
			"tag": "mark",
			"text": "Vuex"
		},
		{
			"tag": "a",
			"text": "https://vuex.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E2%80%9C%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F%E2%80%9D%EF%BC%9F"
		},
		{
			"tag": "mark",
			"text": "Pinia"
		},
		{
			"tag": "a",
			"text": "https://pinia.vuejs.org/zh/"
		},
		{
			"tag": "p",
			"text": "Vue3中建議使用Pinia狀態管理。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "輕量化：Pinia 更加輕量且簡潔，API 設計更直觀，易於上手。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "Vue 3 原生支持：Pinia 是專為 Vue 3 設計的狀態管理解決方案，與 Composition API 完美搭配。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "模組化設計：使用 Pinia 可以更靈活地組織和管理狀態模組。"
		},
		{
			"tag": "h3",
			"text": "安裝pinia"
		},
		{
			"tag": "precode",
			"text": "npm i pinia"
		},
		{
			"tag": "h3",
			"text": "環境建置"
		},
		{
			"tag": "p",
			"text": "需要再根文件main.ts或main.js完成以下步驟:"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "1.引入pinia"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "2.創建pinia"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "3.安裝pinia"
		},
		{
			"tag": "precode",
			"text": "// main.js\nimport { createApp } from 'vue';\nimport { createPinia } from 'pinia';    //引入pinia\nimport App from './App.vue';\n\nconst app = createApp(App);\nconst pinia = createPinia();    //創建Pinia\n\napp.use(pinia);    //安裝pinia\napp.mount('#app');"
		},
		{
			"tag": "h3",
			"text": "資料夾配置"
		},
		{
			"tag": "precode",
			"text": "src/\n|-- stores/\n|   |-- index.js (或 index.ts)\n|   |-- moduleA.js (或 moduleA.ts)\n|   |-- moduleB.js (或 moduleB.ts)\n|-- components/\n|-- views/\n|-- App.vue\n|-- main.js (或 main.ts)\n"
		},
		{
			"tag": "h3",
			"text": "儲存庫文件內部配置"
		},
		{
			"tag": "p",
			"text": "defineStore 是 Pinia 中用來創建 Store 的核心函數。這個函數接受一組參數來定義 Store 的結構和行為。變數命名的方式建議使用「use」 +「模組名」+「Store」小駝峰式命名。並且記得將其export導出，讓外部能夠使用。會使用到兩個參數:"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "id：Store 的唯一標識符，用於引用和註冊這個 Store。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "options：包含狀態、行為等的配置對象。"
		},
		{
			"tag": "p",
			"text": "其中我們會定義state、actions、getters函式分別定義store的初始狀態、狀態行為、計算屬性。以下式一些範例："
		},
		{
			"tag": "precode",
			"text": "// stores/moduleA.js\nimport { defineStore } from 'pinia';\nexport const useModuleAStore = defineStore('moduleA', {\n  state: () => ({\n    count: 0\n  }),\n  actions: {\n    increment() {\n      this.count++;\n    }\n  }\n});"
		},
		{
			"tag": "precode",
			"text": "const useMainStore = defineStore('main', {\n  state: () => ({\n    counter: 0,\n    userName: ''\n  }),\n  actions: {\n    increment() {\n      this.counter++;\n    },\n    setUserName(name) {\n      this.userName = name;\n    },\n    async fetchUserData() {\n      const data = await fetch('https://api.example.com/user');\n      const json = await data.json();\n      this.userName = json.name;\n    }\n  },\n  getters: {\n    doubleCounter: (state) => state.counter * 2\n  }\n});"
		},
		{
			"tag": "h3",
			"text": "狀態管理的原則"
		},
		{
			"tag": "b",
			"text": "傾向交給狀態管理工具的原則"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "全局狀態： 如果數據是全局的，且需要在多個組件之間共享和同步，那麼存入 Pinia 是合適的選擇。例如，用戶認證狀態、主題設置等。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "持久性需求： 如果數據需要在頁面重新載入後保持，Pinia 可以與本地存儲（如 localStorage）結合使用，來保存這些狀態。例如，使用者偏好設置。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "頻繁使用： 如果數據在多個組件中被頻繁讀取和修改，使用 Pinia 可以減少重複代碼，並集中管理狀態變化。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "非組件狀態： 如果數據與特定組件無關，而是應用級別的狀態，Pinia 可以幫助更好地組織和管理這些數據。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "性能需求： 將大量或頻繁變動的數據存入 Pinia，可以提高應用性能，因為這樣可以減少不必要的組件重繪。"
		},
		{
			"tag": "b",
			"text": "不建議交給狀態管理工具的情況"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "短生命週期狀態： 如果數據僅在某一個組件內部使用，且生命週期短暫，則應直接在該組件內管理狀態。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "臨時數據： 如果數據是臨時的，不需要在多個組件間共享，可以直接在組件內部使用。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "無需全局共享： 如果數據僅與某些特定組件相關，而其他組件不需要訪問，則無需將其存入 Pinia。"
		},
		{
			"tag": "h3",
			"text": "從儲存庫中取出數據"
		},
		{
			"tag": "p",
			"text": "例如我們想讀到useCountStore中的數據："
		},
		{
			"tag": "precode",
			"text": "//元件中\n\n//先引入欲讀寫的儲存庫\nimport { useCountStore } from '@/store/count'\n\n//先將獲取的函式執行\nconst countStore = useCountStore()\n\n//獲取儲存庫中定義的sum\nconsole.log(countStore.sum)"
		},
		{
			"tag": "h3",
			"text": "修改數據的方式"
		},
		{
			"tag": "p",
			"text": "假設我們定義一個儲存庫"
		},
		{
			"tag": "precode",
			"text": "//store/count.ts\nimport { defineStore } from 'pinia';\n\nexport const useCountStore = defineStore('count', {\n    state() {\n        return {\n            sum: 6,\n            school: '中原大學',\n            address: '桃園',\n    };\n},\n    actions: {\n    //裡面可以放置多個方法，讓元件調用並執行動作\n            increment(value) {\n            console.log('increment被使用了', value);\n            //this是當前的store\n            this.sum += value\n            },\n    },\n});"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "1.直接修改數據"
		},
		{
			"tag": "precode",
			"text": "//元件中\nimport { useCountStore } from '@/store/count'\nconst countStore = useCountStore()\n\nfunction add(){\n    countStore.sum += 1\n}"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "2.使用$patch批量修改"
		},
		{
			"tag": "precode",
			"text": "//元件中\n\nimport { useCountStore } from '@/store/count'\nconst countStore = useCountStore()\n\nfunction add(){\n    //如果用此修改方式會導致數據重複設定\n    /*\n    countStore.sum += 1\n    countStore.school = '淡江大學'\n    countStore.school = '新北'\n    */\n\n    //使用patch可以讓效能提升\n    countStore.$patch({\n        sum: 819\n        school: '淡江大學'\n        address: '新北'\n    })\n}"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "3.使用儲存庫中的actions"
		},
		{
			"tag": "precode",
			"text": "//元件中\n\nimport { useCountStore } from '@/store/count'\nconst countStore = useCountStore()\n\nfunction add(){\n    //傳入想增加的數字\n    countStore.increment(n.value)\n}"
		},
		{
			"tag": "h3",
			"text": "將儲存庫的數據解構「storeToRefs」"
		},
		{
			"tag": "p",
			"text": "storeToRefs 是 Pinia 中的一個實用工具函數，用來將 Store 的狀態和 getter 轉換為 Vue 組件中的 refs，這樣可以方便地在組件中使用和響應狀態變化。不會對方法進行包裹"
		},
		{
			"tag": "precode",
			"text": "import { storeToRefs } from 'pinia'\n\nconst countStore = useCountStore()\nconst { sum,school,address } = storeToRefs(countStore)"
		},
		{
			"tag": "h3",
			"text": "儲存庫中的「getters」"
		},
		{
			"tag": "p",
			"text": "類似vue中的計算屬性，並且我們也可以直接在元件中使用這個衍伸的值。"
		},
		{
			"tag": "precode",
			"text": "//store/count.ts\nimport { defineStore } from 'pinia';\n\nexport const useCountStore = defineStore('count', {\n    state() {\n        sum:3,\n        school: 'chungyuan',\n        //...\n    },\n    actions: {\n//...\n    },\n    getters:{\n        bigSum(state){\n            return state.sum*10\n    },\n        upperSchool(state){\n            return state.school.toUpperCase()\n    }\n}\n});"
		},
		{
			"tag": "h3",
			"text": "使用訂閱 $subscribe"
		},
		{
			"tag": "p",
			"text": "在 Pinia 中，$subscribe 是一個強大的方法，用於監聽 Store 的變化。你可以使用 $subscribe 來執行一些自定義邏輯，比如將狀態變化保存到本地存儲，或者進行日誌記錄等。類似Vue中的監視屬性。假設我們有個main儲存庫:"
		},
		{
			"tag": "precode",
			"text": "// store.js\nimport { defineStore } from 'pinia';\n\nexport const useSimpleStore = defineStore('simple', {\n  state: () => ({\n    message: 'Hello, World!'\n  }),\n  actions: {\n    updateMessage(newMessage) {\n      this.message = newMessage;\n    }\n  }\n});\n"
		},
		{
			"tag": "precode",
			"text": "//元件中\n//訂閱狀態變化\nconst store = useSimpleStore();\n\nstore.$subscribe((mutation, state) => {\n  console.log(`變更類型: ${mutation.type}`);\n  console.log(`變更負載: ${JSON.stringify(mutation.payload)}`);\n  console.log(`當前狀態: ${JSON.stringify(state)}`);\n});"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "mutation:描述此次狀態變更的細節，包括變更的類型和負載（payload）。"
		},
		{
			"tag": "p",
			"text": "type：表示此次狀態變更的類型。例如，對應於某個 action 的名稱。payload：表示此次狀態變更所攜帶的數據。例如，action 中傳遞的參數。當你在 Store 中調用 increment 方法並傳遞參數時，mutation 會記錄這次變更的相關信息。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "state:表示當前 Store 的狀態。這是變更後的最新狀態。"
		},
		{
			"tag": "p",
			"text": "state 包含了 Store 中的所有狀態變量，可以用來檢查或操作當前的應用狀態。你可以使用 state 來查看每次變更後的 Store 狀態，確保應用的狀態是預期的。"
		},
		{
			"tag": "h3",
			"text": "pinia儲存庫的組合式寫法"
		},
		{
			"tag": "p",
			"text": "此寫法將上方的getters內容提及的選項式寫法改為使用組合式寫法:"
		},
		{
			"tag": "precode",
			"text": "// store/count.ts\nimport { defineStore } from 'pinia';\nimport { ref, computed } from 'vue';\n\nexport const useCountStore = defineStore('count', () => {\n  // 定義狀態\n  const sum = ref(3);\n  const school = ref('chungyuan');\n  \n  // 定義行為\n  function increment(value: number) {\n    sum.value += value;\n  }\n\n  // 定義計算屬性\n  const bigSum = computed(() => sum.value * 10);\n  const upperSchool = computed(() => school.value.toUpperCase());\n\n  return {\n    sum,\n    school,\n    increment,\n    bigSum,\n    upperSchool,\n  };\n});\n"
		},
		{
			"tag": "h2",
			"text": "組件通信"
		},
		{
			"tag": "h3",
			"text": "props"
		},
		{
			"tag": "b",
			"text": "子元件接收父元件傳遞的數據方法"
		},
		{
			"tag": "precode",
			"text": "//父元件\n<template>\n    <h1>父元件</h1>\n    <h4>{{car}}</h4>\n    <Child :car='car' />\n</template>\n\n<script lang='ts' name='Father'>\n    import Child from './Child.vue';\n    import { ref } from 'vue';\n\n    let car = ref('Benz');\n</script>"
		},
		{
			"tag": "precode",
			"text": "//子元件\n<template>\n    <h1>子元件</h1>\n    <h4>父親的車:{{car}}</h4>\n</template>\n\n<script lang='ts' name='Child'>\n    defineProps(['car']);\n</script>"
		},
		{
			"tag": "b",
			"text": "父元件接收子元件傳遞的數據方法"
		},
		{
			"tag": "p",
			"text": "此方法其實是定義一函式在父元件，並將此函式傳遞給子元件讓其調用，調用時子元件會將將欲傳遞的值傳入函式，進而讓父元件接收其值。"
		},
		{
			"tag": "precode",
			"text": "//父元件\n<template>\n    <h1>父元件</h1>\n    <h4>車子:{{car}}</h4>\n    <h4 v-show='toy'>兒子給的玩具:{{toy}}</h4>\n    <Child :car='car' :sendToy='getToy' />\n</template>\n\n<script lang='ts' name='Father'>\n    import Child from './Child.vue';\n    import { ref } from 'vue';\n    \n    //數據\n    let car = ref('Benz');\n    let toy = ref('')\n    //方法\n    function getToy(value:string){\n        //console.log('父接收的值:',value)\n        toy.value = value\n    }\n</script>"
		},
		{
			"tag": "precode",
			"text": "//子元件\n<template>\n    <h1>子元件</h1>\n    <h4>父親給的車:{{car}}</h4>\n    <h4>玩具:{{toy}}</h4>\n    <button @click='sendToy(toy)'>把玩具給父親按鈕</button>\n</template>\n\n<script lang='ts' name='Child'>\n    import { ref } from 'vue';\n\n    //數據\n    let toy = ref('變形金鋼')\n    \n    defineProps(['car', 'sendToy']);\n</script>"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h2",
			"text": "Nuxt.js"
		},
		{
			"tag": "img",
			"text": "img/vue/4_Nuxt3.jpg"
		},
		{
			"tag": "p",
			"text": "部分內容取自於Udemy:從零開始學 Nuxt．只要 5 小時就能快速入門．無痛從 Vue 轉換成 Nuxt。"
		},
		{
			"tag": "b",
			"text": "伺服器端渲染&SEO"
		},
		{
			"tag": "p",
			"text": "Nuxt.js是一個基於 Vue.js的框架，旨在簡化和增強現代化、功能豐富的 web 應用程式構建過程。它最大的特點之一是支持伺服器端渲染 (SSR)，這意味著在伺服器端預先生成 HTML，然後再送到客戶端。這不僅提升了首屏加載速度，還有助於搜尋引擎優化 (SEO)，使網站更容易被搜尋引擎索引。"
		},
		{
			"tag": "b",
			"text": "支持靜態網站生成"
		},
		{
			"tag": "p",
			"text": "除了伺服器端渲染，Nuxt.js 也支持靜態網站生成 (SSG)，允許開發者在構建過程中預先生成靜態頁面。這種方式適用於內容相對穩定的網站，如部落格和文檔網站，提供卓越的使用者體驗同時減少伺服器負擔。Nuxt.js 的模組生態系統豐富，包含如 Axios、PWA、Google Analytics 等各種實用功能，使得開發者可以快速擴展應用程式的功能。"
		},
		{
			"tag": "b",
			"text": "中介軟體"
		},
		{
			"tag": "p",
			"text": "Nuxt.js還提供了靈活的佈局和中介軟體設置。開發者可以定義全域佈局和中介軟體，這有助於保持項目結構的清晰和易維護。自動化路由生成則是 Nuxt.js的另一個亮點，只需在特定文件夾內添加檔案即可自動生成對應的路由，大大簡化了路由管理。"
		},
		{
			"tag": "b",
			"text": "自動重載頁面"
		},
		{
			"tag": "p",
			"text": "對於開發者來說，Nuxt.js 提供了極為友好的開發環境。例如，它支援熱重載功能，開發過程中修改代碼後會自動重載頁面，極大地提高了開發效率。此外，Nuxt.js 提供了強大的指令行工具，如 create-nuxt-app，幫助開發者快速啟動新專案。透過 Nuxt.js，開發者還可以輕鬆整合後端服務，構建全端應用。"
		},
		{
			"tag": "h3",
			"text": "建立Nuxt專案"
		},
		{
			"tag": "precode",
			"text": "npx nuxi@latest init nuxt-app"
		},
		{
			"tag": "p",
			"text": "在終端機透過上述指令我們可以建立Nuxt專案，其中latest是確保nuxi是最新的版本。init則是初始化專案，專案名稱是nuxt-app。安裝完成後我們會看到資料分層如下，其中app.vue是專案的進入點。"
		},
		{
			"tag": "img",
			"text": "img/vue/0_初始專案資料夾.png"
		},
		{
			"tag": "p",
			"text": "我們必須安裝以下延伸套件。才會有錯誤檢查的效果。"
		},
		{
			"tag": "img",
			"text": "img/vue/1_套件安裝.png"
		},
		{
			"tag": "h3",
			"text": "Nuxt 3 的目錄結構"
		},
		{
			"tag": "b",
			"text": ".nuxt/"
		},
		{
			"tag": "p",
			"text": "這是由 Nuxt.js自動生成的目錄，包含應用的編譯代碼。你通常不需要手動修改這個目錄中的內容。"
		},
		{
			"tag": "b",
			"text": "assets/"
		},
		{
			"tag": "p",
			"text": "這裡放置靜態資源，例如樣式表（CSS）、圖片和其他未經處理的資源。這些資源不會被 Webpack 編譯。"
		},
		{
			"tag": "b",
			"text": "components/"
		},
		{
			"tag": "mark",
			"text": "自動載入"
		},
		{
			"tag": "p",
			"text": "存放 Vue 組件的地方。這些組件可以在頁面和其他組件中復用。Nuxt 會自動載入這個目錄中的元件，來提供給其他頁面或元件做使用。你可以在頁面或其他組件中直接使用，而不需要每次都進行 import。"
		},

		{
			"tag": "b",
			"text": "composables/"
		},
		{
			"tag": "p",
			"text": "存放可重用的邏輯代碼（Composition API）。這在使用 Vue 3 時特別有用。放在這個目錄下的檔案也會被 Nuxt 自動載入讓需要使用的頁面或元件可以直接做使用。放置的函式通常有使用到 Vue 的組合式 API 或具有回傳或修改響應式的狀態。"
		},
		{
			"tag": "b",
			"text": "layouts/"
		},
		{
			"tag": "p",
			"text": "定義應用的佈局。佈局是包含導航和頁腳等固定部分的框架，頁面內容會在其中渲染。"
		},
		{
			"tag": "b",
			"text": "middleware/"
		},
		{
			"tag": "p",
			"text": "定義應用的中介軟體。中介軟體在請求到達頁面組件之前執行，可用於驗證、重定向等。"
		},
		{
			"tag": "b",
			"text": "pages/"
		},
		{
			"tag": "p",
			"text": "存放應用的頁面。每個 .vue 文件自動變成路由對應的一個頁面，且基於文件結構生成路由配置。Nuxt 3 將自動整合 ViewRouter，並會依據目錄及檔案的結構規則來自動產生相對應的路由，這也是 Nuxt 3 產生路由的方式之一。"
		},
		{
			"tag": "b",
			"text": "plugins/"
		},
		{
			"tag": "p",
			"text": "Nuxt 3 會自動載入 plugins 目錄作為插件來使用"
		},
		{
			"tag": "b",
			"text": "public/"
		},
		{
			"tag": "p",
			"text": "放置靜態文件的目錄，這些文件可以直接通過根 URL 訪問，例如 /favicon.ico。有別於 assets/，其則會放一些經常變動的檔案。"
		},
		{
			"tag": "b",
			"text": "server"
		},
		{
			"tag": "p",
			"text": "這裡存放伺服器端代碼和 API 路由，用於構建伺服器端應用或 API。"
		},
		{
			"tag": "b",
			"text": "utils"
		},
		{
			"tag": "p",
			"text": "存放一些實用工具函式，這些函數可在整個應用中共用。通常放置無狀態的純函式。"
		},
		{
			"tag": "h3",
			"text": "設定檔"
		},
		{
			"tag": "b",
			"text": "app.vue"
		},
		{
			"tag": "p",
			"text": "Nuxt 3 的預設入口元件"
		},
		{
			"tag": "b",
			"text": "app.config.ts"
		},
		{
			"tag": "p",
			"text": "app.config.ts 檔案提供了服務運作時暴露給客戶端使用的設定，因此請不要在 app.config.ts 中添加任何機密或敏感的資訊。"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "自動載入"
		},
		{
			"tag": "b",
			"text": "Nuxt 3 的常用元件與函數"
		},
		{
			"tag": "p",
			"text": "Nuxt 3 的自動導入功能使得常用元件和函數的使用更加方便。例如，所有放置在 components 目錄中的 Vue 組件都會自動註冊，因此你可以在頁面或其他組件中直接使用它們，而不需要每次都進行 import。此外，Nuxt 3 還提供了一些常用的內建函數如 useFetch 和 useAsyncData，這些函數可以自動導入並使用，簡化了數據抓取和異步操作的過程。"
		},
		{
			"tag": "b",
			"text": "Vue 3 的API"
		},
		{
			"tag": "p",
			"text": "在 Nuxt 3 中，Vue 3 的 Composition API 和其他新特性被無縫集成。這意味著當你在 composables 目錄中定義可重用的邏輯時，這些函數會自動被導入並在需要的地方使用。這個目錄自動載入機制確保了你的代碼保持清潔和模組化，提升了開發效率和代碼可維護性。"
		},
		{
			"tag": "b",
			"text": "基於目錄的自動載入"
		},
		{
			"tag": "p",
			"text": "Nuxt 3 最強大的特性之一是基於目錄的自動載入。這包括組件、頁面、插件等都可以通過特定的目錄結構自動進行導入和設定。例如，任何放置在 plugins 目錄中的插件都會自動在應用啟動時被加載，無需額外配置。這大大簡化了開發流程，使專案結構更加直觀和易於管理。"
		},
		{
			"tag": "mark",
			"text": "關閉自動載入的方法"
		},
		{
			"tag": "p",
			"text": "只要在專案目錄下的nuxt.config.ts檔案內把autoImport的屬性值改為false就可以關閉自動載入。"
		},
		{
			"tag": "precode",
			"text": "export default defineNuxtConfig({\n    imports:{\n        autoImport:false\n    }\n})"
		},
		{
			"tag": "h3",
			"text": "約定式路由"
		},
		{
			"tag": "p",
			"text": "在Nuxt 3中如果要建立路由頁面，我們必須建立一個pages/ 目錄，內層建立一個index.vue就為此專案的首頁。"
		},
		{
			"tag": "img",
			"text": "img/vue/2_首頁.png"
		},
		{
			"tag": "p",
			"text": "Nuxt 3 中我們需要在 app.vue 檔案當中使用<NuxtPage />來顯示我們建立的路由頁面如下。"
		},
		{
			"tag": "precode",
			"text": "<template>\n    <div>\n        <NuxtPage />   <!-- 載入pages內的路由 -->\n    </div>\n</template>"
		},
		{
			"tag": "b",
			"text": "基本路由"
		},
		{
			"tag": "precode",
			"text": "pages/\n  index.vue         -> /\n  about.vue         -> /about\n  contact.vue       -> /contact"
		},
		{
			"tag": "b",
			"text": "巢狀路由"
		},
		{
			"tag": "precode",
			"text": "pages/\n  posts/\n    index.vue       -> /posts\n    create.vue      -> /posts/create\n    [id].vue        -> /posts/123 (動態路由)"
		},
		{
			"tag": "b",
			"text": "動態路由"
		},
		{
			"tag": "precode",
			"text": "pages/\n  users/\n    [id].vue        -> /users/1, /users/2 等\n    [username].vue  -> /users/john, /users/mary 等"
		},
		{
			"tag": "b",
			"text": "多層動態路由"
		},
		{
			"tag": "precode",
			"text": "pages/\n  categories/\n    [category]/\n      [id].vue      -> /categories/electronics/123"
		},
		{
			"tag": "b",
			"text": "捕捉所有路由"
		},
		{
			"tag": "precode",
			"text": "pages/\n  [...slug].vue     -> 匹配所有未定義的路由"
		},
		{
			"tag": "p",
			"text": "假設我們有一個頁面是配置在pages/catch-all/[...slug].vue，其內容如下，我們可以利用js解構出參數，如此一來當我們訪問的路徑為loacalhost:xxxx/catch-all/Joe/Steven/Jill，則畫面會渲染出一個陣列['Joe','Steven','Jill']以此類推。"
		},
		{
			"tag": "precode",
			"text": "<template>\n    <div>{{ slug }}</div>\n</template>\n\n<script setup>\n    const route = useRoute()\n    const { slug } = route.params    //將slug解構出來\n</script>"
		},
		{
			"tag": "mark",
			"text": "404 NOT FOUND"
		},
		{
			"tag": "p",
			"text": "我們可以將頁面配置在pages/[...slug].vue，網址列輸入一個不存在的路由，則都會導向這個slug頁面。另外我們可以透過以下方式將狀態碼也一併設為404。"
		},
		{
			"tag": "precode",
			"text": "<script setup>\n    setResponseStatus(404)\n</script>"
		},
		{
			"tag": "mark",
			"text": "更複雜的動態路由"
		},
		{
			"tag": "img",
			"text": "img/vue/5_更複雜的動態路由.png"
		},
		{
			"tag": "p",
			"text": "假設我們如上圖新增了更複雜的導頁網址。我們可以如此新增以下框選的部分，來接收NuxtLink要前往的特定路由。請再仔細觀察對應的關係。相信聰明的你一下就看懂!"
		},
		{
			"tag": "img",
			"text": "img/vue/6_列出指定類別的頁面.png"
		},
		{
			"tag": "h3",
			"text": "導頁元件"
		},
		{
			"tag": "p",
			"text": "<NuxtLink> 是 Nuxt 提供的路由元件，用來處理客戶端導航。to的屬性值可以指定導航目標。"
		},
		{
			"tag": "precode",
			"text": "<NuxtLink to='/about'>關於</NuxtLink>\n<NuxtLink :to='{ path: '/users', query: { id: 123 }}'>用戶</NuxtLink>"
		},
		{
			"tag": "b",
			"text": "高級用法"
		},
		{
			"tag": "precode",
			"text": "<!-- 外部連結 -->\n<NuxtLink to='https://nuxt.com' external>Nuxt</NuxtLink>\n\n<!-- 動態路由 -->\n<NuxtLink :to='`/posts/${post.id}`'>{{ post.title }}</NuxtLink>\n\n<!-- 客製化激活樣式 -->\n<NuxtLink to='/about' active-class='active' exact-active-class='exact'>關於</NuxtLink>"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		}
	],
	[
		{ "title": "React.js🚧" },
		{
			"tag": "h2",
			"text": "介紹"
		},
		{
			"tag": "p",
			"text": "React 是由 Facebook（現為 Meta）開發並維護的一個用於構建使用者介面的 JavaScript 庫。它最常用於構建單頁應用（SPA），以及處理複雜的 UI 組件和狀態管理。React 的核心概念是組件化設計，讓開發者能夠將 UI 分解成獨立、可重用的組件，使得應用程式結構更加模組化和易於維護。"
		},
		{
			"tag": "h3",
			"text": "主要特點"
		},
		{
			"tag": "b",
			"text": "組件化"
		},
		{
			"tag": "p",
			"text": "React 的應用是由小的、獨立的組件構成的。每個組件可以封裝自己的狀態和邏輯，組件之間可以像積木一樣組合形成更大的 UI。組件化的優勢在於模組化開發，方便重用，並且使代碼維護更加簡單。"
		},
		{
			"tag": "b",
			"text": "虛擬 DOM"
		},
		{
			"tag": "p",
			"text": "React 使用虛擬 DOM（Virtual DOM）技術來提高應用的性能。虛擬 DOM 是在內存中的一個輕量級副本，當狀態變更時，React 會更新虛擬 DOM，並只將必要的更改同步到真實的 DOM 中，減少了不必要的 DOM 操作，從而提升性能。"
		},
		{
			"tag": "b",
			"text": "單向數據流"
		},
		{
			"tag": "p",
			"text": "React 採用單向數據流，即數據從父組件傳遞到子組件。這樣可以使數據流更加清晰，便於追蹤數據如何隨著應用的變化而變化，從而避免了傳統雙向數據綁定帶來的複雜性。"
		},
		{
			"tag": "b",
			"text": "聲明式 UI"
		},
		{
			"tag": "p",
			"text": "React 的設計理念是聲明式，即開發者只需要關注應該「呈現」的內容，而不必手動處理 DOM 更新。React 會根據狀態的改變自動更新 UI。"
		},
		{
			"tag": "b",
			"text": "JSX 語法"
		},
		{
			"tag": "p",
			"text": "JSX 是 React 的一種語法擴展，允許在 JavaScript 中直接書寫 HTML 樣式的語法。這讓 UI 的表達更加直觀，並且可以直接與 JavaScript 邏輯進行互動。"
		},
		{
			"tag": "h3",
			"text": "創建React專案"
		},
		{
			"tag": "p",
			"text": "React 通常與 create-react-app 一起使用，這是官方提供的構建工具，可以快速搭建 React 項目"
		},
		{
			"tag": "precode",
			"text": "npx create-react-app my-app\ncd my-app\nnpm start"
		},
		{
			"tag": "h2",
			"text": "JSX語法"
		},
		{
			"tag": "mark",
			"text": "直觀性"
		},
		{
			"tag": "mark",
			"text": "可組合性"
		},
		{
			"tag": "mark",
			"text": "提升開發效率"
		},
		{
			"tag": "p",
			"text": "JSX（JavaScript XML）是一種用來在 React 中編寫 HTML 樣式語法的擴展語法。它允許你在 JavaScript 代碼中寫類似 HTML 的標記，讓編寫 React 元件時更加直觀。"
		},
		{
			"tag": "h3",
			"text": "轉換器"
		},
		{
			"tag": "mark",
			"text": "HTML TO JSX"
		},
		{
			"tag": "a",
			"text": "https://transform.tools/html-to-jsx"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "function Welcome() {\n  return <h1>歡迎來到 React 世界！</h1>;\n}"
		},
		{
			"tag": "precode",
			"text": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nfunction App() {\n  return (\n    <div>\n      <h1>Hello, React!</h1>\n      <p>This is a simple React app.</p>\n    </div>\n  );\n}\n\nReactDOM.render(<App />, document.getElementById('root'));"
		},
		{
			"tag": "p",
			"text": "以上這段代碼定義了一個簡單的 App 組件，返回了一個包含標題和段落的 JSX 模板，並將這個組件渲染到 DOM 中的 #root 元素上。"
		},
		{
			"tag": "h3",
			"text": "Fragment"
		},
		{
			"tag": "p",
			"text": "React 要求每個元件的返回值只能有一個根元素，因此開發者通常會使用 <div> 等元素來包裹多個子元素。然而，這樣會在 DOM 結構中增加不必要的節點，可能會影響性能或造成無意的樣式問題。使用 Fragment 可以避免這種情況。"
		},
		{
			"tag": "precode",
			"text": "return (\n  <>\n    <h1>標題</h1>\n    <p>這是一段描述文字</p>\n  </>\n);"
		},

		{
			"tag": "h2",
			"text": "套用CSS"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h2",
			"text": "條件式渲染"
		},
		{
			"tag": "p",
			"text": "有時候你的 component 會需要根據不同的條件來顯示不同的內容。在 React 中，你可以使用 JavaScript 中 if 陳述式、&& 以及 ? : 運算子等語法來根據條件 render 不同的 JSX。"
		},
		{
			"tag": "h3",
			"text": "Truthy & Falsy"
		},
		{
			"tag": "p",
			"text": "首先我們要先了解，在 JavaScript 中，Truthy 和 Falsy 是用來描述在布林值上下文中被視為 true 或 false 的值。"
		},
		{
			"tag": "img",
			"text": "./img/react/01_Truthy and Falsy.png"
		},
		{
			"tag": "h3",
			"text": "if/else 陳述式🚧"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "三元運算符🚧"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "邏輯運算符🚧"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h2",
			"text": "useState🚧"
		},
		{
			"tag": "p",
			"text": "useState 是 React 中的一個 Hook，用來在函式型元件中管理狀態。它讓你能夠在函式元件內定義和使用狀態，而不需要轉換為 class 元件。"
		},
		{
			"tag": "precode",
			"text": "const [state, setState] = useState(initialValue);\n\n/*\nuseState 接受一個初始值作為參數，返回一個狀態值和一個更新狀態的函數。\n\nstate 是當前狀態的值。\nsetState 是用來更新狀態的函數。\ninitialValue 是狀態的初始值。\n*/"
		},
		{
			"tag": "h3",
			"text": "範例"
		},
		{
			"tag": "b",
			"text": "計數器"
		},
		{
			"tag": "precode",
			"text": "import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);  // 初始值為 0\n\n  return (\n    <div>\n      <p>計數: {count}</p>\n      <button onClick={() => setCount(count + 1)}>增加計數</button>\n    </div>\n  );\n}"
		},
		{
			"tag": "b",
			"text": "切換狀態（布林值）"
		},
		{
			"tag": "precode",
			"text": "import { useState } from 'react';\n\nfunction Toggle() {\n  const [isOn, setIsOn] = useState(false);  // 初始值為 false\n\n  return (\n    <div>\n      <p>狀態: {isOn ? '開啟' : '關閉'}</p>\n      <button onClick={() => setIsOn(!isOn)}>切換</button>\n    </div>\n  );\n}"
		},
		{
			"tag": "b",
			"text": "管理字串狀態"
		},
		{
			"tag": "precode",
			"text": "import { useState } from 'react';\n\nfunction InputComponent() {\n  const [text, setText] = useState('');  // 初始值為空字串\n\n  return (\n    <div>\n      <input\n        type='text'\n        value={text}\n        onChange={(e) => setText(e.target.value)}  // 每次輸入更新狀態\n      />\n      <p>輸入的文字: {text}</p>\n    </div>\n  );\n}"
		},
		{
			"tag": "b",
			"text": "管理物件狀態"
		},
		{
			"tag": "precode",
			"text": "import { useState } from 'react';\n\nfunction Profile() {\n  const [profile, setProfile] = useState({ name: 'Alice', age: 25 });\n\n  const updateAge = () => {\n    setProfile({ ...profile, age: profile.age + 1 });  // 使用展開運算符更新部分狀態\n  };\n\n  return (\n    <div>\n      <p>姓名: {profile.name}</p>\n      <p>年齡: {profile.age}</p>\n      <button onClick={updateAge}>增加年齡</button>\n    </div>\n  );\n}\n\n//這裡使用了展開運算符 ... 來更新物件中的某個屬性，並保持其他屬性的值不變。"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "useState 是用來在函式元件內部定義狀態的工具。\n每當你使用 setState 函數更新狀態時，React 會重新渲染元件並顯示最新的狀態值。\n狀態可以是任何類型，如數字、字串、布林值、物件、陣列等。"
		},
		{
			"tag": "h2",
			"text": "useEffect"
		},
		{
			"tag": "p",
			"text": "useEffect 是 React 中的一個 Hook，允許你在函式型元件中執行副作用（如資料請求、訂閱、DOM 操作等）。它相當於 class 元件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的組合。"
		},
		{
			"tag": "precode",
			"text": "useEffect( function , array )\n\n/*\n第一個參數：一個函數，會在元件渲染後執行。\n\n第二個參數（可選）：一個依賴項陣列，指定何時重新執行這個副作用函數。\n如果沒有提供依賴項，useEffect 在每次渲染後都會執行。\n如果依賴項為空陣列，則只在元件首次渲染時執行一次。\n*/"
		},
		{
			"tag": "h3",
			"text": "範例"
		},
		{
			"tag": "b",
			"text": "只在元件渲染時執行（相當於 componentDidMount）"
		},
		{
			"tag": "precode",
			"text": "import { useEffect } from 'react';\n\nfunction MyComponent() {\n  useEffect(() => {\n    console.log('元件已掛載');\n  }, []);  // 空依賴陣列，表示只在元件掛載時執行\n\n  return <div>我的元件</div>;\n}"
		},
		{
			"tag": "b",
			"text": "依賴某個狀態更新（相當於 componentDidUpdate）"
		},
		{
			"tag": "precode",
			"text": "import { useState, useEffect } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log(`當前計數是 ${count}`);\n  }, [count]);  // 依賴 count，當 count 改變時執行\n\n  return (\n    <div>\n      <p>計數: {count}</p>\n      <button onClick={() => setCount(count + 1)}>增加計數</button>\n    </div>\n  );\n}"
		},
		{
			"tag": "b",
			"text": "清理副作用（相當於 componentWillUnmount）"
		},
		{
			"tag": "precode",
			"text": "//有時需要在元件卸載或某些狀態更新時清理副作用，例如取消訂閱或清理定時器。\nimport { useEffect } from 'react';\n\nfunction TimerComponent() {\n  useEffect(() => {\n    const timer = setInterval(() => {\n      console.log('每秒運行一次');\n    }, 1000);\n\n    // 返回一個函數作為清理副作用的邏輯\n    return () => {\n      clearInterval(timer);\n      console.log('計時器已清除');\n    };\n  }, []);  // 空依賴陣列，表示只在元件掛載和卸載時執行\n\n  return <div>計時器元件</div>;\n}"
		},
		{
			"tag": "b",
			"text": "進行資料請求"
		},
		{
			"tag": "precode",
			"text": "import { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    fetch('https://jsonplaceholder.typicode.com/posts/1')\n      .then((response) => response.json())\n      .then((data) => setData(data));\n\n  }, []);  // 空依賴陣列，表示只在元件掛載時進行一次資料請求\n\n  return (\n    <div>\n      {data ? <h3>{data.title}</h3> : <p>載入中...</p>}\n    </div>\n  );\n}"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "useEffect 可以讓你在函式型元件中方便地處理副作用。\n可選的依賴項陣列決定了副作用的執行時機。\n返回清理函數可以處理副作用的清理工作（例如定時器、訂閱）。"
		},
		{
			"tag": "h2",
			"text": "Props"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h2",
			"text": "useContext🚧"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		}
	],
	[
		{ "title": "PHP🚧" },
		{
			"tag": "mark",
			"text": "以下僅記錄重要知識點，其餘請查閱php文檔→"
		},
		{
			"tag": "a",
			"text": "https://php.golaravel.com/langref.html"
		},
		{
			"tag": "h2",
			"text": "介紹"
		},
		{
			"tag": "p",
			"text": "PHP（Hypertext Preprocessor）是一種廣泛使用的開源腳本語言，特別適合於網頁開發並可以嵌入到 HTML 中。PHP 於 1994 年由 Rasmus Lerdorf 創建，最初作為一套簡單的 CGI 腳本，用於跟蹤他個人首頁的訪問者。隨著時間的推移，PHP 逐漸發展成為一個強大的服務器端腳本語言，並成為動態網站開發的首選工具之一。"
		},
		{
			"tag": "mark",
			"text": "嵌入式設計"
		},
		{
			"tag": "p",
			"text": "PHP 可以直接嵌入到 HTML 中，使得開發人員能夠輕鬆地生成動態內容。"
		},
		{
			"tag": "mark",
			"text": "跨平台"
		},
		{
			"tag": "p",
			"text": "PHP 能夠運行在多種操作系統上，包括 Windows、Linux、macOS 等。"
		},
		{
			"tag": "mark",
			"text": "廣泛的資料庫支持"
		},
		{
			"tag": "p",
			"text": "PHP 支持多種資料庫系統，如 MySQL、PostgreSQL、SQLite、Oracle 等。"
		},
		{
			"tag": "mark",
			"text": "豐富的函數庫"
		},
		{
			"tag": "p",
			"text": "PHP 提供了大量內建函數和擴展，能夠方便地處理文件、數據庫、圖像、會話等各種任務。"
		},
		{
			"tag": "h3",
			"text": "基本語法"
		},
		{
			"tag": "precode",
			"text": "<?php\necho 'Hello, World!<br>';\necho '現在的日期和時間是：' . date('Y-m-d H:i:s') . '<br>';\n?>\n"
		},
		{
			"tag": "p",
			"text": "代碼塊以 <?php 開頭，以 ?> 結尾。變量以 $ 符號開頭，並且不需要明確的聲明類型，類型是動態決定的。使用分號 ; 來結束每一條語句。"
		},
		{
			"tag": "h2",
			"text": "XAMPP"
		},
		{
			"tag": "a",
			"text": "https://www.apachefriends.org/zh_tw/download.html"
		},
		{
			"tag": "p",
			"text": "XAMPP 是一個開源的跨平台網頁伺服器解決方案，主要用於在本地環境中測試和開發網站。XAMPP 的主要目的是提供一個易於安裝和配置的本地伺服器環境，使得開發人員能夠在不需要連接到遠端伺服器的情況下，進行網站和應用程式的測試和開發。它包含了多個組件，主要功能包括："
		},
		{
			"tag": "b",
			"text": "1. Apache: 一個開放源碼的網頁伺服器，用來提供和管理網頁內容。"
		},
		{
			"tag": "b",
			"text": "2. MySQL/MariaDB: 資料庫管理系統，用於儲存和管理資料。MariaDB 是 MySQL 的一個分支，通常是 XAMPP 的預設資料庫系統。"
		},
		{
			"tag": "b",
			"text": "3. PHP: 一種伺服器端腳本語言，用於生成動態網頁內容。"
		},
		{
			"tag": "b",
			"text": "4. Perl: 另一種腳本語言，通常用於網頁開發和系統管理。"
		},
		{
			"tag": "b",
			"text": "5. phpMyAdmin: 一個用於管理 MySQL/MariaDB 資料庫的網頁介面工具，可以方便地進行資料庫的建立、管理和查詢。"
		},
		{
			"tag": "h2",
			"text": "代碼引入"
		},
		{
			"tag": "h3",
			"text": "include"
		},
		{
			"tag": "p",
			"text": "include 語句用來引入和執行指定的檔案。如果檔案不存在或發生錯誤，include 會發出警告（警告並不會終止程式的執行）。"
		},
		{
			"tag": "h3",
			"text": "require"
		},
		{
			"tag": "p",
			"text": "require 語句與 include 類似，但在檔案無法找到或發生錯誤時，require 會發出致命錯誤並終止程式的執行。"
		},
		{
			"tag": "h3",
			"text": "include_once"
		},
		{
			"tag": "p",
			"text": "include_once 會檢查指定的檔案是否已經被引入過，如果已經引入過則不會再次引入。這有助於避免重複包含同一個檔案。"
		},
		{
			"tag": "h3",
			"text": "require_once"
		},
		{
			"tag": "p",
			"text": "require_once 與 include_once 類似，會檢查檔案是否已經被引入過，但當檔案不存在或發生錯誤時，require_once 會發出致命錯誤並終止程式的執行。"
		},
		{
			"tag": "p",
			"text": "以下有一些引入的範例:"
		},
		{
			"tag": "h3",
			"text": "建立資料連線"
		},
		{
			"tag": "precode",
			"text": "<?php\n// 連動資料庫\n\n$servername = 'localhost'; // 資料庫伺服器地址，這裡使用的是本地伺服器\n$username = 'admin';       // 資料庫用戶名\n$password = '12345';       // 資料庫密碼\n$dbname = 'my_test_db';    // 要連接的資料庫名稱\n\n// 建立資料庫連線 Create connection\n$conn = new mysqli($servername, $username, $password, $dbname);\n\n// 檢查連線\nif ($conn->connect_error) {\n    die('連線失敗: ' . $conn->connect_error); // 如果連線失敗，輸出錯誤訊息並終止程式\n} else {\n    // echo '連線成功'; // 這行被註解掉了，如果取消註解，將會顯示「連線成功」\n}\n?>"
		},
		{
			"tag": "p",
			"text": "以上程式碼主要目的是驗證和建立與 MySQL 資料庫的連線，如果連線失敗則會顯示錯誤信息。為了讓各項開發的頁面皆能夠連線並操作資料庫，此程式碼會獨立為一個php檔讓其它頁面透過 require_once('[此檔案路徑.php]'); 去引入，即可在其它頁面操作資料庫，不須要每次連線資料庫都重打一次這串程式碼。以下的範例皆會把此段檔案名稱視為「db_connect.php」。"
		},
		{
			"tag": "h3",
			"text": "引入外來的程式碼"
		},
		{
			"tag": "precode",
			"text": "<head>\n    <title>Product-list</title>\n    <!-- Required meta tags -->\n    <meta charset='utf-8' />\n    <meta\n        name='viewport'\n        content='width=device-width, initial-scale=1, shrink-to-fit=no'\n    />\n\n    <!--引入外來檔案的語法避免重複撰寫-->\n    <?php include('../css.php');?>\n</head>"
		},
		{
			"tag": "h2",
			"text": "變數函式"
		},
		{
			"tag": "p",
			"text": "可以利用組合字串的方式將函式名組合出來，並利用組合出來的字串執行函式，如以下範例。"
		},
		{
			"tag": "precode",
			"text": "<h2>變數函式</h2>\n<?php \n\nfunction myFunc_1(){\n    echo 'in function 1<br>';\n}\n\nfunction myFunc_2(){\n    echo 'in function 2<br>';\n}\n\n$template = 'myFunc_';\n$func_array = [1,2];\n\n//function 可以透過將函式名稱字串組合來執行。\nforeach($func_array as $func){\n    $calling = $template.$func;\n    $calling();\n}"
		},
		{
			"tag": "h2",
			"text": "資料表的操作"
		},
		{
			"tag": "h3",
			"text": "CREATE TABLE | 建立資料表"
		},
		{
			"tag": "precode",
			"text": "<?php\n\n//連動重複的程式碼為了登入資料庫\nrequire_once('../db_connect.php');\n\n//建立資料表的字串\n$sql ='CREATE TABLE users (\nid INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,\nname VARCHAR(30) NOT NULL,\nphone VARCHAR(30),\nemail VARCHAR(30)\n)';\n\n\n//建立資料表並判定成功與否\nif ($conn->query($sql) === TRUE) {\n    echo '資料表 users 建立完成';\n} else {\n    echo '建立資料表錯誤: ' . $conn->error;\n}\n\n//關閉資料庫連結\n$conn->close();"
		},
		{
			"tag": "p",
			"text": "以上程式碼將SQL語法嵌入在$sql變數中(以下範例皆不贅述)，並利用$conn->$sql去執行SQL語法，若執行成功則會回傳TRUE好讓程式能依照建立成功或者失敗回饋訊息給開發者"
		},
		{
			"tag": "h3",
			"text": "DROP TABLE | 刪除資料表"
		},
		{
			"tag": "precode",
			"text": "$sql= 'DROP TABLE users;';"
		},
		{
			"tag": "p",
			"text": "以上程式碼會刪除叫做users的資料表。此程式碼會移除所有欄位的資料務必小心使用。"
		},
		{
			"tag": "h3",
			"text": "ALTER TABLE ... ADD COLUMN | 新增欄位"
		},
		{
			"tag": "p",
			"text": "ALTER TABLE ... ADD COLUMN 用於新增欄位並設定格式。"
		},
		{
			"tag": "precode",
			"text": "$sql = 'ALTER TABLE users ADD COLUMN age INT(3)';"
		},
		{
			"tag": "p",
			"text": "以上方程式碼為例，ALTER TABLE ... ADD 會新增一個名為age的欄位，其為整數(INT)型別，且只能容納3個字元。"
		},
		{
			"tag": "h3",
			"text": "ALTER TABLE ... CHANGE COLUMN | 改變欄位"
		},
		{
			"tag": "p",
			"text": "ALTER TABLE ... CHANGE COLUMN 用於修改現有資料表的結構之用。"
		},
		{
			"tag": "precode",
			"text": "$sql = 'ALTER TABLE users CHANGE COLUMN userName name VARCHAR(30);';"
		},
		{
			"tag": "p",
			"text": "以上方程式碼為例，CHANGE COLUMN 是用來修改資料表中的欄位名稱及其資料型別的子句。它告訴 SQL 引擎要變更的欄位名稱和資料型別。並將原為「userName」的欄位名稱改為「name」，並設定資料為一種最多可以儲存30個字元的VARCHAR(長字串)。"
		},
		{
			"tag": "h3",
			"text": "ALTER TABLE ... DROP | 刪除欄位"
		},
		{
			"tag": "p",
			"text": "ALTER TABLE ... DROP 用於刪除欄位之用。"
		},
		{
			"tag": "precode",
			"text": "$sql = 'ALTER TABLE users DROP COLUMN age;';"
		},
		{
			"tag": "p",
			"text": "以上方程式碼為例，會刪除叫做age的欄位。"
		},
		{
			"tag": "h3",
			"text": "INSERT INTO | 插入資料"
		},
		{
			"tag": "precode",
			"text": "$sql = 'INSERT INTO users (name, phone, email)\nVALUES ('John', '0900000222', 'John@example.com');';"
		},
		{
			"tag": "p",
			"text": "以上方程式碼為例，INSERT INTO 用來告訴 SQL 引擎，需要插入的資料欄位及對應的資料內容，切記欄位名稱及內容之順序位置必須對應不可錯位。"
		},
		{
			"tag": "b",
			"text": "插入很多筆資料"
		},
		{
			"tag": "precode",
			"text": "$now = date('Y-m-d H:i:s');\n\n$sql = 'INSERT INTO users (name, phone, email, created_at)\nVALUES ('May', '0900000000', 'may@example.com', '$now');';\n\n$sql .= 'INSERT INTO users (name, phone, email, created_at)\nVALUES ('Sue', '0900000000', 'sue@example.com', '$now');';\n\n$sql .= 'INSERT INTO users (name, phone, email, created_at)\nVALUES ('Lucy', '0900000000', 'lucy@example.com', '$now')';"
		},
		{
			"tag": "p",
			"text": "如果要插入很多筆資料，則可以利用以上組合字串的方法，先將SQL語法組合完成後再一次執行。"
		},
		{
			"tag": "h3",
			"text": "UPDATE ... WHERE | 條件更新資料"
		},
		{
			"tag": "precode",
			"text": "$sql = 'UPDATE users SET phone='0987654321', email='zrt3311@gmail.com' WHERE id=3';"
		},
		{
			"tag": "p",
			"text": "以上程式碼會將users資料表內id為3的資料的欄位資訊改掉。如果不用WHERE指令，則整個資料表都會被phone和email都會被改掉，非常危險。"
		},
		{
			"tag": "h3",
			"text": "DELETE FROM ... WHERE | 條件刪除資料"
		},
		{
			"tag": "precode",
			"text": "$sql = 'DELETE FROM users WHERE id = '13'';"
		},
		{
			"tag": "p",
			"text": "以上程式碼會將users資料表內id為13的資料整列刪除。如果不下WHERE指令則整個資料表內的資料皆會被刪除，但資料表還會留著。但還是要謹慎使用。"
		},
		{
			"tag": "h2",
			"text": "資料的選取"
		},
		{
			"tag": "h3",
			"text": "SELECT * FROM ... | 選取所有資料"
		},
		{
			"tag": "precode",
			"text": "//選取users資料表中的所有欄位\n$sql = 'SELECT * FROM users';\n\n//執行SQL語法並將結果用$result變數將物件接住\n$result = $conn->query($sql);\n\n//利用num_rows屬性將資料筆數傳給$userCount\n$userCount = $result->num_rows;\n\n//將變數字樣呈現在頁面\necho '<div> 共 $userCount 個使用者 </div>';"
		},
		{
			"tag": "h3",
			"text": "WHERE | 篩選"
		},
		{
			"tag": "p",
			"text": "WHERE子句用於過濾記錄。它允許您指定條件來選擇符合特定標準的記錄。通常放在FROM子句之後，格式為：WHERE 條件。合適的WHERE子句可以提高查詢效率，特別是與索引結合使用時。WHERE子句中還可以包含子查詢，進行更複雜的條件篩選。"
		},
		{
			"tag": "precode",
			"text": "SELECT * FROM customers WHERE age > 18;\nSELECT * FROM products WHERE price BETWEEN 10 AND 20;\nSELECT * FROM employees WHERE name LIKE 'J%';\nSELECT * FROM customers WHERE phone IS NULL;    //查詢沒有電話的顧客資料"
		},
		{
			"tag": "h3",
			"text": "LIKE | 模糊搜尋"
		},
		{
			"tag": "mark",
			"text": "搜尋方法"
		},
		{
			"tag": "precode",
			"text": "$sql = 'SELECT * FROM users WHERE account LIKE '%ja%'';"
		},
		{
			"tag": "p",
			"text": "以上語法能從users資料表中選取欄位account中含有「ja」字串的所有資料列。其中必須要用「%」來代表零個或多個任意字符，以達到模糊搜尋的效果。底線「_」則代表任意字符例如「_b%」則代表搜尋第二個字符為b的資料。"
		},
		{
			"tag": "precode",
			"text": "SELECT * FROM 表格名 WHERE 欄位名 LIKE '%100\\%%' ESCAPE '\\';"
		},
		{
			"tag": "p",
			"text": "順帶一提，如果我們要搜尋的字符中有「%」，則我們須要使用ESCAPE方法，如以上範例，會匹配所有包含「100%」的字串。"
		},
		{
			"tag": "h3",
			"text": "LIMIT | 取出指定的資料量"
		},
		{
			"tag": "mark",
			"text": "分頁方法"
		},
		{
			"tag": "p",
			"text": "LIMIT 子句用於限制查詢結果返回的行數。這對於控制查詢結果的數量、實現分頁功能非常有用。"
		},
		{
			"tag": "precode",
			"text": "$sql = 'SELECT * FROM users WHERE valid=1 LIMIT 20';"
		},
		{
			"tag": "p",
			"text": "以上語法能篩選出users資料表內valid=1的資料中的其中20筆資料。這是給予LIMIT一個參數的情況。"
		},
		{
			"tag": "precode",
			"text": "$sql = 'SELECT * FROM users WHERE valid=1 LIMIT 15 , 20';"
		},
		{
			"tag": "p",
			"text": "如果給予兩個參數，第一個參數代表跳過幾筆資料開始查詢，第二個參數則代表從符合條件的資料中抓出的資料筆數，以上述語法為例，此條件會從第16筆開始查詢，並篩選出users資料表內 valid=1 的資料中的其中20筆資料。"
		},
		{
			"tag": "precode",
			"text": "<?php \n\n$per_page = 4;  //代表每頁筆數\n$page = 1;    //代表當前頁碼\n$start_item = ($page-1)*$per_page;  //算出每個分頁第一筆資料的索引\n\nrequire_once('../db_connect.php');   //資料連線\n\n\n$sql = 'SELECT * FROM users WHERE valid=1 LIMIT $start_item, $per_page';\n\n$result = $conn->query($sql);\n$rows= $result->fetch_all(MYSQLI_ASSOC);\n\nvar_dump($rows);\n\n$conn->close();\n"
		},
		{
			"tag": "p",
			"text": "以上方範例為例，我們可以利用表單方式讓使用者傳入$perpage及$page變數來分別代表每頁顯示的筆數及當前頁碼，如此一來就可以實現分頁。"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "頁碼效果還未寫入..."
		},

		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "ORDER BY | 排序方式"
		},
		{
			"tag": "p",
			"text": "ORDER BY 子句用來對查詢結果進行排序。可以按一個或多個欄位排序，並且可以選擇升序（ASC）或降序（DESC）。一般預設情況下皆為升序排序。"
		},
		{
			"tag": "b",
			"text": "升序排序"
		},
		{
			"tag": "precode",
			"text": "SELECT * FROM 表格名 ORDER BY 欄位名;"
		},
		{
			"tag": "b",
			"text": "降序排序"
		},
		{
			"tag": "precode",
			"text": "SELECT * FROM 表格名 ORDER BY 欄位名 DESC;"
		},
		{
			"tag": "b",
			"text": "按多個欄位排序"
		},
		{
			"tag": "precode",
			"text": "SELECT * FROM 表格名 ORDER BY 欄位1 ASC, 欄位2 DESC;"
		},
		{
			"tag": "h2",
			"text": "軟刪除(soft delete)"
		},
		{
			"tag": "p",
			"text": "是一種在資料庫管理中處理刪除操作的技術，與傳統的硬刪除（Hard Delete） 相對。軟刪除的主要目的是避免物理刪除資料，而是將資料標記為已刪除，這樣可以在需要時恢復或查詢這些資料。這種方法對於需要保留歷史數據、審計或恢復功能的系統特別有用。"
		},
		{
			"tag": "precode",
			"text": "$sql = 'UPDATE users SET valid = 0 WHERE id = '9'';"
		},
		{
			"tag": "p",
			"text": "以上述方法為例，假設我們已經先給予users資料表一個valid欄位，來代表此資料的有效性，並預設每一欄位都是valid=1，以上語法為例可以把id為9的資料valid改為0，代表標記刪除，如果我們在介面上僅限撈取valid=1的資料，就能實現好像已經刪除的效果。優點是能讓管理員恢復數據、審視紀錄、防止意外刪除，缺點是數據會膨脹、增加查詢複雜性、需要額外維護。"
		},
		{
			"tag": "h2",
			"text": "網頁資料儲存"
		},
		{
			"tag": "p",
			"text": "常見的網頁儲存機制有三種，分別是cookie和session storage和local storage，他們有一些重要的區別，然而php無法直接操作local storage故在此筆記。"
		},
		{
			"tag": "h3",
			"text": "cookie"
		},
		{
			"tag": "p",
			"text": "cookie 是一種在 Web 瀏覽器中存儲用戶數據的技術。它們由伺服器發送到用戶的瀏覽器並存儲在客戶端，之後每次發送請求時，這些 cookie 都會隨著請求一起發送回伺服器。cookie 用於許多用途，如用戶身份驗證、跟蹤會話、保存用戶設置等。"
		},
		{
			"tag": "mark",
			"text": "存到伺服器"
		},
		{
			"tag": "mark",
			"text": "安全性低"
		},
		{
			"tag": "mark",
			"text": "可設定期效"
		},
		{
			"tag": "mark",
			"text": "容量小"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": "setcookie('cookie名', 'cookie值', 過期時間(秒), cookie路徑);\n\n\n//設定一個名為 'user' 的 cookie，值為 'John Doe'，有效期為 1 小時，並且整個網站路徑都能訪問。\nsetcookie('user', 'John Doe', time() + 3600, '/');\n\n//取得cookie\necho $_COOKIE['user'];"
		},
		{
			"tag": "h3",
			"text": "session storage"
		},
		{
			"tag": "p",
			"text": "sessionStorage 是 Web 存儲 API 的一部分，專門用於在單次瀏覽器會話中存儲數據。它與 localStorage 類似，但具有一些獨特的特點和用途。"
		},
		{
			"tag": "mark",
			"text": "存於客戶端"
		},
		{
			"tag": "mark",
			"text": "安全性高"
		},
		{
			"tag": "mark",
			"text": "期效短"
		},
		{
			"tag": "mark",
			"text": "容量大"
		},
		{
			"tag": "p",
			"text": "Session Storage有一些特點，其只能由客戶端JavaScript設置、數據不會發送到服務器、容量限制通常更大,約5MB、數據只在當前瀏覽器會話期間有效,關閉標籤頁後自動清除、常用於存儲暫時性的數據,如表單內容。"
		},
		{
			"tag": "p",
			"text": "在 PHP 中，session 是一種用來在不同的頁面請求之間儲存用戶數據的方式。這裡是如何操作 PHP 的 session："
		},
		{
			"tag": "precode",
			"text": "//使用前必須先啟動\nsession_start();\n\n/*\n利用全局變量$_SESSION儲存資料\n其中key和value是自訂義的\n*/\n$_SESSION['key'] = 'value';\n\n//讀取值的方法\n$value = $_SESSION['key'];\n\n//刪除特定session的方法\nunset($_SESSION['key']);\n\n//清空所有session的方法\nsession_unset();\n\n//完全銷毀session的方法\nsession_destroy();\n\n"
		},
		{
			"tag": "h2",
			"text": "暫停/終止程式"
		},
		{
			"tag": "h3",
			"text": "終止程式"
		},
		{
			"tag": "p",
			"text": "PHP 中的 exit() 和 die() 實際上是同一個函數的兩個別名，它們的功能完全相同。這兩個函數用於立即終止當前腳本的執行。選擇使用哪一個主要是個人偏好問題。一些開發者認為在錯誤處理時使用 die() 更形象，而在正常的腳本終止時使用 exit() 更合適。"
		},
		{
			"tag": "precode",
			"text": "if (!file_exists('important_file.php')) {\n    die('重要文件不存在，腳本無法繼續執行');\n}\n\n// 或者\n\nif ($error_condition) {\n    exit('發生錯誤：{$error_message}');\n}"
		},
		{
			"tag": "h3",
			"text": "暫停程式"
		},
		{
			"tag": "p",
			"text": "php中使用sleep()並傳入秒數，可以暫停程式的執行，以下方範例，此迴圈每跑一次會暫停一秒鐘直到跑完，頁面才會被更新。"
		},
		{
			"tag": "precode",
			"text": "for($i=0 ; $i<5 ; $i++){\n    echo date('H:i:s').'<br>';\n    sleep(1);   //暫停一秒鐘(同步函式:所以會等跑完才更新結果)\n}"
		},
		{
			"tag": "h2",
			"text": "時間函式"
		},
		{
			"tag": "h3",
			"text": "date()"
		},
		{
			"tag": "p",
			"text": "利用date()函式並傳入格式我們可以取得當前時間，若在輸出date之前先利用ini_set()更改時區，則可以印出當前該時區的時間如以下範例。"
		},
		{
			"tag": "precode",
			"text": "<h2>Current location Time</h2>\n<?php\n//在頁面上印出指定格式的現在時間\necho date('H:i:s');\n?>\n\n<h2>Tokyo</h2>\n<?php\n//將時區改為東京(僅限此程式)\nini_set('date.timezone','Asia/Tokyo');\necho date('H:i:s');\n?>\n\n<h2>London</h2>\n<?php\n//將時區改為倫敦(僅限此程式)\nini_set('date.timezone','Europe/London');\necho date('H:i:s');\n?>"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		}
	],
	[
		{ "title": "Node.js🚧" },
		{
			"tag": "h2",
			"text": "介紹"
		},
		{
			"tag": "p",
			"text": "Node.js 是一個開放原始碼且跨平台的 JavaScript 執行環境。它使用 Google Chrome 的核心 V8 JavaScript 引擎，在瀏覽器之外運行，這使得 Node.js 具有非常高的性能。\n\nNode.js 應用程式在單一進程中運行，而不是為每個請求創建新的執行緒。當 Node.js 執行 I/O 操作時，例如從網路讀取、訪問數據庫或文件系統時，Node.js 不會阻塞執行緒並浪費 CPU 週期等待，而是在收到回應後恢復操作。\n\n這使得 Node.js 能夠在單個服務器上處理成千上萬個並行連接，而無需引入管理線程並發的負擔，這可能是錯誤的重要來源。Node.js 具有獨特的優勢，因為數百萬為瀏覽器編寫 JavaScript 的前端開發人員現在能夠撰寫除客戶端代碼外的服務器端代碼，而無需學習完全不同的語言。\n\n在 Node.js 中，可以毫無問題地使用新的 ECMAScript 標準，因為您無需等待所有用戶更新其瀏覽器 - 您可以通過更改 Node.js 版本來決定使用哪個 ECMAScript 版本，您還可以通過運行帶有標誌的 Node.js 來啟用特定的實驗性功能。\n\n一個示例 Node.js 應用程式 Node.js 最常見的示例 Hello World 是一個 Web 服務器。要運行此片段，請將其保存為 server.js 文件，並在終端中運行 node server.js。此代碼首先包含了 Node.js 的 http 模塊。Node.js 擁有一個極好的 標準程式庫 ，包括對網絡的一流支援。http 的 createServer() 方法創建一個新的 HTTP 伺服器並返回它。伺服器被設置為在指定的端口和主機名上監聽。當伺服器準備就緒時，回調函數被調用，這個案例中通知我們伺服器正在運行。每當收到一個新的請求時，將調用 request 事件 ，提供兩個對象：請求（一個 http.IncomingMessage 對象）和回應（一個 http.ServerResponse 對象）。這兩個對象對於處理 HTTP 調用是必不可少的。"
		},
		{
			"tag": "h2",
			"text": "動態網頁與靜態網頁"
		},
		{
			"tag": "h3",
			"text": "靜態網頁 (static website)"
		},
		{
			"tag": "p",
			"text": "靜態網站(static websites)由使用HTML、CSS和JavaScript創建的網頁組成。靜態網站上的每個頁面都存儲為單個HTML文件,該文件完全按原樣從伺服器直接傳送到用戶端。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "內容固定擴展性低,每次訪問顯示相同的內容"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "通常由HTML、CSS等編寫"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "無需後端處理,直接從伺服器傳送到瀏覽器"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "加載,創建部署速度快,適合簡單的資訊展示"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "管理效率低,不適合需要頻繁更新或個人化的網站"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "安全性高"
		},
		{
			"tag": "img",
			"text": "./img/node/01_靜態網頁.jpg"
		},
		{
			"tag": "h3",
			"text": "動態網頁"
		},
		{
			"tag": "p",
			"text": "動態網頁是一種能夠根據用戶需求、時間、位置等因素實時生成內容的網頁。與靜態網頁不同,動態網頁的內容不是預先製作好的,而是在用戶訪問時即時創建的。這種靈活性使得網站能夠提供個性化的用戶體驗,並能夠處理複雜的業務邏輯。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "內容可變擴展性高,根據用戶操作或其他因素動態生成"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "使用PHP、Python等後端語言,以及JavaScript等前端技術"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "需要伺服器端處理,可能涉及資料庫操作,設計上更加複雜"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "能提供互動性和個人化體驗"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "適合電子商務、社交媒體等複雜應用"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "性能較靜態網頁差"
		},
		{
			"tag": "img",
			"text": "./img/node/02_動態網頁.jpg"
		},
		{
			"tag": "h2",
			"text": "Module Wrapper"
		},
		{
			"tag": "p",
			"text": "Module Wrapper（模組包裝器）是一個在JavaScript中常見的概念,特別是在處理模組化程式碼時。Module Wrapper是一個函數,通常是一個立即調用的函數表達式（IIFE, Immediately Invoked Function Expression）,用來封裝一個模組的代碼。它主要用於創建私有作用域,並控制模組內部變數和函數的可見性。目的在於創建私有作用域、避免全局命名空間污染、控制哪些變數和函數可以被外部訪問。其工作原理為將整個模組的代碼包裝在一個函數中且這個函數立即被執行，通過返回一個物件或函數來暴露公共API。"
		},
		{
			"tag": "p",
			"text": "在執行module程式碼前，node.js將使用函數包裝器來包裝它，如下。"
		},
		{
			"tag": "precode",
			"text": "(function(exports, require, module,__filename,__dirname){\n// Module code actually lives in here\n});"
		},
		{
			"tag": "p",
			"text": "假設現在有兩個文件，在同一個目錄中:"
		},
		{
			"tag": "precode",
			"text": "//第一個文件 app1.js\nrequire(./app2);"
		},
		{
			"tag": "precode",
			"text": "//第二個文件 app2.js\nlet name = 10;\nconsol.log('name');"
		},
		{
			"tag": "p",
			"text": "終端機輸入「node app1.js」執行時可以得到app2.js執行的結果。app2.js在app1.js中會被包成一個function scope，所以就算app1.js中又再定義了name變數，也不會互相影響。"
		},
		{
			"tag": "h3",
			"text": "module wrapper 的好處"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "讓使用這個module的文件中，所使用的全域變數不會被module內部的變數所影響。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "讓module內部所定義的全域變數變成function scope"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "讓module內部的JS文件可以使用某些實用的變數,例如module、exports可以用來輸出本身module,而require可以用來獲得其他module。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "__filename,__dirname等等變數在開發上變得方便,因為兩者包含module的絕對路徑名稱與資料夾路徑。"
		},
		{
			"tag": "h2",
			"text": "ES模組 與 CommonJS🚧"
		},
		{
			"tag": "p",
			"text": "此為兩種不同的模組系統，它們各有特點並且在 Node.js 中共存。以目前趨勢建議使用ES模組。"
		},
		{
			"tag": "mark",
			"text": "兩種模組的差別 參考文件"
		},
		{
			"tag": "a",
			"text": "https://hackmd.io/@SkT7-27LSWWQi5G2DJBLkw/ryQ1w-rBi"
		},
		{
			"tag": "h2",
			"text": "檔案處理🚧"
		},
		{
			"tag": "h2",
			"text": "Express.js🚧"
		},
		{
			"tag": "p",
			"text": "Express.js 是一個基於 Node.js 的輕量級、靈活且功能豐富的 Web 應用框架。它提供了一組強大的工具和功能，幫助開發者快速構建網頁應用、API 或 Web 服務，並處理各種 HTTP 請求。"
		},
		{
			"tag": "h3",
			"text": "安裝方式"
		},
		{
			"tag": "precode",
			"text": "npm install express"
		},
		{
			"tag": "p",
			"text": "Express.js是針對Node.js的應用框架，建構在Node.js之上，其主要目的是為了對Node.js架設的後端伺服器簡化程式碼，並且增加開發速度(叫做Express的原由)。要使用Express，我們只需要在work directory中做以上指令↑"
		},

		{
			"tag": "precode",
			"text": "const express = require('express');\nconst app = express();\nconst port = 3000;\n\n// 基本路由\napp.get('/', (req, res) => {\n  res.send('Hello World!');\n});\n\n// 啟動伺服器\napp.listen(port, () => {\n  console.log(`Server running at http://localhost:${port}`);\n});\n"
		},
		{
			"tag": "h2",
			"text": "中介函式 middleware🚧"
		},
		{
			"tag": "h2",
			"text": "跨資源共享 CORS🚧"
		},
		{
			"tag": "h2",
			"text": "JSON Web Tokens🚧"
		},
		{
			"tag": "h2",
			"text": "WebSocket🚧"
		}
	],
	[{ "title": "Restful API🚧" }],
	[
		{ "title": "TypeScript🚧" },
		{
			"tag": "h2",
			"text": "介紹"
		},
		{
			"tag": "img",
			"text": "img/tsc/01_tsc封面.png"
		},
		{
			"tag": "p",
			"text": "TypeScript 是一種由 Microsoft 開發的開源程式語言，它是 JavaScript 的一個超集。這意味著，任何合法的 JavaScript 程式碼都是合法的 TypeScript 程式碼。TypeScript 在 JavaScript 的基礎上添加了靜態型別系統，這使得開發者可以在編寫程式碼時就捕獲潛在的錯誤，提高程式碼的可讀性、可維護性和可靠性。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "靜態型別系統：在編寫程式碼時就明確地指定變數、函數參數和返回值的型別，有助於防止運行時錯誤。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "介面（Interface）： 定義物件的結構，確保物件具有特定的屬性和方法。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "類別（Class）： 支持面向物件程式設計，可以創建類別、繼承和多型。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "模組（Module）： 將程式碼分隔成不同的模組，提高程式碼的組織性和可重用性。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "泛型（Generic）： 創建可重用的程式碼，適用於不同型別的資料。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "裝飾器（Decorator）： 為類別、方法、屬性等添加額外的元數據。"
		},
		{
			"tag": "h3",
			"text": "TypeScript的優勢"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "大型應用程式開發： TypeScript 的靜態型別系統和面向物件特性非常適合開發大型複雜的應用程式。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "前端開發： TypeScript 可以與流行的前端框架（如 Angular、React、Vue）無縫集成，提高前端開發的效率和質量。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "後端開發： TypeScript 可以用於 Node.js 後端開發，提供強大的型別檢查和編譯功能。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "混合應用開發： TypeScript 可以用於開發混合應用程式，如 React Native。"
		},
		{
			"tag": "h2",
			"text": "開發環境的建立🚧"
		},
		{
			"tag": "p",
			"text": "後續再新..."
		},
		{
			"tag": "h2",
			"text": "類型的宣告(與類型章節再合併整理)"
		},
		{
			"tag": "h3",
			"text": "型別註記"
		},
		{
			"tag": "p",
			"text": "TypeScript 允許我們為變數指定型別，這有助於編譯器在編譯期間檢查型別是否匹配，避免運行時錯誤。"
		},
		{
			"tag": "precode",
			"text": "let age: number = 30; // 數字型別\nlet name: string = 'Alice'; // 字串型別\nlet isStudent: boolean = true; // 布林型別"
		},
		{
			"tag": "h3",
			"text": "型別推論"
		},
		{
			"tag": "p",
			"text": "TypeScript 有強大的型別推論能力，在很多情況下，我們不需要顯式地指定型別，編譯器可以根據初始化的值自動推斷出變數的型別。"
		},
		{
			"tag": "precode",
			"text": "let message = 'Hello'; // 型別為 string\nlet count = 10; // 型別為 number"
		},
		{
			"tag": "h3",
			"text": "任意型別"
		},
		{
			"tag": "p",
			"class": "yellow",
			"text": "如果我們不確定變數的型別，可以使用 any 型別，但這會關閉型別檢查，因此建議盡量避免使用。"
		},
		{
			"tag": "precode",
			"text": "let value: any = 'Hello';\nvalue = 10;"
		},
		{
			"tag": "h3",
			"text": "介面 (interface)"
		},
		{
			"tag": "p",
			"text": "介面定義了物件的結構，可以確保物件具有特定的屬性和方法。"
		},
		{
			"tag": "precode",
			"text": "interface Person {\n    name: string;\n    age: number;\n}\n\nlet person: Person = {\n    name: 'Bob',\n    age: 25\n};"
		},
		{
			"tag": "h3",
			"text": "函數的型別宣告"
		},
		{
			"tag": "p",
			"text": "在 TypeScript 中，函數不僅可以有參數，還可以明確地指定參數的型別和返回值的型別。這種做法稱為 函數型別宣告，它能大幅提升程式碼的可讀性，並讓 TypeScript 編譯器能更好地進行型別檢查。"
		},
		{
			"tag": "precode",
			"text": "// 函式型別的定義方式\nlet myFunction: (param1: type1, param2: type2) => returnType;"
		},
		{
			"tag": "b",
			"text": "範例"
		},
		{
			"tag": "precode",
			"text": "function sum(a:number, b:number):number{\n    return a+b\n}\n\nlet result = sum(3, 5);\nconsole.log(result); // 输出：8"
		},
		{
			"tag": "p",
			"text": "這個範例展示了 TypeScript 如何使用型別來定義函數，提高程式碼的可靠性和可讀性。通過指定參數和返回值的型別，可以讓編譯器在編譯階段就發現潛在的錯誤，避免在運行時出現問題。"
		},
		{
			"tag": "h3",
			"text": "字面量的類型宣告"
		},
		{
			"tag": "p",
			"text": "字面量類型 是一種非常特殊的型別，它將一個具體的值（字面量）本身作為一個型別。這意味著，被賦予這個型別的變數只能接受這個特定的值，不能是其他任何值。"
		},
		{
			"tag": "b",
			"text": "使用字面量的原因?"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "提高程式碼的精確性： 能夠更精確地描述變數的值的範圍，減少潛在的錯誤。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "增強型別檢查： 編譯器可以更嚴格地檢查變數的賦值是否正確。"
		},
		{
			"tag": "p",
			"class": "nli",
			"text": "改善程式碼可讀性： 明確地表示變數的可能值，讓程式碼更容易理解。"
		},
		{
			"tag": "precode",
			"text": "// 字符串字面量\nlet direction: 'up' | 'down' | 'left' | 'right' = 'up';\n// 數字字面量\nlet statusCode: 200 | 404 | 500 = 200;\n// 布林字面量\nlet isLoading: true | false = false;"
		},
		{
			"tag": "h2",
			"text": "類型"
		},
		{
			"tag": "h3",
			"text": "布林值(boolean)"
		},
		{
			"tag": "p",
			"text": "表示真或假。"
		},
		{
			"tag": "precode",
			"text": "let isDone: boolean = false;"
		},
		{
			"tag": "h3",
			"text": "數字 (number)"
		},
		{
			"tag": "p",
			"text": "表示整數或浮點數。"
		},
		{
			"tag": "precode",
			"text": "let decimal: number = 6; \nlet hex: number = 0xf00d;"
		},
		{
			"tag": "h3",
			"text": "字串 (string)"
		},
		{
			"tag": "p",
			"text": "表示文本。"
		},
		{
			"tag": "precode",
			"text": "let color: string = 'blue'; \nlet fullName: string =Bob Bobbington;"
		},
		{
			"tag": "h3",
			"text": "任意型別 (any)"
		},
		{
			"tag": "p",
			"text": "表示任意型別，但不建議使用。"
		},
		{
			"tag": "precode",
			"text": "let notSure: any = 4;"
		},
		{
			"tag": "h3",
			"text": "空值 (null 和 undefined)"
		},
		{
			"tag": "p",
			"text": "表示變數沒有值。"
		},
		{
			"tag": "precode",
			"text": "let u: undefined = undefined; \nlet n: null = null;"
		},
		{
			"tag": "h3",
			"text": "陣列 (array)"
		},
		{
			"tag": "p",
			"text": "一組有序的值。"
		},
		{
			"tag": "precode",
			"text": "let list: number[] = [1, 2, 3];"
		},
		{
			"tag": "h3",
			"text": "元組 (tuple)"
		},
		{
			"tag": "p",
			"text": "一種特殊的陣列，其元素的型別和數量都是固定的。"
		},
		{
			"tag": "precode",
			"text": "let x: [string, number]; \nx = ['hello', 10];"
		},
		{
			"tag": "h3",
			"text": "列舉 (enum)"
		},
		{
			"tag": "p",
			"text": "一組命名常量。"
		},
		{
			"tag": "precode",
			"text": "enum Color {Red, Green, Blue}\nlet c: Color = Color.Green;"
		},
		{
			"tag": "h3",
			"text": "介面 (interface)"
		},
		{
			"tag": "p",
			"text": "定義物件的結構。如前節所提到的。"
		},
		{
			"tag": "precode",
			"text": "interface Person {\n    firstName: string;\n    lastName: string;\n}\n\nlet user: Person = {\n    firstName: 'Jane',\n    lastName: 'User'\n};"
		},
		{
			"tag": "h3",
			"text": "函數型別"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "void"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "never"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "null 和 undefined"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "聯合型別 (union)"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "交集型別 (intersection)"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "字面量型別"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "型別別名"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "泛型"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "precode",
			"text": ""
		},
		{
			"tag": "h3",
			"text": "索引型別"
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		},
		{
			"tag": "p",
			"text": ""
		}
	]
]