Upload
alysha-fitzpatrick
View
226
Download
0
Embed Size (px)
Citation preview
JS 1-2
JS
Object Array Function JavaScript Object
Constructor Widow object Document object
JS Debugging
JS 1-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 1-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 1-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 1-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 1-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 1-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 1-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 1-10
Functions
All variables that are either implicitly declared or explicitly declared outside functions are global
Variables explicitly declared in a function are localExample
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 1-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 namefunction by10(a) { a[0] *= 10; }...var listx = new Array(1);...listx[0] = x;by10(listx);x = listx[0]; Example
JS 1-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 1-13
JS
Object Array Function JavaScript Object
Constructor Widow object Document object
JS Debugging
JS 1-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 1-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 1-19
Window Object
simplewindow.html
Timeout.html Animation.html
window.html
http://www.comptechdoc.org/independent/web/cgi/javamanual/javawindow.html
JS 1-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