javascript

introduction

On apprendra que le strict minimum de javascript ici : on ne fera essentiellement que l’utiliser. Si vous avez des notions de python ça devrait se faire sans problème.

Si vous voulez pus d’info sur le langage et ses spécificités :

l’interpréteur

Tout comme python, javascript est un langage interprété. Il lui faut un interpréteur pour fonctionner. Il en existe essentiellement 2 :

Nous allons présenter les deux, mais dans une optique de développement d’un site front le javascript peut être exécuté par le navigateur via un fichier html, c’est d’ailleurs ce que nous ferons exclusivement ici.

On exécutera le code depuis un fichier html. La sortie standard est la console, que vous pouvez voir avec les outils de développement (... du menu > show console drawer, ou en appuyant sur la touche alors que la fenêtre des outils de développement est ouverte).

exemple : fichier hello_javascript.html. Ouvrez le dans un navigateur et un éditeur

node

Une fois https://nodejs.org/en/, tapez node dans shell. Vous êtes dans un interpréteur javascript.

Langage

Tout comme python, un script javascript est exécuté ligne à ligne. A la moindre erreur le script s’arrête.

Testez le code suivant :

<!DOCTYPE html>

<html>
<head>
<title>Hello World en javascript avec des erreurs</title>
<meta charset="utf-8" />
</head>

<body>
<script>
     window.allert("Hello World!"); //une erreur !
    console.log("Hello World!");
</script>
</body>

</html>

Rien n’est écrit dans la console et une croix rouge est apparu.

  1. corrigez la faute et exécutez les code.
  2. une fenêtre s’affiche. Elle est modale. Cela signifie que le code s’est mis en pause. Hello world ne s’affiche qu’une fois que l’on a tapé OK.

Il est INDISPENSABLE d’exécuter son code avec les outils de développement pour savoir quand il y a eu une erreur. Sans ça, il est impossible de dire si tout s’est bien passé.

Attention : l’utilisation de window.alert est certe marrant, mais c’est une action modale (le code est en pause jusqu’à ce que l’on ait appuyé sur OK), on ne sait donc pas tout de suite si le code fonctionne ou pas. Il vaut mieux faire ses tests avec la console en utilisant la fonction console.log(.)

fonctions et variables

<!DOCTYPE html>

<html>
<head>
<title>fonction et variables en javascript</title>
<meta charset="utf-8" />
</head>

<body>
<script>
    // définition classique d'une fonction
    function du_texte(texte) {
        console.log(texte)
    }
    du_texte("coucou")
    
    // la variable texte_plus_entete est associé à l'objet function
    texte_plus_entete = function(texte) {
        console.log("Et ben : " + texte)
    }
    //on peut l'exécuter
    texte_plus_entete("zut alors")
    
    compteur = 0 //les variables sont globales
    entete_texte = "S'il vous plait ? "
    function entete_dans_variable(texte) {
        console.log(entete_texte + texte)
        compteur += 1 //on change la variable globale
        console.log("cette fonction a été appelée " + compteur + " fois.")
    }
    
    entete_dans_variable("Bonjour ! ")
    entete_dans_variable("Au revoir.")
</script>
</body>
</html>

Le bout de code ci-dessus montre plusieurs spécificités de javascript :

Beaucoup de choses en web sont asynchrones : on envoie une requête au serveur et on exécute le résultat lorsque l’on obtient la réponse du serveur. De là, beaucoup de fonctions ne sont utilisées qu’une seule fois. C’est ce qui explique que l’on utilise abondamment de fonction anonymes.

types d’objets

A tester dans la console.

javascript pour le web

L’utilisation de javascript dans le web a 3 but :

manipulation de l’arbre dom

<html>
    <head>
      <title>Magie javascript</title>


    </head>
    <body>
      <style>
        html, body {
          margin: 0;
          padding:0;

          background: skyblue;
          color: #FFFFFF;
          font-size: 2em;
          text-align: center;
        }
        .milieu {
          margin: 10px auto;
          height: 50px;
          width: 20px;
        }
        .color {
          background-color: olive;
        }
      </style>

      <h1> Enfin du web !</h1>
      <p> et on aime ça</p>
      <div id="mon_div" class="milieu color"></div>

      <script>
        document.getElementById("mon_div").onclick = function() {
          document.getElementById("mon_div").style.backgroundColor = "blue"
        }

      </script>
    </body>
  </html>

Testez ce code. Que fait-il ? Et pourquoi ?

On a mis le code en fin de fichier parce qu’il est exécuté dès qu’il est vu. Si on l’avait exécuté au début les blocs n’existaient pas encore et le document.getElementById n’aurait rien trouvé.

gestion des évènements

Remplacez la partie script de l’exemple précédent par le code suivant :

 <script>
    blue = false;
    document.getElementById("mon_div").onclick = function() {
      if (blue) {
        blue = false;
        document.getElementById("mon_div").style.backgroundColor = "olive"
      }
      else {
        blue = true;
        document.getElementById("mon_div").style.backgroundColor = "blue"
      }

    }
  </script>

Testez ce code. Que fait-il ?

On a associé une fonction à un évènement, ici le fait de cliquer sur un élément donné (le div d’id #mon_div). On voit bien ici l’utilité d’une fonction anonyme, et en creux l’utilisation d’une variable globale (on modifie blue dans une fonction. Ce n’est pas possible en python par exemple)

bibliothèques

La gestion de l’arbre DOM à la main en javascript est assez lourde. On préfèrera toujours utiliser une bibliothèque. C’est https://jquery.com/ qui est la plus utilisée pour ce genre de chose. Elle est quasi-systématiquement incluse par les bibliothèques javascript.

Chargement de jquery

exemple : fichier hello_jquery.html. Ouvrez le dans un navigateur et un éditeur

Pour l’instant on a juste chargé jquery via son cdn. On a utilisé une version minifiée pour gagner du temps de chargement.

On va utiliser la console pour se familiariser avec la sélection d’élément via jquery. Elle se fait toujours par un sélecteur css entouré d’un dollar suivi d’une méthode à exécuter. Par exemple : console.log($("p").html())

A faire dans la console :

En utilisant l’aide de jquery (https://api.jquery.com/) :

gestion des évènements

On utilise souvent le javascript et jquery pour réagir aux évènements :

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Magie jquery</title>

            <style>
                html, body {
                    margin:0;
                    padding:0;

                    background: skyblue;
                    color: #FFFFFF;
                    font-size: 2em;
                    text-align: center;
                }
            </style>

            <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
            <script>
                $(function() {
                    $("p").hover(
                        function() {
                            $(this).css("text-decoration", "underline")
                        },
                        function() {
                            $(this).css("text-decoration", "none")
                        }
                    )
                })
            </script>

        </head>
        <body>
            <h1>Enfin du web !</h1>
            <p>Et on aime ça.</p>
        </body>
    </html>

testez ce code. Que fait-il ?

Ce code fonctionne alors qu’il est au début du html ? Oui parce que le code est un paramètre (la fonction) passée en argument de jquery $(paramètre). Ce paramètre n’est exécuté que lorsque la page est chargée (le texte, les image et tout le reste). C’est toujours comme ça que l’on utilisera jquery.

Utilisation du nom $(this) qui, comme en java signifie : l’objet courant. Ici le paragraphe qui est à l’origine de l’exécution de la fonction.

A vous : faites en sorte que lorsque l’on clique sur le titre il s’ajoute “coucou !”.