JavaScript 直播班 課前note #1 變數與資料型別

基礎觀念：學程式 = 任務拆解 ( 拆解成小任務 )

同步發布於 JIANGs Daily LAB

Photo by Greg Rakozy on Unsplash

變數(Variable)與值(Value)

宣告變數的方法：

1. let
2. const
3. var

基本型別(primitives types) 介紹

1. 字串 (String)
2. 數字 (Number)
3. 布林 (Boolean)
4. undefined
5. null
6. Symbol

型別操作方法

• 物件型別，例如陣列(array)與物件(object)

JavaScript 記憶體

• 不會跨頁面共享記憶體空間，每頁網頁都有個別存放位置

小駝峰命名法

1. 變數開頭命名用小寫
2. 若開頭大寫是有其他用意的，主要是建立 class 類別所用(比較進階用法)，建議用小駝峰命名
3. 變數、常數與命名

typeof

• 可以查詢型別

如何宣告變數 ?

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

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

Number 型別

可直接運算 + — * / %(餘數)
5 ** 2 >> 5的平方
5 ** 3 >> 5的立方
可以先乘除後加減
可作為正整數、小數點、負數

模擬情境 小明去商店買牛奶

1. 小明來帶冰箱前，看見牛奶1瓶30元
2. 於是她買了6瓶
3. 開始計算總共多少錢

total 算式 milkPrice * milkNum
(值的位置只能放型別，算式可以放在console.log)

模擬情境 ( 課前最終作業二 )

練習一：小美買冰塊

練習二：小華去速食店

let、const、var

let

let coke = 20; let 是宣告 coke是變數 = 是賦予
coke = 40; 在這可以直接取出coke重新賦予宣告過的變數

const

let a = 1; 變數
const b = 2; 常數

var

現在不建議使用了，因為較不嚴僅

let、const 差別在於

let 可以修改變數的值 (可覆寫) -> 可變的變數
const 不可以修改變數的值 (不可複寫) -> 不可變的常數

模擬情境 帽子折扣與價錢

const sale = 0.7;
const hatPrice = 100;
let hatNum = 3;
let total = sale * hatPrice * hatNum

宣告變數的特性

1. 開頭不可為數字
2. 變數有區分大小寫
3. 可接受中文
4. 下底線_
5. 不要使用到 JS 關鍵字 保留字 JavaScript keyword

建立環境

1. index.html
2. all.js
3. index 載入 <script src =”all.js”></script>

印出顯示的資料

console.log(a);
a 是帶入想印出的變數

console.log(a,b);
可以印出兩個變數

賦值運算子

+= -=

let a = 50;
a = a+100; 取出a再加上100

let a =50;
a = a+10; 另一種寫法是 a = a+=10;

let a =50;
a = a-10; 另一種寫法是 a = a-=10;

++ --

let a = 0;
let b = 0;
a++; 針對自己的變數+=1(累加1)
a- -; 針對自己的變數-=1(累減1)

宣告字串的方式

加上 雙引號” “ 單引號’ ’
let a = ’ hello ’ ;
let b = “ hihi “ ;

字串相加的方式

let a = ‘hello’ + ‘你好嗎’;

ex.

let friendName = ‘Tom’;
let content = ‘你好嗎’;
console.log(friendName + content);
console.log(friendName + ’ ’ + content);

typeof

查詢 值value 的型別

自動轉型的貼心功能

字串相加轉為數字

NaN

存在的目的在回報非數字或異常的狀況

parseInt 型別轉換

字串變數字 “2” -> 2
使用方法 ex. let age = parseInt (“30”);

字串的處理方法

length 字數元計算
trim(); 過濾空白字元 除去空白字元

value 資料指向

let myEmail = ’ Tom ‘;
let nameLength = myEmail.length;
let updateLength = myEmail.trim();
console.log(myEmail);
console.log(nameLength);
console.log(updateLength);

樣板字面值 Template literals

let myName = 'Tom';
let myAge = 18;
let content = `你好我是${myName},我今年${myAge}歲`;

未來都會把筆記同步到我的部落格去 JIANGs Daily Lab