二、選擇結(jié)構(gòu)
目錄
? ? ? ? ?1.三大核心
? ? ? ? ?2.window對象的常用方法
1.JavaScript的組成
1.三大核心
ESMAScript 核心語法（標準規(guī)范）-> ES6
BOM 瀏覽器對象模式，其實就是window對象，該對象可以操作瀏覽器
DOM 文檔對象模型，其實就是document對象，該對象可以操作網(wǎng)頁里面的所有元素
2.window對象的常用方法
1.alert()方法，用于打開消息框
2.prompt()方法，用于打開輸入框，輸入框返回的數(shù)據(jù)的類型是string類型
3.confirm()方法，用于打開確定框，確認框里面有兩個按鈕，確定和取消，點擊確定按鈕返回true，點擊取消按鈕返回false
4.parseInt()方法，用于將字符串數(shù)據(jù)強轉(zhuǎn)為整型
5.parseFloat()方法，用于將字符串數(shù)據(jù)強轉(zhuǎn)為浮點型
6.isNaN()方法，用于判斷一份數(shù)據(jù)是不是NaN數(shù)據(jù)（not a number）
代碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>window對象的常用方法</title>
</head>
<body>
? ? <script>
? ? ? ? // window對象是js的內(nèi)置對象，用于操作BOM，它里面提供了很多操作瀏覽器的方法。
? ? ? ? // console.log(window);
? ? ? ? // 彈框方法：
? ? ? ? // alert()方法，用于打開消息框
? ? ? ? // window.alert('你好')
? ? ? ? // prompt()方法，用于打開輸入框，該方法會返回輸入的結(jié)果，類型是字符串
? ? ? ? // var name = window.prompt('請輸入姓名：')
? ? ? ? // console.log(name);
? ? ? ? // confirm()方法，用于打開確認框，該方法的返回值是boolean類型
? ? ? ? // var isok = window.confirm('確定分手嗎？')
? ? ? ? // console.log(isok);
? ? ? ? // 類型轉(zhuǎn)換方法：
? ? ? ? var str1 = '100.55'
? ? ? ? console.log(typeof str1);
? ? ? ? // parseInt()方法，用于將字符串強轉(zhuǎn)為整型
? ? ? ? // 注意：window對象是瀏覽器的默認對象，所以在實際使用時，可以省略
? ? ? ? var num1 = parseInt(str1)
? ? ? ? console.log(str1);
? ? ? ? console.log(num1);
? ? ? ? console.log(typeof num1);
? ? ? ? // parseFloat()方法，用于將字符串強轉(zhuǎn)為浮點型
? ? ? ? var num2 = parseFloat(str1)
? ? ? ? console.log(num2);
? ? ? ? console.log(typeof num2);
? ? ? ? // isNaN()方法，用于判斷一份數(shù)據(jù)是不是NaN數(shù)據(jù)（not a number）
? ? ? ? // 就是判斷一個數(shù)據(jù)，是不是不是數(shù)字，不是數(shù)字返回true，是數(shù)字返回false。
? ? ? ? var str2 = '100'
? ? ? ? var str3 = '100.55'
? ? ? ? var str4 = '你好呀'
? ? ? ? console.log(isNaN(str2));
? ? ? ? console.log(isNaN(str3));
? ? ? ? console.log(isNaN(str4));
? ? </script>
</body>
</html>
控制臺顯示為：
2.if選擇結(jié)構(gòu)
if選擇結(jié)構(gòu)的語法是：if(判斷條件){滿足條件之后，執(zhí)行的代碼塊}
if-else選擇結(jié)構(gòu)，if()里面的條件成立執(zhí)行if{}里面的代碼塊，否則執(zhí)行else{}里面的代碼塊
注意：當if或者else里面只有條件語句的時候，可以省略{}
代碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>if選擇結(jié)構(gòu)</title>
</head>
<body>
? ? <script>
? ? ? ? // 如果比賽成績在80分以上，將獲得400元
? ? ? ? var score = 20
? ? ? ? // if()里面寫條件，條件返回true，執(zhí)行{}里面的代碼
? ? ? ? if(score>=80){
? ? ? ? ? ? console.log('獲得400元');
? ? ? ? }
? ? ? ? console.log('----------------------------');
? ? ? ? // 如果比賽成績在60分以上，獲得200元，否則罰抄50遍
? ? ? ? if(score>=60){
? ? ? ? ? ? console.log('獲得200元');
? ? ? ? }else{
? ? ? ? ? ? // else語句，一定要配合if語句，不能單獨使用。
? ? ? ? ? ? // 在if不成立的時候，執(zhí)行else語句。
? ? ? ? ? ? console.log('罰抄50遍');
? ? ? ? }
? ? ? ? console.log('----------------------------');
? ? ? ? // 當if 和 else 的代碼塊只有一條語句時，可以省略{}
? ? ? ? if(score>=70)
? ? ? ? ? ? console.log('獎勵100元');
? ? ? ? else
? ? ? ? ? ? console.log('罰抄50遍');
? ? </script>
</body>
</html>
控制臺顯示為：
3.多重if選擇結(jié)構(gòu)
多重if選擇結(jié)構(gòu)里面，滿足其中一個條件，執(zhí)行該條件對應的代碼，執(zhí)行完成后跳出整個程序結(jié)構(gòu)。
如果所有的條件都不成立，有else，就執(zhí)行else；沒有else，整個程序結(jié)構(gòu)結(jié)束。
練習題：
如果有5000萬，在北京買房子
如果有3000萬，在上海買房子
如果有1000萬，在深圳買房子
如果有800萬，在廣州買房子
如果有300萬，在南京買房子
否則，不買房子
代碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>多重if選擇結(jié)構(gòu)</title>
</head>
<body>
? ? <script>
? ? ? ? /*
? ? ? ? ? ? 如果有5000萬，在北京買房子
? ? ? ? ? ? 如果有3000萬，在上海買房子
? ? ? ? ? ? 如果有1000萬，在深圳買房子
? ? ? ? ? ? 如果有800萬，在廣州買房子
? ? ? ? ? ? 如果有300萬，在南京買房子
? ? ? ? ? ? 否則，不買房子
? ? ? ? */
? ? ? ? // 多重if選擇結(jié)構(gòu)里面，滿足其中一個條件，執(zhí)行該條件對應的代碼，執(zhí)行完成后跳出整個程序結(jié)構(gòu)。
? ? ? ? // 所以，使用多重if選擇結(jié)構(gòu)時，判斷大于要先比較大的數(shù)，判斷小于要先比較小的數(shù)。
? ? ? ? var money = parseInt(prompt('請輸入您的存款(單位:萬)'))
? ? ? ? if (money >= 5000) {
? ? ? ? ? ? alert('在北京買房子')
? ? ? ? } else if (money >= 3000) {
? ? ? ? ? ? alert('在上海買房子')
? ? ? ? } else if (money >= 1000) {
? ? ? ? ? ? alert('在深圳買房子')
? ? ? ? } else if (money >= 800) {
? ? ? ? ? ? alert('在廣州買房子')
? ? ? ? } else if (money >= 300) {
? ? ? ? ? ? alert('在南京買房子')
? ? ? ? } else {
? ? ? ? ? ? alert('否則，不買房子')
? ? ? ? }
? ? </script>
</body>
</html>
彈框顯示為：
4.嵌套if選擇結(jié)構(gòu)
嵌套if選擇結(jié)構(gòu)：就是在一個完整的if或者else的結(jié)構(gòu)中，繼續(xù)使用if結(jié)構(gòu)語句。
練習題：
請輸入是否是會員，輸入y是會員，輸入n不是會員
請輸入消費金額
會員：消費打8折，滿100元打6折
非會員：消費滿200元打9折，不滿200元不打折
最后輸出本次實際消費金額
代碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>嵌套if選擇結(jié)構(gòu)</title>
</head>
<body>
? ? <script>
? ? ? ? // 嵌套if選擇結(jié)構(gòu)：就是在一個完整的if或者else的結(jié)構(gòu)中，繼續(xù)使用if結(jié)構(gòu)語句。
? ? ? ? /*
? ? ? ? ? ? 練習題：
? ? ? ? ? ? 請輸入是否是會員，輸入y是會員，輸入n不是會員
? ? ? ? ? ? 請輸入消費金額
? ? ? ? ? ? 會員：消費打8折，滿100元打6折
? ? ? ? ? ? 非會員：消費滿200元打9折，不滿200元不打折
? ? ? ? ? ? 最后輸出本次實際消費金額
? ? ? ? */
? ? ? ? var ishy = prompt('是否是會員(y/n):')
? ? ? ? var money = parseFloat(prompt('請輸入消費金額：'))
? ? ? ? // 第一層if，判斷是否是會員
? ? ? ? if(ishy=='y'){
? ? ? ? ? ? // 第二層if，判斷消費金額
? ? ? ? ? ? //消費金額滿100，打6折
? ? ? ? ? ? if(money>=100){
? ? ? ? ? ? ? ? money *= 0.6? //money = money * 0.6
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? money *= 0.8
? ? ? ? ? ? }
? ? ? ? }else{
? ? ? ? ? ? //非會員，消費滿200，打9折
? ? ? ? ? ? if(money>=200){
? ? ? ? ? ? ? ? money *= 0.9
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? alert('本次購物的消費金額：'+money)
? ? </script>
</body>
</html>
彈框顯示為：
多重if和嵌套if的綜合練習題：
輸入年 月 輸出該月份有多少天？
閏年公式：年份能被4整除，但不能被100整除；或者年份能被400整除。閏年的2月份是29天，平年的2月份是28天。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>多重if和嵌套if的綜合練習</title>
</head>
<body>
? ? <script>
? ? ? ? /*
? ? ? ? 輸入年 月 輸出該月份有多少天？
? ? ? ? 閏年公式：年份能被4整除，但不能被100整除；或者年份能被400整除。閏年的2月份是29天，平年的2月份是28天。
? ? ? ? */
? ? ? ? var year = parseInt(prompt('請輸入年份：'))
? ? ? ? var month = parseInt(prompt('請輸入月份：'))
? ? ? ? var days = 0;? //保存天數(shù)
? ? ? ? if(month===1 || month===3 || month===5 || month===7 || month===8 || month===10 || month===12){
? ? ? ? ? ? days = 31
? ? ? ? }else if(month===4 || month===6 || month===9 || month===11){
? ? ? ? ? ? days = 30
? ? ? ? }else{
? ? ? ? ? ? // 二月份，需要判斷年份
? ? ? ? ? ? if(year%4===0 && year%100!=0 || year%400===0){
? ? ? ? ? ? ? ? days = 29
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? days = 28
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 這里的+號，用于字符串的拼接
? ? ? ? alert(year+'年'+month+'月，有'+days+'天')
? ? </script>
</body>
</html>
彈框顯示為：
5.switch選擇結(jié)構(gòu)
switch選擇結(jié)構(gòu)，也是用于進行多分支判斷，語法結(jié)構(gòu)比多重if簡潔。
但是，switch選擇結(jié)構(gòu)只能進行等值判斷。
語法結(jié)構(gòu)是：將需要進行等值判斷的變量，放到()里面。在{}里面通過case后面的值跟它進行等值判斷。
注意1：case語句，在結(jié)束之前，通常都要加上break，表示跳出switch選擇結(jié)構(gòu)，因為，
switch選擇結(jié)構(gòu)，里面的case一旦判斷成立，后面的case就不會再進行判斷了。
注意2：如果多個case的輸出結(jié)果相同，可以將多個case的結(jié)果合并，并省略前面case的break。
代碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>switch選擇結(jié)構(gòu)</title>
</head>
<body>
? ? <script>
? ? ? ? // 名次為：1.獎勵汽車，2.獎勵電腦，3.獎勵手機，4.沒有獎勵，否則罰抄
? ? ? ? var mc = 1
? ? ? ? if (mc === 1) {
? ? ? ? ? ? console.log('獎勵汽車');
? ? ? ? } else if (mc === 2) {
? ? ? ? ? ? console.log('獎勵電腦');
? ? ? ? } else if (mc === 3) {
? ? ? ? ? ? console.log('獎勵手機');
? ? ? ? } else if (mc === 4) {
? ? ? ? ? ? console.log('沒有獎勵');
? ? ? ? } else {
? ? ? ? ? ? console.log('繞操場跑步10圈');
? ? ? ? }
? ? ? ? console.log('---------------------------------');
? ? ? ? /*
? ? ? ? ? ? switch選擇結(jié)構(gòu)，也是用于進行多分支判斷，語法結(jié)構(gòu)比多重if簡潔。
? ? ? ? ? ? 但是，switch選擇結(jié)構(gòu)只能進行等值判斷。
? ? ? ? */
? ? ? ? // 將需要判斷的變量放在()里面，用{}里面的case挨個去跟()里面的變量比較
? ? ? ? // 滿足其中某個case后，就執(zhí)行case里面的代碼
? ? ? ? // 但是，一定要在case語句的最下面，添加break，表示跳出整個switch
? ? ? ? // 因為，滿足其中一個case后，其他的case就不會再判斷了，而是直接執(zhí)行。?
? ? ? ? switch (mc) {
? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? console.log('獎勵汽車');
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? console.log('獎勵電腦');
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? console.log('獎勵手機');
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 4:
? ? ? ? ? ? ? ? console.log('沒有獎勵');
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? default:
? ? ? ? ? ? ? ? console.log('罰抄代碼');
? ? ? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? console.log('-----------------------------');
? ? ? ? //收入今天的是周幾： 1 3 5超市所有商品打8折，2 4 6 超市所有商品打7折，7 打五折
? ? ? ? //如果多個case的輸出結(jié)果相同，可以將多個case的結(jié)果合并，并省略前面case的break
? ? ? ? var week = parseInt(prompt('請輸入今天是周幾：'))
? ? ? ? switch (week) {
? ? ? ? ? ? case 1:
? ? ? ? ? ? case 3:
? ? ? ? ? ? case 5:
? ? ? ? ? ? ? ? alert('超市所有商品打8折')
? ? ? ? ? ? ? ? break;? //跳出整個switch
? ? ? ? ? ? case 2:
? ? ? ? ? ? case 4:
? ? ? ? ? ? case 6:
? ? ? ? ? ? ? ? alert('超市所有商品打7折')
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? // 當所有的case都不成立時，有default，就執(zhí)行default
? ? ? ? ? ? default:
? ? ? ? ? ? ? ? alert('超市所有商品打5折')
? ? ? ? ? ? ? ? break;
? ? ? ? }
? ? </script>
</body>
</html>
控制臺顯示為：
彈框顯示為：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>switch練習題</title>
</head>
<body>
? ? <script>
? ? ? ? // 輸入年份和月份和日期，輸出該日期是全年的第多少天
? ? ? ? // 比如：年份是2021 月份是11 日期是9，算出2021-11-9是全年的第多少天
? ? ? ? // 技巧是：case不加break，并且反著寫。
? ? ? ? var year = parseInt(prompt('請輸入年份：'))
? ? ? ? var month = parseInt(prompt('請輸入月份：'))
? ? ? ? var day = parseInt(prompt('請輸入日期：'))
? ? ? ? var sum = 0? //用于保存總天數(shù)
? ? ? ? //利用switch語句，累加整月天數(shù)
? ? ? ? switch (month - 1) {
? ? ? ? ? ? case 12:
? ? ? ? ? ? ? ? sum += 31
? ? ? ? ? ? case 11:
? ? ? ? ? ? ? ? sum += 30
? ? ? ? ? ? case 10:
? ? ? ? ? ? ? ? sum += 31
? ? ? ? ? ? case 9:
? ? ? ? ? ? ? ? sum += 30
? ? ? ? ? ? case 8:
? ? ? ? ? ? ? ? sum += 31
? ? ? ? ? ? case 7:
? ? ? ? ? ? ? ? sum += 31
? ? ? ? ? ? case 6:
? ? ? ? ? ? ? ? sum += 30
? ? ? ? ? ? case 5:
? ? ? ? ? ? ? ? sum += 31
? ? ? ? ? ? case 4:
? ? ? ? ? ? ? ? sum += 30
? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? sum += 31
? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? if (year % 4 === 0 && year % 100 != 0 || year % 400 === 0) {
? ? ? ? ? ? ? ? ? ? sum += 29
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? sum += 28
? ? ? ? ? ? ? ? }
? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? sum += 31
? ? ? ? }
? ? ? ? // 再加上當前月份的天數(shù)
? ? ? ? sum += day
? ? ? ? alert(year + '-' + month + '-' + day + '是全年的第' + sum + '天')
? ? </script>
</body>
</html>
彈框顯示為：
6.三元表達式
三元表達式，可以簡化基本的if-else語句結(jié)構(gòu)
var c = a > 10 ? 100 : 200
三元表達式，也可以簡化復雜的if-else語句結(jié)構(gòu)
var e = a > 20 ? 200 : (a > 10 ? 100 : 300)
代碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>三元表達式</title>
</head>
<body>
? ? <script>
? ? ? ? // 三元表達式，可以簡化基本的if-else語句結(jié)構(gòu)
? ? ? ? var a = 100
? ? ? ? var b = 200
? ? ? ? var c;
? ? ? ? if(a>b){
? ? ? ? ? ? c = 300
? ? ? ? }else{
? ? ? ? ? ? c = 400
? ? ? ? }
? ? ? ? console.log(c);
? ? ? ? // 三元表達式：?左邊的表達式返回true，返回?右邊的結(jié)果，否則返回:右邊的結(jié)果。
? ? ? ? var d = a>b ? 300 : 400
? ? ? ? console.log(d);
? ? ? ? console.log('-------------------------');
? ? ? ? // 三元表達式，也可以簡化復雜的if-else語句結(jié)構(gòu)
? ? ? ? var num = 1
? ? ? ? var sex;
? ? ? ? if(num===1){
? ? ? ? ? ? sex='男'
? ? ? ? }else if(num===2){
? ? ? ? ? ? sex='女'
? ? ? ? }else {
? ? ? ? ? ? sex='未知'
? ? ? ? }
? ? ? ? console.log(sex);
? ? ? ? var sex2 = num===1 ? '男' : (num===2 ? '女' : '未知')
? ? ? ? console.log(sex2);
? ? </script>
</body>
</html>
控制臺顯示為：
