什麼是「變數」 (variable)？

「變數」是程式語言中非常重要的概念。你可以想像它其實像一個櫃檯，可將某些資料儲存起來。只要呼叫這個櫃檯的名字就可以取用存在其中的資料。 在 JavaScript 中，變數宣告的語法為：

var s = 50 //就像將50這個數字儲存在s這個櫃檯var txt = 'hello' // 也可以儲存文字在櫃檯裡面

想要取用這個「變數」的方法

直接叫它的名字

print（s） // 透過 print() 把 s 的內容印出來。結果會是 50print（txt） // 會印出hello

// 記得： 在程式語言中，‘=’ 代表「賦予數值」，‘==’ 才是數學中的「等於」！

為什麼我們需要用「變數」 (variable)？

減少重複的數值，程式碼管理起來更方便 例如畫多個相同半徑的球時，可以快速同時改變他們的半徑。

ellipse(width/2, height/3, 50) ellipse(width/2, height/2, 50) // 這兩個圓半徑重複了

var r = 50

ellipse(width/2, height/3, r, r)
ellipse(width/2, height/2, r, r) // 這樣更好管理！

暫存之後可能會用到的資料 利用變數的特性，先將經過運算的資料儲存起來，等到要用時再呼叫。 例如下面的寫法就會比上面乾淨明瞭：

// 要用到顏色了，來直接運算！但這樣看起來很醜...
fill(r/2 + 40, mouseX/2 +40, mouseY/2 +40 + mouseX/5)

// 使用變數的寫法
var brightnessR = r/2 + 40
var brightnessG = mouseX/2 + 40
var brightnessB = mouseY/2 + 40 + mouseX/5 // 這些算好後先準備起來

fill(brightnessR, brightnessG, brightnessB) // 要用到顏色囉，這樣好看多了！

賦予數值與資料意義 對於電腦來說這些變數其實也只是一堆數字。所以變數的命名除了可以讓我們呼叫之外，最主要是為了讓人類自己可以看得懂，並且透過這些名字建立邏輯關係以方便我們操作跟編寫

var ballPositionX = 200 // 指「球的 x 位置」
var ballSize = 15 // 指「球的大小」
var rectFillColor = 'red' // 指「矩形的填充色」

變數可以裝哪些東西（資料型態）？

基礎的資料型態：

數字: 0,1,2,1,2,0.1,0.2 … 各種可以被用來計算的數字

字串：'yellow', 'pig', 'hello'… 可以簡單的想像成是被包覆起來的一段文字

boolean：即所謂「布林變數」，是用來判斷邏輯正確與否的。只會有true/false兩個值，也就是「是」或「不是」。 例如把 p5 的 mouseIsPressed 打印出來，就只會看到 true 或是 false，分別代表有按下去 / 沒按下去。我們在使用 if() 判斷式的時候也會使用到 boolean 的概念呦！