作者簡介：大家好，我是未央；
博客首頁：未央.303
系列專欄：Java測試開發(fā)
每日一句：人的一生，可以有所作為的時機只有一次，那就是現(xiàn)在?。。?/strong>
前言
一、前置知識?
1、JS?和 HTML 和 CSS 之間的關(guān)系
1.2?JS 的書寫形式
1.2.1 內(nèi)嵌式
1.2.2?行內(nèi)式?
1.2.3?外部式
1.2.4?擴展
1.2.5?js的輸入輸出
二、JS的基礎(chǔ)語法
2.1?數(shù)據(jù)類型
2.2?運算符
2.3?數(shù)組
2.3.1?創(chuàng)建數(shù)組
2.3.2 打印數(shù)組
2.3.3?JS數(shù)組中的一些操作
?2.4?函數(shù)
2.4.1?函數(shù)的簡單使用
?2.4.2?函數(shù)表達式
2.4.3?作用域
?2.5?JS對象
2.5?JS對象
總結(jié)
前言
今天我們將進入到JS的學習，它和前面學到的HTML和css都屬于前端常用的代碼；只是他們所用的場景和作用各不相同；
一、前置知識?
1、JS?和 HTML 和 CSS 之間的關(guān)系
圖示說明：
- HTML: 網(wǎng)頁的結(jié)構(gòu)(骨)
- CSS: 網(wǎng)頁的表現(xiàn)(皮)
- JavaScript: 網(wǎng)頁的行為(魂)
HTML寫出來的代碼，就相當于是頁面的框架，相當于是“骨”。
CSS 就是在 HTML 的基礎(chǔ)上，進行裝飾，相當于套了一層“皮”，使其頁面變得好看。
但是 此時的頁面，仍是一個靜態(tài)的！
當我們加入了JS之后，我們就相當于給網(wǎng)頁賦予了靈魂。
所謂的靈魂，就是指的交互性。?
其目的，就是讓網(wǎng)頁不再是一個 純粹靜態(tài)的、干巴巴的、不動的一個東西了。
而是會和程序員進行一些交互。
就是我們在頁面中進行操作，頁面也給予我們一定的反饋。所以，這個時候，彼此之間就會出現(xiàn)一個動態(tài)變換的過程；
1.2?JS 的書寫形式
1.2.1 內(nèi)嵌式
代碼示例：
<!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> </head> <body> <!-- // 內(nèi)嵌型js，主要用于課堂代碼演示, js輸出：alert彈出對話框（模態(tài)對話框，如果用戶不點掉對話框，就無法操作頁面其他內(nèi)容|| --> <!-- console.log("") --> <!-- console是瀏覽器給JS提供的對象，就像java庫提供System.out.println的打印功能 --> <script> console.log("這是一個console輸出，輸出在控制臺，給程序員看，調(diào)試js代碼的重要手段"); alert("一個彈窗"); </script> </body> </html>圖示展示：
1.2.2?行內(nèi)式?
把js寫到HTML元素的內(nèi)部：
代碼示例：
<!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> </head> <body> <!-- // onclick是點擊后才會執(zhí)行，用戶點幾次，就執(zhí)行幾次， // 行內(nèi)js --> <div onclick="alert('點了')">點我試試</div> <button onclick="alert('這是你通過按鈕點擊的結(jié)果')">這是一個按鈕</button> </body> </html>
圖示展示：
1.2.3?外部式
把js代碼單獨寫到一個.js文件中，再通過script()標簽來引入
1.2.4?擴展
如果script標簽中，既有src屬性(外部連接js），內(nèi)部又有js代碼（內(nèi)嵌式），執(zhí)行時會發(fā)生什么呢？兩個js代碼都會執(zhí)行嗎？
那么就讓我們執(zhí)行下面的代碼：
1.2.5?js的輸入輸出
獲取數(shù)組長度
通過.length來獲取，這個和Java的操作基本相同，我們剛才也一直在用：
注意：這里我們的數(shù)組長度length是可以隨時更改的?
往數(shù)組中新增元素
刪除+替換操作?
JS中刪除數(shù)組中的元素，所依賴的方法，非常厲害。
該方法叫做 splice，這個方法，準確的說是針對 數(shù)組中的某個片段，進行替換。
所以，這個方法既可以用來插入元素，又可以用來刪除元素：
代碼示例：
?
二、JS的基礎(chǔ)語法
2.1?數(shù)據(jù)類型
?那么接下來我們重點看，這些數(shù)據(jù)類型和java有什么不同
不同點1
那么這樣就引入了我們動態(tài)和靜態(tài)的概念?
不同點二
?通過這，就引入了強弱類型的概念?
?那么通過對強弱和靜態(tài)動態(tài)的區(qū)分，就有這樣一張圖
?下面我們來舉例說明
- python 強類型+動態(tài)類型，不太支持隱式類型轉(zhuǎn)換，但運行過程中類型可以發(fā)生改變，根據(jù)賦值的類型不同，變量就成了不同的類型。比如說，a本來是一個整數(shù)類型，但之后還可以把一個字符串賦值給a, a就變成了字符串類型
- c是弱類型，靜態(tài)類型——支持隱式類型轉(zhuǎn)換，運行中類型不改變
- java是強類型，靜態(tài)類型——不支持隱式類型轉(zhuǎn)換，類型不會發(fā)生改變
那么說到了強弱、靜態(tài)和動態(tài)，那么到達哪種類型好呢？
- 業(yè)內(nèi)共識是強類型比較好——檢查的越嚴格也好，避免出粗，
- 靜態(tài)類型——編譯器可以做更嚴格的檢查，代碼更嚴謹，更容易發(fā)現(xiàn)問題
- 動態(tài)類型——表達能力更強，可以快速開發(fā)，但如果代碼規(guī)模大了，開發(fā)團隊規(guī)模也大了，就難以維護了
不同點三
一點補充??
隨著時間推移，關(guān)于 JS 變量的類型，出現(xiàn)了一個新的類型 let。
而且，現(xiàn)在更傾向于 使用 let 來 代替 var。
下面，我們就來看一下 let 的效果。
從效果上來看，var 和 let 的效果是一樣的。
但是我們更傾向于使用 let ，為什么呢？
這是因為 var 是 舊版本（早期的設(shè)計），有很多的地方，其實是違背直覺的！
比如，下面的這個例子 ：
得出結(jié)論： var定義的變量，并不會收到大括號的限制。【作用域不會被限制】
我們再來看下面 let 定義的變量 的表現(xiàn)。
?var 和 let，還有很多的一些小細節(jié)。
這里就不一樣列舉了。
總得來?let 要比 var 更符合我們程序員的直覺；
2.2?運算符
JS運算符有很多是和java是相似，這里我們就不再一一列舉，下面我們只說不同;
不同點1:
?不同點2:
重點在于，比較 相等/不相等 的 符號。
JS中比較相等的符號，有兩種：
== 和 ===
不相等的符號也有兩種：
!= 和 !==== 和 != 是一組風格、
=== 和 !== 是一組風格。
先說， == 和 != 這一組。
只是比較兩個變量的值，不比較 兩個變量的類型。
如果兩個變量能夠通過隱式類型轉(zhuǎn)換，轉(zhuǎn)換相同的值，
那么，此時就認為 兩個變量 是相等的。
再來看，=== 和 !== 這一組。
既要比較 兩個變量的值，又要比較兩個變量的類型。
如果類型不相同，就直接認為兩個變量不相等。
比較的過程中，就不存在隱式類型轉(zhuǎn)換的說法。
舉例說明：
注意哦！這里和 java的 equals 是不一樣的！
在java中，重寫后的equals 是 比較值。
重寫前的equals和== 是比較身份——在內(nèi)存中的儲存位置
而且 equals 涉及到對象的比較。
談到對象的比較，有三個維度的比較
1、比較身份（比較地址，看是不是同一個對象）【JS中沒有比較身份的函數(shù)】
2、比較值（標對對象中存儲的數(shù)據(jù)是否相同）
3、比較類型（兩個對象的類型是否是同一個類型）?
2.3?數(shù)組
溫馨提示，JS的數(shù)組與java、c中的傳統(tǒng)數(shù)組相比，是有很大差異的——這可能會顛覆你以往對數(shù)組的認知
2.3.1?創(chuàng)建數(shù)組
此外我們的JS數(shù)組，還可以這么寫?：
?
什么類型的元素，都可以往里面放。
這是 Java 普通數(shù)組所做不到的，需要借助數(shù)據(jù)結(jié)構(gòu)才能實現(xiàn)。
但是 一般也不是這么用，都是會指定一個類型放入數(shù)組中。
有的人可能會問：這是一個什么類型的數(shù)組？
沒有什么類型，這就是一個數(shù)組。
在 JS 中，只有一種數(shù)組，就叫做數(shù)組，里面的元素可以是不同類型的！
另外，JS 中數(shù)組，是不分類型的，并且無法強制要求數(shù)組只能放入一種類型的數(shù)據(jù)。要想數(shù)組里存入的都是同一種類型的數(shù)據(jù)，就只能通過“人為”的方式去完成。
就是 你給這個數(shù)組的元素都是 同一種類型的。
而且，還沒完！
JS 中數(shù)組的元素，還可以是數(shù)組類型的元素；
2.3.2 打印數(shù)組
這個沒什么好說的，通過console.log來打印：
?
這是不是就已經(jīng)很離譜了，但下面還要更離譜的?
離譜+1
?
??離譜+2
?相信大家也能猜到，這樣寫其實是有一定的風險的 ：
2.3.3?JS數(shù)組中的一些操作
獲取數(shù)組長度
通過.length來獲取，這個和Java的操作基本相同，我們剛才也一直在用；
?注意：這里我們的數(shù)組長度length是可以隨時更改的 ；
往數(shù)組中新增元素
刪除+替換操作?
JS中刪除數(shù)組中的元素，所依賴的方法，非常厲害。
該方法叫做 splice，這個方法，準確的說是針對 數(shù)組中的某個片段，進行替換。
所以，這個方法既可以用來插入元素，又可以用來刪除元素
?2.4?函數(shù)
2.4.1?函數(shù)的簡單使用
首先，大家要明白，JS中的函數(shù)（function），在 Java中 叫做 方法（Method）。
注意！函數(shù)就是方法，方法就是函數(shù)，兩者就是同一個東西，只是叫法不同而已通常情況下，我們不需要考慮這兩個概念的具體區(qū)別；
?2.4.2?函數(shù)表達式
在 JS中，函數(shù)是 “一等公民”。
一等公民：一個“一等公民”的函數(shù)，函數(shù)可以像一個普通的變量一樣，賦值給 其他的變量。同時，可以作為另一個函數(shù)的參數(shù)，還可以作為另一個函數(shù)的返回值。
簡單來說：函數(shù)和普通的變量，并沒有本質(zhì)區(qū)別。
只不過函數(shù)這個變量，相對于普通變量來說，多了一個功能（可調(diào)用）。
————————————————
所謂的函數(shù)表達式，其實就是把一個函數(shù)賦值給一個變量了
2.4.3?作用域
?2.5?JS對象
基本概念
對象，就是一些屬性 和 方法的集合。這個概念，與傳統(tǒng)意義上的Java對象的概念是類似的。
?
但是有一個比較大的區(qū)別。
在 Java中，我們的對象是需要先有類，然后針對類進行實例化才能產(chǎn)生對象。
等于就是說，類就是一個模具，可以批量生產(chǎn)相同規(guī)格的產(chǎn)物。
?
而在 JS 中，對象 是不依托于 類的。
就是說：在 JS 中，無需借助類，就能創(chuàng)建一個對象。
另外，Java 中的類，可以視為是一種 自定義類型的類。
例如： Cat 類 和 Dog 類，是兩個不同類型。
但是在 JS 中，所有的對象，都是一個類型【object類型】。
JS 中的對象 要比 Java 中的對象 要簡單一些，不過 需要注意的是，JS 中的所有的對象 都是 object類型，無論對象叫什么名字，有什么屬性，都是相同的類型（這是站在傳統(tǒng)的 JS 語法角度看待的）
JS 里面創(chuàng)建一個對象，不需要依賴于 "類"（不像 Java 里面，需要類，然后使用 new 關(guān)鍵字啥的來創(chuàng)建對象）
在 JS 中直接使用 { } 就可以來表示對象?
對象里面的數(shù)據(jù)，非常類似于 "鍵值對" 結(jié)構(gòu)：每個鍵值對，都是使用 , 來進行分割，鍵和值使用 : 來分割，值也可以是函數(shù)?
定義對象：
當然，定義對象的寫法不止這一種，這里就不必要過多介紹，知道這一種方式就已經(jīng)可以了?
調(diào)用對象的屬性和方法：
在 Java 中要求，一個類的對象 里面包含的屬性和方法，寫好了就是固定不變的；但是，在 JS 中，一個對象的屬性和方法，寫好了卻是可以動態(tài)改變的（這就牽扯到了動態(tài)類型）
如，在上面的代碼中，已經(jīng)寫好了 student對象的屬性和方法，沒有 id屬性、playBasketBall方法，那么我們就可以加上這個：
?
類似于上面所介紹的，數(shù)組的新增元素，如果對應下標不存在，那么就會直接創(chuàng)建出來?
同理，這個在運行時 也會把屬性和方法創(chuàng)建出來?文章來源：http://www.zghlxwxcb.cn/news/detail-472733.html
2.5?JS對象
JS 中的對象 要比 Java 中的對象 要簡單一些，不過 需要注意的是，JS 中的所有的對象 都是 object類型，無論對象叫什么名字，有什么屬性，都是相同的類型（這是站在傳統(tǒng)的 JS 語法角度看待的）
JS 里面創(chuàng)建一個對象，不需要依賴于 "類"（不像 Java 里面，需要類，然后使用 new 關(guān)鍵字啥的來創(chuàng)建對象）
在 JS 中直接使用 { } 就可以來表示對象?
對象里面的數(shù)據(jù)，非常類似于 "鍵值對" 結(jié)構(gòu)：每個鍵值對，都是使用 , 來進行分割，鍵和值使用 : 來分割，值也可以是函數(shù)?
定義對象：
當然，定義對象的寫法不止這一種，這里就不必要過多介紹，知道這一種方式就已經(jīng)可以了?
調(diào)用對象的屬性和方法：
在 Java 中要求，一個類的對象 里面包含的屬性和方法，寫好了就是固定不變的；但是，在 JS 中，一個對象的屬性和方法，寫好了卻是可以動態(tài)改變的（這就牽扯到了動態(tài)類型）
如，在上面的代碼中，已經(jīng)寫好了 student對象的屬性和方法，沒有 id屬性、playBasketBall方法，那么我們就可以加上這個：
?
類似于上面所介紹的，數(shù)組的新增元素，如果對應下標不存在，那么就會直接創(chuàng)建出來?
同理，這個在運行時 也會把屬性和方法創(chuàng)建出來?
總結(jié)
文章來源地址http://www.zghlxwxcb.cn/news/detail-472733.html
到了這里，關(guān)于【JavaEE初階】前端第四節(jié).JavaScript入門學習筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
