08 – iterative execution
DESCRIPTION
08 – Iterative Execution. In-class Test Results. Score (max 50). Student Number. Classification is for guidance only. Please feel free to come and discuss your results with me. Coursework 1 (Test) - Debrief. Range of marks normal Failure rate quite low – 6% (2 / 32) - PowerPoint PPT PresentationTRANSCRIPT
Mark Dixon Page 1
08 – Iterative Execution
Mark Dixon Page 2
In-class Test Results
StudentNumber
Score(max 50)
Classification is for guidance only
Please feel free to come and discuss your results with me
10065460 28.0 10109341 43.510122580 24.5 10011000 27.0 10122535 34.3 10114612 41.510119942 24.0 10082072 26.5 10057087 34.0 10122501 38.5
746148 23.8 10120334 26.5 10114469 32.0 10128451 38.510110960 23.5 10113197 26.3 10121467 31.0 10127684 38.010116035 23.3 728743 26.0 10124248 31.0 10085580 37.8
10114154 19.0 10123810 23.0 10130390 25.8 10091069 30.5 10100576 36.510013970 12.5 10104875 21.0 10108138 25.8 10117034 30.0 274855 35.0
<40% (fail) <50% (3) <60% (2:2) <70% (2:1) >=70% (1)
Mark Dixon Page 3
Coursework 1 (Test) - Debrief• Range of marks normal
• Failure rate quite low – 6% (2 / 32)– recoverable if corrective action is taken
• Please feel free to discuss marks in tutorial
Mark Dixon Page 4
Coursework 1 (Test) – Problems• Answer question: Name an example of:
– a variable: x Dim x
– a conditional expression: x > 4 If x > 4 Then
– an event handler procedure: btnCalc_onclick Sub btnCalc_onclick()
• Parameters – data given to functions: x = Int(34.56) + 34.56 + sqr(b)
Mark Dixon Page 5
Session Aims & Objectives• Aims
– To introduce the main concepts involved in getting the machine to perform repetitive tasks.
• Objectives,by end of this week’s sessions, you should be able to:
– To be able to implement code that does repetitive tasks, using looping structures:
• known limits (for loop)• unknown limits (do loop)
Mark Dixon Page 6
Example: Hello v0
<html> <head><title>Hello</title></head> <body> <input id=btnHello type=button value=Hello /> <p id=lblHello></p> </body></html>
<script language=vbscript>Option Explicit Sub btnHello_OnClick() lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" End Sub</script>
• 1 user click: 1 Hello (1 line of code)
Mark Dixon Page 7
Example: Hello v1
<script language=vbscript>Option Explicit
Sub btnHello_OnClick() lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" End Sub</script>
• 1 user click: 10 Hellos (10 lines of code)Lots of lines
imagine 300 Hellos
Mark Dixon Page 8
Example: Hello v2
<script language=vbscript>Option Explicit
Sub btnHello_OnClick() Dim h For h = 1 to 10 lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" Next End Sub</script>
• 1 user click: 10 Hellos (4 lines of code)
Mark Dixon Page 9
For ... Next statement• repeat code known number of times
– reduces length of code
– easier to change
• Syntax:
For variable = start To end statementblock Next
Mark Dixon Page 10
Advantages• Less code:
• This makes program:– Easier to read– Easier to change (imagine 500 Hellos)
Option Explicit
Sub btnGo_OnClick()Dim h For h = 1 To 10 lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" NextEnd Sub
Option Explicit
Sub btnGo_OnClick()lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"lblHello.innerHTML = lblHello.innerHTML & "Hello<br>"End Sub
Hello v1 Hello v2
10lines
4 lines
Mark Dixon Page 11
Example: Pendulum v1<html> <head><title>Pendulum</title></head> <body style="margin: 0;"> <img id="imgMid" src="Dot.gif" style="position: absolute;" /> <img id="imgPend" src="Pend.gif" style="position: absolute;" /> </body></html>
<script language="vbscript">Dim angDim speed
Sub window_onload() imgMid.style.pixelLeft = document.body.clientWidth / 2 imgMid.style.pixelTop = document.body.clientHeight / 3 window.setInterval "Swing()", 25 ang = 0 speed = 0.04 End Sub
Sub Swing() ang = ang + speed If ang > 0.5 Or ang < -0.5 Then speed = -speed End If imgPend.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 150 imgPend.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 150 End Sub</script>
Mark Dixon Page 12
Example: Pendulum v2 <body style="margin: 0;"> <img id="imgMid" src="Dot.gif" style="position: absolute;" /> <img id="imgArm1" src="Dot.gif" style="position: absolute;" /> <img id="imgArm2" src="Dot.gif" style="position: absolute;" /> <img id="imgArm3" src="Dot.gif" style="position: absolute;" /> <img id="imgArm4" src="Dot.gif" style="position: absolute;" /> <img id="imgArm5" src="Dot.gif" style="position: absolute;" /> <img id="imgArm6" src="Dot.gif" style="position: absolute;" /> <img id="imgArm7" src="Dot.gif" style="position: absolute;" /> <img id="imgArm8" src="Dot.gif" style="position: absolute;" /> <img id="imgArm9" src="Dot.gif" style="position: absolute;" /> <img id="imgPend" src="Pend.gif" style="position: absolute;" /> </body>
… Sub Swing() ang = ang + speed If ang > 0.5 Or ang < -0.5 Then speed = -speed End If imgPend.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 150 imgPend.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 150 imgArm1.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 15 imgArm1.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 15 imgArm2.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 30 imgArm2.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 30 imgArm3.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 45 imgArm3.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 45 imgArm4.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 60 imgArm4.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 60 imgArm5.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 75 imgArm5.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 75 imgArm6.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 90 imgArm6.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 90 imgArm7.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 105 imgArm7.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 105 imgArm8.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 120 imgArm8.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 120 imgArm9.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 135 imgArm9.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 135 End Sub</script>
56 lines of code
Mark Dixon Page 13
Example: Pendulum v3 <body style="margin: 0;"> <img id="imgMid" src="Dot.gif" style="position: absolute;" /> <img id="imgArm1" src="Dot.gif" style="position: absolute;" /> <img id="imgArm2" src="Dot.gif" style="position: absolute;" /> <img id="imgArm3" src="Dot.gif" style="position: absolute;" /> <img id="imgArm4" src="Dot.gif" style="position: absolute;" /> <img id="imgArm5" src="Dot.gif" style="position: absolute;" /> <img id="imgArm6" src="Dot.gif" style="position: absolute;" /> <img id="imgArm7" src="Dot.gif" style="position: absolute;" /> <img id="imgArm8" src="Dot.gif" style="position: absolute;" /> <img id="imgArm9" src="Dot.gif" style="position: absolute;" /> <img id="imgPend" src="Pend.gif" style="position: absolute;" /> </body>
… Sub Swing() Dim a Dim arm ang = ang + speed If ang > 0.5 Or ang < -0.5 Then speed = -speed End If imgPend.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 150 imgPend.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 150 For a = 1 To 9 Set arm = document.getElementById("imgArm" & a) arm.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * (a * 15) arm.style.pixelTop = imgMid.style.pixelTop + cos(ang) * (a * 15) Next End Sub</script>
45 lines of code
Mark Dixon Page 14
• Real Power of loops– using counter variable
– do something slightly different each time
• Example: Dim numDim tottot = 0For num = 1 To 5 tot = tot + numNextlblRes.InnerText = tot
Example: Total
Mark Dixon Page 15
Example: Total
Mark Dixon Page 16
Question: For … Next• What does the following code produce:
Dim counter For counter = 1 To 10 lblNums.InnerText = lblNums.InnerText & counter Next
• What does the following code produce:Dim i For i = 24 To 8 Step -2 lblNums.InnerText = lblNums.InnerText & i & i * 2 Next
Mark Dixon Page 17
Example: Letter Count <script language=vbscript> Option Explicit
Sub btnCount_OnClick() Dim pos Dim count Dim char count = 0 For pos = 1 To Len(txtWords.value) char = Mid(txtWords.value, pos, 1) If char = "e" Then count = count + 1 End If Next lblCount.innerText = count End Sub</script>
Mark Dixon Page 18
Example: Shades<script language="vbscript">Option Explicit
Sub btnShow_OnClick() Const stTag = "<span style=""background: #" Dim h, p, msg, red msg = txtMsg.value h = "" red = 255 For p = 1 To Len(msg) h = h + stTag + Hex(red) + "0000"">" h = h + Mid(msg, p, 1) h = h + "</span>" red = red - 5 Next divTones.innerHTML = h End Sub</script>
Mark Dixon Page 19
Do ... Loop statement
• repeat code unknown number of times– more flexible than For
– slower than For
• Syntax:Do [{While|Until} condition] [statementblock]Loop
Mark Dixon Page 20
Example: Do … Loop• Can do everything a For … Loop can:
Dim I Dim ii = 1Do While i <= 10 For i = 1 To 10 lblN.InnerText = i picN.InnerText =
i i = i + 1Loop Next
• And more:Dim ii = 1Do While i < 10 lblN.innertext = i If (i / 2) = Int(i / 2) then i = i + 1 Else i = i + 3 End If Loop
Mark Dixon Page 21
Question: Do … Loop• What does the following produce:Dim num num = 20 Do While num > -12 lblDo.InnerText = lblDo.InnerText & num num = num - 1.5 Loop
• What does the following produce:Dim num num = 6 Do Until num > 4 num = num + 5 lblDo.InnerText = lblDo.InnerText & num Loop
Mark Dixon Page 22
Tutorial Exercise: Hello• Task 1: Get the Hello Example (from the
lecture) working.
• Task 2: Modify your page so that it uses a variable to temporarily build to html.
• Task 3: Modify your page so that the user can control how many 'Hellos' appear.
Mark Dixon Page 23
Tutorial Exercise: Pendulum• Task 1: Get the Pendulum examples (1 to 3)
working.
• Task 2: Increase the number of dots for the arm.
• Task 3: Modify your code so that the arm and pendulum are centred correctly. hint: deduct half the width of the image.
Mark Dixon Page 24
Tutorial Exercise: Letter Count• Task 1: Get the Letter Count Example (from
the lecture) working.• Task 2: Modify your Letter Count page, so
that the user can control which letter is counted.Hint: You will need a text box for the user to type a letter into.
• Task 3: Modify your Letter Count program, so that the user cannot type more than one letter in the letter text box.Hint: Use the text box’s change event, and the len function.
Mark Dixon Page 25
Tutorial Exercise: Vowel Count• Task 1: Create a new page that counts the
number of vowels (a, e, i, o, u) in a piece of text. Hint: similar to the letter count example.
Mark Dixon Page 26
Tutorial Exercise: Shades• Task 1: Get the shades example from the
lecture working.
• Task 2: Modify the page so that it puts a space in between each letter.
• Task 3: Change the program so that it uses shades of another colour instead.
• Task 4: Create a new page that selects random shades of your selected colour. Hint: use the Rnd function.