Preface: Share my learning process from a young white cross industry to the front end, will continue to update. For zero foundation children shoes is full of dry goods oh 😜 are learning and want to learn and slow to take action friends, blunt duck ~~~

First know JS

Definition: lightweight weak scripting dynamic Programming language, with certain logic and Programming ideas (object-oriented []=>Object Oriented Programming> Programming language common Programming ideas: object-oriented/procedural

  • Object-oriented:
    • 1) Java
    • 2) c + +
    • 3) PHP
    • 4) c# (.net)
    • 5) javascript
    • 6)…
  • Process-oriented:
    • 1) C language

Two, the main component of JS

1) ECMAScript: JS core syntax; 2) DOM (Document Object Model) is a document object model, which is used to manipulate some methods and attributes of the DOM elementsCopy the code

Three, js introduction of three ways

Finally, the code can be ~~~ 😺

1. Inline introduction (via event attributes)

<body> <div onclick="alert('1')">Copy the code

2, inline introduction

<script>
  alert('1')
</script>
Copy the code

Note: Inline is when js code is wrapped in a ‘script’ tag, and the tag can be placed anywhere, but if you put it inside the head and manipulate the DOM element, you won’t get the DOM element. The solution will be shared later when it is updated to get the element method

3. Introduction of external chain

1) create an XX.html file 2) create an XX.js file 3) import it in an HTML file with the link tag

1.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > <! - ~ ~ here ~ ~ -- -- > < link rel = "stylesheet" href = "1. Js" > < / head > < body > < / body > < / HTML >Copy the code

1.js

alert('1')
Copy the code

4. Common debugging methods

Console.log () prints alert() pop-up informationCopy the code

Variables and data types

1, variables,

Definition: A variable is a container for storing values. The value could be a number used for summing up, or a string in a sentence. A variable is unique in that the value it holds can be changed.

var average=80;
average=90;
console.log(average)   //90
Copy the code

1-1. Six ways to create variables

Var declares a variable function declares a function let declares a variable (ES6) const declares a constant (ES6) Value cannot be changed Class class (ES6) import Module imports based on ES6Copy the code

1-2. Variable naming conventions

The name must contain digits, letters, underscores (_), and $(-), but cannot start with a number. 4. The name must be semantic: small camel name for example: myName Large camel name for example: myName Underline name for example: my_nameCopy the code

2. Js data type

2-1. Raw data Type (Basic data type)

2-1-1, number Indicates the number

A, definition: integer, decimal, negative number, NaN (not A number)……

B. Convert other data types to number

Number( ) Number("1px") //NaN Number("") //0 Number(true) //1 Number(false) //0 Number(null) //0 Number(undefined) //NaN Number ({}) / / NaN Number ([]) / / 0 Number 1 Number ([1]) / / / / NaN ([1, 2])Copy the code

Summary of rules for converting other data types to numbers:

1, string to number: empty string: 0 Number: number contains non-valid number: NaN 2, Boolean value true: 1 false: 0 3, null: 0 4, undefined: NaN 5, reference data type: ToTring () is implicitly called, converting it first to a string and then to a number if it is an ordinary object.toString ()Copy the code

ParseInt (string, base)

Converts a string to a specified base number. The value is an integer ranging from 2 to 36. From left to right, stop converting if you encounter an insignificant number, or NaN if the first one is an insignificant number.

ParseFloat (string, base)

Convert to floating point, you can look up the decimal point. From left to right, the conversion stops when it encounters any non-significant digits other than the decimal point

C, NaN is never equal to any data, including itself. Therefore, isNaN is the only method to determine whether data is valid or not

NaN==NaN======> false
Copy the code

D, determine whether a data is a valid data: isNaN

It returns a Boolean value, a significant number if the result is false, and a non-significant number if the return value is true. If it is not a numeric type, call the Number method first and then check

isNaN(1)==>false; isNaN("2")===> false; isNaN(true)===>false; isNaN(false)===>false; isNaN(null)===>false; isNaN(undefined)===>true; isNaN({'name':'lili'})=>true; IsNaN ([1, 2]) = > true isNaN ([1]) = > falseCopy the code

2-1-2. String The value is a character string

A, definition: A character enclosed in single or double quotation marks is A string

Gets the length of the string: length

var a="hello";
console.log(a.length)==>5
Copy the code

Index: Each character has a subscript, called an index, which starts at 0

  • First character index: 0
  • Last character index: [variable].length-1
  • Get the character corresponding to the current index position: [variable][index value], for example: A [0]
Var a="hello" console.log(a[0])===>"h" obtains the first character console.log(a.length-1) obtains the index value of the last character console.log(a[A.length-1]) obtains the last characterCopy the code

String addition, subtraction, multiplication and division

In addition to mathematical operations, it is possible to concatenate strings. In case of subtraction, multiplication, and division, the string is converted to the number data type before calculation

var a="xiaohui"; console.log(a+null); ====>"xiaohuinull" console.log("6"*"3")===>18 console.log("6"/2)===>3 console.log("6"-2)===>4Copy the code

2-1-3, Boolean Indicates the Boolean value

A, definition: only two values: true\false

B. Force other values to Boolean types

  • Boolean()
  • ! [Value] ———– the value is reversed
  • !!!!! [value] ———– equivalent to Boolean ()

C. Summary of rules for transferring Booleans from other data types:

There are only the following five values, which when converted are false, and the rest are true: 0 NaN null "" undefinedCopy the code
Boolean("16px")
Boolean("0")
Boolean("null")
Copy the code

2-1-4, NULL, and undefined

A. Similarities:

• All basic data types are stored in stack memory and denote empty or null

B. Differences:

• undefined: The variable is declared but not assigned a value. The default value is undefined

• NULL: INDICATES a variable that may point to an object in the future, but the spatial address is not yet determined. The variable can be assigned to null, or the reference to the object can be released

C. Application of specific scenes in the future:

Null is an empty pointer to an object: 1. When we are not sure of the data type of a variable, we can assign the value to null and then assign the value to it. If we want to clear the spatial address of an object, we can set null to undefined, where there should be a value but there is no definition of undefined: When a function is called with a parameter, but no argument is passed. When a function is called with a parameter, no return value is set. When a function is called with a parameter, no argument is passedCopy the code
var num; console.log(num); //undefined var obj={"name":"xiaohui"} console.log(obj.age)===>undefined function total(n,m){ console.log(n); //undefined } total() function total1(n,m){ var total=n+m } var a=total1(n,m); console.log(a)=======>undefinedCopy the code

2-1-5, symbol only

The Symbol() function returns a value of type Symbol, which has static attributes and static methods. Each Symbol value returned from Symbol() is unique.

const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');

console.log(typeof symbol1);
// expected output: "symbol"

console.log(symbol2 === 42);
// expected output: false

console.log(symbol3.toString());
// expected output: "Symbol(foo)"

console.log(Symbol('foo') === Symbol('foo'));
// expected output: false
Copy the code

“BigInt” and “2-1-6” can be any large integer.

There is a range of pure numbers in JS

You can define a BigInt by adding “n” to an integer literal, such as 10n, or by calling the function BigInt().

const theBiggestInt = 90071992547499999n; const biggest = BigInt(90071992547499999); / / ↪ 9007199254740991 nCopy the code

2-2. Reference data types

2-2-1. Object Indicates the Object data type

A, definition: multiple groups of key-value pairs are wrapped in braces, and attributes are separated by “commas”

B. Grammar:

Var obj={Attribute name 1: attribute value, attribute name 2: attribute value...... } var obj={ "name":"xiaohui", "age":18 }Copy the code

C. Attribute name and value

• Attribute name: The name used to describe a feature or feature (also known as a key, key)

• Attribute value: The specific value of this attribute (also known as value, value)

• Collectively called key-value pairs

D. Basic operations: add, delete, change and search

  • 1. [Obtain] : obtain the attribute value
    • Property names of objects are usually in string format (and can be numeric), and property values can be any type of data
    • Object. Property name
    • Object [‘ property name ‘]

    Note: If the object does not have the property name, the resulting value is "undefined".

var obj={
   "name":"xiaohui",
   "age":18
}

console.log(obj.name);
console.log(obj["name"])
Copy the code
  • 2, [add, change]

If the property name does not exist in the original object, it is added, if it does, it is modified

var obj={ "name":"lili", "age":18 } obj.name="dawei"; ====> modify obj.sex=" male "===== add console.log(obj)Copy the code
  • 3. [Delete]
  • Delete delete object completely [” property name “]
  • Obj [” attribute name “] =null;
var obj={
   "name":"xiaohui",
   "age":18
}

delete obj["age"];
obj.name=null;
console.log(obj);
Copy the code
  • 4, think
var obj={
    name:"xiaohui",
    age:18
}
var name="changfu";
console.log(obj.name);
console.log(obj["name"]);
console.log(obj[name]);
Copy the code
  • 5. Attribute names are numeric

The property name of an object can only be a number or string, not obj if it is a number. Uncaught SyntaxError: Unexpected number; // Syntax error

var obj={ name:"xiaohui", age:18, 0:100 } console.log(obj[0]); ===>100 console.log(obj.0); ====>Uncaught SyntaxError: Unexpected numberCopy the code

Js operating mechanism (stack memory and operation mode of different data types)

The memory in the stack

When the browser loads the page and runs the code:

  • Every time a page is opened, two pieces of memory are allocated from the computer’s memory bar: heap and stack.
  • Heap memory:
    • It mainly holds values that reference data types
  • Stack memory:
    • Provide an executable environment for code
    • Stores values for the base data type

2, think

var a=12;
var b=a;
console.log(b);
var obj1={"name":"lili","age":12};
var obj2=obj1;
obj2.age=18;
console.log(obj1.age);
Copy the code

3, analysis,

1, when the browser opens the page, it will divide into two parts: heap memory and stack memory:

  • Stack memory functions:

    • 1. Provide a runnable environment for JS
    • 2. Store values of basic data types

  • Heap memory functions:

    For reference data types, objects store key-value pairs, and functions store the entire function as a string

2. Code is executed from top to bottom (there was a variable promotion phase before, which will be shared later)

==== Basic data types: stored in stack memory and operated by value ==== Reference data types are complex, stored in heap memory and operated by reference addressCopy the code

3. Three steps of assignment operation:

  • To create value
  • Re-create a variable
  • Finally, associate the created variable with the value

exercises

1.

var a={
        n:12
      }
var b=a;
b={
    n:13
  }
console.log(a.n); 
Copy the code

2,

var obj={
    n:10,
    b:obj.n*10
}
console.log(obj.b);
Copy the code

3,

Var ary1 = [3, 4]; var ary2=ary1; ary2[0]=1; Ary2 = [4, 5); ary2[1]=2; ary1[1]=0; console.log(ary1,ary2);Copy the code