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. 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
- Variable names must begin with a letter, underscore (
_), or dollar sign ($). - Variable names cannot contain spaces or special characters (other than the underscore and dollar sign).
- Variable names can contain numbers (but not as the first character).
- Variable names are case sensitive.
- 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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>JavaScript Variables</title><link href="style.css" rel="stylesheet" type="text/css"><script type="text/javascript"> //Pop up a prompt var userColor = window.prompt("Enter a color.", "");</script></head><body><p> <span onclick="document.bgColor = 'red';">Red</span> | <span onclick="document.bgColor = 'white';">White</span> | <span onclick="document.bgColor = 'green';">Green</span> | <span onclick="document.bgColor = 'blue';">Blue</span> | <span onclick="document.bgColor = userColor;"> <script type="text/javascript"> document.write(userColor); </script> </span></p></body></html> |
As the page loads, a prompt pops up aski
ng the user to enter a color.
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:
- The message in the dialog box (e.g., “Enter a color.”).
- 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 textbox. If the Cancel button or the close button (the red X) is pressed, the prompt returns null. In JavaScript, null is datatype with only one value: null. It represents a value that we don’t know or that is missing. 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.
|
1
2
3
4
5
|
<span onclick="document.bgColor = userColor;"> <script type="text/javascript"> document.write(userColor); </script></span> |
