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

一、【課前預習】

(一) HTML、CSS 教學

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

2.2020 CSS 常用語法

3.2020 使用 CSS 變更 HTML 標籤特性

Hw

(二)JS教學

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

2.變數與資料型別

#2-1 變數大綱簡介

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

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

(2)基本型別介紹

• 字串(string)
• 數字(Number)
• 布林(Boolean)
• undefined
• Null
• Symbol

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

常用chrome debug

開啟開發人員工具

Way1:

Way2: 右鍵->檢查

Way3: F12

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

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

確定彈跳出hello視窗，就成功囉！

#2-3如何宣告變數

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

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

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

使用chrome的console

#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)小明開始心算，總共多少元。

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; //值基本不太修改（除了物件／陣列）

ＣodePen

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

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

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