Le langage Javascript est exécuté coté client, cad par le navigateur web. Au chargement d'une page web le navigateur charge le HTML, puis charge des  ressources qui sont nommées dans ce html (css, image, etc) et affiche la page avec son moteur de rendu. La page peut déjà être interactive car elle peut etre scrollable, les formulaires peuvent être modifié/remplis et le CSS peut varier (par exemple avec le sélecteur :hover quand la souris rentre/sort par dessus un élément). Toutefois ces interactions ne permettent pas de faire des applications aussi interactives que des application dites natives (mac/linux/windows).  Javascript va permettre de s'abonner à presque tous les évènements possibles engendrés par l'utilisateur (souris, clavier, accéléromètres) et d'y réagir. Dans cette partie nous allons surtout voir les entrées (évènements) car Javascript ne peut pas accéder au disque dur du client et/ou une base de donnée ET nous verrons dans la partie JQuery comment modifier la page web (et donc le rendu) et dans la partie AJAX comment accéder au réseau. Pour illustrer cette partie nous n'utiliserons que 2 sorties Javascript : 

  • console.log("Hello") qui affiche du texte dans la console (En espérant que vous savez ouvrir et regarder la console de votre navigateur web)
  • alert("world") qui ouvre une fenêtre modale, affiche le message et bloque l'exécution Javascript tant que l'utilisateur n'a pas cliqué "OK"  

Pour inclure du script javascript dans une page web 2 possibilités s'offrent à nous

  • inclure le tag <script>console.log("hello");console.log("world");</script> n'importe où
  • inclure le tag <script src="main.mjs"></script> n'importe où ... mais plutôt à l'intérieur de la partie invisible <head>...</head> en haut de la page web

Un script javascript (ici main.js) ne PEUT PAS inclure un autre script javascript (enfin pas facilement et sans tricher) et donc les pages web pourront commencer par une grande ribambelle de scripts et de librairies à inclure (dans le bon ordre SVP !). Exemple :

<script src="libraries/p5.min.js"></script>
<script src="libraries/rhill-voronoi-core.min.js"></script>
<script src="libraries/simplex-noise.js"></script>
<script src="libraries/jquery-3.1.1.js"></script>
<script src="libraries/rhill-voronoi-core.js"></script>
<script src="alea.js"></script>
<script src="libraries/d3-polygon.min.js"></script>
<script src="libraries/d3-delaunay.js"></script>
<script  src="voroStains.js"></script>

Bon le prochain concept à voir n'est pas évident MAIS très important. JAVASCRIPT n'est pas multi-threadé mais le navigateur oui. Ca veut dire que dans l'exemple ci dessus le navigateur peut mettre plusieurs ressources à charger en même temps (des images, des scripts à télécharger) mais quand du code à l'intérieure d'une balise s'exécute AUCUN autre code ne s'exécute en même temps. Si un script a fini de se télécharger ou si un évènement arrive (ie click souris) il est mis en attente dans une liste de code à exécuter plus tard. 

Corollaire : si vous faites une boucle infinie en javascript vous freezez la page ? vous ne freezez pas le/les telechargement en cours, dans certains navigateur vous ne freezez pas l'affichage mais ce qui est certain c'est que vous freezez l'interaction de la page pour de bon. Ce qui est sur c'est que vous ne freezez pas les autre pages web et/ou les autres onglets (OUF). Qu'est ce qu'on peut faire alors

  • fermer l'onglet gelé
  • ouvrir le gestionnaire de tache du navigateur (si si ça existe et ce n'est pas le gestionnaire de tache de l'OS)  et tuez le script fautif 
  • si les outils de développement sont ouverts dans l'onglet "Source" vous avez des boutons pour arrêter/reprendre l'exécution et qui affiche en plus la stack qui permet de voir a quel endroit du code l'exécution est bloquée 

debugger JS

A : Sous A1 et A2 les boutons qui permettent d'arréter le code (ou de faire qu'il s'arrete en passant sur une ligne ou lors d'un plantage)

B : La stack nous dit que c'est a la ligne 20 de untitled.html

C : surligné en vert la fameuse ligne 20 qui est dans une boucle de 100000 itérations

D : la console ou l'on voit que je suis bloqué quand i valait 57255 

Bon voilà, il vous faudra manipuler un peu ce puissant outil de debugage qui vient avec votre navigateur Web mais ça sera essentiel pour progresser dans cette matière. Il nous reste 2 choses importantes à voir : les événements auxquels peut réagir javascript et le langage lui-même. Le langage est comme PHP assez proche du langage C/C++. Encore une fois c'est la même famille. Comme PHP, Javascript n'a pas de type statique. Une même variable peut etre tour à tour un nombre, un string ou un booléen. Par contre contrairement à PHP les noms de variables ne doivent pas forcément commencer sur le signe $. Du coup javascript aura du mal à détecter les nouvelles variables qui apparaisssent dans votre code et il faudra déclarer vos variables et vos fonctions. Comme en PHP les fonctions se déclarent avec le mot clé "function". 

Par contre les variables peuvent être déclarées par trois mot-clé : var ,let et const. A chaque fois la déclaration peut etre suivie d'une affection comme en C/C++. Vous trouverez beaucoup beaucoup de codes javascript qui n'utilisent que le mot-clé var. C'est l'ancienne solution qui a posé tellement de problèmes qu'il a fallu créer const et let. Voyons les trois et pourquoi 99% du temps var devrait etre remplacé par const ou let. 

  • var i =0; déclare une variable i POUR TOUTE LA VIE DE JAVASCRIPT. Si ensuite un autre bout de code utilise i il aura comme valeur de départ celle que vous avez laissé. Si vous pensez pouvoir utiliser i plus tard en récupérant la valeur que vous y avez mise vous vous trompez. L'autre bout de code (une librairie, une fonction callback sur un bouton) a très bien pu changer la valeur. Et devinez quoi le nom "i" est très commun en programmation !!!
  • let i=0; est beaucoup mieux. Il déclare une variable locale qui ne restera que dans le bout de code actuel (une fonction, une paire d'accolades). Ca veut aussi surtout dire que si un autre i avait été déclaré avant/ailleurs la nouvelle variable i ne la remplace pas. Elle la cache seulement le temps de votre bout de code et l'autre variable i reviendra quand javascript sortira de votre bout de code (une fonction, une paire d'accolades)

Dans le code suivant

let i = "fred";
for (let i=0; i<10000; i++){
  console.log("OK "+i)
}
console.log(i);

la boucle for affiche 10000fois des "OK 1", "OK 2", "OK 3" puis à la fin affiche "fred" car une fois sorti de la boucle, la variable i qui valait des nombres disparait et elle arrête de cacher la variable i qui valait une chaîne de caractères   

  • const i=0; marche pareil que let i=0; mais on ne pourra plus changer la valeur de i

C'est donc une sécurité, un garde-fou. Si le code plante sur "Uncaught TypeError: Assignment to constant variable." à vous de choisir entre 

  • Ne pas changer la valeur
  • Changer la declaration const en let

Avant de voir les évènements il nous reste à voir une autre subtilité de Javascript. Javascript est un langage à la fois impératif, objet et fonctionnelle !!! Alors que vous remonte tous les traumatismes du L1(Prog impérative) de L2 (Prog Objet) et du premier semestre de L3 (PFA) qu'est ce que ca veut dire ?

Ca veut dire que n'importe quelle variable (déclarée avec var, const ou let, paramètre de fonction ou retournée par une fonction ) peut etre un objet ou une fonction.

<! doctype html>

<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <script>

    function init(){
      let el = document.getElementById("mabellediv");
      el.addEventListener("click", function(){console.log("merci d'avoir cliqué")}, false);
    }
    function verifiePrenom(newPrenom){
      console.log("quelqu'un pretend s'appeler "+newPrenom);
    }

    setTimeout(function(){console.log("coucou")}, 4000);

  </script>
</head>
<body onload="init()">
  Bonjour le monde
  <div>
    Entrez votre prénom :<input type="text" name="prenom" onchange="verifiePrenom(this.value)"><br>
  </div >
  <div id="mabellediv">fred</div>
</body>
</html>

Les Évènements 

Regardez bien l'exemple ci-dessus et tachez de voir quels évènements peuvent bien déclencher quel javascript. Il existe 2 mécanismes principaux. Au niveau des balises on peut rajouter onTruc="bidule()". Ca veut dire que lorsque la navigateur reconnaît que l'évènement truc il exécute le code qui est entre guillemet. On aurait pu mettre n'importe quel code avec pleins d'instruction séparées par des ; mais le HTML est déjà pas mal encombré. Le mieux est donc d'appeler juste une fonction pour ne pas trop encombrer le HTML. Ce qu'il y a à savoir c'est que entre ces guillemets on a accès a la variable this qui représente la balise. Si le code javascript doit modifier la balise qui a initié l'évènement on en aura besoin. On peut passer this en paramètre de la fonction que l'on appelle et récupérer la valeur de la balise dans l'argument de la fonction qu'on aura déclarée. On peut aussi n'avoir besoin que de la valeur (this.value )de cette balise ou que de son id(this.id). On pourra choisir de ne passer en argument que le strict nécessaire. Tant que nous y sommes, il y a un autre objet qui existe entre ces guillemets et qui nous sera parfois utile, il s'appelle event et représente l'évènement. Quelles informations et fonctions importantes sont dans la balise et dans l'évènement ? C'est une bonne question mais le mieux c'est de les passer en paramètre et de les afficher dans la console pour voir ce qu'ils ont dans le ventre.

 <!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <script>
    function checkme(tag, event){
      console.log(tag)
      console.log(event)
    }
  </script>

</head>
<body>
  Entrez votre prénom :<input type="text" name="prenom" onchange="checkme(this, event)"><br>  </div >
</body>
</html>

Ah le boulet de prof a oublié de mettre des points virgules à la fin des lignes de code javascript !!! Même pas ! Figurez vous que javascript prend un retour à la ligne comme un ; En tout cas ça affiche bien des choses dans la console :

Outre le tag(la balise) et ses attributs on affiche event. On voit dans son __proto__ toutes les belles fonction qu'on pourrait appeler dessus. J'attire votre attention sur 2 fonctions importantes event.stopPropagation() et event.preventDefault(). En effet elles sont utiles pour court-circuiter tout un tas de comportements par défaut du web. 

Un évènement important à connaitre est le onload sur le body (voir exemple en dessus). En effet cet évènement se lance que quand toute la page est finie de se charger DONC quand toutes les balises sont en place. C'est important pour la seconde façon de s'occuper des évènements. En effet comme vous avez pu le voir plus haut Javascript peut aussi abonner dynamiquement du code à un évènement avec addEventListener(...) mais pour cela il faut avoir un pointeur vers le noeud/tag/balise sur lequel on veut s'abonner. Je voulais attendre de vous montrer JQuery qui est plus pratique pour cela mais vous voyez qu'un petit coup de document.getElementById("mabellediv") marche aussi. JQuery permettra aussi de modifier facilement les balises, les styles et permet aussi de s'abonner d'une troisième façon aux évènements. 

Enfin il y a setTimeout(function(){console.log("coucou")}, 4000);qui permet à javascript d'appeler une fonction au bout de n(=4000) millisecondes. Comme javascript n'est pas multi-threadé (enfin sans bidouille) cela permet de déclencher du code (comme les Timer en java). Il y a aussi setInterval() dans la même veine qui va déclencher des évènements à intervalle régulier (plus que un).

Javascript permet aussi de faire tout cela et pour les cas simples c'est même plus rapide. Les adeptes du javascript ont toutefois beaucoup de mal à convaincre les adeptes de tel ou tel framework que le JS pur c'est bien aussi, du coup il ont inventé un fake framework : VanillaJS qui ne fait rien. En montrant des exemples et des benchmarks de performance ils arrivent parfois à convaincre des brebis égarées de revenir vers le javascript pur. Les développeurs web ne jurent au final que par un seul mantra : "Je cherche du code qui fait ce que je veux avec Google, je copie-colle les codes que je trouve dans mon code en adaptant un peu, si ça marche je ne touche plus à rien".  Vous trouverez beaucoup de codes sur internet et beaucoup d'exemple utiliseront telle ou telle librairie. Si à chaque fois que vous récupérez un bout de code vous devez importer une librairie vous aurez au final un code monstrueux qui importe beaucoup de choses, qui est long à charger, lent à s'exécuter et que les utilisateur fuiront. Mais le pire c'est encore d'utiliser une super librairie que vous utilisez à pleins d'endroits stratégiques dans votre application web ... puis un jour les développeurs de cette super librairie arrêtent de la mettre à jour, les navigateurs continuent d'évoluer (enfin pas toujours à Redmond) et les librairies ne fonctionnent plus ou mal ou mal avec une autre librairie dont vous avez besoin. Moi je vous propose de voir JQUERY car elle est TRES utilisée (peu de risque qu'elle devienne obsolète à moyen terme) et qu'elle réutilise le savoir-faire des sélecteurs CSS qui sont tres pratiques.

Last modified: Friday, 31 January 2025, 9:35 AM