JavaScript 入門

HuDu發表於2020-07-07
JavaScript

JavaScript

JavaScript 是指令碼語言

ECMAScript它可以理解為是JavaScript的一個標準
最新版本已經到 es6 版本~
但是大部分瀏覽器還只停留在支援 es5 程式碼上!
開發環境---線上環境，版本不一致

快速入門

引入JavaScript

1.內部標籤

<script type="text/javascript"></script>

2.外部標籤

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

基本語法

<script>
        //JavaScript嚴格區分大小寫
        //1.定義變數
        let score = 71;
        // let zz = 2;
        // alert(num)
        //2.條件控制
        if (score>60 && score<70){
            alert("60~70")
        }else if (score>70 && score<80){
            alert("70~80")
        }else {
            alert("other")
        }
        // console.log(score)在瀏覽器控制檯列印變數
        /**
         */

    </script>

資料型別

數值，文字，圖形，音訊，視訊。。。

js不區分小數和整數

變數

不能用數字開頭

number

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

字串

// 'abc' "abc"

布林值

//true false

邏輯運算

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

比較運算子

//= 賦值
// == 等於（型別不一樣，值一樣，也會判斷為true）
//=== 絕對等於（型別一樣，值一樣，結果為true）
  • 須知：
    //NaN===NaN，這個與所有的數值都不相等，包括自己
//只能通過isNaN(NaN)來判斷這個數是否是NaN
    浮點數問題
    console.log((1/3) === (1-2/3))
//結果為false
    儘量避免使用浮點數進行運算，存在精度問題！
    Math.abs(1/3-(1-2/3))<0.0000001
//一般這樣成立就認為相等

null 和 nudefined

null 空
undefined 未定義

陣列

java的陣列是一系列相同型別的物件，JavaScript不需要

//保證程式碼的可讀性儘量使用[]
let arr = [1,2,true,3,4,5,'hello',null]
new Array(1,2,true,3,4,5,'hello',null)

取陣列下標：如果越界了就會

undefined

物件

物件是大括號，陣列是中括號
每個屬性之間使用逗號隔開，最後一個不需要新增

let person = {
            name:"hudu",
            age:3,
            tags:['java','js','web','...']
        }

取物件的值

person.name
> hudu
person.age
> 30

嚴格檢查格式

<!--
'use strict'
前提：IDEA需要支援ES6語法
區域性變數建議都使用let去定義~
-->
<script>
    //嚴格檢查模式，嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題
    //必須寫在JavaScript的第一行
    'use strict'
    //全域性變數
    let i = 1;
    //ES6 let
</script>

資料型別

字串

1、正常字串我們使用單引號，或者雙引號包裹

2、注意轉義字元

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

3、多行字串

let msg = `hello
        world
        你好
        hi～`;

4、模版字串

let name = 'hudu';
let age = 3;
let msg2 = `你好呀，${name}`;

5、字串長度

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

6、字串可變性：不可變
7、大寫轉換

//注意這裡是方法，不是屬性
student.toUpperCase()
student.toLowerCase()
student.indexOf('t')//獲取指定的字元位置
student.substring(2)//從二個到最後，兩個參數列示第幾到第幾個，左閉右開

陣列

slice() 擷取 Array 的一部分，返回一個新陣列
push()    pop() 尾部
unshitf() 壓入頭部 shitf() 彈出頭部
sort()
reverse()
arr.concat([1,2,3]) 返回新的陣列
join('-') 列印拼接陣列，使用特定的字串連線
多維陣列
arr[[1,2],[3,4]]

物件

若干個鍵值對
JavaScript 中的所有鍵都是字串，值任意

 1、物件賦值
 2、使用不存在的屬性不會報錯，undefined
 3、動態刪減屬性 delete person.name
 4、動態新增屬性 person.email = 'sfasf@gmail.com'，直接給屬性新增值即可
 5、判斷屬性是否在這個物件中 'age' in person
 6、判斷屬性是否是這個物件自身擁有hasOwnProperty

流程控制

if(){}else if(){}else{}

while()
do{}while()

for()
for(var num in age){} num為索引
for(var num of age){} num為具體的值

forEach(function(value){})

Map 和 Set

<script>
    'use strict'
    let map = new Map([['tom',99],['jack',80],['alex',90]]);
    let msg = map.get('alex');
    console.log(msg);
    map.set('admin',123);
</script>

Set:無序不重複的集合

<script>
    'use strict'
    let set = new Set([3,1,1,1,1,1]);
    set.add(2);
    set.delete(1);
    console.log(set.has(3));
    console.log(Array.from(set));
</script>

iterator

for(let i of map)

函式

定義

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

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

arguments 是一個 JS 免費贈送的關鍵字;
代表，傳遞進來的所有的引數,是一個陣列!

//rest 只能寫在最後面
//獲取除了已經定義的引數外的所有引數
function aaa(a,b,...rest){
    console.log("a>"+a);
    console.log(rest);
}

變數作用域

function qj() {
    var x="x"+y
    console.1og(x);
    var y='y';
}

結果 : xundefined
說明：js 執行引擎，自動提升 y 的宣告，但是不會提升變數 y 的賦值；

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

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

全域性函式

全域性物件 window

var x='xxx';
alert(x);
alert(window.x); //預設所有的物件都繫結在window物件上

alter()這個函式本身就是window的變數
var x='xхх';
window.alert(x);
var old_alert = window.alert;
//o1d_alert(x);
window.alert = function (){
};
//發現alert() 失效了
window.alert(123);
//恢復
window.alert =old_alert;
window.alert(456) ;

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

規範

由於所有的全域性變數都會繫結到window上，如果不同的js檔案，使用相同的全域性變數，衝突—>如何減少衝突

//唯一全域性變數
let huduapp = {};

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

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

區域性作用域 let

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

常量 const

只讀變數

var PI = '3.14';
console.log(PI);
PI='123';//可以改變這個值
console.log(PI);


ES6中引入這個常量const
const PI='3.14';//只讀常量
console.log(PI);
PI='123';

方法

定義方法

方法就是把函式放在物件的裡面，物件只有兩個東西:屬性和方法

<script>
    let hudu = {
        name:'hudu',
        birth:1990,
        age:function () {
            let now = new Date().getFullYear();
            return now - this.birth;
        }
    }
</script>

this 代表什麼

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

let hudu = {
    name:'hudu',
    birth:1990,
    age: getAge
}

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

apply

在js中可以控制this的指向

getAge.apply(hudu,[])//this指向了hudu物件，引數為空參

內部物件

標準物件

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

Date

基本使用

let date = new Date();//Sun Jul 05 2020 12:49:42 GMT+0800 (China Standard Time)
date.getFullYear();//年份
date.getMonth();//月份 0~11
date.getDate();//天
date.getDay();//星期幾
date.getHours();//小時
date.getMinutes();
date.getSeconds();
date.getTime();//時間戳

console.log(new Date(1593924582331))//時間戳轉為時間

date.toLocaleString();//本地時間

JSON

格式

  • 物件都用{}

  • 陣列都用[]

  • 所有的鍵值對都是用key:value

    'use strict'
let user = {
 name:'hudu',
 age:30,
 sex:'man'
}
//物件轉化為JSON字串，{"name":"hudu","age":30,"sex":"man"}
let json_user = JSON.stringify(user)
//json字串轉化為物件，引數為json字串
let obj = JSON.parse('{"name":"hudu","age":30,"sex":"man"}');

    json字串和json物件區別

    var obj = {a:'helloa',b:'hellob'}
let json = '{"a":"hello","b":"hellob"}';

Ajax

  • 原生的js寫法 xhr非同步請求
  • jQuery封裝好的方法${“#name”}.ajax(“”)
  • axios請求

物件導向程式設計

什麼是物件

Java中

類：模板

物件：具體的例項

在JavaScript中

類：原型物件

物件：具體的例項

let student = {
    name:'hudu',
    age:20,
    run:function () {
        console.log(this.name+"run...")
    }
}

let xiaoming = {
    name:'xiaoming'
}

//小明的原型是student
//原型物件
xiaoming.__proto__ = student;

class繼承

class關鍵字是ES6引入的。

定義一個類，屬性，方法

<script>
    function Student(name) {
        this.name = name;
    }

    //給student新增一個方法
    Student.prototype.hello = function () {
        alert('Hello')
    }

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

繼承

class xiaoxue extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }

    myGrade(){
        alert('我是'+this.grade+'班小學生');
    }
}

let xiaohong = new xiaoxue('xiaohong',1)

本質：檢視物件原型

xiaohong
xiaoxue {name: "xiaohong", grade: 1}
grade: 1
name: "xiaohong"
__proto__: Student

原型鏈

操作 BOM 物件（重點）

BOM：瀏覽器物件模型

window

window 代表瀏覽器視窗

window.alert(1);
undefined
window.innerHeight
150
window.innerWidth
944
window.outerHeight
624
window.outerWidth
944

Navigator（不建議使用）

Navigator 封裝了瀏覽器資訊

window.navigator.appCodeName
"Mozilla"
window.navigator.appName
"Netscape"
window.navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
navigator.platform
"MacIntel"

大多數時候，不會使用navigarot，會被人為修改

不建議使用這些屬性來判斷和編寫程式碼

screen

screen.width
1440
screen.height
810

location

location 代表當前頁面URL資訊

hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload()//重新整理網頁

//設定新的地址
location.assign('https://www.bilibili.com/')

document

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

document.title
"嗶哩嗶哩 (゜-゜)つロ 乾杯~-bilibili"
document.title = 'hudu'

獲取具體的文件樹節點

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

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

獲取 cookie

document.cookie
""

劫持 cookie 原理
www.taobao.com

<script src="aaa.js">

</sript>

<!--惡意人員;獲取你的cookie上傳到他的伺服器~-->

伺服器端可以設定cookie：httpOnly

history

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

history.forward()
history.back()

操作DOM物件

DOM 文件物件模型

核心

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

  • 更新：更新Dom節點
  • 遍歷Dom節點：得到dom節點
  • 刪除：刪除dom節點
  • 新增：新增一個新的dom節點

要操作一個Dom節點，就不需要獲得這個Dom節點

獲得dom節點

//標籤
let h1 = document.getElementsByTagName('h1');

let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');

let children = father.children//獲取父節點下的所有子節點
father.lastChild;
father.firstChild;
p1.nextElementSibling;

這是原生程式碼，之後我們儘量使用jQuery();

更新節點

<body>
<div id="id1">

</div>

<script>
    let id1 = document.getElementById('id1')
    id1.innerText = 123;
</script>
</body>

操作文字

  • id1.innerText = 123;修改文字值
  • id1.innerHTML = '<strong>12345</strong>'可以極細HTML文字標籤

是覆蓋操作

操作js

id1.style.color = 'red'//屬性使用字串
id1.style.fontSize = '20px'//下劃線駝峰命名

刪除節點

刪除節點步驟，先獲取父節點，再刪除節點

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

<script>
    let father = document.getElementById('father');

    let self = document.getElementById(p1);
    let father1 = self.parentElement;
    father1.removeChild(self);

    // father.removeChild(p1);

</script>
father.children
HTMLCollection(3) [h1, p#p1, p.p2, p1: p#p1]
father.children[0]
<h1>標題一</h1>

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

插入節點

我們獲得了某個dom節點，假設dom節點是空的，我們可以通過innerText或者innerHTML就可以增加一個元素了。

但是這個dom節點如果已經存在元素了，我們就不能這麼幹，會產生覆蓋

追加操作

<p id="js">Java</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');


</script>

list.appendChild(js)
<p id="js">Java</p>

建立一個新的標籤

let js = document.getElementById('js');
let list = document.getElementById('list');

list.appendChild(js);//追加到後面

//通過JS建立一個新的節點
let newP = document.createElement('p');
// newP.setAttribute('id','newP');
newP.id = 'newP';
// newP.innerHTML = ''
newP.innerText = 'hello';
list.appendChild(newP);

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

//給body設定背景顏色，通過style方式
let body = document.getElementsByTagName('body');
// body[0].style.background = '#66ccff';

//通過新增css實現
let myStyle = document.createElement('style');
myStyle.innerHTML = 'body{background-color:#66ccff;}';
let head = document.getElementsByTagName('head')[0];
head.appendChild(myStyle);

insertBefore

let ee = document.getElementById('ee');
let js = document.getElementById('js');
let list = document.getElementById('list');
//包含他們的節點，insertBefore(newNode,targetNode);
list.insertBefore(js,ee);

操作表單

<form action="">
    <p>
        <span>使用者名稱：</span><input type="text" id="username">
    </p>
    <p>
        <span>性別</span>
        <input type="radio" name="sex" value="man">男<!--checked="true"-->
        <input type="radio" name="sex" value="woman">女
    </p>

</form>

<script>
    let input_text = document.getElementById('username');
    // input_text.value='1231231';

    let man = document.getElementsByTagName('input')[1];
    let woman = document.getElementsByTagName('input')[2];

    //對於單選，多選框等，value只能獲得值
    man.checked;//檢視返回結果，是否為true，true為選中
    // man.checked = true;//賦值
</script>

提交表單

MD5 加密密碼

<!--
表單繫結提交事件
onsubmit 繫結一個提交檢測的函式  true  false
將這個結果返回給表單使用onsubmit 接收
-->
<form action="#" method="post" onsubmit="return check()">
    <p>
        <span>使用者名稱：</span><input type="text" required placeholder="請輸入使用者名稱" id="username" name="username">
    </p>
    <p>
<!--        <span>密&nbsp;&nbsp;&nbsp;&nbsp;碼：</span><input type="password" id="password" name="password">-->
        <span>密&nbsp;&nbsp;&nbsp;&nbsp;碼：</span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="md5-password">
<!--    <input type="submit" value="註冊">-->
<!--    繫結事件 onclick 被點選-->
<!--    <button type="submit" onclick="check()">提交</button>-->
    <button type="submit">提交</button>
</form>

<script>
    function check() {
        let username = document.getElementById('username');
        let password = document.getElementById('input-password');
        let md5pwd = document.getElementById('md5-password');

        md5pwd.value = md5(password.value);

        //可以校驗判斷表單內容。true就是通過提交，false就是不通過
        return true;
        // console.log(username.value);
        // console.log(password.value);
        // //MD5演算法
        // // password.value = '********'
        // password.value = md5(password.value)
        // console.log(password.value);
    }
</script>

jQuery

<!--
公式：$(selector).action()
-->

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

<script>
    // let id = document.getElementById('test-jquery');
    // id.click();
    //選擇器就是css的選擇器
    $('#test-jquery').click(function () {
        alert('hello,jquery')

    })
</script>

選擇器

<script>
document.getElementsByTagName();
document.getElementById();
document.getElementsByClassName();

// jQuery
$('p').click();
$('#id1').click();
$('.class1').click();

</script>

文件工具站：jquery.cuishifeng.cn/

事件

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

<!--獲取滑鼠當前座標-->
mouse：<span id="mouseMove"></span>
<div id="divMove">
在這裡移動滑鼠試試
</div>

<script>
    //當網頁元素載入完畢之後，響應事件
    // $(document).ready(function () {
    //
    // })
    $(function () {
        $('#divMove').mousemove(function (e) {
            let x = e.pageX;
            let y = e.pageY;
            $('#mouseMove').text('x:'+x+'y:'+y);
            // console.log(e.pageX)
        })
    });
</script>

操作 dom

// document.getElementsByClassName('js')
$('#test-ul li[class=python]').text();//獲得值
$('#test-ul li[class=python]').text('hello');//設定值
$('#test-ul').html();

css 操作

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

元素的隱藏和消失

//相當於display:none
$('#test-ul li[class=python]').show();
$('#test-ul li[class=python]').hide();
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章