Saturday, September 30, 2023

Using JavaScript Variables and Built-In Functions

Excerpted from Chapter 2, JavaScript 2nd Edition: A Practical Guide To Interactive Web Pages from No Starch Press

With JavaScript you can update the content on your pages automatically–every day, every hour, or every second. In this chapter, I’ll focus on a simple script that automatically changes the date on your web page.

Along the way you’ll learn:

  • How JavaScript uses variables to remember simple items such as names and numbers
  • How JavaScript keeps track of more complicated items such as dates
  • How to use JavaScript functions to write information to your web page

Before getting into the nuts and bolts of functions and variables, let’s take a look at a couple of examples of web pages that automatically update themselves, starting with the European Space Agency. As you can see in Figure 2-1, the ESA’s home page shows you the current date. Rather than change the home page every day, the ESA uses JavaScript to change the date automatically.

An even more frequently updated page is the home page of the Book of JavaScript website, which updates the time as well as the date (see Figure 2-2). You don’t have to sit in front of your computer, updating the dates and times on your websites. JavaScript can set you free! The ability to write HTML to web pages dynamically is one of JavaScript’s most powerful features.

To understand how to update the date and time on the page, you’ll first have to learn about variables, strings, and functions. Your homework assignment at the end of this chapter will be to figure out how to add seconds to the time.

Variables Store Information

Think back to those glorious days of algebra class when you learned about variables and equations. For example, if x = 2, y = 3, and z = x + y, then z = 5. In algebra, variables like x, y, and z store or hold the place of numbers. In JavaScript and other programming languages, variables also store other kinds of information.

Syntax of Variables

The syntax of variables (the rules for defining and using variables) is slightly different in JavaScript from what it was in your algebra class. Figure 2-3 illustrates the syntax of variables in JavaScript with a silly script that figures out how many seconds there are in a day.

NOTE: Figure 2-3 does not write the results of the JavaScript to the web pageI’ll explain how to do that in Figure 2-4.

<html><head><title>Seconds in a Day</title>

<script type = “text/javascript”>

<!– hide me from older browsers

X var seconds_per_minute = 60; var minutes_per_hour = 60;
var hours_per_day = 24;

Y var seconds_per_day = seconds_per_minute * minutes_per_hour * hours_per_day;

// show me –>

Z </script> </head> <body>

<h1>Know how many seconds are in a day?</h1>

<h2>I do!</h2>



Figure 2-3: Defining and using variables

There’s a lot going on here, so let’s take it line by line. Line X is a statement (a statement in JavaScript is like a sentence in English), and it says to JavaScript, ‘Create a variable called seconds_per_minute and set its value to 60.’ Notice that Xends with a semicolon. Semicolons in JavaScript are like periods in English: They mark the end of a statement (for example, one that defines a variable, as above). As you see more and more statements, you’ll get the hang of where to place semicolons.

The first word, var, introduces a variable for the first time, you don’t need to use it after the first instance, no matter how many times you employ the variable in the script.

NOTE: Many people don’t use var in their code. Although most browsers let you get away without it, it’s always a good idea to put var in front of a variable the first time you use it. (You’ll see why when I talk about writing your own functions in Chapter 6.)

Naming Variables

Notice that the variable name in Xis pretty long–unlike algebraic variables, it’s not just a single letter like x, y, or z. When using variables in JavaScript (or any programming language), you should give them names that indicate what piece of information they hold. The variable in Xstores the number of seconds in a minute, so I’ve called it seconds_per_minute.

If you name your variables descriptively, your code will be easier to under stand while you’re writing it, and much easier to understand when you return to it later for revision or enhancement. Also, no matter which programming language you use, you’ll spend about 50 percent of your coding time finding and getting rid of your mistakes. This is called debugging–and it’s a lot easier to debug code when the variables have descriptive names. You’ll learn more about debugging in Chapter 14.

Popular Articles