HTML Study Notes (JavaScript) No. 4, Study Notes No. 4
The JavaScript statement sends a command to the browser. The statement is used to tell the browser what to do. The statement is separated by semicolons. Note: semicolons are optional. Sometimes they are not separated by semicolons.
JavaScript is executed in programming order.
Identifier:
JavaScript identifiers must start with letters, underscores, or dollar signs
JavaScript keywords cannot be used.
JavaScript is case sensitive.
JavaScript ignores multiple spaces.
JavaScript variables:
A variable is a "Container" for storing information, such as var x = 10;
Data Type
String, number, boolean, array, object, null, and undefined
You can clear variables by assigning null values.
Var string = "fdjkaf"
Var flag = true;
Var arr = [];
Var arr = new Array ();
Operator number:
Arithmetic: +,-, *, %,/++ ,--
Assignment operator: =, + =,-=, * =,/=, % =
String operation
Comparison OPERATOR: =, = (the types must be the same ),! = ,! ==( The types must be different), >,<,>=, <=
Logical operators: &, | ,!
Conditional operators: What is the relationship between a and B? Condition 1: Condition 2;
Example>
<P> I = 100, j = 10; I + j =? </P>
<P id = "sumid"> </p>
<Button onclick = "mysum ()"> result </button>
<Script>
Function mysum (){
Var I = 100;
Var j = 10;
Var m = I + j
Document. getElementById ("sumid"). innerHTML = m;
}
</Script>
The conditional statement if... else is the same as the switch and C language. Do not forget to write break in the switch statement to judge the interruption.
For Loop:
For (var I = 0; I <7; I ++ ){
}
There are other forms:
Var I = [1, 2, 3, 4, 5, 6];
Var j;
For (j in I ){
Traverse elements in I
}
The while and do... while loops are the same as the C language. Jump statements: break, continue, return, and JavaScript Functions are the same as C functions.
JavaScript exception Capture:
Try {
Abnormal code block
} Catch (err ){
Exception Handling
}
Throw can create custom errors. throw can directly throw exceptions without catch.
JavaScript event listening:
OnClick Click Event
OnMouseOver
OnMouseOut mouse removal event
OnChange text content change event
OnSelect text box selected event
OnFocus cursor aggregation event
OnBlur move the cursor
OnLoad web page loading event
OnUnload
JavaScript DOM object
Html dom: When a webpage is loaded, the browser creates a Document Object Model (Document Object Model) for the page)
DOM operation HTML:
Change all HTML elements, attributes, CSS styles, and all events on the page to respond-> change the HTML output stream: Do not use the document after the document is loaded. write (). this will overwrite the previous document
Element search: You can find HTML elements by id or HTML elements by Tag name.
Change HTML content: Use properties-> innerHTML
Change HTML attributes: use attribute-> document. getelementbyid. attribute = new attribute
DOM EventListener:
Method>
AddEventListener (); specifies the element to add the event handle
RemoveEventListener (); remove the event handle added by the method
Event stream> describes the order in which events are received on the page.
Event bubbling-> received by the most specific element, and then gradually spread to the node (document) of the least specific element)
Capture events-> the least specific node receives events first, and the most specific node should receive events at last
Event processing:
HTML event processing-> directly add to the HTML Structure
DOM0-> assign a function to an event handler attribute
DOM2-> addEventListener ("event name", "event processing function", and "Boolean value ");
The values of Boolean values have different meanings: true event capture and false event bubbling.
RemoverEventListener (); is an event listener.
For IE browser, the IE event handler is attachEvent detachEvent.
Event object: an object is generated when a DOM event is triggered.
Event object (common) attributes and common methods
1. type: Obtain the Event type
2. target obtains the event target.
3. stopProgragation () prevents event bubbles
4. preventDefault () blocks default event Behavior
JavaScript Object:
All things in JavaScript are objects: strings, values, arrays, functions, etc.
Each object has attributes and Methods. JavaScript allows custom objects.
Custom object->
1. Define and create an object instance
2. Define an object using a function and create a new object instance.
E. g.1
People = new Object ();
People. name = "";
People. age = "";
E. g.2
People = {name: ""; age :"";};
E. g.3
Function people (name, age ){
This. name = name;
This. age = age;
}
Temp = new people ("xxx", 30 );
A String object in JavaScript. There are many methods for string operations: length (), indexOf (), match (), repelace ("original parameter ", "content to be modified ")
ToUpperCase (), toLowerCase ()
String to array
E.g.
Var str2 = "hello, shuai, ge ";
Var s = str2.split (","); // split str2 into arrays by commas
Date object: Date object is used to process Date and Time
Obtain the date of the current day
There are also many methods for Array objects: contact () merges arrays.
Sort () sort push () end append element reverse () array element flip
A. sort () is sorted in ascending order by default.
A. sort (function (a, B ){
Return a-B; // Ascending Order
})
A. sort (function (a, B ){
Return B-a; // sort in descending order
})
Math object abs (), round (), max (), min ()
DOM object control HTML
Common methods->
GetElementById ()
GetElementByName () get name
GetElementByTagName ()
** (ByName and ByTagName obtain an array set with the same name tag)
GetAttribute () Get element attributes
SetAttribute () set element attributes
ChildNodes ()
ParentNode () access the parent node
CreateElement () Create an element node
CreateTextNode () create a text node
InsertBefore () insert Node
RemoveChild () delete a node
OffsetHeight: The webpage size does not contain the scroll bar, followed by the corresponding settings of the height and width.
ScrollHeight webpage size
Example
1. dynamically Insert elements
Function addElement (){
Var body = document. body;
Var input = document. createElement ("input ");
Input. type = "button ";
Input. value = "button ";
Body. appendChild (input );
}
2. Get the webpage size
Var w = document. body. offsetWidth |
Document.doc umentElementWidth;
3. Create and insert nodes
Fuction insertNode (){
Var div = document. getElementById ("div ");
Var node = document. getElementById ("pid ");
Var newnode = document. createElement ("p ");
Newnode. innerHTML = "dynamically create a P element ";
Div. insertBefore (newnode, node );
}
JavaScript browser object:
The window object is the core of BOM, and the window object refers to the current browser window.
All JavaScript global objects, functions, and variables are automatically members of the window object.
The global variable is the property of the window object.
The global function is a window object method.
Even the document of html dom is one of the properties of the window object.
Window object size-> window. innerHeight internal height/width of the browser, innerWidth
Window method open (), close () open/close the window
JS browser object-timer
Timing events-> using JavaScript, You can execute code after a set interval, instead of immediately executing the code after the function is called. This is called a timing event.
Timing Method->
The specified setInterval () interval does not stop executing the specified code in milliseconds.
The clearInterval () method is used to stop the preceding method.
SetTimeout () suspends a specified number of milliseconds and then executes the Specified Code
The clearTimeout () method is used to stop the preceding method.
E.g.
Var mytime = setInterval (function (){
Time ();
}, Delay time in milliseconds)
Function time (){
Var d = new Date ();
Var t = d. toLocalTimeString ();
Document. getElementById ("ptime"). innerHTML = t
}
JS browser object-History Object
Window. history object contains a set of historical URLs of the browser
Histroy Method
Back () is the same as clicking back in the browser
Forward () is the same as clicking the button in the browser.
Go () to enter a page in history
Location object
The window. location object is used to obtain the url of the current page and redirect the browser to the new page.
Location Object Attributes
Location->
Hostname: The domain name of the web host.
Pathname: returns the path and file name of the current page.
Port returns the port of the web host.
Protocol returns the web protocol used.
The href property returns the url of the current page.
The assign () method loads new documents.
Screen Object->
The window. screen Object contains information about the user's screen.
Screen. availWidth available screen width
Screen. availHeight available screen height
Screen. Height screen Height
Screen. Width screen Width
The above attributes can be used for screen adaptation.
Details about JS object-oriented
E.g.
How to create a class-"
Function People (){
}
People. prototype. say = fucntion (){
}
How to inherit-"
Fucntion Student (){}
Student. prototype = new People ();
JS class Encapsulation
(Fucntion (){
Fucntiuon People (){
}
Window. People = People; // this way, the outside world passes through the top of the window
Layer access asks People objects
}())
Function Person (){
Var _ this = {};
_ This. say = fucntion (){
Alert ("nihao ");
}
Return _ this;
}
The meaning of the above Code: through the method Person, an empty _ this object is created inside it, and then a method in its object is defined through fucntion, finally, the created _ this object is returned, so that an object is created.
