HTML and CSS Reference
In-Depth Information
ora T
ora inG a JaV
a Ja V
a Ja V V
scriPT FraMework
The same technique explored in the previous section for externalizing your JavaScript functions can
be applied to code developed by other programmers. Over the past years, an ever-growing commu-
nity of developers have created and published a very robust universe of freely available open source
code. Many of these developers have leveraged core JavaScript frameworks such as Yahoo! User
Interface (YUI), Prototype, MooTools,, and jQuery to further extend the power of
JavaScript. Best of all, their work can be used to enhance your own websites.
Each JavaScript framework has its own syntax. To lessen the learning curve, I
recommend that you find a framework you like and use it exclusively, at least for
a while. This approach should help you code more efficiently with fewer errors;
there is certainly more than enough to explore in all of the major JavaScript
The typical method for incorporating an effect or functionality from a JavaScript framework is a
two-step process. First, you link to the external file or files that make up the library. You can either
download the framework and incorporate it into your site or, if available, create an absolute link to a
file hosted on the Web. Next, you include a short JavaScript script in the <head> of your document to
call just the function you need and pass any arguments that relate to your HTML and/or CSS code.
Take a look at an example that uses the jQuery framework to fade in an image when the page loads.
The first step is to visit an d download the latest version, which, as of this writ- and download the latest version, which, as of this writ-
ing is version 1.4.2.
Two different versions of jQuery are available, one for production and the other
for development. The production version is compressed and not readable. The
development version can be examined in any text editor. When you're just start-
ing out, I recommend you download the development version.
When you click Download, the JavaScript file is displayed in your browser. Save the file to your local
system, preferably in a scripts folder of your site root.
Next, you link to the JavaScript file from your HTML source code, as described earlier:
<script type=”text/javascript” src=”../scripts/jquery-1.4.2.js”></script>
Then you need to make sure that your HTML and CSS are set up properly. Most JavaScript frame-
work functions work by identifying the page element you want to affect, typically through use of the
id or class attribute. In this example, there is a photo on the page with the id of fadePhoto :
<img id=”fadePhoto” src=”/images/DebraDance.jpg” width=”613” height=”685” />
Search WWH ::

Custom Search