一、【課前預習】
1.2020 VS Code 網頁編輯器、HTML 基礎教學
2.2020 CSS 常用語法
3.2020 使用 CSS 變更 HTML 標籤特性
1.JavaScript 課前知識與環境介紹
2.變數與資料型別
#2-1 變數大綱簡介
像是Excel記錄一般,記錄品項是甚麼/狀態。
香蕉價格 | 58 |
店長姓名 | BOB |
是否營業中 | 是 |
變數 | 值 |
(1)宣告變數的方法:let、const、var
(2)基本型別介紹
- 字串(string)
- 數字(Number)
- 布林(Boolean)
- undefined
- Null
- Symbol
香蕉價格 | 58 |
店長姓名 | “BOB” |
是否營業中 | true |
變數 | 值 |
#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)小明開始心算,總共多少元。
drinkPrice | 58 |
drinkNum | 8 |
total | drinkPrice*drinkNum |
變數 | 值 |
3.let、const、var 介紹
#3-1let 變數詳細介紹
let cokePrice =20;
console.log(cokePrice);
//這個價格可以改嗎?
cokePrice =50; //變數重新賦予一個值,不用再加let了(因為let是宣告,已經宣告過了)
console.log(cokePrice);
#3-2const 詳細介紹
const b=1; //值基本不太修改(除了物件/陣列)
把let想像成很多雲會移動,增減:const太陽永遠只有一顆。
#3-3 var 歷史的眼淚詳細介紹
var 比較不嚴謹,可以更改變數。
#3-4宣告變數一次讓你知!
#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 數字轉字串方法❤