2440: 211 Interactive Web Programming Expressions & Operators

2 Expressions  Literal value or variable or combination of literal values, variables, operators, and other expressions that can be evaluated to produce a result  Literal – value such as literal string or a number  Operands – variables and literals in an expression  Operator – symbols used in expressions to manipulate operands  E.g. addition (+), multiplication (*), etc  Variable – named memory location for storing data

Expressions & Operators3 Variables  A named memory location for storing data  Identifier – names used for variables, functions, and objects  Rules for naming a variable include the following:  First letter must be a letter or an underscore (_)  The other characters can be letters, numbers, or underscore (_)  Spaces cannot be included  Reserved words (keywords) cannot be used

Expressions & Operators4 JavaScript Keywords abstractdoifprotectedtry booleandoubleimplementspublictypeof breakelseimportreturnvar byteenuminshortvoid caseexportinstanceofstaticvolatile catchextendsintsuperwhile charfalseinterfaceswitchwith classfinallongsynchronized constfinallynativethis continuefloatnewthrow debuggerfornullthrows defaultfunctionpackagetransient deletegotoprivatetrue

Expressions & Operators5 Variable Declaration  Creating a variable for usage  The keyword var is used to declare variables, although not required  E.g. var name;

Expressions & Operators6 Variable Assignment  Storing data in a variable  Data is stored with the assignment operator (=)  E.g. name = “John Doe”;

Expressions & Operators7 Variable Initialization  Declaring and assigning data to a variable at the same time  E.g. var name = “John Doe”;

Expressions & Operators8 Data Types  Category of information stored in a variable  JavaScript supports the following data types:  Numeric – any positive or negative number  Integer numbers – whole numbers  Floating-point numbers – exponents or decimal numbers  Boolean – logical value of true or false  String – text values like “Hello” enclosed in either double (“) or single quotes (‘)  Null – an empty value  Undefined – variables with no assigned value, not declared, or does not exist  Reference – for functions, objects and arrays  JavaScript is loosely typed – does not require the data type declaration  Strongly typed languages – require data type declaration for variables

Expressions & Operators9 Operators  Symbols used in expressions to manipulate operands  E.g. addition (+), multiplication (*), etc  JavaScript operators are unary or binary  Unary – requires a single operand  Binary – requires an operand before and after the operator  JavaScript operator types include:  Arithmetic – used for mathematical calculations  Assignment – assigns values to variables  Comparison – compares operands and returns a Boolean value  Logical – used for boolean operations  String – used on strings  Special – used for various purposes

Expressions & Operators10 Arithmetic Operators  Used to perform mathematical calculations  Can be binary or unary  Binary – requires two operands  Unary – requires a single operand  Below are the arithmetic binary operators OperatorNameDescription +Addition Adds two operands -Subtraction Subtracts one operand from another *Multiplication Multiplies two operands /Division Divides one operand by another %Modulus Divides one operand by another and returns the remainder

Expressions & Operators11 Arithmetic Operators…  Below are the arithmetic unary operators  The increment and decrement unary operators can be used as prefix or postfix operators  Prefix – placed before a variable  Variable is increased by one before value is used  E.g. ++myVariable, --myVariable  Postfix – placed after a variable  Variable is increased by one after value is used  E.g. myVariable++, myVariable-- OperatorNameDescription ++Increment Increases an operand by a value of one --Decrement Decreases an operand by a value of one -Negation Returns the opposite value (negative or positive) of an operand

Expressions & Operators12 Assignment Operators  Used for assigning a value to a variable  Below are the assignment operators OperatorDescriptionExample Equivalent to = Assigns the value of the expression on right to the expression on the left x = y += Adds two expressions x += y x = x + y -= Subtracts the expression on the right from the expression on the left x -= y x = x - y *= Multiplies two expressions x *= y x = x * y /= Divides the expression on the left by the expression on the right x /= y x = x / y %= Calculates the remainder from dividing the expression on the right from the expression on the left x %= y x = x % y

Expressions & Operators13 Comparison Operators  Used to compare two operands for a returned value of true or false  Below are the comparison operators OperatorNameDescription ==Equal Returns true if the operands are equal === Strict equal Returns true if the operands are equal and of the same type != Not equal Returns true if the operands are not equal !== Strict not equal Returns true if the operands are not equal or not of the same type > Greater than Returns true if the left operand is greater than the right operand >= Greater than or equal Returns true if the left operand is greater than or equal to the right operand < Less than Returns true if the left operand is less than the right operand <= Less than or equal Returns true if the left operand is less than or equal to the right operand

Expressions & Operators14 Conditional Operator  Executes one of two expressions, based on the results of a conditional expression  Syntax: condition ? expression1 : expression2  If the condition is true, expression1 executes, else expression2 executes  E.g. document.write(4<5 ? ”Correct!” : ”Incorrect”);

Expressions & Operators15 Logical Operators  Used for comparing two Boolean operands for equality  Below are the JavaScript logical operators OperatorNameDescriptions &&And Returns true if both the left and right operand return a value of true ||Or Returns true if either the left or right operand or both return a value of true !Not Returns true if an expression is false

Expressions & Operators16 String Operators  Used on strings  Two string operators used in JavaScript are: + and +=  Concatenation operator (+) – used to combine two strings  E.g. “Hello “ + “World”  Compound assignment operator (+=) – used to combine strings  E.g. var greeting = “Hello “; greeting += “everyone”;

Expressions & Operators17 String Escape Sequences  Combining the backslash (\) with other special characters for a special purpose  Several of the escape sequences are only recognized inside the tag  Below are some of the JavaScript escape sequences Escape Sequence Character \t Horizontal tab \bBackspace \n New line \v Vertical tab \’ Single quote \” Double quote \\Backslash

Expressions & Operators18 Special JavaScript Operators CharacterNameMeaning // Double forward slashes Marks the beginning of a comment ( ) Opening and closing parenthesis Used in a method header { } Opening and closing braces Encloses a group of statements “ “ Double quotation marks Encloses a string of characters ‘ ‘ Single quotation marks Encloses a single character ;Semicolon Marks the end of a programming statement /* */ Forward slash and asterisk Marks the beginning and ending of a comment

Expressions & Operators19 Operator Precedence  The order in which operations in an expression are evaluated  When operators are in the same precedence group, the order is determined by associativity (left-to-right or right-to-left)  Associativity – the order in which operators of equal precedence execute