JAVASCRIPT Session 2 Overview Introduction Data Types Operators
![Creating arrays: Arrays var fav. Colors = ['red', 'blue', 'green', 'yellow']; var gpa. Scores](https://slidetodoc.com/presentation_image_h2/f3a15c389461f91a9a94ab40a04a92cd/image-42.jpg "Creating arrays: Arrays var fav. Colors = ['red', 'blue', 'green', 'yellow']; var gpa. Scores")
- Slides: 48
JAVASCRIPT Session 2
Overview Introduction, Data Types, Operators and Statements JS #2: Java. Script Objects, Functions The Browser, The DOM, Dynamic pages, Debugging Java. Script and Custom Object creation, Storage XML - JSON, Introduction to Ajax
Operators and Statements Statement types assignment function call conditional loop
Assignment Statement An expression consisting of a variable on the left side, an assignment operator ‘=’, and the value that is being assigned on the right. The value can be: literal value variable function call -> -> -> x = 35. 7; x = y; x = Math. sqrt(25);
Arithmetic Operators We just saw how a value can be assigned to a variable. The value can also be assigned using arithmetic operators. var x = q + y; Remember, the ‘+’ operator will behave differently if the q and y are strings as opposed to numbers. Strings: + operator does concatenation Numbers: + operator does addition
Arithmetic Operators The arithmetic operator list: q + addition on numbers, concatenation on strings q - subtraction q * multiplication q / division q % modulus
The Unary Operators There are 3 unary operators ++ Increments a value num++; Same as: num = num + 1; - - Decrements a value num--; Same as: num = num - 1; - Represents a negative value FYI: num++; is not the same as ++num; Called post-increment and pre-increment Not important for the time being, but something to be aware of
Operator Precedence Java. Script processes some expressions containing some operators before others. Given: a. Value = 3 and b. Value = 6 var n. Value = a. Value + 30 / 2 - b. Value * 3; What is the value of n. Value? 3 + 30 / 2 – 6 * 3 3 + (30/2) – (6*3) 0
Operator Precedence Java. Script processes some expressions containing some operators before others. Given: a. Value = 3 and b. Value = 6 var n. Value = (a. Value + 30) / (2 – b. Value) * 3; What is the value of n. Value? 33 / -4 * 3 - 8. 25 * 3 - 24. 75
Increment Shortcut We saw earlier that num++ is the same as num = num + 1 Other operator 'shortcuts': += -= num + 5; *= /= Is the same as: num += 5; num = num -3; Is the same as: num -= 3; num = num * 10; Is the same as: num *= 10; num = num / 2; Is the same as: num /= 2;
Conditional Statements <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function choices() { var pref. Choice = 1; var state. Choice = 'IL'; var gender. Choice = 'M'; if(pref. Choice == 1) { alert("You picked number 1"); if(state. Choice == 'IL') { alert("You picked number 1 and you are from Illinois"); if(gender. Choice == 'M') { alert("You picked number 1 and you are from Illinois and are male"); } // innermost block } // middle block } // outer block } </script> </head> <body onload="choices()"> </body> </html>
Conditional Statements <script type="text/javascript"> //<![CDATA[ function choices() { var pref. Choice = 2; var state. Choice = 'IN'; var gender. Choice = 'F'; if(pref. Choice == 1) { alert("You picked number 1"); if(state. Choice == 'IL') { alert("You picked number 1 and you are from Illinois"); if(gender. Choice == 'M') { alert("You picked number 1 and you are from Illinois and you're male"); } // innermost block } // middle block } else { // outer block alert("You did not pick number 1"); if(state. Choice == 'IL') { alert("You did not pick number 1 and you are from Illinois"); if(gender. Choice == 'M') { alert("You picked number 1 and you are from Illinois and you're male"); } // innermost block } else { // middle block alert("You did not pick number 1 and you are not from Illinois"); if(gender. Choice == 'M') { alert("You did not pick number 1 and you are not from Illinois and you're male"); } else { // innermost block alert("You did not pick number 1 and you are not from Illinois and you're female"); } } //]]> </script>
switch Statement <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function choices() { var state. Choice = 'IL'; switch(state. Choice) { case 'IN': alert("You are from Indiana"); break; case 'FL': case 'OH': case 'IL': alert("You are from Florida, Ohio or Illinois"); break; default: alert("You are from somewhere else"); break; } } </script> </head> <body onload="choices()"> </body> </html>
Equality and Inequality Operators if (n. Value == ‘IL’) is not the same as if (n. Value = ‘IL’) '=' is an assignment operator (i. e. it assigns a value) '==' is an equality operator (i. e. it compares two values and returns a boolean) In the second example, (n. Value = ‘IL’) will end up evaluating to ‘true’. The reason is that because the assignment statement is “successful”, the conditional “test” returns as true. There is also a corresponding '!=' (inequality) operator: if (n. Value != ‘IL’)
“Strict” Equality and Inequality Sometimes, Java. Script tries to “help out” a little… var num = 3, str = “ 3”; if ( num == str ) returns true JS will attempt to do a type conversion to convert the items on either side of the equality operator so that they are of the same data type. While it is certainly possible that we wanted to compare these two items and have them be the same, in many cases, it can lead to unexpected and undesirable results. These are particularly insidious as they can show up much later down the road when the issue is considerably more difficult to nail down. With JS v 1. 3 (ECMA Standard 262, edition 3), a new equality operator was introduced, ‘===‘. In addition to the evaluating the values of the two items for equality, this operator also only returns true if the data types of the items are identical. SO: (num == str ) returns true (num === str ) returns false Note: There is a corresponding !== to test for non-equality. Some programmers strongly advocate always using ‘===‘ and ‘!==‘ unless there is a specific reason for not doing so.
Other Relational Operators With the ‘==’ and ‘!=’ we were testing for equality. Sometimes we have to test for a range, just not one specific case. if(a. Value 1 > a. Value 2) > greater than < less than >= greater than or equal <= less than or equal
Ternary Operator SYNTAX: condition ? value if true : value is false; This operator ultimately becomes a short-cut for a simple if/else statement. Note that this operator returns a value. A very handy shortcut! ( 5 > 10 ) ? “hello” : “goodbye”; Will return the string “goodbye”; var n. Value = 5. 0; var n. Result = (n. Value > 20) ? 1 : -1 n. Result will be assigned -1
Logical Operators if( (n. Value > 10) && (n. Value <= 100) && (n. Value!=2) ) Logical “and”: && Returns true only if ALL conditionals are true if( (n. Value > 10) || (n. Value <= 100) || (n. Value!=0) ) Logical “OR”: || Returns true as long as ONE of the conditionals is true if((n. Value != null) && (n. Value <= 100)) if(!(n. Value > 10))
Practice: Logical Operators If n. Value is assigned a value of 12, PREDICT whether the conditional will return true or false: if( (n. Value > 10) && (n. Value <= 100) && (n. Value != 12) ) Returns false. First two statements are true, but third is false. Recall that with logical AND, ALL statements must be true for the whole conditional to evaluate to true. if( (n. Value < -20) || (n. Value > 20) || (n. Value!=0) ) Returns true. The first two statements are false, but the third is true. Recall that with the logical ‘OR’, only ONE of the statements has to be true for the whole conditional to evaluate to true. if((n. Value != null) && (n. Value <= 100)) Returns true if ( !(n. Value > 10) ) Returns false. It first evaluates the statement n. Value>10 which evaluates to true. The ‘!’ operator then returns the logical negation of the operator.
Loops while do. . . while for
‘while’ Loop <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function loops() { var str. Value = ""; var n. Value = 1; while (n. Value <= 10) { str. Value += n. Value; n. Value++; } alert(str. Value); } </script> </head> <body onload="loops()"> <p>H 1</p> </body> </html>
‘do-while’ Loop <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function loops() { var str. Value = ""; var n. Value = 1; do { str. Value += n. Value; n. Value++; } while (n. Value <= 10); alert(str. Value); } </script> </head> <body onload="loops()"> <p>H 1</p> </body> </html> The key difference between the ‘while’ and ‘do-while’ loops is that with the do-while loop, the conditional is evaluated after the first iteration of the body of the loop. This net result, is that we are guaranteed one iteration of the body of the loop. With a ‘while’ loop, the conditional is evaluated first. If the conditional is false the first time around, we never execute the body of the loop.
<html> <head> <title>Conditional Example</title> <script type="text/javascript"> function loops() { var str. Value = ""; var n. Value = 1; for(var i=0; i < 10; i++) { str. Value += n. Value; n. Value++; } alert(str. Value); str. Value = ""; for(var i=10; i >= 0; i--) { str. Value += n. Value; n. Value--; } alert(str. Value); } </script> </head> <body onload="loops()"> <p>H 1</p> </body> </html> ‘for’ Loop 1. First we do the “initializing action” (e. g. var i = 0; ) 2. Next we evaluate the conditional. If true, we execute the body. If false, we end the loop. 3. AFTER executing the body, we update (e. g. i++; )
Java. Script Objects Java. Script includes several built-in objects. We have briefly looked at the Math object. Also included are objects that parallel the three key data types we have been working with: String, Number, Boolean. Other important and useful objects are include Date, Reg. Exp (regular expressions), and Array: Data Types: String, Boolean and Number Built-in: Math, Date, Reg. Exp Aggregator: Array
Regular Expressions, “Reg. Exp” Important topic, but can get somewhat involved and complex. Involves working with strings to look for patterns. Can be used for security purposes, form validation, datamining, search-and-replace, etc. var re 5 digit=/^d{5}$/ • • • ^ indicates the beginning of the string. Using a ^ metacharacter requires that the match start at the beginning. d indicates a digit character and the {5} following it means that there must be 5 consecutive digit characters. $ indicates the end of the string. Using a $ metacharacter requires that the match end at the end of the string.
Reg. Exp <html> <head> <title>Reg. Exp Example</title> <script language="Java. Script 1. 2" type="text/javascript"> //<![CDATA[ function checkpostal() { var re 5 digit=/^d{5}$/ //regular expression defining a 5 digit number The 'search' method //An object can also be created via: var re 5 digit = new Reg. Exp("^d{5}$"); returns the index of (the first occurrence of) the if (document. myform. myinput. value. search(re 5 digit)==-1) { //if match failed matched string. If the method does alert("Please enter a valid 5 digit number inside form"); } else { not find the match, it returns -1. alert("A valid 5 digit number was entered"); } } //]]> </script> </head> <body> <form name="myform"> <input type="text" name="myinput" size=15> <input type="button" on. Click="checkpostal()" value="check"> </form> </body> </html>
Objects v. s. Primitive Types With primitive values you just have only the value that was assigned, but Java. Script objects also have built-in functionality. For example, var name = “Bob” -> The variable name is aprimitive data type and includes only the value “Bob”. A String object however, has various things it can “do” such as determine the length of our string. Often the difference remains invisible with JS creating objects out of primitive types invisibly behind the scenes, and then getting rid of the object when the functionality is no longer needed. However, this results in a performance hit. If you anticipate needing to use the functionality of these objects, it is better to explicitly create the object as demonstrated below. var my. Name = “Jones”; // string as a primitive alert(my. Name. length); // String object is implicity created (and then discarded) var my. Name. Object = new String(”Jones”); // explicit object creation alert(my. Name. to. Upper. Case()); //using the String object’s functionality
Boolean Object False values: 0, false, empty parentheses var bool 1 = new Boolean(0); var bool 2 = new Boolean(false); var bool 3 = new Boolean(); True values: 1, true, any non-empty string var bool 4 = new Boolean(1); var bool 5 = new Boolean(true); var bool 6 = new Boolean("false"); // string is not empty, therefore evaluates to true
Pop-Quiz False values: 0, false, empty parentheses var bool 1 = new Boolean(0); var bool 2 = new Boolean(false); var bool 3 = new Boolean(); True values: 1, true, any non-empty string var bool 4 = new Boolean(1); var bool 5 = new Boolean(true); var bool 6 = new Boolean("false"); PREDICT: if ( bool 4 == true ) Returns true if ( bool 4 ) Returns true if ( bool 1 ) Returns false if ( bool 1==false ) Returns true if ( bool 1==“false" ) Returns false (bool 1 holds the boolean value of false. We are comparing it with a string)
Boolean Object Nearly all objects can invoke the methods ‘value. Of()’ and ‘to. String()’. Exactly what these methods do for a given object is highly dependent on the object in question and the context. In many cases, these methods simply attempt to determine what value(s) is/are stored inside the object and return that information. In the case of a Boolean object, the distinction is subtle: to. String() would return either “true” or “false” (i. e. a string), whereas value. Of() would return either true or false (i. e. the Boolean value). <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function bool() { var bool. Flag = new Boolean("false"); alert("The primitive value: "+bool. Flag. value. Of()); alert("The string value: "+bool. Flag. to. String()); } </script> </head> <body onload="bool()"> <p>H 1</p> </body> </html>
Number Object var n = Number. MAX_VALUE*2; Property Description Number. MAX_VALUE The maximum number representation in Java. Script Number. MIN_VALUE The smallest number representation in Java. Script Number. Na. N Represents Not-a-number Number. NEGATIVE_INFINITY Represents negative infinity Number. POSITIVE_INFINITY Represents. Infinity alert(n); //would output ‘infinity’ NOTE: These properties can ONLY be referenced using the ‘Number’ object name. They can not be referenced using an instance of Number: var x = new Number(); alert(x. MAX_VALUE); //undefined
Number class: String Conversions Conversion Type Description to. Exponential Returns a string representing the number using exponential notation to. Fixed Returns a string representing the number using fixed-point notation to. Precision Returns a string representing the number using a specific notation var n = new Number(3. 1415); var exp = n. to. Exponential(); var fixed = n. to. Fixed(2); alert(exp + "n" + fixed); alert( fixed + 88 ); //OUTPUTS? ? //because to. Fixed returns a string, using the //’+’ operator gives concatenation
String Conversions <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function numbers() { var new. Number = new Number(34. 8896); document. writeln(new. Number. to. Exponential(3) + " "); document. writeln(new. Number. to. Precision(3) + " "); document. writeln(new. Number. to. Fixed(6) + " "); var new. Value = new. Number. value. Of(); document. writeln(new. Value. to. String(2) + " "); document. writeln(new. Value. to. String(8) + " "); document. writeln(new. Value. to. String(10) + " "); document. writeln(new. Value. to. String(16) + " "); } </script> </head> <body onload="numbers()"> </body> </html>
String Object Methods
String Instance methods <html> <head> <title>Conditional Example</title> <script type="text/javascript"> //<![CDATA[ function string. HTML(new. String) { document. writeln(new. String. big() + " "); document. writeln(new. String. blink() + " "); document. writeln(new. String. sup() + " "); document. writeln(new. String. strike() + " "); document. writeln(new. String. bold() + " "); document. writeln(new. String. italics() + " "); document. writeln(new. String. small() + " "); document. writeln(new. String. link("http: //www. depa ul. edu") + " "); } //]]> </script> </head> <body onload="string. HTML('This is a test string')"> </body> </html> Note: I am including these examples on this page for purposes of demonstrating various String instance methods. However, it should be noted that tags such as blink, bold, etc, have been deprecated in favor of using CSS.
String Instance methods <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function string. HTML(new. String) { var limit = 3; var array. Tokens = new. String. split(" "); var array. Tokens. With. Limit = new. String. split(" ", limit); document. writeln(new. String. char. At(3) + " "); document. writeln(new. String. substr(5, 8) + " "); document. writeln(new. String. substring(5, 8) + " "); document. writeln(new. String. index. Of('t') + " "); document. writeln(new. String. to. Upper. Case() + " "); document. writeln(new. String. to. Lower. Case() + " "); document. write(" Contents of array. Tokens "); for(var i=0; i<array. Tokens. length; i++) { document. writeln(array. Tokens[i] + " "); } document. write(" Contents of array. Tokens. With. Limit "); for(var i=0; i<array. Tokens. With. Limit. length; i++) { document. writeln(array. Tokens. With. Limit[i] + " "); } } </script> </head> <body onload="string. HTML('This is a test string')"> </body> </html>
Date Object Use the Date object to create an instance of dates. There are several different way of creating a new date object using the ‘new Date()’ constructor: var dt. Now = new Date(); var dt. Milliseconds = new Date(59999000920); var new. Date = new Date("March 12, 1980 12: 20: 25"); var new. Date = new Date("March 12, 1980"); var new. Date = new Date(1980, 03, 12, 19, 30, 30); var new. Date = new Date(1980, 03, 12);
Date Object Local UTC Description get. Full. Year get. UTCFull. Year get. Hours get. UTCHours get. Milliseconds get. UTCMilliseconds get. Minutes get. UTCMinutes get. Month get. UTCMonth get. Seconds get. UTCSeconds get. Day get. UTCDay The Day of Week 0 - 6 get. Date get. UTCDate The Day of the Month The 4 digit year The Hours The Milliseconds The Minutes The Month 0 - 11 The Seconds Check out a reference such as http: //www. w 3 schools. com/jsref_obj_date. asp for more.
Date Instance methods <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function display. Date() { var dt. Now = new Date(); document. write(dt. Now+" "); document. write('<hr>'); dt. Now. set. Date(18); day of the month dt. Now. set. Month(10); dt. Now. set. Year(2010); dt. Now. set. Hours(13); dt. Now. set. Minutes(2); //’date’ refers to the //Note: zero-based document. writeln(dt. Now. to. String() + "<br />"); document. writeln(dt. Now. to. Locale. String() + " "); document. writeln(dt. Now. to. Locale. Date. String() + " "); document. writeln(dt. Now. to. Locale. Time. String() + " "); document. writeln(dt. Now. to. GMTString() + "<br />"); document. writeln(dt. Now. to. UTCString() + "<br />"); } </script> </head> <body onload="display. Date()"> </body>
Math Properties and Methods (partial list) Property Description Method Description E Value of e sin(x) The sine in radians LN 10 Natural log of 10 cos(x) The cosine in radians LN 2 Natural log of 2 tan(x) The tangent in radians acos(x) The arccosine in radians asin(x) The arcsine in radians atan(x) The arctangent in radians abs(x) absolute value random() Returns a random number between 0 and 1 LOG 2 E LOG 10 E PI SQRT 1_2 SQRT 2 Apprx. recip of LN 10 Value of pi square root of 1/2 square root of 2
Math Properties and Methods Note that all properties and methods of the Math object must be invoked using the ‘Math’ object itself. In fact, it is not even possible to instantiate (create an object of) the type ‘Math’. Math. sqrt(25); //okay var m = new Math(); //Nope! You can’t create an instance of a Math object m. sqrt(25); //not okay (see above) //All properties and methods of Math must be invoked using ‘Math’
Creating arrays: Arrays var fav. Colors = ['red', 'blue', 'green', 'yellow']; var gpa. Scores = new Array(3. 4, 3. 9. 2. 7); var empty. Array = new Array(); Working with arrays: alert(fav. Colors. length); //outputs 4 var most. Fav. Color = fav. Colors[0]; //most. Fav. Color is assigned ‘red’ for (var i=0; i<fav. Colors. length; i++) document. write( fav. Colors[i] + ' '); Arrays and other forms of collections are extremely important in programming. However, we will table further discussion for now.
Functions Give you functions meaningful names (identifiers) Keep your functions on task: A function should have one key task to perform. Do not try to squeeze too much behavior into one function.
Passing “By Value” v. s. “By Reference” Variables based on primitive data types are passed to a function “by value”, so if you change the value in the function, it will not be changed in the calling program. Objects are passed “by reference”. This means that if you modify the object inside the function, this change will be remain in your object even once the function ends. The concept of passing by reference as opposed to passing by value can take a little getting used to. We will only touch on it for now.
Pass by Value v. s. Pass by Reference <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function alter. Args(str. Literal, array. Object) { str. Literal = "Override"; array. Object[1] = "2"; array. Object[array. Object. length] = "three"; } function test. Params() { var str = "Original Literal"; var ary = new Array("one", "two"); document. writeln("The string literal is " + str +" "); document. writeln("The Array object is " + ary +" "); alter. Args(str, ary); document. write("<hr>"); document. write("After invoking the "alter. Args" function: "); document. writeln("The string literal is " + str +" "); document. writeln("The Array object is " + ary +" "); } </script> </head> <body onload="test. Params()"> </body> </html>
Function Returns Functions can also return information. This is extremely common and useful. <html> <head> <title>Conditional Example</title> <script type="text/javascript"> function add. Numbers() { var sum = add. Num(4, 5); document. writeln("The sum of 4 and 5 is " + sum +" "); } function add. Num(num 1, num 2) { var total = num 1 + num 2; return total; } </script> </head> <body onload="add. Numbers()"> </body> </html>
Function Returns <html> <head> <title>Return Function Example</title> <script type="text/javascript"> function find. Higher(arg 1, arg 2) { if (arg 1 > arg 2) return arg 1; else return arg 2; } //end find. Higher function test. Find. Higher() { alert("Higher is: " + find. Higher(-4, -2)); } //end test. Find. Higher </script> </head> <body onload="test. Find. Higher()"> </body> </html>
End of Session 2 Next Session: The Browser, The DOM, Dynamic pages, Debugging