Avant de commencer à parler de jQuery, on va commencer par le début : javascript.

Quand vous parcourez un site internet, les pages sont envoyées à votre navigateur (Firefox, Chrome ou encore Safari...) par un serveur, sous forme de texte : le code HTML de la page.

Le navigateur est appelé le client, et le serveur... le serveur !

Cette différence client/serveur est fondamentale dans le développement web. Certains langages comme PHP sont exécutés côté serveur, et permettent de générer le code HTML qui sera envoyé au client.

Mais il existe d'autres langages qui s'exécutent directement chez le client (sur votre navigateur), comme JavaScript.

Le DOM

Vous avez peut-être déjà lu ces 3 lettres quelque part, sans vraiment savoir de quoi il s'agit.

Je viens de vous expliquer que votre navigateur reçoit le code HTML envoyé par le serveur. En l'état, ce code est inutile, pour le navigateur c'est juste un gros fichier texte avec plein de balises dedans, comme ça :

<div class="header">
	<a href="/"><img src="/style/images/logo_fc_3.jpg" alt="finalclap" /></a>
	
	<div class="descr">
		Tutoriaux gratuits pour<br/>
		<a href="/tutoriaux/photoshop/">Photoshop</a>
		<a href="/tutoriaux/after-effects/">After Effects</a>
		<a href="/tutoriaux/3dsmax/">3D Studio Max</a>
	</div>
	
	<div class="login">
		<a href="http://forum.finalclap.com/ucp.php?mode=register">Inscription</a> -
		<a href="#" id="toggle_login">Connexion</a>
	</div>
	
	<div class="header_liens">
		<a class="lien_j" href="/download/">Ressources</a>
		<a class="lien_b" href="#" id="toggle_tutoriaux">Tutoriaux</a>
		<a class="lien_v" href="/">Blog</a>
		<a class="lien_r" href="http://forum.finalclap.com">Forum</a>
	</div>
</div>

Extrait de code HTML

Donc votre navigateur va analyser le code, et construire un ensemble d'éléments en les structurant. C'est par ce procédé de rendu qu'un amoncellement de lignes de codes austères se transforme en page web affichée sur votre écran d'ordinateur.

Et bien c'est ça le DOM, une structure d'éléments un peu abstraite qui est derrière la page affichée.

Le problème du DOM, c'est qu'on ne voit pas concrètement de quoi il s'agit, puisque ça n'est ni le code HTML, ni le rendu graphique de la page. Heureusement, il existe des outils permettant de le voir, mais cela dépend de votre navigateur.

On va la faire simple, on va utiliser Firefox pour ce cours. L'extension Firebug permet d'afficher le DOM dans Firefox. Allez vite installer Firebug sur votre Firefox avant de continuer...

Firebug

Il est assez discret le bestiau, pour l'utiliser, il faut cliquer sur la petite icône Firebug dans la barre d'état de votre fenêtre Firefox (en bas à droite) :

Interface de Firebug (cliquez pour agrandir)

Le fonctionnement est relativement simple : quand vous lancez Firebug, ça affiche un panneau dans la partie inférieure de la fenêtre.

Ce panneau est composé de plusieurs onglets, avec l'onglet HTML sélectionné par défaut. Cet onglet HTML est en réalité une représentation sous forme de code HTML du DOM.

En passant la souris sur les éléments, vous voyez que ceux-ci apparaissent en surbrillance sur la page web.

Vous pouvez sélectionner n'importe quel élément en cliquant sur le tag dans l'onglet DOM, ou alors directement en cliquant dessus sur la page web à l'aide de l'inspecteur.

Vous pouvez même accéder et modifier certaines propriétés de l'élément sélectionné grâce au panneau Assistant.

Je vous laisse regarder un peu partout pour vous familiariser avec votre nouveau jouet.

Firebug est sans doute l'outil le plus utile quand on fait du JavaScript (mais il est également d'une efficacité redoutable pour l'intégration HTML/CSS, soit dit en passant).

Notamment la console, qui permet d'afficher les éventuelles erreurs javascript, d'exécuter du code JS à la volée, mais qui permet aussi d'afficher des informations de débuggage (équivalent du print_r de PHP...) avec la fonction console.log :

console.log(/*<variable, chaine de caractère>*/);

Et JavaScript dans tout ça ?

Enfin, nous y voilà, quel est le rapport entre JavaScript et tout ce qu'on vient de dire ???

JavaScript permet ni plus ni moins de manipuler le DOM, d'en modifier la structure, de changer les éléments qui le composent... à la volée, sans recharger la page.

On peut par exemple changer la couleur ou la taille de la police de toute la page ou d'un paragraphe en particulier.

Mais on peut aussi faire des trucs beaucoup plus funcky...
La meilleure illustration de tout ceci, ce sont ces deux jeux réalisés entièrement en JavaScript (si vous en connaissez d'autres, envoyez les liens en commentaire) :

Note : quand vous cliquez sur le bouton, ça affiche une petite fusée en haut à droite de l'écran. Vous pouvez diriger la fusée avec les flèches du clavier, et tirer sur les éléments de la page avec la barre d'espace pour les faire disparaitre.

Les événements

Dernier point de ce chapitre, la notion d'événement est fondamentale en JavaScript.

Un événement, c'est quelque chose qui se produit plus ou moins aléatoirement, comme par exemple le clic sur un élément du DOM (un lien, une image...).

JavaScript permet de "capter" ces événements, et d'effectuer des actions de votre choix lorsqu'ils se produisent.

<a href="http://www.finalclap.com/" onclick="alert('t\'as cliqué sur un lien Finalclap !'); return false;">Finalclap</a>
 

Ici, le javascript est contenu dans l'attribut onclick de mon lien. Il contient deux instructions : alert, qui affiche une boîte de dialogue, et return false, qui empêche le navigateur de suivre le lien (qui le désactive en quelque sorte).

Nous verrons dans les prochains chapitres que jQuery va nous simplifier l'utilisation de ces événements...

Allez donc jeter un oeil sur cette page : tableau portrait incrusté.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.