INFORMATION SHEET NUMBER 2

Data Types and Variables

One of the main uses of computers is to process and display information. By processing
we mean that the information is modified, interpreted, or filtered in some way by the
computer.

Data
- an item of information. This data comes in all sorts of forms, such as numbers,
text, dates
and so on.

Types of Data in JavaScript

Data can come in many different forms, or what we term types. Some of the data types
that JavaScript handles you’ll recognize from the world outside programming, for
example, numbers and text. Other data types are a little bit more abstract and are used
to make programming easier.

Some programming languages are strongly typed languages. In these languages,

whenever we use a piece of data we need to explicitly state what sort of data we are
dealing with, and use of that data must follow strict rules applicable to its type. Ex. We
can’t add a number & a word together.

JavaScript on the other hand, is a weakly typed language and is a lot more forgiving
about how we use different types of data. When we deal with data, we often don’t need
to specify what type of data it is, JavaScript will work it out for itself.

Commonly used Data Types

1. Numerical
2. Text
3. Boolean

Numerical Data

Numerical data comes in two forms:

▪ Integers – whole numbers. These numbers can be positive or negative.

▪ Floating-point – fractional numbers. Like integers, they can be positive or negative.

Text Data

String – another term for one or more characters of text is a string.

We tell JavaScript that text is to be treated as text and not as code simply by enclosing
it inside quote marks (“).

Example:
“Hello World” ‘Hello’
“A” ‘B’
Escape Character

The \ character has a special meaning in JavaScript and is referred to as an escape

character. The \ tells the browser that the next character is not the end of the string, but
part of the text. There are a lot of other special characters in JavaScript, which can’t be
typed in, but can be represented using the escape character in conjunction with other
characters to create escape sequences.

Escape Sequence Character Represented

\b Backspace
\f Form feed
\n New line
\r Carriage return
\t Tab
\’ Single quote
\” Double quote
\\ Backslash
\xNN NN is a hexadecimal number which identifies a character in the Latin-1
character set

Boolean Data

The use of yes or no, positive or negative, and true or false is commonplace in the
‘real’ world. The idea of true and false is also fundamentals to digital computers
themselves; they don’t understand maybes, only true and false. In fact, he concepts of
yes or no is so useful it has its own data types in JavaScript: the Boolean data type. The
Boolean type has two possible values: true for yes and false for no.

The purpose of Boolean data in JavaScript is just the same as in the world outside
programming; it allows us to answer questions and make decisions based on the answer.

Variables - Storing Data in Memory

Data can be stored either permanently or temporarily. All permanent record and
information might be stored in what we called database.

Database
- is use to kept or store permanent record.

There are other cases where we don’t want to permanently store data, but simply want to
keep a temporary note of it, so rather than use a database, we need to use something
called variable.

Variable
- can be used to store temporary data that can be varied.
The names of variable must follow certain rules:

1. Variable names are case sensitive.

2. There are also certain names and characters that you can’t use for your variable
names. Names you can’t use are called reserved words. Reserved words are
words that JavaScript uses itself.
3. Certain characters are also forbidden in variable names. Ex. ampersand (&) and
percent sign (%).

You are allowed to use numbers in your variable names, but the names must not begin

with numbers. Invalid names include:

 with
 99variables
 my%Variable
 theGood&theB

ad Valid names

include:

 myVariables99
 myPercent_Variable
 the_Good_and_the_Bad

Declaring Variables and Giving Them Values

Before you can use a variable, you should declare its existence to the computer using
the var keyword. This warns the computer that it needs to reserve some memory for
your data to be stored in later. To declare a new variable called myFirstVariable you would
write:

var myFirstVariable;

The semicolon at the end of the line is not part of the variable name, but instead is used
to indicate to JavaScript the end of a line of code. Once declared, a variable can be used
to store any type of data.

You put data into your variables, a process called assigning values to your variables, by
using the equals sign (=).

Example:

myFirstVariable = 101;

The = sign has a special name when used to assign values to a variable; it’s called the
assignment operator.
Try It Out – Declaring Variables

<HTML> OUTPUT
<BODY>

<SCRIPT LANGUAGE = JavaScript>

var myFirstVariable;
myFirstVariable = "Hello";
alert(myFirstVariable);

myFirstVariable = 54321;
alert(myFirstVariable);

</SCRIPT>
</BODY>
</HTML>

Assigning Variables with the Value of Other Variables

We’ve seen that we can assign a variable with a number or string, but can we assign a
variable with the data stored inside another variable? The answer is yes, very easily,
and in exactly the same way as giving a variable a literal value.

var myVariable;
var myOtherVariable;
myOtherVariable = 22;

the we can use the following line to assign myVariable with the same value as
myOtherVariable

myVariable = myOtherVariable;

Try It Out – Assigning Variables the Value of Other Variables

<HTML> OUTPUT
<BODY>

<SCRIPT LANGUAGE = JavaScript>

var myVariable;
var myOtherVariable;
myOtherVariable = 22;
myVariable =
myOtherVariable;
alert(myVariable);

</SCRIPT>
</BODY>
</HTML>
<HTML>
<BODY>

<SCRIPT LANGUAGE = JavaScript>

var string1 = "Hello";

var string2 = "Goodbye";

alert(string1);
alert(string2);

string2 = string1;

alert(string1);
alert(string2);

string1 = "Now for something different";

alert(string1);
alert(string2);

</SCRIPT>
</BODY>
</HTML>

Using Data – Calculations and Basic String Manipulation

We’ve seen how to declare variables, and how they can store information, but so far
we’ve not done anything really useful with this. What variables allow us to do is
temporarily hold information that we can use for processing in mathematical
calculations, in building up text messages, or processing words that the user has
entered.

Numerical Calculations

JavaScript has a range of basic mathematical capabilities, such as addition, subtraction,

multiplication, and division. Each of the basic math functions is represented by a symbol,
+, -, *, and / respectively. We call these symbols operators since they operate on the
values we give them. In other words, they perform some calculation or operation and
return us a result.

Expression
- valid combination of operators, constant and variables.
Try It Out – Calculations

<HTML>
<BODY>

<SCRIPT LANGUAGE = JavaScript> OUTPUT

var firstNumber =
15; var
secondNumber = 10;
var answer;
answer = 15/10;
alert(answer);

</SCRIPT>
</BODY>
</HTML>

Operator Precedence

Not all operators are created equal; some have a higher precedence

<HTML>
<BODY>
<SCRIPT LANGUAGE = JavaScript> OUTPUT
var myVariable;
myVariable = 1 + 1 *
2; alert(myVariable);

</SCRIPT>
</BODY>
</HTML>

Precedence order

1. Exponentiation
2. Multiplication and Division
3. Addition and Subtraction

Example1 Example2
<HTML> <HTML>
<BODY> <BODY>
<SCRIPT LANGUAGE= JavaScript> <SCRIPT LANGUAGE=
JavaScript>
var myVariable;
myVariable = 50 + 20 – 10 / 2 * 3; var myVariable;
alert(myVariable); myVariable = 4 + 2 * 3 – 6 * 5;
alert(myVariable);
</SCRIPT>
</BODY> </SCRIPT>
</HTML> </BODY>
</HTML>
Example3 Example4
<HTML> <HTML>
<BODY> <BODY>
<SCRIPT LANGUAGE= JavaScript> <SCRIPT LANGUAGE=
JavaScript>
var myVariable;
myVariable = (15 - 4) *(60 / 10 + 4 * 12 - 50) var myVariable;
+ 60; alert(myVariable); myVariable = 10 * (5 + 10 * 5 /
2); alert(myVariable);
</SCRIPT>
</BODY> </SCRIPT>
</HTML> </BODY>
</HTML>

Try It Out – Fahrenheit to Centigrade

<HTML>
<BODY>

<SCRIPT LANGUAGE = JavaScript>

// Equation is ºC = 5/9 (ºF - 32)

var degFahren = prompt ("Enter the degrees in
Fahrenheit", 50); var degCent;

degCent = 5/9 * (degFahren - 32);

alert(degCent);

</SCRIPT>
</BODY>
</HTML>

Prompt Function
- works in a similar way to an alert( ) function, except that as well as displaying a
message, it also contains a text box in which the user can enter a value.

2 pieces of information to the prompt( ) function:

1. The text to be displayed – usually a question that prompt the user for input.
2. The default value that is contained in the input box when the prompt dialog first
appears

These two pieces of information must be specified in the given order, and separated by a
comma. If you don’t want a default value to be contained in the input box when the prompt
box opens, you should use an empty string (" ") for the second piece of information.
Sample Problem

There are 1000 grams in one kilogram. Create a program that read in weight in grams and
output the equivalent weight in kilograms.

<HTML>
<BODY>

<SCRIPT LANGUAGE = JavaScript>

var grams = prompt ("Enter weight in

grams",""); kg = grams/1000;
alert(kg);

</SCRIPT>
</BODY>
</HTML>