JavaScript
From DocForge
JavaScript is Netscape/Mozilla's implementation of ECMAScript. Most desktop web browsers come with a JavaScript runtime engine which allow web pages to operate dynamically. This gives web sites the ability to alter content and interact with a user from within one web page.
One popular use of JavaScript is in the use of so called "Web 2.0" applications which use a combination of AJAX for server communications and DOM for web page modifications.
JavaScript can also be used for applications outside of the web browser, such as embedding scripting logic inside of a PDF document, however such use is relatively small compared to its widespread use in web programming.
Contents |
[edit] Introduction
JavaScript is included in a web page using HTML's <script> element, where it will be executed inline or loaded from an external document. Typically JavaScript is included in a web page inside of HTML's <head> element where it will be used to provide logic for the rest of the page. (For example, unobtrusively adding client-side form validation). An inline JavaScript block is added in somewhere within the HTML's <body> element and generally provides code that gets run along side with the page's rendering. (For example, adding in a Google AdSense JavaScript tag that will render an ad block on the page)
JavaScript has very close bindings with the HTMLDOM, and thus the entire DOM is accessible to read and modify from JavaScript methods and functions.
To understand the design of JavaScript, one must become intimately familiar with the Prototype pattern. For additional information, refer to this blog post by Steve Yegge.
An HTML document which includes Javascript to write the text "Hello, world!" into the web browser when the page is loaded is shown below:
<html> <head> <title>hola</title> </head> <body> <script type="text/javascript"> document.write("Hello, world!"); </script> </body> </html>[edit]Functions are Objects
All functions created in JavaScript are instances of Function objects. For example:
Function.prototype.foo = function() { console.log("hello"); } var bar = new Function("","console.log('world');");Calling "bar.foo()" will return "hello". Calling "bar()" will return "world".
Note that setting properties in the predefined "prototype" object on any base class will cause that property to be contained in any future instance of that object type.
This concept is heavily used in frameworks such as Sproutcore. Note the following example of Sproutcore's API for utilizing the Observer pattern on GUI widgets in the web browser.
obj = SC.Object.create({ firstName: null, firstNameObserver: function() { console.log("observer fired"); }.observes('firstName') }); obj.set('firstName', 'John'); > observer fired obj.set('firstName', 'John'); > observer fired obj.set('firstName', 'John'); > observer fired[edit] Performance & Optimization
As with any programming language, there are a number of best practices which can be followed to generally improve JavaScript performance.
- Use native features when possible. Any logic rewritten in JavaScript will perform better with the runtime's precompiled code.
- Avoid using eval() and arguments.callee. These prevent the JavaScript runtime from analyzing and generating optimized code.
- Use a basic for loop for array traversal rather than for each.
- Prefer local variable instead of global variables.
- parseInt() is faster than Math.floor.
- Avoid unnecessary JS libraries. The less overall code the runtime needs to analyze and run, the faster the overall system will be.
[edit] Reference
[edit] JavaScript Libraries
- Prototype is a toolkit for class-driven development and simplification of AJAX. It's very popular as a basis for other larger libraries.
- Script.aculo.us is a library which provides an animation framework, drag and drop, Ajax controls, DOM utilities, and unit testing. It is based around Prototype.
- Dojo is another library, which has (arguably) a better design, etc. than Prototype.
- Mootools is another effects and Ajax library meant to be lighter and more flexible than Prototype and Dojo.
- jQuery is "a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages."
- SAJAX, or Simple AJAX Toolkit, is a Javascript library targeted specifically at AJAX.
- X, a cross-browser.com Javascript library.
