1. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 1 Lecture 3: Dynamic Web Pages – Introduction to JavaScript Instructor: Dr. M. Anwar Hossain

2. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 2 Learning Outcomes In this chapter, you will learn about: ◦ DOM Objects. ◦ Graphics and animation. ◦ Understand the differences between methods of posting form data. ◦ Understand how to program using different form event handlers. ◦ Understand how to use JavaScript to read the values from various form objects.

3. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 3 Review Client-side programming overview Basics of JavaScript programming Variables, arrays and objects Operators and maths Sequence, repetition and selection Functions Events

4. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 4 Today … Document/JavaScript Object Model (DOM) Accessing elements Forms Graphics and Animation

5. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 5 The Document Object Model (DOM) A specification An Application Programming Interface (API) Is used so programs can interact with web pages Language and platform neutral (whether Javascript or VBScript for example) Some problems with variations in browsers, always check DOM sometimes known as Dynamic HTML Object Model within Microsoft specific contexts

6. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 6 The Document Object Model The main idea is to let any script access any part of a web document, simply. This idea is extended to controlling browser related features.

7. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 7 Root level of the JavaScript DOM is the window object Window objects have properties such as status line The next level up is the document object…which is the loaded HTML page Document objects have properties such as background colour Each HTML element (e.g. links or forms) is a property of the document object. The Document Object Model

8. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 8 Javascript Document Object Model

9. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 9 Document properties PropertyDescription anchors[]An array referring to document anchors applets[]An array referring to document applets bodyThe element that contains the content of document cookieThe current document cookie string domain The domain name of the server where the current document is located... forms[] images[] links[] referrer title URL

10. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 10 The first image on a web page can be represented as the property document.images[0] A web form also has its properties accessible in the object tree You can find any property by tracing it through the tree: document.forms[0].elements[0]

11. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 11 window | +-------parent, frames, self, top | +-------location | +-------history | +-------document | +--forms | | | elements (text fields, textarea, checkbox, password | radio, select, button, submit, reset) +--links | +--anchors

12. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 12 Test theDOM document.getElementById('header').style.color="red" Can also access elements by name:

13. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 13 Using both JavaScript and VBScript various elements within a page can be changed. One of the simplest examples of accessing the current HTML page is: document.write(“Hello, world!”) Which writes new text to the current document, this can also contain HTML: document.write(“ Hello, world! ”) Note: the syntax is the same for both languages with the exception of the semicolon needed in JavaScript! The API produces the same ‘interface’ for both languages. Using the Document Object Model

14. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 14 Test DOM <!-- var a=document.body.bgColor; document.write(a); document.body.bgColor='#109032'; document.fgColor='#ffffff'; --> DOM Example 1

15. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 15 Got Flash? hasFlash = false for (i=0; i<navigator.plugins.length; i++) { if (navigator.plugins[i].name.indexOf("Flash") >= 0) { hasFlash = true } if (hasFlash) { document.write("You have Flash, you lucky person, you!") } else { document.write("Sorry, you don't have Flash.") } DOM Example 2

16. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 16 Accessing HTML Elements Elements within a document can be accessed by name: Test DOM <div id="myobject" name="myobject" style="position:absolute;top:120px; left:150px;width:390px;height:190px;background:#aaffaa"> This is a test <!-- document.all.myobject.style.backgroundColor="Red“; -->

17. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 17 Accessing Form Elements The normal HTML syntax is usually along the lines of: Username: name (what the form is identifed by) action (where the form data sent to for processing) method (how the data is transported)

18. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 18 Accessing Form Elements You can access and manipulate form related information using the JavaScript DOM document.forms[number].elements[number] document.forms[number].username document.logon.username If you want the actual value passed back use: document.logon.username.value

19. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 19 <!-- function hello(passed) { document.write("Hello, "+document.logon.user.value); document.write(" are you *sure* you're called, "+passed); } //--> Username: DOM Example 3

20. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 20 Graphics and animation

21. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 21 Red Alert! The Web server is under attack! var e = document.getElementById("urgent"); // Get the element object var colors = ["white", "yellow", "orange", "red"] // Colors to cycle through var nextColor = 0; // Position in the cycle // Evaluate the following expression every 500 milliseconds. // This animates the background color of the DIV element. setInterval("e.style.backgroundColor=colors[nextColor++%colors.length];", 500); The basic idea …

22. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 22 The HTML image tag A static image can be placed in HTML using the image tag If it doesn’t load properly there’s the text alternative You can control features of the image such as the size

23. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 23 The Image Object –Represents images created using tag –Each tag in an HTML document is represented in the DOM images[] array by an Image object –Use with JavaScript to change images based on user selection

24. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 24 Image object properties border, complete, height, hspace, lowsrc, name src, vspace, width Image object events OnLoad, OnAbort, OnError

25. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 25 The Image Object –SRC property Allows JavaScript to change an image dynamically More efficient than loading a new document each time a new image is displayed

26. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 26 Animation with the Image Object – Simple animation Created by a sequence of images changed automatically Enabled by combining Image object SRC attribute with setTimeout() or setInterval() methods

27. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 27 Animation with the Image Object – True animation Requires a different graphic, or frame, for each movement that a character or object makes Frames can be automatically cycled using JavaScript – Ensure each frame is consistent in size and position

28. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 28

29. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 29 Runner 1 <!-- var runner = new Array(6); var curRunner = 0; var startRunning; runner[0] = “runner0.jpg” runner[1] = “runner1.jpg” runner[2] = “runner2.jpg”... function marathon() { if (curRunner == 5) curRunner = 0; Runner script

30. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 30 else ++curRunner; document.animation.src = runner[curRunner]; } --> <INPUT TYPE=“button” NAME=“run” VALUE=“ Run ” onClick=“startRunning=setInterval(‘marathon()’,100);”> <INPUT TYPE=“button” NAME=“stop” VALUE=“ stop ” onClick=“clearInterval(startRunning);”> Runner script

31. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 31 Image Caching Allows JavaScript to store and retrieve images from memory rather than downloading image each time it is needed (erratic!) –Three steps Create a new object using the Image() constructor Assign graphic file to SRC property of new Image object Assign SRC property of new Image object to SRC property of an tag –To ensure all images are cached prior to commencing animation: Use onLoad event handler of the Image object Cache with function in

32. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 32 Runner script with caching Runner 2 <!-- var runner = new Array(6); var curRunner = 0; var startRunning; for(var i=0; i < 6; ++i) { runner[i] = new Image(); runner[i].src = “runner”+i+”.jpg”; } function marathon() { if (curRunner == 5) curRunner = 0; else ++curRunner; document.animation.src = runner[curRunner].src; }

33. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 33 --> <INPUT TYPE=“button” NAME=“run” VALUE=“ Run ” onClick=“startRunning=setInterval(‘marathon(),100);”> <INPUT TYPE=“button” NAME=“stop” VALUE=“ Stop ” onClick=“clearInterval(startRunning);”> Runner script with caching

34. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 34 Image Animation (another way) Now suppose we have the tag in the. The following recursive method animates the cached images: var n = 0; function animate() { document.img.src = images[n].src; n = (n + 1) % images.length; id = setTimeout("animate()", 250); }

35. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 35 Dynamic HTML (DHTML) Introduced in the 4.0 series of browsers Is a combination of HTML, CSS and Javascript Variations in how each browser implements it

36. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 36 05/06/201636 function onMove() { ex=event.x; ey=event.y; gr.left=ex; gr.top=ey; } function setup() { window.document.onmousemove = onMove(); } Some text... gr=document.all.test.style; window.onload = setup(); DHTML 1 Follow mouse!

37. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 37 Course work 1: Hints and Tips: It should be a combination of HTML, CSS and JavaScript– DHTML Keep any functions in the Comment it well Structure it well I’ll try it in at least a couple of browsers (IE 6 and Firefox) Keep it user friendly Keep it easy to use (it should be all in 1 folder) Be creative An animation incorporating static and dynamic images Unique to you

38. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 38 What we did: JavaScript DOM Forms Animation

39. Modified from Moseley ’s sli desWeb Applications Development. Lecture 3 Slide 39 What you still need to cover: Cookies (http://www.webreference.com/js/column8) String manipulation (http://www.w3schools.com/js/js_string.asp) Objects (http://www.javascriptkit.com/javatutors/object.shtml) Next: XML