1 / 37

08 – Variables

08 – Variables. Questions: Conditional Execution. What is the result of (txtFah.value is 50): (txtFah.value >= 40)

thiery
Download Presentation

08 – Variables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 08 – Variables

  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. 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. Example: Moon Orbit v1 <html> <head><title>Moon orbit</title></head> <body style="background-color: Black;"> <input id="txtAngle" type="text" value="0" /> <img id="imgEarth" style="position: absolute; left: 200; top: 200;" src="Earth.gif" /> <img id="imgMoon" style="position: absolute;" src="Moon.gif" /> </body> </html> <script language="vbscript"> 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 </script>

  5. Problem: Intermediate Results <html> <head><title>Moon orbit</title></head> <body style="background-color: Black;"> <input id="txtAngle" type="text" value="0" /> <img id="imgEarth" style="position: absolute; left: 200; top: 200;" src="Earth.gif" /> <img id="imgMoon" style="position: absolute;" src="Moon.gif" /> </body> </html> <script language="vbscript"> 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 </script> • Intermediate result (angle)stored in object property(txtAngle.value) • visible • takes lot of memory • verbose

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

  8. Variable declaration (how) represents the name of the variable • Variables must be declared, using the following syntax (grammar):Dimidentifiere.g. Dim weight Dim x Dim s Dim year

  9. Variable assignment (how) • Variables are assigned values,using the following syntax:identifier=expressione.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. Variables: Numeric Data

  11. Variables: Dry running • list the values of variables as each line is run: - - - - 8 - 8 8 3 8 3 5

  12. Variables: String Data

  13. Variables: String Manipulation

  14. Questions: Dry running • Produce a dry run table for the following code: - - - - - 3 5 3 9 3

  15. Example: Moon Orbit v1.2 Declarationof Variable initial value change value Use ofVariable <html> <head><title>Moon orbit</title></head> <body style="background-color: Black;"> <img id="imgEarth" style="position: absolute; left: 200; top: 200;" src="Earth.gif" /> <img id="imgMoon" style="position: absolute;" src="Moon.gif" /> </body> </html> <script language="vbscript"> 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 </script> • shorter code • invisible to user • memory efficient • faster execution

  16. Option Explicit: Variable undefined • Must be first line of script • Useful to force explicit variable declaration: • Undeclared variables produce error message: <script language="vbscript"> Option Explicit Dim length length = 6 age = 5 </script>

  17. Variables: Name redefined <script language="vbscript"> Option Explicit Dim x Dim y Dim x x = 23 y = 10 23 = x </script> • can't use same name again

  18. Variables: Expected statement <script language="vbscript"> Option Explicit Dim x Dim y x = 23 y = 10 23 = x </script> • destination can't be literal

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

  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. 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. 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. 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-functionalshould be easy and fun to use

  24. Example: GuessNum - Code GenerateRandomNumber between 0 and 9 <script language="vbscript"> 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 </script> Temporary line(helps us test)

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

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

  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. Variables: Scope (How)

  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. Variable Scope Errors Variable not defined error • 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

  31. Example: Ball Char (v2.5) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"> <img id="imgBall" src="BallChar.gif" style="position: absolute;" /> </body> </html> <script language="vbscript"> 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 </script> previous solution: multiple timers erratic behaviour

  32. Example: Ball Char (v3) local variable page variable <html> <head><title></title></head> <body style="margin-left: 0"> <img id="imgBall" src="BALLCHAR.gif" style="position: absolute" /> </body> </html> <script language="vbscript"> 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 </script> Using variables: • shorter code • invisible to user • less memory • faster execution

  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? Yes No Yes Yes Is y in scope? Is x in scope? Is z in scope? Yes No

  34. Variable Names • Variables in same scope cannot have same name:

  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. 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. 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.

More Related