1 / 36

08 – Variables

08 – Variables. Questions: Conditional Execution. What is the result of (txtFah.value is 50): (txtFah.value >= 40)

ania
Download Presentation

08 – Variables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 08 – Variables

  2. Questions: Conditional Execution • What is the result of (txtFah.value is 50):(txtFah.value >= 40) • What will txtTax be after the following code has executed (txtSalary.value is 4589): if (txtSalary.value < 5035){ txtTax.value = 0; }else{ txtTax.value = txtSalary.value * 0.20; } true 0

  3. Session Aims & Objectives • Aims • Introduce you to (invisible) data storage concepts, i.e. variables • Objectives,by end of this week’s sessions, you should be able to: • declare a variable • assign a value to a variable, • using combination of literal values, operators, functions, and identifiers • Determine whether a variable is in or out of scope at a given point in a piece of code • Select a variable’s scope in your own program

  4. Example: Moon Orbit v1.0 <html> <head><title>Moon orbit</title></head> <body style="background-color: Black;" onload="window_onLoad()"> <input id="txtAngle" type="text" value="0" /> <img id="imgEarth" style="position: absolute; left: 200; top: 200;" src="Earth.gif" /> <img id="imgMoon" style="position: absolute;" src="Moon.gif" /> </body> </html> <script language="javascript"> function window_onLoad(){ imgMoon.style.posLeft = imgEarth.style.posLeft; imgMoon.style.posTop = imgEarth.style.posTop + 150; window.setInterval("MoonRotate()", 50); } function MoonRotate(){ txtAngle.value = parseFloat(txtAngle.value) + 0.025; imgMoon.style.posLeft = imgEarth.style.posLeft + (Math.sin(txtAngle.value) * 150); imgMoon.style.posTop = imgEarth.style.posTop + (Math.cos(txtAngle.value) * 150); } </script>

  5. Problem: Intermediate Results <html> <head><title>Moon orbit</title></head> <body style="background-color: Black;" onload="window_onLoad()"> <input id="txtAngle" type="text" value="0" /> <img id="imgEarth" style="position: absolute; left: 200; top: 200;" src="Earth.gif" /> <img id="imgMoon" style="position: absolute;" src="Moon.gif" /> </body> </html> <script language="javascript"> function window_onLoad(){ imgMoon.style.posLeft = imgEarth.style.posLeft; imgMoon.style.posTop = imgEarth.style.posTop + 150; window.setInterval("MoonRotate()", 50); } function MoonRotate(){ txtAngle.value = parseFloat(txtAngle.value) + 0.025; imgMoon.style.posLeft = imgEarth.style.posLeft + (Math.sin(txtAngle.value) * 150); imgMoon.style.posTop = imgEarth.style.posTop + (Math.cos(txtAngle.value) * 150); } </script> • Intermediate result (angle)stored in object property(txtAngle.value) • visible • takes lot of memory • verbose

  6. Variables (why?) • Variables useful for: • reducing memory use • speed up execution • storing information you don't want user to see • storing intermediate results of calculations temporarily: • makes code easier to understand, & • prevents need to re-calculate • making code easier to read (short variable name instead of long object.property names)

  7. Variables (what) • Variables have • Identifier (name) – you choose this, used to refer to (reference) variable • Value – you set/change this x 23 Name/Identifier Value Memory

  8. Variable declaration (how) represents the name of the variable • Variables must be declared, using the following syntax (grammar):varidentifier;e.g. var weight; var x; var s; var year;

  9. Variable assignment (how) • Variables are assigned values,using the following syntax:identifier=expression;e.g. x = 5; weight = 109.45; name = "Bob"; s = "Hello ";Note: the data flows backwards (from right to left) read the = as 'becomes equal to'

  10. Variables: Numeric Data

  11. Variables: Dry running • list the values of variables as each line is run: - - - - 8 - 8 8 3 8 3 5

  12. Variables: String Data

  13. Variables: String Manipulation

  14. Questions: Dry running • Produce a dry run table for the following code: - - - - - 3 5 3 9 3

  15. Example: Moon Orbit v1.2 Declarationof Variable initial value change value Use ofVariable <html> <head><title>Moon orbit</title></head> <body style="background-color: Black;" onload="window_onLoad()" > <img id="imgEarth" style="position: absolute; left: 200; top: 200;" src="Earth.gif" /> <img id="imgMoon" style="position: absolute;" src="Moon.gif" /> </body> </html> <script language="javascript"> var ang; function window_onLoad(){ imgMoon.style.posLeft = imgEarth.style.posLeft; imgMoon.style.posTop = imgEarth.style.posTop + 150; window.setInterval("MoonRotate()", 50); ang = 0; } function MoonRotate(){ ang = ang + 0.025; imgMoon.style.posLeft = imgEarth.style.posLeft + (Math.sin(ang) * 150); imgMoon.style.posTop = imgEarth.style.posTop + (Math.cos(ang) * 150); } </script> • shorter code • invisible to user • memory efficient • faster execution

  16. Variables: Name redefined <script language="javascript"> var x; var y; var x; x = 23; y = 10; 23 = x; </script> • can't use same name again

  17. Variables: Expected statement <script language="javascript"> Option Explicit var x var y x = 23 y = 10 23 = x </script> • destination can't be literal

  18. Example: Moon Orbit v1.3 • How can we change the speed and direction of the moon?

  19. Questions: Variable declaration • Write a line of code that: • Declares a variable called x • Declares a variable called y • Declares a variable called surname var x; var y; var surname;

  20. Questions: Variable assignment • Write a line of code that: • Assigns the value of 23 to the variable y • Assigns the value of 14.6 to the variable x • Assigns the value of ‘John’ to the variable surname y = 23; x = 14.6; surname = "John";

  21. Questions: Variable assignment 2 • Write a line of code that: • Increases the value of x by 2.89 • Decreases the value of z by y • Divides Km by 1.6 and puts the result in Miles x = x + 2.89; z = z – y; Miles = Km / 1.6;

  22. Example: GuessNum – Analysis • SPECIFICATION • User Requirements • need to keep children occupied/entertained, while learning about maths • Software Requirements • Functional: • computer picks a number between 0 and 10 • user enters a number • compare numbers and display appropriate message • Non-functionalshould be easy and fun to use

  23. Example: GuessNum - Code GenerateRandomNumber between 0 and 9 <html> … </html> <script language="javascript"> var GuessNum function window_onLoad(){ GuessNum = parseInt(Math.random() * 10); lblResult.innerText = GuessNum; } function btnGuess_onClick(){ if(parseInt(txtGuessNum.value) == GuessNum){ lblResult.innerText = "Correct"; }else{ lblResult.innerText = "Wrong, please try again"; } } </script> Temporary line(helps us test)

  24. Variables: Errors var z; function window_onClick(){ var s; var x; var x; y = 5; z = 5; } OK OK OK OK Duplicate definition Variable not defined OK, as z is page level

  25. Variable Scope (what) • Scope – accessibility/visibility • Local (declared within procedure) • Page (general declarations)

  26. Variable Scope (How) • Page variables • general declarations (top) • Local variables: • in procedures var mv; function btnCalc_onClick(){ var lv1; ... } function btnAdd_onClick(){ var lv2; ... }

  27. Variables: Scope (How)

  28. Variable Scope (why) • In short – Robustness of code/software • Protection from accidental outside interference • One of many responses to code that is • Difficult to maintain, and • Unreliable • House of cards phenomenon • Prevent: • Uncontrolled and ad hoc interactions between code • Always define things at lowest level needed

  29. Variable Scope Errors Variable not defined • Spot the error in the following: function btnCalc_onClick(){ var x; x = 0; lblTotal.innerText = "£" + x; } function btnQuit_onClick(){ x = 0; lblTotal.innerText = "£" + x; }

  30. Example: Ball Char (v2.5) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;" onload="window_onLoad()"> <img id="imgBall" src="BallChar.gif" style="position: absolute;" /> </body> </html> <script language="javascript"> function window_onLoad(){ window.setInterval("MoveBallRight()", 50); } function MoveBallRight(){ if ((imgBall.style.posLeft + 5 + imgBall.width) < (document.body.clientWidth)){ imgBall.style.posLeft = imgBall.style.posLeft + 5; }else{ window.setInterval("MoveBallLeft()", 50); } } function MoveBallLeft(){ if ((imgBall.style.posLeft - 5) > 0){ imgBall.style.posLeft = imgBall.style.posLeft – 5; }else{ window.setInterval("MoveBallRight()", 50); } } </script>

  31. Example: Ball Char (v3) local variable page variable <html> <head><title></title></head> <body style="margin-left: 0" onload="window_onLoad()"> <img id="imgBall" src="BALLCHAR.gif" style="position: absolute" /> </body> </html> <script language="javascript"> var hInc; function window_onLoad(){ window.setInterval("BallMove()", 50); hInc = 5; } function BallMove(){ var nxt; nxt = imgBall.style.posLeft + hInc; if (nxt >= 0 &&nxt + imgBall.width <= document.body.clientWidth){ imgBall.style.posLeft = nxt; }else{ hInc = -hInc; } } </script> Using variables: • shorter code • invisible to user • less memory • faster execution

  32. Question: Variable Scope • Will this compile? var v; var x; … function window_onLoad(){ var z; x = 23; y = "there"; z = 12; } function btnTest_onClick(){ var y; y = "hello"; x = 67; z = 53; } Is x in scope? Is y in scope? Is z in scope? Yes No Yes Yes Is y in scope? Is x in scope? Is z in scope? Yes No

  33. Variable Names • Variables in same scope cannot have same name:

  34. Tutorial Exercises: Moon Orbit • LEARNING OBJECTIVE:use constants and variables to simplify and make code more dynamic • Task 1: Get Moon Orbit examples working (v1 to v1.2).The code is provided on the slides. • Task 2: Modify your page to allow the user to stop speed up and change the moon's direction (v1.3).Use the existing code as inspiration. • Task 3: Modify your page so that it makes a water noise when the mouse moves over the Earth, and the ohh noise over the moon.Use code from previous lectures as inspiration. • Task 4: Modify your page so that the diameter and mass of the Moon are displayed when the mouse moves over it. Do the same for the Earth. Go on-line to find the diameter and mass information.

  35. Tutorial Exercises: Guess Num • LEARNING OBJECTIVE:use constants and variables to simplify and make code more dynamic • Task 1: Get GuessNum example working. You will need to create the html for the text box and the labels. • Task 2: Modify GuessNum to tell the user whether their incorrect guess was higher of lower than the correct number. • Task 3: Modify GuessNum to only allow 5 attempts before picking a new number.

  36. Tutorial Exercises: Ball Char • LEARNING OBJECTIVE:use constants and variables to simplify and make code more dynamic • Task 1: Get the Ball Char (v3) example working. • Task 2: Add sound to the Ball Char (v3) example. • Task 3: Get the Ball Char moving diagonally, bouncing off all four sides of the window. • Task 4: Modify your page so that it allows the user to control how fast the ball character moves.

More Related