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 à la page, 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 multi-lignes
      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 (...encore).

Aussi, mettre le javascript à la fin nous garanti que le navigateur chargera l'interface d'abord puis la rendra interactive via 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(), ce qui n'exécute pas son contenu. Le code entre accolades est maintenant associé 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.

Comment démarrer

Maintenant qu'on sait tout ça voici le fameux projet avec quelques pré-configurations supplémentaires.

Projet : p5-espress.

En l'ouvrant vous remarquerez que ça ressemble à un projet web comme ce que vous connaissez.

Dans l'index.html on a :

<body>
  <main></main>
  <script id="p5" src="libs/p5.js"></script>
  <script src="script.js"></script>
  <script src="libs/espress.js"></script>
</body>

Ce qu'il faut savoir c'est que, oui l'élément <main> est vide mais p5.js va y insérer un <canvas>, qui est un élément sur lequel on peut dessiner grace à du javascript.

Aussi, p5.js va créer tout un tas de fonctions que l'on pourra utiliser pour dessiner.

Votre code est un fichier javascript externe, vous n'avez pas besoin de toucher à l'HTML pour le moment donc autant ne pas le voir et travailler uniquement dans script.js.

Vous pouvez avoir plusieurs fichier de javascript dans votre projet et remplacer le chemin pour exécuter un de vos script

En remplacant ceci

<script src="script.js"></script>

comme ça:

<script src="monAutreScript.js"></script>

Et pour finir, espress repasse après p5.js pour changer quelques éléments et de configuration mais surtourt, il contient la ligne draw() et c'est la seule contrainte "magique" que je n'ai pas pu gommer. Donc votre code qui sert à dessiner est à mettre dans la fonction draw(), qui a l'obligation de se nommer comme ça et qui sera exécutée automatiquement au chargement de la page.

Il vous suffit de démarrer votre liveServer comme d'habitude et de vous concentrer uniquement sur le fichier script.js.

Vous saurez que ça marche si vous voyez un cercle blanc sur fond blanc quand vous ouvrez le projet dans le navigateur.

Travailler avec p5 est plus primitif qu'HTML et CSS, c'est donc plus simple, plus libre, mais aussi demande plus de travail pour arriver au mêeme résultat.