1. COM621: Advanced Interactive Web Development Lecture 6 – JavaScript (cont.)

2. Array  An Array object is used to store a set of values in a single variable name.  An Array object is created with the new keyword.  An array can be created as: var MyArray = new Array()  An array can also be created by specifying the array size. var MyArray = new Array(3) FaaDoOEngineers.com

3. Array (contd.)  Data can be entered into an array as: var myArray = new Array() myArray[0] = “Paul” myArray[1] = “Sam” myArray[2] = “Niel”  Data can also be entered into an array as: var myArray = new Array(“Paul”,”Sam”, “Niel”) FaaDoOEngineers.com

4. Array (contd.)  Accessing Arrays You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. var myArray = new Array() myArray [0] The starting index FaaDoOEngineers.com

5. Windows Objects  The windows object represents a browser window  There can be several window objects at a time, each representing an open browser window.  Example: window.alert(‘message’) – This method displays a message in an alert box: Trigger an Event

6. Web Documents  The document object represents a web document or page. Web documents are displayed within browser windows, so the document object is a child of the window object.  Because the window object always represents the current window (the one containing the script), you can use window.document to refer to the current document. You can also simply refer to document, which automatically refers to the current window.

7. Web Documents Getting Information on the Document  Several properties of the document object include information about the current document in general: PropertyExplanation document.URLspecifies the document’s URL. This is a simple text field that can not be modified document.titletitle of the document page, defined by the HTML tag document.referreris the URL of the page the user was viewing prior to the current page (usually a page with a link to the current page) document.lastModifiedis the date the document was last modified (this date is sent from the server along with the page)

8. PropertyDescription document.bgColor document.fgColor Background and foreground(text) colors for the document, corresponding to the BGCOLOR and TEXT attributes of the or their CSS equivalent (background-color and color) document.linkColor document.alinkColor document.vlinkColor These are the colors for links within the document. document.cookieEnables you to read or set a cookie for the document. PropertyDescription document.writePrints text as part of the HTML page in a document window document.location.hrefUsed to load a new document

9. Example Document Last Modified This page was last modified on: <!-- document.write(document.lastModified); --> Writing Markup to ScreenJS document object property

10. Connected Series of Windows (pop-ups)  The goal is to provide a connected series of windows which can be popped up from one of your WEB pages to provide some information.  Create a function that will open a new window given its URL using the DOM object window.open: function openWin(URL) { aWindow = window.open(URL, "Window 1", "width=400, height=400, scrollbars=yes" ); }

11.  Create 2 HTML pages - will be opened as pop-ups (call them page1, page2).  Create a hyperlink in the main page that will open the new window, the message should read along the lines: “click here to open window 1”.  The href property of the hyperlink needs to be set to: "javascript:openWin(’page1.html');” click here to open window 1

13.  To add some navigation on the opened window, place a button to navigate to a second page (page2.html) and another to close the window:  On the second page an additional button to go back to page1.html could be added for full navigation capabilities

15. Roll-Over Images  The goal is to change images when the mouse is moved over the images to create some sort of animation or effect.  From the internet, download 2 images of the same object/character in different positions (for clarity, we will call the images T1.gif and T3.gif for this example). Place your images in the images folder of your site.

16. Roll-Over Images  The implementation can be done as a link (clickable image) or simply as an effect using only the image.  Note: use the DOM images array

17. Roll-Over Using DOM and mouse Actions <a href="javascript:openWin('http://en.wikipedia.org/wiki/Penguin');" onmouseover="document.images[0].src='images/T3.gif';" onmouseout="document.images[0].src='images/T1.gif';"> <img name="T1" alt="penguin" height="68" width="55" border="0" src="images/T1.gif" onmouseover="document.images[1].src='images/T3.gif';" onmouseout="document.images[1].src='images/T1.gif'" /> document.images [0] as Link document.images[1]

19. SlideShow  The goal is to create a small slideshow using the DOM Download 5 images and place them in the body of the HTML document where the slideshow will be displayed. Use an embedded stylesheet and assign each image tag a “slide” class. Set the CSS property for the image class to display as a block.

20. SlideShow  Create two functions to handle the slide show as described: the first one (called MakeSlideShow) will find and store all the images in a variable and its length (length is going to be used to limit the number of slides displayed). It will also hide all the slides except the first one. It will call the function to call the next slide (NextSlide) when there is a click event on the slide

21. Declarations  Before the functions are created, we need to declare the global variables that will be used in the functions: numslides: a counter that will contain the total number of slides currentslide: a counter that will store the slide being displayed slides: an array to store the images used in the slide-show var numslides = 0, currentslide = 0; var slides = new Array();

22. SlideShow function MakeSlideShow() { // find all images with the class "slide" imgs = document.getElementsByTagName("img"); for (I = 0; I < imgs.length; i++) { if (imgs[i].className != "slide") continue; slides[numslides] = imgs[i]; // hide all but the first image if (numslides == 0) { imgs[i].style.display = "block"; } else { imgs[i].style.display = "none"; } imgs[i].onclick = NextSlide; numslides++; } var numslides = 0, currentslide = 0; var slides = new Array();

23. SlideShow  The second function (NextSlide()) will hide the current slide, increment the slide counter, compare that is not the last slide, and display the next slide. If the slide is the last one, then it will reset the current slide counter to 0. function NextSlide() { slides[currentslide].style.display = "none"; currentslide++; if (currentslide >= numslides) currentslide = 0; slides[currentslide].style.display = "block"; }

24. SlideShow  To make the slideshow work, we need to start it, we can use the window.onload method to do this: (type in the head of the document inside tags): window.onload = MakeSlideShow;

26. Rotating Billboards