Download presentation
Presentation is loading. Please wait.
1
08 – Iterative Execution
2
In-class Test Results Score Student Number (max 50)
Classification is for guidance only Please feel free to come and discuss your results with me
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
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) sqr(b)
5
Session Aims & Objectives
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)
6
Example: Hello v0 1 user click: 1 Hello (1 line of code) <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>
7
Example: Hello v1 1 user click: 10 Hellos (10 lines of code)
Lots of lines imagine 300 Hellos <script language=vbscript> Option Explicit Sub btnHello_OnClick() lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" End Sub </script>
8
Example: Hello v2 1 user click: 10 Hellos (4 lines of code)
<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>
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
10
Advantages Less code: This makes program: Easier to read
Easier to change (imagine 500 Hellos) Hello v1 Hello v2 Option Explicit Sub btnGo_OnClick() lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" End Sub Option Explicit Sub btnGo_OnClick() Dim h For h = 1 To 10 lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" Next End Sub 10 lines 4 lines
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 ang Dim 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 </script>
12
Example: Pendulum v2 56 lines of code <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
13
Example: Pendulum v3 45 lines of code <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
14
Example: Total Real Power of loops
using counter variable do something slightly different each time Example: Dim num Dim tot tot = 0 For num = 1 To tot = tot + num Next lblRes.InnerText = tot
15
Example: Total
16
Question: For … Next What does the following code produce: Dim counter
For counter = 1 To 10 lblNums.InnerText = lblNums.InnerText & counter Next Dim i For i = 24 To 8 Step -2 lblNums.InnerText = lblNums.InnerText & i & i * 2
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>
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>
19
Do ... Loop statement repeat code unknown number of times
more flexible than For slower than For Syntax: Do [{While|Until} condition] [statementblock] Loop
20
Example: Do … Loop Can do everything a For … Loop can: Dim I Dim i i = 1 Do While i <= 10 For i = 1 To lblN.InnerText = i picN.InnerText = i i = i + 1 Loop Next And more: Dim i i = 1 Do While i < lblN.innertext = i If (i / 2) = Int(i / 2) then i = i Else i = i End If Loop
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 num = 6 Do Until num > 4 num = num + 5
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.
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.
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.
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.
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.
Similar presentations
