Chapter 1. Programming Guide
1.1. What is prototype?
Maybe you haven't used it. Prototype. JS is a javascript package written by Sam Stevenson. This fantastic idea of writing a piece of code that is compatible with standards will bear the burden of creating fat clients and highly interactive web applications. Web 2.0 features can be easily added.
If you have recently experienced this package, you may find that the document is not one of its strengths. Like all the developers before me, I can only drag them into the source code of prototype. js and test each part of it. I think it will be nice to take notes when I study him and share it with others.
I also provided unofficial references for the objects, classes, methods, and extensions of this package.
1.2. Related Articles
Advanced JavaScript Guide
1.3. Universal Methods
This package contains many predefined objects and universal methods. The obvious purpose of writing these methods is to reduce your repeated coding and usage.
1.3.1. Use the $ () method
$ () Is a document that is used too frequently in the Dom. A convenient shorthand for the getelementbyid () method. Like this Dom method, this method returns the element of the ID passed in by the parameter.
This is better than the DOM method. You can input multiple IDS as parameters and then $ () returns an array object with all the required elements. The following example will describe this to you.
<HTML>
<Head>
<Title> test page </title>
<SCRIPT src = "prototype-1.3.1.js"> </SCRIPT>
<SCRIPT>
Function test1 ()
{
VaR d = $ ('mydiv ');
Alert (D. innerhtml );
}
Function Test2 ()
{
VaR divs = $ ('mydiv ', 'mytherdiv ');
For (I = 0; I <Divs. length; I ++)
{
Alert (divs [I]. innerhtml );
}
}
</SCRIPT>
</Head>
<Body>
<Div id = "mydiv">
<P> This is a paragraph </P>
</Div>
<Div id = "myotherdiv">
<P> This is another paragraph </P>
</Div>
<Input type = "button" value = test1 onclick = "test1 ();"> <br>
<Input type = "button" value = Test2 onclick = "Test2 ();"> <br>
</Body>
</Html> another benefit of this method is that you can pass in the ID string or element object, which makes it very useful when creating a method that can pass in any form of parameters.
1.3.2. Use the $ F () method
The $ F () method is another popular shorthand. It returns the value of any input form control, such as a text box or a drop-down box. This method can pass in the element ID or element itself.
<SCRIPT>
Function test3 ()
{
Alert ($ F ('username '));
}
</SCRIPT>
<Input type = "text" id = "username" value = "joe doe"> <br>
<Input type = "button" value = test3 onclick = "test3 ();"> <br> 1.3.3. Use the $ A () method
$ A () method converts received parameters into an array object.
With the extension of the array class, this method can easily convert or copy any list to an array object, A recommended usage is to convert Dom's nodelists to a common array, which can be used more efficiently. See the following example.
<SCRIPT>
Function showoptions (){
VaR somenodelist = $ ('lstemployees'). getelementsbytagname ('option ');
VaR nodes = $ A (somenodelist );
Nodes. Each (function (node ){
Alert (node. nodename + ':' + node. innerhtml );
});
}
</SCRIPT>
<Select id = "lstemployees" size = "10">
<Option value = "5"> Buchanan, Steven </option>
<Option value = "8"> Callahan, Laura </option>
<Option value = "1"> davolio, Nancy </option>
</SELECT>
<Input type = "button" value = "show the Options" onclick = "showoptions ();"> 1.3.4. Use the $ H () method.
The $ H () method converts an object into an enumerated seemingly Union array hash object.
<SCRIPT>
Function testhash ()
{
// Let's create the object
VaR A = {
First: 10,
Second: 20,
Third: 30
};
// Now transform it into a hash
VaR H = $ H ();
Alert (H. toquerystring (); // displays: First = 10 & Second = 20 & third = 30
}
</SCRIPT>
1.3.5. Use the $ R () method
$ R () is a simple and quick way to use new objectrange (lowerbound, upperbound, excludebounds.
The objectrange Class documentation provides a complete explanation. At the same time, let's take a look at a simple example to demonstrate the use of each method traversal. For more information about this method, see the enumerable object document.
<SCRIPT>
Function demodollar_r (){
VaR range = $ R (10, 20, false );
Range. Each (function (value, index ){
Alert (value );
});
}
</SCRIPT>
<Input type = "button" value = "sample count" onclick = "demodollar_r ();"> 1.3.6. Use try. These ()
Try. the these () method makes it easy to implement this requirement when you want to call different methods until one of them is successful and normal, he uses a series of methods as parameters and executes these methods one by one in sequence until one of them is successfully executed, and returns the return value of the method that is successfully executed.
In the following example, xmlnode. Text is useful in Some browsers, but xmlnode. textcontent works normally in other browsers. Using the try. These () method, we can get the return value of the method that works normally.
<SCRIPT>
Function getxmlnodevalue (xmlnode ){
Return try. These (
Function () {return xmlnode. Text ;},
Function () {return xmlnode. textcontent ;)
);
}
</SCRIPT>
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
