Post on 28-Dec-2015
transcript
M Dixon 1
02 – Client-side code:JavaScript
M Dixon 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”
M Dixon 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
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 control structures (iteration, conditions)
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 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
M Dixon 7
<Input> Tags<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
<script language="javascript"> function btnRed_OnClick(){ document.bgColor = "red"; }
function btnRed_OnMouseOver(){ btnRed.value = "RED"; }
function btnRed_OnMouseOut(){ btnRed.value = "Red"; }</script>
• Use <input> tagsto create buttons
M Dixon 8
<Script> Tag<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
<script language="javascript"> function btnRed_OnClick(){ document.bgColor = "red"; }
function btnRed_OnMouseOver(){ btnRed.value = "RED"; }
function btnRed_OnMouseOut(){ btnRed.value = "Red"; }</script>
JavaScript
• Use <script> tags to enclose script code
M Dixon 9
Event Handler Procedures<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
<script language="javascript"> function btnRed_OnClick(){ document.bgColor = "red"; }
function btnRed_OnMouseOver(){ btnRed.value = "RED"; }
function btnRed_OnMouseOut(){ btnRed.value = "Red"; }</script>
EventHandler
Procedure
M Dixon 10
Objects & Events<html> <head><title>Colour Change</title></head> <body> <input id="btnRed" type="button" value="Red" onclick="btnRed_OnClick()" onmouseover="btnRed_OnMouseOver()" onmouseout="btnRed_OnMouseOut()" /> <input id="btnBlue" type="button" value="Blue" /> </body></html>
<script language="javascript"> function btnRed_OnClick(){ document.bgColor = "red"; }
function btnRed_OnMouseOver(){ btnRed.value = "RED"; }
function btnRed_OnMouseOut(){ btnRed.value = "Red"; }</script>
Object
Event
M Dixon 11
Can't touch this
• Student work from last week:
based on work done by Daniel Thornton & David Orrock
M Dixon 12
Questions
• name: event, object, property, event handler, operator, function, expression
<script language="javascript"> function window_onLoad(){ imgHammer.style.posLeft = 500; imgHammer.style.posTop = 100; imgHammer.style.height = 100; imgHammer.style.width = 75; sndPlayer.URL = "Hammer.wav"; }
function imgHammer_onMouseOver(){ imgHammer.style.posLeft = Math.random() * (document.body.clientWidth - imgHammer.width); imgHammer.style.posTop = Math.random() * (document.body.clientHeight - imgHammer.height); }</script>
M Dixon 13
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" onclick="btnPuppy_OnClick()" /> </body></html>
<script language="javascript"> function btnPuppy_OnClick(){ document.title = "Freya (large image)"; picFace.src = "FaceLarge.jpg"; }</script>
M Dixon 14
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" onclick="btnPuppy_OnClick()" /> </body></html>
<script language="javascript"> function btnPuppy_OnClick(){ document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" }</script>
Script ignored,until button pressed
picture and button,given identifiers (names)
M Dixon 15
Example: Sound<html> <head><title>Sound</title></head> <body> <object id="sndPlayer" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="width:0px; height:0px;"> </object> <input id="btnFart" type="button" value="Fart" onclick="btnFart_onClick" /> </body></html>
<script language="JavaScript"> function btnFart_onClick(){ sndPlayer.URL = "Fart.wav" }</script>
M Dixon 16
Meet George
• Common Boa Constrictor– boa constrictor imperator
• Native toCentral & SouthAmerica
• No venom(no poison)
M Dixon 17
Looking after George
• Problem:– Difficult to keep– Require temperature and humidity controlled
environment– Much of the literature is from the US
• Temperature in Fahrenheit: 80-85F day, 78F minimum at night (P Vosjoli 1998)
• Solution– Need a program to convert from Celsius to
Fahrenheit
M Dixon 18
Example: Temp (Spec)•User Requirements
– describe user's objectivesno mention of technology
•Software Requirements– Functional
• list facilities to be provided (often numbered)
– Non-functional• list desired characteristics
(often more subjective)
SPECIFICATION• User Requirements
– help snake keeper convert from Fahrenheit to Celsius
• Software Requirements– Functional:
–enter Fahrenheit value
–display Celsius value– Non-functional
should be quick and easy to use
M Dixon 19
Example: Temp (User Interface)
<html> <head><title>Temperature</title></head> <body> <p>Fahrenheit: <input id="txtFah" type="text" style="background-color: lime" /> <input id="btnCalc" type="button" value="Calculate" /></p> <p id="parCel" style="background-color: Yellow; width: 100px;">0</p> </body></html>
M Dixon 20
Example: Temp (code)<html> <head><title>Temperature</title></head> <body> <p>Fahrenheit: <input id="txtFah" style="background-color: lime" type="text" /> <input id="btnCalc" type="button" value="Calculate" onclick="btnCalc_onClick()" /></p> <p id="parCel" style="background-color: Yellow; width: 100px;">0</p> </body></html>
<script language="JavaScript"> function btnCalc_onClick(){ parCel.innerText = ((txtFah.value - 32) * 5) / 9; }</script>
M Dixon 21
Example: Student Loan (Analysis)
• What: Calculate annual student load repayment from salary
• How:
• Algorithm:– read annual salary– deduct £15000– calculate 9%– display result
M Dixon 22
Example: Student Loan (Design)• When Calculate button
is clicked:– read annual salary text
box– deduct £15000– calculate 9%– put result in paragraph
• Test Data: Input Process Output
– £15000 15000-15000*0.09 = £0– £16000 16000-15000*0.09 = £90
M Dixon 23
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 24
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 25
Tutorial Exercises: Temperature• LEARNING OBJECTIVE:
to assign a value to a object's property,• using combination of literal values, operators, functions, and
identifiers
• Task 1: get the temperature example working• Task 2: modify the temperature example so that it has two extra buttons – a
plus and minus to increase and decrease the input temperature (Fahrenheit)
M Dixon 26
Tutorial Exercises: Student Loan• LEARNING OBJECTIVE:
implement an algorithm in code
• Task 1: Create the user interface (page design) for the Student Loan example (from the lecture), using HTML tags (you will need a text box, a button, and a paragraph).
• Task 2: Add code that implements the following algorithm:When the Calculate button is clicked:– read annual salary text box– deduct £15000– calculate 9%– put result in paragraph
• Task 3: Modify your program so that it calculates and displays monthly income and repayment amounts (as well an annual).
M Dixon 27
Reading ListRecommended reading:
– Flanagan D (2001) JavaScript Pocket Reference. O'Reilly. ISBN: 0-596-00411-7