1 / 25

07 – Iterative Execution

07 – Iterative Execution. 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: identify and correct errors in For loops

velma
Download Presentation

07 – Iterative Execution

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 07 – Iterative Execution

  2. 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: • identify and correct errors in For loops • create a For loop to repeat code a known number of times • identify and correct errors in Do loops • create a Do loop to repeat code an unknown number of times

  3. 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="parHello"></p> </body> </html> <script language="vbscript"> Option Explicit Sub btnHello_OnClick() parHello.innerHTML = parHello.innerHTML & "Hello<br>" End Sub </script>

  4. 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() parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" End Sub </script>

  5. 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 parHello.innerHTML = parHello.innerHTML & "Hello<br>" Next End Sub </script>

  6. For ... Next statement • repeat code known number of times • reduces length of code • easier to change • Syntax:Forvariable=startToendstatementblockNext

  7. Advantages • Less code: • This makes program: • Easier to read • Easier to change (imagine 500 Hellos) Hello v1 Hello v2 Option Explicit Sub btnGo_OnClick() parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" parHello.innerHTML = parHello.innerHTML & "Hello<br>" End Sub Option Explicit Sub btnGo_OnClick() Dim h For h = 1 To 10 parHello.innerHTML = parHello.innerHTML & "Hello<br>" Next End Sub 10lines 4 lines

  8. 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"> Option Explicit 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 End Sub </script>

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

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

  11. Example: Total • Real Power of loops • using counter variable • do something slightly different each time • Example: Option Explicit Dim num Dim tot tot = 0 For num = 1 To 4 tot = tot + num Next lblRes.InnerText = tot

  12. Example: Total

  13. Question: For … Next • What does the following code display in parNums: Dim s Dim counter s = "" For counter = 1 To 10 s = s & " " & counter Next parNums.innerText = s 1 2 3 4 5 6 7 8 9 10

  14. Question: For … Step … Next • What does the following code display in parNums: Dim s Dim i s = "" For i = 24 To 12 Step -2 s = s & " " & i Next parNums.innerText = s 24 22 20 18 16 14 12

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

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

  17. Do ... Loop statement • repeat code unknown number of times • more flexible than For • slower than For • Syntax (Do Until):DoUntilcondition statementblock Loop • Syntax (Do While):DoWhilecondition statementblock Loop

  18. Example: Do … Loop • Can do everything a For … Loop can:Dim I Dim i i = 1 Do While i <= 10 For i = 1 To 10lblN.InnerText = ipicN.InnerText = i i = i + 1 Loop Next • And more:Dim i i = 1 Do While i < 10 lblN.innertext = i If (i / 2) = Int(i / 2) then i = i + 1 Else i = i + 3 End If Loop

  19. Question: Do … Loop • What does the following display in parNums: Dim s Dim num s = "" num = 10 Do While num > -6 s = s & " " & num num = num - 1.5 Loop parNums.innerText = s 10 8.5 7 5.5 4 2.5 1 -0.5 -2 -3.5 -5

  20. Question: Do … Loop • What does the following display in parNums: Dim num num = 6 Do Until num > 4 num = num + 5 parNums.innerText = parNums.innerText & num Loop nothing, 6 is already greater than 4

  21. Tutorial Exercise: Hello • Task 1: Get the Hello Examples (0 to 2) 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.

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

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

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

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

More Related