Advanced JavaScript - HTML5

HTML and CSS Reference

In-Depth Information

incorPoraT

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, script.aculo.us, 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

frameworks.

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 http://jquery.com an d download the latest version, which, as of this writ-

http://jquery.com 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:

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 :

HTML5

Search WWH ::

Custom Search

Home