Digital Web Magazine - Objectifying JavaScript

05 Apr 12

beiker

javascript tutorials dev

24 Jan 12

Christopher Grant

javascript development

15 Jul 11

borislv

很完整的介紹Javascript Object。還有closure的應用也很清楚。但並非介紹繼承。

javascript object javascript prototype closure oop

object literal
just a shortcut to creating objects
object literal
the same
object.property
object['property']
brackets to shorten
alternate new Object()
creating a function creates an object
function is an object
Function objects can be a little more useful
they can be used as a template for new objects
class
really only want one manager
don’t need to provide a mechanism for creating more
object literal is a fine choice
the new
function
new Animation(obj)
blank object
function
add properties
aren’t part of the template
these additional properties
new Animation
undefined
thousand copies of each method and property
objects
all reference the same methods and properties
template’s prototype
prototype
onStart
new Animation
onStart
any time
new Animation
prototype
onStart
onStart
return an object as a result of a constructor
object will get used as the new object instead of the blank object
not be available
new Animation
nutshell
private variables
construct
return new construct
new construct object
loopCount and loop will be the only ones we have access to
control when animations start or stop
AnimationManager
methods
the this
properties
new on an anonymous function
use a function to create objects
maintainable
Objects
great asset

57 more annotations...

27 Apr 11

yuukaa

javascript oop programming object object-literal

18 Mar 11

Hyung-Joo Lim

Digital Web Magazine - Objectifying JavaScript - Muy interesante. Habla de las diferentes maneras de crear objetos. http://ow.ly/1bKtdx

11 Jul 10

pablo scasso

The important idea here is simply that objects encapsulate related functionality.
objects allow us to handle variable scope in a contained way, and simply keeps our code cleaner
Property names get converted to strings, meaning that the string “25” and the integer 25 boil down to the same thing: Whichever gets declared last overwrites the other.
Accessing Object Properties
alert(AnimationManager.framesPerSecond); // object.property
alert(AnimationManager['framesPerSecond']); // object['property']
Using a Function
a function is an object; creating a function creates an object
they can be used as a template for new objects
For example, we created an AnimationManager in the previous section using an object literal. We really only want one manager, so we don’t need to provide a mechanism for creating more; the object literal is a fine choice for this object. Let’s extend the example a bit, and assume that the AnimationManager controls multiple Animation objects. If we define Animation using an object literal, we’ll have to write the same code over and over again as we animate more elements in order to ensure that each new object has the proper methods and properties. Creating each animation object from a base template provides a solution for this problem.
Using a Template
When new Animation(obj) is executed, a blank object is created in the background, and the Animation function is evaluated, referencing the new object as its this keyword
It’s important to note that we can add properties onto the Animation function itself, just like the object literal:

function Animation() { } Animation.animationLength = 30; Animation.element = element;

The difference here is that these additional properties aren’t part of the template. If we executed new Animation() from the code above, we’d get back a blank object, not an object with two properties. For example:

var animateLogin = new Animation(loginform); Animation.animationLength = 30; alert(animateLogin.element); // the 'loginform' element alert(animateLogin.animationLength); // undefined!
Prototype
creating a thousand Animation objects would create a thousand copies of each method and property, taking up valuable memory
there’s a way to create object templates that generate objects that all reference the same methods and properties: We attach properties to the template’s prototype.
In short, a call to a property of an object first checks the object itself for the property; if it doesn’t exist, it’ll check it’s template’s prototype; we’ll only have one version of the property stored in memory, no matter how many objects we create.
We can add to the template’s prototype at any time, and the new properties will automatically be available, even on object’s we’ve already created.
function Animation(element){
   this.animationLength = 30;
   Animation.element = element;
}
var animateLogin = new Animation(loginform);

Animation.prototype.onStart = function() {
   alert("The animation is beginning!");
};
Animation.prototype.onEnd = function() {
   alert("The animation is ending!");
};
animateLogin.onStart();
Even though we create the new Animation before we define the onStart and onEnd methods, we can still use them! This is a huge advantage of the prototype-based approach.

18 more annotations...

22 Apr 10

Marg Wilkinson

good tutorial on functions

javascript oop tutorials singelton pattern advanced functions

10 Mar 10

javascript oop

11 Dec 09

Michael Fedder

The web professional's online magazine of choice.
Objectifying JavaScript

javascript oop objects tutorial

12 Nov 09

David Salahi

Web Design JavaScript

29 Jun 09

Richard Tharp

JavaScriptLang

25 Sep 08

Marcelo Akira

tutorials javascript oo

09 Jul 08

ed talmadge

startAnimation: function(){ /* code goes here */ }

javascript objects

07 Jul 08

Brian Hannah

object-oriented javascript

javascripts oop programming tutorials prototype development

31 May 08

Ale London

oop javascript tutorial

14 Apr 08

usingsystem

js oop tutorial prototype objects

12 Apr 08

Mehran Taherimoud

javascript oop delicious

28 Mar 08

onceuponapriori

javascript oop

23 Feb 08

frankalcantara

ajax article development javascript prototype reference tutorials

16 Feb 08

Glenn M

javascript json oop

07 Feb 08

wendtse

javascript

15 Jan 08

Attila Györffy

As scripts get larger, functions become more interrelated. Suddenly, you’ve got ten functions on a page, six of them calling each other to accomplish one task, and another four working towards something else entirely.

javascript oop webdev

31 Aug 07

Richard Powell

javascript objects

07 Aug 07

allendug

javascript

24 Jun 07

mountain

del.icio.us imported javascript

18 Jun 07

Kiran Kuppa

javascript web

17 Jun 07

Edgar Muñoz

javascript oop programming tutorial objects development prototype webdev code classes class bestpractice best articles article architecture

mariusz w

When I first began programming with JavaScript, I created my variables and then encapsulated any functionality I needed to reuse into a function. As my tasks got more complicated and as I started learning object-oriented programming in other languages...

javascript

16 Jun 07

Erhan BURHAN

JavaScript objeleriyle çalışmak

javascript objects obje nesne

14 May 07

Christopher Sexton

Digital Web Magazine

javascript

25 Mar 07

del__t

imported furl

24 Mar 07

test_dellll

imported:delicious javascript

del_ttt

imported:delicious javascript

22 Feb 07

corey kimball

development javascript

16 Feb 07

Elad Ossadon

javascript articles

06 Feb 07

torstenmufgord

Web Development Javascript

29 Jan 07

varkas

javascript

26 Jan 07

Stefan

javascript

12 Jan 07

Paweł Kruszewski

javascript

22 Dec 06

Jerome Wilson

javascript OOP prototype

13 Dec 06

Mike Stenhouse

Lovely explanation of object construction in Javascript.

javascript

07 Dec 06

chriskk

javascript WebDevelopment programming objectoriented

13 Nov 06

ken .

Very well written piece on object oriented javascript

computer javascript programming web

25 Oct 06

juan rio

javascript oop

Nick DeNardis

java

Shane Sherman

imported:del.icio.us javascript oop programming

mat

development imported:del.icio.us javascript objects oop programming prototype tutorial

21 Oct 06

Mark Gardner

oop objects tutorial javascript toread programming webdev

alexander rehm

WebDesign web-development jquery ajax javascript oop programming tutorial objects development prototype

17 Oct 06

Renato Albano

examples javascript js programming reference tips OOP development article

12 Oct 06

mmankin

javascriptObjects javascript object oo

07 Oct 06

znarfor

imported javascript

01 Oct 06

Liang Bin Hsueh

javascript

30 Sep 06

Javier Pimienta

When I first began programming with JavaScript, I created my variables and then encapsulated any functionality I needed to reuse into a function. As my tasks got more complicated and as I started learning object-oriented programming in other languages, I

javascript webdev tutorial delicious

22 Sep 06

Oleg Marchuk

JavaScript

Pat Zearfoss

javascript programming reference tutorial webdev OOP

Christoph Lühr

article javascript js programming tutorial tips OOP objects

21 Sep 06

Greg Norman

OOP javascript webdev

Ken Finnigan

javascript programming OOP objects tutorial

Tony Hirst

javascript js objects bestpractice

Steven Moberg

Javascript oop

20 Sep 06

- -

javascript oop tutorials webdev

Jean-Marc Fontaine

javascript

Judah Diament

technews javascript oo

Ivana Vasilj

OOP articles js

Xabi Vazquez

javascript programming tutorial development prototype

a k'wala

javascript ajax

adam bowman

Javascript

alan le

javascript programming tutorial

hwasung

The important idea here is simply that objects encapsulate related functionality.

in:digital-web 자바스크립트 OOP =튜토리얼 lang:en

19 Sep 06

Gary Burge

When I first began programming with JavaScript, I created my variables and then encapsulated any functionality I needed to reuse into a function. As my tasks got more complicated and as I started learning object-oriented programming in other languages, I

objectoriented Javascript objects tutorials