Chapter ZIP
This commit is contained in:
parent
bbce21cf8b
commit
c032ee5d22
BIN
Chapter ZIPs/JavaScript/ch6.zip
Normal file
BIN
Chapter ZIPs/JavaScript/ch6.zip
Normal file
Binary file not shown.
18
Chapter ZIPs/JavaScript/ch6/ex_6_1.html
Executable file
18
Chapter ZIPs/JavaScript/ch6/ex_6_1.html
Executable 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
Executable file
94
Chapter ZIPs/JavaScript/ch6/ex_6_10.html
Executable 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"> </span> <br />
|
||||||
|
Your contact phone: <span id = "cell_phone"> </span> <br />
|
||||||
|
Entree selected: <span id = "main_dish"> </span> <br />
|
||||||
|
First side dish selected: <span id = "side_one"> </span> <br />
|
||||||
|
Second side dish selected: <span id = "side_two"> </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
Executable file
95
Chapter ZIPs/JavaScript/ch6/ex_6_11.html
Executable 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"> </span> <br />
|
||||||
|
Your contact phone: <span id = "cell_phone"> </span> <br />
|
||||||
|
Entree selected: <span id = "main_dish"> </span> <br />
|
||||||
|
First side dish selected: <span id = "side_one"> </span> <br />
|
||||||
|
Second side dish selected: <span id = "side_two"> </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
Executable file
28
Chapter ZIPs/JavaScript/ch6/ex_6_12.html
Executable 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"> </span> <br />
|
||||||
|
Number characters entered: <span id = "word_size"> </span> <br />
|
||||||
|
Password entered: <span id = "pword"> </span> </p>
|
||||||
|
</td></tr></table>
|
||||||
|
</body></html>
|
||||||
34
Chapter ZIPs/JavaScript/ch6/ex_6_13.html
Executable file
34
Chapter ZIPs/JavaScript/ch6/ex_6_13.html
Executable 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"> </span> <br />
|
||||||
|
It has this many characters: <span id = "word_size"> </span> <br />
|
||||||
|
The first character is: <span id = "first_char"> </span> <br />
|
||||||
|
The last character is: <span id = "last_char"> </span> <br />
|
||||||
|
The 4th, 5th, 6th, and 7th characters are: <span id = "the_middle"> </span> <br /></p>
|
||||||
|
</td></tr></table>
|
||||||
|
</body></html>
|
||||||
89
Chapter ZIPs/JavaScript/ch6/ex_6_14.html
Executable file
89
Chapter ZIPs/JavaScript/ch6/ex_6_14.html
Executable 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"> </span><br />
|
||||||
|
<p>Password information:<br />
|
||||||
|
Password entered: <span id = "show_word"> </span> </p>
|
||||||
|
</td></tr></table>
|
||||||
|
</body></html>
|
||||||
21
Chapter ZIPs/JavaScript/ch6/ex_6_15.html
Executable file
21
Chapter ZIPs/JavaScript/ch6/ex_6_15.html
Executable 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
Executable file
47
Chapter ZIPs/JavaScript/ch6/ex_6_16.html
Executable 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
Executable file
27
Chapter ZIPs/JavaScript/ch6/ex_6_17.html
Executable 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
Executable file
142
Chapter ZIPs/JavaScript/ch6/ex_6_18.html
Executable 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"> </span> <br />
|
||||||
|
Last name: <span id = "last_name"> </span> <br />
|
||||||
|
Nickname: <span id = "nick_name"> </span> <br />
|
||||||
|
Dream car: <span id = "dream_car"> </span> <br />
|
||||||
|
Favorite meal: <span id = "favorite_meal"> </span> <br />
|
||||||
|
Vacation desired: <span id = "vacation_spot"> </span> </p></div>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
147
Chapter ZIPs/JavaScript/ch6/ex_6_19.html
Executable file
147
Chapter ZIPs/JavaScript/ch6/ex_6_19.html
Executable 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"> </span> <br />
|
||||||
|
Last name: <span id = "last_name"> </span> <br />
|
||||||
|
Nickname: <span id = "nick_name"> </span> <br />
|
||||||
|
Dream car: <span id = "dream_car"> </span> <br />
|
||||||
|
Favorite meal: <span id = "favorite_meal"> </span> <br />
|
||||||
|
Vacation desired: <span id = "vacation_spot"> </span> </p></div>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
19
Chapter ZIPs/JavaScript/ch6/ex_6_2.html
Executable file
19
Chapter ZIPs/JavaScript/ch6/ex_6_2.html
Executable 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 /> 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
Executable file
53
Chapter ZIPs/JavaScript/ch6/ex_6_3.html
Executable 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
Executable file
34
Chapter ZIPs/JavaScript/ch6/ex_6_4.html
Executable 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"> <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> </p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
Chapter ZIPs/JavaScript/ch6/ex_6_5.html
Executable file
50
Chapter ZIPs/JavaScript/ch6/ex_6_5.html
Executable 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
Executable file
66
Chapter ZIPs/JavaScript/ch6/ex_6_6.html
Executable 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"> </span> </h2>
|
||||||
|
<h2>First side dish selected: <span id = "side_one"> </span> </h2>
|
||||||
|
<h2>Second side dish selected: <span id = "side_two"> </span> </h2></td></tr>
|
||||||
|
</table></form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
Chapter ZIPs/JavaScript/ch6/ex_6_7.html
Executable file
13
Chapter ZIPs/JavaScript/ch6/ex_6_7.html
Executable 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
Executable file
91
Chapter ZIPs/JavaScript/ch6/ex_6_8.html
Executable 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"> </span> </h3>
|
||||||
|
<h3>Your contact phone: <span id = "cell_phone"> </span> </h3>
|
||||||
|
<h3>Entree selected: <span id = "main_dish"> </span> </h3>
|
||||||
|
<h3>First side dish selected: <span id = "side_one"> </span> </h3>
|
||||||
|
<h3>Second side dish selected: <span id = "side_two"> </span> </h3></div>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
16
Chapter ZIPs/JavaScript/ch6/ex_6_9.html
Executable file
16
Chapter ZIPs/JavaScript/ch6/ex_6_9.html
Executable 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
Executable file
121
Chapter ZIPs/JavaScript/ch6/greg.css
Executable 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
Executable file
121
Chapter ZIPs/JavaScript/ch6/greg/greg.css
Executable 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
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/bunny.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/elf.jpg
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/elf.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/ghost.jpg
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/ghost.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/princess.jpg
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/princess.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/superhero.jpg
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/superhero.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/wizard.jpg
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/greg/images/wizard.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
204
Chapter ZIPs/JavaScript/ch6/greg/signin.html
Executable file
204
Chapter ZIPs/JavaScript/ch6/greg/signin.html
Executable 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"> <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>
|
||||||
|
<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"> </span> <br /><br />
|
||||||
|
Username: <span id = "user_name"> </span> <br /><br />
|
||||||
|
Player points: <span id = "user_points"> </span> <br /><br />
|
||||||
|
Avatar: <span id = "myavatar"> </span> <span id = "avatar_img"> </span><br /> <br />
|
||||||
|
Weapons:<br />
|
||||||
|
<span id = "weapon_one"> </span> <br />
|
||||||
|
<span id = "weapon_two"> </span><br />
|
||||||
|
<span id = "weapon_three"> </span> <br /><br />
|
||||||
|
Supplies:<br />
|
||||||
|
<span id = "supply_one"> </span> <br />
|
||||||
|
<span id = "supply_two"> </span><br />
|
||||||
|
<span id = "supply_three"> </span> <br />
|
||||||
|
<span id = "supply_four"> </span><br />
|
||||||
|
<span id = "supply_five"> </span> </h3></div>
|
||||||
|
</div></form>
|
||||||
|
<div style="clear:both;"></div>
|
||||||
|
<div id="footer">Copyright © 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
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/images/bunny.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
Chapter ZIPs/JavaScript/ch6/images/elf.jpg
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/images/elf.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
Chapter ZIPs/JavaScript/ch6/images/ghost.jpg
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/images/ghost.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
Chapter ZIPs/JavaScript/ch6/images/princess.jpg
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/images/princess.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
Chapter ZIPs/JavaScript/ch6/images/wizard.jpg
Executable file
BIN
Chapter ZIPs/JavaScript/ch6/images/wizard.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Loading…
Reference in New Issue
Block a user