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

一、【課前預習】

(一) HTML、CSS 教學

1.2020 VS Code 網頁編輯器、HTML 基礎教學

2.2020 CSS 常用語法

3.2020 使用 CSS 變更 HTML 標籤特性

Hw

(二)JS教學

1.JavaScript 課前知識與環境介紹

2.變數與資料型別

#2-1 變數大綱簡介

JS變數講解情境圖

像是Excel記錄一般,記錄品項是甚麼/狀態。

香蕉價格58
店長姓名BOB
是否營業中
變數

(1)宣告變數的方法:let、const、var

(2)基本型別介紹

  • 字串(string)
  • 數字(Number)
  • 布林(Boolean)
  • undefined
  • Null
  • Symbol
香蕉價格58
店長姓名“BOB”
是否營業中true
變數

#2-2 透過 Chrome 開發人員工具來寫 JavaScript

常用chrome debug

開啟開發人員工具

Way1:

chrome開發人員工具

Way2: 右鍵->檢查

Way3: F12

出現這個畫面就開啟成功囉!

chrome console

接下來,嘗試在chrome的console打上彈跳視窗的程式碼 (常用於購物車提醒)

alert(

確定彈跳出hello視窗,就成功囉!

#2-3如何宣告變數

let 變數名稱 = value;
let a=1;

宣告一個變數,變數名稱為a,並賦予值為1
let a = 1

無法修改 var 、 =、;
可修改 a 、1

使用chrome的console

let半數名稱=值

#2-4設定變數,如同在 excel 設定欄位般容易!

用google chrome console放let a =1;(1)重新整理,a 還會不會被儲存?
記憶體空間被清掉囉,所以你直接在console打a,會出現a 沒有被宣告為1(2)開分頁,再開console, a是否還在?
個別頁面,記憶體空間是不一樣的囉! #2-5 number型別-讓您擁有簡易計算機功能 

30*8

←240

1+5
←6

5-4
←1

4/2
←2

#2-6number 型別 – 各種數字的支援程度大解密

值 不只有正整數、負值、小數都可以( 如let a =0.5;)

typeof 可以查型別

#2-7 number 型別 – 變數如何帶變數

《模擬情境》

小明去了超商,想到母親要買豆漿。

(1)小明去了冰櫃,看到一罐豆漿58元。

(2)於是他買了8罐。

(3)小明開始心算,總共多少元。

drinkPrice58
drinkNum8
totaldrinkPrice*drinkNum
變數

3.let、const、var 介紹

#3-1let 變數詳細介紹

let cokePrice =20;
console.log(cokePrice);
//這個價格可以改嗎?
cokePrice =50; //變數重新賦予一個值,不用再加let了(因為let是宣告,已經宣告過了)
console.log(cokePrice);

CodePen實作

#3-2const 詳細介紹

const b=1; //值基本不太修改(除了物件/陣列)

CodePen

把let想像成很多雲會移動,增減:const太陽永遠只有一顆。

#3-3 var 歷史的眼淚詳細介紹

var 比較不嚴謹,可以更改變數。

#3-4宣告變數一次讓你知!

Codepen

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

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

a=a+10的縮寫a+=10

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

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

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

作業練習

助教建議:命名相關東西

7.字串型別

#7-1 宣告字串流程

Codepen

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

CodePen

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

CodePen

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

 

#7-4  數字與字串相加

CodePen

codePen

#7-5  NaN 產生時機

Codepen

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

CodePen

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

CodepEN

#7-8  樣版字面值教學

Codepen

8.變數:布林、undefined、null

#8-1 布林介紹

CodePen

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); //有被賦予值,被告知為空值,釋放記憶體

CodePen

#8-2 字串轉數字方法

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

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

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

CodePen

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

CodePen

 

9.比較與邏輯運算子

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

變數 流程判斷

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

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

>
<
>=
<=
==
!=

CodePen

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

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

let todayDegrees = 14;

let isWearJacket =15 >= todayDegrees;

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


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

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

Codepen

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

Codepen

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

Codepen

助教批閱ok

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

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

Codepen

11.if 流程圖規劃流程

#11-1 if 圖表介紹

重點:你要會畫流程圖。

步驟一:任務拆解。

步驟二:流程設計。

#11-4 流程圖 let code 講解

CodePen

#11-5 流程圖let code講解

codepen 

whimsical

12.if 中階運用

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

whimsical

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

codepen

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

codepen

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

  codepen

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

13.陣列教學

#13-1 為什麼要學陣列物件?
陣列和物件是一個資料集合。
#13-2 陣列寫法教學
#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);
#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);
#13-9 unshift 寫入資料流程
#13-10 pop 與 shift 刪除資料
刪除最後面的資料是pop
let colors =[“blue”,”red”,”black”];
colors.pop();
console.log(colors);
刪除最前面的資料是shift
(小口訣:sh刪前、p刪後)
#13-11 splice刪除指定資料
let colors =[“blue”,”red”,”black”];
colors.splice(1,1);
//(起始位置,要往後刪除幾筆資料)
console.log(colors);
常使用在介面的互動上
#13-12 其他陣列總結
function
 

14.物件教學

#14-1 為什麼要有物件

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

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

可以描述更細部的資訊

#14-2 物件格式教學

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

codepen

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


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

console.log(home.dog);

讀取物件,dog屬性的值為3

#14-4 新增物件屬性

codepen

#14-5 修改物件值

codepen

#14-6 刪除物件資料
codepen

delete 物件.屬性

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

console.log(home[a])

codepen

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

為何不用.讀取就好?

JSON格式中有寫屬性是

“001”:”hello”

不能使用.讀取

要使用[“001”]

(屬姓是數字,不能用.讀取物件)

15.陣列與物件整合運用

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

codepen

#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 物件裡面還能包物件

codepen

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

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

#15-10 小魔王題目:複雜 JSON 格式,你/妳撈得到嗎?

16.函式 function

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

設定指令驅動程式。

#16-2 函式寫法教學

codepen

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

codepen

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

常用於重複的動作

codepen

#16-5 函式參數介紹

覺得很像x=1;的感覺

出現在function(){}的()

codepen

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

codepen

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

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

codepen

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

 看課程(輸入)--->消化---->寫作業(輸出)

#16-9 return寫法教學

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

codepen

#16-10 return 宣告 let

codepen

每日任務

2/22(一)

CodePen

2/23(二)

CodePen

2/25(五)

CodePen

《六角學院》JAVASCRIPT課程推薦
5/5

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

台中SEO讀書會

(相關資訊歡迎點擊以下按鈕)
Scroll to Top