Accueil

Traduction

Tutoriel sur JS natif & Vue.js & jQuery.js & Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

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

Introduction à JavaScript (JS)

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. Ainsi vous ne pouvez pas modifiez via CSS, les attributs et contenus des éléments, supprimer des éléments, rajouter des éléments. Par contre toutes ces modifications du DOM sont possibles avec JS.

Une animation réalisée en HTML & JavaScript

Ci-dessous une page web contenant un pachtwork d'images sexy : la boite se remplit de photos miniatures à raison d'une par seconde jusqu'à ce que vous cliquiez sur le bouton de commande qui met fin à la routine d'insertion d'images.

Retrouvez le code de cette animation est en fin de page

Présentation de JavaScript (JS)

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

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.
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 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. Chaque nouvelle version propose des nouveautés qui simplifient la programmation en JS natif rendant souvent le recours aux frameworks JS (tel jQuery) inutile.
Le nom officiel de JS est EcmaScript. La version de 2015 ou version 6 apporte de nombreuses nouveautés pour faire de JS un langage plus puissant mais aussi plus rigoureux. Bref pour corriger progressivement de nombreux défauts ; il faut signaler en effet que la première version de JS avait été développée en 10 jours ...

Des versions antérieures avaient déjà apporté des innovations notables telles les expressions régulières, le formatage des nombres, etc. la gestion des exceptions, etc.
Signalons aussi que la spécification HTML5 introduit différentes API JS qui ont été implémentées par les navigateurs.

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

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

Chapitre sur les API JS

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 simplifliée compte tenu des améliorations apportées par les derniers versions de EMCAScript.
Ils faut signaler en effet que l'interprétation par le navigateur d'un code écrit via un framework est beaucoup plus lente.
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 l'implémentation identique de JS, jQuery reste très utile dans certains domaines : drag & drop, requêtes AJAX, etc.
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

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 souvent 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 inspirée de Python (pas d'accolades et de parenthèses mais indentation). Il faut ensuite compiler en JS natif.
Article sur CoffeeScript

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

Code CSS & HTML

Le script

Si le script est interne à la page ; il doit être à l'intérieur du conteneur SCRIPT.

La fonction "ajout" est appelée chaque seconde via la méthode setInterval(fonction, délai).
Cette méthode retourne un entier qui est récupéré dans la variable "routine".
L'instruction clearInterval(routine) met donc fin au minuteur. Le bouton de commande est alors supprimé.