WEB TECHNOLOGIES Ms Rabeea Jaffari JAVASCRIPT OPERATORS Arithmetic

WEB TECHNOLOGIES Ms. Rabeea Jaffari

JAVASCRIPT OPERATORS • Arithmetic operators • Comparison operators (or Relational operators) • Logical operators • Assignment operators • Bit-wise operators • Miscellaneous operators

ASSIGNMENT OPERATORS

COMPARISON OPERATORS

ARITHMETIC OPERATORS

BITWISE OPERATORS

LOGICAL OPERATORS

LOGICAL OPERATORS • Predict the output of the following code var o 1 = true || true; var o 2 = false || true; var o 3 = true || false; var o 4 = false || (3 == 4); var o 5 = 'Cat' || 'Dog'; var o 6 = false || 'Cat'; var o 7 = 'Cat' || false; //true //false //Cat

LOGICAL OPERATORS • Predict the output of the following code var a 1 = true && true; var a 2 = true && false; var a 3 = false && true; var a 4 = false && (3 == 4); var a 5 = 'Cat' && 'Dog'; var a 6 = false && 'Cat'; var a 7 = 'Cat' && false; //true //false //Dog //false • True and false are Javascript keywords • Examples of expressions that can be converted to false are those that evaluate to null, 0, Na. N, the empty string (""), or undefined.

OPERATOR PRECEDENCE

JAVASCRIPT OPERATORS (Contd. . ) Miscellaneous Operators: -Conditional operator (? ) -typeof operator ? : (Conditional ) If Condition is true? Then value X : Otherwise value Y typeof: returns the data type of the operand.

JAVASCRIPT OPERATORS (Contd. . ) Types returned by the typeof operator

JAVASCRIPT OPERATORS (Contd. . ) typeof (typeof 1) typeof null typeof true typeof 3. 14 typeof Infinity typeof b //b is an uninitialized variable typeof {a: 1} typeof function(){} typeof Math. sin

CONTROL STRUCTURES • Selection statements: Help to choose between two or more than two-alternatives • (if, if-else-if, switch) statements. • Iteration statements: Help to repeat a statement or group of statements multiple times • (for, while, do-while, for-in, for-of) loops. • Jump statements: Help to transfer program control from one part to another part of the program. • (labels, break, continue)

CONTROL STRUCTURES: Selection statements • Selection statements: The code for various selection statements is as follows: <script> a=2; if(a%2==0) document. write("even number"); </script> <script> a=1; if(a%2==0) document. write("even number"); else document. write(“odd number"); </script> Simple if statement: Executes the statement(s) if the condition is true and does not execute if false If-else statement: Executes the body of if statement(s) if the condition is true and executes the body of else part if it is false

CONTROL STRUCTURES: Selection statements • Multiple choice selection statements: The simple if and if-else only allow to choose between two alternatives. For more than two choices, if-else-if and switch statements can be used. <script> var month= "Nov"; if(month=="Dec" || month=="Jan" || month=="Feb") document. write("It's Winter season"); else if(month=="Mar" || month=="Apr" || month=="May") document. write("It's Spring season"); else if(month=="June" || month=="July" || month=="August") document. write("It's Summer season"); else if(month=="Sept" || month=="Oct" || month=="Nov") document. write("It's Autumn season"); else document. write("Incorrect month"); </script> If-else-if statement: Executes the statement(s) following the first if condition if it is true and ignores all the following else-if conditions. However, if first if is false, then it goes down the else-if ladder and executes the statement(s) of the else-if whose condition is true and ignores the others. If all the conditions are false, it executes the statement(s) in the last else part.

CONTROL STRUCTURES: Selection statements • Multiple choice selection statements: Switch statement <script> var expr = “ 3”; switch (expr) { case 1: document. write('Oranges are 100 rs/kg'); break; case 2: case 3: document. write('Mangoes and papayas are 200 rs/kg'); break; default: document. write('Sorry, we are out of ' + expr + '. '); } </script> Switch statement: uses an expression whose value is matched with each case clause. If the switch expression matches the specified value of case clause, the statement(s) inside that case clause are executed until either the end of the switch statement or a break statement. A default clause (optional) is executed if the value of expression doesn't match any of the case clauses.

CONTROL STRUCTURES: Selection statements • Multiple choice selection statements: Switch statement important points: • The switch statement uses strict comparison (===) to compare expression value with case clauses. • The default clause can be placed at the start, between or at the end of case clauses. • If there is no break after a case clause and it’s condition is true then switch will execute it and then continue executing all the case clauses regardless of their conditions until the next break is met or end of switch is reached. • The switch expression and case clauses support integers, characters, strings as well as any arbitrary expressions such (a+b) etc.

CONTROL STRUCTURES: Iteration statements • Iteration statements: The code for various iteration statements (loops) is as follows: For loop: A for loop has the following syntax: <script> var i, s=0; for(i=1; i<=10; i++) s+=i; document. write(“The sum is: “+s); </script> <script> var i, j; for(i=1, j=10; j>=i; i++, j--) document. write(“Result is: ”+i+”-”+j); </script> for(initialization; condition; increment/decrement){ statement(s); } It is used to repeat a statement or group of statements multiple times on the basis of a variable (initialization) until the test condition is true. Hence, it is also known as counter controlled loop. If all fields of for loop are left empty as for(; ; ) the for loop continues infinitely. It is possible to give multiple initialization variables and the increment/decrement (iteration) statements but the test or the condition part is only given once.

CONTROL STRUCTURES: Iteration statements • Iteration statements: While loop <script> var i=1, s=0; while(i<=10){ s+=i; i++; } document. write(“The sum is: “+s); </script> <script> while(true) document. write(“Hello world”); </script> While loop: A while loop is similar to a for loop for repeating statement(s) and is known as pre test loop because it tests the condition first and then executes the statement(s) in it if the condition is true or terminates otherwise. The syntax is therefore as follows: while (condition) { statement(s); } If the condition of while loop never becomes false. The statements in the following while loop execute forever inifinitely.

CONTROL STRUCTURES: Iteration statements • Iteration statements: Do-While loop <script> var i=0; do{ i+=2; document. write(“Num”+i); }while(i<=10); Do-While loop: A do while loop is similar to a while loop for repeating statement(s) but is known as post test loop because it executes the statements in its body atleast once and then checks the condition at last. Its syntax as follows: do { statement(s); } while(condition); </script> Thus a do while loop is guaranteed to execute atleast once even when its condition is false the very first time.

CONTROL STRUCTURES: Iteration statements • Iteration statements: For-in loop <script> var human = {fname: "John", lname: "Doe", age: 25}; for(var x in human) document. write(“”+human[x]); </script> For-in loop: A for in loop is used to iterate over proper ties of an object. Its syntax is as follows: for (variable in object) { statement(s); } The variable holds the value of a different object property key in each turn until all the properties have been visited. Since numeric indices are also considered as array/string variable properties, so for-in loop can be used to traverse array and strings objects as well but it is not recommended to do so.

CONTROL STRUCTURES: Iteration statements • Iteration statements: For-of loop • It is usually not recommended to use for-in loop for traversing arrays or strings because such loop is not guaranteed to return the indices in order. Moreover, if we customize the array objects (add some custom properties to it), the for-in loop on such array object returns the non-numeric property keys as well apart from the numeric indices. • Hence, a for-of loop is recommended to be used with iteratable collections like strings and arrays. It cannot be used with objects. • The for-of loop directly prints the values of the numeric indices only instead of the keys (numeric/non-numeric) in for-in loop.

CONTROL STRUCTURES: Iteration statements • Iteration statements: An example explaining the difference between for-in and for-of loop is as follows: <script> var arr = [3, 5, 7]; arr. foo = 'hello'; for (var i in arr) { console. log(i); // prints "0", "1", "2", "foo“ } for (var i of arr) { console. log(i); // prints 3, 5, 7 only } </script> Parameters for. . in for. . of Applies to Enumerable Properties Iterable Collections Use with Objects? Yes No Use with Arrays? Yes, but not advised Yes Use with Strings? Yes, but not advised Yes

CONTROL STRUCTURES: Jump statements • Jump statements: The code for various jump statements is as follows: <script> mark. Loop: //label var i=10; while (i>=5) { //do. Something(); if(i==8) break mark. Loop; } </script> Label: A label enables us to identify any program statement and then refer to it from somewhere else in the program. For example, a label can be used to identify a loop and then the break or continue statements can be used to indicate whether a program should interrupt the loop or continue its execution. . The syntax of the labeled statement looks like the following: label : statement The label name may be any Java. Script identifier that is not a reserved keyword.

CONTROL STRUCTURES: Jump statements • Jump statements: The code for various jump statements is as follows: <script> for (var i = 0; i < 10; i++) { if (i == 5) { break; } } </script> Break: The break statement can be used to terminate a loop, switch, or in conjunction with a labeled statement. When you use break without a label, it terminates the innermost enclosing while, do-while, for, or switch immediately and transfers control to the following statement. When you use break with a label, it terminates the specified labeled statement. The syntax of the break statement looks like this: break [label]; The label name here is optional. If the label name is not given, break statement terminates the innermost enclosing loop or switch.

CONTROL STRUCTURES: Jump statements • Jump statements: The code for various jump statements is as follows: <script> var i = 0, n = 0; while (i < 5) { i++; if (i == 3) { continue; } n += i; console. log(n); //1, 3, 7, 12 } </script> Continue: The continue statement can be used to restart a while, do-while, for, or labelled statement. When you use continue without a label, it terminates the current iteration of the innermost enclosing while, do-while, or for statement and continues execution of the loop with the next iteration. In contrast to the break statement, continue does not terminate the execution of the loop entirely. In a while loop, it jumps back to the condition. In a for loop, it jumps to the increment-expression. When you use continue with a label, it applies to the looping statement identified with that label. The syntax of the continue statement looks like the following: continue [label];

CONTROL STRUCTURES PRACTICE • Create a grade calculator which takes marks as input and outputs the grade according to the following grading scheme: 85 -onwards= A+, 80 -84=A, 7579=B+, 70 -74=B, 65 -69= C+, 60 -64= C, 55 -59, = D+, 50 -54=D, below 50= fail. • Create an age calculator using switch statement which works as follows: 112=child, 13 -19=teenager, 20 -30= middle age, 31 -50= adult, 50 onwards= old. • Calculate mean and median for first 10 odd and even numbers using for and while loops respectively. • Create a program that generates 10 pairs of numbers in different order on each execution.