Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download JavaScript - Computer Science, Stony Brook University
Document related concepts
no text concepts found
Transcript
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/hom
er_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>
<td rowspan="1" colspan="1">
<input type="button" value="Convert" onclick="convert()" />
</td>
<td rowspan="1" colspan="1">
<input id="cm" name="cm" size="20" onfocus="reset()" type="text" />
<br />
Centimeters
</td>
</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 />
<br />
Use left and right arrow keys to view the slides.
</p>
</body>
</html>
var pic = [ "homer1.jpg", "homer2.jpg", "homer3.jpg", "homer4.jpg", "homer5.jpg" ];
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
}
changeSlide();
}
function changeSlide() {
document.getElementById('myimg').src = slide[index].src;
}
function keyGo(e) {
if ( e.keyCode == 39 )
nextSlide();
else if ( e.keyCode == 37 )
prevSlide();
}
var slide = new Array();
slidekey.js
Related documents