Spice Up Your Web Site with JavaScript
JavaScript is a scripting language designed for use within a web page and/or on a web server. It is used to create special effects within a web page. Elements such as links, images and forms can be manipulated using this powerful technology.
Unlike CGI scripts, JavaScript can be placed directly into your HTML code. It can also reside on your server and be called from a small code within your web page.
This powerful scripting language can be used to create special effects on your web page such as link effects, mouseovers, image roll overs, navigational systems and much more.
Here are a few great scripts to get you started:
Navigation Bar
This script is actually a combination of JavaScript and HTML better known as DHTML. It will enable you to have a mouseover navigational menu at the top of your web page. When you place your mouse over the main menu, a drop down menu will appear. As you move your mouse over the drop down menu, each selection is highlighted. This navigation menu is very similar to the menu used at Microsoft.com.
(http://www.brainjar.com/dhtml/navbar/index.html)
Dynamic Splash Screen
If you've ever wanted to set up a splash screen for your web page, Dynamic Splash Screen will do just that. Splash pages can be used to tell your visitors a little bit about your site or whatever you'd like. The great thing about this script is that it is constructed using a single page. Once the splash messages have been completed, the script will navigate to the URL of your choice. It also includes a link on the splash page that says, "Skip Intro." Nice effect.
(http://www.dynamicdrive.com/dynamicindex3/dynamicsplash.htm)
Pausing Up and Down Menu Scroller
This nice little script will enable you to have linked text that scrolls upwards and will pause between each message. You can choose to include a background image and customize the background color and box size. This script provides a nice way to announce new additions to your site or whatever you'd like.
(http://www.dynamicdrive.com/dynamicindex2/crosstick.htm)
overLIB
Create mouseover popup boxes for your text links. This great script can be used to include information about the links, tips or whatever you'd like. It can create simple mouseover popup boxes or can even create a popup box that will stay open until the user wants to close it. The boxes can also be displayed with or without a caption and colors can be customized. This is a great little script.
(http://www.bosrup.com/web/overlib/)
Source Protector
Although this script won't completely protect your page content, it will deter those wanting to steal your code. When you right click on your mouse, an alert box will appear. You can include a message of your choice.
(http://www.javascript-page.com/noclk.html)
Right Click Menu
This nifty little script not only helps prevent your code from being stolen, but it also creates a pop up navigation menu. When you right click on your mouse, instead of the browser menu appearing, your menu will appear. This little menu can contain live links to other pages on your web site.
(http://www.geocities.com/html_4u/rc_menu.html)
Banner Rotator
This simple little script will enable you to rotate banners on your web page. You simply add your banner information to the code and place this script within your web page where you'd like your banners to display. Each time your page loads, a new banner will be displayed. Great little script.
(http://www.javascript-page.com/banrot.html)
Daily Tip
This script will enable you to display a daily tip on your web site. You can program it with tips for the entire month and they will automatically display each day.
(http://www.geocities.com/html_4u/dailytip.html)
FairWell Window Launcher
Although popup windows can be irritating, this script is a little different. It will launch a new window when your visitor leaves your site. What's great about this script is that it will only appear the first time someone visits your web site. If you offer your visitors a free publication, try placing your subscription information within this new window. This provides a great way to increase subscriptions to your publication.
(http://wsabstract.com/script/cut65.shtml)
Locating JavaScripts:
(http://javascript.internet.com/)
Locating DHTML Scripts:
(http://www.dynamicdrive.com/)
Learn more about JavaScript:
JavaScript Learning Center
(http://www.javascriptmall.com/learn/contents.htm)
Although JavaScript can certainly help you spice up your web site, there are many scripts that your visitors may find irritating. Try to avoid scripts such as mouse trailers, mouseover sounds, mouseover pop up windows and mouseover redirects. Carefully select scripts that will enhance your visitors experience and encourage them to return in the future.
Some Useful JavaScript Tricks
JavaScript can be one of the most useful additions to any web page. It comes bundled with Microsoft Internet Explorer and Netscape Navigator and it allows us to perform field validations, mouse-overs images, open popup windows, and a slew of other things.
In this article I will show you how to:
- Display the browser name and version number - Change the text in the status bar of the browser - Use an input box to get text from the user - Use a message box to display text to the user - Change the title of the browser window
Before that, however, we need to know how to setup our web page so that it can run the JavaScript. JavaScript code is inserted between opening and closing script tags: and , like this:
// JavaScript code goes here
These script tags can be placed anywhere on the page, however it's common practice to place them between the and tags. A basic HTML page that contains some JavaScript looks like this:
My Test Page
function testfunc()
{
var x = 1;
}
Hello
For the examples in this article, you should use the basic document format I have just shown you, inserting the JavaScript code between the and tags. When you load the page in your browser, the JavaScript code will be executed automatically.
Displaying the browsers name and version number
The "navigator" object in JavaScript contains the details of the users browser, including its name and version number. We can display them in our browser using the document.write function:
document.write("Your browser is: " + navigator.appName); document.write("
Its version is: " + navigator.appVersion);
I run Windows 2000 and Internet Explorer version 6, so the output from the code above looks like this in my browser window:
Your browser is: Microsoft Internet Explorer Its version is: 4.0 (compatible; MSIE 6.0b; Windows NT 5.0)
Changing the text in the status bar of the browser
To change the text in the status bar of a browser window, we just change the "status" member of the "window" object, which represents our entire browser window:
window.status = "This is some text";
Using an input box to get text from the user
Just like in traditional windows applications, we can use an input box to get some text input from the user. The "prompt" function is all we need:
var name = prompt("What is your name?"); document.write("Hello " + name);
The prompt function accepts just one argument (the title of the input box), and returns the value entered into the text box. In the example above, we get the users name and store it in the "name" variable. We then use the "document.write" function to output their name into the browser window.
Using a message box to display text to the user
We can display a message box containing an OK button. These are great when you want to let the user know what is happening during their time on a particular page. We can use a message box to display the "name" variable from our previous example:
var name = prompt("What is your name?"); alert("Your name is: " + name);
The "alert" function takes one argument, which is the text to display inside of the message box.
Changing the title of the browser window
To change the title of our web browser's window, we simply modify the "document.title" variable, like this:
document.title = "My new title";
One bad thing about the "document.title" variable is that we can only manipulate it in Microsoft Internet Explorer. Netscape's implementation of JavaScript doesn't allow us to modify it.
In Closing
As you can see from the examples in this article, JavaScript is a powerful scripting language that we can use to enhance our visitors experience with our site. You shouldn't use JavaScript too much, however, because in some cases it can annoy your visitors and send them packing before your site even loads!
| 
