Java后端程序員學習前端之JavaScript

1.什么是JavaScript

1.1.概述

JavaScript是一門世界上最流行的腳本語言javaScript
一個合格的后端人員，必須要精通JavaScript

1.2.歷史

JavaScript的起源故事-CSDN博客

2.快速入門

2.1.引入JavaScript

1.內部標簽

    <script>//.......</script> -->

2.外部引入

    <!-- 外部引入 --><!-- 注意：script標簽必須成對出現 --><script src="js/rm.js"></script>

測試代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 在script標簽中寫，JavaScript代碼<script>alert("hello world");</script> --><!-- 外部引入 --><!-- 注意：script標簽必須成對出現 --><script src="js/rm.js"></script>
</head>
<body>  <!-- 這里也可以存放 -->
</body>
</html>

2.2.基本語法入門

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- JavaScript嚴格區分大小寫 --><script>// 1.定義變量 變量類型 變量名 = 變量值var score = 71;// 2.條件控制if(score>60 && score<70){alert("60-70")}else if(score>70 && score<80){alert("70-80")}else{alert("other")}// console.log(score) 在瀏覽器控制臺打印變量 System.out.println();</script>
</head>
<body></body>
</html>

瀏覽器必備調試須知：

2.3.數據類型

數值，文本，圖形，音頻，視頻.
number
js不區分小數和整數，Number

字符串

'abc' "abc"

布爾值

true false

邏輯運算

比較運算符！！！重要

這是一個JS的缺陷，堅持不要使用==比較

須知:

NaN===NaN，這個與所有的數值都不相等，包括自己
只能通過 isNaN(NaN) 來判斷這個數是否是 NaN

浮點數問題

盡量避免使用浮點數進行運算，存在精度問題!

null 和 undefined

null 空
undefined 未定義

數組

Java的數值必須是相同類型的對象~,JS中不需要這樣!

取數組下標:如果越界了，就會

對象

對象是大括號，數組是中括號~
每個屬性之間使用逗號隔開，最后一個不需要添加

取對象的值

2.4嚴格檢查模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 前提：ide需要設置ES6語法'use strict'; 嚴格檢查模式，預防JavaScript的隨意性導致產生一些問題必須卸載JavaScript的第一行！局部變量建議都使用let 去定義--><script>'use strict'// 全局變量let i = 1;// ES6 let</script>
</body>
</html>

3.數據類型

3.1.字符串

1、正常字符串我們使用單引號，或者雙引號包裹
2、注意轉義字符\

3、多行字符串編寫

4.模板字符串? ? ? ?

5.字符串長度

6.字符串的可變性，不可變

7.大小寫轉換

8.substring

3.2.數組

Array可以包含任意的數據類型

1.長度

注意:加入給 arr.length 賦值，數組大小就會發生變化~，如果賦值過小，元素就會丟失

2、indexOf，通過元素獲得下標索引

字符串的“1"和數字 1是不同的

3、slice() 截取Array的一部分，返回一個新數組，類似于String中的 substring

4、push()，pop()尾部

5、unshift(),shift()頭部

6、排序 sort()

7、元素反轉 reverse()

8、concat（）

注意:concat()并沒有修改數組，只是會返回一個新的數組

9、連接符 join
打印拼接數組，使用特定的字符串連接

10、多維數組

數組:存儲數據(如何存，如和取，方法都可以自己實現!)

3.3.對象

若干個鍵值對

Js中對象， {..} 表示一個對象,鍵值對描述屬性 xxxx:xxxx，多個屬性之間使用逗號隔開，最后一個屬性不加逗號!

JavaScript中的所有的鍵都是字符串，值是任意對象!
1、對象賦值

2、使用一個不存在的對象屬性，不會報錯！undefined

3、動態的刪減屬性，通過 delete 刪除對象的屬性

4、動態的添加，直接給新的屬性添加值即可

5、判斷屬性值是否在這個對象中!xxx in xxx!

6、判斷一個屬性是否是這個對象自身擁有的 hasOwnProperty（）

3.4.流程控制

if判斷

while循環，避免程序死循環

for循環

forEach循環

5.1引入

for...in

3.5.Map和Set

ES6的新特性

Map：

Set:無序不重復的集合

3.6.iterator

遍歷數組

遍歷map

遍歷set

4.函數

4.1.定義函數

定義方式一、

絕對值函數

一旦執行到 return 代表函數結束，返回結果!

如果沒有執行 return ，函數執行完也會返回結果，結果就是 undefined

定義方式二、

function(x){…}這是一個匿名函數。但是可以把結果賦值給 abs ，通過abs 就可以調用函數!
方式一和方式二等價!

參數問題:javaScript 可以傳任意個參數，也可以不傳遞參數~

參數進來是否存在的問題?
假設不存在參數，如果規避?

arguments

arguments是一個JS免費贈送的關鍵字，
代表，傳遞進來的所有的參數，是一個數組!

問題: arguments 包含所有的參數，我們有時候想使用多余的參數來進行附加操作。需要排除已有參數~

rest

以前：

ES6 引入的新特性，獲取除了已經定義的參數之外的所有參數~

rest 參數只能寫在最后面，必須用…. 標識。

4.2.變量的作用域

在javascript中，var 定義變量實際是有作用域的。

假設在函數體中聲明，則在函數體外不可以使用~(非要想實現的話，后面可以研究一下閉包）

如果兩個函數使用了相同的變量名，只要在函數內部，就不沖突

內部函數可以訪問外部函數的成員，反之則不行

假設，內部函數變量和外部函數的變量，重名!

假設在JavaScript 中函數査找變量從自身函數開始~，由“內”向“外"查找,假設外部存在這個同名的函數變量，則內部函數會屏蔽外部函數的變量。

提升變量的作用域

結果:xundefined
說明;js 執行引擎，自動提升了y的聲明，但是不會提升變量y的賦值"

這個是在JavaScript建立之初就存在的特性。養成規范: 所有的變量定義都放在函數的頭部，不要亂放，便于代碼維護;

全局函數

全局對象 window

alert() 這個函數本身也是一個window變量;

Javascript 實際上只有一個全局作用域，任何變量(函數也可以視為變量)，假設沒有在函數作用

范圍內找到，就會向外查找，如果在全局作用域都沒有找到，報錯RefrenceError

規范

由于我們所有的全局變量都會綁定到我們的 window 上。如果不同的is 文件，使用了相同的全局變量，沖突~>如果能夠減少沖突?

把自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名沖突的問題
jQuery

局部作用域 let

ES6 let 關鍵字，解決局部作用域沖突問題!

建議大家都是用let去定義局部作用域的變量；

常量const

在ES6 之前，怎么定義常量:只有用全部大寫字母命名的變量就是常量;建議不要修改這樣的值

在ES6 引入了常量關鍵字const

4.3.方法

定義方法

方法就是把函數放在對象的里面，對象只有兩個東西: 屬性和方法

        var zhangrun = {name : "張潤",birth : 2000,// 方法age : function(){// 今年 - 出生的年var now = new Date().getFullYear();return now - this.birth}// 屬性zhangrun.name}// 方法，一定要帶（）zhangrun.age()

this.代表什么? 拆開上面的代碼看看~

    <script>function getAge() {// 今年 - 出生的年var now = new Date().getFullYear();return now - this.birth}var zhangrun = {name: "張潤",birth: 2000,// 方法age: getAge}// zhangrun.age() ok// getAge() NAN</script>

this是無法指向的，是默認指向調用它的那個對象

apply

在js 中可以控制 this 指向!

        function getAge() {// 今年 - 出生的年var now = new Date().getFullYear();return now - this.birth}var zhangrun = {name: "張潤",birth: 2000,// 方法age: getAge}// zhangrun.age() ok// getAge() nogetAge.apply(zhangrun , [])

5.內部對象

標準對象

5.1.Date

基本使用

        var now = new Date(); //當前時間 年月日 時分秒now.getFullYear(); // 年now.getMonth(); // 月now.getDate(); // 日now.getDay(); // 星期幾now.getHours(); // 時now.getMinutes(); // 分now.getSeconds(); // 秒now.getTime(); // 時間戳 全世界統一 1970 1.1 00：00：00console.log(new Date(now.getTime())) // 時間戳轉為時間

轉換

5.2.JSON

json是什么

早期，所有數據傳輸習慣使用 XML 文件!

JSON(javaScript Object Notation,js 對象簡譜) 是一種輕量級的數據交換格式。
簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。
易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率

在]avaScript 一切皆為對象、任何js 支持的類型都可以用JSON來表示;number，string...

格式:

對象都用 {}
數組都用 []
所有的鍵值對都是用 key:value

JSON字符串和JS 對象的轉化

        var user = {name:"zhangrun",age : 20,gender : "女"}// 對象轉化為JSON字符串var jsonUser = JSON.stringify(user)// json 字符串轉化為對象 參數為json字符串var obj = JSON.parse(jsonUser)

很多人搞不清楚，JSON 和JS 對象的區別

5.3.Ajax

原生的js寫法 xhr 異步請求
jQuey 封裝好的方法 $("#name").ajax("")
axios 請求

6.面向對象編程

6.1.什么是面向對象

javascript、Java、c#。。。面向對象;javascript有些區別!

類:模板
·對象:具體的實例

在JavaScript這個需要大家換一下思維方式!
原型:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=\, initial-scale=1.0"><title>Document</title><script>var Student = {name : "zhangrun",age: 20,run : function(){console.log(this.name + ".....run")}}var zhangrun = {name : "張潤"}// 張潤的原型是Studentzhangrun.__proto__ = Student</script>
</head>
<body></body>
</html>

class 繼承
class關鍵字，是在ES6引入的
1、定義一個類，屬性，方法

        // 定義一個學生類class Student{constructor(name){this.name = name}hello(){alert("hello")}}var zhangrun = new Student("zhangrun")zhangrun.hello()zhangrun.name

2、繼承

        // 定義一個學生類class Student{constructor(name){this.name = name}hello(){alert("hello")}}class pupil extends Student{constructor(name,grade){super(name)this.grade = grade}myGrade(){alert("我是一名小學生")}}var zhangrun = new Student("zhangrun")var xiaonai = new pupil("xiaonai",1)

7、操作BOM對象(重點)

瀏覽器介紹
JavaScript 和瀏覽器關系?
JavaScript 誕生就是為了能夠讓他在瀏覽器中運行!
BOM:瀏覽器對象模型

lE 6~11
Chrome
Safari
FireFox

三方

QQ瀏覽器
360瀏覽器

window

window 代表瀏覽器窗口

Navigator
Navigator,封裝了瀏覽器的信息

大多數時候，我們不會使用navigator對象，因為會被人為修改!
不建議使用這些屬性來判斷和編寫代碼

screen
代表屏幕尺寸

location(重要)
location 代表當前頁面的URL信息

document
document 代表當前的頁面，HTML DOM文檔樹

獲取具體的文檔樹節點

獲取cookie

劫持cookie原理

服務器端可以設置 cookie:httpOnly

history

history代表瀏覽器的歷史記錄

8、操作DOM對象(重點)

核心
瀏覽器網頁就是一個Dom 樹形結構!

更新:更新Dom節點
遍歷dom節點:得到Dom節點
刪除:刪除一個Dom節點
添加:添加一個新的節點

要操作一個Dom節點，就必須要先獲得這個Dom節點

獲得dom節點

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 對應css選擇器var h1 = document.getElementsByTagName("h1");var p1 = document.getElementById("p1");var p2 = document.getElementsByClassName("p2");var father = document.getElementById("father");var childrends = father.children; // 獲得父節點下的所有子節點// father.firstChild// father.lastChild</script>
</head>
<body><div id="father"><h1>標題一</h1><p id="p1">p1</p><p class="p2">p2</p></div>
</body>
</html>

這是原生代碼，之后我們盡量都是用jQuery();

更新節點

id1.innerText='456‘修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析HTML文本標簽

操作js

刪除節點

刪除節點的步驟: 先獲取父節點，在通過父節點刪除自己

注意: 刪除多個節點的時候，children 是在時刻變化的，刪除節點的時候一定要注意!

插入節點

我們獲得了某個Dom節點，假設這個dom節點是空的，我們通過innerHTML 就可以增加一個元素了，但是這個DOM 節點已經存在元素了，我們就不能這么干了!會產生覆蓋
追加

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><p id="js">JavaScript</p><div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p></div><script>var js = document.getElementById("js");var list = document.getElementById("list");list.appendChild(js); // 追加到后面</script>
</body>
</html>

效果