1 / 15

<!DOCTYPE html><html><head >< meta charset= "utf-8" /> < script> function co

link. <!DOCTYPE html><html><head >< meta charset= "utf-8" /> < script> function coffeeinfo ( ) { document.getElementById ('p3'). innerHTML = "<p>The word 'coffee' was at one time a term for wine, but was…. </p>" document.getElementById ('p3'). style.color = "#CCBBAA"

fawzi
Download Presentation

<!DOCTYPE html><html><head >< meta charset= "utf-8" /> < script> function co

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. link <!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> function coffeeinfo() { document.getElementById('p3').innerHTML = "<p>The word 'coffee' was at one time a term for wine, but was…. </p>" document.getElementById('p3').style.color = "#CCBBAA" document.getElementById('p3').style.backgroundColor = "#995500“ document.getElementById("p3").style.borderColor = "#3399BB" document.getElementById("coffee").style.borderColor = "#3399BB“ document.getElementById("coffee").style.borderWidth = "10px" document.getElementById("tea").style.borderWidth = "0px" } function teainfo() { document.getElementById('p3').innerHTML = "<p>The origin of tea can be traced back to the year 2737 BC. .. </p>" document.getElementById('p3').style.color = "#227700" document.getElementById('p3').style.backgroundColor = "#BBCC22“ document.getElementById("p3").style.borderColor = "#114400" document.getElementById("tea").style.borderColor = "#114400“ document.getElementById("tea").style.borderWidth = "10px" document.getElementById("coffee").style.borderWidth = "0px" } </script> </head> <body> <table ><tr><td ><imgsrc = "Images/coffee.jpg" width = "300" height = "280" alt = "pic of coffee" id = "coffee"> </td><td><imgsrc = "Images/tea.jpg" width = "360" height = "280" alt = "pic of tea" id = "tea"> </td></tr> <tr><td> <input type = "button" value = "Learn more about coffee" onClick = "coffeeinfo()"> </td><td> <input type = "button" value = "Learn more about tea" onClick = "teainfo()"> </td></tr> <tr><td colspan = "2" id = "p3"> </td></tr> </table> </body></html>

  2. Calling Functions (making them happen) • There are a number of ways you can make a function happen in JavaScript • You’ve seen onClick=“functionname()” • There’s also: • onMouseOver=– when you run your mouse over something • onMouseOut– when you take your mouse pointer off of something • onLoad– for when the web page loads • Also have: • onDblClick– when you double-click on something • onFocus– when you put your cursor into a form element like a textbox • onBlur– when your cursor leaves a form element • onKeyDown– when you press a key down over something • onKeyUp– when you release a key over something • onKeyPress- when you press and release a key over something • onMouseDown- when you click the mouse over something (but don’t release it) • onMouseUp– when you release the mouse over something • onMouseMove- moving the mouse while hovering over something • onSubmit– when submitting a form • onUnload– when you leave the current web page window you’re in.

  3. link onMouseOver, onMouseOut <!DOCTYPE html><html> <head> <meta charset= "utf-8" /> <script> function changepara() { document.getElementById('firstp').innerHTML = "GET YOUR MOUSE OFF THAT BUTTON!" } function changethanks() { document.getElementById('firstp').innerHTML = "Whew, that was close!" } </script> </head> <body> <p id = "firstp">This is a very important paragraph!!!</p> <input type = "button" value = "Don't click here" onMouseOver= "changepara()" onMouseOut = "changethanks()"> </body></html>

  4. link onMouseOver,onMouseOut <!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> function changepara() { document.getElementById('firstp').innerHTML = "DON'T RUN YOUR MOUSE OVER THIS PARAGRAPH!" } function changethanks() { document.getElementById('firstp').innerHTML = "Thank you for taking your mouse off this paragraph" } </script> </head> <body> <p id = "firstp" onMouseOver = "changepara()" onMouseOut = "changethanks()"> This is a very important paragraph!!!</p> </body></html>

  5. link images <!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> function changepic() { document.getElementById('pic1').src = "Images/ghost.jpg" } function changeback() { document.getElementById('pic1').src = "Images/woman.jpg" } </script> </head> <body> <p><imgsrc = "Images/woman.jpg" width = "300" height = "300" id = "pic1" onMouseOver= "changepic()" onMouseOut = "changeback()"> </p> </body></html>

  6. link Using an array of images: <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = new Array() picArray[0]= "Images/safari1.jpg" picArray[1]="Images/safari2.png" picArray[2]="Images/safari3.jpg" picArray[3]="Images/safari4.jpg" picArray[4]="Images/safari5.jpg“ function displaypic() { varnum = Math.floor(Math.random()*5) document.getElementById("pic1").src = picArray[num] } </script> </head> <body> <h1> Vacation Pics </h1> <p><imgsrc = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = "Click here for more vacation pics" onClick = "displaypic()"> </body> </html>

  7. How would we add a picture? • First, we need to know the length of the array • we add elements to the end of the array, so we have to know how many elements are already in the array. • Every time we add a picture to the array, we change the length of the array. • So we can’t always know the exact number ahead of time • JavaScript has a built in function that tells us the length (the number of elements) in any array: • E.g., varmyArray= new Array() myArray[0]= "Images/safari1.jpg“ myArray[1]="Images/safari2.png“ myArray[2]="Images/safari3.jpg“ varnum = myArray.length • Num now holds 3 (there are 3 elements in myArray

  8. link Now let’s write a function that adds a picture to the array: <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = new Array() picArray[0]= "Images/safari1.jpg" picArray[1]="Images/safari2.png" picArray[2]="Images/safari3.jpg" picArray[3]="Images/safari4.jpg" picArray[4]="Images/safari5.jpg“ function addpic() { varnewpic = prompt("Enter new picture") varnum = picArray.length picArray[num] = newpic document.getElementById("pic1").src = picArray[num] } </script> </head> <body> <h1> Vacation Pics </h1> <p><imgsrc = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = "Click here to add a pic" onClick = "addpic()"> </body> </html>

  9. link Put it together… <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = new Array() picArray[0]="Images/safari1.jpg" picArray[1]="Images/safari2.png" picArray[2]="Images/safari3.jpg" picArray[3]="Images/safari4.jpg" picArray[4]="Images/safari5.jpg“ function addpic() { varnewpic = prompt("Enter new picture") varnum = picArray.length picArray[num] = newpic document.getElementById("pic1").src = picArray[num] } function displaypic() { varnum = Math.floor(Math.random()*5) document.getElementById("pic1").src = picArray[num] } </script> </head> <body> <h1> Vacation Pics </h1> <p><imgsrc = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = "Click here for more vacation pics" onClick = "displaypic()"> <input type = "button" value = "Click here to add a pic" onClick = "addpic()"> </body> </html> Once we’ve added the new pic, can we now see it when we click on the first button (that calls displaypic)?

  10. link Put it together… <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = new Array() picArray[0]="Images/safari1.jpg" picArray[1]="Images/safari2.png" picArray[2]="Images/safari3.jpg" picArray[3]="Images/safari4.jpg" picArray[4]="Images/safari5.jpg“ function addpic() { varnewpic = prompt("Enter new picture") varnum = picArray.length picArray[num] = newpic document.getElementById("pic1").src = picArray[num] } function displaypic() { varnum = Math.floor(Math.random()*picArray.length) document.getElementById("pic1").src = picArray[num] } </script> </head> <body> <h1> Vacation Pics </h1> <p><imgsrc = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = "Click here for more vacation pics" onClick = "displaypic()"> <input type = "button" value = "Click here to add a pic" onClick = "addpic()"> </body> </html> Once we’ve added the new pic, can we now see it when we click on the first button (that calls displaypic)?

  11. link What if we want to see our vacation pics in order? <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = new Array() picArray[0]="Images/safari1.jpg" picArray[1]="Images/safari2.png" picArray[2]="Images/safari3.jpg" picArray[3]="Images/safari4.jpg" picArray[4]="Images/safari5.jpg" varnum = 0 /* do we need to change this?*/ function displaypic() {num = num + 1 document.getElementById("pic1").src = picArray[num] } </script> </head> <body> <h1> Vacation Pics </h1> <p><imgsrc = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = "Click here for more vacation pics" onClick = "displaypic()"> </body> </html>

  12. link Going back to the beginning… <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = new Array() picArray[0]="Images/safari1.jpg" picArray[1]="Images/safari2.png" picArray[2]="Images/safari3.jpg" picArray[3]="Images/safari4.jpg" picArray[4]="Images/safari5.jpg" varnum = -1 function displaypic() { num= num + 1 if (num >= picArray.length) { num= 0 } document.getElementById("pic1").src = picArray[num] } </script> </head> <body> <h1> Vacation Pics </h1> <p><imgsrc = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = "Click here for more vacation pics" onClick = "displaypic()"> </body> </html>

  13. link What if we add pictures? <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = new Array() picArray[0]="Images/safari1.jpg" picArray[1]="Images/safari2.png" picArray[2]="Images/safari3.jpg" picArray[3]="Images/safari4.jpg" picArray[4]="Images/safari5.jpg" varnum = -1 function displaypic() { num= num + 1 if (num >= picArray.length) { num= 0 } document.getElementById("pic1").src = picArray[num] } function addpic() { varnewpic = prompt("Enter new picture") varnum = picArray.length picArray[num] = newpic document.getElementById("pic1").src = picArray[num] } </script> </head> <body> <h1> Vacation Pics </h1> <p><imgsrc = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = "Click here for more vacation pics" onClick = "displaypic()"> <input type = "button" value = "Click here to add a pic" onClick = "addpic()"> </body> </html>

  14. link Going Backwards? <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = new Array() picArray[0]="Images/safari1.jpg" picArray[1]="Images/safari2.png" picArray[2]="Images/safari3.jpg" picArray[3]="Images/safari4.jpg" picArray[4]="Images/safari5.jpg" varnum = -1 function displaypic() { num = num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("pic1").src = picArray[num] document.getElementById("p1").innerHTML = num } function displaybak() { num= num - 1 if (num < 0) { num = picArray.length-1 } document.getElementById("pic1").src = picArray[num] document.getElementById("p1").innerHTML = num } function addpic() { varnewpic = prompt("Enter new picture") varnum = picArray.length picArray[num] = newpic document.getElementById("pic1").src = picArray[num] } </script> </head> <body> <h1> Vacation Pics </h1> <p><imgsrc = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = "Go Forward" onClick = "displaypic()"> <input type = "button" value = "Go Back" onClick = "displaybak()"> <input type = "button" value = "Click here to add a pic" onClick = "addpic()"> <p id = "p1">Image number </p> </body> </html>

More Related