![Page 1: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/1.jpg)
Javascript & HTML
Why Javascript in HTML?
• Javascript can modify HTML on the fly
• Javascript can modify CSS on the fly
• Javascript can compute with data
• Javascript interfaces with external resources
• Javascript handles events from user
![Page 2: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/2.jpg)
Objects (briefly)
An object contains variables (data or functions)
We access an object’s variables using the dot-notation
![Page 3: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/3.jpg)
Objects (briefly)
An object contains variables (data or functions)
We access an object’s variables using the dot-notation
var s = “avocado”;
var n = s.length;
print( n ); 7
![Page 4: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/4.jpg)
Objects (briefly)
An object contains variables (data or functions)
We access an object’s variables using the dot-notation
var s = “avocado”;
print( s.toUpperCase() ); AVOCADO
![Page 5: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/5.jpg)
Objects (briefly)
An object contains variables (data or functions)
We access an object’s variables using the dot-notation
var s = “avocado”;
print( s.substring(1,4) ); voc
inclusive non-inclusive
![Page 6: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/6.jpg)
Document Object Model (DOM)
![Page 7: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/7.jpg)
DOM
We can manipulate an HTML document using Javascript
![Page 8: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/8.jpg)
<html> <body> <p> This is a simple web page that contains a script.</p>
<script> // some Javascript code alert("There be dragons here!"); </script>
</body> </html>
DOM
![Page 9: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/9.jpg)
<html> <body> <p> This is a simple web page that contains a script.</p>
<script> // some Javascript code alert("There be dragons here!"); </script>
</body> </html>
DOM
![Page 10: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/10.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> </body> </html>
DOM
![Page 11: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/11.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> </body> </html>
DOM
![Page 12: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/12.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> </body> </html>
DOM
![Page 13: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/13.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> </body> </html>
DOM
![Page 14: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/14.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> </body> </html>
DOM
![Page 15: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/15.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <script> var imgElement = document.getElementById("second_image"); // make the second image small imgElement.width = "50"; </script> </body> </html>
DOM
![Page 16: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/16.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <script> var imgElement = document.getElementById("second_image"); // make the second image small imgElement.width = "50"; </script> </body> </html>
DOM
![Page 17: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/17.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <script> var imgElement = document.getElementById("second_image"); // make the second image small imgElement.width = "50"; </script> </body> </html>
DOM
![Page 18: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/18.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <script> var imgElement = document.getElementById("second_image"); // make the second image small imgElement.width = "50"; </script> </body> </html>
DOM
![Page 19: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/19.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <script> var imgElement = document.getElementById("second_image"); // make the second image small imgElement.width = "50"; </script> </body> </html>
DOM
![Page 20: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/20.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <div id="note"></div> <script> var imgElement = document.getElementById("second_image"); imgElement.width = "50"; var noteElement = document.getElementById("note"); noteElement.innerHTML = "<p>Awww, cute!</p>"; </script> </body> </html>
DOM
![Page 21: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/21.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <div id="note"></div> <script> var imgElement = document.getElementById("second_image"); imgElement.width = "50"; var noteElement = document.getElementById("note"); noteElement.innerHTML = "<p>Awww, cute!</p>"; </script> </body> </html>
DOM
![Page 22: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/22.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <div id="note"></div> <script> var imgElement = document.getElementById("second_image"); imgElement.width = "50"; var noteElement = document.getElementById("note"); noteElement.innerHTML = "<p>Awww, cute!</p>"; </script> </body> </html>
DOM
![Page 23: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/23.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <div id="note"></div> <script> var imgElement = document.getElementById("second_image"); imgElement.width = "50"; var noteElement = document.getElementById("note"); noteElement.innerHTML = "<p>Awww, cute!</p>"; </script> </body> </html>
DOM
![Page 24: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/24.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <script> var imgElement = document.getElementById("second_image"); // hide the second image imgElement.style.display = "none"; </script> </body> </html>
DOM
![Page 25: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/25.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <script> var imgElement = document.getElementById("second_image"); // hide the second image imgElement.style.display = "none"; </script> </body> </html>
why would I want to place an image and then hide it?
DOM
![Page 26: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/26.jpg)
<html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="100"> <img id="second_image" src="baboon.jpg" width="100"> <script> var imgElement = document.getElementById("second_image"); // hide the second image imgElement.style.display = "none"; </script> </body> </html>
responsive design!
DOM
![Page 27: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/27.jpg)
<html> <body> <img id="im" src="baboon.jpg" width="100">
<script> window.onresize = showImageOrNot; window.onload = showImageOrNot;
function showImageOrNot() { if( document.body.clientWidth <= 650 ) { document.getElementById("im").style.display = "none"; } else { document.getElementById("im").style.display = ""; } } </script> </body> </html>
responsive design!
DOM
![Page 28: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/28.jpg)
<html> <body> <img id="im" src="baboon.jpg" width="100">
<script> window.onresize = showImageOrNot; window.onload = showImageOrNot;
function showImageOrNot() { if( document.body.clientWidth <= 650 ) { document.getElementById("im").style.display = "none"; } else { document.getElementById("im").style.display = ""; } } </script> </body> </html>
responsive design!
DOM
![Page 29: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/29.jpg)
<html> <body> <img id="im" src="baboon.jpg" width="100">
<script> window.onresize = showImageOrNot; window.onload = showImageOrNot;
function showImageOrNot() { if( document.body.clientWidth <= 650 ) { document.getElementById("im").style.display = "none"; } else { document.getElementById("im").style.display = ""; } } </script> </body> </html>
responsive design!
DOM
![Page 30: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/30.jpg)
<html> <body> <img id="im" src="baboon.jpg" width="100">
<script> window.onresize = showImageOrNot; window.onload = showImageOrNot;
function showImageOrNot() { if( document.body.clientWidth <= 650 ) { document.getElementById("im").style.display = "none"; } else { document.getElementById("im").style.display = ""; } } </script> </body> </html>
responsive design!
DOM
![Page 31: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/31.jpg)
<html> <body> <img id="im" src="baboon.jpg" width="100">
<script> window.onresize = showImageOrNot; window.onload = showImageOrNot;
function showImageOrNot() { if( document.body.clientWidth <= 650 ) { document.getElementById("im").style.display = "none"; } else { document.getElementById("im").style.display = ""; } } </script> </body> </html>
responsive design!
DOM
![Page 32: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/32.jpg)
EXERCISE
Create a webpage that displays baboon.jpg with a height of 400 pixels. Every 100ms reduce the image height by 5 pixels until the image height is 100 pixels.
Start slow: display image; change height just once; animate
Copy work before running.
http://www.cs.dartmouth.edu/~fwp/exercise/html.html
![Page 33: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/33.jpg)
<html> <body> <img id="im" src="baboon.jpg" height="400"> </body> </html>
![Page 34: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/34.jpg)
<html> <body> <img id="im" src="baboon.jpg" height="400">
<script> function shrinkImage() { document.getElementById("im").style.height = 200; } shrinkImage(); </script> </body> </html>
![Page 35: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/35.jpg)
<html> <body> <img id="im" src="baboon.jpg" height="400">
<script> var imHeight = 400; function shrinkImage() { imHeight = imHeight - 200; document.getElementById("im").style.height = imHeight; } </script> </body> </html>
![Page 36: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/36.jpg)
<html> <body> <img id="im" src="baboon.jpg" height="400">
<script> var imHeight = 400; function shrinkImage() { imHeight = imHeight - 5; document.getElementById("im").style.height = imHeight; } setInterval(shrinkImage, 100); </script> </body> </html>
![Page 37: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/37.jpg)
<html> <body> <img id="im" src="baboon.jpg" height="400">
<script> var imHeight = 400; function shrinkImage() { if( imHeight >= 100 ) { imHeight = imHeight - 5; document.getElementById("im").style.height = imHeight; } } setInterval(shrinkImage, 100); </script> </body> </html>
![Page 38: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/38.jpg)
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
![Page 39: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/39.jpg)
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
![Page 40: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/40.jpg)
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
![Page 41: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/41.jpg)
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
![Page 42: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/42.jpg)
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
![Page 43: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/43.jpg)
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
![Page 44: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/44.jpg)
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
![Page 45: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/45.jpg)
EXERCISE
Create a webpage with a button and the baboon image. If the image is shown, then clicking the button will hide the image. If the image is not shown, then clicking the button will reveal the image.
Start slow and build up to your solution.
Copy work before running.
http://www.cs.dartmouth.edu/~fwp/exercise/html.html
![Page 46: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/46.jpg)
<html> <body> <button>click</button> <br> <img id="im" src="baboon.jpg" height="300"> </body> </html>
![Page 47: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/47.jpg)
<html> <body> <button onclick="toggleImage();">click</button> <br> <img id="im" src="baboon.jpg" height="300"> <script> function toggleImage() { document.getElementById("im").style.display = "none"; } </script> </body> </html>
![Page 48: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/48.jpg)
<html> <body> <button onclick="toggleImage();">click</button> <br> <img id="im" src="baboon.jpg" height="300"> <script> var show = true; function toggleImage() { if( show ) { document.getElementById("im").style.display = "none"; show = false; } else { document.getElementById("im").style.display = ""; show = true; } } </script> </body> </html>
![Page 49: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/49.jpg)
<html> <body> <button onclick="toggleImage();">click</button> <br> <img id="im" src="baboon.jpg" height="300"> <script> var show = true; function toggleImage() { if( show ) { document.getElementById("im").style.display = "none"; } else { document.getElementById("im").style.display = ""; } show = !show; } </script> </body> </html>
![Page 50: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/50.jpg)
<html> <body> <button onclick="toggleImage();">click</button> <br> <img id="im" src="baboon.jpg" height="300"> <script> var show = true; function toggleImage() { if( show ) { document.getElementById("im").style.display = "none"; } else { document.getElementById("im").style.display = ""; } show = !show; } </script> </body> </html>
![Page 51: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/51.jpg)
<html> <body> <button onclick="toggleImage();">click</button> <br> <img id="im" src="baboon.jpg" height="300"> <script> function toggleImage() { var visible = document.getElementById("im").style.display; if( visible === "none" ) { document.getElementById("im").style.display = ""; } else { document.getElementById("im").style.display = "none"; } } </script> </body> </html>
![Page 52: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/52.jpg)
<html> <body> <button onclick="toggleImage();">click</button> <br> <img id="im" src="baboon.jpg" height="300"> <script> function toggleImage() { var visible = document.getElementById("im").style.display; if( visible === "none" ) { document.getElementById("im").style.display = ""; } else { document.getElementById("im").style.display = "none"; } } </script> </body> </html>
![Page 53: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/53.jpg)
Client/Server
![Page 54: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/54.jpg)
Client
![Page 55: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/55.jpg)
Forms (checkbox input)
![Page 56: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/56.jpg)
Forms (checkbox input)
![Page 57: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/57.jpg)
Forms (checkbox input)
![Page 58: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/58.jpg)
Forms (checkbox input)
![Page 59: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/59.jpg)
Forms (checkbox input)
![Page 60: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/60.jpg)
Forms (checkbox input)
![Page 61: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/61.jpg)
Forms (text input)
![Page 62: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/62.jpg)
Forms (text input)
![Page 63: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/63.jpg)
Forms (password input)
![Page 64: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/64.jpg)
Forms (password input)
![Page 65: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/65.jpg)
Forms (radio input)
id should be name!
![Page 66: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/66.jpg)
Forms (radio input)
![Page 67: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/67.jpg)
Forms (radio input)
![Page 68: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/68.jpg)
Forms (radio input)
![Page 69: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/69.jpg)
Forms (radio input)
![Page 70: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/70.jpg)
Forms (file upload)
![Page 71: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/71.jpg)
Forms (file upload)
![Page 72: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/72.jpg)
Forms (file upload)
![Page 73: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/73.jpg)
Forms (select input)
![Page 74: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/74.jpg)
Forms (file upload)
![Page 75: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/75.jpg)
Forms (file upload)
callback
![Page 76: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/76.jpg)
Forms (file upload)
![Page 77: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/77.jpg)
Exercise
http://www.cs.dartmouth.edu/~fwp/exercise/html.html
3 divs
use CSS to change background color and add padding
<textarea rows=“6” columns=“48”> delivery address </textarea>
![Page 78: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/78.jpg)
![Page 79: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/79.jpg)
![Page 80: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/80.jpg)
![Page 81: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/81.jpg)
![Page 82: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/82.jpg)
![Page 83: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/83.jpg)
![Page 84: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/84.jpg)
Focus
![Page 85: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/85.jpg)
Focus
![Page 86: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/86.jpg)
Focus
![Page 87: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/87.jpg)
Focus
![Page 88: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/88.jpg)
Focus
put scripts that impact page rendering at end of <body>
![Page 89: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/89.jpg)
Disable
![Page 90: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/90.jpg)
Disable
![Page 91: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/91.jpg)
Disable
![Page 92: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/92.jpg)
Submitting forms (client-side)
![Page 93: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/93.jpg)
Submitting forms (client-side)
name (server) vs. id (client)
![Page 94: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/94.jpg)
Submitting forms (client-side)
![Page 95: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/95.jpg)
Submitting forms (client-side)
![Page 96: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/96.jpg)
Submitting forms (client-side)
![Page 97: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/97.jpg)
Submitting forms (client-side)
![Page 98: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/98.jpg)
Submitting forms (client-side)
![Page 99: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/99.jpg)
Submitting forms (client-side)
![Page 100: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/100.jpg)
Submitting forms (client-side)
![Page 101: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/101.jpg)
Submitting forms (client-side)
![Page 102: Why Javascript in HTML? Javascript can modify HTML …fwp/lecture07/lecture7.pdf Here are two pictures of the same baboon:](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9c/html5/thumbnails/102.jpg)
jQuery