Accueil

JavaScript & jQuery

Ci-dessous une animation réalisée avec HTML & JavaScript.
Actualisez la page pour relancer l'animation !

Objet du tuto "JavaScript & jQuery"

Une page Web créée avec du HTML est totalement statique et n'offre que très peu de possibilités d'interactions avec le visiteur.
Pour produire des effets visuels sur survol ou clic donc pour créer une certaine interactivité, vous pensez à CSS.
Mais les possibilités de manipulation du DOM via le CSS restent limitées et ne concernent que le stylage. Donc le plus souvent il faut recourir à la programmation JavaScript pour modifier, par exemple, les attributs d'un élément, changer le contenu d'un élément, ajouter un élément voire en supprimer un.

Le monde JavaScript propose des centaines de bibliothèques contenant des fonctions de haut niveau. Donc ne cherchez pas à "réinventer la roue" ... Ainsi, pour prendre un exemple, programmer un "drag and drop" en JavaScript de base ce sera un "parcours du combattant" .Mais cela devient un jeu d'enfant si vous utilisez le framework jQuery et plus précisément son extension jQuery UI !
Autre exemple : si vous voulez créer un dessin vectoriel et animé dans une page utilisez la librairie JavaScript Snap SVG.
Troisième exemple : si vous voulez produire un dessin matriciel dans la page utilisez la bibliothèque Canvas.
Alors qu'il faut télécharger les librairies jQuery ou Snap SVG, l'extension Canvas est implémentée par tous les navigateurs récents.

Désormais JavaScript peut être utilisé côté serveur (Node.js). Maintenant j'avoue que je préfère utiliser PHP ; vous ne trouverez donc pas dans ce tuto de chapitres consacrés à Node.js. La technologie AJAX (Asynchronus JavaScript And Xml) avait amorcé l'utilisation de JavaScript côté serveur.
Grâce à AJAX une page peut être actualisée avec des données provenant du serveur sans qu'il soit nécessaire de la recharger complètement comme avec une requête HTTP. JQuery propose des méthodes pour faciliter le codage des requêtes AJAX ! Et cette fois j'en parle dans ce tuto.

Sommaire de ce tuto