JavaScript Variables

Welcome to our free JavaScript tutorial. This tutorial is based on Webucator's Introduction to JavaScript Training course.

Contact Us or call 1-877-932-8228
JavaScript Variables

JavaScript Variables

Variables are used to hold data in memory. JavaScript variables are declared with the var keyword.

var age;

Multiple variables can be declared in a single step.

var age, height, weight, gender;

After a variable is declared, it can be assigned a value.

age = 34;

Variable declaration and assignment can be done in a single step.

var age = 34;

A Loosely Typed Language

JavaScript is a loosely typed language. This means that you do not specify the data type of a variable when declaring it. It also means that a single variable can hold different data types at different times and that JavaScript can change the variable type on the fly. (This "casual" approach to typing can lead to difficulties in writing and maintaining large applications - tools like TypeScript offer a solution to this challenge.)

For example, the age variable above is an integer. However, the variable strAge below would be a string (text) because of the quotes.

var strAge = "34";

If you were to try to do a math function on strAge (e.g., multiply it by 4), JavaScript would dynamically change it to an integer. Although this is very convenient, it can also cause unexpected results, so be careful.

Variable Naming

  1. Variable names must begin with a letter, underscore (_), or dollar sign ($).
  2. Variable names cannot contain spaces or special characters (other than the underscore and dollar sign).
  3. Variable names can contain numbers (but not as the first character).
  4. Variable names are case sensitive.
  5. You cannot use keywords (e.g., window or function) as a variable name.

Storing User-Entered Data

The following example uses the prompt() method of the window object to collect user input. The value entered by the user is then assigned to a variable, which is accessed when the user clicks on one of the span elements.

Code Sample:

<meta charset="UTF-8">
<title>JavaScript Variables</title>
<link href="style.css" rel="stylesheet">
	//Pop up a prompt
	var userColor = window.prompt("Enter a color.", "");
	<span onclick=" = 'red';">Red</span> |
	<span onclick=" = 'white';">White</span> |
	<span onclick=" = 'green';">Green</span> |
	<span onclick=" = 'blue';">Blue</span> |
	<span onclick=" = userColor;">

Code Explanation

As the page loads, a prompt pops up asking the user to enter a color.Prompt

This is done with the prompt() method of the window object. The prompt() method is used to get input from the user. It takes two arguments:

  1. The message in the dialog box (e.g., "Enter a color.").
  2. The default value that appears in the text box. In the example above this is an empty string (e.g., "").

If the OK button is pressed, the prompt returns the value entered in the text box. If the Cancel button or the close button (the red X) is pressed, the prompt returns null. The line below assigns whatever is returned to the variable userColor.

var userColor = window.prompt("Enter a color.", "");

A script block with a call to document.write() is then used to output the color entered by the user. This output is contained within a span element, which has an onclick event handler that will be used to turn the background color of the page to the user-entered color.

<span onclick=" = userColor;">
	<script type="text/javascript">

This tutorial is based on Webucator's Introduction to JavaScript Training Course. We also offer many other JavaScript Training courses. Sign up today to get help from a live instructor.