js1-1 introduction to javascript (javascript 2) xingquan (hill) zhu [email protected]

JS 1-1

Introduction to JavaScript(JavaScript 2)

Xingquan (Hill) [email protected]

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



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-16

JS Objects

JavaScript Form Access

const_method_radio.html

JS 1-17

Document Object Manipulate document that is currently visible in

the browser window

JS 1-18

Window Object Provides methods for manipulating browser window

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

JS 1-21

JS



JS Debugging

js1-1 introduction to javascript (javascript 2) xingquan (hill) zhu [email protected]

Documents