從頭開始的Javascript 入門 -變數與資料型別 Day1

前言

就像是學習國外語言，要會語法認識新單字，並且理解規則才會運用。
所以學習複雜觀念之前，我們要先建構Javascript 語言的基礎知識，懂得下指令及寫一些簡單的步驟 。

敘述句

以下這些都是敘述句：
敘述句必須以 *分號 * 做結尾

s = a * 2;

字元 a與s 被稱為變數 variables
2 單純就是個 值（values） 數字
＊與 = 運算子 他就對 值 或是 變數 進行操作 ，例如指定（assignment ）或做數學運算
簡單來說，敘述句 s = a * 2; 告訴電腦 變數a 目前所儲存的值，將值乘以2 然後把結果存回，我們稱之為s的另一變數。

變數與資料型別

變數 variable

變數是用來儲存資料，進行運算基本單位，
想像一個便當裡面，來放菜(資料)。

var bendo = "好吃";

解釋如下：
一個便當盒貼上bendo 貼紙，裡面裝著好吃的菜。
bendo 代表 容器名字（變數名稱）
“好吃” 代表容器裡面裝的東西（值）

var 宣告關鍵字 = variable = 變數

請給你的變數好名字
如果變數名稱由多字詞組成 通常會以camelCase 規則方式命名
例如：getBody 變數第一個是小寫，後續字詞第一個字母均以大寫表示

變數宣告 規則:

• 變數第一個字母為英文 _ 底線 或是錢字號 $
• 變數名稱不可以是保留字與關鍵字
• 語法需分大小寫 ex: app APP 兩個在JS 屬於不同的變數

當我們建立了一個變數，我們可以告訴它需要儲存那種資訊，就是指定一個值變數（assign a vule）

var bendo = "好吃";

資料型態（Data Type）

值 不只是放 ”好吃“（字串） ，還可以放3(數字)，
放true 或是false （布林值）

var name = "阿拉丁"; // 字串，可⽤單引號或雙引號把⽂字包起來
var power = 30000000; // 數字，不需引號
var goodMan = true; // 真假值、布林值，不需引號

數字資料型別

有關於計算或是偵測螢幕大小，在元件移動位置，設定元件淡入淡出時間

字串資料型別

注意要放在引號裡面，引號可以是單引號或是雙引號，但必須要前後一致，
它可用於任何文字資料，可運用於將新文字加入頁面中，同時內容也可包含html 標籤中

布林資料型別

布林資料值可為二者之一： true 或是 false

把它想成開關 狀態不是開啟就是關閉，常用於條件判斷。

undefined vs null

// 定義了⼀個叫做 thx 的變數，但沒有指定值
// 這時候它是 undefined;

var thx;

// 定義了⼀個叫做 thx的變數
// 並且明確的指定它是 undefined;
var hello = undefined;

// 定義了⼀個叫做 world 的變數
// 並且指定成 null
var world = null;

undefined

物件特性 方法 變數是否有無定義
（白話解釋就是沒有定義，存在的，他只是沒定義）

null

物件不存在
（就直接跟你說、他就是不存在的 或是這變數就是不存在的）

變數沒有型態，但是不同的值放在一起會產生如下：

console.log(1 + 1); // 印出 2
console.log(1 + "1"); // 印出 11

像上面不同型態 Javascript 就會自動幫你轉型

console.log("hello" + 123); // 印出 hello123
console.log("hello" + true); // 印出 hellotrue

有些問題來想想看：

Q1.console.log(123 + true); 印出來是？

答案 ： true 是1 ，這裏123也不是字串，console.log(123 + true); // 印出 124

Q2. console.log(123 + false); 印出來是？
答案 ：false 是0 console.log(123 + false); // 印出 123

Q3.
console.log("123" + null); // 印出 123null
console.log(123 + null); //印出來為???

答案 ： null 為空值 所以 console.log(123 + null); // 123

Q4.
console.log(123 + undefined); //印出來為???

答案 ： 印出 NaN(Not a Number)

Boolean / 布林值 / 真假值

直接指定 或是用於邏輯判斷

var age = 20;
var isAdult = (age >= 18);
console.log(isAdult); // 印出 true

(age >= 18) 這裡就是所謂邏輯判斷
之後的流程判斷還會提到

執行優先順序

console.log(7 + 3 * 2); // 猜會印出什麼？
console.log((3 + 3) * 2); // 猜會印出什麼？

就是：(先乘除後加減 ，小括弧裡面的先算）

a =a + 1 ??

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

a= a+1;
＝ ，這裡是指定的概念，所以流程是 我們要先看到 a+1 這一段，先把a變數這個值＋1給它，產生2這個值，再將2這個值 儲存給左邊的a變數

var a = 1;
a= a+1;
a= a+1;
a= a+1;
console.log(a); //4

更短的寫法

var a = 1;
a= a+1;
a +=1;

a +=1 等於 是 a= a+1 寫法
我們會常看到別人是這樣的寫法，至少知道一下比較好。
更短的寫法是 a++

var a = 1;
a= a+1;
a +=1;
a ++;

遞增與遞減

++（遞增) --(遞減) 如同a++ 中的 （a=a+1）

var age = 20;
age = age + 1;
console.log(age); // 會印出 21

age += 1; // 是 age = age + 1 的簡寫
console.log(age); // 會印出 22

age++; // 跟 age = age + 1 有差不多的效果
console.log(age); //會印出 23

記住 等號 ＝ 不一定是代表等號

一個等號、二個等號、三個等號 是不一樣的

console.log(1 == 1); // 印出 true
console.log(1 == "1"); // 印出 true
console.log(1 === "1"); // 印出 false

== 等於

此運算子會比較兩個值（數字、字串、布林值），以確認是否相同。
ex: 'hello' == 'no' 回傳false ，因為不是相同的字串。
'hello' == 'hello' 會回傳true，會回傳true 因為他們都是相同的字串。

=＝＝ 嚴格等於

此運算子會比較兩個值，已確認資料型別和值均相同。
'7' ==＝ 7; 回傳false ，因為不是相同的資料型別或值。
'7' ==＝ '7'; 回傳true ，因為是相同的資料型別或值。