mark dixon page 1 03 – dynamic html (client-side scripting)

Mark Dixon

03 – Dynamic HTML (client-side scripting)

Mark Dixon

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

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

Admin: On-line Quiz

• Useful, but limited– multiple choice,

same concepts– actual tests are

free text

Mark Dixon

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

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

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

Active Content• Allow active content:

Mark Dixon

<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

<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

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>


EventHandler

Procedure

Mark Dixon

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>


Object

Event

Mark Dixon

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>


• Assignment:Object.Property = Literal

btnRed.Value = "Red"

Mark Dixon

Sequence

• Inside event procedures– lines executed in sequence

Mark Dixon

Assignment Statements

• Order is important:


• The above means:

put "Red" into the Value of btnRed

destination(must be object property)

data flow

source (object property or literal)

Mark Dixon

Errors: Assignment


"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

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

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

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

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

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

Question: AssignmentWhich of the following are valid:

document.bgColor =

document.bgColor = "red"

"red" = document.bgColor

document = "red"

btnRed = "Hello"

Mark Dixon

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

Absolute Positioning

• change properties – change position

picBall.style.posTop

picBall.style.posLeft

picBall.width

picBall.height

document.body.clientwidth

Mark Dixon

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

Substitution• Right hand side of assignment (after = sign)

– contains expressions (calculations)

Mark Dixon

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

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

Tutorial Exercise: Puppy• LEARNING OBJECTIVE:


• 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

Tutorial Exercise: Ball Char• LEARNING OBJECTIVE:


• 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)

mark dixon page 1 03 – dynamic html (client-side scripting)

Documents