The Power of Javascript: Basic Types of Data - Boolean Data, Yes or No (Page 3 of 4 )
Besides number and string data types, there's another basic data type, which is called Boolean. A Boolean value has only 1 of 2 values (unlike the number and string data types, which have a wide range of values); these values are true and false. True means yes, false means no. We can also think of it from the computer's perspective as 1 for true and 0 for false; computers understand only 1s and 0s because a computer is based on the electrical circuits which has two states, on (true) or off (false). In programming you need a way to test a condition (for example, the condition can be whether the value of x is equal to 5) and possibly move in two different directions based on the result: if the condition is true you will perform some action, and if it's false you will perform another action. We will be looking at the use of Boolean values more when we discuss decision making with Javascript.
Examples
Let's look at an example to practice working with data types and see how we can use variables in action. Copy the following code to a file and save it with the extension .html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<script language="JavaScript" type="text/javascript">
var aNumber;
document.write("The variable aNumber = "+ aNumber + "<br>");
aNumber = 123;
document.write("The variable aNumber = "+ aNumber + "<br>");
aNumber = "I'M NEW TO JAVASCRIPT";
document.write("The variable aNumber = "+ aNumber + "<br>");
</script>
</head>
<body>
</body>
</html>
Load the page in IE and this is what you will get:
Let's walk through the code step-by-step. The statement var aNumber instructs the interpreter to allocate memory space for a variable. We call this statement variable declaration. At this point the value of the variable is undefined. undefined is a special value in Javascript which means that the variable has not been assigned any value yet (the variable has no value yet), so Javascript assigns the value undefined to such a variable until you assign a real value into the variable. For now escape the statement document.write() and I will get back to it shortly.
The statement aNumber = 123; means put or place the value 123 into the variable aNumber. At first you may get confused and think that we are comparing the variable aNumber to the value 123 using the equal sign, but it's not like that. The equal sign is used in Javascript to assign the value at the right side to the variable at the left side; we call it the assignment operator (operators are discussed in the next few articles). When the Interpreter executes this statement, it assigns the value 123 to the variable aNumber. Again escape the statement document.write().
The statement aNumber = "I'M NEW TO JAVASCRIPT"; assigns a new value to the variable aNumber. The previous value (123) is destroyed and replaced by the new value. What you should note here is that we have used one variable to store a number data type and then a string data type just by assigning the value of those types to the variable. This means that the value that we assign to a given variable determines the variable type. For example, suppose that we have extended the above example to assign aNumber a boolean value.
<script language="JavaScript" type="text/javascript">
var aNumber;
document.write("The variable aNumber = "+ aNumber + "<br>");
aNumber = 123;
document.write("The variable aNumber = "+ aNumber + "<br>");
aNumber = "I'M NEW TO JAVASCRIPT";
document.write("The variable aNumber = "+ aNumber + "<br>");
aNumber = true;
document.write("The variable aNumber = "+ aNumber + "<br>");
</script>
As you can see, we have assigned the value true to the variable aNumber, so this variable is now holding a Boolean value, and the Web page will look like the following figure:
Let's get back the the first document.write() statement which is:
document.write("The variable aNumber = "+ aNumber + "<br>");
For now think of the document.write() as a functionality provided by Javascript that takes a string value set between the parentheses and writes it to the Web page. The value "The variable aNumber = " is just a string value, with nothing interesting about it. The aNumber is the variable that now has the value undefined because we didn't assign it a value yet. The string value "<br>" is just another string value.
The plus symbol here is used add numbers, as you know, but it has another use in our example. When you use the + symbol with strings, it produces a string value that contains the strings of both sides of the symbol (which we call concatenation). If you have the values "I'm " and "happy" and you want to concatenate them "I'm " + "happy" the produced value will be "I'm happy". In our example the produced value is "The variable aNumber = undefined <br>", note that the value undefined is included in the string value and not the variable name itself. The Javascript interpreter puts the value of the variable aNumber in the above statement so it will look like this:
"The variable aNumber = "+ undefined + "<br>"
Then it concatenate all the values into one big string:
"The variable aNumber = undefined<br>"
Then the interpreter sends this value to the browser. Note that in the Web page we don't see the value <br> because it's an HTML tag, and the browser will understand that you want to put <br> after the string value. To prove that, we will replace the doument.write() functionality with alert() because alert displays a message box to the user. Message boxes don't understand what <br> means, and it will include them in the string values. Replace the following code, save the file, and then load the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<script language="JavaScript" type="text/javascript">
var aNumber;
alert("The variable aNumber = "+ aNumber + "<br>");
aNumber = 123;
alert("The variable aNumber = "+ aNumber + "<br>");
aNumber = "I'M NEW TO JAVASCRIPT";
alert("The variable aNumber = "+ aNumber + "<br>");
</script>
</head>
<body>
</body>
</html>
You will get the following three message boxes:
Next: One Small Change >>
More JavaScript Articles
More By Michael Youssef
