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

Chapter ZIP

master
Caleb Fontenot 2023-03-24 13:26:48 +07:00
parent bbce21cf8b
commit c032ee5d22
34 changed files with 1530 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Chapter ZIPs/JavaScript/ch6.zip
View File

Binary file not shown.

18
Chapter ZIPs/JavaScript/ch6/ex_6_1.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_10.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_11.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_12.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_13.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_14.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_15.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_16.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_17.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_18.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_19.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_2.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_3.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_4.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_5.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_6.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_7.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_8.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/ex_6_9.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/greg.css
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/greg/greg.css
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/greg/images/bunny.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/elf.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/ghost.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/princess.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/superhero.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/wizard.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

204
Chapter ZIPs/JavaScript/ch6/greg/signin.html
Unescape Escape 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
Chapter ZIPs/JavaScript/ch6/images/bunny.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Chapter ZIPs/JavaScript/ch6/images/elf.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
Chapter ZIPs/JavaScript/ch6/images/ghost.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
Chapter ZIPs/JavaScript/ch6/images/princess.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
Chapter ZIPs/JavaScript/ch6/images/wizard.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB