1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07

2 rfXcel Confidential Copyright 2007 JavaScript Overview A Scripting language for web Written by Netscape in 1995 Netscape Navigator 2.0 –JavaScript 1.0 Object Based Language – Not Compiled Language – Case sensitive Can be embedded with HTML tags or separately JavaScript Interacts with Document Object Model of Browser DOM Not Totally Standardized JavaScript allows for interactivity

3 rfXcel Confidential Copyright 2007 JavaScript and HTML Runs in Browser Add to HTML with Script Tag document.write("This text was written with JavaScript!");

4 rfXcel Confidential Copyright 2007 JavaScript and HTML My First Java Script This is a line of code before the script <!-- var rightNow = new Date(); document.write("This text was written with JavaScript! "); document.write("It is now!" + rightNow); //--> This is a line of code after the script

5 rfXcel Confidential Copyright 2007 JavaScript and HTML HTML Script Tag may call an external file External files supported in Netscape and Microsoft Internet Explorer 4.0 and above Single lien comment –// document.write("This text was written with JavaScript!"); Multi-line comment –<!-- document.write("This text was written with JavaScript!"); -->

6 rfXcel Confidential Copyright 2007 JavaScript and HTML document.write("This text was written with JavaScript!"); document – javascript object write – method contained in the object (“This text….”) – string argument passed to method Place javascript that outputs directly to the page in the BODY of the HTML page Place javascript that does not output to the page in the HEAD section of the HTML page document.name – named element in document document.images – array of images document.forms – array of forms Ways to access window, cookies, etc.

7 rfXcel Confidential Copyright 2007 JavaScript and HTML Where Do I Put Them –Scripts in the body section will execute while the page loads –Scripts in the head section will be executed when called –You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.

8 rfXcel Confidential Copyright 2007 JavaScript Objects Reference WebsiteReference Website WindowScreenObjectLayerFormButton TextareaResetNumberImageFileUploadBoolean TextRegExpNavigatorHistoryEventArray SubmitRadioMathHiddenDocumentArea StringPasswordLocationFunctionDateApplet ScreenOptionLinkFrameCheckboxAnchor

9 rfXcel Confidential Copyright 2007 JavaScript Objects Hierarchy Standard Objects –Window Location History Frames Navigator – Plugin – Mime-type –Document

10 rfXcel Confidential Copyright 2007 JavaScript Objects Hierarchy Standard Objects –Window –Document Anchor Applet Link and Area Image Form

11 rfXcel Confidential Copyright 2007 JavaScript Objects Hierarchy Standard Objects –Window –Document Form – Button – Checkbox – FileUpload – Hidden – Password – Radio – Reset – Select – Submit – Text – Textarea

12 rfXcel Confidential Copyright 2007 JavaScript Methods Methods are functions and procedures used to perform an operation on an object, variable, or constant. With the exception of built-in functions, methods must be used with an object: object.method() Method Reference cript/quickref/js_methods.html

13 rfXcel Confidential Copyright 2007 JavaScript Properties A JavaScript object has properties associated with it. You access the properties of an object with a simple notation: objectName.propertyName Different Objects have a different set of properties Property Reference

14 rfXcel Confidential Copyright 2007 JavaScript Events JavaScript applications are typically event-driven. Events are actions that occur, usually as a result of something the user does. For example, a button click is an event, as is giving focus to a form element. You can define Event handlers, scripts that are automatically executed when an event occurs W3Schools Reference DevGuru Reference

15 rfXcel Confidential Copyright 2007 JavaScript Events Events apply to HTML tags as follows: –Focus, Blur, Change events: text fields, textareas, and selections –Click events: buttons, radio buttons, checkboxes, submit buttons, reset buttons, links –Select events: text fields, textareas –MouseOver event: links

16 rfXcel Confidential Copyright 2007 JavaScript Events EventOccurs when...Event Handler blurUser removes input focus from form elementonBlur clickUser clicks on form element or linkonClick changeUser changes value of text, textarea, or select elementonChange focusUser gives form element input focusonFocus loadUser loads the page in the NavigatoronLoad mouseoverUser moves mouse pointer over a link or anchoronMouseOver selectUser selects form element's input fieldonSelect submitUser submits a formonSubmit unloadUser exits the pageonUnload

17 rfXcel Confidential Copyright 2007 AJAX –Asynchronous Javascript And Xml. –The JavaScript communicates with the server using XMLHttpRequest, receives a response in the form of XML from the server side component, which is used by the JavaScript to manipulate the HTML to present data to the user.

18 rfXcel Confidential Copyright 2007 AJAX Four Steps to implement AJAX –Setting up the XMLHttpRequest. –Calling the server-side component. –Generate the XML response. –Registering and implementing call-back handler and at the server side.

19 rfXcel Confidential Copyright 2007 AJAX Setting up the XMLHttpRequest. var xmlHttp; if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); }

20 rfXcel Confidential Copyright 2007 AJAX Calling the server-side component i. setRequestHeader xmlHttp.setRequestHeader("Content-Type", "application/x- www-form-urlencoded; charset=UTF-8"); ii. open xmlHttp.open("GET",” +user, true); iii.send var params=”user=”+user+”&pass=”+pass; xmlHttp.send(params)

21 rfXcel Confidential Copyright 2007 AJAX Generate the XML response. response.setContentType("text/xml"); response.getWriter().write(" true ");

22 rfXcel Confidential Copyright 2007 AJAX Registering and implementing call-back handler and at the server side. xmlHttp.onreadystatechange=handleStateChange; function handleStateChange(){ if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { document.getElementById("results").innerHTML=xmlHttp.resp onseText; } else { alert("Error "+ xmlHttp.status +":"+xmlHttp.statusText); } } }

23 rfXcel Confidential Copyright 2007 AJAX Status of the Request. –0: The request is uninitialized (before you've called open()). –1: The request is set up, but not sent (before you've called send()). –2: The request was sent and is in process (you can usually get content headers from the response at this point).

24 rfXcel Confidential Copyright 2007 AJAX Status of the Request. –3: The request is in process; often some partial data is available from the response, but the server isn't finished with its response. –4: The response is complete; you can get the server's response and use it.