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

2. Mark Dixon, SoCCE SOFT 131Page 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”

3. Mark Dixon, SoCCE SOFT 131Page 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

4. Mark Dixon, SoCCE SOFT 131Page 4 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 controls to a web-page –Change the value of properties using the property window –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

5. Mark Dixon, SoCCE SOFT 131Page 5 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

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

7. Mark Dixon, SoCCE SOFT 131Page 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

8. Mark Dixon, SoCCE SOFT 131Page 8 Active Content Allow active content:

9. 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

10. 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

11. 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

12. 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

13. 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”

14. Mark Dixon, SoCCE SOFT 131Page 14 Sequence Inside event procedures –lines executed in sequence

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

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

17. Mark Dixon, SoCCE SOFT 131Page 17 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 Sub btnGuest_OnClick() document.title = "Puppy (large image)" picFace.src = "FaceLarge.jpg" End Sub title src Sub End document picFace click btnGuest_OnClick

18. Mark Dixon, SoCCE SOFT 131Page 18 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

19. Mark Dixon, SoCCE SOFT 131Page 19 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

20. Mark Dixon, SoCCE SOFT 131Page 20 Substitution Right hand side of assignment (after = sign) –contains expressions (calculations)

21. Mark Dixon, SoCCE SOFT 131Page 21 Environment Settings Choose VB settings (same as my laptop):

22. Mark Dixon, SoCCE SOFT 131Page 22 Interactive Debugger Current line: not done yet (F8 to execute) BreakPoint: pauses code (F9 key on/off) Immediate Window Execute code (F5)

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

24. Mark Dixon, SoCCE SOFT 131Page 24 Testing & Debugging: Errors –syntax: computer unable to understand your instructions (program does not execute), e.g. –run-time: program can't execute instruction and exits (future lecture) –logical: program executes but does not not match specification (do what was intended), e.g. 3 error types :

25. Mark Dixon, SoCCE SOFT 131Page 25 Errors: Run time Code cannot be executed Computer –just symbol matching –No intelligence missing e: syntax error

26. Mark Dixon, SoCCE SOFT 131Page 26 Errors: Logical Code does not do what you wanted blue instead of red

27. Mark Dixon, SoCCE SOFT 131Page 27 Questions: Errors Spot the errors (you should find 6), and decide whether they are syntax or logical Hello Sub btnBlue_OnCluck() document.bgColor = "Red" End Sub Sub btnRed_Onlick() document.bgColor "Red" End Sub Sub window_OnClick() document.bgColour = "White" End Sib

28. Mark Dixon, SoCCE SOFT 131Page 28 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).

29. Mark Dixon, SoCCE SOFT 131Page 29 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.

30. Mark Dixon, SoCCE SOFT 131Page 30 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)