JavaScript學習

来源:https://www.cnblogs.com/Alaskaboo/archive/2022/09/03/16651751.html
-Advertisement-
Play Games

一、什麼是JavaScript JavaScript世界上最流行的腳本語言 ==一個合格的後端人員，必須精通JavaScript== 二、快速入門 2.1、引入JavaScript 內部引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...


一、什麼是JavaScript

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

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

二、快速入門

2.1、引入JavaScript

  1. 內部引入

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            alert('hello,JavaScript');
        </script>
    </head>
    <body>

    </body>
</html>

  2. 外部引入

    alert('hello,JavaScript');

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/1.第一個JavaScript.js"/>
</head>
<body>

</body>
</html>

2.2、基本語法

例子

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

	<script>
        // 1.定義變數 變數類型 變數名 = 變數值；
        var num = 80;
        // alert(num);
        // 2. 條件語句
        if (num>70&&num<=100){
            alert("70~100");
        }else if(num>60&&num<=70){
            alert("60~70");
        }else{
            alert("other");
        }
	</script>
	
</head>
<body>


</body>
</html>

2.3、數據類型

number數

js不區分小數和整數，Number

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

字元串

'abc' "abc"

布爾值

true , false

邏輯運算

&&  兩個都為真，結果為真

||  一個為真，結果為真

!   真即假，假即真

比較運算符！！！重要！

=
==等於（類型不一樣，值一樣，也會判斷為true)
===絕對等於(類型一樣,值一樣，結果true)

浮點數問題

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

Math.abs(1/3-(1-2/3))<0.00000001

null和undefined

  • null空
  • undefined未定義

數組

Java一些列相同類型的對象 ~，JS中不需要這樣!

var arr = [1,2,3,4,5, 'he11o',nu11,true]

2.4、嚴格檢查模式

'use strict'

局部變數建議都用let去定義

三、數據類型

3.1、字元串

1、多行字元串編寫

var msg = `hello
你好呀
world
`

2、模板字元串

'use strict';
let name = '小菜';
let msg = `你好呀，${name}`;
alert(msg);

3、substring

[)
 str.substring(1)//從第一個字元串截取到最後一個字元串
 str.substring[1，3)//從第一個字元串截取到第三個字元串，前面可以取到

3.2、數組

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

var arr = [1,2,3,4,5]

1、長度

arr.length

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

2、indexOf，通過下標索引

3、slice（）截取Array的一部分，返回一個新的數組

4、push，pop

push//往數組最後面加入值
pop//往尾部剔除值

5、unshift() shift

unshift//往數組頭部加入值
shift//往頭部剔除值

6、排序

str.sort()

7、原數反轉

str.reverse()

8、拼接concat()

str.concat([1,2,3])//生成一個新數組

9、連接符join

["c"，"B"，"A"]
arr.join('-')
"C-B-A"

image

3.3、對象

var person = {
name: "kuangsnen",
age: 3,
emai1: "[email protected]",
score: 0
}

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

1、對象賦值

person.name = "qinjiang"
>"qinjiang"
person.name
>"qinjiang"

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

person.haha
undefined

3、動態的刪減屬性

delete person. name
true
person

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

person. haha = "haha"
"haha"
person

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

'age' in person
true
//繼承
'tostring' in person
true

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

person. hasownProperty('tostring')
false
person.hasownProperty( 'age')
true

3.4、流程式控制制

if

while

for

do...while

3.5、Map和Set

ES6新特性

map:

//Es6 Map
//學生的成績，學生的名字
// var names = ["tom" , "jack" , "haha"];
// var scores = [100, 90,80];
var map = new Map([[ 'tom' ,100],[ 'jack ' ,90], [ 'haha',80]]);
var name = map.get('tom');//通過key獲得value
map.set('admin',123456)//新增或修改
map.delete("tom")

Set：無序不重覆的集合

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

3.6、iterator

迭代Map和Set

遍歷map：var x of map

var map = new Map([[ "tom" ,100],["jack",90], [ "haha",80]]);
for ( let x of map){
    console.log(x)
}

遍歷set

var set = new set([5,6,7]);
for (let x of set) {
    console. log(x)
}

四、函數及面向對象

4.1、函數定義及變數作用域

絕對值函數

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

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

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

4.2、變數的作用域

局部函數：

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

全部變數：

都可以使用

規範

如果內外函數重名，由內向外查找

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

//唯一全局變數
var KuangApp = {};
//定義全局變數
KuangApp.name = 'kuangshen ';
KuangApp.add = function (a,b) {
return a + b;
}

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

局部作用域 let

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

解決問題：

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

建議let

常量 const

定義一個常量用const來定義，例如：const PI='3.14';

const PI='3.14';

4.3、方法

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

let Aaron = {
    name: '小菜',
    birth: 2001,
    age: function () {
        let nowAge = new Date().getFullYear();
        return (nowAge - this.birth);
    }
}


//屬性
Aaron.name

//方法,帶括弧 
Aaron.age()

Apply應用

通過使用apply，改變this的指代

 function getAge() {
        let nowAge = new Date().getFullYear();
        return (nowAge - this.birth);
    }

let Aaron = {
    name: '小菜',
    birth: 2001,
    age:getAge
}

getAge.apply(Aaron,[])

五、常用對象

標準對象

image

5.1、Date

console.log(now)

image

5.2、JSON

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

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

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

格式：

  • 對象都用{}
  • 數組都用[]
  • 所有的鍵值對都是用 key : value
        let user = {
            name: "Aaron",
            age: 21,
            sex: '男'
        };
        //對象轉化為json字元串{"name":"Aaron","age":21,"sex":"男"}
        let jsonUser = JSON.stringify(user);

        let obj = JSON.parse(jsonUser);

結果

console.log(user)
VM62:1 {name: 'Aaron', age: 21, sex: '男'}
undefined
console.log(jsonUser)
VM110:1 {"name":"Aaron","age":21,"sex":"男"}

六、面向對象編程

class繼承

class關鍵字，ES6引入的

1、定義一個類，屬性方法

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 xiaoming = new Student("xiaoming");

本質：看原型

七、操作Bom對象（重點）

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

document.title
"百度一下，你就知道"

document.title='狂神說'

"狂神說"

獲取具體的文檔樹節點

<dl id="app">
    <dt>Java</dt>
	<dd>JavaSE</dd>
	<dd>javaEE</dd>
</dl>

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

劫持cookie原理

伺服器可以設置cookie：httpOnly來防止被劫持

history瀏覽器的歷史記錄

history.back//後退
history.forward//前進

7.1、操作Dom對象

核心

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

  • 更新：更新Dom節點
  • 遍歷dom節點:得到Dom節點
  • 刪除：刪除一個Dom節點
  • 添加：添加一個新的節點
  • 要操作一個Dom節點，就必須要先獲得這個Dom節點

獲得dom節點

<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 childrens = father.children;//獲取父節點下的所有子節點

後期jQuery代替

7.2、更新Dom

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

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

操作文本：

  • id1.innerText='456' 修改文本的值
  • id1.innerHTML='123' 可以解析HTML文本標簽

操作JS

id1.style.color = 'yellow';
id1.style.fontSize = '20px';
id1.style.padding = '2em';

7.3、刪除Dom

刪除節點的步驟：

先獲取父節點，再通過父節點刪除自己

<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.removechi1d(father.chi7dren[0])
    father.removechild(father.children[1])
    father.removechild(father.children[2])

</script>

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

7.4、插入Dom節點

追加

<p id="js">javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me ">avaME</p>
</div>
<script>
    var js = document.getElementById( 'js ');
    var list = document.getElementById( ' list' );
    list.appendchild(js);
</script>

創建一個新的標簽

<script>
    var js = document.getElementBy1d('js');//已經存在的節點
    var list = document.getElementById('list');
    //通過js 創建一個新的節點
    var newP = document.createElement('p');//創建一個p標簽
    newP.id = 'newP' ;
    newP.innerText = 'He11o,Kuangshen';
    //創建一個標簽節點(通過這個屬性，可以設置任意的值)
    var myscript = document.createElement('script');
    myscript.setAttribute( 'type' , 'text/javascript')
</script>

八、操作表單（驗證）

8.1、表單

表單是什麼form DOM樹

  • 文本框 text
  • 下拉框 < select>
  • 單選框 radio
  • 多選框 checkbox
  • 隱藏域 hidden
  • 密碼框 password

目的：提交信息

8.2、提交表單(加密演算法)

普通演算法

<!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>

<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
	<p>
		<span>用戶名:</span> <input type="text" id="username" name="username">
	</p>
	<p>
		<span>密碼:</span> <input type="password" id="input_password">
	</p>
	<input type="hidden" id="md5_password" name="password">

	<!--綁定事件-->
	<button type="submit">提交</button>
</form>

<script>
    function a() {
        alert(1);
        var username = document.getElementById('username');
        var password = document.getElementById('input_password');
        var md5_password = document.getElementById('md5_password');
        //console.log(username.value);

	    password.value = md5(password.value);
        //MD5 演算法
        md5_password.value = md5(password.value);
        //console.log(md5_password.value);

        return true;
    }
</script>
</body>
</html>

MD5演算法表單優化

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<!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>

<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
	<p>
		<span>用戶名:</span> <input type="text" id="username" name="username">
	</p>
	<p>
		<span>密碼:</span> <input type="password" id="input_password">
	</p>
	<input type="hidden" id="md5_password" name="password">

	<!--綁定事件-->
	<button type="submit">提交</button>
</form>

<script>
    function a() {
        alert(1);
        var username = document.getElementById('username');
        var password = document.getElementById('input_password');
        var md5_password = document.getElementById('md5_password');
        //console.log(username.value);
        //MD5 演算法
        md5_password.value = md5(password.value);
        //console.log(md5_password.value);

        return true;
    }
</script>
</body>
</html>

兩者比較

優化後取消下麵這一個代碼，減少密碼提交一瞬間，輸入框加密時密碼顯示變多，用戶體驗不好！！！

	    password.value = md5(password.value);

九、jQuery庫

1、引入

線上鏈接

<script !src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

導入包

2、公式

$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->


<a href="" id="test_jQuery">點我</a>

<script>
	$('#test_jQuery').click(function () {
		alert('hello,jQuery');
    })
</script>

</body>
</html>

3、選擇器

文檔工具棧：

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

<script>
    $('p').click();//標簽選擇器
    $('#id1').click();//id選擇器
    $('.class1').click();//class選擇器
</script>

4、事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/jquery-3.6.0.js"></script>
	<style>
		#divMove{
			width: 500px;
			height: 500px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
<!--
公式：$(selector).action()
-->
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>

5、操作dom

節點文本操作

    $('#test_ul li[class=python]').text();
    $('#test_ul').html();

css的操作

    $('#test_ul li[class=python]').css("color","blue");

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SQL中的排座位問題
    排座位問題的思路 表: Seat + + + | Column Name | Type | + + + | id | int | | name | varchar | + + + Id是該表的主鍵列。 該表的每一行都表示學生的姓名和ID。 Id是一個連續的增量。 編寫SQL查詢來交換每兩個連續的學生 ...
  • HiveSql調優系列之Hive嚴格模式，如何合理使用Hive嚴格模式
    所謂Hive的嚴格模式，就是為了避免用戶提交一些惡意SQL，消耗大量資源進而使得運行環境崩潰做出的一些安全性的限制。 ...
  • 金融數字化轉型落地實踐，騰訊雲資料庫的三問三答
    近期，由中科軟科技股份有限公司主辦，以“數字保險 科技引擎”為主題的“中國財險科技應用高峰論壇”在北京古北水鎮成功舉辦。論壇聚集400多位來自國內財險公司、國內外保險科技公司的技術專家，騰訊雲資料庫總經理王義成受邀參加，並作為開場嘉賓做主題演講，分享騰訊雲資料庫在金融領域的探索實踐。以下為大會分享實 ...
  • Apache DolphinScheduler PMC：開源不一定也要九死一生
    點亮 ⭐️ Star · 照亮開源之路 GitHub:https://github.com/apache/dolphinscheduler ​ 參與開源已經快3年了，這次在Meetup上沒有分享純技術的話題，其初衷是想帶這大家從一個開源社區維護者的視角來看開源，希望大家能從中獲取到一些感悟，當然這次 ...
  • 線上數據遷移，數字化時代的必修課 —— 京東雲數據遷移實踐
    打破數據邊界，是數字化時代常掛在嘴邊的一句話，數據的價值是在流動中體現的，數據應用也是如此。以往為了滿足開發、測試、數據保護容災和數據分析的需要，我們不斷對數據進行複製、備份、遷移，因此數據遷移非常重要。 混合多雲時代，用戶數據遷移需求與場景激增 今天我們來重點聊聊混合雲時代中數據遷移，先來看看常見 ...
  • HBuilder包裝iOS APP上App Store的詳細過程
    以前看過很多教程，然後。ITUNE管理APP功能被刪除，IPA安裝失敗。Appuploader已有1個月的期限等問題。 請參見此教程重新安裝。因此，放出。 很多新生開發，不知道如何包裝。ios APP安裝在自己的手機測試，ios不像安卓包裝好後可以直接安裝到手機上，蘋果APP如果需要安裝在非逃避的蘋 ...
  • 2022年ios證書最新申請流程
    ​ 最近的15年，手機行業無論怎麼變，ios系統依然還是占據著行業的榜首位置，而打包一個蘋果的app，門檻則比較高。 主要的原因在於蘋果app的開發，打包時需要p12格式的證書文件和描述文件profile文件（在hbuilder和apicloud這些h5打包平臺，ios證書又叫私鑰證書。），而這些文 ...
  • 簡單理解 JavaScript 的詞法作用域
    前言 關於作用域的有關知識點有全局作用域、局部作用域、函數作用域、塊級作用域、詞法作用域、作用域鏈。 作用域 作用域就像是一個教室，上課時教室裡面的人互相可見，A 教室里的人不可以看見 B 教室里的人。作用域決定了代碼生效的區域以及資源（變數、函數）可見的區域。 function fun() { l ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類