1 / 26

08 – Iterative Execution

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)

matty
Download Presentation

08 – 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. 08 – Iterative Execution

  2. In-class Test Results Score (max 50) StudentNumber 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) + 34.56 + sqr(b)

  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)

  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>" 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>

  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:Forvariable=startToendstatementblockNext

  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>" 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 Option Explicit Sub btnGo_OnClick() Dim h For h = 1 To 10 lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" Next End Sub 10lines 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 End Sub </script>

  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

  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

  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 5 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 • What does the following code produce: Dim i For i = 24 To 8 Step -2 lblNums.InnerText = lblNums.InnerText & i & i * 2 Next

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

  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

  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.

More Related