第一天js複習：
複習：
1、js簡介
答案：執行在客戶端的語言 就是執行在瀏覽器中的指令碼語言，逐行解釋，編譯語言有編譯的過程
答案：發明人：布蘭登·艾克
2、js執行原理
答案：js引擎也叫js直譯器，轉換成二進位制，html靠的是排版引擎
3、js有三部分組成
答案：ECMAscript 做出了語法規範資料型別 BOM瀏覽器物件模型 DOM文件物件模型 很重要
4、js書寫的三個位置
答案：行內 內部內嵌，外部 和css相同
5、變數是什麼
答案：變數就是一個盒子儲存資料的，實際上是存放在記憶體區域中
6、變數的宣告以及儲存
答案：var 變數的宣告 使用var num =10; 宣告變數且賦值，叫變數初始化
7、變數的命名規範
答案：不可以使用數字，可以使用$ 字母下劃線 ，使用駱駝命名法
8、簡單資料型別有哪些
答案：number boolean String null nudefined
9、常見的轉義字元
答案：外雙內單使用引號的時候 轉義字元使用\ ， 換行\n ，空格\b tab\t
10、檢測資料型別
答案： typeof typeof null //object
11、資料型別轉換、
答案：number string boolean
number 型別： Number()數值型別 parseFloat()取浮點 parseInt()取整函式
string 三個 toString() num.toString()進位制轉換 String()轉換為字串， + 號轉換
boolean ：Boolean(1) !! 1 boolean兩種轉換方式
12、一元運算子，++前置 和 ++ 後置
答案：一元運算子 ！num num++ ++num 自己進行參與運算的是一元
：a + b 兩個人進行運算是 二元運算子
複製程式碼小測試： var num = 1; console.log(num++ + 10 + num++);
num++ 是1 + 10 = 11；但是發生變化num++先值運算在自加1 所以變成2所以變成了 11 + 2 = 13 整體是 1 + 10 + 2 = 13
複製程式碼正課今天講：
1、運算子下
2、流程控制上 分支結構
3、流程控制下 迴圈結構
學習目標
學習目標
掌握關係運算子，邏輯運算子，賦值運算子以及運算子優先順序
if...else 和 switch 分支語句
while/do while/for 三種迴圈
break 和 continue 迴圈跳出語句
雙重迴圈
應用
能編寫一個乘法口訣表
複製程式碼正課1、 關係運算子 (比較運算子)
概念：關係運算子，兩個資料進行比較的運算子，會返回布林值(true/false)作為比較運算子
運算子名稱 說明 案例 結果
< 小於號 1 < 2 true
> 大於號 2 > 1 true
>= 大於等於 2 >= 2 true
<= 小於等於 3 <= 2 false
== 等號(會轉型別) 2 ==2 true
!= 不等號 3 != 2 true
!== 不全等 2 !== '2' true
==== 全等要求值和資料型別一致 2 === '2' false
總結：
符號 作用 用法
= 賦值 把右邊給左邊
== 判斷 判斷兩邊值是否相等
=== 全等 判斷兩邊值和資料型別是否相等
複製程式碼正課2、 邏輯運算子
概念：邏輯運算子，用來進行兩個布林值運算的，運算子，返回值也是布林值
邏輯運算子 說明 案例
&& 邏輯與簡稱 與 並且的意思 num1 && num2
|| 邏輯或簡稱 或 num1 || num2
！ 邏輯非簡稱 非 !num1
解答：與 或 非
邏輯與 &&: 兩邊都是true 才返為true 否則返回false
邏輯或 ||: 兩邊都為false 才返為false 否則都為true 只要有一個為真即為true
邏輯非 !: 也叫做取反符號，用來取一個布林值相反的值，如true 的相反是false，false的相反是true
demo: && 並且與
var res = 2 > 1 && 3 < 5; //需要兩邊同時為真
console.log(res) //true
var res = 2 > 1 && 3 < 1 // 兩邊只有有一個為假false 即為false
console.log(res) //false
demo: || 或
var res = 2 > 1 || 3 < 5;//只要一個為真 即為true
console.log(res)//true
var res = 2 > 4 || 5 < 4; //只要同時不為真 即為false
console.log(res) //false;
demo: ! 非 取反
var res = !true;
console.log(res); //false
var res = !false;
console.log(res); //true
var res = !19;
console.log(res); //false
var res = !0; //零是false 所有才有非零即真的這一說，所以零取反是true
console.log(res) //true
var res = !''; //字元裡面只有''是空所有取反是true
console.log(res) //true
測試：
var num1 = 7;
var str = '你好我愛你js';
var res1 = num1 > 5 && str.length >= num1; //true
var res2 = num1 < 5 && str.length >= num1; //false
var res3 = !(num1 < 10); //false
var res4 = !(num1 < 10 && str.length == num1); //false
複製程式碼賦值運算子
var age = 10; //把10賦值給變數 age
賦值運算子 說明 案例
= 直接賦值 var usrName = '我是值'；
+= 、-= 加減一個數後在賦值 var age = 10 age += 5 //15 age = age+5
*=、/=、%= 乘、除、取模後再賦值 var age = 2; age *=5 //10 age = age*5
複製程式碼運算子的優先順序
1、() 優先順序最高
2、一元運算子++ -- ！
3、算數運算子 先 * / % 後 + -
4、關係運算子 > >= < <=
5、相等運算子 == != === !==
6、邏輯運算子先&& 後||
7、賦值運算子
規律 ：
先一元后二元
先算數後關係
邏輯運算子中 ！非權重最高 其實是&& 最後||
練習題：
4 >= 6 || '人' !='外星人' && !(12*2 == 333) && true
答案：4>=6 false ||
答案：人!='外星人' true &&
答案：!(12*2 == 333) false 取反變成true &&
答案：true
答案：最後為true 因為 先判斷&& 最後是|| 有真為true 真
var num = 10;
5 == num / 2 && (2 + 2* num).toString() === '22';
答案是true
答案：5 == num / 2 等於5 true
答案：(2 + 2* num).toString() === '22'; 22轉換成字串型別 恆等於 22 字元型別 所以為true
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); //false
var b = 3 <= 4 || 3 > 1 || 3 !=2 ;
console.log(b); //true
var c = 2 === '2';
console.log(c);//false
var d = !c || b && a;
console.log(d); //true
複製程式碼流程控制 上 分支結構 重點
表示式
表示式由運算子構成，並且產生結果的語法結構
每個表示式都會產生一個值，他可以放在任何需要一個值的地方
語句
語句可以理解為一個行為迴圈語句和判斷語句就是典型的語句
一個程式有很多個語句組成，一般情況下；分號分割一個一個語句
複製程式碼重點 概念：流程控制分、 順序結構，分支結構，迴圈結構三種，代表三種程式碼執行的順序
順序結構：
概念：由上至下的執行程式碼就是順序結構
var userAge = prompt('請輸入您的年齡');
var userName = prompt('請輸入您的姓名');
alert('歡迎您' + userName + '年齡' + username)
複製程式碼分支結構
概念：由上到下執行程式碼過程中，根據不同的條件，執行不同的程式碼
共有兩種分支結構 if...else 和 switch
if...else.. 語句
if是如果
//條件成立執行程式碼，否則什麼也不做
if(條件表示式){
//如果條件成立執行的程式碼語句
}
案例：
//如果年齡滿18 就可以進入網咖需要一個判
思路 ：
1、使用者輸入年齡
2、判斷是否滿足18
3、滿足可以去網咖
4、不滿足怎麼辦
var userAge = Number(prompt('您的年齡大於18歲可以上網'));
if(userAge >= 18){
alert('您今年' + userAge + '歲可以上網了');
}
alert('您今年' + userAge + '歲現在要好好學習');
重點：if...else
如果...否則
只會選擇一個進行執行
if(條件表示式){
如果條件成立執行的程式碼
}else{
否則執行的程式碼
}
思路：
1、接收使用者輸入的姓名
2、來判斷是否中獎
3、如果有則返回恭喜中獎
4、否則返回沒有中獎
//判斷一個人是中獎根據名字查詢如果查詢到了中獎，否則不中獎
var userName = prompt('請輸入名字')
if(userName == '張三'){
alert('恭喜你中獎了');
}else{
alert('你沒有中獎');
}
案例：
//能整除4且不能整除100的為閏年(2004年就是閏年，1901年不是閏年);
//能夠被400 整除的就是潤年
思路：
1、輸入年份
2、進行閏年判斷
3、列印出是否屬於閏年，是閏年輸出啥，不是輸出啥
// % == 0
var year = Number(prompt('請輸入年份'));
if(year % 4 == 0 && year % 100 !== 0 || year % 400 == 0){
alert(year + '是閏年');
}else{
alert(year + '不是閏年');
}
重點：if...else..if 語法
//適合於檢查多重條件
if(條件1表示式){
//如果條件1成立執行的程式碼
}else if(條件2表示式){
//否則 如果 條件2成立執行的程式碼
註釋：條件1不成立但是條件2成立
}else if(條件3表示式){
//否則 如果條件3成立執行的程式碼
註釋：條件1、2不成立但是條件3成立
}else{
//上述條件都不成立執行的程式碼
}
案例:
要求接受使用者輸入的分數，根據不同的分數輸入出等級字元A,B,C,D,E
1、90分含以上輸出A
2、80分含~90分不含輸出B;
3、70分含~80分不含輸出C;
4、60分含~70分不含輸出D;
5、60分不含輸出E;
思路：
1、輸入接受使用者輸入的值
2、進行if..else..if 的判斷
3、彈出輸入數字應得的分數
var num = Number(prompt('請輸入分數'));
if(num >= 90){
alert('1您的得分是' + num + '恭喜您');
}else if(num >= 80){
alert('2您的得分是' + num + '恭喜您');
}else if(num >=70){
alert('3您的得分是' + num + '恭喜您');
}else if(num >=60){
alert('4您的得分是' + num + '恭喜您');
}else{
alert('5您的分數是' + num + '得到E')
}
複製程式碼總結： if...else 小結
根據條件不同，有選擇地執行，分支結構結束後，會繼續執行後續的程式碼
複製程式碼三元表示式 ？ ：
語法 ： 表示式1 ？ 表示式 2： 表示式3
如果表示式1 為真執行返回表示式2的值 表示式為假返回表示式3的值
三元表示式就if...else 的簡潔的寫法
var num = 3 > 5 ? 3 : 5;
console.log(num); // 5
console.log(3 > 5 ? 3 +1 : 5 + 1); //6
上面這樣寫也是可以的因為是返回他們的值
if(3 > 5){
console.log(3);
}else{
console.log(5);
}
複製程式碼switch case 結構
當要針對變數多種不通知執行不同的程式碼，就可以使用switch
switch 開關的意思 轉換 case 案例
語法：使用結構表示式的值各個case 中的值進行相等比較
switch(變數){
case : value:
//表示式結果等於value 1時 要執行的程式碼
break；
case : value:
//表示式結果等於value 2時 要執行的程式碼
break;
default:
//表示式結構不等於任何一個value 時要執行的程式碼
}
使用switch 小案例：
var num = prompt('請輸入喜愛的水果');
switch(num){
case '蘋果':
alert('您喜歡吃' + num);
break; //一定要新增break 不然會有穿透效果
case '香蕉':
alert('您喜歡吃' + num);
break;
case '草莓':
alert('您喜歡吃' + num);
break;
default: //預設的上面都找不到
alert('沒有你愛吃的' + num);
break;
}
執行順序
1、先從變數中獲取一個值隨後表示式的值會與結構中的每個case 值做比較
2、如果存在匹配全等=== 即變數值 === value 值 則與該case關聯的程式碼塊會被執行，
並且在遇到break 時停止，整個switch 程式碼執行結束
3、如果所有的case的值都和表達之不匹配則執行default裡的程式碼
4、我們case後面的值通常都是一個常量
細節：breack是跳出switch 的作用
注意變數的字元型別
複製程式碼switch 與 if 對比
switch...case通常處理case為常量的情況，而if...else更加靈活有範圍
當只有分支比較少的時候if效率比switch高
switch進行一次條件判斷後直接執行到程式的條件語句而if..else有幾種條件，就得判斷多少次
分支比較多是switch的效率比較高，而且結構更清晰
複製程式碼迴圈結構
迴圈：圍著操場重複的跑圈就是迴圈
js中的迴圈：一段程式碼重複的執行
三種迴圈結構: while do...while for 三個關鍵： 計數器 判斷條件 計數器自增
重點學：for 迴圈 存在即合理
複製程式碼while 迴圈
//條件表示式為true 時重複執行迴圈體程式碼
//條件表示式為false退出迴圈
while(條件表示式){
//迴圈體程式碼
}
執行順序：
先執行條件表示式
如果為false 則退出迴圈
如果為true 則執行迴圈體程式碼，緊接著執行迴圈條件表示式，要是一直執行true 就會變成死迴圈
案例：
var num = 1;
while( num <= 10){
/*console.log('您好');
num++; 這裡是自增條件
*/
console.log('您好'+ num++); //我這裡吧自增條件放到列印的控制器裡面
// console.log('hi~你好麼麼噠') 千萬不要這麼寫會造成死迴圈
}
解答：1、
var age = 1;
while (age <= 18) {
console.log('哎呀每年都增加了'+ age +'歲啊')
age ++;
}
解答： while 迴圈 需要一個迴圈條件 age < 18 然後輸出迴圈體 然後需要迴圈條件 到多少
案例：1、
使用者輸入一個年齡列印年齡
var userAge = prompt('年齡');
var age = 1;
while(age <= userAge){
console.log('這個人多少'+age+'歲了');
age ++;
}
案例：2、
計算1~100之間所有數的和
思路：
1、需要2個變數 一個自增，還需要一個儲存結果值的
var i = 1; //自增
var sum = 0; //儲存結果的盒子
while(i <= 100){
sum = sum + i;
//也可以簡寫 sun+=i;
i++;
}
// 解答:程式碼從上面執行，i=1，1<=100執行下面sum 這句話 sum等於0 加1 賦值給sum 所以 sum 等於1 然後i++
複製程式碼while 總結
while 語句就是當條件滿足時重複執行相同的程式碼
無論是迴圈結構還是分支結構，在執行完畢後，都會執行後續程式碼；
在迴圈體內部，需要修改有迴圈條件否則會造成死迴圈 重點是死迴圈造成了很不友好
複製程式碼我是：我想靜靜 看大家的反饋說少練習所以給大家一些練習題目，思路自己想，需要我解答的留言給我會在留言中解答：
練習題：
1、列印100以內的奇數
2、列印100以內的奇數的和
複製程式碼斷點除錯：斷點除錯教程
do...while 迴圈
語法：
do{
//do是做
//迴圈體程式碼，條件表示式為true 時重複執行迴圈體程式碼
//do...while 至少做一次
}while(條件表示式)
//計數器 計數器自增 判斷條件
//var i = 1; //計數器
// 計數器 計數器自增 判斷條件
var i = 1; //計數器
do{ //1、do首先列印出 要好好理解js 然後 執行
console.log('要好好理解js'+i);
i++; //2、然後i++ 2 <= 5然後繼續回到do 裡面繼續列印
} while(i <= 5)
重點：區別do...while 與 while 至少do..while 至少會執行一次為什麼這麼說呢請看案例
var i= 1;
do{
console.log('學習時候要專注'+ i);
// 這時候你就會發現 i>=5不滿足判斷條件但是也是會執行一次
// 再次真香警告 很重要 判斷三個條件 1、計數器 2、計數器自增 3、判斷條件
i++;
} while(i >= 5);
案例：
使用do...while迴圈：輸出你喜歡我嗎？(y/n):直到輸出了y退出否則繼續詢問
思路：
1、使用者輸入 (y/n
2、判斷是y退出迴圈不是一直迴圈使用do...while
do{
var user = prompt('你喜歡我嗎？你的答案是y與n');
// 只要使用者輸入的不是y就一直迴圈 要是滿足條件就退出迴圈
} while( user !== 'y');
alert('我也喜歡你呢');
複製程式碼do...while小結
do...while迴圈和while迴圈非常像，二者經常可以相互替代，但do...while的特點是不管條件是否成立都執行一次
do...while語句就會先執行一遍，後面才根據條件是否滿足決定執行次數
和while迴圈一樣，在迴圈內部，需要修改迴圈條件，否則會造成死迴圈
do{
// do先寫 一個花括號 然後 while 然後是括號
} while()
複製程式碼for迴圈
//for迴圈一般用來根據次數迴圈
for(初始化，條件表示式，自增表示式){
迴圈體
}
for( 1、 var i=0; 2、 i< 10; 4、 i++){
3、
console.log( i );
}
這裡標註了1、2、3、4、看執行順序
for(var i = 1; i <= 10; i++){
console.log(i);
// 記住初始化 var i =1;在for 裡面只會執行一次
// 先判斷在執行 i< =10 執行 console.log(i); 然後在執行i++;
//可以通過斷點進行檢視執行順序
}
執行順序
1、初始化
2、條件表示式 ->3迴圈體 ->4自增表示式
之後一直執行234 知道條件表示式為false才結束迴圈
案例：
求1~100之間所有偶數的和
console.log(undefined+ 10) //列印出NaN 不是一個數字
// 不可以var sum;這樣宣告 因為會輸出 undefined
var sum = 0;
for(var i=0 ; i <= 100; i++){
if( i % 2 ==0){
sum+=i;
// sum = sum + i; 以後我儘量使用簡寫方式
}
}
console.log(sum);
案例：
求輸出一個人1到100歲
for(var i=1; i <= 100; i++){
if(i == 1){
console.log('這個人' + i + '歲出生了');
}else if(i == 100){
console.log('這個人' + i + '他死了');
}else{
console.log('這個人' + i + '歲了')
}
}
複製程式碼雙重for迴圈 重點
雙重for 迴圈
for(外迴圈的初始化,外迴圈的條件，外迴圈的增量){
for(內迴圈的初始化，內迴圈的條件，內迴圈的增量){
需要執行的程式碼
}
}
重點：雙重for迴圈外面負責行 一行兩行的行 外面執行一次裡面執行相應的次數
for(var i = 1; i <= 3; i++){
// 外層 i = 1的時候執行一次 裡面for執行三次 所有 一共執行了 9次
for(var j =1; j <=3; j++){
console.log('你好');
}
}
案例：
使用for 迴圈列印三個星星
var str = ''; //空字串
// 外層for 負責可以列印3行高
for(var i=1; i<=3; i++){
//str +='?'; //簡寫
// str = str + '?';
// 裡面的for 負責的是 一行列印3個星星
for(var j=1; j<=3;j++){
str += '?';
}
str +='\n';
}
console.log(str);
案例：
使用for 迴圈列印倒三角
var str = '';
for(var i=1; i<=9;i++){
for(var j=1; j<= 10 - i; j++){
str+='?';
}
str+='\n';
}
console.log(str);
// 解答： 外層for 迴圈負責第一行裡面的行 ，裡面的for 負責一行裡面有幾個星星
//第二種演算法
var str = '';
for(var i=1; i<=9; i++){
for(var j=i; j<=9;j++){
str+='?';
}
str +='\n';
}
console.log(str);
// 解答: 從行數開始 i= 1；列印出9個，2列印出8個，3列印出7個,所以把內層for迴圈j從i開始計算
j的啟始值從行數開始到9就是列印的個數
// 解答：外層for 迴圈負責行數 裡面for迴圈執行若干次
案例：
使用for 迴圈列印99乘法表
var str = '';
// 外層for 負責可以列印 i 行數
for(var i=1; i<=9;i++){
// 裡面的for 負責的是 一行 j 一行內的個數
for(var j=1; j<=i; j++){
// 首先i等於1 j = 1 1<=1嗎？ 等於 輸出 ,第二次輸出
1<=2?小於輸出然後j++然後j<=2小於等於 輸出
str +='?';
總結： 我的個數永遠比行數小 ，誰管行數i 誰管理個數呢j 所以 j永遠小於i
}
str +='\n';
}
console.log(str);
列印99乘法表
var str = '';
for(var i=1; i<=9; i++){
for(var j=1; j<=i; j++){
// str +='?';
// 1 * 1 = 1;
str+= j + '*' + i + '=' + j*i + '\t';
//這裡不要忘記str+=
}
str +='\n';
}
console.log(str);
// 解答:我們的一行的個數永遠比行數小 最核心語句 var j=1; j <= i; j++
複製程式碼練習題： 計算1-100之間能被三整除的數的和 使用for 迴圈
continue 與break 的區別
continue 跳出本次迴圈
概念：立即跳出本次迴圈繼續下一次迴圈，比如吃蘋果一共五個 吃到第三個蘋果發現有蟲子扔掉繼續吃這是continue直到吃完五個蘋果為止
案例：
for(var i=1; i<=5;i++){
if( i== 2){
console.log('哎呀蘋果裡面有蟲子不能吃了'+ i +'扔掉了');
continue;
}
console.log('我繼續吃蘋果'+i)
}
複製程式碼break 退出整個迴圈
概念：理解跳出整個迴圈開始執行迴圈後面的程式碼，比如吃蘋果一共五個 吃到第三個蘋果發現有蟲子後面的都不吃了這就是break
for(var i=1; i<=5;i++){
if( i== 2){
console.log('哎呀蘋果裡面有蟲子不能吃了'+ i +'扔掉了');
break;
}
console.log('我繼續吃蘋果'+i)
}
break 是退出整個for迴圈 跟switch 是相同的
複製程式碼練習：
簡易ATM機器 思路：裡面現存有100塊錢 如果存錢就用加現在有的錢 如果取錢就取現有的錢 查勘餘額就顯示餘額 退出就退出迴圈
版本v1.
var num = 100;
var resut = Number(prompt('1、存錢\n2、取錢\n3、顯示餘額\n4、退出'))
switch (resut) {
case 1:
var num1 = Number(prompt('請輸入您要存入的金額'));
num += num1;
alert('您存入的金額是' + num);
break;
case 2:
var num2 = Number(prompt('請您輸入您要取出的金額'));
num -=num2;
alert('您取出的金額是' + num);
break;
case 3:
alert('您現在的餘額是' + num);
break;
case 4:
break;
default:
alert('您輸入的有誤請重新輸入');
break;
}
補充：裡面少了一個很重要的功能 看看看你們能否找到並且補充上，是今天學的一個迴圈，只能告訴你們這個多了
程式碼除了敲理解外沒有別的辦法外物了加油！ 複製程式碼