1. JS1-1 Introduction to JavaScript (JavaScript 2) Xingquan (Hill) Zhu xqzhu@cse.fau.edu

2. JS1-2 JS  Object  Array  Function  JavaScript Object  Constructor  Widow object  Document object  JS Debugging

3. JS1-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

4. JS1-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”;

5. JS1-5 Object  Properties can be accessed by dot notation or in array notation, as in  var thePayment=customerOrder.payment;  var thePayment=customerOrder[“payment"];ExampleExample  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] + " ");} Example

6. JS1-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 arrayExampleExample  Var myList=[[24, “bread”,true],[true,”milk”]]  Array elements can be primitive values or references to other objects  Access array elementsExampleExample  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

7. JS1-7 Array Methods  Join  e.g., var listStr = list.join(", ");ExampleExample  Reverse  Sort  Coerces elements to strings and puts them in alphabetical order  e.g., names.sort();ExampleExample  Concat  e.g., newList = list.concat(47, 26);ExampleExample  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 http://www.comptechdoc.org/independent/ web/cgi/javamanual/javaarray.html

8. JS1-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]) ExampleExample { -- 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

9. JS1-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

10. JS1-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)ExampleExample  All parameters are sent through a property array, arguments, which has the length property

11. JS1-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];ExampleExample

12. JS1-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

13. JS1-13 JS  Object  Array  Function  JavaScript Object  Constructor  Widow object  Document object  JS Debugging

14. JS1-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

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

16. JS1-16 JS Objects  JavaScript Form Access const_method_radio.html

17. JS1-17 Document Object  Manipulate document that is currently visible in the browser window

18. JS1-18 Window Object  Provides methods for manipulating browser window

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

20. JS1-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 ToolDebugJS.html  Old School Tool

21. JS1-21 JS  Object  Array  Function  JavaScript Object  Constructor  Widow object  Document object  JS Debugging