Study notes on JavaScript

1. Function

1.1. Define function

Absolute value function

Definition method 1:

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

If there is no return, the function execution will also return the result (undefined)

Definition method 2:

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

function(x) {...} is an anonymous function, but the result can be assigned to abs, and the function can be called through abs

Call function:

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

Parameter problem: JavaScript can pass any number of parameters or no parameters

arguments //Represents all parameters passed in. It is an array

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

Problem: arguments contains all parameters. If you want to use extra parameters for additional operations, you need to exclude the existing parameters

**rest: * * a new feature introduced by ES6 to obtain all parameters except those already defined

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

The rest parameter can only be written at the end and must be identified with

1.2. Scope of variable

The variables defined by var have scope, and the declared variables in the function are local variables

It is assumed that the internal function variable and the external function variable have the same name

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

Function search variables start from itself and search from inside to outside. Assuming that there are function variables with the same name outside, the internal function will shield the variables of the external function

Promote the scope of the variable

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

Result: x undefined

Because the js execution engine automatically promotes the declaration of Y, but does not promote the assignment of variable y

Global function

Global object window

var x = 'xxx';alert(x);alert(window.x);//By default, all global variables are bound under the window object

The alert() function itself is also a window object

standard

Since all global variables are bound to the window, if different js files use the same global variables, there will be conflicts. How to reduce conflicts?

//Unique global variable var duan = {}// Define global variable Duan name = 'duanyuqi'; duan. add = function(a,b){    return a + b;}

Put all your code into the unique space name defined by yourself to reduce the problem of global naming conflict

Local scope let

ES6 let (block level scope) keyword to solve the problem of local scope conflict

Constant const

Modified constants are read-only and cannot be modified

1.3. method

Definition method

Method is to put the function in the object. The object has only two things: attributes and methods

var duan = {    name:'duanyuqi',    birth:1999,    age:function(){        var now = new date.get().getFullYear();        return now - this.birth;    }}duan.name;duan.age();

apply

You can control the direction of this in js

function getAge(){	var now = new date.get().getFullYear();    return now - this.birth;}var duan = {    name:'duanyuqi',    birth:1999,    age:getAge()};getAge.apply(duan,[]);//this points to duan, and the parameter is null

2. Internal objects

Standard object

typeof 123"number"typeof '123'"string"typeof []"object"typeof {}"object"

2.1.Date

Basic use

var now = new Date();now.getFullYear();now.getMonth();now.getDate();now.getDay();now.getHours();now.getMinutes();now.getSeconds();now.getTime();//Timestamp console log(new Date(1578106175991));// Convert timestamp to time

2.2.Json

Conversion of Json string and Js object

var user = {    name:"duanyuqi",    age:22,    sex:'male'}//Object - > JSON string var jsonuser = JSON stringify(user);// JSON string - > object var obj = JSON Parse ('"name": "duanyuqi", "age": 22, "sex": "male");

Differences between JSON and JS objects

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

2.3.Ajax

Native js writing xhr asynchronous request

jQuery encapsulated method $("name") ajax("")

axios request

3. Object oriented programming

class inheritance

class keyword, ES6 import

class Student{    constructor(name){        this.name = name;    }    hello(){        alert('hello');    }}var xiaoming = new Student("xiaoming");var xiaohong = new Student("xiaohong");xiaoming.hello();

4. Operate BOM object

BOM: Browser Object Models

window

Window stands for browser window

Navigator

Encapsulates the information of the browser

navigator.appName"Netscape"navigator.appVersion"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36"navigator.userAgent"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36"navigator.platform"Win32"

The navigator object is not used most of the time and will be modified artificially

screen

screen.width1920screen.height1080

location (important)

location represents the url information of the current page

host: "www.baidu.com"href: "https://www.baidu. COM / "protocol:" HTTPS: "reload: ƒ reload() / / refresh the web page replace: ƒ replace()location.assign('http://wormhole-dev.hsmob.com/#/groupManage/userGroup '/ / jump to a new address

document

Document represents the current page, HTML DOM document tree

document.title"Baidu once, you know"document.title = 'Prison oriented programming'"Prison oriented programming"

Get web cookie

document.cookie"BIDUPSID=A8193CF1CC6EABCC735EA8CCE768BFD9; PSTM=1619007674; BAIDUID=A8193CF1CC6EABCC4371C39116C66094:FG=1; MCITY=-%3A; BD_UPN=12314753; BAIDUID_BFESS=A8193CF1CC6EABCC4371C39116C66094:FG=1; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1625812690,1626420375,1626425693,1626837085; COOKIE_SESSION=95285_4_7_8_6_18_0_1_6_8_1_0_161530_161434_0_0_1626837189_1626837086_1626932518%7C9%23161393_52_1626837042%7C9; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BD_HOME=1; H_PS_PSSID=34303_33764_34272_31254_34004_34073_34092_34094_26350_34237; BA_HECTOR=21a1ah2480242g25if1gfkq2k0q"

Principle of hijacking cookie s

www.taobao.com

<script src="a.js"></script><!--a.js Contains document.cookie，Gets the name of the visitor cookie-->

The server can set a cookie: httpOnly

History (not recommended)

Browser history

history.back()histoey.forward()

5. Manipulate DOM objects

DOM: Document Object Model

core

A web browser is a DOM tree structure

Update: updating DOM nodes

Traversing DOM nodes: get DOM nodes

Delete: deletes a DOM node

Add: add an experience DOM node

To operate a DOM node, you must first obtain the DOM node

Get DOM node

Update node

Operation text

id1.innerText='456' Modify the value of the text id1.innerHTML='<strong>123</strong>' analysis HTML Text label

Operation CSS

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

Delete node

Step: first obtain the parent node, and then delete yourself through the parent node

Note: when deleting multiple nodes, children change from time to time

Insert node

When a DOM node is obtained, assuming that the node is empty, an element can be added through innerHTML. If there is an element on the node itself, it will be overwritten

Add

effect:

Create a new label to insert