Introduction to DHTML What is DHTML l l

What is DHTML? l l l Dynamic HTML Just as Access is Dynamic Database

What is DHTML? Dynamic Hypertext Markup Language is comprised of: – – – l

Document Object Model (DOM) l l DOM is an interface that permits scripts to

Dynamic HTML: Object Model and Collections The object model allows Web authors to control

Object Referencing Simplest way to reference an element is by using element’s id attributes

Collections all and children Collections are arrays of related objects on a page. l

Collections all and children var elements = "<ul>"; function child( object ) { var

Dynamic Styles l l An element’s style can be changed dynamically. Often such a

Dynamic Styles function start() { var input. Class = prompt( "Enter a class. Name

Dynamic Positioning l l Dynamic Positioning enables XHTML elements to be positioned with scripting.

Dynamic Positioning: Example function start() { window. set. Interval( "run()", 100 ); } <body

Dynamic Positioning: Example l The clear. Timeout and clear. Interval functions are used to

frames collection is useful to access those elements and objects are in different frames

navigator Object navigator object contains information about the Web browser that is viewing the

Dynamic HTML: Event model Clicking a button, moving the mouse pointer over part of

Event onclick and onload Event onclick <body> <!-- The id attribute gives a unique

Event onclick and onload Event onload function start () { alert(“Welcome to Nirma University”);

Error Handling with onerror l onerror event is used to execute specialized error-handling code

Tracking the Mouse with Event onmousemove l l Event onmousemove fires repeatedly whenever the

Tracking the Mouse with Event onmousemove function update. Mouse. Coordinates() { coordinates. inner. Text

Rollovers with onmouseover and onmouseout l l When the mouse cursor move over an

Form Processing with onfocus and onblur The onfocus event fires when an element gains

More Form Processing with onsubmit and onreset l These two events fire when a

Event Bubbling Event bubbling is the process whereby events fired in child elements “bubble”

Dynamic HTML: Filters and Transitions l l l Filters and transitions are specified with

Flip Filters: flipv and fliph The flipv and fliph filters mirror text or images

Transparency with the chroma filter l The chroma filter applies transparency effects dynamically, without

Transparency with the chroma filter <select onchange = "changecolor( this. value )"> <option value

Creating Image masks l Applying the mask filter to an image allows you to

Image Filters: invert, gray and xray <tr> <td><img src = "hc. jpg" alt =

Adding shadows to Text l l A simple filter that adds depth to your

Adding shadows to Text <body onload = "start()"> <h 1 id = "shadow. Text"

Creating Gradient with alpha l This filter is used to achieve gradient effect function

Making Text glow l This filter is used to make text glow. var color.

Creating Motion with blur l The blur filter creates an illusion of motion by

Slides: 43

Download presentation

Introduction to DHTML

What is DHTML? l l l Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized code modules Can be written in VB(script)

What is DHTML? Dynamic Hypertext Markup Language is comprised of: – – – l CSS (cascading style sheets) DOM (document object module) Scripting (Javascript and VBscript) Allows for more interactivity and special effects on web pages.

Document Object Model (DOM)

Document Object Model (DOM) l l DOM is an interface that permits scripts to access and update the content, structure and style of the document. Every element of the web page can be dynamically updated in response to input from the user or other programs HTML elements are treated as objects, their attributes are treated as properties of the objects The DOM has a hierarchy of elements with the window as the top level object

Dynamic HTML: Object Model and Collections The object model allows Web authors to control the presentation of their pages and gives them access to all the elements on their Web pages

Object Referencing Simplest way to reference an element is by using element’s id attributes Example: function start() { alert(p. Text. inner. Text); p. Text. inner. Text=“Thanks for coming”; } <body onload=“start()”> <p id=“p. Text”>Welcome to our Web page!</p> </body> l

Collections all and children Collections are arrays of related objects on a page. l The all collection is collection (or array) of all the XHTML elements in a document, in the order in which they appear. function start() { for ( var loop = 0; loop < document. all. length; ++loop ) elements += " " + document. all[ loop ]. tag. Name; p. Text. inner. HTML += elements; alert( elements ); } <body onload = "start()"> <p id = "p. Text">Elements on this Web page: </p> </body> l

Collections all and children var elements = "<ul>"; function child( object ) { var loop = 0; elements += "<li>" + object. tag. Name + "<ul>"; for ( loop = 0; loop < object. children. length; loop++ ) { if ( object. children[ loo<p ]. children. length ) child( object. children[ loop ] ); else elements += "<li>" + object. children[ loop ]. tag. Name + "</li>"; } elements += "</ul>" + "</li>"; } <body onload = "child( document. all[ 4 ] ); my. Display. outer. HTML += elements; my. Display. outer. HTML += '</ul>'; "> <p>Welcome to our <strong>Web</strong> page!</p> <p id = "my. Display"> Elements on this Web page: </p> </body>

Dynamic Styles l l An element’s style can be changed dynamically. Often such a change is made in response to user events. function start() { var input. Color = prompt("Enter a color name for the " + "background of this page", "" ); document. body. style. background. Color = input. Color; } <body onload = "start()"> <p>Welcome to our Web site!</p> </body>

Dynamic Styles function start() { var input. Class = prompt( "Enter a class. Name for the text “ + , "" ); p. Text. class. Name = input. Class; } <body onload = "start()"> <p id = "p. Text">Welcome to our Web site!</p> </body>

Dynamic Positioning l l Dynamic Positioning enables XHTML elements to be positioned with scripting. This is done by declaring an element’s CSS position property to be either absolute or relative. Moving the element by manipulating any of the top, left, right or bottom CSS properties. We use scripting to vary the color, font. Family or font. Size attributes.

Dynamic Positioning: Example function start() { window. set. Interval( "run()", 100 ); } <body onload = "start()"> <p id = "p. Text" style = "position: absolute; left: 0; font-family: serif; color: blue"> Welcome!</p> </body> A similar function to set. Interval is set. Timeout, which takes same parameters but instead waits the specified amount of time before calling the named function only once

Dynamic Positioning: Example l The clear. Timeout and clear. Interval functions are used to stop set. Timeout and set. Interval respectively For example, if you started a set. Timeout timer with timer 1=window. set. Interval(‘run()”, 200); you could then stop the timer by calling window. clear. Timeout(timer 1); Which would stop the timer before it fired

frames collection is useful to access those elements and objects are in different frames <frameset rows = "100, *"> <frame src = "top. html" name = "upper" /> <frame src = "" name = "lower" /> </frameset> function start() { var text = prompt( "What is your name? ", "" ); parent. frames( "lower" ). document. write( "<h 1>Hello, " + text + "</h 1>" ); } l

navigator Object navigator object contains information about the Web browser that is viewing the page l This is useful to redirecting from one browser to another browser function start() { if ( navigator. app. Name == "Microsoft Internet Explorer" ) { if ( navigator. app. Version. substring( 0, 1 ) >= "4" ) document. location = "new. IEversion. html"; else document. location = "old. IEversion. html"; } else document. location = "NSversion. html“; } l

Dynamic HTML: Event model Clicking a button, moving the mouse pointer over part of the Web page, selecting some text on the page—these actions all fire events, and a DHTML author can write code to run in response to the event.

Event onclick and onload Event onclick <body>  <p id = "para">Click on this text!</p>  <input type = "button" value = "Click Me!" onclick = "alert( 'Hi again' )" /> </body>

Event onclick and onload Event onload function start () { alert(“Welcome to Nirma University”); } <body onload = "start()"> </body>

Error Handling with onerror l onerror event is used to execute specialized error-handling code window. onerror = handle. Error; function do. This() { alrrt( "hi" ); // alert misspelled, creates an error } function handle. Error( err. Type, err. URL, err. Line. Num ) { window. status = "Error: " + err. Type + " on line " + err. Line. Num; return true; } <body> <input id = "mybutton" type = "button" value = "Click Me!" onclick = "do. This()" /></body> This program works correctly only if “Script debugging” is disabled in IE. Tools menu->Internet Option dialog->Advanced tab->Disabled script debugging

Tracking the Mouse with Event onmousemove l l Event onmousemove fires repeatedly whenever the user moves the mouse over the web page. The following program uses this event to updates a coordinate display that gives the position of the mouse in the coordinate system of the object containing the mouse cursor

Tracking the Mouse with Event onmousemove function update. Mouse. Coordinates() { coordinates. inner. Text = event. src. Element. tag. Name + " (" + event. client. X + ", " + event. client. Y + ")"; } <body style = "background-color: wheat" onmousemove = "update. Mouse. Coordinates()"> <span id = "coordinates">(0, 0)</span> <img src = "deitel. gif" style = "position: absolute; top: 100; left: 100" alt = "Deitel" /> </body>

Rollovers with onmouseover and onmouseout l l When the mouse cursor move over an element, an onmouseover event occurs for that element When the mouse cursor leaves the element, an onmouseout event occurs for that element <html> <body> <a href="http: //www. cit. cornell. edu" onmouseover="document. logo. src='malaram. jpg' " onmouseout ="document. logo. src='harry. gif ' " > <img name="logo" src="harry. gif " border=0></a> </body> </html>

Form Processing with onfocus and onblur The onfocus event fires when an element gains focus. l The onblur event fires when an element loses focus. var help. Array = [ "Enter your name in this input box. “, "Enter your email address in this input box, “]; function help. Text( message. Num ) { my. Form. help. Box. value = help. Array[ message. Num ]; } <form id = "my. Form" action = ""> Name: <input type = "text" name = "name" onfocus = "help. Text(0)" onblur = "help. Text(6)" /> Email: <input type = "text" name = "email" onfocus = "help. Text(1)" onblur = "help. Text(6)" /> </form <textarea name = "help. Box"> </textarea> l

More Form Processing with onsubmit and onreset l These two events fire when a form is submitted or reset, respectively. function form. Submit() { window. event. return. Value = false; if ( confirm ( "Are you sure you want to submit? " ) ) window. event. return. Value = true; } function form. Reset() { window. event. return. Value = false; if ( confirm( "Are you sure you want to reset? " ) ) window. event. return. Value = true; } <form id = "my. Form" onsubmit = "form. Submit()" onreset = "form. Reset()" action = ""> </form>

Event Bubbling Event bubbling is the process whereby events fired in child elements “bubble” up to their parent element. function document. Click() { alert( "You clicked in the document" ); } function paragraph. Click( value ) { alert( "You clicked the text" ); if ( value ) event. cancel. Bubble = true; } document. onclick = document. Click; <body> <p onclick = "paragraph. Click( false )">Click here!</p> <p onclick = "paragraph. Click( true )">Click here, too!</p> </body> l

Dynamic HTML: Filters and Transitions l l l Filters and transitions are specified with the CSS filter property. Applying filters to text and images causes changes that are persistent. Transitions are temporary; applying a transition allow to transfer from one page to another with pleasant visual effect, such as a random dissolve. Filters and transitions do not add content to your pages-rather, they present existing content in an engaging manner to capture the user’s attention. Filters and transitions are Microsoft technologies available only in Windows-based versions of IE 6. Do not use these capabilities if you are writing other browsers

Flip Filters: flipv and fliph The flipv and fliph filters mirror text or images vertically and horizontally. <body> <table> <tr> <td style = "filter: fliph">Text</td> <td>Text</td></tr> <td style = "filter: flipv fliph">Text</td> <td style = "filter: flipv">Text</td></tr> </table> </body> l

Flip Filters: flipv and fliph

Transparency with the chroma filter l The chroma filter applies transparency effects dynamically, without using a graphics editor to hard-code transparency into the image. function changecolor( the. Color ) { if ( the. Color ) { chroma. Img. filters( "chroma" ). color = the. Color; chroma. Img. filters( "chroma" ). enabled = true; } else chroma. Img. filters( "chroma" ). enabled = false; } <img id = "chroma. Img" src = "trans. gif" style ="position: absolute; filter: chroma" alt = "Transparent Image" />

Transparency with the chroma filter <select onchange = "changecolor( this. value )"> <option value = "">None</option> <option value = "#00 FFFF">Cyan</option> <option value = "#FFFF 00">Yellow</option> <option value = "#FF 00 FF">Magenta</option> <option value = "#000000" selected = "selected“> Black</option> </select>

Transparency with the chroma filter

Creating Image masks l Applying the mask filter to an image allows you to create an effect in which an element’s background is a solid color and its foreground is transparent, so the image or color behind it show through. <body> <h 1>Mask Filter</h 1> <div style = "position: absolute; top: 125; left: 20; filter: mask( color =#CCFFFF)"> <h 1 style = "font-family: Courier, monospace"> Aa. Bb. Cc. Dd. Ee. Ff. Gg. Hh. Ii. Jj Kk. Ll. Mm. Nn. Oo. Pp. Qq. Rr. Ss. Tt </h 1></div> <img src = "gradient. gif" width = "400" height = "200" alt = "Image with Gradient Effect" /> </body>

Creating Image masks

Image Filters: invert, gray and xray <tr> <td><img src = "hc. jpg" alt = "normal scenic view" /></td> <td><img src = "hc. jpg" style = "filter: gray“ alt = "gray scenic view"/> </td> </tr> <td><img src = "hc. jpg" style = "filter: xray“ alt = "xray scenic view"/> </td> <td><img src = "hc. jpg" style = "filter: invert“ alt = "inverted scenic view"/> </td> </tr>

Image Filters: invert, gray and xray

Adding shadows to Text l l A simple filter that adds depth to your text is the shadow filter. This filter creates a shadowing effect that gives your text a threedimensional appearance. var shadow. Direction = 0; function start() { window. set. Interval( "run. Demo()", 500 ); } function run. Demo() { shadow. Text. inner. Text = "Shadow Direction: " + shadow. Direction % 360; shadow. Text. filters( "shadow" ). direction = ( shadow. Direction % 360 ); shadow. Direction += 45; }

Adding shadows to Text <body onload = "start()"> <h 1 id = "shadow. Text" style = "position: absolute; top: 25; left: 25; padding: 10; filter: shadow( direction = 0, color = red )">Shadow Direction: 0</h 1> </body>

Creating Gradient with alpha l This filter is used to achieve gradient effect function run() { pic. filters( "alpha" ). opacity = opacity. Button. value; pic. filters( "alpha" ). finishopacity = opacity. Button 2. value; pic. filters( "alpha" ). style = style. Select. value; } <div id = "pic“ style = "position: absolute; left: 0; top: 0; filter: alpha( style = 2, opacity = 100, finishopacity = 0 )"> <img src = "flag. gif" alt = "Flag" /> </div> Opacity: Color saturation of an image.

Creating Gradient with alpha

Making Text glow l This filter is used to make text glow. var color. Array = [ "FF 0000", "FFFF 00", "00 FF 00“, "00 FFFF", "0000 FF", "FF 00 FF" ]; function apply() { glow. Span. filters( "glow" ). color = parse. Int( glow. Color. value, 16 ); glow. Span. filters( "glow" ). strength = glow. Strength. value; } function startdemo() { window. set. Interval( "rundemo()", 150 ); } <span id = "glow. Span" style = "position: absolute; left: 200; top: 100; padding: 5; filter: glow( color = red, strength = 5 ); font-size: 2 em“>Glowing Text </span>

Making Text glow

Creating Motion with blur l The blur filter creates an illusion of motion by blurring text or image in a certain direction.