Renata and CC make a page

Where are we?

You’ve learned how to make pages that interact with the user. Renata and CC have been learning right along with you. Let’s see how they use their skills to make a page.

Today’s zombie score

Zombie

The dead have risen. Millions of them.

It’s just humans, of course. We dogs know better than to become zombies.

Your pack starts living in caves, going out for food as needed (MacDonalds and Burger King survived the apocalypse. Hmmm…). Wandering human zombies attack your foraging expeditions. Some of you hold each zombie down, and the rest chew its head off. Nasty, but it works.

There are three types of zombies: regular, wrestler, and geek. Wrestler zombies were professional wrestlers when they were alive. They’re tougher than regular zombies.

Geek humans became the toughest zombies of all. They’re hard to take down. You have to be very careful with geeks. Maybe because of their… say it with me… braaains.

You keep track of the zombies you rekill each day, and compute an overall daily score. You get one point for each regular zombie, five for a wrestler, and ten for a geek.

Write a Web page that lets the user enter the number of each type of zombie, and computes the total score.

Let me show you what your page should do.

You can try my solution.

OK, you two give it a try.

Renata
Renata

I guess that’s us.

CC
CC

Yep.

Renata
Renata

Well, we should, er… I don’t know how to get started.

CC
CC

Hmmm… Hey, how about we break the task up into pieces?

Renata
Renata

Makes sense. What’s the first piece?

CC
CC

Let’s start with what’s easy to do. The HTML isn’t complicated. Some text, a few fields. How about we do that first?

Renata
Renata

OK, good idea. When I create a new page, the first thing I do is copy the template we learned at the very beginning of ClientCore.

CC
CC

Works for me. I’ll make a new file in Netbeans and paste the HTML in.

 

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TITLE</title>
  </head>
  <body>
    BODY
  </body>
</html>

CC and Renata start with something they know works. They cut-and-paste from the HTML page template pattern.

Renata
Renata

OK, good. Now let’s add some HTML. Just a little to begin with.

[Type type]

CC
CC

Here it is.

 

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Zombie Score</title>
  </head>
  <body>
    <h1>Zombie Score</h1>
  </body>
</html>
Renata
Renata

How’s that look in the browser?

CC
CC

Let’s see. I’ll open the file so far.

Renata
Renata

OK! Something showed up! W00f!

CC
CC

Yes! How about we do some CSS?

Renata
Renata

OK. Let’s do the background color.

CC
CC

Yes, but we need a color code. Hey, Kieran!

Kieran
Kieran

What’s up?

CC
CC

Can you give us the color code for the background?

Kieran
Kieran

Sure. Let me look at the source… OK, it’s FFFFEE.

CC
CC

Now we need to add this:

background-color: #FFFFEE;

Renata
Renata

You need to put that in the HTML CSS tag.

CC
CC

Oh, yes, that’s right. And does it get applied to the <body>?

Renata
Renata

Let me look at an example on CoreDogs… OK, you’re right.

CC
CC

Here’s the new page.

 

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Zombie Score</title>
    <style type="text/css">
      body {
        background-color: #FFFFEE;
      }
    </style>
  </head>
  <body>
    <h1>Zombie Score</h1>
  </body>
</html>
CC
CC

Let’s have a look.

Renata
Renata

Cool!

CC and Renata take one small step at a time, and check their work as they go. This is easier than trying to create the entire page at once.

Renata
Renata

Hey, can I type in the font CSS?

CC
CC

Huh?

Renata
Renata

This is what we want it to look like:

What they want

This is what it looks like now:

What they have now

CC
CC

Oh, yes. Let’s take a look at that basic text styling pattern.

Why reinvent the wheel? Patterns make things easier.

Renata
Renata

Good idea. Hmm, let’s use Verdana. I like that. And text that’s 14 pixels. Makes it big enough to read. How’s this?

 

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Zombie Score</title>
    <style type="text/css">
      body {
        background-color: #FFFFEE;
        font-family: Verdana, sans-serif;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <h1>Zombie Score</h1>
  </body>
</html>
CC
CC

What’s the sans-serif on line 9 for?

Renata
Renata

If the computer doesn’t have the Verdana font, the browser will show a generic sans serif font.

CC
CC

Oh, yes, I remember that now. How’s it look?

Renata
Renata

Let’s check it out.

CC
CC

Nice! How about the instructions, you know, that say “Please enter the number” and so on.

Renata
Renata

Here we go. I’ll add the first field, as well. [Type type typity]

 

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Zombie Score</title>
    <style type="text/css">
      body {
        background-color: #FFFFEE;
        font-family: Verdana, sans-serif;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <h1>Zombie Score</h1>
    <p>Please enter the number of each type of zombie you
      rekilled today. Then click the Compute button.</p>
    <p>Regular:<br>
      <input type="text">
    </p>
  </body>
</html>
CC
CC

Hmmm. Is there something missing in the <input> on line 19?

Renata
Renata

What?

CC
CC

Let me look at CoreDogs… OK, you might need an id.

Renata
Renata

Why would we… Oh, OK, I remember. We need to give the <input> field an id, so when we get to the JavaScript, we can refer to the field. How about this?

<input type="text" id="regular">

CC
CC

That’s better. Let’s try it.

Renata
Renata

W00f! W00f!

CC
CC

Looking good! I’ll add the other input fields, and the button.

 

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Zombie Score</title>
    <style type="text/css">
      body {
        background-color: #FFFFEE;
        font-family: Verdana, sans-serif;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <h1>Zombie Score</h1>
    <p>Please enter the number of each type of zombie you
      rekilled today. Then click the Compute button.</p>
    <p>Regular:<br>
      <input type="text" id="regular">
    </p>
    <p>Wrestler:<br>
      <input type="text" id="wrestler">
    </p>
    <p>Geek:<br>
      <input type="text" id="geek">
    </p>
    <p>
      <button type="button" id="compute">Compute</button>
    </p>
  </body>
</html>

 

CC
CC

Let’s try it.

W00f! W00f! W00f!

Now for the dreaded JavaScript.

Renata
Renata

So how do we do it? I’m stuck.

CC
CC

Let’s trying breaking it down into pieces again, like we did with the HTML.

Renata
Renata

OK, we need to get the cursor in the first field when the program loads. Was there a pattern for that?

CC
CC

Let me check… You’re right, there is a pattern we can use. Let me copy the code and paste it in. Oh, and I need to make it put the cursor in the first input field.

Patterns to the rescue! Again!

[Type type type type]

Renata
Renata

Hey, wait a minute. Look at that code in Netbeans.

Error marker

CC
CC

Oh. That marker means Netbeans has found a problem, right?

Renata
Renata

Yes. It’s on the ). Maybe the opening ( is missing.

CC
CC

No, it’s there.

Ooo! Look! There’s a {, but no } later!

Error marker

Renata
Renata

You’re right! Add it, er, before the ).

CC
CC

Before it?

Renata
Renata

Yes, the ( is opened first, and then the {. Close the } first, and then the ). So they nest correctly.

CC
CC

Oh, I get it. [Type type]

Error gone

W00f! That was it!

Smart editors like Netbeans find some errors for you. This will save you time. And frustration.

OK. Here’s all the code so far.

 

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Zombie Score</title>
    <style type="text/css">
      body {
        background-color: #FFFFEE;
        font-family: Verdana, sans-serif;
        font-size: 14px;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#regular").focus();
      });
    </script>
  </head>
  <body>
    <h1>Zombie Score</h1>
    <p>Please enter the number of each type of zombie you
      rekilled today. Then click the Compute button.</p>
    <p>Regular:<br>
      <input type="text" id="regular">
    </p>
    <p>Wrestler:<br>
      <input type="text" id="wrestler">
    </p>
    <p>Geek:<br>
      <input type="text" id="geek">
    </p>
    <p>
      <button type="button" id="compute">Compute</button>
    </p>
  </body>
</html>
CC
CC

Let’s give it a try.

Renata
Renata

Er, the cursor isn’t in the first field. Why didn’t it work?

CC
CC

I don’t know. What do we do now?

Renata
Renata

Let’s look through the code again.

(Five minutes pass…)

CC
CC

I didn’t see anything wrong.

Renata
Renata

Me neither. Hey, let’s look at the error console. You know, that we learned about in the debugging lesson?

CC
CC

OK. I’ll bring it up.

Firefox error console

Renata
Renata

Look, right at the bottom. “$ is not defined.” We’ve used $ before. Why is it breaking now?

CC
CC

(Sigh) I don’t know. Let’s ask the pack leader. Er, Kieran?

Kieran
Kieran

What’s up?

CC
CC

What’s the error message “$ is not defined” mean?

Kieran
Kieran

Oh, that one. You know the HTML page template pattern?

Renata
Renata

Yes.

Kieran
Kieran

Look at the section on JavaScript and jQuery. See if there’s anything missing on your page.

CC
CC

OK. Let’s take a look at the pattern

Renata
Renata

Oh! There! We forgot the line that loads jQuery!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

I’ll cut-and-paste it. [Click click type type]. OK, now let’s see what we have.

Use the error console to see if the browser found errors in your code. If you see the error “$ is not defined” in the error console, make sure you have loaded jQuery.

CC
CC

W00f! W00f! W00f!

Check that you are using the right pattern for the situation. CC and Renata should have started with the “Web page with JavaScript and jQuery” pattern, not just the “Web page” pattern.

Renata
Renata

Now what?

CC
CC

I’m not sure. Hmmm… Let’s look at the pattern list. Maybe we’ll see something useful.

Renata
Renata

Here’s one, Run code on click. We want to do something when the button is clicked.

CC
CC

OK. Let’s take a look… Oh, OK. I’ll change the code.

 

<script type="text/javascript">
  $(document).ready(function() {
  $("#regular").focus();
    $("compute").click(function() {
    });
 });
</script>
Renata
Renata

How will we know whether it worked?

CC
CC

Hmmm. Oh, look at this in the pattern. An alert. We can do that. I’ll change it to:

 

<script type="text/javascript">
  $(document).ready(function() {
  $("#regular").focus();
    $("compute").click(function() {
      alert('Clicked');
    });
 });
</script>

So we should see the message “Clicked” when we click on the button.

Renata
Renata

Great! Let’s give it a try.

CC
CC

Oh, come on, you stupid machine! Why didn’t you work?

Renata
Renata

Check the error console.

CC
CC

OK… Nothing new.

Renata
Renata

(Sigh) Let me eyeball the code… Hey! It might be this. Look at the these two lines:

$("#regular").focus();
$("compute").click(function() {

CC
CC

I see them. So what?

Renata
Renata

We forgot the # in front of compute.

CC
CC

ACK! You’re right. The # means “look for an something with an id of compute.” Without it, jQuery won’t find the button.

This is a common mistake.

CC
CC

I’ll put it in:

$("#regular").focus();
$("#compute").click(function() {

Now let’s try it.

W00f! W00f! W00f! W00f!

Renata
Renata

W00f! W00f!

Now what?

CC
CC

OK, the user presses the button. What should our page do?

Renata
Renata

Let’s think it through. At the end, we want to show the total score. One point for regular zombies, five for wrestlers, and ten for geeks. Something like this:

score = regular + wrestlers x 5 + geeks x 10

CC
CC

Oh, OK. Let me try something. When the user clicks the button, the code should do this:

Get numbers from the fields (what the user typed).
Compute the score.
Show the score.

Renata
Renata

Yes, that’s it. That’s looks like the Input-process-output pattern. Get the input, do something with it, and show the output.

CC
CC

Alright, we’re getting somewhere. Let’s get the three numbers. Here’s what we have so far:

 

<script type="text/javascript">
  $(document).ready(function() {
  $("#regular").focus();
    $("compute").click(function() {
      alert('Clicked');
    });
 });
</script>
CC
CC

Let’s start by getting rid of that alert.

Renata
Renata

Wait a minute, I’ve got an idea. Leave it in there. Let’s get whatever the user typed into the first input field, and use the alert to show it.

Smart Renata! One small step at a time. Then check that it works.

CC
CC

Here, you take the keyboard. It’s fortunate we have a keyboard that’s good for dogs. Have you seen the tiny keys on the humans’ keyboards? Nasty.

Renata
Renata

Let’s see. How about this?

 

<script type="text/javascript">
  $(document).ready(function() {
  $("#regular").focus();
    $("compute").click(function() {
      regular = $("regular").val();
      alert(regular);
    });
 });
</script>
CC
CC

You forgot the # in line 5.

Renata
Renata

Oh, yes. Here.

 

<script type="text/javascript">
  $(document).ready(function() {
  $("#regular").focus();
    $("compute").click(function() {
      regular = $("#regular").val();
      alert(regular);
    });
 });
</script>

Let’s try it.

W00f! It worked!

CC
CC

Now do the other two fields.

Renata
Renata

OK! [Type type type type]

 

<script type="text/javascript">
  $(document).ready(function() {
  $("#regular").focus();
    $("compute").click(function() {
      regular = $("#regular").val();
      alert(regular);
      wrestler = $("#wrestler").val();
      alert(wrestler);
      geek = $("#geek").val();
      alert(geek);
    });
 });
</script>

Let’s try it.

CC
CC

Yes! W00f! W0000f! Resistance is futile, computer!

Renata
Renata

W00f!

Let’s go back to the three steps.

Get numbers from the fields (what the user typed).
Compute the score.
Show the score.

We’ve done the first one. Now for the second. Compute the score. [Type type]

 

<script type="text/javascript">
  $(document).ready(function() {
  $("#regular").focus();
    $("compute").click(function() {
      regular = $("#regular").val();
      alert(regular);
      wrestler = $("#wrestler").val();
      alert(wrestler);
      geek = $("#geek").val();
      alert(geek);
      score = regular + 5 * wrestler + 10 * geek;
      alert(score);
    });
 });
</script>

How’s it look?

CC
CC

Great! Let’s give it a try. I’ll type 1, 2, and 3 in the fields.

Bad score

Renata
Renata

You’ve got to be kidding me.

CC
CC

A-R-G-H!!

(Depressed silence)

CC
CC

Hey, wait a minute. Didn’t we see something like this before? When JavaScript was getting the math wrong?

Renata
Renata

Hmmm, yes, we did. Wasn’t it just a couple of lessons ago?

CC
CC

Here it is! We need to tell JavaScript to treat what it gets from the input fields as numbers. With that parseFloat thing.

Renata
Renata

Oh, yes, that’s right! We need to put parseFloat() around everything we get from the user, at least everything that we want to be a number. But I’m not sure exactly what to type.

CC
CC

Me neither, but I’ve got something I want to try. [Type type type type type type]

 

<script type="text/javascript">
  $(document).ready(function() {
  $("#regular").focus();
    $("compute").click(function() {
      regular = $("#regular").val();
      alert(regular);
      wrestler = $("#wrestler").val();
      alert(wrestler);
      geek = $("#geek").val();
      alert(geek);
      score = parseFloat(regular) + 5 * parseFloat(wrestler) + 10 * parseFloat(geek);
      alert(score);
    });
 });
</script>
Renata
Renata

Do you need all three of those parseFloats on line 11?

CC
CC

I don’t know. But let’s give it a try. I’ll type 1, 2, and 3 in the fields again.

Renata
Renata

W00f! W00f! W00f! W00f! W00f!

CC
CC

We’ve got it! Now we have the first two parts of:

Get numbers from the fields (what the user typed).
Compute the score.
Show the score.

Renata
Renata

We’ve done the last one, too. We’ve shown the score.

CC
CC

Not in the right way. Look at the movie again.

Renata
Renata

Oh, yes. We need to put the score on the page, and show it. Let’s see if there’s a pattern for that.

How about this one? Change text on the page.

CC
CC

Looks good. First we need the output area.

Let’s do this. I’ll remove the alerts, too. [Type type]

 

$("#compute").click(function(){
  regular = $("#regular").val();
  wrestler = $("#wrestler").val();
  geek = $("#geek").val();
  score = parseFloat(regular) + 5 * parseFloat(wrestler) + 10 * parseFloat(geek);
  $("#score").text(score);
});
...
<p>
  <button type="button" id="compute">Compute</button>
</p>
<p>
  Score: <span id="score"></span>
</p>

Let’s try it.

Renata
Renata

W00f! W00f! We’re almost done. I found this pattern that hides output areas until they’re needed. Give me that keyboard. [Type type type type type]

 

$(document).ready(function() {
  $("#output_area").hide();
  $("#regular").focus();
  $("#compute").click(function() {
    regular = $("#regular").val();
    wrestler = $("#wrestler").val();
    geek = $("#geek").val();
    score = parseFloat(regular) + 5 * parseFloat(wrestler) + 10 * parseFloat(geek);
    $("#score").text(score);
    $("#output_area").show('fast');
  });
});

...
<p>
  <button type="button" id="compute">Compute</button>
</p>
<p id="output_area">
  Score: <span id="score"></span>
</p>

On line 18, I gave the output area an id. Then when the page loads, line 2 hides the entire output area.

The score is computed, and put into the output on line 9. Then line 10 shows the entire output area.

Now, for the big test!

Renata
Renata

It worked! W00f! W00f! W00f!

CC
CC

W00f! W00f! W00f! W00f! W00f!

Kieran
Kieran

How’s it going?

Renata
Renata

We got it! W00f! W00f!

Kieran
Kieran

Good job! W00f!

CC
CC

Coffee time?

Renata
Renata

And a nice dog biscuit. Let’s go!

Summary

Renata and CC created a page. They started with a template they knew worked. Then they went step by baby step, adding something and then checking that it worked. They used the alert statement to help.

Renata and CC used patterns a lot. They went back to the pattern library again and again.

They used Netbeans, a smart editor. It marked errors it found.

You should use the same habits in your own work.

What now?

Let’s see how you can add a quiz about yourself to your eMe.


How to...

Lessons

User login

Log in problems? Try here


Dogs