Introduction to JavaScript Objects, Arrays, and Functions

1. Introduction to JavaScript(JavaScript 2)Xingquan (Hill) Zhuxqzhu@cse.fau.edu JS

2. JS • Object • Array • Function • JavaScript Object • Constructor • Widow object • Document object • JS Debugging JS

3. Object • Objects can be created with new • Math, Date, String, Number, • The most basic object is one that uses the Object constructor, as in • var myObject = new Object(); • The new object has no properties - a blank object • Properties can be added to an object, any time • var customerOrder = new Object(); • customerOrder.discount=false; • customerOrder.quantity = 4; • customerOrder.payment =“Visa"; Examples JS

4. Object • Objects can be nested, so a property could be itself another object, created with new • var customerOrder = new Object(); • customerOrder.customer=new Object(); • customerOrder.discount=false; • customerOrder.quantity = 4; • customerOrder.payment = “Visa"; • customerOrder.customer.name=“John”; • customerOrder.customer.address=“777 Glades Road”; JS

5. Object • Properties can be accessed by dot notation or in array notation, as in • var thePayment=customerOrder.payment; • var thePayment=customerOrder[“payment"]; Example • delete customerOrder.payment; • Another Loop Statement to access members in the Object • for (identifier in object) { statement or compound statement } • for (var prop in customerOrder) { document.write(customerOrder[prop] + "<br />");} Example JS

6. Array • Objects with some special functionality • Array objects can be created in two ways, with new, or by assigning an array literal • var myList = new Array(24, "bread", true); • var myList2 = [24, "bread", true]; • var myList3 = new Array(24); • Multi dimensional array Example • Var myList=[[24, “bread”,true],[true,”milk”]] • Array elements can be primitive values or references to other objects • Access array elements Example • myList[0], myList[1]….myList[myList.length-1]; • the length property stores the length • The length of an array is the highest subscript to which an element has been assigned, plus 1 • myList[122] = "bitsy"; // length is 123 • Length is dynamic JS

7. Array Methods • Join • e.g., var listStr = list.join(", "); Example • Reverse • Sort • Coerces elements to strings and puts them in alphabetical order • e.g., names.sort(); Example • Concat • e.g., newList = list.concat(47, 26); Example • Slice • listPart = list.slice(2, 5); • listPart2 = list.slice(2); • ToString • Coerce elements to strings, if necessary, and catenate them together, separated by commas (exactly like join(", ")) • Push, pop http://www.comptechdoc.org/independent/web/cgi/javamanual/javaarray.html JS

8. Functions • Why should we use functions • Divide-and-conquer • Software reusability • Packaged functions belonging to JS objects (Number.toString()) are called methods • Methods / functions interchangeable • Definition of a function • function function_name([formal_parameters]) Example { -- body – } • Return value is the parameter of return • If there is no return, or if the end of the function is reached, undefined is returned • If return has no parameter, undefined is returned • A function is invoked by a function call • var iReturn=function_name([actual_parameters]); • actual_parameters: constants, variables, or expressions JS

9. Functions • Functions are objects, so variables that reference them can be treated as other object references • If fun is the name of a function ref_fun = fun; ... ref_fun(); /* A call to fun */ • Ensure that the interpreter sees the definition of a function before it sees a call to the function • We place all function definitions in the head of the the HTML document JS

10. Functions • All variables that are either implicitly declared or explicitly declared outside functions are global • Variables explicitly declared in a function are local Example • There is no type checking of parameters, nor is the number of parameters checked (excess actual parameters are ignored, excess formal parameters are set to undefined) Example • All parameters are sent through a property array, arguments, which has the length property JS

11. Functions • There is no clean way to send a primitive by reference • One dirty way is to put the value in an array and send the array’s name function by10(a) { a[0] *= 10; } ... var listx = new Array(1); ... listx[0] = x; by10(listx); x = listx[0]; Example JS

12. Functions • To sort something other than strings into alphabetical order, write a function that performs the comparison and send it to the sort method • The comparison function must return a negative number, zero, or a positive number to indicate whether the order is ok, equal, or not • function num_order(a, b) {return a - b;} • Now, we can sort an array named num_list with: • num_list.sort(num_order) Example JS

13. JS • Object • Array • Function • JavaScript Object • Constructor • Widow object • Document object • JS Debugging JS

14. JS Objects • Constructor • Used to initialize objects, but actually create the properties • function customerOrder(bDiscount, iQuantity, sPayment) { this.discount = bDiscount; this.quantity = iQuantity; this.payment = sPayment; } • myOrder = new customerOrder(false, 3, “visa"); const.html JS

15. JS Objects • Can also have method properties • function displayOrder() { document.write(“Discount: ", this.discount, "<br />"); document.write(“Quantity: ", this.quantity, "<br />"); document.write(“Payment: ", this.payment, "<br />"); } • Now add the following to the constructor • this.display = displayOrder; const_method.html JS

16. JS Objects • JavaScript Form Access const_method_radio.html JS

17. Document Object • Manipulate document that is currently visible in the browser window JS

18. Window Object • Provides methods for manipulating browser window JS

19. Window Object • simplewindow.html • Timeout.htmlAnimation.html • window.html http://www.comptechdoc.org/independent/web/cgi/javamanual/javawindow.html JS

20. Debugging JS • IE6 • Select Internet Options from the Tools menu • Choose the Advanced tab • Uncheck the Disable script debugging box • Check the Display a notification about every • script error box • Now, a script error causes a small window to be • opened with an explanation of the error • NS7 • Select Tasks, Tools, and JavaScript Console • A small window appears to display script errors • Remember to Clear the console after using an • error message – avoids confusion • Mozilla Firefox VenkMan JS Debugging Tool DebugJS.html • Old School Tool JS

21. JS • Object • Array • Function • JavaScript Object • Constructor • Widow object • Document object • JS Debugging JS