全域變數(Global Variable)
- 在function裡的變數稱為，區域變數。(範例一)
區域變數(Area Variable)
- 在function外的變數稱為，全域變數。(範例二)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/** 範例一 **/
function fn1(){
let a = "蘋果";
console.log(a); //蘋果
}
fn1();
/** 範例二 **/
let a;
function fn1(){
a = "蘋果";
}
fn1();
console.log(a); //蘋果
|
if、else if、else
- 可以使用多個 else if ，若不成立，則往下執行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
let hungry = 5;
//飢餓程度1~10
function eat(food){
console.log("我想要吃"+food);
}
if(hungry <= 3){
eat("薯條");
}else if(hungry > 3 && hungry <= 5){
eat("漢堡"); //我現在要吃漢堡
}else if(hungry == 8){
eat("炸雞");
}else{
console.log("我不想吃東西");
}
|
switch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
let hungry = 5;
//飢餓程度1~10
function eat(food){
console.log("我想要吃"+food);
}
switch(hungry){
case 3:
eat("薯條");
break;
case 5:
eat("漢堡"); //我想要吃漢堡
break;
case 8:
eat("炸雞");
break;
default:
console.log("我不想吃東西");
break;
}
|
for、array、object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
let fruits=[
{
name: "蘋果",
amount: 100,
prod: ["美國","日本"]
},
{
name: "香蕉",
amount: 300,
prod: ["台灣","泰國"]
},
{
name: "鳳梨",
amount: 500,
prod: ["夏威夷","新加玻"]
},
]
/** 範例一 **/
console.log(fruits[1].prod[0]); //台灣
/** 範例二 **/
for(let i=0 ; i<fruits.length ; i++){
console.log(fruits[i].name); //蘋果 //香蕉 //鳳梨
}
/** 範例三 **/
for(let i=0 ; i<fruits.length ; i++){
if(fruits[i].amount > 300){
console.log(fruits[i].name); //鳳梨
}
}
/** 範例四 **/
let total = 0;
for(let i=0 ; i<fruits.length ; i++){
total += fruits[i].amount;
}
console.log(total); //900
/** 範例五 **/
for(let i=0 ; i<fruits.length ; i++){
if(fruits[i].amount > 50){
console.log(fruits[i].name); //蘋果
}
break;
}
|
靜態載入JSON資料
- 先安裝Chrome擴充工具，JSONView可幫助檢視JSON檔案。
- 到政府資料開放平台(OpenData)。
- 將資料複製到js。
1
2
3
4
5
6
7
|
let data = [貼上JSON資料];
for(let i=0 ; i<data.length ; i++){
if( data[i]["行政區"] == "岡山區" ){
console.log( data[i]["臨時停車處所"] );
}
}
|
情境題:
服務員:請問您是VIP會員嗎?帳單有滿千元嗎?兩者達到可送贈品喔。
顧客: 我沒有。
服務員:抱歉，我記錯了，只要有達成一項就有送贈品，你有嗎?
顧客: 我有。
1
2
3
4
5
6
7
8
9
10
11
|
let isVIP = false;
//是否為VIP會員
let myBill = 1200;
//消費帳單金額
let checkAll = isVIP == true && myBill >= 1000;
//檢查兩樣是否都符合
console.log(checkAll); //false
let checkAllagain = isVIP == true || myBill >= 1000;
//檢查兩樣是否其中一項符合
console.log(checkAllagain); //true
|
情境題:
服務生:請問您是本月壽星嗎?
顧客:不是。
服務生:請問人數是不是還沒有到齊?
顧客:是。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
let myMonth = 2;
//顧客的生日月份
let nowMonth = 10;
//現在的月份
let checkBirthday = myMonth == nowMonth;
//檢查月份是否相符
console.log(checkBirthday); //false
let nowPeople = 1;
//目前人數
let = 2;
//預定人數
let checkPeople = nowPeople !== totalPeople
//目前人數是不是不等於預定人數
console.log(checkPeople); //true
|
情境題:
漢堡一個50元，可樂一杯20元，
若要5個漢堡，3杯可樂，請問總共要多少元?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/** 範例一 **/
let humPrice = 50;
let cokePrice = 20;
let total = (humPrice * 5) + (cokePrice * 3);
console.log(total); //310
/** 範例二 **/
function fn1(humPrice,cokePrice){
let total = (humPrice * 5) + (cokePrice * 3);
console.log(total); //310
}
fn1(50,20);
/** 範例三 **/
function fn1(humPrice,cokePrice){
let total = (humPrice * 5) + (cokePrice * 3);
return total;
}
let a = fn1(50,20);
console.log(a); //310
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// <-----html----->
span 漢堡
input#hamNum(style="width:30px" type="text")
span 個，
span 可樂
input#cokeNum(style="width:30px" type="text")
span 個，
input#calBtn(type="button" value="計算")
span 總共是:
span#total
span 元
// <-----js----->
let calBtn = document.getElementById("calBtn");
calBtn.onclick = function(){
let hamNum = parseInt(document.getElementById("hamNum").value);
let cokeNum = parseInt(document.getElementById("cokeNum").value);
let totalPrice = (hamNum * 50) + (cokeNum * 20);
let total = document.getElementById("total");
total.textContent = totalPrice;
}
|
從input裡取出的value值都是string型別
其他相關