Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • We Want to Hear from You!
  • Reader Services
  • Introduction
  • Part I: Getting Started
  • Hour 1. Understanding JavaScript
  • Hour 2. Creating a Simple Script
  • Hour 3. How JavaScript Programs Work
  • Part II: Learning JavaScript Basics
  • Hour 4. Using Functions and Variables
  • Hour 5. Using Strings and Arrays
    • Using String Objects
    • Working with Substrings
    • Using Numeric Arrays
    • Using String Arrays
    • Sorting a Numeric Array
    • Workshop: Displaying a Scrolling Message
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • Hour 6. Testing and Comparing Values
  • Hour 7. Repeating Yourself: Using Loops
  • Hour 8. Using Math and Date Functions
  • Part III: The Document Object Model (DOM)
  • Hour 9. Working with the Document Object Model
  • Hour 10. Responding to Events
  • Hour 11. Using Windows and Frames
  • Hour 12. Getting Data with Forms
  • Hour 13. Using Graphics and Animation
  • Part IV: Moving on to Advanced JavaScript Features
  • Hour 14. Creating Cross-Browser Scripts
  • Hour 15. Creating Custom Objects
  • Hour 16. Working with Sounds and Plug-Ins
  • Hour 17. Debugging JavaScript Applications
  • Part V: Working with Dynamic HTML (DHTML)
  • Hour 18. Working with Style Sheets
  • Hour 19. Using Dynamic HTML (DHTML)
  • Hour 20. Using Advanced DOM Features
  • Part VI: Putting It All Together
  • Hour 21. Improving a Web Page with JavaScript
  • Hour 22. Creating a JavaScript Game
  • Hour 23. Creating DHTML Applications
  • Hour 24. JavaScript Tips and Tricks
  • Part VII: Appendices
  • Appendix A. Other JavaScript Resources
  • Appendix B. Tools for JavaScript Developers
  • Appendix C. Glossary
  • Appendix D. JavaScript Quick Reference
  • Appendix E. DOM Quick Reference

Workshop: Displaying a Scrolling Message

One of the most common uses of JavaScript is to create a scrolling message in the browser's status line. You can create a scrolling message using the string methods you have learned in this hour.

To begin, you'll need to define the message to be scrolled. You will use a variable called msg to store the message. To begin the script, initialize the variable (feel free to choose your own text for the message):

msg = "This is an example of a scrolling message. Isn't it exciting?";

Next, add a spacer string to the beginning of msg. This will be displayed between the copies of the message to make it clear where one ends and the other begins. This statement adds the spacer to msg:

msg = "...     ..." + msg;

You'll need one more variable: a numeric variable to store the current position of the string. Call it pos and initialize it with 0:

pos = 0;

The actual scrolling will be done by a function called ScrollMessage. Here is the JavaScript code for this function:

function ScrollMessage() {
   window.status = msg.substring(pos, msg.length) + msg.substring(0, pos);
   pos++;
   if (pos > msg.length) pos = 0;
   window.setTimeout("ScrollMessage()",200);
}

The ScrollMessage function includes the following commands:

• The function keyword is used to begin the function.
• The window.status property is used to display a string in the status line. The string is composed of the portion of msg from pos to the end, followed by the portion of msg from the beginning to pos.
• Next, the pos variable is incremented using the pos++ shorthand.
• The if statement checks whether pos is larger than the length of msg. If it is, it resets it to 0. (You'll learn more about the if statement in the next hour.)
• The final statement of the function uses the window.setTimeout method, which allows you to set a statement to be executed after a time delay. In this case, it executes the ScrollMessage function again after .2 seconds.
• Finally, the closing bracket ends the function.

To complete the example, add the <script> tags and the HTML tags that make up a Web document. Listing 5.2 shows the complete scrolling message example.

Example 5.2. The complete scrolling message example

<html>
<head><title>Scrolling Message Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
msg = "This is an example of a scrolling message. Isn't it exciting?";
msg = "...          ..." + msg;pos = 0;
function ScrollMessage() {
   window.status = msg.substring(pos, msg.length) + msg.substring(0, pos);
   pos++;
   if (pos > msg.length) pos = 0;
   window.setTimeout("ScrollMessage()",200);
}
ScrollMessage();
</script>
</head>
<body>
<h1>Scrolling Message Example</h1>
Look at the status line at the bottom of this page. (Don't
watch it too long, as it may be hypnotic.)
</body>
</html>

Figure 5.2 shows the output of the scrolling message program.

Figure 5.2 The scrolling message example in action.

Share This