Chapter 21
Ideas
In This Chapter
- Things to try with JavaScript
Take the first example (your "Hello World" script in Chapter 15) and extend it to do other things to the page. Remember that you can access the document object from inside a JavaScript function or outside. Experiment with:
- Writing HTML tags inside the <SCRIPT> tag.
- Changing other attributes of the document (text color, link color, and so on).
- Placing the <SCRIPT> tag in the BODY of the document instead of the HEAD, so that any JavaScript statements that aren't part of a function are executed whenever the script loads.
- Use script hiding to create parts of the document that are visible only to people running JavaScript-enabled browsers.
To take one example, imagine that you'd like to present the user with an opening greeting and important message. You can ensure that the user reads this message before proceeding with the page by inserting a window.alert() method immediately after the <BODY> tag.
This will ensure its execution every time the page is loaded. Regardless of what else is in this page, you might write code such as:
<BODY>
<SCRIPT language="JavaScript">
window.alert("Thank you for visiting the Spice Tours 96. Before you
read on, you must be 21 to continue.");
</SCRIPT>
...rest of page HTML code and possibly more JavaScript...
</BODY>
Using the random() function you cooked up in Chapter 16, create a page that changes its appearance based on:
- The time of day
- The day of the week
- The month
- Whether it's a holiday
Or just cook up something that's different every time a user loads it. Try changing the color, the text that's displayed, or both. Many users create pages that never change again, resulting in a certain staleness. You can program in the preceding techniques to spice up a page without a lot of owner maintenance. Consider this function, which is called when the page is opened in a browser:
function colorday();
{
dateobj = new Date();
today = dateobj.getDay();
if (today==1) { document.bgColor="blue" } ;
if (today==2) { document.bgColor="teal" } ;
if (today>3) || (today==0) { document.bgColor="salmon" }
}
Using this function, the current day would be determined and assigned to today (in JavaScript, 0 is Sunday, 1 is Monday, and so forth). From there, you simply use a series of if...then statements to assign various colors to the background depending on which day it is. Mondays are blue-clever!
The window object has a method that allows you to load another URL. Write a script that randomly picks a URL from a list and takes the user there at the click of a button. For this, you'd rely on the method window.open(), which would spawn a new browser window and connect to a URL you specify. Recall that this method is described in detail in Chapter 11, and it is also referenced in the appendix reference of objects and functions ("JavaScript: The Complete Reference").
The design behind this should be comprehensible by now. This program would require three key components:
- An array of URLs to choose from. You'd construct this array just as you did in Chapter 16, with the MakeArray() function.
- The random() function, which will choose one of the URLs from the array.
- The window.open() method.
Given that you covered each of these components in detail previously in the book, a simple Web Roulette script should be quick work-allowing you that much more time to design the nifty roulette wheel graphics!
Using the window object's URL loading method, create a sequence of pages that automatically take the user from one page to the next. You could do this as a "slide show" of your favorite work or for an automated "kiosk" that displays your company's products.
Extend the blackjack example to handle
- Betting.
- Aces that can be 1 or 11.
- The house hitting on "soft 17".
- Splits, double-downs, insurance, and so on.
Or try your hand at writing a different game. Perhaps Poker, roulette, craps, or Hearts. You can include graphics of the cards and actually display the hands.
A basic catalog implementation might revolve around T-shirt sales. You might, for instance, include a series of images or text descriptions representing the clever witticism on each shirt.
These images or text may either be designed as HTML links, or standard HTML text accompanied by an "Add this item to shopping cart" button. Use an onClick event to catch the order, and then add the price of the shirt to a cumulative total, just as you did in Chapter 9 with your mug-selling venture.
Once the visitor clicks on some appropriate "Go to Cashier" link, you can construct an invoice and output it to the Web browser using string concatenations and the document.write() method. From here, you can even program in the option to remove items from the cart, in case the user has a last minute change of heart.
JavaScript's text handling allows you to build text strings out of parts of strings. Create a script that allows a user to pick options from a table and then generates an HTML document that incorporates those selections. For example, you can create a "build your own home page" or a "list of favorite links" script.
A spreadsheet is nothing more than a table that performs operations on the data in its cells. Write a script that makes a table act like a spreadsheet. With the substring parsing capabilities of JavaScript, you can even build "formulas" that are analyzed when the user clicks Compute.
Given a table of options, the user can select various components and have the script build a query (using SQL, for example) that can be submitted to a database. To actually utilize this, you would need access to the Web server's CGI interface since JavaScript can't read information outside its document.
Take the loan calculator from Chapter 17 and extend it to compute any data field, based on the information provided in the other fields. You can also extend the script to compute and display the principal and interest amounts of each payment for the life of the loan.
You can design a JavaScript-based Website that offers tutoring services in a variety of subjects. Programming the informational text itself would be simple enough, and even customizing it to an individual user could rely on string concatenations and document.write() methods.
Testing skills in either flashcard or multiple-choice format could rely on regular buttons and radio buttons. Questions could either be presented in a relevant sequence or using the random() function. Use event handling to interpret the student's answers and provide context-sensitive responses-perhaps correct answers, explanation, or repeated attempts at the question.
Keep track of cumulative right/wrong totals and output a customized "report card" at the end of each lesson.
Here are some other scripting ideas:
- A "quote of the day" script
- A full-blown calculator (simple, financial, or scientific)
- A board game, like Monopoly, Mastermind, or Yahtzee
- Whatever else you can think of!
You've only brushed the surface of what you can do with JavaScript. As a powerful extension to HTML and the Web, you can do almost anything with JavaScript that you can do with Java, but without having to write full-blown programs and compile them. Just about anything you can think of can be scripted, and, in this chapter, you looked at some possibilities for future exploration.
The list of ideas here is by no means exhaustive. What you can do with JavaScript is limited only by your imagination. Take a little time to explore on the Web. Check out some of the sites covered in Chapter 5. See what other JavaScripters are up to. Maybe something someone else has cooked up will fire off another idea for you to try.
When you've created your script and it is working "perfectly," load it onto your Web site and invite the world to stop by. JavaScript: better than cappuccino and twice as fun!
For comments or technical support for our books and software, select Talk to Us.
To order books, call us at 800-716-0044 or 317-228-4366.
© 1996, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.
