Tutoriel JavaScript & jQuery - sommaire

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

Attention le drag & drop et les requêtes AJAX ne sont pas évoqués dans le cadre du JS natif mais dans celui du JS-jQuery (deuxième partie de ce tuto) :
• jQuery UI - drag & drop
• jQuery & AJAX

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 nouveaux éléments IMG dans un DIV.
Retrouvez le code de cette animation

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.
Deuxième exemple : si vous voulez créer dans une page, un dessin vectoriel animé ; utilisez le framework 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 ; utilisez alors l'API Canvas.

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 cependant, à la fin de ce chapitre une présentation sommaire de cet outil.

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

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.

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 souvent le recours aux frameworks inutile.

Prenons quelques exemples de nouveautés intéressantes :
• les tableaux "clé-valeur" (objet "map")
• nouvelles méthodes de ciblage des éléments de la page : querySelector & querySelectorAll de l'objet document
• méthodes de l'objet classList
• mots clés let & const
• structure "set" (liste sans doublons possibles)
• constructeurs de formats pour affichage des dates et nombres
• etc.

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 moins 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 : n'est 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 ou 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.

Limites du JavaScript

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 ; le code contenu dans ce conteneur sera affiché uniquement si JS est désactivé par le navigateur.

La galaxie JavaScript

On ne compte plus les frameworks JavaScript, les API écrites en JavaScript, 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 JavaScript

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

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

Parmi les API faisant partie de la spécification HTML 5 citons, entre autres :
• API WebStorage qui est une alternative aux cookies et variables de session PHP. Lien : API WebStorage
• API Canvas Selectors & geolocation. Lien : API Canvas, selectors & geolocation

Quant aux API tierces, souvent proposées par Google, citons Google Maps, Google Translate, Google Charts, etc. Lien : Des services en ligne gratuits

Les frameworks JS

Commençons par Vanilla.
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 derniers versions de EMCAScript.
Ils font remarquer à juste titre, que l'interprétation par le navigateur d'un code écrit via un framework est beaucoup plus lente.
Ils proposent, par exemple, de combiner JS avec CSS version 3 pour réaliser des effets visuels ("show/hide", "fade" et "slide") plutôt qu'avec les méthodes de jQuery.

Un bon article pour se passer de jQuery
Cependant jQuery reste très utile dans certains domaines : drag & drop, requêtes AJAX, etc.

Sachez qu'il existe d'autres frameworks JS concurrents de jQuery. Citons vue, react & angular.

Même en déclin et concurrencé, jQuery reste encore le leader des framewoks JS.
La deuxième partie de ce tuto consacre quelques chapitres à ce framework : le framework jQuery

En fin de ce chapitre introductif vous trouvez une présentation sommaire du framework qui a le vent en poupe : Vue.js

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 créez donc un serveur web, vous pouvez vous connecter à une base de données, etc.

Testez la syntaxe JS dans l'invite de commandes

Quelques commandes à saisir dans la l'invite de commandes : C:\Users\boulanger>node -v v18.13.0 C:\Users\boulanger>node Welcome to Node.js v18.13.0. Type ".help" for more information. > function multi(a,b) {return a*b; } undefined > multi(10,15) 150 > multi(5,8) 40 >

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 : C:\Users\boulanger>cd documents\prog_js C:\Users\boulanger\Documents\prog_js>node test.js afficher les pairs de 1 à 100 2 4 6 8 10 12 ...

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" : console.log("afficher les pairs de 1 à 100"); for (var i =2; i <=100; i+=2) console.log(i);

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" : var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/');

Exécutez ce programme à partir de l"invite de commande en tapant : "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'URL ; 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

Ce que je viens d'écrire sur Node.js est une introduction, une mise en bouche ...
Sur la "toile" vous trouverez de bons tutos dont celui en lien ci-dessous :
Un bon tuto sur Node.js
Personnellement je reste fidèle à PHP car je trouve que c'est plus simple :
Initiation à un langage web côté serveur : PHP
Maintenant il s'agit d'une opinion toute personnelle qui n'engage que moi.

Les langages dérivés du JavaScript

Il s'agit de préprocesseur JS. Il faut en effet compiler le code obtenu en JS natif, exécutable par le navigateur.

TypeScript est un langage de programmation libre et open source développé par Microsoft pour améliorer le développement en JavaScript.
Ainsi dans le cadre d'un script en Typescript les variables doivent être impérativement être typées.
Typscript vise donc à corriger un des gros défaut de JavaScript : l'absence de typage des variables. Cette absence de typage est source d'erreurs d'exécution.
Pour être compris du navigateur, le code TypeScript doit être compilé en JS natif.
Article sur TypeScript

Si vous utilisez le préprocesseur coffeeScript vous pouvez écrire un script avec la syntaxe Python (pas d'accolades et de parenthèses mais indentation). Il faut ensuite compiler en JS natif.
Article sur CoffeeScript

Présentation sommaire de Vue.js

Il s'agit d'un framework front-end qui permet la manipulation automatique du DOM par insertion de variables dans le HTML.

Exemple de page avec un script écrit en partie avec Vue

Le HTML :
Le framework est chargé à partir d'un CDN (plateforme hébergeant des outils de développement).
Notez le conteneu de la balise H4 : le terme "titre" entouré d'une paire double d'accolades. Cette balise H4 est contenue dans un DIV identfié "info".

Le script :
J'affiche la version de Vue.js dans la console.
Puis je crée une instance de type Vue via le constructeur Vue().
Cette instance de Vue se nomme "instance" !

Deux paramètres à passer dans le constructeur :
• el (comme élément) ayant pour valeur un sélecteur CSS et qui cible l'élement du DOM concernée par l'objet Vue. Ici c'est la boite DIV identifiée par l'iD "info".
• data qui indique les variables à utiliser dans le DOM. Ici il n'y a qu'une variable nommée "titre" et qui contient la chaine : "Premère page gérée par Vue".

Donc automatiquement, la balise H4 va avoir pour contenu celui de la variable titre.

Le rendu

Activez la console du navigateur !
Tapez l'instruction : instance.titre ="Vue un framework JS hyper réactif"
Observez ! Le contenu de la balise H4 a changé.

Il y aura prochainement dans ce tuto JS quelques pages d'initiation au framework Vue.js.
Je présenterai entre autres les directives, les composants.