javascript
跟班学习JavaScript第二天———流程控制、分支、循环、函数
復習：
1內嵌到html標簽中，配合使用
2在html標簽中編寫js語句塊，語句塊必須寫在標簽中，可以放在html的任意地方，
2.變量和常量
變量是程序運行的一段內存區域，用來存儲可以改變的數據
變量申明：
var 變量名 = 值
var 變量名；
變量名 = 值
常量是一段被初始化賦值之后，就不允許被修改的數據
常量申明：
const 常量名 = 值；
常量和變量可以賦的值：
在js中。數據分為兩大類型：
1.原始的基本數據類型
String 字符串
Number 數字類型
Boolean 布爾類型
Null 空類型
Undefined 未定義類型
類型之間的轉換：
number和boolean轉string類型：toString()
string和boolean轉number類型：Number(value)，如果字符串里面的數據是數字則直接轉成數字。但是會把左邊的0去掉，如果不是正常數據，則會轉成一個NaN的number類型的數據，如果是boolean轉number的話，true轉成1，false轉成0
number和string轉Boolean類型:Boolean(value)，如果是字符串里面是空字符則轉成false，否則是true，如果是數字類型，0為false，非零數字則轉成true
2.引用數據類型
3.運算符
3.1算術運算符
+、-、*、/、%
3.2賦值運算符
=：賦值
+=：左右兩邊的和賦給左邊
-=：左右兩邊相減的結果賦值給左邊
3.3比較運算符
==：比較數據是否相等
===：比較數據是否相等之外，還要比較數據的類型是否相等
3.4邏輯運算符
&&、||、！、&、|
&&和&的區別：
**&&**判斷表達式1，如果為false，直接返回false，不再判斷表達式2；
**&**判斷表達式1為false時，依舊會去判斷表達式2，所以&&比&效率高
||和|的區別：
**||**判斷表達式1為true的話，直接返回true，不再判斷表達式2；
**|**判斷表達式1為true后，依舊會去判斷表達式2，所以||比|效率高
3.5位運算
一個數亦或（^）同一個數量詞，得到的是它本身
//不借用第三方數據，交換兩個數據 var a=20; var b= 30; a^=b; //a=a^b 20^30 b^=a; //b=b^a 30^20^30 20 a^=b; //a=a^b 20^30^20 30 console.log('a:'+a+'\nb:'+b)a=a^b^b //20^30^30=203.6三元運算符
表達式1 and 表達式2 ? “true”:“false”;
x=5;y=8;
x>y?x:y x大于y結果為false，所以輸出y
**練習：**制作一個加密和解密的程序，比如原數據是5，輸出通過程序加密之后的數據是30，然后再輸出程序解密之后的數據為5
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script type="text/javascript">// 制作一個加密程序// 1.原始數據// 2.要有一個密鑰// 3.加密是用過密鑰進行原數據改變// 4.解密把原數據改變后的數據進行恢復const original = prompt('請輸入原始數據');// var num = original*6;// alert('加密過后的數據：'+num);// var result = num/6;// alert('解密后的數據：'+result);var num;num=(original*30)/5;alert("加密過后的數據："+num);var result;result=original^num^num;alert("解密過后的數據："+result);</script></head><body></body> </html>流程控制語句
分支語句
基礎分支語句（判斷語句）
if(表達式) {執行語句}（多選一）
執行語句要執行的話，表達式的結果必須為true
單分支語句（判斷語句）
if(表達式) {語句1}else{語句2}（二選一）
表達式結果為true，執行表達式1，若不成立則執行表達式2
案例：成年可以進入網吧，未成年不可進入網吧
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>分支語句</title><script type="text/javascript">var a = prompt("請輸入你的年齡");if (a > 18) {alert('你已成年了，歡迎進入XXX');} else {alert('未成年禁止進入');}</script></head><body></body> </html>多分支語句（多判斷條件）
if(表達式1) {語句1}else if (表達式2){語句2}else if(表達式3) {語句2}…… else{語句n} 逐步判斷
判斷多個表達式，如果表達式成立即可執行后面的語句，若是不成立就判斷下個else if后面的表達式
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var num = prompt('請輸入學生人數');if (0 < num && num <= 20) {alert('將進入1號教室');} else if (20 < num && num <= 50) {alert('將進入2號教室');} else if (50 < num && num <= 80) {alert('將進入3號教室');} else if (80 < num && num <= 200) {alert('將進入4號教室')} else {alert('場地有限，滿足不了');}</script></head><body></body> </html>案例：根據學生人數選擇教教室，每個教室能容納的人數不同
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var num = prompt('請輸入學生人數');if (0 < num && num <= 20) {alert('將進入1號教室');} else if (20 < num && num <= 50) {alert('將進入2號教室');} else if (50 < num && num <= 80) {alert('將進入3號教室');} else if (80 < num && num <= 200) {alert('將進入4號教室')} else {alert('場地有限，滿足不了');}</script></head><body></body> </html>案例：判斷閏年
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 閏年：能被4整除且不能被100整除，或者能被400整除var year = prompt("請輸入年份");if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {alert(year + "是閏年");} else {alert(year + '是平年');}</script></head><body></body> </html>練習：根據用戶輸入的月份，打印出細節，比如：一到三月是春，四到六是夏，七到九是秋，十到十二是冬。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var m = prompt('請輸入要查詢的月份');if (0 < m && m < 4) {alert("現在是春季");} else if (3 < m && m < 7) {alert("現在是夏季");} else if (6 < m && m < 10) {alert("現在是秋季");} else if (9 < m && m < 13) {alert("現在是冬季");} else {alert("沒有這個月份，請輸出正確的月份");}</script></head><body></body> </html>特殊的分支語句
switch() {
case ‘值’:
執行語句;
break;
……
default:
執行語句
}
注意：switch() 括號里面的變量值的類型要與case后面的值的類型相同，是全比較（===）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">//因為prompt()接受得到的值是String類型的，case后面的值是數字類型的，所以要把w轉成數字型；或者讓case后面的加引號，變成字符串型var w = prompt('請輸入相應的星期日');w = Number(w);switch (w) {case 1:alert('今天是星期一');break;case 2:alert('今天是星期二');break;case 3:alert('今天是星期三');break;case 4:alert('今天是星期四');break;case 5:alert('今天是星期五');break;case 6:alert('今天是星期六');break;case 7:alert('今天是星期天');break;default:alert('沒有這個星期數');}</script></head><body></body> </html>num與case后面的值匹配，匹配成功就輸出，若是都不匹配，就輸出default后面的執行語句
switch(num)里面的num在js里面可以傳任意值
如果我們的判斷條件是一個區間，這種情況就可以適使用if，如果我們的判斷條件是固定的值，就用switch
注意事項：必須傳入一個值和case后面的值去比較，然后每個case中的執行語句后面必須加上break
練習：判斷用戶輸入的1-7彈出對應的星期，如果輸出的不是1-7，就彈出不是
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var w = prompt('請輸入相應的數字');switch (w) {case '1':alert('今天是星期一');break;case '2':alert('今天是星期二');break;case '3':alert('今天是星期三');break;case '4':alert('今天是星期四');break;case '5':alert('今天是星期五');break;case '6':alert('今天是星期六');break;case '7':alert('今天是星期天');break;default:alert('沒有這個星期數');}</script></head><body></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var num = 2;switch(num) {case 1:alert('1');break;case 2:alert('2');break;case 3:alert('3');break;default:alert("null");}</script></head><body></body> </html>循環語句
在生活中，我們可能需要程序來描述重復操作某一件事情，類似于跑二十圈，我們就是重復的執行跑步的操作
for循環
屬于開發過程中，常用的分支之一，特點是分支條件豐富，可以提供復雜循環終止或者開始條件
for(表達式1;表達式2;表達式3) {
? 循環體，執行語句
}
注意：寫for循環之前一定要先確定開始循環的條件，終止的條件，每次循環執行的操作
1.執行表達式1：var i=1;
2.執行表達式2,：i<=20;判斷是否成立，
3.執行循環體：alert(‘跑了’+i+‘圈’);
4.執行表達式3：i++,i=2
2.執行表達式2，i<=20;判斷是否成立
……一直循環2，3，4這三步，直到表達式2的結果為false，就結束循環
<script type="text/javascript">// 模擬跑步的操作for(var i=1;i<=20;i++) {alert('跑了'+i+'圈');}</script>練習：
求1-10的和
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 1-10的和var sum = 0;for (var i = 1; i <= 10; i++) {// 1+2+3+4+5+6+7+8+9+10=55sum += i;}alert('sum：' + sum);alert('1-10的平均數：'+sum/10);</script></head><body></body> </html>練習：求1-100中所有的奇數的和，和所有偶數的和
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var oddnum = 0;var evennum = 0;for (var i = 1; i <= 100; i++) {if (i % 2 == 0) {evennum += i;} else {oddnum += i;}}alert('100以內所有的偶數和：' + evennum);alert('100以內所有的奇數和：' + oddnum);</script></head><body></body> </html>嵌套循環：在一些特殊的場景下，我們可能一個for循環無法實現效果，需要在for循環中套入for循環
練習：打印出九九乘法表（必要掌握）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">document.write("<h1>九九乘法表</h1>");for(var x=1;x<=9;x++) {for(var y=1;y<=x;y++) {document.write(x+'*'+y+'='+(x*y));document.write("  ");}document.write("<br/>");}</script></head><body></body> </html>while循環
語法：
while(循環條件) {
循環體
}
while循環的弊端：變量的申明在循環的外面，循環結束變量還在
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var run = 1;while(run<10) {alert("跑了"+run+'圈');run++;}</script></head><body></body> </html>do {
循環體
}while(循環條件)
不管while中的表達式是否成立，do中的循環體都會先執行一次
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 跑10圈之后就結束var run = 1;do {alert("跑了"+run+'圈');run++;}while(run<11)</script></head><body></body> </html>練習：
1.1-100的和
2.1-100的和的平均數
3.1-100的所有偶數和
4.1-100的所有奇數和
5.1-100的能被4整除的數的和
for循環
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 1-100的和var sum = 0;var oddnum = 0;var evennum = 0;var sumf = 0;// forfor (var i = 1; i <= 100; i++) {sum += i;if (i % 2 == 0) {evennum += i;} else {oddnum += i;}if (i % 4 == 0) {sumf += i;}}alert('1-100的和為:\n' + sum);alert('1-100的平均值:\n' + (sum / 100));alert("1-100的所有偶數和:\n" + evennum);alert("1-100的所有奇數和:\n" + oddnum);alert("1-100的能被4整除的數的和:\n" + sumf);</script></head><body></body> </html>while循環
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>while</title><script type="text/javascript">// 1-100的平均值var sum = 0;var oddnum = 0;var evennum = 0;var sumf = 0;var i=1;while (i<=100){// 1-100的和sum+=i;if (i % 2 == 0) {evennum += i;} else {oddnum += i;}if (i%4==0) {sumf+=i;}i++;}alert('1-100的和為:\n' + sum);alert('1-100的平均值:\n' + (sum / 100));alert("1-100的所有偶數和:\n" + evennum);alert("1-100的所有奇數和:\n" + oddnum);alert("1-100的能被4整除的數的和:\n" + sumf);</script></head><body></body> </html>JS函數
把具備一定功能或者一定業務邏輯的代碼放在一起，給它取一個名字，這個有名字的代碼塊就叫做函數，通過函數我們可以大大的減少重復的代碼，減少代碼量
函數語法聲明：(function：函數的關鍵詞，用來描述函數的)
1.變量形式的聲明：
? var fun = function() {
? 執行內容;
}
2.函數形式的聲明：
? function fun2() {
? 執行內容;
}
函數的調用
直接在js的代碼塊中，通過函數名()調用，若是不調用，函數就只加載，不執行
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var fun= function() {alert("變量聲明的函數");}function c() {alert('函數形式的聲明');}fun();c();</script></head><body></body> </html>練習：編寫一個函數，該函數打印九九乘法表，然后再調用該函數
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">function m() {for(var x=1;x<=9;x++) {for(var y=1;y<=x;y++) {document.write(x+'*'+y+'='+(x*y));document.write("    ");}document.write("<br/><br/>")}}m();</script></head><body></body> </html>函數種類：
1.按照參數類型劃分
? 無參函數和有參函數
無參函數：函數的方法中沒有傳遞任何參數，無需傳遞數據，直接調用
var fun= function() {}有參函數：函數的方法中需要傳遞參數，在調用時需要傳遞一個參數給函數
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var run = function(num) {alert("跑了"+num+"圈");}run(5);run(10);</script></head><body></body> </html>形參和實參：
? 形參：定義一個范型的參數，沒有實際的值，可以是任何類型
? 實參：在函數中實際使用的參數值。
練習：班上有5位同學，要求編寫一個函數記錄每個同學的姓名，分數
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">function result(n,f) {document.write(n+'的分數為:    '+f+"<br/>");}result("張三",88);result("李四",89);result("王五",80);result("周六",85);result("田七",87);</script></head><body></body> </html>2.按照返回值區分
有返回值的函數：調用函數處理完畢之后，函數返回一個數據。
函數的返回值通過return關鍵字返回
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 編寫一個函數，比較之間的最大數function max(num1,num2) {if(num1>num2) {return num1;}else if(num1<num2) {return num2}else {return num1;}}var maxnum = max(10,10);alert(maxnum);</script></head><body></body> </html>無返回值的函數：調用函數處理完畢之后，函數不返回任何數據。
總結
以上是生活随笔為你收集整理的跟班学习JavaScript第二天———流程控制、分支、循环、函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中国数字标牌行业市场供需与战略研究报告
- 下一篇： 使用Java开发一个做数据共享的联盟链思