Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Chapter 3. Javascript Events: Reacting to your users

Sometimes you need your code to react to other things going on in your web application... and that’s where events come into the picture. An event is something that happens on your page, in the browser, or even on a web server. But it’s not enough to just know about events... sometimes you want to respond to them. By creating code, and registering it as an event handler, you can get the browser to run your handler every time a particular event occurs. Combine events and handlers, and you get interactive web applications.

It all started with a downward-facing dog...

Marcy’s just opened up a new yoga studio that caters to programmers and techies. She wants a website that shows the different levels of classes she offers, the times they’re available, and provides new customers a way to enroll in a class... all in a cool, intuitive package. But she doesn’t have a clue how to build that kind of site.... that’s where you come in.

To give you an idea of what she’s looking for, Marcy worked up a quick sketch of what a page on her site needs to show her customers:

Our Design Magnet Solution

Your job was to arrange the design magnets onto the web browser in a way that looks great. Also, you should have designed the site so that when a customer clicks on a class level, the schedule, description, and a picture of just the selected class is displayed.

Note

Here’s where the Ajax came in... can we change out parts of the page without a reload? Of course...

Note

* It’s okay if you came up with something a bit different, or even A LOT different... as long as you put together a dynamic design that doesn’t require a reload to show each of the class schedules.

This chapter will be working off the design shown here, but feel free to change things up and implement your design instead...

Exercise

Suppose you want to build the website shown in Our Design Magnet Solution. In the space below, make notes about what should happen when customers click on different buttons, and what interactions you think you’ll need between Marcy’s web page and the server.

The studio Marcy teaches at has server-side programmers that can build whatever we need... but we’ve got to tell them what to build. What sort of server-side programs will we need? ___________

_______________________________________________________

Exercise Solution

Your job was to make notes about what should happen when customers click on different buttons, and what interactions you think you’ll need between Marcy’s web page and the server.

The studio Marcy teaches at has server-side programmers that can build whatever we need... but we’ve got to tell them what to build. What sort of server-side programs will we need? We need a program that takes a class name, and brings up some sort of enrollment form. It sounds like Marcy’s got the form, so when users click a button, we send a request to the server for enrollment in the selected class. _______

And what about the different class pages? We might need to request those from the server. Although something seems funny about that... I’m not sure what yet...

There are no Dumb Questions

Q:
Q: I came up with something totally different for my solution. Is that okay?
A:
A: It is as long as you figured out that you need to make a request to the server to enroll for each different yoga class, and realized that each tab should bring up a class schedule and description. But some details are still fuzzy. What do those buttons on the left do? And do we need an asynchronous request to get information about each class?
Q:
Q: Are those tabs along the top of that drawing?
A:
A: They sure are. Tabs are a great way to let users not only see different options, but easily click on each option to find out more.
Q:
Q: XHTML doesn’t have a tab control. Do we have to buy a third-party tool or something?
A:
A: No, we’ll do it all using graphics, some nifty client-side JavaScript, and a request object to fetch the schedule from the server.
Q:
Q: But there are some toolkits that do that stuff for you, right? Why don’t we just use one of those?
A:
A: Toolkits are great, but it’s much better to know what’s going on underneath something like script.aculo.us or mootools. In this chapter, you’ll build a simple tabbed control on your own... and then when you want to use a toolkit, you’ll know what’s going on, instead of depending on someone else to figure out your JavaScript for you.
Note
script.aculo.us and mootools are two popular JavaScript toolkits for visual effects, among other things.
And of course, when the toolkit you’re using doesn’t do just what you want, you’ll be able to change it or write your own controls.
Q:
Q: This doesn’t look like much new... didn’t we do something similar with the movie review site already?
A:
A: That’s right, you did. Although in that case, there was a lot less interactivity on the web page. Users signed up, and the page and your code did everything else. On this site, we’ve got a lot more going on: dealing with several different button presses, figuring out which button was pressed... loads of new interactivity issues. That’s what most of this chapter focuses on, in fact: events and interactivity.

Try not to rely on any toolkit unless you understand the code behind that toolkit. That way, when things don’t work the way you want, you can fix the problems yourself.

Ajax IS mostly JavaScript, events, and lots of boring scripting!

Most apps that use asynchronous requests have a lot more code that deals with web pages, objects on that page, and doing basic JavaScript tasks. The actual request object code may only be a callback function and a few lines in an event handler.

But you really can’t break an application up into “JavaScript” and “Ajax” and “CSS.” It all works together. So even though you’ll be spending a lot of time in this chapter working with XHTML and CSS and event handlers, you’re really building Ajaxian applications: responsive, user-friendly, modern web apps.

The more you know about JavaScript, XHTML, and CSS, the more effective and usable your Ajax apps will be.

Ajax apps are more than the sum of their parts

Ajax apps are really just a combination of lots of pretty simple technologies: XHTML, CSS, JavaScript, and things like the DOM, which you’ll get to in a few chapters. In fact, if you take a close look at Marcy’s app, most of the work is not Ajax-specific. It’s XHTML, CSS, and JavaScript... with a little asynchronous requesting added in just when it’s needed.

Here’s Marcy’s XHTML...

Below is the XHTML for Marcy’s page... it’s already got a few references to the JavaScript files we’ll need and several <div>s representing the different parts of the page. Go ahead and download this page, along with the rest of the Chapter 3 examples, from the Head First Labs web site.

Events are the key to interactivity

Marcy’s page needs to react to her customers. She wants a different schedule and description to appear when a customer clicks on a class, and we could even highlight a menu item by using context-specific graphics.

Note

Context-specific graphics is just a fancy term for changing a graphic when the customer moves their mouse over a menu option.

All this adds up to an interactive web page. In programming terms, “interactive” means that your page responds to specific events. And events are just things that happen. Those things can be triggered by the user, your code, the browser, or even a server:

Lots of things trigger events, and you can register handlers in your code that respond to those events.

Who Does What?

The names of most events give you a pretty good idea what they do. Can you match the events to what they might be used for?

onclick	Use me when you want to validate a form before its contents are processed by a server-side program.
onfocus	Use me when you want to provide audio feedback when a user has images disabled.
onblur	Use me when you want to scroll in on a portion of an image when a user clicks a certain spot of the image.
onload	Use me when you want to let users know that increasing the width of the browser window could reduce their viewing experience.
onmouseover	Use me when you want to hide a submenu when the user moves away from a menu item.
onmouseout	Use me when you want to let a user know about the input format for a selected text field.
onsubmit	Use me when you want to change the color of a menu item when a user hovers over the item.
onresize	Use me when you want to give the user popup instructions for a form before they start using the form.
onerror	Use me when you want to validate a particular field every time data is entered into that field.

Connect events on your web page to event handlers in your JavaScript

You’ve already used the window.onload event to trigger lots of setup work on web pages, and the onclick event to handle users clicking on an image. We can use these events, as well as the onmouseover event, to connect different parts of Marcy’s yoga page to JavaScript functions we’ll write.

Use the window.onload event to initialize the rest of the interactivity on a web page

You’ve already used window.onload twice to initialize a page. We need to do the same thing in Marcy’s yoga page because...

Assigning event handlers programmatically is one more way to separate content from behavior.

Anytime you can keep your JavaScript separate from your XHTML, you should. The same goes for XHTML and CSS: keep them separate.

The best way to assign event handlers is by using properties of the elements in your XHTML page, and doing that assignment in a function that runs before the user gets control of a page. window.onload is the perfect event for just that.

There are no Dumb Questions

Q:
Q: So when does window.onload get called again?
A:
A: Actually window.onload is an event. The event occurs, or fires, once the XHTML page has been read by the browser and all the files that XHTML references have been loaded.
Q:
Q: So when window.onload fires, the browser runs that event’s handler function?
A:
A: Exactly.
Q:
Q: How does the browser know what function to call?
A:
A: The browser will call the function that you assign to the onload property of the window object. You set that property just like any other JavaScript property: with an equals sign. Just be sure you leave any parentheses off the name of the function:
window.onload = initPage;
Q:
Q: And we assign that property where?
A:
A: The browser will run any code that isn’t inside a function as soon as it encounters that code. So just put the window.onload assignment at the top of your JavaScript, outside of any function, and the assignment will happen before the user can interact with your page.
Then, the browser will fire onload and run the function you just assigned. That’s your chance to set up the web page’s other events.

Brain Power

How do you like this user interface? Is there anything you would change?

If a web page is confusing to YOU, it will almost certainly be confusing to your users.

When you design and implement a site, you know how the site is supposed to act. If the site’s confusing to you, then users—without the benefit of the information you have—will probably be even more confused.

Even when you don’t get to control the design of a site, like with Marcy’s yoga page, you should still try and make the site as unconfusing as possible. If that means turning some images into buttons to avoid users clicking on those images endlessly, then do it!

Sometimes you have to make a choice between okay and better.

If you’re not in control of a site’s design, you’re often stuck making the best decisions based on an existing layout. With Marcy’s site, she liked the design with tabs and images.

Note

This can even happen when you design a site that a customer loves. Later on, you realize there are some problems, but the customer doesn’t want to make any changes because they like what they’ve already seen.

Your job, then, is to make the best decisions based on what you’ve got. In this case, that means two forms of navigation to avoid user-confusion. Otherwise, non-clickable images on the left might be construed as buttons.

Change those left-side images to be clickable

It’s a piece of cake to make the images on the left-hand side of Marcy’s page clickable. In fact, all we need to do is remove code:

Use your XHTML’s content and structure

showHint() is called when a user rolls their mouse over a tab or image. But how do we know which tab or image is being rolled over? For that, we need to take another look at Marcy’s XHTML:

Every XHTML element is accessible in your JavaScript code as an object

You’ve been using getElementById() to access the images in Marcy’s XHTML page. That works because each element in the XHTML is represented by the browser as an object you can manipulate in your JavaScript.

Even better, all the attributes on an element are stored as properties on the JavaScript object that represents that element. Since Marcy’s images have titles, we can use those titles to figure out which image or tab was selected and show the right hint.

Add the code for hideHint(), too

The code for hideHint() is simple once showHint() is done. You just need to grab the content pane, and set the hint text back to the default:

Tabs: an optical (and graphical) illusion

Marcy likes the look and feel of tabs on her yoga page. While there are lots of fancy toolkits that let you create tabs, a simple graphical trick is all we need.

On the yoga page, we’ve got a main content pane that’s dark green. So that color basically becomes the “active” color. The Welcome tab starts out that color, and the other tabs are a lighter color, the “inactive” color:

To make a tab active, we need to change the tab’s background to the “active” color

All we need to do to make a different tab active is change it to the active color. Then, we can make the old active tab inactive by changing it to the inactive color.

So suppose we’ve got two graphics for each tab: one with the tab against an active background, and another with the tab against an inactive background:

We’ve already got a showTab() function. So the first thing that function should do is change the tab image for the clicked-on tab.

Use a for... loop to cycle through the images

You’ve already used the title property of the image objects in showHint() to change the hint text. We need to do something similar in showTab(): figure out which tab should be active, and change that tab to the active image. For all the other tabs, we just want the inactive image.

This event handler has a LOT of presentation-specific details.

showTab() now works directly with image names, and it actually builds those image names dynamically! So not only does showTab() mix behavior with presentation (the images), but it actually is depending on the content of the XHTML page—the title of each image—to figure out what presentation to use.

There’s a real problem here. But what would you do to fix the problem? Think about how you would separate content, presentation, and behavior before you turn the page.

CSS classes are the key (again)

Marcy likes the look and feel of tabs on her yoga page. While there are lots of fancy toolkits that let you create tabs, a simple graphical trick is all we need.

For each tab, there are two possible states: active, which is the darker color that matches the content pane, and inactive, which is the lighter, unselected color. So we can build two CSS classes for each tab: one active, and one inactive.

Open up yoga.css in your app’s css/ directory, and add these lines:

Ummm... but the tabs aren’t < a >’s !

Did you notice what element the CSS is styling? #tab indicates a <div> with an id of “tab.” That’s okay. But then, the CSS indicates it’s styling <a> tags, with ids of “welcome,” “beginners,” and so on. That doesn’t match Marcy’s XHTML page at all.

But that’s no big deal... we can change all the images on the XHTML page to <a> tags to separate one more layer of content from presentation.

There are no Dumb Questions

Q:
Q: Why is the href set to “#”?
A:
A: # references the current page. We don’t want the tabs to take the user anywhere else, although later we’ll write code so that clicking on a tab shows the selected class’s schedule.
Q:
Q: If we’re not taking the user anywhere, why use <a> elements?
A:
A: Because the tabs are ultimately links. They link to each class schedule, even if it’s in a slightly non-traditional way. So the best XHTML element for a link is <a>.
On the other hand, there are usually at least two or three ways to do something on the Web. You could use a <span> element, a <div>, or even an image map. It’s really up to you. As long as you can attach event handlers to the element, you’re good to go.

This broke our JavaScript, too, didn’t it?

We’ve got a nice, clean XHTML page and some CSS that truly controls the presentation of the page. But now all that JavaScript that depended on <img> elements isn’t going to work. That’s okay, though, because even though it worked before, it mixed images in with behavior... a real problem.

Let’s fix up our script, and separate all that presentation from the behavior of the yoga page.

The earlier you separate your content from your presentation and behavior, the easier that separation will be.

With Marcy’s site, we didn’t really think about content or presentation early on, and it’s only when we were a few functions into our behavior (the JavaScript) that we saw problems. If we’d planned from the start to keep images out of our code, and let our CSS handle all the presentation, we’d have fewer changes to make to our JavaScript.

Still, even if you find problems late in the process, it’s almost always better to do the work to really separate out content, presentation, and behavior. Your app will be a lot better for the work you put into it.

There are no Dumb Questions

Q:
Q: So should I never have images in my XHTML? That’s basically what we did with the tabs, right? Pulled the <img> elements out of the XHTML?
A:
A: That was part of it. But more importantly, we used CSS to control whether or not a button was active. What a button looks like when it changes from active to inactive is presentation, so that belongs in the CSS.
It’s okay to have images in your XHTML; just make sure that if those images are tied to behavior, you get your CSS and code involved, and keep those details out of your XHTML.
Q:
Q: That CSS confused me. What does “#tabs a#advanced.inactive” mean?
A:
A: The # sign indicates an id. So #tabs means “anything with an id of ‘tabs’.” In the XHTML, that’s the <div> with an id of “tabs.”
Then, a#advanced means “for an <a> element with an id of ‘advanced’.” So that’s the <a> element with an id of “advanced” nested within a <div> with an id of “tabs.” And finally, the “." indicates a class. So a#advanced.inactive means the <a> element with an id of “tabs” and a class name of “advanced” (all under a <div> with an id of “tabs”). That’s a mouthful, so if you’re still unsure about the CSS, you might want to pick up a copy of Head First HTML with CSS & XHTML to help you out.
Q:
Q: Isn’t it sort of weird that all the buttons on the left are images, but all the tabs are <a> elements? Why aren’t we using <a> elements for the buttons, too?
A:
A: Good question. We’ll come back to that, but anytime you notice things that seem out of place, jot down a note to yourself. It might be something worth looking at in more detail.
Q:
Q: When I click a button on the left, the tab also changes. Is that right?
A:
A: What do you think? When you select the “advanced” button, do you think the “advanced” tab should become active?

Sharpen your pencil

We’ve gotten a lot done, but showTab() is still incomplete. We’ve got to show the schedule for a selected class when a tab is clicked on. Assume the schedule is an HTML description and a table that shows the days of the week that the selected class is available. There will also probably be an “Enroll button.”

How should we store the details and schedule for each class? In an HTML file? In the JavaScript? Why did you choose the format you did? _____________

_____________________________________

How would you replace the main content pane with the schedule and details for a selected class? __________

_____________________________________

Does your solution:

	Separate the content of your page from its presentation?
	Separate the content of your page from its behavior?
	Separate the behavior of your page from its presentation?

Ajax is all about INTERACTION. Your page can interact with server-side programs, elements within itself, and even other pages.

Jill: You mean X-HTML, right?

Joe: Well, yeah.

Frank: As an entire page? That’s no good... we don’t want to recreate all the tabs and stuff for each class, do we?

Joe: Well, then how about an XHTML fragment. Like, just the elements and text for the actual schedule and class description.

Jill: Yeah, because there’s no way we want all that content in our JavaScript. And if we use XHTML, we can use the same CSS styles as in the main page.

Frank: But how do we load up that... what? XHTML fragment—

Joe: Sure.

Frank: —okay, right. So how do we load it?

Joe: Well, the tabs are <a> elements. Maybe we put the fragments in the href attributes instead of those # symbols?

Frank: But that would replace the entire page. That’s no good. Besides, it seems sort of slow...

Jill: Guys, what about using a request object?

Joe: What do you mean?

Jill: What if we use a request object to get the XHTML fragment, and just set the content pane’s innerHTML to the returned page?

Frank: Can you even do that?

Jill: Why not? Instead of requesting a server-side program, we’ll just request the XHTML fragment we want.

Joe: And we can do it asynchronously, so there’s no waiting or page refreshing!

Use a request object to fetch the class details from the server

The server doesn’t need to do any processing for Marcy’s page, but we can still use a request object to grab the XHTML fragments for each class. This is a request to the server, but it’s just for a page rather than a program. Still, the details are the same as you’ve already seen.

We’ll build the code the same way we always do, using the createRequest() function from utils.js and a callback to display the results in the content pane. Here’s what we need:

Brain Power

Make these changes to schedule.js, and try out the improved web page. Is everything working? Are there any changes you’d make?

Be careful when you have two functions changing the same part of a web page

There’s a bug! Class schedules show up okay, but mousing over another tab or button image hides the class schedule and replaces the content pane with hint text. That doesn’t seem too intuitive...

Get it!

Make sure you have the class XHTML fragments.

XHTML fragments for each class are included in the examples download from Head First Labs. Make sure they’re named beginner.html, intermediate.html, and advanced.html. They should be in the same directory as your main page, classes.html.

Sharpen your pencil

It’s time to finish up Marcy’s page. You need to change the JavaScript so that hints only show when the welcome tab is active. If a class is selected, no hints should appear. Mark up, cross out, and add to the code below to finish up schedule.js. To help you out, we’ve only shown the parts of the script that you need to change or add to, and parts that are relevant to those changes. Good luck!

var welcomePaneShowing = true;

function showHint() {
  if (!welcomePaneShowing) {
    return;
  }
  // code to show hints based on which tab is selected
}

function showTab() {
  var selectedTab = this.title;

  var tabs = document.getElementById("tabs").getElementsByTagName("a");
  for (var i=0; i<tabs.length; i++) {
    var currentTab = tabs[i];
    if (currentTab.title == selectedTab) {
      currentTab.className = 'active';
    } else {
      currentTab.className = 'inactive';
    }
  }
  var request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  request.onreadystatechange = showSchedule;
  request.open("GET", selectedTab + ".html", true);
  request.send(null);
}

Marcy wants the images on the left to change when users roll their mouse over the image

It’s too bad Marcy didn’t let us know about this earlier, but this still shouldn’t be too hard. So when the page loads, the images should look one way, but each time a user rolls their mouse over the button, the image should change.

When you need to change images in your script, think “change CSS classes” instead

Here’s another case where separation of presentation and behavior can be a big issue. Before changing any code, think, “Is this a case where I’m going to have to mix my behavior (my code) and my presentation (like images)?”

If it is, it’s time to restructure some things. The image buttons are really just like the tabs. They just look like buttons instead of tabs. So let’s add some new CSS classes for both button states: the normal button and the active button.

Links in XHTML are represented by <a> elements

Here’s another place where we can make some improvements to our XHTML. Currently, the images are represented by <img> tags, but they really are functioning as linking buttons: you can click on one to get a class schedule.

Let’s change each button to an <a>, which better represents something you can click on to get to a different destination, in this case a class schedule and description.

There are no Dumb Questions

Q:
Q: With the tabs, we had an inactive class and an active class. But on the buttons, they’re in the XHTML without a class, and then there’s a CSS “active” class description with the active image. Why don’t we have an inactive CSS class with these buttons, too?
A:
A: Good question. With the tabs, there were two distinct states: active (in the forefront) and inactive (in the background). The buttons we have, though, really have a normal state, where they sit flat, and an active state, where the button is highlighted. So it seemed more accurate to have a button (with no class), and then assign that button the “active” class when it’s rolled over. Uniformity is a good thing, though, so you could probably use inactive and active classes if you felt strongly about it.

We need a function to show an active button and hide a button, too

Before we change any of schedule.js, let’s add two functions we know we’ll need. First, we need a buttonOver() function to show the active image for a button. That’s just a matter of changing a CSS class:

In JavaScript, an element is represented by an object. That object has a property for each event that can occur on the element that it represents.

We can do just the opposite for when a user’s mouse rolls out of the button’s area. We just need to change back to the default state, which is no CSS class:

When you initialize the page, you need to assign the new event handlers

Now we need to assign the new functions to the right events. buttonOver() should get assigned to a button’s onmouseover event, and buttonOut() gets assigned to a button’s onmouseout event.

We can also update the code to use the new <a> elements that represent buttons instead of the older <img> elements.

What happened to the hints that were attached to the button’s onmouseover and onmouseout events?
What would YOU do to make sure that Marcy’s customers get cool interactive buttons AND helpful hints?
When you’ve got an idea, turn over to Chapter 4, and let’s see how to take your event handling skills to the next level (literally).

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 3. Javascript Events: Reacting to your users

Create new playlist

Sign In

Sign Up

Chapter 3. Javascript Events: Reacting to your users

It all started with a downward-facing dog...

Note

Note

Note

Ajax apps are more than the sum of their parts

Here’s Marcy’s XHTML...

Events are the key to interactivity

Note

Connect events on your web page to event handlers in your JavaScript

Use the window.onload event to initialize the rest of the interactivity on a web page

Brain Power

Note

Change those left-side images to be clickable

Use your XHTML’s content and structure

Every XHTML element is accessible in your JavaScript code as an object

Add the code for hideHint(), too

Tabs: an optical (and graphical) illusion

To make a tab active, we need to change the tab’s background to the “active” color

Use a for... loop to cycle through the images

CSS classes are the key (again)

Ummm... but the tabs aren’t < a >’s !

This broke our JavaScript, too, didn’t it?

Use a request object to fetch the class details from the server

Brain Power

Be careful when you have two functions changing the same part of a web page

Get it!

Marcy wants the images on the left to change when users roll their mouse over the image

When you need to change images in your script, think “change CSS classes” instead

Links in XHTML are represented by <a> elements

We need a function to show an active button and hide a button, too

When you initialize the page, you need to assign the new event handlers

Table of Contents for
3. Javascript Events: Reacting to your users