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? 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\”>”
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!“
What if we want to change the text? link <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
link var animals = new Array() animals[0] = "lions" <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) { var num = 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>
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
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 }
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>
Add a button: </script> </body></html> link <!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>
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
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.
link <!DOCTYPE html><html> <head> <meta charset= "utf-8" /> <script> function showconfirm() { var r=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>
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>
<!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 > <img src = "Images/coffee.jpg" width = "300" height = "280" alt = "pic of coffee" id = "coffee"> </td><td> <img src = "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()"> <input type = "button" value = "Learn more about tea" onClick = "teainfo()"> </td></tr> <tr><td colspan = "2" id = "p3"> </table> </body></html> link
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
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.
onMouseOver, onMouseOut 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>
onMouseOver,onMouseOut 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>
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><img src = "Images/woman.jpg" width = "300" height = "300" id = "pic1" onMouseOver = "changepic()" onMouseOut = "changeback()"> </p> </body></html>
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 */ var x = 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
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.
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>
Using an array of images: link Using an array of images: <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = 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() { var num = Math.floor(Math.random()*5) document.getElementById("pic1").src = picArray[num] } </script> </head> <body> <h1> Vacation Pics </h1> <p><img src =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>
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., var myArray = new Array() myArray[0]= "Images/safari1.jpg“ myArray[1]="Images/safari2.png“ myArray[2]="Images/safari3.jpg“ var num = 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.
Writing a function that adds a picture to the array: link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = 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() { var newpic = prompt("Enter new picture") var num = picArray.length picArray[num] = newpic document.getElementById("pic1").src = picArray[num] } </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 = "Click here to add a pic" onClick = "addpic()"> </body> </html>
What does this code do?: link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = 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() { var newpic = prompt("Enter new picture") picArray[5] = newpic document.getElementById("pic1").src = picArray[5] } </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 = "Click here to add a pic" onClick = "addpic()"> </body> </html>
Put it together… link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = 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() { var newpic = prompt("Enter new picture") var num = picArray.length picArray[num] = newpic document.getElementById("pic1").src = picArray[num] } function displaypic() { var num = Math.floor(Math.random()*5) /* Do we like this???*/ </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 = "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)?
Put it together… link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = 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() { var newpic = prompt("Enter new picture") var num = picArray.length picArray[num] = newpic document.getElementById("pic1").src = picArray[num] } function displaypic() { var num = Math.floor(Math.random()*picArray.length) </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 = "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)?
What if we want to see our vacation pics in order? <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = 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" var num = 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><img src = "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> link
Going back to the beginning… <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = 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" var num = -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><img src = "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> link
What if we add pictures? link <!DOCTYPE html><html><head><meta charset= "utf-8" /> <script > var picArray = 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" var num = -1 function displaypic() { num = num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("pic1").src = picArray[num] function addpic() { var newpic = 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><img src = "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> What if we add pictures?
<script > var picArray = new Array() picArray[0]="Images/safari1 <script > var picArray = 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" 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 function displaybak() { num = num - 1 if (num < 0) { num = picArray.length-1 function addpic() { var newpic = prompt("Enter new picture") var num = picArray.length picArray[num] = newpic </script> </head><body> <p><img src = "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> Going Backwards? link