碼上快樂

相關內容    簡體    繁體

JavaScript

本文轉載自   查看原文   2022-03-07 10:03   799    JavaScript

什么是JavaScript

一、概述

JavaScript是一門世界上最流行的腳本語言

一個合格的后端人員，必須要精通JavaScript

快速入門

一、引入JavaScript

  1. 內部標簽

    <!-- script標簽（可以放到文件任何位置）：里面寫JavaScript代碼 -->
<script>
    //......
</script>

  2. 外部引入

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

<!-- 不用顯示定義type，默認為javascript -->
<script type="application/javascript"></script>

二、基本語法

// 1.定義變量 [變量類型 變量名 = 變量值]
const score = 70;
// 2.條件控制
if (score === 70) {
    alert("良好");
} else {
    alert("其它");
}
//在瀏覽器的控制台輸出變量 console.log(score)

// 3.循環
// while循環 ( while(){} / do{}while() )
// for循環 ( for i / forEach()（ES5.1） / for of / for in（ES6） )

瀏覽器必備調試須知：

image-20220223164807011

三、數據類型

數值、字符、布爾、文本、圖形、音頻、視頻等

  1. 數字 (number)
    js不區分小數和整數

    12 //整數
12.1 //浮點數
1.12e2 //科學計數法
-99 //負數
NaN //非數值
Infinity //無窮大

  2. 字符串

    'abc'
"abc"

  3. 布爾值

    true
false

  4. 邏輯運算

    &&
||
!

  5. 比較運算符（重要）

    =
==	//等於（類型不一樣，值一樣，判斷為true）
===	//絕對等於（類型一樣，值一樣，判斷為true）

    堅持不要使用==比較

    注意：

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

    浮點數問題

    console.log((1/3) === (1 - (2 / 3))); //false

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

    Math.abs((1/3) - (1 - (2 / 3))) < 0.000000001 //解決方法

  6. null 和 undefined

    • null 空
    • undefined 未定義

  7. 數組
    Java的數組需要相同類型的對象，JS不需要。

    // 保證代碼的可讀性，盡量使用[]
let array = [1, 2, 3, null, "hello", true];

array = new Array(1, 2, 3, null, "hello", true);

// 越界輸出undefined
console.log(array[2]);

  8. 對象

    let person = {
    name: "ylf",
    age: 18,
    tags: ["java", "python", "c/c++"]
};

console.log(person.age);

四、嚴格檢查模式

// 嚴格檢查模式，預防JavaScript的隨意性導致的問題（必須寫在第一行）
"use strict";
// 默認為全局變量，建議局部變量都是用let定義
let i = 1;

數據類型

一、字符串

  1. 正常字符串使用單引號或雙引號包裹

  2. 轉義字符

    \' 單引號
\n 換行
\t 制表符
\u4e2d \u#### unicode字符
\x41 \x## ascii字符

  3. 多行字符串

    // 反單引號
let msg = 
    `Hello,world!
	nico,nico.
`;
console.log(msg);

  4. 模板字符串

    let msg = "Hello, ";
console.log(msg + "world!");

let name = "ylf!";
msg = `你好啊, ${name}`;
console.log(msg);

  5. 字符串長度

    string.length

  6. 字符串的可變性（不可變）
    image-20220223215544704

  7. 大小寫轉換（注意：不是屬性，是方法）

    string.toUpperCase()
string.toLowerCase()

  8. string.indexOf("string")（通過子字符串獲取子字符串第一個字符位置）

  9. string.substring()（截取字符串的一部分，返回一個新字符串）

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

二、數組

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

let array = [1, 2, 3, null, "hello", true];

  1. 長度

    array.length

    注意：給array.length賦值，數組大小會發生變化：數組變大，增加下標對應元素為空；數組變小，元素丟失

  2. indexOf()（通過元素獲取下標索引）

  3. slice()（截取數組的一部分，返回一個新數組）類似字符串中的substring()

  4. push(), pop()（尾部）

    push() //將元素壓入到尾部
pop() //彈出尾部的一個元素

  5. unshift(), shift()（頭部）

    unshift() //將元素壓入到頭部
shift() //彈出頭部的一個元素

  6. sort()（排序）

  7. reverse()（元素反轉）

  8. concat()
    image-20220224172344741

    concat()沒有修改數組，只是返回一個新數組

  9. join()（連接符）
    image-20220224172553876

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

  10. 多維數組
    image-20220224173056717

三、對象

若干個鍵值對

let 對象名 = {
    屬性名: 屬性值,
    屬性名: 屬性值,
    屬性名: 屬性值
}

JavaScript中的鍵都是字符串，值為任意對象！

  1. 對象賦值
    image-20220228193910402
  2. 使用不存在的對象屬性不報錯！undefined
  3. 動態刪減屬性
    image-20220228194145657
  4. 動態添加屬性
    image-20220228194252665
  5. 判斷屬性值是否在對象中
    image-20220228194911289
  6. 判斷屬性是否對象自身擁有的
    image-20220228195130136

四、Map和Set

ES6新特性

Map（鍵值對）

let map = new Map([["jack", 12], ["tom", 18], ["ylf", 20], ["jet", 30]]);
console.log(map.get("jack")); //獲取對應的鍵值
map.set("nico", 78); //添加鍵值對
map.delete("nico"); //刪除鍵值對
console.log(map.has("nico")); //判斷指定鍵值對是否存在

// 遍歷Map
for (let mapElement of map) {
    console.log(mapElement);
}

Set（無序不重復集合）

let set = new Set([3, 1, 1, 2]);
set.add(4); //添加不重復元素到末尾
set.delete(4); //刪除指定元素
console.log(set.has(4)); //判斷指定元素是否存在

// 遍歷Set
for (let number of set) {
    console.log(number);
}

函數

一、定義函數

// 定義方式一
function 函數名(形參) {
    函數體;
    return 返回值;
}

// 定義方式二
// function(){} 為匿名內部類，但是可以把結果賦值給變量名，通過變量名調用函數
let 函數名 = function(形參) {
    函數體;
    return 返回值;
}

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

參數問題

JavaScript函數可以傳入任意個參數，也可以不傳入參數

傳入參數是否合法存在，不合法存在如何規避？

let abs = function(x) {
    // 手動拋出異常來判斷
    if (typeof x !== "number") {
        throw "Not a number!";
    }

    if (x < 0) {
        return -x;
    } else {
        return x;
    }
};

arguments（包含所有傳入函數的參數，是一個數組）

多參數問題

rest（ES6引入新特性，獲取除了已經定義的參數之外的所有問題）

// 初始方法
if (arguments.length > 1) {
    for (let i = 1; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

function fun(a, ...rest) {
    for (let restElement of rest) {
        console.log(restElement);
    }
}

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

二、變量作用域

三、方法

對象里的叫方法

// 定義方法方式（方法就是把函數放入對象里，對象由屬性和方法構成）
let person = {
    name: "YLF",
    birth: 1999,
    // 方法
    age: function () {
        let fullYear = new Date().getFullYear();
        return fullYear - this.birth;
    }
}

面向對象語言中 this 表示當前對象的一個引用。

但在 JavaScript 中 this 不是固定不變的，它會隨着執行環境的改變而改變。

  • 在方法中，this 表示該方法所屬的對象。
  • 如果單獨使用，this 表示全局對象。
  • 在函數中，this 表示全局對象。
  • 在函數中，在嚴格模式下，this 是未定義的(undefined)。
  • 在事件中，this 表示接收事件的元素。
  • 類似 call() 和 apply() 方法可以將 this 引用到任何對象。

內部對象

標准對象

image-20220302164401102

一、Date

let date = new Date();
console.log("date: ");
console.log(date);
console.log("星期: ");
console.log(date.getDay());
console.log("月: ");
console.log(date.getMonth());
console.log("日: ");
console.log(date.getDate());
console.log("年: ");
console.log(date.getFullYear());
console.log("時: ");
console.log(date.getHours());
console.log("分: ");
console.log(date.getMinutes());
console.log("秒: ");
console.log(date.getSeconds());
console.log("時間戳: ");
// 表示從 1970 年 1 月 1 日 00:00:00 UTC 到給定日期之間經過的毫秒數
console.log(date.getTime());

二、JSON

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

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

JSON 與 JS 對象的關系

JSON 是 JS 對象的字符串表示法。它使用文本表示一個 JS 對象的信息，（JSON）本質是一個字符串。

如：

var obj = {a: 'Hello', b: 'World'}; //這是一個js對象，注意js對象的鍵名也是可以使用引號包裹的,這里的鍵名就不用引號包含
var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字符串，本質是一個字符串

JSON（格式字符串） 和 JS 對象（也可以叫JSON對象 或 JSON 格式的對象）互轉（JSON.parse 和 JSON.stringify）。

要實現從JSON字符串轉換為JS對象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結果是 {a: 'Hello', b: 'World'}  一個對象

要實現從JS對象轉換為JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //結果是 '{"a": "Hello", "b": "World"}'  一個JSON格式的字符串

說句不嚴謹的話：JSON.parse() 就是字符串轉 js 對象， JSON.stringify()就是 js 對象轉字符串，它們前提是要 json 格式才有意義。

三、Ajax

  • 原生的js寫法 xhr 異步請求
  • JQuery封裝的方法 $("選擇器").ajax("")
  • axios請求

面向對象編程

一、什么是面向對象

JavaScript，Java，C#

類（JavaScript中又稱原型對象）

對象

二、原型繼承

let student = {
    name: "student",
    age: 0,

    run: function () {
        console.log(this.name + ", run!");
    }
};

let me = {
    name: "ylf"
};

me.__proto__ = student;

三、class繼承

定義類

// ES6之前
function Student(name) {
    this.name = name;
    // this.hello = function f() {
    //     alert("Hello");
    // }
}
Student.prototype.hello = function () {
    alert("Hello");
}

class關鍵字是ES6引入的

// ES6之后
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert("Hello");
    }
}

// class繼承
class Pupil extends Student {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    play() {
        alert("play");
    }
}

本質還是原型繼承

image-20220302211234353

四、原型鏈

操作BOM對象（重點）

一、瀏覽器

Javascript 和瀏覽器的關系：Javascript誕生是為了能夠在瀏覽器運行

BOM（Browser Object Model）：瀏覽器對象模型

內核

  • IE 6 - 11
  • Chrome
  • Safari
  • FireFox

三方

  • QQ瀏覽器
  • 360瀏覽器

二、window對象（重要）

window代表瀏覽器窗口

window.innerHeight
182
window.innerWidth
1488
window.alert('hello')

三、navigator對象

封裝了瀏覽器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.62'
navigator.platform
'Win32'

盡量避免使用navigator對象，因為它會被認為修改

四、screen對象

// 屏幕分辨率
screen.width
1536
screen.height
864

五、location對象（重要）

代表當前頁面的URL信息

host: "developer.mozilla.org"
href: "https://developer.mozilla.org/zh-CN/docs/Web/API/Window/outerHeight"
protocol: "https:"
reload: ƒ reload() // 刷新網頁
// 設置新的地址
location.assign('https://www.baidu.com/')

六、document對象（重要）

代表當前頁面

獲取具體的文檔樹節點

<ul id="ul">
    <li>Java</li>
    <li>C++</li>
    <li>Python</li>
</ul>

<script>
    let ul = document.getElementById("ul");
    console.log(ul);
</script>

獲取cookie

document.cookie
'BAIDUID_BFESS=A57FC6971D87A9172CD9952274273C6B:FG=1; BIDUPSID=A57FC6971D87A9172CD9952274273C6B; PSTM=1645402825; BD_UPN=12314753; baikeVisitId=37443825-845d-443f-aacd-9504a8d0e3eb; RT="z=1&dm=baidu.com&si=gpeanogruej&ss=l09ccw1h&sl=2&tt=1m3&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=24y&ul=e6v0&hd=e6xc"; ZD_ENTRY=bing; BD_HOME=1; H_PS_PSSID=34429_35106_31253_34584_35871_35908_35946_35972_35984_35315_26350; BA_HECTOR=a42k0l248la1850he71h210ue0q'

截取cookie原理

服務器端可以設置cookie為httpOnly保證安全

七、history對象

代表瀏覽器歷史記錄

history.forward()
history.back()

操作DOM對象（重點）

DOM：文檔對象模型

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

  • 更新DOM節點
  • 遍歷DOM節點
  • 刪除DOM節點
  • 添加DOM節點

操作DOM節點需要先獲取它！

一、獲取DOM節點

// 對應css選擇器
let elementsByTagName = document.getElementsByTagName("h1");
let elementById = document.getElementById("paragraph");
let elementsByClassName = document.getElementsByClassName("paragraph");
let container = document.getElementById("container");

let children = container.children; // 獲取父節點的所有子節點
let parentNode = elementById.parentNode; //獲取父節點

這是原生代碼，之后盡量使用JQuery

二、更新DOM節點

<div id="container">

</div>

<script>
    let elementById = document.getElementById("container");
</script>

  • 更新文本

    elementById.innerText = 123 // 修改文本值
elementById.innerHTML = "<strong>123</strong>" // 可以解析HTML文本標簽

  • 操作CSS

    elementById.style.color = "red"; // 屬性值使用字符串
elementById.style.fontSize = "50px" // -轉駝峰命名問題

三、刪除DOM節點

步驟：先獲取父節點，然后通過父節點刪除自己

<div id="container">
    <h1>標題一</h1>
    <p id="paragraph">段落一</p>
    <p class="paragraph">段落二</p>
</div>

<script>
    let elementById = document.getElementById("paragraph");
    let parentNode = elementById.parentNode; //獲取父節點
    parentNode.removeChild(elementById);
</script>

注意：刪除節點時是動態的，children是時空變化的

四、創建和插入DOM節點

節點為空時，使用 innerText 或者 innerHTML 可以添加DOM節點，但不為空時，其會覆蓋原來的DOM節點

追加DOM節點

<p id="outerParagraph">外部段落</p>
<div id="container">
    <p id="innerParagraph1">內部段落一</p>
    <p id="innerParagraph2">內部段落二</p>
    <p id="innerParagraph3">內部段落三</p>
</div>

<script>
    let outerParagraph = document.getElementById("outerParagraph"); 
    let container = document.getElementById("container");
    // DOM父節點追加一個已存在的DOM節點
    container.appendChild(outerParagraph); 
    // 創建新DOM節點，並追加到DOM父節點后面
    let htmlParagraphElement = document.createElement("p");
    // htmlParagraphElement.setAttribute("id", "newNode");
    htmlParagraphElement.id = "newNode";
    htmlParagraphElement.innerText = "newNode";
    container.appendChild(htmlParagraphElement);
</script>

向前插入DOM節點

<p id="outerParagraph">外部段落</p>
<div id="container">
    <p id="innerParagraph1">內部段落一</p>
    <p id="innerParagraph2">內部段落二</p>
    <p id="innerParagraph3">內部段落三</p>
</div>

<script>
    let outerParagraph = document.getElementById("outerParagraph");
    let innerParagraph2 = document.getElementById("innerParagraph2");
    let container = document.getElementById("container");
    container.insertBefore(outerParagraph, innerParagraph2);
</script>

操作表單（驗證）

一、什么是表單

目的：提交信息

二、獲取和修改表單提交信息

<form action="#" method="post">
    <span>用戶名：</span> <input type="text" id="username"> <br>
    <input type="radio" id="male" name="sex" value="male"> 男
    <input type="radio" id="female" name="sex" value="female"> 女
</form>

<script>
    let username = document.getElementById("username");
    let male = document.getElementById("male");
    let female = document.getElementById("female");
    //獲取文本框提交信息 username.value
    //修改文本框提交信息 username.value = '123'

    //獲取單選框提交信息
    if (male.checked = true) {
        console.log(male.value);
    }
</script>

三、表單提交驗證及密碼MD5加密

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表單提交驗證及密碼MD5加密</title>

        <!-- MD5工具類 -->
        <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
    </head>
    <body>
        <!--
        表單綁定事件
        1.事件處理程序的返回值
        在JavaScript中通常事件處理程序不需要有返回值，這時瀏覽器會按默認方式進行處理；
        但很多情況下需要使用返回值，來判斷事件處理程序是否正確進行處理。
        2.返回值類型：boolean值
        瀏覽器根據返回值的類型決定下一步如何操作。當返回值為true，進行默認操作； 當返回值為 false，阻止瀏覽器下一步操作。
        3.基本語法：事件句柄=“return 函數名（參數）;"
         -->
        <form action="https://www.baidu.com" method="post" onsubmit="return check()">
            <p>
                <span>用戶名：</span>
                <input type="text" name="username" id="username">
            </p>
            <p>
                <span>密碼：</span>
                <input type="password" name="password" id="password">
            </p>
            <p>
                <!-- 按鈕綁定事件 onclick 被點擊 -->
                <input type="submit" value="提交">
            </p>
        </form>

        <script>
            function check() {
                let username = document.getElementById("username");
                let password = document.getElementById("password");
                // MD5加密
                password.value = md5(password.value);
                return false;
            }
        </script>
    </body>
</html>

JQuery

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

一、JQuery入門

  1. 下載JQuery

image-20220304215145889

  1. 引入JQuery

    <!-- 方法一：CDN引入 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 方法二：下載JQuery鏈接引入 -->
<!-- <script src="../lib/jquery-3.6.0.js"></script> -->

  2. 使用JQuery

    <a href="#" id="test-jquery">超鏈接</a>
<script>
    // JQuery使用語法：$(選擇器).事件(事件函數)
    $("#test-jquery").click(function () {
        alert("Hello, JQuery!");
    })
</script>

二、選擇器

jQuery API 中文文檔 | jQuery API 中文在線手冊 | jquery api 下載 | jquery api chm (cuishifeng.cn)

三、事件

鼠標事件、鍵盤事件、其它事件

獲取鼠標當前坐標

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>獲取鼠標當前坐標</title>

        <script src="../lib/jquery-3.6.0.js"></script>

        <style>
            body {
                height: 500px;
            }
            span {
                width: 100px;
                height: 100px;
                display: block;
            }
        </style>
    </head>
    <body>
        鼠標當前坐標：<span id="coordinate"></span>

        <script>
            // 當頁面加載完畢之后，響應事件
            $(function () {
                $("body").mousemove(function (coordinate) {
                    $("#coordinate").text("X坐標：" + coordinate.pageX + "\t" + "Y坐標：" + coordinate.pageY);
                });
            })
        </script>
    </body>
</html>

四、操作DOM對象

// 操作文本
//text(),html() 無參獲取文本值，有參設置文本值 html()可以解析HTML文本標簽
console.log($("#test-ul li[name=python]").text());
console.log($(".java").html());

// 操作CSS
$(".java").css({"color": "red", "font-size": 50});

// 元素展示和隱藏
$(".java").hide() //本質disply: none
$(".java").show()


免責聲明！

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



猜您在找 javascript JavaScript javaScript 1、JavaScript是什么？JavaScript簡介 （五）我的JavaScript系列：JavaScript的糟粕 JavaScript學習（一） JavaScript對象 【javascript】cookie Javascript技巧 解惑之JavaScript
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM