JS Learning Summary

Built-in support type. Its interpreter is known as the JavaScript engine, a part of the browser, widely used in the client's scripting language

Reference type://////////////////////

JS: Event-driven functions
function definition Format:
Mode 1:
Function name (parameter) {
function body;
}
Note: Functions do not declare return value types
Parameter does not require an add type
When the function is called
Function name (parameter)

JS event and Function binding:
Mode 1:
Event Properties via tags <xxx onclick= "function name (parameter)" ></xxx>
JS Get element:
Mode 1:
var Obj=documnet.getelementbyid ("id value");
Gets the value of the element
Obj.value;
Gets the contents of the element's label body
obj.innerhtml;

Definition of the function:
Mode 1:
Function name (parameter) {
function body;
}

Mode 2:
var function name =function (parameter) {
function body;
}

JS event and Function binding:
Mode 1:
Event Properties via tags <xxx onclick= "function name (parameter)" ></xxx>
Mode 2:
Distributing events to elements
document.getElementById ("id value"). Onclick=function (parameter) {...}
document.getElementById ("id value"). onclick= function Name
Attention:
The element should exist in memory in order to dispatch events
A. Place the JS code for mode 2 at the bottom of the HTML page
B. The JS code onload event in run mode 2 after the page load succeeds.
Timer:
var id=setinterval (code, number of milliseconds): Performs a function cycle every specified number of milliseconds
var id=settimeout (code, milliseconds): Executes only once after the specified number of milliseconds is delayed
To clear the timer:
Clearinterval (ID);
Claertimeout (ID);
String Object
A string of the original type is a method that can directly invoke a string class object for an object
SUBSTRING (0,endindex);
Operator:

Comparison operators: > >= < <= If both numbers are the same as Java if the number is generally numeric, and the other side is a string form of a number, the string form of the number is converted to a number in the comparison 3> "2"
If the number is general and the other side is a string, return a false 3> "Hello"
When both sides are strings, compare ASCII
Equal sex operator = = = = = =
= =: Only the same value is judged
= = = Not only to determine whether the same, but also to determine whether the same type
Statement:
The IF statement is the same as Java
The for while statement is the same as Java
Switch is the same as Java (the difference is that the switch is followed by a string. You can also follow a variable)

Attention:
var can omit suggestions do not omit
One line ends with a semicolon, the last semicolon can be omitted, and it is recommended not to omit

Js

JavaScript a literal translation scripting language, which is a dynamic type, a weak type, a prototype-based language, and an object-based event-driven function
The composition of JS:
ECMASCRIPT:JS basic syntax (Specify keyword operator statement function, etc...)
BOM: Browser Object model
DOM: Document Object Model
Role:
Modify the contents of an HTML page
Modify the style of the HTML
Complete validation of forms

Integration of HTML and JS
Mode 1: Internal programming JS
<script type= "Text/javascript" >JS code </script>
Mode 2:
The external has a separate JS file suffix name:. js
Import in HTML via the SRC attribute of the script
<script src= "JS path" ></script>
Attention:
Once the SRC attribute is used, the JS code in the script tag body is no longer executed.
Variable declaration in JS:
var variable name;
Variable name = initialization value;
var variable name = initialization value;
Data type:

Original type (5 kinds)

Undefined

Null
String Quote-Enclosed content
Number
Boolean

The typeof operator allows you to determine whether a value or variable is of the original type, and if it is of the original type, he can also determine the original type
typeof variable | value;
if the variable is null, use the value of the TypeOf popup object

Using the return value of typeof
Undefined-If the variable is of type undefined
Boolean-If the variable is of type Boolean
Number-If the variable is of type number
String-If the variable is of type string
Object-If the variable is a reference type or a Null type
Reference type
Operator:
Relational operators:
Both values are strings and the ASCII code is compared
Both sides are numbers, just like Java
One side is a number, and the number is in string form, you can compare
One side is the number, and again the normal string can be compared to the value is always false
Equal-sex operators
"==66" true
"666" ===666 false
JS's statement
If and for is the same as Java
//////////////////
Get element:
var Obj=document.getelementbyid ("id value");
Gets the value property of the element
var Val=document.getelementbyid ("id value"). Value;
Set the Value property of an element
document.getElementById ("id value"). value= "SDFSDF";
Gets the label body of the element
var Ht=document.getelementbyid ("id value"). InnerHTML;
Set the label body of an element
document.getElementById ("id value"). Innerhtml= "SSSs";

To define a function:
Method 1:function Function name (argument list) {function Body}
Mode 2:
var function name =function (argument list) {function Body}
Attention:
function declaration without declaring a return value type
Do not write parameter types on parameter list
Ends the method by return and returns the value
JS in the event:
Common events:
Click: onclick
Form submission: OnSubmit added on form form onsubmit= "return function name ()" Note that the return value of the function is a Boolean type
Page loading: onload

Event and Function bindings
Method 1: Pass the element's event properties
<xxx onxxx= "function name (parameter list)" >
Mode 2: Dispatch events
document.getElementById ("id value"). Onxxx=function () {...};
document.getElementById ("id value"). The name of the onxxx= function;
/////////////////////////////////
Case 1-timed pop-up ads
Demand:
After opening the page for 4 seconds, display the ad, 2 seconds later, the ad is hidden. Stop for 2 seconds and continue to show.
Technical Analysis:
Timer
Timer (Bom-window object)
SetInterval (code, number of milliseconds): Cycle execution
SetTimeout (code, milliseconds): Only one time after the delay of a long event.

Clear Timer
Clearinterval (ID):
Cleartimeout (ID):
Step Analysis:
1. Determine the event
2. Writing functions
A. Getting elements
B. Manipulating elements
////////////////////////
1.html page, first hide the ads
2. Page Load Success Event onload
3. Writing functions
Timer:
Action elements:
document.getElementById ("")
Manipulating CSS Properties
document.getElementById ("id"). Style. Property = "Value"
Properties: CSS Property CSS properties have "-" for example: Backgroud-color
If you have "-" only need to delete the "-", the first letter after the upper case can be
Attention:
As long as the properties and methods of the Window object, you can omit the window
Window.onload equivalent to OnLoad
Window.setinterval () equivalent to SetInterval ()
////////////////////
BOM (Browser object model) Summary
All browsers have 5 objects
window: Windows
Location: Positioning information (address bar)
History: Historical
The Window object is detailed:
If the document contains a frame (frame or iframe label), the browser creates a Window object for the HTML document.
and create an additional window object for each frame.
Common Properties:
The other four objects can be obtained through window
Window.location equivalent domain location
Window.history equivalent to History
...
Common methods
message box
Alert ("...."): Warning Box
Confirm ("Are you sure you want to delete?"): OK Box return value: Boolean
Prompt ("Please enter your name"): Input box return value: what you entered
Timer
Set timer
SetInterval (code, number of milliseconds): Cycle execution
SetTimeout (code, milliseconds): Only one time after the delay of a long event.

For example:
SetInterval (showad,4000);
Serinterval ("Showad ()", 4000);

Clear Timer
Clearinterval (ID):
Cleartimeout (ID):
Open and close
Open (URL): On
Close (): Off
/////////////////////////
Location: Positioning information
Common Properties:
HREF: Gets or sets the URL of the current page (location information)

Location.href; Get URL
Location.href= "..."; set URL equivalent to a tag
//////////////////////
History: Historical
Back ();
Forward (): Forward
★go (int)
Go (-1) is equivalent to back ()
Go (1) equivalent to forward ()
//////////////////////////////////////
Case 2-form check Plus
Demand:
Tip message does not use a popup box, append the information behind the text box
Technical Analysis:
Determine when the event form is submitted onsubmit
When the text box loses focus onblur
Writing functions
Get element
document.getElementById ("id value");
Manipulating elements (getting the value of an element, manipulating the label body, manipulating the label Value property)
/////////////////
Step Analysis:
1. Forms
2. When the form is submitted, determine the event onsubmit ()
3. Verifying the user name and password
4. Get the user name and password of the object and value
5. Determine the content, when it is empty, gets the span element of the response
Show error message to span element
////////////////////////
Attention:
In the method (function ()) This refers to the current element (the current DOM object)
For example:
<input type= "text" name= "username" id= "username" onblur= "Losefocus (this.value)" >
Method:
function Losefocus (obj) {
alert (obj);
}
/////////////////////////////
Summary of events:
Common events:
Focus Event: ★
onfocus
Onblur
Form event: ★
OnSubmit
onchange Change
Page Load Events: ★
OnLoad

Mouse events (Master)
OnClick
Mouse events (Learn)
OnDblClick: Double-click
OnMouseDown: Press the
Onmouserup: Bounce Up
OnMouseMove: Mobile
Onmouserover: hover
Onmouserout: Move out
Keyboard events (understanding)
OnKeyDown: Press the
OnKeyUp: Bounce Up
onkeypress: Hold
////////////
Binding events:
Mode 1:
Element's Event Properties
Mode 2:
Distributing events
///////////////////
Know
Prevent default events from occurring
Prevent event Propagation
/////////////////
Case 3-Interlaced color change
Demand:
A table, one color at a line
Technical Analysis:
Event: OnLoad
Get element: DOM manipulation
///////////////
Get element:
document.getElementById ("id"): Gets an element by ID
document.getElementsByTagName ("tag name"): Gets an element (multiple) from a tag name returns an array
Array:
Common Properties:
Length: The lengths of the arrays
////////////////////////
Step Analysis:
1.html table when loading to determine event onload
2. Writing functions
A. Getting elements (all TR elements)
B. Operation (if the current line is even, add a style, if odd, add another style)
////////
Page loaded successfully
Onload=function () {
1. Get all the TR
var arr=document.getelementsbytagname ("tr");
Alert (arr);
alert (arr.length);

2. Judge odd even to add different styles to iterate over an array
for (Var i=1;i<arr.length;i++) {
if (i%2==0) {
Arr[i].style.backgroundcolor= "#FFFFCC";
}else{
Arr[i].style.backgroundcolor= "#BCD68D";
}
}

}
//////////////////////////
Case 4: Select All or do not select all
Step Analysis:
1. Click event onclick to determine the top of the event check box
2. Write the function: Keep all checkboxes and the topmost check box state consistent
A. Get top this check box checked state through the checkbox's Checked property
B. Get additional checkboxes and set their checked properties to
Elements can be obtained from the following two scenarios
Document.getelementsbyclassname (): You need to add the class attribute to all of the following check boxes
Document.getelementsbyname (): You need to add the Name property to all of the following check boxes

//////////////////////////////////
Dom (Document Object model)
When the browser receives the HTML code, the browser loads all the code into memory, forming a tree (the document tree)
Nodes (node)
Document node Documents
Elements node Element
Attribute node attribute
Text node
Get node:
Other nodes can be obtained through document:
Common methods:
document.getElementById ("id value"): Gets a specific element
document.getElementsByTagName ("tag name"): Gets an element (multiple) from a tag name
Document.getelementsbyclassname (Value of class attribute): Gets a class of elements (multiple) through the class attribute
Document.getelementsbyname ("Value of the Name property"): Gets a class of elements (multiple) through the Name property
Set gets the Value property of the Get node
Dom object. Value; get
Dom object. value= ""; setting
Sets or gets the label body of the node
Dom object. InnerHTML; get
Dom object. innerhtml= ""; setting
Gets or sets the Style property
Dom object. Style. Properties; get
Dom object. Style. property = ""; set
Gets or sets the property
Dom object. Properties
/////////////////////////
For htmldom operation if the JS or Htmldom find not to find the XML DOM
Working with documents in the XML DOM document
Operations on elements in an element of the XML DOM
AppendChild (DOM object): Add a child under an element
//////////////////////////////////////
Case 5-Select left or right.
Demand:
Technical Analysis:
1. Determine the event, button's Click event
2. Write the function:
Click to move a single | multiple:
A. Get the option selected on the left select object. options--Array
Iterates over an array to determine whether the option object is selected. Selected
B. Append it to the right drop-down selection
Rightselect object. appendchild (option);
Click All to move all
A. Get all the options on the left
B. Append the past
///////////////////////
Case 6-Provincial linkage
Demand:
When the province is selected, dynamic queries are currently saved in all cities and then displayed in the city's dropdown selection
Technical Analysis:
Array:
////////////////////////
Array:
Grammar:
New Array ();//Length of 0
The new Array (size);//The specified length of the
New Array (e1,e2.); /Specify Element
Unofficial
var arr4=["AA", "BB"];
Common Properties:
Length
Attention:
The array is mutable
Array can hold any value
Common methods: (Learn)
Store value: Action on content
Pop (): Play The last one
Push (): Insert to Last

Shift (): Delete the first
Unshift (): Inserting into the first place
To print an array:
Join (delimiter): Prints the elements in the array according to the specified delimiter
Stitching arrays:
Concat (): Joins two or more arrays and returns the result.
Operation of the structure:
Sort ();
reverse (); reverse
////////////////////////
Step Analysis:
1. Add the Value property as an index to the array in the drop-down option of the province
2. Initialize the city
3. When choosing a province, the onchange event
4. Write the function,
Gets an array of cities of objects by getting the index This.value
Iterate through the array, assemble option for each value inside the array to add to select

//////////////////////////////
Summary of reference types:
The string number Boolean in the original type is a pseudo-object, and you can call the appropriate method
Array: Arrays
String:
Grammar:
New String (value | variable);//Returns an object
String (value | variable);//return original type
Common methods:
SUBSTRING (start,end): [Start,end)
SUBSTR (start,size): A few steps backward from the index to the specified value

CharAt (Index): Returns the character at the specified position.
IndexOf (""): Returns the index where the string is located

Replace (): replacement
Split (): Cut

Common Properties: Length
Boolean:
Grammar:
New Boolean (value | variable);
Boolean (value | variable);
Non-0-digit non-empty string non-empty object turns true
Number
Grammar:
New Number (value | variable);
Number (value | variable);
Attention:

Null====>0
Fale====>0 true====>1
The number of the string =====> corresponding to the number
The other Nan
Date:
New Date ();
Common methods:
Tolocalstring ()
REGEXP: Regular Expressions
Grammar:
Direct volume syntax/regular expressions/parameters
Direct-volume syntax/Regular expression/

New RegExp ("Regular expression")
New RegExp ("Regular expression", "parameter")
Parameters:
I: Ignore case
G: Global
Common methods:
Test (): The return value is Boolean
Math:
Math. Constants | method
Math.PI
Math.random () [0,1)

Global:
★
decodeURI () decodes a coded URI.
encodeURI () encodes the string as a URI.

Number (): Cast to Digital
String (): Turns into a string

parseint (): Attempt to convert to an integer
Parsefloat (): Attempt to convert to decimal

Eval () computes the JavaScript string and executes it as script code.

JS Learning Summary