JavaScript DOM Programming Art (2nd Edition)-Comprehensive notes

1th Chapter JavaScript History 1.1 JavaScript origins

JavaScript was developed by Netscape company in collaboration with Sun Corporation.

JavaScript is an implementation of the ECMAScript standard, but in a general expression, the two refer to the same programming language.

1.2 DOM

DOM, the Document Object model, is a set of methods for abstracting and conceptualizing the contents of a document.

The DOM allows you to query and manipulate some of the actual content within a document.

1.3 Browser War 1.3.1 DHTML

DHTML, Dynamic HMTL, is a term that describes the combination of HTML, CSS, and JavaScript technologies. The implication behind it is:

Use HTML to mark Web pages as various elements;

Use CSS to set element styles and where they appear;

Manipulate pages and change styles in real time with JavaScript.

1.3.2 Conflicts between browsers

The difference between the DOM of the Netscape company and the Microsoft company's browser led to the difficult implementation of the DHTML technology at that time.

1.4 Setting standards

The "1th DOM Level 1" standard was completed in October 1998, and this standardized DOM allows any programming language to be used for any document written in any one of the markup languages. Control.

1.4.1 Outside of browser considerations

The DOM is an API (application programming Interface, application programming Interface) and is a basic agreement that has been recognized by all parties concerned.

The definition of the DOM is: "An interface that is independent of the system platform and programming language , where programs and scripts can dynamically access and modify the content, structure, and style of the document." ”

1.4.2 the end of the browser war

Due to the success of the Windows operating system, Netscape company lost. The war facilitated the eventual development of the DOM standard.

1.4.3 a new starting point

WebKit is an open-source Web browser engine used by Safari and Chrome, and its core Gecko with another open-source engine,--firefox, facilitates the gradual convergence of proprietary browser engines such as IE's core Trident to WEB standards.

1.5 Summary

Slightly.

2nd. JavaScript Syntax 2.1 prep work

There are two ways to use JavaScript:

Place the code

Save the code as a standalone file with the extension. js, and then add a label to the document's label

The best thing to do is put the<script>tag before the end of the HTML document,</body>before the tag.

The programming language is divided into two categories: explanatory type and compiler type. Languages such as Java or C + + require a compiler (compiler). A compiler is a program that translates source code written in high-level languages such as Java into files that are executed directly on a computer.

The explanatory programming language does not require a compiler, only the interpreter, and for JavaScript, it is generally the browser's responsibility to complete the interpretation and execution of the work.

2.2 Syntax 2.2.1 Statements

JavaScript scripts are written in a series of instructions called Statements (statement).

Each statement can be separated by a non-peer, and if multiple statements are to be placed on the same line, they must be separated by semicolons, and a semicolon is recommended at the end of each statement.

2.2.2 Notes

There are some informational or alert messages that need to be ignored by the interpreter directly, such as annotations (comment).

A single-line comment begins with a double slash//;

Multi-line annotations need to use and wrap the comment content/**/.

2.2.3 Variable

People call things that change (variable), such as a person's mood, age, and so on.

The operation of storing a value in a variable is called an assignment (Assignment).

JavaScript allows you to assign values directly to a variable without having to declare it beforehand, which is not allowed in many programming languages.

Requires that an "introduction" be made before any variable is used, called a declaration (declare).

In JavaScript, if the variable is not declared before it is assigned a value, the assignment automatically declares the variable. However, it is good practice to declare variables in advance, and also to influence the scope of variables and the advance of variable declarations.

Declaring a variable uses the var operator (the way it was before the ES6 standard). Other than that:

You can declare multiple variables at once with a single statement, using split between variable names,;

The Declaration and assignment of variables can be performed simultaneously;

Variable names are case-sensitive in JavaScript, and only letters, numbers, underscores, and dollar signs can be used in variable names, and the_$first character cannot be a number.

Variable names are typically named using camel case or using an underscore connection between words.

The data written directly in the code in JavaScript is called literal (literal), and the literal does not represent anything other than itself ... "It is it!" "Well ...

2.2.4 Data types

Some other languages require that you declare a variable's data type while declaring it, which is called a type declaration (typing).

The language in which the type declaration must be clarified is called a strongly typed (strongly typed) language, and JavaScript does not require a type declaration, so it is a weakly typed (weakly typed) language. This means that the data type of the variable can be changed at any stage.

The important data types in JavaScript are:

1. String

string type consists of 0 or more characters (0 are called "Empty Strings"), the string must be enclosed in quotation marks, single quotation marks can be quoted, generally recommended single quotes, and the entire script to be consistent, this is good programming habits.

If the string to be represented contains a single quotation mark, in order to prevent the interpreter from thinking that it is the end of the entire string, it is placed in double quotation marks, and vice versa. However, it is generally recommended to use the escape character to escape (escaping) characters with code meaning, and in JavaScript, to\escape characters with backslashes.

2. Values

The value (number ) type contains integers and floating-point numbers with any decimal places. A minus sign precedes-the value to indicate that the number is negative.

3. Boolean values

A Boolean (Boolean) type contains only two values--trueandfalse.

The Boolean value is not a string, and you should never enclose the Boolean value in quotation marks.‘false‘and the values are differentfalse.

Note: The book simply mentions three basic data types, without mentioning two other basic data types undefined and null, as well as the complex data type object.

2.2.5 Array

String, numeric, and Boolean values are scalar . If a variable is a scalar, it can have only one value at any time. If you want to store a set of values with a variable, you need to use an array .

An array is a set of values represented by a variable, and each value in the collection is an element of the array.

There are two ways of declaring an array:

With theArraykeyword, you can specify the number of initial elements of an array, that is, the length of the array.

The use of character literals, that is, using a pair of brackets to represent the array;

The operation to add an element to an array is called a fill (populating), and when the array is filled, the value of the new element and the position of the new element in the array are given, which is the subscript (index) of the element, and the subscript starts at 0. Each element in the array has a subscript, which must be enclosed in square brackets when using subscript.

The two methods mentioned earlier to declare an array can be populated with arrays at the same time as they are declared.

Array elements can hold any type of data, and the elements of the same array can hold different types of data, and if the elements of the array are saved in another array, the array is called a multivariate array , although the multivariate array is powerful, it is generally recommended to use objects to store complex data in arrays.

When the array is populated, only the value of the element is given, and its subscript is the default value, which is a traditional array, while the element is added with subscript and value at the time of padding, and the subscript is not a numeric value, which is called an associative array . The subscript is set to a string when the element is filled, and is actually the same as the operation that adds the property to the array.

Note: Associative arrays are actually similar to data in JSON format, but associative arrays are not recommended.

2.2.6 Object

Similar to arrays, objects use a name to represent a set of values. Each value of an object is a property of the object.

There are two ways of creating objects:

UseObjectkeywords;

Use a pair of curly braces to represent an object in a way that uses character literals.

To access, add, or modify an object's properties you can use a dot., or you can use brackets, and the property name inside the brackets must be a string, enclosed in quotation marks. You can declare objects and add properties to an object in a way that uses the object's direct amount, and the value of the property can be any data type.

2.3 Operation

The actions to calculate and process the data are called Operations (operation).

Arithmetic operators

Add+, subtract-, multiply*, and divide/operations are arithmetic operations (arithmetic operation), each of which must be done by the corresponding operator (operator), the operator is Some of the symbols that JavaScript defines for accomplishing various operations.

Various operations can be combined to avoid ambiguity or to increase the priority of operations, you can use parentheses to separate different operations.

Add 1 for a variable can be abbreviated++, the subtraction operation can also be so, and then review the front++or--back++or--the difference between:

Front++/--first calculation, after assignment;

Post++/--first assignment, after calculation.

This is to focus on the addition operator, when the two operands are numeric, the addition operation, if there is one operand is a string, the other operand is converted to a string and the first two operands are concatenated (concatenation) to a string.

Values or variables containing their own addition (or splicing)/subtraction operation after the assignment can be abbreviated to+=/-=.

2.4 Article statements

JavaScript uses conditional statements (conditional statement) to make judgments.

The most common conditional statement is a statement, and the conditionifmust be placed in aifsubsequent parenthesis, and the evaluation result of the condition is always a Boolean value, and the statement in curly braces executes only if the evaluation result of the given condition is thetruecase.

Ififthere is only one statement behind the statement, it can be done without braces, but it is not recommended.

2.4.1 Comparison Operators

Comparison operators include greater than>, less than<, greater than or equal to,>=less than or equal to<=, equal==, congruent===, unequal,!=and not congruent!==.

An equals sign=is an assignment operator, not a comparison operator, so do not use the error when the condition is judged, and if the assignment operator is used for conditional judgment, the result of the judging condition will ultimately depend on the converted Boolean value of the assigned variable.

The difference between equal/unequal and congruent/non-congruent is simply that the equality operator does not represent strict equality, and the type conversions of two operands occur when the comparison is strictly equal, requires that the data type and value are exactly equal to be returnedtrue, and that data type conversions do not occur when compared.

2.4.2 Logical operators

JavaScript allows you to combine the actions of a conditional statement. An operation that determines whether two or more conditions are established is called a logical comparison (operand).

The logic and operator are&&returned only if all of its two operands are truetrue.

A logical OR operator is||returned whenever one of the operands is truetrue.

The logical non-operator!can only be used for a single operand, and the result is to reverse the Boolean value returned by the operand.

2.5 Loop Statements

The loop statement can execute the same piece of code multiple times, as long as the given condition is still satisfied, the code contained in the loop statement is repeated, and the loop is stopped once the given condition return value is no longertrue.

2.5.1 While loop

The code contained in curly braces executes repeatedly as long as the given condition within the parentheses is evaluatedtrue, and the condition for stopping the loop is usually set in curly braces.

Do...while Cycle

Thewhiledifference with loops is that the code contained in curly braces executes at least once before the loop condition is evaluated, and then determines whether the loop condition is true or not.

2.5.2 for Loop

forLoops arewhilea variant of the loop.

forThe most common use of loops is to iterate over all the elements in an array, and in general, set the loop stop condition to be less than the maximum length of the arrayi < arr.length.

2.6 Functions

If you need to use the same piece of code multiple times, you can encapsulate them into a function (function), which is a set of statements that are allowed to be called at any time in your code, and each function is actually a short script.

In general, you need to make a definition of the function before calling them, and of course there are self-invoking anonymous functions in this two-like situation.

The function can receive incoming data and use the data to complete a predetermined operation, the data passed into the function is called a parameter (argument).

When you define a function, you can declare any number of arguments for it, and they need to be separated by commas, and you can use any one of the arguments passed in as normal variables inside the function.

The function can not only receive data, but also return data, return data using thereturnkeyword, and when the results are returned, the function will stop running.

Variable naming recommends using a glide line to separate words, while function naming recommends using the hump format, so that you can discern variables and functions at a glance.

Scope of the variable

The variables can be global or local.

Global variable can be referenced anywhere in the script, and global variables are scoped to the entire script.

A local variable (locally variable) exists only inside the function that declares it, and cannot be referenced outside of the function; the scope of a local variable is limited to a specific function inside.

When you refer to variable declarations earlier, you should use thevarkeyword to clarify the scope of the variable.vara variable declared without a keyword is a global variable, regardless of where the variable is declared in the script. With thevarkeyword, the variable becomes a local variable, unless it is not in a function.

function should behave like a self-sufficient script, when defining a function, be sure to explicitly declare its internal variables as local variables.

2.7 Objects

An object is a self-contained collection of data that can be accessed in two forms by the data contained in the object- property and method . An object is a data entity that is composed of several properties and methods:

A property is a variable that is subordinate to a particular object;

A method is a function that can be called only by a particular object.

To access the properties or methods of an object, you can use the dot number.

An instance (instance) is a specific entity of an object, and when an object is instantiated, the properties and methods of the object can be accessed.

Creating a new instance of a given object requires the use of anewkeyword.

In JavaScript, objects created by the user are called user-defined objects (user-defined object), whereas a series of pre-defined objects provided by a language are called built- in objects (native object).

2.7.1 Built-in objects

Common built-in objects are the array objects (arrays) mentioned earlier, as well as commonly used mathematical objects (math) and date objects (date), and so on.

all objects are instances of object objects.

Objects with abstractions are usually capitalized when they are named.

2.7.2 Host Object

There are some non-JavaScript-provided, but also pre-defined, objects that are provided by the runtime environment of JavaScript, which is called the host object .

For example, a Window object in a browser environment is not in the node. JS Environment. This book is mainly about a browser-provided host object--document object.

2.8 Summary

Slightly.

3rd. DOM3.1 Document: "D" in DOM

Refers to document, which is documentation. When you create a Web page and load it into a Web browser, the browser converts the Web document into a Document object.

3.2 Object: "O" in the DOM

Refers to an object, that is, objects. The Host object window is one of the most basic objects, which corresponds to the browser window itself, and the properties and methods of the object are generally collectively referred to as the BOM (Browser object model, the browser-objects-models).

3.3 Model: "M" in the DOM

Refers to the model, meaning "models", but the more descriptive description is "map", that is, maps. Simply understood, the map indicates the orientation of each node in the document and the relationship between them, and JavaScript can follow the map to access the corresponding elements.

The book uses the DOM tree to more clearly represent the structure of the Web page.

3.4 Nodes

node represents a connection point in a network, which is a collection of nodes.

The DOM is also a collection of nodes, with three main nodes in the DOM: element nodes, text nodes, and attribute nodes.

3.4.1 element Node

element node is the main component of the DOM.

The name of the tag is the name of the element, and in general, the tag is equal to the element.

3.4.2 Text node

In the document, the text node is always contained inside the element node, but not all element nodes contain text nodes.

3.4.3 Attribute Node

The attribute node (attribute node) is used to make a more specific description of the element nodes. Properties are always placed in the start tag, so attribute nodes are always included in the element node. But not all elements contain attributes.

3.4.4 CSS

Through CSS (cascading style Sheet, cascading style sheets) you can tell the browser how to display a document.

In CSS, the document content is also treated as a tree of nodes, and each element on the node tree inherits the style attributes of its parent element (inheritance).

To distinguish one or more elements from other elements, you need to use the ID or class attribute of the tag.

1. Class Properties

You can apply the class attribute arbitrarily on all elements. The class attribute is not unique.

2. ID attribute

The purpose of the ID attribute is to add a unique identifier to an element in the Web page, meaning that the id attribute is unique throughout the document.

3.4.5 getting elements

There are 3 DOM methods to get ELEMENT nodes, respectively, by element ID, by signature, and by class name.

1. Getelmentbyid

The method returns an object that corresponds to the element node that owns the specified ID attribute. It is a function specific to the Document object.

2. Getelmentsbytagname

The method returns an array of objects, each corresponding to an element in the document that has the specified label name.

This method allows a wildcard character to be*used as its argument, which returns all the label elements in the document as an array.

3. Getelmentsbyclassname

This method is a new method in the HTML5 DOM that accesses the element through the class name in the tag class attribute, which is an array of objects, each corresponding to the element in the document that has the specified class name.

JavaScript DOM Programming Art (2nd Edition)-Comprehensive notes