Mark Dixon Page 1 08 – Variables
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Mark Dixon Page 1
08 – Variables
Mark Dixon Page 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){ txtTax.value = 0; }else{ txtTax.value = txtSalary.value * 0.20; }
true
0
Mark Dixon Page 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 Page 4
Example: Moon Orbit v1.0<html> <head><title>Moon orbit</title></head> <body style="background-color: Black;" onload="window_onLoad()"> <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="javascript"> function window_onLoad(){ imgMoon.style.posLeft = imgEarth.style.posLeft; imgMoon.style.posTop = imgEarth.style.posTop + 150; window.setInterval("MoonRotate()", 50); } function MoonRotate(){ txtAngle.value = parseFloat(txtAngle.value) + 0.025; imgMoon.style.posLeft = imgEarth.style.posLeft + (Math.sin(txtAngle.value) * 150); imgMoon.style.posTop = imgEarth.style.posTop + (Math.cos(txtAngle.value) * 150); }</script>
Mark Dixon Page 5
<html> <head><title>Moon orbit</title></head> <body style="background-color: Black;" onload="window_onLoad()"> <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="javascript"> function window_onLoad(){ imgMoon.style.posLeft = imgEarth.style.posLeft; imgMoon.style.posTop = imgEarth.style.posTop + 150; window.setInterval("MoonRotate()", 50); } function MoonRotate(){ txtAngle.value = parseFloat(txtAngle.value) + 0.025; imgMoon.style.posLeft = imgEarth.style.posLeft + (Math.sin(txtAngle.value) * 150); imgMoon.style.posTop = imgEarth.style.posTop + (Math.cos(txtAngle.value) * 150); }</script>
Problem: Intermediate Results
• Intermediate result (angle)stored in object property
(txtAngle.value)
– verbose
– visible
– takes lot of memory
Mark Dixon Page 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)
Mark Dixon Page 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 Page 8
Variable declaration (how)• Variables must be declared,
using the following syntax (grammar):
var identifier;
e.g. var weight; var x; var s; var year;
represents the name of the variable
Mark Dixon Page 9
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'
Mark Dixon Page 10
Variables: Numeric Data
Mark Dixon Page 11
num1 num2
Variables: Dry running
• list the values of variables as each line is run:
var num1;
var num2;
num1 = 8;
num2 = num1;
num1 = 3;
num2 = 2 + num1;
-8
88
83
53
--
--
Mark Dixon Page 12
Variables: String Data
Mark Dixon Page 13
Variables: String Manipulation
Mark Dixon Page 14
d f
var d;
var f;
f = 3;
d = f + 2;
d = d + 4;
Questions: Dry running
• Produce a dry run table for the following code:
3-
35
39
--
--
Mark Dixon Page 15
<html> <head><title>Moon orbit</title></head> <body style="background-color: Black;" onload="window_onLoad()" > <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="javascript">var ang;
function window_onLoad(){ imgMoon.style.posLeft = imgEarth.style.posLeft; imgMoon.style.posTop = imgEarth.style.posTop + 150; window.setInterval("MoonRotate()", 50); ang = 0; } function MoonRotate(){ ang = ang + 0.025; imgMoon.style.posLeft = imgEarth.style.posLeft + (Math.sin(ang) * 150); imgMoon.style.posTop = imgEarth.style.posTop + (Math.cos(ang) * 150); }</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 Page 16
Variables: Name redefined
<script language="javascript">
var x;var y;var x; x = 23; y = 10; 23 = x;</script>
• can't use same name again
Mark Dixon Page 17
Variables: Expected statement
<script language="javascript">Option Explicitvar xvar y
x = 23 y = 10 23 = x</script>
• destination can't be literal
Mark Dixon Page 18
Example: Moon Orbit v1.3
• How can we change the speed and direction of the moon?
Mark Dixon Page 19
Questions: Variable declaration
• Write a line of code that:
– Declares a variable called x
– Declares a variable called y
– Declares a variable called surname
var x;
var y;
var surname;
Mark Dixon Page 20
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";
Mark Dixon Page 21
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
x = x + 2.89;
z = z – y;
Miles = Km / 1.6;
Mark Dixon Page 22
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 Page 23
Example: GuessNum - Code<html> …</html>
<script language="javascript">var GuessNum
function window_onLoad(){ GuessNum = parseInt(Math.random() * 10); lblResult.innerText = GuessNum;}
function btnGuess_onClick(){ if(parseInt(txtGuessNum.value) == GuessNum){ lblResult.innerText = "Correct"; }else{ lblResult.innerText = "Wrong, please try again"; }}</script>
GenerateRandomNumberbetween 0 and 9
Temporary line(helps us test)
Mark Dixon Page 24
Variables: Errorsvar z;
function window_onClick(){var s;var x;var x; y = 5; z = 5;}
OK
OKOKOK Duplicate definition Variable not definedOK, as z is page level
Mark Dixon Page 25
Variable Scope (what)
• Scope – accessibility/visibility
– Local (declared within procedure)
– Page (general declarations)
Mark Dixon Page 26
Variable Scope (How)
• Page variables– general
declarations (top)
• Local variables:– in procedures
var mv;
function btnCalc_onClick(){var lv1; ...}
function btnAdd_onClick(){var lv2; ...}
Mark Dixon Page 27
Variables: Scope (How)
Mark Dixon Page 28
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 Page 29
Variable Scope Errors
• Spot the error in the following:
function btnCalc_onClick(){
var x;
x = 0;
lblTotal.innerText = "£" + x;
}
function btnQuit_onClick(){
x = 0;
lblTotal.innerText = "£" + x;
}
Variable not defined
Mark Dixon Page 30
Example: Ball Char (v2.5)<html> <head><title>Ball Char</title></head> <body style="background-color: Lime;" onload="window_onLoad()"> <img id="imgBall" src="BallChar.gif" style="position: absolute;" /> </body></html>
<script language="javascript"> function window_onLoad(){ window.setInterval("MoveBallRight()", 50); } function MoveBallRight(){ if ((imgBall.style.posLeft + 5 + imgBall.width) < (document.body.clientWidth)){ imgBall.style.posLeft = imgBall.style.posLeft + 5; }else{ window.setInterval("MoveBallLeft()", 50); } } function MoveBallLeft(){ if ((imgBall.style.posLeft - 5) > 0){ imgBall.style.posLeft = imgBall.style.posLeft – 5; }else{ window.setInterval("MoveBallRight()", 50); } }</script>
Mark Dixon Page 31
Example: Ball Char (v3)<html> <head><title></title></head> <body style="margin-left: 0" onload="window_onLoad()"> <img id="imgBall" src="BALLCHAR.gif" style="position: absolute" /> </body></html>
<script language="javascript">var hInc;
function window_onLoad(){ window.setInterval("BallMove()", 50); hInc = 5; } function BallMove(){ var nxt; nxt = imgBall.style.posLeft + hInc; if (nxt >= 0 && nxt + imgBall.width <= document.body.clientWidth){ imgBall.style.posLeft = nxt; }else{ hInc = -hInc; } }</script>
Using variables: shorter code invisible to user less memory faster execution
page variable
local variable
Mark Dixon Page 32
Question: Variable Scope• Will this compile?
var v;var x; … function window_onLoad(){ var z; x = 23; y = "there"; z = 12; }
function btnTest_onClick(){ var y; y = "hello"; x = 67; z = 53; }
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 Page 33
Variable Names
• Variables in same scope cannot have same name:
Mark Dixon Page 34
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.
Mark Dixon Page 35
Tutorial Exercises: Guess Num• LEARNING OBJECTIVE:
use constants and 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 and the 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 Page 36
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.
Related Documents
