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 Then txtTax.value = 0 Else txtTax.value = txtSalary.Value * 0.20 End If 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 Moon orbit Sub window_onLoad() imgMoon.style.posLeft = imgEarth.style.posLeft imgMoon.style.posTop = imgEarth.style.posTop + 150 window.setInterval "MoonRotate()", 50 End Sub Sub MoonRotate() txtAngle.value = txtAngle.value + 0.025 imgMoon.style.posLeft = imgEarth.style.posLeft + (Sin(txtAngle.value) * 150) imgMoon.style.posTop = imgEarth.style.posTop + (Cos(txtAngle.value) * 150) End Sub

5. Mark Dixon Page 5 Moon orbit Sub window_onLoad() imgMoon.style.posLeft = imgEarth.style.posLeft imgMoon.style.posTop = imgEarth.style.posTop + 150 window.setInterval "MoonRotate()", 50 End Sub Sub MoonRotate() txtAngle.value = txtAngle.value + 0.025 imgMoon.style.posLeft = imgEarth.style.posLeft + (Sin( txtAngle.value ) * 150) imgMoon.style.posTop = imgEarth.style.posTop + (Cos( txtAngle.value ) * 150) End Sub 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): Dim identifier e.g. Dim weight Dim x Dim s Dim 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 Variables: Dry running list the values of variables as each line is run: Dim num1 Dim num2 num1 = 8 num2 = num1 num1 = 3 num2 = 2 + num1 -8 88 83 53 -- -- num1num2

12. Mark Dixon Page 12 Variables: String Data

13. Mark Dixon Page 13 Variables: String Manipulation

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

15. Mark Dixon Page 15 Moon orbit Option Explicit Dim ang Sub window_onLoad() imgMoon.style.posLeft = imgEarth.style.posLeft imgMoon.style.posTop = imgEarth.style.posTop + 150 window.setInterval "MoonRotate()", 50 ang = 0 End Sub Sub MoonRotate() ang = ang + 0.025 imgMoon.style.posLeft = imgEarth.style.posLeft + (Sin( ang ) * 150) imgMoon.style.posTop = imgEarth.style.posTop + (Cos( ang ) * 150) End Sub 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 Option Explicit: Variable undefined Must be first line of script Useful to force explicit variable declaration: Undeclared variables produce error message: Option Explicit Dim length length = 6 age = 5

17. Mark Dixon Page 17 Variables: Name redefined Option Explicit Dim x Dim y Dim x x = 23 y = 10 23 = x can't use same name again

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

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

20. Mark Dixon Page 20 Questions: Variable declaration Write a line of code that: –Declares a variable called x –Declares a variable called y –Declares a variable called surname Dim x Dim y Dim surname

21. Mark Dixon Page 21 Questions: Variable assignment Write a line of code that: –Assigns the value of 23 to the variable y –Puts 14.6 into a variable called x –Assigns the value of ‘John’ to the variable surname y = 23 x = 14.6 surname = "John"

22. Mark Dixon Page 22 Questions: Variable assignment 2 Write a line of code that: –Increases the value of x by 2.89 –Divides Km by 1.6 and puts the result in Miles x = x + 2.89 Miles = Km / 1.6

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

24. Mark Dixon Page 24 Example: GuessNum - Code Option Explicit Dim GuessNum Sub window_onLoad() Randomize GuessNum = Int(Rnd() * 10) lblResult.innerText = GuessNum End Sub Sub btnGuess_onClick() If CInt(txtGuessNum.value) = GuessNum Then lblResult.innerText = "Correct" Else lblResult.innerText = "Wrong, please try again" End If End Sub Generate Random Number between 0 and 9 Temporary line (helps us test)

25. Mark Dixon Page 25 Variables: Errors Option Explicit Dim z Sub window_onClick() Dim s Dim x y = 5 z = 5 End Sub OK, explicit variable declaration OK Duplicate definition error. Variable not defined error. OK, as z is page level

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

27. Mark Dixon Page 27 Variable Scope (How) Page variables –general declarations (top) Local variables: –in procedures Option Explicit Dim mv Sub btnCalc_onClick() Dim lv1... End Sub Sub btnAdd_onClick() Dim lv2... End Sub

28. Mark Dixon Page 28 Variables: Scope (How)

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

30. Mark Dixon Page 30 Variable Scope Errors Spot the error in the following: Option Explicit Sub btnCalc_onClick() Dim x x = 0 lblTotal.innerText = "£" + x End Sub Sub btnQuit_onClick() x = 0 lblTotal.innerText = "£" + x End Sub Variable not defined error

31. Mark Dixon Page 31 Example: Ball Char (v2.5) Ball Char Sub window_onLoad() window.setInterval "MoveBallRight()", 50 End Sub Sub MoveBallRight() If (imgBall.style.posLeft + 5 + imgBall.width) < (document.body.clientWidth) Then imgBall.style.posLeft = imgBall.style.posLeft + 5 Else window.setInterval "MoveBallLeft()", 50 End If End Sub Sub MoveBallLeft() If (imgBall.style.posLeft - 5) > 0 Then imgBall.style.posLeft = imgBall.style.posLeft - 5 Else window.setInterval "MoveBallRight()", 50 End If End Sub previous solution:  multiple timers  erratic behaviour

32. Mark Dixon Page 32 Example: Ball Char (v3) Dim hInc Sub window_onLoad() window.setInterval "BallMove()", 50 hInc = 5 End Sub Sub BallMove() Dim nxt nxt = imgBall.style.posLeft + hInc If nxt >= 0 And nxt + imgBall.width <= document.body.clientWidth Then imgBall.style.posLeft = nxt Else hInc = -hInc End If End Sub Using variables: shorter code invisible to user less memory faster execution page variable local variable

33. Mark Dixon Page 33 Question: Variable Scope Will this compile? Option Explicit Dim v Dim x … Sub window_onLoad() Dim z x = 23 y = "there" z = 12 end Sub btnTest_onClick() Dim y y = "hello" x = 67 z = 53 End Sub 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

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

35. Mark Dixon Page 35 Tutorial Exercises: Moon Orbit LEARNING OBJECTIVE: use 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.

36. Mark Dixon Page 36 Tutorial Exercises: Guess Num LEARNING OBJECTIVE: use 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, button, and 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.

37. Mark Dixon Page 37 Tutorial Exercises: Ball Char LEARNING OBJECTIVE: use 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.