Traduction
Tutoriel sur Javascript
Recherche dans ce tuto
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Un développeur web full stack doit maitriser de nombreux langages dont le JavaScript qui est le langage de programmation web "côté client".
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 encore limitées et
ne concernent de toute façon que le style.
Par contre avec JavaScript(JS) vous pouvez modifier en profondeur le DOM initial de la page web.
Les autres utilisations pratiques de JS sont multiples.
Ci-dessous un document HTML dans un Iframe.
La source (valeur de l'attribut SRC) de l'élément IMG est modifiée lorsque survient un événement relatif à cet élément :
survol, clic, double-clic, fin du survol.
Suivez les instructions affichées sous l'image !
Pour info, extrait du code de cette page web :
En fonction de l'événement l'élément IMG change de source !
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.
JavaScript est un langage de programmation complet proposant des structures de données complexes, des tests, des boucles, etc.
Des applications HTML5 & JS-jQuery
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 qui vous nécessaires avant d'aborder la programmation
en JS.
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.
Donc en Javascript on peut modifier profondément le DOM initial.
Modifier le DOM avec JS
JavaScript est un langage de programmation très populaire. Il est incontournable en programmation web "front-end" ; on dit aussi programmation web "côté client" ou "côté navigateur".
JS est un langage de programmation de scripts, événementiel et orienté objet.
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) et de structures de données complexes (tableau indicés, "sets", etc.).
Dans JS les outils pour les entrées/sorties sont basiques mais il y a les formulaires HTML ...
Quant à la mise en forme pensez aux classes définies en CSS ...
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.
Le code est à l'écoute d'évènements (un clic sur un élément, par exemple).
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.
Le langage comprend de nombreuses classes natives avec propriétés et méthodes voire des sous-objets.
On peut bien sûr créer ses propres classes.
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.
JavaScript a longtemps été un langage décrié car il variait selon les navigateurs ...
JS 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 avec beaucoup de nouveaux outils
qui simplifient considérablement le travail du développeur "front end".
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 JS peut fonctionner
directement à partir du système d'exploitation donc comme un langage 'côté serveur' (à la place de PHP ou de Python).
Introduction à Node.js
On ne compte plus les frameworks JavaScript, les API auxquelles on accède via 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.
Une API web simplifie considérablement le développement "front-end" en proposant des objets et des méthodes haut niveau. Ce sont quelque sorte des extensions du navigateur ; on accède aux fonctionnalités d'une API via une routine JS.
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
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 plaisanterie veulent dénoncer le recours systématique à des frameworks JS alors que selon eux, la programmation
en JS natif est désormais beaucoup plus simple 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
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
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
Si vous voulez produire de superbes formules mathématiques dans un document HTML sans prise de tête, faites
appel à un micro framework tel que ASCIIMathML.js.
Ainsi un 'template string' générera du code en MathML.
Générer du HTML avec JS - les templates strings
Je vais évoquer ici deux langages : TypeScript & CoffeeScript.
L'objectif de ces deux langages est de faciliter le développement en JavaScript.
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
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.
Traditionnellement les scripts JS sont interprétés par le navigateur. On dit que JS tourne "côté client".
Le logiciel node.js a révolutionné l'emploi de JS qui peut désormais être utilisé comme langage
"côté serveur" donc à la place de PHP, JAVA, etc.
jQuery et Vue sont deux framework JavaScript qui sont présentés sommairement dans ce tuto.