• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Expression
 

Expression

on

  • 838 views

 

Statistics

Views

Total Views
838
Views on SlideShare
838
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Expression Expression Presentation Transcript

    • Ajax, JavaScript and PHP Expression
    • Expression
      • An expression is any valid set of literals, variables, operators, function calls, and expressions that evaluates to a single value.
      • The resulting single value can be a number, a string, a Boolean, or a special value (null, undefined, Infinity, or NaN); that is, the result of any expression is always one of JS’s defined data types or special values.
        • 3 + 7 // number 10
        • 3 + 7 + 10 + “” // string 20
        • “ Dr.” + “ “ + “Pepper” // string Dr. Pepper
    • Statement
      • A statement is any set of declarations, method calls, function calls, and expressions that performs some action.
        • var num = 1; // declare a variable
        • document.write(“hello”); // perform write action
    • Expression vs Statement
      • Statements often contain expressions that have to be evaluated before the specified action can be performed.
        • document.write(“Sum: “, 3 + 7, “<br>”); // write statement with expression
      • Evaluates the expression 3 + 7
      • Writes the string “Sum: “
      • Converts the number 10 to a string and writes it
      • Finally, writes the string “<br>”
        • total = 1 + 2; // assignment statement with expression
      • Evaluates the expression 1 + 2
      • Assigns to variable - total
      • NOTE: all JS values can be classified as one of the three primitive data types or one of the special values null, undefined, Infinity, or NaN.
    • Expression Statements
      • Assignment statements are one major category of expression statements:
        • s = “Hello “ + name;
        • i *= 3;
      • The increment and decrement operators, ++ and --, are related to assignment statements:
        • Counter++;
      • Function calls are another major category of expression statements:
        • alert(“Welcome, “ + name);
        • window.close();
    • Compound Statements
      • JavaScript has a way to combine a number of statements into a single statement (or statement block):
        • {
        • x = Math.PI;
        • cx = Math.cos(x);
        • alert(&quot;cos(&quot; + x + &quot;) = &quot; + cx);
        • }
      • This statement block acts as a single statement, it does not end with a semicolon. The primitive statements within the block end in semicolons, but the block itself does not.
    • Operator
      • Operators are the workers in expressions.
      • An unary operator performs work, or operates, on one operand.
      • A binary operator operates on two operands.
      • A ternary operator operates on three operands.
    • Operator (continue…) Operator Flavor Syntax Examples unary Operand operator or operator operand -88 Count++ !flag binary Operand operator operand 7 + 8 num1 < num2 ternary Operand operator operand operator operand fname != null ? myName = fname : myName = “unknown”;
    • Types of Operators
      • JS supports five categories of operators:
        • String operator – operators that work on strings
        • Arithmetic operators, or mathematical operators – opertaors that perform mathematical computations
        • Assignment operators – operators that assign a value to a variable, object, or property
        • Comparison operators – operators that compare two values or expressions and return a Boolean value indicating true or false
        • Logical operators, or Boolean operators – operators that take Boolean values as operands and return a Boolean value indicating the true or false of the relationship.
      • In addition, JS supports one special operator, the conditional operator.
    • String Operator - concatenation
      • There are only two string operators: the concatenation operator (+) and the concatenation by value operator (+=).
      • The concatenation operator (+) concatenates two strings together.
        • “ Greetings, “ + “everyone” // Evaluating to the string “Greetings, everyone”
        • var salutation = “Greetings, “;
        • var recipient = “everyone”;
        • salutation + recipient; // “Greetings, everyone”
      • The concatenation by value (+=) concatenates the string on the right side to the string value stored in the variable on the left side, then assigns the result back to the left operand variable.
        • var greeting = “Greetings, “;
        • greeting += “everyone”; // Then, greeting will gets “Greetings, everyone”
      • NOTE: a common use of the concatenation by value operator (+=) is to pile a bunch of HTML statements into a single string variable for easy writing to a pop-up window.
    • Concatenation by value operator (+=)
      • <html>
      • <head><title>concatenation by value</title>
      • <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
      • var docContent = &quot;&quot;;
      • </script>
      • </head>
      • <body>
      • <h1>Concatenation by Value (+=)</h1>
      • <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
      • docContent += &quot;Dynamically generated page content. &quot;;
      • docContent += &quot;More dynamically generated page content. &quot;;
      • docContent += &quot; Still more dynamically generated page content. &quot;;
      • alert(docContent);
      • </script>
      • </body>
      • </html>
    • Arithmetic (Mathematical) Operators
      • Arithmetic operators are operators that perform mathematical operations.
      • NOTE: all arithmetic operators work on numbers and result in a number. Division by zero results in the numeric value Infinity. (Some browser result in undefined or NaN)
    • Arithmetic Operators Operator Name What it does Flavor Example Result + Plus Adds the two operands Binary 7 + 5 12 - Minus Subtracts the right operand from the left operand Binary 7 – 5 2 * Multiply Multiplies the two operands Binary 7 * 5 35 / Divide Divides the left operand by the right operand and returns the quotient Binary 7/5 1.4 % Modulus (remainder) Divides the left operand by the right operand and returns the remainder Binary 7%5 2
    • Arithmetic Operators Operator Name What it does Flavor Example Result - Negation Negates the operand Unary -7 -7 ++ Increment Adds 1 to the operand Unary Assume x=7 y = ++x; y = x++; 8 (before assignment) 7 (before assignment) 8 (after assignment) -- decrement Subtracts 1 from the operand Unary Assume x=7 y = --x; y = x--; 6 (before assignment) 7 (before assignment) 6 (after assignment)
    • Assignment Operators
      • Assignment operation either initializes or changes the contents of the variable listed on the left of the operator.
        • myCup = “lemonade”;
        • myCup += “ tea”; // “lemonade tea”
        • myCup = “ice water”;
    • Assignment operators Operator Name Example Is equivalent to Applies to = Equals or gets x=y x=7 Any data type += Add by value x += y x += 5 x = x + y x = x + 5 Numbers and strings -= Subtract by value x -= y x -= 7 x = x – y x = x – 7 Numbers only *= Multiply by value x *= y x *= 5 x = x * y x = x * 5 Numbers only /= Divide by value x /= y x /= 7 x = x / y x = x / 7 Numbers only %= Modulus by value x %= y x %= 5 x = x % y x = x % 5 Numbers only
    • Comparison Operators
      • Comparison operators compares two values or two expressions of any data type.
      • Usually, the two items being compared are of the same data type.
      • The result of a comparison is always a Boolean truth value: true or false.
      • JS often performs conversions for you when you do comparisons of strings and numbers.
      • All comparisons except (===) and (!==), JS assumes you are trying to compare similar data type and performs the conversions for you.
        • 5 == “5” // true
        • NOTE: JS converts the string to a number in order to perform a meaningful comparison. (numbers had already represented in float, so perform a parseFloat() to string)
    • Comparison Operators Operator Name Description Example (x=7, y=5) Example result == Is equal to Returns true if the operands are equal x == y False != Is not equal to Returns true if the operands are not equal x != y True > Is greater than Returns true if the left operand is greater than the right operand x > y True >= Is greater than or equal to Returns true if the left operand is greater than or equal to the right operand x >= y True
    • Comparison Operators Operator Name Description Example (x=7, y=5) Example result < Is less than Returns true if the left operand is less than the right operand x < y False <= Is less than equal to Returns true if the left operand is less than or equal to the right operand x <= y False === Is equivalent to Returns true if the operands are equal and of the same data type x === y False !== Is not equivalent to Returns true if the operands are not equal and/or not of the same type x !== y true
    • Logical (Boolean) Operators
      • Logical operations, AKA, Boolean operations, always result in a truth value: true or false.
      • The && (AND) operator: In order for an && (AND) expression to be true, both operands must be true.
      • The || (OR) operator: only one side needs to be true in order for the expression to evaluate to true.
      • The ! (NOT) operator: negate the expression
    • Logical operators Operator Name Flavor Truth Table Example(isJS=true, isMonday=false) Result && AND Binary T && T = T T && F = F F && T = F F && F = F isJS && isMonday False || OR Binary T || T = T T || F = T F || T = T F || F = F isJS || isMonday True ! NOT Unary !true = false !false = true !isMonday true
    • The Conditional Operator
      • The conditional operator is the only JS operator that takes three operands.
      • The syntax is
        • (condition) ? ValueIfTrue : ValueIfFalse ;
        • var age = 38;
        • status = (age >= 18) ? “adult” : “minor” ;
        • NOTE: status = “adult”
    • Special Operators (delete)
      • JS supports several special operators that you should be aware of: delete, new, this, typeof, and void
      • delete operator: allows you to delete an array entry or an object from memory.
      • delete is a unary operator that attempts to delete property, array element, or variable specified as its operand.
      • Not all variables and properties can be deleted: built-in core and client-side properties, and user-defined variables declared with the var statement cannot be deleted.
        • var obj = { x:1, y:2 }; // defined an object
        • delete obj.x; // delete property, return true
        • typeof obj.x; // property not exist, undefined
        • delete obj.x; // nonexist property, return true
        • delete obj; // cannot delete var defined, return false
        • x = 1; // no var defined
        • delete x; // ok to del, not defined with var, true
      • When remove an element from an array with the delete operator, JS does not collapse the array. In stead, that array element becomes undefined; any attempt to evaluate that element results in undefined.
    • Special Operators (new)
      • The Object-Creation Operator (new): creates a new object and invokes a constructor function to initialize it.
      • It is a unary operator.
        • new constructor(arguments);
        • constructor must be an expression that evaluates to a constructor function.
        • var obj = new Object; // omit ()
        • var curDate = new Date();
        • var myArray = new Array();
      • If the function call has no arguments, JS allows the parentheses to be omitted
    • Special Operators (this)
      • The special keyword - this is a shortcut way of referring to the current object.
    • Special Operators (typeof)
      • The typeof operator: is a unary operator that determines the current data type of any variable.
      • The result of a typeof operation are: number, string, boolean, object, undefined.
      • typeof (operand)
      • Or typeof operand
      • NOTE: parentheses are optional. but it is considered good programming style to use them.
    • Special Operators (void)
      • The void operator: is a unary operator that tells the interpreter to evaluate an expression and returns no value (return undefined).
      • The most common use for this operator is in JS Pseudo-protocol, where it allows you to evaluate an expression for its side effects without the browser displaying the value of the evaluated expression:
        • <a href=“javascript: void window.open();”>New window</a>
    • Function
      • A function is a block of predefined programming statements whose execution is deferred until the function is “called”.
      • You call a function by invoking its name with any required or optional parameters.
      • A function parameter, aka an argument, is a data value or data reference that you can pass to the function to work on or use.
        • function greetVisitor() {
          • alert(“Hello”)
        • }
        • To call the function,
        • <body>
        • <script language=“JavaScript” type=“text/javascript”>
        • greetVisitor();
        • </script>
        • </body>
    • Passing Parameters to Functions
      • <html>
      • <head><title>Passing Parameters</title>
      • <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
      • function greetVisitor(visitor) {
      • alert(&quot;Hello, &quot; + visitor + &quot;!&quot;);
      • }
      • </script>
      • </head>
      • <body>
      • <h1>Passing Parameters</h1>
      • <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
      • greetVisitor(&quot;JavaScript&quot;);
      • </script>
      • </body>
      • </html>
    • Returning a value from a Function
      • <html>
      • <head><title>return data</title>
      • <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
      • function calcRect(width, height) {
      • var area = width * height;
      • return area;
      • }
      • </script>
      • </head>
      • <body>
      • <h1>Returning a value from a function</h1>
      • <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
      • alert(&quot;The area of an 8x5 rectangle is: &quot; + calcRect(8, 5));
      • </script>
      • </body>
      • </html>
    • The order of operations Order Description Operator(s) 1 Parentheses () 2 Member of an object or an array . [] 3 Create instance new 4 Function call function() 5 Boolean NOT, negation, positive, increment, decrement, typeof, void and delete ! - + ++ -- typeof void delete 6 Multiplication, division, and modulus * / % 7 Addition, concatenation, and subtraction + -
    • The order of operations Order Description Operator(s) 8 Relational comparisons < <= > >= 9 Equality, inequality, equivalency, and non-equivalency == != === !== 10 Boolean AND && 11 Boolean OR || 12 Conditional expression ?: 13 Assignment = += -= *= /= %=
    • Exercises
      • 4 + 10/2 * 3 – (1 + 2) * 4 = 7
      • 7 + 5 + “dollars” = “12dollars”
      • “ dollars” + 7 + 5 = “dollars75”
      • 6 + 25/5 = 11
      • 4 + 10 – 5 + 2 = 11
      • 4 + 5%3 + 7 = 13
      • 2 * 4 * 8 – 6 * 2 = 52
      • 5 * “4” = 20
      • 4%2 * 98 = 0
      • 2 * 4 + “5” = 85
      • “ 4” – 2 = 2
    • Alert Box
      • To display message to the user. The user will have to click “ok” to proceed.
      • <html>
      • <head>
      • <title>alert box</title>
      • </head>
      • <body>
      • <script language=“JavaScript&quot; type=&quot;text/javascript&quot;>
      • alert(&quot;Hello again! This is how we&quot; + ' ' + &quot;add line break to an alert box!&quot;)
      • </script>
      • </body>
      • </html>
    • Confirm Box
      • Is used if you want the user to verify or accept something. The user will have to click either “ok” or “cancel” to proceed.
      • If the user clicks “ok”, the box returns true, if the user clicks “cancel”, the box returns false.
    • Confirm Box
      • <html>
      • <head>
      • <title>confirm box</title>
      • </head>
      • <body>
      • <script language=“JavaScript“ type=&quot;text/javascript&quot;>
      • var name=confirm(&quot;Press a button&quot;)
      • if (name==true)
      • {
      • document.write(&quot;You pressed the OK button!&quot;)
      • }
      • else
      • {
      • document.write(&quot;You pressed the Cancel button!&quot;)
      • }
      • </script>
      • </body>
      • </html>
    • Prompt Box
      • Is often used if you want the user to input a value before entering a page. The user will have to click either “ok” or “cancel” to proceed after entering an input value.
      • If the user clicks “ok”, the box returns the input value as string data type. If the user clicks “cancel”, the box returns null.
    • Prompt Box
      • <html>
      • <head>
      • <title>prompt box</title>
      • </head>
      • <body>
      • <script language=“JavaScript“ type=&quot;text/javascript&quot;>
      • var name=prompt(&quot;Please enter your name&quot;,&quot;&quot;);
      • if (name!=null && name!=&quot;&quot;)
      • {
      • document.write(&quot;Hello &quot; + name + &quot;! How are you today?&quot;)
      • }
      • </script>
      • </body>
      • </html>