Index_E
|
The Center Park Web Site: Complete Code Listing
The following sections list each of the pages that make up the site. If you were to code and then save them, with the name provided, into a single directory, you could then see the site in action as it has been illustrated here.
MenuBar.html
This is the code for the left-hand frame of the site home page:
<html> <head> <base target="main"> <script language="JavaScript"> <!-- function change( image, event ) { image.src = image.name + event + ".bmp"; } // --> </script> </head> <body> <font color="red" size="4"><b> Center Park<br> </b></font> <table width="100%"> <tr><td> <a href="Main.html" target="main"> <img border="0" src="/books/1/161/1/html/2/home1.bmp" name="home" onMouseDown="JavaScript: change( this, 3 );" onMouseOver="JavaScript: change( this, 2 );" onMouseOut="JavaScript: change( this, 1 );"> </a> </td></tr> <tr><td> <a href="LogIn.html" target="main"> <img border="0" src="/books/1/161/1/html/2/login1.bmp" name="login" onMouseDown="JavaScript: change( this, 3 );" onMouseOver="JavaScript: change( this, 2 );" onMouseOut="JavaScript: change( this, 1 );"> </a> </td></tr> <tr><td> <a href="Store.html" target="main"> <img border="0" src="/books/1/161/1/html/2/store1.bmp" name="store" onMouseDown="JavaScript: change( this, 3 );" onMouseOver="JavaScript: change( this, 2 );" onMouseOut="JavaScript: change( this, 1 );"> </a> </td></tr> <tr><td> <a href="Customize.html" target="main"> <img border="0" src="/books/1/161/1/html/2/customize1.bmp" name="customize" onMouseDown="JavaScript: change( this, 3 );" onMouseOver="JavaScript: change( this, 2 );" onMouseOut="JavaScript: change( this, 1 );"> </a> </td></tr> </table> </body> </html>
Main.html
This is the code for the right-hand frame of the home page:
<html> <head> <title>Center Park Home Page - Main Page</title> <script language="JavaScript"> <!-- function getAd() { var ad = "ad"; ad += parseInt( Math.random() * 2 ) + 1; return( ad + ".jpg" ); } function rotateAd() { with( document ) { for( i = 0 ; i < images.length ; i++ ) { if( images[i].name == "adImage" ) { images[i].alt = images[i].src = getAd(); } } } window.setTimeout( "rotateAd()", 10000 ); } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms(); rotateAd();"> <center> <font color="red" size="6"><b> Center Park Home Page </b></font></center> <br><br> <table width="100%"> <tr> <td width="50%"> <img name="adImage" border="0" width="345" height="200"> </td> <td width="50%"> <a href="login.html">Log In</a><br> <a href="store.html">Store</a><br> <a href="customize.html">Customize</a> </td> </tr> <tr> <td width="100%" colspan="2"> <hr> <font face="Courier" size="5">*** School News ***</font> <br> <br> <b>July 4th</b> Fireworks on the mall! Come enjoy the holiday with the Center Park faculty, staff and students.<br> <br> <b>July 3rd</b> First annual Adopt a Nerd Day! They are people too.<br> <br> <b>June 12th</b> June Bug festival begins.</td> </tr> </table> </body> </html>
LogIn.html
This code represents the login page, which users complete in order to gain access to their personalized task calendar:
<html> <head> <title> Center Park Home Page Log In </title> <script language="JavaScript"> <!-- function LogIn( form ) { // Store the student name in the cookie file for later reference document.cookie = "username=" + form.username.value; // Make sure the password is correct document.location = form.password.value + ".html"; } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <center><font size=6><b>Welcome to Center Park Home Page</b></font></center> <br><br> To access the contents of this site, please log in using your student username and the password provided to you: <br><br> <br><br> <form name="login" onSubmit="JavaScript: LogIn( this ); return( false );" > <center> <table border="2" cellpadding="2" width="250"> <tr> <td colspan="2"><b>Log In</b></td> </tr> <tr> <td>Username:</td> <td align="right"><input name="username" size="10"></td> </tr> <tr> <td>Password:</td> <td align="right"><input name="password" size="10"></td> </tr> <tr> <td colspan="2"> <p align="center"><input type="submit" value="Submit"></td> </tr> </table> </center> </form> <script language="JavaScript"> <!-- document.login.username.value = getCookieValue( "username" ); // --> </script> </body> </html>
y7v2xu89.html
For illustrative purposes, this page has been given the name of the password that is required to be entered in the login screen (the username doesn't matter). Again, this is obviously not the most secure design (to put it mildly!) but has been created as it is purposely, to ensure that you understand how information is passed between one page and another.
<html> <head> <title></title> <script language="JavaScript"> <!-- var now = new Date(); var months = new Array( "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ); var yString = getCookieValue( "year" ); var mString = getCookieValue( "month" ); var y = fixYear( yString ? parseInt( yString ) : now.getYear() ); var m = fixMonth( mString ? parseInt( mString ) : now.getMonth() ); var month = new Date( y, m, 1 ); function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function fixYear( year ) { return( year < 1000 ? year + 1900 : year ); } function fixMonth( month ) { return( month < 0 ? month + 12 : ( month > 11 ? month 12 : month ) ); } function getNumberDays( d ) { switch( d.getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ); case 4: case 6: case 9: case 11: return( 30 ); case 2: return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); } } function getEnding( number ) { if( number > 10 && number < 20 ) return( "th" ); switch( number % 10 ) { case 0: case 4: case 5: case 6: case 7: case 8: case 9: return( "th" ); case 1: return( "st" ); case 2: return( "nd" ); case 3: return( "rd" ); } } // These should be loaded from a server-side language such as ASP var tasks = new Array( 30 ); tasks[5] = "<a href='Test.html'>Take CS Test</a>"; tasks[28] = "English Paper Due"; function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms(); document.cookie='loggedin=true';"> <i>Welcome</i><b> <script language="JavaScript"> <!-- document.write( getCookieValue( "username" ) + "</b>!! " ); // --> </script> <i>Here are your tasks for</i> <table width="75%"> <tr><td align="center"> <font size="6"><b> <script language="JavaScript"> <!-- document.write( months[m] ); // --> </script> </b></font> </td></tr> </table> <table border="1" cellpadding="2" width="75%"> <tr> <td width="14%"><b><i>Sunday</i></b></td> <td width="14%"><b><i>Monday</i></b></td> <td width="14%"><b><i>Tuesday</i></b></td> <td width="14%"><b><i>Wednesday</i></b></td> <td width="14%"><b><i>Thursday</i></b></td> <td width="14%"><b><i>Friday</i></b></td> <td width="14%"><b><i>Saturday</i></b></td> </tr> <tr> <script language="JavaScript"> <!-- var startDay = month.getDay(); for( i = 0 ; i < startDay ; i++ ) { document.write( "<td></td>" ); } var numDays = getNumberDays( month ); for( i = 0 ; i < numDays ; i++ ) { if( ( i + startDay + 1 ) % 7 == 1 ) { document.write( "</tr><tr>" ); } document.write( "<td height='75' valign='top'" ); if( fixYear( now.getYear() ) == fixYear( month.getYear() ) && now.getMonth() == month.getMonth() && now.getDate() == i + 1 ) document.write( " bordercolor='red'" ); document.write( "><b>" + (i+1) + getEnding( i + 1 ) + "</b><br>" ); if( tasks[i+1] ) document.write( tasks[i+1] ); document.write( "</td>" ); } // --> </script> </tr> </table> <table width="75%"> <tr> <td> <script language="JavaScript"> <!-- document.write( "<a href=\"" + document.location + "\" " ); document.write( "onClick=\"JavaScript: document.cookie='month=" + fixMonth(m-1) + "';\">" ); document.write( months[fixMonth(m-1)] + "</a>" ); // --> </script> </td> <td align="center"> <a href="AddTask.html">Add task</a> </td> <td align="right"> <script language="JavaScript"> <!-- document.write( "<a href=\"" + document.location + "\" " ); document.write( "onClick=\"JavaScript: document.cookie='month=" + fixMonth(m+1) + "';\">" ); document.write( months[fixMonth(m+1)] + "</a>" ); // --> </script> </td> </tr> </table> </body> </html>
AddTask.html
The following page presents the ability for a user to add a task to his or her personal calendar:
<html> <head> <title>Center Park - Add Task</title> <script language="JavaScript"> <!-- if( getCookieValue( "loggedin" ) != "true" ) document.location = "Main.html"; var dateElement; function openDatePicker( target ) { dateElement = target; var ieSize = "width=380,height=255"; var navSize = "width=480,height=295"; var isNav = navigator.appName == "Netscape"; window.open( "PopupCalendar.html", "calendar", "menubar=no,resizable=no,scroll- bars=no,status=yes,toolbar=no," + ( isNav ? navSize : ieSize ) ); } function setDate( date ) { dateElement.value = date; } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <br> <br> <i>Center Park Task Scheduler for</i><b> <script language="JavaScript"> <!-- document.write( getCookieValue( "username" ) ); // --> </script></b>. <br><br> <br><br> <form name="taskForm" onSubmit="JavaScript: return( false );"> <center> <table border="1" width="75%"> <tr> <td width="100%" colspan="2"><b>Schedule Task</b></td> </tr> <tr> <td width="50%"> Date of task: <input type="text" name="date" size="10"> <input type="button" value="..." onClick="JavaScript: openDatePicker( document.taskForm.date );"> </td> <td width="50%"> Task description (HTML is ok):<br> <textarea rows="7" cols="35"></textarea> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="Submit" name="B1"> </td> </tr> </table> </center> </form> </body> </html>
PopUpCalendar.html
The following code allows the pop-up calendar to appear, so that users can pick a specific date on which to schedule their task:
<html> <head> <title>Date Chooser</title> <style type="text/css"> <!-- .mono{ font-family: monospace; } --> </style> <script language="JavaScript"> <!-- var now = new Date(); var month = new Date( fixYear( now.getYear() ), now.getMonth(), 1 ); var months = new Array( "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ); var urlquery = location.href.split( "?" ); if( urlquery[1] ) { var params = urlquery[1].split( "&" ); var m = ( params[0] ? params[0].split( "=" )[1] - 1 : fixMonth( now.getMonth() ) ); var y = ( params[1] ? params[1].split( "=" )[1] : fixYear( now.getYear() ) ); month = new Date( y, m, 1 ); } function fixYear( year ) { return( year < 1000 ? year + 1900 : year ); } function fixMonth( month ) { return( month < 0 ? month - 12 : ( month > 11 ? month 12 : month ) ); } function getNumberDays( d ) { switch( d.getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ); case 4: case 6: case 9: case 11: return( 30 ); case 2: return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); } } function getEnding( number ) { if( number > 10 && number < 20 ) return( "th" ); switch( number % 10 ) { case 0: case 4: case 5: case 6: case 7: case 8: case 9: return( "th" ); case 1: return( "st" ); case 2: return( "nd" ); case 3: return( "rd" ); } } function onSelect() { window.opener.setDate( document.theForm.date.value ); self.close(); } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <form name="theForm"> <table border="1" width="75%" style="border-collapse: collapse"> <tr> <td align="left" colspan=2> <b>Month:</b> <input type="text" name="Month" size="5"> <script language="JavaScript"> <!-- document.theForm.Month.value = fixMonth( month.getMonth() + 1 ); // --> </script> </td> <td colspan=3> <center> <b><script language="JavaScript"> <!-- document.write( months[fixMonth( month.getMonth() )] + " " + fixYear( month.getYear() ) ); // --> </script></b><br> <input type="submit" value="Submit"> </center> </td> <td align="right" colspan=2> <b>Year:</b> <input type="text" name="Year" size="5"> <script language="JavaScript"> <!-- document.theForm.Year.value = fixYear( month.getYear() ); // --> </script> </td> </tr> <tr> <td width="14%"><b><i>Sun</i></b></td> <td width="14%"><b><i>Mon</i></b></td> <td width="14%"><b><i>Tue</i></b></td> <td width="14%"><b><i>Wed</i></b></td> <td width="14%"><b><i>Thu</i></b></td> <td width="14%"><b><i>Fri</i></b></td> <td width="14%"><b><i>Sat</i></b></td> </tr> <tr> <script language="JavaScript"> <!-- var startDay = month.getDay(); for( i = 0 ; i < startDay ; i++ ) { document.write( "<td></td>" ); } var numDays = getNumberDays( month ); for( i = 1 ; i < numDays + 1 ; i++ ) { if( ( i + startDay ) % 7 == 1 ) { document.write( "</tr><tr>" ); } document.write( "<td><center>" + "<input type='button' " + "onClick='JavaScript: document.theForm.date.value=\"" + fixMonth( month.getMonth() + 1 ) + "/" + i + "/" + fixYear( month.getYear() ) + "\"; onSelect();' " + "value='" + ( i < 10 ? " " : "" ) + i + getEnding( i ) + "' " + "class='mono'>" + "</center></td>" ); } // --> </script> </tr> </table> <input type="hidden" name="date"> </form> </body> </html>
Test.html
The following code presents the online test:
<html> <head> <title>Center Park - Computer Science Test</title> <script language="JavaScript"> <!-- if( getCookieValue( "loggedin" ) != "true" ) document.location = "Main.html"; function validate( form ) { for( i = 0 ; i < form.elements.length ; i++ ) { with( form.elements[i] ) { if( type == "text" && value == "" ) { alert( "Please answer all questions." ); return( false ); } } } return( true ); } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <b><font size="5">Computer Science 101 - Midterm Test</font> </b> <br><br> <font face="Courier"> All the questions are <b>compulsory</b>. Please read the questions <i>carefully</i> before answering. Do not spend too much time on any one question. You have 30 minutes to complete the test. Good Luck! </font> <br><br> <form name="TestForm" action="Grade.html" onSubmit="JavaScript: return( validate( this ) );"> <table width="100%" cellpadding="2" cellspacing="2"> <tr> <td>1)</td> <td> <font face="Courier"> Imagine there was no precedence for arithmetic operators. Assuming left associativity for all operators, what is the value of the expression 5-3*4/2+6 ? </font> </td> </tr> <tr> <td>Answer</td> <td><input type="text" name="Q1" size="20"></td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>2)</td> <td> <font face="Courier"> What HTML tag must all JavaScript functions be nested in ie: HTML, BODY, OR TABLE? </font> </td> </tr> <tr> <td>Answer</td> <td><input type="text" name="Q2" size="20"></td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>3)</td> <td> <font face="Courier"> What event is spawned after a user has selected text or HTML elements on a web page? </font> </td> </tr> <tr> <td>Answer</td> <td><input type="text" name="Q3" size="20"></td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>4)</td> <td> <font face="Courier"> What type of variable scoping does JavaScript use? </font> </td> </tr> <tr> <td>Answer</td> <td><input type="text" name="Q4" size="20"></td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>5)</td> <td> <font face="Courier"> What relational operator is used to determine if two variables of the same type are not equal to each other? </font> </td> </tr> <tr> <td>Answer</td> <td><input type="text" name="Q5" size="20"></td> </tr> </table> <br> <input type="submit" value="Submit" name="SubmitButton"> </form> <script language="JavaScript"> <!-- window.setTimeout( "document.TestForm.SubmitButton.enabled=false", 1000 * 60 * 30 ); // --> </script> </body> </html>
Grade.html
Once the test is submitted, it is "graded" via the use of the following page:
<html> <head> <title>Center Park - Test Grader</title> <script language="JavaScript"> <!-- var total = 0, correct = 0; function getFormValue( name ) { var c = location.href.split( "?" )[1]; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( "&", begin ); if( end == -1 ) end = c.length; return( unescape( c.slice( begin, end ) ) ); } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <b><font size="5">Computer Science 101 - Midterm Test</font> </b> <br><br> <font face="Courier"> All the questions are <b>compulsory</b>. Please read the questions <i>carefully</i> before answering. Do not spend too much time on any one question. You have 30 minutes to complete the test. Good Luck! </font> <br><br> <form> <table width="100%" cellpadding="2" cellspacing="2"> <tr> <td>1)</td> <td> <font face="Courier"> Imagine there was no precedence for arithmetic operators. Assuming left associativity for all operators, what is the value of the expression 5-3*4/2+6 ? </font> </td> </tr> <tr> <td>Answer</td> <td><b>10</b> <script language="JavaScript"> <!-- if( parseInt( getFormValue( "Q1" ) ) == 10 ) { document.write( "<font color='red'><b>CORRECT!</b></font>" ); correct++ } else { document.write( "<font color='red'><b>Wrong</b></font> You answered: " + getFormValue( "Q1" ) ); } total++; // --> </script> </td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>2)</td> <td> <font face="Courier"> What HTML tag must all JavaScript functions be nested in ie: HTML, BODY, TABLE? </font> </td> </tr> <tr> <td>Answer</td> <td><b>SCRIPT</b> <script language="JavaScript"> <!-- if( getFormValue( "Q2" ).toUpperCase() == "SCRIPT" ) { document.write( "<font color='red'><b>CORRECT!</b></font>" ); correct++ } else { document.write( "<font color='red'><b>Wrong</b></font> You answered: " + getFormValue( "Q2" ) ); } total++; // --> </script> </td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>3)</td> <td> <font face="Courier"> What event is spawned after a user has selected text or HTML elements on a Web page? </font> </td> </tr> <tr> <td>Answer</td> <td><b>OnSelect</b> <script language="JavaScript"> <!-- if( getFormValue( "Q3" ).toUpperCase() == "ONSELECT" ) { document.write( "<font color='red'><b>CORRECT!</b></font>" ); correct++ } else { document.write( "<font color='red'><b>Wrong</b></font> You answered: " + getFormValue( "Q3" ) ); } total++; // --> </script> </td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>4)</td> <td> <font face="Courier"> What type of variable scoping does JavaScript use? </font> </td> </tr> <tr> <td>Answer</td> <td><b>Static</b> <script language="JavaScript"> <!-- if( getFormValue( "Q4" ).toUpperCase() == "STATIC" ) { document.write( "<font color='red'><b>CORRECT!</b></font>" ); correct++ } else { document.write( "<font color='red'><b>Wrong</b></font> You answered: " + getFormValue( "Q4" ) ); } total++; // --> </script> </td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>5)</td> <td> <font face="Courier"> What relational operator is used to determine if two variables of the same type are not equal to each other? </font> </td> </tr> <tr> <td>Answer</td> <td><b>!=</b> <script language="JavaScript"> <!-- if( getFormValue( "Q5" ) == "!=" ) { document.write( "<font color='red'><b>CORRECT!</b></font>" ); correct++ } else { document.write( "<font color='red'><b>Wrong</b></font> You answered: " + getFormValue( "Q5" ) ); } total++; // --> </script> </td> </tr> </table> </form> <br><br> <script language="JavaScript"> <!-- document.write( "<font color='red'><b>You got " + correct + " correct out of " + total + " questions. Your score is " + (correct/total*100) + "%</b></font>" ); // --> </script> </body> </html>
Customize.html
The following page allows the user to customize the foreground and background colors of the Center Park site:
<html> <head> <title>Center Park Customization</title> <script language="JavaScript"> <!-- function saveCustoms( form ) { document.cookie = "bgColor=" + form.bgColor.value; document.cookie = "fgColor=" + form.fgColor.value; } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <form onSubmit="JavaScript: saveCustoms( this );"> <table> <tr> <td><b><font size="5">Customize <br> web site colors:<br> <br></font></b></td> <tr> <td><b>Background Color: </b></td> <td><input type="text" name="bgColor" size="15"></td> </tr> <tr> <td><b>Foreground Color:</b></td> <td><input type="text" name="fgColor" size="15"></td> <td> <input type="submit" value="Submit"></td> </tr> </table> </form> </body> </html>
Store.html
The home page of the site store, the following presents the items available, and the ability to add them to your shopping cart:
<html> <head> <title>Center Park Store</title> <script language="JavaScript"> <!-- function addItem( name, price ) { var i = 1; for( ; getCookieValue( "item" + i ) != "" ; i++ ); document.cookie = "item" + i + "=" + name + "," + price; document.cookie = "items=" + i; } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <b><font size="6">Center Park School Store -</font></b> <font size="4">for all your school paraphernalia needs</font><br><br> <form> <table border="2" width="100%"> <tr> <td>School Hat - One size fits all, school emblem on front.</td> <td> $9.99</td><td align="center"> <input type="button" value="Add" onClick="JavaScript: addItem( 'School Hat One size fits all school emblem on front.', 9.99 );"> </td> </tr> <tr> <td>School T-Shirt - Small-Medium-Large, school emblem on front.</td> <td> $19.99</td><td align="center"> <input type="button" value="Add" onClick="JavaScript: addItem( 'School T-Shirt Small-Medium-Large school emblem on front.', 19.99 );"> </td> </tr> <tr> <td>Football Season Tickets - Watch the Bobcats all season long.</td> <td> $12.99</td><td align="center"> <input type="button" value="Add" onClick="JavaScript: addItem( 'Football Season Tickets Watch the Bobcats all season long.', 12.99 );"> </td> </tr> <tr><td colspan="3" align="center"> <input type="button" value="View Cart" onClick="JavaScript: document. location='ViewCart.html';"> <input type="button" value="Check Out" onClick="JavaScript: document. location='CheckOut.html';"> </td></tr> </table> </form> </body> </html>
ViewCart.html
The following page displays the items that the visitor has selected and placed into her shopping cart:
<html> <head> <title>Center Park - View Cart</title> <script language="JavaScript"> <!-- function removeItem( name ) { document.cookie = name + "=;"; document.location = document.location; } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function getItemName( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[0] ); } else return( "" ); } function getItemPrice( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[1] ); } else return( "" ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <b><font size="6">Center Park School Store -</font></b> <font size="4">for all your school paraphernalia needs</font><br><br> <form> <table width="100%" border="2"> <script language="JavaScript"> <!-- for( i = 1 ; i <= parseInt( getCookieValue( "items" ) ) ; i++ ) { if( getItemName( "item" + i ) != "" && getItemPrice( "item" + i ) != undefined ) { document.write( "<tr><td>" ); document.write( getItemName( "item" + i ) + "</td><td>" ); document.write( "$" + getItemPrice( "item" + i ) + "</td><td align='center'>" ); document.write( "<input type='button' value='Remove' onClick='JavaScript: removeItem( \"item" + i + "\" );'>" ); document.write( "</td></tr>" ); } } // --> </script> <tr><td colspan="3" align="center"> <input type="button" value="Keep Shopping" onClick="JavaScript: document.location='Store.html';"> <input type="button" value="Check Out" onClick="JavaScript: document.location='CheckOut.html';"> </td></tr> </table> </form> </body> </html>
Checkout.html
Finally, the following page displays all items currently in the shopping cart along with the total price for all items:
<html> <head> <title>Center Park - Store Checkout</title> <script language="JavaScript"> <!-- var total = 0; function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function getItemName( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[0] ); } else return( "" ); } function getItemPrice( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[1] ); } else return( "" ); } function fixTotal( n ) { n *= 100; var good = parseInt( n ); while( good < n ) good += 1; return( good / 100 ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <b><font size="6">Center Park School Store -</font></b> <font size="4">for all your school paraphernalia needs</font><br><br> <form> <table width="100%" border="2"> <script language="JavaScript"> <!-- for( i = 1 ; i <= parseInt( getCookieValue( "items" ) ) ; i++ ) { if( getItemName( "item" + i ) != "" && getItemPrice( "item" + i ) != undefined ) { document.write( "<tr><td>" ); document.write( getItemName( "item" + i ) + "</td><td>" ); document.write( getItemPrice( "item" + i ) ); document.write( "</td></tr>" ); total += parseFloat( getItemPrice( "item" + i ) ); } } // --> </script> <tr> <td><b>Total</b></td> <td>$ <script language="JavaScript"> <!-- document.write( fixTotal( total ) ); --> </script> </td> </tr> </table> </form> </body> </html>
|
JavaScript Professional Projects
ISBN: 1592000134
EAN: 2147483647
EAN: 2147483647
Year: 2002
Pages: 130
Pages: 130
Authors: Paul Hatcher