Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Découverte du JavaScript

Une page Web créée avec du HTML est totalement statique. 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 style. Donc assez 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.

Une animation réalisée en HTML & JavaScript

Ci-dessous la boite se remplit automatiquement de 36 miniatures choisies parmi 25 photos.
Le code de cette animation

Actualisez la page pour relancer l'animation !

Objet du tuto "JavaScript

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 premier exemple, programmer un "drag and drop" (glisser-déposer) en JavaScript de base sera un "parcours du combattant". Mais cela devient un jeu d'enfant si vous utilisez le framework jQuery et plus précisément son greffon jQuery UI. En effet cette bibliothèque JavaScript propose deux fonctions haut niveau : draggable() & droppable().
Autre exemple : si vous voulez créer dans une page, un dessin vectoriel, utilisez la librairie JavaScript Snap SVG.
Troisième exemple : si vous voulez produire dans une page un dessin matriciel (statique ou animé), utilisez alors la bibliothèque Canvas.

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 !

Accéder directement aux pages dédiées au Framework jQuery

L'API Canvas n'est pas traitée dans ce tutoriel ; il y a un tuto spécifique pour cette librairie implémentée par tous les navigateurs : API Canvas
Le Framework Snap SVG est traité dans les tutos "dessiner avec SVG" & "animer avec SVG" : débuter en Snap SVG

Présentation de JavaScript

Qui n'a jamais entendu ce terme ?

Définition de JavaScript

JS (JavaScript) est un langage de programmation de scripts, événementiel et orienté objet.

Un langage de programmation

Comme tout langage de programmation on peut créer et manipuler des variables, définir et appeler des fonctions et on dispose de structures de contrôles (tests logiques, boucles).

Un langage de scripts

Cela signifie qu'il s'agit d'un langage interprété et non pas compilé. Le code JS est interprété par le navigateur de l'internaute. C'est pour cette raison que l'on parle de programmation "côté client" ; voir ci-dessous.
Attention JavaScript peut être désactivé par le navigateur !

Un langage événementiel

Le code peut être à l'écoute d'évènements (un clic sur un élément le plus souvent).
Mais il y a bien d'autres évènements : mouvement de la souris, appui d'une touche du clavier, chargement d'un élément de la page, rotation d'un smartphone, etc. A chaque événement une action peut être déclenchée.

Un langage orienté objet

Le langage comprend des objets natifs mais on peut créer ses propres objets. Chaque objet dispose de méthodes et de propriétés.

Rôle du JavaScript

JavaScript c'est le langage de programmation pour le web. Avec JS on peut animer non seulement des éléments HTML mais aussi des objets SVG (SVG est un langage XML pour créer des images vectorielles).
Donc avec JS on peut créer un interaction entre la page web et le visiteur ; votre page devient dynamique ; on parlait avant de DHTML (Dynamic HTML).
On peut aussi ajouter / supprimer des éléments HTML de la page. De façon générale on dit que l'on peut modifier le DOM. Mais nous y reviendrons.
Cependant CSS3 peut se substituer à JavaScript dans de certains cas ...

Histoire du JavaScript

Il ne faut pas confondre JavaScript avec Java. Brendan Eich (photo ci-contre) s'est inspiré de Java pour créer JavaScript en 1995. Ce brillant informaticien travaillait alors pour Nestcape Communication. Donc Nestcape (ancêtre de Firefox) fut le premier navigateur à disposer d'un interpréteur JS. Le langage fut ensuite standardisé sous le nom d'ECMAScript.

Comparaison JS et PHP

Il s'agit de deux langages de script : langages interprétés. Voilà pour les points communs.
Le langage PHP permet aussi de dynamiser une page mais un navigateur est incapable d'interpréter du code PHP ! Dans le cas d'une page web contenant du PHP l'interprétation est faite par le serveur qui adresse du HTML au navigateur (au client). C'est pour cette raison que l'on parle de programmation "côté client" pour JS et "côté serveur" pour PHP.