Hi，大家好，我是Tony，是一個對於JavaScript有些概念的新手。

昨天的學習內容：[Day 29] JavaScript 實作練習- 製作碼表
https://ithelp.ithome.com.tw/articles/10348004

今天是鐵人發文挑戰的最後一天，
來跟大家總結一下這30天學習的內容總結。

一開始對於任何網路前端的概念完全不懂，
就問ChatGPT幫我整理出30天的JavaScript教程，
後來發現根本不太可靠，學習難度有點太高，不可行。

接下來就是在Youtube上面找到了彭彭老師的教學系列影片，
真的非常感謝彭彭老師的教學影片。
雖然他可能不知道自己偶然間收了我這一個學生，
但他真的是我在前端工程領域的引路人，真的感謝。

回顧這30天的學習內容

其中學習的內容包括：

• 了解HTML是什麼，以及開發工具Visual studio Code
  知道前端工程主要有HTML(房子結構)、CSS(房屋裝潢)、JavaScript(屋內功能)的概念。

• 資料的形態：
  數字(123可以數學運算)、
  字串("代表文字"與'代表文字')、
  布林值(特殊關鍵字，表達正確true與錯誤false，判斷式會用到)
  空值(特殊關鍵字，代表 空、沒有 的概念，undefined、null)
  物件(很多內容，後面會提到)

• 變數，可以儲存資料的空間，
  宣告變數：let 變數的名稱=資料，let x=5

• 常數，不會改變的變數
  宣告常數：const 常數名稱=資料，const hello="你好"

• 運算符號，可以對資料進行某種操作的符號。
  算術運算：+、-、*、/、%(模運算：取餘數)...
  指定運算(把資料放入變數)：=、+=、-=、%=...
  比較運算(比較資料大小、得到布林值)：>、<、==、>=、
  單元運算(對單一資料的運算)：++、--、!(布林值反運算)...
  邏輯運算：&&(且and)、||(或or)...

• 流程控制：就是安排程式之間互相作用的動作。

• 程式區塊：用{}大括號包起來的內容。

• if判斷式：根據布林值決定，是否要執行程式區塊

if(布林值){
    如果布林值為true，執行這個程式區塊
｝

if(true){
    console.log("我是對的");
}  

• if else判斷式：

if(布林值){
    如果布林值為true，執行這個程式區塊
｝else{
    如果布林值為false，執行這個程式區塊
｝

if(money<=100000){
    console.log("領錢成功");      
}else｛
    console.log("失敗，領取金額需小於十萬元");
}

• if...else if...else判斷式

if(布林值){
    如果布林值為true，執行這個程式區塊1
｝else if(布林值){
    如果布林值為true，執行這個程式區塊2
｝else if(布林值){
    如果布林值為true，執行這個程式區塊3
｝else{
    如果布林值為false，執行這個程式區塊4
｝

if(money<100){
    console.log("小於100元不能領出");
}else if(money<=100000){
    console.log("領錢成功");      
}else｛
    console.log("失敗，領取金額需小於十萬元")
}

• 迴圈：重複執行程式區塊
• while迴圈：

while(布林值){
    如果布林值為true，執行這個程式區塊，
    執行完畢後，跳到迴圈開頭，重新執行。
    直到布林值為false，跳出迴圈。
}

while(n<3){
    console.log(n);
    n++;
}

• for迴圈

for(初始化程式;布林值;每次迴圈時執行){
    如果布林值為true，執行這個程式區塊，
    執行完畢後，跳到迴圈開頭，重新執行。
    直到布林值為false，跳出迴圈。
}

for(let n=0;n<3;n++){
    console.log(n);
}

• 迴圈指令：只能在迴圈中使用的指令
  break：強迫中斷迴圈
  continue：強迫跳到迴圈開頭，忽略下面的程式，進入下一圈。

• 函式：包裝好的程式區塊
  建立函式：

function 函式名稱(參數名稱列表){
    函式內部的程式區塊
}

let test=function(msg){
    console.log(msg);
}

呼叫函式：

函式名稱(參數名稱列表);

test();

• 參數：類似函式專用的變數，寫在函式的()小括號中，只能在函式{}大括號中使用。
• 函式回傳值 return：寫在函式的最後，函式結束後會帶出回傳值，提供其他程式做利用。

function 函式名稱(參數名稱列表){
    函式內部的程式區塊
    return 回傳值;
}

• 物件：用來封裝其他資料的容器
• 建立物件：

//方法1 new Object()
let obj=new Object(); //直接在變數中放入物件

//方法2 使用JSON語法建立物件(用{}包住物件內的資料}
let obj1={成員名稱1:資料,成員名稱2:資料,...}

let obj2={
    x:3,
    y:4,
    show:function(){
        console.log(this.x,this.y);
    }
};

• 物件成員種類：
  非函式資料：屬性
  函式資料：方法
• 把資料放入物件：物件名稱.屬性名稱=資料，物件名稱.方法名稱=函式

    let obj=new Object();
    obj.x=3;
    obj.y=4;
    obj.show=function(){
        console.log("Hello");
    };

• 使用物件

console.log(obj); //印出整個物件
console.log(obj.x+obj.y);  //使用物件屬性做運算
obj.show(); //呼叫函式，在後面放上小括號()

• 物件的方法中，使用this關鍵字
  this在這裡就代表整個物件的意思。

let obj=new Object();
obj.x=3;
obj.y=4;
obj.show=function(){
    console.log("this.x,this.y"); //引用這個物件中的x與y
};

• 陣列物件：按照順序存放其他資料的容器，用[]中括號表示。

new Array(); //建立空白陣列
[]; //用中括號建立空白陣列
let arr=[]; //將物件放入變數中

• 把資料放入陣列：使用陣列的push方法，語法：陣列.push(資料)

let arr=[]; //將物件放入變數中
arr.push(3); //將資料3推進編號0
arr.push(4); //將資料4推進編號1

• 使用陣列資料：再要使用的地方寫入 陣列名稱[資料順序]

//接續上方範例
console.log(arr[0]); //印出3
console.log(arr[1]); //印出4

• 取得陣列長度：陣列名稱.length

//接續上方範例
console.log(arr.length); //印出2

• HTML DOM：網頁的物件標籤有不同分層，window、document、screen...
• 操作標籤物件：
  第一步：標籤加上id屬性
  範例：

<div id="content">這是一段文字</div>
<span id="keyword">這是一段文字<span>

第二步：在JavaScript程式中，
利用document.querySelector()方法，取得標籤物件。
範例：

let divElement=document.querySelector("#content")
let spanElement=document.querySelector("#keyword")

結合起來，取得標籤物件的操作如下：

<div id="content">這是一段文字</div>
<script>
let divElement=document.querySelector("#content")
</script>

• 事件：網頁上發生了一件事情
• 事件處理：事件發生了，就是要去執行相對應的程式來處理，
• 事件種類
  click 滑鼠點擊
  mouseover 滑鼠移入
  mouseout 滑鼠移出
  mousedown 滑鼠按住(按下滑鼠不放開)
  mouseup 滑鼠放開
• 事件處理的三大關鍵

1. 在哪個標籤上發生事件？
2. 事件的種類是什麼？
3. 事件對應的處理函式是什麼？

• 註冊事件處理函式：在div、button標籤中，寫入 事件名稱="程式碼"

<div 事件名稱="程式碼">我是標籤內文</div>
<button 事件名稱="程式碼">我是標籤內文</button>

<div onclick="change();">點擊</div>
<script>
    function change(){
        document.body.innerHTML="Hello";
    }
</script>

• HTTP 通訊協定
  超文本傳輸協定（HyperText Transfer Protocol)
  意思就是，透過網址，前端可以連線取得後端的資源。

• 使用fetch函式網路連線fetch函式，fetch函式是一種JavaScript內建的連線函式。

fetch(網址).then(function(回應物件){
    console.log(回應物件)
})

//有兩種取得資料回應的方式
//方式1，純文字資料回應
fetch(網址).then(function(response){
    return response.text();
});.then(functiondata){
    console.log(data); //純文字資料
});

//方法2，JSON格式的資料回應
fetch(網址).then(function(response){
    return response.json();
});.then(function(data){
    console.log(data);  //JSON格式資料
});

• 箭頭函式：函式的另一種寫法，省去function關鍵字，用**=>**取代，

let 函式名稱=(函式的參數列表)=>{
    函式區塊內的程式碼
    return 回傳值;
};

let add=(n1,n2)=>{
    let result=n1+n2;
    return result;
};

• 簡化後的箭頭函式：函式本體只有回傳值敘述，沒有其他指令時可以簡化

//簡化後的箭頭函式 (用小括號)
let 函式名稱=(函式的參數列表)=>(回傳值);

let add=(n1+n2)=>(n1+n2);

• 解構賦值：兩個動作經常會放在一起操作
  解構：把陣列或物件的資料拆開
  賦值：將拆開的資料分別放入各別的變數

• 陣列的解構賦值：用中括號[]

let arr=[3,4,5];
let [d1,d2,d3]=arr;

• 物件的解構賦值：用大括號{}

let obj={x:3,y:4};
let {x,y}=obj;

• 其餘運算符號：語法...三個點，用在解構賦值中，將剩餘的資料包在一起

let arr=[3,4,5,6,2];
let [d1,d2,...data]=arr;
console.log(data); //會印出陣列[5,6,2]

• 模組：把單一程式切分成為多個檔案後，每個程式檔案，就稱之為模組。
  需要在HTML鍵入模組

<script type="module" src="程式檔案名稱"></script>

• export/import語法，建立輸出輸入的關聯性

//模組1 檔案名稱：lib.js
function echo(msg){
    console.log(msg);
}
export default echo; //export default 資料

//模組2 檔案名稱：main.js
import echo from "./lib.js"; // import 資料 from "模組檔案路徑"
let name="我是一個肥大的程式";
echo(name);

• 代理物件：「代理」目標物件，意思是 改變「中介」目標物件的基礎操作。
  可能用途

1. 取得經過加工處理的屬性資料
2. 驗證物件的屬性資料
3. 綁定物件的屬性資料和使用者介面

let 目標物件=某個物件實體;

let ref=new Proxy(目標物件,{
    get:function(目標物件,屬性名稱){
        return回傳自定義的暑醒資料;
    }
});

• 拷貝：物件的複製，拷貝的部分包含物件與陣列。
• 淺拷貝：只會拷貝物件的第一層資料。

//原本的物件
let a={x:3,y:4,data:[1,2,3]}; //其中的data陣列就是第二層

//淺拷貝的方法
//方法1
let b={...a}; //使用其餘運算符號...進行淺拷貝

//方法2
let c=Object.assign({},a); //使用內建方式Object.assign()，進行淺拷貝

• 深拷貝：完全拷貝物件底下所有層次的資料。

//原本的物件
let a={x:3,y:4,data:[1,2,3]};

//深拷貝的步驟
let str=JSON.stringify(a); //將物件結構字串化
let b=JSON.parse(str); //根據字串化的資料，重新建立物件結構。  

以上就是這段時間的學習總結，
回頭一看，內容真的非常多。

挑戰之後，接下來的計劃

JavaScript的基礎我也學到了一個段落，
由於前期為了快速進入JavaScript內容，
CSS的觀念幾乎還沒有學到，未來的學習會把CSS再學起來。

學習的速度不會再像這30天一樣這麼密集了，
但我會開始試著去找一些實作案例來練習，
就像是我前一天做的碼錶案例一樣，
希望未來我也能靠自己的實力寫出一個網頁出來！

以上就是目前我的計劃，
未來有更新學習內容也會持續發布在我的版面上，
希望大家有空也能來走走逛逛，
謝謝大家，雖然不是明天見了，但會再見的！