Download presentation
Presentation is loading. Please wait.
2
Looping SetTimeout is a loop
It makes something happen again and again and again Every time the function setTimeout is executed, the function inside of it (that is called) is executed. We stop the loop by stopping setTimeout from being executed
3
Remember from lab? <script> var colorArray = new Array() colorArray[0] = "#FF3377" colorArray[1] = "#CCD234" colorArray[2] = "#33BB56" colorArray[3] = "#22BAC1" colorArray[4] = "#3432D3" colorArray[5] = "#DD45E2" function myfunc() { var x = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.color = colorArray[x] var y = Math.floor(Math.random() * colorArray.length) if (y == x) { //What does this do? y = Math.floor(Math.random() * colorArray.length) } document.getElementById('h11').style.backgroundColor = colorArray[y] var z = Math.floor(Math.random() * colorArray.length) if ((y == z) || (x == z)) { //What does this do? z = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.borderColor = colorArray[z] setTimeout(function(){myfunc()},1300) </script> </head><body> <h1 id = "h11" style = "padding: 40; border-style: solid; border-width: 5px; border-color:black; font-weight: bold;">Colors</h1> <input type = "button" onclick = "myfunc()" value = "start" ></p> Link
4
What if we do this? <script> var colorArray = new Array() colorArray[0] = "#FF3377" colorArray[1] = "#CCD234" colorArray[2] = "#33BB56" colorArray[3] = "#22BAC1" colorArray[4] = "#3432D3" colorArray[5] = "#DD45E2" function myfunc() { var x = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.color = colorArray[x] var y = Math.floor(Math.random() * colorArray.length) while (y == x) { //What does this do? y = Math.floor(Math.random() * colorArray.length) } document.getElementById('h11').style.backgroundColor = colorArray[y] var z = Math.floor(Math.random() * colorArray.length) while ((y == z) || (x == z)) { //What does this do? z = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.borderColor = colorArray[z] setTimeout(function(){myfunc()},1300) </script> </head><body> <h1 id = "h11" style = "padding: 40; border-style: solid; border-width: 5px; border-color:black; font-weight: bold;">Colors</h1> <input type = "button" onclick = "myfunc()" value = "start" ></p>
5
What does this do? <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function afunc(countvar) { while (countvar < 5) { document.write("<p> really </p>"); countvar = countvar + 1; } document.write("<p> cute </p>"); </script> </head> <body> <p id = "here" onClick = "afunc(1)">Click to see the secret message </p> </body> </html> Link
6
Remember the race? race_on = true var idArray = new Array()
idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" … function startit() { myfunc(0) myfunc(1) myfunc(2) } We can use a loop here too That way it won’t matter how many images we are racing, e.g.,
7
Using a loop: var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" idArray[3] = "img4" function startit() { var index = 0; while (index < idArray.length) { //will this work no matter how many images are added to the idArray? myfunc(index) index = index+1 }
8
getElementsByTagName()
getElementById Gets one element at a time, based on id What if we want to get all elements with the same tag E.g., we want to change all the paragraphs on a web page We can use getElementsByTagName(“P”) var pArray = document.getElementsByTagName(“P”) This will make an array of all the paragraphs in a web page
9
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function afunc() { var pArr = document.getElementsByTagName("P"); var y = Math.floor(Math.random() * pArr.length) pArr[y].innerHTML = 'random sentence' } </script> </head> <body> <p> first</p> <h2> Not p </h2> <p> second </p> <p> third </p> <p> fourth </p> <input type = "button" onClick = "afunc()" value = "click here"> </body> </html> Link
![<!DOCTYPE html><html><head> <meta charset= utf-8 /> <script> function afunc() { var pArr = document.getElementsByTagName( P ); var y = Math.floor(Math.random() * pArr.length) pArr[y].innerHTML = random sentence } </script> </head> <body> <p> first</p> <h2> Not p </h2> <p> second </p> <p> third </p> <p> fourth </p> <input type = button onClick = afunc() value = click here > </body> </html> Link](http://slideplayer.com./slide/12988529/79/images/9/%3C%21DOCTYPE+html%3E%3Chtml%3E%3Chead%3E+%3Cmeta+charset%3D+utf-8+%2F%3E+%3Cscript%3E+function+afunc%28%29+%7B+var+pArr+%3D+document.getElementsByTagName%28+P+%29%3B+var+y+%3D+Math.floor%28Math.random%28%29+%2A+pArr.length%29+pArr%5By%5D.innerHTML+%3D+random+sentence+%7D+%3C%2Fscript%3E+%3C%2Fhead%3E+%3Cbody%3E+%3Cp%3E+first%3C%2Fp%3E+%3Ch2%3E+Not+p+%3C%2Fh2%3E+%3Cp%3E+second+%3C%2Fp%3E+%3Cp%3E+third+%3C%2Fp%3E+%3Cp%3E+fourth+%3C%2Fp%3E+%3Cinput+type+%3D+button+onClick+%3D+afunc%28%29+value+%3D+click+here+%3E+%3C%2Fbody%3E+%3C%2Fhtml%3E+Link.jpg "<!DOCTYPE html><html><head> <meta charset= utf-8 /> <script> function afunc() { var pArr = document.getElementsByTagName( P ); var y = Math.floor(Math.random() * pArr.length) pArr[y].innerHTML = random sentence } </script> </head> <body> <p> first</p> <h2> Not p </h2> <p> second </p> <p> third </p> <p> fourth </p> <input type = button onClick = afunc() value = click here > </body> </html> Link")
10
Get images <script> var picArr = new Array() picArr[0] = "Images/cute_puppy_02.jpg" picArr[1] = "Images/cute2.jpg" picArr[2] = "Images/cute3.jpg" picArr[3] = "Images/cute6.jpg" picArr[4] = "Images/cute7.jpg" var prev = -1; function afunc() { var iArr = document.getElementsByTagName('img') var y = Math.floor(Math.random() * iArr.length) var z = Math.floor(Math.random()*picArr.length) if (prev != -1) { iArr[prev].src = "Images/box.png" } iArr[y].src = picArr[z] prev = y; </script> </head> <body> <img src = "Images/box.png" width = "200" height = "200" alt = "a box"> <input type = "button" onClick = "afunc()" value = "click here"> Link
11
<script> function afunc() { var pArr = document
<script> function afunc() { var pArr = document.getElementsByTagName("P"); var countvar = 0; while (countvar < pArr.length) { pArr[countvar].style.backgroundColor = "red" pArr[countvar].style.color = "white" pArr[countvar].style.fontSize = "150%" pArr[countvar].style.padding = "20px" pArr[countvar].style.width = "600px" pArr[countvar].style.boxShadow = "10px 20px 30px green"; countvar = countvar + 1; } </script> </head> <body> <p> first</p> <h2> Not p </h2> <p> second </p> <p> third </p> <p> fourth </p> <input type = "button" onClick = "afunc()" value = "click here"> Using a While Loop Link
12
<script> var colorArr = new Array() colorArr[0] = "red" colorArr[1] = "orange" colorArr[2] = "yellow" colorArr[3] = "green" colorArr[4] = "blue" function afunc() { var pArr = document.getElementsByTagName("P"); var countvar = 0; while (countvar < pArr.length) { var x = Math.floor(Math.random()*colorArr.length) var y = Math.floor(Math.random()*colorArr.length) while (x == y) { y = Math.floor(Math.random()*colorArr.length) } pArr[countvar].style.backgroundColor = colorArr[x] pArr[countvar].style.boxShadow = "10px 20px 30px "+colorArr[y]; pArr[countvar].style.color = "white" pArr[countvar].style.fontSize = "150%" pArr[countvar].style.padding = "20px" pArr[countvar].style.width = "600px" countvar = countvar + 1; </script> </head> <body> <p> first</p> <p> second </p> <p> third </p> <p> fourth </p> <input type = "button" onClick = "afunc()" value = "click here"> More than one loop Link
![<script> var colorArr = new Array() colorArr[0] = red colorArr[1] = orange colorArr[2] = yellow colorArr[3] = green colorArr[4] = blue function afunc() { var pArr = document.getElementsByTagName( P ); var countvar = 0; while (countvar < pArr.length) { var x = Math.floor(Math.random()*colorArr.length) var y = Math.floor(Math.random()*colorArr.length) while (x == y) { y = Math.floor(Math.random()*colorArr.length) } pArr[countvar].style.backgroundColor = colorArr[x] pArr[countvar].style.boxShadow = 10px 20px 30px +colorArr[y]; pArr[countvar].style.color = white pArr[countvar].style.fontSize = 150% pArr[countvar].style.padding = 20px pArr[countvar].style.width = 600px countvar = countvar + 1; </script> </head> <body> <p> first</p> <p> second </p> <p> third </p> <p> fourth </p> <input type = button onClick = afunc() value = click here >](http://slideplayer.com./slide/12988529/79/images/12/%3Cscript%3E+var+colorArr+%3D+new+Array%28%29+colorArr%5B0%5D+%3D+red+colorArr%5B1%5D+%3D+orange+colorArr%5B2%5D+%3D+yellow+colorArr%5B3%5D+%3D+green+colorArr%5B4%5D+%3D+blue+function+afunc%28%29+%7B+var+pArr+%3D+document.getElementsByTagName%28+P+%29%3B+var+countvar+%3D+0%3B+while+%28countvar+%3C+pArr.length%29+%7B+var+x+%3D+Math.floor%28Math.random%28%29%2AcolorArr.length%29+var+y+%3D+Math.floor%28Math.random%28%29%2AcolorArr.length%29+while+%28x+%3D%3D+y%29+%7B+y+%3D+Math.floor%28Math.random%28%29%2AcolorArr.length%29+%7D+pArr%5Bcountvar%5D.style.backgroundColor+%3D+colorArr%5Bx%5D+pArr%5Bcountvar%5D.style.boxShadow+%3D+10px+20px+30px+%2BcolorArr%5By%5D%3B+pArr%5Bcountvar%5D.style.color+%3D+white+pArr%5Bcountvar%5D.style.fontSize+%3D+150%25+pArr%5Bcountvar%5D.style.padding+%3D+20px+pArr%5Bcountvar%5D.style.width+%3D+600px+countvar+%3D+countvar+%2B+1%3B+%3C%2Fscript%3E+%3C%2Fhead%3E+%3Cbody%3E+%3Cp%3E+first%3C%2Fp%3E+%3Cp%3E+second+%3C%2Fp%3E+%3Cp%3E+third+%3C%2Fp%3E+%3Cp%3E+fourth+%3C%2Fp%3E+%3Cinput+type+%3D+button+onClick+%3D+afunc%28%29+value+%3D+click+here+%3E.jpg "More than one loop Link.")
13
Fun Stuff: You can actually update the existing innerHTML (or anything else) <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <style> td { font-size: 170%; font-family: arial; padding: 10;text-align: center;} table { width: 900px; margin: auto; } </style> <script> function func() { var x = document.getElementById('text').innerHTML; x = ">>" + x document.getElementById('text').innerHTML = x; } </script> </head> <body> <table><tr><td colspan = '2'><h1 id = 'text'> 8-) <h1> </td></tr> <tr><td onClick = "func()"> Add tail </td></tr></table> </body> </html> Link
14
Another Example: <script> function func(letter) { var x = document.getElementById('text').innerHTML; x += letter; document.getElementById('text').innerHTML = x; } </script> </head> <body> <table><tr><td colspan = '9'> <h1 id = 'text' style = "font-size: 150%; text-align: center; font-family: arial; height: 100px;"></h1> </td></tr> <tr><td onClick = func('a')>a</td><td onClick = func('b')>b</td><td onClick = func('c')>c</td><td onClick = func('d')>d</td><td onClick = func('e')>e</td> <td onClick = func('f')>f</td><td onClick = func('g')>g</td><td onClick = func('h')>h</td><td onClick = func('i')>i</td> </tr> <tr><td onClick = func('j')>j</td><td onClick = func('k')>k</td><td onClick = func('l')>l</td><td onClick = func('m')>m</td><td onClick = func('n')>n</td> <td onClick = func('o')>o</td><td onClick = func('p')>p</td><td onClick = func('q')>q</td><td onClick = func('r')>r</td> <tr><td onClick = func('s')>s</td><td onClick = func('t')>t</td><td onClick = func('u')>u</td><td onClick = func('v')>v</td><td onClick = func('w')>w</td> <td onClick = func('x')>x</td><td onClick = func('y')>y</td><td onClick = func('z')>z</td><td onClick = func('.')>.</td> </table> Link
15
Moving <script> var xcoord = 10; var ycoord = 10; function func() { var x = Math.floor(Math.random() * 700); var y = Math.floor(Math.random() * 700); var xchange = (x-xcoord)/30; var ychange = (y-ycoord) / 30; count = 0; Move(xchange,ychange) } function Move(xc, yc) { count = count + 1; if (count < 30) { ycoord = ycoord + yc; xcoord = xcoord + xc; document.getElementById('p1').style.position = "absolute" document.getElementById('p1').style.left = ycoord + "px" document.getElementById('p1').style.top = xcoord + "px" setTimeout(function() {Move(xc,yc)}, 50) else { func(); </script> Link
16
Following Mouse: <script> var xcoord = 10; var ycoord = 10; function getClicks(e) { var x = e.clientX; var y = e.clientY; var xchange = (x-xcoord)/30; var ychange = (y-ycoord) / 30; count = 0; Move(xchange,ychange) } function Move(xc, yc) { count = count + 1; if (count < 30) { ycoord = ycoord + yc; xcoord = xcoord + xc; document.getElementById('p1').style.position = "absolute" document.getElementById('p1').style.left = xcoord + "px" document.getElementById('p1').style.top = ycoord + "px" setTimeout(function() {Move(xc,yc)}, 50) else { func(); </script> Link
Similar presentations
