iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 1
0
自我挑戰組

重新開始的Vue.js 30day系列 第 2

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

從頭開始的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 ,因為是相同的資料型別或值。


上一篇
從Javascript 基礎打好再開始學習Vue
下一篇
從頭開始的Javascript 入門 -流程控制 Day2
系列文
重新開始的Vue.js 30day21

1 則留言

0
yolala
iT邦新手 5 級 ‧ 2019-09-04 01:19:24

加油加油!

我要留言

立即登入留言