JavaScript 複習01 – wordpress

JavaScript 課前知識與環境介紹

安裝 Chrome 網頁瀏覽器

安裝 VSCode 程式編輯器

每日任務資源

每日任務

變數與資料型別

變數大綱簡介

撰寫程式時用變數記錄資訊。

變數	值
香蕉價格	79
店長名字	“Tom”
店面是否營業	true

用 Excel 表格講解

課程講義: 變數(Variable)與值(Value)

變數(Variable)與值(Value)

課程目標

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

基本型別(primitives types) 介紹

字串 (String)

數字 (Number)

布林 (Boolean)

undefined

null

Symbol

型別操作方法

除了基本型別外，後面還會講解物件型別，例如陣列(array)與物件(object)。

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

自訂及管理 Google Chrome > 更多工具 > 開發人員工具 > Console
右鍵檢查 > Console

// Console
alert('alert');
alert('hello world!');

如何宣告變數

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

// Console
let a = 1;
undefined
a
1
let bananaPrice = 20;
undefined
bananaPrice
20

設定變數，如同在 excel 設定欄位般容易!

跨頁面、同頁面的記憶體存放的機制
觀念: 新的分頁是獨立的頁面，JavaScript 程式碼不會共享到其他頁面，自己本身有自己的記憶體空間去做存放。

情況: 頁面重新整理的話，記憶體空間會被清除。

自訂及管理 Google Chrome > 更多工具 > 工作管理員，
記憶體使用量可以使用右鍵勾選顯示。
變數是存放在瀏覽器記憶體。

number 型別 – 讓您擁有簡易計算機功能

// Console
30 * 8
240
1 + 5
6
5 - 4
1
4 / 2
2
20%2
0
5**2
25
5**3
125

// Console
3 + 2 * 2
7
let a = 1;
undefined
let b = 2 + 2 + 2;
undefined
b
6

// Console
let a = 1;
undefined
let b = 6;
undefined
a * b
6
let c = 3;
undefined
b * c
18
let d = 2 * 3;
undefined
d
6

變數	值
a	1
b	6
c	3
d	6

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

// Console
let a = 1;
undefined
let b = - 3;
undefined
b
-3
let c = 1.1314
undefined
c
1.1314
typeof a
'number'
typeof b
'number'
typeof c
'number'

變數	值
a	1
b	-3
c	1.1314

number 型別 – 變數如何帶變數

// 模擬情境: 幫小明算數學

// 小明去了超商，想到母親要幫忙買牛奶

// 1.小明來到冰櫃，看到牛奶一瓶30元
// 2.於是他買了 6 罐
// 3.小明開始心算總共多少錢

// Console
let milkPrice = 30;
undefined
let milkNum = 6;
undefined
let total = milkPrice * milkNum;
undefined
total
180

變數	值
milkPrice	30
milkNum	6
milkTotal	180

milkPrice 這種命名變數名稱的方式是小駝峰命名。

變數與資料型別 – 小節作業

// 模擬情境一: 小美買冰塊

// 小美他去超商買冰塊

// 1.小美錢包有 200 元
// 2.他看到冰塊一包 25 元
// 3.他買了 7 包冰塊
// 4.請問他付費完，錢包還剩下多少錢?

變數	值
walletMoney	200
icePrice	25
iceNum	7
leftMoney	25

// Console
let walletMoney = 200;
undefined
let icePrice = 25;
undefined
let iceNum = 7;
undefined
let leftMoney = walletMoney - icePrice * iceNum;
undefined
leftMoney
25

// 模擬情境二: 小華去速食店

// 幫他計算差額

/*
小華他去速食店吃中餐，他很擔心錢帶不夠，他看了下菜單，漢堡一顆50元，可樂一瓶30元，小華很口渴，所以他想要買一顆漢堡跟兩瓶可樂，於是他看了口袋的錢，總共有180元，請問小華如果買完的話，還剩多少錢?
*/

變數	值
burgerPrice	50
burgerNum	1
cokePrice	30
cokeNum	2
totalPrice	110
pocketMoney	180
leftMoney	70

// Console
let burgerPrice = 50;
undefined
let burgerNum = 1;
undefined
let cokePrice = 30;
undefined
let cokeNum = 2;
undefined
let totalPrice = burgerPrice * burgerNum + cokePrice * cokeNum;
undefined
totalPrice
110
let pocketMoney = 180;
undefined
let leftMoney = pocketMoney - totalPrice;
undefined
leftMoney
70

變數與資料型別 – 小節作業提交格式

練習一: 小美買冰塊

練習變數取名 (使用小駝峰)
根據影片題目練習『賦予變數值』以及『計算出結果』
提供 Chrome 執行結果的截圖

練習二: 小華去速食店

練習變數取名 (使用小駝峰)
根據影片題目練習『賦予變數值』以及『計算出結果』
提供 Chrome 執行結果的截圖

提交範例:
老師、助教好，這是我的小節作業練習，再麻煩老師、助教批改，謝謝
練習一: 小美買冰塊
(Chrome 執行結果的截圖)
練習二: 小華去速食店
(Chrome 執行結果的截圖)

補充: value(值)的地方，裡面只能放型別，還請放最後計算的值即可，還請不要放算式在裡頭。

let、const、var 介紹

let 變數詳細介紹

使用 let 宣告的變數，可以修改變數既有的值。

// Console
let cokePrice = 20;
undefined
cokePrice
20
cokePrice = 40;
40
cokePrice
40

變數	值
cokePrice	20→40

變數重新賦予一個值
cokePrice = 40;

// Console
let a = 1;
undefined
a = 3;
3
a
3

const 詳細介紹

使用 const 宣告的變數，基本上比較難修改變數既有的值。

// Console
let a = 1;
undefined
const b = 1;
undefined
a
1
b
1
a = 2;
2
a
2
b = 3;
Uncaught TypeError: Assignment to constant variable.
b
1

// Console
let cloud = 3;
undefined
cloud = 8;
8
cloud
8
const sumNum = 1;
undefined
sumNum = 2;
Uncaught TypeError: Assignment to constant variable.

// Console
const sale = 0.7;
undefined
const hatPrice = 100;
undefined
let hatNum = 3;
undefined
let total = sale * hatPrice * hatNum;
undefined
total
210

變數	值
sale	0.7
hatPrice	100
hatNum	3
total	210

// Console
hatNum = 10;
10
total = sale * hatPrice * hatNum;
700
total
700

變數	值
sale	0.7
hatPrice	100
hatNum	10
total	700

const 宣告變數的值無法修改
let 宣告變數的值可以修改

var 歷史的眼淚詳細介紹

var 現在已不建議使用，因為使用時常出現一些奇怪的問題。
var 會汙染全域變數，容易造成不可預期的錯誤。

目前主流來說，學習、使用 let、const 就好。

語言與型別
Can I use?
- javascript var
- javascript let
- javascript const

宣告變數一次讓你知!

變數宣告特性 – 變數名稱

不能使用特定名稱，開頭不能使用數字
名稱大小寫是不同的變數名稱
可以接受中文
不能使用關鍵字、保留字 – JavaScript Reserved Words

// Console - 1
let a = 1;
undefined
a
1

// Console - 2
let const = 1;
Uncaught SyntaxError: Unexpected token 'const'

// Console - 3
let b333 = 3;
undefined
let 1qqq = 4;
Uncaught SyntaxError: Invalid or unexpected token

// Console - 4
let catNum = 1;
undefined
let catnum = 2;
undefined
catNum
1
catnum
2

// Console - 5
let 貓咪數量 = 3;
undefined
貓咪數量
3

// Console - 6
let _a = 3;
undefined
_a
3
let $qq = 1;
undefined
$qq
1

// Console - 7
let if = 3;
Uncaught SyntaxError: Unexpected token 'if'
let true = 3;
Uncaught SyntaxError: Unexpected token 'true'
let var = 1;
Uncaught SyntaxError: Unexpected token 'var'

變數	值
a	1
b333	3
catNum	1
catnum	2
_a	3
$qq	1

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

VSCode 撰寫 JS 環境建立

建立網頁環境

建立一支 index.html、建立一支 all.js，在 index.html 載入 js。

操作流程

建立一個新的資料夾 project
把資料夾按住不放拖曳到VS Code 裡面
新增檔案有以下幾種作法
- 選單 > File > New File
- 直接在VS Code 介面點兩下
新增 index.html 檔案
快捷鍵: ! + Tab或者 ! + Enter
在 index.html 檔案新增內容 <h1>標題</h1>
新增 all.js 檔案
在 all.js 檔案新增內容
let a = 1;
let b = 2;
在 Console 查看有無變數資料
瀏覽器不支援直接執行 js 檔案
在 index.html 載入 all.js 檔案
- 方法一: 載入在<head>標籤裡
- 方法二: 載入在</body>之前
儲存後網頁重新整理再到 Console 測試有無資料

console.log 印出你想顯示的資訊

// all.js - 1
let a = 1;
alert(a);

// all.js -2
let a = 1;
let b = 2;

console.log(a);
console.log(b);
console.log(a, b);

如何撰寫優雅的註解

// all.js - 1
// 想知道自己還剩下幾根薯條

// 紀錄薯條的根數
let num = 0;

// 記錄數薯條的過程
num += 1;
num += 1;
num += 2;
num += 2;

// 顯示最後薯條的數量
console.log(num);

// all.js - 2
// 想知道自己還剩下幾根薯條

let friesNum = 0;

// 記錄數薯條的過程
friesNum += 1;
friesNum += 1;
friesNum += 2;
friesNum += 2;

console.log(friesNum);

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

Codepen

操作流程

Google 搜尋 Codepen
註冊、登入 Codepen
Create Pen
HTML、CSS、JS 撰寫程式碼
Save 儲存程式碼
產生網址，可以用來提交作業
沒辦法直接修改別人程式碼，使用 Fork 複製到自己的 Codepen

練習

新增一個 Codepen
新增第二個 Codepen
要確保兩個 Codepen 網址不同

數字型別與賦值運算子

賦值運算子 +=、-=

// all.js - 1
let a = 50;
a = a + 100;

console.log(a);  // a = 150

// all.js - 2
let a = 50;
a = a + 200;
a = a + 150;

console.log(a);  // a = 400

// all.js - 3
let a = 50;
a = a - 10;

console.log(a);  // a = 40

// all.js - 4
let a = 50;
a = a + 10;
a = a - 10;

// 縮寫寫法
a += 10;
a -= 10;

console.log(a);  // a = 50

a++、a– 一次搞懂

// all.js
// 數字的處理方式 - 以桌球為例
let a = 0;
let b = 0;

a++;
a++;
a++;
b++;

console.log(a, b);

a += 1; 等於 a++;
a -= 1; 等於a–;

字串型別

宣告字串流程

// all.js
let a = 'hello';
let b = "你好嗎?";
let c = "let's go!!";

console.log(a, b);
console.log(c);

變數	值
a	hello
b	你好嗎?
c	let’s go!!

單引號、雙引號使用起來是相同的，使用時盡量統一使用。

一次搞懂字串相加

// all.js
let friendName = 'Tom';
let content = '你好嗎?';
let total = friendName + '  ' + content;

console.log(total);

變數	值
friendName	Tom
content	你好嗎?
total	Tom 你好嗎

透過 typeof 瞭解當前變數型別

// all.js
let friendName = 'Tom';
let content = '你好嗎?';
let total = friendName + '  ' + content;
let age = 18;
let ageString = "18";

console.log(typeof friendName);
console.log(typeof age);
console.log(typeof ageString);

數字與字串相加

// all.js - 1
// 自動轉型
// JavaScript 有些情況下會自動幫你轉型
let myName = 'Tom';
let age = 20;
let total = myName + age;
console.log(total);
console.log(typeof total);
console.log("hi 我是" + myName + "，我今年" + age +"歲");

// all.js - 2
// 練習
// 我體重55公斤，我是小美
let myWeight = 55;
let myName = '小美';

console.log('我體重' + myWeight +'公斤，我是' + myName);

NaN 產生時機

NaN: Not a Number，指的是非數字。

// all.js - 1
let myName = 'Tom';
let age = 20;

let total = myName * age;
console.log(total);
console.log(typeof total);

// all.js -2
let ageString = "30";
console.log(ageString);
console.log(typeof ageString);

// 使用 parseInt 字串型別轉成數字型別
ageString = parseInt(ageString);
console.log(ageString);
console.log(typeof ageString);

字串處理實用方法

JavaScript 本身有很多語法，這邊介紹關於字串的處理方式、方法。

length 屬性表示一個字符串的長度
trim() 方法會移除字串起始及結尾處的空白字元
例如: 信箱帳號的空白字元的處理

// Console - 1
let a = "mark";
undefined
typeof a
'string'
a.length
4

// Console - 2
a = "1234567890";
'1234567890'
a.length;
10
a = '你好嗎";
'你好嗎'
a.length;
3

// Console - 3
let yourName = " Mark ";
undefined
yourName.length
6
yourName
' Mark '
yourName.trim();
'Mark'

// Console - 4
let myEmail = "  myEmail@gmail.com";
undefined
myEmail
'  myEmail@gmail.com'
myEmail.trim();
'myEmail@gmail.com'

變數記憶體指向講解

value 的資料指向。

// all.js - 1
let myName = 'Tom';
myName.length;

console.log(myName); // myName = Tom

// all.js - 2
let myName = '  Tom  ';

let myNameLength = myName.length;

let updateName = myName.trim();

console.log(myName);
console.log(myNameLength);
console.log(updateName);

// all.js - 3
let myName = '  Tom  ';
myName = myName.trim();

console.log(myName);
console.log(myName.length);

樣板字面值教學

// all.js - 1
let myName = "Tom";
let myAge = 18;
let content = "您好我是" + myName + "我今年" + myAge + "歲";

console.log(content);

// all.js - 2
// 樣板字面值教學 (Template literals)

let myName = "Tom";
let myAge = 18;

// 使用反引號 ``
let content = `您好我是${myName}，我今年${myAge}歲`;

console.log(content);

// all.js -3
// 練習
// 我現在189公分，我是Mary。

let myHeight = 189;
let myName = "Mary";
let content = `我現在${myHeight}公分，我是${myName}`;

console.log(content);

變數: 布林、undefined、null

布林介紹

變數基本型別 – 布林(Boolean)

true – 正確
false – 錯誤

// all.js
let a = 1;
console.log(a);  // 1
console.log(typeof a);  // number

let str = 'hello'
console.log(str);  // hello
console.log(typeof str);  // string

// 布林介紹
let isWake = true;
console.log(isWake);  // true
console.log(typeof isWake);  // boolean

// 電腦不知道，你要告訴電腦
// 情境題
// 小明吃過飯了嗎?
// 是否有 Vip 資格

console.log(2 > 1);  // true
console.log(2 > 3);  // false

undefined 介紹

JavaScript 的資料型別分為原始型別、參考型別。

原始型別

數字 (number)
字串 (string)
布林 (boolean)
undefined
null
symbols

// all.js
// undefined - 尚未被賦予值
let a;

console.log(a);  // undefined
console.log(typeof a);  // undefined

null 介紹

// all.js
// null 有被賦予值，是告知為空值
// 常考面試題目
let c = 1234;
c = null;

console.log(c);

變數	值
c	null

陣列、物件，是用組合資料的方式放大量資料在一個變數上，
因此大量的資料會佔大量的暫存記憶體空間，使用 null 可以釋放記憶體空間。

null 代表有被賦予值，被賦予了空值
想清空資料時可以使用 null
使用 null 清空資料，可以釋放記憶體空間

字串轉數字方法

// all.js - 1
let a = "1";
a = parseInt(a);

console.log(a + 1);  // 2

// all.js - 2
let a = "1";
a = parseInt("456777");

console.log(a + 1);  // 456778

// all.js - 3
let a = "1";
a = parseInt("小明");

console.log(a);  // NaN
console.log(a + 1)l // NaN

從表單文字欄位取出的數字都是字串，所以需要把字串轉型成數字。

數字轉字串方法

// all.js
let b = 1;
b = b.toString();

console.log(typeof b);  // string
console.log(b + 1);  // 11

// 大樂透號碼
// 電話號碼 "07" + "1234567"

JavaScript 課前知識與環境介紹

安裝 Chrome 網頁瀏覽器

安裝 VSCode 程式編輯器

每日任務資源

變數與資料型別

變數大綱簡介

變數(Variable)與值(Value)

課程目標

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

如何宣告變數

設定變數，如同在 excel 設定欄位般容易!

number 型別 – 讓您擁有簡易計算機功能

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

number 型別 – 變數如何帶變數

變數與資料型別 – 小節作業

變數與資料型別 – 小節作業 提交格式

let、const、var 介紹

let 變數詳細介紹

const 詳細介紹

var 歷史的眼淚詳細介紹

宣告變數一次讓你知!

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

VSCode 撰寫 JS 環境建立

建立網頁環境

操作流程

console.log 印出你想顯示的資訊

如何撰寫優雅的註解

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

操作流程

練習

數字型別與賦值運算子

賦值運算子 +=、-=

a++、a– 一次搞懂

字串型別

宣告字串流程

一次搞懂字串相加

透過 typeof 瞭解當前變數型別

數字與字串相加

NaN 產生時機

字串處理實用方法

變數記憶體指向講解

樣板字面值教學

變數: 布林、undefined、null

布林介紹

undefined 介紹

原始型別

null 介紹

字串轉數字方法

數字轉字串方法

變數與資料型別 – 小節作業提交格式