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:
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.
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.
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>
</body>
</html>
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.)
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.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
