ex10.html: change CSS style by class.
<?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>Example 10</title>
<style type="text/css">
p.first { color: green }
p.second { color: purple }
p.third { color: gray }
p.fourth {background: yellow; font-family: courier}
</style>
<script type="text/javascript">
<!--
function change() {
sel = document.getElementById("cls");
// sel = document.forms[0].elements[0];
// sel = document.forms[0].cls;
val = sel.value;
paragraph = document.getElementById("par");
paragraph.className = val;
}
// -->
</script>
</head>
<body>
<form action="">
<p>
<select id="cls" name="cls" onchange="change()">
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
<option value="fourth">fourth</option>
</select>
</p>
</form>
<p><br /><br /><br /><br /></p>
<p id="par" class="first" >This is a sentence.</p>
</body>
</html>
ex11.html: preload image.
<?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>Example 11</title>
<script type="text/javascript">
<!--
im1 = new Image;
im1.src = "ice.gif";
im2 = new Image;
im2.src = "post.gif";
// -->
</script>
</head>
<body>
<!-- move the mouse on the image will change the image -->
<!-- preload image -->
<p>
<img alt="[cat]" src="post.gif"
onmouseover="this.src='ice.gif'" onmouseout="this.src='post.gif'"/>
</p>
</body>
</html>
ex12.html: disappear.
<?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>Watch it Disappear!</title>
<script type="text/javascript">
<!--
function make_it_disappear()
{
var image=document.getElementById("cat").style;
if (image.visibility == "visible")
image.visibility = "hidden";
else if (image.visibility = "hidden")
image.visibility = "visible";
}
//-->
</script>
</head>
<body>
<h1 style="text-align: center">Watch it Disappear!</h1>
<p>
<img src="ice.gif" alt="ice"
id="cat" style="visibility: visible" />
</p>
<p>
<input type="button" value="Click me!" onclick="make_it_disappear();"/>
</p>
</body>
</html>
ex13.html: current time
<?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>Date</title>
</head>
<body>
<script type="text/javascript">
<!--
var mydate=new Date();
var year=mydate.getYear();
if (year < 1000)
year+=1900;
var month=mydate.getMonth()+1;
var day=mydate.getDate()
document.writeln("<p>" + month + "/" + day + "/" + year + "</p>");
var hr = mydate.getHours();
var min = mydate.getMinutes();
var sec = mydate.getSeconds();
document.writeln("<p>" + hr + ":" + min + ":" + sec +"</p>");
//-->
</script>
</body>
</html>
ex14.html: a game
<?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>Simulation of Craps Game</title>
<script type="text/javascript">
<!--
var WON = 0, LOST = 1, CONTINUE_ROLLING = 2;
// test the status of the game
var firstRoll = true, sumOfDice = 0, myPoint = 0,
gameStatus = CONTINUE_ROLLING; // game not over yet
// process one roll of dice
function play(craps)
{
sumOfDice = rollDice(craps);
if (firstRoll) { // if we are rolling dice for first time
switch (sumOfDice) {
case 7 : case 11 : // win on first roll
gameStatus = WON;
craps.point.value = ""; // clear point field
break;
case 2 : case 3 : case 12 : // lose on first roll
gameStatus = LOST;
craps.point.value = ""; // clear point field
break;
default : // every other sum of dice
gameStatus = CONTINUE_ROLLING;
myPoint = sumOfDice;
craps.point.value = myPoint;
firstRoll = false; // now, we continue rolling
}
}
else {
if (sumOfDice == myPoint) // user wins
gameStatus = WON;
else if (sumOfDice == 7) // automatically lose
gameStatus = LOST;
// Otherwise, the status stays the same - want to keep rolling
// dice.
}
if (gameStatus == CONTINUE_ROLLING)
window.status = "Roll again"; // Puts message in status bar of
// window.
else {
if (gameStatus == WON)
window.status = "Player wins. Click Roll Dice to play again.";
else
window.status = "Player loses. Click Roll Dice to play again.";
// Now, we are done this game, so if we play again, we are on the
// first roll, so:
firstRoll = true;
}
return false;
}
// roll the dice
function rollDice(craps) {
var die1, die2, workSum;
die1 = Math.floor(1 + Math.random() * 6);
die2 = Math.floor(1 + Math.random() * 6);
workSum = die1 + die2;
craps.firstDie.value = die1;
craps.secondDie.value = die2;
craps.sum.value = workSum;
return workSum;
}
// -->
</script>
</head>
<body>
<h1 style="text-align: center">Play Craps!</h1>
<!-- create a form to run the craps game -->
<form action="">
<table>
<tr><th>Die 1</th>
<td><input type="text" name="firstDie" /></td></tr>
<tr><th>Die 2</th>
<td><input type="text" name="secondDie" /></td></tr>
<tr><th>Sum</th>
<td><input type="text" name="sum" /></td></tr>
<tr><th>Point</th>
<td><input type="text" name="point" /></td></tr>
<!-- onclick determines what happens when the user clicks the button -->
<tr><td colspan="2"><input type="button" value="Roll Dice"
onclick="play(form);" />
</td></tr>
</table>
</form>
</body>
</html>