Thursday, 3 July 2014

Chapter 6: JavaScript Variables

JavaScript Variables

In all programs and all programming languages we have to keep track of many pieces of data.           So we create variables to store data inside them.
The variable is a container, its grabbing a little piece of data (information) and giving it a name so we can use it. Creating variables is very easy. Just type var variablename;

EXAMPLE:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var bar;
</script>
</body>
</html>


The name for your variable must be written as one word, no spaces are allowed. It can starts with word, letter, underscore, dollar sign, but you cannot start with number.
The above value hasn’t value, so this variable is undefined.
Now we have to define our variable, to set value.
Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var bar;
bar = 20;
console.log(bar);
</script>
</body>
</html>


The equal sign setting variable bar to 300.
You can also combine them into one statement:
Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var bar = 20;
console.log(bar);

</script>
</body>
</html>

The word var is not required in JavaScript. But leaving var may lead to unexpended behavior.
Variable name are case-sensitive. So var x; and var X; will be different variables.
You can also create multiple variables nested in one line:
Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var bar, head, x, y, foo;
</script>
</body>
</html>

You can assign values to them:
Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var bar = 40, head = "Hello", x = "This is x variable", y = true;
</script>
</body>
</html>



But better practice is to add one variable to one line because it will be hard to read.
Variables can store numbers, Boolean values (true or false, always in lowercase) – you don’t need quotes around them, you can also add piece of text (string) – you can use either double quotes or you can use single quotes, no matter which you use, but don’t mix them. The most common practice is to you double quotes but that’s your own choice.
Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var bar= 500;                   // number in variable
var x = "Hello World";          // Piece if text(String)
var y = true;                   // Boolean value true
var demo = false;               // Boolean value false
</script>
</body>

</html>