Créé le 12 Mai 2008, par Anis Safine
Bonjour à tous !
Avant toute chose, je me présente, Anis Safine (ou BkM[123]) et je serais votre compagnon et guide tout au long de ce tutoriel sur le JavaScript. 
Vous y trouverez presque tout ce dont vous avez besoin de savoir sur le JavaScript. Il ne s'agira donc pas d'une liste exhaustive de tout ce dont il est capable mais de vous permettre de devenir pleinement autonome avec ce langage.
Bien entendu, ce cours est accessible et compréhensible par tous du moment que vous avez des bases en (x)HTML et en CSS. Ce sont les deux seuls impératifs. Pour ceux qui ne connaîtraient pas ces deux langages, vous trouverez un excellent tutoriel sur le siteduzero.com.
Enfin bon, je parle, je parle, mais qu'allons-nous apprendre dans ce chapitre ? Et bien nous allons découvrir le JavaScript, ses applications, ses avantages et ses défauts, ainsi que quelques explications sur l’organisation du cours.
Avant de commencer à travailler avec quelqu'un, on commence bien par les présentations ! 
Remonter
1. L'utilité du JavaScript
La première chose à faire quand on se met à apprendre un langage de programmation, c’est comprendre à quoi il va bien pouvoir nous servir et vous allez peut-être vous rendre compte qu'en fait, le JavaScript n'est pas le langage qu'il vous faut.
Pour bien comprendre l'utilité du JavaScript, petit flash-back :
Il n’y pas si longtemps que ça, en 1989, Internet est né de l’idée d’un chercheur anglais nommé Tim Berners-Lee, travailleur au CERN (Centre Européen de Recherche Nucléaire). A cette époque, le Web devait être une façon révolutionnaire pour les physiciens de partager leurs recherches, mais très vite, le Web est devenu accessible à tous pour devenir l'Internet que l'on connaît aujourd'hui.
Il faut savoir que depuis toujours, les sites web se sont basés sur ce que l'on appelle des serveurs, c'est à dire des gros ordinateurs qui stockent votre site web sur leur disque dur. Ainsi, lorsque vous demandez à voir une page, la demande (ou requête) est faite au serveur qui va alors vous transmettre la page que vous désirez.
Un petit schéma pour mieux comprendre :
Le serveur vous donne la page que vous demandez.
Une chose doit vous intriguer sur ce schéma : le terme client. Dès lors que vous vous connectez à Internet, votre ordinateur est qualifié d'ordinateur client, ou tout simplement de client. Retenez le bien, c'est très important !
Revenons à notre flash back :
Les serveurs ont peut-être toujours existé, mais au commencement du Web, on ne connaissait que le HTML qui permettait de structurer des informations en paragraphes, listes, tableaux etc… A cette époque, les sites web étaient formés par de simples pages statiques : le contenu de chaque page était écrit par le webmaster et les visiteurs ne pouvaient pas le modifier.
Et puis petit à petit, on s’est dit que ce serait sympa d'inventer d'autres langages histoire de faire des sites web plus dynamiques et interactifs. C'est là que ça devient intéressant !
Le dynamisme
Le dynamisme, c'est justement ce qui permet à des visiteurs d'agir sur le contenu du site. Prenons Like The Web par exemple : en tant que visiteurs, vous avez la possibilité de laisser des messages sur le livre d'or, ou des commentaires sur les news.
Moi, en tant qu'administrateur, j'ai accès à des formulaires qui me permettent de rajouter des news, des cours et de contrôler vos messages et commentaires.
Tout ce que je viens de citer représente des informations : les messages, les commentaires ou le nombre de connectés sont des informations qui sont stockées sur le serveur du site. Des pages dynamiques ne sont plus des pages où le webmaster écrit du contenu mais des pages où le serveur écrit du contenu, à partir des informations qu'il contient (on dit qu'il génère la page).
Tout cela est rendu possible par des langages dynamiques interprétés (compris) par le serveur !
Du coup, on obtient ça :
Le serveur génère la page demandée grâce au langage dynamique.
Si je vous explique tout ça, c'est pour que vous compreniez que ces fameux langages dynamiques sont ce que l'on appelle des langages "exécutés côté serveur", c'est à dire des langages qui sont interprétés uniquement par le serveur et qui donc ne sont utilisables que pour générer une page.
Au final, vous allez me dire : "et le JavaScript dans toute cette histoire ? c'est un langage dynamique ? Il permet de générer une page ?"
Et bien non ! Le JavaScript est incapable de faire tout ce que je viens de vous dire et si c'est du dynamisme que vous recherchez, il va falloir apprendre le PHP ou l'ASP (pour apprendre le PHP, cliquez ici) !
Tiens, je vais même vous en apprendre une belle, le JavaScript, c'est un langage exécuté côté client ! Si vous avez bien tout suivi, vous devriez comprendre que c'est votre ordinateur qui est capable d'interpréter du JavaScript, jamais le serveur !
Allez, comme c'est l'heure des révélations, je vous avoue tout : le JavaScript est un langage interactif ! 
L'interactivité
Sur un coup de tête soudain, je viens de vous affirmer que le JavaScript est un langage interactif qui est exécuté côté client. Voyons plus en détail ce que cela implique.
Tout d'abord, une chose importante à comprendre et que vous vous demandez peut-être, c'est où on peut placer du code JavaScript. La réponse est simple : dans votre code (x)HTML (et jamais dans le CSS ).
Voici à quoi ressemble un code JavaScript (pas de panique, ce n'est qu'un exemple pour vous donner une idée) :
Code javascript
function(selectedElement) {
if (this.options.updateElement) {
this.options.updateElement(selectedElement);
return;
}
var value = '';
if (this.options.select) {
var nodes = $(selectedElement).select('.' + this.options.select) || [];
if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);
} else
value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
var bounds = this.getTokenBounds();
if (bounds[0] != -1) {
var newValue = this.element.value.substr(0, bounds[0]);
var whitespace = this.element.value.substr(bounds[0]).match(/^\s+/);
if (whitespace)
newValue += whitespace[0];
this.element.value = newValue + value + this.element.value.substr(bounds[1]);
} else {
this.element.value = value;
}
this.oldElementValue = this.element.value;
this.element.focus();
if (this.options.afterUpdateElement)
this.options.afterUpdateElement(this.element, selectedElement);
}
Contrairement à un langage exécuté côté serveur, le JavaScript n'est pas interprété par le serveur mais par votre ordinateur. Ce qui signifie que contrairement à des langages exécuté côté serveur, le JavaScript est exécuté uniquement après le chargement de la page ou à n'importe quel moment après ce chargement.
Le PHP par exemple, ne pouvait être exécuté qu'avant le chargement de la page, au niveau du serveur. Avec le JavaScript, vous pouvez faire un code qui s'exécute 10 secondes après le chargement de la page sans aucun souci !
ll est bien sûr parfaitement possible de mélanger un langage dynamique avec du JavaScript ! Le serveur va générer une page contenant du JavaScript qui sera interprété par la suite par l'ordinateur client !
Mais cela ne nous explique pas encore ce dont sont capables les codes JavaScript... Toute la puissance et l'utilité du JavaScript réside dans sa capacité à modifier le code HTML et CSS de la page sans la recharger ! Attention ! Cela ne modifie le code qu'au niveau client : ce qui signifie que ces modifications ne sont visibles que par vous et qu'elles sont temporaires. Si vous rechargez la page, elles ne seront plus là !
Du coup, concrètement, c'est quoi l'interactivité ?
Et bien je dirais que l'interactivité, c'est la capacité d'une page à s'adapter à l'activité d'un visiteur. Des exemples d'interactivité seraient :
- si le visiteur passe sa souris au-dessus d'un menu, ça le déroule
- si le visiteur valide un formulaire, on l'alerte des éventuelles erreurs
En gros, suivant ce que fait le visiteur, la page est capable de réagir et de se modifier en conséquence. Le JavaScript est capable d'intervenir sur n'importe quel élément d'une page !
... et vous savez enfin à quoi sert le JavaScript !
Remonter
2. Organisation du cours
Maintenant que vous en savez un peu plus, voici une petite partie pour vous expliquer comment va s'organiser ce cours. Il me semble très important de bien comprendre le chemin que l'on va suivre afin d'avoir les idées bien claires.
Je ne vous apprends plus rien si je vous dis que le JavaScript est utilisé pour modifier le code source ((x)HTML et CSS) d'une page, en fonction de l'activité de son visiteur (mouvements de la souris, utilisation du clavier etc.).
Et bien dans la première partie de ce cours (que vous lisez actuellement) nous n'allons pas apprendre à faire tout cela. Pour être franc, nous allons apprendre un bon paquet de choses in-dis-pen-sables mais qui n'ont aucun rapport avec "comment modifier le code source d'une page".
En fait, le JavaScript a deux visages : ce que l'on appelle le noyau JavaScript que nous allons étudier dans cette première partie, et puis le JavaScript côté client que nous étudierons dans une deuxième et troisième partie, qui sert à modifier le code source ! (c'est le fameux DOM dont je parle en introduction à ce cours)
Je vous entends d'ici : Et c'est quoi le noyau JavaScript ?
Et bien c'est difficile à expliquer sans faire appel à certaines notions que tout le monde n'a peut-être pas encore, mais comprenez bien que pour modifier le contenu d'une page, le JavaScript a besoin de manipuler certaines données : du texte, des nombres....
Cela doit peut-être vous étonner de voir que toute une partie est destinée à la manipulation de données, mais vous verrez en temps et en heure que c'est un domaine plus large que ce que l'on s'imagine.
Remonter
3. Le côté "sombre" du JavaScript
Le JavaScript est donc un outil d'interactivité, utile pour rendre son site plus attractif. Eh oui, on est tous bien contents lorsqu'on voit que la page est capable de comprendre nos attentes et de s'y adapter.
Malheureusement, le JavaScript n'est pas tout rose et c'est pourquoi il est très important de peser le pour et le contre...
Tout d'abord, vous devez sans doute tous avoir au moins une fois dans votre vie entendu le terme de web 2.0... Il désigne la volonté de certaines personnes de réaliser des sites web "plus modernes" en les rendant plus interactifs et communautaires (facebook, netvibes... sont des exemples de sites web 2.0).
Pour une définition "officielle", cliquez ça.
En fait, le web 2.0 est (cela n'engage que moi bien sûr...) un véritable effet de mode qui met énormément le JavaScript sur le devant de la scène. Car ce que vous ne savez peut-être pas, c'est qu'il y a encore quelques années, le JavaScript était beaucoup "boudé" par les programmeurs du fait de son utilisation un peu particulière et ses aspects complexes. Aujourd'hui, c'est simple, on se l'arrache !
Cela a comme effet négatif de pousser les développeurs à l'utiliser un peu n'importe où et beaucoup n'importe comment, en copiant/collant des scripts tout faits qu'ils modifient eux-même sans trop savoir ce qu'ils font... Mais retenez bien une chose, trop de JavaScript n'est pas bon pour un site web !
Eh oui, comme vous le savez désormais, ce langage a pour but de faire s'adapter une page à son visiteur, ce qui implique de prévoir un minimum les besoins et attentes de ce visiteur. Lorsqu'il est trop utilisé dans une page, le JavaScript va donc souvent restreindre les possibilités de l'internaute et le frustrer plus que de lui être utile.
Premier défaut : le JavaScript est difficile à utiliser intelligemment.
Un autre défaut est la question de portabilité.... On dit d'un langage qu'il est portable si son code est réutilisable sur toutes les plateformes. En français, on pourrait dire du JavaScript qu'il est portable si quel que soit le navigateur internet utilisé (Safari, Firefox, Internet Explorer, Konqueror...), un même code est toujours interprété exactement de la même manière.
Malheureusement et vous vous en doutez, ça n'est pas le cas à quelques détails près. La vérité c'est qu'il n'existe que quelques exceptions mais qui malgré tout font du JavaScript un langage non intégralement portable. 
Allez un dernier petit défaut qui a son importance, avant que ne vous vous enfuyiez en hurlant : le JavaScript peut-être désactivé par n'importe quel utilisateur... Eh oui, si vous basez tout votre site web sur le JavaScript, il y aura toujours des utilisateurs qui seront complètement bloqués et qui ne pourrons pas naviguer correctement sur votre site.
Pourquoi le désactiveraient-ils ? Certains mal informés pensent que le JavaScript représente un danger pour leur ordinateur, ce qui est complétement faux. Le JavaScript a beau être un langage exécuté côté client, il n'a aucun moyen d'accéder au contenu de l'ordinateur ou de le modifier. Il est donc complètement inoffensif.
D'autres le désactivent justement à cause des développeurs qui abusent de ce langage et qui rendent leur navigation désagréable.... A part ça, le JavaScript, c'est génial !
Remonter
Conclusion
Si vous avez eu le courage de lire tout ce chapitre, un grand bravo ! Si vous ne l'avez pas eu, je vous comprends parfaitement mais il s'agissait tout de même d'un chapitre assez important pour bien comprendre ce que représente le JavaScript.
Je vous rassure tout de même, au prochain chapitre on va faire notre première instruction en JavaScript !
