Tutorials

Learn web design and programming with our free video and text tutorials.

Javascript Variables Tutorial

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:

  • Variable names in javascript are case-sensitive. The variable names firstvariable, FirstVariable and FIRSTVARIABLE are all different.
  • Variable names must begin with a letter or the under-score character (_)

There are four different type of variables in javascript:

  • Integer variables
  • Floating-point variables
  • String variables
  • Boolean variables

Integer variables

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

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

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

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".

Declare (create) and assign values to variables

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://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