Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

Tutoriel JavaScript - chapitre introductif

Le langage JavaScript (JS) aura bientôt 30 ans d'existence.
Une page Web créée avec uniquement 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.

Avec CSS vous ne pouvez pas :
• modifier les attributs ou le contenu des éléments
• supprimer des éléments de la page
• définir et insérer de nouveaux éléments dans la page

Par contre toutes ces modifications du DOM sont possibles avec JavaScript.
Le rôle de JS ne se résume pas à la modification du DOM initial. En combinant JS avec HTML & CSS vous pouvez réaliser de véritables applications en ligne telles une calculatrice, une horloge, un composeur de couleurs, des jeux, etc.
Des applications HTML5 & JS-jQuery

Prérequis : pour apprécier pleinement ce tuto sur JS il faut connaitre HTML & CSS. En effet JS a pour mission de palier aux limites de HTML & CSS.

Si vous êtes grand débutant en développement web suivez d'abord le lien ci-dessous :
Débuter en prog. web
Vous trouverez dans ce tuto toutes les notions de base de HTML & CSS.

Une animation réalisée en HTML & JavaScript

Ci-dessous un patchwork de photos sexys.
Ajout chaque seconde d'une nouvelle photo jusqu'à ce que vous cliquiez sur le bouton de commande qui met fin à la routine d'insertion.

Retrouvez le code de cette animation est en fin de page
Vous devriez comprendre le code après une étude complète de ce tuto.

Présentation de JavaScript (JS)

JavaScript est un langage de programmation très populaire. Il est incontournable en programmation web "front-end" ou programmation web "côté client" ; un script "tourne" dans le cadre d'un navigateur (Chrome, FireFox, Edge, etc.).

Définition de JS

JS 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.

Un langage événementiel

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

Un langage orienté objet

Le langage comprend des objets natifs avec propriétés et méthodes voire des sous-objets. Mais on peut créer ses propres objets avec attributs et méthodes.

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.
Ce langage a été standardisé à partir de 1997 par un organisme intitulé ECMA. D'ailleurs le nom officiel de JS est ECMAScript.

La version de 2015 (ou version 6) a été une évolution capitale de JS.
Les innovations apportées par les versions ultérieures sont plus modestes mais les révisions sont désormais annuelles. La dernière version est ECMAS12 ou 2022.
Signalons aussi que la spécification HTML5 introduit différentes API (Application Programming Interface) qui ont été implémentées par les navigateurs : Canvas, geolocation, webStorage, etc. Chaque API propose une bibliothèque de méthodes de haut niveau écrites en JS.

Historiquement JavaScript ne fonctionnait que dans le cadre d'un navigateur (langage 'côté client').
Désormais grâce à l'environnement Node.js il peut fonctionner directement à partir du système d'exploitation comme un langage 'côté serveur' (donc à la place de PHP ou de Python).
Introduction à Node.js

La galaxie JavaScript

On ne compte plus les frameworks JavaScript, les API écrites en JS, les préprocesseurs JavaScript. Il est impossible de les citer tous ...
Et il y a bien sûr la plateforme de développement côté 'serveur' : node.js. et tous les utilitaires qui s'y rattachent.

Les API Web côté client

Une API web simplifie considérablement le développement "front-end" en proposant des objets et des méthodes haut niveau écrites en JS.

On peut classer les API web en deux catégories :
• les API qui font partie de la spécification HTML5 et qui sont implémentées dans les versions récentes des navigateurs
• les API dites tierces qui doivent être chargées.

Chapitre sur les API web côté client

Compte tenu de son importance, l'API Canvas (qui permet de dessiner dans une page web) fait l'objet d'un tuto dédié : API Canvas pour dessiner dans une page

Une API fort utile : API HTML5 "drag & drop".
Une alternative au drag & drop de jQuery

Les frameworks JavaScript

Vanilla.js

Allez sur le site officiel (http://vanilla-js.com/), téléchargez le framework et vous récupérez un fichier qui pèse ... 0 octet.
Vanilla.js c'est en effet une plaisanterie ; ce framework n'existe pas !
Les auteurs de cette blague veulent dénoncer le recours systématique à des frameworks JS alors que selon eux, la programmation en JS natif est désormais possible compte tenu des améliorations apportées par les différentes versions.
Par ailleurs le recours à un framework ralentit la vitesse d'exécution du script.
Un bon article sur Vanilla

Le framework historique jQuery

C'est le premier des frameworks JS et il était incontournable tant que les navigateurs n'avaient pas implémenté de façon identique le DOM ; donc programmer en JS natif était alors un casse-tête d'où le recours à jQuery.
Même en déclin, car fortement concurrencé par une nouvelle génération de frameworks mais aussi par la standardisation de JS natif, jQuery reste très utile dans certains domaines tels le drag & drop, les requêtes AJAX, la sélection d'éléments.
Mon tuto sur jQuery

Nouvelle génération de Frameworks JS

Il s'agit de Vue JS, React JS & Angular JS. pour ne citer que les plus célèbres.
Ces frameworks sont dits SPA (Single Page Application) c'est à dire qu'ils permettent de réaliser des applicatifs web tenant en une seule page.
De plus les scripts écrits avec ces frameworks produisent un HTML réactif : liaison automatique et birectionnelle entre le HTML et le script.
Mon tuto sur Vue.js

Les langages dérivés du JavaScript

Je vais évoquer ici deux langages : TypeScript & CoffeeScript.
L'objectif de ces deux langages est de faciliter le développement en JavaScript.

TypeScript de MicroSoft

TypeScript est un langage de programmation libre et open source développé par Microsoft pour corriger certains inconvénients de JavaScript ...
Typscript vise donc à corriger un des gros défaut de JavaScript : l'absence de typage des variables. Cette absence de typage est souvent source d'erreurs d'exécution.
Pour être compris du navigateur, le code TypeScript doit être compilé en JS.
Article sur TypeScript

CoffeeScript

Si vous utilisez coffeeScript vous pouvez écrire un script avec la syntaxe inspirée de Python et Ruby : pas d'accolades et de parenthèses mais recours à l'indentation.
On dit que le langage ajoute du "sucre syntaxique" : donner au programmeur des possibilités d'une écriture plus succincte et plus intuitive.
Il faut ensuite compiler en JavaScript !
Vidéo sur CoffeeScript

Comparaison CoffeeScript et JS : calcul de l'IMC (Indice de Masse Corporelle) de paul. L'IMC doit être compris entre 18.5 et 25.
En JavaScript :

let masse = 72;
let taille = 1.8;
let IMC = masse/taille/taille;
if ((18.5 < IMC) && (IMC < 25)) 
{
    alert('Paul a une corpulence normale');
}

En CoffeeScript :

 
masse = 72
taille = 1.8
IMC = masse/taille/taille
if 18.5 < IMC <25 then alert '¨Paul a une corpulence normale'

Le code est beaucoup plus succinct et lisible en CoffeeScript.

Annexe : le code de l'animation sexy de cette page

Ci-dessous le code CSS, HTML et le script de l'animation sexy de début de page.

Vous noterez le partage des rôles entre CSS & JS :
• la modification du DOM est l'affaire de JavaScript
• par contre l'effet zoom et son passage en premier plan de l'image cliquée, c'est tout simplement du CSS avec une simple règle de style : img:active {transform : scale(3); z-index : 100;}

Code CSS & HTML

Le script

À l'intérieur du conteneur SCRIPT dans la page.

...
function ajout()
{
	var x ; var y; 
	x =Math.floor(Math.random()*90);
	y =Math.floor(Math.random()*300);
	x =x +"%"; 
	y=y+"px";
	var patchwork =document.querySelector("#patchwork");
	var image= document.createElement("img");
	var reel = Math.random() ;
	var entier = Math.ceil(reel*36) ; 
	switch(entier)
		{
		case 1 : image.src ="../images/bikini.jpg" ; break;
		case 2 : image.src ="../images/bikini1.jpg" ; break;
		...
		case 35 : image.src ="../images/bikini34.jpg" ; break;
		case 36: image.src ="../images/bikini35.jpg" ; break;
		} // fin switch 
	image.style.left =x; 
	image.style.top = y;
	patchwork.appendChild(image);
} // fin fonction ajout
var routine = setInterval(ajout,1000); 
...

La fonction "ajout" est appelée chaque seconde via l'instruction : var routine = setInterval(ajout, 1000).
L'instruction clearInterval(routine) met donc fin au "minuteur" ; le bouton de commande est alors supprimé.

Concernant la fonction "ajout" on distingue les étapes suivantes :
• génération aléatoire de la position absolue de la future image : initialisation des variables x & y
• création d'un nouvel élément de type IMG avec document.createElement("img")
• génération aléatoire de la source de la nouvelle image : génération d'un entier entre 1 et 32 puis boucle switch avec 36 "case"
• insertion du nouvel élément IMG dans le DIV référencée "patchwork" : patchwork.appendChild(image)