1. Mark Dixon, SoCCE SOFT 131Page 1 05 – Constants and Variables

2. Mark Dixon, SoCCE SOFT 131Page 2 Admin: Test (next week) In class test –teaching week 6 (university week 14) 50 mins multiple choice/short answer (5 - 6 words max) 25% of coursework mark

3. Mark Dixon, SoCCE SOFT 131Page 3 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

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

5. Mark Dixon, SoCCE SOFT 131Page 5 Absolute Positioning change properties – change position picBall.style.pixeltop picBall.style.pixelleftpicBall.width picBall.height document.body.clientwidth

6. Mark Dixon, SoCCE SOFT 131Page 6 Example: Space v1 Space Explorer Sub window_OnLoad() Randomize imgAstr.style.pixeltop = 100 End Sub Sub btnRand_OnClick() imgAstr.style.pixelleft = Rnd() * 300 End Sub Shuffles random number generator Picks random number between 0 and 1

7. Mark Dixon, SoCCE SOFT 131Page 7 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

8. Mark Dixon, SoCCE SOFT 131Page 8 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

9. Mark Dixon, SoCCE SOFT 131Page 9 Trigonometry: Triangles 150 Sin(ang) * H Cos(ang) * H angle (ang) hypotenuse (H) opposite (O) adjacent (A)

10. Mark Dixon, SoCCE SOFT 131Page 10 Example: Moon Orbit v1 Moon orbit Sub Window_OnLoad() imgMoon.Style.PixelLeft = imgEarth.style.pixelleft imgMoon.Style.PixelTop = imgEarth.style.pixeltop + 150 window.SetInterval "MoonRotate", 50 End Sub Sub MoonRotate() parAngle.InnerText = parAngle.InnerText + 0.025 imgMoon.Style.PixelLeft = imgEarth.style.PixelLeft + (Sin(parAngle.InnerText) * 150) imgMoon.Style.PixelTop = imgEarth.style.PixelTop + (Cos(parAngle.InnerText) * 150) End Sub 0 1 2 3

11. Mark Dixon, SoCCE SOFT 131Page 11 Problem: Magic Numbers Some numbers represent the same thing –e.g. the orbit Moon orbit Sub Window_OnLoad() imgMoon.Style.PixelLeft = imgEarth.style.pixelleft imgMoon.Style.PixelTop = imgEarth.style.pixeltop + 150 window.SetInterval "MoonRotate", 50 End Sub Sub MoonRotate() parAngle.InnerText = parAngle.InnerText + 0.025 imgMoon.Style.PixelLeft = imgEarth.style.PixelLeft + (Sin(parAngle.InnerText) * 150 ) imgMoon.Style.PixelTop = imgEarth.style.PixelTop + (Cos(parAngle.InnerText) * 150 ) End Sub 0 changes –take time –could make mistake

12. Mark Dixon, SoCCE SOFT 131Page 12 name used to represent literal value Const name = expression example: Const last = 5 useful for removing 'magic numbers' value can’t be changed last = 7 Constants (what and how)

13. Mark Dixon, SoCCE SOFT 131Page 13 Example: Moon Orbit v1.1 Moon orbit Const orbit = 150 Sub Window_OnLoad() imgMoon.Style.PixelLeft = imgEarth.style.pixelleft imgMoon.Style.PixelTop = imgEarth.style.pixeltop + orbit window.SetInterval "MoonRotate", 50 End Sub Sub MoonRotate() parAngle.InnerText = parAngle.InnerText + 0.025 imgMoon.Style.PixelLeft = imgEarth.style.PixelLeft + (Sin(parAngle.InnerText) * orbit ) imgMoon.Style.PixelTop = imgEarth.style.PixelTop + (Cos(parAngle.InnerText) * orbit ) End Sub 0 only need to change constant declaration Declaration of Constant Use of Constant quicker fewer mistakes meaningful

14. Mark Dixon, SoCCE SOFT 131Page 14 Constants: missing = Errors with Constants Const hi = 4 Const low parC.InnerText = "Hello" parC.InnerText = 23 parC.InnerText = hi hi = 6 must give constant a value

15. Mark Dixon, SoCCE SOFT 131Page 15 Errors with Constants Const hi = 4 Const low = 1 parC.InnerText = "Hello" parC.InnerText = 23 parC.InnerText = hi hi = 6 Constants: Illegal assignment cannot change value of constant

16. Mark Dixon, SoCCE SOFT 131Page 16 Questions: Constants Consider the following code: Const Lives = 5 Const Players Lives = 7 document.title = Lives How many constants are in it? Which lines are OK? Write a line of code that declares a constant for pi (3.141592) 2 first and last Const pi = 3.141592

17. Mark Dixon, SoCCE SOFT 131Page 17 Moon orbit Const orbit = 150 Sub Window_OnLoad() imgMoon.Style.PixelLeft = imgEarth.style.pixelleft imgMoon.Style.PixelTop = imgEarth.style.pixeltop + orbit window.SetInterval "MoonRotate", 50 End Sub Sub MoonRotate() parAngle.InnerText = parAngle.InnerText + 0.025 imgMoon.Style.PixelLeft = imgEarth.style.PixelLeft + (Sin( parAngle.InnerText ) * orbit) imgMoon.Style.PixelTop = imgEarth.style.PixelTop + (Cos( parAngle.InnerText ) * orbit) End Sub 0 Problem: Intermediate Results Intermediate result (angle) stored in object property (parAngle.InnerText) –verbose –visible –takes lot of memory

18. Mark Dixon, SoCCE SOFT 131Page 18 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)

19. Mark Dixon, SoCCE SOFT 131Page 19 Variables (what) Variables have –Identifier (name) – you choose this, used to refer to (reference) variable –Value – you set/change this 23x Name/Identifier ValueMemory

20. Mark Dixon, SoCCE SOFT 131Page 20 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

21. Mark Dixon, SoCCE SOFT 131Page 21 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)

22. Mark Dixon, SoCCE SOFT 131Page 22 Variables: Numeric Data

23. Mark Dixon, SoCCE SOFT 131Page 23 Variables: String Data

24. Mark Dixon, SoCCE SOFT 131Page 24 Moon orbit Const orbit = 150 Dim ang Sub Window_OnLoad() imgMoon.Style.PixelLeft = imgEarth.style.pixelleft imgMoon.Style.PixelTop = imgEarth.style.pixeltop + orbit window.SetInterval "MoonRotate", 50 ang = 0 End Sub Sub MoonRotate() ang = ang + 0.025 imgMoon.Style.PixelLeft = imgEarth.style.PixelLeft + (Sin( ang ) * orbit) imgMoon.Style.PixelTop = imgEarth.style.PixelTop + (Cos( ang ) * orbit) 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

25. Mark Dixon, SoCCE SOFT 131Page 25 Example: Moon Orbit v1.3 How can we change the speed and direction of the moon?

26. Mark Dixon, SoCCE SOFT 131Page 26 Option Explicit 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, SoCCE SOFT 131Page 27 Questions: Variable declaration Write a line of code that: –Declares a variable called x –Declares a variable called y –Declares a variable called surname –Declares a variable called age Dim x Dim y Dim surname Dim age

28. Mark Dixon, SoCCE SOFT 131Page 28 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"

29. Mark Dixon, SoCCE SOFT 131Page 29 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 –Joins two strings Surname and Forenames together, putting the result in LongName x = x + 2.89 z = z - y Miles = Km / 1.6 LongName = Surname & Forenames

30. Mark Dixon, SoCCE SOFT 131Page 30 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

31. Mark Dixon, SoCCE SOFT 131Page 31 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 I am thinking of a number between 0 and 10 Please guess the number Generate Random Number between 0 and 10 Temporary line (helps us test)

32. Mark Dixon, SoCCE SOFT 131Page 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, SoCCE SOFT 131Page 33 Variable Scope (what) Scope – accessibility/visibility –Local (declared within procedure) –Page (general declarations)

34. Mark Dixon, SoCCE SOFT 131Page 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, SoCCE SOFT 131Page 35 Variables: Scope (How)

36. Mark Dixon, SoCCE SOFT 131Page 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, SoCCE SOFT 131Page 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, SoCCE SOFT 131Page 38 Example: Ball Char (v2.5) Test Sub Window_OnLoad() Window. SetInterval "MoveBallRight", 50 End Sub Sub MoveBallRight () If (picBall.hspace + 5) < (document.body.clientwidth - picBall.Width) Then picBall.hspace = picBall.hspace + 5 Else Window. SetInterval "MoveBallLeft", 50 End If End Sub Sub MoveBallLeft () If (picBall.hspace) > 0 Then picBall.hspace = picBall.hspace - 5 Else Window. SetInterval "MoveBallRight", 50 End If End Sub

39. Mark Dixon, SoCCE SOFT 131Page 39 Example: Ball Char (v3) Dim hInc Sub window_OnLoad() window.setInterval "BallMove", 50 hInc = 5 End Sub Sub BallMove() Dim nxt nxt = imgBall.style.pixelleft + hInc If nxt >= 0 And nxt + imgBall.width =< document.body.clientwidth Then imgBall.style.pixelleft = nxt Else hInc = -hInc End If End Sub Using variables: shorter code invisible to user memory efficient faster execution page variable local variable

40. Mark Dixon, SoCCE SOFT 131Page 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, SoCCE SOFT 131Page 41 Tutorial Exercises: Space LEARNING OBJECTIVE: use properties to perform change position of objects Task 1: Get Space example working. The code is provided on the slides. Task 2: Add an image of a spacecraft to your page. The image is in the web-site's resources. Task 3: Add a button that positions the spacecraft at the bottom of the screen. Task 4: Add a button that positions the spacecraft to the left of the asteroid. Task 5: Add a button that positions the spacecraft on the right of the asteroid.

42. Mark Dixon, SoCCE SOFT 131Page 42 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.

43. Mark Dixon, SoCCE SOFT 131Page 43 Tutorial Exercises: Guess Num LEARNING OBJECTIVE: use constants and variables to simplify and make code more dynamic Task 1: Get GuessNum example working. 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, SoCCE SOFT 131Page 44 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.