1. Mark Dixon 1 07 – 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 Sub window_onLoad() Randomize parNum.innerText = Int(Rnd() * 10) End Sub Sub btnGuess_onClick() If CInt(txtGuessNum.Value) = CInt(parNum.innerText) Then parResult.InnerText = "Correct" Else parResult.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 Questions: Variable declaration Write a line of code that: –Declares a variable called a –Declares a variable called y –Declares a variable called surname Dim a Dim y Dim surname

10. Mark Dixon 10 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'

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

12. Mark Dixon 12 Variables: Numeric Data

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

14. Mark Dixon 14 Variables: String Data

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

16. Mark Dixon 16 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 parResult.innerText = "Correct" Else parResult.innerText = "Wrong, please try again" End If End Sub Create variable Put (Write) Random Number into variable Use (Read) variable

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

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

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

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

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

22. Mark Dixon 22 Example: Moon Orbit v1.0 Moon orbit Angle: Sub window_onLoad() txtAngle.value = 0 imgE.style.posLeft = document.body.clientwidth / 2 imgM.style.posLeft = imgE.style.posLeft End Sub Sub btnCalc_onClick() imgM.style.posLeft = imgE.style.posLeft + (Sin(txtAngle.value) * 150) imgM.style.posTop = imgE.style.posTop + (Cos(txtAngle.value) * 150) End Sub 1 2 3

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

24. Mark Dixon 24 Example: Moon Orbit v1.1 Moon orbit Sub window_onLoad() txtAngle.value = 0 imgM.style.posLeft = imgE.style.posLeft imgM.style.posTop = imgE.style.posTop + 150 window.setInterval "MoonRotate()", 50 End Sub Sub MoonRotate () txtAngle.value = txtAngle.value + 0.025 imgM.style.posLeft = imgE.style.posLeft + (Sin(txtAngle.value) * 150) imgM.style.posTop = imgE.style.posTop + (Cos(txtAngle.value) * 150) End Sub

25. Mark Dixon 25 Moon orbit Sub window_onLoad() txtAngle.value = 0 imgM.style.posLeft = imgE.style.posLeft imgM.style.posTop = imgE.style.posTop + 150 window.setInterval "MoonRotate()", 50 End Sub Sub MoonRotate() txtAngle.value = txtAngle.value + 0.025 imgM.style.posLeft = imgE.style.posLeft + (Sin( txtAngle.value ) * 150) imgM.style.posTop = imgE.style.posTop + (Cos( txtAngle.value ) * 150) End Sub Problem: Intermediate Results Intermediate result stored in object (txtAngle.value) –slow –verbose –visible –takes lot of memory

26. Mark Dixon 26 Moon orbit Option Explicit Dim ang Sub window_onLoad() ang = 0 imgM.style.posLeft = imgE.style.posLeft imgM.style.posTop = imgE.style.posTop + 150 window.setInterval "MoonRotate()", 50 End Sub Sub MoonRotate() ang = ang + 0.025 imgM.style.posLeft = imgE.style.posLeft + (Sin( ang ) * 150) imgM.style.posTop = imgE.style.posTop + (Cos( ang ) * 150) End Sub Solution: Variables Declaration of Variable Use of Variable shorter code invisible to user memory efficient faster execution initial value change value

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

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

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

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

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

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

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

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

35. Mark Dixon 35 Variables: Scope (How)

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

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

38. Mark Dixon 38 Example: Ball Char (v2.5) Ball Char Sub window_onLoad() window.setInterval "MoveBall()", 50 End Sub Sub MoveBall() If (picBall.style.posLeft + picBall.width + txtSpeed.value) <= document.body.clientwidth Then picBall.style.posLeft = picBall.style.posLeft + txtSpeed.value Else txtSpeed.value = -txtSpeed.value End If End Sub previous solution:  Uses text box – slow, visible

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

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

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

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

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

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