Aller plus loin

Vous venez de finir de lire le cours de JavaScript ? Vous n'en avez toujours pas assez appris ? Alors ce chapitre est fait pour vous ! Nous abordons ici des notions plus ou moins ignorées dans la structure principale du cours.

Ainsi, après un rapide petit récapitulatif de certaines notions enseignées dans ce cours, nous étudierons ce que sont les bibliothèques et les frameworks et ce qu'ils peuvent vous apporter. Nous parlerons aussi des environnements (autres qu'un navigateur Web) qui sont capables d'exploiter une partie du potentiel du JavaScript.

Récapitulatif express

Ce qu'il vous reste à faire

Avant de nous plonger dans de nouvelles possibilités offertes par le JavaScript, il serait bien de situer votre propre niveau, car vous n'êtes pas encore des pros, il vous manque l'expérience ! Si nous avions voulu couvrir toutes les particularités du JavaScript, il aurait sûrement fallu un cours au moins deux fois plus long, ce qui n'est pas vraiment envisageable. Ces particularités, vous les découvrirez donc en programmant !

Il est important pour vous de programmer, de trouver quelques idées pour des projets un peu fous, il vous faut coder et rencontrer des problèmes pour pouvoir progresser ! Vous serez ainsi capables de résoudre par vous-mêmes vos propres codes, vous commencerez à éviter certaines erreurs autrefois habituelles, vous réfléchirez de manière différente et plus optimisée. Ce sont toutes ces petites choses qui feront de vous un programmeur hors pair. Dans ce cours, nous n'avons fait que vous donner les outils pour que vous puissiez vous prendre en main, il ne tient qu'à vous de les utiliser à bon escient !

Puisque tout n'a pas été abordé dans ce cours, sachez maintenant que vous aurez dorénavant besoin de documentations afin de trouver votre bonheur. Nous avons tâché de vous fournir, quand l'occasion se présentait, des liens vers la documentation du MDN afin que vous commenciez dès le début à apprendre à bien vous en servir. À partir de maintenant, les documentations vous seront probablement indispensables, tâchez de bien vous en servir, elles sont précieusement utiles !

Ce que vous ne devez pas faire

L'obfuscation de code

Comme vous avez sûrement pu le constater à travers ce cours, le JavaScript n'est pas un langage compilé, il est donc extrêmement simple pour quiconque de lire votre code. Ceci est inéluctable ! Cependant, il existe une méthode permettant de diminuer la lisibilité de votre code.

Cette méthode se nomme l'obfuscation, elle consiste à noyer une information au sein d'un flot inutile de données. Dans le cadre de la programmation, cela signifie que vous allez augmenter la taille de votre code pour y ajouter des instructions inutiles et ainsi perdre la personne qui voudra tenter de lire votre code. Cependant, l'obfuscation de code ne vous apportera vraiment rien mis à part une perte de performances, d'autant plus qu'un code JavaScript pourra toujours être lu sans trop de problèmes grâce à divers outils (dont fait partie jsbeautifier.org ).

En revanche, n'hésitez pas à utiliser des outils pour minifier vos codes afin d'éviter de faire télécharger de trop gros fichiers à vos utilisateurs. UglifyJS 2 est un très bon exemple de ce qui existe comme outils de minification.

Le JavaScript intrusif

N'oubliez jamais ce que nous avons essayé de vous inculquer au travers de ce cours : ne faites pas de JavaScript intrusif ! Partez du principe qu'une page Web doit pouvoir fonctionner sans vos codes JavaScript ! Il y a quelques années, ce principe était de rigueur, car certains navigateurs ne savaient pas encore lire le JavaScript, leurs utilisateurs étaient donc bloqués sur certaines pages. De nos jours, tous les navigateurs supportent le JavaScript, mais il est quand même important de garder ce principe de base afin d'éviter des problèmes de ce genre :

<a href="#" onclick="if(confirm('Êtes-vous sûr ?')) { location = 'http://sitelambda.com'; }">Lien</a>

Dans cet exemple, nous préférons demander confirmation avant que l'utilisateur ne soit redirigé. Tout naturellement, nous créons donc une condition faisant appel à la fonctionconfirm(). Dans le cas où l'utilisateur est d'accord, nous faisons la redirection avec l'objetlocation(vous ne savez pas quel est cet objet ? Allez hop ! documentation, commencez dès maintenant à vous en servir par vous-mêmes ! ). Mais cette redirection est gênante et ne devrait pas exister !

Et pourquoi ça ? Qu'est-ce qu'elle a de problématique ?

Connaissez-vous le raccourci Ctrl + clic gauche ? Il permet d'ouvrir le lien cliqué dans un nouvel onglet, ce qui n'est pas possible avec le code que nous venons de voir, car c'est le JavaScript qui définit comment ouvrir la page. Voilà le problème d'un code JavaScript intrusif ! Si vous étiez partis du principe que votre page Web devait fonctionner sans vos codes JavaScript, alors vous n'auriez pas eu ce problème, car vous auriez probablement codé quelque chose de ce genre :

<a href="http://sitelambda.com" onclick="return confirm('Êtes-vous sûr ?');">Lien</a>

Ici, le JavaScript peut être désactivé sans empêcher le fonctionnement de la page Web. De plus, il ne perturbe pas les fonctionnalités natives du navigateur comme le Ctrl + clic gauche.

Bien entendu, il existe certains codes qui ne peuvent pas se passer du JavaScript pour fonctionner (un jeu par exemple), il y aura donc certains cas où vous serez obligés de faire du JavaScript intrusif. Essayez juste de faire un minimum attention.

Ce qu'il faut retenir

Il vous faut coder afin d'adopter de bonnes habitudes, vous ferez des erreurs, mais celles-ci se corrigeront avec le temps à partir du moment où vous savez vous remettre en question et accepter que vous faites parfois des erreurs.

Étendre le JavaScript

Ce cours n'a abordé, jusqu'à présent, que le JavaScript dit « pur ». Pur dans le sens où vous aviez besoin de tout développer par vous-mêmes, ce qui peut rapidement se révéler fastidieux. Un bon exemple de ce qui est nécessaire de développer régulièrement : les animations ! Aussi incroyable que cela puisse paraître, le JavaScript ne fournit aucune fonction capable de nous aider dans nos animations, il nous faut donc les développer par nous-mêmes.

Heureusement, le JavaScript est un langage extrêmement utilisé et sa communauté est immense, il est donc très facile de trouver des scripts adaptés à vos besoins. Parmi ces scripts, nous trouvons deux types : les frameworks et les bibliothèques.

Les frameworks

Un framework a pour but de fournir une « surcouche » au JavaScript afin de simplifier l'utilisation des domaines les plus utilisés de ce langage tout en facilitant la compatibilité de vos codes entre les navigateurs Web. Par exemple, quelques frameworks disposent d'une fonction$()s'utilisant de la même manière que la méthodequerySelector(), et ce, sur tous les navigateurs Web, facilitant ainsi la sélection d'éléments HTML. Pour faire simple, un framework est une grosse boîte à outils contenant une multitude de fonctions permettant de subvenir aux besoins des développeurs !

L'atout numéro un d'un framework est sa capacité à s'adapter à toutes les utilisations du JavaScript et à fournir un système performant de plugins afin qu'il puisse être étendu à des utilisations non envisagées par son système de base. Grâce à ces deux points, un framework permet de simplifier et d'accélérer considérablement le développement d'applications Web.

Il existe de nombreux frameworks en JavaScript en raison de la pauvreté de ce langage en terme de fonctions natives, cependant nous n'allons présenter que les plus connus d'entre eux :

jQuery : il s'agit du framework JavaScript le plus connu. Réputé pour sa simplicité d'utilisation et sa communauté gigantesque, il est clairement incontournable ! Cependant, il n'est pas toujours apprécié en raison de sa volonté de s'écarter de la syntaxe de base du JavaScript grâce au chaînage de fonctions, que vous pouvez constater dans l'exemple qui suit :$("p.neat").addClass("ohmy").show("slow");.
MooTools : un framework puissant et presque tout aussi connu que jQuery, bien qu'énormément moins utilisé. Il est réputé pour sa modularité et son approche différente plus proche de la syntaxe de base du JavaScript. En revanche, bien que ce framework soit « segmentable » (vous ne téléchargez que ce dont vous avez besoin), il reste nettement plus lourd que jQuery.
Dojo : connu pour sa capacité à permettre la conception d'interfaces Web extrêmement complètes, il possède des atouts indéniables face aux plus grands frameworks et tout particulièrement jQuery UI , une extension de jQuery conçue pour faire des interfaces Web. Ce framework est l'un des plus modulaires que l'on puisse trouver sur Internet, ce qui fera la joie des fans d'optimisation.
YUI : il est souvent oublié par les développeurs Web, mais l'entreprise Yahoo! n'a pourtant pas dit son dernier mot avec des projets ambitieux parmi lesquels compte YUI. Ce framework est pour le moins complet, ne vous fiez pas aux fausses idées que vous pouvez avoir de Yahoo!, vous pourriez avoir bien des surprises en utilisant ce framework qui est modulable et relativement performant, bien qu'il bénéficie d'une communauté assez restreinte.
Prototype : l'un des pionniers des frameworks JavaScript ! Nous le citons seulement en tant qu'exemple, car, malgré ses qualités, il se fait vieux. Son déclin s'explique par le simple fait qu'il étendait les objets natifs liés au DOM, rendant le tout assez lent et peu compatible. Bref, vous ne vous en servirez jamais, mais au moins vous saurez de quoi veulent parler certaines personnes en parlant de « Prototype » avec un P majuscule.

Les bibliothèques

Contrairement aux frameworks, les bibliothèques (libraries en anglais) ont un but bien plus spécialisé.

Quel est l'intérêt si un framework me fournit déjà tout ce dont j'ai besoin ?

L'intérêt se situe à la fois sur le poids du fichier JavaScript à utiliser (une bibliothèque sera généralement plus légère qu'un framework) et sur la spécialisation des bibliothèques. Ces dernières ont souvent tendance à aller plus loin que les frameworks, vu qu'elles n'agissent que sur un domaine bien précis, ce qui simplifie d'autant plus votre développement dans le domaine concerné par la bibliothèque.

Et puis il existe un principe important dans le développement (Web ou logiciel) : l'optimisation. Utiliser un framework uniquement pour faire une malheureuse animation n'est vraiment pas conseillé, c'est un peu comme si vous cherchiez à tuer une mouche avec un tank… Préférez alors les bibliothèques, en voici d'ailleurs quelques-unes qui pourraient vous servir :

Sizzle , Qwery : deux bibliothèques conçues pour fonctionner de la même manière que la méthodequerySelector(), ce type de bibliothèques est d'ailleurs à l'origine de l'implémentation officielle de la méthode en question. La première est le moteur de sélection du framework jQuery mais est relativement lourde, la seconde a l'avantage d'être particulièrement légère et un poil plus rapide en terme d'exécution.
Popcorn.js : une bibliothèque permettant une manipulation aisée des balises<audio>et<video>, il devient ainsi très simple d'interagir avec ces balises afin de mettre en place des sous-titres, des commentaires placés à un moment précis de la piste audio ou vidéo, etc.
Raphaël , Three.js : trois bibliothèques spécialisées dans le graphisme. La première fonctionne exclusivement avec les images SVG et la deuxième s'est spécialisée dans la 3D et gère à la fois SVG,<canvas>et surtout la bibliothèque WebGL , qui sait tirer parti du moteur OpenGL !
Modernizr : comme vous le savez si bien, les langages Web sont plus ou moins bien supportés selon les navigateurs, surtout quand il s'agit de fonctionnalités récentes ! Cette bibliothèque a pour but de vous aider à détecter la présence de telle ou telle fonctionnalité, il ne vous restera alors plus qu'à fournir un script résolvant ce problème (un polyfill) ou exploitant une solution alternative.

Il n'est malheureusement pas possible de vous faire une liste complète de tout ce qui existe en terme de bibliothèques, elles sont bien trop nombreuses.

Diverses applications du JavaScript

Comme son nom l'indique, le JavaScript est un langage de script. Cela signifie qu'il s'agit d'un langage interprété (et non compilé) qui peut être exécuté dans divers environnements. Votre navigateur Web est un environnement, mais votre système d'exploitation aussi ! Ainsi, par exemple, Windows supporte l'exécution de fichiers JavaScript au sein même de son système.

Des extensions codées en JavaScript

Ce que nous cherchons à vous faire comprendre, c'est que le JavaScript est bien loin d'être limité au Web, bien qu'il s'agisse de sa principale utilisation. Ce langage se retrouve notamment dans le code des extensions des navigateurs Web tels que Firefox ou Chrome. Cela permet de coder facilement et rapidement des extensions basées sur le HTML et le JavaScript avec des droits bien plus étendus que ceux d'une page Web classique. Vous pouvez, par exemple, gérer les onglets et les fenêtres grâce à une API fournie par le navigateur et utilisable en JavaScript.
Si vous êtes intéressés par le développement d'extensions pour navigateurs, nous vous invitons à consulter cette page concernant leur développement sous Firefox , ainsi que cette page concernant leur développement sous Chrome .

Des logiciels développés en JavaScript

Le logo d'Adobe Air

Dans un tout autre domaine que le Web, la plateforme Adobe Air propose le développement d'applications sur de multiples environnements parmi lesquels nous retrouvons (à l'heure actuelle) Windows, Mac OS, Android, iOS et BlackBerry Tablet OS. L'avantage de cette plateforme est qu'elle supporte plusieurs ensembles de langages dont l'ensemble HTML/CSS + JavaScript ! Ainsi, il vous est maintenant possible de développer des applications PC et mobiles simplement grâce à du HTML et du JavaScript. Adobe Air est conçu de telle sorte que le JavaScript utilisé au travers de cette plateforme bénéficiera d'API supplémentaires telles que celle permettant de manipuler les fichiers. N'hésitez pas à étudier comment tout cela fonctionne si vous êtes intéressés, ce n'est pas spécialement compliqué à utiliser, bien que cela soit un peu déroutant au premier abord.

Des applications pour SmartPhones en JavaScript

A l'instar D'Adobe Air existe Adobe PhoneGap, qui propose de réaliser une application pour SmartPhone (Android, iOS...) en utilisant des technoloies Web (HTML, CSS, JavaScript + API) et de la compiler avec PhoneGap pour en faire une application exécutable !

Du JavaScript sur le serveur

Le logo de Node.js

Retour au domaine du Web, mais du côté des serveurs cette fois-ci ! Il se peut que vous ayez déjà entendu parler de Node.js durant votre apprentissage du JavaScript, mais qu'est-ce que c'est exactement ? Il s'agit en fait d'une plateforme permettant l'exécution du langage JavaScript côté serveur afin de remplacer ou venir en complément de langages serveur plus traditionnels tels que le PHP. L'intérêt de ce projet réside essentiellement dans son système non bloquant. Prenez le PHP par exemple, pour lire un fichier en entier, vous serez obligés d'attendre la lecture complète avant de pouvoir passer à la suite du code, tandis qu'avec Node.js vous utilisez un langage (le JavaScript) conçu pour gérer tout ce qui est événementiel, vous n'êtes donc pas obligés d'attendre la fin de la lecture du fichier pour passer à autre chose.

Ceci n'est évidemment pas le seul avantage du projet, nous vous conseillons de consulter le site officiel pour plus d'informations sur ce qui est possible ou non.

En résumé

Il vous reste encore beaucoup à faire pour être réellement à l'aise en JavaScript. Pour cela, vous allez devoir coder afin d'acquérir de l'expérience et gagner en assurance.
Évitez au maximum toute obfsucation de code ou tout code intrusif. Cela ne vous amènera qu'à de mauvaises pratiques et n'aidera pas vos utilisateurs.
Afin de travailler plus vite, vous trouverez de nombreux frameworks ou bibliothèques qui vous faciliteront la tâche lors de vos développements. Connaître un ou deux frameworks sera un avantage pour vous lors d'un entretien d'embauche.
N'oubliez pas que le JavaScript ne se résume pas à une simple utilisation au sein des navigateurs Web, il existe bien d'autres plateformes qui s'en servent, tels que Adobe Air et Node.js présentés à la fin de ce chapitre.

Conclusion

Ce tutoriel est maintenant terminé ! Nous espérons qu'il aura convenu à vos attentes. N'oubliez pas de consulter la partie annexe du cours pour en apprendre un peu plus sur ce langage.

Nous tenons à remercier les personnes qui ont contribué de près ou de loin à l'écriture de ce cours. Ces personnes sans qui ce cours aurait eu du mal à avancer !

Commençons par trois accros du Javascript :

Yann Logan — Golmote —, pour ses relectures et ses conseils avisés.
Xavier Montillet — xavierm02 —, pour ses remarques sur tout ce qui nous semblait négligeable mais importait beaucoup au final !
Benoît Mariat — restimel —, qui a activement participé aux débuts quelques peu chaotiques du cours.

Merci encore à vous trois, on se demande toujours ce qu'on aurait fait sans vous !

S'ensuivent certaines personnes de Simple IT :

Jonathan Baudoin — John-John —, qui a été capable de supporter nos coups de flemme pendant plus d'un an !
Pierre Dubuc — karamilo —, pour nous avoir lancés dans ce projet immense et nous avoir aidés à mettre en place les premiers chapitres du cours.
Mathieu Nebra — M@teo21 —, sans qui ce cours n'aurait jamais vu le jour puisqu'il est le créateur du Site du Zéro.

Merci aussi à nos familles respectives, qui nous ont encouragés pendant plus d'un an et demi !

Et bien sûr, vous, chers lecteurs. Vous qui avez su nous aider à améliorer ce cours et qui nous témoignez régulièrement votre soutien.

Merci à vous tous !