JavaScript- 變數介紹

  • 何謂變數?
變數是用來儲存資料進行運算的基本單位。
  • 變數規則命名
1.開頭不能用數字   
2.不能用-跟. (可以使用__)
3.大小寫有區分
4.變數需有語意化
5.不能使用保留字(reserved word)、關鍵字(keyword) EX:if、boolean 

看完上面變數介紹,我們就來簡單示範幾個例子吧!
變數寫法介紹:
宣告變數 變數名稱(可以自行命名) 指定內容(數值、字串、布林)
var price = 30;
透過 var 宣告變數 burgerPrice,因為沒有給 burgerPrice 數值,此時 burgerPrice 的內容為 undefined。
var burgerPrice; //undefined

宣告變數 burgerPrice 的同時也給了變數 burgerPrice 值,此時 burgerPrice 的內容為數字的 10。
var burgerPrice = 10;
console.log(burgerPrice) //10

因為未宣告變數,直接存取時候會出現Uncaught ReferenceError: hello is not defined
console.log('hello')
補充幾點科普小知識:
1.JavaScript支援Unicode,代表變數用中文命名也ok,但是為了日後程式維護性還是建議不要 
2.JavaScript 是個「弱型別」的語言,變數本身無需宣告型別,型別的資訊只在值或物件本身
3.所有沒有透過 var 宣告的變數都會自動變成全域變數

  • 變數資料型別共有七種:
備註:範例只會介紹上面三種,其餘就請參考JavaScript 的資料型別與資料結構
1.數字 EX:10、20、35
2.字串(string) EX:"hello world"
3.布林 EX:true、false
4.null
5.undefined
6.symbol
7.object

補充關於變數:
1. 保存時間僅到該網頁關閉
2. 所有資料都是暫存的狀態
3.若要判斷資料型別,可以使用typeof語法來查詢
typeof  true;         // 'boolean'
typeof  'Andy';       // 'string'
typeof  123;          // 'number'
typeof  { };          // 'object'
typeof  [ ];          // 'object'

typeof window.confirm;  // 'function'
typeof null;          // 'object'

a.數字  範例
JavaScript 只有一種數值的型別,就是 number,不管整數或帶有小數點的數字都是:

var a=10;
var b=10.2345;
其中,數字還有幾種特殊的字體
Infinity (無限大) 、 -Infinity (負無限大) ,以及 NaN (不是數值,Not a Number)。
通常會發生NaN狀況是在下面情境:
1.運算時候資料型別錯誤(並非數字)
2.無意義的運算,例如:0 / 0、Infinity / Infinity
有趣的點是,即使我們使用typeof查詢NaN型別,我們依舊可以發現他是個number(見鬼了XD)
typeof(NaN);    // "number"
既然如此,我們怎麼判斷一個變數是否為NaN 呢? 
這個時候可以透過 isNaN(value) 來幫助我們判斷。
isNaN(NaN);       // true
isNaN(123);       // false
isNaN("123");     // false, 因為字串 "123" 可以透過隱含的 Number() 轉型成數字
isNaN("NaN");     // true, 因為字串 "NaN" 無法轉成數字
而最新的ES6,也推出新的語法Number.isNaN,直接判斷型別是否為number  完整介紹
Number.isNaN(123) // false
Number.isNaN(-1.23) // false
Number.isNaN(5-2) // false
Number.isNaN(0) // false

範例實作:
html語法
<body>
    <p>這顆蘋果<em id="title"></em>元</p>
    <script src="js/all.js"></script>
</body>

js語法
var title=30;
document.getElementById('title').textContent=title;
更多運算範例請參考
1.變數數值可以加減乘除 如下
var cookiePrice = 30;
var threeCookie = (cookiePrice*3)+3;
2.id 在html中只能有唯一一個值
Tips:記得每個變數後都要加上分號; 表示這行結束

b.字串(string)  範例
JavaScript 沒有 char (字元) 的概念,只有字串。
1.記得一定要用單引號或雙引號包起來,但不能單引號包覆單引號。如果非用不可,可以透過\(跳脫字元,escape character)處理 如下面範例
2.可以使用相加(+) 來達成文字+ 文字 ps:+號沒有限制數量
var str ='Let's go'; // SyntaxError: Unexpected identifier
var str ='Let\'s go'; //ok
var polite = 'hello';
var indexName = '竣文';
var totalPolite = polite + indexName ; //hello竣文
小整理:布林、數字不用使用單引號/雙引號 但字串一定要

c.boolean 布林值
通常用在判斷式上,作為控制流程的用途
var a = 10;
var b = 15;
console.log(b>a); //true

d.undefined
undefined 代表的是「(此變數) 還沒有給值,所以不知道是什麼」
undefined 在開方者工具中解析 原理如下:
    1.1chrome 在網頁上會先定義 var box;
    1.2才會載入 box=20;
所以下面這樣寫會產生undefined狀態
var box;
console.log(box); //undefined

在JavaScript中,undefined和not defined是不同的,undefined表尚未給定已宣告變項的值,但是is not defined則是該變項尚未宣告過,執行後會出現錯誤訊息!
補充說明: JavaScript: undefined不是真的undefined(by pjchender blog)

e.null
null 代表的是「(此變數可能曾經有值,可能沒有值) 現在沒有值」
var b = null
console.log(b);//null,表示空值

補充:若要驗證javascript結果 可以使用下列語法  示範
console.log(變數);
alert(變數);
syntax error:語法錯誤
寫console.log( )目的:測試網頁是否成功載入 w3cshool介紹


留言