Javascript is a key technology to exploit in the development of Web pages, since it adds interactivity and responsiveness to a Web site. The combination of HTML, CSS, and Javascript provides everything needed by a Web browser to provide a great user experience, and all modern Web browsers have native support for Javascript.
Because Javascript runs on the client side (on the user’s computer rather than the Web server), it is used for interactive effects,
on-the-fly validation of data in forms, and other applications. The most common usage of Javascript is to create menus (like with this site) and other navigational mechanisms. Another common use is creating image rollovers, where moving the mouse over the first image is detected by the browser, which uses Javascript code to replace the first image with another. When the mouse moves off the second image, Javascript code replaces the second image with the first.
What is Javascript? It’s a third language (we have already been learning 2 others, HTML and CSS); in this case, it’s a programming language rather than a markup language. Since Javascript in integrated with the browser, it can manipulate objects on a Web page, as well as interact with a Web server to modify an existing Web page. There are thousands of free Javascript modules that you can use on your site. Even if you do not know how to program, it is possible (but occasionally painful) to integrate Javascript programs into a site.
How do you use Javascript on your Web sites?
- Load it. You use the <script> tag to either define Javascript inside the HTML file, or to load the Javascript code from a file. Typically, you must load the code module and any libraries it requires (such as jQuery).
- Set it up. In the <head> section, you use the <script> tag to embed a small amount of Javascript code that sets up the code. You usually must make changes in your HTML code to accommodate the new functions, but that is not always the case. You will typically need to define or customize CSS settings for the module.
- Invoke it. You must either use Javascript statements in <script> to start the program going, or the code must automatically start running when certain events happen on the page (like mouseovers).
What can you actually do with Javascript?
- Javascript can watch specific events in the browser, and trigger code to run when conditions are met. Click here to turn the first paragraph of the page red. Click here to turn every other list item purple. Use View Source to see the Javascript code for these examples. Javascript can directly access the browser’s internal representation of a Web page (the DOM, or Document Object Model). This means that a Javascript program can pick out any element on your page for direct manipulation—deleting, adding, changing the style information, anything. The ability to change any element on the page programmatically opens the door to completely interactive pages.
- Javascript can be used to validate the data in form fields, select dates from popup calendars, etc.
- You can add entirely new applications, like charts and graphs, and image slideshows and content sliders.
- Javascript can detect which browser version you are using, which allows you to compensate for known browser bugs or inadequacies. Using a library like jQuery factors out a lot of browser-specific issues.
- In the last few years, a new technique called Ajax has been introduced—this is core to the whole Web 2.0 concept. Using the Ajax technique, Javascript in the user’s Web browser opens up an HTTP connection (the protocol whereby Web browsers and Web servers interact) to the server. The responses from this interaction can arrive asynchronously (at any time after the request, but not necessarily immediately), and the Ajax mechanism allows Javascript to insert the results directly into the page without a page reload. Ajax is commonly used to process form submissions without requiring a page refresh. Ajax is a straightforward and powerful technique that allows for greater interactivity in pages because the user does not have to wait for a page reload every time something happens.
From the beginning, Javascript was widely denigrated in the programming community for various shortcomings, both real and imaginary. The last couple of years has seen a huge change in this perception, since Javascript became core to creating interactive Web sites that today’s conditions demand. This resulted in a number of outstanding code libraries coming out: Prototype, MooTools, and Scriptaculous, more recently followed by jQuery. These are all excellent libraries, but jQuery is rapidly becoming the top library because of its ease-of-use, particularly when selecting page elements for manipulation.
The last roadblock in effective Javascript is about to fall: the performance hit from being interpreted instead of compiled. Several groups are currently testing so-called JIT compilers, for "just-in-time". These Web browsers will compile Javascript code as it is executed, saving it for reuse. This is resulting in order-of-magnitude speed increases, and opens up possibilities for greater client-side processing of information.
If you use Javascript, here are some useful tools:
- JSLint is an online code validator for Javascript. This is always a good idea!
- JSMin is a code compressor from Douglas Crockford. It is more conservative than others because it does not rewrite variable names. Here is what compressed code looks like.
- Yahoo also has a compressor in their Developer Tools.
- There is a tab devoted to jQuery on the Crash Courses page.