diff --git a/A-preparatifs.md b/A-preparatifs.md index abb5e65ca7808df918a83a493b7d8c27fda68d1d..45908f1721f6bf0cbe6395b942fb044793cc1d7e 100644 --- a/A-preparatifs.md +++ b/A-preparatifs.md @@ -61,7 +61,7 @@ _**Allons y !**_ > _**NB1 :** si ce n'est pas déjà fait, il faut que vous renseigniez un mot de passe dans votre compte gitlab ([Paramètres > Mot de passe](https://gitlab.univ-lille.fr/profile/password/edit)) pour pouvoir cloner en http_ - > _**NB2 :** je clone ici dans mon dossier `/home/thomas/tps-js/tp1`. **Si vous êtes sous Windows faites attention au sens des slashs et au caractère `"~"`** qui représente le dossier de l'utilisateur sur système unix. Si vous êtes sous windows je vous recommande d'utiliser **Git bash** (qui comprend cette syntaxe) ou si vous tenez vraiment à utiliser **cmd** pensez à adapter !_ + > _**NB2 :** ici je clone dans mon dossier `/home/thomas/tps-js/tp1`. **Si vous êtes sous windows faites attention au sens des slashs et au caractère `"~"`** qui représente le dossier de l'utilisateur sur système unix : utilisez **Git bash** (qui comprend cette syntaxe) ou si vous tenez vraiment à utiliser **cmd** ou **powershell** pensez à adapter la commande !_ > _**NB3 :** si vous préférez **cloner en SSH** pour ne pas avoir à taper votre mot de passe à chaque fois que vous clonerez un TP, renseignez votre clé SSH dans votre [compte utilisateur gitlab](https://gitlab.univ-lille.fr/profile/keys) et clonez à partir de cette URL : `git@gitlab-ssh.univ-lille.fr:js/tp1.git`_ diff --git a/B-integration.md b/B-integration.md index 6d9ce4751b9f7fd553822b5703a0996b229a4c9a..bf3cd2661db34e70868b354846c80b086d464393 100644 --- a/B-integration.md +++ b/B-integration.md @@ -13,7 +13,7 @@ ## B.1. Lancement d'un serveur HTTP **Pour consulter notre appli web dans un navigateur, il nous faut un serveur http.** <br> -On pourrait, pour cet exercice, utiliser n'importe quel serveur http (apache, tomcat, etc.) mais je vous propose d'utiliser Node.js (_installé au point A.1._) et **[npx](https://www.npmjs.com/package/npx)** qui est un des 2 principaux utilitaires fournis automatiquement avec Node (_l'autre étant [npm : Node Package Manager](https://fr.wikipedia.org/wiki/Npm) dont nous parlerons plus tard_). +On pourrait, pour cet exercice, utiliser n'importe quel serveur http (apache, tomcat, etc.) mais je vous propose d'utiliser Node.js (_installé au point A.1._) et **[npx](https://docs.npmjs.com/cli/v8/commands/npx)** qui est une commande fournie automatiquement avec Node (_basée sur [npm : Node Package Manager](https://fr.wikipedia.org/wiki/Npm) dont nous parlerons plus tard_). 1. **Tout d'abord, ouvrez un terminal directement dans VSCodium** en tapant <kbd>CTRL</kbd>+<kbd>J</kbd> (PC) / <kbd>CMD</kbd>+<kbd>J</kbd> (Mac) (_ou <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> puis `View: toggle panel`_). diff --git a/C-devtools.md b/C-devtools.md index aa8b4cebb14a9e8fe1234bc85273ee24f4c757dc..8cfdb9f3d71c8a78a264da90904f837b66213961 100644 --- a/C-devtools.md +++ b/C-devtools.md @@ -23,12 +23,20 @@ console.log('Welcome to ', {title:'PizzaLand', emoji: '🍕'}); ``` En fait l'objet `console` est un objet global qui contient la méthode `.log()` mais aussi d'autres méthodes qui permettent d'avoir un rendu différent et de filtrer les messages. Essayez les méthodes suivantes et constatez le résultat dans la console : -- console.warn('Oh oh attention') -- console.error('fatal error lol') -- console.clear() -- console.table([['Walter','White'],['Skyler','White'],['Saul','Goodman']]) +- ```js + console.warn('Oh oh attention') + ``` +- ```js + console.error('fatal error lol') + ``` +- ```js + console.clear() + ``` +- ```js + console.table([['Walter','White'],['Skyler','White'],['Saul','Goodman']]) + ``` -Enfin, la console permet de tester rapidement du code JS grâce à un champ de saisie. Tapez-y l'instruction `42+"12"-10` puis tapez <kbd>Entrée</kbd>. Le résultat s'affiche directement dans la console. Incroyable ! +Enfin, **la console permet de tester rapidement du code JS grâce à un champ de saisie**. Tapez-y l'instruction `42+"12"-10` puis <kbd>Entrée</kbd>. Le résultat s'affiche directement dans la console. Incroyable ! ## C.2. L'inspecteur d'éléments @@ -39,7 +47,7 @@ L'inspecteur d'éléments permet de consulter ET de manipuler le code HTML et CS Il sera utile pour vérifier que le code HTML que va générer votre JS correspond bien à ce qui est attendu. ## C.3. L'onglet Sources -L'onglet sources permet d'inspecter le code JavaScript de la page, de placer des breakpoints et de stopper l'exécution du code quand une erreur survient. Quand l'exécution du JS est stoppée, on peut consulter les valeurs des variables locales et globales, de voir la call-stack, etc. +L'onglet sources permet d'inspecter le code JavaScript de la page, de placer des breakpoints et de stopper l'exécution du code quand une erreur survient. Quand l'exécution du JS est stoppée, on peut consulter les valeurs des variables locales et globales, voir la call-stack, etc. C'est probablement l'onglet des devtools le plus important lorsqu'on développe en JavaScript.