Formatif 1 - 420-355-LI (A22)

Installation de l’IDE,
introduction à JavaScript et débogueur
Objectifs
• Installation de l’IDE PhpStorm
• Utilisation de l’IDE
• Création d’un premier projet et programmation JavaScript
• Utilisation du débogueur
Lecture
• Lire les notes de cours et les chapitres 1 et 3 à 9 inclusivement du cours JavaScript sur le site
web de Pierre Giraud :
https://www.pierre-giraud.com/javascript-apprendre-coder-cours/
• Je vous rappelle qu’il y a aussi des vidéos du même auteur, mais ils sont moins à jour :
https://www.youtube.com/watch?app=desktop&v=VZLflMqC6dI&list=PLwLsbqvBlImFB8AuT6E
NIg-s87ys4yGWI
Conditions et remise
• Remettre le fichier Word produit au numéro 4 (Preuve) dans le dossier du « Formatif 1 » selon
votre groupe. Le dossier « Formatif 1 » est dans le dépôt sur le réseau du département dans le
dossier « 420-355-A22 ».

Travail à faire
1. Installation de l’IDE PhpStrom
Dans les laboratoires du département, « PhpStorm » est déjà installé. Je vous invite donc à
en faire l’installation sur vos équipements personnels.
Maintenant il faut trouver, télécharger et installer PhpStrom. Vous devriez trouver quelque
chose comme ceci :
Après l’installation, démarrez PhpStrom. Lors de son premier démarrage vous devriez voir
certains écrans, dont celui-ci :

Après avoir cliqué sur « New Project », la fenêtre suivante s’affiche, comme dans « IntelliJ »
renseignez où vous voulez créer un nouveau projet « PHP Empty project ».

Par la suite, il est possible que l’application vous demande de l’activer (l’enregistrer) à partir
de la fenêtre suivante.
Si c’est le cas, utilisez le lien suivant et suivez les instructions pour confirmer votre
activation chez « JetBrains » :

https://www.jetbrains.com/shop/eform/students.

IMPORTANT : Utilisez le courriel fourni par le Cégep, c’est très important.

Après avoir confirmé votre inscription en répondant aux différents courriels reçus de
« JetBrains » vous devriez avoir accès à votre compte chez « JetBrains ».
Maintenant vous pouvez utiliser votre enregistrement pour obtenir une licence pour
« PhpStorm » comme ceci et terminer l’installation.

Si vous ne pouvez pas compléter votre enregistrement, il est toujours possible de choisir
« Evaluate for free », mais c’est seulement pour 30 jours. Par la suite vous pourrez toujours
modifier la licence à partir des menus de « PhpStorm », avant 30 jours ;o)
Maintenant que vous êtes dans l’application, vous pouvez à partir du menu contextuel, sur
votre projet, créer des dossiers « Directory » et des fichiers « HTML File », « StylesSheet »,
« JavaScript File » dans votre projet.
 À vous de jouer :o)
2. Lecture
Lire les notes de cours et les chapitres 1 et 3 à 9 inclusivement du cours JavaScript sur le site
web de Pierre Giraud : https://www.pierre-giraud.com/javascript-apprendre-coder-cours/
Je vous rappelle qu’il y a aussi des vidéos du même auteur, mais ils sont moins à jour :
https://www.youtube.com/watch?app=desktop&v=VZLflMqC6dI&list =PLwLsbqvBlImFB8AuT6
ENIg-s87ys4yGWI
3. Écrire un premier programme
Un petit exercice qui va mettre en pratique ce que nous avons vu ensemble jusqu'à
maintenant et même plus. Je vous recommande donc fortement de le faire pour que vous
puissiez juger de vos capacités !
Dans cet exercice, nous allons afficher une jolie phrase à notre utilisateur, en transformant
des informations saisies sur lui de sorte que nous lui donnions un petit sourire. Pour ce faire,
nous allons parler de lui comme si c'était un très grand magicien !
Ce que vous devez réaliser :
a. Créer un projet vide dans « PhpStorm » du nom de « Formatif 1 », dans un dossier où vous aller
mettre tous vos formatifs et travaux pour ce cours.
b. Faire tout le code dans un fichier JavaScript externe et placez-le dans un sous dossier « js ».
c. Charger votre script à partir d’un fichier HTML du nom de « formatif-1.3.html ».
d. Utiliser la clause « use strict » dans votre JavaScript
e. Demander le prénom, le nom et l’âge de notre utilisateur grâce à des questions à partir d’une
boîte de dialogue.
indice :
 - Voir la fonction « prompt() » de JavaScript.
f. Stocker ces trois informations grâce à trois variables : prenom, nom et age (faites ça simple,
mais bien structuré)
g. Afficher, grâce à une boîte de dialogue, la phrase :

"Sapristi! On ne m'avait pas prévenu que c'était vous, [prenom]! Euh... Je veux dire... Monsieur
le grand magicien [nom]! Cela fait déjà au moins [age - 5] ans que vous faites rayonner notre
contrée!"

Ne pas mettre les crochets [ ] dans l’affichage, seulement la valeur des variables.
indices :
- Voir la fonction « alert() » de javaScript.
- Attention à la soustraction dans l’affichage.
- Remplacer la valeur « 5 » dans la soustraction par la constante « ENFANCE »
4. Preuve
Faire une capture d’écran de la fenêtre PhpStorm de votre code JavaScript montrant bien :
• tout votre code
• que vous êtes dans le débogueur sur un point d’arrêt (« breakpoint ») placé dans les premières
lignes de votre script.
• Que vous observez (« watches ») les valeurs des trois variables prenom, nom et age
Mettre cette capture d’écran dans un document Word et sauvegarder-le sous le nom
« Votre nom – Formatif 1.4 - preuve.docx ». Respecter la syntaxe d’écriture du nom du
fichier s.v.p.
5. Questions
Prendre en note vos questions pour les poser aux prochaines rencontres et répondre à
ceux-ci.
• Quelles sont les difficultés rencontrées lors de ce formatif?
• Quelles améliorations voyez-vous à faire dans le script du magicien ?