Learning to Code in HTML and JavaScript

By Terry Hawthorne
Director of Technology
Smyth County Public Schools

A text editor is a program that enables you to edit plain text. Unlike a word processor, a text editor does not have the ability to format text in different sizes or styles. A text editor's primary purpose is to edit programming code. If you have a Windows computer, you can use the included Notepad program, but I recommend you download the free Notepad++ or Notetab Lite programs, which are much more capable. OS X computers come with a text editor called TextEdit. Caret is a good choice for Chromebooks. If you using a Linux computer, chances are you already know about text editors.

This tutorial is a brief introduction to coding in HTML and JavaScript. HTML (HyperText Markup Language) is the language of web pages. JavaScript is a scripting language that you can embed within HTML pages. To begin, you need a basic HTML file. Open your favorite text editor and copy and paste the following HTML code into it.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen">
  </head>

<body>
<h1>Hello World!</h1>
</body>
</html>

Create a new folder on your desktop named testpages, then save the file you just created as index.htm in the testpages folder. When you double-click index.htm, your default web browser should open and display your page, which will simply read "Hello World!" in your browser's default font for h1 elements. An element describes the logical function of a piece of content in your web page. An h1 element is one of the six HTML header elements: h1 through h6. Think of the header elements as forming the framework for an outline in your web page. For example, the top-most sections of your web page should be h1 elements. The first sublevel would be h2, and so on. Another common web page element is the paragraph, or p element. Using your text editor, add a paragraph to your web page below the h1 element. Enclose the paragraph content within <p> and </p> element tags.)

Adding Interactivity With JavaScript

JavaScript can add interactivity to web pages. For example, when you click the following button, JavaScript will generate a random number and display the number in the box below the button. Try it. Notice that each time you click the button, JavaScript displays a different random number.

Here is the code that generates and displays the random number. Add it to your web page below the paragraph you previously added. Then save your page and reload it in your browser.


<button onclick="RandomNumberGenerator()">Display a random number</button>

<p id="demo1" class="numbers"></p>

<script>
function RandomNumberGenerator() {
    var randomNumber = Math.random();
    document.getElementById("demo1").innerHTML = randomNumber;
}
</script>

If you entered everything correctly, your web page should now have a button that generates random numbers. If it doesn't, compare what you have entered against the preceding code. JavaScript is a case-sensitive language, so make sure that you have typed everything exactly as it appears above.

How It Works

JavaScript includes a Math object that has a number of methods. (Don't worry too much right now if you don't understand what an object or a method is. For the purposes of this tutorial, you can assume that the Math object's methods are like built-in functions.)

You can access any of the Math object's methods with this syntax: Math.methodName(); for example:

You don't have to terminate JavaScript statements with a semicolon, but it is a recommended practice.

var randomNumber = Math.random();

The preceding JavaScript statement declares a new variable named randomNumber and assigns the random number generated by Math.random() to that variable. The JavaScript var keyword is used to declare a variable.

The Math.random() method generates a random decimal number between 0 (inclusive) and 1 (exclusive), as you can see when you click the "Display a random number" button. What if you to generate whole random numbers, say between 0 and 10? You could multiply Math.random() by 10:

var randomNumber = Math.random() * 10;

The JavaScript Math object also has a round method: Math.round(). Are you puzzled by why I use the floor function instead of the round function? I did use the round function at first, but noticed that 0 and 10 rarely occurred when using round. Here's why. Math.random() generates a random number between 0 and 0.9999.... If we multiply that number by 10, so that we get numbers greater than 1, we will get some numbers in the range of 0 to 0.49, some more numbers in the range of 0.50 to 1.49, 1.5 to 2.49…8.5 to 9.49, and 9.5 to 9.999… The only random numbers that will round to 0 are those in the range of 0 to 0.49, and the only ones that will round to 10 are those from 9.5 to 9.99. In other words, the range of numbers that will round to 0 or 10 is only half the size of the range of numbers that will round to 1 through 9. That explains why the two extremes don't appear as frequently as all of the numbers in between them. Using the floor function solves that problem, but raised another issue, which I resolved by multiplying by 11 instead of 10. I will leave it up to you to figure that one out.

We can use another one of the Math object's methods to get rid of the numbers to the right of the decimal: Math.floor(), like this:

var randomNumber = Math.floor(Math.random() * 11);

Math.floor() rounds a number down to the nearest whole number. The preceding code also demonstrates how you can nest one Math method inside of another. In this case, JavaScript first generates a random number between 0 and 1, then multiplies it by 11, then submits that value to the Math.floor() function. Note that when you use this method, it is possible to generate the same random number more than once in a row.

Now you know how to generate random whole numbers within a specific range. How can this help you select a random word from a list of words? You need to construct a list of words that are indexed by whole numbers. By indexed, I mean a whole number is assigned to each word, and you can retrieve that word by the number assigned to it. The number assigned to the word is called its index. JavaScript and most other programming languages have a data structure that lets you accomplish this easily: an array. An array is a variable that can contain multiple values, like this:

var weekDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

If we wanted to retrieve Sunday from the list and assign it to a variable named dayOfTheWeek, we could write:

var dayOfTheWeek = weekDays[0];

JavaScript arrays start numbering with 0; therefore weekDays[1] equals Monday, and weekDays[6] equals Saturday. Note that we when create the array, we enclose its values in square brackets and separate each one by a comma. If the values are strings of text, we enclose each one within either single or double quotes. The comma separator must go outside the quote marks.

An array can also contain numbers:

var powersOfTwo = [2,4,8,16,32,64,128,256,512,1024];

An array can also contain variables. In the following example, I create 14 variables (p1 through p14). Each of these variables represents the HTML (HyperText Markup Language) code for inserting a picture into a web page. Then I create an array named pix, and assign those variables to the array. Then I create a custom function called RandomPictureGenerator. That function consists of two lines of code. The first line generates a random whole number between 0 and 13, using code that you learned above. The second line—the one that begins with "document.getElementById..."—inserts a random picture from the pix array into an HTML division named picture. Think of an HTML division as a box-like object. One of the properties of a division is its innerHTML, which is just the HTML code that appears inside of that division. By replacing the picture division's innerHTML with one of the variables from the pix array, I can make a random picture appear in the picture division. You can see the code in action by clicking the Display Picture button. You may need to scroll down to see the entire picture.


var p1 = "<img src='hourofcode.jpg'>";
var p2 = "<img src='state_dar_winner.jpg'>";
var p3 = "<img src='pottery.jpg'>";
var p4 = "<img src='ses_heart.jpg'>";
var p5 = "<img src='ces_aerial.jpg'>";
var p6 = "<img src='gingerbread.jpg'>";
var p7 = "<img src='matt.jpg'>";
var p8 = "<img src='mes_arbor_day_2015.jpg'>";
var p9 = "<img src='culinary-comp.jpg'>";
var p10 = "<img src='hourofcode2.jpg'>";
var p11 = "<img src='3dprinting.jpg'>";
var p12 = "<img src='inverter.jpg'>";
var p13 = "<img src='state_forensics_mshs.jpg'>";
var p14 = "<img src='summer_patterson.jpg'>";

var pix = [p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12,p13,p14];

function RandomPictureGenerator() {
    var randomNumber = Math.round(Math.random() * 13);
    document.getElementById("picture").innerHTML = pix[randomNumber];
}

The actual code that displays the picture is slightly different from the above code. I modified it so that the random number is also displayed. Make sure that you understand which random number corresponds to each picture. If you want to see the actual code underlying this page, just right-click the page and select "View Page Source." This will also let you see how I created the buttons on this page.

To learn more about coding HTML and JavaScript, please visit the World Wide Web Schools website and work through its HTML, CSS, and JavaScript tutorials.

A random picture that has appeared on www.scsb.org will appear here when you click the Display Picture button.