Cours 3.9. Les frameworks JavaScript

Le JavaScript est un langage très riche qui permet de programmer une très large gamme d'interactions, parfois très complexes. Nous n'allons pas voir l'ensemble des possibilités du JavaScript. Si vous souhaitez aller plus loin, vous pouvez consulter ce tutorial très complet sur le JavaScript.

Il existe des standards dans le web auxquels tous les utilisateurs sont aujourd'hui habitués. Comme les sites internet utilisent plus ou moins toujours le même type de scripts, les développeurs ont écrit des bibliothèques qui peuvent être utilisées d'un site à l'autre. Ces bibliothèques sont appellées (parfois injustement) framework. Elles fournissent un modèle qui peut être (ré)utilisé sur toutes les pages ou des fonctionnalités que le HTML/CSS/JavaScript ne proposent pas nativement.

Nous allons voir ici deux d'entre-elles :

Bootstrap

Bootstrap est un framework HTML/CSS/JavaScript qui offre de nombreux outils interactifs :

Par exemple, ce site utilise Bootstrap. Pour utiliser Bootstrap, il est nécessaire de spécifier au navigateur que l'on va utiliser des fichiers externes. Dans le cas de la version 5.2 de Bootstrap, il est nécessaire d'inclure une fichier CSS et un fichier JavaScript externes :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

Voici la trame complète d'une page exploitant le framework Bootstrap :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Voici quelques exemples de fonctionnalités réalisées avec Bootstrap :

Friconix

Friconix est un site proposant une collection d'icônes pouvant être insérer directement dans les pages HTML. Comme pour Bootstrap, il est nécessaire d'insérer un fichier JavaScript externe :

<script defer src="https://friconix.com/cdn/friconix.js"> </script>

Une fois ce fichier ajouté dans la section <head> de la page, il est possible d'insérer des iĉones directement dans le HTML :

<i class="fi-hwsuxl-question-mark"></i>

Voici quelques exemples d'icônes inséré avec Friconix :

Exercice

En vous aidant de la page d'aide de Friconix, créez une page qui affiche les icônes suivantes :

Voir aussi


Dernière mise à jour : 26/09/2022