做動畫學物理‧課堂活動02

認識JavaScript(1/3)

任務

1. 宣告變數
2. 基礎型別與物件型別
3. function
4. operator運算子
5. if判斷
6. for迴圈

[先下載半成品]

1. 宣告變數

(編輯myScript.js，輸入)

var aa = 12;//宣告一個變數，名為 aa，設值為「數字12」
var bb = '13';//宣告一個變數，名為 bb，設值為「字串13」
var cc = "哈囉，世界！";//用單引號 ' 或雙引號 " 包起來的都是字串
var dd = true;//布林值 true/false
var ee;//宣告但未定義

console.log('aa='+aa);
console.log('bb='+bb);
console.log('cc='+cc);
console.log('dd='+dd);
console.log('ee='+ee);
        

存檔 / 更新 / 看主控台

變數命名原則一

英/數半形

開頭不可為數字

不可中文

不可符號，但可底線_

要避開保留字，ex: var, if, function, for

變數命名原則二

變數的命名應該讓人一看就懂

變數可能是一句英文
第一單字第一字母小寫，之後單字字母大寫，不留空白

var myName = 'HAHA';//我的名字 HAHA
var gameLevel = 3;//玩到第3關
var isPlayer1GoingToHome = false;//玩家1是否正在回家
var stepsPlayer1GoingToHome = 12;//玩家1回家走了幾步
        

好的命名讓你寫程式有效率
爛的命名讓你debug會抓狂

2. 基礎型別與物件型別

javaScript 有五種基礎型別(Primitive Type)

其他都是物件型別(Object Type)

3. function

狀況：試用js解出下列問題

1. (5 + 7) x (8 + 14) = ?

2. (8 + 7) x (9 + 14) = ?

3. (62+ 7) x (53+ 14) = ?

4. (98+ 7) x (76+ 14) = ?

5. (239+7) x (756+14) = ?

有看到重複性嗎？

現在，把 +7 改成 +8，你要改幾次？

用 function 取代重複的程式

(編輯myScript.js，輸入)

function add5x2(a){
  return (a+5)*2;
}
console.log(add5x2(7));//24
console.log(add5x2(8));//26
        

輸入引數 a，傳回 (a+5)*2

function = 函數 / 程式 / 方法

可以想像成一座工廠

function  工廠名稱  ( 輸入引數 ) {

do something;

do something;

return  傳回的值;

}

function 裡還可以有變數

//回答前面的數學題
function addAndMultiply(_a, _b){
  var a1 = 7;
  var a2 = 14;
  
  var anser = (_a + a1)*(_b + a2);

  return anser;
}
console.log(addAndMultiply(5 , 8));
console.log(addAndMultiply(8 , 9));
console.log(addAndMultiply(62 , 53));
console.log(addAndMultiply(98 , 76));
console.log(addAndMultiply(239 , 756));
        

如果要把 +7 改成 +8

只要改第 3 行就好了

  var a1 = 8;
        

自訂好用 function

我的 myScript.js 開頭，一定是

function log(e){
  console.log(e);
}
        

這樣，以後都不用

console.log(e);
        

只要

log(e);
        

方便多了

4. operator運算子

算術運算子，初始 y = 5

設定運算子，初始 x = 10

邏輯運算子，初始 x = 5

5. if 判別式

var x = 8;
if((x % 2) === 0){
    //if 判別式 true，執行{裡的內容}
    log('x是偶數');
}
        

換 x = 7 試試看

if...else...

var x = 8;
if((x % 2) === 0){
    //if 判別式 true，執行
    log('x是偶數');
}else{
    //if 判別式 false，執行
    log('x不是偶數，但也不一定是奇數');    
}
        

換 x = 'apple' 試試看

if...else if...else

var x = 8;
if((x % 2) === 0){
    //if 判別式 true，執行
    log('x是偶數');
}else if((x % 2) === 1){
    //第一個 if 判別式 false，這一個 if 判別式 true，執行
    log('x是奇數');
}else if((typeof x) === 'string'){
    log('x是文字');
}else{
    log('x不是奇數，不是偶數，不是文字');
}
        

1.換 x = 'apple' 試試看

2.換 x = '23' 試試看???

3.換 x = true 試試看???

4.換 x = undefined 試試看

提醒

javaScript 是“弱型別”的程式語言

允許執行/運算時期強制轉型

但常常變得難以預測，應避免強制轉型

6. for 迴圈

看看這段 js 程式

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
...
console.log(100);
        

重複性高，有沒有更聰明的作法

for loop

for( var i = 1 ; i <= 100 ; i++ ){
    console.log(i);
}
        

for  (  初始化  ;  判別式  ;  增加  )  {

do something;

do something;

}