cClaude.rocks ☕ Le blog

[Nouvelles technologies, sciences et coups de gueule…]

Menu

Ce billet fait partie d’une sĂ©rie d’une dizaine billets : #atelier-web.

Cet atelier n’est pas prĂ©vu pour fonctionner sur les smartphones, certain exemples peuvent s’afficher de maniĂšre inattendue sur ces appareils.

Merci de laisser un commentaire si vous avez essayé ou fini cet atelier. Le commentaire ne sera pas publié si vous en faite la demande.

Nous avons presque tous les Ă©lĂ©ments nĂ©cessaires Ă  l’affichage de notre projet, sauf que ce que nous voulons c’est pouvoir modifier notre dessin, il faut donc que l’affichage soit « calculer », pour cela nous allons utiliser le langage : JavaScript.

JavaScript est un langage de programmation de scripts que l’on retrouve frĂ©quemment dans les pages Web.

Nous avons vu comment passer de texte de gauche au rendu de droite. Pour cela nous avons utilisĂ© la notion de rĂ©Ă©criture de texte, nous avons ajoutĂ© en dĂ©but de ligne l’élĂ©ment <div class="ligne"> et en fin </div>.

Ensuite, nous avons remplacĂ© les « lettres » par une sĂ©quence <span class="CLASSE_COULEUR"></span> (nous avions garder le texte au milieu, mais il n’est plus indispensable).

...............
.....GGGG......
...GG....GG....
..G........G...
.G..........G..
.G..........G..
G.....RR.....G.
GRRRRR..RRRRRG.
G....R..R....G.
G.....RR.....G.
.G..........G..
.G..........G..
..G........G...
...GG....GG....
.....GGGG......

Nous allons reproduire cette approche naĂŻve en Javascript.


ඏ

Le premier code Javascript

Je vous propose de créer un nouveau fichier HTML avec le contenu suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Mon premier Javascrip</title>
</head>
<body>

<h2>Mon premier Javascript</h2>

<button type="button" onclick="document.getElementById('madateheure').innerHTML = Date()">
Cliquez ici pour afficher la date et l’heure.</button>

<p id="madateheure"></p>

</body>
</html>

Mon premier Javascript

Analysons toutes les nouvelles choses, présentes dans cette petite page.

Les nouveautés HTML

  • D’abord vous noterez la balise â‰șbutton≻ qui permet d’afficher un bouton sur lequel on peut cliquer. Tout ce qui est Ă  l’intĂ©rieur de la balise est considĂ©rĂ© comme appartenant au bouton.

  • L’attribut type sur â‰șbutton≻ est, ici, facultatif, il est prĂ©sent pour des raisons historiques.

  • L’attribut onclick sur â‰șbutton≻ est notre lien en HTML et Javascript, il indique que le code Javascript qui sera dĂ©clenchĂ© lors d’un « clique » de l’utilisateur.

  • L’attribut id sur â‰șp≻ dĂ©fini un identificateur, il contient une valeur ici « madateheure » qui doit ĂȘtre unique dans le document. Cela permet d’identifier un Ă©lĂ©ment de la page HTML. Notez que cet identificateur peut ĂȘtre sĂ©lectionnĂ© par le code CSS, comme retrouvĂ© par le code Javascript.

Le code Javascript

document.getElementById('madateheure').innerHTML = Date()
  • document est l’objet qui reprĂ©sente votre page HTML. Cet objet propose de nombreuses mĂ©thodes permettant d’interagir avec lui.

  • getElementById est le nom d’une de cette mĂ©thode. La traduction de « get element by Id » est « donne un Ă©lĂ©ment par son identificateur ». Elle prend donc un paramĂštre ici la chaĂźne de caractĂšre « madateheure ».

Cela veut dire que :

document.getElementById('madateheure')

retourne l’objet correspondant au code HTML :

<p id="madateheure"></p>
  • innerHTML est une propriĂ©tĂ©, prĂ©sente sur tous les Ă©lĂ©ments, permettant d'accĂ©der au code HTML contenu Ă  l'interrieur ("inner" voulant dire interrieur en Anglais).

  • = indique une affectation, cela veut dire que ce qui est Ă  droite du signe Ă©gal, sera mis dans ce qui est Ă  gauche.

  • Date() est une fonction javascript permettant d'obtenir la date et l'heure.


ඏ

Evitons les mélanges...

Comme pour le code CSS, il est conseiller d'Ă©crire le code Javascript en dehors de code HTML.

Nous allons faire cela en deux Ă©tapes. Dans un premier temps, nous allons dĂ©clarer une balise â‰șscript≻ dans l'entĂȘte du document HTML. 🔳

Pour cela nous allons créer une fonction "afficheHeure()" à l'aide du mot clé function, et l'utiliser dans le code HTML.

  • Appel d'une fonction dans le code HTML
    <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title>Mon premier Javascript</title>
      <script>
    
    function afficheHeure() {
      document.getElementById('madateheure').innerHTML = Date();
    }
    
    </script>
    </head>
    <body>
    
      <h2>Mon premier Javascript</h2>
    
      <button type="button" onclick="afficheHeure()">Cliquez ici pour afficher la date et l’heure.</button>
    
      <p id="madateheure"></p>
    
    </body>
    </html>
    

Mais nous pouvons faire encore mieux en sĂ©parant complĂštement le code Javascript du code HTML. 🔳

  • Injection du code Javascript dans le code HTML
    <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title>Mon premier Javascript (séparation HTML/Javascript)</title>
    </head>
    <body>
    
      <h2>Mon premier Javascript (séparation HTML/Javascript)</h2>
    
      <button id="monbouton">Cliquez ici pour afficher la date et l’heure.</button>
    
      <p id="madateheure"></p>
    
    <script>
    
    function afficheHeure() {
      document.getElementById('madateheure').innerHTML = Date();
    }
    
    /* Equivalent Ă  onclick="afficheHeure()" */
    document.getElementById('monbouton').addEventListener( 'click', afficheHeure );
    
    </script>
    </body>
    </html>
    
  • Notez dans cette version que le bouton est dĂ©clarĂ© comme suit :
<button id="monbouton"></button>
  • Que la balise â‰șscript≻ a Ă©tĂ© dĂ©placĂ©e Ă  la fin de â‰șbody≻ (juste avant la fin plus prĂ©cisĂ©ment).

  • Et on a ajoutĂ© le code Ă©quivalent Ă  onclick="afficheHeure() sous la forme :

document.getElementById('monbouton').addEventListener( 'click', afficheHeure );
  • document.getElementById('monbouton') retrouve le bouton.

  • addEventListener est une mĂ©thode permettant d’écouter les Ă©vĂšnements liĂ©s Ă  l’élĂ©ment depuis lequel la mĂ©thode est appelĂ©e.

  • addEventListener( 'click', afficheHeure ) prĂ©cise que l’on souhaite associer l’évĂšnement click Ă  la fonction nommĂ©e « afficheheure ».

On a dĂ©placĂ© le code Javascript Ă  la fin car pour parcourir le document avec getElementById. En effet, ce code est exĂ©cutĂ© par le navigateur immĂ©diatement, il faut donc ĂȘtre certain que l’élĂ©ment recherchĂ© ait dĂ©jĂ  Ă©tĂ© crĂ©Ă©.


ඏ

Références

L’atelier complet

኿


â„č 2006 - 2021 | 🏠 Retour Ă  l'accueil du domaine | 🏡 Retour Ă  l'accueil du blog