1. CNIT 133 Interactive Web Pags – JavaScript and AJAX Objects

2. Agenda My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).http://fog.ccsf.edu/~hyip Objects and Arrays. Creating objects. Object properties. Enumerating properties. Checking and deleting properties. Objects as associative arrays. Constructor property. toString() and valueOf() methods.

3. Objects and Arrays Objects and arrays are two fundamental data types in JavaScript. They are collections of values. An object is a collection of named values. An array is a specialized kind of object that behaves as an ordered collection of numbered values.

4. Creating Objects An object is an unordered collection of properties, each of which has a name and a value. The named values may be primitive values (number or string or boolean), or may be another objects. The easiest way to create an object is to include an object literal in your JavaScript code. An object literal is a comma-separated list of property name/value pairs, enclosed within curly braces: var empty = { }; // an object with no properties var point = { x:0, y:0 }; // x or "x" are the same here var circle = { x:point.x, y:point.y+1, radius:2 }; var homer = {"name":"homer simpson", "age": 34, "married": true, "occupation": "plant operator", "email": "homer@example.com" };homer@example.com The new operator can create specialized kinds of objects: var a = new Array(); // create an empty array var d = new Date();// create an object with current date & time It is also possible to define your own constructor functions.

5. Object Properties You normally use the. to access the value of an object’s properties The value on the left of the. should be the object whose property you want to access (the name of the variable that contains the object reference or expression that evaluates to an object) The value on the right of the. should be the name of the property (must be an identifier, not a string or an expression) You can create a new property of an object simply by assigning a value to it: var book = {};// create a new object with empty object literal book.title = "JavaScript: the definitive Guide"; book.chapter1 = new Object(); book.chapter1.title = "Introduction to JavaScript"; book.chapter1.pages = 11; book.chapter2 = { title: "Lexical Structure", pages: 6}; alert("Outline: " + book.title + "\n\t" + "Chapter 1 " + book.chapter1.title + "\n\t" + "Chapter 2 " + book.chapter2.title);

6. Enumerating Properties The for/in loop provides a way to loop through, or enumerate, the properties of an object This can be useful when working with objects that may have arbitrary properties whose names you do not know in advance: function displaypropnames(obj) { var names = ""; for(var nm in obj) { names += nm + "\n"; } alert(names); } NOTE: the for/in loop does not enumerate properties in any specific order, and it does not enumerate certain predefined properties or methods

7. Checking Property Existence The in operator can be used to test for the existence of a property. The left side of this operator should be the name of the property as a string. The right side should be the object to be tested. If o has a property named “x”, then 1 will assign to “x”. if ("x" in o) { o.x = 1; }

8. Deleting Properties You can use the delete operator to delete a property of an object: delete book.chapter2; Note that deleting a property does not merely set the property to undefined; it actually removes the property from the object. After deletion, for/in will not enumerate the property And the in operator will not detect it.

9. Objects as Associative Arrays The. operator is used to access the properties of an object. It is possible to use the [ ] operator, which is more commonly used with arrays, to access these properties. The following two JavaScritp expression have the same value: object.property object["property"] The first statement’s property name is an identifier The second statement’s property name is a string When you use the. operator to access a property of an object, the name of the property is expressed as an identifier. Identifiers must be typed literally; they are not a datatype, so they cannot be manipulated by the program. When you access a property of an object with the [ ] array notation, the name of the property is expressed as a string. Strings are JavaScript datatypes, so they can be manipulated and created while a program is running: var customer = {address0: "addr0", address1: "addr1", address2: "addr2"}; var addr = ""; for (var i = 0; i < 3; i++) { addr += customer["address" + i] + "\n"; } alert(addr); This code reads and concatenates the address0, address1, … properties of the customer object. When an object is used in this fashion, it is often called an associative array – a data structure that allows you to dynamically associate arbitrary values with arbitrary strings. The term “map” is often used to describe this situation as well: JavaScript objects map strings (property names) to values.

10. Universal Object Properties and Methods All objects in JavaScript inherit from the Object class. All objects also support the properties and methods defined by Object.

11. The constructor property In JavaScript, every object has a constructor property that refers to the constructor function that initializes the object. var d = new Date(); d.constructor == Date;// evaluates to true The constructor property can help determine the type of an object: if ((typeof o == "object") && (o.constructor == Date)) // then do something with the Date object The instanceof operator checks the value of the constructor property, so the code could be written: if ((typeof o == "object") && (o instanceof Date)) // then do something with the Date object

12. The toString() Method The toString( ) method takes no arguments; it returns a string that somehow represents the value of the object on which it is invoked. JavaScript invokes this method of an object whenever it needs to convert the object to a string (e.g. use in + operator, alert() method) When an array is converted to a string, you obtain a list of the array elements, each converted to a string. When a function is converted to a string, you obtain the source code for the function.

13. The valueOf() Method The valueOf( ) method is called when JavaScript needs to convert an object to some primitive type other than a string – typically, a number. JavaScript calls this method automatically if an object is used in a context where a primitive value is required.