Download presentation
Presentation is loading. Please wait.
Published byAlysha Fitzpatrick Modified over 10 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.