Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Save to My Library
Look up keyword
Like this
2Activity
0 of .
Results for:
No results containing your search query
P. 1
Prototype

Prototype

Ratings:

5.0

(1)
|Views: 3,407|Likes:
Published by prak_sophy4252
Prototype is a JavaScript framework used to help with development of cross-browser code that is easy to maintain and extend. In this first article of "Eight Weeks of Prototype" I will teach you the fundamentals of Prototype, which you will hopefully find useful for all JavaScript code you write.
Prototype is a JavaScript framework used to help with development of cross-browser code that is easy to maintain and extend. In this first article of "Eight Weeks of Prototype" I will teach you the fundamentals of Prototype, which you will hopefully find useful for all JavaScript code you write.

More info:

Published by: prak_sophy4252 on Dec 20, 2008
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

06/17/2009

pdf

text

original

 
Eight Weeks of Prototype: Week 1, Beginning with Prototype
Introduction
Prototype is a JavaScript framework used to help with development of cross-browser code thatis easy to maintain and extend. In this first article of "Eight Weeks of Prototype" I will teach youthe fundamentals of Prototype, which you will hopefully find useful for all JavaScript code youwrite.Firstly, I will show you how to download and install Prototype into your own web applications.Next I will show you how to select elements from the DOM (Document Object Model). That is,you'll learn how to access any element from your HTML document (such as a particular link orimage). There are several ways to select elements, each of which will be covered.In the last part of this article I will show you how to create new elements real-time and addthem to the DOM. I will also show you how to remove elements from the DOM.
Downloading and Installing Prototype
Prototype is a single JavaScript file that you download and use as a file in your web site. Tomake use of Prototype, you simply need to load this one file in your HTML code.
Downloading Prototype
The official home page of Prototype ishttp://prototypejs.org. You can download the currentversion (which at time of writing is 1.6.0.2) from the download pageathttp://prototypejs.org/download. The file you download is called
 prototype-1.6.0.2.js
, whichyou then need to save in your web site file structure.For the purpose of this article (and subsequent articles in this series), I will assume you havesaved this JavaScript file to a directory called
/js
, and renamed the fileto
 prototype.js
(meaning you can upgrade Prototype in the future without having to changeyour HTML).For example, if your site was
www.example.com 
the file would be accessiblefrom
www.example.com/js/prototype.js
. Creating a separate directory in which to hold this filealso gives you a place to store your other JavaScript files as required.
Loading Prototype on Your Web Site
Once you have saved the Prototype JavaScript file on your web site you can use it on any of your HTML pages simply by loading that one file. Listing 1 shows the code you would use to loadPrototype if you have saved it in the
/js
directory as described above.
 
Listing 1
Loading Prototype and viewing the loaded version (listing-1.html)
<html> <head>
 
 <title>Loading Prototype and viewing the loaded version</title>  <script type="text/javascript" src="/js/prototype.js"></script>  <script type="text/javascript"> alert('Prototype ' + Prototype.Version + ' loaded'); </script> </head> <body> </body></html>
In this code listing I have made an alert box appear which shows the version of Prototypeloaded using the internal
Prototype.Version
variable.
Prototype Documentation and Resources
The Prototype web site contains extensive API documentation for Prototype, which you shouldrefer to frequently to help with your own development. You can find this documentationathttp://prototypejs.org/api.
The $() Function
The first function we will look at is the
$()
function. This function behaves very similarlyto
document.getElementById()
(the non-Prototype way of retrieving a DOM element usingJavaScript), except that it returns elements with extended Prototype functionality (covered inthe second article of "Eight Weeks of Prototype"). This extended functionality is a series of methods added to each element that simplify your JavaScript development.Although typically you will only pass one argument to
$()
, you can in fact pass multiplearguments to it. If one argument is used, then a single element is returned. If more than oneargument is used, then an array of elements is returned.To retrieve an element (or multiple elements) with
$()
, you can use either the ID of the elementyou want to select, or the element itself. By passing an element to
$()
, you can ensure it hasbeen extended with the extra functionality Prototype provides.Listing 2 shows an example of using
$()
, in which the div element with an ID of 
exampleDiv 
isselected. The content of this div is then modified using the
update()
method (which is one of theextended methods Prototype provides, covered in part 2 of this series).
Listing 2
Selecting an element with $() and updating its contents (listing-2.html)
<html> <head> <title>Selecting an element with $() and updating its contents</title>  <script type="text/javascript" src="/js/prototype.js"></script>  </head> <body> <div id="exampleDiv"></div>  <script type="text/javascript"> $('exampleDiv').update('Div content updated!'); </script> </body></html>
 
In the code above we know the
#exampleDiv 
element exists, and therefore we don't worry aboutany error checking, however, you should really ensure the element is correctly returned beforetrying to perform any further operations on it. If the given element was not found then
null
isreturned. Thus, you can use code similar to that of Listing 3 to ensure the given element wasfound.
Listing 3
Ensuring the element was successfully returned before using it (listing-3.html)
<html> <head> <title>Ensuring the element was successfully returned before using it</title>  <script type="text/javascript" src="/js/prototype.js"></script>  </head> <body> <div id="exampleDiv"></div>  <script type="text/javascript"> var elt = $('exampleDiv');if (elt)elt.update('Div content updated!'); </script> </body></html>
Often JavaScript classes you write with Prototype (covered in the sixth article of "Eight Weeks of Prototype") will rely on one or more elements in your HTML document. Checking that theelement was selected successfully as in Listing 3 means you can write error-free code andaccordingly notify the user (or developer) that there was a problem if the element was notfound.When writing your own functions you may not necessarily know whether you have been passedan element or just an ID. Therefore, you should typically call
$()
on any arguments that aresupposed to be DOM elements. Listing 4 shows a user-defined function and two different (yetidentical) ways of calling it.
Listing 4
Using $() to extend function arguments (listing-4.html)
<html> <head> <title>Using $() to extend function arguments</title>  <script type="text/javascript" src="/js/prototype.js"></script>  </head> <body> <div id="exampleDiv"></div>  <script type="text/javascript"> function myFunction(elt, message){elt = $(elt);elt.update(message);} myFunction('exampleDiv', 'Div updated');myFunction($('exampleDiv'), 'Div updated again'); </script> </body></html>

Activity (2)

You've already reviewed this. Edit your review.
1 thousand reads
1 hundred reads

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->