02 – Client-side code: JavaScript M Dixon
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
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
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
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
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
<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
<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
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
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
Can't touch this Student work from last week: based on work done by Daniel Thornton & David Orrock M Dixon
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
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
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
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
Meet George Common Boa Constrictor Native to Central & South America boa constrictor imperator Native to Central & South America No venom (no poison) M Dixon
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: 80-85F day, 78F minimum at night (P Vosjoli 1998) Solution Need a program to convert from Celsius to Fahrenheit M Dixon
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
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
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
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
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
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
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
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
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
Reading List Recommended reading: Flanagan D (2001) JavaScript Pocket Reference. O'Reilly. ISBN: 0-596-00411-7 M Dixon