JavaScript & DHTML INE2720 Web Application Software Development Essential Materials

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Outline – Part D Introducing DHTML Introducing DHTML –Styles and Layers –Dynamic Positioning –Moving objects in 3D –Internet Explorer Filters Using DHTML and CSS Tools Using DHTML and CSS Tools Cool JavaScript Sites Cool JavaScript Sites JavaScript and DHTML Reference JavaScript and DHTML Reference Summary Summary

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Dynamic HTML Everyone is a Web Designer. Everyone is a Web Designer. –Learning DHTML, CSS and JavaScript is your next step into the web design world. “ DHTML ” is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. “ DHTML ” is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. Web pages can be made to respond to users ’ actions. Web pages can be made to respond to users ’ actions. Problem: How to achieve “ Dynamic ” ? Problem: How to achieve “ Dynamic ” ?

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung DHTML advantages / disadvantages Supported by most browsers Supported by most browsers Small file sizes (faster than Flash) Small file sizes (faster than Flash) No plug-ins required No plug-ins required Easy to learn (learn HTML, JavaScript) Easy to learn (learn HTML, JavaScript) Faster web experience (change the page content without load new pages) Faster web experience (change the page content without load new pages) Browser and OS incompatibilities Browser and OS incompatibilities –The implementation of CSS, DOM varies from browser to browser

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung What makes a web site dynamic? Interactivity – adapt and react to the visitor ’ s actions as quick as possible. Interactivity – adapt and react to the visitor ’ s actions as quick as possible. Synchronicity – bring together relevant information from a variety of sources. Synchronicity – bring together relevant information from a variety of sources. Flexibility – give the visitor different ways to find information in the site. Flexibility – give the visitor different ways to find information in the site. Adaptability – adjusts to cater to individual visitor ’ s needs. Adaptability – adjusts to cater to individual visitor ’ s needs. Activity – uses motion and sound to draw user ’ s attention to changes on the site. Activity – uses motion and sound to draw user ’ s attention to changes on the site.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung The Role of each component in DHTML With CSS, we can change the style of any HTML elements. With CSS, we can change the style of any HTML elements. With DOM, we can have a map on every elements in the HTML page. With DOM, we can have a map on every elements in the HTML page. With JavaScript, we can access and have operations on the elements in the DOM tree. With JavaScript, we can access and have operations on the elements in the DOM tree. With event handler, we can execute the predefined scripts at any time. With event handler, we can execute the predefined scripts at any time.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Cross-Browser DHTML Netscape 4.x Cross-Browser DHTML Internet Explorer 4.x JavaScript Style Sheets (JSS) JavaScript Style Sheets (JSS) Netscape Layers (positioning, visibility) Netscape Layers (positioning, visibility) CSS1, CSS2, CSS-Positioning CSS1, CSS2, CSS-Positioning JavaScript JavaScript DOM DOM Visual Filters allow you to apply visual effects to text or graphics Visual Filters allow you to apply visual effects to text or graphics Data Binding Data Binding

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Open a new browser window Pop-up windows are useful for navigation controls, advertisements, supplementary contents. Pop-up windows are useful for navigation controls, advertisements, supplementary contents. You can open a window, close the window, or toggle the window. You can open a window, close the window, or toggle the window.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Dynamic Technique: Change CSS Styles You can change or add to any CSS property defined for any object on the screen. You can change or add to any CSS property defined for any object on the screen. onMouseOver()

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Change Background Color <html><head> function bgChange(bg) {document.body.style.background=bg; } </script></head> Mouse over these table cells, and the background color will change Mouse over these table cells, and the background color will change <td onmouseover="bgChange('red')" <td onmouseover="bgChange('red')" onmouseout="bgChange('transparent')" bgcolor="red"> <td onmouseover="bgChange('blue')" <td onmouseover="bgChange('blue')" onmouseout="bgChange('transparent')" bgcolor="blue"> <td onmouseover="bgChange('green')" <td onmouseover="bgChange('green')" onmouseout="bgChange('transparent') ” bgcolor="green"> </tr></table></body></html>

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung CSS Properties Reference: Reference:

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Dynamic Positioning It means the HTML elements can be positioned by using JavaScript. It means the HTML elements can be positioned by using JavaScript. The element is moved by manipulating any of the “ top ”, “ left ”, “ right ” and “ bottom ” CSS properties. The element is moved by manipulating any of the “ top ”, “ left ”, “ right ” and “ bottom ” CSS properties. The more table you use, the slower your page displays. The more table you use, the slower your page displays. Positioning elements with CSS is more accurate than tables and the results are displayed much faster. Positioning elements with CSS is more accurate than tables and the results are displayed much faster.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Moving Objects from Point to Point Using CSS, you can change the position of an object on the screen. Using CSS, you can change the position of an object on the screen.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Moving Objects in 3-D By specifying the z-index, we can put the objects in 3-D manner. By specifying the z-index, we can put the objects in 3-D manner.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Moving the browser window You can set an initial position of multiple windows. You can set an initial position of multiple windows.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung IE DHTML Visual Controls The blurOn() Filter causes the image to blur on the screen. The blurOn() Filter causes the image to blur on the screen.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung IE Transition Filters Produce transitions between web pages. Produce transitions between web pages.Transition Reference # Box In 0 Box Out 1 Circle out 3 Wipe up 4 Wipe down 5 Wipe right 6 Wipe left 7 Random Dissolve 12 Random23

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Adding last modified Date <html><head> Enter the title of your HTML document here Enter the title of your HTML document here </head><body> document.write(“Page last modified: “ + document.lastModified) </script></body></html>

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Creating a Sliding Menu Allow visitors to pull out menus or put them away. Allow visitors to pull out menus or put them away.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Follow the Mouse Pointer The mouse pointer is part of the user interface that gives designer controls. The mouse pointer is part of the user interface that gives designer controls.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Application: Using JavaScript to Make Pages Dynamic Modifying Images Dynamically Modifying Images Dynamically –The document.images property contains an array of Image objects corresponding to each IMG element in the current document –To display a new image, simply set the SRC property of an existing image to a string representing a different image file

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Modifying Images, Example The following function changes the first image in a document The following function changes the first image in a document function changeImage() { function changeImage() { document.images[0].src = "images/new-image.gif"; document.images[0].src = "images/new-image.gif"; } Referring to images by name is easier: Referring to images by name is easier: <img src="cool-image.jpg" name="cool" <img src="cool-image.jpg" name="cool" width=75 height=25> width=75 height=25> function improveImage() { function improveImage() { document.images["cool"].src = "way-cool.jpg"; document.images["cool"].src = "way-cool.jpg"; }

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Modifying Images: A Clickable Image Button, Example <!-- imageFiles = new Array("images/Button1-Up.gif", "images/Button1-Down.gif", "images/Button1-Down.gif", "images/Button2-Up.gif", "images/Button2-Up.gif", "images/Button2-Down.gif"); "images/Button2-Down.gif"); imageObjects = new Array(imageFiles.length); for(var i=0; i<imageFiles.length; i++) { imageObjects[i] = new Image(150, 25); imageObjects[i] = new Image(150, 25); imageObjects[i].src = imageFiles[i]; imageObjects[i].src = imageFiles[i];} function setImage(name, image) { document.images[name].src = image; document.images[name].src = image;}

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Modifying Images: A Clickable Image Button, Example function clickButton(name, grayImage) { var origImage = document.images[name].src; var origImage = document.images[name].src; setImage(name, grayImage); setImage(name, grayImage); var resetString = var resetString = "setImage('" + name + "', '" + origImage + "')"; "setImage('" + name + "', '" + origImage + "')"; setTimeout(resetString, 100); setTimeout(resetString, 100);} // --> // --> </head>... <a href="location1.html" onMouseOver="clickButton('Button1', 'images/Button1-Down.gif')"> onMouseOver="clickButton('Button1', 'images/Button1-Down.gif')"> <img src="images/Button1-Up.gif" name="Button1" width=150 height=25> width=150 height=25> <a href="location2.html" onMouseOver="clickButton('Button2', 'images/Button2-Down.gif')"> onMouseOver="clickButton('Button2', 'images/Button2-Down.gif')"> <img src="images/Button2-Up.gif" name="Button2" width=150 height=25> width=150 height=25>...

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Highlighting Images Under the Mouse, Example <html> High Peaks Navigation Bar High Peaks Navigation Bar <!— // Given "Foo", returns "images/Foo.gif". function regularImageFile(imageName) { return("images/" + imageName + ".gif"); return("images/" + imageName + ".gif");} // Given "Bar", returns "images/Bar-Negative.gif". function negativeImageFile(imageName) { return("images/" + imageName + "-Negative.gif"); return("images/" + imageName + "-Negative.gif");}

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Highlighting Images Under the Mouse, Example, cont. // Cache image at specified index. E.g., given index 0, // take imageNames[0] to get "Home". Then preload // images/Home.gif and images/Home-Negative.gif. function cacheImages(index) { regularImageObjects[index] = new Image(150, 25); regularImageObjects[index] = new Image(150, 25); regularImageObjects[index].src = regularImageFile(imageNames[index]); regularImageObjects[index].src = regularImageFile(imageNames[index]); negativeImageObjects[index] = new Image(150, 25); negativeImageObjects[index] = new Image(150, 25); negativeImageObjects[index].src = negativeImageFile(imageNames[index]); negativeImageObjects[index].src = negativeImageFile(imageNames[index]);} imageNames = new Array("Home", "Tibet", "Nepal", "Austria", "Switzerland"); regularImageObjects = new Array(imageNames.length); negativeImageObjects = new Array(imageNames.length); // Put images in cache for fast highlighting. for(var i=0; i<imageNames.length; i++) { cacheImages(i); cacheImages(i);}

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Highlighting Images Under the Mouse, Example, cont.... function highlight(imageName) { document.images[imageName].src = negativeImageFile(imageName); document.images[imageName].src = negativeImageFile(imageName);} function unHighlight(imageName) { document.images[imageName].src = regularImageFile(imageName); document.images[imageName].src = regularImageFile(imageName);} // --> </script></head><body><table> <a href="Tibet.html" target="Main" onMouseOver="highlight('Tibet')" onMouseOut="unHighlight('Tibet')"> onMouseOver="highlight('Tibet')" onMouseOut="unHighlight('Tibet')">...

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Highlighting Images Under the Mouse, Result

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Application: Using JavaScript to Interact with Frames Idea Idea –The default Window object contains a frames property holding an array of frames (other Window objects) contained by the current window or frame. It also has parent and top properties referring to the directly enclosing frame or window and the top-level window, respectively. It also has parent and top properties referring to the directly enclosing frame or window and the top-level window, respectively. All of the properties of Window can be applied to any of these entries. All of the properties of Window can be applied to any of these entries.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Displaying a URL in a Particular Frame, Example <HTML><HEAD> Show a URL Show a URL </HEAD> </FRAMESET></HTML>

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Displaying a URL in a Particular Frame, Example, cont. Choose a URL Choose a URL function showURL() { var url = document.urlForm.urlField.value; var url = document.urlForm.urlField.value; // or parent.frames["displayFrame"].location = url; // or parent.frames["displayFrame"].location = url; parent.displayFrame.location = url; parent.displayFrame.location = url;} function preloadUrl() { if (navigator.appName == "Netscape") { if (navigator.appName == "Netscape") { document.urlForm.urlField.value = " document.urlForm.urlField.value = " } else { } else { document.urlForm.urlField.value = " document.urlForm.urlField.value = " }} Choose a URL Choose a URL URL: URL: </form></center></body></html>

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Displaying a URL in a Particular Frame, Result

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Giving a Frame the Input Focus, Example If JavaScript is manipulating the frames, the fix is easy: just add a call to focus in showUrl: If JavaScript is manipulating the frames, the fix is easy: just add a call to focus in showUrl: function showURL() { var url = document.urlForm.urlField.value; var url = document.urlForm.urlField.value; parent.displayFrame.location = url; // Give frame the input focus parent.displayFrame.focus();} Fixing the problem in regular HTML documents is a bit more tedious Fixing the problem in regular HTML documents is a bit more tedious –Requires adding onClick handlers that call focus to each and every occurrence of A and AREA that includes a TARGET, and a similar onSubmit handler to each FORM that uses TARGET

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Using DHTML and CSS Tools Adobe GoLive Adobe GoLive –A complete HTML creation package –An easy-to-use environment for JavaScript editing, CSS and DHTML. Macromedia Dreamweaver Macromedia Dreamweaver –Includes a bevy of other tools such as FTP, site management. –Allows you to add Flash objects.

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Cool JavaScript Sites –Provides DHTML script examples –JavaScript examples and get the source –JavaScript examples –JavaScript examples from Netscape –JavaScript Workshop –An entertaining place for learning web design

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung JavaScript References –Resources of all standards –A well-structured website –HTML help by the web design group –Includes coding, design tips, editorials –In-depth articles on DHTML, CSS, … –FAQs for DHTML, CSS, JavaScript, …

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung Summary Learnt the basics of JavaScript: Learnt the basics of JavaScript: –Variable, Data Types, Flow Control, Loops –Function, Event, Objects –Exception and Error Handling JavaScript permits you to: JavaScript permits you to: –Make pages more dynamic –Validate HTML form input –Manipulate cookies –Control frames –Combine with CSS, DOM to build DHTML pages

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung References Web Warrior Series - JavaScript Web Warrior Series - JavaScript JavaScript 1.5 by example JavaScript 1.5 by example SAMS – JavaScript SAMS – JavaScript JavaScript Goodies JavaScript Goodies DHTML and CSS for the WWW DHTML and CSS for the WWW The End. The End. Thank you for patience! Thank you for patience!