Day03 JS Basics

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 (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):

////////////////////////
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 to 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
Clear Timer
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

Step Analysis:
1. Form
2. Determine event onsubmit ()
3. Verify user name and Password
4. Gets the object and value of the user name and password
5. Determines the content, when empty, gets the span element of the response
Show error message to span element
////////////////////////////////////////////////////////////
Note:
in 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 the
///////////////////////////////////////////////////////////////////////////////////////////////////
Event :
Common events:
Focus event:★  onfocus onblur
Form event: ★onsubmit       form using onchange change   drop-down box using
page Load event: ★onload
Mouse Event (mastering) onclick
Mouse event (learn) ondblclick: Double-click onmousedown: Press Onmouserup: Bounce Onmousemov E: Move onmouserover: hover onmouserout: Remove keyboard event (understanding) OnKeyDown: Press onkeyup: Bounce onkeypress: Press and hold

Understanding
Prevent default events from occurring  preventdefault
Block event propagation     Preventpropaganda
/////////////////////////
Case 3-interlaced color
Requirements:
a table, Change one color at a line
Technical Analysis:
Event: OnLoad
Get element: Dom action

Get element:
document.getElementsByTagName ("tag name"): Gets an element from the tag name ( Multiple) returns an array

Step analysis:
1.html when the table loads to determine the event onload
2. Write functions
A. Get 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 tr    var arr=document.getelementsbytagname ("tr");    2. Judge Odd even add different style traversal array for    (var i=1;i<arr. length;i++) {        if (i%2==0) {             Arr[i].style.backgroundcolor = "#FFFFCC" ;        } else{            arr[i].style.backgroundcolor= "#BCD68D";}}    }                    

View Code

//////////////////////////
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 Name//////////////////////////////////dom (Document Object model) to all of the check boxes below

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

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. Gets the option selected on the left select object. selectedoptions--Array
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
Requirements: When the province is selected, dynamic queries are currently saved in all cities and then displayed in the city's dropdown selection
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"];
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

///////////////////////////////////////////////////////////////////////////////////////////////
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:
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:
New Boolean (value | variable);
Boolean (value | variable);
Non-0-digit non-empty string non-empty object turns true
Number
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.

Day03 JS Basics