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

Semester 3 pog

Browse Source
This commit is contained in:
Chloe Fontenot 🏳️‍⚧️
2023-08-16 17:31:33 -05:00
parent 2dc89a3b93
commit a33c99cbd2
1558 changed files with 439 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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
Semester 1/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>

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6.zip Normal file
View File

Binary file not shown.

18
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_1.html Executable file
View File

@@ -0,0 +1,18 @@
<html>
<head>
<title>Example 6.1</title>
<style type="text/css">
<!--
.style2 {color: #4f81bd}
.style4 {color: #4f81bd; font-weight: bold; }
-->
</style>
</head>
<body>
<table align = "center" width = "80%">
<form name="myfirstform" action="mailto:liz@forms.net" method="post" enctype="text/plain">
some text
</form></table>
</body>
</html>

94
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_10.html Executable file
View File

@@ -0,0 +1,94 @@
<html>
<head>
<title>Example 6.10</title>
<script>
function pickEntree(picked)
{
var entree = document.getElementById(picked).value;
document.getElementById('main_dish').innerHTML = entree;
}
function customerInfo(cName)
{
var dinerName = document.getElementById(cName).value;
document.getElementById('cust_name').innerHTML = dinerName;
}
function customerPhone(cell)
{
var phone = document.getElementById(cell).value;
document.getElementById('cell_phone').innerHTML = phone;
}
function pickSides()
{
var flag = false;
var i =0;
var side1 = "";
var side2 = "";
for (i = 1; i <= 7; i++)
{
if ((document.getElementById(i).checked == true) && (flag == false))
{
side1 = document.getElementById(i).value;
flag = true;
}
else if ((document.getElementById(i).checked == true) && (flag == true))
side2 = document.getElementById(i).value;
}
document.getElementById('side_one').innerHTML = side1;
document.getElementById('side_two').innerHTML = side2;
}
</script>
<style type="text/css">
<!--
body {
margin: 5%;
}
-->
</style>
</head>
<body>
<form name="order" method = "post" id = "dinner" action="mailto:manager@mealstogo.net?subject=Dinner Order" enctype="text/plain" >
<h2><br />Select Your Meal</h2>
<div style="width: 80%;">
<div style="width: 40%; float: left;">
<fieldset><legend>Your Information</legend>
<h3>Enter the following information:</h3>
<label>Your name:<br /></label> <input type="text" name="dinername" id="dinername" size = "30" value = ""/>
<input type ="button" onclick="customerInfo('dinername')" value = "ok"></button>
<p>We will call your cell phone when your order is ready.<br />
<label>Phone:<br /> </label><input type="text" name="phone" id="phone" size="30" value = ""/></label>
<input type ="button" onclick="customerPhone('phone')" value = "ok"></button><br /></fieldset></div>
<div style=" width: 30%; float: left;"><fieldset><legend>Main Course</legend>
<h3>Pick your main course:</h3>
<input type="radio" name="entree" id="steak" value="Rib-Eye Steak" onclick="pickEntree('steak')">Rib-Eye Steak<br />
<input type="radio" name="entree" id="chicken" value="Fried Chicken" onclick="pickEntree('chicken')">Fried Chicken<br />
<input type="radio" name="entree" id="veggie" value="Veggie Platter" onclick="pickEntree('veggie')">Vegetarian Fried Tofu<br />
<input type="radio" name="entree" id="fish" value="Broiled Salmon" onclick="pickEntree('fish')">Broiled Salmon<br /><br />
</fieldset></div>
<div style="width: 30%; float: left;"><fieldset><legend>Side Dishes</legend>
<h3>Pick two side dishes</h3>
<input type="checkbox" name="sides" id="1" value="French Fries" >French Fries<br />
<input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
<input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
<input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
<input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mixed Vegetables<br />
<input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni and Cheese<br />
<input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br />
<input type ="button" onclick="pickSides()" value = "Enter my side dish selections" "></button></fieldset></div>
</div>
<div style="clear:both;"></div>
<div ><input type="reset" value="ooops! I made a mistake. Let me start over."><br /></div>
<div style="width: 40%; float: left;"><h3>Your meal:</h3>
<p>Your name: <span id = "cust_name">&nbsp;</span> <br />
Your contact phone: <span id = "cell_phone">&nbsp;</span> <br />
Entree selected: <span id = "main_dish">&nbsp;</span> <br />
First side dish selected: <span id = "side_one">&nbsp;</span> <br />
Second side dish selected: <span id = "side_two">&nbsp;</span> </p></div>
<div style="width: 40%; float: left;"><h3>Comments or questions:</h3>
<textarea name = "dinnerorder" id = "dinner" rows = "6" cols = "40">Enter your comments or questions here</textarea> </div><div style="clear:both;"></div>
<div><input type = "submit" value="submit my order"><br /></div>
</form>
</body>
</html>

95
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_11.html Executable file
View File

@@ -0,0 +1,95 @@
<html>
<head>
<title>Example 6.11</title>
<script>
function pickEntree(picked)
{
var entree = document.getElementById(picked).value;
document.getElementById('main_dish').innerHTML = entree;
}
function customerInfo(cName)
{
var dinerName = document.getElementById(cName).value;
document.getElementById('cust_name').innerHTML = dinerName;
}
function customerPhone(cell)
{
var phone = document.getElementById(cell).value;
document.getElementById('cell_phone').innerHTML = phone;
}
function pickSides()
{
var flag = false;
var i =0;
var side1 = "";
var side2 = "";
for (i = 1; i <= 7; i++)
{
if ((document.getElementById(i).checked == true) && (flag == false))
{
side1 = document.getElementById(i).value;
flag = true;
}
else if ((document.getElementById(i).checked == true) && (flag == true))
side2 = document.getElementById(i).value;
}
document.getElementById('side_one').innerHTML = side1;
document.getElementById('side_two').innerHTML = side2;
}
</script>
<style type="text/css">
<!--
body {
margin: 5%;
}
-->
</style>
</head>
<body>
<form name="order" method = "post" id = "dinner" action="mailto:manager@mealstogo.net?subject=Dinner Order" enctype="text/plain" >
<input type ="hidden" name ="meal" id ="dinner" value = "dinner choice" />
<h2><br />Select Your Meal</h2>
<div style="width: 80%;">
<div style="width: 40%; float: left;">
<fieldset><legend>Your Information</legend>
<h3>Enter the following information:</h3>
<label>Your name:<br /></label> <input type="text" name="dinername" id="dinername" size = "30" value = ""/>
<input type ="button" onclick="customerInfo('dinername')" value = "ok"></button>
<p>We will call your cell phone when your order is ready.<br />
<label>Phone:<br /> </label><input type="text" name="phone" id="phone" size="30" value = ""/></label>
<input type ="button" onclick="customerPhone('phone')" value = "ok"></button><br /></fieldset></div>
<div style=" width: 30%; float: left;"><fieldset><legend>Main Course</legend>
<h3>Pick your main course:</h3>
<input type="radio" name="entree" id="steak" value="Rib-Eye Steak" onclick="pickEntree('steak')">Rib-Eye Steak<br />
<input type="radio" name="entree" id="chicken" value="Fried Chicken" onclick="pickEntree('chicken')">Fried Chicken<br />
<input type="radio" name="entree" id="veggie" value="Veggie Platter" onclick="pickEntree('veggie')">Vegetarian Fried Tofu<br />
<input type="radio" name="entree" id="fish" value="Broiled Salmon" onclick="pickEntree('fish')">Broiled Salmon<br /><br />
</fieldset></div>
<div style="width: 30%; float: left;"><fieldset><legend>Side Dishes</legend>
<h3>Pick two side dishes</h3>
<input type="checkbox" name="sides" id="1" value="French Fries" >French Fries<br />
<input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
<input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
<input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
<input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mixed Vegetables<br />
<input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni and Cheese<br />
<input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br />
<input type ="button" onclick="pickSides()" value = "Enter my side dish selections" "></button></fieldset></div>
</div>
<div style="clear:both;"></div>
<div ><input type="reset" value="ooops! I made a mistake. Let me start over."><br /></div>
<div style="width: 40%; float: left;"><h3>Your meal:</h3>
<p>Your name: <span id = "cust_name">&nbsp;</span> <br />
Your contact phone: <span id = "cell_phone">&nbsp;</span> <br />
Entree selected: <span id = "main_dish">&nbsp;</span> <br />
First side dish selected: <span id = "side_one">&nbsp;</span> <br />
Second side dish selected: <span id = "side_two">&nbsp;</span> </p></div>
<div style="width: 40%; float: left;"><h3>Comments or questions:</h3>
<textarea name = "dinnerorder" id = "dinner" rows = "6" cols = "40">Enter your comments or questions here</textarea> </div><div style="clear:both;"></div>
<div><input type = "submit" value="submit my order"><br /></div>
</form>
</body>
</html>

28
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_12.html Executable file
View File

@@ -0,0 +1,28 @@
<html>
<head>
<title>Example 6.12</title>
<script>
function getPasswordInfo(pword)
{
var pwordSize = 0; var userWord = " "; var wordLength = 0;
pwordSize = document.getElementById(pword).size;
document.getElementById('field_size').innerHTML = pwordSize;
userWord = document.getElementById(pword).value;
document.getElementById('pword').innerHTML = userWord;
wordLength = userWord.length;
document.getElementById('word_size').innerHTML = wordLength;
}
</script>
</head>
<body>
<table width = 60% align = "center"><tr><td><br />
<h2> Enter a password that is between 4 and 8 characters, using only digits (0 - 9) and letters. </h2>
<p><input type="password" name="user_pwrd" id="passwrd" size = ""/>
<input type ="button" onclick="getPasswordInfo('passwrd')" value = "ok"></button></p>
<p>Password information:<br />
Number characters allowed: <span id = "field_size">&nbsp;</span> <br />
Number characters entered: <span id = "word_size">&nbsp;</span> <br />
Password entered: <span id = "pword">&nbsp;</span> </p>
</td></tr></table>
</body></html>

34
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_13.html Executable file
View File

@@ -0,0 +1,34 @@
<html>
<head>
<title>Example 6.13</title>
<script>
function checkIt(phrase)
{
var userWord = ""; var charOne = ""; var charEnd = ""; var middle = ""; wordLength = 0;
userWord = document.getElementById(phrase).value;
document.getElementById('user_word').innerHTML = userWord;
wordLength = userWord.length;
document.getElementById('word_size').innerHTML = wordLength;
charOne = userWord.substr(0,1);
document.getElementById('first_char').innerHTML = charOne;
charEnd = userWord.substr((wordLength - 1),1);
document.getElementById('last_char').innerHTML = charEnd;
middle = userWord.substr(3,4);
document.getElementById('the_middle').innerHTML = middle;
}
</script>
</head>
<body>
<table width = 60% align = "center"><tr><td><br />
<h3> Enter a word or a phrase:</h3>
<p><input type="text" name="user_word" id="the_word" />
<input type ="button" onclick="checkIt('the_word')" value = "ok"></button></p>
<p>Word/Phrase information:<br />
You entered: <span id = "user_word">&nbsp;</span> <br />
It has this many characters: <span id = "word_size">&nbsp;</span> <br />
The first character is: <span id = "first_char">&nbsp;</span> <br />
The last character is: <span id = "last_char">&nbsp;</span> <br />
The 4th, 5th, 6th, and 7th characters are: <span id = "the_middle">&nbsp;</span> <br /></p>
</td></tr></table>
</body></html>

89
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_14.html Executable file
View File

@@ -0,0 +1,89 @@
<html>
<head>
<title>Example 6.14</title>
<script>
function checkPassword(pword)
{
var userWord = ""; var char1 = ""; var msg ="";
var checkLength = false; var checkChar = false; var checkDigit = false; var checkSpecial = false;
userWord = document.getElementById(pword).value;
document.getElementById('show_word').innerHTML = userWord;
//check length of word
while (checkLength == false)
{
if ((userWord.length < 4) || (userWord.length > 8))
{
msg = "The password must be between 4 and 8 characters. Try again";
document.getElementById('error_msg').innerHTML = msg;
userWord = document.getElementById(passwrd).value;
}
else
checkLength = true;
}
//check first character
char1 = userWord.substr(0,1);
while (checkChar== false)
{
if ((char1 < 65) || ((char1 > 90) && (char1 < 97)) || (char1 > 122))
{
msg = "The first character must be a letter of the alphabet. Try again";
document.getElementById('error_msg').innerHTML = msg;
userWord = document.getElementById(passwrd).value;
}
else
checkChar = true;
}
//check for digit
wordLength = userWord.length;
for (i = 1; i <= (wordLength - 1); i++)
{
if ((userWord.charCodeAt(i) >= 47) && (userWord.charCodeAt(i) <= 58))
{
checkDigit = true;
break;
}
}
if (checkDigit == false)
{
msg = "You must have at least one number in the password. Try again";
document.getElementById('error_msg').innerHTML = msg;
userWord = document.getElementById(passwrd).value;
}
//check for special character
for (i = 1; i <= (wordLength - 1); i++)
{
if ((userWord.charCodeAt(i) == 35) || (userWord.charCodeAt(i) == 36) || (userWord.charCodeAt(i) == 37))
{
checkSpecial = true;
break;
}
}
if (checkSpecial == false)
{
msg = "You must have one special character ($, %, or #) in the password. Try again";
document.getElementById('error_msg').innerHTML = msg;
userWord = document.getElementById(passwrd).value;
}
if ((checkLength == true) && (checkChar == true) && (checkDigit == true) && (checkSpecial == true))
{
msg = "Congratulations! You have successfully entered a valid password.";
document.getElementById('error_msg').innerHTML = msg;
}
}
</script>
</head>
<body>
<table width = 60% align = "center"><tr><td><br />
<h3> Enter a password in the box below. Your password must:
<ul><li>contain between 4 and 8 characters</li>
<li>begin with a letter of the alphabet (upper or lowercase)</li>
<li>contain at least one digit (0 - 9)</li>
<li>contain one of the following special characters: dollar sign ($), percent sign (%), or pound sign (#)</li></ul>
<p><input type="password" name="user_pwrd" id="passwrd" size = ""/>
<input type ="button" onclick="checkPassword('passwrd')" value = "ok"></button></p>
<p><span id="error_msg">&nbsp;</span><br />
<p>Password information:<br />
Password entered: <span id = "show_word">&nbsp;</span> </p>
</td></tr></table>
</body></html>

21
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_15.html Executable file
View File

@@ -0,0 +1,21 @@
<html>
<head>
<title>Example 6.15</title>
<script>
</script>
</head>
<body>
<table align = "center" width = "60%">
<tr><td><h2 align="center">Colors</h2></td>
</tr>
<tr><td>
<h3>What color do you like best?</h3>
<select name="color" size = "5" id="color">
<option value = "favorite color: periwinkle">periwinkle</option>
<option value = "favorite color: fawn">fawn</option>
<option value = "favorite color: melon" selected = "selected">melon</option>
<option value = "favorite color: mocha">mocha</option>
<option value = "favorite color: raspberry">raspberry</option>
</select>
</td></tr>
</table></body></html>

47
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_16.html Executable file
View File

@@ -0,0 +1,47 @@
<html>
<head>
<title>Example 6.16</title>
<script>
</script>
</head>
<body>
<table align = "center" width = "60%">
<tr><td colspan = "2"><h3>Selection Lists</h3></td></tr>
<tr><td>
<h3>Where do you live?</h3>
<select name="country" size = "1" id="country">
<option>Australia</option>
<option>Canada</option>
<option>England</option>
<option>France</option>
<option>Germany</option>
<option>Haiti</option>
<option>India</option>
<option>Japan</option>
<option>Malaysia</option>
<option>New Zealand</option>
<option>Taiwan</option>
<option>United States</option>
<option>Venezuela</option>
<option>Yugoslavia</option>
</select>
</td><td>
<h3>Where do you live?</h3>
<select name="country" size = "5" id="country">
<option>Australia</option>
<option>Canada</option>
<option>England</option>
<option>France</option>
<option>Germany</option>
<option>Haiti</option>
<option>India</option>
<option>Japan</option>
<option>Malaysia</option>
<option>New Zealand</option>
<option>Taiwan</option>
<option>United States</option>
<option>Venezuela</option>
<option>Yugoslavia</option>
</select>
</td></tr>
</table></body></html>

27
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_17.html Executable file
View File

@@ -0,0 +1,27 @@
<html>
<head>
<title>Example 6.17</title>
<script>
</script>
</head>
<body>
<table align = "center" width = "60%">
<tr><td><h3>Selection Lists</h3></td></tr>
<tr><td>
<h3>Select three favorite foods:</h3>
<select multiple = "multiple" name="food" size = "10" id="food">
<option>meatloaf</option>
<option>macaroni and cheese</option>
<option>pizza</option>
<option>fish and chips</option>
<option>fried chicken</option>
<option>hamburgers and fries</option>
<option>potato curry</option>
<option>spaghetti</option>
<option>sushi</option>
<option>burritos</option>
</select>
</td></tr>
<tr><td><h3>You must hold down the CTRL key on a Windows computer <br />
or the Command button on a Mac to select multiple options.</h3>
</table></body></html>

142
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_18.html Executable file
View File

@@ -0,0 +1,142 @@
<html>
<head>
<title>Example 6.18</title>
<script>
function setYellow(x)
{
document.getElementById(x).style.background="yellow";
}
function setKhaki(x)
{
document.getElementById(x).style.background="khaki";
}
function setGreen(x)
{
document.getElementById(x).style.background="green";
}
function setOrange(x)
{
document.getElementById(x).style.background="orange";
}
function setRed(x)
{
document.getElementById(x).style.background="red";
}
function setPurple(x)
{
document.getElementById(x).style.background="purple";
}
function getFname(firstname)
{
var fName = document.getElementById(firstname).value;
document.getElementById('first_name').innerHTML = fName;
}
function getLname(lastname)
{
var lName = document.getElementById(lastname).value;
document.getElementById('last_name').innerHTML = lName;
}
function getNname(nickname)
{
var nName = document.getElementById(nickname).value;
document.getElementById('nick_name').innerHTML = nName;
}
function getCar(car)
{
var dreamCar = document.getElementById(car).value;
document.getElementById('dream_car').innerHTML = dreamCar;
}
function getMeal(meal)
{
var favMeal = document.getElementById(meal).value;
document.getElementById('favorite_meal').innerHTML = favMeal;
}
function getVacation(vacation)
{
var vacationSpot = document.getElementById(vacation).value;
document.getElementById('vacation_spot').innerHTML = vacationSpot;
}
function setBlue(x)
{
document.getElementById(x).style.background="yellow";
}
</script>
<style type="text/css">
<!--
body {
margin: 5%;
}
p {
font-weight: bold;
color: #006A9D;
}
label {
font-weight: bold;
color: #006A9D;
}
h3 {
color: #006A9D;
}
-->
</style>
</head>
<body>
<h3><br />
Fun With the Form</h3>
<p>Enter your information in the boxes. After you are satisfied with each entry, press the OK
button to see the information displayed below. Use the TAB key to move from box to box and don't
be surprised by where the TABs take you.</p>
<div style="width: 90%;">
<div style="width: 33%; float: left;">
<fieldset>
<label>First name:<br />
</label> <input type="text" name="firstname" id="firstname" size = "30" value = "" tabindex = "1" onfocus = "setYellow(this.id)" />
<input type ="button" onclick="getFname('firstname')" value = "ok" tabindex = "1" /></button><br />
<br /></fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Dream car:<br />
</label> <input type="text" name="car" id="car" size = "30" value = "" tabindex = "4" onfocus = "setKhaki(this.id)" />
<input type ="button" onclick="getCar('car')" value = "ok" tabindex = "4" /> </button><br /><br />
</fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Dream Vacation:<br />
</label> <input type="text" name="vacation" id="vacation" size = "30" value = "" tabindex = "6" onfocus = "setGreen(this.id)" />
<input type ="button" onclick="getVacation('vacation')" value = "ok" tabindex = "6" /></button><br /><br />
</fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Nickname:<br />
</label> <input type="text" name="nickname" id="nickname" size = "30" value = "" tabindex = "3" onfocus = "setOrange(this.id)" />
<input type ="button" onclick="getNname('nickname')" value = "ok" tabindex = "3" /></button><br /><br />
</fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Favorite meal:<br />
</label> <input type="text" name="meal" id="meal" size = "30" value = "" tabindex = "5" onfocus = "setRed(this.id)" />
<input type ="button" onclick="getMeal('meal')" value = "ok" tabindex = "5" /></button><br /><br />
</fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Last name:<br />
</label> <input type="text" name="lastname" id="lastname" size = "30" value = "" tabindex = "2" onfocus = "setPurple(this.id)" />
<input type ="button" onclick="getLname('lastname')" value = "ok" tabindex = "2" /></button><br /><br />
</fieldset></div>
<div style="clear:both;"></div>
<div>
<h3>Your information:</h3>
<p>First name: <span id = "first_name">&nbsp;</span> <br />
Last name: <span id = "last_name">&nbsp;</span> <br />
Nickname: <span id = "nick_name">&nbsp;</span> <br />
Dream car: <span id = "dream_car">&nbsp;</span> <br />
Favorite meal: <span id = "favorite_meal">&nbsp;</span> <br />
Vacation desired: <span id = "vacation_spot">&nbsp;</span> </p></div>
</form>
</body>
</html>

147
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_19.html Executable file
View File

@@ -0,0 +1,147 @@
<html>
<head>
<title>Example 6.19</title>
<script>
function setYellow(x)
{
document.getElementById(x).style.background="yellow";
}
function setKhaki(x)
{
document.getElementById(x).style.background="khaki";
}
function setGreen(x)
{
document.getElementById(x).style.background="green";
}
function setOrange(x)
{
document.getElementById(x).style.background="orange";
}
function setRed(x)
{
document.getElementById(x).style.background="red";
}
function setPurple(x)
{
document.getElementById(x).style.background="purple";
}
function getFname(firstname)
{
var fName = document.getElementById(firstname).value;
document.getElementById('first_name').innerHTML = fName;
}
function getLname(lastname)
{
var lName = document.getElementById(lastname).value;
document.getElementById('last_name').innerHTML = lName;
}
function getNname(nickname)
{
var nName = document.getElementById(nickname).value;
document.getElementById('nick_name').innerHTML = nName;
}
function getCar(car)
{
var dreamCar = document.getElementById(car).value;
document.getElementById('dream_car').innerHTML = dreamCar;
}
function getMeal(meal)
{
var favMeal = document.getElementById(meal).value;
document.getElementById('favorite_meal').innerHTML = favMeal;
}
function getVacation(vacation)
{
var vacationSpot = document.getElementById(vacation).value;
document.getElementById('vacation_spot').innerHTML = vacationSpot;
}
function setBlue(x)
{
document.getElementById(x).style.background="yellow";
}
</script>
<style type="text/css">
<!--
body {
margin: 5%;
}
p {
font-weight: bold;
color: #006A9D;
}
label {
font-weight: bold;
color: #006A9D;
}
h3 {
color: #006A9D;
}
-->
</style>
</head>
<body>
<h3><br />
Fun With the Form</h3>
<p>Enter your information in the boxes. After you are satisfied with each entry, press the OK
button to see the information displayed below. Use the TAB key to move from box to box and don't
be surprised by where the TABs take you.</p>
<div style="width: 90%;">
<div style="width: 33%; float: left;">
<fieldset>
<label>First name:<br />
</label> <input type="text" name="firstname" id="firstname" size = "30" value = "" tabindex = "1" onfocus = "setYellow(this.id)" />
<a href = "JavaScript:getFname('firstname')"><img src = "ok.gif"></a>
<br /><br /></fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Dream car:<br />
</label> <input type="text" name="car" id="car" size = "30" value = "" tabindex = "4" onfocus = "setKhaki(this.id)" />
<a href = "JavaScript:getCar('car')"><img src = "ok.gif"></a><br />
</fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Dream Vacation:<br />
</label> <input type="text" name="vacation" id="vacation" size = "30" value = "" tabindex = "6" onfocus = "setGreen(this.id)" />
<a href = "JavaScript:getVacation('vacation')"><img src = "ok.gif"></a>
<br /><br />
</fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Nickname:<br />
</label> <input type="text" name="nickname" id="nickname" size = "30" value = "" tabindex = "3" onfocus = "setOrange(this.id)" />
<a href = "JavaScript:getNname('nickname')"><img src = "ok.gif"></a>
<br /><br />
</fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Favorite meal:<br />
</label> <input type="text" name="meal" id="meal" size = "30" value = "" tabindex = "5" onfocus = "setRed(this.id)" />
<a href = "JavaScript:getMeal('meal')"><img src = "ok.gif"></a>
<br /><br />
</fieldset></div>
<div style="width: 33%; float: left;">
<fieldset>
<label>Last name:<br />
</label> <input type="text" name="lastname" id="lastname" size = "30" value = "" tabindex = "2" onfocus = "setPurple(this.id)" />
<a href = "JavaScript:getLname('lastname')"><img src = "ok.gif"></a>
<br /><br />
</fieldset></div>
<div style="clear:both;"></div>
<div>
<h3>Your information:</h3>
<p>First name: <span id = "first_name">&nbsp;</span> <br />
Last name: <span id = "last_name">&nbsp;</span> <br />
Nickname: <span id = "nick_name">&nbsp;</span> <br />
Dream car: <span id = "dream_car">&nbsp;</span> <br />
Favorite meal: <span id = "favorite_meal">&nbsp;</span> <br />
Vacation desired: <span id = "vacation_spot">&nbsp;</span> </p></div>
</form>
</body>
</html>

19
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_2.html Executable file
View File

@@ -0,0 +1,19 @@
<html>
<head>
<title>Example 6.2</title>
<style type="text/css">
<!--
.style2 {color: #4f81bd}
.style4 {color: #4f81bd; font-weight: bold; }
-->
</style>
</head>
<body>
<table align = "center" width = "60%">
<form name="myfirstform" action="mailto:liz@forms.net" method="post" enctype="text/plain">
<tr></td><h3><br /><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The contents of the form would go here</h3></td></tr>
<tr><td><input type="reset" value="ooops! Clear my form please"></td>
<td><input type="submit" value ="I'm done! Send my info"></td></tr>
</form></table>
</body>
</html>

53
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_3.html Executable file
View File

@@ -0,0 +1,53 @@
<html>
<head>
<title>Exercise 6.3</title>
<style type="text/css">
<!--
.style2 {color: #4f81bd}
.style5 {
color: #0000FF;
font-weight: bold;
}
.style6 {
color: #FF0000;
font-weight: bold;
}
.style7 {
color: #00CC33;
font-weight: bold;
}
.style8 {
color: #660066;
font-weight: bold;
}
.style9 {
color: #FF9900;
font-weight: bold;
}
-->
</style>
</head>
<body>
<table align = "center" width = "60%">
<form name="buttons" >
<tr><td><h2 align="center" class="style2">Colors</h2></td>
</tr>
<tr><td><fieldset>
<h2>What color do you like best?</h2>
<input type="radio" name="color" id="blue" value="blue">
<span class="style5"> Blue</span><br />
<input type="radio" name="color" id="red" value="red">
<span class="style6">Red</span><br />
<input type="radio" name="color" id="green" value="green">
<span class="style7">Green</span><br />
<input type="radio" name="color" id="purple" value="purple">
<span class="style8">Purple</span><br />
<input type="radio" name="color" id="orange" value="orange">
<span class="style9">Orange</span>
</fieldset>
</td></tr>
<tr><td><input type="reset" value="ooops! Clear my form please"> <input type="submit" value ="I'm done! Send my info"></td></tr>
</form></table>
</body>
</html>

34
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_4.html Executable file
View File

@@ -0,0 +1,34 @@
<html>
<head>
<title>Example 6.4 </title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function pickAvatar(picked)
{
var avatar = document.getElementById(picked).value;
document.getElementById("myavatar").innerHTML = avatar;
}
</script>
</head>
<body>
<div id="container">
<table width = "80%" align = "center"><tr colspan = "5"><td class="nobdr">&nbsp;<br /></td></tr>
<tr><td colspan = "5" class="nobdr"><h1>Select Your Avatar:</h1></td></tr>
<td class="nobdr"> <img src="images/bunny.jpg" /></td>
<td class="nobdr"> <img src="images/elf.jpg" /> </td>
<td class="nobdr"> <img src="images/ghost.jpg" /></td>
<td class="nobdr"><img src="images/princess.jpg" /></td>
<td class="nobdr"><img src="images/wizard.jpg" /></td>
</tr>
<tr><td class="nobdr"><input type = "radio" name = "avatar" id = "bunny" value = "Bunny" onclick="pickAvatar('bunny')"/></td>
<td class="nobdr"><input type = "radio" name = "avatar" id = "elf" value = "Elf" onclick="pickAvatar('elf')"/></td>
<td class="nobdr"><input type = "radio" name = "avatar" id = "ghost" value = "Ghost" onclick="pickAvatar('ghost')"/> </td>
<td class="nobdr"><input type = "radio" name = "avatar" id = "princess" value = "Princess" onclick="pickAvatar('princess')"/></td>
<td class="nobdr"><input type = "radio" name = "avatar" id = "wizard" value = "Wizard" onclick="pickAvatar('wizard')"/> </td></tr>
</table>
<p>The avatar you selected is: <span id = "myavatar">kitty</span> </p>
<p>&nbsp;</p>
</div>
</body>
</html>

50
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_5.html Executable file
View File

@@ -0,0 +1,50 @@
<html>
<head>
<title>Example 6.5</title>
<script>
function checkIt()
{
document.getElementById("tibet").checked=true
}
function uncheckIt()
{
document.getElementById("tibet").checked=false
}
function pick_sides()
{
var flag = false;
var i =0;
var side1 = "";
var side2 = "";
for (i = 1; i <= 7; i++)
{
if ((document.getElementById(i).checked == true) && (flag == false))
{
side1 = document.getElementById(i).value;
flag = true;
}
else if ((document.getElementById(i).checked == true) && (flag == true))
side2 = document.getElementById(i).value;
}
document.getElementById('side_one').innerHTML = side1;
document.getElementById('side_two').innerHTML = side2;
}
</script>
</head>
<body>
<table width = 60% align = "center"><tr><td><br />
<h2> Where do you live?</h2>
<input type="checkbox" name="country" id="argentina" value="Argentina" >Argentina<br />
<input type="checkbox" name="country" id="china" value="China" >China<br />
<input type="checkbox" name="country" id="france" value="France">France<br />
<input type="checkbox" name="country" id="italy" value="Italy">Italy<br />
<input type="checkbox" name="country" id="spain" value="Spain">Spain<br />
<input type="checkbox" name="country" id="tibet" value="Tibet">Tibet<br />
<input type="checkbox" name="country" id="usa" value="United States">United States<br />
<p><button onclick="checkIt()">Check Tibet</button>
<button onclick="uncheckIt()">Uncheck Tibet</button></p>
</td></tr></table>
</body></html>

66
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_6.html Executable file
View File

@@ -0,0 +1,66 @@
<html>
<head>
<title>Example 6.6</title>
<script>
function pick_entree(picked)
{
var entree = document.getElementById(picked).value;
document.getElementById('main_dish').innerHTML = entree;
}
function pick_sides()
{
var flag = false;
var i =0;
var side1 = "";
var side2 = "";
for (i = 1; i <= 7; i++)
{
if ((document.getElementById(i).checked == true) && (flag == false))
{
side1 = document.getElementById(i).value;
flag = true;
}
else if ((document.getElementById(i).checked == true) && (flag == true))
side2 = document.getElementById(i).value;
}
document.getElementById('side_one').innerHTML = side1;
document.getElementById('side_two').innerHTML = side2;
}
</script>
<style type="text/css">
<!--
.style2 {color: #4f81bd}
.style4 {color: #4f81bd; font-weight: bold; }
-->
</style>
</head>
<body>
<table align = "center" width = "60%">
<form name="menu">
<tr><td colspan = "2"><h2><br />Select Your Meal</h2></td></tr>
<tr><td>Pick your main course:<br />
<input type="radio" name="entree" id="steak" value="Rib-Eye Steak" onclick="pick_entree('steak')">Rib-Eye Steak<br />
<input type="radio" name="entree" id="chicken" value="Fried Chicken" onclick="pick_entree('chicken')">Fried Chicken<br />
<input type="radio" name="entree" id="veggie" value="Veggie Platter" onclick="pick_entree('veggie')">Vegetarian Fried Tofu<br />
<input type="radio" name="entree" id="fish" value="Broiled Salmon" onclick="pick_entree('fish')">Broiled Salmon<br />
</td>
<td> Pick two side dishes<br />
<input type="checkbox" name="sides" id="1" value="French Fries" >French Fries<br />
<input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
<input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
<input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
<input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mixed Vegetables<br />
<input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni and Cheese<br />
<input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br /></td></tr>
<tr><td><input type="reset" value="ooops! Let me change my selections"> </td>
<td><input type ="button" onclick="pick_sides()" value = "Enter my side dish selections" "></button>
</td></tr>
<tr><td colspan = "2"><h2><br />Entree selected: <span id = "main_dish">&nbsp;</span> </h2>
<h2>First side dish selected: <span id = "side_one">&nbsp;</span> </h2>
<h2>Second side dish selected: <span id = "side_two">&nbsp;</span> </h2></td></tr>
</table></form>
</body>
</html>

13
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_7.html Executable file
View File

@@ -0,0 +1,13 @@
<html>
<head>
<title>Example 6.7</title>
</head>
<body>
<table width = 60% align = "center"><tr><td><br />
<h2> Enter the requested information</h2>
<p>This box uses the default values for size and maxlength and has no initial value: <br /><input type="text" name="fullname" id="fullname" ></p>
<p>This box is 30 spaces wide and limits the user to 25 characters in his or her name: <br /><input type="text" name="fullname" size = "30" maxlength = "25" id="fullname"></p>
<p>This box is 60 spaces wide, allows the user to enter up to 100 characters and shows an initial value of a name: <br /><input type="text" name="fullname" size = "60" maxlength = "100" id="fullname" value="Hermione Priscilla Throckmorton-Nabolonikoff" ></p>
</td></tr></table>
</body></html>

91
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_8.html Executable file
View File

@@ -0,0 +1,91 @@
<html>
<head>
<title>Example 6.8</title>
<script>
function pickEntree(picked)
{
var entree = document.getElementById(picked).value;
document.getElementById('main_dish').innerHTML = entree;
}
function customerInfo(cName)
{
var dinerName = document.getElementById(cName).value;
document.getElementById('cust_name').innerHTML = dinerName;
}
function customerPhone(cell)
{
var phone = document.getElementById(cell).value;
document.getElementById('cell_phone').innerHTML = phone;
}
function pickSides()
{
var flag = false;
var i =0;
var side1 = "";
var side2 = "";
for (i = 1; i <= 7; i++)
{
if ((document.getElementById(i).checked == true) && (flag == false))
{
side1 = document.getElementById(i).value;
flag = true;
}
else if ((document.getElementById(i).checked == true) && (flag == true))
side2 = document.getElementById(i).value;
}
document.getElementById('side_one').innerHTML = side1;
document.getElementById('side_two').innerHTML = side2;
}
</script>
<style type="text/css">
<!--
body {
margin: 5%;
}
-->
</style>
</head>
<body>
<form name="menu">
<h2><br />Select Your Meal</h2>
<div style="width: 80%;">
<div style="width: 40%; float: left;">
<fieldset><legend>Your Information</legend>
<h3>Enter the following information:</h3>
<label>Your name:<br /></label> <input type="text" name="dinername" id="dinername" size = "30" value = ""/>
<input type ="button" onclick="customerInfo('dinername')" value = "ok"></button>
<p>We will call your cell phone when your order is ready.<br />
<label>Phone:<br /> </label><input type="text" name="phone" id="phone" size="30" value = ""/></label>
<input type ="button" onclick="customerPhone('phone')" value = "ok"></button><br /></fieldset></div>
<div style=" width: 30%; float: left;"><fieldset><legend>Main Course</legend>
<h3>Pick your main course:</h3>
<input type="radio" name="entree" id="steak" value="Rib-Eye Steak" onclick="pickEntree('steak')">Rib-Eye Steak<br />
<input type="radio" name="entree" id="chicken" value="Fried Chicken" onclick="pickEntree('chicken')">Fried Chicken<br />
<input type="radio" name="entree" id="veggie" value="Veggie Platter" onclick="pickEntree('veggie')">Vegetarian Fried Tofu<br />
<input type="radio" name="entree" id="fish" value="Broiled Salmon" onclick="pickEntree('fish')">Broiled Salmon<br /><br />
</fieldset></div>
<div style="width: 30%; float: left;"><fieldset><legend>Side Dishes</legend>
<h3>Pick two side dishes</h3>
<input type="checkbox" name="sides" id="1" value="French Fries" >French Fries<br />
<input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
<input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
<input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
<input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mixed Vegetables<br />
<input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni and Cheese<br />
<input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br />
<input type ="button" onclick="pickSides()" value = "Enter my side dish selections" "></button></fieldset></div>
</div>
<div style="clear:both;"></div>
<div ><input type="reset" value="ooops! I made a mistake. Let me start over."><br /></div>
<div><h3>Your meal:</h3>
<h3>Your name: <span id = "cust_name">&nbsp;</span> </h3>
<h3>Your contact phone: <span id = "cell_phone">&nbsp;</span> </h3>
<h3>Entree selected: <span id = "main_dish">&nbsp;</span> </h3>
<h3>First side dish selected: <span id = "side_one">&nbsp;</span> </h3>
<h3>Second side dish selected: <span id = "side_two">&nbsp;</span> </h3></div>
</form>
</body>
</html>

16
Semester 1/Chapter ZIPs/JavaScript/ch6/ex_6_9.html Executable file
View File

@@ -0,0 +1,16 @@
<html>
<head>
<title>Example 6.9</title>
</head>
<body>
<table width = 60% align = "center"><tr><td><br />
<h2> Enter your comments or questions below</h2>
<p>This box uses the default values for rows and columns and has no initial value: <br />
<textarea name = "the_box" id = "the_box"></textarea> </p>
<p>This box is set to 3 rows and 15 columns and has text that appears initially: <br />
<textarea name = "the_box" id = "the_box" rows = "3" cols = "15">Hi!</textarea> </p>
<p>This box is set to 7 rows and 80 columns and has inital text: <br />
<textarea name = "the_box" id = "the_box" rows = "10" cols = "50">Enter your comments or questions here</textarea> </p>
</td></tr></table>
</body></html>

121
Semester 1/Chapter ZIPs/JavaScript/ch6/greg.css Executable file
View File

@@ -0,0 +1,121 @@
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;
}

121
Semester 1/Chapter ZIPs/JavaScript/ch6/greg/greg.css Executable file
View File

@@ -0,0 +1,121 @@
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;
}

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/greg/images/bunny.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/greg/images/elf.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/greg/images/ghost.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/greg/images/princess.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/greg/images/superhero.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/greg/images/wizard.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

204
Semester 1/Chapter ZIPs/JavaScript/ch6/greg/signin.html Executable file
View File

@@ -0,0 +1,204 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Greg's Gambits | Player Inventory</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<script>
function pickAvatar(picked)
{
var avatar = document.getElementById(picked).value;
document.getElementById('myavatar').innerHTML = avatar;
document.getElementById('avatar_img').innerHTML = ("<img src = 'images/"+avatar+".jpg' />");
}
function getRealName(realname)
{
var real = document.getElementById(realname).value;
document.getElementById('real_name').innerHTML = real;
}
function getUsername(username)
{
var user = document.getElementById(username).value;
document.getElementById('user_name').innerHTML = user;
}
function getPoints(points)
{
var pts = document.getElementById(points).value;
document.getElementById('user_points').innerHTML = pts;
}
function pickWeapons()
{
var i =0; var j = 0; var k = 0;
var weapon1 = "";
var weapon2 = "";
var weapon3 = " ";
for (i = 0; i <= 9; i++)
{
if (document.getElementById('w'+i).checked == true)
{
weapon1 = document.getElementById('w'+i).value;
document.getElementById('weapon_one').innerHTML = weapon1;
break;
}
}
for (j = (i+1); j <=9; j++)
{
if (document.getElementById('w'+j).checked == true)
{
weapon2 = document.getElementById('w'+j).value;
document.getElementById('weapon_two').innerHTML = weapon2;
break;
}
}
for (k = (j+1); k <=9; k++)
{
if (document.getElementById('w'+k).checked == true)
{
weapon3 = document.getElementById('w'+k).value;
document.getElementById('weapon_three').innerHTML = weapon3;
}
}
}
function pickSupplies()
{
var i =0; var j = 0; var k = 0; var m = 0; var p = 0;
var supply1 = ""; var supply2 = ""; var supply3 = " "; var supply4 = ""; var supply5 = "";
for (i = 0; i <= 9; i++)
{
if (document.getElementById('s'+i).checked == true)
{
supply1 = document.getElementById('s'+i).value;
document.getElementById('supply_one').innerHTML = supply1;
break;
}
}
for (j = (i+1); j <=9; j++)
{
if (document.getElementById('s'+j).checked == true)
{
supply2 = document.getElementById('s'+j).value;
document.getElementById('supply_two').innerHTML = supply2;
break;
}
}
for (k = (j+1); k <=9; k++)
{
if (document.getElementById('s'+k).checked == true)
{
supply3 = document.getElementById('s'+k).value;
document.getElementById('supply_three').innerHTML = supply3;
break;
}
}
for (m = (k+1); m <=9; m++)
{
if (document.getElementById('s'+m).checked == true)
{
supply4 = document.getElementById('s'+m).value;
document.getElementById('supply_four').innerHTML = supply4;
break;
}
}
for (p = (m+1); p <=9; p++)
{
if (document.getElementById('s'+p).checked == true)
{
supply5 = document.getElementById('s'+p).value;
document.getElementById('supply_five').innerHTML = supply5;
}
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" class="floatleft" />
<h1 align="center"><em>Your Information and Inventory</em></h1>
<div style ="clear:both;"></div>
<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><br />Tell Greg About You</h2>
<div>
<div><form name = "inventory">
<fieldset>
<h3>Enter the following information:</h3>
<p><label>Your name:<br /></label> <input type="text" id="realname" size = "40" value = ""/>
<input type ="button" onclick="getRealName('realname')" value = "ok"></button></p>
<p><label>Your username:<br /> </label><input type="text" id="username" size="40" value = ""/></label>
<input type ="button" onclick="getUsername('username')" value = "ok"></button></p>
<p><label>Points to date:<br /></label> <input type="text" id="points" size = "10" value = ""/>
<input type ="button" onclick="getPoints('points')" value = "ok"></button></p>
</fieldset></div>
<div style="clear:both;"></div>
<div> <table width = "100%" border = "2"> <br />
<tr><td colspan = "5" class = "nobdr"><h3>Your Avatar</h3></td></tr>
<tr><td class="nobdr"> &nbsp; &nbsp;<img src="images/bunny.jpg" /></td>
<td class="nobdr"> <img src="images/elf.jpg" /> </td>
<td class="nobdr"> <img src="images/ghost.jpg" /></td>
<td class="nobdr"><img src="images/princess.jpg" /></td>
<td class="nobdr"><img src="images/wizard.jpg" /></td></tr>
<tr><td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "bunny" value = "Bunny" onclick="pickAvatar('bunny')"/></td>
<td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "elf" value = "Elf" onclick="pickAvatar('elf')"/></td>
<td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "ghost" value = "Ghost" onclick="pickAvatar('ghost')"/> </td>
<td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "princess" value = "Princess" onclick="pickAvatar('princess')"/></td>
<td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "wizard" value = "Wizard" onclick="pickAvatar('wizard')"/> </td></tr>
</table>
<div style="width: 50%; float: left;"><fieldset>
<h3>Select three weapons to help you in your quest</h3>
<input type="checkbox" name="weapons" id="w0" value="Sword" />Sword<br />
<input type="checkbox" name="weapons" id="w1" value="Slingshot" />Slingshot<br />
<input type="checkbox" name="weapons" id="w2" value="Shield" />Shield<br />
<input type="checkbox" name="weapons" id="w3" value="Bow and 10 Arrows" />Bow and 10 Arrows<br />
<input type="checkbox" name="weapons" id="w4" value="3 Magic Rocks" />3 Magic Rocks<br />
<input type="checkbox" name="weapons" id="w5" value="Knife" />Knife<br />
<input type="checkbox" name="weapons" id="w6" value="Staff" />Staff<br />
<input type="checkbox" name="weapons" id="w7" value="Wizard's Wand" />Wizard's Wand<br />
<input type="checkbox" name="weapons" id="w8" value="Extra Arrows" />10 Extra Arrows<br />
<input type="checkbox" name="weapons" id="w9" value="Cloak of Invisibility" />Cloak of Invisibility<br />
<input type ="button" onclick="pickWeapons()" value = "Enter my selections" /></button></fieldset></div>
<div style="width: 50%; float: left;"><fieldset>
<h3>Select five items to carry with you on your journeys</h3>
<input type="checkbox" name="supplies" id="s0" value="3-Day Food Supply" />3-Day Food Supply<br />
<input type="checkbox" name="supplies" id="s1" value="Backpack" />Backpack<br />
<input type="checkbox" name="supplies" id="s2" value="Kevlar Vest" />Kevlar Vest<br />
<input type="checkbox" name="supplies" id="s3" value="3-Day Water Bottle" />3-Day Supply of Water<br />
<input type="checkbox" name="supplies" id="s4" value="Box of 5 Firestarters" />Box of 4 Firestarters<br />
<input type="checkbox" name="supplies" id="s5" value="Tent" />Tent<br />
<input type="checkbox" name="supplies" id="s6" value="First Aid Kit" />First Aid Kit<br />
<input type="checkbox" name="supplies" id="s7" value="Warm Jacket" />Warm Jacket<br />
<input type="checkbox" name="supplies" id="s8" value="3 Pairs Extra Socks" />3 Pairs Extra Socks<br />
<input type="checkbox" name="supplies" id="s9" value="Pen and Notebook" />Pen and Notebook<br />
<input type ="button" onclick="pickSupplies()" value = "Enter my selections" /></button></fieldset></div>
</div>
<div style="clear:both;"></div>
<div ><br /><input type="reset" value="ooops! I made a mistake. Let me start over."><br /></div>
<div style="width: 90%; float: left;"><h3>Your information<br />
Your name: <span id = "real_name">&nbsp;</span> <br /><br />
Username: <span id = "user_name">&nbsp;</span> <br /><br />
Player points: <span id = "user_points">&nbsp;</span> <br /><br />
Avatar: <span id = "myavatar">&nbsp;</span> <span id = "avatar_img">&nbsp;</span><br /> <br />
Weapons:<br />
<span id = "weapon_one">&nbsp;</span> <br />
<span id = "weapon_two">&nbsp;</span><br />
<span id = "weapon_three">&nbsp;</span> <br /><br />
Supplies:<br />
<span id = "supply_one">&nbsp;</span> <br />
<span id = "supply_two">&nbsp;</span><br />
<span id = "supply_three">&nbsp;</span> <br />
<span id = "supply_four">&nbsp;</span><br />
<span id = "supply_five">&nbsp;</span> </h3></div>
</div></form>
<div style="clear:both;"></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
Semester 1/Chapter ZIPs/JavaScript/ch6/images/bunny.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/images/elf.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/images/ghost.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/images/princess.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch6/images/wizard.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
Semester 1/Chapter ZIPs/JavaScript/ch7/.DS_Store vendored Normal file
View File

Binary file not shown.

146
Semester 1/Chapter ZIPs/JavaScript/ch7/carla.css Executable file
View File

@@ -0,0 +1,146 @@
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;
font-size: 1em;
border-bottom: thin none;
margin-right: auto;
text-align: left;
padding-top: 20px;
padding-right: 150px;
padding-bottom: 20px;
padding-left: 150px;
line-height: 130%;
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;
height: 3700px;
width: 500px;
}
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: 16px;
line-height: 130%;
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;
}

23
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_1.html Executable file
View File

@@ -0,0 +1,23 @@
<html>
<head>
<title>Example 7.1</title>
<script>
function quotient(x,y)
{
illegal = "Illegal division operation";
if (y != 0)
return x/y;
else
return illegal;
}
function clickIt()
{
document.write(quotient(60, 5));
}
</script>
</head>
<body>
<input type ="button" onclick="clickIt()" value = "How much is 60 divided by 5?"></button>
</body>
</html>

29
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_10.html Executable file
View File

@@ -0,0 +1,29 @@
<html>
<head>
<title>Example 7.10</title>
<script>
function getValue()
{
var numMice = 12;
document.getElementById('first').innerHTML = (numMice);
numMice = changeValue(numMice);
document.getElementById('third').innerHTML = (numMice);
}
function changeValue(x)
{
var x = 5;
document.getElementById('second').innerHTML = (x);
return x;
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getValue()" value = "Can you change the number? Try it"><br />
<h3>The value of numMice is: <span id = "first">&nbsp;</span></h3>
<h3>The value of x, in the changeValue() function is: <span id = "second">&nbsp;</span></h3>
<h3>The value of numMice after calling the changeValue() function is: <span id = "third">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

49
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_11.html Executable file
View File

@@ -0,0 +1,49 @@
<html>
<head>
<title>Example 7.11</title>
<script>
function getInfo()
{
var name = prompt("What's your name?");
var email = prompt("What is your email address?");
email = checkEmail(email);
document.getElementById('first').innerHTML = name;
document.getElementById('second').innerHTML = email;
}
function checkEmail(address)
{
flag = true; var atSign = "@"; var address; var okSign = true;
while (flag)
{
var numChars = address.length;
for( j = 1; j < (numChars -5); j++)
{
if (address.charAt(j) == atSign)
okSign = false;
}
if ((address.charAt(numChars - 4) != ".") || (okSign == true))
{
alert("Not a valid email address");
address = prompt('Enter a valid email address or enter "quit" to exit the program');
if (address == "quit")
{
address = "unavailable";
flag = false;
}
}
else
flag = false;
}
return address;
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getInfo()" value = "Enter your information"><br />
<h3>Your name is: <span id = "first">&nbsp;</span></h3>
<h3>Your email address is: <span id = "second">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

27
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_12.html Executable file
View File

@@ -0,0 +1,27 @@
<html>
<head>
<title>Example 7.12</title>
<script>
function begin()
{
var one = 0; var two = 1; var three = "_"; var four = NaN;
var bool1 = new Boolean(one);
var bool2 = new Boolean(two);
var bool3 = new Boolean(three);
var bool4 = new Boolean(four);
document.getElementById('1').innerHTML = (one + " results in Boolean " + bool1);
document.getElementById('2').innerHTML = (two + " results in Boolean " + bool2);
document.getElementById('3').innerHTML = (three + " results in Boolean " + bool3);
document.getElementById('4').innerHTML = (four + " results in Boolean " + bool4);
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="begin()" value = "Check Boolean values"><br />
<h3><span id = "1">&nbsp;</span></h3>
<h3><span id = "2">&nbsp;</span></h3>
<h3><span id = "3">&nbsp;</span></h3>
<h3><span id = "4">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

22
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_13.html Executable file
View File

@@ -0,0 +1,22 @@
<html>
<head>
<title>Example 7.13</title>
<script>
function begin()
{
var now = new Date(); var before = new Date(); var later = new Date();
before.setFullYear(1812, 2, 3);
later.setFullYear(2095,6,15);
document.getElementById('now').innerHTML = ("Today's date: " + now);
document.getElementById('before').innerHTML = ("In the past it was: " + before);
document.getElementById('later').innerHTML = ("One day it will be: " + later);
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="begin()" value = "Does anyone know what day it is?"><br />
<h3><span id = "now">&nbsp;</span></h3>
<h3><span id = "before">&nbsp;</span></h3>
<h3><span id = "later">&nbsp;</span></h3>
</body>
</html>

28
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_14.html Executable file
View File

@@ -0,0 +1,28 @@
<html>
<head>
<title>Example 7.14</title>
<script>
function startClock()
{
var today = new Date();
var hour = today.getHours(); var min = today.getMinutes(); var sec = today.getSeconds();
min = checkTime(min);
sec = checkTime(sec);
document.getElementById('now').innerHTML = ("Today's date: " + today);
document.getElementById('clock').innerHTML = hour + ":" + min + ":" + sec;
timer = setTimeout('startClock()',500);
}
function checkTime(i)
{
if (i<10)
i="0" + i;
return i;
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="startClock()" value = "Does anyone know what day it is?"><br />
<h3><span id = "now">&nbsp;</span></h3>
<h3><span id = "clock">&nbsp;</span></h3>
</body>
</html>

21
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_15.html Executable file
View File

@@ -0,0 +1,21 @@
<html>
<head>
<title>Example 7.15</title>
<script type="text/javascript" src="mySource.js"></script>
<script>
function shipIt()
{
var shipCode = "FREEBIE";
var userCode = prompt("Enter your code:");
if (checkWord(shipCode, userCode))
document.getElementById('result').innerHTML = ("Shipping is free!");
else
document.getElementById('result').innerHTML = ("Sorry, your code is not valid");
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="shipIt()" value = "Enter free shipping code"><br />
<h3><span id = "result">&nbsp;</span></h3>
</body>
</html>

7
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_15.js Executable file
View File

@@ -0,0 +1,7 @@
function checkWord(x,y)
{
var x; var y; var spell = true;
if (x != y)
spell = false;
return spell;
}

37
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_16.html Executable file
View File

@@ -0,0 +1,37 @@
<html>
<head>
<title>Example 7.16</title>
<script type="text/javascript" src="mySource.js"></script>
<script>
function shipIt()
{
var shipCode = "FREEBIE";
var userCode = prompt("Enter your code:");
if (checkWord(shipCode, userCode))
document.getElementById('result').innerHTML = ("Shipping is free!");
else
document.getElementById('result').innerHTML = ("Sorry, your code is not valid");
}
function checkWord(one, two)
{
var one; var two; var code = true;
for (i = 1; i < 4; i++)
{
code = true;
if (one != two)
{
code = false;
two = prompt("Invalid code but try again or enter Q to quit:");
if (two == "Q")
break;
}
}
return code;
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="shipIt()" value = "Enter free shipping code"><br />
<h3><span id = "result">&nbsp;</span></h3>
</body>
</html>

35
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_17.html Executable file
View File

@@ -0,0 +1,35 @@
<html>
<head>
<title>Example 7.17</title>
<link href="carla.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mySource.js"></script>
<script>
function buildIt()
{
var numRows; var numCols; var table;
var filler; var filename;
numRows = parseInt(prompt("How many rows do you want in your table?"));
numCols = parseInt(prompt("How many columns do you want in your table?"));
filler = prompt("Do you want to leave the table cells empty? Type y for yes, n for no.");
if (filler == "y")
filler = "empty";
else
{
filler = prompt("Do you want the cells filled with random numbers? Type y for yes, n for no");
if (filler == "y")
filler = "random";
else
filler = "prompt";
}
filename = prompt("Enter the filename of the style sheet to use with this table:");
table = buildTable(numRows, numCols, filler, filename);
}
</script>
</head>
<body>
<div id="container">
<h1 id="logo">Table Builder</h1>
<p><input type ="button" onclick="buildIt()" value = "Build a table"></p>
</div>
</body>
</html>

35
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_18a.html Executable file
View File

@@ -0,0 +1,35 @@
<html>
<head>
<title>Example 7.18a</title>
<script type="text/javascript" src="mySource.js"></script>
<script>
function getRange()
{
var num1 = parseInt(prompt("Enter low end of the range"));
var num2 = parseInt(prompt("Enter the high end of the range"));
var num3 = parseInt(prompt("Enter the number to check"));
var answer = checkRange(num3, num1, num2);
document.getElementById("line1").innerHTML = ("low end: " + num1 + "<br />");
document.getElementById("line2").innerHTML = ("high end: " + num2 + "<br />");
document.getElementById("line3").innerHTML = ("number to be checked: " + num3 + "<br />");
if (answer)
document.getElementById("line4").innerHTML = ("Number is in range");
else
document.getElementById("line4").innerHTML = ("Number is NOT in range");
}
</script>
</head>
<body>
<table align ="center" width ="70%"><tr><td colspan ="2">
<h1>&nbsp;</h2>
<h1>Get Range Function</h1>
<h3>Click to check a range</h3>
<p><input type="button" id="range" value="Enter a range" onclick="getRange();" /></p>
<div id = "line1">&nbsp; </div>
<div id = "line2">&nbsp; </div>
<div id = "line3">&nbsp; </div>
<div id = "line4">&nbsp; </div>
</td></tr>
</table></body>
</html>

115
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_18b.html Executable file
View File

@@ -0,0 +1,115 @@
<html>
<head>
<title>Example 7.18b</title>
<script type="text/javascript" src="mySource.js"></script>
<script>
function getRange()
{
var num1 = parseInt(prompt("Enter low end of the range"));
var num2 = parseInt(prompt("Enter the high end of the range"));
var num3 = parseInt(prompt("Enter the number to check"));
var answer = checkRange(num3, num1, num2);
document.getElementById("line1").innerHTML = ("low end: " + num1 + "<br />");
document.getElementById("line2").innerHTML = ("high end: " + num2 + "<br />");
document.getElementById("line3").innerHTML = ("number to be checked: " + num3 + "<br />");
if (answer)
document.getElementById("line4").innerHTML = ("Number is in range");
else
document.getElementById("line4").innerHTML = ("Number is NOT in range");
}
function getPercent()
{
var num1 = parseInt(prompt("Enter the initial value"));
var num2 = parseInt(prompt("Enter the percentage discounted"));
var newVal = prompt("Enter 'new' to get the value of " + num1 + " after " + num2 + "% is taken off or enter 'reduction' to see the amount of " + num1 + " multiplied by " + num2 + "%");
if (newVal == "new")
var choice = "y";
else choice = "n";
var result = checkPercent(num1, num2, choice);
document.getElementById("line9").innerHTML = ("Initial value: " + num1 + "<br />");
document.getElementById("line10").innerHTML = ("Percentage taken: " + num2 + "%<br />");
document.getElementById("line11").innerHTML = ("Result is: " + result);
}
function getChar()
{
var theWord = prompt("Enter the word");
var letter = prompt("Enter the letter you are interested in");
var spot = parseInt(prompt("Enter the place you want to find this character"));
var answer = charAtPlace(theWord, spot, letter);
document.getElementById("line5").innerHTML = ("Your word: " + theWord + "<br />");
document.getElementById("line6").innerHTML = ("The letter: " + letter + "<br />");
document.getElementById("line7").innerHTML = ("The spot where you hope to find this letter: " + spot + "<br />");
if (answer)
document.getElementById("line8").innerHTML = ("The letter, " + letter + " is at character number " + spot + " in " + theWord);
else
document.getElementById("line8").innerHTML = ("The letter, " + letter + " is NOT at character number " + spot + " in " + theWord);
}
function checkIt()
{
var theWord = prompt("Enter the word");
var letter = prompt("Enter the letter you are interested in");
var answer = checkForChar(theWord, letter);
document.getElementById("line13").innerHTML = ("Your word: " + theWord + "<br />");
document.getElementById("line14").innerHTML = ("The letter: " + letter + "<br />");
if (answer)
document.getElementById("line15").innerHTML = ("The letter, " + letter + " is found in " + theWord);
else
document.getElementById("line15").innerHTML = ("The letter, " + letter + " is NOT found in " + theWord);
}
</script>
<style type="text/css">
<!--
body {
margin: 10%;
}
-->
</style>
</head>
<body>
<div style="width: 700px; margin-left: auto; margin-right: auto;">
<div style = "width: 300px; float: left;">
<h2>Get Range Function</h2>
<h3>Click to check a range</h3>
<p><input type="button" id="range" value="Enter a range" onclick="getRange();" /></p>
<div id = "line1">&nbsp; </div>
<div id = "line2">&nbsp; </div>
<div id = "line3">&nbsp; </div>
<div id = "line4">&nbsp; </div>
</div>
<div style = "width: 300px; float: right;">
<h2>Get Percent Function</h2>
<h3>Click to get a percent of a number</h3>
<p><input type="button" id="percent" value="Enter a number" onclick="getPercent();" /></p>
<div id = "line9">&nbsp; </div>
<div id = "line10">&nbsp; </div>
<div id = "line11">&nbsp; </div>
<div id = "line12">&nbsp; </div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
<div style="width: 700px; margin-left: auto; margin-right: auto;">
<div style = "width: 300px; float: left;">
<h2>Get One Character Check Function</h2>
<h3>Click to check if a character is in a spot in a string</h3>
<p><input type="button" id="character" value="Enter string" onclick="getChar();" /></p>
<div id = "line5">&nbsp; </div>
<div id = "line6">&nbsp; </div>
<div id = "line7">&nbsp; </div>
<div id = "line8">&nbsp; </div>
</div>
<div style = "width: 300px; float: right;">
<h2>Get Another Character Check Function</h2>
<h3>Click to check if a character is in a string</h3>
<p><input type="button" id="character" value="Enter string" onclick="checkIt();" /></p>
<div id = "line13">&nbsp; </div>
<div id = "line14">&nbsp; </div>
<div id = "line15">&nbsp; </div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>

34
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_2.html Executable file
View File

@@ -0,0 +1,34 @@
<html>
<head>
<title>Example 7.2</title>
<script>
function quotient(x,y)
{
illegal = "Illegal division operation";
if (y != 0)
return x/y;
else
return illegal;
}
function clickIt()
{
var divTop = parseFloat(prompt("Enter the divisor:"));
var divBottom = parseFloat(prompt("Enter the dividend:"));
document.getElementById('division').innerHTML = (divTop + " divided by " + divBottom);
var division;
division = quotient(divTop, divBottom);
if (isNaN(division))
division = "illegal division operation";
else
division = division.toFixed(2);
document.getElementById('result').innerHTML = division;
}
</script>
</head>
<body>
<input type ="button" onclick="clickIt()" value = "Enter a division problem"></button>
<h2><span id = "division">&nbsp;</span></h2>
<h2>The result is: <span id = "result">&nbsp;</span></h2>
</body>
</html>

91
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_3.html Executable file
View File

@@ -0,0 +1,91 @@
<html>
<head>
<title>Example 7.3</title>
<script>
function quotient(x,y)
{
illegal = "Illegal division operation";
if (y != 0)
return x/y;
else
return illegal;
}
function divideIt()
{
var divTop = parseFloat(prompt("Enter the divisor:"));
var divBottom = parseFloat(prompt("Enter the dividend:"));
document.getElementById('division').innerHTML = (divTop + " divided by " + divBottom);
var division = quotient(divTop, divBottom);
if (isNaN(division))
division = "illegal division operation";
else
division = division.toFixed(2);
document.getElementById('result').innerHTML = division;
}
function getMileage()
{
var miles = parseFloat(prompt("How many miles did your drive on this trip?"));
var gallons = parseFloat(prompt("How many gallons of gas did you use?"));
var trip = quotient(miles, gallons);
if (isNaN(trip))
{
trip = "illegal division operation";
document.getElementById('mileage').innerHTML = ("Cannot complete the calculation. " + trip);
}
else
{
trip = trip.toFixed(1);
document.getElementById('mileage').innerHTML = ("Your mileage for this trip was " + trip + " mpg.");
}
}
function getBMI()
{
var feet = parseFloat(prompt("How tall are you? Enter your height in feet first:"));
var inches = parseFloat(prompt("How many inches over " + feet + " feet are you?"));
var height = (feet * 12 + inches);
var hInches= height * height;
var weight = parseFloat(prompt("What is your weight in pounds? You may include a partial pound, like 128.5 lbs, for example."));
document.getElementById('height').innerHTML = (height.toFixed(2));
document.getElementById('weight').innerHTML = (weight.toFixed(2));
var bmi = (quotient(weight, hInches) * 703);
if (isNaN(bmi))
{
bmi = "illegal division operation";
document.getElementById('bmi').innerHTML = ("cannot complete the calculation. " + bmi);
}
else
{
bmi = bmi.toFixed(2);
document.getElementById('bmi').innerHTML = (" " + bmi);
}
}
</script>
<style type="text/css">
<!--
body {
margin: 5%;
}
-->
</style>
</head>
<body>
<h2>Using the quotient() function</h2>
<div style="width: 80%;">
<div style="width: 50%; float: left;"><fieldset><legend>Division Problem</legend>
<input type ="button" onclick="divideIt()" value = "Enter a division problem"></button>
<h2><span id = "division">&nbsp;</span></h2>
<h2>The result is: <span id = "result">&nbsp;</span></h2></fieldset></div>
<div style=" width: 50%; float: left;"><fieldset><legend>Gas Mileage</legend>
<input type ="button" onclick="getMileage()" value = "Find the gas mileage"></button>
<h2><span id = "mileage">&nbsp;</span></h2></fieldset></div>
<div style="clear:both;"></div></div>
<br />
<div style="width: 80%;"><fieldset><legend>BMI (Body Mass Index) Calculator</legend>
<p>The formula to calculate your BMI is your weight in pounds (lbs) divided by your height in inches (in) squared and multiplied by a conversion factor of 703. But don't worry about doing the math! If you enter your weight (lbs) and height (in feet and inches), the program will calculate your BMI.</p>
<input type ="button" onclick="getBMI()" value = "Calculate your BMI (Body Mass Index)"></button>
<h3>Your height (in inches): <span id = "height">&nbsp;</span></h3>
<h3>Your weight (in pounds): <span id = "weight">&nbsp;</span></h3>
<h3>Your BMI: <span id = "bmi">&nbsp;</span></h3>
</fieldset></div>
</body>
</html>

25
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_4.html Executable file
View File

@@ -0,0 +1,25 @@
<html>
<head>
<title>Example 7.4</title>
<script>
function getAges()
{
var age = 0;
age = parseInt(prompt("How old is your grandmother?"));
pet();
function pet()
{
age = parseInt(prompt("How old is your puppy?"));
document.getElementById('puppy').innerHTML = (age +10);
}
document.getElementById('granny').innerHTML = (age + 10);
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getAges()" value = "Find the age in 10 years"></button><br />
<h3>Your granny's age in 10 years: <span id = "granny">&nbsp;</span></h3>
<h3>Your puppy's age in 10 years: <span id = "puppy">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

26
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_5.html Executable file
View File

@@ -0,0 +1,26 @@
<html>
<head>
<title>Example 7.5</title>
<script>
function getAges()
{
var age = 0;
age = parseInt(prompt("How old is your grandmother?"));
pet();
function pet()
{
age = parseInt(prompt("How old is your puppy?"));
var num = 2;
document.getElementById('puppy').innerHTML = (age + 10 + num);
}
document.getElementById('granny').innerHTML = (age + 10 + num);
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getAges()" value = "Find the age in 10 years"></button><br />
<h3>Your granny's age in 10 years: <span id = "granny">&nbsp;</span></h3>
<h3>Your puppy's age in 10 years: <span id = "puppy">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

26
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_5a.html Executable file
View File

@@ -0,0 +1,26 @@
<html>
<head>
<title>Example 7.5</title>
<script>
function getAges()
{
var age = 0;
age = parseInt(prompt("How old is your grandmother?"));
pet();
function pet()
{
age = parseInt(prompt("How old is your puppy?"));
num = 10;
document.getElementById('puppy').innerHTML = (age + num);
}
document.getElementById('granny').innerHTML = (age + num);
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getAges()" value = "Find the age in 10 years"></button><br />
<h3>Your granny's age in 10 years: <span id = "granny">&nbsp;</span></h3>
<h3>Your puppy's age in 10 years: <span id = "puppy">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

26
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_5b.html Executable file
View File

@@ -0,0 +1,26 @@
<html>
<head>
<title>Example 7.5</title>
<script>
function getAges()
{
var age = 0;
age = parseInt(prompt("How old is your grandmother?"));
pet();
function pet()
{
age = parseInt(prompt("How old is your puppy?"));
var num = 10;
document.getElementById('puppy').innerHTML = (age + num);
}
document.getElementById('granny').innerHTML = (age + num);
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getAges()" value = "Find the age in 10 years"></button><br />
<h3>Your granny's age in 10 years: <span id = "granny">&nbsp;</span></h3>
<h3>Your puppy's age in 10 years: <span id = "puppy">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

26
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_5c.html Executable file
View File

@@ -0,0 +1,26 @@
<html>
<head>
<title>Example 7.5</title>
<script>
function getAges()
{
var age = 0;
age = parseInt(prompt("How old is your grandmother?"));
pet();
function pet()
{
var age = parseInt(prompt("How old is your puppy?"));
num = 10;
document.getElementById('puppy').innerHTML = (age + num);
}
document.getElementById('granny').innerHTML = (age + num);
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getAges()" value = "Find the age in 10 years"></button><br />
<h3>Your granny's age in 10 years: <span id = "granny">&nbsp;</span></h3>
<h3>Your puppy's age in 10 years: <span id = "puppy">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

25
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_6.html Executable file
View File

@@ -0,0 +1,25 @@
<html>
<head>
<title>Example 7.6</title>
<script>
function getAges()
{
var age = 0;
age = parseInt(prompt("How old is your grandmother?"));
pet();
function pet()
{
var age = parseInt(prompt("How old is your puppy?"));
document.getElementById('puppy').innerHTML = (age +10);
}
document.getElementById('granny').innerHTML = (age + 10);
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getAges()" value = "Find the age in 10 years"></button><br />
<h3>Your granny's age in 10 years: <span id = "granny">&nbsp;</span></h3>
<h3>Your puppy's age in 10 years: <span id = "puppy">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

48
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_7.html Executable file
View File

@@ -0,0 +1,48 @@
<html>
<head>
<title>Example 7.7</title>
<script>
function getDiscount()
{
var item = " ";
item = prompt("What is the item you want to buy?");
cost = parseFloat(prompt("How much does this item cost?"));
checkNum(cost);
if (cost < 50)
{
rate = .10;
salePrice = cost * (1 - rate);
}
else
if (cost < 100)
{
rate = .15;
salePrice = cost * (1 - rate);
}
else
{
rate = .20;
salePrice = cost * (1 - rate);
}
document.getElementById('item').innerHTML = item;
document.getElementById('orig_price').innerHTML = ("$ " + cost.toFixed(2));
document.getElementById('discount').innerHTML = ((rate * 100) + "%");
document.getElementById('result').innerHTML = ("$ " + salePrice.toFixed(2));
}
function checkNum(num)
{
if (num < 0)
alert("Invalid cost entered");
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getDiscount()" value = "How much will you save? Find out now"></button><br />
<h3>You plan to purchase: <span id = "item">&nbsp;</span></h3>
<h3>The original cost is: <span id = "orig_price">&nbsp;</span></h3>
<h3>The discount rate is: <span id = "discount">&nbsp;</span></h3>
<h3>You pay: <span id = "result">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

58
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_8.html Executable file
View File

@@ -0,0 +1,58 @@
<html>
<head>
<title>Example 7.8</title>
<script>
function getDiscount()
{
var item = " ";
item = prompt("What is the item you want to buy?");
cost = parseFloat(prompt("How much does this item cost?"));
cost = checkNum(cost);
if (cost < 50 && cost > 0)
{
rate = .10;
salePrice = cost * (1 - rate);
}
else
if (cost >= 50 && cost < 100)
{
rate = .15;
salePrice = cost * (1 - rate);
}
else
if (cost >= 100)
{
rate = .20;
salePrice = cost * (1 - rate);
}
else
{
rate = 0;
salePrice = 0;
}
document.getElementById('item').innerHTML = item;
document.getElementById('orig_price').innerHTML = ("$ " + cost.toFixed(2));
document.getElementById('discount').innerHTML = ((rate * 100) + "%");
document.getElementById('result').innerHTML = ("$ " + salePrice.toFixed(2));
}
function checkNum(num)
{
if (num < 0)
{
alert("Invalid cost entered");
num = 0;
}
return num;
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getDiscount()" value = "How much will you save? Find out now"></button><br />
<h3>You plan to purchase: <span id = "item">&nbsp;</span></h3>
<h3>The original cost is: <span id = "orig_price">&nbsp;</span></h3>
<h3>The discount rate is: <span id = "discount">&nbsp;</span></h3>
<h3>You pay: <span id = "result">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

28
Semester 1/Chapter ZIPs/JavaScript/ch7/ex_7_9.html Executable file
View File

@@ -0,0 +1,28 @@
<html>
<head>
<title>Example 7.9</title>
<script>
function getValue()
{
var numMice = 12;
document.getElementById('first').innerHTML = (numMice);
changeValue(numMice);
document.getElementById('third').innerHTML = (numMice);
}
function changeValue(x)
{
x = 5;
document.getElementById('second').innerHTML = (x);
}
</script>
</head>
<body><table align="center" width = "70%"><tr><td><br />
<input type ="button" onclick="getValue()" value = "Can you change the number? Try it"><br />
<h3>The value of numMice is: <span id = "first">&nbsp;</span></h3>
<h3>The value of x, in the changeValue() function is: <span id = "second">&nbsp;</span></h3>
<h3>The value of numMice after calling the changeValue() function is: <span id = "third">&nbsp;</span></h3>
</td></tr></table>
</body>
</html>

118
Semester 1/Chapter ZIPs/JavaScript/ch7/greg.css Executable file
View File

@@ -0,0 +1,118 @@
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:100%;
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: 14px;
}
#nav a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 14px;
}
#content {
margin-left: auto;
margin-right: auto;
padding: 10px;
overflow:auto;
border: medium groove #88FFFF;
line-height: 135%;
}
.floatright {padding-left:20px; padding-right:50px;
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: 1em;
border-bottom: 1px solid #000000;
margin-right: auto;
text-align: left;
padding-top: 20px;
padding-right: 150px;
padding-bottom: 20px;
padding-left: 150px;
line-height: 130%;
}
.details { padding-left:20%;
padding-right:20%;
}
img {border:0; }
.content {
margin-left: auto;
margin-right: auto;
padding: 5px;
height: 3700px;
width: 500px;
}
a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 16px;
}
a:hover {
color: #000040;
background-color: #88ffff;
}
span {
font-size: 36px;
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 {
font-family: "Courier New", Courier, mono;
font-size: 14px;
color: #88ffff;
}

121
Semester 1/Chapter ZIPs/JavaScript/ch7/greg/greg.css Executable file
View File

@@ -0,0 +1,121 @@
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;
}

110
Semester 1/Chapter ZIPs/JavaScript/ch7/greg/gregs_hangman.html Executable file
View File

@@ -0,0 +1,110 @@
<html>
<head>
<title>Greg's Gambits | Hangman</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mySource.js"></script>
<script>
function startHangman()
{
var nooseCount = 0;
var wordNum = Math.floor((Math.random()*9)+1);
var picture = "pic" + wordNum + ".jpg";
switch(wordNum)
{
case 1:
word = "ghost"; break;
case 2:
word = "horse"; break;
case 3:
word = "insect"; break;
case 4:
word = "celery"; break;
case 5:
word = "pelican"; break;
case 6:
word = "jewelbox"; break;
case 7:
word = "castle"; break;
case 8:
word = "monster"; break;
case 9:
word = "bunny"; break;
}
alert("Hehehehe... We're cheater's. WORD = " + word );
var newWord = ""; var win = false;
var lgth = word.length; var guessLetter; var goodGuess = false;
for (var i = 0; i < lgth; i++)
newWord = newWord + "_ ";
document.getElementById("noose").innerHTML = ("<img src ='images/hangman0.gif' />");
document.getElementById("game").innerHTML = newWord;
while (win == false && nooseCount < 10)
{
goodGuess = false;
guessLetter = prompt("Guess a letter");
for (var j = 0; j < lgth; j++)
{
if (guessLetter == word.charAt(j))
{
goodGuess = true;
var offSet = 2*j;
newWord = setCharAt(newWord, offSet, guessLetter);
}
}
document.getElementById("game").innerHTML = newWord;
win = checkWord(word, newWord);
if (win == true)
{
document.getElementById("result").innerHTML = ("You win!");
document.getElementById("noose").innerHTML = ("<img src = '" + picture + "' />");
}
else if (win == false)
{
document.getElementById("result").innerHTML = ("not a winner yet");
if (goodGuess == false)
nooseCount = nooseCount + 1;
document.getElementById("noose").innerHTML = ("<img src ='images/hangman" + nooseCount + ".gif' />");
}
}
}
function checkWord(word, otherWord)
{
var cleanWord;
cleanWord = otherWord;
cleanWord = otherWord.replace(/ /g, "");
if (word == cleanWord)
return true;
else
return false;
}
function setCharAt(str,index,chr)
{
if(index > str.length-1)
return str;
return str.substr(0,index) + chr + str.substr(index+1);
}
</script>
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" class="floatleft" />
<h1 id="logo"><em>The Game of Hangman</em></h1>
<h2 align="center">Greg Challenges You to a Game of Hangman</h2>
<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" style="width: 600px; margin-left: auto; margin-right: auto;">
<p><input type="button" value = "Start the game" onclick="startHangman();" /></p>
<div id = "noose" class = "floatright"><img src ="images/hangman10.gif" /></div>
<div id = "game"><p>&nbsp;</p></div>
<div id = "result"><p>&nbsp;</p></div>
</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
Semester 1/Chapter ZIPs/JavaScript/ch7/greg/images/hangman0.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 889 B

BIN
Semester 1/Chapter ZIPs/JavaScript/ch7/greg/images/hangman1.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

Some files were not shown because too many files have changed in this diff Show More