What can you do with JavaScript?

To use JavaScript effectively, it's important to have a good understanding of what it can and can't do. Actually, I hesitate to say that there's anything it can't do, since I keep finding new ways to do things with it. So let's say it's designed to do some things better than others. These things fall into six categories:

1. JavaScript lets you control the appearance of elements on your Web page.

Think of each Web page as a collection of several individual elements, which are called Objects. For example, every Image on the page is an Object, every Link on the page is an Object. Even this Document itself is an Object. At its most basic level, JavaScript allows you to control the appearance of many of the Objects that make up a Web page for example.

By controlling Objects, here's a few things you can do:

  • You can open new browser windows, and determine their size and whether they should have scroll bars, or location windows. (Example)
  • You can change the content of multiple frames at once, even rewriting the HTML in a frame without downloading a new file. (Example)
  • You can add or remove text from Forms including Text Areas and Select Menus. (Example)

Display the Time in a text field

2. JavaScript lets you create Web pages that respond to user actions

JavaScript controls Objects on Web pages in response to various actions which are called Events. Most Events are things that the user has control over, such as clicking a mouse or opening a new page. Using Events, JavaScript gives you the ability to create Web pages that recognize and respond to several different types of User Input.

Suppose you have a Web site that sells a range of products. JavaScript not only lets you collect information about your visitors, it can even alter the links on the page based on this information -- so that when the user clicks on a button marked Next, it takes them to the best part of the site based on that user's preferences.

JavaScript is most commonly used for a technique referred to as MouseOvers or Rollovers, which causes a graphic link to change its appearance when the mouse is over it. This is a great way to let people know that a graphic is also a link.

Fine Displays

As you move the mouse over the Image, check out the Status Bar, at the bottom left part of the browser.

You can also control the background color of your Web pages using JavaScript. Wanna see? Just click on the colors on the left side or just move the mouse over the colors on the right side to change the background color of this Document.

It's possible to do all of the things described above because all of these things (Windows, Documents,  Frames, Forms, Links, etc...) are Objects and JavaScript is a tool for controlling HTML Objects.

3. Perform calculations and automate routine tasks

Just like any programming language, JavaScript is very good at performing a wide variety of mathematical calculations. These functions can be applied in a number of ways. For instance, there are several Web pages that let users fill out their tax forms online and JavaScript is used to add up the totals. The advanced math functions such as sine and cosine can also be used in creating games and interactive simulations.

Aside from basic math and trigonometry, JavaScript also has built-in timing functions and the ability to retrieve the date and time from your computer's clock.

 

JScript Calculator
4. With JavaScript, you can customize your Web pages for individual users.

One of the great things the Web lets you do is target your content to very narrow groups. Through the use of Cookies JavaScript lets you go farther and tailor your content to individuals and their specific characteristics.

For example, on your commerce site described above, you might want to permanently store a customer's name, address, and telephone number in a file on their computer, so that every time they go to an order page, their information can be automatically loaded into the form. This site might also keep track of areas the user has browsed in the past so that the Web site can alert the user if there is a sale in one of their favorite departments the next time they visit.

Also, JavaScript can also be used to detect the kind of browser the user has, this is known as "Browser Detection", and other information about the user's environment.


5. In almost all cases, JavaScript outperforms Server-Side Programming

There are number of things that have traditionally been done by Server-Side Programming that can actually be done better using a client-side scripting language.

Form validation is a good example of this. Suppose you want to detect whether a user remembered to give their area code when they typed their phone number into a form. Using a Server-Side approach, the user would have to wait while the information is sent up to the server to be checked and then receive an error message that the server sends back prompting them for the additional information. Using JavaScript, you can detect the error and immediately prompt the user for their area code before the form is ever submitted.

Not only is this quicker, it reduces the load on the server which may be a significant benefit if your site receives a large number of visitors.

The example below demonstrates Client-Side Validation. Give the example a try and see what happens.



6. With DHTML, JavaScript lets you control the position of Objects on the page

DHTML is a "new" development in JavaScript and it is only supported by the 4.x or greater browsers. It is becoming more and more common as the new browsers gain in market share. DHTML is really the combination of two things: JavaScript and Cascading Style Sheets (CSS).

CSS is an extension to HTML that allows you to specify sections of content as separate "containers" that can be moved, expanded, or hidden. JavaScript is used to control these functions.