JavaScript

La liste des tâches

À ce niveau du livre, deux langages ont été abordés. Le premier, HTML, permet de structurer l’affichage, et le second, CSS, permet entre autres d’embellir la page. Cela aura permis de se rendre compte qu’il y a peu de choses en commun entre ces deux langages.

Le dernier langage, JavaScript, est lui aussi complètement différent des deux premiers. Par contre, énormément de langages de programmation, comme le C, C++, C#, ou encore Java, PHP ou VBScript (et il y en a d’autres), ressemblent à JavaScript.

Les langages comme JavaScript savent obligatoirement faire trois choses bien précises : mémoriser une information, comparer des valeurs et répéter une action. Par exemple, ils pourront comparer si telle valeur est plus grande ou plus petite que telle autre et agir en fonction du résultat de la comparaison, ou bien ils pourront répéter une action un certain nombre de fois ou bien jusqu’à ce qu’il se passe quelque chose.

Tout ceci est assez simple en fait, il faut juste apprendre à décomposer ce qui doit être fait en petites étapes, et peut-être même décomposer encore ces étapes.

Pour faire une analogie avec la programmation en JavaScript, prenons un exemple de recette de cuisine et voyons comment faire deux œufs au plat.

Pour faire...

Variables et affectation

Les variables sont des petits morceaux de la mémoire de l’ordinateur qui vont stocker une information précise. Cette information pouvant aller d’une valeur numérique ou d’une lettre à la liste complète des habitants d’une grande ville contenant leurs noms, leurs numéros de téléphone, leurs âges, etc. Autrement dit, il est possible de stocker dans une variable des choses simples ou complexes.

Peu importe ce qui est stocké, la syntaxe en JavaScript pour utiliser une nouvelle variable ressemblera toujours à ceci :

var nombreDOeufs = 0; 
var nomDuMarchand = 'Dédé'; 

L’instruction commence par le mot-clé var écrit en minuscules.

Ce mot indique à JavaScript qu’à partir de cette ligne de programme, une nouvelle variable existe, qu’elle se nomme nombreDOeufs et que pour l’instant sa valeur est 0. Ensuite, le programme s’exécutant de haut en bas, une autre variable, nomDuMarchand, est créée. Elle contient, quant à elle, du texte stocké dans l’espace mémoire.

Si ces éléments de programmation s’appellent des variables, c’est parce que leur contenu va pouvoir changer dans le temps, il peut varier.

Les types de variables

var nombreDOeufs = 12; 

var prixDUnOeuf = 0.2; 

var prixDesOeufs = nombreDOeufs * prixDUnOeuf; 

2. Le texte et la concaténation

Du texte peut également être stocké dans une variable. Cela s’écrira alors :

var nom = 'Dupont' ; 
var initiale = "D" ; 

Ce qui caractérise le fait que l’information stockée est du texte, ce sont les simples quotes « ’ » ou les guillemets « " » qui entourent le texte.

Si les simples quotes ou les guillemets sont omis, JavaScript croira que ce qu’il y a à droite du signe = est une autre variable. Par exemple :

var nom =  "Dupont" ; 
var client = nom ; 

Dans ce cas, ce qui est stocké dans la variable client sera la même chose que ce qui est stocké dans la variable nom.

Supposons maintenant une page HTML où il est écrit : « Bonjour Dupont ». En fait, le but serait d’écrire « Bonjour » et ensuite d’afficher le contenu de la variable nom. Cette variable changera d’un cas à un autre. Pour cela, il va falloir réunir le mot « Bonjour », qui est du texte et non une variable, suivi par la valeur de la variable nom. L’opérateur qui permet cela est le symbole +. Lorsque ce symbole est placé entre du texte et une variable, JavaScript va relier l’ensemble, c’est ce qu’on appelle une concaténation.

Un cas pratique serait :

alert("Bonjour " + nom) ; 

Cette ligne de code utilise une fonction JavaScript du navigateur, alert(), qui va ouvrir une fenêtre modale, c’est-à-dire une fenêtre qui bloque l’exécution du programme jusqu’à ce que l’on ferme cette fenêtre en cliquant sur le bouton OK. Elle affichera les informations qui sont écrites entre parenthèses. Si le texte dans les parenthèses est écrit entre guillemets, il sera affiché dans l’alert() tel quel. S’il n’est pas entre guillemets, c’est qu’il s’agit d’une variable et c’est la valeur de cette variable qui sera affichée dans la fenêtre.

Les opérateurs

Un opérateur en JavaScript a pour but de combiner des éléments, que ce soit via de simples formules mathématiques, telles que l’addition ou la soustraction, ou d’autres méthodes plus complexes qui nous permettront de récupérer les chiffres pairs ou de comparer des informations.

Prenons le cas d’un programme en JavaScript contenant une variable resultat qui a la valeur 12 et une variable calcul qui n’a pas de valeur initiale.

var resultat = 12; 
var calcul; 

Avec les opérateurs, nous allons pouvoir effectuer une addition :

var calcul = resultat + 5; 

Après l’exécution de cette ligne, calcul aura donc la valeur de 12 + 5, soit 17.

Il en sera de même pour une soustraction, une multiplication ou une division.

calcul  = resultat - 2; // calcul aura ensuite la valeur 10. 
calcul  = resultat * 3; // calcul aura ensuite la valeur 36. 
calcul  = resultat / 4; // calcul aura ensuite la valeur 3. 

modulo

Un autre opérateur permettant de faire un calcul est l’opérateur modulo. Son symbole est le pourcent (%). Il retourne le reste de la division entière.

var resultat = 13 ; 
var calcul  = resultat % 4 ; 

Si 13 est divisé par 4, le résultat entier est 3, et il reste 1. Avec l’opérateur %, on a donc 13%4 (qui se lit « treize modulo quatre ») qui fait la division par 4 et retourne le reste, soit 1.

Voyons dans un cas pratique comment utiliser l’opérateur modulo.

Positionnons des éléments, une dizaine au total, sur trois colonnes. Notre page est faite de façon à ce que le premier élément soit à la position X = 0, le second élément à la position X = 100 et le troisième à la position X = 200.

Grâce au modulo, il est possible, en connaissant le numéro de l’élément qui est manipulé, de positionner celui-ci dans la première, la deuxième ou la troisième colonne en fonction de ce numéro.

Prenons le cas pour les quatre premiers éléments....

Les conditions

Les conditions sont des tests qui peuvent être demandés à l’ordinateur afin de comparer des éléments. C’est un des points essentiels de la programmation.

var a=5, b=10;  
if (a > b) { 
    alert("a est plus grand que b") ; 
} else { 
    alert("a est plus petit que b") ; 
} 

if (a > b) { 
   alert("a est plus grand que b") ; 
} 

if (a > b)  
    alert("a est plus grand que b") ; 

if (a > b) alert("a est plus grand que b") ; 

Les itérations

L’informatique, terme dérivé des mots « information automatique », est une idée bien agréable vue sous cet angle. Mais pour l’instant, avec ce qui a été vu dans ce livre, s’il faut faire évoluer une variable en l’incrémentant de 1 en 1 et la faire aller jusqu’à 1000, il faudra beaucoup de lignes de code.

Dans tous les langages similaires à JavaScript il existe un concept de boucle, c’est-à-dire de code qui va se répéter pendant un certain temps ou un certain nombre de fois ou jusqu’à ce qu’il se passe une chose particulière. Cela pourra être utile pour déplacer un objet à l’écran, effectuer un décompte, parcourir un tableau, etc.

for (Initialisation; Condition; Incrémentation){ 
    Action;  
} 

for (var compteur = 1; Condition; Incrémentation){ 
    Action; 
} 

for (var compteur = 1; compteur <= 12; Incrémentation){  
    Action;  
} 

for (var compteur = 1; compteur <= 12; compteur++){ 
    Action;  
} 

for (var compteur = 12; compteur >= 1; compteur--){ 
    Action;  
} 

Déboguer un programme

Un dernier point à voir sur les outils que nous proposent les navigateurs aujourd’hui est le pas à pas, c’est-à-dire le fait de pouvoir exécuter notre script mais en demandant au navigateur de s’arrêter à une certaine ligne et d’attendre. Le navigateur n’exécutera la ligne que lorsqu’on lui demandera. Cette technique est très utilisée dans le débogage et est très pratique pour se rendre compte de ce que fait réellement le programme.

Cela ne fonctionne pas pour le CSS ni pour le code HTML. Seul JavaScript peut s’exécuter pas à pas.

Pour pouvoir stopper le script à un endroit précis, il faut se rendre à l’onglet Sources de la fenêtre d’aide au développement.

Il est possible, comme sur la copie d’écran, qu’il y ait une icône sous la barre d’onglets. Cette icône est un bouton permettant d’ouvrir un volet qui donnera accès aux différents fichiers.

On va donc ouvrir ce volet et cliquer sur le fichier que l’on souhaite examiner. Dans notre cas c’est le fichier 1_2_4_base3langages.html. Le code HTML et la partie script apparaissent. On peut voir des numéros de lignes.

Si on souhaite arrêter le programme à la ligne 12, il suffit de cliquer sur la ligne 12. Un petit marqueur apparaîtra qui fera ressortir cette ligne, comme ci-dessous :

Si maintenant on tape au clavier [Ctrl] R (ou [Cmd] R sur Mac), cela va rafraîchir la page. Le navigateur...

Les fonctions

Une fonction est un ensemble de lignes de code qui sont regroupées et auquel on donne un nom, par exemple afficherLeMenu(). Elle peut être écrite dans un fichier avec d’autres fonctions et est utilisable à tout moment, une fois chargée par le navigateur naturellement.

Lorsque le développeur doit faire afficher le menu, plutôt que d’écrire ou réécrire les lignes de code qui affichent le menu, il a juste à appeler la fonction afficherLeMenu().

function afficherLeMenu() { 
    // le code qui permet l'affichage du menu. 
} 

function afficherLeMenu(afficheOuCache) { 
    if (afficheOuCache === true) { 
        // le code qui permet l'affichage du menu. 
    } else { 
        // le code qui cache le menu. 
    } 
} 

var sortie = function(t) { 
    document.getElementById('sortie').innerHTML += "<br />:: "+t; 
}; 

function afficherNom(qui) { 
     console.log(qui); ...

Les cookies

Les cookies sont des informations, un peu comme des variables, mais qui sont sauvegardées dans le navigateur côté client. Ils ont la particularité d’être sauvegardés pendant un temps donné. Les cookies peuvent être utiles pour mémoriser des choix de l’utilisateur, qu’il n’aura plus à définir lors de son prochain passage sur le site.

function cookiesFx() { 
    var dateNum = new Date(); 
    dateNum.setFullYear(dateNum.getFullYear() + 1); 
    var exp = "expires=" + dateNum.toGMTString(); 
 
    document.cookie = "nbShow=" + escape(nbShow) + "; " + exp; 
    document.cookie = "bg=" + escape(bg) + "; " + exp; 
} 

Pour l’utilisation des cookies, il faut prendre en compte deux étapes. La première, ci-dessus, est la création ou la mise à jour des cookies.

C’est grâce au mot-clé expires que sera définie la durée de vie du cookie, une sorte de date de péremption. La variable dateNum, à sa création, récupère la date actuelle. L’appel de la fonction setFullYear va permettre de changer l’année, qui sera augmentée de 1. Les valeurs enregistrées dans le cookie seront donc accessibles pendant un an.

La variable exp contient la concaténation du mot-clé expires, pour indiquer la durée de vie, suivi de la date limite en question.

Ensuite, les deux informations à sauvegarder nbShow et bg seront enregistrées grâce à document.cookie. Il peut...

Le drag and drop

Le drag and drop est l’action de prendre un élément en maintenant le clic de la souris sur lui, de le déplacer et de relâcher le clic pour qu’il finisse dans un autre élément. C’est ce qui est fait lors du déplacement d’un fichier attrapé avec la souris et déposé dans un autre dossier.

Vous pourrez retrouver cet exemple dans le fichier : 5_11_DragAndDrop.html.

<div id="sortie"></div> 
 
<p>Glissez/Lâchez les navigateurs dans une zone<br /> 
    <img src="../img/logos/chrome1.png" 
        id="chrome_ico"  
        ondragstart="dragNav(this, event)"  
        alt="Logo Chrome"> 
    <img src="../img/logos/firefox1.png" 
        id="firefox_ico" 
        ondragstart="dragNav(this, event)" 
        alt="Logo Firefox"> 
    <img src="../img/logos/edge.png"  
        id="edge_ico" 
        ondragstart="dragNav(this, event)"  
        alt="Logo Edge"> 
    <img src="../img/logos/opera1.png"  
        id="opera_ico" 
        ondragstart="dragNav(this, event)" 
        alt="Logo Opera"> 
    <img src="../img/logos/safari1.png"  
        id="safari_ico" 
        ondragstart="dragNav(this, event)" 
        alt="Logo...

Afficher le site HTML en plein écran

Sur la majeure partie des navigateurs, sauf peut-être Internet Explorer, il est possible de passer un objet en plein écran. L’idée est alors de construire le site à l’intérieur de cet élément, de façon à ce que tout passe en plein écran. Un exemple est proposé dans le fichier 5_12_FullScreen.html.

Il faudra naturellement anticiper l’affichage en utilisant des valeurs en pourcent, ou alors mettre à jour certains styles pour que l’affichage reste agréable en plein écran.

Donc, niveau HTML, il suffit d’avoir par exemple :

<div id="fullScreen"> 
    <input type="button" onclick="pleinEcran();" value="Plein écran" /> 
    <h1>Une page qui passe en plein écran.</h1> 
</div> 

Ensuite, un événement sur un bouton ou autre pourra déclencher le script suivant permettant le passage en plein écran ou le retour à la normale.

function pleinEcran() { 
var elem = document.getElementById('fullscreen'); 
    // Sortir du plein écran 
    if (document.fullscreenElement) { 
        document.cancelFullScreen(); 
    } else if (document.webkitFullscreenElement) { ...

Interactions entre JavaScript, HTML et CSS

HTML et CSS sont des langages qu’il serait possible de qualifier de statiques. C’est-à-dire que si le style de texte d’un paragraphe utilise la couleur grise, ce paragraphe sera toujours écrit en gris, et il ne sera pas possible de demander au CSS de changer la couleur, mis à part au passage de la souris. Mais aussi, une règle de style étant statique, elle sera la même à chaque fois qu’elle sera utilisée. Un texte Gris sera toujours un texte gris en CSS. Et c’est là que JavaScript devient très intéressant, puisqu’il va pouvoir modifier le style pour une raison ou une autre : faire disparaître un élément, le faire se déplacer à l’écran...

Supposons que le code HTML contienne une balise telle que :

<div id='toto'> 
<p>Toto va à la plage</p> 
</div> 

Il va être possible, dans un premier temps, de sélectionner soit la balise <div> et donc son contenu, soit la balise <p>, contenue dans la balise <div>. Ensuite, il sera possible d’effectuer des modifications sur le code HTML sélectionné ou sur le style appliqué à ces balises.

var leDiv = document.querySelector("#toto"); 
var leParagraphe = document.querySelector("#toto p"); 

Dans cet exemple...

Les bases de données locales

Il est possible de créer une base de données côté client. Cette base de données, une fois créée, sera utilisable indéfiniment. Le fait de fermer le navigateur ou même d’éteindre l’ordinateur ne l’effacera pas.

Un exemple reprenant l’essentiel des possibilités, c’est-à-dire créer une base, créer des tables, écrire dans les tables et les lire, est visible dans ce fichier 5_14_DB_SQLite.html.

var db = window.openDatabase("maBase", "1.0", "description", 
5 * 1024 * 1024); //5MB 

db.transaction(function (tx) { 
tx.executeSql("CREATE TABLE IF NOT EXISTS test (id INTEGER  
PRIMARY KEY, nom TEXT, age NUMERIC)", [], 
        function(tx, rs) {}, 
        function(tx, error)...

Générer des PNG en JavaScript

Une librairie permettant de créer des images au format PNG a été ajoutée dans le dossier lib du dossier js. Le fichier 5_16_PNG.html détaille cet exemple :

Le code permet de créer assez facilement cinq formes qui sont : \, /, ||, = et X.

Puisque cela ne fait que cinq formes et qu’il pourrait être utile d’avoir davantage d’icônes différentes, la couleur de fond de chacun sera différente. Nous allons voir comment créer des couleurs différentes et ensuite comment créer les images.

La première étape va être le remplissage d’un tableau d’objets, qui contiendra les couleurs, ou plus précisément les composantes rouge, vert et bleu de la couleur d’arrière-plan, et une quatrième information pour la couleur de premier plan.

var frequence = .2; 
var RFrequence = Math.PI / 9; 
var VFrequence = Math.PI / 17; 
var BFrequence = Math.PI / 4; 

var pattTernColor = new Array(); 
for (var i = 0; i < 20; ++i) 
{ 
    var r = Math.round(Math.sin(RFrequence * i) * 70 + 180); 
    var g = Math.round(Math.sin(VFrequence * i) * 70 + 180); 
    var b = Math.round(Math.sin(BFrequence * i) * 70 + 180); 
    var txt = 255; 
    if ((r + g + b) > 100) { 
        txt = 0; 
    } 
    pattTernColor[i] = {}; 
    pattTernColor[i].r = r; 
    pattTernColor[i].g = g; 
    pattTernColor[i].b = b; 
    pattTernColor[i].t = txt; 
} 

La technique utilisée ici est classique pour créer un arc-en-ciel de couleurs.

L’idée est de faire évoluer les valeurs de rouge, vert et bleu, comme si elles étaient une sinusoïde, et de faire en sorte que si une augmente, l’autre diminue et que la troisième soit encore différente. Le mot correct est déphasé, c’est-à-dire que les valeurs vont augmenter jusqu’à un maximum et diminuer ensuite en suivant une courbe qui est une sinusoïde. Et pour que toutes n’aient pas la même valeur, lorsqu’une démarre, une autre est déjà avancée et la troisième est en retard. Ce sont les trois valeurs de fréquences RFrequence, VFrequence et BFrequence qui permettent cela.

Vous pouvez changer ces valeurs pour voir comment les couleurs évoluent.

Ensuite, une boucle va permettre de créer ici 20 couleurs, mais en fait il n’y a pas de limites. La valeur qui devra être stockée dans les variables locales r, g ou b devra être comprise entre 0 et 255. La variable txt permet de sauvegarder la couleur du premier plan. La couleur par défaut sera du blanc, mais si la quantité de rouge, de vert et de bleu est trop importante, alors txt vaudra 0 pour que la couleur du premier plan soit noire.

Ensuite, la ligne pattTernColor[i] = {}; crée un objet dans la case qui est en cours de traitement, si bien qu’il est possible de sauvegarder dans...

Ajax

Ajax signifie Asynchronous JavaScript and XML. Cela signifie qu’il va être possible de récupérer des informations sur le serveur de façon asynchrone. Autrement dit, JavaScript va demander quelque chose au serveur et un peu plus tard le serveur répondra, mais pendant tout ce temps le programme JavaScript ne sera pas bloqué à attendre la réponse. Il pourra exécuter d’autres traitements, et lorsque le serveur répondra, JavaScript sera averti et pourra aller regarder ce que le serveur lui a envoyé. À la base, Ajax était fait pour fonctionner avec du XML, mais en réalité il est possible de faire véhiculer n’importe quel type d’information, le tout est que ce soit sous forme de chaîne de caractères.

Un exemple qui utilise Ajax se trouve dans le fichier 5_16_Ajax.html.

L’intérêt d’Ajax est de pouvoir mettre à jour l’affichage d’une page HTML sans recharger entièrement la page, mais simplement en rechargeant des informations qui seront affichées dans un div, par exemple, ce qui est beaucoup plus rapide que le chargement de la page complète.

La fonction qui permet d’utiliser Ajax est XMLHttpRequest. C’est elle qui va permettre à JavaScript de communiquer avec le serveur.

Elle contient le mot http, ce qui signifie que le code ne pourra fonctionner que s’il est sur un serveur. Pour l’instant, tout ce qui a été codé dans ce livre est simplement stocké sur l’ordinateur client, et le début de l’URL dans le navigateur est file:// ou c:// mais pas http. Or, il faut http pour faire de l’Ajax.

Le plus simple sera soit de mettre l’exemple sur un serveur distant, celui de votre hébergeur, ou alors de transformer votre ordinateur en serveur.

Pour la deuxième solution, vous pouvez télécharger WAMP (Windows Apache MySQL PHP) pour Windows. Il existe également MAMP pour Mac et LAMP pour Linux.

Une fois WAMP installé, il y a un dossier wamp créé à la racine du disque dur et il faut travailler dans le dossier www. Sous Mac ou Linux, il faut...

Gestion des timers (setTimeout(), setInterval(), Date)

setTimeout()

JavaScript permet de faire exécuter des fonctions au bout d’un certain temps ou toutes les x millisecondes.

Il y a par exemple : setTimeout(function(){}, durée) ;

Ce qui pourrait donner :

setTimeout(function() { 
      afficherFenetrePromo() ; 
}, 1500) ; 

Dans cet exemple, notre page HTML s’affiche, puis une seconde et demie plus tard, la temporisation (setTimeout) est écoulée et la fonction afficherFenetrePromo() est exécutée.

setInterval()

setInterval(function() { 
     bougePersonnage() ; 
}, 30) ; 

Le code ci-dessus peut être facilement compréhensible, puisqu’il a la même syntaxe que le précédent. Mais dans ce cas, la fonction bougePersonnage() ne sera pas appelée une fois comme avec le setTimeout(), mais elle sera appelée continuellement toutes les 30 ms. Ce qui pourra être pratique pour certaines animations.

Un setInterval() s’exécute sans cesse et il peut être pratique, voire indispensable de pouvoir arrêter et redémarrer un setInterval().

Il existe une fonction clearInterval() qui va permettre de mettre fin au setInterval(). Dans ce cas, voilà comment il faut écrire cela :

let idInterval = setInterval(function() { 
     bougePersonnage()...

Déplacer un élément au clavier

Pour déplacer un élément, par exemple une bille au clavier, il faut tout d’abord détecter qu’une touche du clavier a été appuyée. Pour cela, il y a un écouteur : window.onkeydown.

Quand l’évènement keyDown est déclenché, il est possible de récupérer de nombreuses informations sur les touches appuyées ou non. Dans notre cas, nous souhaitons récupérer l’information de pression sur une des quatre flèches de direction.

Il est important de mettre en place une logique où le fait d’appuyer sur une touche ne va pas directement bouger la bille. Sinon, le déplacement de la bille serait en fonction de notre rapidité à appuyer à de nombreuses reprises sur la flèche vers la gauche par exemple.

Nous procéderons donc plutôt ainsi : d’un côté, mettre simplement un booléen à true pour indiquer qu’une touche est enfoncée, et d’un autre côté lire ce booléen pour savoir s’il faut ou non déplacer la bille…

Voyons ce que cela donne :

Côté HTML

<div class='bille'></div> 

Côté CSS

.bille { 
   width: 30px; 
   height: 30px; 
   position: absolute; 
   top: 200px; 
   left: 200px; 
   background: radial-gradient(ellipse at center, rgba(181, 189, 
200, 1) 0%, rgba(130, 140, 149, 1) 36%, rgba(40, 52, 59, 1) 100%); 
   border-radius: 50%; 
}   

JavaScript

Une variable (ou objet JSON) nommée action contiendra tous les booléens indiquant si une touche est enfoncée ou non. Par défaut, ils sont tous à false.

let action = { bas: false, gauche: false, haut: false, droit: false } 

Au centre du diagramme, il y a un objet JSON.

D’un côté, il sera mis à jour via un évènement clavier pour indiquer quelle touche est enfoncée. D’un autre côté...