JS筆記之次日
一元運算符：++ --html
分爲前++和後++ and 前--和後--瀏覽器
若是++在後面，如：num++ +10參與運算，先參與運算，自身再加1函數
若是++在前面，如：++num+10參與運算，先自身加1，而後再參與運算工具
若是--在後面，如：num-- +10參與運算，先參與運算，自身再減1學習
若是--在前面，如：--num+10參與運算，先自身減1，而後再參與運算測試
例子：spa
代碼是從上到下，一行一行執行的。3d
++在後面：調試
var num1=10; var sum1=num1++ +10; //sum1=num1++ +10=10+10=20 //num1++=10+1=11 console.log(sum1);//20
++在前面code
var num2=10; var sum2=++num2+10; //++num2=10+1=11 //sum2=++num2+10=11+10=21 console.log(sum2);//21
- -在後面
var num3=10; var sum3=num3-- +10; //sum3=num3-- +10=10+10=20; //num3--=10-1=9 console.log(sum3);//20
- -在前面
var num4=10; var sum4=--num4+10; //--num4=10-1=9 //sum4=--num4+10=9+10=19 console.log(sum4);//19
調試
調試：調試代碼--->成爲中高級工程師必備的技能之一
調試的方法有不少種，這裏暫時只講一種：斷點調試
調試的做用：查看每一步執行的狀態，便於瞭解程序的運行狀況,找出bug；代碼正常執行，語法沒有錯誤，可是結果不是本身想要的；觀察這行代碼的變量或者函數的值是多少；這行代碼執行的效果如何。
斷點調試是指本身在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，而後能夠一步一步往下調試，調試過程當中能夠看各個變量當前的值，若是調試到出錯的代碼行，即顯示錯誤，停下。
調試步驟：
寫代碼----->打開瀏覽器----->按F12（開發人員工具）----->點擊Sources----->找到須要調試的文件，雙擊文件----->出現的代碼前面的行號點擊一下就是添加一個斷點（能夠添加多個斷點）
調試中的相關操做：
Watch: 監視，經過watch能夠監視變量的值的變化，很是的經常使用。
F10: 程序單步執行，讓程序一行一行的執行，這個時候，觀察watch中變量的值的變化。
F8：跳到下一個斷點處，若是後面沒有斷點了，則程序直接執行結束。
流程控制
流程控制：代碼的執行過程
流程控有三種方式：
1.順序結構：從上到下，從左到右執行的順序，就叫作順序結構（不是很嚴謹）
2.分支結構：if語句、if-else語句、if-else if-else if...語句、swith-case語句、三元表達式語句
3.循環結構：while循環、do-while循環、for循環、for-in循環（後期）
分支語句：
if語句
if-->若是
if語句主要是判斷
語法：
if（表達式）{
代碼塊（代碼）
}
注意：大括號不能另起一行，不然就是另外一行代碼
執行過程：
先判斷表達式的結果是true仍是false，若是是true則執行代碼塊，若是是false，大括號中的代碼是不執行的
例如：
1.若是8大於6，請輸出8
if (8>6){ console.log(8); }
2.若是一個數字大於另外一個數字則輸出大的數字
var num1=10; var num2=20; if (num1>num2){//結果是false，不執行下面的代碼 console.log(num1); }
3. 問：小明的年齡是否大於18歲，若是是成年了，則提示能夠看電
var age=21; if (age>=18){ console.log("能夠看電影了"); }
4. 問：小明帥不帥，帥則顯示：是真的帥
var str="帥"; if (str=="帥"){ console.log("是真的帥"); }
if-else語句
這是由兩個分支組成的，只執行一個分支。中間的「-」起到分割做用，寫代碼是沒有「-」的。
if-else語句的語法：
if（表達式）{
代碼1（這裏並非只能寫一行代碼，而是能寫多行代碼）
}else{
代碼2
}
執行過程：
若是表達式的結果是true則執行代碼1；若是是false，則執行代碼2
例子：
問：小蘇的年齡是不是成年人，若是是成年人則提示，能夠看電影，不然；回家寫做業
var age=10; if (age>=18){ console.log("能夠看電影"); }else{ console.log("回家寫做業"); }
根據描述來分析，成年人是18歲。
若是age大於等於18，那麼執行console.log("能夠看電影");
若是age小於18，那麼執行console.log("回家寫做業");
因爲age=10，代入到if條件裏，10>=18,10小於18，因此執行console.log("回家寫做業");
年齡通常都是用戶本身輸入的，不是已經在變量中固定寫好的，因此須要修改以下：
prompt（「」）；這是一個彈窗，能夠輸入值，輸入的值在變量中，最終的結果是字符串類型。
prompt（「」）；括號裏面的雙引號裏面能夠自由寫文字，由咱們自定義寫的；好比：prompt(「請您輸入您的年齡」)；prompt(「請您輸入一個數字」)；
提示用戶輸入年齡：
var age=prompt("請您輸入您的年齡"); //因爲字符串類型不能用於比較，因此須要轉換成數字類型 var age=parseInt(prompt("請您輸入您的年齡")); if (age>=18){ console.log("能夠看電影"); }else{ console.log("回家寫做業"); }
若是用戶輸入的不是數字，而是其餘的文字之類的，那麼結果會變成NaN，先不要糾結怎麼去掉NaN，後面會學習。
（if語句只有一個分支；if-else語句有兩個分支，最終執行一個分支；if-else if-else if-else if-else if-else if......else---多分支，最終也是執行一個）
if-else的練習
練習1.找出兩個數字中的最大值
練習2.判斷這個數字是奇數仍是偶數
練習3.將練習2改成用戶本身輸入
三元表達式
運算符號： ？ ：
語法：
var 變量=表達式1？表達式2：表達式3
執行過程：
表達式1的結果是true仍是false，若是表達式1的結果是true則執行表達式2，而後把結果給變量；若是表達式1的結果是false，則執行表達式3，把結果給變量。
總結：大多數狀況下，使用if-else的語句能夠用三元表達式的方式來表示
例子：
1.判斷兩個數字中的最大值
var x=10; var y=20; var result=x>y?x:y; console.log(result);
執行過程，問x是否大於y，若是x大於y，則把x這個結果給result，若是x小於y，則把y這個結果給result
2.判斷一我的是不是成年人
var age=20; var result=age>=18?"成年人":"未成年"; console.log(result);
執行過程，先判斷age是否大於18，若是大於18，,則把成年人這三個字賦值給result這個變量；若是小於18，則把未成年這三個字賦值給result這個變量
if-else if 語句...
這是由多個分支組成的，最後只執行一個分支。
語法：
if（表達式1）{
代碼1
}else if（表達式2）{
代碼2
}else if（表達式3）{
代碼3
}else{
代碼4
}
else if---這種結構能夠寫多個，具體多少個看需求；
else---結構能夠不用寫的，具體也看需求。
執行過程:
先判斷表達式1的結果，
若是爲true則執行代碼1；
若是爲false，則判斷表達式2；
若是表達式2爲true則執行代碼2；
若是爲false，則判斷表達式3；
若是表達式3爲true，則執行代碼3；不然執行代碼4。
例子：
成績的結果是在90到100（包含）之間，則顯示A級
若是成績的結果是在80到90（包含）之間，則顯示B級
若是成績的結果是在70到80（包含）之間，則顯示C級
若是成績的結果是在60到70（包含）之間，則顯示D級
若是成績的結果是在0到60（不包含）之間，則顯示E級
var score=Number(prompt("請您輸入您的成績"));//這樣寫有bug，若是用戶輸入的是文字或者字母，那麼會顯示成E級。 //須要加個條件：if //if (isNaN(score)){ } 若是爲ture，則說明不是數字 if (!isNaN(score)){// !取相反的結果。若是爲ture，則說明是數字 if (score>90&&score<=100){ console.log("A"); }else if (score>80){ console.log("B"); }else if (score>70){ console.log("C"); }else if (score>60){ console.log("D"); }else{ console.log("E"); } }else{ console.log("您輸入的有誤") }
這樣寫是有缺陷的，緣由：打開頁面就直接出現彈窗。（咱們在打開網頁是不會直接出現彈窗的）這是用來測試用的，後期會取消彈窗。
考慮到實際運用，須要把score=parseInt(prompt("請您輸入您的成績"))改成score==Number(prompt("請您輸入您的成績")); 分數能夠容許有小數，用parseInt()的話，小數直接就沒有了；Number在轉換的時候比前兩個更加嚴格
若是用戶輸入的是文字或者字母等其餘，那麼就不會顯示出什麼，這樣體驗不怎麼好，能夠在後面加個else{console.log("您輸入的有誤")}
練習4.判斷一個年份是否是閏年
swith-case語句---多分支語句
語法：
switch（表達式（也能夠是值））{
case值1：代碼1；break（爲了方便因此放在同一行）；
case值2：代碼2；break；
case值3：代碼3；break；
case值4：代碼4；break；
...能夠寫多個case
default：代碼5；（最後的break能夠省略不寫）
}
執行過程：
獲取表達式的值，和值1比較，若是同樣，則執行代碼1，遇到braek則跳出整個語句，後面代碼不執行；
若是表達式的值和值1不同，則和值2比較，若是相同則執行代碼2，遇到break則跳出；不然和值3比較，相同則執行代碼3，遇到break則跳出，不然和值4比較，相同則執行代碼4，遇到break則跳出，不然直接執行代碼5.
注意問題：
1.default後面的break是能夠省略的
2.default也能夠省略
3.switch-case語句中和case後面的值比較的時候使用的是嚴格的模式。
var num=「10」；switch（num）{case「10」...} ；switch裏面的num===case「10」。
4.break是能夠省略的，可是它會一直執行下去，直到碰到break才中止。
例子：
1．獲取一我的的成績的級別，若是是A級則顯示90到100直接的分數
若是是B級則顯示80到90之間的分數
若是是C級則顯示70到80之間的分數
若是是D級則顯示60到70之間的分數
不然顯示0到59之間
var level = "C"; switch (level) { case "A": console.log("90到100之間"); break; case "B": console.log("80到90之間"); break; case "C": console.log("70到80之間"); break; case "D": console.log("60到70之間"); break; default:console.log("0到59之間"); }
2.根據數字顯示對應的星期
var num = parseInt(prompt("請您輸入一個星期的數字")); switch (num) { case 1: console.log("星期一"); break; case 2: console.log("星期二"); break; case 3: console.log("星期三"); break; case 4: console.log("星期四"); break; case 5: console.log("星期五"); break; case 6: console.log("星期六"); break; case 7: console.log("星期日"); break; default: console.log("輸入有誤") }
3.根據月份顯示對應的天數
var month = 3; switch (month) { case 1: console.log("31天"); break; case 3: console.log("31天"); break; case 5: console.log("31天"); break; case 7: console.log("31天"); break; case 8: console.log("31天"); break; case 10: console.log("31天"); break; case 12: console.log("31天"); break; case 4: console.log("30天"); break; case 6: console.log("30天"); break; case 9: console.log("30天"); break; case 11: console.log("30天"); break; case 2: console.log("29天"); break; default: console.log("請輸入月份的數字"); break; }
因爲天數是同樣的，能夠省略以下
var month = parseInt(prompt("請輸入月份")); switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: console.log("31天"); break;//break要加上去，不然代碼會一直執行下去，直到遇到break纔會中止 case 4: case 6: case 9: case 11: console.log("30天"); break; case 2: console.log("29天"); break; default: console.log("請輸入月份的數字"); break; }
分支總結：
if語句：一個分支
if-else語句：兩個分支，最終只執行一個
if-else if-else if...語句：多個分支，最終只執行一個
switch-case語句：多分支語句，最終只執行一個（必需要有break）
三元表達式：和if-else語句是同樣的
何時使用if-else if...語句：通常是對範圍的判斷
何時使用switch-case語句：通常是對具體的值得判斷
若是有多個發支，是針對範圍的判斷。通常選擇if-else if語句
若是有多個分支，是針對具體的值判斷，通常選擇用switch-case語句
循環：一件事不停的或者重複的作
循環要有結束的條件，循環還應該有計數器（記錄循環的次數）
while循環
while循環語法：
（程序代碼是從0開始算起的，不是從1開始算起。0~9一共是10個數字。）
var 變量=0；（計數器）
while（循環的條件）{
循環體；
計數器++；
}
執行過程：
先判斷條件是否成立，（條件的結果是true仍是false），若是是false，那麼循環的代碼（while的大括號中的代碼都不執行），若是是true，那麼先執行循環體，而後執行計數器，而後，直接去--->循環條件，再次判斷是否成立，成立則繼續執行循環體，不然跳出循環，執行完循環體以後，計數器加1，而後再次去循環的條件，判斷，成立則循環，不然跳出循環體.....
（在循環當中，咱們通常用i、j、k比較多一點的）（while循環不必定要計數器，變量能夠從新賦值）
例子：
1.請輸出10次：過年了
var i=0;//計數器，不可缺乏 while (i<10){ console.log("過年了"); i++;//記錄次數，不可缺乏 }
2.請輸出10次 哈哈我又變帥了
var i=0;//計數器 while (i<10){//要小於10，不能大於10，等於10的話就多了一次了 console.log("哈哈，我又變帥了"); i++;//記錄次數，這個是必定要加上的，不然上面就會一直循環直到瀏覽器內存不夠才中止、奔潰 }
var j=0;//計數器 while (j<10){//要小於10，不能大於10，等於10的話就多了一次了 console.log("哈哈，我又變帥了"+j);//加上j就能夠顯示多少次,從零開始數起，一共10次 j++;//記錄次數，這個是必定要加上的，不然上面就會一直循環直到瀏覽器內存不夠才中止 }
var k=0;//計數器 while (k<10){//要小於10，不能大於10，等於10的話就多了一次了 console.log("哈哈，我又變帥了"+(k+1));//括號裏面的k+1顯示的是從1開始數起，一共10次 k++;//記錄次數，這個是必定要加上的，不然上面就會一直循環知道瀏覽器內存不夠才中止 }//這個(k+1 )不會改變k++的值，k+1=1，k++=0要從下一次算起纔是1，k+1和k++是沒有關係的
不要光看，要多敲，在瀏覽器上面對比下才能清晰的看到區別。
do-while循環
語法：
do{
循環體
}while（條件）；
執行過程：
先執行一次循環體，而後判斷條件是否成立，不成立，則跳出循環，成立則執行循環體，而後再判斷條件是否成立，成立則繼續循環，不然跳出......
例子：
問用戶：您以爲我帥嗎？提示用戶請輸入y/n，若是n就一直問，我帥不帥，若是用戶輸入y，則結束，並提示用戶，您真有眼光
do{ var result=(prompt("您以爲我帥嗎？請輸入y/n")); i++; }while (result!="y"); console.log("您真有眼光");
總結while和do-while循環：
while循環特色：先判斷，後循環，有可能一次循環體都不執行
do-while循環特色：先循環，後判斷，至少執行一次循環體
例子：
輸出：哈哈，我又變帥了
var i=0; do{ console.log("哈哈，我又變帥"); i++; }while (i<10);
for循環
語法：
for（表達式1；表達式2；表達式3）{
循環體；
}
執行過程：
先執行一次表達式1，而後判斷表達式2；若是成立則直接跳出循環；若是表達式2成立，執行循環體的代碼，結束後，跳到表達式3執行，而後跳到表達式2，判斷表達式2是否成立，不成立，則跳出循環；若是表達式2成立，則執行循環體，而後再跳到表達式3，再跳到表達式2，判斷是否成立。一直如此循環下去...
for循環至關於while循環
例子：
輸出：哈哈，我又變帥了
for (var i=0;i<10;i++){ console.log("哈哈，我又變帥了"); }
for的練習
練習1：求1~100之間的和
練習2：求1~100之間全部能被3整除的數字的和
練習3：求1~100之間全部能被7整除的數字的和
補充知識：
alert 彈窗
console.log 在控制檯顯示
document .write（「 」） 能夠在網頁直接顯示出括號裏面的內容；括號裏面的內容能夠是html標籤，能夠是字符串等。例如：document.write("吃飯睡覺打豆豆，閒得慌"); document.write("<a href=''>連接</a>") document.write("<br />");
例子：畫五角星☆
畫一個5行5列的星星，用document.write("☆") document.write("<br />");和for循環作出來
for (var j=0;j<5;j++){//控制有多少行五角星 for (var i=1;i<=5;i++){//控制一行有多少個五角星 document.write("☆"); } document.write("<br />");//換行。若是不換行，那全部的五角星都會在同一行顯示出來 }
for (var j=1;j<=5;j++){//控制有多少行五角星 for (var i=1;i<=j;i++){//控制一行有多少個五角星， // 若是把i<=5改成i<=j，那麼在瀏覽器會顯示成第一行有一個五角星，第二行有兩個五角星，以此類推（就像乘法口訣表那樣） //注意：若是把i<=5改成i<=j，那麼上面控制行數的循環j要改成等於1（j=1），j要改成小於等於5（j<=5）,j++不變 document.write("☆"); } document.write("<br />");//換行。若是不換行，那全部的五角星都會在同一行顯示出來 }
補充練習：寫出乘法口訣表
練習參考答案，此答案只作參考不是標準答案。
if-else練習
練習1.找出兩個數字中的最大值
var num1 = 10; var num2 = 20; if (num1 > num2) { console.log(num1); } else { console.log(num2); }
練習2.判斷這個數字是奇數仍是偶數
能被2整除的數是偶數，這裏不能用「/」除號，要用「%」取餘。當一個數字能被2整除餘數爲零，那麼這個數是偶數
var number = 21; if (number % 2 == 0) { console.log("偶數"); } else { console.log("奇數"); }
練習3將練習2改成用戶本身輸入（這裏只能用parseInt，不能用 parseFloat，小數沒有分奇數和偶數的，奇數和偶數只針對整數來講的，用Number也不合適）
（這裏只能用parseInt，不能用 parseFloat，小數沒有分奇數和偶數的，奇數和偶數只針對整數來講的，用Number也不合適）
var number = parseInt(prompt("請您輸入一個數字")); if (number % 2 == 0) { console.log("偶數"); } else { console.log("奇數"); }
練習4.判斷一個年份是否是閏年
閏年：能被4整除但不能被100整除，或能被400整除的年份即爲閏年
var year = 2020; if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { console.log("閏年"); } else { console.log("平年"); }
for 循環
練習1：求1~100之間的和
var num = 0; for (var i = 0; i < 100; i++) { num += i; } console.log(num);
練習2：求1~100之間全部能被3整除的數字的和
var num1 = 0; for (var i = 0; i < 100; i++) { if (i % 3 == 0) { num1 += i; } } console.log(num1);
練習3：求1~100之間全部能被7整除的數字的和
var num1 = 0; for (var i = 0; i < 100; i++) { if (i % 7 == 0) { num1 += i; } } console.log(num1);
補充練習：寫出乘法口訣表（思路）
1.先寫出九行：9*9=81
document.write("9*9=81");//1
document.write("9*9=81");//2
document.write("9*9=81");//3
document.write("9*9=81");//4
document.write("9*9=81");//5
document.write("9*9=81");//6
document.write("9*9=81");//7
document.write("9*9=81");//8
document.write("9*9=81");//9
2.因爲1寫出了九行相同的9*9=0；能夠用for循環表示，寫成一條循環語句，用於控制每一行有幾個9*9=81
for (var i=0;i<9;i++){ document.write("9*9=81"); }
3.加入document.write("<br />");換行，用for加上換行，寫出九行九個9*9=81
for (var i=0;i<9;i++){
document.write("9*9=81"); }//1 document.write("<br />"); for (var i=0;i<9;i++){ document.write("9*9=81"); }//2 document.write("<br />"); for (var i=0;i<9;i++){ document.write("9*9=81"); }//3 document.write("<br />"); for (var i=0;i<9;i++){ document.write("9*9=81"); }//4 document.write("<br />"); for (var i=0;i<9;i++){ document.write("9*9=81"); }//5 document.write("<br />"); for (var i=0;i<9;i++){ document.write("9*9=81"); }//6 document.write("<br />"); for (var i=0;i<9;i++){ document.write("9*9=81"); }//7 document.write("<br />"); for (var i=0;i<9;i++){ document.write("9*9=81"); }//8 document.write("<br />"); for (var i=0;i<9;i++){ document