Download presentation
Presentation is loading. Please wait.
1
02 – Client-side code: JavaScript
M Dixon
2
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” M Dixon
3
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 M Dixon
4
Session Aims & Objectives
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 Change
Trigger (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 Use <input> tags to create buttons
<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> tags to create buttons M Dixon
8
<Script> Tag Use <script> tags to enclose script code Java
<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 <script> tags to enclose script code Java Script 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> Event Handler Procedure M Dixon
10
Objects & Events Event Object <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> Event Object 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) picture and button, given identifiers (names)
<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> picture and button, given identifiers (names) Script ignored, until button pressed 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 Native to Central & South America
boa constrictor imperator Native to Central & South America No venom (no poison) M Dixon
17
Looking after George Problem: Solution Difficult to keep
Require temperature and humidity controlled environment Much of the literature is from the US Temperature in Fahrenheit: F 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 SPECIFICATION
describe user's objectives no 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) function btnCalc_onClick(){
<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 £ * = £0 £ * = £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 List Recommended reading:
Flanagan D (2001) JavaScript Pocket Reference. O'Reilly. ISBN: M Dixon
Similar presentations
