chapter 3: data types and operators javascript - introductory
TRANSCRIPT
![Page 1: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/1.jpg)
Chapter 3: Data Types and Operators
JavaScript - Introductory
![Page 2: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/2.jpg)
Tutorial3Calculator.html
![Page 3: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/3.jpg)
Section A:
Using Data Types
and Arrays
![Page 4: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/4.jpg)
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
![Page 5: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/5.jpg)
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
![Page 6: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/6.jpg)
Primitive Types
![Page 7: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/7.jpg)
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
![Page 8: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/8.jpg)
Values Returned by Typeof () Operator
![Page 9: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/9.jpg)
PrintDataTypes.html
![Page 10: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/10.jpg)
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
![Page 11: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/11.jpg)
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
![Page 12: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/12.jpg)
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
![Page 13: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/13.jpg)
Program That Returns a Boolean Value to an Event Handler
![Page 14: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/14.jpg)
LiteralStrings Program
![Page 15: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/15.jpg)
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
![Page 16: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/16.jpg)
Output of LiteralStrings Program in a Web Browser
![Page 17: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/17.jpg)
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
![Page 18: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/18.jpg)
JavaScript Escape Sequences
![Page 19: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/19.jpg)
Program Containing Strings with Escape Sequences
![Page 20: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/20.jpg)
Output of Program Containing Strings with Escape Sequences
![Page 21: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/21.jpg)
Program Containing Strings with HTML Tags
![Page 22: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/22.jpg)
Program Containing Strings with HTML Tags
![Page 23: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/23.jpg)
Output of Program Containing Strings with HTML Tags
![Page 24: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/24.jpg)
Output of DailySpecials.html
![Page 25: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/25.jpg)
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);
![Page 26: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/26.jpg)
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
![Page 27: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/27.jpg)
Output of MonthsofYear.html
![Page 28: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/28.jpg)
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
![Page 29: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/29.jpg)
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
![Page 30: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/30.jpg)
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
![Page 31: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/31.jpg)
Section B:
Expressions
and
Operators
![Page 32: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/32.jpg)
Objectives
In this section, you will learn how to:
• Use expressions
• Use arithmetic, assignment, comparison,
logical, and string operators
• Create the calculator program
![Page 33: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/33.jpg)
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
![Page 34: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/34.jpg)
Literal and Variable Expressions
![Page 35: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/35.jpg)
JavaScript Operator Types
![Page 36: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/36.jpg)
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
![Page 37: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/37.jpg)
Arithmetic Operators
• Arithmetic operators are used to perform mathematical calculations
![Page 38: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/38.jpg)
Examples of Arithmetic Binary Operators
![Page 39: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/39.jpg)
Examples of Arithmetic Binary Operators
![Page 40: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/40.jpg)
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
![Page 41: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/41.jpg)
Arithmetic Operators
• The statements ++myVariable; and myVariable++; both increase myVariable by one
![Page 42: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/42.jpg)
Output of ArithmeticExamples.html
![Page 43: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/43.jpg)
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
![Page 44: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/44.jpg)
Assignment Operators
![Page 45: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/45.jpg)
Examples of Assignment Operators
![Page 46: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/46.jpg)
Output of AssignmentsExamples.html
![Page 47: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/47.jpg)
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
![Page 48: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/48.jpg)
Comparison Operators
![Page 49: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/49.jpg)
Examples of Comparison Operators
![Page 50: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/50.jpg)
Output of ComparisonExamples.html
![Page 51: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/51.jpg)
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
![Page 52: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/52.jpg)
Logical Operators
![Page 53: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/53.jpg)
Output of LogicalExamples.html
![Page 54: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/54.jpg)
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
![Page 55: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/55.jpg)
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
![Page 56: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/56.jpg)
• 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
![Page 57: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/57.jpg)
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
![Page 58: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/58.jpg)
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
![Page 59: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/59.jpg)
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
![Page 60: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/60.jpg)
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
![Page 61: Chapter 3: Data Types and Operators JavaScript - Introductory](https://reader035.vdocuments.net/reader035/viewer/2022081501/56649e9e5503460f94ba01f5/html5/thumbnails/61.jpg)
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