Exemples de codes javascript avec leur code source

Le but est de montrer beaucoup de petits exemples utilisant du code javascript et forcément du CSS, avec leur code source.

<div> indique un début de section, avec retour à la ligne. Fin : </div>
<span> indique un début d'un texte, sans retour à la ligne. Fin : </span>

Alphabetical JavaScript Reference. Liste de fonctions et événements javascript, telles que :
JavaScript and HTML DOM Reference.
La liste des événements gérables.

Pour un nombre, il faut mieux utiliser : Math.floor(nombre) que parseInt(nombre) pour en prendre la partie entière.

Javascript à dose homéopathique.

Le fond de ce paragraphe est de couleur cyan.
Cyan est le nom plus précis pour définir la couleur bleu ciel.
Mais la couleur du fond change lorsque la souris passe sur le paragraphe.
Elle change encore une fois, lorsque la souris sort du paragraphe.

Code :

<div style="background-color:rgb(0,255,255); color:rgb(0,0,0)"
     onmouseover="this.style.backgroundColor='rgb(0,130,0)';"
     onmouseout="this.style.backgroundColor='rgb(0,255,255)';">
??) Le fond de ce paragraphe est de couleur cyan.<br>
Cyan est le nom plus précis pour définir la couleur bleu ciel.<br>
Mais la couleur du fond change lorsque la souris passe sur le paragraphe.<br>
Elle change encore une fois, lorsque la souris sort du paragraphe.<br>
</div>

this fait référence au paragraphe lui-même.

Cette fois, le fond change, ainsi que la couleur et la taille des caractères.
Plusieurs insctuctions javascript sont données dans une seule commande.
Lorsqu'il y en aura trop, les fonctions devront etre introduites.

Code :

<div id="idPara01"
   style="background-color:rgb(0,255,255); color:rgb(0,0,0)"
   onmouseover="this.style.backgroundColor='rgb(0,130,0)'; 
                this.style.color='rgb(255,255,255)'; 
                this.style.fontSize='16pt';" 
   onmouseout="this.style.backgroundColor='rgb(255,130,130)'; 
               this.style.color='rgb(0,0,130)';">
??) Cette fois, le fond change, ainsi que la couleur et la taille des caractères.<br>
Plusieurs insctuctions javascript sont données dans une seule commande.<br>
Lorsqu'il y en aura trop, les fonctions devront etre introduites.<br>
</div>

En plus d'avoir plusieurs instructions, on change les attributs du paragraphe précédent en allant sur ce mot .
Cliquez sur le "mot" précédent, pour changer la taille des caractères du paragraphe précédent.
Cliquez ici pour redonner une taille de 12pt au paragraphe précédent .
Code :

??) En plus d'avoir plusieurs instructions, 
on change les attributs du paragraphe précédent en allant sur 
<span style="background-color:rgb(0,255,255);"
      onmouseover="document.getElementById('idPara01').style.backgroundColor='rgb(0,130,0)';
                   document.getElementById('idPara01').style.color='rgb(255,128,255)';"
      onmouseout="document.getElementById('idPara01').style.backgroundColor='rgb(0,255,255)';
                  document.getElementById('idPara01').style.color='rgb(0,80,0)';" 
      onclick="document.getElementById('idPara01').style.fontSize='16pt';" >
 ce mot
</span>.<br>
Cliquez sur le "mot" précédent, pour changer la taille des caractères du paragraphe précédent.<br>
<span style="background-color:rgb(0,255,90);"
      onclick="document.getElementById('idPara01').style.fontSize='12pt';" >
  Cliquez ici pour redonner une taille de 12pt au paragraphe précédent
</span>.<br>

Un petit GAG :
Cliquez sur moi pour voir une surprise. Cliquez sur moi pour voir une surprise.
Code :

??) Un petit GAG :<br>
<span id='idS01a' 
      style="background-color:rgb(0,255,255); color:rgb(0,0,0); visibility:visible;"
      onmouseover=" this.style.backgroundColor='rgb(255,255,192)';
                    this.style.color='rgb(255,255,192)';
                    document.getElementById('idS01b').style.backgroundColor='rgb(0,255,255)'; 
                    document.getElementById('idS01b').style.color='rgb(0,0,0)'; 
                    "
      onmouseout="  this.style.backgroundColor='rgb(0,255,255)';
                    this.style.color='rgb(0,0,0)';
                    document.getElementById('idS01b').style.backgroundColor='rgb(255,255,192)'; 
                    document.getElementById('idS01b').style.color='rgb(255,255,192)'; 
                    ">
Cliquez sur moi pour voir une surprise.
</span>
&nbsp; &nbsp;
<span id='idS01b'
      style="background-color:rgb(255,255,0); color:rgb(255,255,0);">
Cliquez sur moi pour voir une surprise.
</span><br>

Un petit GAG, autre manière de faire :
Cliquez sur moi pour voir une surprise. Cliquez sur moi pour voir une surprise.
Code :

??) Un petit GAG, autre manière de faire :<br>
<span id='idS02a' 
      style="background-color:rgb(0,255,255); color:rgb(0,0,0); visibility:visible;"
      onmouseover=" this.style.visibility='hidden';
                    document.getElementById('idS02b').style.visibility='visible'
                    ">
Cliquez sur moi pour voir une surprise.
</span>
&nbsp; &nbsp;
<span id='idS02b'
      style="background-color:rgb(0,255,255); color:rgb(0,0,0); visibility:hidden;"
      onmouseover=" this.style.visibility='hidden';
                    document.getElementById('idS02a').style.visibility='visible'
                    ">
Cliquez sur moi pour voir une surprise.
</span><br>

Apparition de plus de texte lors d'un clique sur un lien.
plus d'info
Code :

??) Apparition de plus de texte lors d'un clique sur un lien.<br>
<span id="idInfo01_more" style="display:inline; font-size:80%;">
  <a href="javascript:void(0)"
     onclick="document.getElementById('idInfo01_less').style.display='inline';  
              document.getElementById('idInfo01_more').style.display='none';">plus d'info</a>
</span> 
<div id="idInfo01_less" style="display:none;">
  <a href="javascript:void(0)"  style="font-size:80%;"
     onclick="document.getElementById('idInfo01_less').style.display='none';
              document.getElementById('idInfo01_more').style.display='inline';">moins d'info</a>
  <br> 
  Ici, on peut <b>afficher plus d'information</b> sans accéder à Internet.<br>
  Une combinaison de javascript et de style permet de faire cet effet.
</div>

Ce n'est pas une bonne idée de cliquer sur un lien pour faire apparaître du texte supplémentaire. Il est meilleur de mettre un bouton, comme dans l'exemple suivant.

Apparition de plus de texte lors d'un clique sur un bouton.
Code :

??) <button style='font-size:80%; display:inline; padding:0px; margin:0px;' 
        onclick="Info_gestion(event);">+</button>
  Apparition de plus de texte lors d'un clique sur un bouton.

<div style="display:none;"><br>
  Ici, on peut <b>afficher plus d'information</b> sans accéder à Internet.<br>
  Une combinaison de javascript et de style permet de faire cet effet.<br>
  De manière très simple, avec juste un petit script.
</div>

<script type="text/javascript">
function Info_gestion(event) {
//==============================
// Permet d'ouvrir et de fermer de l'information supplémentaire.
// C.f. https://www.w3schools.com/jsref/dom_obj_all.asp

var oBalise = event.target; // La balise courante
var oDivNext = oBalise; // La balise DIV suivante.
var nn = 0; // Sentinel, pour ne pas boucler infiniment.

// Recherche la première balise DIV qui suit le bouton
while ((oDivNext.nodeName != "DIV") && (nn < 100)) {
  nn += 1;
  oDivNext = oDivNext.nextElementSibling; // La balise suivante.
  // console.log(nn, oDivNext.nodeName); //Pour le développement.
  }

if (nn >= 100){
  alert("Anomilaie, pas de balise DIV qui suit le bouton");
  return; //Ne fait rien
  }

if (oBalise.innerHTML =="+") {
  // Balise suivante (div) visible.
  oBalise.innerHTML = "-";
  oDivNext.style.display = "block";
  }
else {
  // Balise suivante (div) cachée.
  oBalise.innerHTML = "+";
  oDivNext.style.display = "none";
  }
} //Info_gestion
</script>

Cet exemple est meilleur que le précédent, car il est plus naturel de cliquer sur un bouton apparaître du texte supplémentaire que de cliquer sur un lien, qui ne mène pas à une nouvelle page Web.

Apparition de plus de texte lors d'un clique sur un bouton. Ancien

Code :

??) Apparition de plus de texte lors d'un clique sur un bouton. Ancien<br>
<button id="idInfo02_more" style='font-size:80%; display:inline;' 
        onclick="document.getElementById('idInfo02_less').style.display='inline';  
                 document.getElementById('idInfo02_more').style.display='none';">
  Plus d'info
</button>

<div id="idInfo02_less" style="display:none;">
  <button style='font-size:80%;' 
          onclick="document.getElementById('idInfo02_less').style.display='none';  
                   document.getElementById('idInfo02_more').style.display='inline';">
    Moins d'info
  </button><br>
  Ici, on peut <b>afficher plus d'information</b> sans accéder à Internet.<br>
  Une combinaison de javascript et de style permet de faire cet effet.
</div>

L' exemple précédent est meilleur. Il ne nécessite pas d'id, les mêmes lignes HTMLs peuvet être répétées autant de fois que l'on désire. Le script doit être écrit une fois pour toute.

Autre manière d'apparition d'un texte, sans rien décaler.

Code :

??) Autre manière d'apparition d'un texte, sans rien décaler.<br>
<button id="idInfo03_more" style='display:inline; font-size:80%;' 
        onclick="document.getElementById('idInfo03a_less').style.display='inline';  
                 document.getElementById('idInfo03b_less').style.display='inline-block';
                 document.getElementById('idInfo03_more').style.display='none';">
  Plus d'info
</button>
<button id="idInfo03a_less" style='display:none; font-size:80%;' 
        onclick="document.getElementById('idInfo03a_less').style.display='none';
                 document.getElementById('idInfo03b_less').style.display='none';
                 document.getElementById('idInfo03_more').style.display='inline';">
  Moins d'info
</button><br>
<div style="position:relative;">
  <div id="idInfo03b_less" style="display:none; position:absolute; left:100pt; top:-30pt; background-color:#80ffff;">
    Ici, on peut <b>afficher plus d'information</b> sans accéder à Internet.<br>
    Une combinaison de javascript et de style permet de faire cet effet.
  </div>
</div>

Des effets similaires ont été obtenus avec uniquement du CSS dans mes exemples de styles CSS

Utilisation de formulaires.

Il est très fréquent d'utiliser des formulaires <form> avec du javascript (et du PHP), pour avoir des champs à remplir et des boutons à presser.

HTML <form> Tag, information du les formulaires.
HTML <button> Tag.
HTML <input> Tag.
Window alert() Method, information sur la "fonction" alert(string).

Code :

??) <button onclick="alert('On a cliqué sur le premier boutton');">  Cliquez-moi pour voir !</button><br>

Code :

??) <button class='button_perso01' onclick="alert('Ce bouton est personalisé');"> Un bouton personalisé </button><br>

À ajouter dans le <header> :
<style>
.button_perso01 {
  background-color:green ;
  border:1px solid #c0c0c0;
  border-radius:15px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}

.button_perso01:hover {
  background-color:greenyellow;
  color:black;
  }
</style>

Code :

<form name="nomForm01"> 
  ??)
  <input name="nomNombre" value="7"> 
  <button name="nomBouton2" type="button" 
          onclick="document.nomForm01.nomNombre.value=2*parseInt(document.nomForm01.nomNombre.value);">
   Double le nombre entier
  </button><br>
        <input name="nomNombre3" value="7.31"> 
  <button name="nomBouton3" type="button" 
          onclick="document.nomForm01.nomNombre3.value=2*parseFloat(document.nomForm01.nomNombre3.value);">
   Double le nombre à virgule
  </button><br>
</form>

Dans une <form>, il faut préciser le type="button", car les "type" 'reset' et 'submit' existent aussi.
Les fonctions parseInt et parseFloat et ont aussi été utilisées, pour convertir du texte en nombre.
L'exemple dans une page Web

Déplace une image à l'aide de javascript.

Code :

??) Déplace une image à l'aide de javascript.<br>
<script>
  
function Deplace_image(nXpix, nYpix) {
//====================================
// Déplace l'image "idboulebleue" de  
// nXPix  pixels horizontalement
// nYPix  pixels verticalement
// "px" signifie l'unité = le pixel
var imgBouleBleueID = document.getElementById("idBouleBleue");
imgBouleBleueID.style.left = parseInt(imgBouleBleueID.style.left) + nXpix + "px";
imgBouleBleueID.style.top  = parseInt(imgBouleBleueID.style.top ) + nYpix + "px";
} // Deplace_image
</script>

<form name="nomForm"> 
                         
<button name="nomBoutonUp" type="button" onclick="Deplace_image(0, -1);">
 monte l'image d'un pixel 1.</button><br>
<button name="nomBoutonLeft" type="button" onclick="Deplace_image(-1, 0);">
 bouge à gauche l'image d'un pixel 1.</button>  
<button name="nomBoutonRight" type="button" onclick="Deplace_image(1, 0);">
 bouge à droite l'image d'un pixel 1.</button><br>
                          
<button name="nomBoutonDown" type="button" onclick="Deplace_image(0, 1);">
 descent l'image d'un pixel 1.</button><br>
</form>
<div style="position:relative; height:10px;">
  <img src="images/BouleBleue.png" alt="boule bleue" width=20 height=20 id="idBouleBleue"
       style="position:absolute; left:600px; top:-40px;">
</div>

L'exemple dans une page Web.

Ouverture d'une fenêtre lors d'un clique sur un bouton

top=100,left=200 ne fonctionnement pas chez moi.

Code :

??) Ouverture d'une fenêtre lors d'un clique sur un bouton<br>
<button onclick="window.open('aprod2000_perso/RollOver/ex_de_popup.html','nom_de_la_fenetre',
        'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=500,height=400,top=100,left=200');">
  Ouverture d'une fenêtre popup
</button><br>
top=100,left=200 &nbsp; ne fonctionnement pas chez moi.<br>
<br>
<button onclick="window.open('exemples.html','_self');">
  Remplace la fenêtre par une autre.
</button><br>
<br>
<button onclick="window.location = 'exemples.html'">
  Autre manière en changeant : window.location.
</button><br>
<br>
<div id="idLocationInfo"></div>
<script>
document.getElementById("idLocationInfo").innerHTML = 
     "URL de la fenêtre = " + window.location + "<br>"
   + "host = " + window.location.host + "<br>"
   + "hostname = " + window.location.hostname + "<br>"
   + "origin = " + window.location.origin + "<br>"
   + "pathname = " + window.location.pathname + "<br>"
   + "protocol = " + window.location.protocol + "<br>";
</script>

Plus d'information sur Window.open()
Plus d'information sur Window.location

Gestion de sons
Avec contrôles :

Sons ".wav" ; ".ogg" et ".mp3"
Cliquez sur moi. TaDa ; Cliquez sur moi. Cash ; Passez sur moi. Clack
Il faut avoir cliqué une fois dans la fenêtre pour que cela fonctionne.

Code :

??) Gestion de sons<br>

<script>

function PlaySound(idPlayer) {
//============================
var player = document.querySelector('#' + idPlayer);

console.log(idPlayer);
console.log(player);
player.play();
} // PlaySound

function ResumeSound(idPlayer) {
//==============================
var player = document.querySelector('#' + idPlayer);
	
player.currentTime = 0;
player.pause();
} // ResumeSound

</script>

<!-- <audio id="audioPlayer1" autoplay>  pour être joué au chargement de la page -->
<!-- <audio id="audioPlayer1" preload>   pour être charge en mémoire, mais pas joué -->
<!-- Autres attributs possibles : autoplay, controls, loop, muted, preload, src -->
Avec contrôles : <audio id="audioPlayer1" preload controls style='vertical-align:middle;'>
  <source src="sons/tada.mp3" type="audio/mpeg">
</audio> 
<!-- <audio id="audioPlayer2" controls autoplay> -->
<audio id="audioPlayer2" preload>
  <source src="sons/cash.mp3" type="audio/mpeg">
  <source src="sons/cash.ogg" type="audio/ogg">
</audio>
<audio id="audioPlayer3" preload>
  <source src="sons/chunk.ogg" type="audio/ogg">
  <source src="sons/chunk.mp3" type="audio/mpeg">
</audio>
<!-- si une référence n'est pas connue, c'est la suivante qui est prise. -->

<br>
<button onclick="PlaySound('audioPlayer1');">Play 01</button>
<button onclick="ResumeSound('audioPlayer1');">Stop 01</button><br>
<br>
<button onclick="PlaySound('audioPlayer2');">Play 02</button>
<button onclick="ResumeSound('audioPlayer2');">Stop 02</button><br>
<br>
<b>Sons ".wav" ; ".ogg" et ".mp3"</b><br>
<span style="color:#ff8040; background-color:#004000;" onclick="PlaySound('audioPlayer1');">
    Cliquez sur moi. TaDa  </span>   ;  
<span style="color:#000040; background-color:#ff00ff;" onclick="PlaySound('audioPlayer2');">
    Cliquez sur moi. Cash  </span>   ;  
<span style="color:#ffffc0; background-color:#0000ff;" onmouseover="PlaySound('audioPlayer3');">
    Passez sur moi. Clack  </span> <br>
Il faut avoir cliqué une fois dans la fenêtre pour que cela fonctionne.<br>

Le AUTOplay ne fonctionne pas, car il doit être autorisé par l'utilisateur de la page Web !

Références :
- Le site du Zero
- La w3school.com
- HTML <script> Tag
- HTML <script> type Attribute
- HTML5 Audio
- HTML <audio> Tag
- HTML <source> Tag
- HTML DOM Audio Object
- HTML Audio/Video DOM play() Method
- HTML DOM querySelector() Method

Génération de code HTML en javascript

Code :

??) Génération de code HTML en javascript<br>

<div id='idVIDE1' style='position:relative;'>
  <!-- La position "relative" est importante, 
       pour que le display "absolute" de la balise enfant soit correct
       Sera rempli par programmation javascript ci-dessous -->
</div>
<br><br> <!-- Nécessaire, vu que le quadrillage est décalé de sa position normale -->
<script>
// si on veut modifier la couleur de fond d'un div.
//document.getElementById("idTest").style.backgroundColor = 'blue';

//document.getElementById("idTest").style.borderLeftWidth=5;
//document.getElementById("idTest").style.borderLeftColor = 'black';

// Voir dans les styles, toutes les modifications de styles possibles.  Il y en a plus de 100.

// La règle pour accéder à un attribut de style en javascript est qu'un trait d'union "-" dans le style 
// est éliminé et le caractère qui suit est remplacé par une majuscule.
// Exemple : style="background-image:url(...)"  devient : document.getElementById("idTest").style.backgroundImag = "url('...')"

// boucle pour créer un quadrillage.
var nX=0;  var nY=0;   var strS="";

for (nY=1; nY<=5; nY++) {
  for (nX=1; nX<=5; nX++) {
    strS += "<DIV id='id" + (nX*10 + nY) + "'" +
            "style='display:inline-block; position:relative; background-color:rgb(" + (nX*40) + ", " + (nY*40) + " , 0);" +
            "left:" + (nX*5) + "px; top:" + (nY*5) + "px; width:40px; height:40px;'>" +
            " </DIV>";
    }
    strS += "<br>"; 
  }

// Pour ajouter du text :
strS=strS + "<DIV \n\
             style='display:inline-block; position:absolute; left:300px; top:40px;\n\
             background-color:rgb(255,240,255); color:rgb(40,40,0); font-size:16pt; font-weight:800;'>"
          + "  ICI, on affiche le texte désiré. </DIV>";

// remplissage du code HTML
document.getElementById("idVIDE1").innerHTML = strS;

// Ppur changer le text de idText
//document.getElementById("idText").innerHTML = "On change le texte";
</script>

Une version plus sophistiquée, avec du CSS

Text non obligatoire

Regarder dans le 'style' du DIV
pour modifier le style.

Voir dans les styles, toutes les modifications de styles possibles.
Il y en a plus de 100.

La règle pour accéder à un attribut de style en javascript est qu'un trait d'union "-" dans le style est éliminé et le caractère qui suit est remplacé par une majuscule.
Exemple : style="background-image:url(...)" devient :
document.getElementById("idTest").style.backgroundImag = "url('...')"

Code :

??) Une version plus sophistiquée, avec du CSS<br>

<div style="display:inline-block; position:relative; width:950px; background-color:#00c0f0;">
  <div id='idTest' 
       style="  display:inline-block; position:relative;
                top:10px; left:30px; width:280px; height:80px; 
                border:5px solid #6f4848;
                background-color:red; color : yellow;                
                font-family:'Times New Roman';
                font-size : 18pt;
                font-weight:bold;">
    Text non obligatoire <br>
  </div>
  <br><br>
  <div id='idTest2'  
       style="  display:inline-block; position:relative;
                left:30px; width:400px; height:70px;
                background-color:#ff4444;  color:black;
                border:5px solid #000000;
                font-family:'Arial';
                font-size:12pt;">
    Regarder dans le 'style' du DIV<br>
    pour modifier le style.<br>
  </div>
  <br>
  <!-- Exemple de gestion d'opacité ou de transparence. -->
  <div id='idOPACITY' 
       style="  display:inline-block; position:relative;
                left:330px; top:20px; background-color:#ff8800;">
    <img src="images/ballon3.gif" alt="ballon3" width="89" height="106"
         style="opacity:0.1" >
    <img src="images/ballon3.gif" alt="ballon3" width="89" height="106"
         style="opacity:0.2" >
    <img src="images/ballon3.gif" alt="ballon3" width="89" height="106"
         style="opacity:0.5" >
    <img src="images/ballon3.gif" alt="ballon3" width="89" height="106"
         style="opacity:0.8" >
    <img src="images/ballon3.gif" alt="ballon3" width="89" height="106"
         style="opacity:1.0" >
  </div>
  <br>
  
  <div id='idVIDE2' 
       style="  display:inline-block; position:relative;
                left:40px; top:-70px;">
  <!-- Sera rempli par programmation javascript ci-dessous -->
  </div>
  <br>
  <div id='idInfo' style="
       position:absolute; display:inline-block; left:350px; top:330px; width:600px;">
  Voir dans les styles, toutes les modifications de styles possibles.<br>
  Il y en a plus de 100.<br>
  <br>
  La règle pour accéder à un attribut de style en javascript est qu'un trait d'union "-" dans le style 
  est éliminé et le caractère qui suit est remplacé par une majuscule.<br>
  Exemple : style="background-image:url(...)"  devient :<br>
  document.getElementById("idTest").style.backgroundImag = "url('...')"
  </div>
</div>
<br>

<script>
// boucle pour créer un quadrillage.
var nX=0;  var nY=0;   var strS="";

for (nY=1; nY<=5; nY++) {
  for (nX=1; nX<=5; nX++) {
    strS += "<DIV id='id" + (nX*10 + nY) + "'" +
            "style='display:inline-block; position:relative; background-color:rgb(" + (nX*40) + ", " + (nY*40) + " , 0); color:yellow; " +
            "left:" + (nX*8) + "px; top:" + (nY*5) + "px; width:40px; height:40px;'>" +
            " </DIV>";
    }
    strS += "<br>"; 
  }

// Pour ajouter du text :
strS=strS + "<DIV \n\
             style='display:inline-block; position:relative; top:60px; background-color:rgb(255,255,255); color:rgb(40,40,0); font-size:16pt; font-weight:800;'>"
          + "  ICI, on affiche le texte désiré. </DIV>";

//alert(strS);  // Pour information de debbuging

// remplissage du code HTML
document.getElementById("idVIDE2").innerHTML = strS;
</script>

Un chronomètre, utilisant un Timer (minuteur)

Un chronomètre

Code :

??) Un chronomètre, utilisant un Timer (minuteur)<br>

<script type="text/javascript">
// variables utile au programme
var glnTime = 0;   // indique le temps du chronomètre en dixième de secondes.
var glnTimerID=0;  // numero du timer utilise

function AppeleParTimerChrono() {
//===============================
// On pourraît appeler l'objet  Date  pour un traitement plus complet de l'heure.
// nombre.toFixed(nb), permet de fixer le nombre de chiffres après la virgule. 
// Le toute est transformé en "string".
glnTime++;
nameFormChrono.monTemps.value = (glnTime / 10).toFixed(1) + " [s]";
document.getElementById("idChrono2").innerHTML = (glnTime / 10).toFixed(1) + " [s]";
} // AppeleParTimer

function StartChrono() {
//======================
// Démarre le chronomètre
if (glnTimerID == 0) {
   glnTimerID = setInterval("AppeleParTimerChrono()", 100); // appel AppeleParTimer toutes les 100 milli-secondes
   }
// else le chronomètre tourne déjà.
} // StartChrono

function StopChrono() {
//======================
// Arrête le chronomètre
if (glnTimerID != 0) {
   clearInterval(glnTimerID);
   glnTimerID = 0;
   }
// else le chronomètre est déjà arrêté.
} // StopChrono

function ResetChrono() {
//======================
// Met le chronomètre à zéro
glnTime = 0;
nameFormChrono.monTemps.value= "0.0 [s]";
} // ResetChrono

</script>

<h2 style="text-align:center;">Un chronomètre</h2>

<form name="nameFormChrono">
  Chronomètre : <input name="monTemps" size="7" value="0"> 
  <div id="idChrono2" style="display:inline-block; width:160px; text-align:right; font-size:24pt;">
    0 [s]<!-- le code HTML viendra ici --></div> <br>
  <br>
  <button name="btnStart" type="button" onclick="StartChrono();">Start</button>  
  <button name="btnStop" type="button" onclick="StopChrono();">Stop</button>  
  <button name="btnReset" type="button" onclick="ResetChrono();">Remise à zéro</button><br>
</form>

Test si un nombre est divisible par 2, 3, 5, 7 ou 11

Code :

??) Test si un nombre est divisible par 2, 3, 5, 7 ou 11<br>

<script>

function TestSiDivisible(nNbr) {
//==============================
// Test si le nombre  nNbr  est divisible par 2, 3, 5, 7 ou 11
var strRep = "";

if (nNbr %  2 == 0) strRep += "2 ;";
if (nNbr %  3 == 0) strRep += " 3 ;";
if (nNbr %  5 == 0) strRep += " 5 ;";
if (nNbr %  7 == 0) strRep += " 7 ;";
if (nNbr % 11 == 0) strRep += " 11 ;";

nameFormDivisible.nameResultatDivisible.value =strRep;
}  // TestSiDivisible
</script>

<h2>Test si un nombre est divisible par 2, 3, 5, 7 ou 11</h2>

<form name="nameFormDivisible">
Un nombre : <input name="nameNombreDivisible" size="5" value="1001">  
<button type="button" onclick="TestSiDivisible(parseInt(nameFormDivisible.nameNombreDivisible.value))">
Test de diviseurs</button><br>

Le nombre est divisible par les nombres suivants : <input name="nameResultatDivisible" size="15" value=""> <br>
</form>

Une image bouge aléatoirement

Fait bouger l'image :
Code :

??) Une image bouge aléatoirement<br>
<script>

var glnBougeTimerID =  0;  // identification du timer
var glnBougePosX_3 = 800;  // Position du ballon 3
var glnBougePosY_3 = 100;

function BougeImage() {
//=====================
// fait Bouger le ballon3
var nDX = 1;        // direction de deplacement du ballon
var nDY = 1;
var oDivBallon3 = document.getElementById("divBallon3");

// bouge aleatoirement, mais en étant attiré par la position (800 ; 100)
if (2000 * Math.random() < 1800 - glnBougePosX_3) nDX = 1;  else nDX = -1;
if (2000 * Math.random() < 1100 - glnBougePosY_3) nDY = 1;  else nDY = -1;

glnBougePosX_3 = glnBougePosX_3 + nDX;
glnBougePosY_3 = glnBougePosY_3 + nDY;
oDivBallon3.style.left = glnBougePosX_3 + 'px';
oDivBallon3.style.top  = glnBougePosY_3 + 'px';
} // BougeImage

function StartBouge(fOK) {
//========================
// Deplace le ballon3 toutes les '100' milisecondes.
if (fOK && (glnBougeTimerID == 0)) glnBougeTimerID = setInterval("BougeImage()", 100);
else if (!fOK && (glnBougeTimerID != 0)) {
  clearInterval(glnBougeTimerID);
  glnBougeTimerID = 0;
  }
} // StartBouge
</script>

<div  style="position:relative;">
  <img src="images/ballon3.gif" alt="ballon_3" id="divBallon3" width=89 height=106
       style="position:absolute; left:800px; top:100px; z-index:5;" >
</div>
Fait bouger l'image : 
<input type="checkbox" id="idCheckBougeImage01" name="radio" 
       onchange="if (this.checked) StartBouge(true); else StartBouge(false);"><br>

Formattage de nombre pour un joli affichage
Référence sur toFixed et toPrecision.
toFixed détermine le nombre de chiffres après la virgule.
toPrecision détermine le nombre total de chiffre à afficher.

Code :

??) Formattage de nombre pour un joli affichage<br>

<script>

function myFormat() {
//===================
// Différent formatage d'un nombre, pour un plus joli affichage
var nombre = parseFloat(nameFormMyFormat.nameMyNumber.value);

var strFixed3 = nombre.toFixed(3);
var strFixed4 = nombre.toFixed(4);
var strFixed5 = nombre.toFixed(5);
var strFixed6 = nombre.toFixed(6);
var strPreci4 = nombre.toPrecision(4);
var strPreci5 = nombre.toPrecision(5);
var strPreci6 = nombre.toPrecision(6);
var strPreci7 = nombre.toPrecision(7);
var nRound3 = Math.round(nombre*1000) / 1000;
var nRound4 = Math.round(nombre*10000) / 10000;
var nRound5 = Math.round(nombre*100000) / 100000;
var nRound6 = Math.round(nombre*1000000) / 1000000;

document.getElementById("idTextareaMyFormat").innerHTML = 
      "nombre.toFixed(3) = " + strFixed3 
  + "\nnombre.toFixed(4) = " + strFixed4
  + "\nnombre.toFixed(5) = " + strFixed5
  + "\nnombre.toFixed(6) = " + strFixed6
  + "\nnombre.toPrecision(4) = " + strPreci4
  + "\nnombre.toPrecision(5) = " + strPreci5
  + "\nnombre.toPrecision(6) = " + strPreci6
  + "\nnombre.toPrecision(7) = " + strPreci7
  + "\nMath.round(nombre*1000) / 1000 = " + nRound3
  + "\nMath.round(nombre*10000) / 10000 = " + nRound4
  + "\nMath.round(nombre*100000) / 100000 = " + nRound5
  + "\nMath.round(nombre*1000000) / 1000000 = " + nRound6
  ;
}  // myFormat
</script>

<a href="https://www.w3schools.com/jsref/jsref_obj_number.asp" target="_blank">Référence sur toFixed et toPrecision</a>.<br>
toFixed détermine le nombre de chiffres après la virgule.<br>
toPrecision détermine le nombre total de chiffre à afficher.<br>

<br>
<form name="nameFormMyFormat">
Le nombre à formatter : <input name="nameMyNumber" size="15" value="3.1415">  
<button type="button" onclick="myFormat()">Affichage du nombre avec divers format</button><br>

<textarea id="idTextareaMyFormat" cols="120" rows="12" readonly>

</textarea><br>
</form>

Création d'un quadrillage avec des lignes vectorielles, dans un SVG (Scalable Vector Graphic).
Références sur le SVG :
SVG Tutorial, du w3schools.com, en anglais.
Introduction au SVG, du site "Openclassrooms.com".
Une référence sur le SVG, en anglais.

Code :

??) Création d'un quadrillage avec des lignes vectorielles, dans un SVG (Scalable Vector Graphic).<br>
Références sur le SVG :<br>
<a href="https://www.w3schools.com/graphics/svg_intro.asp" target="_blank">SVG Tutorial</a>, du w3schools.com, en anglais.<br>
<a href="https://openclassrooms.com/fr/courses/201787-le-svg/200608-introduction-au-svg" target="_blank">
  Introduction au SVG</a>, du site "Openclassrooms.com".<br>
<a href="https://www.w3.org/2000/svg" target="_blank">Une référence sur le SVG</a>, en anglais.<br>
<button type="button" onclick="svg_lignes1();">Création d'un quadtillage SVG</button><br>
<svg id='idSVG1'
     width="300" height="300"
     style="width : 300px; height:300px; background-color:#ffd090;">
<!--<rect x='100' y='200' width='10' height='12' fill='rgb(0, 192, 255)'/>  TEST-->
</svg><br>

<script type="text/javascript">
function svg_lignes1() {
//======================
// Ajoute plusieurs images vectorielles (SVG) dans le div "idSVG" pour former un quadrillage
var strS = ""; // Chaîne qui contiendra le texte HTML qui définira les images SVG ajoutées
var nx = 0;
var ny = 0;

// Adjonction des lignes horizontales
// C.f. https://openclassrooms.com/fr/courses/201787-le-svg/200802-les-formes
for (ny=0; ny<=12; ny++) {
  strS += "<line x1='  0' y1='" + (6 + 24*ny) + "'" +
                "x2='300' y2='" + (6 + 24*ny) + "'" +
                "style='stroke:rgb(0,192,255); stroke-width:2'/>";
  }

// Adjonction des lignes verticales
for (nx=0; nx<=12; nx++) {
  strS += "<line x1='" + (6 + 24*nx) + "' y1='  0'" +
                "x2='" + (6 + 24*nx) + "' y2='300'" +
                "style='stroke:rgb(0,192,255); stroke-width:2'/>";
  }

// Pour ajouter un rectangle vectoriel
// C.f. https://openclassrooms.com/fr/courses/201787-le-svg/200802-les-formes
strS += "<rect x='140' y='280' width='50' height='12' fill='rgb(00,192,128)'/>";

// Adjonction d'un texte vectoriel
strS += "<text x='50' y='290' fill='black'>un rectangle</text>";

// Ajoute le code HTML 
document.getElementById("idSVG1").innerHTML += strS;
}  // svg_lignes1
</script>

Création d'un quadrillage, sans utiliser de canvas (dessin) ANCIEN.

Code :

??) Création d'un quadrillage, sans utiliser de canvas (dessin)<br>
<button type="button" onclick="quadrillage1();">Création d'un quadrillage ANCIEN</button><br>
<div id='idQuadrillage1' 
     style="position:relative; width : 300px; height:300px; background-color:#ffc080;">
  <!-- Le style="position:relative;"  est important ! -->
  <!-- Le code HTML sera placé ici -->
</div>

<script>

function quadrillage1() {
//=======================
// Ajoute plusieurs images dans le div "idQuadrillage1" pour former un quadrillage
var strS = ""; // Chaîne qui contiendra le texte HTML qui définira le quadrillage
var nn = 0;

// Adjonction des lignes horizontales
for (nn=0; nn<=12; nn++) {
  strS += "<img src='images/Noire1x1.png' alt='noir' width='300' height='2'"
       + "style='position:absolute; left:0px; top:" + (6 + 24*nn) + "px;'>";
  }

// Adjonction des lignes verticales
for (nn=0; nn<=12; nn++) {
  strS += "<img src='images/Noire1x1.png' alt='noir' width='2' height='300'"
       + "style='position:absolute; left:" + (6 + 24*nn) + "px; top:0px;'>";
  }

// Ajoute le code HTML qui défini le quadrillage
document.getElementById("idQuadrillage1").innerHTML = strS;
}  // quadrillage1
</script>

Création de lignes vectorielles, dans un SVG (Scalable Vector Graphic).
Références sur le SVG :
SVG Tutorial, du w3schools.com, en anglais.
Introduction au SVG, du site "Openclassrooms.com".
Une référence sur le SVG, en anglais.

Code :

??) Création de lignes vectorielles, dans un SVG (Scalable Vector Graphic).<br>
Références sur le SVG :<br>
<a href="https://www.w3schools.com/graphics/svg_intro.asp" target="_blank">SVG Tutorial</a>, du w3schools.com, en anglais.<br>
<a href="https://openclassrooms.com/fr/courses/201787-le-svg/200608-introduction-au-svg" target="_blank">
  Introduction au SVG</a>, du site "Openclassrooms.com".<br>
<a href="https://www.w3.org/2000/svg" target="_blank">Une référence sur le SVG</a>, en anglais.<br>
<button type="button" onclick="svg_lignes2();">Création de lignes obliques SVG</button><br>
<svg id='idSVG2'
     width="300" height="300"
     style="width : 300px; height:300px; background-color:#ffd090;">
<!--<rect x='100' y='200' width='10' height='12' fill='rgb(0, 192, 255)'/>  TEST-->
</svg><br>

<script type="text/javascript">

function svg_lignes2() {
//======================
// Ajoute plusieurs images vectorielles (SVG) dans le div "idSVG" pour former des lignes obliques
var strS = ""; // Chaîne qui contiendra le texte HTML qui définira les images SVG ajoutées
var nx = 0;
var ny = 0;

// Adjonction des lignes obliques
// C.f. https://openclassrooms.com/fr/courses/201787-le-svg/200802-les-formes
for (ny=0; ny<=12; ny++) {
  nx = 0;
  while ((24 + 24*nx + 24*ny) < 300) {
    strS += "<line x1='" + (     6 + 24*nx) + "' y1='" + (     6 + 24*nx + 24*ny) + "'" +
                  "x2='" + (24 + 6 + 24*nx) + "' y2='" + (24 + 6 + 24*nx + 24*ny) + "'" +
                  "style='stroke:rgb(0,192,255); stroke-width:2'/>";
    nx += 1;
    }
  }

// Lignes obliques dans le triangles haut-gauche
for (nx=1; nx<=12; nx++) {
  ny = 0;
  while ((24 + 24*nx + 24*ny) < 300) {
    strS += "<line x1='" + (     6 + 24*nx + 24*ny) + "' y1='" + (     6 + 24*ny) + "'" +
                  "x2='" + (24 + 6 + 24*nx + 24*ny) + "' y2='" + (24 + 6 + 24*ny) + "'" +
                  "style='stroke:rgb(0,255,192); stroke-width:2'/>";
    ny += 1;
    }
  }

// Pour ajouter un rectangle vectoriel
// C.f. https://openclassrooms.com/fr/courses/201787-le-svg/200802-les-formes
strS += "<rect x='240' y='280' width='50' height='12' fill='rgb(00,192,128)'/>";

// Adjonction d'un texte vectoriel
strS += "<text x='150' y='290' fill='black'>un rectangle</text>";

// Ajoute le code HTML 
document.getElementById("idSVG2").innerHTML += strS;
}  // svg_lignes2
</script>

Création de lignes dans un canvas.
Références sur les canvas :
Exemples.
L'élément Canvas, du site "Openclassrooms.com".
Une référence sur les canvas, en anglais.

Code :

??) Création de lignes dans un <b>canvas</b>.<br>
Références sur les canvas :<br>
<a href="http://www.juggling.ch/zgisin/a2014_oc3/page18_canvas.html" target="_blank">Exemples</a>.<br>
<a href="https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript/1922103-lelement-canvas" target="_blank">
  L'élément Canvas</a>, du site "Openclassrooms.com".<br>
<a href="https://www.w3schools.com/tags/ref_canvas.asp" target="_blank">
  Une référence sur les canvas</a>, en anglais.<br>
  
<button type="button" onclick="canvas_lignes1();">Création de lignes dans un canvas</button><br>
<canvas id="idCanvas1" width="300" height="300" 
        style="background-color:rgb(240,240,255); border:1px solid rgb(200,200,200);">
Votre navigateur ne supporte pas le tag <canvas>.</canvas><br>

<script type="text/javascript">

function canvas_lignes1() {
//=========================
// Ajoute plusieurs lignes dans un canvas
var nn = 0;

// Création de deux variables pour accéder au canvas
var oCan = document.getElementById("idCanvas1");   
var ctx = oCan.getContext("2d");

// Adjonction des lignes horizontales
ctx.beginPath();
ctx.strokeStyle="rgb(0, 255,0)"; // Couleur des lignes
ctx.lineWidth = 1;
for (nn=0; nn<=12; nn++) {
  ctx.moveTo(           0.5, 6 + 24*nn);
  ctx.lineTo(oCan.width+0.5, 6 + 24*nn); // trace une ligne
  }
ctx.stroke(); // c'est ici que les traits sont effectivement tracés.

// Adjonction des lignes verticales
ctx.beginPath();
ctx.strokeStyle="rgb(255,   0,   0)"; // Couleur des lignes
for (nn=0; nn<=12; nn++) {
  ctx.moveTo(6 + 24*nn,             0.5);
  ctx.lineTo(6 + 24*nn, oCan.height+0.5); // trace une ligne
  }
ctx.stroke(); // c'est ici que les traits sont effectivement tracés.

// Croix au milieu
ctx.beginPath();
ctx.strokeStyle="rgb(0,0,255)"; // Couleur des lignes
ctx.lineWidth = 3;
ctx.moveTo(           0.5, oCan.height/2); // va à gauche, au milieu vertical du canvas
ctx.lineTo(oCan.width+0.5, oCan.height/2); // trace une ligne

ctx.moveTo(oCan.width/2,             0.5); // va au milieu horizontal du canvas, en haut
ctx.lineTo(oCan.width/2, oCan.height+0.5); // trace une ligne

ctx.moveTo(           0.5,             0.5);
ctx.lineTo(oCan.width+0.5, oCan.height+0.5);

ctx.moveTo(oCan.width+0.5,             0.5);
ctx.lineTo(           0.5, oCan.height+0.5);

ctx.stroke(); // c'est ici que les traits sont effectivement tracés.
}  // canvas_lignes1
</script>

Déplace une image à la souris. Cliquez - glisser l'image du ballon.

Code :

??) Déplace une image à la souris. Cliquez - glisser l'image du ballon.<br>
<br>

<script type="text/javascript">

var gloCaptured = null; // Objet sur lequel on a cliqué.
var glnPlaceMousePosX = 0; // Position de la balise cliquée relativement à la souris
var glnPlaceMousePosY = 0; // Position de la balise cliquée relativement à la souris

function myMouseDown(evt) {
//=========================
// On a cliqué sur une image ou un DIV
// Indique que le bouton gauche de la souris est pressé.
// C.f. https://www.w3schools.com/jsref/dom_obj_event.asp
//console.log(evt); // Donne beaucoup d'information dans la console Web, lors du développement.
//console.log(evt.currentTarget); // Référence à la balise qui a déclanché l'événement
//console.log(evt.target); // Référence à la balise sur laquelle on a cliqué.

// Ne fait rien si on a déjà cliqué sur un objet
if (gloCaptured != null) return;

// mémorise l'objet qui a subit le clique
gloCaptured = evt.currentTarget;

// Mémorise où on a cliqué sur l'objet.
glnPlaceMousePosX = parseInt(gloCaptured.offsetLeft) - evt.pageX;
glnPlaceMousePosY = parseInt(gloCaptured.offsetTop)  - evt.pageY;

// Capture les déplacements de la souris et le mouseUp
document.addEventListener('mousemove', myMouseMove, false);
document.addEventListener('mouseup', myMouseUp, true);

return false;  // sinon la capture se fait mal.
} // myMouseDown

function myMouseMove(evt) {
//=========================
// Si un clique a été fait sur un objet,
// déplace l'objet en fonction de la position de la souris.

if (!gloCaptured) {
  // le bouton de la souris est relaché ou on n'avait pas cliqué un objet déplaçable
  return true;  // pas de clique fait sur un objet.
  }

// déplace l'objet en fonction de la position de la souris.
var posX = evt.pageX + glnPlaceMousePosX;
if (posX < 0) posX = 0;
if (posX > window.innerWidth - parseInt(gloCaptured.width)) posX = window.innerWidth - parseInt(gloCaptured.width);
gloCaptured.style.left = posX + "px";

var posY = evt.pageY + glnPlaceMousePosY;
//if (posY > window.innerHeight ) posY = window.innerHeight;
gloCaptured.style.top  = posY + "px";

return false;
} // myMouseMove

function myMouseUp(evt) {
//=======================
// action quand lâche le bouton de la souris.
document.removeEventListener('mousemove', myMouseMove, false);
document.removeEventListener('mouseup', myMouseUp, true);
gloCaptured = null; // indique qu'on lâché le bouton de la souris.

return false;
} // myMouseUp

</script>

<div style="position:relative;">
  <img src="images/ballon3.gif" alt="ballon_3" id="divBallon3b" width=89 height=106
       style="position:absolute; left:600px; top:-40px; z-index:5;" 
       onmousedown="return myMouseDown(event);">
  <img src="images/BouleRouge.png" alt="boule rouge" width=20 height=20
       style="position:absolute; left:500px; top:-20px; z-index:6;" 
       onmousedown="return myMouseDown(event);">
</div>

Comment sortir d'une boucle dans une boucle, avec : break label;
Code :

var n1 = 0;
var n2 = 0;
BoucleAquitter: while (n1 < 1000) {
  while (n2 < 1000) {
    if (n1 * n2 > 10000) break BoucleAquitter; // Sort des deux boucles.
    n2++;

    if (n1 + n2 > 1020) break;  // Un break simple, qui sort pour aller dans la boucle précédente
    } // while (n2 < 1000) {
  n2 = 0;
  n1++;

  if (n1 + n2 > 10000) break;  // Un break simple, qui sort d'une boucle.
  } // while (n1 < 1000) {

Écriture de texte dans un canvas et mesure de dimensions.
Références sur les canvas :
Une référence sur les canvas, en anglais.
Canvas textAlign Property, en anglais.
Canvas textBaseline Property, en anglais.
CanvasRenderingContext2D: textBaseline property, en anglais.
TextMetrics, pour mesurer les dimensions d'un texte.
Point (unité). Un point = 0.3514 mm env. 1/72 inch.

Plusieurs exemples d'utilisation de canvas et de programmation objet dans mes pages Web :
Exemples de tracés de diverses figures.
Coordonnées des pixels dans un Canvas. (X + 0.5, Y + 0.5) == centre du pixel (X, Y).
Mon cours d'OC 2014, avec beaucoup d'exemples.
Un jeu de cours dans un Canvas.
Évolution dune onde. Le canvas adapte ses dimensions à la fenêtre.
Math-spline et B-spline.
Animation de la Terre.
Un calculateur de barèmes.

Code :

??) <b>Écriture de texte</b> dans un <b>canvas</b> et mesure de dimensions.<br>
<canvas id="idCanvas2" width="700" height="300" 
        style="background-color:rgb(200,255,255); border:1px solid rgb(200,200,200);">
Votre navigateur ne supporte pas le tag &lt;canvas&gt;.</canvas><br>

<script>

function canvas_lignes2() {
//=========================
// Écriture de texte dans un canvas
// Et mesure de dimension du texte dans le canvas

// Création de deux variables pour accéder au canvas
var oCan = document.getElementById("idCanvas2");   
var ctx = oCan.getContext("2d");

// Une ligne verticale rouge
ctx.beginPath();
ctx.strokeStyle="rgb(255, 0,0)";
ctx.moveTo(120, 20);
ctx.lineTo(120, 130);    
ctx.stroke(); // c'est ici que le trait est effectivement tracé.

ctx.font = "14px Arial";

// Montre les différentes valeurs de  "textAlign" 
ctx.textAlign = "start";
ctx.fillText("textAlign = start", 120, 40);
ctx.textAlign = "left";
ctx.fillText("textAlign = left", 120, 60);
ctx.textAlign = "end";
ctx.fillText("textAlign = end", 120, 80);
ctx.textAlign = "right";
ctx.fillText("textAlign = right", 120, 100); 
ctx.textAlign = "center";
ctx.fillText("textAlign = center", 120, 120);

// Ligne rouge en  y = 180
ctx.strokeStyle = "red";
ctx.moveTo(250, 40);
ctx.lineTo(700, 40);
ctx.stroke();

ctx.font = "20px Arial";
ctx.textAlign = "start";

//Place each word at y=100 with different textBaseline values
ctx.textBaseline = "top";
ctx.fillText("Top", 260, 40);
ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 300, 40);
ctx.textBaseline = "middle";
ctx.fillText("Middle", 370, 40);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic", 440, 40);
ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 550, 40); 

// Texte, avec mesure de dimension et mise d'un cadre
var text1 = "Un Texte g p j.";
var X1 = 20,  Y1 = 160,  DY = 16;
ctx.textAlign = "start";
ctx.textBaseline = "alphabetic";
ctx.font = "20pt Arial";
ctx.fillText(text1, X1, Y1); 
var metric1 = ctx.measureText(text1);

ctx.beginPath();
ctx.strokeStyle="rgb(0,0,0)";
ctx.lineWidth = 1;
ctx.moveTo(X1 - 2.5, Y1 +2.5 + metric1.actualBoundingBoxDescent); // gauche, bas
ctx.lineTo(X1 - 2.5 + metric1.width + 5, Y1 + 2.5 + metric1.actualBoundingBoxDescent); // droite, bas
ctx.lineTo(X1 - 2.5 + metric1.width + 5, Y1 + 2.5 - metric1.actualBoundingBoxAscent - 5); // droite, haut
ctx.lineTo(X1 - 2.5, Y1 + 2.5 - metric1.actualBoundingBoxAscent - 5); // gauche, haut
ctx.lineTo(X1 - 2.5, Y1 + 2.5 + metric1.actualBoundingBoxDescent); // gauche, bas
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle="rgb(0,255,0)";
ctx.moveTo(X1 - 2.5, Y1 +2.5); // bas gauche
ctx.lineTo(X1 - 2.5 + metric1.width + 5, Y1 + 2.5); // souligne et coupe les pieds
ctx.stroke();

ctx.font = "12px Arial";
Y1 += 2*DY;
ctx.fillText("metric1.width= " + metric1.width, X1, Y1);  Y1 += DY;
ctx.fillText("metric1.actualBoundingBoxAscent= " + metric1.actualBoundingBoxAscent, X1, Y1);  Y1 += DY;
ctx.fillText("metric1.actualBoundingBoxDescent= " + metric1.actualBoundingBoxDescent, X1, Y1);  Y1 += DY; 

ctx.fillText("metric1.alphabeticBaseline= " + metric1.alphabeticBaseline, X1, Y1);  Y1 += DY; 
ctx.fillText("metric1.hangingBaseline= " + metric1.hangingBaseline, X1, Y1);  Y1 += DY; 
ctx.fillText("metric1.actualBoundingBoxLeft= " + metric1.actualBoundingBoxLeft, X1, Y1);  Y1 += DY; 
ctx.fillText("metric1.actualBoundingBoxRight = " + metric1.actualBoundingBoxRight , X1, Y1);  Y1 += DY; 

X1 += 280;
Y1 -= 7*DY;
ctx.fillText("metric1.ideographicBaseline= " + metric1.ideographicBaseline, X1, Y1);  Y1 += DY; 
ctx.fillText("metric1.fontBoundingBoxDescent= " + metric1.fontBoundingBoxDescent, X1, Y1);  Y1 += DY; 

ctx.fillText("metric1.fontBoundingBoxAscent= " + metric1.fontBoundingBoxAscent, X1, Y1);  Y1 += DY; 
Y1 += DY; 
ctx.fillText("( metric1.emHeightAscent= " + metric1.emHeightAscent + " )", X1, Y1);  Y1 += DY; 
ctx.fillText("( metric1.emHeightDescent= " + metric1.emHeightDescent + " )", X1, Y1);  Y1 += DY; 

// Résolution de l'écran en  DPI
Y1 = 90;
ctx.fillText("Résolution en DPI ~= " + 
    72 * (metric1.actualBoundingBoxAscent + metric1.actualBoundingBoxDescent) / 20
  , X1, Y1);  Y1 += DY;  // 20 car font = 20 pt
ctx.fillText("Résolution en DPI ~= " + 
    72 * (metric1.emHeightAscent + metric1.emHeightDescent) / 20 + "   un peu plus précis"
  , X1, Y1);  Y1 += DY;  // 20 car font = 20 pt
ctx.fillText("20 pt ~= " + 
    (metric1.actualBoundingBoxAscent + metric1.actualBoundingBoxDescent) + " pixels"
  , X1, Y1);  Y1 += DY;
ctx.fillText("Font = 20 pt, résolution = 72 * hauteur (pixels) / 20"
  , X1, Y1);  Y1 += DY;

// Cadre
ctx.beginPath();
ctx.strokeStyle="rgb(0,0,255)"; // Couleur des lignes
ctx.lineWidth = 3;
ctx.moveTo(6.5, 6.5); // haut gauche
ctx.lineTo(6.5, oCan.height - 6.5); // trace une ligne
ctx.lineTo(oCan.width - 6.5, oCan.height - 6.5);
ctx.lineTo(oCan.width - 6.5, 6.5);
ctx.lineTo(6.5, 6.5);
ctx.stroke(); // c'est ici que les traits sont effectivement tracés.
}  // canvas_lignes1

canvas_lignes2();

</script>

Combinaisons d'images dans un canvas, avec xor ou ce qu'on veut
Références :
context.globalCompositeOperation = "value", choix de manière de dessiner sur une image.
Canvas globalCompositeOperation Property, illustrations.

Deux exemples d'utilisations .
Un premier exemple, qui simule la commande tante : ctx.globalCompositeOperation = "darker";.
Un deuxième exemple, plus souple qui permet n'importe quel combinaison et traitement d'image.

Code :

??) Combinaisons d'images dans un canvas, avec xor ou ce qu'on veut<br>

<form name="nameFormCanvas3">
<input type="radio" id="idCanvas3Radio01" name="nomRadioCanvas3" checked> "Darker", le plus foncé &nbsp;
<input type="radio" id="idCanvas3Radio02" name="nomRadioCanvas3"> "XOR".<br>  
<button type="button" onclick="StartDemoCanvas3();">Démarre l'animation.</button> &nbsp;
Valeur X d'arrêt = <input name="nameCanvas3StopValue" size="3" value="183"> &nbsp;
181 est bien.<br>
</form>

<canvas id="idCanvas3" width="700" height="300" 
        style="background-color:rgb(0,255,255); border:1px solid rgb(20,20,20);">
Votre navigateur ne supporte pas le tag &lt;canvas&gt;.</canvas><br>

<script>
var glnCanvas3TimerID = 0;
var glnCanvas3Xpos1;
var glnCanvas3Ypos1;
var glnCanvas3Xpos2;
var glnCanvas3Ypos2;

function canvas_lignes3() {
//=========================
// Combinaison de dessins dans un canvas
// Voir plusieurs exemples sous : https://www.w3schools.com/tags/playcanvas.php?filename=playcanvas_globalcompop
// Ici, une autre méthode est utilisée

var oCan = document.getElementById("idCanvas3");   
var ctx = oCan.getContext("2d");
var nXmax = oCan.width;
var nYmax = oCan.height;
var nx = 1;
var ny = 1;
var nValeurXarret = parseInt(nameFormCanvas3.nameCanvas3StopValue.value);
if (nValeurXarret > 700) nValeurXarret = 700;

// Reproduit la commande inexistante : glcanContext.globalCompositeOperation = "darker";

// C.f. : https://www.w3schools.com/tags/canvas_globalcompositeoperation.asp
// C.f. : https://www.w3schools.com/tags/playcanvas.php?filename=playcanvas_globalcompop
ctx.globalCompositeOperation = "source-over";  // Default
//ctx.clearRect(0,0,nXmax,nYmax); // Efface le canvas
ctx.fillStyle="#ffffff";
ctx.fillRect(0, 0, nXmax, nYmax);

// Première image, points verts
ctx.fillStyle="#ffffff";
ctx.fillRect(0, 0, nXmax, nYmax);

ctx.fillStyle="#60fe20";
for (nx=1; nx<=12; nx++) {
  for (ny=1; ny<=12; ny++) {
    ctx.beginPath(); //On démarre un nouveau tracé
    ctx.lineWidth = 0;
    ctx.arc(glnCanvas3Xpos1 + nx * 20, glnCanvas3Ypos1 + ny * 20, 7, 0, Math.PI*2); //On trace la courbe délimitant notre forme
    ctx.fill(); //On utilise la méthode fill(); si l'on veut une forme pleine
    ctx.closePath();   
    }
  }
// Sauve la première image
var imgData1 = ctx.getImageData(0, 0, 1280, 500);

// Deuxième image, points rouges
ctx.fillStyle="#ffffff";
ctx.fillRect(0, 0, nXmax, nYmax);

ctx.fillStyle="#fe6020";
for (nx=1; nx<=12; nx++) {
  for (ny=1; ny<=12; ny++) {
    ctx.beginPath(); //On démarre un nouveau tracé
    ctx.lineWidth = 0;
    ctx.arc(glnCanvas3Xpos2 + nx * 20, glnCanvas3Ypos2 + ny * 20, 7, 0, Math.PI*2); //On trace la courbe délimitant notre forme
    ctx.fill(); //On utilise la méthode fill(); si l'on veut une forme pleine
    ctx.closePath();   
    }
  }

// Sauve la deuxième image
var imgData2 = ctx.getImageData(0, 0, 1280, 500);

if ( document.getElementById('idCanvas3Radio01').checked) {
  // Combinaison des deux images, on prend la couleur la plus foncée.
  for (let i = 0; i < imgData1.data.length; i += 4) {
    if (imgData1.data[i+0] > imgData2.data[i+0]) imgData1.data[i+0] = imgData2.data[i+0] ;
    if (imgData1.data[i+1] > imgData2.data[i+1]) imgData1.data[i+1] = imgData2.data[i+1] ;
    if (imgData1.data[i+2] > imgData2.data[i+2]) imgData1.data[i+2] = imgData2.data[i+2] ;
    }
  }
else {
  for (let i = 0; i < imgData1.data.length; i += 4) {
    imgData1.data[i  ] = imgData2.data[i  ] ^ imgData1.data[i];
    imgData1.data[i+1] = imgData2.data[i+1] ^ imgData1.data[i+1];
    imgData1.data[i+2] = imgData2.data[i+2] ^ imgData1.data[i+2];
    imgData1.data[i+3] = 255;
    }
  }
    
ctx.putImageData(imgData1, 0, 0);

// Modification des positions, pour l'animation
glnCanvas3Xpos2 -= 1;
if (glnCanvas3Ypos2 >  0) glnCanvas3Ypos2 -= 1;
if (glnCanvas3Ypos1 < 60) glnCanvas3Ypos1 += 1;
glnCanvas3Xpos1 += 1;

// Test pour arrêter l'animation    
if (glnCanvas3Xpos1 >= nValeurXarret) {
   clearInterval(glnCanvas3TimerID);
   glnCanvas3TimerID = 0;
  }
}  // canvas_lignes3

function StartDemoCanvas3() {
//===========================
// Animation des points dans le Canvas3
if (glnCanvas3TimerID == 0) {
  glnCanvas3Xpos1 =   0;
  glnCanvas3Ypos1 =   0;
  glnCanvas3Xpos2 = 460;
  glnCanvas3Ypos2 = 120;
  glnCanvas3TimerID = setInterval("canvas_lignes3()", 20);
  }
} // StartDemoCanvas3

</script>

Dimensions et position d'un "div"
Références :
HTML DOM Element getBoundingClientRect().
Window getComputedStyle().
.

Dans ce div, on indiquera diverses manières de connaître sa position et ses dimensions.

Remarquez qu'en pressant sur le bouton ci-dessus, la hauteur affichée du "div" change.

Code :

??) <span class='cpt'> </span>Dimensions et position d'un "div"<br>
Références :<br>
<a href="https://www.w3schools.com/jsref/met_element_getboundingclientrect.asp" target="_blank">
  HTML DOM Element getBoundingClientRect()</a>.<br>
<a href="https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp" target="_blank">
  Window getComputedStyle()</a>.<br>
<a href="" target="_blank">
  </a>.<br>
<div id="idDivPosition_dimentions" style="position:relative;">
  Dans ce div, on indiquera diverses manières de connaître sa position et ses dimensions.<br>
</div>
  <button type="button" onclick="ShowPosition_dimentions();">Recalcule des dimensions et la position du "div".</button><br>
Remarquez qu'en pressant sur le bouton ci-dessus, la hauteur affichée du "div" change.<br>
<br>
<script>
  
function ShowPosition_dimentions() {
//==================================
var oDivPosition = document.getElementById("idDivPosition_dimentions");
var strPosition = "Dans ce div, on indiquera diverses manières de connaître sa position et ses dimensions.<br>";
strPosition += "oDivPosition.clientLeft = " + oDivPosition.clientLeft + "<br>";
strPosition += "oDivPosition.clientTop = " + oDivPosition.clientTop + "<br>";
strPosition += "oDivPosition.clientWidth = " + oDivPosition.clientWidth + "<br>";
strPosition += "oDivPosition.clientHeight = " + oDivPosition.clientHeight + "<br>";
strPosition += "oDivPosition.offsetLeft = " + oDivPosition.offsetLeft + "<br>";
strPosition += "oDivPosition.offsetTop = " + oDivPosition.offsetTop + "<br>";
strPosition += "oDivPosition.offsetWidth = " + oDivPosition.offsetWidth + "<br>";
strPosition += "oDivPosition.offsetHeight = " + oDivPosition.offsetHeight + "<br>";
strPosition += "oDivPosition.getBoundingClientRect() = " + oDivPosition.getBoundingClientRect() + "<br>";
strPosition += "window.getComputedStyle(oDivPosition) = " + window.getComputedStyle(oDivPosition) + "<br>";
strPosition += "Affichez dans : console.log(window.getComputedStyle(oDivPosition)); pour voir les centaines de propriétés.<br>";
strPosition += "Idem avec : console.log(oDivPosition.getBoundingClientRect());<br>";
strPosition += "oDivPosition.getBoundingClientRect().left= " + oDivPosition.getBoundingClientRect().left + "<br>";
strPosition += "oDivPosition.getBoundingClientRect().right= " + oDivPosition.getBoundingClientRect().right + "<br>";
strPosition += "oDivPosition.getBoundingClientRect().width= " + oDivPosition.getBoundingClientRect().width + "<br>";
strPosition += "oDivPosition.getBoundingClientRect().top= " + oDivPosition.getBoundingClientRect().top + "<br>";
strPosition += "oDivPosition.getBoundingClientRect().bottom= " + oDivPosition.getBoundingClientRect().bottom + "<br>";
strPosition += "oDivPosition.getBoundingClientRect().height= " + oDivPosition.getBoundingClientRect().height + "<br>";
strPosition += "oDivPosition.getBoundingClientRect().x= " + oDivPosition.getBoundingClientRect().x + "<br>";
strPosition += "oDivPosition.getBoundingClientRect().y= " + oDivPosition.getBoundingClientRect().y + "<br>";
oDivPosition.innerHTML = strPosition;
//console.log(oDivPosition.getBoundingClientRect());
//console.log(window.getComputedStyle(oDivPosition));
} // ShowPosition_dimentions

ShowPosition_dimentions();
</script>

À venir...
Code :

??) .<br>

Plan du Site : Home bgweb.html exemples.html a3js1090_javascript_exemples.html

Page mise à jour le 28 janvier 2024 par Bernard Gisin
Hébergement par : www.infomaniak.ch