1 / 32

innerHTML :

innerHTML :. <p id = ‘cat’> This is a paragraph about Ted the cat </p> What is the innerHTML of ‘cat’? < ol id = “list1”> <li id = “ first”> zombies </li> <li id=“ second”> vampires </li> </ ol > What is the innerHTML of list1 ? <li id = “first”> zombies </li>

bmcgowan
Download Presentation

innerHTML :

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. innerHTML: <p id = ‘cat’> This is a paragraph about Ted the cat </p> What is the innerHTML of ‘cat’? <ol id = “list1”> <li id = “first”> zombies </li> <li id=“second”> vampires </li> </ol> What is the innerHTML of list1? <li id = “first”> zombies </li> <li id=“second”> vampires </li> What is the innerHTML of first? zombies <p id = ‘brains’><img id = ‘guts’ src = “gore.jpg” width = “100” height = “100 alt = “just gross pic”></p> Show 2 ways to change the above pic from gore.jpg to entrails.gif: document.getElementById(‘guts’).src = “entrails.gif” document.getElementById(‘brains’).innerHTML = “<img id = ‘guts’ src = ‘entrails.gif’ width = \“100\” height = \“100\” alt = \“just gross pic\”>”

  2. Confirm box • The confirm box is like the prompt box, only in this case you only have the choice of choosing “ok” or “cancel”. var x = confirm(“Do you want to change something?”) • If you choose ok, x holds true • If you choose cancel, x holds false • Aside: true and false are known as Boolean values var x=confirm("Press a button") if (x==true) {document.getElementById(“p1”).innerHTML="You pressed OK!" } else {document.getElementById(“p1”).innerHTML ="You pressed Cancel!“ }

  3. link What if we want to change the text? <body> <p id = "firstp"> This is a paragraph</p> <p id = "secondp">This is a second paragraph</p> <script> var x = confirm("Do you want to see new text?") if (x == true) { document.getElementById("firstp").innerHTML = "Some new text"; } </script> </body> Two new coding elements: innerHTML and the confirm button

  4. link <body> <h1>Learn about <span id = "animal">animals</span></h1> <p><img width = "230" height = "200" id = "pic1" alt = "animal pic"> </p> <p id = "firstp"> You can learn so much about every animal in the zoo!</p> <script> var animals = new Array() animals[0] = "lions" animals[1] = "giraffes" animals[2] = "penguins" var pics = new Array() pics[0] = "Images/lion.jpg" pics[1] = "Images/giraffe.jpg" pics[2] = "Images/penguin.jpg" var info = new Array() info[0] = "Lions are the second largest big cat species in the world (behind tigers" info[1] = "A male giraffe can weigh as much as a pick up truck!." info[2] = "Penguins spend around half their time in water and the other half on land. “ var x = confirm("Would you like to learn about an animal?") if (x == true) {varnum = Math.floor(Math.random()*3) document.getElementById("animal").innerHTML = animals[num]; document.getElementById("pic1").src = pics[num]; document.getElementById("firstp").innerHTML = info[num]; } </script> </body>

  5. Functions • Wouldn’t it be nice to be able to bring up a new animal and paragraph without having to reload the page each time? • We can! We can place the javascript inside a function, with a name, and then “call” the function again and again and again. • Functions: giving code a name. • Just like: • “Get gas” is a shortcut for all the steps necessary to put gas in your car • “Brush your teeth” again – shortcut for all the steps necessary to clean your teeth

  6. Defining a function function fname () { code that function does } fname is the name you give your function. The { and } start and end the function You put whatever you want to happen in between { and }

  7. link Example: <!DOCTYPE html><html><head> <meta charset= "utf-8" /></head> <body> <p id = "firstp"> This is a paragraph</p> <script> function guessinggame() { var x = Math.floor(Math.random()*6) + 1 var y = prompt("Enter a number between 1 and 6") if (x == y) { document.getElementById("firstp").innerHTML = "Play the lottery!"; } else { document.getElementById("firstp").innerHTML = “You are wrong!"; } } </script> </body></html>

  8. link Add a button: <!DOCTYPE html><html><head> <meta charset= "utf-8" /></head> <body> <p id = "firstp"> This is a paragraph</p> <input type = "button" value = "Click to play" onClick = "guessinggame()"> <script> function guessinggame() { var x = Math.floor(Math.random()*6) + 1 var y = prompt("Enter a number between 1 and 6") if (x == y) { document.getElementById("firstp").innerHTML = "Play the lottery!"; } else { document.getElementById("firstp").innerHTML = “You are wrong!"; } } </script> </body></html>

  9. Functions (continued) • Remember, functions are a way of giving some code a name. • Functions do not execute (run) automatically • So far, the code we have written runs only when we click on the button • Functions ONLY run when the code “calls” them • Functions can go in the head section of our html code or in the body • We usually put them in the head section • Reason: if there are images involved, by putting it in the head section, the images will preload. • If we put the code in the body section, the images won’t download until the function is called, making it run slow. • Plus, it is just sloppier

  10. Naming Functions • You pick the name for your function • Naming rules: Like variables: • No spaces!!!!! • No special characters • Cannot start with a number • Cannot be the same name as a variable you’re using • Cannot be the same name as something that javaScript already uses.

  11. link <!DOCTYPE html><html> <head> <meta charset= "utf-8" /> <script> functionshowconfirm() { varr=confirm("Press a button"); if (r==true) { document.getElementById('p1').innerHTML = "You pressed OK!"; } else { document.getElementById('p1').innerHTML = "You pressed Cancel!"; } } </script> </head> <body> <input type="button" value="Show confirm box" onclick="showconfirm()" > <p id = "p1"> Answer goes here </p> </body> </html>

  12. link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function colorpref() { var color = prompt("Please enter your favorite color!", ""); if (color == "purple") { document.getElementById('p1').innerHTML="You are artistic and moody! " } else if (color == "blue") { document.getElementById('p1').innerHTML="You are serene and calm." } else if (color == "red") { document.getElementById('p1').innerHTML="You are fiery and passionate!" } else if (color == "green") { document.getElementById('p1').innerHTML="You are earthy and comfortable." } } </script> </head> <body> <h1> color transcript </h1> <input type = "button" value = "find out what your color says about you!" onClick= “colorpref()"> <p id = 'p1'> Your info will go here </p> <p>Thanks for playing! <p> </body> </html>

  13. 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…. </p>" document.getElementById('p3').style.color = "#CCBBAA" document.getElementById('p3').style.backgroundColor = "#995500“ } function teainfo() { document.getElementById('p3').innerHTML = "<p>The origin of tea can be traced back to .. </p>" document.getElementById('p3').style.color = "#227700" document.getElementById('p3').style.backgroundColor = "#BBCC22“ } </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>

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

  15. Calling Functions (making them happen) • You’ve seen onClick=“functionname()” • 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.

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

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

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

  19. Comments • A way of including comments to yourself and to other people without the browser caring. • Comments start with /* and end with */. • Everything between these opening and closing markers is ignored by the browser • so anything between them won’t be run by javascript. <script> /* This script asks the user for a number. It uses that number to set the element with the id “ball1” to the width of the number the user entered */ varx = parseInt(prompt("What size should the ball's width be?"))document.getElementById("ball1").width = x </script> • Comments are designed for leaving information for people to read (as opposed to the browser) • But we can use comments to isolate what code is working and what isn’t

  20. Debugging: • You've got a problem – your code doesn't work. • There is a "bug“* in your code. (something that isn't correct • Could be a typo (most likely!!) • Could be a "syntax error" • e.g., document.getElementbyId('pic1).src = "cat.jpg"; • e.g., forgetting an opening or closing { } or ( ) • e.g., if (par1 = 'pic1') • Could be a logic error • These are the hardest to find! • When what you're trying to do won't be done in the way you're trying to do it. • How do you find the "bug"?? *Aside: the term debugging came from radio repairmen from before WWII. In fixing radios, the repairmen often had to clean out bug carcases in order to get the radios working.

  21. Finding the bug (Debugging) • Is your web site showing up as you want it to? • Probably an html error • Make sure the page is valid (you’ve got an opening and closing <html> tag and an opening and closing <body> tag inside it. • Check to make sure that if you opened a tag, you closed it properly. • Next, check to make sure everything opened is closed • Make sure your quotes (" ") open and close properly • Make sure the quotes are " "and not “” (from copying from ppt or word) • Go through and check for opening and closing () and {} • CHECK CAREFULLY FOR PROPER CAPITALIZATION • If nothing shows up, check to make sure you've properly entered, <script> </script>

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

  23. 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’s built in function length 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 • Note: we use the name of the variable, not Array! • Every array can be a different length, so we must specify which array we’re talking about.

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

  25. link What does this code do?: <!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") picArray[5] = newpic document.getElementById("pic1").src = picArray[5] } </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>

  26. 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) /* Do we like this???*/ 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)?

  27. 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)?

  28. What if we want to see our vacation pics in order? link <!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>

  29. Going back to the beginning… link <!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>

  30. 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") var size = picArray.length picArray[size] = newpic document.getElementById("pic1").src = picArray[size] } </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>

  31. link Going Backwards? <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> <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>

More Related