1 / 38

Operators and Expressions

Operators and Expressions. Operators are symbols that produce a result based on some rules. Examples: +, -, =, > and <. An operator manipulates data objects called operands. Binary operators manipulates two operands. Operands can be strings, numbers or Booleans. Assignment Operator.

aya
Download Presentation

Operators and Expressions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Operators and Expressions Operators are symbols that produce a result based on some rules. Examples: +, -, =, > and <. An operator manipulates data objects called operands. Binary operators manipulates two operands. Operands can be strings, numbers or Booleans.

  2. Assignment Operator • The assignment statement evaluates the expression on the right-hand side of the equal sign and assigns the result to the variable on the left-hand side of the equal sign. Ex: var result = 1 + 2;

  3. Precedence and Associativity

  4. Example <html> <head> <title>First JavaScript Sample</title> <script language = "JavaScript"> var result = 5 + 4 * 12 / 4; document.write(“result = ” + result + "<br>"); </script> </head> <body bgcolor="yellow" text="blue"> </body> </html>

  5. Example 2 <html> <head> <title>Precedence and Associativity</title> </head> <body> <script language = "JavaScript"> var x = 5 + 4 * 12 / 4; document.write( "<h3>The result is " + x + "<br>"); var x = ( 5 + 4 ) * ( 12 / 4 ); document.write("The result is " + x + "<br>"); </script> </body> </html>

  6. Arithmetic Operators

  7. Example 3 <html> <head> <title>Arithmetic Operators</title> </head> <body> <h2>Arithmetic operators</h2> <p> <script language="JavaScript"> var num1 = 5; var num2 = 7; var result = num1 + num2; document.write("<h3>num1 + num2 = "+ result</h3>); result = result + (10 / 2 + 5); document.write("<h3>12 + (10 / 2 + 5) = " + result</h3>); </script> </body> </html>

  8. Shortcut Assignment Operators

  9. Example 4 <html> <head> <title>Assignment and Shortcut Operators</title> <script language = "JavaScript"> var num=10; document.write("<br>" + "num is assigned " + 10); num += 2; document.write("<br>num += 2; num is " + num ); num -= 1; document.write("<br>num -= 1; num is " + num); num *= 3; document.write("<br>num *= 3; num is " + num); num %= 5; document.write("<br>num %= 5; num is " + num); </script> </head> <body bgcolor="yellow" text="blue"> </body> </html>

  10. Autoincrement and Autodecrement Operators (++) – increment the value of its operand by 1 (--) – decrement the value of its operand by 1 Prefixes: ++x; --x Postfixes: x++; x-- When used with assignment, they are different. y=0; x=5; y=++x; => y = 6 and x = 6 y=x++; => y = 5 and x = 6

  11. Example 5 <html> <head> <title>Auto-increment and Auto-decrement</title> </head> <body> <script language = "JavaScript"> var x=5; var y=0; y = ++x; // add one to x first; then assign to y document.write("<h3>Pre-increment:<br>"); document.write("y is " + y + "<br>"); document.write("x is " + x + "<br>"); document.write("-----------------------<br>"); var x=5; var y=0; y=x++; // assign value in x to y; then add one to x document.write("<h3>Post-increment:<br>"); document.write("y is " + y + "<br>"); document.write("x is " + x + "<br></h3>"); </script> </body> </html>

  12. Concatenation Operator • (+) – is used as concatenation operator. It is the only operator to manipulate strings. • If the operands are a mix of strings and numbers, JavaScript will convert the numbers to string. • (+=) – concatenates two strings and assigns the result to x, like: • x=“hot”; x +=“dog”; x now is “hotdog”.

  13. Comparison Operators

  14. Equal and Identical • Two strings are equal if they have the same length and same characters in corresponding position. Two numbers are equal if they have the same numeric value. • Identical are not only the same value, but also of the same data type: “54”== 54 => true “54”===54 => false true==1 => true true===1 => false

  15. Example 6 <html> <head> <title>Comparing Numbers</title> </head> <body> <script language = "JavaScript"> var x = 5; var y = 4; var result = x > y; document.writeln("<h3>The result is "+ result + ".<br>"); result = x < y; document.writeln( "The result is " + result + ".<br>"); </script> </body> </html>

  16. Comparing strings - Example 7 <html> <head> <title>Comparing Strings</title> </head> <body> <script language = "JavaScript"> var fruit1 = "pear"; var fruit2 = "peaR"; var result = fruit1 > fruit2; document.writeln( "<h3>The result is "+ result + ".<br>"); result = fruit1 < fruit2; document.writeln( "The result is " + result + ".<br>"); result = fruit1 === fruit2; // Are they identical; i.e., value and type are the same? document.writeln( "The result is " + result + ".<br>"); </script> </body> </html>

  17. Logical Operators • Most often used in “if” statements. • Numeric operand is true if it evaluates to any number that is not zero.

  18. Logical AND • Whatever is suppose to happen is based on two conditions, and both conditions must be met. • If the left hand expression of the AND operator is evaluate to zero, the expression is false and the right hand expression is not evaluated.

  19. Example 8 <html> <head> <title>Logical AND Operator</title> </head> <body bgcolor="lightblue"> <script language="JavaScript"> var answer = prompt("How old are you? ", ""); if ( answer > 12 && answer < 20 ) { alert("Teenagers rock!"); } </script> </body> </html>

  20. Logical OR • Whatever is suppose to happen is based in two conditions, and only one condition must be met. • If the expression on the left hand side of the OR operator is evaluated to true, the value of the expression is true and the right hand side expression is not evaluated.

  21. Example 9 <html> <head> <title>Logical OR Operator</title> </head> <body bgcolor="lightblue"> <script language="JavaScript"> var answer = prompt("Where should we eat? ", ""); if ( answer == "McDonald's" || answer == "Taco Bell" || answer == "Wendy's"){ alert("No fast food today, thanks."); } </script> </body> </html>

  22. Logical NOT • It is used for a negation. • The ! is called an unary operator because it has only one operand. • !null => true • !undefined => true

  23. Example 10 <html> <head> <title>Logical NOT Operator</title> </head> <body bgcolor="lightblue"> <script language="JavaScript"> var answer = true; alert("Was ” + answer + “. Now " + !answer); </script> </body> </html>

  24. Example 11 <html> <head> <title>Logical (Boolean) Operators</title> <script language = "JavaScript"> var num1=50; var num2=100; var num3=0; document.write("<h3>num1 && num2 is " + (num1 && num2) + ".<br>"); document.write("num1 || $num2 is " + (num1 || num2) +".<br>"); document.write("! num1 is " + !num1 +".<br>"); document.write("!(num1 && num2) is " + !(num1 && num2) + ".<br>"); document.write("!(num1 && num3) is " + !(num1 && num3) + ".<br>"); </script> </head> <body> </body> </html>

  25. Conditional Operator • It is called a ternary operator because it requires three operands. • It is a short hand of the if/else conditional statement. • x ? y : z • If x evaluates to true, the value of the expression becomes y, else the value of the expression becomes z. big = (x > y) ? x : y;

  26. Example 12 <html> <head> <title>Conditional Operator</title> </head> <body bgcolor="lightblue"> <script language="JavaScript"> var age = prompt("How old are you? ", ""); var price = (age > 55 ) ? 0 : 7.50; alert("You pay $" + price + 0); </script> </body> </html>

  27. Bitwise Operator • Treat their operands as a set of 32 bits.

  28. Example 13 <html> <head> <title>Bitwise Operators</title> </head> <body bgcolor="lightblue"> <font size="+1" face="arial"> <h3> Testing Bitwise Operators</h3> <script language="JavaScript"> var result = 15 & 9; document.write("15 & 9 yields: " + result); result = 15 | 9; document.write("<br> 15 | 9 yields: " + result); result = 15 ^ 9; document.write("<br> 15 ^ 9 yields: " + result); result = 9 << 2; document.write("<br> 9 << 2 yields: " + result); result = 9 >> 2; document.write( "<br> 9 >> 2 yields: " + result); result = -9 >> 2; document.write( "<br> -9 >> 2 yields: " + result); result = 15 >>> 2; document.write( "<br> 15 >>> 2 yields: " + result); </script> </body> </html>

  29. Datatype Conversion • JavaScript is a loosely typed language. It automatically converts values when it assigns values to a variable or evaluates an expression. • Sometimes you need to force conversions. • JavaScript provides String(), Number() and Boolean() Methods.

  30. Example 14 <html> <head> <title>The Conversion Methods</title> </head> <body> <p><h3>Data Conversion</h3> <script language="JavaScript"> var num1 = prompt("Enter a number: ",""); var num2 = prompt("Enter another number: ",""); var result = Number(num1) + Number(num2); // Convert strings to numbers alert("Result is "+ result); var myString=String(num1); result=myString + 200; // String + Number is String alert("Result is "+ result); // Concatenates 200 to the result; alert("Boolean result is "+ Boolean(num2)); // Prints true </script> </body> </html>

  31. The parseInt() Method • This Method converts a string to a number. • It starts parsing at the beginning of the string and returns all integers until it reaches a non-integer and then stops parsing. • In the two-argument format, the first argument is the string to be parsed and the second argument is the number base of the number.

  32. Example 15 <html> <head> <title>Using the parseInt() Function</title> </head> <body> <b> <script language = "JavaScript"> var grade = prompt("What is your grade? ", ""); // grade entered as a string grade=parseInt(grade); // grade converted to an integer document.write("grade type is<em> " + typeof(grade)); grade+=10; document.write("<em><br>After a 10 point bonus, your grade is “ + grade + "!<br>"); </script> </body> </html>

  33. The parseFloat() Method • It is exactly like the pasrseInt() Method, except that it returns a floating point number.

  34. Example 16 <html> <head> <title>Using the parseFloat() Function</title> <script language = "JavaScript"> var temp = prompt("What is your temperature? ", ""); temp=parseFloat(temp); if(temp == 98.6){ alert("Your temp is normal"); } else{ alert("You are sick!"); } </script> </head> <body> </body> </html>

  35. The eval() Method • The eval() method evaluates a string of JavaScript statements and evaluates the whole thing as a little program, returning the result of the execution.

  36. Example 17 <html> <head> <title>The eval() Function</title> </head> <body bgcolor="lightblue"> <script language="JavaScript"> var str="5 + 4"; var num1 = eval(str); var num2 = eval(prompt("Give me a number ", "")); alert(num1 + num2); </script> </body> </html>

  37. Special Operators Will be discussed later in the course. Some examples: • , (comma) • delete • function • instanceof • new • this • void

More Related