Javascript

先到我們的開發環境去

http://repl.it/languages/JavaScript

如何使用呢？

直接打

  • 輸入數字
  • 輸入字串(使用"或')

四則運算

  • 加法 +
  • 減法 -
  • 乘法 *
  • 除法 /
  • 括號先運算 ()
  • 取餘數 %

字串相加

  • "Hello, " + "World"
  • "我的第" + 1 + "個程式"

教大家其他指令囉~

跳脫純運算的指令

console.log(數值)

把數值印出來

有點類似printf 或者 cout

把他們印出來~

console.log(8)
console.log("大家好")
console.log("我正在學習" + " Javascript")
console.log(18/9*(2+1)%5)

練習時間

程式碼練習1：

我今天出門去早餐店買了一份蛋餅和一杯溫紅茶，蛋餅一份 25 元，紅茶一份 15 元，剛好今天蛋餅打 8 折，於是我開心地買了早餐上學。

請問我買早餐一共花了多少錢。(用程式印出計算式和答案)

要使用多行指令囉

介紹左半邊

變數

在執行的過程中，一個暫存資料的地方

Javascript的變數宣告

var 變數名稱

= 意思是將右邊的值丟到左邊去

與數學的等於不同

var name = "周彤"
var grade = 3
name = "彤彤"

用來改變變數的值

變數命名規則

  • 不可以數字開頭
  • 不可使用保留字
  • 區分大小寫

使用變數!!

var city = "台中市"
var degree = 28 

console.log(city)
console.log(degree)
console.log("現在所在城市：" + city)
console.log("現在溫度：" + degree + "度C" )

var decrease = 5
degree = degree - decrease

console.log("預計傍晚溫度：" + degree + "度C")

對變數做運算

degree += 1
console.log( degree )

degree -= 1
console.log( degree )

degree *= 2
console.log( degree )

degree /= 2
console.log( degree )

name += "彤"
console.log( name )

更奇妙的寫法

degree ++
console.log(degree)

degree --
console.log(degree)

如何讓程式可讀性增加?

除了取名字的美學外

註解也是很幫助的哦~

 如何使用註解?

  • 單行註解 //
  • 多行註解 /**/
degree += 1
// degree = degree + 1

degree -= 1
// degree = degree - 1

degree *= 2
// degree = degree * 2

degree /= 2
// degree = degree / 2

name += "彤"
// name = name + "彤"
/* 我不會顯示
你看不見我
你看不見我
你看不見我
你看不見我
你看不見我
你看不見我
你看不見我
*/

練習時間

程式碼練習2：

宣告一個變數，指定其初始值為 Javascript，並使用 console.log 印出以下圖案

練習時間

程式碼練習3：

請依照以下程式碼的指示在 repl.it 網站執行

var a;
console.log('a = ' + a)

// Step 1: 複製這段程式碼到 repl.it
// Step 2: 執行這段程式碼
// Step 3: 直接在右側的視窗輸入 a = 10
// Step 4: 然後再執行一次這個程式碼
// Step 5: 直接在右側黑黑的視窗輸入 a = 'A plain text'
// Step 6: 再執行一次程式碼

練習時間

程式碼練習4：

宣告兩個不同的變數a, b，請寫一個程式讓a, b的值互相交換

  • 先印出a和b的資料
  • 將a和b的資料進行交換
  • 再印出一次a和b的資料

     

布林值

僅存在 是 或 否

true or false

如何產生布林值?

請問252是否比652大?

252 > 652 → false

>, <, >=, <=, ==, !=

請問馬和鹿是否一樣?

"馬" == "鹿" → false

電腦不會指鹿為馬的ㄎㄎ

布林可以做甚麼?

常常拿來作流程控制

if, else ...

回想上個星期的遊戲

基本流程控制

if(true){
    console.log("我會被顯示")
}
if(false){
    console.log("我不會被顯示")
}
else{
    console.log("我才會被顯示")
}

產生布林值，並運用

若 689 比609大，請說!!，否則說??

var a = 689, b = 609;
if(a > b)
    console.log("!!")
else
    console.log("??")

若馬和鹿一樣，請說指鹿為馬，否則說你很誠實

var h = '馬', d = "鹿";
if(h == d)
    console.log("指鹿為馬...")
else
    console.log("你很誠實")

再用布林產生布林

如果( (若馬與鹿一樣) 且 (689比609大) )

var and_op = (h == d) && (b > g);
console.log(and_op) // false

&& → 且

如果 ( (若馬與鹿一樣) 或 (689比609大) )

var or_op = (h == d) || (b > g)
console.log(or_op) // true

|| → 或

練習時間

程式碼練習5：

宣告一個名為q的變數並指定其初始值為5

讓變數每次都加1，連續加到q 等於 16 為止

在q的值介於12到15之間時，印出 "q = ?"

練習時間

程式碼練習6：

有一台計程車計費方式為：里程數在1500公尺下皆為70元，超過的里程數以每500公尺加價5元計算

請寫一程式計算車費

console.log("請輸入里程數：");
var mater = prompt();

Hint

↑這樣取得里程數哦↑

練習時間

程式碼練習7：

宣告一個變數 score，當 score 為0~59時顯示 Bad

當 score 為60~100 時顯示 Good，其餘輸出 Oops!

console.log("請輸入分數：");
var score = prompt();

Hint

↑這樣取得分數哦↑

我們來點情境吧，情境一

走在路上時，遇到一個人

如果是學妹，則...

如果是學弟，則...

如果是這學期教你的教授，則...

如果是之前當過你的教授，則...

把下面這個輸入，他會隨機幫你遇到一個人

function meet_a_people(){
    return ['學妹','學弟','這學期教你的教授','之前當過你的教授'][Math.floor(Math.random()*4)];
}
the_people_you_meet = meet_a_people();
if(the_people_you_meet == '學妹')
    console.log("學妹你好啊～最近怎麼樣啊～？");
else if(the_people_you_meet == '學弟')
    console.log("...");
else if(the_people_you_meet == '這學期教你的教授')
    console.log("教授好！");
else if(the_people_you_meet == '之前當過你的教授')
    console.log("ヽ(#`Д´)ﾉ");

在這種情況下

有另外一種流程控制

switch ... case ...

Title Text

the_people_you_meet = meet_a_people();
switch(the_people_you_meet) {
    case '學妹':
        console.log("學妹你好啊～最近怎麼樣啊～？");
        break;
    case '學弟':
        console.log("...");
        break;
    case '這學期教你的教授':
        console.log("教授好！");
        break;
    case '之前當過你的教授':
        console.log("ヽ(#`Д´)ﾉ);
        break;
    default:
        console.log("╮(╯_╰)╭...你誰啊");
}

我們來點情境吧，情境二

走在路上時，遇到一百個人

要分別對每個人做情境一做的事情

迴圈

讓電腦幫你做一件事做數千數萬遍

回想上個星期的遊戲

for 迴圈

  • 第一格：進入迴圈時進行的
  • 第二格：每次執行 {} 內的程式碼之前會檢查時，若為false則跳出迴圈
  • 第三格：每次執行完一次 {} 內的程式碼，之後所要執行的事情
for (var i = 0; i <= 100; i++){
    //do something...
}

for 有三格(用 ; 隔開)

回到我們的情境二

for(i = 0 ; i <= 100 ; i++){
    the_people_you_meet = meet_a_people();
    if(the_people_you_meet == '學妹')
        console.log("學妹你好啊～最近怎麼樣啊～？");
    else if(the_people_you_meet == '學弟')
        console.log("...");
    else if(the_people_you_meet == '這學期教你的教授')
        console.log("教授好！");
    else if(the_people_you_meet == '之前當過你的教授')
        console.log("ヽ(#`Д´)ﾉ");
}

while 迴圈

只有一格，只要那格為true 就會不斷執行

var i = 0
while(i <= 100){
    the_people_you_meet = meet_a_people();
    if(the_people_you_meet == '學妹')
        console.log("學妹你好啊～最近怎麼樣啊～？");
    else if(the_people_you_meet == '學弟')
        console.log("...");
    else if(the_people_you_meet == '這學期教你的教授')
        console.log("教授好！");
    else if(the_people_you_meet == '之前當過你的教授')
        console.log("(ﾉ｀⊿´)ﾉ");

    i++;
}

我們來點情境吧，情境三

走在路上時，遇到100個人

要分別把每個人的身分記下來...

陣列

簡單來說就是把一堆變數用編號串起來

  • 用 [] 表示
  • 變數名稱後面加上 [<編號>] 來存取值
var people = [];
var people = ['學妹','學弟','這學期教你的教授','之前當過你的教授'];
var array[0]; // '學妹'
var array[2]; // '這學期教你的教授'
var array[3]; // '之前當過你的教授'
var peoples = [];
for(i = 0 ; i <= 100 ; i++){
    peoples[i] = meet_a_people();
}
console.log(peoples);

【注意】

去找拿不到的編號時，會得到 undefined

JS不會對此噴錯誤

謝謝~~

有任何問題都可以提問哦

學習程式是靠熱忱和找自己麻煩(?

最重要的還是要自己主動學習

Made with Slides.com