Simple finishing of the front-end JavaScript section

The Web front end has three layers:
HTML: Describing the structure of a page from a semantic perspective
CSS: From an aesthetic perspective, describe the style (beautify the page)
JavaScript: Describing behavior from an interactive perspective (improving the user experience)

Inventor: Brandon? Ike

JavaScript Primer Easy to learn
JavaScript is more friendly to beginners.
JavaScript has an interface effect (for example, the C language has only black characters on the white background).
JavaScript is a language of weakly variable types, and variables only need to be declared with Var. The declaration of variables in Java is defined according to the type of the variable.

JavaScript is the foreground language

The composition of JavaScript
The grammatical standard of ecmascript:javascript. Includes variables, expressions, operators, functions, if statements, for statements, and so on.
DOM: An API that operates on elements on a Web page. For example, let the box move, color change, Carousel diagram and so on.
BOM: An API for manipulating browser-part functionality. For example, let the browser automatically scroll.

Features of JavaScript
(1) Easy to use: can be written with any text editing tools, only the browser can execute the program.
(2) Interpretation Execution (interpretation language): Do not compile, line-by-row execution, without strict variable declaration.
(3) Object-based: Built in a large number of ready-made objects, writing a small number of programs can accomplish goals


# alert pops up "warning box"
Console.log ("") Console output
User input: Prompt () statement


Grammar rules
(1) JavaScript is not sensitive to line, indent, and space.
Note: Each statement ends with a semicolon, although the semicolon is not mandatory, but for the program to be compressed in the future, if not semicolon, after compression will not run.
(2) All the symbols are in English. such as parentheses, quotation marks, semicolons.
(3) JavaScript comments:
Single line://
Multiple lines:/* */

Variable
Variable names have a naming convention: they can only consist of English letters, numbers, underscores, dollar sign $, and cannot start with a number, and cannot be a JavaScript reserved word.

Types of variables
Numeric type: Number
String Type: String

Variable format conversion
parseint (): String to Number


Data type
Data types include: basic data types and reference data types

Basic data types
Number, String, Boolean, null, undefined
Reference data type
Function, Object, Arrray, String, Date


Operator
Assignment operators, arithmetic operators, comparison operators, special cases (string concatenation + string operations)

Assignment operators

Arithmetic operators

Comparison operators

Data type conversions
1. Converting a numeric type to a string type
2. Converting a string type to a numeric type
3. Any data type can be converted to a Boolean type

Process Control
If, If-else, If-else if-else
Logic with &&, logic, or | |
Switch
While loop
Do_while
For loop
    Double-FO cycle


Common built-in objects
Arrays Array

Common methods for arrays

Strings string

Date Day Object

Math Built-in objects

Function
    is to encapsulate some of the statements, and then execute them in the form of a call.
Role of the function:
    Write a large number of repeated statements in the function, and later when you need these statements, you can call the function directly, avoid duplication of work.
    Simplify programming and make programming modular.

Defined
Function name () {}
Call
function name ();

Pseudo-Array arguments

Event actions for Dom
Event JS is a language with event-driven core.
Three elements of an event: Event source, event, event driver.
    Event Source: The HTML tag that raised the subsequent event.
    Event: JS is already defined (see).
    Event drivers: Actions on styles and HTML. That is, Dom.

Common events

How to get an event source
var div1 = document.getElementById ("Box1"); Way one: Get a single label by ID
var arr1 = document.getElementsByTagName ("Div1"); Way two: Get the tag array by tag name, so there s
var arr2 = document.getelementsbyclassname ("hehe"); Method Three: Get the tag array through the class name, so there s

How to bind Events
Way one: Directly bind anonymous functions
Method Two: Define the function separately, then bind
Way three: inline binding

Event Driver

OnLoad Event
    The onload event is triggered when the page loads (text and pictures) are complete.


Dom Introduction
DOM: Document Object model. The DOM provides a structured representation of the document and defines how the document structure is accessed through a script. The purpose of this is to allow JS to manipulate HTML elements to make a specification.
The DOM is made up of nodes.

Parsing process
After the HTML is loaded, the rendering engine generates an HTML document in memory, generating a DOM tree, which getelementbyid the element nodes on the DOM. It then modifies the attribute of the element when it is manipulated.

Dom Tree (Everything is a node)

In HTML, everything is a node: (Very important)
ELEMENT node: HMTL tag.
Text nodes: text in tags (such as spaces between labels, line breaks)
Attribute node:: property of the label.
The entire HTML document is a document node. All nodes are object.

What DOM can do
Find objects (ELEMENT nodes)
Set the attribute value of an element
Set the style of an element
dynamically creating and deleting elements
Trigger response for Event: Event source, event, event driver

Fetching of DOM nodes
var div1 = document.getElementById ("Box1"); Way one: Get a single label by ID
var arr1 = document.getElementsByTagName ("Div1"); Way two: Get the tag array by tag name, so there s
var arr2 = document.getelementsbyclassname ("hehe"); Method Three: Get the tag array through the class name, so there s

Get parent Node
To get a single child node
Get all the child nodes

NodeType
NodeType = = 1 Represents an element node (label). Remember: The element is the label.
NodeType = = 2 indicates that the attribute node is
NodeType = = 3 is a text node


DOM node operations
Create a Node
New label (element node) = document.createelement ("tag name");

Inserting nodes
Way One:
The parent node. appendchild (new child node);
Way two:
Parent node. InsertBefore (The new child node, as the child node of the reference);

Delete a node
Parent node. removechild (child node);

Copy node (clone node)
The node to replicate. CloneNode (); The effect is the same without parameters and false with parameters in parentheses.
The node to replicate. CloneNode (true);

To set the properties of a node

Gets the property value of the node
Mode 1:
ELEMENT node. attributes;
Element node [properties];
Mode 2: (recommended)
Element node. getattribute ("attribute name");

Set the property value of a node
Mode 1 Example: (set the attribute value of the node)
MYNODE.SRC = "Images/2.jpg"//modify SRC property values
Mynode.classname = "Image2-box"; Modify the name of class

Mode 2: (recommended)
Element node. SetAttribute (attribute name, new attribute value);

Delete a node's properties
Element node. RemoveAttribute (attribute name);

InnerHTML, InnerText, value


Object-oriented in JS

Several common ways to create objects
1. Creating an object using object literals or objects
2. Factory mode Creation Object
3. Constructor pattern Creation Object
4. prototype schema creation Object


Timer
1, SetTimeout () 2, setinterval ()
SetTimeOut () executes only once after a specified time
SetInterval () cycle execution at specified time


Bom
Common built-in methods and built-in objects for BOMs
Popup System dialog box, open window, close window

Location Object
Property
HREF: Jump
Hash returns the contents of the # after the URL, containing #
Host hostname, including port
Hostname Host Name
Pathname the path part of the URL
The Protocol protocol is typically HTTP, https
Search query string

Methods of the Object
Location.reload (): Reload

Navigator Object
History Object


Client, offset, scroll series

Simple finishing of the front-end JavaScript section