Rappel Objet en JavaScript

En JavaScript, les objets sont des collections de propriétés, c'est-à-dire qu'il s'agit d'un "conteneur" de valeurs associées à des clés (Clé/valeur).

C'est très utile afin d'organiser les données de manière structurée. Cela facilite également la manipulation.

Voici un exemple d'objet en JavaScript :

const personne = {
  nom: "Jean",
  prenom: "Marc-Antoine",
  age: 100,
  adresse: {
    rue: "123 Rue Principale",
    ville: "Drummondville",
    codePostal: "000000"
  },
  diplome: ["dec", "bac", "maitrise"],
  saluer: function() {
    console.log(`Bonjour, je m'appelle ${this.prenom} ${this.nom} et j'ai ${this.age} ans.`);
  },
};

Voici quelques comportements spécifiques aux objets en JavaScript :

• Pour déclarer un objet, on utilise des accolades {}.
• Les propriétés d'un objet sont définies sous la forme de paires clé/valeur, séparées par des virgules.
• Les clés d'un objet sont généralement des chaînes de caractères, mais elles peuvent aussi être des symboles (cas très précis) ou des nombres (cas très précis).
• Les valeurs d'un objet peuvent être de n'importe quel type de données, y compris d'autres objets, des tableaux, des fonctions, etc.

Pour utiliser un objet, on peut accéder à ses propriétés en utilisant la notation par point ou la notation par crochets. Par exemple :

console.log(personne.nom); // Affiche "Jean"
console.log(personne["prenom"]); // Affiche "Marc-Antoine"
personne.saluer(); // Affiche "Bonjour, je m'appelle Marc-Antoine Jean et j'ai 100 ans."

Le type de boucle utilisé pour parcourir les propriétés d'un objet est la boucle for...in. Par exemple :

for (let key in personne) {
  console.log(`${key}: ${personne[key]}`);
}

Pour l'utiliser avec le local storage, on doit convertir notre objet JavaScript en string JSON. C'est là qu'on utilise la méthode JSON.stringify().

À l'inverse, quand on veut aller chercher l'information sur le local storage, on doit convertir la string JSON en objet JavaScript. C'est là qu'on utilise la méthode JSON.parse().

Rappel DOM - querySelectorAll et getElementsByClassName

Étant passé relativement vite sur ces 2 méthodes-là, je tenais à faire un petit retour.

Il existe un comportement spécifique à chacune de ces méthodes : le tableau retourné par querySelectorAll est un NodeList tandis que celui retourné par getElementsByClassName est un HTMLCollection.

Qu'est-ce que cela implique? Eh bien, cela signifie que les méthodes disponibles pour manipuler ces tableaux sont différentes. Par exemple, querySelectorAll retourne un NodeList qui est une collection statique de nœuds, tandis que getElementsByClassName retourne un HTMLCollection qui est une collection vivante de nœuds.

Par exemple, si je veux supprimer tous les éléments avec la classe "couleur" de mon document, je pourrais faire quelque chose comme ceci :

// Avec querySelectorAll
const elements = document.querySelectorAll('.couleur');

for(let element of elements) {
  element.parentNode.removeChild(element);
}

Cependant, si j'utilise getElementsByClassName, cela ne fonctionnera pas comme prévu, car la collection est vivante et se met à jour automatiquement lorsque des éléments sont ajoutés ou supprimés du DOM. Par conséquent, lorsque je supprime un élément de la collection, les autres éléments se déplacent pour combler le vide, ce qui peut entraîner des erreurs ou des comportements inattendus.

Théorie - Semaine 6 - Introduction au SCSS et Vite

Qu'est-ce que le SCSS?

Le SCSS (Sassy CSS) est une extension de CSS qui ajoute des fonctionnalités avancées pour faciliter la gestion et la maintenance des feuilles de style. Il fait partie de la famille des préprocesseurs CSS, ce qui signifie qu'il doit être compilé en CSS standard avant d'être utilisé dans un navigateur.

Différences entre CSS, SASS et SCSS

• CSS : Le langage de base pour la mise en forme des pages web. Il est simple et largement supporté. Extension de fichier : .css.
• SASS: Un préprocesseur CSS qui utilise une syntaxe plus concise et sans accolades ni points-virgules. Souvent, on peut le confondre avec le SCSS. Extension de fichier : .sass.
• SCSS (ce que l'on va utiliser) : Une extension de SASS qui utilise une syntaxe plus proche de CSS, avec des accolades et des points-virgules. C'est la syntaxe la plus couramment utilisée et recommandée pour les projets modernes. Extension de fichier : .scss.

Fonctionnalités principales du SCSS

• Variables : Permets de définir des variables pour les couleurs, les polices, les tailles, etc., facilitant ainsi la réutilisation et la modification des valeurs.
• Nesting (Imbrication) : Permets d'imbriquer les sélecteurs CSS à l'intérieur d'autres sélecteurs, ce qui améliore la lisibilité du code.
• Mixins : Permets de créer des blocs de styles réutilisables qui peuvent être inclus dans d'autres sélecteurs.
• Héritage : Permets à un sélecteur d'hériter des styles d'un autre sélecteur, ce qui réduit la duplication de code.
• Partials et Imports : Permet de diviser les feuilles de style en plusieurs fichiers pour une meilleure organisation, puis de les importer dans un fichier principal.

En somme, le SCSS offre des fonctionnalités avancées qui rendent la gestion des styles plus efficace.

Syntaxe de base du SCSS

La syntaxe du SCSS est similaire à celle du CSS, mais avec des fonctionnalités supplémentaires.

Voici un exemple de syntaxe de base du SCSS :

// Variables
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

// Nesting (Imbrication)
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

// Mixins (composants)
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

// Héritage
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

Information ❗

PRIMEUR : Il sera possible de personnaliser Bootstrap en redéfinissant les variables SCSS... Garder cela en tête pour la suite du cours!

Explication en détails :

• Les variables sont définies avec un signe $ suivi du nom de la variable. Elles peuvent être utilisées n'importe où dans le code SCSS.
• Le nesting permet d'imbriquer les sélecteurs à l'intérieur d'autres sélecteurs, ce qui rend le code plus lisible et organisé.
• Les mixins sont définies avec la directive @mixin et peuvent être inclus dans d'autres sélecteurs avec la directive @include. Un mixin peut accepter des arguments (comme une fonction) pour rendre les styles plus flexibles. Il doit être déclaré avant d'être utilisé.
• L'héritage est réalisé avec la directive @extend, qui permet à un sélecteur d'hériter des styles d'un autre sélecteur, ce qui réduit la duplication de code et facilite la maintenance.

Exemple de Partials et Imports :

_variables.scss

$primary-color: #3498db;
$secondary-color: #2ecc71;

main.scss

@import 'variables';
body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: #fff;

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    h1 {
      color: $secondary-color;
    }
  }
}

Explication en détails :

• Le fichier _variables.scss est un partial qui contient les variables SCSS. Le nom du fichier commence par un underscore pour indiquer qu'il s'agit d'un partial.
• Dans le fichier main.scss, nous importons le partial _variables.scss avec la directive @import. Cela nous permet d'utiliser les variables définies dans le partial dans notre fichier principal.

Cependant, pour utiliser le scss, nous allons devoir le compiler en css. C'est la qu'intervient Vite, qui va nous permettre de faire cette compilation automatiquement.

Qu'est-ce que Vite?

Vite est un outil de build moderne pour les projets web qui visent à améliorer l'expérience de développement en offrant un démarrage rapide et une mise à jour instantanée des modules. Il est conçu pour être utilisé avec des frameworks modernes comme Vue.js, React, et Svelte, mais peut également être utilisé avec des projets JavaScript/TypeScript purs.

L'intérêt de vite dans notre cas, on va pouvoir l'utiliser pour créer notre structure de projet et compiler notre SCSS en CSS automatiquement.

Installation et utilisation de Vite

Information ❗

Normalement cela devrait être déjà le cas, mais vous devez avoir Node.js sur votre ordinateur afin d'installer Vite.

NPM

Nous avons déjà utilisé NPM sans même le savoir! NPM (Node Package Manager) est un gestionnaire de paquets pour JavaScript qui permet d'installer, de gérer et de partager des bibliothèques et des outils JavaScript. Il en existe plusieurs similaires, mais NPM est celui que l'on va utiliser.

Le fonctionnement est assez simple, on va pouvoir utiliser des commandes dans notre terminal d'effectuer des actions comme l'installation de paquets, la gestion des dépendances, etc.

Voici un exemple de quelques commandes qu'il est possible d'utiliser avec NPM :

• npm init : Initialise un nouveau projet Node.js en créant un fichier package.json.
• npm install <package-name> : Installe un paquet et l'ajoute aux dépendances du projet.
• npm install -g <package-name> : Installe un paquet globalement sur votre système.
• npm update : Met à jour les paquets installés.
• npm uninstall <package-name> : Désinstalle un paquet du projet.

À titre de référence, voici la documentation de NPM : Documentation NPM (Anglais)

Préparation de l'environnement de développement avec Bootstrap et Vite

1. À partir d'un dossier de projet, vous devez initialiser votre projet avec NPM en utilisant la commande suivante dans votre terminal :

npm

npm init

Attention ⚠

Il se peut que les questions que NPM vous demande soient en anglais. Dans l'explication ci-bas, les noms sont en français.

Cette commande va vous guider à travers le processus de création d'un nouveau projet Node.js :

• Nom du projet : Le nom de votre projet.
• Version : La version de votre projet (par défaut 1.0.0).
• Description : Une brève description de votre projet.
• Point d'entrée : Le fichier principal de votre projet (par défaut index.js).
• Commande de test : On le laisse vide pour le moment.
• Répertoire git : On le laisse vide pour le moment.
• Mots-clés : Des mots-clés pour décrire votre projet (optionnel).
• Auteur : Votre nom ou le nom de l'auteur du projet.
• Licence : Licence par défaut (MIT).

2. Installation des librairies pour Bootstrap.

npm

npm i --save bootstrap @popperjs/core bootstrap-icons

Ici nous avons installé bootstrap, popperjs (qui est une dépendance de bootstrap pour les éléments interactifs comme les modals) et bootstrap-icons (pour les icones de bootstrap).

3. Installation des outils nécessaires pour la compilation du SCSS.

npm

npm i -D vite sass

• Vite : L'outil de build que nous allons utiliser pour notre projet.
• Sass : Le préprocesseur CSS que nous allons utiliser pour écrire notre SCSS.

4. Créez un dossier src dans votre projet et faites la structure de dossier suivante :

src/
├── scss/
│   ├── main.scss
├── images/
├── js/
│   ├── index.js
└── index.html

• scss/ : Pour les fichiers SCSS.
• js/ : Pour les fichiers JavaScript.
• images/ : Pour les fichiers d'images.

Information ❗

C'est cette structure de dossier que nous allons utiliser pour le TP 1.

Contenu des fichiers :

index.html

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./scss/main.scss">
    <title>Site minimal avec Bootstrap</title>
</head>
<body class="py-5">

  <div class="container">
      <div class="alert alert-primary" role="alert">
          Une alerte simple <code>alert—check</code>
      </div>

      <!-- Button trigger modal -->
      <button type="button" 
              class="btn btn-primary" 
              data-bs-toggle="modal" 
              data-bs-target="#exampleModal">
          Ouvrir la modal <i class="bi bi-person-circle"></i>
      </button>

      <!-- Modal -->
      <div class="modal fade" 
          id="exampleModal" 
          tabindex="-1" 
          aria-labelledby="exampleModalLabel" 
          aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">Titre de la modal</h5>
                      <button type="button" 
                          class="btn-close"
                          data-bs-dismiss="modal" 
                          aria-label="Close">
                      </button>
                  </div>
                  <div class="modal-body">
                      ...
                  </div>
                  <div class="modal-footer">
                      <button type="button" 
                              class="btn btn-secondary" 
                              data-bs-dismiss="modal">Fermer</button>
                      <button type="button" class="btn btn-primary">Sauvegarder</button>
                  </div>
              </div>
          </div>
      </div>
  </div>
  
  <script type="module" src="./js/index.js"></script>
</body>
</html>

src/scss/main.scss

//Insérer vos variables Bootstrap à écraser comme les couleurs $primary, ...

@import "~bootstrap/scss/bootstrap";
@import '~bootstrap-icon/font/bootstrap-icons.css';

src/js/index.js

// Import CSS Bootstrap
import '../scss/main.scss'

// Import Javascript Bootstrap
import * as bootstrap from 'bootstrap'

DANGER

Dans le fichier index.html, on doit s'assurer d'inclure le fichier main.scss dans la balise <head> et d'inclure le fichier index.js à la fin du <body>. Ce dernier doit être de type module pour pouvoir utiliser les imports.

Puisque qu'il s'agit d'un module maintenant, cela va changer le comportement de notre JavaScript :

• Les variables et fonctions déclarées dans index.js ne seront plus accessibles globalement (dans la console du navigateur par exemple).
• Les fonctions et variables déclarées dans index.js ne seront pas accessibles dans les autres fichiers.

5. Créer un fichier vite.config.js à la racine de votre projet (pas dans src) avec le contenu suivant :

const path = require('path')

export default {
    root: path.resolve(__dirname, 'src'),
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, './node_modules/bootstrap'),
            '~bootstrap-icon': path.resolve(__dirname, './node_modules/bootstrap-icons'),
        }
    },
    server: {
        port: 8080,
        hot: true
    },
    css: {
        preprocessorOptions: {
            scss: {
                api: 'modern-compiler',
                silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import']
            }
        }
    }
}

Ceci correspond a la configuration de base pour un projet Vite avec SCSS. Le fait d'avoir mis des alias pour bootstrap et bootstrap-icons nous permettra de les importer plus facilement dans notre code SCSS.

6. Modifier le fichier package.json pour ajouter seulement la section script pour le démarage de pour Vite. Ajoutez la section suivante dans votre package.json :

{
  ...
{
  ...
  "scripts": {
    "dev": "vite",
    "start": "vite",
    "build": "vite build"
  },
  ...
}
  ...
}

Compilation du SCSS avec Vite

Puisque nous avons maintenant un outil de build en Vite, nous allons pouvoir l'utiliser pour compiler notre SCSS en CSS automatiquement.

Magique, non? ✨

Il reste tout simplement à démarrer notre application avec la commande suivante dans votre terminal :

npm

npm start

Création d'un projet de test

Pour tester que tout fonctionne correctement, je vous demande d'effectuer les étapes 1 à 6 pour créer un projet de test avec Vite, Bootstrap et SCSS. Vous devriez être capable de démarrer le serveur de développement Vite avec la commande npm start et voir votre page HTML avec les styles de Bootstrap appliqués.

Attention ⚠

Il se peut que vous ailliez des messages de "warning" lors de la compilation du SCSS avec Vite. Ne vous inquiétez pas, cela est normal et ne devrait pas affecter le fonctionnement de votre projet. Vous pouvez les ignorer pour le moment.

Utilité du SCSS et utilisation avec Bootstrap

Comme présenter dans le code du point 4, le scss permet de modifier certains éléments de bootstrap en redéfinissant les variables SCSS avant de compiler le CSS final. Cela permet de personnaliser facilement les styles de Bootstrap sans avoir à modifier directement les fichiers CSS de Bootstrap.

Maintenant, essayons de modifier un peu le visuel de notre page en changeant quelques éléments :

• Nous créer un fichier _variables.scss dans le dossier scss/ afin de déplacer les variables que l'on veut modifier.
• Ensuite, nous allons changer la couleur primaire de bootstrap en rouge (#FF003BFF).
• Puis, nous allons changer la police de caractère de notre page en "Comic Sans MS".

Vous devriez avoir un résultat du genre :

Solution ✅

_variables.scss

$primary: #FF003BFF;
$font-family-base: "Comic Sans MS";

main.scss

@import 'variables';
@import "~bootstrap/scss/bootstrap";
@import '~bootstrap-icon/font/bootstrap-icons.css';

Débogage avec Vite

Lorsque vous développez une application avec Vite, il est important de savoir comment déboguer efficacement votre code. Voici quelques conseils pour vous aider à déboguer votre application Vite :

• Utiliser les outils de développement du navigateur : la plupart des navigateurs modernes disposent d'outils de développement intégrés qui vous permettent d'inspecter le DOM, de visualiser les erreurs JavaScript, et de surveiller les requêtes réseau.
• Ajouter des points d'arrêt : Vous pouvez ajouter des points d'arrêt dans votre code JavaScript en utilisant l'instruction debugger;. Lorsque le code atteint cette instruction, l'exécution s'arrête et vous pouvez inspecter les variables et l'état de l'application.
• Utiliser les consoles de log : Ajoutez des instructions console.log() dans votre code pour afficher des informations sur l'état de l'application à différents points d'exécution. Cela peut vous aider à comprendre le flux d'exécution et à identifier les problèmes.

Débogage dans webstorm

Si vous utilisez WebStorm comme environnement de développement, vous pouvez configurer un profil de débogage pour Vite. Voici comment faire :

1. Ouvrez WebStorm et allez dans Run > Edit Configurations.
2. Cliquez sur le bouton + pour ajouter une nouvelle configuration.
3. Sélectionnez NPM.
4. Dans le champ Name, donnez un nom à votre configuration (par exemple, "Debug Vite").
5. Assurez -vous de spécifier l'emplacement de votre package.json dans le champ Package.json.
6. Dans le champ Command, sélectionnez run.
7. Dans le champ Script, sélectionner start.
8. Puis, dans la section Browser/Live Edit, cocher la case After launch en sélectionnant votre navigateur.
9. Cocher également la case with JavaScript Debugger.
10. Dans le champ URL, entrez l'URL de votre application Vite (généralement http://localhost:8080).
11. Cliquez sur OK pour enregistrer la configuration.
12. Pour démarrer le débogage, sélectionnez la configuration que vous venez de créer et cliquez sur le bouton Debug.

Un principe similaire est présent dans VS Code. Je vous invite à aller voir la documentation au besoin : Débogage avec VS Code (Anglais).

Information ❗

Peu importe l'éditeur de texte que vous utilisez, assurez-vous de faire fonctionner ces fonctionnalités. Ils vous seront très utiles, croyez-moi !

Exercice - Page de connexion

Le but de cet exercice est de se familiariser avec Vite et le SCSS.

Premièrement, vous allez devoir vous créer un projet Vite avec la structure de dossier appropriée. Assurez-vous d'ajouter le nécessaire pour compiler le SCSS en CSS.

Truc 💡

Vous pouvez reprendre le matériel du dernier exercice (page avec bouton et couleur personnalisée).

Ensuite, je vous demande de réaliser une page de connexion simple avec les éléments suivants :

• Un titre h1 indiquant "Connexion à la plateforme".
• Un champ pour le courriel avec son label.
• Un champ pour le mot de passe avec son label.
• Un champ pour signifier si l'utilisateur veut rester connecté (checkbox) avec son label.
• Un bouton de connexion.
• Un message d'erreur si le courriel ou le mot de passe est incorrect. Vous devez ajouter ce message à l'aide du DOM ET le retirer lorsque les champs sont corrigés.

Exigences supplémentaires

• Utiliser Bootstrap pour la mise en page et le style de base.
• Utiliser SCSS pour personnaliser le thème de Bootstrap
  • Changer la couleur de base ainsi que la couleur danger de bootstrap. (danger pour le message d'erreur)
  • Changer la police de caractère de votre page.
  • Créer une classe personnalisée pour donner quelques caractéristiques au message d'erreur. Laisser aller votre créativité pour le style de ce message d'erreur.
• Utiliser JavaScript pour gérer les interactions utilisateur, la validation des formulaires, et la manipulation du DOM.
  • Le formulaire de connexion doit vérifier que les champs ne sont pas vides avant de permettre la soumission. Sinon, afficher le message d'erreur.
  • Si l'utilisateur a coché la case "rester connecté", afficher un message de bienvenue personnalisé après la connexion. Ce message doit être affiché dans un Modal Bootstrap.

Vous devriez avoir quelque chose comme ceci :