03 Dynamic HTML clientside scripting M Dixon 1

Questions: HTML Consider the following HTML: <a href=“next. htm”>Next Page</a> <a href=“next. htm”> b)

Questions: HTML a) Is the following a tag? No (element) <b>Hello</b> b) Is the

Admin: On-line Quiz • Useful, but limited – multiple choice, same concepts – actual

Session Aims & Objectives • Aims – introduce you to the fundamental aspects of

Dynamic processing (what) • HTML is static – identical on each load – very

Example: Colour Change (design) WHEN Red button Clicked Change background to Red WHEN Red

<Input> Tags <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="Re <input id="btn. Blue"

<Script> Tag <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn. Blue"

Translation: English to VBScript <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input

Question: Translation • Complete the code: WHEN Red button Clicked Change background to Red

Event Handler Procedures <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn.

Objects & Events <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn.

Instructions <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn. Blue" type="button"

Programming vs. Maths • In maths: x=y y=x • Are the same, and mean:

Assignment Statements • Order is important: data flow btn. Red. Value = "Red" destination

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

Errors: Assignment btn. Red. Value = "Red" put "Red" into the Value of btn.

Errors: Sub <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn. Blue"

Example: Puppy <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya likes

Errors: Duplicate Sub <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya

Example: Puppy (code) <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya

Errors: Object Expected <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya

Question: Parts of Code In the following code, name: Sub btn. Puppy_On. Click() document.

Question: Assignment Which of the following are valid: document. bg. Color = "red" =

Example: Sound <html> <head><title>Sound</title></head> <body> <object id="snd. Player" classid="clsid: 6 BF 52 A 52

Testing & Debugging: Errors • 3 error types : – syntax: computer unable to

Errors: Syntax • Code cannot be understood missing ( syntax error • Click Yes

Errors: Run time • Code cannot be executed missing e run time error •

Errors: Logical • Code does not do what you wanted blue instead of red

Questions: Errors • Spot the errors (you should find 6), and • decide whether

Tutorial Exercise: Colour Change • LEARNING OBJECTIVE: to understand objects, events, properties, and event

Tutorial Exercise: Puppy • LEARNING OBJECTIVE: to understand objects, events, properties, and event handler

Tutorial Exercise: Setup • LEARNING OBJECTIVE: to change your computer's settings so that Visual

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

Slides: 35

Download presentation

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

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

Questions: HTML a) Is the following a tag? No (element) <b>Hello</b> b) Is the following an element? No (start tag) <font size=+2> c) Is the following an attribute? No (element) <img src=“Car. jpg” /> d) How many tags are there in: 4 <center><b>Title</b></center> e) How many attributes are there in: 2 <font color=“green” size=3> M Dixon 3

Admin: On-line Quiz • Useful, but limited – multiple choice, same concepts – actual tests are free text M Dixon 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 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 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 (next term) • slower • more powerful M Dixon 6

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

<Input> Tags <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="Re <input id="btn. Blue" type="button" value="Bl </body> </html> • Use <input> tags to create buttons M Dixon 8

<Script> Tag <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn. Blue" type="button" value="B </body> </html> <script language="vbscript"> Sub btn. Red_On. Click() document. bg. Color = "red" End Sub • Use <script> tags to enclose script code M Dixon Visual BASIC Script Sub btn. Red_On. Mouse. Over() btn. Red. value = "RED" End Sub </script> 9

Translation: English to VBScript <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn. Blue" type="button" value="B </body> </html> WHEN Red button Clicked Change background to Red WHEN Red button Mouse. Over Make Red button text capitals (RED) M Dixon <script language="vbscript"> Sub btn. Red_On. Click() document. bg. Color = "red" End Sub btn. Red_On. Mouse. Over() btn. Red. value = "RED" End Sub </script> 10

Question: Translation • Complete the code: WHEN Red button Clicked Change background to Red WHEN Red button Mouse. Over Make Red button text capitals (RED) WHEN Red button Mouse. Out Make Red button text normal (Red) M Dixon Sub btn. Red_On. Click() document. bg. Color = "red" End Sub btn. Red_On. Mouse. Over() btn. Red. value = "RED" End Sub ? 11

Event Handler Procedures <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn. Blue" type="button" value="B </body> </html> <script language="vbscript"> Sub btn. Red_On. Click() document. bg. Color = "red" End Sub Event Handler Procedure Sub btn. Red_On. Mouse. Over() btn. Red. value = "RED" End Sub </script> M Dixon 12

Objects & Events <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn. Blue" type="button" value="B </body> </html> Object <script language="vbscript"> Sub btn. Red_On. Click() document. bg. Color = "red" End Sub Event Sub btn. Red_On. Mouse. Over() btn. Red. value = "RED" End Sub </script> M Dixon 13

Instructions <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn. Blue" type="button" value="B </body> </html> <script language="vbscript"> Sub btn. Red_On. Click() document. bg. Color = "red" End Sub • Assignment: Object. Property = Literal Sub btn. Red_On. Mouse. Over() btn. Red. value = "RED" End Sub </script> btn. Red. Value = "Red" M Dixon 14

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

Assignment Statements • Order is important: data flow btn. Red. Value = "Red" destination (must be object property) source (object property or literal) • The above means: put "Red" into the Value of btn. Red M Dixon 16

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

Errors: Assignment btn. Red. Value = "Red" put "Red" into the Value of btn. Red "Red" = btn. Red. Value put the Value of btn. Red into "Red" btn. Red. Value = document. bg. Color put the bg. Color of the document into the Value of btn. Red 67 = document. bg. Color put the bg. Color of the document into 67 M Dixon 18

Errors: Sub <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R <input id="btn. Blue" type="button" value="B </body> </html> • Every Sub must have End Sub <script language="vbscript"> missing End Sub btn. Red_On. Click() document. bg. Color = "red" End Sub btn. Red_On. Mouse. Over() btn. Red. value = "RED" </script> M Dixon 19

Example: Puppy <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya likes her <a href="toy. wmv">toy</a>. </p> <center><img id="pic. Face" src="Face. jpg" /></center> <input id="btn. Puppy" type="button" value="Large" /> </body> </html> <script language="vbscript"> Sub btn. Puppy_On. Click() document. title = "Freya (large image)" pic. Face. src = "Face. Large. jpg" End Sub </script> M Dixon 20

Errors: Duplicate Sub <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya likes her <a href="toy. wmv">toy</a>. </p> <center><img id="pic. Face" src="Face. jpg" /></center> <input id="btn. Puppy" type="button" value="Large" /> </body> </html> <script language="vbscript"> Sub btn. Puppy_On. Click() document. title = "Freya (large image)" End Sub btn. Puppy_On. Click() pic. Face. src = "Face. Large. jpg" End Sub </script> M Dixon • Can't have 2 Subs with same name • Don't need to: put both lines in same Sub 21

Example: Puppy (code) <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya likes her <a href="toy. wmv">toy</a>. </p> <center><img id="pic. Face" src="Face. jpg" /></center> <input id="btn. Puppy" type="button" value="Large" /> </body> </html> <script language="vbscript"> Sub btn. Puppy_On. Click() document. title = "Freya (large image)" pic. Face. src = "Face. Large. jpg" End Sub </script> M Dixon picture and button, given identifiers (names) Script ignored, until button pressed 22

Errors: Object Expected <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya likes her <a href="toy. wmv">toy</a>. </p> <center><img id="pic. Face" src="Face. jpg" /></center> <input id="btn. Puppy" type="button" value="Large" /> </body> </html> <script language="vbscript"> Sub btn. Pup_On. Click() document. title = "Freya (large image)" pic. Face. src = "Face. Large. jpg" End Sub </script> • id in HTML (btn. Puppy) • must match code (btn. Pup) M Dixon 23

Question: Parts of Code In the following code, name: Sub btn. Puppy_On. Click() document. title = "Puppy (large image)" pic. Face. src = "Face. Large. jpg" End Sub a) b) c) d) e) M Dixon a property a keyword an object an event handler title src Sub End document pic. Face click btn. Puppy_On. Click 24

Question: Assignment Which of the following are valid: document. bg. Color = "red" = document. bg. Color document = "red" btn. Red = "Hello" M Dixon 25

Example: Sound <html> <head><title>Sound</title></head> <body> <object id="snd. Player" classid="clsid: 6 BF 52 A 52 -394 A-11 d 3 -B 153 -00 C 04 F 79 FAA 6" style="width: 0 px; height: 0 px; "> </object> <input id="btn. Fart" type="button" value="Fart" /> </body> </html> <script language="vbscript"> Sub btn. Fart_on. Click() snd. Player. URL = "Fart. wav" End Sub </script> M Dixon 26

Testing & Debugging: Errors • 3 error types : – 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. M Dixon 27

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

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

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

Questions: Errors • Spot the errors (you should find 6), and • decide whether they are syntax or logical <html> <head><title>Hello</title></head> <body> <input type="button" id="btn. Red" Value="Re <input type="button" id="btn. Blue" Value="Blu <p id="lbl. Hello"></p> </body> </html> <script language="VBScript"> Sub btn. Blue_On. Cluck() document. bg. Color = "Red" End Sub btn. Red_Onlick() document. bg. Color "Red" End Sub window_On. Click() document. bg. Colour = "White" End Sib </script> M Dixon 31

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 32

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 33

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 2005 1. 2 If it asks you to set the environment settings, choose Visual BASIC settings 1. 3 Click the Start Visual Studio button M Dixon 34

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