CIS 179 – Web Script Programming

CIS 179 – Web Script Programming

Lecture Notes

Tutorial 3 - Data Types and Operators

Data Types

Primitive data types can contain only a single value.
JavaScript supports five primitive data types: Integer numbers, Floating-point numbers, Boolean, String and Null
JavaScript is a loosely-typed programming language.
Be very, very careful when typing variable names. A misspelled name can easily result in a new variable being created that can cause some difficult to find bugs.
The data type of variables in JavaScript can change during the course of program execution. (This is not a good idea and should be avoided if possible.)
JavaScript provides the typeof() method that can be used to determine the type of data contained in a variable. typeof() returns the following text: Number, String, Boolean, Object, Function and Undefined for each corresponding data type.

Numeric Data Types

JavaScript supports integers and floating-point numbers.
An integer is a positive or negative number with no decimal places.
Integer values in JavaScript range from -9 trillion (-2⁵³) to 9 trillion (2⁵³).
A floating-point number contains decimal places or is written using exponential notation.
Floating point values range from approximately ± 1.79 x 10³⁰⁸ to ± 5 x 10^-324.

Boolean Values

Boolean values are either true or false.
In JavaScript only the words true and false may be used to indicate Boolean values.

Strings

A text string contains zero or more characters surrounded by double or single quotation marks.
When you want to include quoted text as part of a string you use one type of quote mark to enclose the string and the other quote mark inside the string. (‘This is a "example" of quoted text’).
An escape character is used to prefix special characters.
The backslash (\) is the JavaScript escape character. The following are the JavaScript escape sequences:

Escape Sequence Character

\b Backspace
\f Form feed
\n New line
\r Carriage return
\t Horizontal tab
\’ Single quotation mark
\" Double quotation mark
\\ Backslash

You may include HTML tags as part of a JavaScript string.

Arrays

A set of data represented by a single variable name.
An array is a JavaScript object. You use the new keyword to create them:

array_name = new Array(number of elements);

Each piece of data in an array is called an element.
The first element in an array is element 0.

animals = new Array(5); // creates an array of 5 elements
animals[0] = "dog"; // first element
animals[1] = "cat"; // second element
animals[2] = "rat"; // third element
animals[3] = "elephant"; // fourth element
animals[4] = "unicorn"; // fifth element

Array elements are used just like any other variable.
When you create a new array the number of array elements is optional. You can create an array without any elements and add new elements to the array as necessary. The size of an array can change dynamically.
You can assign values to an array’s elements when you first create the array.

animals = new Array("dog", "cat", "horse"); // 3 elements

Expressions

A combination of literal values, variables, operators, and other expressions.
Literal values may be string, integer, floating-point, Boolean or null.

Arithmetic Operators

Used to perform mathematical calculations.

+ Add
- Subtract
* Multiply
/ Divide
% Modulus- Divides two integer operands and returns the remainder.
Example: var x, y, sum;
x = 100;
y = 200;
sum = x + y;

Unary operators

++operand Pre-increment
operand++ Post-increment
--operand Pre-decrement
operand-- Post-decrement
-operand Negation

The prefix operators ++operand, --operand and -operand are evaluated before any other part of an expression.
The postfix operators operand++ and operand-- are evaluated after all other parts of an expression.

var count = 10;
var newValue = ++count * 2; // newValue = 22, count = 11
var count = 10;
var newValue = count++ * 2; // newValue = 20, count = 11

Assignment Operators

operand = expression Assigns the result of expression to operand
operand += expression Equivalent to operand = operand + expression
operand -= expression Equivalent to operand = operand - expression
operand *= expression Equivalent to operand = operand * expression
operand /= expression Equivalent to operand = operand / expression
operand %= expression Equivalent to operand = operand % expression

var x, y;
x = "Hello ";
x += "World"; // x changes to "Hello World"

x = 100;
y = 200;
x += y; // x changes to 300

x = 3;
y = 2;
x %= y; // x changes to 1 (remainder of 3/2)

Comparison Operators

Compares two operands and results in a Boolean value.

= = Returns true if the operands are equal
!= Returns true if the operand are not equal
> Returns true if the left operand is greater than the right operand
< Returns true if the left operand is less than the right operand
>= Returns true if the left operand is greater than or equal to the right operand
<= Returns true if the left operand is than or equal to the right operand

When comparing text values JavaScript compares them in alphabetical order. ‘a’ is less than ‘b’. (Note! ‘A’ does not equal ‘a’)

Logical Operators

Used in combination with Boolean operands

&& And operator
operand1 operand2 result
false    false    false
false    true     false
true     false    false
true     true     true

|| Or operator
operand1 operand2 result
false    false    false
false    true     true
true     false    true
true     true     true

! Not operator
operand result
false true
true false

var a = 2; var b = 3;
var returnValue = (a == 2) && (b == 3); // returns true

String Operators

The + operator and += operator may be used with strings. Both are used to concatenate (combine) two strings.

var firstString = "Arthur C. Clarke wrote ";
var newString;
newString = firstString + "<I>2001 A Space Odyssey</I>";
OR
var firstString = "Arthur C. Clarke wrote ";
firstString += "<I>2001 A Space Odyssey</I>";

Operator Precedence

The order in which operators are evaluated in a expression.
Operators with equal precedence are evaluated from left to right.
The order of precedence for JavaScript operators is:

() [] Highest precedence
! - ++ -- typeof void
* / %
+ -
< <= > >=
== !=
&&
||
= += -= *= /= %= Lowest precedence

Calculator Program

Try the calculator program on pages 137-140

Assignment: Do exercise 4 on page 144. Include a text box for temperature input and two buttons, one button for converting to Celsius and one button for converting to Fahrenheit. Display the answer in a second text box.