1. Mark Dixon Page 1 08 – Variables

2. Mark Dixon Page 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. Mark Dixon Page 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. Mark Dixon Page 4 Example: Moon Orbit v1.0 Moon orbit 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); }

5. Mark Dixon Page 5 Moon orbit 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); } Problem: Intermediate Results Intermediate result (angle) stored in object property (txtAngle.value) –verbose –visible –takes lot of memory

6. Mark Dixon Page 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. Mark Dixon Page 7 Variables (what) Variables have –Identifier (name) – you choose this, used to refer to (reference) variable –Value – you set/change this 23x Name/Identifier ValueMemory

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

9. Mark Dixon Page 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. Mark Dixon Page 10 Variables: Numeric Data

11. Mark Dixon Page 11 num1num2 Variables: Dry running list the values of variables as each line is run: var num1; var num2; num1 = 8; num2 = num1; num1 = 3; num2 = 2 + num1; -8 88 83 53 -- --

12. Mark Dixon Page 12 Variables: String Data

13. Mark Dixon Page 13 Variables: String Manipulation

14. Mark Dixon Page 14 df var d; var f; f = 3; d = f + 2; d = d + 4; Questions: Dry running Produce a dry run table for the following code: 3- 35 39 -- --

15. Mark Dixon Page 15 Moon orbit 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); } Example: Moon Orbit v1.2 Declaration of Variable Use of Variable shorter code invisible to user memory efficient faster execution initial value change value

16. Mark Dixon Page 16 Variables: Name redefined var x; var y; var x; x = 23; y = 10; 23 = x; can't use same name again

17. Mark Dixon Page 17 Variables: Expected statement Option Explicit var x var y x = 23 y = 10 23 = x destination can't be literal

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

19. Mark Dixon Page 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. Mark Dixon Page 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. Mark Dixon Page 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. Mark Dixon Page 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-functional should be easy and fun to use

23. Mark Dixon Page 23 Example: GuessNum - Code … 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"; } Generate Random Number between 0 and 9 Temporary line (helps us test)

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

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

26. Mark Dixon Page 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. Mark Dixon Page 27 Variables: Scope (How)

28. Mark Dixon Page 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. Mark Dixon Page 29 Variable Scope Errors Spot the error in the following: function btnCalc_onClick(){ var x; x = 0; lblTotal.innerText = "£" + x; } function btnQuit_onClick(){ x = 0; lblTotal.innerText = "£" + x; } Variable not defined

30. Mark Dixon Page 30 Example: Ball Char (v2.5) Ball Char 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); }

31. Mark Dixon Page 31 Example: Ball Char (v3) 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; } Using variables: shorter code invisible to user less memory faster execution page variable local variable

32. Mark Dixon Page 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? Is y in scope? Is x in scope? Is z in scope? Yes No Yes No

33. Mark Dixon Page 33 Variable Names Variables in same scope cannot have same name:

34. Mark Dixon Page 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. Mark Dixon Page 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. Mark Dixon Page 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.