Day 3 - Javascript 教學

這是「給不會寫程式的人的惠惠機器人開發攻略」的第三篇。

這會是一篇非常基本的 Javascript 教學，把基本的語法稍微帶過一遍。

這篇教學並不會那麼完整。如果想看完整的 Javascript 教學，我推薦 Javascript.info。

這篇文章 紮實的網頁前端學習路線與資源推薦 還有 Web Developer Roadmap 有非常完整的學習路線。

Comments 註解

寫在註解裡面的東西並不會被執行。註解可以用來說明這行程式碼的作用之類的。

/* This is a multi-line comment.
這個是多行註解 
*/

// This is a single-line comment.
var name = "megumin"; // this is a comment

Variables 變數

變數是儲存資料的容器。
下面這行程式碼的意思是宣告一個叫作 x 的變數。然後再把x的值設為10。

var x;
x = 10;

變數宣告其實有三個關鍵字可以用：var、let、const。
而 var 是舊版的用法。

var explosion = true;
const name = "megumin";
let age = 14;

註：目前 GAS 的 V8 Runtime 有個問題，就是記錄讀取的速度很慢。
而如果停用 V8 Runtime 的話，就代表不能使用 ES6 的語法，也就不能使用 let 跟 const 了。
如果是初學者的話，目前只需要知道 let 跟 const 的存在就好了。
如果你想知道為什麼要有 let 跟 const 的話，可以參考這篇文章。

賦值運算子(Assignment operator)

等號其實是賦值運算子(Assignment operator)。
它的意思是"把 10 指派給 x"，而不是"x 等於 10"。
例如下面的 x = y，就是把 y 指派給 x，要從右讀到左。

function myFunction() {
    var x = 10;
    var y = 5;
    x = y;
    Logger.log(x); // 5.0
}

你可以把這一段程式碼在 GAS 裡面執行看看。

• 執行特定函式：【執行】>【執行函式】> myFunction
• 查看記錄：【查看】>【記錄】(或是按 Ctrl + Enter)

算術運算子 (Arithmetic Operators)

加(+)、減(-)、乘(*)、除(/)、取餘數(%)、指數(**)

var x = 10;
var y = 5;

Logger.log(x+y);  // 15.0
Logger.log(x-y);  // 5.0
Logger.log(x*y);  // 50.0
Logger.log(x/y);  // 2.0
Logger.log(x%y);  // 0.0
Logger.log(x**y); // 100000.0

+= operator

x += 100 指的是 x = x + 100。
或著是說，讓 x 加上100。
其它還有-=、*=、/=、%=都是同樣的概念

var x = 10;
x += 100;
Logger.log(x); // 110.0

Increment & Decrement

就是加1跟減1

var x = 10;
var y = 5;

x++;
y--;

Logger.log(x); // 11.0
Logger.log(y); // 4.0

String 字串

被包在引號內的一串字就是字串。
把兩個字串+起來會把它們串在一起。

var title1 = "Arch ";
var title2 = "Wizard";
Logger.log(title1 + title2); // "Arch Wizard"

如果想要換行的話要輸入\n，這類字元叫作 Escape Character。

Logger.log("這是第一行\n這是第二行");

布林值 Boolean 與 Comparison Operator

布林值指的就是 true (真)跟 false(假)。

兩個等號(==)則是用來判斷兩個值是否相同。

var x = 10;
Logger.log(x == 11); // false

// && 代表 AND，||代表OR，!代表NOT
Logger.log(5 == 5 && 4 >= 2 && 12 < 15); // true

Function 函式

function 只要寫一次，之後就能重覆使用。
下面的 name ，是函式的參數(parameter)。

function sayHello(name) {
   Logger.log("Hello, " + name);
}

sayHello("Megumin"); // "Hello, Megumin"
sayHello("Aqua"); // "Hello, Aqua"

函式可以回傳(return)值。回傳之後的程式碼就不會被執行了。

function add5(x) { 
    return x + 5;
    Logger.log("這一行不會被執行");
}

var a = 100;
a = add5(a);
Logger.log(a); // 105.0

參數可以不只一個

function plus(x, y) {
    return x + y;
}

var a = plus(10, 15);
Logger.log(a); // 25.0

可以宣告沒有參數或是沒有回傳值的函式。

function explode() {
    Logger.log("Explosion!");
}

explode(); // "Explosion!"

Control Structures 控制流程

if (condition) {
    //statement
}

組成聊天機器人最重要的就是判斷接收到什麼訊息了。
像是這個樣子，假設botReply是一個回覆的函式：

var x = 0;

if (msg == "你好") {

    botReply("你好!");

} else if (msg == "再見") {

    botReply("再見");

} else if (msg == "你是誰") {

    botReply("megumin");

} else {

    botReply("explosion");

}

如果msg == "你好"，就會執行 botReply("你好!")。
如果前面的判斷都是 false，那就會執行 else 裡面的程式碼。

var x = 10;
var y = 100;

if (x == 5) {

    Logger.log("這一行不會被執行");

} else if (x == 10) {

    Logger.log("這一行會被執行");

} else if (y == 100) {

    Logger.log("這一行不會被執行");

} else {

    Logger.log("這一行不會被執行");

}

如果其中一個else if的判斷是true，那後面的判斷式就算true也不會被執行了。

Loop 迴圈

用 for 或是 while 可以重覆執行一段程式碼。

for

for (begin; condition; step) {
  // 重覆執行裡面的程式碼
}

begin 是初始化，condition 是判斷，step 是每次執行完裡面的程式碼之後要執行的指令。

for (var i = 0; i<5; i++) {
    Logger.log(i);
}

這段程式碼的意義是一開始把i設為0，條件是i<5時不斷執行，每執行完一次裡面的程式碼就讓i加上1。

輸出會是：

0.0
1.0
2.0
3.0
4.0

註：用 for (let i = 0; i<5; ++i) 會比較好，但停用 V8 Runtime 就沒辦法這樣寫了。

while

while 跟 for 很類似，要注意不要讓它停不下來。

while(condition){
    // 重覆執行裡面的程式碼
}

範例：

var x = 1;
while(x <= 100){
    Logger.log(x);
    x++;
}

break & continue

break 會跳出迴圈，continue則是執行下一次的迴圈。

var x = 0;
while(x <= 100){
  x++;

  if(x == 3){
      continue; // 當 x == 3，會直接跳過下面的 Logger.log()。
  }

  if(x == 6){
      break; // 當 x == 6，迴圈會終止，不會執行下面的 Logger.log()
  }

  Logger.log(x);
}

上面這段程式碼會輸出：

1.0
2.0
4.0
5.0

Array 陣列

陣列可以用來儲存一串資料。要注意的是陣列是從0開始數的。

var arr1 = ['a','b','c','d','e'];
Logger.log(arr1[3]); // d

Objects 物件

物件是由一個一個屬性與屬性值組成的，屬性值可以是數字、字串、陣列、函式、或是其他物件。
存取物件的屬性值有兩個方法：. 和 []

var ArchWizard = {
    //property 屬性 : property's value 屬性值
    name: "megumin",
    age: 14,
    "favorite spell": "explosion",
    family: {
        father: "Hyoizaburoo",
        mother: "Yuiyui",
        sister: "Komekko"
    }
}

//Dot notation
Logger.log(ArchWizard.age); // 14.0
Logger.log(ArchWizard.family.sister) // "Komekko"

//Bracket notation
Logger.log(ArchWizard['age']) // 14.0

結語

看到這裡你可能會想說，歐買尬，寫程式好難( º﹃º )

熟能生巧，多寫就會變強啦(ﾟ∀ﾟ)

下一篇惠惠就可以傳送文字和貼圖囉。

上一篇 | 回到系列文 | 下一篇