(Re)apprendre Javascript - Episode I

nombreux sont les développeurs qui détestent javascript. pourtant, on leur demande de plus en plus souvent de "mettre un peu d'ajax sur le site web".

c'est à ces développeurs que ce billet s'adresse.

javascript est un langage riche, orienté objet et facile à apprendre.

les bases
le site mozilla developer connection reste la source de documentation javascript la plus complète. pour la syntaxe et les types de base, lire l'article a re-introduction to javascript.

les objets
un objet javascript est comparable à un tableau associatif. la façon la plus simple de créer un objet est:

var o = {};
o.name = "hello";
o.setname = function(name) {
  this.name = name;
}

dans cet exemple, o est un objet, sa propriété name a la valeur hello, et sa propriété setname est une fonction.

classes et héritage
javascript permet d'implémenter la notion de classe de la façon suivante:

• une classe est un objet de type function
• cet objet possède un membre magique nommé prototype
• lorsqu'on invoque cet objet avec l'operateur new, un nouvel objet vide est crée et le prototype est recopié à l'intérieur.

exemple:

var myclass = function() { //contructeur
  this.name = "default name";
};
myclass.prototype = { //prototype
  setname: function(name) {
    this.name = name;
  }
};

var o = new myclass();
alert(o.name); // "default name"
o.setname("nouveau nom");
alert(o.name); // "nouveau nom"

il existe plusieurs façons d'écrire des classes. consulter l'article classical inheritance in javascript pour un tour d'horizon complet.

droits d'accès
en javascript, tout est public. la meilleure façon de préserver la notion d'encapsulation est par la convention. par exemple, chez exalead un membre privé commence par le caractère _.

tout dynamique
en javascript, tout peut changer tout le temps. même les méthodes. c'est particulièrement pratique pour construire des interfaces utilisateur basées sur des évènements:

o.onreceivesomeevent = function() {
// do something
};

il est même possible d'enrichir les types de base en rajoutant des méthodes à leur prototype. par exemple:

string.prototype.blank = function() {
  return /^\s*$/.test(this);
}
"hello".blank(); // false
"     ".blank(); // true

le dom - document object model
javascript est exécuté dans un navigateur web, au sein d'une page html. une représentation javascript de la page html est systématiquement contruite par le navigateur. cette représentation, qui s'appelle le dom, est accessible via l'objet window. bien entendu, le dom diffère entre navigateurs. alors comment écrire un programme qui fonctionne partout ? deux approches:

1ère approche:

if (navigator.appname == "microsoft internet explorer" 
    && navigator.appversion >= "4.0")
{
  element.attachevent("onclick", function() {alert("click")});
}

if (navigator.appname != "microsoft internet explorer" 
    && navigator.appname != "netscape")
{
  element.addeventlistener("click", function() {alert("click")});
}

cette approche est la plus triviale et la moins élégante. elle rend le partage de code complexe et amène inexorablement le développeur à détester javascript.

2e approche:

if (element.attachevent) {
  element.attachevent("onclick", function() {alert("click")});
}
if (element.addeventlistener) {
  element.addeventlistener("click", function() {alert("click")});
}

bien meilleure, cette approche utilise une des forces de javascript: tester si une fonction existe. elle permet d'obtenir une compatibilité maximale sans avoir à connaître l'intégralité de tous les navigateurs existants.

voilà pour aujourd'hui. la semaine prochaine, nous continuerons avec une dissection en règle de la fameuse librarie prototype.

- damucho, pour l'équipe webdev