Basic elements of a web page:

1. HTML is to build the page structure

2. CSS beautify the page

JavaScript adds behavior to the page

JavaScript is an interpreted language and does not need to be compiled. It can be directly inserted into an HTML page and interpreted by the browser. This is probably the first interpreted language that Java programmers will encounter, so how is it different from the compiled language we’re used to?

Interpreted execution: An object program executed on the spot by the interpreter based on input data without generating any.

Compile execution: Source code is compiled into the target language (e.g., bytecode files) and then loaded and executed by the corresponding execution program (JVM).

There is an interesting explanation on Zhihu:

The equivalent of cooking all the dishes at once and then eating them on the table; Explaining execution is the equivalent of eating hot pot, one at a time.

If the simple consideration of eating speed (execution efficiency) must be stir-fried dishes (execution efficiency) faster, because you can eat directly and hot pot has to be cooked.

The introduction of JavaScript

1. Call directly from an event

<input type="button" value="I am the button." onclick="alert('helloworld1')">
Copy the code

2. Import using the script tag

<! -- Can be written in any position, recommended to write in the head tag -->
<script type="text/javascript">
    alert('helloworld2')
</script>
Copy the code

In daily development, we usually define a.js file, which defines the methods used in a unified file, and introduces the file if it needs to be called.

<! Script must have close tags and cannot be closed. (Will cause a runtime error) -->
<script src="first.js"></script>
Copy the code

Basic data types

JavaScript defines seven data types, divided into “basic” and “reference” types:

  • Basic types: String, Number, Boolean, Symbol, Undefined, Null
  • Reference type: Object

String

In JavaScript, the Unicode encoding method is adopted, and both Chinese and English have 2 characters.

For specific coding details, see:

Like Java, primitive data types do not have operable methods, and wrapper types are defined to facilitate manipulation of them. So when you call a method, you essentially create an object call that wraps the class, returns the value, and then destroys the object:

var msg = "hello";
msg = msg.substring(1.3);

var obj = new String("hello");
// Truncate string: header not tail
msg = obj.substring(1.3);
obj = null;
Copy the code

Number

In JavaScript, there is only one numeric type, Number. Double-precision floating-point numbers are 64-bit, so a Number of type Number takes 8 bytes.

Operations on double – precision floating – point numbers may result in loss of precision. See also:

Three methods of numerical conversion:

Number() can be converted to any type, and is called in the operator:1) if it isBooleanValue,trueandfalseWill convert to, respectively1and0. (2If it is a numeric value, it is simply passed in and returned. (3) if it isnullValue, return0. (4) if it isundefinedTo return toNaN. (5If the string is a string, follow the following rules: If the string is not a purely numeric string after truncating the leading and ending whitespace, the result is returnedNaN. If the string contains only numbers (including those preceded by a plus or minus sign), it is converted to a decimal value, that is,"1"To1."123"Turns out to be123, and"011"Turns out to be11(leading zeros are ignored); If the string contains a valid floating-point format, such as1.1", converts it to the corresponding floating point value (also ignoring leading zeros); If the string contains a valid hexadecimal format, such as"0xf", convert the others to decimal integer values of the same size; If the string is empty (does not contain any characters), it is converted to0; If the string contains characters other than those in the above format, the other is converted toNaN. (6If it is an object, the valueOf() method of the object is called and the returned value is converted according to the previous rules. If the result of the transformation isNaN, the toString() method of the called object, and then converts the returned string value again according to the previous rules.parseInt() Parses not only pure numeric strings, but also partial numeric strings that begin with a number (non-numeric strings are removed during conversion). (1) If the first character is not a numeric character or a minus sign,parseIntPhi will returnNaN; In other words, withparseInt() Converting an empty string returnsNaN. (2) If the first character is a numeric character,parseInt() continues parsing the second character until all subsequent characters are parsed or a non-numeric character is encountered. (3) If the string begins with "0x" followed by a numeric character, it is treated as a hexadecimal integer. (4) if the string begins with"0"Followed by a numeric character, it is treated as an octal integer. (5)parseIntThe () function adds a second argument to specify the base (that is, how many bases) to use when converting. (6)parseIntWhen the () function parses a floating point string, the round down method is used.parseFloat() andparseInt(),parseFloat() Can also parse partial numeric strings that begin with a number (non-numeric strings are removed during conversion). withparseInt() The difference is,parseFloat() Can convert strings to floating point numbers; But at the same time,parseFloat() accepts only one argument and can only be processed10Hexadecimal string. (1The first decimal point in the string is valid, but the second decimal point is invalid, so the string after it is ignored. (2) If the string contains a number that can be parsed as an integer (without a decimal point, or with zeros after the decimal point),parseFloat() returns an integer.Copy the code

Boolean

Boolean variables are often generated during operations and exist in three types of operators:

1. Relational operator (> < <= >=)

There is no need to say more about numerical comparison. The non-numerical case is mainly analyzed here:

  • If both operands are strings, the corresponding charCode is compared one by one until the size is separated.
  • If the operand is of some other basic type, Number() is called to convert it to a numeric value, and then the comparison is made.
  • NaN returns false when compared to any value.
  • If the operand is an object, the valueOf method of the object is called (if there is no valueOf, the toString method is called), and finally the result is used to perform the comparison according to the previous rules.

2. The equality operator (==! = = = =! = =)

= = and! The = operator first converts operands and then compares their equality:

  • If one of the operands is Boolean, it is converted to a value by calling Number() before comparing equality;
  • If one operand is a string and the other is a value, the string is converted to a value by calling Number() before equality is compared;
  • If one operand is an object and the other is not, the valueOf() method of the object is called and the resulting primitive type values are compared according to the previous rules.
  • Null and undefined are equal. Null and undefined cannot be converted to any other value until equality is compared.
  • If one of the operands is NaN, the equality operator returns false and the unequal operator returns true;
  • If both operands are objects, their pointer addresses are compared. The equality operator returns true if both refer to the same object; Otherwise, return false.

= = = and! The biggest feature of the == operator is that it does not convert operands before comparing them. Their operating rules are as follows:

  • === : Returns true if the types and values are the same, false otherwise.
  • ! == : Returns true if the type is different or the value is not equal, otherwise returns false.

3. Boolean operators (!)

Often used to convert a variable to a Boolean type:

console.log(!!0) //false
Copy the code

Symbol

The e purpose of Symbol is to create a unique value, I don’t care what the value is, I just need to make sure it doesn’t duplicate. Unlike the other basic types, Symbol has no corresponding wrapper type, which means that Symbol is not an object itself, but a function.

 var s1 = Symbol(a);Copy the code

Note that the Symbol function argument is only a description of the current Symbol value. Therefore, the return value of the Symbol function with the same parameter is not equal.

Undefined

A variable that has been declared and not yet assigned a value is created in its original state.

Null

An object has been artificially reset to an empty object instead of a variable’s original state. If an object needs to be released, the variable is set to NULL, which means that the object has been emptied and is currently invalid.

Type judgment

Typeof is an operator that follows an expression to the right and returns its data type. The result returned is a string (all lowercase) of that type, including number, Boolean, symbol, string, object, undefined, and function.

Note that using typeof to determine null returns object.