CSE 102 Introduction to Web Design and Programming JavaScript
JavaScript A client-side scripting language Common tasks performed by JavaScript in Web pages: asking the browser to display information making the Web page different depending on the browser monitoring user events & specifying reactions generating HTML code for parts of the page modifying a page in response to events checking correctness of input replacing & updating parts of a page changing the style & position of displayed elements dynamically JavaScript is used in www.sunysb.edu, how?
JavaScript background Developed by Netscape, released 1995 Supported by all major browsers The standard client-side scripting language JavaScript programs are not written in Java, these are two different languages JavaScript is object oriented, so there are similarities JavaScript programs are embedded inside Web pages and are executed by browsers
Starting XHTML Document <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>JavaScript Practice Page</title> <link rel="stylesheet" type="text/css" href="./css/javascript.css" /> </head> <body> </body> </html>
Add to your page <div id="date"> <p>Some Client Details:<br /> <script type="text/javascript"> var d = new Date(); var time = d.getHours() + ":" + d.getMinutes() + "."; var agent = navigator.userAgent; document.write(" Date: " + d + "<br />"); document.write(" Time: " + time + "<br />"); document.write(" Agent: " + agent + "</p>"); </script> </div>
javascript.css #date { position : absolute; left : 100px; top : 100px; width : 500px; color:#0000cc; background-color:#dddd00; padding : 10px; }
Add to your page <div id="image_rollover"> <h2>Image Rollover</h2> <p> <img onmouseover= "this.src='http://www.lapropagationduchaos.net/what/homer_vf/culture.gif'" onmouseout= "this.src='http://www.simpsoncrazy.com/homer/31.gif'" src="http://www.simpsoncrazy.com/homer/31.gif" style="border:none; float:left; margin-right:10px" width="100" height="100"> Rollover Homer to get him to taunt you. </p> </div>
Add to your Page <div id="history"> <p> <a href="javascript:history.back()">Back</a> <a href="javascript:history.forward()">Forward</a> <a href="javascript:history.go(-2)">Back 2 Pages</a> </p> </div>
Add to your Page <div id="dialogs"> <p> <a href="javascript:alert('This script is for giving alerts, like when your credit card number is invalid.');">Alert</a><br /> <a href="javascript:var email = prompt('This script will ask for input. Please enter you email address:'); confirm('Email is: ' + email);history.refresh()">Prompt</a><br /> <a href="javascript:window.open('http://www.lapropagationduchaos.net/what/homer_vf/culture.gif', 'Homer', 'scrollbars=no, toolbar=no, height=200, width=200, screenX=300, screenY=300'); history.refresh()"> Popup Homer</a> </p> </div>
JavaScript Files We can keep JavaScript files separate from .html files .js files are JavaScript files Then these programs may be used by many Web pages
Create a New Web Page <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Inch Centimeter Converter</title> <script type="text/javascript" src="convert.js" xml:space="preserve" ></script> </head> <body onload="init()"> <h2>Conversion Calculation via Javascript</h2> <p>Enter either value then click the convert button:</p> <table cellspacing="6"> <tr valign="top"> <td rowspan="1" colspan="1"> <input id="inch" name="inch" size="20" onfocus="reset()" type="text" /> <br /> Inches </td> <input type="button" value="Convert" onclick="convert()" /> <input id="cm" name="cm" size="20" onfocus="reset()" type="text" /> Centimeters </tr> </table> </body> </html>
convert.js var inf, cmf; function init() { inf = document.getElementById('inch'); cmf = document.getElementById('cm'); } function convert() { var i = inf.value.replace(/ /,""); if ( i ) { cmf.value = i * 2.54; return; var c = cmf.value.replace(/ /,""); if ( c ) { inf.value = c / 2.54; function reset() { inf.value = ""; cmf.value = "";
Make a new Web page <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Slide Demo with Arrow Keys</title> <script type="text/javascript" src="slidekey.js" xml:space="preserve"> </script> </head> <body onload="changeSlide()" style="background-color: #666" onkeydown="keyGo(event)"> <p style="text-align: center; color: white; font-weight: bold"> <img src="" id="myimg" name="myimg" alt="slide" /> <br /> Use left and right arrow keys to view the slides. </p> </body> </html>
slidekey.js var index = 0; // current slide index var pic = [ "homer1.jpg", "homer2.jpg", "homer3.jpg", "homer4.jpg", "homer5.jpg" ]; var slide = new Array(); var index = 0; // current slide index function loadImage(url) { if (document.images) { rslt = new Image(); rslt.src = url; return rslt; } if ( document.images ) { for (var n=0; n < pic.length; n++) { slide[n] = loadImage(pic[n]); function prevSlide() { if(--index < 0) { index = pic.length-1; changeSlide(); function nextSlide() { if( ++index >= pic.length) { index = 0 function changeSlide() { document.getElementById('myimg').src = slide[index].src; function keyGo(e) { if ( e.keyCode == 39 ) nextSlide(); else if ( e.keyCode == 37 ) prevSlide(); slidekey.js