狂神說筆記——JavaScript快速入門11

本文轉載自查看原文 2021-08-17 11:10 163 狂神說

JavaScript快速入門

1.前端知識體系

想要成為真正的“互聯網Java全棧工程師”還有很長的一段路要走，其中前端是繞不開的一門必修課。本階段課程的主要目的就是帶領Java后台程序員認識前端、了解前端、掌握前端，為實現成為“互聯網Java全棧工程師”再向前邁進一步。

1.前端三要素

HTML（結構）：超文本標記語言（Hyper Text Markup Language），決定網頁的結構和內容。
CSS（表現）：層疊樣式表（Cascading Style Sheets），設定網頁的表現樣式。
JavaScript（行為）：是一種弱類型腳本語言，其源碼不需經過編譯，而是由瀏覽器解釋運行，用於控制網頁的行為

2.結構層（HTML）

3.表現層（CSS）

CSS層疊樣式表是一門標記語言，並不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它主要缺陷如下：

語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重復的選擇器；
沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護；

這就導致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用一種稱之為【CSS預處理器】的工具,提供CSS缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大的提高了前端在樣式上的開發效率。

什么是CSS預處理器？

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發者就只需要使用這種語言進行CSS的編碼工作。轉化成通俗易懂的話來說就是“用一種專門的編程語言，進行Web頁面樣式設計，再通過編譯器轉化為正常的CSS文件，以供項目使用”。

常用的CSS預處理器有哪些：
- SASS：基於Ruby ，通過服務端處理，功能強大。解析效率高。需要學習Ruby語言，上手難度高於LESS。
- LESS：基於NodeJS，通過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低於SASS，但在實際開發中足夠了，所以如果我們后台人員如果需要的話，建議使用LESS。

4.行為層（JavaScript）

JavaScript一門弱類型腳本語言，其源代碼在發往客戶端運行之前不需要經過編譯，而是將文本格式的字符代碼發送給瀏覽器，由瀏覽器解釋運行。

JavaScript框架：
- JQuery：大家熟知的JavaScript庫，優點就是簡化了DOM操作，缺點就是DOM操作太頻繁，影響前端性能；在前端眼里使用它僅僅是為了兼容IE6，7，8；
- Angular：Google收購的前端框架，由一群Java程序員開發，其特點是將后台的MVC模式搬到了前端並增加了模塊化開發的理念，與微軟合作，采用了TypeScript語法開發；對后台程序員友好，對前端程序員不太友好；最大的缺點是版本迭代不合理（如1代–>2 代，除了名字，基本就是兩個東西；截止發表博客時已推出了Angular6）；
- React：Facebook 出品，一款高性能的JS前端框架；特點是提出了新概念【虛擬DOM】用於減少真實 DOM 操作，在內存中模擬 DOM操作，有效的提升了前端渲染效率；缺點是使用復雜，因為需要額外學習一門【JSX】語言；
- Vue：一款漸進式 JavaScript 框架，所謂漸進式就是逐步實現新特性的意思，如實現模塊化開發、路由、狀態管理等新特性。其特點是綜合了 Angular（模塊化）和React(虛擬 DOM) 的優點；
- Axios：前端通信框架；因為 Vue 的邊界很明確，就是為了處理 DOM，所以並不具備通信能力，此時就需要額外使用一個通信框架與服務器交互；當然也可以直接選擇使用jQuery 提供的AJAX 通信功能。
UI框架：
- Ant-Design：阿里巴巴出品，基於React的UI框架；
- ElementUI、iview、ice：餓了么出品，基於Vue的UI框架；
- BootStrap：Teitter推出的一個用於前端開發的開源工具包；
- AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架。
JavaScript構建工具：
- Babel：JS編譯工具，主要用於瀏覽器不支持的ES新特性，比如用於編譯TypeScript。
- WebPack：模塊打包器，主要作用就是打包、壓縮、合並及按序加載。

5.三端同一

混合開發（Hybrid App）
主要目的是實現一套代碼三端統一（PC、Android：.apk、iOS：.ipa）並能夠調用到設備底層硬件（如：傳感器、GPS、攝像頭等），打包方式主要有以下兩種：
- 雲打包：HBuild -> HBuildX，DCloud 出品；API Cloud
- 本地打包： Cordova（前身是 PhoneGap）

2.什么是JavaScript

1.概述

javaScript是一門世界上最流行的腳本語言。
開發歷程10天。
一個合格的后端人員，必須精通JavaScript！

2.歷史

百度詞條
ECMAScript它可以理解為JavaScript的一個標准。最新版本已經到ES6版本！但是大部分瀏覽器還只停留在支持ES5代碼上！
開發環境——線上環境，版本不一致。

3.快速入門

1.引入JS

內部標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS01</title>
    <!-- script標簽內，寫JavaScript代碼 -->
    <script>
        alert('hello,world!');
    </script>
</head>
<body>


<!--這里也可以存放JS代碼-->
</body>
</html>

在這里插入圖片描述

外部引入

<script src="js/qj.js"></script>

在這里插入圖片描述

2.基本語法入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本語法</title>
    <!-- JavaScript嚴格區分大小寫 -->
    <script> // 1. 定義變量 變量類型 變量名 = 變量值 var score = 46; // 2. 條件控制 // alert(num); if (score > 60 && score < 70){ alert("成績為:60~70"); }else if(score > 70 && score < 80){ alert("成績為:70~80"); }else{ alert("other"); } console.log(score); // 在瀏覽器的控制台打印輸出變量 </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

瀏覽器必備調試須知。

在這里插入圖片描述

3.數據類型

數值，文本，圖形，音頻，視頻

變量：var a
JS不區分小數和整數，Number。

123 // 整數123
123.1 // 浮點數123.1
1.123e3 // 科學計數法
-99 // 負數
NaN	// not a number
Infinity // 表示無限大

字符串：‘abc’ “abc”
布爾值：true，false
邏輯運算符
- && 兩個都為真，結果為真
- || 一個為真，結果為真
- ! 真即假，假即真
比較運算符
- =，如：1與"1"
- == 等於（類型不一樣，值一樣，也會判斷為true）
- === 絕對等於（類型一樣，值一樣，結果為true）
- 盡量不要使用 == 比較，因為：
  - NaN === NaN，這個與所有的數值都不相等，包括自己。
  - 只能通過isNaN（NaN）來判斷這個數是否是NaN。
浮點數
- 盡量避免使用浮點數進行運算，存在精度問題！
```
console.log((1/3) === (1-2/3));
Math.abs(1/3-(1-2/3))<0.00000001;
```

在這里插入圖片描述

null 和 undefined
- null 空；
- undefined 未定義；
數組
- Java的數組必須是相同類型的對象，JS中不需要這樣。

// 保證代碼的可讀性，盡量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
// 第二種定義方法
new Array(1,2,3,4,5,'hello');

取數字下標：如果越界了，就會報undefined。

在這里插入圖片描述

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

// Person person = new Person(1,2,3,4,5);

var person = {
	name:'Tom',
	age:3,
	tags:['js','java','web','...']
}

取對象值。

person.name
// "Tom"
person.age
// 3

在這里插入圖片描述

4.檢查格式

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>格式</title>
    <!-- 前提:IDEA需要設置支持ES6語法，'use strict'; 嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題 必須寫在JavaScript的第一行！ 局部變量建議都使用let去定義。 -->
    <script> 'use strict'; // 全局變量 let i=1; // ES6 let </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

4.數據類型

1.字符串

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串</title>
    <script>
        console.log('Test01\'測試');
        console.log('Test02\n測試');
        console.log('Test03\t測試');
        console.log('Test04\u4e2d測試');
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

多行字符串編寫

// tab 上面 esc下面
var msg=
    `hello world 你好呀 JavaScript`;

模板字符串

let name='Subei';
let age=6;
var msg=`哇哈哈，${name}`;

字符串長度

str.length;

在這里插入圖片描述

字符串的可變性，不可變。

在這里插入圖片描述

大小寫轉換。

var str='subeily';
// 注意，這里是方法，不是屬性了
str.toUpperCase();
str.toLowerCase();

在這里插入圖片描述

console.log(str.indexOf(‘b’));
substring，從0開始。

str.substring(1); // 從第一個字符串截取到最后一個字符串
str.substring(1,3); // [1,3)

在這里插入圖片描述

2.數組

Array可以包含任意的數據類型。
- 長度：arr.length；
  - 注意：假如給arr.lennth賦值，數組大小就會發生變化，如果賦值過小，元素就會丟失；
- indexOf，通過元素獲得下標索引；
  - 字符串的"1"和數字 1 是不同的；
- slice（）：截取Array的一部分，返回的一個新數組，類似於String中substring；
- push()，pop()尾部；
- unshift(),shift() 頭部；
- 排序：sort()；
- 元素反轉：reverse()；
- concat()；
  - 注意：concat()並沒有修改數組，只是會返回一個新的數組。
- 連接符：join()；打印拼接數組，使用特定的字符串連接。
- 多維數組。

var arr = [1,2,3,4,5,6];	// 通過下標取值和賦值
arr.length;	// 長度
arr.indexOf(2);	// 通過元素獲得下標索引
arr.slice(2,5);
arr.push(42);
arr;
arr.pop();
arr;
arr.unshift(92);
arr;
arr.concat;
arr;
arr.shift();
arr;
arr.sort();
arr.reverse();
arr.concat(["a","b","c"]);
arr;
arr.join('+');
var arr2 = [[1,2],[3,6],[9,12]];
arr2[1][1];

在這里插入圖片描述

3.對象

var 對象名 = {
	屬性名：屬性值，
	屬性名：屬性值，
	屬性名：屬性值
}
// 定義了一個person對象，它有四個屬性
var person = {
	name:"subei",
	age:20,
	email:"294563152@QQ.com",
	score:72
};
person.name = "subeiLY";
person.name
person.str;
delete person.name;
person;
person.str = "num23";
person;
'score' in person
// 繼承
'toString' in person;
person.hasOwnProperty('toString');
person.hasOwnProperty('age');

JS中對象，{…}表示一個對象，建制對描述屬性xxx：xxx，多個屬性之間用逗號隔開，最后一個屬性不加逗號！
JavaScript中的所有的鍵都是字符串，值是任意對象！
對象賦值：

在這里插入圖片描述

使用一個不存在的對象屬性，不會報錯！undefined。
動態的刪減屬性，通過delete刪除對象的屬性。

在這里插入圖片描述

動態的添加，直接給新的屬性添加值即可。
判斷屬性值是否在這個對象中！xxx in xxx。

在這里插入圖片描述

判斷一個屬性是否是這個對象自身擁有的 hasOwnProperty()。

在這里插入圖片描述

4.流程控制

IF判斷。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title01</title>
    <script> var age = 12; if(age<=12){ // 第一個判斷 alert("subei"); }else if(age<18){ // 第二個判斷 alert("subeiLY"); }else{ // 否則 alert("NULL~~~"); } </script>
</head>
<body>

</body>
</html>

while循環判斷，注意避免死循環！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script> var age = 12; while(age<100){ age = age + 1; console.log(age); } do{ age = age + 1; console.log(age); }while(age<100); </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

for循環判斷。

for(let i=0;i<100;i++){
    console.log(i);
}

for-each循環。

ES5.1特征：

var age = [12,99,56,34,75,128,69];
// 函數
age.forEach(function (value){
	console.log(value);
})

在這里插入圖片描述

for……in——下標：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script> var age = [12,99,56,34,75,128,69]; for(var num in age){ if(age.hasOwnProperty(num)){ console.log("存在！"); console.log(age[num]); } } </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

5.Map和Set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script> // ES6 Map // 學生成績，學生姓名 // var names = ["Tone","jay","sony"]; // var scores = [92,84,96]; var map = new Map([['Tone',92],['jay',84],['sony',96]]); var name = map.get('Tone'); // 通過key獲得value map.set('admin',123456); // 新增 map.delete('Tone'); //刪除  </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

Set：無序不重復的集合。

var set = new Set([1,2,3,4,5,6,7,8]);
set.add(2); // 添加
set.delete(1);   // 刪除
console.log(set.has(3));    // 是否包含某個元素

在這里插入圖片描述

6.iterator

使用iterator來遍歷迭代我們Map，Set！
遍歷數組

var arr = [3,4,5,6,7,8,12];
for(var x of arr){
	console.log(x);
}

遍歷Map

var map = new Map([['Tone',92],['jay',84],['sony',96]]);
for (let x of map){
	console.log(x);
}

遍歷Set

var set = new Set([15,66,45,16,72]);
for(let x of set){
	console.log(x);
}

5.函數

1.定義函數

方式一

絕對值函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函數</title>
    <script> function abs(x) { if(x>=0){ return x; }else{ return -x; } } </script>
</head>
<body>

</body>
</html>

一旦執行到return代表函數結束，返回結果！如果沒有執行return，函數執行完也會返回結果，結果就是undefined。

方式二

var abs = function (x){
	if(x>=0){
    	return x;
    }else{
        return -x;
    }
}

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

調用函數

abs(12);	// 12
abs(-36);	// 36

在這里插入圖片描述

參數問題：javaScript可以傳任意個參數，也可以不傳遞參數。
參數進來是否存在問題？假設不存在參數，如何規避？

var abs = function(x){
	// 手動拋出異常來判斷
    if(typeof x!== 'number'){
    	throw 'Not a Number';
    }
    if(x>=0){
       return x;
    }else{
    	return -x;
    }
}

arguments

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

var abs = function(x){
    console.log("x=>"+x);
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

在這里插入圖片描述

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

rest

// 以前
if(arguments.length>2){
    for (var i = 2; i<arguments.length;i++){
        // ....
    }
}

// ES6引入的新特性，獲取除了已經定義的參數之外的所有參數
function aaa(a,b,...rest){
    console.log("a=>" + a);
    console.log("b=>" + b);
    console.log(rest);
}

aaa();

在這里插入圖片描述

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

2.變量的作用域

在javascript中，var定義變量實際是有作用於的。假設在函數體重聲明，則在函數體外不可以使用。

function str(){
	var x = 1;
    x = x + 1;
}
x = x + 2; // Uncaught ReferenceError: x is not defined

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

function str(){
	var x = 1;
    x = x + 1;
}
function str2(){
	var x = 'A';
    x = x + 1;
}

在這里插入圖片描述

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

function num() {
    var x = 1;

    // 內部函數可以訪問外部函數的成員，反之則不行
    function num2(){
        var y = x + 1;  // 2
    }

    var z = y + 1;  // Uncaught ReferenceError: y is not defined
}
console.log(z);

在這里插入圖片描述

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

function num(){
    var x=1;
    function num2(){
        var x = 'A';
        console.log('inner' + x);
    }
    console.log('outer' + x);
    num2();
}

num();

在這里插入圖片描述

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

提升變量的作用域

function f2() {
    var y;
    var x = "x"+y;
    console.log(x);
    y = 'y';
}

f2();
// 輸出:xundefined

說明：js執行引擎，自動提升了y的聲明，但是不會提升變量y的賦值；

function ft2() {
    var y;
    var x = "x" + y;
    console.log(x);
    y = 'y';
}

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

function de() {
    var x = 1,
    y=x+1,
        z,i,a;
}

全局變量

// 全局變量
x = 1;
function f() {
    console.log(x);
}
f();
console.log(x);

在這里插入圖片描述

全局對象Windows

var x = 'xxx';
alert(x);
alert(window.x);

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

var x = 'xxx';
window.alert(x);
var old_alter = window.alert;
window.alert = function () {
    
};
// alter()失效了
window.alert(123);

// 恢復
window.alert = old_alter;
window.alert(453);

javascript實際上只有一個全局作用域，任何變量（函數也可以視為變量），假設沒有在函數作用范圍內找到，就會向外查找，如果在全局作用域都沒有找到，就會報錯 Refrence。

規范

由於我們的所有變量都會綁定到window上。如果不同的JS文件，使用了相同的全局變量，就會產生沖突—>如何減少這樣的沖突？

// 唯一全局變量
var subei = {};

// 定義全局變量
subei.name = 'subeiLY';
subei.add = function (a,b){
    return a+b;
}

自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名沖突問題~
jQuery中就是使用的該方法：jQuery.name，簡便寫法：$()

局部作用域

function bbb() {
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);
}
bbb();

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

function bbb() {
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);	// Uncaught ReferenceError: i is not defined
}

bbb();

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

常量

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

var PI='3.14';
console.log(PI);
PI='213';
console.log(PI);

在ES6引入了常量關鍵字 const。

const PI = '3.14';
console.log(PI);
PI = '123';	// Uncaught SyntaxError: Identifier 'PI' has already been declared
console.log(PI);

在這里插入圖片描述

3.方法

定義方法

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

var subeily = {
    name:'哇哈哈',
    birth:2000,
    // 方法
    age:function () {
        // 今年-出生年
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
// 屬性
subeily.name;
// 方法，注意帶()
subeily.age();

this.代表什么？拆開上main的代碼看看。

function getAge() {
    // 今年-出生年
    var now = new Date().getFullYear();
    return now -this.birth;
}
var subei = {
    name:'可樂',
    birth: 2002,
    age:getAge
}

subei.age();
getAge();

在這里插入圖片描述

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

apply

在JS中可以控制this指向

function getAge() {
    // 今年-出生年
    var now = new Date().getFullYear();
    return now -this.birth;
}
var subei = {
    name:'可樂',
    birth: 2002,
    age:getAge
}

// subei.age();

var xiaosan = {
    name:'xiaosan',
    birth:2001,
    age:getAge
}

getAge.apply(xiaosan,[]);

在這里插入圖片描述

6.內部對象

標准對象

typeof 123
typeof '123'
typeof true
typeof NaN
typeof []
typeof {}
typeof Math.abs
typeof undefined

在這里插入圖片描述

1.Date

var now = new Date();
now.getFullYear();  // 年
now.getMonth(); // 月
now.getData();  // 日
now.getDay();   // 星期
now.getHours(); // 時
now.getMinutes();   // 分
now.getSeconds();   // 秒

now.getTime();  // 時間戳
console.log(new Date());    // 時間戳轉時間

轉換

now = new Date(1625895623770);
now.toLocaleString;    // 注意：調用是一個方式是，不是一個屬性。
now.toLocaleString();
now.toGMTString();

在這里插入圖片描述

2.JSON

JSON是什么？

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

JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數據交換格式。。

簡潔和清晰的層次結構使得JSON成為理想的數據交換語言。

易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網絡傳輸效率。

在javascript中，一切皆為對象，任何js支持的類型都可以用JSON表示。
格式：
- 對象都用{}
- 數組都用[]
- 所有的鍵值對，都是用key:value
JSON字符串和js對象轉化

var admin = {
    name:"admin",
    age:31,
    sex:'M'
}

// 對象轉化為JSON字符
var jsonAdmin = JSON.stringify(admin);

// JSON字符轉化為對象，參數為 JSON字符
var obj = JSON.parse('{"name":"subei","age":"22","sex":"W"}');

在這里插入圖片描述

JSON和JS對象的區別：

var obj = {a:'hello',b:'javaScript'};

var json = '{"a":"hello","b":"javaScript"}';

3.AJAX

原生的JS寫法，xhr異步請求；
jQuery封裝好的方法$(#name).ajax("")；
axios請求；

7.面向對象編程

1.什么是面向對象

javaScript、java、c#------面向對象；但是javaScript有些區別！

類：模板
對象：具體實例
原型：

var Student = {
    name:"subeiLY",
    age:20,
    run:function () {
        console.log(this.name + " run....");
    }
};
var xiaoming = {
    name:"xiaoming",
};

var bird = {
    fly:function (){
        console.log(this.name + " fly....")
    }
}

// 原型對象
// xiaoming.__proto__ = Student;
xiaoming.__proto__ = bird;

在這里插入圖片描述

// ES6之前========================
function Student(name){
    this.name = name;
}
// 給Student新增一個方法
Student.prototype.hello = function () {
    alert('Hello');
}

Typora快速調整代碼塊格式快捷鍵：

使用 ‘Shift + Tab’ 快速格式化代碼。

class集繼承

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

<script>
    // ES6之后========================
    // 定義一個學生的類
    class Student{
        constructor(name){
            this.name = name;
        }
        hello(){
            alert('hello');
        }
    }

    var xiaoming = new Student("xiaoming");
    var xiaohong = new Student("xiaohong");
</script>

2. 繼承
 - 本質：查看對象原型。

<script>
    // ES6之后========================
    // 定義一個學生的類
    class Student{
        constructor(name){
            this.name = name;
        }
        hello(){
            alert('hello');
        }
    }

    class XStudent extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert('2021級小學生入學');
        }
    }

    var xiaoming = new Student("xiaoming");
    var xiaohong = new XStudent("xiaohong",2);
</script>

在這里插入圖片描述

原型鏈：

在這里插入圖片描述

8.操作BOM對象

瀏覽器介紹

javaScript和瀏覽器關系？

JavaScript的誕生就是為了能在瀏覽器中運行！！！

BOM：瀏覽器對象模型

IE6~Edge
Chrome
Vivaldi
FireFox
Opera

第三方瀏覽器

QQ瀏覽器
360瀏覽器

window

// window代表瀏覽器窗口
window.alert(1);
undefined
window.innerHeight;
699
window.innerWidth
158
window.outerHeight
818
window.outerWidth
1065

Navigator（不建議使用）

// Navigator封裝了瀏覽器的信息
navigator.appName

navigator.appVersion

navigator.userAgent

navigator.platform

在這里插入圖片描述

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

screen：代表屏幕尺寸。

screen.width

screen.height

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

location;
// 設置新的地址
location.assign('https://blog.csdn.net/m0_46153949');

在這里插入圖片描述

document（內容DOM）：document代表當前的頁面，HTML DOM文檔樹。

在這里插入圖片描述

獲取具體的文檔樹節點。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <script>
        var dl = document.getElementById('app');
    </script>
</head>
<body>

<dl id="app">
    <dt>java</dt>
    <dd>javaSE</dd>
    <dd>javaWeb</dd>
    <dd>javaEE</dd>
</dl>

</body>
</html>

在這里插入圖片描述

獲取cookie

在這里插入圖片描述

劫持cookie原理：

<script src="str.js"></script>
<!--惡意人員獲取本機cookie上傳至其私人服務器 -->

服務器端可以設置cookie為httpOnly。

history（不建議使用）：代表瀏覽器的歷史記錄。

history.back();	// 后退
history.forward();	// 前進

9.DOM對象

核心

瀏覽器網頁就是一個Dom樹形結構！

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

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

獲得Dom節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="father">
    <h1>標題一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>
    // 對應CSS選擇器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var childerns = father.children;    // 獲取父節點下所有的子節點
    father.firstChild;
    father.lastChild;
</script>

</body>
</html>

在這里插入圖片描述

之后盡量都使用jQuery();

更新節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="id1">
    123
</div>

<script> var id1 = document.getElementById('id1'); </script>

</body>
</html>

操作
- id1.innerText='456'; 修改文本的值。
- id1.innerHTML='<strong>123</strong>'; 可以解析HTML文本的標簽。
操作CSS
- id1.style.color = 'blue'; 修改文本顏色；
- id1.style.fontSize='22px'; 修改文字大小；
- id1.style.padding='2em'; 修改文本位置；

在這里插入圖片描述

刪除節點

刪除節點的步驟：先獲取父節點，再通過父節點刪除自己。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
    <h1>標題一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script> var self = document.getElementById('p1'); var father = p1.parentElement; father.removeChild(self); // 刪除是一個動態過程 father.removeChild(father.children[0]); // father.removeChild(father.children[1]); // father.removeChild(father.children[2]); </script>

</body>
</html>

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

插入節點

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="me">javaME</p>
    <p id="ee">javaEE</p>
</div>

<script> var js = document.getElementById('js'); var list = document.getElementById('list'); list.appendChild(js); // 追加到最后 </script>

</body>
</html>

在這里插入圖片描述

創建一個新的標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="me">javaME</p>
    <p id="ee">javaEE</p>
</div>

<script> var js = document.getElementById('js'); // 已經存在的節點 var list = document.getElementById('list'); // 通過JS創建一個新的節點 var newP = document.creatElement('p'); // 創建一個p標簽 newP.id = 'newP'; newP.innerText = 'Hello,subeiLY'; // 創建一個標簽節點 var myScript = document.creatElement('script'); myScript.setAttribute('type','text/javascript'); // 可以創建一個style標簽 var myStyle = document.creatElement('style'); // 創建了一個空style標簽 myStyle.setAttribute('type','text/css'); myStyle.innerHTML = 'body{background-color:chartreuse;}'; // 設置標簽內容 document.getElementByTagName('head')[0].appendChild(myStyle); </script>

</body>
</html>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的節點.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

10.操作表單

表單是什么？

form-----DOM樹

文本框----text
下拉框----select
單選框----radio
多選框----checkbox
隱藏域----hidden
密碼框----password
…
表單的目的提交信息

獲得要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action = "post">
    <p>
        <span>用戶名：</span>
        <input type="text" id = "username" />
    </p>
    <!-- 多選框的值就是定義好的value -->
    <p>
        <span>性別：</span>
        <input type = "radio" name = "sex" value = "man" id = "boy"/>男
        <input type = "radio" name = "sex" value = "woman" id = "girl"/>女
    </p>
</form>

<script> var input_text = document.getElementById("username"); var boy_radio = document.getElementById("boy"); var girl_radio = document.getElementById("girl"); // 得到輸入框的值 // input_text.value; // 修改輸入框的值 input_text.value="admin"; // 對於單選框，多選框等等固定的值，boy_radio.value只能取到當前的值 boy_radio.checked = true; // 賦值 // girl_radio.checked; // 查看返回的結果，是否為true，如果為true，則被選中。 </script>

</body>
</html>

在這里插入圖片描述

提交表單。md5加密密碼，表單優化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- MD5加密工具類 -->
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"> </script>
</head>
<body>

    <!-- 表達綁定提交事件 οnsubmit= 綁定一個提交檢測的函數，true;false 將這個結果返回給表單，使用onsubmit接收 -->
<form action="http://guozhivip.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用戶名：</span>
        <input type="text" id="username" name="username"/>
    </p>
    <p>
        <span>密碼：</span>
        <input type="password" id="password" />
    </p>
    <input type="hidden" id="md5-password" name="password">

    <!--綁定事件,onclick被點擊-->
    <button type="submit">提交</button>

</form>

<script> function aaa(){ alert(1); var username = document.getElementById("username"); var pwd = document.getElementById("password"); // console.log(uname.value); // console.log(pwd.value); var md5pwd = document.getElementById("md5-password"); // MD5 算法 // pwd.value = md5(pwd,value); md5pwd.value = mad5(pwd.value); // console.log(pwd.value); // 可以校驗判斷表單內容，true就是通過提交，false就是阻止提交 return false; } </script>

</body>
</html>

11.jQuery

JavaScript和jQuery的關系？

jQuery庫，里面存在大量的JavaScript函數

獲取jQuery

在這里插入圖片描述

公式：$(selector).action()
- jquery-3.5.1.js：官網獲取地址，本地導入CDN。
- 直接引用在線CDN。

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
</head>
<body>

<a href="" id="test-jquery">點我</a>

<script> // document.getElementById('id'); // 選擇器為CSS選擇器 $('#test-jquery').click(function () { alert('hello,jQuery!'); }) </script>

</body>
</html>

在這里插入圖片描述

選擇器

// 原生JS，選擇器少，不方便記憶
// 標簽
document.getElementByTagName();
// id
document.getElementById();
// class
document.getElementByClassName();

// jQuery CSS中的選擇器它全部都能用！
$('p').click();	// 標簽選擇器
$('#id1').click();	// id選擇器
$('.class1').click;	// class選擇器

文檔工具站：http://jquery.cuishifeng.cn/

事件：鼠標事件、鍵盤事件，其他事件。

mousedown()(jQuery) ----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery) ----移動
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style> #divMove{ width: 120px; height: 120px; border: 1px solid deepskyblue; } </style>
</head>
<body>

<!--獲取當前鼠標坐標-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    移動一下試試！
</div>

<script> // 加載完成后，響應事件 $(function () { $('#divMove').mousemove(function (e) { $('#mouseMove').text("x: "+e.pageX + ",y: "+e.pageY); }); }); </script>

</body>
</html>

在這里插入圖片描述

操作DOM

節點文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>

</ul>

<script>
    $('#test-ul li[name=python]').text(); // 獲得值
    $('#test-ul li[name=python]').text('設置值'); // 設置值
    $('#test-ul').html(); // 獲得值
    $('#test-ul').html('<strong>123</strong>'); // 設置值
</script>

</body>
</html>

在這里插入圖片描述

CSS的操作

$('#test-ul li[name=python]').css("color","red");

元素的顯示和隱藏；本質——display:none;

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

娛樂測試

$(window).width();
$(window).height();
$('#test-ul li[name=python]').toggle();

在這里插入圖片描述

未來ajax()；

$('#form').ajax();

$.ajax({url:"test.html",context:document.body,success:function(){
	$(this).addClass("done");
}});

12.總結

jQuery小游戲網站：網站①，網站②。
jQuery小游戲——學生抽獎界面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>學生抽獎界面</title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
				font-size: 20px;
				font-family: "宋體";
				color: #00ff00;
				text-shadow: 7px 10px 1px #008800;
			}
			body{
				background-color: #000000;
			}
			.all{
				width: 100%;
				height: 100vh;
				perspective: 500px;
				overflow: hidden;
				perspective: 500px;
			}
			.strs{
				display: flex;
				width: 100%;
				height: 100vh;
				transition: 3s;
			}
			.strs div{
				width: 30px;
				text-align: center;
				height: 100vh;
			}
			.cz{
				width: 100px;
				height: 10vh;
				position: absolute;
				top: 90vh;
				left: 48%;
				font-size: 2em;
				font-weight: 900;
				color: red;
				text-shadow: 1px 1px 1px red;
			}
			.cz:hover{
				color: #00ff00;
				text-shadow: 1px 1px 1px #008800;
			}
			.result{
				width: 40%;
				height: 80px;
				position: absolute;
				top: 40vh;
				left: 30%;
				color: #00ff00;
				text-shadow: 1px 1px 1px #008800;
				font-size: 3em;
				font-weight: 900;
				opacity: 0;
				transition: 2s;
				text-align: center;
			}
			.rank{
				width: 200px;
				border: 2px solid #00FF00;
				position: absolute;
				top: 65vh;
				left: 85%;
			}
			.rank p{
				width: 100%;
				text-align: center;
				text-shadow: 0px 0px 0px transparent;
			}
			.rank p:hover{
				color: yellow;
			}
			.update{
				width: 500px;
				height: 30vh;
				position: absolute;
				top: -35vh;
				left: 38%;
				background-color: black;
				border: 1px solid #00FF00;
				display: flex;
				justify-content: center;
				transition: 1s;
			}
			.tx{
				background: transparent;
				margin-top: 15vh;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="all" ondblclick="update()" onmousemove="moves(event)">
			<div class="strs" id="strs"></div>
			<div class="cz" id="cz" onclick="starts()">開始</div>
			<div class="result" id="result"></div>
			<div class="rank" id="rank" onmousedown="rankdown()" onmouseup="rankup()"><p>歷史記錄</p></div>
			<div class="update" id="update">
				<p>
					<input type="text" list="updatelist" class="tx" id="tx"/>
					<datalist id="updatelist"></datalist>
					<input type="button" value="刪除" class="tx" onclick="update1()"/>
					<input type="button" value="添加" class="tx" onclick="update2()"/>
					<input type="button" value="取消" class="tx" onclick="update3()"/>
				</p>
			</div>
		</div>
		<script>
			var names = [
				"劉欣",
				"程賢政",
				"謝行",
				"邱思宇",
				"廖永勝",
				"劉東",
				"劉向鴻",
				"朱美琳",
				"劉佳",
				"董金傑",
				"張瑞",
				"趙文豪",
				"黃俊濤",
				"李小華",
				"黃建軍",
				"余洋",
				"江琳",
				"張羽",
				"肖懷智",
				"王文宇",
				"向俊瑾",
				"秦渝均",
				"鄧桂蘭",
				"何潔",
				"陳廣",
				"張士傑",
				"李丹",
				"肖晴",
				"張渝",
				"王子曉",
				"陸戀鈺",
				"周興怡",
				"黎雪彬",
				"劉琳",
				"杜濤",
				"米俊龍",
				"陳益巧",
				"周雪",
				"許小祥",
				"李林",
				"鄧東華",
				"楊雪"
			];
			var namess = [];
			bg();
			function bg(){
				document.getElementById("strs").innerHTML='';
				for(var i=0;i<51;i++){
					var rdmnum = Math.floor(Math.random()*names.length);
					var str = '';
					str+='<div>';
					var rdmnum1 = Math.floor(Math.random()*10)+1;
					for(var h=rdmnum1;h>0;h--){
						str+='<font style="opacity: '+h/10+';">'+names[rdmnum]+'</font>';
					}
					str+='</div>';
					document.getElementById("strs").innerHTML+=str;
				}
			}
			var start1 = null;
			var num1 = 0;
			function starts(){
				if(num1==0){
					start1=setInterval(bg,100);
					document.getElementById("cz").innerText="停止";
					document.getElementById("strs").style.transform="translateZ(0px) translateY(0px)";
					document.getElementById("result").style.opacity="0";
					num1=1;
				}else{
					clearInterval(start1);
					document.getElementById("cz").innerText="開始";
					document.getElementById("strs").style.transform="translateZ(450px) translateY(350px)";
					document.getElementById("result").style.opacity="1";
					var rdmname = document.getElementById("strs").childNodes[25].firstChild.innerText;
					document.getElementById("result").innerText='恭喜'+rdmname+'同學中獎了';
					namess.unshift(rdmname+' 中獎');
					rank();
					num1=0;
				}
			}
			function rank(){
				document.getElementById("rank").innerHTML='<p>歷史記錄</p>';
				for(var i=0;i<namess.length;i++){
					if(i==10){
						break;
					}
					document.getElementById("rank").innerHTML+='<p>'+namess[i]+'</p>';
				}
			}
			function update(){
				document.getElementById("update").style.top="18vh";
			}
			function updatelist(){
				document.getElementById("updatelist").innerHTML='';
				for(var i=0;i<names.length;i++){
					document.getElementById("updatelist").innerHTML+='<option>'+names[i]+'</option>'
				}
			}
			updatelist();
			function update3(){
				document.getElementById("update").style.top="-35vh";
				document.getElementById("tx").value='';
			}
			function update1(){
				var str = document.getElementById("tx").value;
				for(var i=0;i<names.length;i++){
					if(names[i]==str){
						namess.unshift(names[i]+' 刪除');
						names.splice(i,1);
						updatelist();
						document.getElementById("tx").value='';
						rank();
						break;
					}
				}
			}
			function update2(){
				var str = document.getElementById("tx").value;
				namess.unshift(str+' 添加');
				names.push(str);
				updatelist();
				rank();
				document.getElementById("tx").value='';
			}
			var x,y,start2;
			function rankdown(){
				start2 = setInterval(rankmove);
			}
			function rankup(){
				clearInterval(start2);
			}
			function rankmove(){
				document.getElementById("rank").style.left=x-20+'px';
				document.getElementById("rank").style.top=y-10+'px';
			}
			function moves(xy){
				x=xy.clientX;
				y=xy.clientY;
			}
		</script>
	</body>
</html>

如何鞏固JS：看jQuery源碼、游戲源碼。
鞏固HTML、CSS：扒網站。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript筆記（狂神說）狂神說 JavaSE入門筆記(一) 【筆記】【JavaScript】狂神說-JavaScript學習筆記狂神說HTML筆記狂神說Springboot筆記 Vue筆記（狂神說） MySQL筆記【狂神說】狂神說redis筆記（三） Spring的狂神說筆記 SpringMVC的狂神說筆記