24
Mark Dixon, SoCCE SOFT 131 Page 1 02 – Dynamic HTML (client-side scripting)
| Date post: | 14-Dec-2015 |
| Category: |
Documents |
| Upload: | cora-randall |
| View: | 227 times |
| Download: | 1 times |
Mark Dixon, SoCCE SOFT 131 Page 1
02 – Dynamic HTML (client-side scripting)
Mark Dixon, SoCCE SOFT 131 Page 2
Jobs
• Computer weekly(jobs in 7 days before 29th September 2005):– java 2234– VB 1614– ASP 1355– php 215– flash 168– dreamweaver 69
www.cwjobs.co.uk
Mark Dixon, SoCCE SOFT 131 Page 3
Questions: HTML
• Consider the following HTML:
<a href=“next.htm”>Next Page</a>
• Give an example of a tag
• Give an example of an element
• Give an example of an attribute
<a></a>
<a href=“next.htm”>
<a href=“next.htm”>Next Page</a>
href=“next.htm”
Mark Dixon, SoCCE SOFT 131 Page 4
Questions: HTML
• Is the following a tag? <b>Hello</b>
• Is the following an element? <font size=+2>
• Is the following an attribute? <img src=“Car.jpg”>
• How many tags are there in: <center><b>Title</b></center>
• How many attributes are there in: <font color=“green” size=3>
No (element)
No (start tag)
No (start tag)
4
2
Mark Dixon, SoCCE SOFT 131 Page 5
Session Aims & Objectives• Aims
– introduce you to the fundamental aspects of dynamic (interactive) web pages via client-side scripting
• Objectives, by end of this week’s sessions, you should be able to:
– make your web-pages more dynamic/interactive using client-side script
Mark Dixon, SoCCE SOFT 131 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 (later weeks)• slower• more powerful
Mark Dixon, SoCCE SOFT 131 Page 7
Controls
• Input tags– allow user to control page
<HTML> <HEAD> <TITLE>Login</TITLE> </HEAD> <BODY>
<INPUT ID="txtUserName" TYPE=“text"><BR> <INPUT ID="txtPassword" TYPE="password"><BR> <INPUT ID="btnLogon" TYPE="button" VALUE="Logon" DISABLED="True">
</BODY></HTML>
Mark Dixon, SoCCE SOFT 131 Page 8
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, SoCCE SOFT 131 Page 9
<Input> Tags<html> <head> <title>First Dynamic Page</title> <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> </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, SoCCE SOFT 131 Page 10
<Script> Tag<html> <head> <title>First Dynamic Page</title> <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> </head> <body> <input ID="btnRed" type="button" value="Red"> <input ID="btnBlue" type="button" value="Blue"> </body></html>
VisualBASICScript
• Use <script> tags toenclose script code
Mark Dixon, SoCCE SOFT 131 Page 11
Event Handler Procedures<html> <head> <title>First Dynamic Page</title> <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> </head> <body> <input ID="btnRed" type="button" value="Red"> <input ID="btnBlue" type="button" value="Blue"> </body></html>
EventHandler
Procedure
Mark Dixon, SoCCE SOFT 131 Page 12
Objects & Events<html> <head> <title>First Dynamic Page</title> <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> </head> <body> <input ID="btnRed" type="button" value="Red"> <input ID="btnBlue" type="button" value="Blue"> </body></html>
Object Events
Mark Dixon, SoCCE SOFT 131 Page 13
Instructions<html> <head> <title>First Dynamic Page</title> <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> </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, SoCCE SOFT 131 Page 14
Client-side Object Model
• window object – properties include:– .status: get/set status bar
window.status = “Hello”– .close: close current window
window.close– .SetInterval: allow timed actions
• document object – properties include:– .title: get/set title of page– .write: write text to page– .bgColor: get/set background colour of page– .location: get/set current location of browser
Mark Dixon, SoCCE SOFT 131 Page 15
Example: Puppy<html> <head> <title>Puppy's web page</title>
<SCRIPT LANGUAGE=VBScript> Sub btnGuest_OnClick() document.title = "Puppy (large image)" picFace.src = "FaceLarge.jpg" End Sub </SCRIPT>
</head> <body> <p>Welcome, <b>Puppy's</b> web page. <p><center><img src=Face.jpg ID=picFace></center> <input ID=btnGuest type=button value="Large"> </body></html>
Mark Dixon, SoCCE SOFT 131 Page 16
Example: Puppy (code)<html> <head> <title>Puppy's web page</title>
<SCRIPT LANGUAGE=VBScript> Sub btnGuest_OnClick() document.title = "Puppy (large image)" picFace.src = "FaceLarge.jpg" End Sub </SCRIPT>
</head> <body> <p>Welcome, <b>Puppy's</b> web page. <p><center><img src=Face.jpg ID=picFace></center> <input ID=btnGuest type=button value="Large"> </body></html>
Script ignored,until button pressed
picture and button,given identifiers
Mark Dixon, SoCCE SOFT 131 Page 17
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, SoCCE SOFT 131 Page 18
Example: Ball Character (script)<html> <head> <title>Test</title> <script language="VBScript"> Sub btnRight_OnClick() picBall.hspace = picBall.hspace + 10 End Sub
Sub btnDown_OnClick() picBall.vspace = picBall.vspace + 10 End Sub </script> </head> <body bgcolor="#00ff00"> <p><input type="button" name="btnRight" value="Right"> <input type="button" name="btnDown" value="Down"> <p><IMG id=picBall src="BallChar.jpg" hspace=14 vspace=11></p> </body></html>
Mark Dixon, SoCCE SOFT 131 Page 19
Example: Garden Wildlife
Mark Dixon, SoCCE SOFT 131 Page 20
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
Mark Dixon, SoCCE SOFT 131 Page 21
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, SoCCE SOFT 131 Page 22
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, SoCCE SOFT 131 Page 23
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)
Mark Dixon, SoCCE SOFT 131 Page 24
Tutorial Exercise: Garden• 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 Garden Animals example working. Moving the mouse over an image should change the document (page) background colour to something suitable for the animal (e.g. ladybird – red), and display the name of the animal below the images. (no code provided, but images in resources area on server)
![U.S. v. Dixon, 509 U.S. 688 (1993) - Columbus School of Lawclinics.law.edu/res/docs/US-v-Dixon.pdfU.S. v. Dixon, 509 U.S. 688 (1993) Dixon, Dixon. and [1] Dixon. *698. order. Dixon.](https://static.documents.pub/doc/80x56/5ac1e6007f8b9ad73f8d6ea8/us-v-dixon-509-us-688-1993-columbus-school-of-v-dixon-509-us-688.jpg)
