1. JavaScript – Part II Data Types and Operations George Mason University June 3, 2010

2. Identifiers A sequence of characters : letters, digits, underscores (_), and dollar signs ($). start with a letter, an underscore (_), or a dollar sign ($). It cannot start with a digit. An identifier cannot be a reserved word. An identifier can be of any length. Used for variables, method names, function names

3. Variables Areas of memory Used to store values Given ‘names’ to refer to 25 age variable name location in RAM value

4. Variables Types and Declarations Many programming languages require you to declare the type of the variable before you use it. This defines what type of information (integer, floating point number, etc.) can be stored in the variable JavaScript is what is known as a loosely-typed language; you don’t declare the type, and the type of what is stored in a variable can change during the program, e.g. holding a number, and later a string

5. document.write() document.write() is a method of the Document object (one refers to the object using a capital letter but the JavaScript always uses lower case) document.write() outputs the information inside of the parentheses as part of the web page at the point in which it is invoked

6. Outputting the Value of Variables into the Web Page Variables displayed alone or with string Ex1: document.write(billingDate); Ex2: document.write("Next bill: October " + billingDate); String Concatenation: joins arguments with (+) operator Note: When the name of a variable is used (except on the left hand side of an =) the VALUE of the variable replaces it!)

7. Output Using Alert box The alert() method of the window object can also be used to display the value of variables, just like the write() method of the document object – the alert() method creates an alert box which stops rendering of the web page until the user clicks OK; because this is so intrusive and one often wants the output to be part of the web page, alert boxes are only used where getting the user's attention is important Use: window.alert("Hello") ; alert("Hello"); // window is understood

8. Assignment Statements x = 1; // Assign 1 to x; radius = 1.0; // Assign 1.0 to radius; circum=radius; // Assign 1.0 to circum Note: first the value of the expression on the right hand side of the equal sign is determined, then that quantity replaces the current value of the variable

9. Operators Arithmetic + - * / % String – concatenation + Comparison or Relational > = <= != == Assignment (= ++ --) Shortcut Assignment (+=,-=,*=,/=,%=) Boolean (! && ||)

10. Arithmetic Operators The arithmetic operators are binary – expecting an operand on each side

11. Arithmetic Statements Operator precedence: rules ordering operation sequence Multiply, divide, and mod before add and subtract Parentheses override normal precedence Associativity: left to right for binary operators Nested parentheses: evaluate from inside out Example: 65 + 35 – (45 + 9) / 9 * 7 Evaluates to 58 Without parentheses: evaluates to 62 (do not distribute -) Parentheses are often used to clarify order of evaluation even when they don’t change it

12. Comparison Operators Operator Name < less than <= less than or equal to > greater than >= greater than or equal to == equal to != not equal to

13. Relational Operators Note: These are also binary

14. Boolean data type for variables boolean: holds one of two values: true or false Example statements isItPayday = false; areYouBroke = true; Six binary comparison operators (==), (>), ( =), (<=) Results of operations: true or false Perform comparisons, assign results to variable isSixBigger = (6 > 5); isOTPay = (hours > 40);

15. Common Errors Misspelling of a keyword or variable name Expression incorrectly written Missing ‘+’ in concatenation for output Use of implied multiplication (e.g. in algebra, variables next to each other are multiplied, e.g xy whereas one must write x*y in JavaScript)

16. Shortcut Assignment Operators OperatorExampleEquivalent +=i+=8i = i+8 -=f-=8.0f = f-8.0 *=i*=8i = i*8 /=i/=8i = i/8 %=i%=8i = i%8

17. Increment and Decrement Operators OperatorNameDescription ++varpreincrementThe expression (++var) increments var by 1 and evaluates to the new value in var after the increment. var++postincrementThe expression (var++) evaluates to the original value in var and increments var by 1. --varpredecrementThe expression (--var) decrements var by 1 and evaluates to the new value in var after the decrement. var--postdecrement The expression (var--) evaluates to the original value in var and decrements var by 1.

18. Increment and Decrement Operators, cont.

19. Boolean Operators Operator Name ! not && and || or

20. Truth Table for Operator !

21. Truth Table for Operator &&

22. Truth Table for Operator ||

23. Examples document.write("Is " + num + " divisible by 2 and 3? " + ((num % 2 == 0) && (num % 3 == 0))); document.write("Is " + num + " divisible by 2 or 3? " + ((num % 2 == 0) || (num % 3 == 0)));

24. Operator Precedence +, -, var++, var--, ++var, --var, ! (Not) *, /, % (Multiplication, division, and remainder) +, -(Binary addition/subtraction, String concatenation), >= (Comparison) ==, !=; (Equality) && (Conditional AND) || (Conditional OR) ?: Conditional operator (three operands) =, +=, -=, *=, /=, %= (Assignment operator)

25. Using Input Dialog Boxes Input dialog box: asks question above response field prompt( ) used to create input dialog boxes result = prompt("Enter first number","default answer"); The default answer displays initially in the textbox; if no second argument, one sees "undefined" there in Internet Explorer, nothing in Firefox The value returned will be treated as a string, even if the user entered a number

26. Conversion of Strings to Numbers Several ways to do this: Multiply string by 1, or Use parseInt(string value) or parseFloat(string value) – both functions extract a number at the beginning of the string, ignoring non-numbers after that

27. Confirm Dialog Boxes Confirm dialog box displays options Ok, Cancel Ex: selection = confirm("Do you want to upgrade to first class?"); the confirm() method returns either true (if user click OK), or false (if user clicked Cancel)

28. 28 Appropriate Comments Don’t overcomment by commenting the obvious; comments are for others and for you, to remind you what you were thinking

29. 29 Naming Conventions Choose meaningful and descriptive names. Variables and method names: Use lowercase. If the name consists of several words, concatenate all in one, use lowercase for the first word, and capitalize the first letter of each subsequent word in the name. For example, the variables radius and area, and the method computeArea.

30. Programming Errors Syntax Errors Detected by the interpreter when page loads Runtime Errors Causes a message to user about whether they want to abort the program to abort Logic Errors Produces incorrect result

31. 31 Syntax Errors i = 30; document.writ(i + 4);

32. 32 Runtime Errors Infinite loop

33. 33 Logic Errors // Determine if a number is between 1 and 100 inclusively number = prompt("Please enter an integer:",””_; // Display the result document.write("The number is between 1 and 100, " + "inclusively? " + ((1 < number) && (number < 100))); }