Javascript
先到我們的開發環境去
如何使用呢？
直接在console輸入
- 輸入數字
- 輸入字串(使用 "" or '' )
四則運算
- 加法 +
- 減法 -
- 乘法 *
- 除法 /
- 括號先運算 ()
- 取餘數 %
字串相加
- "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 variable_name= 意思是將右邊的值丟到左邊去
與數學的等於不同
var name = "YoYo"
var grade = 3name = "祐祐"用來改變變數的值
就像把玻璃瓶填滿某種液體
變數命名規則
- 不可以數字開頭
- 不可使用保留字
- 區分大小寫
使用變數!!
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 + "UU"/* 我不會顯示
你看不見我
你看不見我
你看不見我
你看不見我
你看不見我
你看不見我
你看不見我
*/練習時間
程式碼練習2：
宣告一個變數，指定其初始值為 Javascript，並使用 console.log 印出以下圖案
練習時間
程式碼練習3：
請依照以下程式碼的指示在 repl.it 網站執行
console.log("請輸入你的大名：");
var name = prompt();
console.log('Hello, ' + name);
// Step 1: 複製這段程式碼到 repl.it
// Step 2: 執行這段程式碼
// prompt() 是原生函式練習時間
程式碼練習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("你很誠實")迴圈
讓電腦幫你做一件事做數千數萬遍
for 迴圈
- 第一格：進入迴圈時進行的
- 第二格：每次執行 {} 內的程式碼之前會檢查時，若為false則跳出迴圈
- 第三格：每次執行完一次 {} 內的程式碼，之後所要執行的事情
for (var i = 0; i <= 100; i++){
console.log(i*i)
}for 有三格(用 ; 隔開)
練習時間
程式碼練習5：
運用 for 迴圈，印出 九九乘法表
1 * 1 = 1
1 * 2 = 2
1 * 3 = 3
1 * 4 = 4
1 * 5 = 5
1 * 6 = 6
1 * 7 = 7
1 * 8 = 8
1 * 9 = 9
---------
...練習時間
程式碼練習6：
宣告一個變數 score，當 score 為 0~59 時顯示 Fail
當 score 為60~100 時顯示 Pass，其餘輸出 Oops!
好好運用判斷式
console.log("請輸入分數：");
var score = prompt();
// 輸入方法
目前分數： 59
Fail
目前分數： 100
Pass
目前分數： pass
Oops Something Wrong陣列
簡單來說就是把一堆變數用編號串起來
- 用 [] 表示
- 變數名稱後面加上 [<編號>] 來存取值
var people = [];
var people = ['學妹','學弟','這學期教你的教授','之前當過你的教授'];people[0]; // '學妹'
people[2]; // '這學期教你的教授'
people[3]; // '之前當過你的教授'for(i = 0 ; i <= 3 ; i++){
console.log(people[i]);
}
console.log(peoples);【注意】
去找拿不到的編號時，會得到 undefined
JS不會對此噴錯誤
函式 function
把要做的事情打包
例如
function check_score(score) {
console.log('目前分數： ' + score)
var fail = score < 60;
if(fail)
console.log('Fail\n')
else if(score <= 100)
console.log('Pass\n')
else console.log('Oops Something Wrong\n')
}
check_score(59)
check_score(100)
check_score('pass')確認分數
例如
function meet_a_person(){
array = ['學妹','學弟','這學期教你的教授','之前當過你的教授']
return a[Math.floor(Math.random()*4)];
}
// 這沒有傳入值(參數)
// random 是隨機遇到一個人遇到一個人
物件 Object
範例
var myself = new Object();
myself.name = "YoYo";
myself.age = "19";
myself.height = "infinite";
console.log(myself);
// {key: value} 的對應使用框架 framework
Vue.js
範例
看懂 OOXX
有任何問題都可以提問哦
學習程式是靠熱忱和找自己麻煩(?
最重要的還是要自己主動學習
吃午餐吧！
JavaScript
By Hao-You Hung
