Mark Dixon, SoCCE SOFT 131Page 1 02 – Dynamic HTML (client-side scripting)

Mark Dixon, SoCCE SOFT 131Page 2 Jobs Computer weekly (jobs in 7 days before 29 th September 2005): –java2234 –VB1614 –ASP1355 –php 215 –flash 168 –dreamweaver 69

Mark Dixon, SoCCE SOFT 131Page 3 Questions: HTML Consider the following HTML: Next Page Give an example of a tag Give an example of an element Give an example of an attribute Next Page href=“next.htm”

Mark Dixon, SoCCE SOFT 131Page 4 Questions: HTML Is the following a tag? Hello Is the following an element? Is the following an attribute? How many tags are there in: Title How many attributes are there in: No (element) No (start tag) 4 2

Mark Dixon, SoCCE SOFT 131Page 5 Session Aims & Objectives Aims –introduce you to the fundamental aspects of dynamic (interactive) web pages via client-side scripting Objectives, by end of this week’s sessions, you should be able to: –make your web-pages more dynamic/interactive using client-side script

Mark Dixon, SoCCE SOFT 131Page 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 (later weeks) slower more powerful

Mark Dixon, SoCCE SOFT 131Page 7 Controls Input tags –allow user to control page Login

Mark Dixon, SoCCE SOFT 131Page 8 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, SoCCE SOFT 131Page 9 Tags First Dynamic Page Sub btnRed_OnClick() document.bgcolor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.Value = "RED" End Sub Sub btnRed_OnMouseOut() btnRed.Value = "Red" End Sub Use tags to create buttons

Mark Dixon, SoCCE SOFT 131Page 10 Tag First Dynamic Page Sub btnRed_OnClick() document.bgcolor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.Value = "RED" End Sub Sub btnRed_OnMouseOut() btnRed.Value = "Red" End Sub Visual BASIC Script Use tags to enclose script code

Mark Dixon, SoCCE SOFT 131Page 11 Event Handler Procedures First Dynamic Page Sub btnRed_OnClick() document.bgcolor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.Value = "RED" End Sub Sub btnRed_OnMouseOut() btnRed.Value = "Red" End Sub Event Handler Procedure

Mark Dixon, SoCCE SOFT 131Page 12 Objects & Events First Dynamic Page Sub btnRed _ OnClick () document.bgcolor = "red" End Sub Sub btnRed _ OnMouseOver () btnRed.Value = "RED" End Sub Sub btnRed _ OnMouseOut () btnRed.Value = "Red" End Sub Object Events

Mark Dixon, SoCCE SOFT 131Page 13 Instructions First Dynamic Page Sub btnRed_OnClick() document.bgcolor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.Value = "RED" End Sub Sub btnRed_OnMouseOut() btnRed.Value = "Red" End Sub Assignment: Object.Property = Literal btnRed.Value = “Red”

Mark Dixon, SoCCE SOFT 131Page 14 Client-side Object Model window object – properties include: –.status: get/set status bar window.status = “Hello” –.close: close current window window.close –.SetInterval: allow timed actions document object – properties include: –.title: get/set title of page –.write: write text to page –.bgColor: get/set background colour of page –.location: get/set current location of browser

Mark Dixon, SoCCE SOFT 131Page 15 Example: Puppy Puppy's web page Sub btnGuest_OnClick() document.title = "Puppy (large image)" picFace.src = "FaceLarge.jpg" End Sub Welcome, Puppy's web page.

Mark Dixon, SoCCE SOFT 131Page 16 Example: Puppy (code) Puppy's web page Sub btnGuest_OnClick() document.title = "Puppy (large image)" picFace.src = "FaceLarge.jpg" End Sub Welcome, Puppy's web page. Script ignored, until button pressed picture and button, given identifiers

Mark Dixon, SoCCE SOFT 131Page 17 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, SoCCE SOFT 131Page 18 Example: Ball Character (script) Test Sub btnRight_OnClick () picBall.hspace = picBall.hspace + 10 End Sub Sub btnDown_OnClick () picBall.vspace = picBall.vspace + 10 End Sub

Mark Dixon, SoCCE SOFT 131Page 19 Example: Garden Wildlife

Mark Dixon, SoCCE SOFT 131Page 20 Debugging: Testing Functional Decomposition –break it into logical chunks Incremental Development –type a bit –test it Testing –test all/most combinations Regression Testing –repeat all previous tests

Mark Dixon, SoCCE SOFT 131Page 21 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, SoCCE SOFT 131Page 22 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, SoCCE SOFT 131Page 23 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)

Mark Dixon, SoCCE SOFT 131Page 24 Tutorial Exercise: Garden 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 Garden Animals example working. Moving the mouse over an image should change the document (page) background colour to something suitable for the animal (e.g. ladybird – red), and display the name of the animal below the images. (no code provided, but images in resources area on server)