Embed Size (px)
Citation preview
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
Objects (briefly)
An object contains variables (data or functions)
We access an object’s variables using the dot-notation
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
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
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
Document Object Model (DOM)
DOM
We can manipulate an HTML document using Javascript
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
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
<html> <body> <img id="im" src="baboon.jpg" height="400"> </body> </html>
<html> <body> <img id="im" src="baboon.jpg" height="400">
<script> function shrinkImage() { document.getElementById("im").style.height = 200; } shrinkImage(); </script> </body> </html>
<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>
<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>
<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>
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
Callbacks
<html> <script> var clicked = function() { alert("Thank you for clicking"); }; </script> <body> <button onclick="clicked();">Click me!</button> </body>
</html>
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
<html> <body> <button>click</button> <br> <img id="im" src="baboon.jpg" height="300"> </body> </html>
<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>
<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>
<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>
<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>
<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>
<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>
Client/Server
Client
Forms (checkbox input)
Forms (checkbox input)
Forms (checkbox input)
Forms (checkbox input)
Forms (checkbox input)
Forms (checkbox input)
Forms (text input)
Forms (text input)
Forms (password input)
Forms (password input)
Forms (radio input)
id should be name!
Forms (radio input)
Forms (radio input)
Forms (radio input)
Forms (radio input)
Forms (file upload)
Forms (file upload)
Forms (file upload)
Forms (select input)
Forms (file upload)
Forms (file upload)
callback
Forms (file upload)
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>
Focus
Focus
Focus
Focus
Focus
put scripts that impact page rendering at end of <body>
Disable
Disable
Disable
Submitting forms (client-side)
Submitting forms (client-side)
name (server) vs. id (client)
Submitting forms (client-side)
Submitting forms (client-side)
Submitting forms (client-side)
Submitting forms (client-side)
Submitting forms (client-side)
Submitting forms (client-side)
Submitting forms (client-side)
Submitting forms (client-side)
jQuery
