Programs in browsers

See more about:

Where are we?

This chapter is about interactive pages. We’ll start off with programs that run in Web browsers.

This lesson’s goals

By the end of this lesson, you should know:

  • Some programs run inside browsers.
  • Those programs are downloaded along with pages.
  • Every major browser can run JavaScript programs.
  • Programs are triggered by events.
  • JavaScript is used for interface effects, validating form data, input widgets, and sending data to a server.

Example: How many dogs?

Here’s a program that advises humans how many dogs they should live with. Type a number in the input field, and click the button.

How many dogs live in your house?

  

The program is something like this:

When the user clicks the Advice button:
  Get the number of dogs the user entered.
  If it isn't a valid number, show an error message.
  If dogs = 0:
    Show: That's too bad. You should get some dogs.
  If dogs = 1:
    Show: That's not enough dogs. Get another one.
  If dogs = 2:
    Show: That's a good number of dogs to have.
  If dogs is more than 2:
    Show: Lucky you, to live with so many dogs!

Figure 1. How many dogs?

The program doesn’t actually look like this. But Figure 1 shows you the logic behind it. Type in different things, and track through the code in Figure 1 to predict how the program will respond.

How does the program get to the browser? The program is inside the page itself. When I was typing the page you’re looking at right now, I typed the program straight into the page.

So when your browser loaded this page, it loaded the program as well.

JavaScript

The program is in a language called JavaScript. Every major browser can run programs written in JavaScript. So it’s the browser itself that runs the code.

Here’s another example. This one is real JavaScript code. It computes the area of a rectangle.

w = prompt("Width of rectangle?");
h = prompt("Height of rectangle?");
a = w * h;
alert("Area: " + a);

Figure 2. Area program

prompt() shows a dialog like this:

Prompt dialog

Figure 3. prompt() dialog

Then it waits for you to type a number. Line 1 stores whatever you type into the variable w. A variable is a piece of computer memory with a name, like w, sales_tax, or age.

Line 2 gets a value for h. Line 3 computes the area; * means multiply. Line 4 shows the result. alert() shows a message on the screen.

Click the button below to run the program.

Renata
Renata

I typed a negative number into the program, and it didn’t give me an error message. It just gave me a negative area. That doesn’t make sense.

Kieran
Kieran

Computers do exactly what you tell them, and nothing more. There’s no code in Figure 2 to check for negative numbers. The program for Figure 1 does check, but only because I typed in JavaScript code to do that.

CC
CC

What would the check for the width be?

Kieran
Kieran

It would be something like this:

if (w < 0) {
   alert("Please enter a valid width.");
   return;
}

This would go in after line 1 in Figure 2. The return statement stops the program.

I don’t want to go into more detail right now. I just want you to get the general idea of what JavaScript is.

The code in Figure 2 is tied to an event. An event is something that happens in the browser, like a user pressing a key on the keyboard, or moving the mouse over something. The program in Figure 2 is tied to the click event of the button. So when the user clicks the Click me button, the browser runs the code.

What JavaScript is used for

JavaScript is used for lots of things, but the four main ones are:

  • Interface effects.
  • Validating form data.
  • Input widgets.
  • Sending data to a server.

Interface effects

Move your mouse over the dog.

W00fer

That’s a simple interface effect.

I started by making two versions of the dog image. Here they are with borders, so you can tell where the edges are.

No w00f W00f

Figure 5. no-w00f.png and w00f.png

The code is like this:

Initialize the image to no-w00f.png.
When the mouse cursor enters the image:
  Switch the image to w00f.png.
When the mouse cursor leaves the image:
  Switch the image to no-w00f.png.

Figure 6. W00fing

“Initialize” in line 1 means “do this at the start.” So the image starts off as the no-w00f.png version.

The “mouse cursor” in line 2 is the mouse pointer thing you move around the screen. It’s usually an arrow. Line 2 is an event: the mouse cursor moves over the image. When that event happens, the browser runs line 3, and switches the image to the w00f.png version. Lines 4 and 5 switch it back when the mouse leaves the image.

This isn’t a useful interface effect, just a simple example. A more useful effect is the book and chapter expand/collapse in the Lessons menu in the right-hand column.

Validating form data

You’ve filled in lots of forms on the Web. Sometimes you get error messages, telling you you’ve forgotten to complete a field, or done something else the page doesn’t like. JavaScript is used for that.

Here’s a simple one. Give it a try.

The code looks roughly like this:

age = (get what the user typed);
if ( age is empty ) {
  alert('Please enter your age.');
}
else if ( age is not a number ) {
  alert('Please enter a number.');
}
else if ( age < 0 ) {
  alert('Please enter a positive number.');
}
else if ( age > 100 ) {
  alert('Please enter your real age.');
}
else {
  alert('Thank you!');
}

Figure 7. Validating age

Type different things in the field. You should be able to follow the code, and predict what the program will say.

Input widgets

An input widget is a thing on the screen that lets users enter data. You’ve seen two input widgets already:

A text box:

These are built in to HTML. Browsers already know how to make text boxes and buttons. Just give them the right tags on a Web page. For example, here’s what I typed to make the button:

<button type="button">A button</button>

But there are other input widgets that HTML doesn’t have built in. One is called a spin button. Give this one a try.

How many walks would you like today (0 to 5)?
1
Up
Down

Click the up and down arrows, and watch what happens.

HTML doesn’t have a spinner widget built in. I created it, with help from JavaScript.

Send data to a server

You can use JavaScript to send data to a server. This technique is often called Ajax. Once the data gets to the server, it can be stored, emailed, or whatever.

Here’s a simple example. When you click the button below,
a counter on the server goes up by one. Try it.

Number:         Wait...

Here’s how it works. When you click the button, your browser sends a message to the CoreDogs server:

Browser to server: Dude! Increase the counter by one.

The server will do it, and send a message back to the browser.

Server to browser: Done, dude! Here’s the counter’s new value: xxxx.

The counter is stored on the server, not the browser. So if you go to another page and then come back to this one, the counter will retain its data. Shut down your browser, start another one, and the counter will have the same value.

OK – turn your computer off, go to bed, dream of chasing rabbits, wake up tomorrow, fly to Bruges in Belgium, find a computer in an Internet cafe that allows dogs, and look at this page – the counter will still have the right value.

Because the data is on the server, you can shut your computer down, dig a hole and bury it, whatever. The data will remain intact.

And the number goes up when anyone clicks a button, not just you. Have a contest with a dog in Australia. See who can click the button more times in three minutes.

See the little blue thing that appeared briefly? It’s called a throbber. It shows that your browser is contacting the server. The throbber goes away when the server replies.

This is not the only way to send data from a browser to a server. Traditional Web forms don’t use JavaScript to send data. Ajax (using JavaScript to send data) is a relatively new and advanced technique.

Summary

  • Some programs run inside browsers.
  • Those programs are downloaded along with pages.
  • Every major browser can run JavaScript programs.
  • Programs are triggered by events.
  • JavaScript is used for interface effects, validating form data, input widgets, and sending data to a server.

What now?

You’ve seen how browsers run JavaScript programs. But servers run programs as well. Let’s talk about that next.


How to...

Lessons

User login

Log in problems? Try here


Dogs