1. JavaScript and Ajax (JavaScript Data Types) Week 2 Web site: http://fog.ccsf.edu/~hyip

2. JavaScript Data Types Three primitive data types 1.number (internal represented as float number) 2.string 3.boolean One composite data type object (object, array, function) Four special values 1.null (no value) 2.undefined (variable declared, but no value assigned to it; object with property that does not exist) 3.NaN (Not a Number) 4.infinity (+ or – infinity)

3. Primitive Data Type - number Number SystemBaseExample Decimal10127 Hexadecimal160x7F or 0X7F Octal80177 MethodExample Normal12.000 -7.35.552 Scientific notation12E6 -.735E1.552E0

4. Primitive Data Type - string A string is a sequence of Unicode letters, digits, punctuation characters, and so on Examples: "" 'Testing' "3.14" "Last name is O’Riley" "This string has \n two lines"

5. Escape Sequence Escape sequence in string literals: the backslash character (\) has a special purpose in JavaScript strings. Combined with the character that follows it, it represents a character that is not otherwise representable within the string. Escape sequenceDescription \0The null character \bBackspace \tHorizontal tab \nNewline \vVertical tab \fForm feed \rCarriage return \"Double quote \'Apostrophe or single quote \\backslash

6. Primitive Data Type – string (continue…) Creating a string object: var test = "this is a text"; var test = new String("this is a text"); Concatenate strings: var msg = "Hello, " + "World"; // produce "Hello, World“ var greeting = "Welcome " + msg;

7. String Methods var test = "this is a text"; test.length // length of string = 14 test.toUpperCase() // output string to uppercase, original data unchanged test.toLowerCase() // output string to lowercase test.substring(2,4) // extract chars from pos 2 to pos 3, starting pos zero test.charAt(test.length – 1) // single char test.indexOf("is") // find the first occurrence of is, 2 test.indexOf("is", 3) // find "is" starting from position 3

8. Primitive Data Type - boolean The boolean data type has only two values: true and false  true = 1, +/- number, non-empty string  false = 0, NaN, "", null, undefined Boolean value used as number context: var a = true; // what data type is a? var b = a + 1; // what is b? Boolean value used as string context: document.write(a); // display "true" or "false"

9. Primitive Data Type - boolean Number value used as boolean context: var num = 1; // what is the result? If num=0 or NaN if (num) { alert("true"); } else { alert("false"); } String value used as boolean context: var num = "abc"; // what is the result? If num = "" or null or undefined if (num) { alert("true"); } else { alert("false"); }

10. Data Conversion Number: var num = 4.5;  Auto conversion from number to string alert(num); document.write(num);  Auto conversion from number to boolean if (num) { alert("true"); } else { alert("false"); }  Manual conversion from number to string alert(num.toFixed(2)); // what is the result? //4.50 alert(num.toExponential(2)); // 4.50E0 alert(num.toPrecision(2)); //4.5

11. Data Conersion (continue…) String: var str1 = "21"; var str2 = "2";  Auto conversion from string to number var result = str1 * str2; // other operators / - are ok too if (str2 == 2) { alert("true"); }  Auto conversion from string to boolean if (str2) { alert("true"); }  Manual conversion from string to number var num = parseInt(str1); var num2 = parseFloat(str2);

12. Data Conversion (continue…) Boolean: var bool = true;  Auto conversion from boolean to number var result = bool + 2; if (bool == 1) { alert("true"); }  Auto conversion from boolean to string alert(bool); document.write(bool);  No Manual conversion

13. Composite Data Type - object Object is a composite data type which consists of properties and methods Dot notation: object_name.property_name object_name.method_name() Object creation:  Special constructor (new operator): var obj = new Object(); obj.x = 2.3; obj.y = 3.2;  Object literal: var obj = { x:2.3, y:3.2};

14. Composite Data Type - array Array is a collection of data values (elements), each data value (element) in an array has an index (non-negative integer, starting from zero) Array creation  With new operator: var a = new Array(); a[0] = 12; a[1] = "ABC"; a[2] = true;  Declare and initialize at the same time: var a = new Array(12, "ABC", true);  With array literal: var a = [12, "ABC", true];

15. Associative array In JavaScript, object and array are interchangeable Object creation: var obj = { x:2.3, y:3.2}; Referencing object using dot notation: obj.x = 123; Referencing object using associative array format: obj["x"] = 123;

16. Composite Data Type - function Function is a piece of executable code function function_name(argument, parameter) { // JavaScript code; } // define JavaScript function function square(x) { return x * x; } // call user defined function var y = square(2);

17. NaN var num = parseInt("abc"); // or use parseFloat() if (isNaN(num)) { alert("Not a number"); } else { alert("It is a valid number"); }

18. variable Variable is a symbolic name that represents a value that can and likely will change or vary during a program’s execution Normally, declare and initialize at the same time var n = 37; var a = "abc"; var b = true; Variable name rules: 1.Only letters, numbers, and underscore are valid characters 2.First character must be letter or underscore 3.Cannot contain spaces 4.No reserved words 5.It is case sensitive

19. variable (continue…) Invalid variableValid variable first-namefirst_name 1namefirst_name last namelast_name casemyCase ifmyIf

20. Expression Expression will be evaluated to return a single value (single data type) var num = 27 + 2; First, 27 + 2 will be evaluated to become 29 with data type of number Then, assign numeric 29 to variable num

21. Sum of two numbers JavaScript treats data in HTML text box as string data type even though it may contain number [See sum of two numbers sample]sum of two numbers sample

22. Sum of two numbers solution To fix the problem, converts the text/string data manually using parseInt() or parseFloat() [See sum of two numbers solution]sum of two numbers solution

23. Typeof operator Typeof operator determines the current data type of any variable var a = 123; var b = true; var c = "ABC"; var result = typeof(a);