Lesson 3.8. JavaScript frameworks

JavaScript is a very rich language that allows to program a very wide range of interactions, sometimes very complex. We willnot see all the possibilities of JavaScript. If you want to go further, you can consult this very complete tutorial on JavaScript.

There are standards in the web that all users are used to. As websites use more or less always the same type of scripts, developers have written scripts, that can be used from one site to from one site to another. These libraries are called (sometimes unfairly) frameworks. They provide a template that can be (re)used on all pages or features that HTML/CSS/JavaScript do not provide natively.

We will present two of them:

Bootstrap

Bootstrap is an HTML/CSS/JavaScript framework that offers many interactive tools:

<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>

Here is the full frame of a page using the Bootstrap framework:

<!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>

Here are some examples of features realized with Bootstrap :

Friconix

Friconix is a site offering a collection of icons that can be inserted directly into HTML pages. As for Bootstrap, it is necessary to insert an external JavaScript file :

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

Once the file is added in the <head> setion fo the page, we can add icons in the HTML with the following syntax:

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

Here are some examples of icons inserted with Friconix:

Exercise

Using the Friconix help page, create a page that displays the following icons:

See also


Last update : 10/10/2022