pic of coffee pic of tea
link">
pic of coffee pic of tea
link">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

<!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> function coffeeinfo() { document.getElementById('p3').innerHTML = "<p>The word 'coffee' was.

Published byElena Dart Modified over 10 years ago

Similar presentations

Presentation on theme: "<!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> function coffeeinfo() { document.getElementById('p3').innerHTML = "<p>The word 'coffee' was."— Presentation transcript:

1

2 <!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 ><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()"> </td><td> <input type = "button" value = "Learn more about tea" onClick = "teainfo()"> <tr><td colspan = "2" id = "p3"> </table> </body></html> link

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

4 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>

5 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>

6 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>

7 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 = "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>

8 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., 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

9 Now let’s write 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>

10 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) </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)?

11 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)?

12 What if we want to see our vacation pics in order?
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 = 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>

13 Going back to the beginning…
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] </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>

14 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 num = picArray.length picArray[num] = newpic </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>

15 <!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] 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> <h1> Vacation Pics </h1> <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> </body> </html> link Going Backwards?

Download ppt "<!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> function coffeeinfo() { document.getElementById('p3').innerHTML = "<p>The word 'coffee' was."

Similar presentations

Chapter 08: Adding Adding Interactivity Interactivity With With Behaviors Behaviors By Bill Bennett Associate Professor MSJC CIS MVC.

Chapter 08: Adding Adding Interactivity Interactivity With With Behaviors Behaviors By Bill Bennett Associate Professor MSJC CIS MVC.
Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard -

Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard -
Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.

Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.
JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.

JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.
document.getElementById Used to change anything in your document (web page) that has an id Then you can change different aspects of the element with that.

document.getElementById Used to change anything in your document (web page) that has an id Then you can change different aspects of the element with that.
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.
Georgia Institute of Technology JavaScript part 2 Barb Ericson Georgia Institute of Technology May 2006.

Georgia Institute of Technology JavaScript part 2 Barb Ericson Georgia Institute of Technology May 2006.
JavaScript (Part 2) CS 183 4/13/2010. JavaScript (Part 2) Will cover: ◦ For.. In ◦ Events ◦ Try.. Catch, Throw ◦ Objects.

JavaScript (Part 2) CS 183 4/13/2010. JavaScript (Part 2) Will cover: ◦ For.. In ◦ Events ◦ Try.. Catch, Throw ◦ Objects.
NAMEd anchors Enabling users to jump to specific points within Web documents.

NAMEd anchors Enabling users to jump to specific points within Web documents.
20-Jun-15 JavaScript and HTML Simple Event Handling.

20-Jun-15 JavaScript and HTML Simple Event Handling.
Computer Science 103 Chapter 4 Advanced JavaScript.

Computer Science 103 Chapter 4 Advanced JavaScript.
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.

JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
NAMEd anchors Enabling users to jump to specific points within Web documents.

NAMEd anchors Enabling users to jump to specific points within Web documents.
JavaScript Client Side scripting. Client-side Scripts Client-side scripts, which run on the user’s workstation can be used to: Validate user inputs entered.

JavaScript Client Side scripting. Client-side Scripts Client-side scripts, which run on the user’s workstation can be used to: Validate user inputs entered.
UNIT 6 JAVASCRIPT EVENT HANDLERS &WEB BROWSERS DETECTION.

UNIT 6 JAVASCRIPT EVENT HANDLERS &WEB BROWSERS DETECTION.
JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.

JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.
HTML Forms/Events (Instructor Lesson) The Event model HTML Forms Custom Events 1.

HTML Forms/Events (Instructor Lesson) The Event model HTML Forms Custom Events 1.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.

CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.
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.
Chapter 19: Adding JavaScript

Chapter 19: Adding JavaScript

Similar presentations

Ads by Google