1. IS2802 Introduction to Multimedia Applications for Business Lecture 6: JavaScript and Dynamic HTML Rob Gleasure R.Gleasure@ucc.ie www.robgleasure.com

2. Lecture Outline Dynamic HTML  What is Dynamic HTML?  Using JavaScript to create HTML  Using JavaScript to create CSS  HTMLElement objects and events Exercise

3. Dynamic HTML Dynamic HTML (historically, sometimes called DHTML) is when JavaScript is used to create responsive HTML content, i.e. content which changes  We have already touched on this with the document.write() function This will often happen due to user behaviour/input, but may also result because we’re using mobile browsers, or due to connection difficulties

4. Using JavaScript to create HTML We usually use the documents class to refer to a HTML Element:  By its id e.g. document.getElementById("x")  By its name e.g. document.getElementsByName("x")  Or by its tag name e.g. document.getElementsByTagName("input")  it’s worth noting that document.getElementsByTagName returns an array, in which items are ordered by the sequence in which they appear in the HTML code

5. Using JavaScript to create HTML It’s worth noting that when we refer to the and tags we have two options  Refer to them by document.getElementsByTagName('body')[0] and document.getElementsByTagName('head')[0]  Refer to them using the special document.body and document.head The second option is usually preferred, as it runs much faster (see http://jsperf.com/document-body-vs-document- getelementsbytagname-body-0)

6. Using JavaScript to create HTML JavaScript may retrieve, create, delete or change HTML elements using the HTML DOM  Remember the HTML DOM defines each element as a HTMLElement object  This means all HTML elements have what two things?

7. Using JavaScript to create HTML For the most part, the HTMLElement object properties correspond to HTML attributes, such as innerHTML and style e.g. This text will never get displayed document.getElementById("myHeader").innerHTML="New text!";

8. Using JavaScript to create HTML In addition to these generic properties for generic HTML Elements, specific types of HTML Elements also exist with specific properties  E.g. for each tag in an HTML document, an Anchor object is created, complete with a href property Click here document.getElementById('myLink').href="http://www.ucc.ie"; A list of HTMLElement properties and functions can be found at http://www.w3schools.com/jsref/dom_obj_all.asp.

9. HTMLElement objects and events Each HTMLElement object is also defined with a list of related events which can be used to invoke JavaScript  We spoke about HTML events where JavaScript code can be inserted (usually in the form of function calls) back in lecture 3 A complete set of events for HTML elements can be found at http://www.w3schools.com/jsref/dom_obj_event.asp The most common HTML events we will use are  onclick/ondblclick – mouse clicks/double-clicks an object  onmouseover/onmouseout – a mouse is moved over/off an object  onload – a page or image finished loading/unloading  onunload – a user leaves the page

10. Using JavaScript to create CSS JavaScript and the HTML DOM can also be used to change the style of any HTML element We do this using the general syntax of element-reference.style.property= value-for-that-style e.g. Click Me!

11. Using JavaScript to create CSS A complete reference of the style properties can be found at http://www.w3schools.com/jsref/dom_obj_style.asp It’s worth noting that most of these will have the same name as their CSS counterparts, e.g. for width document.getElementById("myElem").style.width="300px"; The most common exception to this is when the CSS name had a hyphen, in which case the JS name is usually a conjoined version where subsequent words are capitalised, e.g. for border-style document.getElementById("myElem").style.borderStyle="solid";

12. Exercise Copy the following text into Notepad/Notepad++ Big Bang! div#myDiv { width:200px;height:225px;position:relative;top:200px;left:400px; font-weight:bold;} div#myDiv2 { height:170px;width:190px;position:absolute;top:200px;left:650px; padding:35px; color:white; background-repeat: no-repeat; background-image:url('http://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Info_Box_Blue.png');} function brew(){ } function boom(){ document.getElementById("myDiv2").style.visibility = 'hidden'; } <div id="myDiv" onmouseover="brew()" onmouseout="boom()" onclick="blurb()"; style="background- image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcSzIxM2waz0aQDb2TxeK1CGXJLmEYhI7Xu0QkpbHdl1K9731Lf2');"> Super dense mass The Big Bang theory is the prevailing cosmological model of the early development of the universe. The major premise of the Big Bang theory is that the universe was once in an extremely hot and dense state that expanded rapidly (a "Big Bang").

13. Exercise Add code to the boom() function, so that it  Sets the innerHTML of myDiv to the text “Big Bang!”  Sets the background image of the body to http://www.twitterevolutions.com/bgs/space.jpg Add code to the brew() function, such that it:  Sets the innerHTML of myDiv to the text “Wait for it…”  Sets the background image of myDiv to the empty string “”  Use a counter variable and add code to ensure the code in brew() only runs the first time a mouseover event occurs  The second time brew runs, have it so that it sets myDiv2’s visibility to ‘visible’