Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
Variables in javascript are like temporary holding containers that hold values or expressions. The purpose of a variable is to store information in it so that it can be used later.
The value of a variable can be changed during the execution of a script.
There are a few rules when naming variables:
There are four different type of variables in javascript:
Integer variables can be either positive or negative whole numbers and can have operations performed on them, for example, addition, subtraction, division, multipilication, etc.
Floating-point variables are numbers that include a decimal point or are a fraction and can also have standard math operations performed on them.
String variables can be a combination of letters, numbers and/or characters are usually designated with a set of single of double quotation marks.
Boolean variables can only hold the value types "true" or "false" and used to the validity of a statement. The number "0" is also used to represent the value "false" and the number "1" is also used to represent the value "true".
Javascript is a loosely typed language, which means that you do not have to explicitly declare each variable type, and different variable types can be combined without an error. All you have to do is type a variable name, and its type is automatically set ased on the type of value that it holds.
Creating variables in javascript is also referred to as "declaring" variables.
The "var" statement is used to declare variables in javascript. The javascript code below shows you how to declare a variable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<script type="text/javascript" language="javascript">
var a;
var b;
</script>
</body>
</html>
Declaring a javascript variable by itself does not assign a value to the variable. A variable can be assigned a value to it when it is declared, or after.
The javascript code below shows you how to assign a value to a variable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<script type="text/javascript" language="javascript">
var a="one";
var b=1;
</script>
</body>
</html>
The variable a now holds the value of "one" and the variable b now holds the value 1.
You can assign values to variables without having to first declare the variable. If this is done, the variable is automatically declared.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<script type="text/javascript" language="javascript">
a="one";
b=1;
</script>
</body>
</html>
The javascript code above is the same as the code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<script type="text/javascript" language="javascript">
var a="one";
var b=1;
</script>
</body>
</html>
The code below shows you how to change the value of a variable during a script.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<script type="text/javascript" language="javascript">
var linebreak = "<br />"
var text = "Hello World!"
document.write(text)
document.write(linebreak)
text = "I know javascript!"
document.write(text)
document.write(linebreak)
text = "Thank You WebDevelopmentTutorials.com"
document.write(text)
</script>
</body>
</html>
The javascript code above displays:
Hello World!
I know javascript!
Thank You WebDevelopmentTutorials.com