Private Members in JavaScript Douglas Crockford www.crockford.com JavaScript is the world's most misunderstood programming language. Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. JavaScript objects can have private members. Here's how. Objects JavaScript is fundamentally about objects. If a value is a function, we can consider it a method. Objects can be produced by constructors, which are functions which initialize objects. Public The members of an object are all public members. In the constructor This technique is usually used to initialize public instance variables. function Container(param) { this.member = param; } So, if we construct a new object var myContainer = new Container('abc'); then myContainer.member contains 'abc'. In the prototype This technique is usually used to add public methods. Container.prototype.stamp = function (string) { return this.member + string; } So, we can invoke the method Private
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. 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
Classical Inheritance in JavaScript Douglas Crockford www.crockford.com And you think you're so clever and classless and free — John Lennon JavaScript is a class-free, object-oriented language, and as such, it uses prototypal inheritance instead of classical inheritance. This can be puzzling to programmers trained in conventional object-oriented languages like C++ and Java. But first, why do we care about inheritance at all? The second reason is code reuse. To demonstrate this, we will introduce a little sugar which will let us write in a style that resembles a conventional classical language. Classical Inheritance First, we will make a Parenizor class that will have set and get methods for its value, and a toString method that will wrap the value in parens. The syntax is a little unusual, but it is easy to recognize the classical pattern in it. So now we can write myParenizor = new Parenizor(0); myString = myParenizor.toString(); As you would expect, myString is "(0)". The inherits method is similar to Java's extends. Sugar
Understanding JavaScript Prototypes. (en Español, русском, 中文) JavaScript’s prototype object generates confusion wherever it goes. Seasoned JavaScript professionals, even authors frequently exhibit a limited understanding of the concept. What is a prototype? A prototype is an object from which other objects inherit properties Can any object be a prototype? Yes. Which objects have prototypes? Every object has a prototype by default. OK back up, what is an object again? An object in JavaScript is any unordered collection of key-value pairs. You said every object has a prototype. Forget everything you learned about the prototype property – it’s probably the biggest source of confusion about prototypes. Ok fine, but false is a primitive, so why does false. When a primitive is asked for it’s prototype it will be coerced to an object. I want to use prototypes for inheritance. But the real power of prototype is seen when multiple instances share a common prototype. So is this where constructors come in? Yes. OK. Example please? Like this:
An Introduction to YUI With jQuery dominating the JavaScript framework landscape, many newcomers aren't exposed to other JavaScript frameworks. The truth is that there are a plethora of excellent JavaScript frameworks available, like MooTools, Prototype, Ext JS, and...YUI! While not as well known as some of the other libraries, YUI provides a wealth of tools for the web developer. Today, we're going to take a quick tour of some of its features. What is YUI? YUI (short for Yahoo User Interface and pronounced Y-U-I) is an open source JavaScript and CSS library developed primarily by Yahoo.com. There are currently two supported versions of YUI. Why YUI? So you may be wondering, why should I even consider learning another JavaScript framework? Ok, now that you've heard a little about YUI, let's start looking at some code! Including the Library YUI allows for a lot of flexibility when it comes to loading the library; let's look at a couple ways you can do it. Method 1: YUI 3 Seed File Method 2: YUI 3 Configurator Events
The Design of Code: Organizing JavaScript Great design is a product of care and attention applied to areas that matter, resulting in a useful, understandable, and hopefully beautiful user interface. But don’t be fooled into thinking that design is left only for designers. There is a lot of design in code, and I don’t mean code that builds the user interface—I mean the design of code. Well-designed code is much easier to maintain, optimize, and extend, making for more efficient developers. There are three high-level, language-agnostic aspects to code design that are particularly important. System architecture—The basic layout of the codebase. In looser languages, specifically JavaScript, it takes a bit of discipline to write well-designed code. One approach I’m fond of consists of a tried-and-true software design pattern, the module pattern, whose extensible structure lends itself to a solid system architecture and a maintainable codebase. The module pattern#section1 Building a module#section2 jQuery plugins#section3 Options#section4
Introduction to Object-Oriented JavaScript Object-oriented to the core, JavaScript features powerful, flexible OOP capabilities. This article starts with an introduction to object-oriented programming, then reviews the JavaScript object model, and finally demonstrates concepts of object-oriented programming in JavaScript. This article does not describe the newer syntax for object-oriented programming in ECMAScript 6. JavaScript review If you don't feel confident about JavaScript concepts such as variables, types, functions, and scope, you can read about those topics in A re-introduction to JavaScript. Object-oriented programming Object-oriented programming (OOP) is a programming paradigm that uses abstraction to create models based on the real world. OOP envisions software as a collection of cooperating objects rather than a collection of functions or simply a list of commands (as is the traditional view). Terminology Namespace A container which lets developers bundle all functionality under a unique, application-specific name. Class
Uniform - Sexy forms with jQuery Introducing Prism: An awesome new syntax highlighter For the past three weeks, on and off, I’ve been working on releasing Dabblet’s syntax highlighter as standalone, since many people had requested it. Zachary Forrest suggested the name “Prism” and I liked it so much I decided to go with it, even though there is an abandoned Mozilla project with the same name. I ended up refactoring and extending it so much that I will need to backport it to Dabblet one of these days! This doesn’t mean I bloated it, the core is still a tiny 1.5KB minified & gzipped. It just means it’s more awesome. In certain ways, Prism is better than any other syntax highlighter I’ve seen: It’s tiny. However, there are some limitations too: Pre-existing HTML in the code block will be stripped off. Enjoy: prismjs.com