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. Vous ne pouvez pas modifiez via CSS et c'est logique, les attributs et contenu des éléments, supprimer des éléments, rajouter des éléments. Par contre c'est possible avec JavaScript !

Une animation réalisée en HTML & JavaScript

Ci-dessous un pachtwork : la boite se remplit de photos miniatures (et sexy) à raison de 2 par seconde jusqu'à ce que vous cliquiez sur le bouton.

Cette animation consiste à modifier le DOM initial de la page : création et insertion de nouvelles images dans la grande boite.
Retrouvez le code de cette animation dans le chapitre "manipuler le DOM avec JS"

Objet du tuto "JavaScript

Le monde JavaScript propose des centaines de frameworks contenant des fonctions de haut niveau.
Ainsi, pour prendre un premier exemple, programmer un "drag and drop" (glisser-déposer) en JavaScript pur 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().
Deuxième exemple : si vous voulez créer dans une page, un dessin vectoriel, utilisez la librairie JavaScript Snap SVG qui génère du code SVG à partir d'un script.
Troisième exemple : si vous voulez produire dans une page un dessin matriciel (statique ou animé), utilisez alors la bibliothèque Canvas. Canvas fait partie de la norme HTML 5 et est donc implémentée chez tous les navigateurs récents.

Désormais JavaScript peut être utilisé côté serveur grâce à Node.js. Maintenant j'avoue que je préfère utiliser PHP. Vous trouverez cepandant, à la fin de ce chapitre une présentation sommaire de ce framework.

L'utilisation du framework jQuery peut faciliter dans de nombreux domaines la programmation en JavaScript. Cependant les effets visuels peuvent désormais être réalisés en combinant JS pur et CSS 3.

L'API Canvas (écrite en JS) fait l'objet d'un tutoriel spécifique : API Canvas

Le Framework Snap SVG est traité dans le tuto "dessiner avec SVG" : débuter en Snap SVG

Présentation de JavaScript

JavaScript est sans doute le langage de programmation le plus populaire.

Définition de JavaScript (JS)

JS est un langage de programmation de scripts, événementiel et orienté objet.
Développons ces trois points.

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 (et pour chaque classe des méthodes et propriétés).
Mais on peut créer ses propres objets.

Rôle du JavaScript (JS)

JavaScript c'est initialement langage de programmation pour le web (compris que par un navigateur).
Avec JS on peut animer non seulement des éléments HTML mais aussi des objets SVG.
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.

Histoire du JavaScript (JS)

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.
JavaScript est un langage qui bonifie en vieillisant. Chaque nouvelle version propose des nouveautés qui simplifient la programmation en JS pur, rendant le recours aux frameworks JS inutile.

Le problème avec JS est que des outils identiques s'empilent car JS est rétrocompatible ou presque ...
Ainsi pour extraire une sous-chaine d'une chaine il existe pas mois de 3 méthodes : substr(), substring() & slice() correspondant à des versions différentes de ECMAScript. Ces trois méthodes ne sont pas complétement identiques ...
La méthode substr() est dépréciée : plus interprétée par les navigateurs
Un conseil : privilégiez la méthode la plus récente slice() et oubliez les autres ...

Ci-dessous lien vers un article relatif aux fonctionnalités dépréciées et obsolètes : Ne plus utiliser en programmation JS !

Comparaison JS et PHP

Il s'agit de deux langages de script : langages interprétés.
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.
Un code PHP sera toujours interprété ce qui n'est pas le cas du JS. Voir ci-dessous.

Limites du JavaScript (JS)

JS ne peut pas s'interfacer avec une base de données (sauf utilisation de Node.js). Donc si vous souhaitez développer un site avec une base de données vous devrez utiliser PHP qui appelera des requêtes SQL.

Sachez aussi que JS peut être désactivé par le navigateur. Dans ce cas les scripts de la page ne seront pas exécutés ... Il est donc conseillé de toujours intégrer la balise NOSCRIPT dans la partie HEAD d'une page.

Code à insérer dans chaque page contenant des scripts ou en lien avec des scripts :

Le navigateur affiche le message à l'intérieur de NOSCRIPT uniquement si JavaScript est désactivé.

A propos de Node.js

A l'origine le code JS ne pouvait être interprété que par un navigateur.
Node.js est une plateforme en JavaScript qui permet, entre autres, d'éxécuter du code JS à partir de l'invite de commandes.
L'invite de commandes est la console Windows qui permet entre autres de taper des commandes DOS.
Rappel : pour ouvrir l'invite de commandes, tapez cmd dans la zone "recherche" de la barre d'état.

Node.js permet donc d'utiliser JS côté serveur (à la place de PHP).
Avec Node.js vous pouvez créer un serveur web, vous connecter à une base de données, etc.

Testez la synthaxe JS dans l'invite de commandes

Quelques commandes à saisir dans la l'invite de commandes :

J'ai tapé la commande "node-v" pour connaitre la version installée de Node.js.
Puis j'ai saisi la commande "node" pour dire que les commandes qui suivent seront en JS.
Enuite j'ai défini une fonction "multi" (commme "multiplication") qui retourne le produit de deux valeurs.
J'ai appelé cette fonction deux fois.

Exécuter un programme JS dans l'invite de commandes

Commandes saisies :

J'ai changé de répertoire avec la commande DOS "cd".
j'ai saisi ensuite la commande "node test.js" ; test.js est un programme stocké dans le dossier prog_js.

Contenu du fichier "test.js" :

La boucle permet d'afficher les nombres paires compris entre 2 et 100 ; i est en effet incrémenté de 2.

Installation de node.js

L'installation de ce framework JS ne pose pas de problème particulier. Il suffit de se rendre sur le site nodejs.org et de suivre les instructions

Créer un serveur web avec Node.js

Code du programme "hello.js" :

Exécutez ce programme à partir de l"invite de commande : "node hello.js"
Réponse de la console : "Server running at http://127.0.0.1:1337/"
Ouvrez le navigateur ; tapez "http://127.0.0.1:1337/" dans la barre d'adresse ; le message "hello word" s'affiche ...
Pour comprendre ce programme, suivez le lien légendé "un bon tuto sur Node.js". Voir ci-dessous.

Pour en savoir davantage

Je que je viens d'écrire sur Node.js est une introduction, une mise en bouche.
Sur la "toile" vous trouverez de bons tutos.
Un bon tuto sur Node.js