Representation and Management of Data on the Internet

1. Dynamic HTML Representation and Management of Data on the Internet

2. Dynamic HTML Dynamic HTML HTML CSS Java Script HTML HTML

3. What is Dynamic HTML • Dynamic HTML (DHTML) is an all-in-one word for web pages that use • Hypertext Markup Language (HTML), • Cascading Style Sheets (CSS), and • Rely on JavaScript to make the web pages interactive • DHTML describes the abstract concept of • breaking up a page into elements that can be manipulated • exposing those elements to a scripting language • the script performs the manipulations

4. Why Do We Need DHTML? • HTML in its traditional form is not powerful enough to create the interactive and multimedia-rich documents • Without DHTML, the browser must download another page from the server to change what the user sees on the screen

5. JavaScript (+) • JavaScript can: • Control document appearance and content • Control the behavior of the browser • Interact with document content • Interact with the user • Read and write client state with cookies • Interact with applets • Manipulate embedded images

6. JavaScript (-) • What JavaScript cannot do: • No graphics capabilities • No reading/writing of files on the client side • No networking except to arbitrary URLs • No multithreading

7. We Will Show • Getting information on the browser • Document manipulations • Content • Style • Events handling • Forms validation • Using cookies

8. DOM tree is created Page is loaded events

9. Dynamic HTML Object Model • Gives access to all the elements on the Web page: • Frames • Applets • Images • Forms • StyleSheets • etc. • Scripts are used to dynamically change objects and thus, change the Web page

10. document.form[1].text[2].value document.myform.book.value The Object Model • Naming hierarchy used to access individual elements of a HTML document • Easy to use if you name all entities: • Forms, fields, images, etc.

11. DOM Example <FORM NAME=“myform” ACTION=…> Please enter Your age: <INPUT TYPE=“TEXT” NAME=“age”><BR> and the name of your favorite book: <INPUT TYPE=“TEXT” NAME=“book”><BR> </FORM> • From JavaScript you can get the age input field as: • document.myform.age.value

12.  Internet Explorer JavaScript Netscape JavaScript Different Browsers Different browser Different JavaScript

13. The Solutions • Use JavaScript to detect the browser <SCRIPT LANGUAGE="JavaScript"> <!-- ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style } //--> </SCRIPT> • The document.layers object is specific to Netscape 4.0, while the document.all object is specific to IE 4.0

14. Collections all and children • all is used to refer to all the descendents of an object • children is used to access only direct children for(var loop=0; loop<document.all.length; ++loop) elements += “<BR>”+document.all[loop].tagName; In IE only!!!

15. Some Important Objects • window: • the top-level object – the window object is the "parent" object for all other objects in Navigator • has properties that apply to the entire window • there is also a window object for each "child window" in a frames document • document: • contains properties based on the content of the document, such as title, background color, links, and forms • location: • has properties based on the current URL • history: • contains properties representing URLs the client has previously requested

16. In Netscape

17. all window anchors applets document document body frames embeds document filters history forms navigator plugins images links location plugins event scripts screen styleSheets In IE collections objects

18. Information about the Browser • The Window object contains references to three objects that contain information about the browser or the browser window itself: • the Navigator object • the Location object • the History object

19. <script> for (prop in navigator) { document.write(prop + " -> " + navigator[prop], "<br>"); } document.write("<h3>Plugins</h3>"); for (i=0; i<navigator.plugins.length; i++) { document.write(navigator.plugins[i].name, "<br>"); } document.write("<h3>Mime Types</h3>"); for (i=0; i<navigator.mimeTypes.length; i++) { document.write(navigator.mimeTypes[i].type, "<br>"); } </script>

21. More System Info function _get_version() { return Math.round(parseFloat(navigator.appVersion) * 1000); } function _get_os() { if (navigator.appVersion.indexOf("Win95") > 0) return "WIN95"; else if (navigator.appVersion.indexOf("Win98") > 0) return "WIN98"; else if (navigator.appVersion.indexOf("Mac") > 0) return "MAC"; else if (navigator.appVersion.indexOf("X11") > 0) return "UNIX"; else return "UNKNOWN"; }

22. Sys Info (cont.) if (navigator.appName.substring(0,8) == "Netscape") { // if so, set the name variable appropriately browser.name = "NN"; // then parse navigator.appVersion to figure // out what version browser.version = _get_version(); // Then use appVersion again to determine // the OS browser.os = _get_os(); }

23. Sys Info (cont.) else if (navigator.appName.substring(0,9) == "Microsoft") { browser.name = "MSIE"; browser.version = _get_version(); browser.os = "WIN98"; } else { browser.name = navigator.appName; browser.version = _get_version(); browser.os = _get_os(); }

24. Sys Info (cont.) with (browser) { document.write("<p>Name=", name); document.write("<p>Version=", version); document.write("<p>OS=", os); }

25. alert confirm prompt Information to User

26. <HTML> <HEAD><TITLE>Dialogs Example</TITLE></HEAD> <BODY> <FONT SIZE = '5'> <P> Hello, this page will help you to install viruses in your computer. <SCRIPT LANGUAGE = "JavaScript"> num = prompt("Enter the number of viruses to install", 10); document.write("You have asked to install " + num + " viruses."); </SCRIPT> <P>First, you should confirm the installation.<P> <SCRIPT LANGUAGE = "JavaScript"> if (confirm("Are you ready for the virus installation?")) alert("Starting the virus installation.") </SCRIPT> Thank you for installing our viruses in your computer. </FONT> </BODY> </HTML>

27. Manipulating Objects • You can replace images in the page dynamically by setting their source

29. <HTML><HEAD><TITLE>Imagess Example</TITLE> <SCRIPT LANGUAGE = "JavaScript"> pageImages; imgNo; function start() { pageImages = new Array('dino.gif', 'monkey.gif', 'witch.gif'); imgNo = 0; } function replaceImage() { imgNo = (imgNo + 1) % pageImages.length; document.image.src = pageImages[imgNo]; } } </SCRIPT> </HEAD>

30. <BODY onLoad="start()"> <FONT SIZE = '5'> This is a picture: <IMG SRC="dino.gif" name="image"> <BR> Do you want to replace the picture? <FORM NAME="replacePicture"> <INPUT TYPE="button" VALUE="Yes" onClick="replaceImage()"> </FORM> </FONT> </BODY> </HTML>

31. Opening a New Window <FORM><INPUT TYPE="button" VALUE="Open Second Window"onClick="msgWindow=window.open(‘doc2.html', 'window2', 'resizable=no,width=200,height=200')"><P><INPUT TYPE="button" VALUE="Close Second Window"onClick="msgWindow.close()"></FORM> Why does a window need a name?

32. Opening a New Window <FORM><INPUT TYPE="button" VALUE="Open Second Window"onClick="msgWindow=window.open('','window2','resizable=no,width=200,height=200')"><P><A HREF="doc2.html" TARGET="window2"> Load a file into window2</A><P><INPUT TYPE="button" VALUE="Close Second Window"onClick="msgWindow.close()"></FORM>

33. Javascript Events • JavaScript supports an event handling system • You can tell the browser to execute JavaScript commands when some event occurs • Events usually occur due to users actions, for example, • clicking a button, • changing a text field • moving the mouse over a link • …

34. Events on TAGS • If an event applies to an HTML tag, then you can define an event handler for it • The name of an event handler is the name of the event, preceded by "on“ • For example, the event handler for the focus event is onFocus • The general syntax is <TAG eventHandler="JavaScript Code">

35. <HEAD><SCRIPT>function compute(f) {if (confirm("Are you sure?"))f.result.value = eval(f.expr.value)elsealert("Please come back again.")}</SCRIPT></HEAD><BODY><FORM>Enter an expression:<INPUT TYPE="text" NAME="expr" SIZE=15 ><INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)"><BR>Result:<INPUT TYPE="text" NAME="result" SIZE=15 ></FORM></BODY>

36. <SCRIPT LANGUAGE="JavaScript">function fun1() {   ...}function fun2() {   ...}</SCRIPT> <FORM NAME="myForm"><INPUT TYPE="button" NAME="myButton"   onClick="fun1()"></FORM> <SCRIPT>document.myForm.myButton.onclick=fun2</SCRIPT> Resetting the eventHandler

37. Event Handlers onAbort, onBlur, onChange, onClick, onDragDrop, onError, onFocus, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseUp, onMouseOver, onMove, onResize, onSelect, onSelect, onSubmit, onUnload

38. Events Related to DOM Objects onUnLoad onLoad onClick onMouseUp onMouseDown onClick onMouseOver Window events Button events Link events

39. Event Object • Each event has an event object associated with it • The event object provides information about the event, such as • the type of event, the location of the cursor at the time of the event • When an event occurs, and if an event handler has been written to handle the event, the event object is sent as an argument to the event handler

40. The Event Object Properties • target – String representing the object to which the event was originally sent • type–String representing the event type • data – Returns an array of strings containing the URLs of the dropped objects (DragDrop event)

41. The Event Object Properties • layerX • layerY • width – Represents the width of the window or frame • height – Represents the height of the window or frame.

42. The Event Object Properties • pageX – Number specifying the cursor's horizontal position in pixels, relative to the page • pageY – Number specifying the cursor's vertical position in pixels relative to the page • screenX – Number specifying the cursor's horizontal position in pixels, relative to the screen • screenY – Number specifying the cursor's vertical position in pixels, relative to the screen

43. Event Properties • which – Number specifying either the mouse button that was pressed or the ASCII value of a pressed key (For a mouse, 1 is the left button, 2 is the middle button, and 3 is the right button)

44. Event Capturing • Events are “falling” down the DOM tree • At each level they can be • captured, • handled, • routed

45. Event Capturing • captureEvents – captures events of the specified type • releaseEvents – ignores the capturing of events of the specified type • routeEvent – routes the captured event to a specified object • handleEvent – handles the captured event (Not a method of layer)

46. Example, Capturing Click Event • Set up the window to capture all Click events • Define a function that handles the event • Register the function as the window's event handler for that event

47. Capturing the Event window.captureEvents(Event.CLICK); window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP)

48. Defining a Function that Handles the Event function processClicks(event) {   ... // statements to handle event } window.captureEvents(Event.CLICK) window.onclick = processClicks

49. Routing the Event function processClicks(e) {    alert(“Event is captured and routed")routeEvent(e)}

50. Invocations • Three types of invocation: • Immediate • Deferred • Hybrid