什么是JavaScript??

1.JavaScript是一種運(yùn)行在瀏覽器中的解釋型的編程語言。

2.JavaScript 是世界上最流行的語言之一，是一種運(yùn)行在客戶端的腳本語言 （Script 是腳本的意思）

3.腳本語言：不需要編譯，運(yùn)行過程中由 js 解釋器( js 引擎）逐行來進(jìn)行解釋并執(zhí)行

4.現(xiàn)在也可以基于 Node.js 技術(shù)進(jìn)行服務(wù)器端編程

1、JS初體驗??

1.1、行內(nèi)式JS

1. 可以將單行或少量JS代碼寫在HTML標(biāo)簽的事件屬性中(以on開頭的屬性)，如： onclink

2. 注意單雙引號的使用：在HTML中我們推薦使用雙引號，JS中我們推薦使用單引號

3. 可讀性差，在 HTML 中編入 JS 大量代碼時，不方便閱讀

4. 特殊情況下使用

1.2、內(nèi)嵌式JS

• 可以將多行JS代碼寫到<script>標(biāo)簽中

• 內(nèi)嵌 JS 是學(xué)習(xí)時常用的方式

1.3、外部JS

1. 利于HTML頁面代碼結(jié)構(gòu)化，把單獨(dú)JS代碼獨(dú)立到HTML頁面之外，既美觀，又方便

2. 引用外部JS文件的script標(biāo)簽中間不可以寫代碼

3. 適合于JS代碼量比較大的情況

2、JS基本語法??

2.1注釋

2.2輸入輸出語句

• alert()?主要用來顯示消息給用戶

• console.log()?用來給程序員看自己運(yùn)行時的消息

2.3、變量

• 變量是用于存放數(shù)據(jù)的容器，我們通過變量名獲取數(shù)據(jù)，甚至數(shù)據(jù)可以修改

• 本質(zhì)：變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間

2.3.1、變量初始化??

1. var是一個JS關(guān)鍵字，用來聲明變量(variable變量的意思)。使用該關(guān)鍵字聲明變量后，計算機(jī)會自動為變量分配內(nèi)存空間。

2. age 是程序員定義的變量名，我們要通過變量名來訪問內(nèi)存中分配的空間

2.4、數(shù)據(jù)類型??

JavaScript?是一種弱類型或者說動態(tài)語言。這意味著不用提前聲明變量的類型，在程序運(yùn)行過程中，類型會被自動確定。

> 在代碼運(yùn)行時，變量的數(shù)據(jù)類型是由 JS引擎?根據(jù) = 右邊變量值的數(shù)據(jù)類型來判斷?的，運(yùn)行完畢之后， 變量就確定了數(shù)據(jù)類型。

> JavaScript 擁有動態(tài)類型，同時也意味著相同的變量可用作不同的類型

JS 把數(shù)據(jù)類型分為兩類：

• 基本數(shù)據(jù)類型(Number,String,Boolean,Undefined,Null)

• 復(fù)雜數(shù)據(jù)類型(Object)

基本數(shù)據(jù)類型

數(shù)字型Number??

JavaScript 數(shù)字類型既可以用來保存整數(shù)值，也可以保存小數(shù)(浮點(diǎn)數(shù)）。

字符串型String??

字符串型可以是引號中的任意文本，其語法為 “雙引號” 和 "單引號’’

因為 HTML 標(biāo)簽里面的屬性使用的是雙引號，JS 這里我們更推薦使用單引號。

字符串轉(zhuǎn)義符

字符串長度??

字符串的拼接??

> 多個字符串之間可以使用 + 進(jìn)行拼接，其拼接方式為?字符串 + 任何類型 = 拼接之后的新字符串

> 拼接前會把與字符串相加的任何類型轉(zhuǎn)成字符串，再拼接成一個新的字符串

注意：字符串 + 任何類型 =拼接之后的新字符串

字符串拼接加強(qiáng)

布爾型Boolean??

> 布爾類型有兩個值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯）。

> 布爾型和數(shù)字型相加的時候， true 的值為 1 ，false 的值為 0。

三.運(yùn)算符??

運(yùn)算符（operator）也被稱為操作符，是用于實現(xiàn)賦值、比較和執(zhí)行算數(shù)運(yùn)算等功能的符號

• 算數(shù)運(yùn)算符

• 遞增和遞減運(yùn)算符

• 比較運(yùn)算符

• 邏輯運(yùn)算符

• 賦值運(yùn)算符

1、算術(shù)運(yùn)算符??

2、遞增和遞減運(yùn)算符??

遞增（++）

遞減（- -）

放在變量前面時，我們稱為前置遞增(遞減)運(yùn)算符

放在變量后面時，我們稱為后置遞增(遞減)運(yùn)算符

注意：遞增和遞減運(yùn)算符必須和變量配合使用。

①前置遞增運(yùn)算符??

++num num = num + 1

使用口訣:先自加，后返回值

先自加 10+1=11，返回11，此時num=11

②后置遞增運(yùn)算符??

num ++ num = num +1

使用口訣:先返回原值，后自加

③小結(jié)??

1.前置遞增和后置遞增運(yùn)算符可以簡化代碼的編寫，讓變量的值 + 1 比以前寫法更簡單

2.單獨(dú)使用時，運(yùn)行結(jié)果相同，與其他代碼聯(lián)用時，執(zhí)行結(jié)果會不同

3.開發(fā)時，大多使用后置遞增/減，并且代碼獨(dú)占一行

3.比較(關(guān)系)運(yùn)算符??

比較運(yùn)算符是兩個數(shù)據(jù)進(jìn)行比較時所使用的運(yùn)算符，比較運(yùn)算后，會返回一個布爾值(true / false)作為比較運(yùn)算的結(jié)果。

4.邏輯運(yùn)算符??

邏輯運(yùn)算符是用來進(jìn)行布爾值運(yùn)算的運(yùn)算符，其返回值也是布爾值

5.賦值運(yùn)算符??

概念：用來把數(shù)據(jù)賦值給變量的運(yùn)算符。

四.流程控制??

①if語句??

②if else 語句??

案例:

③if else if 語句??

案例:接收用戶輸入的分?jǐn)?shù)，根據(jù)分?jǐn)?shù)輸出對應(yīng)的等級字母 A、B、C、D、E

其中

90分(含)以上 ，輸出：A

80分(含)~ 90 分(不含)，輸出：B

70分(含)~ 80 分(不含)，輸出：C

60分(含)~ 70 分(不含)，輸出：D

60分(不含) 以下，輸出： E

三元表達(dá)式??

語法結(jié)構(gòu) :?表達(dá)式1 ? 表達(dá)式2 : 表達(dá)式3

執(zhí)行思路:如果表達(dá)式1為true，則返回表達(dá)式2的值,如果表達(dá)式1為false，則返回表達(dá)式3的值

案例：數(shù)字補(bǔ)0

用戶輸入數(shù)字，如果數(shù)字小于10，則在前面補(bǔ)0，比如01，09，

如果數(shù)字大于10，則不需要補(bǔ)，比如20

switch??

> switch ：開關(guān) 轉(zhuǎn)換 ， case ：小例子 選項

> 關(guān)鍵字 switch 后面括號內(nèi)可以是表達(dá)式或值， 通常是一個變量

> 關(guān)鍵字 case , 后跟一個選項的表達(dá)式或值，后面跟一個冒號

> switch 表達(dá)式的值會與結(jié)構(gòu)中的 case 的值做比較

> 如果存在匹配全等(===) ，則與該 case 關(guān)聯(lián)的代碼塊會被執(zhí)行，并在遇到 break 時停止，整個 switch 語句代碼執(zhí)行結(jié)束

> 如果所有的 case 的值都和表達(dá)式的值不匹配，則執(zhí)行 default 里的代碼

> 執(zhí)行case 里面的語句時，如果沒有break，則繼續(xù)執(zhí)行下一個case里面的語句

斷點(diǎn)調(diào)試??

1.瀏覽器中按 F12–> sources -->找到需要調(diào)試的文件–>在程序的某一行設(shè)置斷點(diǎn)(在行數(shù)點(diǎn)一下)

2.刷新瀏覽器

3.Watch: 監(jiān)視，通過watch可以監(jiān)視變量的值的變化，非常的常用

4.F11: 程序單步執(zhí)行，讓程序一行一行的執(zhí)行，這個時候，觀察watch中變量的值的變化

五.循環(huán)??

for循環(huán)??

在程序中，一組被重復(fù)執(zhí)行的語句被稱之為循環(huán)體，能否繼續(xù)重復(fù)執(zhí)行，取決于循環(huán)的終止條件。由循環(huán)體及循環(huán)的終止條件組成的語句，被稱之為循環(huán)語句

1.輸入10句"風(fēng)浪越大,魚越貴"

2.求1-100之間所有整數(shù)的累加和

3.求1-100之間所有數(shù)的平均值

4.求1-100之間所有偶數(shù)和奇數(shù)的和

5.求1-100之間所有能被3整除的數(shù)字的和

6.要求用戶輸入班級人數(shù)，之后依次輸入每個學(xué)生的成績，最后打印出該班級總的成績以及平均成績

while循環(huán)??

• 先執(zhí)行條件表達(dá)式，如果結(jié)果為 true，則執(zhí)行循環(huán)體代碼；如果為 false，則退出循環(huán)，執(zhí)行后面代碼

• 執(zhí)行循環(huán)體代碼

• 循環(huán)體代碼執(zhí)行完畢后，程序會繼續(xù)判斷執(zhí)行條件表達(dá)式，如條件仍為true，則會繼續(xù)執(zhí)行循環(huán)體，直到循環(huán)條件為 false 時，整個循環(huán)過程才會結(jié)束

注意：

• 使用 while 循環(huán)時一定要注意，它必須要有退出條件，否則會稱為死循環(huán)

• while 循環(huán)和 for 循環(huán)的不同之處在于 while 循環(huán)可以做較為復(fù)雜的條件判斷，比如判斷用戶名和密碼

①打印人的一生

從1歲到99歲

do while循環(huán)??

1. 先執(zhí)行一次循環(huán)體代碼

2. 再執(zhí)行表達(dá)式，如果結(jié)果為true，則繼續(xù)執(zhí)行循環(huán)體代碼，如果為false，則退出循環(huán)，繼續(xù)執(zhí)行后面的代碼

3. 先執(zhí)行再判斷循環(huán)體，所以dowhile循環(huán)語句至少會執(zhí)行一次循環(huán)體代碼

需求：彈出一個提示框， 你愛我嗎？ 如果輸入我愛你，就提示結(jié)束，否則，一直詢問

continue 關(guān)鍵字??

continue?關(guān)鍵字用于立即跳出本次循環(huán)，繼續(xù)下一次循環(huán)（本次循環(huán)體中 continue 之后的代碼就會少執(zhí)行一次）。

例如，吃5個梨子，第3個有蟲子，就扔掉第3個，繼續(xù)吃第4個第5個梨子

break關(guān)鍵字??

break?關(guān)鍵字用于立即跳出整個循環(huán)

例如，吃5個梨子，吃到第3個發(fā)現(xiàn)里面有半個蟲子，其余的也不吃了

六.數(shù)組??

數(shù)組(Array)是指一組數(shù)據(jù)的集合，其中的每個數(shù)據(jù)被稱作元素，在數(shù)組中可以存放任意類型的元素。數(shù)組是一種將一組數(shù)據(jù)存儲在單個變量名下的優(yōu)雅方式。

JavaScript 中創(chuàng)建數(shù)組有兩種方式：

• 利用?new?創(chuàng)建數(shù)組

• 利用數(shù)組字面量創(chuàng)建數(shù)組

①利用 new 創(chuàng)建數(shù)組??

②利用數(shù)組字面量創(chuàng)建數(shù)組??

• 數(shù)組的字面量是方括號?[]

• 聲明數(shù)組并賦值稱為數(shù)組的初始化

• 這種字面量方式也是我們以后最多使用的方式

數(shù)組的索引（下標(biāo)）??

索引 (下標(biāo)) ：用來訪問數(shù)組元素的序號（數(shù)組下標(biāo)從 0 開始）

遍歷數(shù)組??

數(shù)組的長度??

使用“數(shù)組名.length”可以訪問數(shù)組元素的數(shù)量（數(shù)組長度）

案例:

求數(shù)組 [2,6,1,7, 4] 里面所有元素的和以及平均值

• ①聲明一個求和變量 sum。

• ①遍歷這個數(shù)組，把里面每個數(shù)組元素加到 sum 里面。

• ①用求和變量 sum 除以數(shù)組的長度就可以得到數(shù)組的平均值。

求數(shù)組[2,6,1,77,52,25,7]中的最大值

• ①聲明一個保存最大元素的變量 max。

• ②默認(rèn)最大值可以取數(shù)組中的第一個元素。

• ③遍歷這個數(shù)組，把里面每個數(shù)組元素和 max 相比較。

• ④如果這個數(shù)組元素大于max 就把這個數(shù)組元素存到 max 里面，否則繼續(xù)下一輪比較。

• ⑤最后輸出這個 max。

數(shù)組中新增元素??

①通過修改 length 長度新增數(shù)組元素

• 可以通過修改 length 長度來實現(xiàn)數(shù)組擴(kuò)容的目的

• length 屬性是可讀寫的

其中索引號是 4，5，6 的空間沒有給值，就是聲明變量未給值，默認(rèn)值就是?undefined

②通過修改數(shù)組索引新增數(shù)組元素

• 可以通過修改數(shù)組索引的方式追加數(shù)組元素

• 不能直接給數(shù)組名賦值，否則會覆蓋掉以前的數(shù)據(jù)

• 這種方式也是我們最常用的一種方式

數(shù)組中新增元素

1.新建一個數(shù)組，里面存放10個整數(shù)（ 1~10）， 要求使用循環(huán)追加的方式輸出： [1,2,3,4,5,6,7,8,9,10]

• ①使用循環(huán)來追加數(shù)組。

• ②聲明一個空數(shù)組 arr。

• ③循環(huán)中的計數(shù)器 i 可以作為數(shù)組元素存入。

• 由于數(shù)組的索引號是從0開始的， 因此計數(shù)器從 0 開始更合適，存入的數(shù)組元素要+1。

2.將數(shù)組 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素選出來，放入新數(shù)組

• ①聲明一個新的數(shù)組用于存放新數(shù)據(jù)。

• ②遍歷原來的數(shù)組，找出大于等于 10 的元素。

• ③依次追加給新數(shù)組 newArr。

刪除指定數(shù)組元素??

將數(shù)組[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一個不包含 0 的新數(shù)組。

翻轉(zhuǎn)數(shù)組??

將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的內(nèi)容反過來存放

數(shù)組排序??

冒泡排序

將數(shù)組 [5, 4, 3, 2, 1]中的元素按照從小到大的順序排序，輸出： 1，2，3，4，5