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

M Dixon 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”

M Dixon 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) No (element) 4 2

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

M Dixon 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 –Use Debugger to locate and fix errors –Play Sound on events

M Dixon 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

M Dixon 7 Example: Colour Change (design) Events: –Click: user releases left mouse button on object –MouseOver: mouse moves over object –MouseOut: mouse mouse moves off object WHEN Red button Clicked Change background to Red WHEN Red button MouseOver Make Red button text capitals (RED) WHEN Red button MouseOut Make Red button text normal (Red)

M Dixon 8 Tags Colour Change Use tags to create buttons

M Dixon 9 Tag Colour Change Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Visual BASIC Script Use tags to enclose script code

M Dixon 10 Translation: English to VBScript Colour Change Sub btnRed _ OnClick () document.bgColor = "red" End Sub Sub btnRed _ OnMouseOver () btnRed.value = "RED" End Sub WHEN Red button Clicked Change background to Red WHEN Red button MouseOver Make Red button text capitals (RED)

M Dixon 11 Question: Translation Complete the code: Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub WHEN Red button Clicked Change background to Red WHEN Red button MouseOver Make Red button text capitals (RED) WHEN Red button MouseOut Make Red button text normal (Red) ?

M Dixon 12 Event Handler Procedures Colour Change Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Event Handler Procedure

M Dixon 13 Objects & Events Colour Change Sub btnRed_OnClick () document.bgColor = "red" End Sub Sub btnRed_OnMouseOver () btnRed.value = "RED" End Sub Object Event

M Dixon 14 Instructions Colour Change Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Assignment: Object.Property = Literal btnRed.Value = "Red"

M Dixon 15 Programming vs. Maths In maths: x = y y = x Are the same, and mean: x and y have equal value In programming: btnRed.value = “RED” “RED” = btnRed.value Are completely opposite, and mean: put “RED” into btnRed.value put btnRed.value into “RED”

M Dixon 16 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)

M Dixon 17 Sequence Inside event procedures –lines executed in sequence

M Dixon 18 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  

M Dixon 19 Errors: Sub Every Sub must have End Sub Colour Change Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" missing End Sub

M Dixon 20 Example: Puppy Freya's web page Welcome, Freya's web page. Freya likes her toy. Sub btnPuppy_OnClick() document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" End Sub

M Dixon 21 Example: Puppy (code) Freya's web page Welcome, Freya's web page. Freya likes her toy. Sub btnPuppy_OnClick() document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" End Sub Script ignored, until button pressed picture and button, given identifiers (names)

M Dixon 22 Errors: Duplicate Sub Can't have 2 Subs with same name Don't need to: put both lines in same Sub Freya's web page Welcome, Freya's web page. Freya likes her toy. Sub btnPuppy_OnClick() document.title = "Freya (large image)" End Sub Sub btnPuppy_OnClick() picFace.src = "FaceLarge.jpg" End Sub 

M Dixon 23 Errors: Object Expected id in HTML (btnPuppy) must match code (btnPup) Freya's web page Welcome, Freya's web page. Freya likes her toy. Sub btnPup_OnClick() document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" End Sub 

M Dixon 24 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 btnPuppy_OnClick() document.title = "Puppy (large image)" picFace.src = "FaceLarge.jpg" End Sub title src Sub End document picFace click btnPuppy_OnClick

M Dixon 25 Question: Assignment Which of the following are valid: document.bgColor = document.bgColor = "red" "red" = document.bgColor document = "red" btnRed = "Hello"    

M Dixon 26 Example: Sound Sound <object id="sndPlayer" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="width:0px; height:0px;"> Sub btnFart_onClick() sndPlayer.URL = "Fart.wav" End Sub

M Dixon 27 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 match specification (do what was intended), e.g. 3 error types :

M Dixon 28 Errors: Syntax Code cannot be understood missing ( syntax error Click Yes keyboard cursor moves to error

M Dixon 29 Errors: Run time Code cannot be executed Computer –just symbol matching –No intelligence missing e run time error

M Dixon 30 Errors: Logical Code does not do what you wanted blue instead of red

M Dixon 31 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

M Dixon 32 Debugging key skill: –locate the cause of a bug using testing methods first step –narrow it down as much as possible typical pattern in early tutorials: –student: it doesn't work –lecturer: what doesn't work –student: my code –lecturer: yes, but which bit exactly –student: ???? –lecturer: run your program, take me through it, which bits work, and where exactly does it go wrong –student: when I click this, nothing happens –lecturer: which bit of code is responsible for doing that? –student: this bit

M Dixon 33 Debugging Process What happens when run? –Nothing? –Errors –Does the wrong thing (logical error)? murder investigation –who-done-it? doctor treating patient –diagnosis –treatment

M Dixon 34 Breakpoints Examine code line by line –can help, but time consuming Breakpoint (press F9 on keyboard):

M Dixon 35 Debugging Breakpoint: like DVD pause, when line hit Logic: –if breakpoint hit, code will pause, therefore event handler is OK, must be code –if nothing happens, breakpoint not hit, therefore event handler not working (this is what happens – check name)

M Dixon 36 Immediate Window Use ? to ask ‘what is in’ F8 run single line

M Dixon 37 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).

M Dixon 38 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.

M Dixon 39 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 TASK 2: Ensure Visual Studio uses the correct settings. 1.1 Start Visual Studio If it asks you to set the environment settings, choose Visual BASIC settings 1.3 Click the Start Visual Studio button

M Dixon 40 How to: Active Content Allow active content (to run pages):