js --基本語法2
阿新 • • 發佈：2018-11-27
複習 :
1. JS 引入方式
1. 元素事件繫結
onclick = "JS 語句"
2. <script>
JS 程式碼
</script>
3. 外部JS檔案
<script src=""></script>
2. JS 資料型別
Number String Boolean undefined null
3. 資料型別轉換
1. 自動型別轉換
et :
"100" + "10" ; //"10010"
"100" + 10; //
"100" + true; //"100true"
"100" - 10; //90
"100" - true; //99
"100a" - 10; //NaN
2. 強制型別轉換
1. number / boolean 轉 string
toString()
et :
var num = 100;
num = num.toString();
2. string 轉 number
1. Number()
et :
var s = "100";
s = Number(s);
var s1 = "100a";
s1 = Number(s1); //NaN
2. 解析數字
方法 :
parseInt() parseFloat()
et :
var s = "12.5a";
s = parseInt(s); //12
var s2 = "a12";
parseFloat(s2); //NaN
3. 運算子
1. 賦值運算子
2. 數學運算子 + - * / %
3. 自增和自減 ++ --
et :
var a = 10;
a --;
-- a; //8
var r = a --; //r=8,a=7
var r2 = -- a; // r2=6,a=6
4. 變數/常量
變數 var
常量 const
------------------------------
day 08
1. 運算子
1. 賦值運算子
2. 算數運算子
3. 自增自減運算子
4. 關係運算符(比較)
運算子 : > < >= <= ==(相等) !=(不想等)
===(恆等) !==(不恆等)
使用 :
關係運算符用來判斷表示式之間的關係,判斷結果為布林值,
1. number之間的比較
根據數值比較大小或相等
10 > 5; // true
2. number與string之間的比較
會將string轉換為number再進行比較
NaN與其他型別結合運算的結果都是NaN,關係運算中結果為
false
3. number 與 boolean
boolean值會轉換為number :
true = 1
false = 0
再進行數值比較
4. string 與 string 比較
字串之間的比較,根據每位字元的Unicode碼值進行
比較,如果當前位碼值相同,繼續比較下一位字元
相等與恆等
相等 : 判斷兩個運算元值是否相等,包含自動型別轉換
"10" == 10
恆等 : 判斷運算元是否恆等,要求資料型別保持一致,值
相等,不會進行資料型別轉換
"10" === 10
不等與不恆等
不等 : 值不相等,返回true
不恆等 : 值或資料型別只要有一個不同,返回true
5. 邏輯運算子
邏輯與 : &&
邏輯或 : ||
邏輯非 : !
使用 : 邏輯運算子主要用來結合條件表示式,返回結果是
布林型別
1. 邏輯與 :
condition1 && condition2
兩個條件都為真,結果為真
有一個為假,結果為假
et:
10 > 5 && "10" > "5" // true && false ->false
2. 邏輯或
條件1 || 條件2
只要有一個條件為真,結果為真
兩個條件都為假,結果為假
3. 邏輯非
! 條件
對當前條件表示式的結果取反
非真即假,非假即真
et :
! 10;
任何非零資料,都為真
練習 :
1. 接收使用者輸入的年份,判斷是否是閏年
閏年 : 能被400整除
能被4整除不能被100整除
2. 接收使用者輸入的字元(單個)
判斷使用者輸入的字元
是英文嗎
是中文嗎
是數字嗎
返回判斷結果
6. 位運算子
位與 : &
位或 : |
異或 : ^
使用 :
對資料的二進位制中的每一位進行操作
1. 位與 : 是每一位進行與操作,都為1,結果為1
et :
3 & 5;
011
& 101
------
001 -> 1
使用 :
任何數與數字1進行位與操作,結果為1, 表示運算元為
奇數,為0表示運算元為偶數.
判斷奇偶 :
3 & 1 //011 & 001 = 001 1 奇數
2 & 1 //010 & 001 = 000 0 偶數
2. 位或 : 有1則1
3 | 5
011
| 101
------
111 -> 7
3. 異或 : 相同為0,不同為1
3 ^ 5
011
^ 101
------
110 -> 6
使用 :
異或可以在不借助中間變數的情況下,互換兩個變數的值
練習 :
var a = 100,b = 200;
var c = a;
a = b; // a = 200;
b = c;
----------
var m = 3,n = 5;
m = m ^ n; //6
n = m ^ n; //6 ^ 5 -> 110 ^ 101 = 011 ->3
m = m ^ n; //6 ^ 3 -> 110 ^ 011 = 101 ->5
7. 三目運算子(三元運算子)
根據運算元的個數劃分運算子
三目 : 有三個運算元
語法 :
表示式1 ? 表示式2 : 表示式3;
執行 :
1. 判斷表示式1的結果 (true/false)
2. true : 執行表示式2,返回結果
3. false : 執行表示式3,返回結果
et :
var age = 30;
var res = age > 28 ? "人到中年不得已" : "還年輕,繼續浪";
//res : ""
練習 :
1. 成績判定 :
接收使用者輸入的成績 score
score >= 90 返回"A"
score >=80,<90 返回"B"
score >=60,<80 返回"C"
score < 60 返回"D"
2. BMI 指數
接收使用者輸入的身高 (m)
接收使用者輸入的體重 (kg)
計算BMI指數 : bmi = weight / (height *height)
保留小數點後兩位
bmi > 23.9 偏胖
bmi < 18.5 偏瘦
中間值 健康
2. 流程控制
1. 流程控制主要用來控制程式碼的執行順序
2. 流程控制結構
1. 順序結構
程式碼自上而下順序執行
2. 分支結構
選擇某一段程式碼執行
3. 迴圈結構
重複執行某一段程式碼
3. 分支結構(選擇結構)
1. if 語句
1. 語法一 :
if(條件表示式){
條件成立時執行的程式碼
}
使用 :
1. {}可以省略,省略之後,if語句只控制後面的
第一條程式碼語句
2. 非零資料都為真,零為假
以下情況,條件都為假
if (0) {}
if ("") {}
if (0.0)
if (NaN)
if (null)
if (undefined)
2. 語法二 : if - else
if (){
條件成立時執行
} else{
條件不成立時執行
}
3. 多重分支 : if - else if ...
if (條件1) {
條件1成立時執行
}else if(條件2){
條件2成立時執行
}...else if(條件n){
}else{
//最終情況
}
練習 :
1. 判斷成績等級
2. 計算天數
由使用者輸入年 月 日
判斷當日是該年的第幾天
et :
2018 3 15
2. switch 語句
主要用來做值匹配,值恆等時,執行某段程式碼
語法 :
switch (變數){
case 值1 :
值匹配恆等,執行的操作
break; //結束匹配
case 值2 :
程式碼語句
break;
...
default :
//匹配失敗之後預設執行的操作
break;
}
使用 :
1. switch 判斷值,用的是恆等,要求資料型別和值
都相等才能匹配成功
2. case 用來列出所有可能的值,一旦與變數匹配恆等,
就執行當前case中的語句
3. default 表示匹配失敗之後執行的操作,不用給值
一般寫在末尾
4. break,表示跳出匹配,不再向後執行.
可以省略,省略之後,表示從當前匹配到的case
向後執行所有的程式碼語句,直至結束
5. case 可以共用程式碼語句,列出所有相關的情形,
共用一組執行語句 :
語法 :
case 值1:
case 值2:
case 值3:
...
case 值 :
程式碼語句
break;
練習 :
改版日期計算器
4. 迴圈結構
1. 迴圈三要素 :
迴圈變數;
迴圈條件;
迴圈體;
2. 分類 :
1. while 迴圈
1. 語法 :
定義迴圈變數;
while (迴圈條件){
迴圈體
更新迴圈變數
}
2. 流程 :
1. 定義迴圈變數
2. 判斷迴圈條件
3. 條件成立,執行迴圈體
4. 更新迴圈變數(定義迴圈結束條件)
5. 重複2 - 3 - 4
2. do - while 迴圈
1. 語法 :
do {
迴圈體
}while(迴圈條件);
2. 流程 :
1. 定義迴圈變數
2. 執行迴圈體,更新迴圈變數
3. 判斷迴圈條件,條件成立,重複2-3
條件不成立,結束迴圈
3. while 與 do-while的區別
1. while迴圈首先判斷迴圈條件是否成立,
不成立不執行迴圈體
2. do-while迴圈首先執行一次迴圈體,再判斷
迴圈條件,決定是否開始下一次迴圈.
無論條件是否成立,do-while都至少執行一次
迴圈體.
練習 :
1. 迴圈接收使用者輸入的資料,並在控制檯輸出,
直到使用者輸入"exit",跳出迴圈
2. 使用迴圈改版日期計算器
3. for 迴圈
1. 語法 :
for(初始化迴圈變數;定義迴圈條件;更新迴圈變數){
迴圈體
}
2. 流程 :
1. 初始化迴圈變數
2. 判斷迴圈條件
3. 迴圈條件成立,執行迴圈體
4. 更新迴圈變數,重複2 - 3 - 4,直至跳出
3. for 迴圈與while迴圈比較 :
1. for與while 迴圈,執行流程相同,書寫語法不同
2. for迴圈更常見於確定迴圈次數的場合
while迴圈更適用於不確定迴圈次數的場合
4. 迴圈控制
1. break
表示結束迴圈,不管還有多少次
2. continue
表示跳出本次迴圈,開始下一次迴圈
5. 迴圈巢狀
在迴圈體中巢狀其他的迴圈
et :
控制檯輸出圖案
*
**
***
****
*****
每行的行數等於星星數
作業 :
1. 輸出1-100之間所有的素數
只能被1和自身整除的數
2. 接收使用者輸入的年月日,
判斷當日是星期幾
已知 : 1990-01-01是星期一
3. 圖案 :
*
***
*****
*******
*********
4. 控制檯輸出99乘法表