Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
JavaScript & DHTML INE2720 Web Application Software Development Essential Materials Outline – Part D Introducing DHTML – Styles and Layers – Dynamic Positioning – Moving objects in 3D – Internet Explorer Filters Using DHTML and CSS Tools Cool JavaScript Sites JavaScript and DHTML Reference Summary INE2720 – Web Application Software Development 2 All copyrights reserved by C.C. Cheung 2003. Dynamic HTML 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. Web pages can be made to respond to users’ actions. Problem: How to achieve “Dynamic”? INE2720 – Web Application Software Development 3 All copyrights reserved by C.C. Cheung 2003. DHTML advantages / disadvantages Supported by most browsers Small file sizes (faster than Flash) No plug-ins required Easy to learn (learn HTML, JavaScript) Faster web experience (change the page content without load new pages) Browser and OS incompatibilities – The implementation of CSS, DOM varies from browser to browser INE2720 – Web Application Software Development 4 All copyrights reserved by C.C. Cheung 2003. What makes a web site dynamic? Interactivity – adapt and react to the visitor’s actions as quick as possible. Synchronicity – bring together relevant information from a variety of sources. Flexibility – give the visitor different ways to find information in the site. Adaptability – adjusts to cater to individual visitor’s needs. Activity – uses motion and sound to draw user’s attention to changes on the site. INE2720 – Web Application Software Development 5 All copyrights reserved by C.C. Cheung 2003. The Role of each component in DHTML 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 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. INE2720 – Web Application Software Development 6 All copyrights reserved by C.C. Cheung 2003. Cross-Browser DHTML Netscape 4.x JavaScript Style Sheets (JSS) Netscape Layers (positioning, visibility) Cross-Browser DHTML CSS1, CSS2, CSS-Positioning JavaScript DOM INE2720 – Web Application Software Development 7 Internet Explorer 4.x Visual Filters allow you to apply visual effects to text or graphics Data Binding All copyrights reserved by C.C. Cheung 2003. Open a new browser window Pop-up windows are useful for navigation controls, advertisements, supplementary contents. You can open a window, close the window, or toggle the window. INE2720 – Web Application Software Development 8 All copyrights reserved by C.C. Cheung 2003. Dynamic Technique: Change CSS Styles You can change or add to any CSS property defined for any object on the screen. onMouseOver() INE2720 – Web Application Software Development 9 All copyrights reserved by C.C. Cheung 2003. Change Background Color <html><head> <script language="JavaScript"> function bgChange(bg) { document.body.style.background=bg; } </script></head> <body><b>Mouse over these table cells, and the background color will change</b> <table width="300" height="100"> <tr> <td onmouseover="bgChange('red')" onmouseout="bgChange('transparent')" bgcolor="red"> </td> <td onmouseover="bgChange('blue')" onmouseout="bgChange('transparent')" bgcolor="blue"> </td> <td onmouseover="bgChange('green')" onmouseout="bgChange('transparent')” bgcolor="green"> </td> </tr> </table> </body></html> INE2720 – Web Application Software Development 10 All copyrights reserved by C.C. Cheung 2003. CSS Properties Reference: http://www.library.utoronto.ca/HTMLcourses/DHTML/properties1.html INE2720 – Web Application Software Development 11 All copyrights reserved by C.C. Cheung 2003. Dynamic Positioning 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 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. INE2720 – Web Application Software Development 12 All copyrights reserved by C.C. Cheung 2003. Moving Objects from Point to Point Using CSS, you can change the position of an object on the screen. INE2720 – Web Application Software Development 13 All copyrights reserved by C.C. Cheung 2003. Moving Objects in 3-D By specifying the z-index, we can put the objects in 3-D manner. INE2720 – Web Application Software Development 14 All copyrights reserved by C.C. Cheung 2003. Moving the browser window You can set an initial position of multiple windows. INE2720 – Web Application Software Development 15 All copyrights reserved by C.C. Cheung 2003. IE DHTML Visual Controls The blurOn() Filter causes the image to blur on the screen. INE2720 – Web Application Software Development 16 All copyrights reserved by C.C. Cheung 2003. IE Transition Filters Produce transitions between web pages. INE2720 – Web Application Software Development 17 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 Random 23 All copyrights reserved by C.C. Cheung 2003. Adding last modified Date <html> <head> <title>Enter the title of your HTML document here</title> </head> <body> <script language=“JavaScript”> document.write(“Page last modified: “ + document.lastModified) </script> </body> </html> INE2720 – Web Application Software Development 18 All copyrights reserved by C.C. Cheung 2003. Creating a Sliding Menu Allow visitors to pull out menus or put them away. INE2720 – Web Application Software Development 19 All copyrights reserved by C.C. Cheung 2003. Follow the Mouse Pointer The mouse pointer is part of the user interface that gives designer controls. INE2720 – Web Application Software Development 20 All copyrights reserved by C.C. Cheung 2003. Application: Using JavaScript to Make Pages Dynamic 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 21 All copyrights reserved by C.C. Cheung 2003. Modifying Images, Example The following function changes the first image in a document function changeImage() { document.images[0].src = "images/new-image.gif"; } Referring to images by name is easier: <img src="cool-image.jpg" name="cool" width=75 height=25> function improveImage() { document.images["cool"].src = "way-cool.jpg"; } INE2720 – Web Application Software Development 22 All copyrights reserved by C.C. Cheung 2003. Modifying Images: A Clickable Image Button, Example <script language=“JavaScript"> <!-imageFiles = new Array("images/Button1-Up.gif", "images/Button1-Down.gif", "images/Button2-Up.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].src = imageFiles[i]; } function setImage(name, image) { document.images[name].src = image; } INE2720 – Web Application Software Development 23 All copyrights reserved by C.C. Cheung 2003. Modifying Images: A Clickable Image Button, Example function clickButton(name, grayImage) { var origImage = document.images[name].src; setImage(name, grayImage); var resetString = "setImage('" + name + "', '" + origImage + "')"; setTimeout(resetString, 100); } // --></script> </head>... <a href="location1.html" onMouseOver="clickButton('Button1', 'images/Button1-Down.gif')"> <img src="images/Button1-Up.gif" name="Button1" width=150 height=25></A> <a href="location2.html" onMouseOver="clickButton('Button2', 'images/Button2-Down.gif')"> <img src="images/Button2-Up.gif" name="Button2" width=150 height=25></A> ... INE2720 – Web Application Software Development 24 All copyrights reserved by C.C. Cheung 2003. Highlighting Images Under the Mouse, Example <html> <head> <title>High Peaks Navigation Bar</title> <script language=“JavaScript"> <!— // Given "Foo", returns "images/Foo.gif". function regularImageFile(imageName) { return("images/" + imageName + ".gif"); } // Given "Bar", returns "images/Bar-Negative.gif". function negativeImageFile(imageName) { return("images/" + imageName + "-Negative.gif"); } INE2720 – Web Application Software Development 25 All copyrights reserved by C.C. Cheung 2003. 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].src = regularImageFile(imageNames[index]); negativeImageObjects[index] = new Image(150, 25); 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); } INE2720 – Web Application Software Development 26 All copyrights reserved by C.C. Cheung 2003. Highlighting Images Under the Mouse, Example, cont. ... function highlight(imageName) { document.images[imageName].src = negativeImageFile(imageName); } function unHighlight(imageName) { document.images[imageName].src = regularImageFile(imageName); } // --> </script></head> <body> <table> <tr><td><a href="Tibet.html" target="Main" onMouseOver="highlight('Tibet')" onMouseOut="unHighlight('Tibet')"> <img src="images/Tibet.gif" name="Tibet“ width=150 height=25 border=0> </a> ... INE2720 – Web Application Software Development 27 All copyrights reserved by C.C. Cheung 2003. Highlighting Images Under the Mouse, Result INE2720 – Web Application Software Development 28 All copyrights reserved by C.C. Cheung 2003. Application: Using JavaScript to Interact with Frames 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. All of the properties of Window can be applied to any of these entries. INE2720 – Web Application Software Development 29 All copyrights reserved by C.C. Cheung 2003. Displaying a URL in a Particular Frame, Example <HTML> <HEAD> <TITLE>Show a URL</TITLE> </HEAD> <FRAMESET ROWS="150, *"> <FRAME SRC="GetURL.html" NAME="inputFrame"> <FRAME SRC="DisplayURL.html" NAME="displayFrame"> </FRAMESET> </HTML> INE2720 – Web Application Software Development 30 All copyrights reserved by C.C. Cheung 2003. Displaying a URL in a Particular Frame, Example, cont. <html><head><title>Choose a URL</title> <script language=“JavaScript"> function showURL() { var url = document.urlForm.urlField.value; // or parent.frames["displayFrame"].location = url; parent.displayFrame.location = url; } function preloadUrl() { if (navigator.appName == "Netscape") { document.urlForm.urlField.value = "http://home.netscape.com/"; } else { document.urlForm.urlField.value = "http://www.microsoft.com/"; } } <body onLoad="preloadUrl()"> <h1 align=“center">Choose a URL</h1> <center><form name="urlForm"> URL: <input type=“text" name="urlField" size=35> <input type=“button" value="Show URL" onClick="showURL()"> </form></center></body></html> INE2720 – Web Application Software Development 31 All copyrights reserved by C.C. Cheung 2003. Displaying a URL in a Particular Frame, Result INE2720 – Web Application Software Development 32 All copyrights reserved by C.C. Cheung 2003. 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: function showURL() { 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 – 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 33 All copyrights reserved by C.C. Cheung 2003. Using DHTML and CSS Tools Adobe GoLive – A complete HTML creation package – An easy-to-use environment for JavaScript editing, CSS and DHTML. Macromedia Dreamweaver – Includes a bevy of other tools such as FTP, site management. – Allows you to add Flash objects. INE2720 – Web Application Software Development 34 All copyrights reserved by C.C. Cheung 2003. Cool JavaScript Sites http://www.dynamicdrive.com/ – Provides DHTML script examples http://javascript.internet.com/ – JavaScript examples and get the source http://www.js-examples.com/ – JavaScript examples http://developer.netscape.com/docs/examples/javascript.html – JavaScript examples from Netscape http://www.jsworkshop.com/ – JavaScript Workshop http://www.glassdog.com/ – An entertaining place for learning web design INE2720 – Web Application Software Development 35 All copyrights reserved by C.C. Cheung 2003. JavaScript References http://www.w3.org – Resources of all standards http://www.buildingtheWeb.com – A well-structured website http://www.htmlhelp.com – HTML help by the web design group http://www.webreview.com – Includes coding, design tips, editorials http://www.webreference.com – In-depth articles on DHTML, CSS, … http://www.faqts.com/knowledge_base/index.phtml/fid/53 – FAQs for DHTML, CSS, JavaScript, … INE2720 – Web Application Software Development 36 All copyrights reserved by C.C. Cheung 2003. Summary Learnt the basics of JavaScript: – Variable, Data Types, Flow Control, Loops – Function, Event, Objects – Exception and Error Handling 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 37 All copyrights reserved by C.C. Cheung 2003. References Web Warrior Series - JavaScript JavaScript 1.5 by example SAMS – JavaScript JavaScript Goodies DHTML and CSS for the WWW The End. Thank you for patience! INE2720 – Web Application Software Development 38 All copyrights reserved by C.C. Cheung 2003.