Chapter 3: Data Types and Operators

JavaScript - Introductory

Tutorial3Calculator.html

Section A:

Using Data Types

and Arrays

Objectives

In this section, students will learn:

• How to use data types

• About numeric data types

• About Boolean values

• How to use strings

• How to use arrays

Data Types

• Data type is the specific category of information that a variable contains

• Data types that can be assigned only a single value are called primitive types

• JavaScript supports five primitive data types: – Integer numbers– Floating-point numbers– Boolean values– Strings– Null value

Primitive Types

Data Types

• Programming languages that require you to declare the data types of variables are called strongly-typed programming languages

• Strong typing is also known as static typing• Programming languages that do not require

you to declare the data types of variables are called loosely-typed programming languages

• Loose typing is also known as dynamic typing since data types change after being declared

Values Returned by Typeof () Operator

PrintDataTypes.html

Numeric Data Types

• An integer is a positive or negative number with no decimal places

• Integer values in JavaScript can range from -9007199254740992(-2 53) to 9007199254740992 (253)

• A floating-point number contains decimal places or is written using exponential notation

Numeric Data Types

• Exponential notation, or scientific notation, is a way of writing very large numbers or numbers with many decimal places using shortened format

• Floating-point values that exceed the largest positive value of +1.7976931348623157 x 10308 result in a special value of Infinity

Boolean Values

• A Boolean value is a logical value of true or false

• You can also think of a Boolean value as being yes or no, or on or off.

• Boolean values are most often used for decision making and comparing data

• Only the words true and false can be used to indicate Boolean values

• Boolean values get their name from the 19th century mathematician George Boole

Program That Returns a Boolean Value to an Event Handler

LiteralStrings Program

Strings

• A text string contains zero or more characters surrounded by double or single quotation marks

• There is no special data type in JavaScript for a single character, such as the char data type in the C, C++, and Java programming languages

• Take extra care when using single quotations with possessives and contractions in strings

• JavaScript interpreter always looks for the first closing single or double quotation mark to match an opening single or double quotation mark

Output of LiteralStrings Program in a Web Browser

Strings

• An escape character tells the compiler or interpreter that the character that follows it has a special purpose

• When you combine the escape character with other characters, the combination is called an escape sequence

• In addition to including escape sequences in strings, you can include HTML tags

• If you include HTML tags within JavaScript strings, they must be located within a string’s opening and closing quotation marks

JavaScript Escape Sequences

Program Containing Strings with Escape Sequences

Output of Program Containing Strings with Escape Sequences

Program Containing Strings with HTML Tags

Program Containing Strings with HTML Tags

Output of Program Containing Strings with HTML Tags

Output of DailySpecials.html

Arrays

• An array contains a set of data represented by a single variable name

• Since arrays are objects, you create them using new keyword and JavaScript’s Array() constructor object

• The Array () object is comparable to a constructor function and is created using similar syntax, as follows: variable_name = new Array (number of elements);

Arrays

• Each piece of data contained in an array is called an element

• The numbering of elements within an array starts with an index number of zero (0).

• Array elements that are created but not assigned values have an initial value of null

Output of MonthsofYear.html

Section A: Chapter Summary

• A data type is the specific category of information that a variable contains

• Data types that can only be assigned a single value are called primitive types

• Assigning the value null to a variable indicates the variable does not contain a value

• An integer is a positive or negative number with no decimal point

• A floating-point number contains decimal places or is written using exponential notation

Section A: Chapter Summary

• A Boolean value is a logical value of true or false

• Literal strings and string variables contain zero or more characters

• An escape character is used to tell the compiler or interpreter that the character following it has a special purpose

• An array contains a set of data represented by a single variable name

• An array is created with the Array () constructor object

Section A: Chapter Summary

• The Array () constructor object receives a single argument representing the number of elements to be contained in the array

• The numbering of elements within an array starts with an index number of zero (0)

• You can create an array without any elements and then add new elements to the array as needed

• The size of an array can change dynamically• Someone can assign values to an array’s

elements when first created

Section B:

Expressions

and

Operators

Objectives

In this section, you will learn how to:

• Use expressions

• Use arithmetic, assignment, comparison,

logical, and string operators

• Create the calculator program

Expressions

• Variables and data become most useful when you use them in an expression

• An expression is a combination of literal values, variables, operators, and other expressions that can be evaluated by the JavaScript interpreter to produce a result

• Operands are variables and literals contained in an expression

• Operators are symbols used in expressions to manipulate operands

Literal and Variable Expressions

JavaScript Operator Types

Expressions

• JavaScript operators are binary or unary• A binary operator requires an operand before

the operator and an operand after the operator– The equal sign in the statement myNumber = 100; is

an example of a binary operator

• A unary operator requires a single operand either before or after the operator

• Operand to the left of an operator is known as the left operand and on the right is the right operand

Arithmetic Operators

• Arithmetic operators are used to perform mathematical calculations

Examples of Arithmetic Binary Operators

Examples of Arithmetic Binary Operators

Arithmetic Operators

• When JavaScript performs an arithmetic calculation, it performs the right side of the assignment operator, then assigns the value to a variable on the left side

• The JavaScript interpreter will not convert strings to numbers when you use the addition operator

• Arithmetic operations can also be performed on a single variable using unary operators

• A prefix operator is placed before a variable• A postfix operator is placed after a variable

Arithmetic Operators

• The statements ++myVariable; and myVariable++; both increase myVariable by one

Output of ArithmeticExamples.html

Assignment Operators

• Assignment operators are used for

assigning a value to a variable var myCar = “Ford”;MyCar = “Corvette”;

• Can use the + = assignment operator to combine two strings as well as to add numbers

Assignment Operators

Examples of Assignment Operators

Output of AssignmentsExamples.html

Comparison Operators

• Comparison operators are used to compare two operands for equality and to determine if one numeric value is greater than another

• A Boolean value of true or false is returned after two operands are compared

• The comparison operator compares values, while the assignment operator assigns values

Comparison Operators

Examples of Comparison Operators

Output of ComparisonExamples.html

Logical Operators

• Logical operators are used for comparing two Boolean operands for equality

• A Boolean value of true or false is returned after two operands are compared

• Logical operators are often used within conditional and looping statements such as the if else, for, and while statements

Logical Operators

Output of LogicalExamples.html

String Operators

• The concatenation operator (+) is used to combine two strings

• The following code combines a string variable and a literal string, and assigns the new value to another variable: var firstString = “Ernest Hemingway wrote”; var newString;newString = firstString + “<I>For Whom the Bell Tolls</I>;

• You can also use the += assignment operator to combine two strings

Operator Precedence

• Operator precedence is the order of priority in which operations in an expression are evaluated

• Expressions are evaluated on a left-to-right basis

• Order of precedence for JavaScript operators:

– Parentheses/brackets/dot (() [] . ) - highest precedence– Negation/ increment (! - ++ -- typeof void)– Multiplication/division/modulus (* / % )– Addition/ subtraction (+ -)– Comparison (<< =>>=)– Equality (==!=)– Logical and (&&) - Logical or (II)– Assignment operators (=+=-=*=/=%=) - lowest

• This list does not include ALL the operators that JavaScript evaluates in the order of precedence

Operator Precedence

Creating the Calculator Program

• The eval() function evaluates expressions contained within strings

• Can include a string literal or string variable as the argument for the eval() function

Section B: Chapter Summary

• An expression is a single literal or variable, or a combination of literal values, variables, operators, and other expressions that can be evaluated by interpreter to produce result

• Operands are variables and literals contained in an expression

• Operators are symbols used in expressions to manipulate operands

• A binary operator requires an operand before operator and an operand after operator

Section B: Chapter Summary

• A unary operator requires a single operand either before or after operator

• Arithmetic operators are used for performing addition, subtraction, multiplication, and division in JavaScript

• The increment (++) and decrement (--) unary operators can be used as prefix or postfix operators

• Use assignment operators to assign a value to a variable

Section B: Chapter Summary

• Use comparison operators to compare two operands for equality and determine if one numeric value is greater than another

• Use logical operators to compare two Boolean operands for equality

• Logical operators are often used with comparison operators to evaluate expressions, allowing you to combine results of several expressions into a single statement

Section B: Chapter Summary

• When used with strings, the +sign, or addition operator, is known as the concatenation operator

• Operator precedence is the order of priority in which operations in an expression are evaluated

• Parentheses are used with expressions to change the order in which individual operations in an expression are evaluated

• Use the eval() function to evaluate expressions contained within strings