Input-process-output

See more about:

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.

dog

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?

Renata
Renata

Are you asking us?

Kieran
Kieran

Yes.

Renata
Renata

Oh.

Well, you’re going to need a photo on the page, so you can change it.

Kieran
Kieran

OK. How do you do get a photo on a page?

CC
CC

With the <img> tag. Like <img src="head.jpg" alt="Photo">

Kieran
Kieran

Good. How do you change the photo that’s showing?

Renata
Renata

You change the src attribute to something else. From head.jpg to snout.jpg.

CC
CC

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">

Kieran
Kieran

Good! That’s how you do the output.

What’s the input event?

CC
CC

Hmmm, that would be hover(). It triggers when the mouse moves over an image, and again when it moves off.

Renata
Renata

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.
   }
);

Kieran
Kieran

OK! So you know how to handle the input triggers. And what to do when the triggers happen. Can you put it all together?

CC
CC

Can I try it?

Kieran
Kieran

Sure. Go ahead.

CC
CC

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">
Kieran
Kieran

Renata, what do you think?

Renata
Renata

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.

Kieran
Kieran

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.


Lessons

How to...


Dogs