background preloader

Tutorials and Tips

Facebook Twitter

JavaScript Tutorial. The importance of var in JavaScript. A JavaScript Module Pattern. Eric Miraglia (@miraglia) is an engineering manager for the YUI project at Yahoo.

A JavaScript Module Pattern

Eric has been at Yahoo since 2003, working on projects ranging from Yahoo Sports to YUI. For the past several years, Eric and his colleagues on the YUI team have worked to establish YUI as the foundation for Yahoo's frontend engineering work while open-sourcing the project and sharing it with the world under a liberal BSD license. Eric is an editor and frequent contributor to YUIBlog; his personal blog is at ericmiraglia.com. Prior to working at Yahoo, Eric taught writing at Stanford and elsewhere and led frontend engineering teams at several startups.

Global variables are evil. Douglas Crockford has been teaching a useful singleton pattern for achieving this discipline, and I thought his pattern might be of interest to those of you building on top of YUI. 1. YAHOO.namespace("myProject"); This assigns an empty object myProject as a member of YAHOO (but doesn't overwrite myProject if it already exists).

3 ways to define a JavaScript class. Introduction JavaScript is a very flexible object-oriented language when it comes to syntax.

3 ways to define a JavaScript class

In this article you can find three ways of defining and instantiating an object. Even if you have already picked your favorite way of doing it, it helps to know some alternatives in order to read other people's code. It's important to note that there are no classes in JavaScript. Functions can be used to somewhat simulate classes, but in general JavaScript is a class-less language. 1. This is probably one of the most common ways. Function Apple (type) { this.type = type; this.color = "red"; this.getInfo = getAppleInfo; } function getAppleInfo() { return this.color + ' ' + this.type + ' apple'; } To instantiate an object using the Apple constructor function, set some properties and call methods you can do the following: var apple = new Apple('macintosh'); apple.color = "reddish"; alert(apple.getInfo()); 1.1. 1.2.

Again, you can use the new objects exactly the same way as in 1. and 1.1. 2. 3. Summary. Namespacing your JavaScript. Tuesday Apr 25 2006 Perhaps a very uncommon approach to developing web applications that require JavaScript (but should be more common) is namespacing your scripts.

Namespacing your JavaScript

This can be done very simple-like in a manner that is painless and nice-looking. And I know "looking-nice" should generally not be a determining factor on how your code should be written, but this indeed has some benefits as well. Coming up with a Name First things first, we need a name to space. Extending the namespace Perhaps my most favorite way of setting up an application object is to do the following steps: Create the DED Object as a function literal self-invoke the function return my methods This is demonstrated below: Namespace Object example The benefit of this structure is that due to the fact that we have a function literal, we can add private properties and methods into the function before returning an object.

Adding private properties and methods. Object Oriented Programming in JavaScript. Introduction The first version of this paper, written in 2003, had several shortcomings, not the least of which was that the techniques described were specific to Internet Explorer.

Object Oriented Programming in JavaScript

I've updated and improved on the original, to document the current state of the art, especially in light of the extensive interest in AJAX technology and the increasing adoption of the FireFox browser. All the examples presented here will follow the ECMA language standards and can be applied to Internet Explorer, FireFox, and ActionScript (in Macromedia Flash). While early adopters of JavaScript used it as a simple scripting engine to create dynamic web pages, modern web designers have come to use more sophisticated object oriented techniques in building their code. I will present here, both the common paradigms used in object oriented JavaScript programming, and also suggest some helper functions that you can use in your code to streamline the process. Object Oriented Programming Goals Simple Objects References.