The JavaScript Environment • • •

Concept: JavaScript lives within the browser and is presented a series of objects that it can manipulate to: – Construct the user interface – Add interactivity to content in a displayed window – Create and manipulate additional windows Browsers present to JavaScript – Browser Object Model of HTML tags and attributes – Window/Document Model of browser objects JavaScript can find, manipulate, delete, insert HTML tags and attributes.

New HTML 5 - Tags

Purpose

: To make the web pages more semantic friendly

Linking HTML to JavaScript • • Obtrusive

or

Unobtrusive

– Putting script tags immediately before will not slow down page loading and rendering – Utilize the

Browser Object Model Next Slide

HTML 5 also specifies a device object

Document Model

Arrays of various kinds of objects. Netscape introduced this legacy structure early on. For Mobile Technology, avoid using these arrays

Window Methods & Properties

Expose Window object

+ str +"
");

Partial Output

window window navigator navigator document document InstallTrigger InstallTrigger str str property property console console getInterface getInterface sessionStorage sessionStorage globalStorage globalStorage localStorage localStorage getComputedStyle getComputedStyle dispatchEvent dispatchEvent removeEventListener removeEventListener addEventListener addEventListener name name parent parent top top

Key Window Object Methods/Properties

• • • • •

Key Methods

alert, confirm, prompt setInterval, clearInterval setTimeout, clearTimeout open, close, focus scrollTo

Note:

When referring to the window object we don’t need dot notation because

window

is the default. For example:

window.alert(“hello”)

and

alert(“hello”)

both work.

• • • • • • • • •

Key Properties

frames[], length navigator history location screen document parent, top, self, window Name // window name Status // Status bar

Opening & Closing Popup Windows

Bear picture Close window

Note: moveTo(x,y), moveBy(x,y), resizeTo(width,height) are additional methods

Limited Thread Processing

Note:

Thread-based functions block the browser when it gets control

• •

One time

– Execute a function in time milliseconds var timeObject = setTimeout( function, time); – – Cancel: clearTimeout(timeObject); Example: Window resize events repeatedly fire, but we want to respond once. The listener cancel and reissues setTimeout each time.

Repeated times

– Repeatedly execute every time milliseconds var timeObject = setInterval( function, time); – – Cancel: var clearInterval(timeObject); Example: Animation where a particular HTML component is to repeatedly move or rotate.

– Example: Scrollable messages

Web Workers (HTML 5)

Purpose

: Avoid single thread execution that blocks the browser var worker = new Worker( " workerFile.js

" ); btn.addEventListener( " click " , function() ( • • { worker.postMessage(someTextToSendToWorker); }, false); } At some point: worker.terminate();

Worker.js file

function{} { addEventListener( " message " , function(e) { /* code here */ // In a loop using AJAX or setInterval postMessage(textData); // Send to main JavaScript }, false); })();

// Note: the main thread adds a “message” handler to respond

The scrollTo method • • scrollTo(x, y); Example of use:

– ACORNS hear and respond and story book lessons play audio, and as the audio plays, the lesson highlights the word that displays and insures that it is visible to the user. – ACORNS code I actually uses another method that is part of HTML tag objects called, scrollIntoView(). The scrollIntoView() method then calls scrollTo(). – Calling scrollIntoView is easier because it finds the x,y position of the word corresponds to the playing audio.

Frames[] array

Note

: We’ll not say much about frames, because they should be avoided on mobile devices

• • • •

Frames are windows within the primary window These are created using HTML ,