WEEK3 – DAY3 – 實作順利? - Enjoylyingflat的網站

我真的很想開始實作，畢竟翹課仔有一堆實作與課程進度要補，但總覺得實作規劃好像都有設想到啊，但心裡就是覺得不踏實，總覺得少了什麼，我們也只有前端的部分，技術也就哪些，照理說不應該太複雜才對。

但還是覺得怪，所以我又重新思考一次，並重新略過一次實作過程，找出不對勁的地方，但好像沒發現問題，希望接下來順利吧!

今天花了很多時間在心智圖上，坊間的各種軟體都試過一遍，好不容易找到一款喜歡的，花了很多時間製作，結果輸出才發現有浮水印跟限制，明目張膽的表示，就是要錢。

Javascript

內建物件

Browser Object Model (BOM)：連結
Document Object Model (DOM)：連結
JavaScript 和 HTML DOM 參考：連結

JavaScript 程式嵌入方式

嵌入方式	範例	說明
HTML 顯示文字	`<h1>蘋果</h1>`	在 HTML 標籤內直接加入內容。
JavaScript 動態加入文字	`document.write("皮卡丘");`	使用 `document.write`。
外部引用 JavaScript 檔案	`<script src="./index.js"></script>`	引用外部 JavaScript 檔案。
注意	`<script src="./index.js">...</script>`	此方法無法撰寫 JavaScript。

Chrome 開發者工具

練習指令與效果：連結

指令	功能描述
`console.log()`	顯示一般訊息。
`console.error()`	顯示錯誤訊息。
`console.warn()`	顯示警告訊息。
`console.clear()`	清除 console 畫面。
`console.time()` / `.timeEnd()`	計算程式執行時間。
`console.group()` / `.groupEnd()`	群組顯示訊息。
`console.groupCollapsed()`	預設折疊的群組訊息。

DOM 操作範例

範例指令	功能
`document`	查看整個 HTML 文件物件。
`document.head` / `.body`	獲取 `<head>` 和 `<body>` 區塊。
`document.getElementsByTagName()`	選取特定標籤集合。
`document.getElementById()`	選取特定 ID 的元素。
`innerText`	修改 HTML 元素的文字內容。

範例：修改文字

document.getElementById('demo').innerText = "皮卡丘";

加入事件處理

功能描述	範例
直接加入事件	`<button onclick="console.log('皮卡丘');">按鈕</button>`
呼叫函式執行	`<button onclick="apple()">按鈕</button>`
定義函式	`function apple() { console.log("胖丁"); }`

JavaScript 基本觀念

區分大小寫

var x = 5; 和 var X = 5; 是不同的變數名稱。
範例： var y = 5; console.log(y); // 5 // console.log(Y); // 錯誤: Y is not defined

保留字

無法使用 JavaScript 保留字（如 if, var, let）作為變數名稱。
範例： // var if = 10; // 錯誤: Unexpected token 'if'

變數宣告方式

宣告方式	特性	範例
`var`	作用域為 function 或全域，可重複宣告。	`var x = 10;`
`let`	作用域為 block，不可重複宣告，值可更改。	`let y = 20;`
`const`	作用域為 block，宣告時需初始化，值不可更改。	`const z = 30;`

範例：

var x = 10;
let y = 20;
const z = 30;

console.log(x); // 10
console.log(y); // 20
console.log(z); // 30
// z = 99; // 錯誤: Assignment to constant variable

作用域與 Hoisting

作用域範例：
- var 宣告的變數可在區塊外訪問。
- let 宣告的變數僅能在區塊內訪問。
if (true) { var cat = 100; let dog = 200; } console.log(cat); // 100 // console.log(dog); // 錯誤: dog is not defined
Hoisting（提升）
- JavaScript 會將 var 宣告提升至程式碼的頂部，但不會提升賦值。
console.log(x); // undefined var x = 5;

字串與操作

方法	功能描述	範例
`.length`	獲取字串長度。	`"APPLE".length // 5`
`.indexOf()`	找到子字串首次出現的位置，若無則回傳 -1。	`"APPLE".indexOf("P") // 1`
`.lastIndexOf()`	找到子字串最後一次出現的位置。	`"APPLE".lastIndexOf("P") // 2`
`.split()`	分割字串為陣列。	`"a,b,c".split(",") // ['a', 'b', 'c']`
`.padStart()`	在字串前補上特定字元直到指定長度。	`"123".padStart(5, "0") // 00123`
`.substring()`	擷取指定範圍的子字串。	`"012345".substring(0, 3) // '012'`

範例：

var str = "APPLE";
console.log(str.length);            // 5
console.log(str.indexOf("P"));      // 1
console.log(str.lastIndexOf("P"));  // 2
console.log("123".padStart(5, "0")); // 00123

Template Literals

使用反引號 (“) 表示，允許插入變數。
範例： var store = "麥當勞"; var food = "薯條"; console.log(`您的餐點是${store}的${food}`); // 您的餐點是麥當勞的薯條

錯誤訊息

錯誤類型	說明
`is not defined`	使用了尚未宣告的變數。
`Cannot access '變數名稱' before initialization`	在初始化前使用 `let` 或 `const` 宣告的變數。
`undefined`	已宣告但未賦值的變數預設值。