1. Mark Dixon 1 08 – Variables

2. Mark Dixon 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 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 4 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

5. Mark Dixon 5 Example: GuessNum - Code Option Explicit Sub window_OnLoad() Randomize lblNum.innerText = Int(Rnd() * 10) End Sub Sub btnGuess_OnClick() If CInt(txtGuessNum.Value) = CInt(lblNum.innerText) Then lblResult.InnerText = "Correct" Else lblResult.InnerText = "Wrong, please try again" End If End Sub Generate Random Number between 0 and 9 Check user's answer against correct answer

6. Mark Dixon 6 Variables (why?) Variables useful for: –storing information you don't want user to see –reducing memory use –speed up execution –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 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 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 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 10 Variables: Numeric Data

11. Mark Dixon 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 12 Variables: String Data

13. Mark Dixon 13 Variables: String Manipulation

14. Mark Dixon 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 15 Example: GuessNum - Code Option Explicit Dim GuessNum Sub window_onLoad() Randomize GuessNum = Int(Rnd() * 10) 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 Create variable Put (Write) Random Number into variable Use (Read) variable

16. Mark Dixon 16 Example: Moon Orbit – Analysis SPECIFICATION User Requirements –need to keep children occupied/entertained, while learning about the moon's orbit Software Requirements –Functional: –Orbit of moon around earth should be animated –Children should be able to control speed and direction –Non-functional should be easy and fun to use

17. Mark Dixon 17 Problem solving: Pseudo-code To solve problem –think about how you would solve it manually (without computer) –think of steps you would take Moon position –increase angle –move moon horizontal position vertical position Convert to code 1 2 3

18. Mark Dixon 18 Trigonometry: In general angle (ang) hypotenuse (H) opposite (O) = Sin(ang) * H adjacent (A) = Cos(ang) * H

19. Mark Dixon 19 Trigonometry: Moon Orbit Sin(ang) * 150 Cos(ang) * 150 angle (ang) 150

20. Mark Dixon 20 Trigonometry: Radians Radians used by computers instead of degrees: 180 deg (3.1 rad) 90 deg (1.55 rad) 0 or 360 deg (0 or 6.2 rad) (4.65 rad) 270 deg rad = (deg/180) * 3.1 π π/2

21. Mark Dixon 21 Example: Moon Orbit v1.0 Moon orbit Angle: Sub Window_OnLoad() imgEarth.style.posLeft = document.body.clientwidth / 2 imgMoon.style.posLeft = imgEarth.style.posLeft txtAngle.value = 0 End Sub Sub btnCalc_OnClick() imgMoon.Style.posLeft = imgEarth.style.posLeft + (Sin(txtAngle.value) * 150) imgMoon.Style.posTop = imgEarth.style.posTop + (Cos(txtAngle.value) * 150) End Sub 1 2 3

22. Mark Dixon 22 Example: Moon Orbit v1.1 Use: –setInterval change angle move moon’s horizontal move moon’s vertical

23. Mark Dixon 23 Example: Moon Orbit v1.1 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

24. Mark Dixon 24 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

25. Mark Dixon 25 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

26. Mark Dixon 26 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

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

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

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

30. Mark Dixon 30 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

31. Mark Dixon 31 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"

32. Mark Dixon 32 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

33. Mark Dixon 33 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

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

35. Mark Dixon 35 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

36. Mark Dixon 36 Variables: Scope (How)

37. Mark Dixon 37 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

38. Mark Dixon 38 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

39. Mark Dixon 39 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

40. Mark Dixon 40 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

41. Mark Dixon 41 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

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

43. Mark Dixon 43 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.

44. Mark Dixon 44 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.

45. Mark Dixon 45 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.