Le strict minimum

Même si p5-espress nous permet de mettre le pied à l'étrier plus vite, il reste quand même des choses qu'il faut savoir avant de l'utiliser.

Inclure du JS dans une page

Comme avec le CSS, il est possible d'avoir du Javascript local et du Javascript externe. Par contre ça ne s'écrit pas pareil et il y a quelques contraintes différentes.

JS local

Au même titre qu'il nous suffit de mettre un tag <style> pour pouvoir écrire du CSS interne à un fichier HTML, il est possible de mettre un tag <script> dans lequel on peut écrire du Javascript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // ici c'est du javascript
      // la preuve, je n'écris plus un commentaire de la même façon

      /* d'ailleurs, je peux aussi ecrire des commentaires
      comme ceci */
    </script>
  </body>
</html>

JS externe

En admettant un projet comme ceci:

Alors on peut importer le fichier javascript comme ceci

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- VVV L'IMPORT SE FAIT CI-DESSOUS VVV -->
    <script src="myScript.js"></script>
    <!-- ^^^ L'IMPORT SE FAIT CI-DESSUS ^^^ -->
  </body>
</html>

Vous noterez que dans les deux cas, le tag <script> se situe juste à la fin du <body>. C'est important parce que plus tard notre javascript manipulera les éléments HTML, or si on me le script est avant le contenu, alors javascript s'exécutera avant la création du contenu et on aura une erreur puisqu'on essaye de manipuler quelque chose qui n'existe pas.

Aussi, mettre le javascript à la fin nous garanti que le navigateur chargera l'interface d'abord puis la rendra interactive en exécutant le javascript. En terme d'UX c'est toujours mieux de vite montrer une interface qui sera très bientôt interactive que d'attendre que tout soit prêt pour montrer l'interface.

L'ordre d'execuction

Ce qu'on a vu jusqu'ici (HTML et CSS) sont des langages déclaratifs, tandis que Javascript est un langage impératif.

Autrement dit:

quand on écrit de l'HTML ou du CSS on écrit du contenu, on écrit comment les choses sont.
quand on écrit du javascript on écrit ce que la machine doit faire

HTML

<main>
  <p>salut</p>
  <p>ca va?</p>
</main>

Cet HTML décrit ma page, un élément <main> qui contient deux éléments <p>.

let cakes = 5;
let biscuits = 6;
console.log(cakes + biscuits);

Dans ce JS on:

créer une variable cakes et on lui donne la valeur 5
puis on créer une variable biscuits et on lui donne la valeur 6
puis on utilise la fonction console.log() qui a pour effet d'afficher quelque chose dans l'onglet console des outils de developement de notre navigateur, ici c'est la somme de cakes et biscuits.

L'ordre est crucial. Si je change au pif l'ordre de mes lignes d'HTML, ça marchera toujours. Peut être que l'ordre des <p> sur la page changera, peut être qu'ils sortiront du <main>, mais ça marchera. Alors qu'avec Javascript, je peux interchanger les deux premiçères lignes mais qu'est ce qu'il se passe si je met le console.log(cakes + biscuits) avant la création d'une variable ou même des deux? On aura une erreur, parcequ'on serait en train de demander à l'ordinateur d'afficher une variable qui n'existe pas au moment de la demande.

Les fonctions

On peut donner un nom à une valeur grâce à une variable, mais on peut aussi donner un nom à un bout de code. Dans ce cas, on exécute toujours le code de la première à la dernière ligne, sauf les lignes qui sont contenues dans la création d'une fonction.

On peut imaginer que pendant les 4 premières lignes ci-dessous on explique à l'ordinateur ce qu'il faudra faire quand on lui demendera, et à la fin de ce petit programme on lui demandera de faire 2 fois ce qu'on lui a expliqué plus tôt.

function sayHello() {
  console.log("hello");
  console.log("how is it going?");
}

let cakes = 5;
let biscuits = 6;

console.log(cakes + biscuits);

sayHello();
sayHello();

Donc,

on va créer une fonction sayHello(), sans exécuter son contenu. On va associer le code entre accolades au nom sayHello
puis on va créer la variable cakes
puis on va créer la variable biscuits
puis on va s'afficher le résultat de l'addition entre cakes et biscuits
puis on va appeler la fonction sayHello(), et donc exécuter son contenu
- ce qui fait qu'on va d'abord afficher "hello" dans la console
- puis on va afficher "how is it going?" dans la console
puis on va appeler la fonction sayHello() une deuxième fois, et donc exécuter son contenu à nouveau
- ce qui fait qu'on va d'abord afficher "hello" dans la console
- puis on va afficher "how is it going?" dans la console

Ce qu'il faut retenir

Ici mon but est uniquement de vous donner des clefs de lecture pour que je puisse démarrer le cours. On repassera en détail sur les concepts qu'on viens de voir.

J'ai uniquement besoin que vous reteniez que :

le code se lit et s'exécute de haut en bas, de la première à la dernière ligne.
SAUF si le code est dans le bloc de création d'une fonction. Si c'est le cas, ce code sera exécuté (de haut en bas) quand la fonction sera utilisée.

Voilà, on a fait le tour du minimum théorique à partir duquel on va pouvoir pratiquer, je ne sais pas comment faire moins.