javaScript基礎講解

fightownself發表於2024-07-15

Javascript

1.基本語法入門

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    /*Javascript嚴格區分大小寫*/
    <script>
        var score =62;
        if(score>60 &&score<70){
            alert("67")
        }else if(score>70 &&score<80){
            alert("79")
        }else {
            alert("other")
        }
        /*console.log(score) 在瀏覽器的控制檯*/
    </script>
<!--    <script src="jf/ab.js"></script>-->
</head>
<body>

</body>

2.基礎入門

變數

var $1 =1

number

js不區分小數和整數

124 //整數
123.1 //浮點數
123.e4 //科學計數法
-90 //負數
NaN //not a number //不是一個數字
Infinity //無窮大

字串

'abc' "abc"

布林值

true false

邏輯運算

&& //兩個為真，結果為真
    
|| //一個為真，結果為真
 
! //真即假，假即真

比較運算子

= //賦值
== //等於（型別不一樣，值一樣，也會判斷為true）
===  //絕對等於(型別一樣，值一樣，結果為true)

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

NaN===NaN ，這個與所有的數值都不相等，包括自己

只能透過isNaN(NaN)來判斷這個數

浮點數問題

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

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

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

null和undefined

undefined 未定義

null 空

陣列

一系列相同型別的物件

var arr=[1,13,3,44,3,'hello',true]
new array(1,2,34,2,'js',false)
//保證程式碼的可讀性，使用[]

物件

物件是大括號，陣列是中括號

每個屬性之間使用逗號隔開，最後一個不需要新增

var person = {
    name:"js",
    age:14,
    tags:['js','java']
}

取物件的值

person.name

嚴格檢查模式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    /*前提：idea設定ES6
    ‘use strict’:嚴格檢查模式，預防Javascript的隨意性導致產生的一些問題
    必須寫在Javascript的第一行！
    區域性變數建議都使用Let去定義

    */
    <script>
        'use strict';
         let i = 1;
    </script>
</head>
<body>

</body>

3.資料型別

3.1字串

1.正常的字串使用單引號或者雙引號

2.注意轉意字元

\' //轉意字元
\n 
\t
\u4e2d \u#### Unicode字元
\x41 Ascll 字元

3.多行字串編寫

let msg = `
      hello
      你好
      3
`

4.模板拼接

let name='jf';
let mag = `你好, ${name}`

5.字串長度

let student = 'student';
console.log(student.length)

6.字串的可變性，不可變，不能賦值

7.大小寫轉換

//這裡是方法，不是屬性
console.log(student.toUpperCase())
console.log(student.toLowerCase())

console.log(student.indexOf('u'))
console.log(student.substring(1,4)) //擷取字串

3.2陣列

Array可以包含任意的資料型別

var arr = [1,2,3,45,4,7,10];//可以透過下標取值和賦值
arr[0]
arr[0]=1

1.長度

arr.length

注意：加入給arr.length賦值，陣列大小就會發生變化，如果賦值過小，元素就會丟失

2.indexOf,透過元素獲得下表索引

arr.indexOf(5)
1

字串的“1”和數字1是不同的

3.slice()擷取Array的一部分，返回一個新陣列，類似於String中的substring

4.push ,pop 尾部

arr.pop();//從尾部彈出
arr.push(1,2);//尾部壓入元素

5.unshift() ,shift() 頭部

unshift;//壓入到頭部
shift;//從頭部彈出
arr.unshift(1,3)
13
arr
(13) [1, 3, 0, 5, 4, 3, 2, empty × 5, 'a']
arr.shift()
1

6.排序sort()

arr.sort()
(12) [0, 2, 3, 3, 4, 5, 'a', empty × 5]

7.元素反轉reverse()

arr.reverse()

8.concat()

arr.concat(2,56,78)
(15) [empty × 5, 'a', 5, 4, 3, 3, 2, 0, 2, 56, 78]
arr
(12) [empty × 5, 'a', 5, 4, 3, 3, 2, 0]

注意：concat()並沒有修改陣列，只是會返回一個新的陣列

9.連線字元join

列印拼接陣列，使用特定的字串連線

arr.join('-')
'-----a-5-4-3-3-2-0'

10.多維陣列

arr=[[1,3],[3,5],['8','0']]
arr[0][1]
3

3.3物件

var 物件名 = {
            屬性名：屬性值，
            屬性名：屬性值，
            屬性名：屬性值
        }

var person = {
            name:"jf",
            age:18,
            email:"123344587@qq.com",
            score:89
        }

JS中物件，{....}表示一個物件，鍵值對描述屬性 xxx:xxx，多個屬性之間使用逗號隔開，最後一個屬性不加逗號

1.物件賦值

person.name="zhangsan"
'zhangsan'
person.name
'zhangsan'

2.使用一個不存在的物件屬性，不會報錯

person.hahha
undefined

3.動態的刪減性

delete person.name

4.動態的新增，直接給新的屬性新增值

person.hhaha = "1234"

5.判斷這個屬性值是否在這個物件中

'age' in person

6.判斷一個屬性是否是這個物件自身擁有的hasOwnProperty()

person.hasOwnProperty('age')
true

3.4流程控制

if判斷

var age = 3;
        if(age>3){//第一次判斷
            alert("haha");
        }else if(age>5){//第二次判斷
            alert(("hahahhah"));
        }else{//否則
            alert("kuku");
        }

while迴圈,避免程式死迴圈

while (age<100) {
            age = age +1;
            console.log(age);
        }

for迴圈

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

forEach迴圈

var age = [12,23,34,45,67,78];
//函式
age.forEach(function(value) {
    console.log(value)
})

for....in 迴圈

//num 索引
for (var num in age) {
            if(age.hasOwnProperty(num)){
                console.log("存在");
                console.log(age[num])
            }
        }

3.5Map 和 Set

ES6的新特性

Map:

var map = new Map([['tom',100],['jack',90]]);
        var name = map.get('tom');//透過key獲得value
        map.set('admin',89);//新增或修改
        console.log(name);
        map.delete('tom');//刪除

Set:無序不重複的集合

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

3.6iterator

使用iterator遍歷迭代Map,Set

遍歷陣列

var arr = [3,5,6,8] //列印下表
        for (let x in arr){
            console.log(x)
        }

var arr = [3,5,6,8] //列印具體的值
        for (let x of arr){
            console.log(x)
        }

遍歷Map

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

遍歷Set

var set = new Set([9,10,8]);
        for (let x of set) {
            console.log(x)
        }

4.函式

定義方式一

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

一旦執行return代表函式結束，返回結果

如果沒有執行return ，函式執行完也會返回結果，結果是undefind

定義方式二

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

function(x){....}這是一個匿名函式，但是可以把結果賦值給abs，透過abs就可以呼叫函式

方式一和方式二等價

呼叫函式

abs(10) //10
abs(-10) //10

引數問題：javaScript可以傳遞任意個引數，也可以不傳遞引數

假設不存在引數，如何規避

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

arguments代表傳遞進來的引數，是一個陣列

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

arguments包含所有的引數，想使用多餘的引數來進行附加操作，需要排除已有引數

rest

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

function abs(a,b,...rest){
    console.log("a>="+a);
    console.log("b>="+b);
    console.log(rest)
}

rest引數只能寫在最後面，必須用...標識。

4.1變數的作用域

假設在函式體內宣告，則函式體外不可以使用

function jf(){
            var x =1;
            x = x+1;
        }
        x = x+1;

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

function jf(){
    var x =1;
    x = x+1;
}
function jf2(){
    var x ='a';
    x = x+1;
}

內部函式的成員可以訪問外部函式的成員

function jf(){
            var x =1;
            function hj(){
                var y = x+1;
            }
           var z=y+1;//ReferenceError: z is not defined
        }

假設內部函式變數和外部函式變數重名；

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

假設在js中函式查詢變數從自身函式開始，由內向外查詢，假設外部存在這個同名的函式變數，則內部函式會遮蔽外部函式的變數

提升作用域

所有的變數都定義放在函式的頭部，不要亂放

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

全域性函式

var x =1;
function f(){
    console.log(x)
}
f()
console.log(x)

全域性物件

var x = 'xxx';
alert(x);
alert(window.x)//預設所有的全域性變數，都會自動繫結在window物件下

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

var x = 'xxx';
window.alert(x);
var old_alert =window.alert;
window.alert= function (){

}
window.alert(234);//window.alert失效
window.alert = old_alert;//恢復
window.alert(890)

JavaScript只有一個全域性作用域，任何變數（函式也可以視作變數），假設沒有在函式作用範圍內找到，就會向外查詢，如果在全域性作用域都沒有找到，就會報錯

規範

由於我們所有的全域性變數都會繫結到window上，如果不同的js檔案，使用了相同的全域性變數，衝突

減少衝突

var KK ={};//唯一全域性變數
kk.name = "aaa";//定義全域性變數
kk.add = function (a,b){
    return a+b;
}

把自己的程式碼全部放入自己定義的唯一空間名字中，降低全域性命名衝突的問題

區域性作用域

function aa(){
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);//i出了這個作用域還能使用
}

ES6 let關鍵字解決區域性作用域的問題

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

常量

const PI ='3.134';//只讀常量
console.log(PI);
PI = '3.45';
console.log(PI)// Assignment to constant variable.

4.2方法

定義方法

var jf ={
            name:"hj",
            birth:2000,
            age:function (){
            var now = new Date().getFullYear();
                return now-this.birth
            }
        }
//屬性
jf.name
//方法
jf.age()

拆開上面的程式碼

function getAge(){
                var now = new Date().getFullYear();
                return now-this.birth
        }
        var jf ={
            name:"hj",
            birth:2000,
            age:getAge
            }

this是無法指向的，是預設指向呼叫它的那個物件

apply

在JS中可以控制this的指向

function getAge(){
        var now = new Date().getFullYear();
        return now-this.birth
}
var jf ={
    name:"hj",
    birth:2000,
    age:getAge
    }
getAge.apply(jf,[]);

5標準物件

typeof(1234)
'number'
 typeof('huang')
'string'

5.1Date

var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getHours();//時
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//時間戳

轉換

now.toDateString() //注意，呼叫是一個方法，不是屬性
'Fri Jul 12 2024'

5.2 JSON

JSON（JavaScript Object Notation）是一種輕量級的資料交換格式。

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

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

在JS中一切皆為物件，任何js支援的型別都可以用JSON表示 number string...

格式：

物件{}

陣列[]

鍵值對key:value

JSON字串和JS物件的轉化

var user={
            name:"hj",
            age:30,
            sex:"男"
        }
        //將物件轉化為JSON
        var jsonUser = JSON.stringify(user);//{"name":"hj","age":30,"sex":"男"}
        //將JSON轉為物件,引數為json字串
        var obj = JSON.parse('{"name":"hj","age":30,"sex":"男"}')

JSON和JS的區別

var obj = {a:'1',b:'c'} //物件
var obj = '{"a":"1","b":"c"}'//JSON字串

6物件導向程式設計

var user={
    name:"hj",
    age:30,
    run:function (){
        console.log(this.name +" run....");
    }
};
var xiaoHong = {
    name:"hf"
};
//xiaoHong的原型是user
xiaoHong.__proto__ = user;

class

class是es6之後引入的

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

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

7.操作BOM物件

BOM瀏覽器物件模型

window代表瀏覽器視窗

window.innerHeight
206
window.innerWidth
1366
window.outerHeight
728
window.outerWidth
1366
window.alert(1)
1

screen代表螢幕的尺寸

screen.height
768
screen.width
1366

location(重要)

location代表當前頁面的url資訊

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=62095104_23_oem_dg"
reload  //重新整理網頁
location.assign()//設定新的地址

document 代表當前的頁面

document.title
'百度一下，你就知道'
document.title='hello'
'hello'

獲取cookie

document.cookie

history

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

8 操作DOM物件

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

更新：更新DOM節點

遍歷dom節點：得到dom節點

刪除：刪除一個dom節點

新增：新增一個新的節點

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

8.1獲取dom節點

<div id="father">
    <h1>h1</h1>
    <p1 id="p1">p1</p1>
    <p2 class="p2">p2</p2>
</div>
<script>
     var h1 = document.getElementsByTagName('h1');
     var p1 = document.getElementById('p1');
     var p2 = document.getElementsByClassName('p2');
     var father = document.getElementById('father');
     var childrens = father.children;//獲取父節點下的所有子節點
</script>

這是原生程式碼，以後用jQuery();

8.2更新節點

操作文字

<script>
    id1.innerText='123';//修改文字的值
    id1.innerHTML = '<strong>123</strong>';//可以解析HTML文字標籤
</script>

操作JS

id1.style.padding='2em';//屬性使用字串
id1.style.fontSize='50px';//駝峰命名
id1.style.color='red';

8.2 刪除節點

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

var self = document.getElementById(p1);
var father= p1.parentElement;
father.removeChild(p1)

//刪除是一個動態的過程
        father.removeChild(father.children[0])
        father.removeChild(father.children[1])
        father.removeChild(father.children[2])

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

插入節點

我們獲得某個dom節點,假設這個dom節點是空的，可以透過innerHTML就可以增加一個元素

但是這個dom節點已經存在了，就不能這麼做，會產生覆蓋

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

建立一個新的節點，實現插入

//透過JavaScript建立一個新標籤
var newP =document.createElement('p');
newP.id = 'newP';
newP.innerText='hello ,jf';list.appendChild(newP);

建立一個標籤節點(透過這個屬性，可以設定任意的值)

//建立一個標籤節點(透過這個屬性，可以設定任意的值)
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.appendChild(myScript);

//建立一個style標籤
var myStyle = document.createElement('style');//建立一個空的style標籤
myStyle.setAttribute('style','text/css');
myStyle.innerHTML='body{}';//設定標籤內容
document.getElementsByTagName('head')[0].appendChild(myStyle);

insert

var js = document.getElementById('JS');//已經存在的節點
var list = document.getElementById('list');
var ee = document.getElementById('ee');
list.insertBefore(js,ee);
//要包含的節點，insertBefore(newNode,targetNode)新節點，目標節點

9操作表單

表單的目的是提交資訊

文字框 text

下拉框<select>

單選框radio

多選框 checkbox

隱藏域 hidden

密碼框 password

<body>
<form action="post">
    <p>
        <span>使用者名稱：</span><input type="text" id="username">
    </p>
    <p>
        <span>性別：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="gril">女
    </p>
</form>
<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var gril_radio = document.getElementById('gril');
    //得到輸入框的值
    input_text.value;
    //修改輸入框的值
    input_text.value = '123';
    //對於單選框的值，多選框等等固定的值，boy_radio.value只能取到當前的值
    boy_radio.checked //檢視返回的結果是否是true，如果是true,則被選中
    boy_radio.checked =true;//賦值
</script>

使用md5加密

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
//onsubmit = 繫結一個提交檢測的函式，true,false 將這個結果返回給表單，使用onsubmit接收，onsubmit = "return aaa()"

<form action="https://www.baidu.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" name="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">提交</button>
</form>
<script>
    function aaa(){
       var uname =  document.getElementById('username');
       var pwd= document.getElementById('input-password');
       var md5pwd= document.getElementById('md5-password');
       md5pwd.value=md5(pwd.value)
        //可以校驗判斷表單內容 true就是透過提交， false阻止提交
        return true;
    }
</script>

9.1 jQuery選擇器

css中的選擇器它全部都能用

$('p').click();//標籤選擇器
$('#id').click;//id選擇器
$('.class').click;//類選擇器

9.2滑鼠事件

事件

滑鼠事件，鍵盤事件，其他事件

    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<body>

mouse:  <span id="mouseMove"></span>
<div id="divMove">
點選這裡
</div>
<script>
    // $('p').click();//標籤選擇器
    // $('#id').click;//id選擇器
    // $('.class').click;//類選擇器
    // $('.class').onmousedown
    $(function (){
        $('#divMove').onmousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>

操作dom節點

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.7.1.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">javaScript</li>
    <li class="python">python</li>
</ul>
<script>
    $('.python').css("color","red");//css操作
    $('.python').text();//獲得值
    $('.python').text('設定值');//設定值
    $('#test-ul').html();//獲得值
    $('#test-ul').html('<strong>123</strong>');//設定值
</script>

元素的顯示和隱藏

$('.python').show()
$('.python').hide();

HTML基礎講解
2015-09-26
HTML
影片解碼基礎講解
2024-07-28
Redis 基礎特性講解
2019-05-28
Redis
安卓動畫基礎講解
2016-01-06
安卓動畫
音訊解碼基礎講解
2024-07-28
音訊
RESTful 架構基礎講解
2018-07-23
REST架構
字首和的基礎講解
2024-03-10
數學基礎講解-02
2024-09-07
ansible register基礎使用講解
2017-09-18
淺醉和的基礎講解
2024-03-10
漸進式載入 - 基礎講解
2017-03-23
資料庫基礎知識講解
2017-11-08
資料庫
半導體分立器件基礎知識講解
2024-05-11
PHP基礎之過濾器講解
2024-06-22
PHP過濾器
PHP基礎之物件導向講解
2024-08-25
PHP物件
Python線性優化基礎講解～
2019-04-01
Python優化
閃回查詢（基礎例項講解）
2013-08-24
javascript基礎
2019-06-27
JavaScript
詳解javascript拖拽（一）基礎介紹
2018-12-24
JavaScript
go 語言與區塊鏈基礎講解
2019-11-15
Go區塊鏈
webpack基礎講解及簡單搭建步驟
2020-11-17
Web
閃回資料庫（基礎例項講解）
2013-08-24
資料庫
閃回事務查詢（基礎例項講解）
2013-08-24
詳細講解DirectDraw程式設計基礎(轉)
2007-08-12
程式設計
Javascript基礎之-this
2019-01-16
JavaScript
JavaScript基礎原理
2018-11-09
JavaScript
JavaScript基礎10
2020-11-25
JavaScript
JavaScript基礎8
2020-11-21
JavaScript
JavaScript Promise(基礎)
2018-06-25
JavaScriptPromise
JavaScript基礎（一）
2017-02-22
JavaScript
JavaScript基礎（二）
2017-02-22
JavaScript
滲透測試網站安全基礎點講解
2019-09-23
網站
用最基礎的方法講解 Redux 實現原理
2019-03-01
Redux
前端基礎技術知識講解-面試圖譜
2019-01-05
前端面試
面試圖譜：前端基礎技術知識講解
2018-07-23
面試前端
『現學現忘』Docker基礎 — 25、Docker映象講解
2022-03-17
Docker
計算機基礎-常見的DOS命令講解
2017-02-15
計算機
Python基礎之錯誤和異常講解
2024-06-29
Python