Introduction to Web Application

Introduction to Web Application Implement JavaScript in HTML

References • http://10.89.115.100:8086/material/JavaScriptBibleGoldEn.pdf • Web Development/HTML and Dynamic HTML/DHTML Reference • http://www.w3.org/DOM

Introduction • Dynamic HTML Object Model • Allows Web authors to control the presentation of their pages • Gives them access to all the elements on their pages • Web page • Elements, forms, frames, tables • Represented in an object hierarchy • Scripting • Retrieve and modify properties and attributes

Object Referencing • The simplest way to reference an element is by using the element’s idattribute. • The element is represented as an object • HTML attributes become properties that can be manipulated by scripting

Example of all <html> <head> <title>Object Model</title> <script type = "text/javascript">  </script> </head> <body onload = "start()"> <p id = "pText">Welcome to our Web page!</p> </body> </html>

Collections all and children • Collections • Arrays of related objects on a page • all • all the HTML elements in a document • children • Specific element contains that element’s child elements

<html> <head> <title>Object Model</title> <script type = "text/javascript">  </script> </head> <body onload = "start()"> <p id = "pText">Elements on this Web page:</p> </body> </html>

<html> <head> <title>Object Model</title> <script type = "text/javascript">  </script> </head>

<body onload = "child( document.all[ 4 ] ); myDisplay.outerHTML += elements; myDisplay.outerHTML += '</ul>';"> <p>Welcome to our <strong>Web</strong> page!</p> <p id = "myDisplay"> Elements on this Web page: </p> </body> </html>

The Document Object Model • The DOM is an abstract model that defines the interface between HTML documents and application programs • Documents in DOM have a tree-like structure

The Document Object Model

The Document Object Model • Under development by w3c since the mid-90s • DOM is a successor to DHTML • DOM now has 4 levels • DOM0 is designed to deal with just HTML documents • DOM1 is focused on the HTML and XML document model, all modern browser has supported DOM1 • Appendix

The Document Object Model • DOM 2 is the latest approved standard, which specifies a CSS object model and include document traversals and an event model, but none modern browser can fully support DOM2 • DOM3 is under development

The Document Object Model • It is an OO model - document elements are objects • A language that supports the DOM must have a binding to the DOM constructs • In the JavaScript binding, HTML elements are represented as objects and element attributes are represented as properties • e.g., <input type = "text" name = "address">would be represented as an object with two properties, type and name, with the values "text" and "address"

The Document Object Model • The property names in JavaScript are usually just lowercase versions of the corresponding HTML attribute names

Dynamic Styles • Element’s style can be changed dynamically • Dynamic HTML Object Model also allows you to change the class attribute

<html > <head> <title>Object Model</title> <script type = "text/javascript">  </script> </head> <body onload = "start()"> <p>Welcome to our Web site!</p> </body> </html>

<html> <head> <title>Object Model</title> <style type = "text/css"> .bigText { font-size: 3em; font-weight: bold } .smallText { font-size: .75em } </style> <script type = "text/javascript">  </script> </head> <body onload = "start()"> <p id = "pText">Welcome to our Web site!</p> </body> </html>

Dynamic Positioning • HTML elements can be positioned with scripting • Declare an element’s CSS position property to be either absolute or relative • Move the element by manipulating any of the top, left, right or bottom CSS properties

<html> <head> <title>Dynamic Positioning</title> <script type = "text/javascript">  </script> </head> <body onload = "start()"> <p id = "pText" style = "position: absolute; left: 0; font-family: serif; color: blue"> Welcome!</p> </body> </html>

function run() { count += speed; if ( ( count % 200 ) == 0 ) { speed *= -1; direction = !direction; pText.style.color = ( speed < 0 ) ? "red" : "blue" ; firstLine = ( speed < 0 ) ? "Text shrinking" : "Text growing"; pText.style.fontFamily = fontStyle[ ++fontStylecount % 3 ]; } pText.style.fontSize = count / 3; pText.style.left = count; pText.innerHTML = firstLine + "<br /> Font size: " + count + "px"; }

Using the frames Collection • Referencing elements and objects in different frames by using the frames collection

Index.html <html> <head> <title>Frames collection</title> </head> <frameset rows = "100, *"> <frame src = "top.html" name = "upper" /> <frame src = "" name = "lower" /> </frameset> </html>

top.html <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>The frames collection</title> <script type = "text/javascript">  </script> </head> <body onload = "start()"> <h1>Cross-frame scripting!</h1> </body> </html>

navigator Object • Netscape, Mozilla, Microsoft’s Internet Explorer • Others as well • Contains information about the Web browser • Allows Web authors to determine what browser the user is using

<html> <head> <title>The navigator Object</title> <script type = "text/javascript">  </script> </head> <body onload = "start()"> <p>Redirecting your browser to the appropriate page, please wait...</p> </body> </html>

Summary of the DHTML Object Model window document all frames anchors document history applets document navigator body plugins location embeds event filters screen forms images links Key object plugins collection scripts styleSheets Fig. 13.10 DHTML Object Model.

Summary of the DHTML Object Model

Event Model

Introduction • Event model • Scripts can respond to user • Content becomes more dynamic • Interfaces become more intuitive

Event onclick • onClick • Invoked when user clicks the mouse on a specific item

<html> <head> <title>DHTML Event Model - onclick</title> <script type = "text/javascript" for = "para" event = "onclick">  </script> </head> <body>  <p id = "para">Click on this text!</p>  <input type = "button" value = "Click Me!" onclick = "alert( 'Hi again' )" /> </body> </html>

Event onload • onload event • Fires when an element finishes loading • Used in the body element • Initiates a script after the page loads into the client

<html> <head> <title>DHTML Event Model - onload</title> <script type = "text/javascript">  </script> </head> <body onload = "startTimer()"> <p>Seconds you have spent viewing this page so far: <strong id = "soFar">0</strong></p> </body> </html>

Error Handling with onerror • onerror event • Execute specialized error-handling code

<html> <head> <title>DHTML Event Model - onerror</title> <script type = "text/javascript">  </script> </head> <body> <input id = "mybutton" type = "button" value = "Click Me!" onclick = "doThis()" /> </body> </html>

Tracking the Mouse with Event onmousemove • onmousemove • Fires repeatedly when the user moves the mouse over the Web page • Gives position of the mouse

<html> <head> <title>DHTML Event Model - onmousemove event</title> <script type = "text/javascript">  </script> </head> <body style = "background-color: wheat" onmousemove = "updateMouseCoordinates()"> <span id = "coordinates">(0, 0)</span><br /> <img src = "deitel.gif" style = "position: absolute; top: 100; left: 100" alt = "Deitel" /> </body> </html>

Introduction to Web Application