一元運算子:++ --
分為前++和后++ and 前--和后--
如果++在后面,如:num++ +10參與運算,先參與運算,自身再加1
如果++在前面,如:++num+10參與運算,先自身加1,然后再參與運算
如果--在后面,如:num-- +10參與運算,先參與運算,自身再減1
如果--在前面,如:--num+10參與運算,先自身減1,然后再參與運算
例子:
代碼是從上到下,一行一行執行的,
++在后面:
var num1=10; var sum1=num1++ +10; //sum1=num1++ +10=10+10=20 //num1++=10+1=11 console.log(sum1);//20
++在前面
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.write