Mark Dixon Page 1 03 – Dynamic HTML (client-side scripting)

Mark Dixon Page 2 Questions: HTML Consider the following HTML: Next Page a)Give an example of a tag b)Give an example of an element c)Give an example of an attribute Next Page href=“next.htm”

Mark Dixon Page 3 Questions: HTML a)Is the following a tag? Hello b)Is the following an element? c)Is the following an attribute? d)How many tags are there in: Title e)How many attributes are there in: No (element) No (start tag) 4 2

Mark Dixon Page 4 Admin: On-line Quiz Useful, but limited –multiple choice, same concepts –actual tests are free text

Mark Dixon Page 5 Session Aims & Objectives Aims –introduce you to the fundamental aspects of dynamic (interactive) web pages via client-side scripting Objectives, after this week’s sessions, you should be able to: –Add objects to a web-page –Create Event Handler Procedures to do things in response to an event of a object –Put Assignment instructions in the event handler, that change the value of properties at run-time

Mark Dixon Page 6 Dynamic processing (what) HTML is static –identical on each load –very limiting Dynamic processing –client-side: browser (this week) quicker (no request-response cycle) insecure (view source) limited (can't access server-side databases) –server-side: server application (next term) slower more powerful

Mark Dixon Page 7 Example: Colour Change Trigger (when)Actions (what) Click event of Red button Change background to Red MouseOver event of Red button Make button text capitals (RED) MouseOut event of Red button Make button text normal (Red) Click event of Blue button Change background to Blue MouseOver event of Blue button Make button text capitals (BLUE) MouseOut event of Blue button Make button text normal (Blue) Events: –Click: user releases left mouse button on object –MouseOver: mouse moves over object –MouseOut: mouse mouse moves off object

Mark Dixon Page 8 Active Content Allow active content:

Mark Dixon Page 9 Tags Colour Change <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> function btnRed_OnClick(){ document.bgColor = "red"; } function btnRed_OnMouseOver(){ btnRed.value = "RED"; } function btnRed_OnMouseOut(){ btnRed.value = "Red"; } Use tags to create buttons

Mark Dixon Page 10 Tag Colour Change <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> function btnRed_OnClick(){ document.bgColor = "red"; } function btnRed_OnMouseOver(){ btnRed.value = "RED"; } function btnRed_OnMouseOut(){ btnRed.value = "Red"; } Java Script Use tags to enclose script code

Mark Dixon Page 11 Event Handler Procedures Colour Change <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> function btnRed_OnClick(){ document.bgColor = "red"; } function btnRed_OnMouseOver(){ btnRed.value = "RED"; } function btnRed_OnMouseOut(){ btnRed.value = "Red"; } Event Handler Procedure

Mark Dixon Page 12 Objects & Events Colour Change <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> function btnRed_OnClick (){ document.bgColor = "red"; } function btnRed_OnMouseOver (){ btnRed.value = "RED"; } function btnRed_OnMouseOut (){ btnRed.value = "Red"; } Object Event

Mark Dixon Page 13 Instructions Colour Change <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> function btnRed_OnClick(){ document.bgColor = "red"; } function btnRed_OnMouseOver(){ btnRed.value = "RED"; } function btnRed_OnMouseOut(){ btnRed.value = "Red"; } Assignment: Object.Property = Literal btnRed.Value = "Red"

Mark Dixon Page 14 Sequence Inside event procedures –lines executed in sequence

Mark Dixon Page 15 Assignment Statements Order is important: btnRed.Value = "Red"; The above means: put "Red" into the Value of btnRed destination (must be object property) data flow source (object property or literal)

Mark Dixon Page 16 Errors: Assignment btnRed.Value = "Red"; "Red" = btnRed.Value; btnRed.Value = document.bgColor; 67 = document.bgColor; put "Red" into the Value of btnRed put the Value of btnRed into "Red" put the bgColor of the document into the Value of btnRed put the bgColor of the document into 67  

Mark Dixon Page 17 Errors: function { Every function must have } Colour Change <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> function btnRed_OnClick(){ document.bgColor = "red"; } function btnRed_OnMouseOver(){ btnRed.value = "RED"; function btnRed_OnMouseOut(){ btnRed.value = "Red"; } missing }

Mark Dixon Page 18 Example: Puppy Freya's web page Welcome, Freya's web page. Freya likes her toy. <input id="btnPuppy" type="button" value="Large" onclick="btnPuppy_OnClick()" /> function btnPuppy_OnClick(){ document.title = "Freya (large image)"; picFace.src = "FaceLarge.jpg"; }

Mark Dixon Page 19 Errors: Duplicate function Can't have 2 functions with same name Don't need to: put both lines in same function Freya's web page Welcome, Freya's web page. Freya likes her toy. <input id="btnPuppy" type="button" value="Large" onclick="btnPuppy_OnClick()" /> function btnPuppy_OnClick(){ document.title = "Freya (large image)"; } function btnPuppy_OnClick(){ picFace.src = "FaceLarge.jpg"; } 

Mark Dixon Page 20 Example: Puppy (code) Freya's web page Welcome, Freya's web page. Freya likes her toy. <input id="btnPuppy" type="button" value="Large" onclick="btnPuppy_OnClick()" /> function btnPuppy_OnClick(){ document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" } Script ignored, until button pressed picture and button, given identifiers (names)

Mark Dixon Page 21 Question: Parts of Code In the following code, name: a)a property b)a keyword c)an object d)an event e)an event handler function btnPuppy_OnClick(){ document.title = "Puppy (large image)"; picFace.src = "FaceLarge.jpg"; } title src function document picFace click btnPuppy_OnClick

Mark Dixon Page 22 Question: Assignment Which of the following are valid: document.bgColor = ; document.bgColor = "red"; "red" = document.bgColor; document = "red"; btnRed = "Hello";    

Mark Dixon Page 23 Example: Ball Character (design) Trigger (when)Actions (what) click event of Right buttonmove ball character right click event of Left buttonmove ball character left click event of Up buttonmove ball character up click event of Down buttonmove ball character down

Mark Dixon Page 24 Absolute Positioning change properties – change position picBall.style.posTop picBall.style.posLeftpicBall.width picBall.height document.body.clientWidth

Mark Dixon Page 25 Example: Ball Character (script) Ball Character <input type="button" id="btnRight" value="Right" onclick="btnRight_OnClick()" /> <input type="button" id="btnDown" value="Down" onclick="btnDown_OnClick()" /> function Window_OnLoad (){ picBall.style.poslLeft = 200; picBall.style.posTop = 100; } function btnRight_OnClick (){ picBall.style.posLeft = picBall.style.posLeft + 10; } function btnDown_OnClick (){ picBall.style.posTop = picBall.style.posTop + 10; }

Mark Dixon Page 26 Substitution Right hand side of assignment (after = sign) –contains expressions (calculations)

Mark Dixon Page 27 Example: Sound Sound <object id="sndPlayer" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="width:0px; height:0px;"> function btnFart_onClick(){ sndPlayer.URL = "Fart.wav" }

Mark Dixon Page 28 Tutorial Exercise: Setup LEARNING OBJECTIVE: to change your computer's settings so that Visual Studio works properly TASK 1: Enable active content in Internet Explorer: 1.1 Start Internet Explorer 1.2 Click the Tools Menu 1.3 Click the Internet Options Item 1.4 Click the Advanced tab 1.5 Ensure 'Disable Script Debugging' is unchecked 1.6 Ensure 'Allow active content on My Computer' is checked 1.7 Click the OK button 1.8 Close Internet Explorer

Mark Dixon Page 29 Tutorial Exercise: Colour Change LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages TASK 1: Get the Red button from the Colour Change example working. (the code is provided) TASK 2: Get the Blue button working. (You will need to work out what code to use. Use the code provided as inspiration) TASK 3: Add another button (you choose the colour).

Mark Dixon Page 30 Tutorial Exercise: Puppy LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages TASK 1: Get the Puppy example working. (code provided, images in resources area on server). TASK 2: Add a button, which changes the image back to the smaller picture.

Mark Dixon Page 31 Tutorial Exercise: Ball Char LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages TASK 1: Get the Right and Down buttons from the Ball Character example working. (code provided, images in resources area on server). TASK 2: Get the Left and Up buttons working. (You will need to work out what code to use. Use the code provided as inspiration) TASK 3: Make the Ball Character blink when the user moves the mouse over it. (You will need to add code that changes the picture) TASK 4: Add a button to move the Ball Character diagonally. (You will need two lines of code in the same event handler)