JavaScript – Points clés à retenir

LEÇON

 

Généralités

  • Le code JavaScript est exécuté côté client (par le navigateur).
  • JavaScript est utile pour pages interactives, animations, etc.
  • JavaScript permet la manipulation de contenu et de styles à la volée.
  • Le code JavaScript peut être déclenché au chargement de la page et/ou par une action de l'utilisateur (évènement souris).

 

Inclusion dans la page

Deux façons d'inclure du code JavaScript dans une page web :

  • en JavaScript intégré, avec la balise <script> sans attribut src
  • en fichier externe, avec la balise <script> avec attribut src

 

Javascript intégré :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre</title>
        <script type="text/javascript" language="JavaScript"><!--
          function maFonction() {
          ...
          } //--></script>
    </head>
    ...
</html>

Fichier externe :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre</title>
        <script type="text/javascript" language="JavaScript"
                src="moncode.js"></script>
    </head>
    ...
</html>

 

Préparation des éléments dynamiques via l'attribut id

Étiqueter tous les éléments dynamiques avec chacun un identifiant unique. Les identifiants sont exploités dans le code JavaScript pour viser les éléments à modifier dans la page.

Modifications typiques (liste non-exhaustive !) :

  • ajout/modification du contenu de l'élément
  • manipulation des styles CSS de l'élément
  • faire apparaître/disparaître l'élément (manipulation des styles CSS, propriété display)

 

Exemple avec 2 éléments manipulables via le code JavaScript  :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre</title>
        <script type="text/javascript" language="JavaScript"
                src="moncode.js"></script>
    </head>
    <body>
      <h1 id="titre"></h1>
      <p id="description"></p>
    </body>
</html>

 

Déclencher le code JavaScript au chargement de la page

Deux façons de faire

  • via l'attribut onload de la balise body
  • via la fonction window.onload dans le JavaScript

 

Via l'attribut onload de la balise body :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre</title>
        <script type="text/javascript" language="JavaScript"
                src="moncode.js"></script>
    </head>
    <body onload="maFonction()">
      <h1 id="titre"></h1>
      <p id="description"></p>
    </body>
</html>

Via la fonction window.onload dans le JavaScript (remarque : l'appel à la fonction window.onload peut être fait depuis le JavaScript inline ou depuis un fichier externe) :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre</title>
        <script type="text/javascript" language="JavaScript"><!--
          window.onload = function() { maFonction(); }; //--></script>
    </head>
    ...
</html>

 

Déclencher le code JavaScript suite à un évènement

Plusieurs possibilités :

  • via l'attribut href de la balise a : le code est déclenché par le clic sur le lien
  • via un attribut de type évènement (onclick, onmouseover, onmouseout, etc) sur n'importe quel élément

 

Exemple href :

    ...
    <a href="javascript:maFonction()">cliquez ici</a>
    ...

 

Exemple évènement :

    ...
    <img src="monimage.jpg" onclick="maFonctionClick()"
                   onmouseover="maFonctionOver()"
                   onmouseout="maFonctionOut()">
    ...

 

Dans le code JavaScript, trouver un élément à manipuler dans la page

Si on veut manipuler la page depuis le code JavaScript, on est obligé d'opérer sur un élément ou un autre. Pour viser le bon élément on le trouve via son identifiant.

Pour ceci on utilise la fonction document.getElementById()

Code JavaScript

function maFonction()
{
  var elementTitre = document.getElementById("titre");
  var elementDescription = document.getElementById("description");
  ...
}

Code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre</title>
        <script type="text/javascript" language="JavaScript"
                src="moncode.js"></script>
    </head>
    <body onload="maFonction()">
      <h1 id="titre"></h1>
      <p id="description"></p>
    </body>
</html>

 

Manipuler le contenu d'un élément depuis le code JavaScript

Après avoir trouver l'élément via document.getElementById on exploite la propriété innerHTML pour manipuler le contenu.

Exemple

function maFonction()
{
  var elementTitre = document.getElementById("titre");
  var elementDescription = document.getElementById("description");
  elementTitre.innerHTML = "Lorem ipsum";
  elementDescription.innerHTML = "Integer elementum "
      + "consectetur arcu, in consectetur est viverra id.";
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre</title>
        <script type="text/javascript" language="JavaScript"
                src="moncode.js"></script>
    </head>
    <body onload="maFonction()">
      <h1 id="titre"></h1>
      <p id="description"></p>
    </body>
</html>

 

Manipuler les styles  d'un élément depuis le code JavaScript

Après avoir trouver l'élément via document.getElementById on exploite la propriété style pour manipuler les styles.

Exemple

function maFonction()
{
  var elementImage = document.getElementById("monimage");
  elementImage.style.padding = "20px";
  elementImage.style.backgroundColor = "pink";
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre</title>
        <script type="text/javascript" language="JavaScript"
                src="moncode.js"></script>
    </head>
    <body>
      <img src="image5.jpg" id="monimage">
      <a href="javascript:maFonction()">cliquer ici</a>
    </body>
</html>