JS和HTML和CSS的區(qū)別
1.HTML 標志性編程語言颂斜，給用戶看他想看到的東西
2.CSS 對HTML語言內(nèi)容樣式的“美化”
3.JS 腳本語言，實現(xiàn)操作對象的行為的功能
瀏覽器執(zhí)行JS [分為渲染引擎和JS引擎]
1.渲染引擎：用來解析HTML和CSS侥衬，俗稱內(nèi)核持痰，比如chrome瀏覽器的blink、webkit[老版本]
2.JS引擎：也稱JS解釋器，用來讀取網(wǎng)頁中的JavaScript代碼爸邢，對其處理后運行，比如chrome瀏覽器的V8
JS的作用
1.表單動態(tài)校驗（密碼強度檢測等 減輕服務器的壓力 JS產(chǎn)生的最初目的）
2.網(wǎng)頁特效
3.服務器端開發(fā)(Node.js)
4.桌面程序(Electron)
5.App(Cordova)
6.控制硬件-物聯(lián)網(wǎng)(Ruff)
7.游戲開發(fā)(cocos2d-js)
JS的組成：ECMAScript拿愧、DOM杠河、BOM
1.ECMAScript是由ECMA國際進行標準化的一門編程語言；它規(guī)定了JS的編程語法和基礎核心知識浇辜，是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標準 [可以在MDN中查看更多信息]
2.DOM--文檔對象模型(Document Object Model)是W3C組織推薦的處理可擴展標記語言的標準編程接口券敌，用戶通過對DOM提供的接口可以對頁面上的各種元素進行操作（大小、位置柳洋、顏色)
3.BOM--瀏覽器對象模型(Brower Object Model)是指瀏覽器的對象模型待诅，它提供了獨立于內(nèi)容的可以與瀏覽器窗口進行互動的對象結構，比如彈出框熊镣、控制瀏覽器跳轉卑雁、獲取分辨率等
JS的書寫位置 [三種方式：1.行內(nèi)募书、2.內(nèi)嵌、3.外部]
vscode手敲代碼來體驗一把
<!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>Document</title>
<style></style>
<!-- 2. 內(nèi)嵌式的JS-->
<!-- <script>
alert('bunny很可愛')
</script> -->
<!-- 3.外部js引用 -->
<script src="01js入門.js">
</script>
</head>
<body>
<!-- 1.行內(nèi)式的JS 直接寫在元素的內(nèi)部 -->
<!-- <input type="button" value="兔兔" onclick="alert('bunny')" /> -->
</body>
</html>
細節(jié)小技巧：新建html文件后 在vscode中輸入测蹲！再按回車鍵莹捡，可快速輸出html的模板 然后輸入script 。另外扣甲， 注釋可直接ctrl+?鍵就可以了篮赢。
JS的輸入輸出語句
常用的有alert(msg) 、 console.log(msg)琉挖、prompt(info)
1.prompt(info)瀏覽器彈出輸入框荷逞，用戶可以輸入
2.alert(msg) 瀏覽器彈出警示框
3.console.log(msg)瀏覽器控制臺打印輸出信息
動手敲碼
<!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>Document2</title>
<style></style>
<script>
// 給用戶的彈出輸入框
prompt('請輸入手機四位數(shù)尾號');
// alert()警示框 輸出給用戶看
alert('正在檢測與處理');
// console 控制臺輸出 主要時給程序員測試時用的
console.log('程序員調(diào)試時用來查看語句的輸出結果')
</script>
</head>
<body>
</body>
</html>
變量
什么是變量：可以理解為變量是個裝東西的盒子，即變量是用于存放數(shù)據(jù)的容器粹排，我們通過變量名獲取數(shù)據(jù)，也可以用來修改數(shù)據(jù)
變量的本質(zhì)：是程序再內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間 涩澡。通俗地助于地理解：類似于酒店的存在顽耳，要住進酒店，要申請入住的房間妙同，可以N個人住進M個房間射富。請注意：變量名要找到對應的變量
變量的使用
1.聲明變量
var age;//聲明一個變量名稱為age
var是JS 的關鍵字，用來聲明變量（variable）粥帚，使用改關鍵詞聲明變量后胰耗，計算機會自動為變量分配內(nèi)存空間，不需要程序員另外管理芒涡。 age是變量名
2.賦值
age=10;//給age這個變量賦值為10
=用來把 右邊的值賦給左邊的變量空間 此處代表賦值的意思
變量值是程序員保存到空間變量里的值
3.查看輸出結果
這里用console.log() 在瀏覽器端的控制臺輸出可查看到柴灯。
console.log(age)
4.變量-賦值初始化
聲明一個變量并賦值，我們成為變量的初始化费尽，例如：
var age = 18;//聲明變量的同時赠群，將18賦值給變量名age
變量語法擴展
一個變量被重新賦值后，它原有的值就會被覆蓋旱幼，變量賦值將以最后一次賦值為準
var age = 18;
age=20;
//則console.log(age)輸出的是20
同時聲明多個變量
var age =18,name='bunny',sex=2;
報錯情況：
如果只聲明未賦值 報錯undefined
如果不聲明不賦值使用 報錯 xxx is not defined
但是查描，不聲明直接賦值 是可以使用的 但是最好還是要先聲明的
變量的命名規(guī)范
1.首字母必須是字母、下劃線（-）或者美元符號（$）
2.其他字母可以是下劃線（_）柏卤、美元符號（$）冬三、字母或者數(shù)字
3.一般采用駝峰法：第一個字母小寫，其余有意義的單詞首字母大寫
等
變量的常見案例
JS是編程語言有很強的邏輯性在里面 實現(xiàn)這個要求的思路 先怎么做后怎么做要有個邏輯順序
var tempt;
var a= '白兔子'缘缚；
var b = '小紫兔'勾笆；
temp = a;
a=b;
b=temp;
/*此時輸出 ：
b= '白兔子'；
a= '小紫兔'桥滨；*/
自我檢查：
1.為什么需要變量匠襟？
2.變量是什么?
3.變量的本質(zhì)是什么?
4.變量怎么使用的?
5.什么是變量初始化
6.變量的命名規(guī)范
7.交換兩個變量值的思路
小結：
1.一些數(shù)據(jù)需要保存钝侠，所以需要變量‘
2.變量就是一個容器，用來存放數(shù)據(jù)酸舍，方便我們以后使用里面的數(shù)據(jù)
3.變量是內(nèi)存里的一塊空間帅韧，用來存儲數(shù)據(jù)
4.我們使用變量的時候，一定要聲明變量再賦值
5.聲明變量的本質(zhì)是去內(nèi)存申請空間
6.聲明變量并賦值我們稱為初始化
7.變量名要盡量規(guī)范啃勉，遵守駝峰命名法忽舟，會區(qū)分不合法的命名
8.學會交換兩個變量值的邏輯思路
數(shù)據(jù)類型
為什么需要數(shù)據(jù)類型？
在計算機中淮阐，不同的數(shù)據(jù)類型所需要占用的存儲空間是不同的叮阅，為了便于把數(shù)據(jù)分析成所需內(nèi)存大小不同的數(shù)據(jù)，充分利用存儲空間泣特，所以要定義不同的數(shù)據(jù)類型浩姥。
簡而言之就是數(shù)據(jù)類型是數(shù)據(jù)類別的型號，如姓名：“張三”状您，年齡：“18”勒叠，這些數(shù)據(jù)的類型是不同的。
變量的數(shù)據(jù)類型 變量屬于什么樣的數(shù)據(jù)類型呢膏孟？
變量是用來存儲值的所在處眯分，它們的名字和數(shù)據(jù)類型。
變量的數(shù)據(jù)類型決定了如何代表這些值的位存儲到計算機的內(nèi)存中柒桑，JavaScript是一種弱類型或者說動態(tài)語言 這意味著不用提前聲明變量的類型弊决，在程序運行過程中，類型會被自動確定魁淳。
在JavaScript飘诗，變量的數(shù)據(jù)類型是自由變化的，可自由轉化類型界逛。
int num =10; //java
var num;//這里的num我們是不確定屬于哪種數(shù)據(jù)類型的
var num =10;//num得到的10可判斷得出疚察，num屬于屬于數(shù)據(jù)類型
var n =“abc”;// string 字符串型
也就是說，js的變量數(shù)據(jù)類型是只有程序在運行過程中仇奶，根據(jù)等號右邊的值來確定該變量的數(shù)據(jù)類型的
簡單數(shù)據(jù)類型
1.number
數(shù)字型貌嫡，包含整型值和浮點型值，如21该溯，0.21等 岛抄；默認值為0
可以用二進制[0,1]、八進制[數(shù)字前加0]狈茉、十六進制[09,af夫椭，顏色#fffff，數(shù)字前加0x]等
數(shù)字型的最大值和最小值氯庆，簡單了解即可蹭秋，可輸出
console.log(Number,MAX_VALUE)扰付；//最大
console.log(Number,MIN_VALUE)；//最小
2.Boolean
布爾值型仁讨，包括true(真的羽莺、對的)，false(假的洞豁，錯的)盐固，布爾型和數(shù)字型相加的時候，true的值為1丈挟，false的值為0刁卜；默認值是false
console.log(true+1);//2
console.log(false+1);//1
3.string
字符串類型，如：“張三”曙咽；注意蛔趴，在js里面，字符串都帶引號例朱，默認值：“ ”
轉義字符：都是用 \ 開頭孝情，但是這些轉義字符寫到引號里面
常見的轉義字符有：\n換行；\代表斜杠\茉继；'代表單引號；''代表雙引號蚀乔；\t代表tab縮進烁竭；\b代表空格，b是blank的意思
var str ="這是男生\n這是女生" // \n自動換行
字符串長度
字符串是由若干個字符串組成的吉挣，這些字符的數(shù)量就是字符串的長度派撕，通過字符串的length屬性可以獲取整個字符串的長度。
var str ='my name is bunny';
console.log(str.length);//16
另外睬魂，字符串拼接终吼，用+連接，還是字符串類型
如果是含有變量的拼接
var age=20;
console.log("這個叫bunny的小孩今年"+age+'歲');
//變量要寫到字符串里面氯哮，口訣：引引加加
4.underfined
未定義類型际跪，如var a ;聲明了變量為賦值，此時的a=underfined喉钢，默認值姆打，underfined
5.null
var a=null;聲明了變量a為空值，默認值肠虽，null
isNaN()的用法
isNaN()這個方法用來判斷非數(shù)字幔戏，并且返回一個值，如果是數(shù)字返回的是false税课，如果不是數(shù)字返回的是true
利用js實現(xiàn)一個簡單的交互界面
效果圖
<!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>Document</title>
<script>
//邏輯上：先理解需求闲延，分析實現(xiàn)流程
//彈出一個輸入框（prompt）痊剖，讓用戶輸入年齡（用戶輸入）
//把用戶輸入的值變量保存起來，把剛輸入的年齡與所要輸出的字符串拼接（程序員內(nèi)部處理）
//使用alert語句彈出警示框（返回輸出結果呈現(xiàn)給客戶）
var age = prompt('請輸入您的年齡');
var str = '您今年已經(jīng)' + age + '歲了';
alert(str)
</script>
</head>
<body>
</body>
</html>
獲取檢測變量的數(shù)據(jù)類型
typeof是js的屬性 垒玲，可以直接寫陆馁，檢測變量的數(shù)據(jù)類型
var num = 10;
console.log(typeof num)；//打印出number侍匙，即數(shù)據(jù)類型氮惯。string/boolean等同一原理
字面量
自面量是在源代碼中一個固定值的表示法，通俗來說想暗，就是字面量是如何表示這個值
數(shù)字字面量：7妇汗，8，9
字符串字面量：‘小兔子’
布爾字面量：true,false
數(shù)據(jù)類型轉化
根據(jù)需求可以把一種數(shù)據(jù)類型轉化為另一種數(shù)據(jù)類型 说莫，常見的有：轉換為字符串類型杨箭、轉換為數(shù)字型、轉換為布爾型
<script>
//1.把數(shù)字型轉換為字符串型 變量.tostring()
var num = 10;
console.log(num);
console.log(typeof num);//檢測變量的數(shù)據(jù)類型
var str = num.toString();
console.log(str);
console.log(typeof str);//檢測變量的數(shù)據(jù)類型
// 2.我們利用string(變量)
console.log(String(num));
//3.利用+拼接字符串的方法實現(xiàn)轉換效果
console.log(num + '');
</script>
轉換為數(shù)字型
<script>
// var age = prompt('請輸入您的年齡');
// //1,parseInt(變量) 可以把字符串的轉換為數(shù)字型 得到整數(shù)
// console.log(parseInt(age));
console.log(parseInt(3.14));//3
console.log(parseInt(3.85));//3
console.log(parseInt('120px'));//120 會去掉px這個單位
console.log(parseInt('rem120px'));//NaN
//2.parseInt(變量)可以把字符型的轉換為數(shù)字型 得到小數(shù) 浮點型
console.log(parseFloat(3.14));//3.14
console.log(parseFloat(3.85));//3.85
console.log(parseFloat('120px'));//120 會去掉px這個單位
console.log(parseFloat('rem120px'));//NaN
//3.利用Number(變量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));
//4.利用運算 - * / 隱式轉換
console.log('11' - 0);//11
console.log('123' - '120');//3
console.log('25' * '4');//100
</script>
小案例
<script>
//先彈出一個輸入框储狭，提示用戶輸入第一個值 保存起來
//再彈出一個輸入框互婿，提示用戶輸入第二個值 保存起來
//把這兩個值相加，并將結果賦給新的變量（數(shù)據(jù)類型轉換）
//彈出警示框（alert）把計算的結果返回
var num1 = prompt('請輸入第一個值');
var num2 = prompt('請輸入第二個值');
var result = parseInt(num1) + parseInt(num2);
alert("計算結果是：" + result);
</script>
轉換為布爾型
Boonlean()函數(shù)
將其他轉化為布爾型 辽狈，例如：Boonlean('true');
注意
1.代表空慈参、否定的值會被轉化為false ,如 ‘’，0刮萌，NaN, null ,undefined
2.其余的值都會被轉化為true
————————————————————————————
運算
計算機不能直接理解任何除機器語言以外的語言驮配，所以必須要把程序員所寫的程序語言翻譯成機器語言才能執(zhí)行程序。程序語言翻譯成機器語言的工具着茸，被稱為翻譯器壮锻。
編程語言 翻譯器 機器語言(二進制)
翻譯器翻譯的方式有兩種:一個是編譯，另外一個是解釋涮阔。兩種方式之間的區(qū)別在于翻譯的時間點不同編譯器是在代碼執(zhí)行之前進行編譯猜绣，生成中間代碼文件
解釋器是在運行時進行及時解釋，并立即執(zhí)行(當編譯器以解釋方式運行的時候敬特，也稱之為解釋器)
js是解釋型語言掰邢，對于瀏覽器而言，一邊讀一遍呈現(xiàn)頁面效果伟阔，效果更佳尸变。
標識字、關鍵字减俏、保留字
標識字：自定義
關鍵字:是指JS本身已經(jīng)使用了的字召烂，不能再用它們充當變量名、方法名娃承。
包括:break奏夫、case怕篷、catch、continue酗昼、default廊谓、delete、do麻削、else蒸痹、finally、for呛哟、function叠荠、if、in.
inlatceol ne retum suict. it. lh y tpeot wi oid ilt. wit.
保留字：意思是現(xiàn)在雖然還不是關鍵字扫责，但是未來可能會成為關鍵字榛鼎，同樣不
保留字:實際上就是預留的“關鍵字”能使用它們當變量名或方法名。
包括:boolean鳖孤、byte者娱、char、class苏揣、const黄鳍、debugger、 doubleenum.export平匈、extends. fimal框沟、float、goto吐葱、implements街望、import校翔、int弟跑、interface、 long防症、mative孟辑、package、
private. protected, public. shof static蔫敲、supersynchronizedthrows饲嗽、transient、
volatile等奈嘿。
運算符
運算符(operator)也被稱為操作符貌虾，是用于實現(xiàn)賦值、比較和執(zhí)行算數(shù)運算等功能的符號裙犹。
JavaScript中常用的運算符有:
算數(shù)運算符
遞增和遞減運算符
比較運算符
邏輯運算符
賦值運算符
前置遞增和后置遞增運算符可以簡化代碼的編寫尽狠，讓變量的值+1 比以前寫法更簡單單獨使用時衔憨，運行結果相同
與其他代碼聯(lián)用時，執(zhí)行結果會不同
后置:先原值運算袄膏，后自加(先人后己)
前置:先自加践图，后運算(先已后人)
開發(fā)時，大多使用后置遞增/減沉馆，并且代碼獨占一行码党，例如:num++;或者num-;
運算符
<script>
// = 一個等號是賦值
// ==兩個等號是判斷 判斷兩個值是否相等（注意此時有隱式轉換）
// ===三個等號是全等 判斷兩邊的值和數(shù)據(jù)類型是否完全相同
//1.我們程序里等于符號是 == 默認轉換數(shù)據(jù)類型 會把字符串型的數(shù)據(jù)轉換為數(shù)字型
//邏輯運算符 && || ！即：與 或 非
//短路運算 （邏輯中斷）
//1.用我們的布爾型參與的邏輯運算
//2.123 && 456 是值 或者是 表達式 參與邏輯運算斥黑？
//3.邏輯與短路運算 如果表達式1 結果為真 則返回表達式2 如果表達式1為假 那么返回表達式1
console.log(123 && 456);//123456
console.log(0 && 456);//0
console.log(0 && 1 + 2 && 456 * 56789);//0
console.log('' && 1 + 2 && 456 * 45678);//''
//如果有空的或者否定的為假 0 '' null undefined Nan ;其余是真的
//4.邏輯或短路運算 如果表達式1 結果為真 則返回的表達式1 揖盘；如果表達式1 結果為假 則返回的表達式2
//5.賦值運算 = += -= *= /= %=
//6.運算優(yōu)先級 小括號 一元運算符(++ -- ！) 算數(shù)運算(先*/后+-) 關系運算符(> >= < <=)
// 相等運算符(== != === !==) 邏輯運算付(先&&后||) 賦值運算符(=) 逗號運算符(,)
</script>
JavaScript流程控制 分支
//1心赶，流程控制(順序結構 分支[條件]結構 循環(huán)結構)
//2扣讼，if 的語法結構 如果if
// if (條件表達式) {
// //執(zhí)行語句
// }
//2.執(zhí)行思路 如果if里面的條件表達式結果為真 true 則執(zhí)行大括號里面的 執(zhí)行語句
//如果 if 條件表達式結果為假 則不執(zhí)行大括號里面的語句 則執(zhí)行if 語句后面的代碼
//3.案例
// if (3 < 5) {
// alert('沙漠駱駝');
// }
// //4.進入網(wǎng)吧 案例
// //彈出prompt輸入框，用戶輸入年齡缨叫，程序把這個值取過來保存在變量中
// //使用if條件語句來判斷年齡 如果年齡大于18 就執(zhí)行 if大括號里面的輸出語句
// //if(){} else{}
// var age = prompt('請輸入你的年齡：');
// if (age > 18) {
// alert('歡迎您進入游戲廳椭符！祝您玩得愉快！')
// } else {
// alert('未成年人禁止進入游戲廳耻姥！請退出销钝！')
// }
// //5.案列 潤年
// var year = prompt('請輸入年份');
// if (year % 4 == 0 && year % 100 != 0 || year % 4 == 0) {
// alert('您輸入的是閏年');
// } else {
// alert('您輸入的是平年');
// }
// //6.if(條件){{else if(條件){}}多分枝語句 利用多個條件 得到不同的結果 多選的過程
// var score = prompt('請輸入你的分數(shù):');
// if (score >= 90) {
// alert('等級為：優(yōu)秀');
// } else if (score >= 80) {
// alert('等級為：良好');
// } else if (score >= 70) {
// alert('等級為：合格');
// } else if (score <= 60) {
// alert('等級為：不及格');
// }
//7.三元表達式
//(1)有三元運算符組成的式子我們稱為三元表達式
//(2)++num 3+5 ？：
//(3)語法結構 條件表達式 琐簇？ 表達式1 ： 表達式2
//(4)執(zhí)行思路 如果條件表達式結果為真 則返回表達式1 為假則返回表達式2 等同于if else
//(5)案例
// var num = 10;
// var result = num > 5 ? 'Yes' : 'No';
// console.log(result);//Yes
// //等同于
// if (num > 5) {
// result = 'Yes';
// } else {
// result = 'NO'
// }
// console.log(result);//Yes
// //8.案例 數(shù)字補零案例 可用于倒計時補零
// //用戶輸入(prompt)0~59之間的一個數(shù)字
// //如果這個數(shù)字小于10 則在這個數(shù)字前面補零蒸健，(加0 拼接) 否則 不做操作
// //用一個變量接受這個返回值 輸出
// var time = prompt('請您輸入0~59之間的一個數(shù)組');
// //三元表達式
// var result = time < 10 ? '0' + time : tiem;//把返回值賦給一個變量
// alert(result);
//9.(1)switch語句也是多分支語句 也可以實現(xiàn) 對選1 ; (2)語法結構 switch 轉換 開關 case 小例子 或者選項的意思
//(3)執(zhí)行思路 利用我們的表達式的值 和 case 后面的選項值相匹配 如果匹配上就執(zhí)行case里面的語句 如果沒有匹配上就執(zhí)行default里面的語句
//(4)案例
// switch (2) {
// case 1:
// console.log('這是1');
// break;
// case 2:
// console.log('這是2');
// break;
// case 3:
// console.log(這是3);
// break;
// default:
// console.log('沒有匹配到結果');
// }
var num = 3;
switch (num) {
case 1:
console.log('1');
break;
case 3:
console.log('3');
break;
}
//注意事項：(1)我們在開發(fā)里 表達式經(jīng)常寫成變量
//(2)我們num的值 和 case 里面的值相匹配的時候是 全等 必須是值和數(shù)據(jù)類型一致才可以 num ===1
//(3)break 如果當前的case里面的值沒有break 則不會退出 switch是繼續(xù)執(zhí)行下一個case
//案例 ： 超市輸入水果，返回價格
var fruit = prompt('請輸入要查詢的水果名稱')
switch (fruit) {
case '蘋果':
alert('蘋果的價格是每斤3.5/斤');
break;
case '香蕉':
alert('香蕉的價格是每斤2.5/斤');
break;
case '水蜜桃':
alert('水蜜桃的價格是每斤6.5/斤');
break;
default:
alert('出錯了婉商！請聯(lián)系工作人員');
}
//switch 和 if else 的區(qū)別
//switch用于處理比較確定的值的情況下
//if else if用于范圍的判斷
循環(huán)
for循環(huán)總結
1.for 循環(huán)可以重復執(zhí)行某些相同的代碼
2.for循環(huán)可以重復執(zhí)行些許不同的代碼 因為我們有計數(shù)器
3.for循環(huán)可以重復執(zhí)行某些操作似忧，比如算術運算符加操作
4.雙重for循環(huán)可以做更多跟好看的效果
5.雙重for循環(huán)，外層循環(huán)一次丈秩，內(nèi)層for循環(huán)全部執(zhí)行
6.for循環(huán)是循環(huán)條件和數(shù)字直接相關的循環(huán)
7.分析要別寫代碼更重要
8.舉一反三盯捌，自己經(jīng)常總結一些常用到且相似的案例
代碼以及解析
//循環(huán)的目的：重復執(zhí)行某些語句
//循環(huán)：for循環(huán) while循環(huán) do while循環(huán)
//1.for 循壞 重復執(zhí)行某些代碼 通常跟計數(shù)有關系
//2蘑秽，for 語法結構
// for (初始化變量; 條件表達式; 操作表達式) {
// //循環(huán)體
// }
//3饺著，初始化變量，就是用Var聲明的一個普通變量肠牲，通常用于作為計數(shù)器使用
//4幼衰，條件表達式，就是用來決定每一次循環(huán)是否繼續(xù)執(zhí)行就是中止的條件
//5缀雳，操作表達式渡嚣，是每次循環(huán)最后執(zhí)行的代碼 經(jīng)常用于我們計數(shù)器變量進行更新（遞增或者遞減）
//6，代碼體驗
// for (var i = 1; i <= 100; i++) {
// console.log('你好嗎？');
// }
// //for 循環(huán)的執(zhí)行過程
// //1识椰，首先執(zhí)行里面的計數(shù)器變量 var i = 1,但是這句話在for里面只執(zhí)行一次 index
// //2.去 i<=100來判斷是否滿足條件扬绪，如果滿足條件，就去執(zhí)行 循環(huán)體裤唠，不滿足條件退出循環(huán)
// //3.最后去執(zhí)行i++ i++是單獨寫的代碼 遞增 第一輪結束
// //4.接著去執(zhí)行 i<= 100 如果滿足條件 就去執(zhí)行循環(huán)體 不滿足條件 就退出循環(huán)體 第二輪
// //斷點調(diào)式 在瀏覽器中 sources里面看
// //第一步 在行號上打斷點 點一下行號即可挤牛； 第二步 刷新一下我的瀏覽器
// //for 可以循環(huán)執(zhí)行相同的代碼
// var num = prompt('請您輸入循環(huán)的次數(shù)')
// for (var i = 1; i <= num; i++) {
// console.log("你是小可愛");
// }
// //for 也可以循環(huán)執(zhí)行不同的代碼 這主要原因是有 計數(shù)器i的存在 i每次循環(huán)值都會變化
// for (var i = 1; i <= 100; i++) {
// console.log('今年' + i + '歲');
// }
// //for 循環(huán)重復某些相同的操作 比如做1-100之間所有整數(shù)的累加和
// //分析：需要循環(huán)100次 需要一個計數(shù)器
// //需要一個存儲變量的sum 但是初始值一定是0
// //核心算法：1+2+3+...+100，sum = sum+i;
// var sum = 0;//求和的變量
// for (var i = 0; i <= 100; i++) {
// //sum = sum + i;
// sum += i;
// }
// console.log(sum);
// //求1-100之間的所有數(shù)的平均值
// var sum = 0;
// var average = 0
// for (var i = 1; i <= 100; i++) {
// sum += i;
// }
// average = sum / 100;
// console.log(average);
// //求1-100之間的偶數(shù)和奇數(shù)的和 分析：我們需要一個偶數(shù)的和變量 even 還需要一個奇數(shù) odd
// var even = 0;
// var odd = 0;
// for (var i = 1; i <= 100; i++) {
// if (i % 2 == 0) {
// even = even + i;
// } else {
// odd = odd + i;
// }
// }
// console.log("1-100之間所有的偶數(shù)之和是：" + even);
// console.log("1-100之間所有的奇數(shù)之和是：" + odd);
// //求1-100之間所有能被5整除的數(shù)字的和 分析：需要一個接受結果的變量 result
// var result = 0;
// for (var i = 1; i <= 100; i++) {
// if (i % 5 == 0) {
// result = result + i;
// }
// }
// console.log('所有能被5整除的數(shù)字的和是：' + result);
// //案例
// //彈出輸入框輸入的總的班級人數(shù)(num)
// //依次輸入學生的成績（保存起來 score）,此時我們需要用到
// //for 循環(huán) 彈出的次數(shù)跟班級總人數(shù)有關 條件表達式 i<=num
// //進行業(yè)務處理：計算成績 先求總成績(sum) 再求平均成績(average)
// //彈出結果
// var num = prompt('請輸入班級人數(shù):');//num總的班級人數(shù)
// var sum = 0;//求和的變量
// var average = 0;//平均值的變量
// for (var i = 1; i <= num; i++) {
// var score = prompt('請輸入第' + i + '個學生的成績');
// //sum = sum+score; 注意 ：這里要用parseFloat轉化數(shù)字類型
// //因為prompt取過來的數(shù)據(jù)是字符串型种蘸，需要轉化為數(shù)字型
// sum = sum + parseFloat(score)
// }
// average = sum / num;
// alert('班級的總分是：' + sum)
// alert('班級平均分是：' + average)
// //一行打印五個心心 采用追加字符串的方式 str =str+'??'
// var str = '';
// for (var i = 1; i <= 5; i++) {
// str = str + '??';
// }
// console.log(str);
// //用戶好評 由用戶輸出?的個數(shù)
// var num = prompt('請輸入評分數(shù)： [滿意6~10分墓赴，良好4~5分，一般2~3分航瞭，差評0~1分]')
// var str = '';
// for (var i = 0; i < num; i++) {
// str = str + '??'
// }
// console.log(str);
//雙重for循環(huán) 嵌套實現(xiàn)
// //1.語法結構
// for(外層的初始化變量;外層的條件表達式;外層的操作表達式){
// for(里層的初始化變量;里層的條件表達式;里層的操作表達式){
// //執(zhí)行語句
// }
// }
//2.我們可以把里面的循環(huán)看做是外層循環(huán)的語句
//3.外層循環(huán) 循環(huán)一次 里面的循環(huán)執(zhí)行全部
//4.代碼驗證
// for (var i = 1; i <= 3; i++) {
// console.log('外層循環(huán)的第' + i + '次');
// for (var j = 1; j <= 3; j++) {
// console.log('外層循環(huán)的第' + j + '次');
// }
// }
// //打印五行五列的?
// var str = '';
// for (var i = 1; i <= 5; i++) {
// for (var j = 1; j <= 5; j++) {
// str = str + '?';
// }
// //如果一行打印完畢五個?诫硕，就要另起一行 加 \n
// str = str + '\n';
// }
// console.log(str);
// //由用戶定義行列
// var rows = prompt('請輸入行數(shù)：');
// var cols = prompt('請輸入列數(shù)：')
// var str = '';
// for (var i = 1; i <= rows; i++) {
// for (var j = 1; j <= cols; j++) {
// str = str + '?';
// }
// //如果一行打印完畢五個?，就要另起一行 加 \n
// str = str + '\n';
// }
// console.log(str);
// //打印倒三角型
// //一共有10行 但每一行的個數(shù)都不同 10 9 8 7 6 5 4 3 2 1
// var str = '';
// for (var i = 1; i <= 10; i++) {//外層循環(huán)控制行數(shù)
// for (var j = i; j <= 10; j++) {//里層循環(huán)打印的個數(shù)不一樣刊侯，注意：i和j的關系
// str = str + '?';
// }
// str = str + '\n';
// }
// console.log(str);
//九九乘法表 一共九行 每行的個數(shù)不同 因此要用到雙重for循環(huán)
//外層的for 循環(huán)控制 i 循環(huán)9次 可以打印9次
//內(nèi)層的for 循環(huán)控制每行公式 j
//核心算法：每一行的公式的個數(shù)正好與行數(shù)一致章办，即可表達為：j<=i;
var str = '';
for (var i = 1; i < 10; i++) {
for (var j = 1; j <= i; j++) {
// str = str + (i * j);
//1X2=2
str += j + 'x' + i + '=' + i * j + '\t';//+'\t'是調(diào)整間距的
}
str += '\n'
}
console.log(str);
while循環(huán)
循環(huán)小結：
JS中有for、 while滨彻、do...while三種循環(huán)方式
三個循環(huán)在很多情況下都可以相互代替作用
如果用來計數(shù)次數(shù)藕届，跟數(shù)字相關的，三者使用基本相同亭饵，通常來說休偶，用for比較多
while、do...while可以做更復雜的判斷條件辜羊，比for更靈活一些
while踏兜、do...while的執(zhí)行順序不同尚胞，while是先判斷后執(zhí)行胀葱，do...while是先執(zhí)行一次后判斷
while、do...while的執(zhí)行次數(shù)不同烹看，do...while至少會少執(zhí)行一次循環(huán)體昔驱，而while可能一次都不執(zhí)行
學習的重點是for循環(huán)的應用
//1.whlie循環(huán)語法結構 whlie當...的時候
//while(條件表達式){
//循環(huán)體
//}
//2.執(zhí)行思路 當條件表達結果為true 則執(zhí)行循環(huán)體 否則 退出循環(huán)
//3.代碼
// var num = 1;
// while (num <= 19) {
// console.log(num);
// num++;
// }
//4.里面應該也有計數(shù)器 初始化變量
//5.里面應該也有操作表達式 完成計數(shù)器的更新 防止死循環(huán)
// //6.案列 年齡
// var age = 1;
// while (age <= 21) {
// console.log('今年' + age + '歲');
// age++;
// }
// //7.計算1~100之間所有的整數(shù)和
// var sum = 0;
// var i = 1;
// while (i <= 100) {
// sum += i;
// i++;
// }
// console.log(sum);
// //8.彈出一個對話框 疹尾，你愛我嗎？如果輸入我愛你舍悯，就提示結束航棱，輸入其它睡雇，則一致詢問
// var mes = prompt('請回答萌衬，你愛我嗎？')
// while (mes !== '我愛你') {
// mes = prompt('你愛我嗎它抱？');
// alert('你確定嗎秕豫？');
// }
// //do...while
// //1.語法結構
// do {
// //循環(huán)體
// } while (條件表達式) {
// }
//2.執(zhí)行思路 與while不同的地方在于 do ..while先執(zhí)行一次循環(huán)體 再判斷條件
//如果條件表達式結果為真，則繼續(xù)執(zhí)行循環(huán)體，否則退出循環(huán)
// //例1
// var i = 1;
// do {
// console.log('今年' + i + '歲');
// i++;
// } while (i <= 100)
//例2 1~100整數(shù)和
var sum = 0;
var j = 1;
do {
sum = sum + j;
j++;
} while (j <= 100)
console.log(sum);
continue break關鍵字
//continue關鍵字 退出本次（當前執(zhí)行的循環(huán)） 繼續(xù)執(zhí)行剩余次數(shù)循環(huán)
for (var i = 1; i <= 6; i++) {
if (i == 3) {
continue;//只要遇見 continue就退出本次循環(huán) 直接跳到i++
}
console.log('我正在看第' + i + '本書');
}
//求1~100之間 除了能被7整除之外的整數(shù)和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;//只要遇見 continue就退出本次循環(huán) 直接跳到i++
}
sum += i;
}
console.log(sum);
// //break關鍵字 退出整個循環(huán)
// for (var i = 1; i <= 6; i++) {
// if (i == 3) {
// break;//退出循環(huán)
// }
// console.log('我正在看第' + i + '本書');
// }
//求1~100之間 除了能被7整除之外的整數(shù)和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
break;//只要遇見 continue就退出本次循環(huán) 直接跳到i++
}
sum += i;
}
console.log(sum);
數(shù)組
1.為什么要有數(shù)組混移？
2.創(chuàng)建數(shù)組
3.獲取數(shù)組中的元素
4.對數(shù)組進行遍歷
5.給數(shù)組新增一個元素
6.獨立完成冒泡排序的案例
//1.什么是數(shù)組祠墅？有什么用？數(shù)組(Array):就是一組數(shù)據(jù)的集合 存儲在單個變量下的優(yōu)雅方式
//2.數(shù)組的創(chuàng)建方式歌径？利用new創(chuàng)建數(shù)組
//var arr = new Array();//創(chuàng)建一個新的數(shù)組
//3.數(shù)組的創(chuàng)建方式毁嗦？利用數(shù)組字面量創(chuàng)建數(shù)組 var arr=[];//創(chuàng)建一個空的數(shù)組
//4.數(shù)組里面的數(shù)據(jù)一定要用逗號隔開 數(shù)組里面的數(shù)據(jù) 稱為數(shù)組元素
// //5.注意：數(shù)組有索引號 從0開始
// var arr = [1, 2, 6, 'bunny', '兔兔']
// console.log(arr);//獲取數(shù)組元素 獲取全部
// console.log(arr[3]);//獲取數(shù)組的其中的數(shù)組元素bunny
// //6.遍歷數(shù)組 把數(shù)組里的所有元素提取出來 遍歷：把數(shù)組中的每個元素從頭到尾訪問一次[類似上課前對全部同學的點名]
// //用for循環(huán)來遍歷 i是指數(shù)組的索引號 索引號是從0開始的
// var arr1 = ['red', 'green', 'blue', 'pink'];
// for (var i = 0; i < 4; i++) {
// console.log(arr1[i]);
// }
// //7.數(shù)組的長度 :指的是元素個數(shù) 不要跟索引號混淆
// console.log(arr1.length);
// //8.靈活使用
// var arr = [1, 2, 35, 6, 7, 8, 9, 99, 45, 3232, 23]
// for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
// console.log(arr.length);
// //9.數(shù)組求和和求平均值
// //分析：求數(shù)組[3,4,6,8,1]里面所有元素的和以及平均值
// //先聲明求和的變量和求平均值的變量：sum average
// //sum等于數(shù)組里每個元素相加 average等于sum除以數(shù)組長度 length
// var arr = [10, 4, 6, 8, 2];
// var sum = 0;
// var average = 0;
// for (var i = 0; i < arr.length; i++) {
// sum += arr[i];
// }
// average = sum / arr.length;
// console.log(sum, average);//直接輸出和以及平均值。注意：中間用逗號隔開
//10.求數(shù)組里的最大值和最小值
//分析：聲明一個保存最大元素的變量max
//默認最大值可以取數(shù)組中的第一個元素
//遍歷這個數(shù)組回铛，把里面的每個數(shù)組元素和max比較
//如果這個值大于max 就把這個數(shù)組元素存放到max里面狗准，否則繼續(xù)下一輪比較
// var arr = [999, 4, 6, 8, 2];
// max = arr[0];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] > max) {
// max = arr[i];
// }
// }
// console.log(max);
// //最小值
// var arr = [999, 4, 6, 8, 2, 0];
// min = arr[0];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] < min) {
// min = arr[i];
// }
// }
// console.log(min);
// //11.數(shù)組轉化為字符串
// //將數(shù)組var arr = [1, 2, 6, 'bunny', '兔兔']轉化為字符串，并且用|或其它符號分割
// //分析：需要一個新的變量用于存放轉換完的字符串茵肃；遍歷原來的數(shù)組腔长，分別把里面的數(shù)據(jù)提出來，加到字符串里验残，最后捞附，同時在后面多加一個分隔符
// var arr = [1, 2, 6, 'bunny', '兔兔'];
// var str = '';
// // var sep = '*';
// for (var i = 0; i < arr.length; i++) {
// // str += arr[i] + sep;
// str += arr[i] + '|'
// }
// console.log(str);
// //12.新增數(shù)組元素 修改length長度
// var arr = [1, 2, 6, 'bunny', '兔兔']
// console.log(arr.length);
// arr.length = 7;//把數(shù)組的長度加長，里面應該有7個元素您没，含兩個空數(shù)組
// var arr = [1, 2, 6, 'bunny', '兔兔']
// arr[5] = '小白'
// console.log(arr);
// arr[0] = 'pink';//替換原來的數(shù)組
// arr = '替換全部';//非必要鸟召，不要直接給數(shù)組名賦值 否則里面的數(shù)組元素都沒有了
// //13.新建一個數(shù)組，里面存放10個整數(shù)[1~10]
// //分析：核心原理：用循環(huán)來追加數(shù)組
// //聲明一個空數(shù)組arr
// //循環(huán)中的計數(shù)器i 可以作為數(shù)組元素存入
// //由于數(shù)組的索引號是從0開始的氨鹏，因此計數(shù)器從0開始更合適药版，存入的數(shù)組元素要+1
// var arr = [];
// for (var i = 0; i < 10; i++) {
// arr[i] = i + 1;
// }
// console.log(arr);
// //14.篩選數(shù)組 方法一 將數(shù)組var arr =[1,45,77,8,4,8,2,9,3,98,66,12]中大于10的篩選出來，存放于新數(shù)組中
// //分析：聲明一個新的數(shù)組存放新數(shù)據(jù)：newArr ;遍歷原來的數(shù)組喻犁，找出大于等于10的元素槽片；依次追加給新數(shù)組
// var arr = [1, 45, 77, 8, 4, 8, 2, 9, 3, 98, 66, 12];
// var newArr = [];
// var j = 0;
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] > 10) {
// newArr[j] = arr[i];
// //新數(shù)組索引號應該從0開始 一次遞增
// j++;
// }
// }
// console.log(newArr);
// //方法二
// var arr = [1, 45, 77, 8, 4, 8, 2, 9, 3, 98, 66, 12];
// var newArr = [];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] > 10) {
// newArr[newArr.length] = arr[i];
// //新數(shù)組索引號應該從0開始 一次遞增
// j++;
// }
// }
// console.log(newArr);
// //15.數(shù)組去重 刪除指定的數(shù)組元素 將var arr = [1, 1, 2, 0，0肢础，5还栓，0];
// //分析：需要一個新數(shù)組用于存放篩選之后的數(shù)據(jù)；遍歷原來的數(shù)組传轰，把不是0的添加到數(shù)組里面（此時要注意采用數(shù)組名+索引的格式接收數(shù)據(jù)）
// //新數(shù)組里面的個數(shù)用length不斷累加
// var arr = [1, 1, 2, 0, 0, 5, 0];
// var selcet = [];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] !== 0) {
// selcet[selcet.length] = arr[i];
// }
// }
// console.log(selcet);
// //16.翻轉數(shù)組 var arr = [1, 2, 3, 4, 5 ]
// //分析：聲明一個新數(shù)組 剩盒；把舊數(shù)組索引號第四個取過來，給新數(shù)組索引號為0的數(shù)組元素newArr.length;采用遞減的方式 i--
// var arr = [1, 2, 3, 4, 5];
// var newArr = [];
// for (var i = arr.length - 1; i >= 0; i--) {
// newArr[newArr.length] = arr[i];
// }
// console.log(newArr);
//17.冒泡排序（排序從小到大或者從大到锌堋） 交換兩個變量
var arr = [4, 5, 1, 2, 3];
for (var i = 0; i <= arr.length - 1; i++) {//外層循環(huán) 負責管理循環(huán)的總次數(shù)
for (var j = 0; j <= arr.length - i - 1; j++) {//內(nèi)層循環(huán) 負責管理每一輪的交換的總次數(shù)
//內(nèi)部交換2個變量的值 前一個和后面一個數(shù)組元素相比較
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
函數(shù)
//1.什么是函數(shù)辽聊？為什么需要函數(shù)？
//2.函數(shù)就是封裝了一段可以被重復執(zhí)行調(diào)用的代碼塊 目的：讓大量代碼重復使用
//3.函數(shù)的使用期贫？聲明函數(shù) 和 函數(shù)調(diào)用 function 函數(shù)名（）{ //函數(shù)體 }
//（1）function是聲明函數(shù)的關鍵字 全部小寫
//（2）函數(shù)是做某件事情 函數(shù)名一般是動詞
//（3）函數(shù)不調(diào)用是不會被執(zhí)行的 必須要調(diào)用才能執(zhí)行
//（4）調(diào)用時千萬不要忘記添加小括號
//函數(shù)封裝：就是把一個或者多個功能通過函數(shù)的方式封裝起來跟匆，對外只提供一個接口
// function getSum(num1, num2) {
// var sum = 0;
// for (var i = num1; i <= num2; i++) {
// sum += i;
// }
// console.log(sum);
// }
// getSum(1, 100);
// getSum(10, 50);
// getSum(1, 99);
// //4.利用函數(shù)計算1-100之間的累加和
// //(1)聲明函數(shù)
// function getSum() {
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// sum += i;
// }
// console.log(sum);
// }
// //(2)調(diào)用函數(shù)
// getSum();
// //5.可以利用函數(shù)的參數(shù)去實現(xiàn)函數(shù)重復不同的代碼
// function 函數(shù)名(形參1,形參2,...){
// //聲明函數(shù)的小括號里是 形參 （即形式上的參數(shù)）
// }
// 函數(shù)名(實參1,實參2,...);//在函數(shù)調(diào)用的小括號里面是實參（實際的參數(shù)）
// 形參和實參的執(zhí)行過程
//形參是接收實參的 形參類似于一個變量
//函數(shù)的參數(shù)可以有 也可以沒有 個數(shù)不限
// function cook(food) {
// console.log(food);
// }
// cook('這是龍蝦');
// cook('這個魚')
//6.利用函數(shù)求任意兩個數(shù)的和
// function getSum(num1, num2) {
// console.log(num1 + num2);
// }
// getSum(2, 3);
// getSum(77, 3)
//7.函數(shù)總結
//函數(shù)可以帶參數(shù)也可以不帶參數(shù)
//聲明函數(shù)的時候 函數(shù)名括號里面的是形參，形參默認為undefined
//調(diào)用函數(shù)的時候通砍，函數(shù)名包括里面的實參
//多個參數(shù)中間用逗號隔開
//形參的個數(shù)可以和形參的個數(shù)不匹配玛臂，但是結果不可預計烤蜕，應當盡量匹配
// //函數(shù)的返回值 return 需要返回的結果
// //（1）函數(shù)是做某件事或者實現(xiàn)某種功能
// //（2）函數(shù)的返回值格式
// //（3）我們函數(shù)只是實現(xiàn)某種功能，最終的結果需要返回給函數(shù)的調(diào)用者函數(shù)名() 通過return實現(xiàn)的
// //（4）只要函數(shù)遇到return 就把后面的結果 返回給函數(shù)的調(diào)用者 函數(shù)名()=return后面的結果
// function getRes() {
// return 123
// }
// getRes();//getRes()= 123
// console.log(getRes());
// //8.求任意兩個數(shù)的和
// function getSum(num1, num2) {
// return (num1 + num2);
// }
// getSum();
// console.log(getSum(50, 50));
// //9. [12,1,3,45,88,99]
// function getMax(arr) {
// var max = arr[0];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] > max) {
// max = arr[i];
// }
// }
// return max;
// }
// var re = getMax([12, 1, 3, 45, 88, 99]);
// console.log(re);
//注意：在我們實際開發(fā)中迹冤，我們經(jīng)常用一個變量來接受函數(shù)的返回結果 這里的var re=...
//函數(shù)的返回值注意事項 （1）return終止函數(shù) （2）return一次只能返回一個值
//10.求任意兩個數(shù) 加減乘除的結果
function getRe(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getRe(4, 2);//返回的是一個數(shù)組
console.log(re);
//11.我們的函數(shù) 如果有return 則返回的是return后面的值 如果函數(shù)沒有return 則返回 undefined
//12.break讽营、continue、return的區(qū)別
arguments的使用
請查閱：bunny筆記| JS基礎入門到精通[02]
<更多泡徙，請關注橱鹏，后續(xù)將會持續(xù)更新>
