Background

JavaScript is the dynamic scripting language in web browsers. It is typically embedded in HTML documents to be interpreted by the browser for client side processing. It was also used as a server side scripting language on certain web servers, most notably Netscape Enterprise Server (now iPlanet Web Server), though this is uncommon today.

JavaScript was designed and implemented in 1995, during the development of Netscape Navigator 2.0. The primary architect was Brendan Eich. Originally called LiveScript, it was renamed to JavaScript shortly before being annouced to the public by Netscape and Sun on December 4, 1995. The name has since been a constant source of confusion, as Java and JavaScript are two very different technologies. The new name associated the two because one of the key uses for which it was designed was as a scripting language to control Java applets. Web designers generally found it more useful for animating images in response to mouse events, validating forms, and other types of DHTML.

After the release of Netscape 2, Microsoft released Internet Explorer 3.0, with VBScript (now abandoned by MS on the browser, but still used for scripting on IIS) and "JScript" support, the latter being a mostly compatible JavaScript implementation. The incompatibilities led Sun and Netscape to submit the language to the European Computer Manufacturers Association (ECMA) for standardization. The end result is sometimes called ECMAScript.

Today's JavaScript is a surprisingly powerful language, with associative arrays, regular expressions, full featured date, math and string classes. It is still hindered by the existance of mutually incompatible implementations and a huge, slow to upgrade, user base.

Language Details

ECMAScript
JavaScript objects

Examples

How to do a mouseover
status bar rollover
Javascript Function to Locate a Substring
Javascript Function To Calculate Gravitational Escape Speeds
Javascript Function to display current file information
A Vigenère Square in Javascript

Miscellaneous

DHTML
Ajax
document object model
E2 Bookmarklets
Everything Javascript Goodies
Javascript events
abusive JavaScript
Right-click trap
location.replace()

History

JavaScript was created by Brendan Eich. It stared life as Netscape's "Livescript" in 1994, became Sun's JavaScript in a partnership deal, and is now a standard, the European Computer Machinery Association (ECMA)'s ECMAScript

Language

JavaScript is an object-oriented scripting language. It is weakly typed. It is case sensitive and variables do not have to be declared before they are used. Though it is not in fact a form of Java, its syntax is similar to Java (and other languages in the C family).

Unlike Java, the language is not purely OO - procedural code is supported - i.e. you can have functions that are not attached to any object.

The object model and execution environment is quite unlike that of Java. Due to Javascript being interpreted, it is a highly dynamic language. Strings can be executed with eval, and methods and properties can be attached to classes and objects at runtime.

In Javascript, the class of an object is in fact also an object, a prototype for instances. The Mozilla site calls this "prototype based object construction" Like Python or PHP, but unlike Java or C++, the class declaration is in fact a statement that is executed at runtime, creating a class object.

Fortunately, code which is never reached does not have to be correct.

These factors of weak typing, no variable declarations, no checking of syntactic correctness until the code is reached, evaluation of strings and the ability to attach new methods on the fly lead some more traditional programmers (like myself) to view the language as a fast-and-loose scripting language that does not encourage well-structured code and early detection of bugs. Others like the language for these reasons.

Uses

JavaScript is generally used in web pages as a client-side scripting language, to perform whatever tasks need a little embedded code. In the past, this has been a bit of flashy image manipulation or animation, and is now used for popup widows, menus and timeouts, but it has a serious role in e-commerce sites to validate form data on the client side, and to generally make a web page seem more like an interactive program and less like a document.

JavaScript is supported by most browsers as it is very useful. Sure you can turn it off in your browser, but you will find that many complex and useful sites just won't work without it.

JavaScript is a glue language. Generally it is not used to perform large isolated computing tasks like computing Fibonacci numbers. Despite Mentifex's pet project which he punts at every possible opportunity, there is little or no serious academic interest in JavaScript as a good language for AI. I look forward to him proving me wrong, but I am not holding my breath for it.

JavaScript code mostly interacts with the browser and the HTML document, and is often attached to event handlers on elements on that page. Almost all the work done by JavaScript on web pages is manipulation of APIs to the rest of the page.

The horror

Here lies the problem: Standardisation of the APIs, Document Object Models and classes that javscript glues together is badly lacking. Making a script work across several of the most popular browsers is time-consuming, and often ends up with each procedure being a case statement:


if (Browser_is_IE) 
 do this; 
else if ((Browser_is_NS) && (version > 4))
  do something else
else ...

The other alternative is to make several different versions of the same JavaScript file, and serve the appropriate one depending on what the client agent claims to be. Neither of these options are appealing - both involve extra work, lots of testing, duplication of code, parallel maintenance, and neither give any guarantee that your code works on all browsers, only those that you have tested. Don't assume that you have tested Microsoft Internet Explorer, therefore it works in Internet Explorer. You may have tested on IE 5.0 with high encryption pack on Windows 2000. The script working in other versions and platforms of IE is likely but not certain. Write Once, Debug Everywhere.

JavaScript is a technology that promises much but delivers little. JavaScript in practice is an inelegant technology that Balkanises the web. How could a decent little cross-platform standard client-side scripting language with a lot of potential, could be the cause of so much chaos, pandemonium, lack of standardisation, forced upgrades, vendor lock-in, duplication of effort and cut-and-paste coding? It is the living hell of the keep it on the client side philosophy.

It is ironic that Netscape 4, the browser that brought JavaScript to a wide audience, is now one of the biggest impediments to JavaScript's progress and standardisation. The other being Microsoft Internet Explorer.

Note for instance, that mentifex's project is not for JavaScript, it is ""jsaiMind for Internet Explorer with JavaScript enabled"

The future

I wrote this in late 2001. The situation may change. Mozilla promises to be the most standards-compliant browser ever, and the Mozilla project is committed to open standards. The good thing about Mozilla's free, open technology is that it is popping up all over the place. Maybe Mozilla and its offspring (Galleon, Netscape 6, etc) will become popular, and maybe the standards will be extended and tightened.

"There is a Web Standards pressure group that is trying to get some groundswell of public opinion going to make Microsoft and Netscape toe the line and at least support the W3C and other published standards. They are at http://www.webstandards.org/ and are called 'The Web Standards Project'."

"Netscape's JavaScript is a superset of the ECMA-262 Revision 3 (ECMAScript) standard scripting language, with only mild differences from the published standard."

Maybe MS IE will also become more standards-compliant, out of desire to keep up with Mozilla and to track the best practice. Maybe the current situation where IE's installed base and de-facto standard looms large (but not large enough to make it the only one that a web developer can afford to care about) will change. Maybe Vendor lock-in will cease to be large software companies' goal. Maybe.

This write-up was put together using additional information sourced from various parts of the web. The opinions are mostly my own.


In 2005, Themanwho notes that:
1) It is now almost never necessary to write separate code for separate browsers (e2 annotation tool is about 500 lines of .js and has only two pieces of code which need to be tailored to the browser).
2) Better than if (isInternetExplorer()) is to test for features like:

if (document.getElementById)
  {document.getElementById("id")}

The future, part 2

In 2006 the latest thing on the web is a set of technologies called AJAX. Vendors from Google to Microsoft are producing AJAX toolkits. Most of them generate JavaScript on the server side, and will emit different JavaScript aimed at a range of popular browsers.

The other new thing is Microsoft's is actively developing Internet Explorer again. The latest version, IE7, promises to be the most standards-compliant version ever (that's not saying a lot). This development is due in no small part to the erosion of IE's market share to Mozilla and its spin-off, Firefox. Though this will bring some relief to web designers, these is still a long way to go.


http://wp.netscape.com/comprod/columns/techvision/innovators_be.html
http://en.wikipedia.org/wiki/JavaScript

The two most common uses of JavaScript in web design, besides trivial (and evil) things like pop-ups, warning boxes, and changing the text of the status bar, are DHTML layering (fairly complex) and mouseover support. (Another common use is browser detection, but this is used mostly to resolve browser incompatibilities in regard to DHTML, so I tend to lump it in with that catagory.)

Now DHTML is rather complex, and I'm not going to cover it: if you're serious about that sort of web design, you'll probably do best to buy a book. To be honest, I wouldn't feel right about supporting that sort of thing anyway: I've found that most of the time the complexity it adds is unnecessary and detracts from the content.

Mouseovers, on the other hand, are a fairly well established feature in most good modern-day user interfaces. They feel right, at least to me. I think any site that uses images as links should at least consider them. The following JavaScript code is simple, light, and doesn't require any obnoxious browser-checking:

// mouseover.js

function load_image( handle, path ) {
        eval( handle + " = new Image;" );
        eval( handle + ".src = '" + path + "';" );
}

function change_image( dest, handle ) {
        document.images[dest].src = eval( handle + ".src" );
}

That's it, seven lines (or ten if you cound blank ones and comments). Now this can be used as a separate file (loaded with <script language="JavaScript" src="mouseover.js"></script>) or placed inline (that is, between <script> tags).

Usage:

Preloading images:

<!-- Load the images (so we don't have to wait for     -->
<!-- them to load when the mouse rolls over the image) -->
<script language="JavaScript">
// <!--
        load_image( "image_1", "button.png" );
        load_image( "image_1_over", "button_over.png" );
// -->
</script>

The actual mouseover use:

<img src="button.png" id="my_button"
        onMouseOver='change_image( "my_button", "image_1_over" );'
        onMouseOut='change_image( "my_button", "image_1" );'>

The above code will alternate between "button.png" and "button_over.png," depending on whether or not the mouse cursor is hovering over that particular image. It is also possible, instead of changing the image that is being moused-over (so to speak), to change another image (just replace the first parameter of change_image() with the id of the image you want to change) or to change more than one image at once (you could just as easily 'change_image( "my_button", "image_1_over" ); change_image( "alternate_button", "alternate_image" );').

Log in or registerto write something here or to contact authors.