這是「給不會寫程式的人的惠惠機器人開發攻略」的第三篇。
這會是一篇非常基本的 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
結語
看到這裡你可能會想說,歐買尬,寫程式好難( º﹃º )
熟能生巧,多寫就會變強啦(゚∀゚)
下一篇惠惠就可以傳送文字和貼圖囉。