Home > Developer > JavaScript
Chapter 1. Modern JS Programming
Separate Dom Script Programming
Use Dom to locate and operate different DOM elements
<HTML>
<Head>
<Title> introduction to the DOM </title>
<SCRIPT>
// We must perform Dom operations after the document is loaded.
Window. onload = function (){
// Obtain all <li>
VaR li = Document. getelementsbytagname ("Li ");
// Add a black border to all of them
For (var j = 0; j <li. length; j ++)
{
Li [J]. style. Border = "1px solid #000 ";
}
// Add an event handler
For (VAR I = 0; I <li. length; I ++)
{
Li [I]. onmouseover = function ()
{
This. style. backgroundcolor = 'blue ';
};
Li [I]. onmouseout = function (){
This. style. backgroundcolor = 'white'; // The case is case-insensitive. Otherwise, it is not displayed.
};
}
// Obtain the element with the ID of 'everwhere' and delete it from the document.
VaR every = Document. getelementbyid ("everywhere ");
Every. parentnode. removechild (every );
};
</SCRIPT>
</Head>
<Body>
<H1> introduction to the DOM <Ul>
<Li id = "everywhere"> it can be found. </LI>
<Li class = "test"> it's easy to use. </LI>
</Ul>
</Body>
</Html>
Chapter 2 object-oriented JS
Reference
1. Multiple variables reference the same object
// Set OBJ to an empty object
VaR OBJ = new object ();
// Objref is now a reference to another object
VaR objref = OBJ;
// Modify an attribute of the original object
OBJ. oneproperty = true;
// As we can see, this change is reflected in both variables, because they reference the same object)
Alert (obj. oneproperty = objref. oneproperty );
2. Example of a self-modified object
// Create an array
VaR items = new array ("one", "two ");
// Create an array reference
VaR itemsref = items;
// Add an element to the original array
Items. Push ("six ");
// The two arrays have the same length because they point to the same Array object.
3. Modify Object references while maintaining integrity
// Set items as an array of strings
VaR items = new array ("one", "two ");
// Set itemsref as an items reference
VaR itemsref = items;
// Set items as a new object
Items = new array ("new", "array ");
// Items and itemsref now point to different objects.
Alert (items! = Itemsref );
4. Modify the object and generate a new object
// Set item to a New String object
VaR item = "test ";
// Itemref now points to the same string object
VaR itemref = item;
// Add some new text to the end of the string. Note that this creates a new object instead of modifying the original object.
Item + = "ing ";
// The item and itemref values are not equal because the New String object has been created.
Alert (item! = Itemref );
Determine object type
1. typeof
If (typeof num = "string)
Num = parseint (Num );
2. Use the constructor property to determine the object type
// Check whether our mathematics is actually a string
If (Nu. constructor = string)
Num = parseint (Num );
// Whether it is an array
If (Str. constructor = array)
STR = Str. Join (',');
Variable type detection
The type of variable. Constructor
{An: "object"} object
["An", "array"] object Array
Function () {} function Function
"A string" string
55 number
True Boolean
New User () Object User
A function that strictly maintains all parameters of the input function.
// Use a variable type list to strictly check a parameter list
Function strict (types, argS)
{
// Ensure that the number of types matches the number of parameters
If (types. length! = Args. length)
{
// Otherwise, a useful exception is thrown.
Throw "invalid number of arguments. Expected" + types. Length + ", received" + args. Length + "instead .";
}
// Traverse all parameters and check their types
For (VAR I = 0; I <args. length; I ++)
{
If (ARGs [I]. constructor! = Types [I])
{
Throw "invalid argument type. Expected" + types [I]. Name + ", received" + ARGs [I]. constructor. Name + "instead .";
}
}
}
// A simple function that prints the user list
Function userlist (prefix, num, Users)
{
// Ensure that the prefix is a string, the num is a number, and the users is an array.
Strict ([String, number, array], arguments );
// Traverse 'num' users
For (VAR I = 0; I <num; I ++)
{
// Display the information of each user
Print (prefix + ":" + users [I]);
}
}
Closure: (closure)
1. How does a closure make the code clearer?
// Find the element whose ID is 'main'
VaR OBJ = Document. getelementbyid ("Main ");
// Modify the style
OBJ. style. Border = "1px solid red ";
// Initialize a callback function (callback) executed after one second)
SetTimeout (function (){
// It will hide this object
OBJ. style. Display = 'none ';
},1000 );
// A common function used to display warning information for latency
Function delayedalert (MSG, time ){
// Initialize an encapsulated callback function
SetTimeout (function (){
// It will use the MSG variable passed in by the peripheral function that contains this function
Alert (MSG );
}, Time };
}
// Call the delayedalert function with two parameters
Delayedalert ("Welcome! ", 2000 );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
