background preloader

Advanced JS

Facebook Twitter

Translations/fr_FR at master · rwldrn/idiomatic.js. Javascript : Style et Bonnes pratiques. Lorsque l’on débute dans un nouveau langage on ne maîtrise pas forcément ses spécificités techniques et sans recul on fait parfois quelques erreurs. Respecter certaines contraintes lorsque l’on code permet d’obtenir un programme maintenable et souvent éviter de perdre beaucoup de temps sur des bugs inutiles. Le Javascript est un langage qui permet de mettre en oeuvre des applications web de manière assez simple.

L’absence de contraintes de typage et de gestion de la mémoire le rend accessible même pour quelqu’un ne possédant pas de grandes compétences en programmation.

JS library

Voyage au coeur de JavaScript (ECMAScript 3) Cet article est une traduction de JavaScript.

Voyage au coeur de JavaScript (ECMAScript 3)

The Core écrit par Dmitry Soshnikov. Named function expressions demystified. Introduction Surprisingly, a topic of named function expressions doesn’t seem to be covered well enough on the web.

Named function expressions demystified

Closures. Closures are functions that refer to independent (free) variables.

Closures

In other words, the function defined in the closure 'remembers' the environment in which it was created in. Consider the following: function init() { var name = "Mozilla"; function displayName() { alert (name); } displayName(); }init(); init() creates a local variable name and then a function called displayName(). displayName() is the inner function (a closure) — it is defined inside init(), and only available within the body of that function . Unlike init(), displayName() has no local variables of its own, and instead reuses the variable name declared in the parent function. Run the code and see that this works. Now consider the following example: function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName;} var myFunc = makeFunc();myFunc(); That the code still works may seem unintuitive.

The solution to this puzzle is that myFunc has become a closure. Creating your own JavaScript Library. One of the phases I went through while learning about JavaScript was the intense desire to write my own library, similar to jQuery (but massively scaled down).

Creating your own JavaScript Library

My library has gone through several major revisions — and more than one complete re-write, but now is exactly what I started out hoping it would be: functional, clean, small, and a solid learning experience. I’d like to share what I learned from this project, and I hope you share back with me through the comments! Finished project demo Step 1: Identify the purpose of your library This might just be one of the toughest parts of the whole process! Pick one particular function, or aspect of web development/design that you would like your library to handle. Seven JavaScript Things I Wish I Knew Much Earlier In My Career.

Advertisement I’ve been writing JavaScript code for much longer than I care to remember.

Seven JavaScript Things I Wish I Knew Much Earlier In My Career

I am very excited about the language’s recent success; it’s good to be a part of that success story. I’ve written dozens of articles, book chapters and one full book on the matter, and yet I keep finding new things. Here are some of the “aha!” Moments I’ve had in the past, which you can try out rather than waiting for them to come to you by chance. JavaScript Learning Roadmap. Encapsulation in JavaScript. Download source code - 116 KB Introduction Encapsulation is one of the main concepts in object oriented programming.

Encapsulation in JavaScript

It allows an object to group both private and public members under a single name. All the object oriented programming languages support this. Since JavaScript is also an object oriented programming language, it supports it too. Extending JavaScript Objects and Classes. Summary You can dynamically create properties and methods of existing objects through simple assignment.Using the prototype property of intrinsic JS Objects, you can extend the functionality of the very objects you know and love in ways that can make your coding far easier.

Extending JavaScript Objects and Classes

Table of Contents Background — Objects in JS In JavaScript, objects can have properties dynamically added to them. [This comes as no surprise to JS programmers who have written something like myObject.backgroundColor='black' or myObject.style.backgroundcolor='black' instead of the correct myObject.style.backgroundColor='black' and consequently pulled out their hair for hours trying to figure out why the background color wasn't changing.

For the curious, this feature of JS is possible because the language is evaluated at run-time, and because all Objects are implemented as hash tables. Extending JavaScript Objects and Classes. Summary It is occasionally necessary to create custom unique functions on the fly in JS code at run time.

Extending JavaScript Objects and Classes

This article details the various ways functions may be created on the fly. Ways of defining a function There are two ways to define a function in JS...although enough many people don't know about the versatility of the common method it might be more correct to say there are three ways: The function Keyword This is by far the more common method (and far easier) method of defining a function in JS.

OOP in JS, Part 2 : Inheritance. In Part 1 we saw how to create classes in JS, including private, privileged, and public properties and methods.

OOP in JS, Part 2 : Inheritance

This section discusses inheritance in Javascript. Summary You cause a class to inherit using ChildClassName.prototype = new ParentClass();. You need to remember to reset the constructor property for the class using ChildClassName.prototype.constructor=ChildClassName. You can call ancestor class methods which your child class has overridden using the Function.call() method. OOP in JS, Part 1 : Public/Private Variables and Methods. This page shows how to create private variables and methods in "classes" in Javascript through the rather simple example of a person.

OOP in JS, Part 1 : Public/Private Variables and Methods

(This is really a very rough approximation of the classical OOP pattern, and not necessarily a "best-practice" for JavaScript programming.) Part 2 covers inheritance. Simple JavaScript Inheritance. I’ve been doing a lot of work, lately, with JavaScript inheritance – namely for my work-in-progress JavaScript book – and in doing so have examined a number of different JavaScript classical-inheritance-simulating techniques.

Out of all the ones that I’ve looked at I think my favorites were the implementations employed by base2 and Prototype. I wanted to go about extracting the soul of these techniques into a simple, re-usable, form that could be easily understood and didn’t have any dependencies. Additionally I wanted the result to be simple and highly usable. Here’s an example of what you can do with it: A couple things to note about this implementation:

Classical Inheritance in JavaScript. Douglas Crockford www.crockford.com And you think you're so clever and classless and free. Learning JavaScript – Lesson 3: Basic Object Types.