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

Mark Dixon 1

08 – Variables

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

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

Mark Dixon 4

Example: GuessNum – AnalysisSPECIFICATION

• 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

Mark Dixon 5

Example: GuessNum - Code<script language="vbscript">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 IfEnd Sub</script>

GenerateRandomNumberbetween 0 and 9

Check user's answeragainst correct answer

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)

Mark Dixon 7

Variables (what)• Variables have

– Identifier (name) – you choose this, used to refer to (reference) variable

– Value – you set/change this

23xName/Identifier

Value Memory

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

Mark Dixon 9

Variable assignment (how)• Variables are assigned values,

using the following syntax:

identifier = expression

e.g. x = 5 weight = 109.45name = "Bob" s = "Hello "

Note: the data flows backwards (from right to left) read the = as 'becomes equal to'

Mark Dixon 10

Variables: Numeric Data

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

--

--

num1 num2

Mark Dixon 12

Variables: String Data

Mark Dixon 13

Variables: String Manipulation

Mark Dixon 14

Dim d

Dim f

f = 3

d = f + 2

d = d + 4

d f

Questions: Dry running

• Produce a dry run table for the following code:

3-

35

39

--

--

Mark Dixon 15

Example: GuessNum - Code<script language="vbscript">Option ExplicitDim 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 IfEnd Sub</script>

Create variable

Put (Write)RandomNumberinto variable

Use (Read) variable

Mark Dixon 16

Example: Moon Orbit – AnalysisSPECIFICATION

• 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

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

Mark Dixon 18

Trigonometry: In general

angle (ang)

hypotenuse (H)

opposite (O) = Sin(ang) * H

adjacent (A) = Cos(ang) * H

Mark Dixon 19

Trigonometry: Moon Orbit

Sin(ang) * 150

Cos(ang) * 150

angle (ang)

150

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

Mark Dixon 21

Example: Moon Orbit v1.0<html> <head><title>Moon orbit</title></head> <body style="background-color: Black;"> <p> Angle: <input id="txtAngle" type="text" value="10" /> <input id="btnMinus" type="button" value="-" /> <input id="btnCalc" type="button" value="Calc" /> <input id="btnPlus" type="button" value="+" /> <img id="imgEarth" style="position: absolute" src="Earth.gif" /> <img id="imgMoon" style="position: absolute" src="Moon.gif" /> </p> </body></html>

<script language="vbscript"> 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</script>

1

23

Mark Dixon 22

Example: Moon Orbit v1.1• Use:

– setInterval• change angle• move moon’s horizontal• move moon’s vertical

Mark Dixon 23

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

Mark Dixon 24

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

Problem: Intermediate Results

• Intermediate result (angle)stored in object property

(txtAngle.value)

– verbose

– visible

– takes lot of memory

Mark Dixon 25

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

Example: Moon Orbit v1.2

Declarationof Variable

Use ofVariable

shorter code invisible to user memory efficient faster execution

initial value

change value

Mark Dixon 26

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 ExplicitDim length length = 6 age = 5</script>

Mark Dixon 27

Variables: Name redefined

<script language="vbscript">Option ExplicitDim xDim yDim x x = 23 y = 10 23 = x</script>

• can't use same name again

Mark Dixon 28

Variables: Expected statement

<script language="vbscript">Option ExplicitDim xDim y

x = 23 y = 10 23 = x</script>

• destination can't be literal

Mark Dixon 29

Example: Moon Orbit v1.3

• How can we change the speed and direction of the moon?

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

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"

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

Mark Dixon 33

Variables: ErrorsOption ExplicitDim z

Sub window_onClick()Dim sDim xDim x y = 5 z = 5End Sub

OK, explicit variable declarationOK

OKOKOK Duplicate definition error. Variable not defined error.OK, as z is page level

Mark Dixon 34

Variable Scope (what)

• Scope – accessibility/visibility

– Local (declared within procedure)

– Page (general declarations)

Mark Dixon 35

Variable Scope (How)

• Page variables– general

declarations (top)

• Local variables:– in procedures

Option ExplicitDim mv

Sub btnCalc_onClick()Dim lv1 ...End Sub

Sub btnAdd_onClick()Dim lv2 ...End Sub

Mark Dixon 36

Variables: Scope (How)

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

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

Mark Dixon 39

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

Mark Dixon 40

Example: Ball Char (v3)<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

page variable

local variable

Mark Dixon 41

Question: Variable Scope• Will this compile?

Option ExplicitDim vDim 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?

YesNoYes

YesYesNo

Mark Dixon 42

Variable Names

• Variables in same scope cannot have same name:

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.

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.

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.