HTML5 and CSS3 More JavaScript Page 1

Transcription

1 HTML5 and CSS3 More JavaScript Page 1 1 HTML5 and CSS3 MORE JAVASCRIPT The Math Object The Math object lets the programmer perform built-in mathematical tasks Includes several mathematical methods Math.min() Math.max() Math.pow() Math.round() Math.random() Constants of the Math Object // Finds smallest number in a list // Finds largest number in a list // Calculates the power of a number // Round to an integer // Returns a random number A constant is an identifier (like a variable) whose value once assigned never changes Some built-in constants of the Math object are: Math.PI Math.E The Date Object The Date object has several constructors for instantiating objects that store dates and times var dateobject = new Date(year, month, date); The date specified as arguments var dateobject = new Date(year, month, date, hour, minutes, seconds); The date and time specified as arguments var dateobject = new Date(); The current system date and time Some Methods of the Date Object Some methods of the date object are: dateobject.getfullyear() dateobject.getmonth() dateobject.getday() dateobject.gethours() dateobject.tostring() dateobject.toutcstring() dateobject.getlocaledatestring() dateobject.getlocaletimestring () Escape Sequences // Number of day of week // Local time // GMT Characters within a string followed by the backslash (\) character have a special meaning \b Backspace

2 HTML5 and CSS3 More JavaScript Page 2 \nnewline \t Vertical tab \" (For placing a quote inside a string) \\ (For placing a backslash inside a string) \uxxxx (Returns hex Unicode character) Type Conversions JavaScript is flexible with data types Automatically converts data type of variable to the type of the variable that is assigned to it Will attempt to convert factors in an expression based upon the operator 17 + "hello"; // Concatenates number and string "24" / "3"; "7" * "n"; Predefined Global Variables // Converts both strings and divides // Cannot convert "n" to a number // cannot multiply, returns NaN JavaScript read-only variables that usually are the result of some error in processing NaN (not a number) Infinity null (primitives, e.g. integers and floats, not assigned a value or an object not yet instantiated) undefined (value of variables not yet initialized deeper kind of absence than null) Wrapper Objects Used to force an explicit data type conversion onto a variable E.g. String(), Number(), Boolean(), etc. Almost never necessary in JavaScript Examples: var a = String(23.4); var b = Number("23.4"); var c = Boolean("true"); The getitembyid() Method Page 1 The document.getelementbyid() method returns any element in the DOM that has the ID attribute with the specified value Not just the value of an input text box Used almost every time the developer wants to manipulate or get information from an element on the document Returns null if no elements with the specified ID exists The ID should be unique within the web document If more than one element with the specified ID exists, returns the first element in the source code

3 HTML5 and CSS3 More JavaScript Page 3 16 The getitembyid() Method Page 2 document.getelementbyid("elementid") The elementid is the ID attribute value of any element in the document The getitembyid() Method Page 3 Examples: var number = document.getelementbyid("number").value; Retrieves (gets) the current value from an element with ID = "number" (could be any <form> element) document.getelementbyid("resultbinary").value = "10110"; Updates (sets) the value of an element with ID = "resultbinary" The innerhtml Property Page 1 The innerhtml property updates (sets) or returns (gets) the HTML content of an element Can be a combination of text and HTML tags There is a rarely used innertext property that can be used to update (set) and return (get) text only HTMLElementObject.innerHTML The HTMLElementObject is an element in the DOM (might be identified by ID or some other attribute) The innerhtml Property Page 2 Examples: document.getelementbyid("resultbinary").innerhtml = "10110"; Updates (sets) the HTML content of an element with ID = "resultbinary" var number = document.getelementbyid("number").value; Retrieves (gets) the current HTML content from an element with ID = "number" The tostring() Method The tostring() method converts a number to a string displayed in a specific base E.g. binary, octal, hexadecimal, etc. Convert to binary numb.tostring(2) Convert to hexadecimal numb.tostring(16) Parse Methods Page 1 The parse methods (parseint and parsefloat) methods take string arguments and parse (e.g. convert) them to int s and float s respectively Formats:

4 HTML5 and CSS3 More JavaScript Page 4 parseint(string) parsefloat(string) The string is the string that contains the number that is to be parsed Parse Methods Page 2 Both the first and second examples below will execute identically and return the integer 123: var number = parseint("123"); var number = parseint("123abc4"); In the second instance the JavaScript engine assumes there are no more numbers when it gets to the letter a Conditional Statements Provides alternative execution paths One path or another is chosen when the program executes depending upon a Boolean test result Either True or False the only two truth values Both selection (decision) and iteration (repetition/loop) structures use conditional statements The Relation Condition Page 1 A booleanexpression that compares two factors for conditions that are: Equal to (or not equal to) Greater than (or equal to) Less than (or equal to) The Relation Condition Page 2 factor1 relationaloperator factor2 At least one factor must be a variable both may be Examples: salary >= 150 hours == noon Relational Operators Also sometimes called conditional operators: == Is equal to < Is less than > Is greater than <= Is less than or equal (identical) to >= Is greater than or equal (identical) to!= Is not equal to Single-Sided if Statement Page 1

5 HTML5 and CSS3 More JavaScript Page 5 Statement(s) executed only if the test is true If the condition is false, statement(s) in body of structure are skipped if (booleanexpression) statement(s) to be executed when the test succeeds go here; Single-Sided if Statement Page 2 1. The keyword if 2. The booleanexpression inside (parentheses) 3. Statement(s) to be executed if booleanexpression is true in braces Single-Sided if Statement Page 3 var richpoor = "poor"; if (salary >= 150) richpoor = "rich"; Semi-colon (;) placement after every statement in the body of the structure (not after the condition) Single-Sided if Statement Page 4 Alternates if only one statement to be executed (braces not necessary) Alternate example 1: if (salary >= 150) richpoor = "rich"; Alternate example 2 (on a single line): if (salary >= 150) richpoor = "rich"; Double-Sided if Statement Page 1 One (set of) statement(s) executed if the test evaluates as true Another (set of) statement(s) executed if the test is false Double-Sided if Statement Page 2 if (booleanexpression) statement(s) to be executed when the test succeeds go here;

6 HTML5 and CSS3 More JavaScript Page 6 else statement(s) to be executed when the test fails go here; Double-Sided if Statement Page 3 1. The keyword if 2. The booleanexpression inside (parentheses) 3. Statement(s) to be executed if booleanexpression is true in the first set of braces 4. The keyword else 5. The statement(s) to be executed if the test fails in the second set of braces Double-Sided if Statement Page 4 if (salary >= 150) document.write("you must be rich"); else // if salary < 150 document.write("you must be poor"); Double-Sided if Statement (Page 5) Example (alternate version with no braces): if (salary >= 150) document.write("you must be rich"); else // if salary < 150 document.write("you must be poor"); Valid usage without braces because there is only one statement for each truth value Statement if true goes after the condition Statement if false goes after the keyword else Double-Sided if Statement (Page 6) Example (another alternate version): if (salary >= 150) document.write("you must be rich"); else document.write("you must be poor"); // salary < 150 Code Blocks Page 1 A set of statements inside braces More than one statement may executed within either true or false test block

7 HTML5 and CSS3 More JavaScript Page 7 if (booleanexpression) statement1; statement2; [statement3; ] Code Blocks Page 2 if (mousex > 100) fill(255); background(0); The else if Structure The if statement only can test for two truth values in an individual statement An option available for this purpose is the linear nested if It can test for more than two values (or ranges of values) of same variable within the structure The key words else if provide for an unlimited number of boolean expressions Sometimes known as case selection Format of else if if (booleanexpression1) statement(s) to be executed when test 1 succeeds go here; else if (booleanexpression2) statement(s) to be executed when test 2 succeeds go here; [else if ] [else statement(s) to be executed when all tests fail go here; ]

8 HTML5 and CSS3 More JavaScript Page 8 49 Example of else if Page 1 if (error.code == error.permission) alert("not sharing your location"); else if (error.code == error.position_unavailable) alert("cannot detect position"); Example of else if Page 2 else if (error.code == error.time_out) alert("position retrieval timed out"); else // if (error.code == error.unknown_error) alert("unknown error"); Combined if Statements Page 1 A combined (also called compound) if statement contains Multiple Boolean expressions (more than one) Connected by the logical operators && (meaning AND) (meaning OR) Combined if Statements Page 2 Formats: if (booleanexpression1 && booleanexpression2) or if (booleanexpression3 booleanexpression4) Combined if Statements Page 3 Examples: if (age >= 0 && age <= 10) With the && (AND) operator all conditions must be true if (age <= 10 age >= 80) With the (OR) operator any one condition (or more conditions) must be true

9 HTML5 and CSS3 More JavaScript Page 9 55 The! (NOT) Logical Operator Used to negate a Boolean expression so that the inverse (opposite) of the condition is true! booleanexpression The booleanexpression could be a Boolean variable, Boolean function or a relation condition if (! (age >= 0 && age <= 10) ) Is equivalent to: if (age < 0 age > 10) The switch Statement Page 1 The switch statement is used to select from one of a series of code blocks The switch expression is evaluated once The value of the expression is compared with the values of each case looking for a match (an equal to value) If there is a match between the expression and one case, the associated code block is executed The switch Statement Page 2 The keyword break breaks out of the switch block Stops execution of more code and additional case testing inside the block The job is done once one case matches the expression The default case is optional The switch Statement Page 3 switch(expression) case value: statements executed if value matches break; case value: statements executed if value matches break; default: statements executed if all cases false 60 The switch Statement Page 4

10 HTML5 and CSS3 More JavaScript Page 10 switch ( new Date().getDay() ) case 6: result = "Today is Saturday"; break; case 0: result = "Today is Sunday"; break; default: result = "Looking forward to weekend"; 61 The switch Statement Page 5 Equivalent to: var day = new Date().getDay(); if (day == 6) result = "Today is Saturday"; else if (day == 0) result = "Today is Sunday"; else result = "Looking forward to weekend"; Iteration (Loop) Statements Provides repeated execution of a block of statements The loop continues: A specified number of times (counter-controlled looping) While a condition is met (sentinel-controlled looping) or Also called repetition or do while structure Meaning do the loop while condition is True The for Loop Page 1 Implements a loop by counting a specific number of iterations (repetitions) Counter-controlled looping Appropriate when the exact number of loop repetitions is known for (initialize; booleanexpression; increment) statement(s) to be repeated; The for Loop Page 2

11 HTML5 and CSS3 More JavaScript Page 11 Example (three expressions in the parentheses): for (var ctr = 1; ctr <= 10; ctr++) The initialize component (var ctr = 1) Value assigned to a counter variable when the loop is first encountered in the program The booleanexpression component (ctr <= 10) Relation condition which is tested to determine if the loop should be entered again The increment component (ctr++) Indicates by what value the counter changes at the beginning of each subsequent loop The for Loop Page 3 Example 1: for (var ctr = 1; ctr <= stars; ctr++) document.write("*"); Unary Operators Unary operators update variables values by adding (increment operator) or subtracting (decrement operator) value of 1 to (or from) Operator Example Explanation ++ ctr++; ctr = ctr + 1; ++ ++ctr; ctr = ctr + 1; -- ctr--; ctr = ctr 1; -- --ctr; ctr = ctr 1; The for Loop Page 4 Example 2: var fahrenheit = [212, 72, 32, 0, -444]; var centigrade; for (var index = 0; index < 4; index++) centigrade = 5 / 9 * (fahrenheit[index] 32); document.write(centigrade); 70 Array Initializers An array initializer is an array literal in square [brackets], e.g.: [] is an empty array with no elements [3, 7] is an array with two elements [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] is a 3 x 3 2-dimensional array

12 HTML5 and CSS3 More JavaScript Page 12 [1,,,, 5] is an array with five elements in which three of the elements are undefined The for in Statement Page 1 Enables looping through an array without knowing exact number of elements During each loop execution the index for the array element is assigned to the for in variable for (var index in arrayname) statement(s) The for in Statement Page 2 var fahrenheit = [212, 72, 32, 0, -444]; var centigrade; for (var index in fahrenheit) centigrade = 5 / 9 * (fahrenheit[index] 32); document.write(centigrade); 74 The for in Statement Page 3 Equivalent to: var fahrenheit = [212, 72, 32, 0, -444]; var centigrade; for (var index = 0; index < 4; index++) centigrade = 5 / 9 * (fahrenheit[index] 32); document.write(centigrade); The while Loop Page 1 Continues to repeat a loop as long as a controlling condition is true (pre-test) Sentinel-controlled looping The variable controlling the condition must be updated by logic within the loop Exact number of loops is usually unknown The while Loop Page 2 while (booleanexpression)

13 HTML5 and CSS3 More JavaScript Page 13 statement(s) to be repeated as long as the booleanexpression is true; 78 The while Loop Page 3 var balance = ; var rate =.08; while (balance < ) balance *= (1 + rate); year++; 80 Assignment Operators Also known as op equals operators Assigns an updated value to a variable Operator Example Explanation += ctr += 1; ctr = ctr + 1; -= ctr -= 17; ctr = ctr - 17; *= ctr *= 8; ctr = ctr * 8; /= ctr /= 5; ctr = ctr / 5;