Input-process-output
This is a general pattern for almost every user interaction on a Web page. If you want to make something happen on a page, ask three questions:
- What is the input event that causes the action to start?
- Is there any processing going on?
- What changes on the page? That’s output.
Sometimes there isn’t any processing, not really. But there’s input and output.
Why think of things this way? Because breaking a task up into smaller problems makes it easier to solve.
Example: Changing a photo
Try this. Move the mouse over the image, and see what happens.
One way to think about this is there there are two input/processing/output cycles:
- Input: mouse moving onto the photo
- Processing/output: Show the snout photo
- Input: mouse moving off the photo
- Processing/output: Show the original photo
Processing and output are just one step here.
Renata and CC, how would you write the code?
Are you asking us?
Yes.
Oh.
Well, you’re going to need a photo on the page, so you can change it.
OK. How do you do get a photo on a page?
With the <img> tag. Like <img src="head.jpg" alt="Photo">
Good. How do you change the photo that’s showing?
You change the src attribute to something else. From head.jpg to snout.jpg.
Yes, like this: $("#some id").attr("src", "photo name");
We’ll need to add an id to the img tag. So we can refer to it. The whole thing looks like this:
$("#photo").attr("src", "photo name");
...
<img id="photo" src="head.jpg" alt="Photo">
Good! That’s how you do the output.
What’s the input event?
Hmmm, that would be hover(). It triggers when the mouse moves over an image, and again when it moves off.
Hey, that’s right, I remember now.
You give hover() two functions. One to run when the mouse goes over, and other when it leaves. It’s like this:
$( trigger object ).hover(
function() {
Do this when the mouse moves over.
},
function() {
Do this when the mouse moves off.
}
);
OK! So you know how to handle the input triggers. And what to do when the triggers happen. Can you put it all together?
Can I try it?
Sure. Go ahead.
Here’s what I’m thinking.
$("#photo").hover(
function() {
$("#photo").attr("src", "snout.jpg");
},
function() {
$("#photo").attr("src", "head.jpg");
}
);
...
<img id="photo" src="head.jpg" alt="Photo">
Renata, what do you think?
Well, let me run through it in my head. Line 1 says that when the mouse moves over something with the id of photo, stuff happens. Is there something with an id of photo? Yes, there it is in line 10.
So, what happens? Line 1 uses hover(). That takes two functions. The function in lines 2 to 4 runs when the mouse goes over photo.
Line 3 says to find something with the id of photo – OK, same as before, we have that. Then change its src attribute. Does photo have a src attribute? Yes, it’s an img. There’s the src in line 10.
So, change the src to snout.jpg. OK, that should work. The snout picture should show up.
Let me look at the next function. Line 6 should run when the mouse leaves photo. It says, well, it’s like the last one, just the photo name is different.
That’s looks OK to me.
Yes, it’s right! W00f!
What we did is use the input/processing/output pattern to break down the task into smaller steps, like “change the photo.” It’s easier to solve a bunch of small steps than one big one.
Then, we put the steps back together again, using the hover pattern as a guide.
When you want an interactive page, remember – input/processing/output.
