background preloader

3 ways to define a JavaScript class

3 ways to define a JavaScript class
Introduction JavaScript is a very flexible object-oriented language when it comes to syntax. In this article you can find three ways of defining and instantiating an object. It's important to note that there are no classes in JavaScript. 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. In the example above you see that the method getInfo() of the Apple "class" was defined in a separate function getAppleInfo(). function Apple (type) { this.type = type; this.color = "red"; this.getInfo = function() { return this.color + ' ' + this.type + ' apple'; }; } 1.2. 2. apple.color = "reddish"; alert(apple.getInfo()); 3. Related:  Java Scripthtml5 certification

oop - How can I emulate "classes" in Javascript? (with or without a 3rd party library) css Zen Garden: The Beauty in CSS Design Developing Backbone.js Applications - By Addy Osmani (@addyosmani) Available free for open-source reading below or for purchase via the O'Reilly store. Pull requests and comments always welcome. Prelude Not so long ago, “data-rich web application” was an oxymoron. Today, these applications are everywhere and you need to know how to build them. Traditionally, web applications left the heavy-lifting of data to servers that pushed HTML to the browser in complete page loads. Think of the Ajax shopping cart which doesn’t require a refresh on the page when adding an item to your basket. The rise of arbitrary code on the client-side which can talk to the server however it sees fit has meant an increase in client-side complexity. Thankfully, there are a growing number of JavaScript libraries that can help improve the structure and maintainability of your code, making it easier to build ambitious interfaces without a great deal of effort. Target Audience Acknowledgements Credits Target Version Reading What Is MVC? What is Backbone.js? <! Views

Using Objects to Organize Your Code This is a reprint of an article that originally appeared in the March 2009 issue of JSMag. When you move beyond simple snippets of jQuery and start developing more complex user interactions, your code can quickly become unwieldy and difficult to debug. This article shows you how to start thinking about these interactions in terms of the bits of behavior the feature comprises, using the object literal pattern. In the past few years, JavaScript libraries have given beginning developers the ability to add elaborate interactions to their sites. But wait. Introducing the Object Literal pattern The object literal pattern offers a way to organize code by the behaviors it comprises. As an artificially simplistic example, suppose you had the jQuery shown in Listing 2 for showing and hiding content when a list item was clicked. Because the initial example was incredibly simplistic, the object literal incarnation is longer. An in-depth example Step 1: Crafting the HTML Step 2: Scaffolding the Object

RSS feeds Here's a list of RSS feeds I'm subscribed to, I'm using the Google Reader thing and check these usually once a day, sometimes several times a day, if I feel I need a break and don't have anything in mind. These have become de facto the way I get informed of what's up, my pretty limited view of the world, if you wish. Sometimes I feel a bit guilty of using the feeds, for example I don't visit SitePoint as much as before I subscribed to its feeds, therefore I'm not so exposed to their ads and so on, feels a bit like stealing. The list is ordered as Google Reader orders it, seems like alphabetically, only the first ones had some spaces in the names. [RSS] The Net is Dead - Life Beyond the Buzz Marco is this cool guy, web dev from Netherlands. In addition to that I'm subscribed to a few mailing lists, of which I read the PEAR-General and PEAR-Dev ones, the rest (such as YUI list) is just storred by gmail for latter searches

Make OOP Classes in JavaScript Anyone who has tinkered with the Prototype model in JavaScript to produce classes as we know them in other languages has generally left web programming all together and taken up a career as a bus driver. There are a coterie of frameworks designed specifically to address this problem. But what if you’re not wild about frameworks, preferring instead to build tools specifically suited to your needs and style? For you, there is some black magic that can revolutionize the way you interact with the current JavaScript standard (someone please thaw me out when the 2.0 standard is implemented in June 2134, or whatever the projected date is). What you’ll need A text editor and a web browser. Steps Meet the encapsulated JavaScript function! As the name suggests, and encapsulated JavaScript function is just that – one function encapsulated within another. Let’s change the previous code a bit. If I execute the above script in a browser, I’ll get an alert message with “boo” in it. Alternate methods

Learning Javascript with Object Graphs HEADS UP! This article was written for an older version of node. More up-to-date information may be available elsewhere. One of the secrets to being a super effective JavaScript developer is to truly understand the semantics of the language. This article will explain the basic elemental parts of JavaScript using easy to follow diagrams. References Everywhere A variable in JavaScript is simply a label that references a value in memory somewhere. Local Variables In the following example, we will create four local variables in the top-level scope and point them to some primitive values: variables.js // Let's create some local variables in the top scopevar name = "Tim Caswell";var age = 28;var isProgrammer = true;var likesJavaScript = true;// Test to see if the two variables reference the same valueisProgrammer === likesJavaScript; Notice that the two boolean variables point to the same value in memory. The outer box represents the outermost closure scope. Objects and Prototype Chains objects.js

Command Line API Reference The Command Line API is a collection of functions for performing common tasks with the Chrome Developer Tools. These include convenience functions for selecting and inspecting elements in the DOM, stopping and starting the profiler, and monitoring DOM events. This API complements the Console API, the Command Line API is only available from within the console itself. Returns the value of the most recently evaluated expression. In the next example, the evaluated expression is a call to the $$() method, which returns an array of elements that match the CSS selector. Dev Tools remembers the last five DOM elements (or JavaScript heap objects) that you've selected in the tab (or Profiles panel). In the following example, an element with the ID gc-sidebar is selected in the Elements tab. The image below shows the gc-content element selected in the same page. The following example saves a reference to the first <img> element in the document and calls displays its src property: $('img').src;

dojo.setObject Set a property from a dot-separated string, such as “A.B.C”. In javascript, a dot separated string like obj.parent.child refers to an item called child inside an object called parent inside of obj. setObject will let you set the value of child, creating the intermediate parent object(s) if they don’t exist. Without dojo.setObject, we often see code like this: // ensure that intermediate objects are availableif(! // ensure that intermediate objects are available if(! Wheras with dojo.setObject, we can shorten that to: // Dojo 1.7 (AMD)require(["dojo/_base/lang"], function(lang){ lang.setObject("parent.child.prop", "some value", obj);});// Dojo < 1.7dojo.setObject("parent.child.prop", "some value", obj); // Dojo 1.7 (AMD) require(["dojo/_base/lang"], function(lang){ lang.setObject("parent.child.prop", "some value", obj); }); // Dojo < 1.7 dojo.setObject("parent.child.prop", "some value", obj);

Related:  Tutorials and TipspatternsJavascript Tuts and Info