JavaScript is a simple, powerful, and popular programming language that is built into web browsers. Learning JavaScript is especially useful if you are a web designer and already know HTML and CSS, because it is used to make web pages interactive. However, JavaScript is not limited to making interactive web pages; you can also use it for server-side programming using a framework like Node.js.
In this tutorial you'll learn some JavaScript basics, including two basic computer programming concepts—calculations and variables. If you want to learn to make interactive websites using JavaScript, you need to learn core computer programming concepts. Using HTML and JavaScript, you can change the contents of HTML elements in response to user events, such as a button click.
JavaScript programs are a sequence of statements or commands that are run by a web browser in the order they are written. The simplest JavaScript program can be a single line long, while large programs can be thousands of lines long. The computer programming tradition is that the first program you learn is one that outputs the message: Hello World. The code below is an example of a JavaScript Hello World program wrapped in a few lines of HTML, which enables it to run in a web browser as a valid web page:
<!doctype html>
<title>JavaScript Test</title>
<script>
alert('Hello World!');
</script>
In the example above, the JavaScript code is the line between the
<script> and </script>. This line contains a JavaScript alert command that instructs the web browser to display a message box that contains the text between the quotation marks. Note that in JavaScript, the quotes around the message can be single or double quotes, as long as they are both the same.
If you are familiar with HTML, you may be wondering why the example does not contain
<html>, <head> and <body>tags. In actual fact, these tags are optional in both HTML4 and HTML5. The examples in this tutorial follow the Google style guide, which recommends leaving out optional tags.
To run this program, follow these steps:
- Copy the five lines of code and paste them into a text editor (such as Dreamweaver or Notepad)
- Save the file as test.html
- Open the file using your favorite web browser
- A message box that says Hello World! appears as soon as the page loads
- If you'd like, you can edit test.html to change the message that appears in the message box, then save your code and click F5 while your web browser is active to refresh the page.
Notice that the alert statement ends with a semi-colon. In JavaScript, the semi-colon is optional—unlike programming languages such as C and Java. However, since there are a few cases where leaving off the semi-colon causes problems, it is recommended that you a semi-colon after each command.
Another way to write the Hello World program is to display text directly on our web page. You can accomplish this using the following code:
<!doctype html>
<title>JavaScript Test</title>
Hello USA
<script>
document.body.innerHTML = 'Hello World';
</script>
When this web page loads, the browser first displays the text:
Hello USA. Then, the browser instantly runs the line of JavaScript between the script tags, which replaces the text with the phrase: Hello World. This happens so quickly, the change isn’t even visible to the user. It works because document.body.innerHTML is a special bit of JavaScript code that accesses the contents of the entire web page. Using document.body.innerHTML = 'Hello World' sets the contents of the web page to Hello World. This may seem confusing at first, but once you understand the basics of JavaScript it begins to make sense.
Calculating values in JavaScript is similar to calculating sums in a spreadsheet application like Microsoft Excel. For example, the * symbol represents multiplication in both JavaScript and Excel. However, there are some differences. For example, in Excel 2^4 means 2 to the power of 4, which equals 16. In JavaScript, ^ means exclusive bitwise OR, but that's a topic for a more advanced tutorial.
All the regular math rules regarding order of operation and the use of parenthesis (or round brackets) also apply in JavaScript. So, for example, multiplication (*) or division (/) calculations occur before addition (+) and subtraction (–). The following JavaScript code example displays the result of a simple calculation in an alert box:
alert(32 + 9 * 1.8);
The calculation above converts the current temperature in New Zealand from Celcius to Fahrenheit and then displays the answer in an alert box. If you want more details on performing calculations in JavaScript, review Code Avengers Lessons 2-5.
In common practice, it is unusual to perform JavaScript calculations with fixed numbers. Generally speaking, it is more likely that you'll use JavaScript calculations based on values entered by a web site visitor. In the next section, you'll see how to do that.
One way you can get input from a visitor on the site involves using the JavaScript
prompt command. For example, you could use this line of code:prompt('What is the temperature in Celcius?');
The code above displays a prompt box, which displays a question. The prompt box contains a text field for the visitor to enter their answer, along with an OK and Cancel button. To see what a prompt box looks like, paste the code inside the script tags of your HTML page from the previous section and then run the code in your browser.
The boxes displayed with prompt and alert commands look plain. They are displayed differently in every web browser. As a result, they are only generally only used when testing JavaScript programs. Displaying nice looking alert boxes requires a lot of HTML, CSS, and JavaScript code. Thankfully, web developers have already created alert boxes and have posted their code online for you to use for free! If you want to see some examples, check out the User Interface page on the jQuery UI site. Using this toolkit requires a bit of JavaScript knowledge to implement the dialog boxes in your own projects, but it is a great resource.
Creating variables
In the previous section you learned how to ask a user a question, but how do you store and use their answer? That is where variables come in. Variables are short hand placeholders used to store information that is retrieved and modified later in your program. For example, the following line of code creates a variable named temperature and assigns it the numeric value 12:
var temperature = 12;
Lines of code that create variables begin with var (which is short for variable). This is followed by the name of the variable, then the = symbol, followed by the value to be stored. In math = means that two things have the same value, such as
4 * 3 = 2 * 6 = 12. In JavaScript programming, the equals sign means the value is assigned. If you read the line of code above in regular English, you would say: Create a variable called temperature and assign it the value of 12.
To store an answer that a visitor enters in a prompt box, you can use code that looks like this:
var temperature = prompt('What is the temperature in celcius?');
alert(32 + temperature * 27);
This code displays a prompt box with the question. When a visitor enters an answer and clicks OK, the answer is stored in the Fahrenheit temperature variable. The next line of code uses the variable to calculate the equivalent of the temperature and display the value in an alert box.
Note: If a visitor clicks the Cancel button, a special value called null is stored in the variable. To find out more about null values, check out Code Avengers Lesson 17.
JavaScript doesn't just use variables to store user input. It also employs variables to store constant values that never change. The following code example uses a constant variable (named with capital letters):
var KILOS_TO_POUNDS = 2.2;
var weight = prompt('What is your weight in kilos?');
alert(KILOS_TO_POUNDS * weight);
In the code above, the first line creates a constant variable that stores the number of pounds in a kilogram. The next line asks the user to enter their weight and stores the value they enter in a variable named weight. The final line calculates the weight in pounds, and then displays the result of the calculation in an alert box.
Notice that the variable that stores the number of pounds in a kilogram uses all capital letters. When you write JavaScript, it is not required that you name constant variables in all caps, but it is recommended. When you see variable names in all capitals, you can tell at a glance that the value stored in the variable is constant and won't change.
Constant variables make JavaScript code easier to read. While you could just write 2.2, which requires less typing, the names you assign constant variables make your code easier to understand. For example, if you read the
code alert(4 + 12 * 27); you are unlikely to know what is being calculated. However, the following code makes the function more obvious:var MONTHS_IN_YEAR = 12;
var myAgeInYears = 27;
var monthsSinceMyLastBirthday = 4;
alert(monthsSinceBirthday + myAgeInYears * MONTHS_IN_YEAR);
The code example above calculates the number of months since I was born.
Note: To learn about other reasons for using variables, see Code Avengers Lesson 5.
Variables are not only designed to store numbers. Variables can also store sequences of characters, which are called strings in computer programming. A variable that stores text is called a string variable. In JavaScript code, a sequence of characters surrounded by quotes is called a string literal.
The following line of code creates a string variable called name and assigns it the text Mike.
var name = 'Mike';
The code below asks the visitor to enter their name and then outputs a message that greets them by name:
var name = prompt('What is your name?');
alert('Hello ' + name + ', nice to meet you');
If I ran the code above and entered my name, the message would say Hello Mike, nice to meet you. The second line of code above joins literal strings and a string variable together using the plus (+) symbol. In JavaScript the plus (+) symbol has two uses. When used with literal numbers and number variables the numbers are added, like this:
2 + 4 is 6. But when the plus (+) symbol is used with strings, they are joined together, like this:'Code' + 'Avengers'is'CodeAvengers'.Combining calculations with strings
Simply displaying the answer to a calculation in an alert box is not very useful. It is more helpful to also display text that explains the number to visitors. The following code example illustrates how to display a text string:
var KILOS_TO_POUNDS = 2.2;
var weight = prompt('What is your weight in kilos?');
alert('Your weight in pounds is ' + KILOS_TO_POUNDS * weight);
The first two lines in this code are the same as before. In this version, a string literal is included before the calculation on the third line. When you run this code and enter your weight (73), the alert box will appear and display the statement: Your weight in pounds is
160.6.
When you review the third line, remember that multiplication (
*) is always calculated before addition (+) in JavaScript. In this example, the browser first computes POUNDS_TO_KILOS * weight, which in my case is 160.6. Then it joins the answer with the string literal to create the sentence 'Your weight in pounds is 160.6' and to display the text in an alert box.
Another important point to consider is that the weight variable on the second line actually stores a string and not a number. User input entered in prompt boxes are always stored as a string. In this example, the calculation works anyway, because when the multiplication (
*) symbol is used between a string and a number (or another string), the string is automatically converted to a number. So '12' * 5 or '12' * '5' or 12 * 5 will all evaluate to the number 60. If one of the strings cannot be converted to a number, the calculation will fail. If you ran the line: 'blah' * 5 and'Five' * 5, both calculations will fail and the result will be a special JavaScript value called NaN, which means: not a number.
Things work a little differently with the addition (
+) symbol. If a plus (+) sign is used with a number and a string, they are joined together, regardless of whether or not the string can be converted to a number. So '12' + 5 or '12' + '5'or '12' + 5 will all provide the result of the string '125'. When writing JavaScript, be sure to watch out for this behavior.
Note: To get a better understanding of adding strings and numbers, follow along with Code Avengers Lesson 9.
In this section, you'll learn how you can use prompts and variables to change the background color of a web page. The code example below creates a web page with two buttons. If the visitor clicks the Change Color button, a prompt appears that asks the visitor to enter a background color. After the visitor enters a color and clicks OK, the background color of the web page is updated. If the visitor clicks the Undo Color button, the background color of the web page switches back to the previous color. Try running the code below in a browser to test the buttons.
<!doctype>
<script>
var oldColor = 'black';
function changeColor() {
oldColor = document.body.style.backgroundColor;
var newColor = prompt('Enter a color:');
document.body.style.backgroundColor = newColor;
}
function undoColor() {
var newColor = oldColor;
oldColor = document.body.style.backgroundColor;
document.body.style.backgroundColor = newColor;
}
</script>
<button onclick='changeColor()'>Change color</button>
<button onclick='undoColor()'>Undo color</button>
If you are new to JavaScript, you may be unfamiliar with the word function. In JavaScript, a function keyword marks the beginning of a section of code that runs when an event occurs, such as a button click. The code below the line
function changeColor() { stores the current background color in the oldColor variable, and then asks the visitor to enter a new background color, which it uses to set the new background color. The codedocument.body.style.backgroundColor can access the current background color of the page.
The code examples in this tutorial illustrate how to run a basic JavaScript program in a web browser using a minimal HTML template. You also learned how to perform calculations and work with variables. You saw how to use variables to store a visitor's entry to questions in a prompt box, and then use the variable value in a calculation. If you would like to practice these concepts, review Code Avengers Lessons 1-10.
Or if you prefer, start learning how to use if statements and loops by following along with the remaining lessons in the Code Avengers Level 1 JavaScript course. Visit the Code Avengers website and become a coding superhero!
