Fonction et ordre d'exécution

En JavaScript, les fonctions sont des blocs de code réutilisables qui peuvent être définis et appelés à différents endroits dans votre programme. L'ordre d'exécution des fonctions dépend de la manière dont elles sont appelées et de leur position dans le code. Voici quelques points clés à comprendre sur les fonctions et l'ordre d'exécution en JavaScript :

• Déclaration de fonction : Les fonctions déclarées avec la syntaxe function nomDeLaFonction() { ... } sont disponibles dans tout le fichier dans lequel elles sont définies, même avant leur déclaration dans le code. Cela signifie que vous pouvez appeler une fonction avant de l'avoir définie dans votre code, et elle fonctionnera correctement.
• Expression de fonction : Les fonctions définies avec la syntaxe const nomDeLaFonction = function() { ... } ou const nomDeLaFonction = () => { ... }. Elles ne sont disponibles qu'après leur déclaration dans le code.

Principe de callbacks

En JavaScript, il sera assez fréquent de voir quelques choses comme ceci :

element.addEventListener('click', function() {
    // Code à exécuter lors du clic
});

Ici, la fonction passée en deuxième argument de addEventListener est ce qu'on appelle une fonction de rappel ou callback en anglais.

Une fonction de rappel est une fonction qui est passée en argument à une autre fonction et qui est appelée (ou "rappelée") à un moment donné, généralement en réponse à un événement ou à la fin d'une opération asynchrone.

Il existe plusieurs façons de définir des fonctions de rappel en JavaScript, notamment en utilisant des fonctions anonymes, des fonctions fléchées (arrow functions) ou des fonctions nommées.

Voici quelques exemples de fonctions de rappel :

// Exemple avec une fonction anonyme
setTimeout(function() {
    console.log('Exécuté après 2 secondes');
}, 2000);
// Exemple avec une fonction fléchée
setTimeout(() => {
    console.log('Exécuté après 3 secondes');
}, 3000);
// Exemple avec une fonction nommée
function maFonctionDeRappel() {
    console.log('Exécuté après 4 secondes');
}
setTimeout(maFonctionDeRappel, 4000);

À partir de maintenant, n'ayez pas peur de voir ce genre de syntaxe. 😉 Il s'agit simplement de callbacks.

Local storage

Le local storage est une fonctionnalité du navigateur qui permet de stocker des données de manière persistante sur le côté client. Cela va être très utile dans notre cas pour stocker de l'information puisque nous n'avons pas de serveur.

Le fonctionnement est très simple, l'on va pouvoir stocker des données sous forme de paires clé-valeur.

Voici comment utiliser le local storage en JavaScript :

// Stocker une valeur dans le local storage
localStorage.setItem('cle', 'valeur');

// Récupérer une valeur du local storage
let valeur = localStorage.getItem('cle');

// Supprimer une valeur du local storage
localStorage.removeItem('cle');

// Vider tout le local storage
localStorage.clear();

À noter qu'il est possible de stocker des données plus complexes, comme des objets ou des tableaux, en les convertissant en chaînes de caractères JSON avant de les stocker, et en les reconvertissant en objets JavaScript lors de la récupération. Voici comment faire cela :

// Stocker un objet dans le local storage
let monObjet = { nom: 'Marc', age: 100 };

localStorage.setItem('monObjet', JSON.stringify(monObjet));

// Récupérer un objet du local storage
let objetRecupere = JSON.parse(localStorage.getItem('monObjet'));

Explication :

• JSON.stringify(monObjet) convertit l'objet JavaScript en une chaîne de caractères JSON, ce qui permet de le stocker dans le local storage.
  • Voici à quoi ressemble la chaîne de caractères JSON résultante : {"nom":"Marc","age":100}
• JSON.parse(localStorage.getItem('monObjet')) récupère la chaîne de caractères JSON du local storage et la convertit à nouveau en un objet JavaScript utilisable.
  • Voici à quoi ressemble l'objet JavaScript résultant : { nom: 'Marc', age: 100 }

À l'aide de cette dernière technique, vous pouvez stocker et récupérer des données plus complexes dans le local storage, ce qui est très utile pour des applications web qui nécessitent de conserver des informations entre les sessions ou de stocker des données utilisateur. Comme par exemple, notre calculatrice!

Rappel Bootstrap

Bootstrap est une bibliothèque CSS populaire qui facilite la création de sites web réactifs et attrayants. Voici un rappel de quelques concepts clés de Bootstrap que vous avez vu dans le cours de web 1 :

• Grille responsive : Bootstrap utilise un système de grille à 12 colonnes qui permet de créer des mises en page flexibles et adaptatives. Vous pouvez définir des classes pour différentes tailles d'écran (ex. : col-sm-6, col-md-4, etc.) pour contrôler la disposition des éléments en fonction de la taille de l'écran.
• Composants préconçus : Utilisation de composante n'utilisant pas JavaScript comme les cartes, les boutons, les formulaires, les navbars, etc. Ces composants sont faciles à intégrer et personnalisables.
• Utilisation des classes CSS : Bootstrap utilise des classes CSS pour appliquer des styles aux éléments HTML. Par exemple, pour créer un bouton stylisé, vous pouvez utiliser la classe btn et des classes supplémentaires pour définir la couleur et la taille du bouton (ex. : btn-primary, btn-lg).

Vous pouvez toujours vous référer à la documentation officielle de Bootstrap ou le site du cours de web 1 pour plus de détails.

CDN

Pour utiliser Bootstrap dans votre projet, vous pouvez inclure les fichiers CSS et JavaScript de Bootstrap via un CDN (Content Delivery Network). Voici comment faire cela :

<!-- Lien vers le CSS de Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

Truc 💡

Il est également possible d'importer les fichiers CSS et JavaScript de Bootstrap dans votre projet en les téléchargeant depuis le site officiel de Bootstrap et en les hébergeant localement.

Composants JavaScript de Bootstrap

Bootstrap inclut également des composants interactifs basés sur JavaScript qui améliorent l'expérience utilisateur. Nous allons voir ci dessous quelques-uns des composants JavaScript les plus couramment utilisés dans Bootstrap.

Votre meilleur ami est la documentation de Bootstrap pour cette section : Composants JavaScript Bootstrap

Tooltips

Les tooltips sont de petites boîtes d'information qui apparaissent lorsque l'utilisateur survole un élément. Ils sont utiles pour fournir des informations supplémentaires sans encombrer l'interface utilisateur.

Voici un exemple d'utilisation des tooltips avec Bootstrap :

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip en haut">
    Survoler moi
</button>
<script>
  let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

Ici, 2 éléments sont importants à observer :

• L'attribut data-bs-toggle="tooltip" indique que cet élément doit afficher un tooltip lorsqu'il est survolé.
• Le script JavaScript initialise les tooltips pour tous les éléments qui ont l'attribut data-bs-toggle="tooltip".

Truc 💡

Rappel : data-bs est la manière de Bootstrap de nommer les attributs personnalisés en HTML pour éviter les conflits avec d'autres bibliothèques ou frameworks. Cela permet également de clairement identifier les attributs spécifiques à Bootstrap.

Toasts

Les toasts sont de petites notifications qui apparaissent temporairement pour informer l'utilisateur d'un événement ou d'une action. Ils sont souvent utilisés pour afficher des messages de confirmation ou d'erreur. Voici un exemple d'utilisation des toasts avec Bootstrap :

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Notification</strong>
    <small>Il y a 2 secondes</small>    
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Bonjour! Ceci est une notification toast.
    </div>
</div>
<script>
    let toastElList = [].slice.call(document.querySelectorAll('.toast'))
    let toastList = toastElList.map(function (toastEl) {
        return new bootstrap.Toast(toastEl)
    })
    toastList.forEach(toast => toast.show()) // Afficher tous les toasts
</script>

Ici, nous avons créé un toast avec un en-tête et un corps. Le script JavaScript initialise tous les toasts présents dans le document et les affiches. Dans un contexte réel, on pourrait se servir d'un toast pour informer l'utilisateur qu'une action a été effectuée avec succès, comme l'enregistrement d'un formulaire.

Carousel

Le carrousel est un composant qui permet de faire défiler des images ou du contenu de manière interactive. Il est souvent utilisé pour afficher des galeries d'images ou des diaporamas.

Voici un exemple d'utilisation du carrousel avec Bootstrap :

<div id="monCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#monCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Précédent</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#monCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Suivant</span>
  </button>
</div>
<script>
    // Possibilité de configurer le carousel via JavaScript
    let myCarousel = document.querySelector('#monCarousel')
    let carousel = new bootstrap.Carousel(myCarousel, {
      interval: 2000,
      wrap: true
    })
    
    // Possibilité d'Ajouter des événements au carousel
    myCarousel.addEventListener('slide.bs.carousel', function () {
      // On peut ajouter du code ici pour réagir au changement de slide
    })
</script>

Ici, nous avons créé un carrousel avec trois images et des contrôles pour naviguer entre les images.

Information ❗

Au besoin, il est possible de configurer un carrousel avec un script JavaScript qui initialise le carrousel et configure l'intervalle de temps entre les diapositives. Il est également possible d'ajouter des événements pour réagir aux changements de diapositive.

Modal

Les modals sont des fenêtres contextuelles qui s'affichent au-dessus du contenu principal de la page. Ils sont souvent utilisés pour afficher des informations supplémentaires, des formulaires ou des confirmations d'actions.

Voici un exemple d'utilisation des modals avec Bootstrap :

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#monModal">
    Voir le modal
</button>
<div class="modal fade" id="monModal" tabindex="-1" aria-labelledby="monModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="monModalLabel">Titre du Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Contenu du modal...
            </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 les changements</button>
            </div>
        </div>
    </div>
</div>
<script>
    // Initialisation du modal via JavaScript
    let myModal = new bootstrap.Modal(document.getElementById('monModal'), {
        keyboard: false
    })
    
    // Possibilité d'ajouter des événements au modal
    let modalElement = document.getElementById('monModal')
    modalElement.addEventListener('show.bs.modal', function () {
      // Code à exécuter lorsque le modal est affiché
        console.log("Houra! Le modal est maintenant visible!");
    })    
</script>

Même si cela semble complexe, le fonctionnement est assez similaire aux autres composants Boostrap. Nous créons la structure HTML de notre composant, nous ajoutons les attributs data-bs- nécessaires.

Information ❗

Au besoin, on peut initialiser le composant via JavaScript. Il est également possible d'ajouter des événements pour réagir aux actions de l'utilisateur.

Il existe évidement d'autre composant très utile, n'hésitez pas à consulter la documentation officielle de Bootstrap pour en découvrir davantage et approfondir vos connaissances sur ces composants interactifs, selon vos besoins.

Icones Bootstrap

Bootstrap propose également une bibliothèque d'icônes appelée "Bootstrap Icons". Ces icônes sont vectorielles et peuvent être facilement intégrées dans vos projets Bootstrap.

Voici la documentation officielle des icônes Bootstrap : Bootstrap Icons

L'avantage de ce genre d'icônes est qu'elles sont légères, personnalisables et s'intègrent parfaitement avec le style de Bootstrap. Vous pouvez les utiliser pour améliorer l'apparence de vos boutons, menus, et autres éléments de l'interface utilisateur. Puisque ce sont des icônes vectorielles, elles restent nettes et claires à toutes les tailles, ce qui est idéal pour les designs réactifs.

À noter que les icônes Bootstrap ne sont pas incluses par défaut avec Bootstrap. Vous devez les inclure séparément dans votre projet en ajoutant le lien CDN dans le <head> de votre document HTML :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css">

Il est également possible de télécharger les icônes et de les héberger localement dans votre projet si vous préférez ne pas dépendre d'un CDN. Nous allons voir dans les prochains cours comment utiliser des librairies externes dans vos projets.