Three skills a front-end engineer must master:

  • Describes the content of a web pageHTML(Page structure)
  • Describes the style of a web pageCSS(Page Style)
  • Describing the behavior of a web pageJavascript(Actions of page elements)

Javascript Language core

The core is that there are few apis defined for text, arrays, dates, and regular expression operations, but this API does not include input and output capabilities. Input and output functions (complex features like networking, storage, and graphics) are provided by the hosting environment to which Javascript belongs

Expressions and statements

  • An expression simply evaluates a value but does nothing. It does not change the state of the program.
  • Statements do not contain a value (or values that we do not care about), but they change the running state of the program.

When a function and an object are written together, a function becomes a method.

    let a = {
        fn:function(){
            console.log('This function is the method! ')}}Copy the code

Window. The onload and document. Ready

Window. onload is a function that executes after the DOM document tree is loaded and all files are loaded. Document.ready does not have this method in the native. In the jquery$(document).ready can only appear once, and $(document).ready can appear multiple times

Javascript is a case sensitive language.

Javascript ignores Spaces between identifiers in your program

annotation

  • Any text after “//” at the end of the line is ignored by Javascript as a comment. (One-line comment)
  • The text between “/ *” and “*/” is also treated as a comment, which can be written across lines,But you can't have nested comments(Multi-line comment)

Directly measured

Direct quantities are data values that are used directly in a program, such as the following:

    12
    1.2
    "hello world"
    'hi'
    true
    false
    /javascript/gi
    null
Copy the code

Identifiers (variables) naming conventions

Javascript identifiers must be named using numbers, letters, underscores, and $symbols, and cannot start with a number.

Keywords and reserved words (cannot be used as variable names, not in current version, may be used in later versions)

Concrete implementation of Javascript

Implementations may define unique global variables and functions, and each particular Javascript runtime environment (client, server) has its own list of global properties.

Optional semicolon

Javascript doesn’t fill semicolons at all newlines: Javascript fills semicolons only when the code can’t parse properly without a semicolon.

There can be no line breaks between return, break, and continue and subsequent expressions. If line breaks are added, the program will report errors only in very special cases, and the program will be very inconvenient to debug

Types, values, and variables

Javascript data types fall into two categories: primitive (primitive data types) and object (reference data types). Primitive types include numbers, strings, and Booleans.

There are two special primitives in Javascript: null and undefined

An object is a collection of properties, each of which consists of a name/value pair (the value can be a raw value, such as a number, string, or object).

A normal Javascript object is an unordered collection of “named values.” Javascript also defines a special object —- array (representing an ordered collection of numbered values)

Javascript also defines another special object, the —- function. A function is an object with executable code associated with it that runs the executable code by calling the function and returns the result of the operation.

If a function is used to initialize (using the new operator) a newly created object, we call it a constructor

Only null and undefined in Javascript do you have the value of a method.

In Javascript, strings are immutable: you can access the text anywhere in the string, but Javascript does not provide a way to modify the text content of a known string.

Variables that are not declared in any function are called global variables and are visible anywhere in a Javascript program.

All numbers in Javascript are represented as floating point values

When the result of a number operation exceeds the maximum number that Javascript can represent (an overflow), the result is a special infinity value, denoted by infinity in Javascript.

Zero divided by zero is meaningless, and the result of this divisible operation is also a non-numeric value, denoted by NaN

A non-numeric value in Javascript is special in that it is not equal to any value, including itself. That is, there is no way to tell if the variable x is a NaN by x==NaN. Instead, use x! The result of the expression is true if and only if x is NaN.

Due to rounding errors, the approximation between 0.3 and 0.2 is not actually equal to the approximate difference between 0.2 and 0.1.

A string is an immutable, ordered sequence of 16-bit values, each character usually coming from the Unicode character set.

A string literal can be split into a number of lines, and each line must end with a backslash (\). Neither a backslash nor a line terminator is a literal literal.

One of Javascript’s built-in features is string concatenation. If the plus (+) operator is applied to numbers, it means that two numbers are added. But applying it to a string represents string concatenation, concatenating the second character after the first. Strings are fixed in Javascript, and methods like replace () and toUppercase () return a new string; the original string itself is not changed.

Boolean value

  • The following values are converted to false
    • undefined
    • null
    • 0
    • 0
    • NaN
    • “”

Global object

  • When the javascript interpreter starts (or whenever any Web browser loads a page), it creates a new global object and gives it a defined set of initial properties.
  • At the very top of the code —- Javascript code —- that is not in any function can reference global objects using the Javascript keyword this.
  • If the code declares a global variable, the global variable is an attribute of the global object.

Packaging object

  • When a method or property of a String is used, Javascript converts the String value to an object by calling new String(), which inherits the String method and is used to handle references to the property. Once the attribute reference ends, the newly created object is destroyed. (It is not implementationally necessary to create or destroy the temporary object, but the process looks like this.)
  • When running this code, the value of t is undefined. The second line creates a temporary string object, assigns its len attribute to 4, and destroys the object. The third line creates a new string object from the original (unmodified) string and attempts to read its Len attribute, which does not exist. The expression evaluates to undefined.
    var s = "test"
    s.len = 4;
    var t = s.len // undefined
Copy the code
  • Temporary objects created when accessing properties of strings, numbers, or Bools are called wrapper objects.
  • Generally, wrapping objects is just an implementation detail, not a particular concern. Because string, number, and Boolean attributes are read-only, new attributes cannot be defined for them. They are therefore distinct from the object.
  • Javascript converts wrapped objects to their original values when necessary, so the objects S, N, and B in the previous code often (but not always) behave like the values S, N, and B. The “==” equals operator treats the original value and its wrapper object as equal, but the “===” congruence operator treats them as unequal. The Typeof operator lets you see the difference between the original value and its wrapped object.
    var s = "test",n=1,b=true
    var S = new String(s)
    var N = new String(n)
    var B = new String(b)
Copy the code

Cannot become primitive values and mutable object references

  • All methods in a string that appear to return a modified string actually return a new string value
  • Comparison of raw values is a comparison of values: they are equal only if their values are equal
  • If you compare two separate strings, Javascript considers them equal if and only if their lengths are equal and the characters in each index are equal.
  • A comparison of objects is not a comparison of values: even if two objects contain the same attributes and the same values, they are not equal. Two arrays whose index elements are exactly equal are not equal.
  • Object values are references, and comparisons of objects are comparisons of references: they are equal if and only if they refer to the same base object.
  • If you want a copy of an object or array, you must explicitly copy each property of the object or each element of the array.
    function equalArrays(a,b){
        if(a.length! =b.length)return false;
        for(var i = 0; i < a.length; i++){if(a[i]! ==b[i])return false;
            return true}}Copy the code

Type conversion

    x+""String (x) + Number (x) + Number (x) + Number (x) X // is equivalent to Boolean (x) note the double exclamation markCopy the code
  • The toString() method defined by the Number class can accept an optional parameter that represents the radix of the conversion; if this parameter is not specified, the conversion rule will be decimal based.
    var n  = 17;
    binary_string = n.toString(2);
    octal_string = "0" + n.toString(8);
    hex_string =  "0x" + n.toString(16)
Copy the code
  • ToFixed () converts a number to a string based on the specified number of digits after the decimal point; it never uses exponential notation.
  • If a string is passed in through the Number () conversion function, it tries to convert it to an integer or floating-point direct. This method can only convert to decimal numbers, and there are no illegal trailing characters.
  • Both parseInt and parseFloat skip any number of leading whitespace, parse as many numeric characters as possible, and ignore the rest. NaN is eventually returned if the first non-space character is an illegal numeric direct quantity.
  • ParseInt can accept a second optional argument that specifies the cardinality of the conversion. The valid value ranges from 2 to 36.
  • The object-to-boolean conversion is simple: all objects (including arrays and functions) are converted to true. The same is true for wrapping objects.

Different specific toStrings

  • Object: Returns a string like “[object object]”
  • Array: Converts array elements to a string, and adds commas between the elements to merge them into a result string.
  • Function: Returns the representation defined by the implementation of this function.
  • Date: Method returns a date and time string that is readable (and parsed by Javascript).
  • Re: Converts a RegExp object to a string that represents the direct quantity of a regular expression.

Object-to-string conversion in Javascript

  • The toString () object calls the toString () method, returns a raw value, converts the value to a string, and returns the string result. If the toString () method does not return a raw value, Javascript calls the valueOf () method. The return value is the original value, which is converted to a string. Return this string. Neither method yields a raw value, so a type error exception is thrown.

Object to number conversion in Javascript

  • Js does the same thing, except it tries the valueOf () method first. Using the toString() method. Convert to a number.

Variable scope

  • The scope of a variable is the area in the program source code that defines the variable. Global variables have global scope and are defined anywhere in the Javascript code. Variables declared inside a function, however, are defined only inside the function. They are local variables whose scope is local. Function parameters are also local variables that are defined only within the body of the function.
  • In the function body, local variables take precedence over global variables of the same name. If a local variable declared in a function or a function parameter has the same name as the global variable, the global variable is overwritten by the local variable.
  • Although you can write code in a global scope without the VAR statement, you must use it when declaring local variables
  • There is no block-level scope in Javascript. Javascript uses function scopes instead: variables declare that their function body and any nested function body are defined.
  • Javascript function scope means that all variables declared inside a function are always visible inside the function body.
  • When a variable is declared using var, the property created is not configurable, meaning that the variable cannot be deleted by the DELETE operator.
  • Javascript automatically creates a global variable if you don’t use strict mode and assign a value to an undeclared variable. Variables created in this way are normal configurable properties of the global object and can be deleted.
  • Javascript allows references to global objects using the this keyword, but there are no methods to reference objects stored in local variables.
    var truevar = 1;
    fakevar = 2;
    this.fakevar2 = 3;
    delete truevar  // falseThe variable is not deleted. Delete fakevar //true
    delete this.fakevar2  // true
    
Copy the code