enjoylyingflat的部落格

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

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

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

Javascript

內建物件

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

JavaScript 程式嵌入方式

Chrome 開發者工具

練習指令與效果：連結

DOM 操作範例

範例：修改文字

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

加入事件處理

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

1. 作用域範例：

   • var 宣告的變數可在區塊外訪問。
   • let 宣告的變數僅能在區塊內訪問。

   if (true) {
       var cat = 100;
       let dog = 200;
   }
   console.log(cat); // 100
   // console.log(dog); // 錯誤: dog is not defined
   

2. Hoisting（提升）

   • JavaScript 會將 var 宣告提升至程式碼的頂部，但不會提升賦值。

   console.log(x); // undefined
   var x = 5;
   

字串與操作

範例：

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}`); // 您的餐點是麥當勞的薯條
  

錯誤訊息