Placing Text in the Status Bar

Place your mouse on the following link, but do not click it. While the mouse is over the link, look at the bottom left part of your screen. You should see a plain grey bar called the status bar. What do you see in the status bar when the mouse is on the hyperlink?

Google

What you probably saw appear in the status bar is the URL of the Web site, namely http://www.google.com. That's nice, but we can definitely get more creative than that. Roll your mouse over this link. What do you see this time?

Google

What do you think? A little more user-friendly? JavaScript gives us the capability of placing text into the status bar. Let's learn how to do it. Here is a glimpse of the HTML-JavaScript code:

<A HREF="http://www.google.com" onMouseOver="window.status='Go to the Google Web site';return true">Google</A></B>

  • First off, onMouseOver tells the browser what to do when you drag your mouse over the link.
  • The window.status text directs your browser's attention to the status bar on your screen. I then typed in what I wanted the status bar to say. I can type anything I want in this section.
  • What about return true? For now, I'm going to say to just trust me on this one. I don't want to get too deep into JavaScript in this lesson. I just want to give you a few bits of code to enhance your Web pages. But be sure to end this bit of code with the return true text.

Display the Current Date and Time

Check this out:

Today's Date: 10-5-2009
Current Time: 10:24

Actually, this is the exact date and time that you loaded this page. If you refresh the page, the time will have updated itself. This JavaScript code enables you to have the current date and time on any of your Web pages. Here is the code. Keep in mind that this is the most complex piece of JavaScript code we have looked at so far.

<SCRIPT LANGUAGE="JavaScript">

RightNow = new Date();

document.write("Today's Date: " +
(RightNow.getMonth()+1)+
"-" + RightNow.getDate() + "-"
+ RightNow.getFullYear() + "<BR>Current Time: "
+ RightNow.getHours() +
":" + RightNow.getMinutes()
)

</SCRIPT>

I know, it's a little long. Let's break this down a little.

  • You'll notice that the first part of this code is <SCRIPT LANGUAGE="JavaScript">. All of the JavaScript code we have looked at so far has been written within HTML tags. Since this JavaScript code "stands alone", we need to tell the browser that we are switching to JavaScript. This tag helps make that transition. Notice at the end of the code that it ends with the </SCRIPT> tag.
  • The next command, RightNow = new Date();, obtains the current date and time from the Internet.
  • The next command begins with document.write. This tells the browser to write information on your screen, right on the existing Web page. As you continue, you'll see each part of the current date and time (e.g. month, day, year, hour, minutes) to display. Again, I don't want to get into too much detail here. I just want you to be able to understand the code a little bit, and be able to place it on some of your Web pages.

Obtain and Display Someone's Name

Click here to see a demonstration of this. You will be asked to give your name. You will then see it displayed on a Web page.

Here is the JavaScript code from this page:

<SCRIPT type="text/javascript">

var user_name = prompt ("Write your name in the box below","Write it here");
document.write("Hello " + user_name + ". Welcome to my page!");

</SCRIPT>

That wasn't very long, was it? Let's break it down a little.

  • Again, this is standalone JavaScript code, so we begin and end it with the SCRIPT tags.
  • Next, we create a variable, user_name. We collect the person's name by creating a prompt asking for the information.
  • Lastly, we display the person's name, along with our friendly message. Of course, we can change the message any way that we would like to.

Putting It All Together

We now know how to do the following 5 things using JavaScript:

  • Create text for links that is not underlined
  • Open a second window with a link
  • Create text in the status bar that appears when you roll your mouse over a link
  • Display the current date and time
  • Collect someone's name and display it on a Web page

Here is the code for a Web page that contains all of these examples:

<HTML>

<HEAD>
<TITLE>Week 15: Sample JavaScript Code</TITLE>
</HEAD>

<BODY>
<FONT FACE="arial, helvetica" SIZE="-1">

<SCRIPT type="text/javascript">
var user_name = prompt ("Write your name in the box below","Write it here");
document.write("<P>Hello " + user_name + ".");
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
RightNow = new Date();
document.write("<P>Today's date is " +
(RightNow.getMonth()+1)+
"-" + RightNow.getDate() + "-"
+ RightNow.getFullYear() + "<BR>The current time is "
+ RightNow.getHours() +
":" + RightNow.getMinutes() + "."
)
</SCRIPT>

<P>Here are some links without underlined text:

<UL>
<LI><A HREF="http://www.natomascharter.com/ilp/webdesign" STYLE="text-decoration: none">ILP Web Design</A>
<LI><A HREF="http://www.google.com" STYLE="text-decoration: none">Google</A>
<LI><A HREF="http://www.amazon.com" STYLE="text-decoration: none">Amazon</A>
</UL>

<P>Here are some links that open a second window:

<UL>
<LI><A HREF="page15a.html" onClick="window.open('http://www.natomascharter.com/ilp/webdesign','webdesign')">ILP Web Design</A>
<LI><A HREF="page15a.html" onClick="window.open('http://www.google.com','google')">Google</A>
<LI><A HREF="page15a.html" onClick="window.open('http://www.amazon.com','amazon')">Amazon</A>
</UL>

<P>Here are some links that display text in the status bar when I roll my mouse over the text:

<UL>
<LI><A HREF="http://www.natomascharter.com/ilp/webdesign"
onMouseOver="window.status='Go to the ILP Web Design Web site';return true">ILP Web Design</A>
<LI><A HREF="http://www.google.com" onMouseOver="window.status='Go to the Google Web site';return true">Google</A>
<LI><A HREF="http://www.amazon.com" onMouseOver="window.status='Go to the Amazon Web site';return true">Amazon</A>
</UL>

</FONT>
</BODY>
</HTML>

Again, I can't say this enough, but JavaScript is an extremely powerful language that you can use to enhance your Web pages in big ways. We have only scratched the surface of JavaScript with this lesson, but hopefully you picked up some useful tools while going through this lesson. If this language interests you, I encourage you to check out the wonderful tutorials on the HTML Goodies Web site or to browse through the many books on JavaScript that you can find at your local bookstore.

 Lessons

Assignment 4

 
Make a Free Website with Yola.