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

Présentation JavaScript

Nouveautés dans ce tutoriel :
• initiation à Vue.js
• introduction à Node.js

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 les attributs et contenu des noeuds, supprimer des éléments, rajouter des éléments. Par contre tout cela est possible avec JavaScript. On dit qu'il manipule le DOM !

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.

Le code de cette animation est en fin de page

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.

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.

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.

Limites du JavaScript

Pendant longtemps JS ne pouvait fonctionner que dans le cadre du navigateur ; c'était un langage orienté "client".
Il était impossible d'interroger une base de données avec ce langage. Aussi les développeur web dévaient utiliser en plus de JS un langage orienté serveur tel PHP.
Ces limites sont désormais levées grâce à l'environnement Node.js qui permet d'utiliser JS côté serveur.
Mon tuto sur Node.js
Cependant la programmation dans Node n'est pas forcément très simple et s'avère assez déroutante pour un développeur habitué à PHP ...

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 souvent inutile.

Prenons quelques exemples de nouveautés trè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
• et bien sûr Node.js pour développer côté serveur

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 :
• les API web 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 car non implémentées nativement

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 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 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.
Même en déclin, car fortement concurrencé par une nouvelle génération de bibiothèques 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 tenant en une seule page.
De plus les scripts écrits avec ces frameworks produisent un HTML réactif.
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 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

Le code de l'animation sexy de cette page

Ci-dessous le script qui produit l'animation coquine située en début de page. ... <style> div {position : relative ; margin : auto;} img {position : absolute; width : 10%;} </style></head> <body> <div id ="eau" style = "width : 100% ; height : 500px ; background : aqua ; "> </div> <button onclick ="clearInterval(routine);this.remove();" >Mettre fin à la routine de génération d'images</button> </body> <script> function ajout() { var x ; var y; x =Math.floor(Math.random()*90); y =Math.floor(Math.random()*300); x =x +"%"; y=y+"px"; var parent =document.querySelector("#eau"); var image= document.createElement("img"); var reel = Math.random() ; var entier = Math.ceil(reel*25) ; switch(entier) { case 1 : image.src ="../images/japonaise_nue.jpg" ; break; case 2 : image.src ="../images/black_nue.jpg" ; break; case 3 : image.src ="../images/seins_nus.jpg" ; break; case 4 : image.src ="../images/noire_bikini.jpg" ; break; case 5 : image.src ="../images/latino_bikini.jpg" ; break; ... case 24 : image.src ="../images/bikini27.jpg" ; break; case 25 : image.src ="../images/bikini28.jpg" ; break; } // fin switch image.style.left =x; image.style.top = y; parent.appendChild(image); } // fin fonction ajout var routine = setInterval(ajout,1000); ...

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.

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 :document.createElement("img")
• génération aléatoire de la source de la nouvelle image : génération d'un entier entre 1 et 25 puis boucle switch avec 25 "case"
• insertion du nouvel élément IMG dans la boite : parent.appendChild(image)

De façon plus générale ce script modifie le DOM de la page.
Modifiez le DOM via JS