08 – Variables

Mark Dixon

08 – Variables

Mark Dixon

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

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

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>

Mark Dixon

<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

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)

Mark Dixon

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

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

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

Variables: Numeric Data

Mark Dixon

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

Variables: String Data

Mark Dixon

Variables: String Manipulation

Mark Dixon

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

<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

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

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

Variables: Expected statement

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

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

• destination can't be literal

Mark Dixon

Example: Moon Orbit v1.3

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

Mark Dixon

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

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

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

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

Example: GuessNum - Code<script language="vbscript">Option ExplicitDim GuessNum

Sub window_onLoad() Randomize GuessNum = Int(Rnd() * 10) lblResult.innerText = GuessNumEnd Sub

Sub btnGuess_onClick() If CInt(txtGuessNum.value) = GuessNum Then lblResult.innerText = "Correct" Else lblResult.innerText = "Wrong, please try again" End IfEnd Sub</script>

GenerateRandomNumberbetween 0 and 9

Temporary line(helps us test)

Mark Dixon

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

Variable Scope (what)

• Scope – accessibility/visibility

– Local (declared within procedure)

– Page (general declarations)

Mark Dixon

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

Variables: Scope (How)

Mark Dixon

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

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

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

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

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

Variable Names

• Variables in same scope cannot have same name:

Mark Dixon

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

Tutorial Exercises: Guess Num• LEARNING OBJECTIVE:


• 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

Tutorial Exercises: Ball Char• LEARNING OBJECTIVE:


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

08 – Variables

Documents

Transcript of 08 – Variables