CCF_100/ASDV-WebDev
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ch04

Browse Source
This commit is contained in:
Chloe Fontenot 🏳️‍⚧️
2023-03-14 08:51:55 -05:00
parent c9bb4ba5c5
commit bea3068292
319 changed files with 1275 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Chapter ZIPs/JavaScript/ch04/blue_bean.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 940 B

142
Chapter ZIPs/JavaScript/ch04/carla/carla.css Executable file
View File

@@ -0,0 +1,142 @@
body {
background-color: #FFFFFF;
background-image: url(background.gif);
color: #0000FF;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}
#container { margin-left: auto;
margin-right: auto;
width:85%;
min-width:700px;
}
#logo {
text-align:center;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 30px;
padding-bottom: 20px;
}
#nav {
float: left;
width: 200px;
padding-top: 10px;
text-align:left;
color: #FF0000;
font-size: 14px;
}
#nav a {
text-decoration:none;
margin: 15px;
display: block;
color: #FF0000;
font-size: 14px;
font-weight: bold;
}
#content {
margin-left: 150px;
padding: 30px;
overflow:auto;
border: medium groove #0000FF;
line-height: 135%;
}
.floatright {padding-left:20px;
float:right;
}
.floatleft {
float:left;
padding: 2px 30px 20px;
}
#footer {
font-size: 16px;
font-style: normal;
text-align: justify;
border-top: thin none;
padding-top: 20px;
padding-bottom: 20px;
color: #FF0000;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
}
h2 { text-transform: uppercase;
color: #0000FF;
font-size: 36px;
border-bottom: 1px none;
margin-right: 20px;
}
h3 {
color: #0000FF;
border-bottom: thin none;
margin-right: auto;
text-align: left;
padding-top: 20px;
padding-right: 100px;
padding-bottom: 20px;
padding-left: 100px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
}
.details { padding-left:20%;
padding-right:20%;
}
img {border:0 none; }
.content {
margin: 20px;
padding: 20px;
}
a {
color: #FF0000;
text-decoration: none;
margin: 15px;
color: #FF0000;
font-size: 14px;
font-weight: bold;
}
a:hover {
color: #FFFF00;
background-color: #0000FF;
}
h4 {
line-height: 150%;
margin-right: 20%;
margin-left: 15%;
text-align: center;
}
h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 36pt;
text-align: center;
margin-right: 15%;
margin-left: 20%;
}
p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
line-height: 120%;
font-weight: bold;
color: #0000FF;
}
.flt_img {
float: none;
padding-top: 3px;
padding-right: 20px;
padding-bottom: 3px;
padding-left: 20px;
}
specialh4 {
line-height: 150%;
margin-right: 20%;
margin-left: 15%;
text-align: center;
}

136
Chapter ZIPs/JavaScript/ch04/carla/carla_math_whiz.html Executable file
View File

@@ -0,0 +1,136 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Carla's Classroom | Become a Math Whiz!</title>
<link href="carla.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function addIt()
{
levelOne();
function levelOne()
{
var count1 = 1;
var choice = "y";
var num = 0;
var countX = 1;
//Prompt for default or enter number of problems for this level
var choice = prompt("Do you want to continue only until you get 5 correct? Type 'y' for yes or 'n' for no:", " ");
if ((choice == "y") || (choice == "Y")) //if student chooses default
{
num = count1;
choice = "y";
}
else
if ((choice != "y")||(choice !="Y")) //if student chooses to enter a number
{
num = parseInt(prompt("How many problems in total do you want to try?", " "));
choice = "n";
}
//loop to continue generating addition problems
while (((choice == "y") && (count1 < 6)) || ((choice == "n") && (countX <= num)))
{
var num1a = (Math.floor(Math.random() * 10)) + 1;
var num1b = (Math.floor(Math.random() * 10)) + 1;
var sum1 = num1a + num1b;
var response = parseInt(prompt("What is the sum of " + num1a + " and " + num1b + " ?"));
if (response == sum1)
{
count1 = count1 + 1;
var result = "correct!";
alert(result);
}
else
{
result = "incorrect";
alert(result);
}
countX = countX + 1
}
alert("You completed " + (countX - 1) + " problems and got " + (count1 - 1) + " correct.");
//Level One problems are done, call Level Two
var move = prompt("Do you want to move to Level Two? Type 'y' for yes or 'n' to end this session", " ");
if ((move == "y") || (move == "Y"))
{
levelTwo();
}
else
alert("This session is ended.");
}
function levelTwo()
{
var count2 = 1;
alert("you're at level 2");
while (count2 < 6)
{
var num2a = (Math.floor(Math.random() * 100)) + 1;
var num2b = (Math.floor(Math.random() * 100)) + 1;
var sum2 = num2a + num2b;
var response = parseInt(prompt("What is the sum of " + num2a + " and " + num2b + " ?"));
if (response == sum2)
{
count2 = count2 + 1;
var result = "correct!";
alert(result);
}
else
{
result = "incorrect";
alert(result);
}
}
levelThree();
}
function levelThree()
{
var count3 = 1;
alert("you're at level 3");
while (count3 < 6)
{
var num3a = (Math.floor(Math.random() * 100)) + 1;
var num3b = (Math.floor(Math.random() * 100)) + 1;
var num3c = (Math.floor(Math.random() * 100)) + 1;
var sum3 = num3a + num3b + num3c;
var response = parseInt(prompt("What is the sum of " + num3a + ", " + num3b + ", and " + num3c + " ?"));
if (response == sum3)
{
count3 = count3 + 1;
var result = "correct!";
alert(result);
}
else
{
result = "incorrect";
alert(result);
}
}
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/arith_big.jpg" class="floatleft" />
<h1 id="logo">Become a Math Whiz!</h1>
<div align="left">
<blockquote>
<a href="index.html"><img src="images/owl_button.jpg" />Home</a>
<a href="carla.html"><img src="images/carla_button.jpg" />Meet Carla </a>
<a href="reading.html"><img src="images/read_button.jpg" />Reading</a>
<a href="writing.html"><img src="images/write_button.jpg" width="50" height="50" />Writing</a>
<a href="math.html"><img src="images/arith_button.jpg" />Arithmetic</a>
<br /></blockquote> </div>
<div id="content">
<p>There are two parts to this arithmetic test: addition and subtraction. Each part will increase in difficulty
as you prove you are ready for harder problems. You may choose whether you want to move to another
level after getting 5 questions correct or you may choose how many problems you want to
attempt at any level.</p>
<p><input type="button" onclick="addIt()" value="begin the addition test" /> </p>
<p><input type="button" onclick="subIt()" value="begin the subtraction test" /> </p>
</div>
</div>
<div id="footer"> <h3>*Carla's Motto: Never miss a chance to teach -- and to learn!</h3>
</div>
</body>
</html>

BIN
Chapter ZIPs/JavaScript/ch04/carla/images/arith_big.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Chapter ZIPs/JavaScript/ch04/carla/images/arith_button.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
Chapter ZIPs/JavaScript/ch04/carla/images/carla_button.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
Chapter ZIPs/JavaScript/ch04/carla/images/carla_pic.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
Chapter ZIPs/JavaScript/ch04/carla/images/owl_button.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 527 B

BIN
Chapter ZIPs/JavaScript/ch04/carla/images/owl_logo.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
Chapter ZIPs/JavaScript/ch04/carla/images/read_button.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
Chapter ZIPs/JavaScript/ch04/carla/images/write_button.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
Chapter ZIPs/JavaScript/ch04/carla/images/writing_big.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

47
Chapter ZIPs/JavaScript/ch04/carla/math.html Executable file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Carla's Classroom | Math Lessons</title>
<link href="carla.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.style1 {font-size: 24px}
.style2 {font-size: 18px}
.style3 {
color: #0000FF;
font-size: 18px;
}
-->
</style>
</head>
<body>
<div id="container">
<img src="images/owl_logo.JPG" class="floatleft" />
<h1 id="logo"><em>Carla's Classroom</em></h1>
<p>&nbsp; </p>
<div style="clear:both;"></div>
<div align="left">
<blockquote>
<a href="index.html"><img src="images/owl_button.jpg" />Home</a>
<a href="carla.html"><img src="images/carla_button.jpg" width="50" height="65" />Meet Carla </a>
<a href="reading.html"><img src="images/read_button.jpg" width="50" height="50" />Reading</a>
<a href="writing.html"><img src="images/write_button.jpg" width="50" height="50" />Writing</a>
<a href="math.html"><img src="images/arith_button.jpg" width="50" height="50" />Arithmetic</a>
<br />
</blockquote>
</div>
<div id="content">
<p><img src="images/carla_pic.jpg" width="83" height="108" class="floatleft" /> Arithmetic Lessons: </p>
<p><a href="carla_adding.html">Addition Exercise</a>
<p><a href="carla_math_whiz.html">Advanced Addition and Subtraction Exercises</a>
</div>
<div id="footer"> <h3><span class="style1">*</span><span class="style3">Carla's Motto: </span><span class="style2">Never miss a chance to
teach -- and to learn!</span></h3>
</div>
</div>
</body>
</html>

45
Chapter ZIPs/JavaScript/ch04/ex_4_10.html Executable file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.10</title>
<script>
function getClass()
{
document.write('<table width="40%" align = "center">');
var fname = " ";
var lname = " ";
var id = " ";
var username = 0;
var course = " ";
course = prompt("What is the name of this course?");
document.write('<tr><td colspan =4 align = "center">' + course + '</td></tr>');
document.write('<tr><td>first name</td><td>last name</td><td>ID number</td><td>username</td></tr>');
fname = prompt("Enter one student's first name:");
lname = prompt("Enter the student's last name:");
id = prompt("Enter the student's identification number:");
do
{
username = fname + id;
document.write('<tr><td>' + fname + '</td><td>' + lname + '</td><td>' + id + '</td><td>' + username + '</td></tr>');
fname = prompt("Enter another student's first name or enter 'X' when finished:");
lname = prompt("Enter another student's last name or enter 'X' when finished:");
id = prompt("Enter another student's identification number or enter -9 when finished:");
}
while (id != -9)
document.write('</table>');
}
</script>
</<head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Create Usernames</h1>
<p>You can enter each student's name and ID number and <br />
this program will create usernames for you</p>
<tr><td><p>&nbsp;</p>
<p><input type="button" id="username" value="Click to begin entering names" onclick="getClass();" /></p>
</td></tr>
</table>
</body>
</html>

16
Chapter ZIPs/JavaScript/ch04/ex_4_11.html Executable file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.11</title>
<script>
var name = "MaryAnn";
var greeting = "Welcome home, ";
document.write('<p>' + greeting + name + '!</p>');
document.write('<p>' + greeting.toUpperCase() + name.toLowerCase() + '!</p>');
document.write('<p>' + greeting.toLowerCase() + name.toUpperCase() + '!</p>');
</script>
</<head>
<body>
</body>
</html>

27
Chapter ZIPs/JavaScript/ch04/ex_4_12.html Executable file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.12</title>
<script>
var j = 1; j++;
document.write("<h3> if j = 1, then j++ is " + j++ + "!</p>");
j = 1; j--;
document.write("<h3> if j = 1, then j-- is " + j + "!</p>");
j = 5; j+=2;
document.write("<h3> if j = 5, then j+=2 is " + j + "!</p>");
j = 5; j-=2;
document.write("<h3>if j = 5, then j-=2 is " + j + "!</p>");
j = 4; j*=3;
document.write("<h3> if j = 4, then j*=3 is " + j + "!</p>");
j = 4; j/=2;
document.write("<h3> if j = 4, then j/=2 is " + j + "!</p>");
j = 1; ++j;
document.write("<h3> if j = 1, then ++j is " + j + "</p>");
j = 8; --j;
document.write("<h3> if j = 8, then --j is " + j + "!</p>");
</script>
</head>
<body>
</body>
</html>

26
Chapter ZIPs/JavaScript/ch04/ex_4_13.html Executable file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.13</title>
<script>
var counterA = 8;
var counterB = 0;
document.write('<table align = "center" <tr><td>');
document.write('<h1>&nbsp;<br />&nbsp;</h1>');
document.write("<h3> counterA = " + counterA + "</h3>");
counterB = counterA++;
document.write("<h3> counterB = counterA++ so counterB now = " + counterB + "</h3>");
document.write("<h3> counterA++ = " + counterA + "</h3>");
counterC = 8;
counterD = 0;
document.write("<h3> counterC = " + counterC + "</h3>");
counterD = ++counterC;
document.write("<h3> counterD = ++counterC so counterD now = " + counterD + "</h3>");
document.write("<h3> ++counterC = " + counterC + "</h3>");
document.write('</td></tr></table>');
</script>
</head>
<body>
</body>
</html>

29
Chapter ZIPs/JavaScript/ch04/ex_4_14.html Executable file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.14</title>
<script>
function countBeans()
{
var i = 0;
var beans = 4;
beanImage = ("<img src = 'blue_bean.jpg' >");
document.write("<table align = 'center'><tr><td>");
document.write("<h1>&nbsp;<br /> Here are your beans:</h1>");
for (i = 0; i <= beans; i++)
document.write(beanImage + "&nbsp; &nbsp;");
document.write("</td></tr></table>");
}
</script>
</head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Count Beans!</h1>
<tr><td><p>&nbsp;</p>
<p><input type="button" id="beans" value="Click to count beans" onclick="countBeans();" /></p>
</td></tr>
</table>
</body>
</html>

28
Chapter ZIPs/JavaScript/ch04/ex_4_15.html Executable file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.15</title>
<script>
function countBeans()
{
var beans = 4;
beanImage = ("<img src = 'blue_bean.jpg' >");
document.write("<table align = 'center'><tr><td>");
document.write("<h1>&nbsp;<br /> Here are your beans:</h1>");
for (var i = beans; i >= 0; i--)
document.write(beanImage + "&nbsp; &nbsp;");
document.write("</td></tr></table>");
}
</script>
</head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Count Beans!</h1>
<tr><td><p>&nbsp;</p>
<p><input type="button" id="beans" value="Click to count beans" onclick="countBeans();" /></p>
</td></tr>
</table>
</body>
</html>

28
Chapter ZIPs/JavaScript/ch04/ex_4_16.html Executable file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.16</title>
<script>
function countBeans()
{
var i = 0;
beanImage = ("<img src = 'blue_bean.jpg' >");
document.write("<table align = 'center'><tr><td>");
document.write("<h1>&nbsp;<br /> Here are your beans:</h1>");
for (i = 0; i <= 7; i++)
document.write(beanImage + "&nbsp; &nbsp;");
document.write("</td></tr></table>");
}
</script>
</head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Count Beans!</h1>
<tr><td><p>&nbsp;</p>
<p><input type="button" id="beans" value="Click to count beans" onclick="countBeans();" /></p>
</td></tr>
</table>
</body>
</html>

28
Chapter ZIPs/JavaScript/ch04/ex_4_17.html Executable file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.17</title>
<script>
function countBeans()
{
var i = 1;
beanImage = ("<img src = 'blue_bean.jpg' >");
document.write("<table align = 'center'><tr><td>");
document.write("<h1>&nbsp;<br /> Here are your beans:</h1>");
for (i = 1; i < 7; i++)
document.write(beanImage + "&nbsp; &nbsp;");
document.write("</td></tr></table>");
}
</script>
</head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Count Beans!</h1>
<tr><td><p>&nbsp;</p>
<p><input type="button" id="beans" value="Click to count beans" onclick="countBeans();" /></p>
</td></tr>
</table>
</body>
</html>

29
Chapter ZIPs/JavaScript/ch04/ex_4_18.html Executable file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.18</title>
<script>
function countBeans()
{
var i = 0;
var beans = 12;
beanImage = ("<img src = 'blue_bean.jpg' >");
document.write("<table align = 'center'><tr><td>");
document.write("<h1>&nbsp;<br /> Here are your beans:</h1>");
for (i = 0; i < (beans - i); i++)
document.write(beanImage + "&nbsp; &nbsp;");
document.write("</td></tr></table>");
}
</script>
</head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Count Beans!</h1>
<tr><td><p>&nbsp;</p>
<p><input type="button" id="beans" value="Click to count beans" onclick="countBeans();" /></p>
</td></tr>
</table>
</body>
</html>

31
Chapter ZIPs/JavaScript/ch04/ex_4_19.html Executable file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.19</title>
<script>
function countBeans()
{
var i = 0;
var beans = 12;
beanImage = ("<img src = 'blue_bean.jpg' >");
document.write("<table align = 'center'><tr><td>");
document.write("<h1>&nbsp;<br /> Here are your beans:</h1>");
for (i = 0; i != beans; i++)
{
document.write(beanImage + "&nbsp; &nbsp;");
beans--;
}
document.write("</td></tr></table>");
}
</script>
</<head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Count Beans!</h1>
<p><input type="button" id="beans" value="Click to count beans" onclick="countBeans();" /></p>
</td></tr>
</table></body>
</html>

25
Chapter ZIPs/JavaScript/ch04/ex_4_20.html Executable file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.20</title>
<script>
function getBracelet()
{
var bracelets = (prompt("How many bracelets do you want?"," "));
while (isNaN(bracelets))
{
bracelets = prompt("Please enter a positive number. How many bracelets do you want?"," ");
}
document.write("You are ordering " + bracelets + " bracelets. Thank you!");
}
</script>
</<head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Order Your Bracelets Now!</h1>
<p><input type="button" id="bracelets" value="Order bracelets" onclick="getBracelet();" /></p>
</td></tr>
</table></body>
</html>

25
Chapter ZIPs/JavaScript/ch04/ex_4_21.html Executable file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.21</title>
<script>
function getBracelet()
{
var bracelets = (prompt("How many bracelets do you want?"," "));
while (isNaN(bracelets) || (bracelets < 0))
{
bracelets = prompt("Please enter a positive number. How many bracelets do you want?"," ");
}
document.write("You are ordering " + bracelets + " bracelets. Thank you!");
}
</script>
</<head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Order Your Bracelets Now!</h1>
<p><input type="button" id="bracelets" value="Order bracelets" onclick="getBracelet();" /></p>
</td></tr>
</table></body>
</html>

28
Chapter ZIPs/JavaScript/ch04/ex_4_24.html Executable file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.24</title>
<script>
function getBracelet()
{
var bracelets = (prompt("How many bracelets do you want?"," "));
var check = bracelets % 1;
while ((isNaN(bracelets)) || (check != 0) || (bracelets < 0))
{
bracelets = prompt("Please enter a positive whole number. How many bracelets do you want?"," ");
var check = bracelets % 1;
}
document.getElementById("theOrder").innerHTML ="<h3>You are ordering " + bracelets + " bracelets.<br /> Thank you.</h3>";
}
</script>
</<head>
<body>
<table align ="center" width ="70%" ><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Order Your Bracelets Now!</h1>
<p><input type="button" id="bracelets" value="Order bracelets" onclick="getBracelet();" /></p>
</td></tr>
<tr><td id="theOrder"><p>&nbsp;</p></td></tr>
</table></body>
</html>

47
Chapter ZIPs/JavaScript/ch04/ex_4_27.html Executable file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.27</title>
<script>
function getEmail()
{
var atSign = "@";
email = prompt("Enter your email address", " ");
numChars = email.length;
okSign = 1;
for( j = 1; j < numChars; j++) //start at 1 because need at least 1 char before @
{
if (email.charAt(j) == atSign)
{
okSign = 0;
}
}
if (okSign == 0)
{
if (email.charAt(numChars - 4) != ".")
{
document.getElementById("message").innerHTML ="<h3>You entered " + email + ". This is not a valid email address.</h3>";
}
else
{
document.getElementById("message").innerHTML = "<h3>You entered " + email + ". This is a valid email address.</h3>";
}
}
else
{
document.getElementById("message").innerHTML = "<h3>You entered " + email + ". This is not a valid email address.</h3>";
}
}
</script>
</<head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Enter your contact information</h1>
<tr><td><p>&nbsp;</p>
<p><input type="button" id="email" value="Begin now" onclick="getEmail();" /></p>
</td></tr>
<tr><td id ="message"><p>&nbsp;</p></td></tr>
</table></body>
</html>

18
Chapter ZIPs/JavaScript/ch04/ex_4_28.html Executable file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.28</title>
<script>
var str="Kitten";
document.write("for the string: " + str + "<br />");
for (j = 0; j < str.length; j++)
{
document.write("Letter number " + (j+1) + " is " + str.charAt(j) + ". ");
document.write(" The Unicode value is: " + str.charCodeAt(j) + "<br />");
}
</script>
</head>
<body>
</body>
</html>

15
Chapter ZIPs/JavaScript/ch04/ex_4_29.html Executable file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.28</title>
<script>
document.write(String.fromCharCode(72,69,76,76,79));
document.write(", ");
document.write(String.fromCharCode(66,79,82,73,83));
</script>
</head>
<body>
</body>
</html>

34
Chapter ZIPs/JavaScript/ch04/ex_4_7.html Executable file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.7</title>
<script>
function getPlayers()
{
var player = prompt("Enter the name of a player:"," ");
var points = prompt("Enter the points this player has:"," ");
document.write('<h1>&nbsp;</h1>');
document.write('<table width="40%" border="1" align = "center">');
while (player != "done")
{
document.write('<tr>');
document.write('<td width="50">' + player + '</td>');
document.write('<td width = "50">' + points + '</td>');
document.write('</tr>');
player = prompt("Enter the name of a player or enter 'done' when you're finished:"," ");
points = prompt("Enter the points this player has or 0 if finished:"," ");
}
document.write('</table>');
}
</script>
</<head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Today's Players</h1>
<h3>Click to enter players' names</h3>
<p><input type="button" id="players" value="Enter today's players" onclick="getPlayers();" /></p>
</td></tr>
</table></body>
</html>

49
Chapter ZIPs/JavaScript/ch04/ex_4_8.html Executable file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.8</title>
<script>
function getStuff()
{
document.write('<table width="40%" align = "center">');
var num = 0;
var item = " ";
document.write('<h1>&nbsp;</h1>');
while (num < 10)
{
item = prompt("What do you choose for item number " + (num + 1) + "?");
document.write('<tr>');
document.write('<td>item ' + (num + 1) + ' : ' + item + '</td>');
document.write('</tr>');
num = num + 1;
}
document.write('</table>');
}
</script>
</<head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Select Your Gear for the Game</h1>
<p>You are allowed to pick up to 10 items from the following list before the game begins:</p>
<table width = "60%">
<tr><td colspan="2"><h3 align="center">Supplies Available</h3></td></tr>
<tr><td>bag of food (1-day supply)</td><td>bottle of water (1-day supply)</td></tr>
<tr><td>sword</td><td>shield</td></tr>
<tr><td>kevlar vest</td><td>hunting knife</td></tr>
<tr><td>bow with 1 quiver of arrows</td><td>10 extra arrows</td></tr>
<tr><td>backpack</td><td>slingshot</td></tr>
<tr><td>box of 5 firestarters</td><td>pet goat</td></tr>
<tr><td>falcon</td><td>falconer's gloves</td></tr>
<tr><td>notebook</td><td>pen and pencil set</td></tr>
<tr><td>walking stick</td><td>hammer</td></tr>
<tr><td>shovel</td><td>1-person tent</td></tr>
</table>
<tr><td><p>&nbsp;</p>
<p><input type="button" id="gear" value="Click to enter your selections" onclick="getStuff();" /></p>
</td></tr>
</table></body>
</html>

48
Chapter ZIPs/JavaScript/ch04/ex_4_9.html Executable file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Example 4.9</title>
<script>
function getPay()
{
document.write('<table width="40%" align = "center">');
var name = " ";
var hours = 0;
var rate = 0;
var grossPay = 0;
var netPay = 0;
document.write('<tr><td>name</td><td>gross pay</td><td>net pay</td></tr>');
name = prompt("Enter the first employee's name:");
do
{
hours = parseFloat(prompt("How many hours did " + name + " work this week?"));
rate = parseFloat(prompt("What is " + name + "'s hourly pay rate?"));
if (hours > 40)
grossPay = (40 * rate) + ((hours - 40)*1.5*rate);
else
grossPay = hours * rate;
netPay = grossPay * .85;
document.write('<tr><td>' + name + '</td><td>$ ' + grossPay.toFixed(2) + '</td><td>$ ' + netPay.toFixed(2) + '</td></tr>');
name = prompt("Enter another employee's name or enter 'done' when finished:");
}
while (name != "done")
document.write('</table>');
}
</script>
</<head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Calculate Employees Paychecks</h1>
<p>You can enter payroll information for all employees. Paychecks are calculated as shown:</p>
<table width = "70%">
<tr><td>Gross pay for first 40 hours:</td><td>hourly rate * hours worked</td></tr>
<tr><td>Overtime:</td><td>overtime hours * 1.5 * hourly rate</td></tr>
<tr><td>Tax rate for all employees: </td><td>15% of gross pay</td></tr>
</table>
<tr><td><p>&nbsp;</p>
<p><input type="button" id="pay" value="Click to begin entering employees" onclick="getPay();" /></p>
</td></tr>
</table></body>
</html>

125
Chapter ZIPs/JavaScript/ch04/greg/greg.css Executable file
View File

@@ -0,0 +1,125 @@
body { background-color: #000040;
background-image: url(background.gif);
color: #88ffff;
font-family: Verdana, Arial, sans-serif;
}
#container { margin-left: auto;
margin-right: auto;
width:80%;
min-width:700px;
}
#logo {
text-align:center;
margin: 0;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding-top: 30px;
padding-bottom: 20px;
}
#nav {
float: left;
width: 200px;
padding-top: 10px;
text-align:left;
color: #88FFFF;
font-size: 12px;
}
#nav a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 12px;
}
#content {
margin-left: 150px;
padding: 30px;
overflow:auto;
border: medium groove #88FFFF;
line-height: 135%;
}
.floatright {padding-left:20px;
float:right;
}
.floatleft {
float:left;
padding: 30px 0px 20px;
}
#footer { font-size: .60em;
font-style: italic;
text-align: center;
border-top: 2px double #000040;
padding-top: 20px;
padding-bottom: 20px;
}
h2 { text-transform: uppercase;
color: #88ffff;
font-size: 1.2em;
border-bottom: 1px none;
margin-right: 20px;
}
h3 {
color: #88ffff;
font-size: 1.2em;
border-bottom: 1px solid #000000;
margin-right: auto;
text-align: left;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
line-height: 120%;
}
.details { padding-left:20%;
padding-right:20%;
}
img {border:0; }
.content {
margin: 20px;
padding: 20px;
height: 3700px;
width: 500px;
}
a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 12px;
}
a:hover {
color: #000040;
background-color: #88ffff;
}
span {
font-size: 20px;
font-weight: bold;
font-family: "Courier New", Courier, mono;
color: #88ffff;
background-position: center center;
text-align: center;
vertical-align: middle;
}
table {
border-collapse: collapse
}
td {
border: 2px solid #88ffff;
width: 5em;
color: #88ffff;
}
.nobdr {
border: none;
cell-padding: 5px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

70
Chapter ZIPs/JavaScript/ch04/greg/greg_encoder.html Executable file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Greg's Gambits | Secret Message Encoder</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function encodeIt()
{
document.getElementById("message").innerHTML = ("<h2>&nbsp;</h2>");
var msg= prompt("Enter your message." , " ");
var newmsg = " ";
var upCaseCode = 155;
var newCode = 0;
var lowCaseCode = 219;
var specialCode = 3;
//the loop encodes each letter in the message string
for (var j = 0; j < msg.length; j++)
{
//check for upppercase letters and encode them
if ((msg.charCodeAt(j) >= 65) && (msg.charCodeAt(j) <= 90))
{ newcode = (upCaseCode - msg.charCodeAt(j)); }
else
//check for lowercase letters and encode them
if ((msg.charCodeAt(j) >= 97) && (msg.charCodeAt(j) <= 122))
{ newcode = (lowCaseCode - msg.charCodeAt(j)); }
else
//check for numbers and special characters and encode them
if (((msg.charCodeAt(j) > 90) && (msg.charCodeAt(j) < 97)) || (msg.charCodeAt(j) < 65))
{ newcode = (msg.charCodeAt(j) + specialCode); }
//add each encoded character to the new message
newmsg = newmsg + " " + String.fromCharCode(newcode);
}
//display the encoded message on the web page
document.getElementById("secret").innerHTML = ("<h2>" + newmsg + "</h2>");
//decide if original message should be shown
var choice = prompt("Do you want the original message displayed? Yes or No?", " ");
if ((choice.charAt(0) == 'y') || (choice.charAt(0) == 'Y'))
{
document.getElementById("message").innerHTML = ("<h2>" + msg + "</h2>");
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" width="120" height="120" class="floatleft" />
<h1 id="logo"><em>The Secret Message Encoder</em></h1>
<p>&nbsp;</p>
<div id="nav">
<p><a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="sign.html">Sign In</a>
<a href="contact.html">Contact Us</a></p>
</div>
<div id="content">
<h2>Write A Message and Encode It</h1>
<p><input type="button" id="encode" value="Enter your message" onclick="encodeIt();" /></p>
<table cellpadding="2" width = "90%" align = "center" border="1">
<tr> <td align="center" id="secret"><p>encoded message</p></td> </tr>
<tr> <td align="center" id="message">&nbsp;</td> </tr> </table>
</div>
<div id="footer">Copyright &copy; 2013 Greg's Gambits<br />
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</div>
</div>
</body>
</html>

BIN
Chapter ZIPs/JavaScript/ch04/greg/images/superhero.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

46
Chapter ZIPs/JavaScript/ch04/greg/play_games.html Executable file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Greg's Gambits | Games Menu</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<img src="../images/superhero.jpg" width="120" height="120" class="floatleft" />
<h1 id="logo"><em>Play A Game</em></h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="nav">
<p><a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="sign.html">Sign In</a>
<a href="contact.html">Contact Us</a></p>
</div>
<div id="content">
<p>Menu of Available Games </p>
<table width="90%" border="0" cellpadding="5">
<tr>
<td width="50%"><a href="greg_tales.html">Greg's Tales</a> </td>
<td width="50%"><a href ="gregs_fortune.html">Madame Vadoma Sees All</a></td>
</tr>
<tr>
<td width="50%"><a href="greg_encoder.html">The Secret Message Encoder</a> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
</div>
<div id="footer">Copyright &copy; 2013 Greg's Gambits<br />
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a></div>
</div>
</body>
</html>