iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
1
Modern Web

JavaScript 初心者筆記系列 第 3

JavaScript 初心者筆記: 變數簡介

當我們在撰寫程式碼時,必須清楚告知解譯器我們希望它執行的每一步,這時我們就需要變數來替我們記住許許多多的資訊,才能方便我們進一步地操作。

什麼是變數

變數其實就是幫我們記住一些東西,比如說,幫我們記住一個「紅豆餅的價錢」是多少、「別人的名字」是什麼(上下引號括起來的部分就是變數)。
而我個人的理解是,變數就是一個不定代名詞,舉個例子,就像有些人稱呼每一任女友都叫寶貝,「寶貝」就是一個變數,而它指涉的內容是可以變動的。

如何輸出變數內容

alert(變數名); - 顯示方式為彈跳出視窗
console.log(變數名); - 會在 chrome 開發人員工具 / console 頁面顯示出變數值

命名變數的注意事項

  • 開頭不能用數字
  • 不能有 - 跟 . (但 _ 可以)
  • 要區分大小寫:宣告變數時命名為小寫,呼叫時也要用小寫;反之亦然。
  • 變數需有語意化:較好維護及開發
  • 不能使用 JS 自己的關鍵字:例如 if / else / with / true / false 等等
  • 推薦使用駝峰式命名法:例如 firstNamefirstname 來得好

變數的種類

常用的變數型態有以下三種:

  • String (字串):一串被 "" 或 '' 包起來的文字或數字(例如:"你好")。
  • Number (數字):任何的數字,包括小數點(例如:5、6.8)。
  • Boolean (布林值):只會是 true 或者 false ,用來代表事情成立或不成立。

變數的寫法

以下將針對 number 跟 string 變數的寫法做介紹。

Number 變數

Number 變數的寫法是,首先用 var (variable) 宣告一個變數名稱,然後指定它的內容。

var cookiePrice = 35;

變數內容可以用 JS 寫在 HTML 上,例如,想在一個 h1 標題顯示出變數的內容,可以在 h1 標籤上加入 id,再用 .getElementByIdid 名稱找出要插入內容的 h1,最後用 .textContent = 變數名稱 插入內容。

// HTML
<h1 id='id名稱'></h1>
// JS
document.getElementById('id名稱').textContent = 變數名稱;

String 變數

string 變數的寫法也是大同小異,跟 number 的差別在於要用 "" 或 '' 包住內容。

var name = '馬格蕾特';

將字串寫入 HTML 的方法,可以在 .textContent 的等號後面用加號將兩個變數組合在一起;也可以將兩個變數加在一起變成第三個變數,再放入 textContent 改寫 HTML。

var greeting = 'Hello';
var name = '馬格蕾特';
var totalGreeting = greeting + name;
// document.getElementById('id名稱').textContent = greeting + name;
// document.getElementById('id名稱').textContent = totalGreeting;

了解了變數的基本概念後,明天將會繼續介紹變數如何進行數學運算。


上一篇
JavaScript 初心者筆記: JavaScript 如何在網頁上運作
下一篇
JavaScript 初心者筆記: 用變數進行數學運算
系列文
JavaScript 初心者筆記30

尚未有邦友留言

立即登入留言