Tự học HTML và CSS trong 1 giờ - part 49 docx

It separates JavaScript code from the markup on the page and ensures support for the largest number of users, including users with mobile browsers that may not support JavaScript functio

Summary

This lesson demonstrated a number of common tasks associated with programming in

JavaScript It illustrated how to access the values in forms and check them for errors It

also explained how you can manipulate the styles on a page and even the contents of a

page using JavaScript The final two examples were written in a style referred to as

unobtrusive JavaScript, which involves writing JavaScript in such a way that the page

still works even if the user has disabled JavaScript, or their browser does not offer

JavaScript support JavaScript is used to enhance the user’s experience, but the

function-ality of the page is not dependent on JavaScript This approach is generally favored as

the preferable way to write JavaScript these days It separates JavaScript code from the

markup on the page and ensures support for the largest number of users, including users

with mobile browsers that may not support JavaScript functionality

In the next lesson, I demonstrate how to perform some of the same kinds of tasks as I did

in this lesson using the popular JavaScript library jQuery, and explain the role jQuery

and other libraries like it can play in making it easier to add JavaScript functionality to

web pages

Workshop

The following workshop includes questions, a quiz, and exercises related to the uses of

JavaScript

Q&A

Q Can you point me in the direction of more scripts that I can integrate with my

pages?

A Sure, there are lots of sites with prepackaged JavaScript programs that you can use

on your pages You might try The JavaScript Source at http://javascript.internet.com/,

or JavaScript.com at http://www.javascript.com/

Q Is there a way to incorporate form validation into my page so that errors are

displayed in the form rather than in a pop-up?

A Yes, using the techniques shown in the other examples in this lesson, you could

modify the document itself when validating the form The trick is to modify the

DOM after validating the values, as opposed to displaying the message using the

456 LESSON 15: Using JavaScript in Your Pages

Quiz

1 What happens whenever a user clicks a link, button, or form element on a web

page?

2 In an event handler, what does thisrefer to?

3 What kinds of nodes on a page can be associated with properties like nextChild

andpreviousChild?

4 How does form validation with JavaScript conserve server resources?

Quiz Answers

1 Whenever a user clicks a link, a button, or any form element, the browser generates

an event signal that can be captured by one of the event handlers mentioned in the

previous lesson

2 In event handlers, thisis a reference to the element on which the event was called

So in an event handler for the onclickevent of a link, thiswould refer to the link

that the user clicked on

3 Nodes in the DOM can include HTML elements, text inside HTML elements, and

even whitespace between elements

4 JavaScript enables you to do error checking in forms on the browser side before

the form is ever submitted to the server A script must access the server before it

can determine the validity of the entries on a form (Note that even if you use

JavaScript form validation you must validate user input on the server, too, because

users can bypass the JavaScript if they choose.)

Exercises

1 Change the HTML validation example to add error messages to the page above the

form when validation fails

2 Add a Preview button to the form validation example that displays the values the

user entered below the form

3 Modify the FAQ example so that users can click a link for each question to remove

that question from the page entirely

15

This page intentionally left blank

LESSON 16

Using JavaScript

Libraries

In the previous two lessons, I explained the ins and outs of the

JavaScript language and the browser as a platform for writing programs

In this lesson, you’re going to learn that in the previous two lessons, all

the example programs were written the hard way JavaScript libraries

make taking advantage of JavaScript much easier, and in this lesson,

you’ll learn about the advantages of using them

In this lesson, you’ll learn about the following:

n What JavaScript libraries are and why you might want to use one

n Which libraries people are currently using

n How to use the jQuery library in your pages

n How to bind events using jQuery

n How to manipulate styles on a page

n How to change the content of a page

n How to fetch content from an external source using AJAX

What Are JavaScript Libraries?

In this book, I’ve talked about browsers and incompatibilities between them The popular

browsers differ in their support for HTML and CSS, and also in their support for

JavaScript Unlike CSS and HTML, though, JavaScript can actually be used to solve the

problem of implementations of JavaScript that differ in small but important ways You

can write programs that detect which browser is being used, or even the specific

capabili-ties of the browser being used and then add logic to make sure the program works

cor-rectly for whatever environment that it’s in

For example, some browsers allow you to retrieve elements from the document by class

name using the getElementsByClassName()method, and others do not If your script

depends on that method, it will break in some browsers You can work around the

prob-lem by checking to see whether the method exists before you use it, and if it doesn’t,

using another technique that works in the browsers that don’t support it

JavaScript libraries were created by people who had to do this sort of thing too many

times and decided to package up all these kinds of workarounds to create a simpler

inter-face to common functionality that hides all the incompatibilities of the various browsers

In doing so, the authors also added many other features to make life more convenient for

JavaScript developers The most popular JavaScript libraries all make it easier to bind

code to events, select elements on the page to act on in your programs, and even make

calls to the server from JavaScript to dynamically change elements on the page, using a

technique referred to as AJAX

You might have noticed that I am referring to JavaScript libraries as a group That’s

because there are a number of libraries that provide roughly the same set of features

They were all independently developed and work differently from one another; each has

its own set of advantages and disadvantages If you’re starting from scratch, choosing

between them is a matter of taste

Reviewing the Popular JavaScript

Libraries

In this lesson, the examples are written in jQuery, but they could have been written in

any of the popular JavaScript libraries Here’s a quick overview of the most popular

460 LESSON 16:Using JavaScript Libraries

jQuery

jQuery is the most popular JavaScript library right now It is widely used because it’s

easy to learn and because it makes it simple for even a new user to accomplish a lot with

relatively little code, as you’ll see in this lesson The advance that jQuery introduced is

the ability to use CSS selectors in JavaScript One of the toughest problems for

JavaScript programmers had been coming up with easy ways to target specific elements

on the page when manipulating page content—jQuery enabled programmers to use a

technique they were already familiar with Other JavaScript libraries have since added

support for CSS selectors, as well Whenever any of the JavaScript libraries introduce a

powerful new feature, it makes its way to the other libraries relatively quickly

You can download jQuery and browse the documentation at http://jquery.com jQuery is

also popular because of the wide variety of tools for developers that have been built on

top of it For example, a variety of advanced user interface components have been built

using jQuery and are available at http://jqueryui.com/ These components include things

such as date pickers, sortable lists, and dialog boxes that are widely used and can be

painful to create from scratch

Dojo

Dojo is a JavaScript library that’s popular with programmers It has been widely adopted

by corporate websites and as a component in packaged Web applications Dojo has a bit

more built in functionality than jQuery; for example, it includes data grid functionality

that enables you to create tables that are sortable on-the-fly Like jQuery, Dojo has a

sep-arate UI library, called Dijit You can download Dojo and read more about it at

http://www.dojotoolkit.org/

Yahoo! UI

Yahoo! UI, or YUI for short, is a JavaScript library created by Yahoo! to use on its

website They’ve shared it with the rest of the world You can find out more about it at

http://developer.yahoo.com/yui/ Yahoo! UI provides roughly the same set of features as

the other popular JavaScript library and has the added benefit of robust, professionally

written documentation One disadvantage of YUI is that it lacks the community of

third-party developers that libraries like jQuery and Dojo have, so there are fewer plug-ins and

extensions available

Prototype

Prototype is, in some ways, the original JavaScript library Prototype slipped a bit in

pop-Reviewing the Popular JavaScript Libraries 461

16

people’s favorite jQuery features It is perhaps most famous for a library of effects built

using prototype, called Scriptaculous Scriptaculous is a collection of animations you can

apply to animate elements on web pages No longer did items you removed from the

page just blink out of existence; they could shrink, or fade away, or explode Similar

libraries of effects have since been written for other libraries, but Scriptaculous showed

the world what could be accomplished in terms of visual effects using only JavaScript

and CSS You can get Prototype at http://www.prototypejs.org/, and you can check out

Scriptaculous at http://script.aculo.us/

Other Libraries

There are a number of other JavaScript libraries, too Here’s a list of a few others you

may encounter, or want to check out:

n Google Web Toolkit—Enables you to create JavaScript applications using Java

and compile them into JavaScript (http://code.google.com/webtoolkit/)

n Midori—Optimized for quick download (http://www.midorijs.com/)

n MochiKit—Focused on stability and documentation (http://www.mochikit.com/)

n MooTools—One of the most mature frameworks, optimized for size

(http://mootools.net/)

Getting Started with jQuery

Entire books are published about each of the popular JavaScript libraries, so it would be

foolish to try to cover them all in this lesson Instead, I’m going to focus on introducing

jQuery I’ve chosen it mainly because it’s the easiest library to get started with, especially

if you already know CSS Even if you don’t wind up using jQuery, you’ll still get an idea

of how JavaScript libraries work by reading this section You’ll just have to follow up by

digging into the documentation to learn how to apply the same concepts with the library

that you use instead

jQuery is a regular JavaScript file that you can include in your page using the <script>

tag To get started, download your own copy at http://jquery.com After you’ve

down-loaded jQuery, you can start using it in your pages The easiest way to included in a

page, especially for local testing, is to rename the downloaded file to jquery.jsand put

462 LESSON 16:Using JavaScript Libraries

Your First jQuery Script 463

16

The file you download will have a different name than jquery.js , because it will include the jQuery version number You’ll have to rename it as jquery.js or use the full filename in your <script>

tag You can download jQuery in production or development config-urations The production configuration is “minified”—compressed

so that it downloads as quickly as possible Unfortunately, the minified file is unreadable by humans, so if you think you may need to look at the jQuery source, download the development ver-sion Just be sure to replace it with the minified version when you make your site live.

Your First jQuery Script

jQuery is built around the idea of selecting objects on the page and then performing

actions on them In some ways, it’s similar to CSS You use a selector to define an

ele-ment or set of eleele-ments, and then you write some code that is applied to those eleele-ments

Here’s an example of a page that includes a simple jQuery script:

<!DOCTYPE html>

<html>

<head>

<title>jQuery Example</title>

<script src=”jquery.js”></script>

<script>

$(document).ready(function() {

$(“a”).click(function(event) {

alert(“You clicked on a link to “ + this.href );

});

});

</script>

</head>

<body>

<a href=”1.html”>A link</a>

</body>

</html>

The first <script>tag includes the external jQuery script The second contains the script

I wrote This script causes an alert to be displayed whenever a user clicks a link As you

can see, the JavaScript is unobtrusive—all of it is inside the <script>tag I’ll break it

down line by line

NOTE

The first line is important, because you’ll see it or a variation of it in nearly every jQuery

script:

$(document).ready(function() {

First,$is the name of a function provided by jQuery, and documentis an argument to

that function The $function selects the set of elements matched by the selector provided

as an argument In this case, I’ve passed documentas the argument, and it matches the

documentobject—the root object of the page’s document object model Usually, the

selector is a CSS selector, but the documentobject is an alternative that you can use, as

well

To the right, you see a call to the readymethod, which is applied to the elements that the

selector matches In this case, it’s the documentobject jQuery provides convenience

methods for binding events to objects or elements, and in this case, will be used to bind

an anonymous function to the document’s readyevent It’s roughly equivalent to

win-dow.onload, the method call I used in the previous lesson to cause JavaScript to execute

when the page loads, but it works a bit differently The window.onloadevent doesn’t

“fire” (call any methods that are bound to it) until the page has fully loaded This can be

a problem for pages that contain large images, for example The JavaScript code won’t

run until the images load, and that could lead to strange behavior for your users

jQuery’s document.readyevent, on the other hand, fires when the DOM for the page has

been fully constructed This can cause the JavaScript to run a bit earlier in the process,

while images are being downloaded With jQuery it’s customary to perform all the work

you want to occur when the page loads within an anonymous function bound to the

document.readyevent It’s so common that a shortcut is provided to make doing so even

easier The previous line can be rewritten as follows:

$(function() {

jQuery knows that you intend to bind the function to the document.readyevent Here’s

the code that’s bound to the event:

$(“a”).click(function(event) {

alert(“You clicked on a link to “ + this.href );

});

This code binds a function that prints an alert message containing the URL of the link

that the user clicked on to every link on the page In this case, I use “a”as the selector I

464 LESSON 16:Using JavaScript Libraries

Binding Events

In the introductory script, I provided one example of event binding The biggest

advan-tage of binding events using jQuery (or other popular JavaScript libraries) is that they are

nondestructive There’s a big problem with writing code like this:

window.onload = function () { // Do stuff }

If some other script also binds an event to the window.onloadevent, one of the two will

win, and the other event binding will be ignored This can be a big problem on web

pages that include multiple external JavaScript files jQuery (and other libraries) bind the

events in such a way that multiple handlers can be bound to a single event without

unbinding the other handlers The functionality may still conflict, but the event binding

itself will work

Another advantage of jQuery is that you can bind handlers to multiple elements at once

For example, the following code would disable all the links on the page:

$(“a”).click(function(event) { event.preventDefault(); }

In this case, I added the eventparameter to my event handler so that I can refer to that

event within the handler I then call the event.preventDefault()method, which is part

jQuery, to tell the browser not to do whatever the default action of the event was In this

case, the browser won’t follow the link because that action was prevented

Here’s a more useful example Let’s say that I want links to other sites to open in a new

window, and all the links to external sites use a fully qualified URL, whereas local links

do not I could use the following event handler:

$(function () {

$(“a”).click(function (event) {

if (null != this.href && this.href.length > 4

&& this.href.substring(0, 4) == “http”) {

event.preventDefault();

window.open(this.href);

}

});

});

In this case, I examine the hrefattribute of the link the user clicked If it starts with

“http,” I prevent the default action and open a new window with the link If it doesn’t,

the default action is allowed to continue Instead of adding special classes to external

links on the page or using the onclickattribute for each of them to open new windows, I

just used jQuery’s selector functionality and a bit of programming to take care of it for me

Binding Events 465

16