Presentation is loading. Please wait.

Presentation is loading. Please wait.

setTimeout() What if you want to automatically cycle through the pics?

Published byKaisa Ranta Modified over 5 years ago

Similar presentations

Presentation on theme: "setTimeout() What if you want to automatically cycle through the pics?"— Presentation transcript:

1

2 setTimeout() What if you want to automatically cycle through the pics?
So you don’t have to keep clicking the button to see the next pic Use the built-in JavaScript setTimeout() function function displaypic() { num = num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("pic1").src = picArray[num] document.getElementById("p1").innerHTML = num setTimeout(function(){displaypic()},2000)

3 setTimeout(function(){displaypic()}, 2000)
Calls the function setTimeout, which causes javascript to STOP running – just freeze! It stops for the number specified (in milliseconds) After that many milliseconds, it calls the function specified So in the above example, setTimeout freezes javascript for milliseconds (or 2 seconds), and then after 2 seconds, it calls the function displaypic(), just as if you’d clicked on a button calling it.

4 Example: <script> </script> </head> <body>
function setToRed ( ) { document.getElementById("colorButton").style.color = "#FF0000"; setTimeout ( function(){setToBlack()}, 2000 ); } function setToBlack ( ) { document.getElementById("colorButton").style.color = "#000000"; </script> </head> <body>  <input type="button" name="clickMe" id="colorButton" value="Click me and wait!" onclick="setToRed()"> Link:

5 <script > var count = ‘on’ function myfunc() { if (count == ‘on’) { count = ‘off’ document. getElementById(“img1”).src = "Images/lightbulb.jpg" } else if (count == ‘off’) { count = ‘on’ document. getElementById(“img1”).src = “Images/black.jpg " setTimeout(function(){myfunc()},1000) </script> </head> <body > <p onClick = “myfunc()”> <img width = "189" height = "267" id = "img1"> Click Here to Start </p> </body> Link:

6 Starting automatically…
So far we’ve started function in a couple of ways: Primarily: onClick Also: onMouseOver and onMouseOut If we want a function to start automatically, without our having to click or run our mouse over anything… We can use onLoad We’ll use it within the body tag, e.g., <body onload = “func()”> This means that when the body of your html page loads into the browser, func() will be executed.

7 <script > var count = 0 function myfunc() { if (count == 1) { count = 0 document. getElementById(“img1”).src = “Images/black.jpg " } else if (count == 0) { count = 1 document. getElementById(“img1”).src = "Images/lightbulb.jpg" setTimeout(function(){myfunc()},1000) </script> </head> <body onLoad = “myfunc()”> <p> <img width = "189" height = "267" id = "img1"> </p> </body> Link:

8 <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = new Array() picArray[0]="Images/ kittyfur-back.jpg " picArray[1]=“Images/kittyhimself.jpg" picArray[2]="Images/kittybreakfast.jpg" picArray[3]="Images/kittyno-regrets.jpg" picArray[4]="Images/kttylemon.jpg" var num = -1 function displaypic() { num = num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("pic1").src = picArray[num] document.getElementById("p1").innerHTML = num setTimeout(function(){displaypic()},2000) </script> </head> <body> <h1> Vacation Pics </h1> <p><img src = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = “Start Slide Show" onClick = "displaypic()"> <p id = "p1">Image number </p> </body> </html> link

9 What about this?: link <script > var count = 0 function myfunc()
{ if (count == 1) { count = 0 document. getElementById(“img1”).src = " " } else if (count == 0) { count = 1 document. getElementById(“img1”).src = "Images/lightbulb.jpg" setTimeout(function(){myfunc()},1000) </script> </head> <body onLoad = “myfunc()”> <p><img src = "" width = "189" height = "267" id = "img1"> </p> </body>

10 What does this do? link <script> var ycoord = 800
var direction = 10 function myfunc() { document.getElementById('img1').style.position = "absolute" ycoord = ycoord + direction document.getElementById('img1').style.left = ycoord+"px" setTimeout(function(){myfunc()},400) } </script> </head> <body onLoad = "myfunc()"> <p><img src = "Images/train.jpg" width = "189" height = "267" id = "img1" ></p> </body> </html> Modify to go up and down? Diagonally? To go back and forth?

11 What does this do? link <script> var leftedge = 50 var rightedge = 800 var ycoord = 800 var direction = 10 function myfunc() { document.getElementById('img1').style.position = "absolute" ycoord = ycoord + direction document.getElementById('img1').style.left = ycoord+"px" if (ycoord < leftedge) direction = direction * -1; } else if (ycoord > rightedge) setTimeout(function(){myfunc()},400) </script> </head> <body onLoad = "myfunc()"> <p><img src = "Images/train.jpg" width = "189" height = "267" id = "img1" ></p> </body> </html> Modify to go up and down? Diagonally? To go back and forth?

12 Moving things by clicking:
link var rightleft =0 function MovecarRight() { rightleft = rightleft +10 document.getElementById(“car").style.left = rightleft + "px" } function MovecarLeft() { rightleft = rightleft -10 </script> </head> <body> <img src = “carimage.gif” width = “200” height = “200” id = “car”> <img src = "Images/left.gif" width= "25px" height = "25px" onclick = "MovecarLeft()"> <img src = "Images/right.gif" width= "25px" height = "25px" onclick = "MovecarRight()">

13 How do we check if the car is over the frog?
var rightleft =0 var xpos =0 function startit() { Movefrog() } function MovecarRight() { rightleft = rightleft +10 document.getElementById(“car").style.left = rightleft + "px" function MovecarLeft() { rightleft = rightleft -10 function Movefrog() { xpos = Math.floor(Math.random() * 650) document.getElementById(‘frog').style.left = xpos + "px" setTimeout("Movefrog()",20000) </script> </head> <body> <div id = "hi" style = "position: relative;"> <img src = “frog.png" id = “frog" width= "150" height = "150" style = "position: absolute; top: 0px; left: 0px;"> <img src = “car.png" id = “car" width = "150" height = "150" style = "position: absolute; top: 0px; left: 0px; "> </div <img src = "Images/left.gif" width= "25px" height = "25px" onclick = "MovecarLeft()"> <img src = "Images/right.gif" width= "25px" height = "25px" onclick = "MovecarRight()"> <input type = "button" value = "start" onClick = "startit()"> link How do we check if the car is over the frog?

14 var rightleft =0 var xpos =0 Totalscore = 0 function startit() { Movefrog() } function MovecarRight() { rightleft = rightleft +10 document.getElementById(“car").style.left = rightleft + "px“ if ((rightleft > (xpos - 11)) && (rightleft < (xpos + 11)) ) { document.getElementById(‘frog').src="Images/splat.png" totalscore = totalscore +10 document.getElementById('tot').innerHTML = "Total Score: "+totalscore xpos = 0 function MovecarLeft() { rightleft = rightleft -10 function Movefrog() { document.getElementById(‘frog').src="Images/frog.png“ xpos = Math.floor(Math.random() * 650) document.getElementById(‘frog').style.left = xpos + "px" setTimeout("Movefrog()",20000) </script> </head><body> <p id = “tot”>Score goes here<p> <img src = “frog.png" id = “frog" width= "150" height = "150" style = "position: absolute; top: 0px; left: 0px;"> <img src = “car.png" id = “car" width = "150" height = "150" style = "position: absolute; top: 0px; left: 0px; "> <img src = "Images/left.gif" width= "25px" height = "25px" onclick = "MovecarLeft()"> <img src = "Images/right.gif" width= "25px" height = "25px" onclick = "MovecarRight()"> <input type = "button" value = "start" onClick = "startit()"> link

15 Parameters: Parameters are another way of having something hold a value. E.g., var x = 3 Now the variable x holds 3. We can use x as if it is the number 3 var narr = new Array() narr[0] = “cat” narr[1] = “dog” Now the array narr at location 1 holds the word “dog”, and we can use narr[1] as if it is the word “dog” Parameters: <p onclick = “func(‘easy’)”> click here to call the function with the parameter ‘easy’ </p> <script> function func(easyorhard) { If (easyorhard == ‘easy’) … Now when you click on the paragraph, the word ‘easy’ is placed in the parameter easyorhard, so easyorhard can be used as if it is the word ‘easy’

16 Parameter Example: link
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x) { if (x == 'snow') { document.getElementById("h11").innerHTML = "it's snowing!" } else if (x == 'rain') { document.getElementById("h11").innerHTML = "it's raining!" else if (x == 'sun') { document.getElementById("h11").innerHTML = "it's sunny!" </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "p1" onClick = "showparam('snow')">click here for snow</p> <p id = "p2" onClick = "showparam('rain')">click here for rain</p> <p id = "p3" onClick = "showparam('sun')">click here for sun</p> </body> </html>

17 <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function changepic(x) { document.getElementById('bigpic').src = x } function changebak() { document.getElementById('bigpic').src = “frog.jpg" </script> </head> <body > <table ><tr><td colspan = "4" height = "300" width = "300"> <img src = "frog.jpg" width = "250" height = "250" id = "bigpic"> </td></tr> <tr><td > <img src = "pic1.jpg" width = "40" height = "40" id = "img1" onMouseOver = "changepic('pic1.jpg')" onMouseOut = "changebak()"> </td><td> <img src = "pic2.jpg" width = "40" height = "40" id = "img2" onMouseOver = "changepic('pic2.jpg')" onMouseOut = "changebak()"> <img src = "pic3.jpg" width = "40" height = "40" id = "img3" onMouseOver = "changepic('pic3.jpg')" onMouseOut = "changebak()"> <img src = "pic4.jpg" width = "40" height = "40" id = "img4" onMouseOver = "changepic('pic4.jpg')" onMouseOut = "changebak()"> </td></tr></table> </body> </html> link

18 Functions can have more than one parameter
link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function myFunction(x, y) { document.getElementById('p1').innerHTML = "Welcome " + x + ", the " + y; } </script> </head> <body> <p id = "p1">Results go here.</p> <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <button onclick="myFunction('Bob','Builder')">Try it</button> </body> </html> Parameters match in order: function myFunction( x, y) onClick = myFunction( ‘Harry Potter’, ‘Wizard’) onClick = myFunction( ‘Bob’ ‘Builder’)

19 Parameter Example: link
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x, y) { document.getElementById(x).innerHTML =y document.getElementById(x).style.fontSize = "150%"; } function goBack(x, y) document.getElementById(x).style.fontSize = "100%"; </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "snow" onMouseOver = "showparam('snow', 'it is snowing!')" onMouseOut = "goBack('snow', 'weather 1')">weather 1</p> <p id = "rain" onMouseOver = "showparam('rain', 'it is raining!')" onMouseOut = "goBack('rain', 'weather 2')">weather 2</p> <p id = "sun" onMouseOver = "showparam('sun', 'it is sunny')" onMouseOut = "goBack('sun', 'weather 3')">weather 3</p> </body> </html>

20 What is this code doing? link
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> var race_on = true var ycoord = 5; function myfunc() { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById('img1').style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2() } else { setTimeout(function(){myfunc()},100) function func2() { document.getElementById('h11').innerHTML = "Snail won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 270px; left: 5px"> <input type = "button" onclick = "myfunc()" value = "start" ></p> </body> </html> What is this code doing? link

21 Add another snail for a race? link
1. add another snail image in your html code 2. DON’T WRITE ANOTHER FUNCTION TO DO THE SAME THING!! Add a parameter Could be the id of the image to move Or could put all ids into an array Then the parameter would be the number of the id in the array, e.g., <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = 5; function myfunc(x) { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2(x) } else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> Add another snail for a race? link

22 Next, make both snails go at once: link
Since one click cannot call more than one function (or a single function more than once): ADD ANOTHER FUNCTION A starting function This function will ‘call’ the other function twice: And the click in the html should now call the starting function: function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" … <input type = "button" onclick = "startit()" value = "start" > Next, make both snails go at once: link

23 Problem: both snails using the same y coordinate (why is this a problem?)
Solution: an array for y coordinates as well as an array for ids: Then replace ycoord with ycoord[x]: var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x] + Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) } else { setTimeout(function(){myfunc(x)},100)

24 <!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 310px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> </body> </html> All Together: link

25 <!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 310px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> </body> </html> Now, how do we add another snail? (3 lines in js and 1 line in the html code)

26 Link Next: Make them go backwards?
race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; ycoord[2]= 5; function startit() { myfunc(0) myfunc(1) myfunc(2) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) } } function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head><body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <p ><img src = "Images/snail3.png" width = "150" height = "150" id = "img3" style = "position: absolute; top: 320px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 630px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> Link Next: Make them go backwards?

27 Tougher: When a snail has a ycoord greater than 180, we want to reverse the direction. The easiest way to reverse the direction is to change the ycoordinate by a negative number instead of a positive number. To do that, we need a direction value (either 1 or negative 1) that we multiply the ycoordinate by. We need a different direction value for each snail: var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 … function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) } else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100)

28 Add flipped pics: When snails go back towards the beginning, we want them facing the right direction: var backImage = new Array(); backImage[0] = "Images/snail1b.png" backImage[1] = "Images/snail2b.jpg" backImage[2] = "Images/snail3b.png" var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 … function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { document.getElementById(idArray[x]).src = backImage[x]; direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) } else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100)

29 race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; ycoord[2]= 5; var backImage = new Array(); backImage[0] = "Images/snail1b.png" backImage[1] = "Images/snail2b.jpg" backImage[2] = "Images/snail3b.png" var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 function startit() { myfunc(0) myfunc(1) myfunc(2) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { document.getElementById(idArray[x]).src = backImage[x]; direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head><body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 40px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 190px; left: 5px"></p> <p ><img src = "Images/snail3.png" width = "150" height = "150" id = "img3" style = "position: absolute; top: 340px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 650px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> All Together: Link:

Download ppt "setTimeout() What if you want to automatically cycle through the pics?"

Similar presentations

function coffeeinfo() { document.getElementById('p3').innerHTML = The word 'coffee' was.

function coffeeinfo() { document.getElementById('p3').innerHTML = "The word 'coffee' was.
JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.

JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.
JavaScript Lesson 2 TBE 540 F. Fisher. Prerequisites  Before beginning this lesson, the learner must be able to… Create and edit a web page using a text.

JavaScript Lesson 2 TBE 540 F. Fisher. Prerequisites  Before beginning this lesson, the learner must be able to… Create and edit a web page using a text.
Computer Science 103 Chapter 4 Advanced JavaScript.

Computer Science 103 Chapter 4 Advanced JavaScript.
Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1 Introduction The JavaScript Programming.

Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1 Introduction The JavaScript Programming.
1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,

1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.

Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.

CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
JavaScript Part 1.

JavaScript Part 1.
Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-05-02Katherine Deibel, Fluency in Information Technology1.

Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.

CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
Lesson13. JavaScript JavaScript is an interpreted language, designed to function within a web browser. It can also be used on the server.

Lesson13. JavaScript JavaScript is an interpreted language, designed to function within a web browser. It can also be used on the server.
Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain,

Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain,
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.

Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
CO1552 Web Application Development HTML Forms, Events and an introduction to JavaScript.

CO1552 Web Application Development HTML Forms, Events and an introduction to JavaScript.
Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,

Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 14 - Dynamic HTML: Event Model Outline 14.1 Introduction 14.2 Event onclick 14.3 Event onload.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 14 - Dynamic HTML: Event Model Outline 14.1 Introduction 14.2 Event onclick 14.3 Event onload.
JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing pages.

JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing pages.
JavaScript Adding active content to websites. Goals Understand structure of JavaScript Understand rules of coding Add active content to WebPages Add functions.

JavaScript Adding active content to websites. Goals Understand structure of JavaScript Understand rules of coding Add active content to WebPages Add functions.
Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54

Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54

Similar presentations

Ads by Google