JavaScript Learning Notes

Output Alertdocument.writedocument.getElementById ("Demo"). InnerHTML variable data typevarLastname= "Doe", age=30, job= "Carpenter";varcars=NewArray (); cars[0]= "Saab"; cars[1]= "Volvo"; cars[2]= "BMW";varCar = {type: "Fiat", model:500, Color: "White"};js Object Function Property life cycle HTML page Completion load HTML input field change when HTML button is clicked onchange HTML element change onclick user Click HTML element onmouseover user in a Moving the mouse over an HTML element onmouseout the user removes the mouse from an HTML element onkeydown the user presses the keyboard key and the OnLoad browser has finished loading the page‘single quotation mark \ "double quotation mark \ \ backslash \ n line break \ r" enter \ \b Backspace \f page break, var day=new Date (). GetDay (); for-loop code block a certain number of times F Or/in-loops through the properties of the object while-loops the specified code block when the specified condition is true do/while-similarly when the specified condition is true when looping the specified code block var person={fname: "John", lname: "Doe", AG E:25};  for (x in person) {txt=txt + person[x]; }typeof "John"//return String typeof 3.14//Return numbertypeof false//return Boo leantypeof [1,2,3,4]//return objecttypeof {name:' John ', age:34}//Returns the Objectjavascript data type has 5 different data types in JavaScript: Stringnumberbooleanobjectfunction3 Type of object: ObjectDateArray2 A data type that does not contain any values: nullundefinedtry {//Run code here}catch (ERR) {//Handle error here}console.log () method form validation Var x=                document.forms["MyForm" ["FName"].value;json the use of Var result= "";                    var obj1={name: "Zhangsan", Age:10, habit:{Tiyu: "Basketball", Shuiguo: "Apple"}, Birthday: "$", child:[' Xiaomi ', ' headmaster ']            };            Alert (typeof (Obj1.child));            alert (Obj1.habit.shuiguo); result= "My Name:" +obj1.name+ ", I this year:" +obj1.age+ ", My hobby is:" +obj1.habit.tiyu+ "," +obj1.habit.shuiguo+ ", My birthday is:" +            Obj1.birthday+ ", My Child:" +obj1.child[0 ";    Return result;//constructor: function myFunction (arg1, arg2) {this.firstname = arg1; This.lastname = arg2;}     This creates a new Objectvar x = new MyFunction ("John", "Doe"); x.firstname; The definition of a function closure solves var json = [{dd:' SB ', AA: ' Dongdong ', RE1:123},{CCCC: ' DD ', LK: ' 1qw '},{CCFF: ' d11d '}];//Alert (json.length), for (Var i=0;i<json.length;i++) {for (var key in Json[i]) {//alert (key+‘:‘+json[i][key]);d ocument.write (key+‘:‘+json[i][key]);} ID gets var X=document.getelementbyid ("Intro"), Var X=document.getelementbyid ("main"), Var y=x.getelementsbytagname ("P" );d Ocument.write (The first paragraph in the ' id= ' main element is: '+ y[0].innerhtml); <div id= "main" ><p> DOM is very useful. </p><p> This example shows the <b>getElementsByTagName</b> method </p> The example above demonstrates the document.getElementById getElementsByTagName uses Getelementsbyclassname to use X=document.getelementsbyclassname ("Intro");d ocument.write ("<p > Text from class to intro paragraph: "+ x[0].innerhtml +" </p> ");
Document.getelementsbyclassname (' te ') [0].innerhtml= "haha";

document.getElementById ("image"). src= "Landscape.jpg";
document.getElementById ("P2"). style.color= "Blue";
Event Display hidden
onclick= "document.getElementById (' P1 '). style.visibility= ' Hidden '"

onclick= "this.innerhtml= ' ooops! '"

Property Add method
document.getElementById ("Mybtn"). Onclick=function () {displaydate ()};
Examples of events:

When the user clicks the mouse
When the page is loaded
When the image is loaded
When the mouse moves over the element
When the input field is changed
When you submit an HTML form
When the user triggers the button

The nload and OnUnload events are triggered when the user enters or leaves the page.

The OnLoad event can be used to detect the browser type and browser version of the visitor and to load the correct version of the Web page based on that information.

The onload and OnUnload events can be used to process cookies.

Turn into uppercase
X.value=x.value.touppercase ();
<input type= "text" id= "fname" onchange= "MyFunction ()" >

Onmouseover= "MOver (This)" onmouseout= "Mout (this) passes the current object this

Use
<script>
function MOver (obj)
{
Obj.innerhtml= "Thank You"
}

function Mout (obj)
{
Obj.innerhtml= "Mouse over Me"
}
</script>

Onmousedown= "Lighton ()" onmouseup= "Lightoff ()"

Onfocus= "MyFunction (This)

onmouseover= "style.color= ' Red '

Add Event Listener
<script>
document.getElementById ("Mybtn"). AddEventListener ("click", Function () {
Alert ("Hello world!");
});
</script>

Event handle allows multiple events to be added at the same time
Element.addeventlistener ("MouseOver", myFunction);
Element.addeventlistener ("click", Mysecondfunction);
Element.addeventlistener ("Mouseout", mythirdfunction);

document.getElementById ("Mydiv"). AddEventListener ("Click", MyFunction, True); The following true means capturing the clicked
Default False Bubble Click

removing events
document.getElementById ("Mydiv"). RemoveEventListener ("MouseMove", myFunction);

Math.random (); random number

Add tags
<script>
var para=document.createelement ("P");
var Node=document.createtextnode ("This is new.");
Para.appendchild (node);

var Element=document.getelementbyid ("Div1");
Element.appendchild (para);
</script>

Delete a label
Parent.removechild (child);

JavaScript Learning Notes