Home arrow JavaScript arrow Page 3 - The Power of Javascript: Basic Types of Data
JAVASCRIPT

The Power of Javascript: Basic Types of Data


Javascript interpreters understand two different, basic types of data: numbers and character strings. But interpreters only understand these data types when they are presented in certain ways. This article, the third in a series, will explain what these types of data are, and how to handle them.

Author Info:
By: Michael Youssef
Rating: 4 stars4 stars4 stars4 stars4 stars / 30
July 12, 2005
TABLE OF CONTENTS:
  1. · The Power of Javascript: Basic Types of Data
  2. · Data as Numbers
  3. · Boolean Data, Yes or No
  4. · One Small Change

print this article
SEARCH DEVARTICLES

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:


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials