JavaScript – outils

Quelques raccourcis :

Quiconque développe des sites Web à l'aide de JavaScript aujourd'hui et vise une solide combinaison de productivité et de robustesse se doit de connaître l'existence de bibliothèques sophistiquées développées au fil des années.

Nous mentionnerons ici quelques-unes des plus importantes d'entre elles (à ma connaissance, du moins), mais il est sage de se renseigner avant de débuter un développement à grande échelle. Vos problèmes ont peut-être déjà été solutionnés, et de manière sophistiquée, par des gens qui leur ont réfléchi longtemps.

Côté client – la bibliothèque jQuery

La bibliothèque jQuery est sûrement l'outil JavaScript le plus connu. Elle offre des mécanismes portables et efficaces pour gérer les événements, interagir de manière Ajax avec le serveur, obtenir divers effets visuels, etc.

On reconnaît typiquement le recours à jQuery par la présence de l'objet $ qui est le lieu où sont regroupés les fonctionnalités de cette bibliothèque. Si vous souhaitez interagir efficacement avec des outils commerciaux JavaScript, évitez donc de donner ce nom à vos propres outils.

Un exemple tout simple montrant comment il est simple d'utiliser jQuery est le suivant (adapté de la documentation officielle) :

  • Tout d'abord, $('h2') obtient la liste les éléments <h2> du document actif
  • La méthode each() de l'objet résultant prend en paramètre une fonction à appliquer à chacun des éléments
  • Enfin, la fonction appliquée ici affiche le texte dans chacun des éléments répertoriés

Remarquez la position des accolades et des parenthèses. Ne vous amusez pas trop avec celles-ci, car JavaScript peut vous jouer de vilains tours. En effet, le langage impose une forme d'injection de « ; » dans le code source aux endroit où il « juge » qu'il en manque. Ce faisant, il peut rendre un programme en apparence correct tout à fait illégal pour des raisons d'indentation.

 

$('h2').each(function(index) {
    alert(index + ': ' + $(this).text());
});

Il est d'usage avec jQuery de mettre en place certaines fonctionnalités sur une page Web donnée dès le moment où cette page est pleinement chargée.

À cet effet, l'exemple à droite incrémente une variable globale à la page lors de chaque clic de l'élément nommé cliquez_moi et modifie par la suite le texte dans l'élément nommé nclics_value. Ces mécanismes sont mis en place lors du chargement de la page. On y voit aussi la mise en place de code pour gérer un clic sur un paragraphe (élément <p>) en insérer un encadré rouge autour du paragraphe sélectionné.

 

var nclics = 0;
$(document).ready(function() {
  $("#cliquez_moi").click(function() {
    ++nclics;
    $("#nclics_value").text(' ' + nclics);
  });
  $("p").click(function() {
    $(this).css("border", "3px solid red");
  });
});

On comprendra, à voir l'aisance avec laquelle il est possible d'exprimer des idées complexes sous jQuery, l'une des raisons qui en a motivé l'adoption.

À son sujet, quelques pistes :

Critiques :

Côté client – la bibliothèque Angular.js

Vous trouverez des explications et quelques petits exemples sur cette technologie sur Angular.html

Quelques liens pertinents :

Technique :

Le futur d'Angular.js :

Plateforme de déploiement – asm.js

Le projet asm.js est un projet particulièrement intéressant. L'idée va comme suit :

Quelques liens pertinents :

À propos de WebAssembly :

Côté serveur – la bibliothèque Node.js

La bibliothèque Node.js, quant à elle, supporte, à partir d'un programme nommé node, l'exécution de code JavaScript côté serveur. L'une de ses principales porte sur les entrées/ sorties asynchrones côté serveur.

À partir des fonctionnalités de Node.js, il est possible de construire un serveur Web simple en moins de dix lignes de code, avec support de connexions concurrentes et gestion des codes d'erreurs ou de succès http. Sans avoir l'ascendant de jQuery, cette bibliothèque est l'un des outils les plus connus du monde JavaScript.

À son sujet, quelques pistes :

Critiques :

Outils divers

Quelques outils faits par ou pour JavaScript, cueillis ici et là :

Plateformes

Plateformes pour JavaScript :

Valid XHTML 1.0 Transitional

CSS Valide !