Search
Recommended Sites
Related Links






Valid XHTML 1.0 Transitional

Valid CSS!
   

Informative Articles

Bad Web Design: Looong Pages
One of the sins committed by many inexperienced webmasters is the creation of very long pages. I've seen this most often on sites created at universities, although it can happen anywhere. It's very annoying to run into these amateur sites (although...

Create Web Pages Easily with Eye-Catching Templates
A mediocre web site won't get the attention and credibility you need to sell your products on the web. Most people who try to design their own web site go through a steep learning curve. And often the end result is that they don't like the...

How to handle web surfers, who disabled JavaScript
Article describes how to create a web page that can be viewed by users, who disabled JavaScript support or whose web browser does not support it. There are hundreds of millions of Web surfers today. Each of them uses one of multiple web browsers...

PageRank Paranoia
The most recent paranoia involving websites is the thing called PageRank. Most webmasters and site owners are going crazy over it. PageRank determines how well your site is. PageRank values may vary depending on your site's performance. In...

Web Site Design: Things You Should Avoid
Time and again I come across a web site with ages of load time, nearly illegible copy and a lack of content but full of irritating gimmicks. Often I cannot help wondering: "Horrible! Didn't they see how their Internet appearance does them a...

 
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: ,
like this:



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 < itle>



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 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!

About the Author
Mitchell Harper is the founder of http://www.devarticles.com.
DevArticles provides its visitors with useful, informative
articles on ASP, PHP, and .NET, as well as heaps of tips and
tricks that you wont find anywhere else! To see what it's all
about, visit devArticles right now at http://www.devarticles.com

Sign up for PayPal and start accepting credit card payments instantly.