execution environment for javascript " java script window object represents the window in which...

Click here to load reader

Download Execution Environment for JavaScript " Java Script Window object represents the window in which the browser displays documents. " The Window object provides

Post on 29-Dec-2015




4 download

Embed Size (px)


  • Execution Environment for JavaScriptJava Script Window object represents the window in which the browser displays documents.The Window object provides largest enclosing referencing environment for scripts.All javaScript variables are properties of some objectThe Window properties are visible to all scripts in the document --they are the globals.Variables created by client-side script become (new) property of Window

  • Window propertiesProperty document is a reference to the JavaScript Document object that the window displaysProperty frames is an array of references to the (may be multiple) frames of the documentProperty forms is an array of references to the forms in the document.Each Form object has an elements array of references to form's elements.

  • DOM Document Object ModelProvides specifications for portability for users to write code in programming languages to create documents, work on their structures, change, add, or delete elements and their contextW3c development since early 90'sDOM 0 supported by JavaScript capableborwsersDOM 1, Oct 98; focused on HTML and XMLDOM 2, Nov 00; support CSS, event, tree manipulation events NS6 but not IE6

  • DOMDOM documents have a treelike structureDOM is abstract model defines interface between HTML documents and application programsDOM is an OO model -document elements are objects with both data (properties) and operations (methods)Language supporting DOM must have binding to the constructs

  • DOMIn JavaScript binding, HTML elements -->objectsHTML element attributes --> properties
  • Element Access in JavaScriptDOM 0 uses forms and element arrays

    DOM 0 address: documents.forms[0].element[0]Element names -- element and all ancestors to have name attributes (but body)

    Element name address: documents.myForm.pushMe

  • Element Access in JavaScriptDOM 1 adrressing via JavaScript method: getElementId

    DOM address: document.getElementId("pushme")

  • Events/Event HandlingHTML 4.0 provided standard --DOM 0Supported by all browsers that include JavaScriptDOM 2 comprehensive event modelSupported by Mozilla and NS6 browsersNot supported by IE6!!

  • Events/Event HandlingEvent-driven: code executed resulting to user or browser actionEvent: a notification that soemthing specific occurred -- by browser or userEvent handler: a script implicitly executed in response to event occurrenceRegistration: the process of connecting event handler to event

  • Events/Event Handling JavaScriptEvents are JavaScript objects --> names are case sensitive, all use lowercase only.(Method write should never be used in event handler. May cause document to be written over.)JavaScript events associated with HTML tag attributes which can be used to connect to event-handlersTable 5.1 (pg 182)

  • Events/Event Handling JavaScriptOne attribute can appear in several different tags:e.g. onClick can be in and HTML element get focus:When user puts mouse cursor over it and presses the left buttonWhen user tabs to the elementBy executing the focus methodElement get blurred when another element gets focusTable 5.2 pg. 184-184

  • Event Handling JavaScriptEvent handlers can be specified two waysAssigning the event handler script to an event tag attributeonClick = "alert('Mouse click!');"onClick = "myHandler();Assigning them to properties of JavaScript object associated with HTML elements

  • Event Handling JavaScriptThe load event: the completion of loading of a document by browserThe onload attribute of used to specify event handler:http://www.ens.utulsa.edu/~class_diaz/cs2043/load.htmlThe unload event: used to clean up things before a document is unloaded.

  • Radio Buttons

    The checked property of radio button object is true if the button is pressedAll button in the group have the same name, must use DOM address elementvar radioElement = document.myForm.elements;

  • Radio Buttons

    for ( var inder = 0 ; index < radioElement.length; index++){ if (radioElement[index].checked) { element = radioElement[index].value; break; }}http://www.ens.utulsa.edu/~class_diaz/radio_click.html

  • Radio ButtonsEvent handlers can be specified by assigning them to properties of JavaScript object associated with HTML elementsProperty names are lowercase versions of attribute namesFor functions, assign its name to the property:document.myForm.elemnts[0].onClick = myHandler;Sets handler for first element of arrayFor radio button group, each element of array must be assigned

  • Event HandlingSpecifying handlers by assigning them to event properties:Disadvantage --can not use parametersAdvantages:It is good to keep HTML and JavaScripts separateHandler could be changed during use

  • Checking Form InputJavaScript commonly used to check form input before it is sent to server for processing. Check for: Format and CompletenessApproach:Detect error and produce alert messgePut elemnt in focus (focus function)Select the element (select function)

  • Checking Form InputThe focus function puts the element in focus --the cursor in the elementdocument.getElementById("phone").focus();The select function highlights the text in the elementAfter event handler is finished have it return false to keep the form activeNeither slect nor focus are supported by NS 6.2

  • Checking Form Input/ExamplesComparing passwords:The user is asked to type it twiceProgram to very they are the sameThe form has two password input boxes to get the passwords, Reset, and Submit buttonsEvent handler triggered by SubmitNo passwd typed --> focus on box, return falseTwo passwds typed-> not same focus and select first box, rerurn false, else return truehttp://www.ens.utulsa.edu/~class_diaz/cs2043/passwd_chk.html

  • Checking Form Input/ExamplesFormat check for name & tel. Num.Event handler triggered by change event of text boxes for name and phone numberWhen error is found, an alert message is produced and both focus and select are called on the textbox element in errorAnother event handler will produce a thank you alert when the input is ok.http://www.ens.utulsa.edu/~class_diaz/cs2043/validator.html

  • DOM 2 Model

  • DOM 2 Event ModelDoes not include DOM 0 features, but they are still supportedMuch more powerful than DOM 0Events propagatesNode of document tree where event is created is the target nodeFirst phase is the capturing phaseEvents begin at the root and move toward target node

  • DOM 2 Event ModelIn the capturing phase, if there are any registered handlers at nodes along the way, if one is enabled, then it is run.The second phase is at the target node.If there are registered event handlers there for the event, they are runThe third phase is bubbling phaseEvent traverses back to the root. All encountered registered handlers are run

  • DOM 2 Event ModelNot all events bubbleAny handler can stop propagation by calling Event object method stopPropagationTo stop default operations call Event object method preventDefaultEvent handler with addEventListerner methodName of event as literal string, handler function, and boolean value to specify if event is enabled during capturing

  • DOM 2 Event ModelA temporary handler can be created by registering it and then unregistering it with remove EventListenerThe currentTarget property of Events always references the object on which the handler is being executed.The MouseEvent object (subobject of Event) has two properties: clientX, clientY, the (x,y) coordinates of mouse cursor relative to upper left cornervalidator2.html

  • The navigator ObjectIndicates which browser is being used.Two useful properties:The appName property has the bowser's nameThe appVersion has the version numbernavigator.html

View more