JavaScript Statements issue commands to the browser. The function of a statement is to tell the browser what to do with a semicolon, the split between statements is a semicolon, note that semicolons are optional, and sometimes you see that they are not separated by semicolons.
JavaScript is executed in a programmatic sequence.
Identifier:
JavaScript identifiers must start with a letter, underscore, or dollar sign
JavaScript keywords are not available
JavaScript is very sensitive to case
JavaScript ignores multiple whitespace cases
JavaScript variables:
Variables are "containers" for storing information such as: Var x=10;
Data type
String, number, Boolean, array, object, NULL, and undefined
You can clear a variable by assigning a null value
var string= "Fdjkaf"
var flag=true;
var arr=[];
var arr=new Array ();
Operation Symbols:
Arithmetic: +,-, *,%,/++,--
Assignment operator: =,+=,-=,*=,/=,%=
String manipulation
Comparison operators: ==,=== (must satisfy type is the same),!=,!== (must satisfy the type is not the same), >,<,>=,<=
Logical operators:&&, | |,!
Conditional operator: 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 ()" > Results </button>
<script>
function MySum () {
var i=100;
var j=10;
var m=i+j
document.getElementById ("Sumid"). Innerhtml=m;
}
</script>
Conditional statements If...else and switch and C languages, where switch statements do not forget to write break;
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) {
Iterating through the elements in I
}
While and do...while loops are like the C language, jump statements: The function part of break, continue, Return,javascript, and C.
Exception captures for javascript:
try{
Exception code block
}catch (Err) {
Handling of exceptions
}
Throw can create custom errors, throw exceptions directly through throw, without catch handling
JavaScript Event Monitoring:
OnClick Click events
OnMouseOver Mouse over events
onmouseout Mouse Out Event
OnChange Text content Change Event
OnSelect Text Box Check Event
onfocus Cursor Aggregation Events
OnBlur Move the cursor away
OnLoad Page load Events
OnUnload Close page Events
JavaScript DOM Objects
HTML DOM: When a Web page is loaded, the browser creates a Document object model for the page
Dom Manipulating HTML:
Change all the HTML elements, attributes, CSS styles, and all the events in the page to change the HTML output stream: Never use document.write () after the document is loaded. This overwrites the previously written document
Find elements: HTML elements can be found by ID, or HTML elements are found by tag name
Changing HTML content: Using attribute->innerhtml
Change HTML properties: Use the property Attribute->document.getelementbyid. property = new Property
DOM EventListener:
Method,
AddEventListener (); Specify an element to add an event handle
RemoveEventListener (); Remove the event handle added by the method
Event flow, describes the order in which events are received in a page
event bubbling, which is received by the most specific element and then propagated up to the least specific element of the node (document)
The least specific node that captures the event first receives the event, and the most specific node should be the last to receive the event
Event handling:
HTML event processing, added directly to the HTML structure
DOM0-level Event handling assign a function to an event handler property
DOM2 Level Event Handling->addeventlistener ("event name", "event handler", "Boolean");
where the value of the Boolean value has different meanings: true event capture, false Event bubbling
Removereventlistener (); it's a monitoring of an event.
If it is IE browser, then IE event handler: attachevent detachevent
Event object: An object will be generated when the DOM event is started
Event object Events (common) properties and common methods
1. Type Get event types
2. Target Gets the event destination
3. Stopprogragation () block event bubbling
4. Preventdefault () block event default behavior
JavaScript objects:
Everything in JavaScript is an object: strings, numbers, arrays, functions, etc.
Each object has properties and methods, and JavaScript allows the custom object
Custom Objects
1 defining and creating an object instance
2 Use a function to define an object, and then 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);
JavaScript string object, there are many ways to manipulate strings: Length (), IndexOf (), Match (), Repelace ("Original parameter", "What to modify")
Case Conversion toUpperCase (), toLowerCase ()
String Conversions to arrays
e.g.
var str2 = "Hello,shuai,ge";
var s = str2.split (",");//Divide the str2 into arrays by commas
Date object: Day object used to process date and time
Date of day of acquisition
The array object also has a number of methods: contact () Merge array
Sort () ordering push () append element reverse () array element rollover
A.sort () Default ascending sort
A.sort (function (b) {
Return a-b;//in ascending order
})
A.sort (function (b) {
Return b-a;//descending order
})
Math Object ABS (), round (), Max (), Min ()
DOM Object Control HTML
Common methods
getElementById ()
Getelementbyname () Gets the name
Getelementbytagname () Gets the element
* * (ByName and Bytagname get a collection of arrays of the same name label)
getattribute () Get element properties
SetAttribute () setting element properties
ChildNodes () Access child nodes
ParentNode () Accessing the parent node
createelement () Creating ELEMENT nodes
createTextNode () Creating a text node
InsertBefore () Insert node
RemoveChild () Delete node
Offsetheight Web page size does not contain scroll bars, followed by the corresponding settings of height and width
ScrollHeight Page Size
Example
1. Dynamic Insert Element
function AddElement () {
var body = document.body;
var input = document.createelement ("input");
Input.type = "button";
Input.value = "button";
Body.appendchild (input);
}
2. Get the page size
var w = document.body.offsetwidth| |
Document.documentelementwidth;
3. Creating nodes and inserting 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);
}
Browser object for javascript:
The Window object is the core of the BOM, and the Window object refers to the current browser window
All JavaScript global objects, functions, and variables automatically become members of the Window object
A global variable is a property of a Window object
A global function is a method of a Window object
Even the document of the HTML DOM is one of the properties of the Window object
Window object size->window.innerheight browser's internal height/width, innerwidth
Window method Open (), close () opens/closes windows
JS Browse Objects-Timers
Timing events--by using JavaScript, you can execute code after a set interval, rather than executing it immediately after the function is called, which is called a timing event.
Method of timing
SetInterval () interval specifies the number of milliseconds to execute the specified code repeatedly
The Clearinterval () method is used to stop the above method
SetTimeout () executes the specified code after pausing the specified number of milliseconds
The Cleartimeout () method is used to stop the above method
e.g.
var mytime = setinterval (function () {
Time ();
},delay of time milliseconds)
function Time () {
var d = new Date ();
var t = d.tolocaltimestring ();
document.getElementById ("Ptime"). InnerHTML = t
}
JS Browser Object-history Object
The Window.history object contains a collection of browser history URLs
Histroy method
Back () the same as in the browser click the rewind button
Forward () the same as clicking the button in the browser forward
Go () Go to a page in history
Location Object
The Window.location object is used to get the address URL of the current page and redirect the browser to a new page
Properties of the Location object
Location->
Hostname returns the domain name of the web host
Pathname returns the path and file name of the current page
Port returns the ports of the web host
Protocol returns the Web protocol used
The href property returns the URL of the current page
Assign () method to load a new document
Screen object,
The Window.screen object contains information about the user's screen
Screen.availwidth the available screen widths
Screen.availheight the available screen height
Screen. Height screen Altitude
Screen. Width screen widths
With the above properties you can do a good job of screen fitting
Detailed 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 ();
The package of JS class
(Fucntion () {
Fucntiuon people () {
}
Window. People = people;//so the outside through the top of the window
Layer to visit the People object
}()）
function person () {
var _this = {};
_this.say = Fucntion () {
Alert ("Nihao");
}
return _this;
}
The meaning of the above code: by means of the person, in which an empty _this object is created first, then a method in its object is defined by Fucntion, and finally the created _this object is returned, so that an object is created.
HTML Learning Note (JavaScript) No.4
