mark dixon page 1 03 – dynamic html (client-side scripting)
TRANSCRIPT
Mark Dixon Page 1
03 – Dynamic HTML (client-side scripting)
Mark Dixon Page 2
Questions: HTML
Consider the following HTML:
<a href=“next.htm”>Next Page</a>
a) Give an example of a tag
b) Give an example of an element
c) Give an example of an attribute
<a></a>
<a href=“next.htm”>
<a href=“next.htm”>Next Page</a>
href=“next.htm”
Mark Dixon Page 3
Questions: HTML
a) Is the following a tag? <b>Hello</b>
b) Is the following an element? <font size=+2>
c) Is the following an attribute? <img src=“Car.jpg”>
d) How many tags are there in: <center><b>Title</b></center>
e) How many attributes are there in: <font color=“green” size=3>
No (element)
No (start tag)
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– Enable and use the Interactive Debugger, and the
immediate window
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 ChangeTrigger (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
<Input> Tags<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
• Use <input> tagsto create buttons
Mark Dixon Page 10
<Script> Tag<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
<script language="vbscript"> Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Sub btnRed_OnMouseOut() btnRed.value = "Red" End Sub</script>
VisualBASICScript
• Use <script> tags to enclose script code
Mark Dixon Page 11
Event Handler Procedures<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
<script language="vbscript"> Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Sub btnRed_OnMouseOut() btnRed.value = "Red" End Sub</script>
EventHandler
Procedure
Mark Dixon Page 12
Objects & Events<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
<script language="vbscript"> Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Sub btnRed_OnMouseOut() btnRed.value = "Red" End Sub</script>
Object
Event
Mark Dixon Page 13
Instructions<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
<script language="vbscript"> Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Sub btnRed_OnMouseOut() btnRed.value = "Red" End Sub</script>
• 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: Sub
• Every Sub must have End Sub
<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
<script language="vbscript"> Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" Sub btnRed_OnMouseOut() btnRed.value = "Red" End Sub</script>
missingEnd Sub
Mark Dixon Page 18
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="picFace" src="Face.jpg" /></center> <input id="btnPuppy" type="button" value="Large" /> </body></html>
<script language="vbscript"> Sub btnPuppy_OnClick() document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" End Sub</script>
Mark Dixon Page 19
Errors: Duplicate Sub
• Can't have 2 Subs with same name
• Don't need to:put both lines in same 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="picFace" src="Face.jpg" /></center> <input id="btnPuppy" type="button" value="Large" /> </body></html>
<script language="vbscript"> Sub btnPuppy_OnClick() document.title = "Freya (large image)" End Sub
Sub btnPuppy_OnClick() picFace.src = "FaceLarge.jpg" End Sub</script>
Mark Dixon Page 20
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="picFace" src="Face.jpg" /></center> <input id="btnPuppy" type="button" value="Large" /> </body></html>
<script language="vbscript"> Sub btnPuppy_OnClick() document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" End Sub</script>
Script ignored,until button pressed
picture and button,given identifiers (names)
Mark Dixon Page 21
Question: Parts of CodeIn 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 Enddocument picFace
clickbtnGuest_OnClick
Mark Dixon Page 22
Question: AssignmentWhich 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 button move ball character right
click event of Left button move ball character left
click event of Up button move ball character up
click event of Down button move ball character down
Mark Dixon Page 24
Absolute Positioning
• change properties – change position
picBall.style.posTop
picBall.style.posLeft
picBall.width
picBall.height
document.body.clientwidth
Mark Dixon Page 25
Example: Ball Character (script)<html> <head><title>Ball Character</title></head> <body bgcolor="#00ff00"> <input type="button" id="btnRight" value="Right" /> <input type="button" id="btnDown" value="Down" /> <img id="picBall" src="BallChar.gif" style="position: absolute" /> </body></html>
<script language="VBScript"> Sub Window_OnLoad() picBall.style.posLeft = 200 picBall.style.posTop = 100 End Sub
Sub btnRight_OnClick() picBall.style.posLeft = picBall.style.posLeft + 10 End Sub
Sub btnDown_OnClick() picBall.style.posTop = picBall.style.posTop + 10 End Sub</script>
Mark Dixon Page 26
Substitution• Right hand side of assignment (after = sign)
– contains expressions (calculations)
Mark Dixon Page 27
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 Explorer1.2 Click the Tools Menu1.3 Click the Internet Options Item1.4 Click the Advanced tab1.5 Ensure 'Disable Script Debugging' is unchecked1.6 Ensure 'Allow active content on My Computer' is checked1.7 Click the OK button1.8 Close Internet Explorer
• TASK 2: Ensure Visual Studio uses the correct settings.1.1 Start Visual Studio 20051.2 If it asks you to set the environment settings,
choose Visual BASIC settings1.3 Click the Start Visual Studio button
Mark Dixon Page 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).
Mark Dixon Page 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.
Mark Dixon Page 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)
• TASK 4: Add a button to move the Ball Character diagonally. (You will need two lines of code in the same event handler)