【2021】每天都再練！符合原子習慣打造的JavaScript直播入門班、筆記記錄、心得、評價、推薦(持續更新中)

#4-1 VSCode 撰寫 JS 環境建立

(1) 建立一個網頁環境
在index.html 輸入!，再來按tab，展開環境。

出現以下程式碼

(2) 在放入，
在把命名的all.js檔，嵌入進去，出現

#4-2 console.log 印出你想顯示的資訊！

(1) 用alert(); 彈跳視窗檢查值是否正確

如:
let a =1;
let b= 2;
alert(a);

(2)用 console.log();檢查值是否正確

如:
let a =1;
let b= 2;
console.log(a,b);
console.log(b)

#4-3 如何撰寫優雅的註解

寫註解:

(1)為甚麼要用?

let a =1;

描述a 是甚麼，也許a是a玩家的得分。
幫助開發者知道這行code在幹嘛！

(2)長怎麼樣?

// 我是註解

#4-4 Codepen – 透過它來提交您的程式碼

就註冊、使用CODEPEN，網址要注意，不要覆蓋自己原先那一份就ok囉!

5.網頁與 Code 環境建立流程教學

#5-1 賦值運算子+=、-=

(1)為甚麼需要這個東西?

舉個例子

let a =50 ; //我原本有50元
a =a+100; //媽媽再給我100元，所以我身上有150元
a=a+150 // 爸爸再給我150，所以我身上有400元

◆自己可以累加自己的數值

原本是 a=a+10;
縮寫為 a+=10;

也有

原本是 b=b-5;
縮寫為 b-=5;

嘗試用英語公式的方式，列出縮寫!(我可能比較適合一步一步縮寫)

6.數字型別與賦值運算子

let a =0;
let b =0;
a+=1;a+=1;
b+=1;
console.log(a,b)

【a++ 累加1； a–遞減1】

作業練習

助教建議：命名相關東西

7.字串型別

#7-1 宣告字串流程

#7-2 一次搞懂字串相加

#7-3 透過 typeof 瞭解當前變數型別

let age =18;
console.log(typeof friendName);
console.log(typeof age);

#7-4 數字與字串相加

#7-5 NaN 產生時機

#7-6 字串處理實用方法

#7-7 變數記憶體指向講解★

CodepEN

#7-8 樣版字面值教學

8.變數：布林、undefined、null

#8-1 布林介紹

let isWakeUp = true;
console.log(typeof isWakeUp); //boolean –只有true 和 false –>要讓電腦去判斷這是否錯誤
情境1: 小明是否吃過飯了?
情境2: 是否為VIP資格?

#8-2 undefined 介紹

let a ;
console.log(typeof a); //undefined 尚未被賦予值

#8-2 null 介紹

let a =1;
let b=1234;
b=null;
console.log(typeof b); //有被賦予值，被告知為空值，釋放記憶體

#8-2 字串轉數字方法

let a=”1″;
a =parseInt(“1”); //轉型成數字的型別
console.log(a+1);

a =parseInt(“小明”); //會轉型失敗呦~
console.log(a+1); //NaN

從表單文字取出來的東西，都會是字串

#8-2 數字轉字串方法❤

9.比較與邏輯運算子

#9-1 比較與邏輯運算子簡介

變數流程判斷

【目標】
步驟一：任務拆解
步驟二：流程設計

#9-2 比較運算子： >、=、<=

>
<
>=
<=
==
!=

10.流程判斷 – if、else if、else

#10-1 為什麼要理解流程判斷？

let todayDegrees = 14;

let isWearJacket =15 >= todayDegrees;

//條件式
// 裡面小括號是TRUE的話，就會執行大括號內容

if(15>= todayDegrees){
console.log(“小美穿著外套出門了”);
}

if(true){
console.log(“小美穿著外套出門了”);
}

#10-2 if、else、else if 講解

#10-3 if 詳細講解 (一)

助教批閱ok

#10-4 if 詳細講解 (二)

if else 只能有一個；
else if 可以多個；
if 可以不寫else

11.if 流程圖規劃流程

#11-1 if 圖表介紹

重點：你要會畫流程圖。

步驟一：任務拆解。

步驟二：流程設計。

#11-4 流程圖 let code 講解

#11-5 流程圖let code講解

whimsical

12.if 中階運用

#12- if 包 if 腰圍判斷流程圖設計

whimsical

#12 if 包 if 腰圍判斷 Code 設計

#12-3 看圖說故事 – if 練習一

#12-4 看圖說故事 – if、else if 練習二

#12-5 看圖說故事 – if、else if 練習三
codepen

13.陣列教學

#13-1 為什麼要學陣列物件？ 陣列和物件是一個資料集合。 #13-2 陣列寫法教學 Codepen #13-3 陣列不只能放字串，也能放數字與混合資料
let ary =[‘blue’,5,false] console.log(ary) let books=[5,30,400,100] console.log(books) let data =[] console.log(data) #13-4 陣列讀取教學
let colors=[“red”,”blue”,’black”] console.log(colors[0]) 會回傳red #13-5 讀取陣列資料，並賦予新變數流程 let colors=[“red”,”blue”,”black”] 目的：我要取出黑色當作我喜歡的顏色，宣告變數 let myFavoriteColor =colors[2]; console.log(myFavoriteColor ); #13-6 length 讀取陣列長度流程
let colors=[“red”,”blue”,”black”];

console.log(colors.length); codepen #13-7 陣列預設寫入資料

let colors=[]; //可設空陣列
colors =[“blue”,”red”,”black”];
colors[0]=”pink”;
console.log(colors);

colors[6] =”purple”;
console.log(colors);
//前面幾筆是空值
console.log(colors[4]); //回傳undefined

codepen #13-8 push寫入資料流程 (最後面加入） let colors =[“blue”,”red”,”black”];
colors.push(“pink”);
console.log(colors); codepen #13-9 unshift 寫入資料流程
codepen #13-10 pop 與 shift 刪除資料 刪除最後面的資料是pop let colors =[“blue”,”red”,”black”];
colors.pop();
console.log(colors); 刪除最前面的資料是shift codepen （小口訣：sh刪前、p刪後） #13-11 splice刪除指定資料 let colors =[“blue”,”red”,”black”];
colors.splice(1,1);
//(起始位置，要往後刪除幾筆資料)
console.log(colors); codepen 常使用在介面的互動上 #13-12 其他陣列總結
function 參考檔案

14.物件教學

#14-1 為什麼要有物件

房仲業者在描述房子，也常用多少物件描述。

房子有多少陽台？有幾個廁所？

可以描述更細部的資訊

#14-2 物件格式教學

let home={
//屬性：”值“
//屬性是自定義的名稱
momName:”Mary”,
fatherName:”Tom”,
dog:3,
isWakeUp:false,
}

#14-3 如何讀取物件的值
用. 去讀取{}裡頭的資訊

let home={
//屬性：”值“
//屬性是自定義的名稱
momName:”Mary”,
fatherName:”Tom”,
dog:3,
isWakeUp:false,
}

console.log(home.dog);

讀取物件，dog屬性的值為３

#14-4 新增物件屬性

#14-5 修改物件值

#14-6 刪除物件資料
codepen

delete 物件.屬性

#14-7 另一種讀取物件屬性方法
口訣：物件中括號，中括號裡面是字串

console.log(home[a])

#14-8 物件讀取資料判斷時間

為何不用.讀取就好？

JSON格式中有寫屬性是

“001”:”hello”

不能使用.讀取

要使用[“001”]

(屬姓是數字，不能用.讀取物件）

15.陣列與物件整合運用

#15-1 陣列與物件混合應用

#15-2 一次搞懂陣列與物件混合讀取教學
codepen

#15-3 JSON格式介紹

JSON：資料格式「可以傳遞資料」

#15-4 安裝JSON套件

josnview 外掛請安裝

政府資料開放平臺>json資料

#15-5 下載JSON格式資料

用檢視網頁原始碼再來下載

let data =貼上內容

用console.log看有無存成功 console.log(data)

data.length （有幾筆資料）

#15-6 JSON 讀取方式教學 – 以充電站為例

#15-7 物件裡面還能包物件

#15-8 物件包物件讀取流程 – 以活動公告 open data 為例

#15-9 如何篩選出自己想要的資料格式，並賦予到特定變數

#15-10 小魔王題目：複雜 JSON 格式，你/妳撈得到嗎？

16.函式 function

#16-1為什麼需要學函式？

設定指令驅動程式。

#16-2 函式寫法教學

#16-3 註冊多組函式流程

#16-4 函式裡面仍可以執行函式

常用於重複的動作

#16-5 函式參數介紹

覺得很像x=1;的感覺

出現在function(){}的()

#16-6參數寫法-參數只存活在大括號 (所以需要return)

num 在這邊是 function 的參數，不是變數，因此只能在 function 中使用，若要在 function 外使用參數，除了呼叫 function 外也可以用 return 的方式將 function 回傳的結果賦予給變數，就可以在 function 外做使用。

#16-7 參數寫法-兩個數字相加工具

#16-8 輸入跟輸出的重要性

看課程（輸入）－－－>消化－－－－>寫作業（輸出）

#16-9 return寫法教學

return 回傳：可以把值傳到外層

#16-10 return 宣告 let

每日任務

2/22(一)

2/23(二)

2/25(五)