JS First Impressions

Source: Internet
Author: User
Tags script tag setinterval tag name xml dom document

Js:
Javascript:

Scripting language, explanatory, object-based, event-driven
JS composition:
ECMAScript (Syntax)
BOM (Browser object model)
DOM (Document Object model)
HTML and JS Integration:
Mode 1: Internal programming JS
<script type= "Text/javascript" >js code </script>
Mode 2:
External has a separate JS file suffix name:. js
in HTML Import the
<script src= "JS path" through the SRC attribute of the script ></script>
Note:
Once the src attribute is used, the JS code in the script tag body will no longer execute.

Variable:
var variable name = initialization value;
Data type:
Original type (5 types):
1.Undefined
2.Null
3.String contents in quotation marks
4.Number
5.Boolean

by typeof can determine whether a value or variable is of the original type, and if it is primitive, it can also be judged to belong to that type.
typeof Variable | value
Reference type
Operator:
relational operator:
Both sides of the value are strings, compare ASCII code
on both sides are numbers, and Java like the
side is a number, again is a string form of numbers, you can compare
One side is the number, and again the normal string can be compared to the value is always false
equal sex operator:
"==66" true
"666" ===666 false
JS statement
If while for and Java as

------------------------------------------------------
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:
Mode 1:

Function name (argument list) {Functional 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

Event:
OnClick Click
OnSubmit form Submission
The onload page was loaded successfully or the element was loaded successfully (this is also the reason why the JS code is written inside the body of the head body or under the tag element)

Event and Function bindings
Mode 1:

Event properties by Element
<xxx onxxx= "function name (parameter list)" >
Mode 2:

Distributing events
document.getElementById ("id value"). Onxxx=function () {...};
document.getElementById ("id value"). The name of the onxxx= function;
---------------------------------

Timer function:

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
3. Get elements
4. Operating elements

Property:

is the 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:
1.window: Window
2.location: Location information (address bar)
3.history: History
4.window Object Description:
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.
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
Location.href; Get URL
Location.href= "..."; set URL equivalent to a tag

--------------------------------------------------

History
History: Historical
Back ();
Forward (): Forward
★go (int)
Go (-1) is equivalent to back ()
Go (1) equivalent to forward ()
-----------------------------------------
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

----------------------------------
Prevent default events from occurring
Prevent event Propagation
-----------------------------------------------
Array:
Common Properties:
Length: The lengths of the arrays
--------------------------------

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
-------------------------------------------------------------------------
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

-------------------------------------------------------------------
Reference type Summary:
string number in the original type Boolean is a pseudo-object, you can call the appropriate method
Array: Array
String:
Syntax:
New String (value | variable);//Returns an object
String (value | variable);//return original type
Common methods:
substring (start,end): [Start,end)
substr (start,size): Start by intercepting several

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

Replace (): Replace
Split (): Cut

Common properties: Length
Boolean:
Syntax:
New Boolean (value | variable);
Boolean (value | variable);
Non-empty string non-0 numeric non-null object to True
number
Syntax:
New # (value | variable);
Number (value | variable);
Note:

null====>0
fale====>0 true====>1
String number =====> corresponding number
Other Nan
Date:
New Date ();
Common methods:
tolocalstring ()
RegExp: Regular expression
Syntax:
Direct volume syntax/regular expression/parameter
Direct volume syntax/regular expression/

New RegExp ("Regular expression"
New RegExp ("Regular expression", "parameter")
parameter:
I: Ignore case
G: Global
Common method:
Test (): Return a value of Boolean
Math:
Math. Constants | method
Math.PI
Math.random () [0,1)

Global:

decodeURI () decodes a coded URI. The
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 First Impressions

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.