What is JavaScript?

See more about:

A program is a set of instructions you give to a computer. Do this, do that, then go back and do this again.

When the computer follows the instructions, we call that running the program. Each time you run a program, the computer starts following the instructions again.

Humans run programs as well. They don’t call them “programs,” they call them “recipes,” or “directions,” or “manuals.”

For example, a human gets up in the morning, and makes some coffee. Here is the program the human follows:

  • Empty the old coffee grounds from the coffee maker.
  • Find the container with the new coffee grounds.
  • Put four scoops of coffee grounds into the coffee maker’s basket.
  • Fill the coffee maker with water, to the 12-cup line.
  • Turn the coffee maker on.

When you make an interactive Web page, you give your Web browser (Firefox, IE, etc.) instructions. So the browser is the thing running your programs.

You can compare the way humans follow instructions and the way browsers run programs.

Humans and browsers run programs

Figure 1. Humans and browsers run programs

The instructions you give the human have to be in a language s/he knows. If the human doesn’t speak English, instructions written in English aren’t much use.

What is English? English is a bunch of words, like “dog” and “camel,” and rules for using them together. “I is barking” is not valid English. “I am barking” is.

Browsers speak JavaScript. They know how to follow instructions in that language. The language has words, like “if” and “return,” and rules for using them together. tip = meal_cost * 0.15; is valid JavaScript. tip - = flargle is poot is not valid JavaScript.

A sales tax program

Another example. Suppose you run a grocery store. You hire a human, let’s call her Xena, to help you. You write instructions for Xena, telling her what to do when someone wants to buy something, like cookies or a pencil.

The instructions are simple. The only thing Xena has to decide is whether to charge sales tax. If the item is food, there is no sales tax. If the item is not food, Xena should add 5% sales tax to the price. That’s all the instructions.

So if cookies are $2.00, Xena would charge $2.00. No tax, because the cookies are food. But pencils are not food (for humans, anyway). So if a pencil costs $1.00, Xena would charge $1.00 + $1.00 × 5% = $1.05. You get the same answer this way: $1.00 × 1.05 = $1.05. A little less work.

Here are the instructions you give Xena:

Find the item's price.
If the item is food:
  Add 5% to the price
Tell the customer the total

Figure 2. Xena’s program

Line 2 is a condition. It says to do line 3 only if the item is food.

OK, let’s see how a browser does it. Try this. Type in a price like 1 or 2 (don’t type the $), check the food box or not, and click the Compute total button.

Price

Please pay $.

Now I’m going to show you the JavaScript program. Actually, I’ll put Xena’s program and the JavaScript program together, so you can compare them.

Find the price.
If the item is food:
  Add 5% to the price
Tell the customer the total

//Get the item's price from the text box.
price = $("#price").val();
//Is it food?
if ( ! $('#food').is(':checked') ) {
  //No, add the sales tax.
  price = price * 1.05;
}
//Output the total.
$("#pay").text(price);

Figure 3. Comparing programs

The details of the JavaScript aren’t important. You’ll learn that later. For now, just notice how similar Xena’s instructions and the computer’s program are.

BTW, the lines that start with // are comments. They’re ignored by the computer. People type them in to explain how programs work.

JavaScript programs work with the HTML and CSS on the page. The price input field, the food check box, the button, and the output are all created by HTML tags. Here’s what I used to create the price input field.

<p>
  Price<br>
  <input type="text" size="4" id="price">
</p>

Figure 4. HTML for the price input field

You learned about the <p> and <br> tags in the last lesson. The <input> tag creates the input field. You’ll learn about that later.

Most JavaScript programs work by changing HTML elements in some way. Before you write the JavaScript, you add the HTML elements you want to work with.

Renata
Renata

The program gives strange results. Like for a price of 2 for a non-food item, it tells me the price is 2.1, not 2.10.

CC
CC

Try typing in a negative price.

Renata
Renata

That doesn’t make sense.

CC
CC

Exactly. Shouldn’t the computer know that?

Kieran
Kieran

Good points!

Computers are incredibly stupid. They do exactly what you tell them to, even if it doesn’t make sense. I would need to add error checking if I wanted the program to do that. But I wanted to keep it simple for now.

Renata
Renata

How would you do the error checking? I’m just curious.

Kieran
Kieran

Part of it would be like this:

if ( price < 0 ) {
   alert("Sorry, prices cannot be negative.");
   return;
}

The return statement would stop the rest of the program from running.

When you write a program, you ask yourself, “If I was a Web browser, how would I do this task?” You’ll learn the language the Web browser speaks, and write instructions in that language.

CC
CC

So when you write a program, you pretend you’re a Web browser?

Kieran
Kieran

Yes, more or less. You pretend you can only understand the instructions a browser can understand, and put together a sequence of instructions to do the task.

It’s like writing a play. You imagine the actors saying the lines you write, and what effect that has on the audience. Want a laugh from the audience? Write a joke into the script.

Or giving directions to someone, how to get from the highway to your house. You imagine the route. Then you give someone instructions that will help them follow that route. “Take exit 89, turn left, go about a mile until you see Bert’s Donut Shop, turn right, ...”

Renata
Renata

So you have to know what instructions they can follow.

Kieran
Kieran

Right. You could say, “Drive 4,923 feet,” but people would have trouble following that instruction. Better to say, “go about a mile until you see Bert’s Donut Shop.”

CC
CC

Huh. That makes sense.

Kieran
Kieran

Think you’ll be able to write a program?

CC
CC

I don’t know yet.

Kieran
Kieran

Fair enough. We’ll see.

Events

You’ve learned that a JavaScript program is a set of instructions that a browser follows. But what tells the browser to start following the instructions?

Think about the human programs.

  • When a human wakes up, she makes some coffee.
  • When someone wants to buy something, Xena works out the total price.
  • When someone wants to visit you, they follow your driving instructions.

An event is something that starts a program running. Events for people are waking up, someone wanting to buy something, someone wanting to visit you, etc. There are lots of events. The phone rings (you bark), someone comes to the door (you bark), you’re hungry (you bark), you’re tired (you sleep), and so on.

Web browsers have events, too. Things that happen. Like the user clicks the Compute total button. Or types something.

On the page you’re looking at now, click a + sign in the lesson tree is an event that runs some code. Another event is moving the mouse over the dog logo in the top left of the page (try it).

An event is said to trigger a program. When you attach a program to an event, you’re binding the program to the event.

Summary

  • Your Web browser is like a human. You give it instructions, just like you give instructions to a human.
  • The browser follows instructions, just like a human would.
  • You have to know what instructions the browser can follow. Just like you have to know what language the human speaks.
  • Events are things that happen, like someone clicking a button. You bind programs to events. Events trigger programs.

What now?

In the next lesson, let’s see how you can include JS code on a Web page.


How to...

Lessons

User login

Log in problems? Try here


Dogs