1 / 33

09 – Iterative Execution

09 – Iterative Execution. Questions: Variables. Write a line of VBScript code to declare a variable called h Write a line of VBScript code that: 1) reads the value of the variable called h 2) adds 1, and 3) puts the result back into h. Dim h. h = h + 1. Session Aims & Objectives. Aims

aqua
Télécharger la présentation

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

  2. Questions: Variables • Write a line of VBScript code to declare a variable called h • Write a line of VBScript code that: 1) reads the value of the variable called h 2) adds 1, and 3) puts the result back into h Dim h h = h + 1

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

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

  5. Example: Hello v1 • 1 user click: 10 Hellos (10 lines of code) Lots of lines imagine 300 Hellos 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

  6. Example: Hello v2 • 1 user click: 10 Hellos (6 lines of code) Option Explicit Sub btnHello_OnClick() Dim h h = 1 Do Until h > 10 lblHello.innerHTML = lblHello.innerHTML & "Hello<br>" h = h + 1 Loop End Sub

  7. Hello v2: Do Loop • variable h – used as counter

  8. Example: Hello v3 • 1 user click: 10 Hellos (4 lines of code) Option Explicit Sub btnHello_OnClick() Dim h For h = 1 To 10 parHello.innerHTML = parHello.innerHTML & "Hello<br>" Next End Sub

  9. Hello v3: For Loop • variable h – set and incremented automatically

  10. Advantages • Less code: • This makes program: • Easier to read • Easier to change (imagine 500 Hellos) Hello v1 Hello v3 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

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

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

  13. Example: Do … Loop • Can do everything a For … Loop can:Dim iDim 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

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

  15. Example: Total

  16. Example: Letter Count <script language=vbscript> Option Explicit Sub btnCount_OnClick() Dim count Dim pos 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>

  17. Letter Count • Search Algorithm: 1) Start at first letter 2) If no more letters then go to 5 3) If letter is an e then add 1 to count 4) Go to 2 5) Display count

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

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

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

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

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

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

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

  25. Loops: Errors <script language="vbscript">Option Explicit Sub window_onload() For x = 1 To 10 Next End Sub</script>

  26. Loops: Errors <script language="vbscript">Option Explicit Sub window_onload() Dim x For x = 1 To 10 End Sub</script> Statement Expected(missing Next)

  27. Loops: Errors <script language="vbscript">Option Explicit Sub window_onload() Dim x Next End Sub</script>

  28. Loops: Errors <script language="vbscript">Option Explicit Sub window_onload() Dim x For x = 1 To 10 Next End Sub</script> 

  29. Tutorial Exercise: Hello • LEARNING OBJECTIVE:use variables to make a for loop more flexible • 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.

  30. Tutorial Exercise: Letter Count • LEARNING OBJECTIVE:use a loop to search through a string (text) • 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 into. • Task 3: Modify your code so that it responds immediately. Hint: Remove the button, and link your code to the KeyUp event of the text box. • 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 len function.

  31. Tutorial Exercise: Vowel Count • LEARNING OBJECTIVE:build your own page from scratch, using a loop to search a string (piece of text) • 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.

  32. Tutorial Exercise: Pendulum • LEARNING OBJECTIVE:use a loop to shorten code responsible for visual display • 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.

  33. Tutorial Exercise: Shades • LEARNING OBJECTIVE:use functions and operators to change the behaviour of code that uses a loop • 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