Premiers pas avec JavaScript

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

Introduction

Deux fonctions primaires de JavaScript : la computation et l'interactivité.

JavaScript est un langage de programmation très puissant et qui permet de faire énormément de choses ; en même temps, c'est un langage qui est utilisé, et souvent expliqué, de manières très différentes. Ce fait peut contribuer à désorienter les débutants dans la programmation, mais également ceux qui ont déjà de l'expérience avec un autre langage. En raison de la flexibilité de JavaScript et de son histoire compliquée, en effet, il y a une grande quantité d'informations, règles, exceptions, bugs, comportements inattendus, bonnes et mauvaises pratiques qu'il faudrait connaître pour maîtriser le langage. Cependant, submerger une personne qui s'approche à JavaScript pour la première fois avec tous ces aspects ne peut que corroborer l'idée, déjà assez répandue, que la programmation est trop compliquée et impossible à apprendre sans une "prédisposition naturelle", identifiée souvent dans le domaine logico-mathématique.

Cet article propose par conséquent une introduction "souple" au langage JavaScript, en essayant de fournir, à travers le développement pratique d'une petite application interactive, le minimum d'informations pour pouvoir par la suite aborder deux grandes fonctions primaires de JavaScript :

• La computation avec JavaScript

  La construction d'algorithmes qui permettent au développeurs d'instruire la machine sur les opérations à effectuer.

• L'interactivité avec JavaScript

  La possibilité, grâce à l'intégration avec HTML5, de créer des applications/pages web interactives.

Conseils de lecture

Cet article montre un cas particulier, parmi toutes les applications possibles, d'utilisation de JavaScript. Il s'agit donc principalement d'une approche hands-on qui se limite à expliquer le code en question. Nous conseillons par conséquent d'essayer de répliquer vous-mêmes le code des différentes étapes, possiblement sans faire trop souvent recours au copier/coller. Cela servira de base pour acquérir des connaissances procédurales utiles pour pouvoir par la suite se concentrer sur des aspects plus théoriques et abstraits illustrés dans d'autres articles sur JavaScript.

Prérequis

Pour suivre cet articles, des connaissances de base en HTML5 et CSS sont indispensables. En plus, il est conseillé de lire d'abord l'introduction à la programmation pour se familiariser avec les concepts et termes fondamentaux de la programmation.

• Introduction à la programmation

Pour répliquer et tester le code des étapes, il vous faudra également :

• Un éditer de texte, comme par exemple Brackets ou Visual studio code
• Un navigateur web

Fichiers

Tous les fichiers utilisés pour construire l'application d'exemple sont disponible dans un repository GitHub :

• Repository MALTT-STIC/stic-1-first-steps-with-javascript

Illustration du résultat final

Détail de l'application finale Brain Lobes Flash Card

Dans le cadre de cet article, nous allons illustrer progressivement la construction d'une petite application interactive avec JavaScript. Pour faciliter la compréhension des passages, il peut être utile d'illustrer tout de suite le résultat final qu'on veut obtenir :

• Brain Lobes Flash Card

L'application finale consiste dans une sorte de flash card qui permet d'afficher ou de masquer les noms des 4 lobes du cerveau. Les utilisateurs voient d'abord l'image sans les noms des lobes. Sous l'image, ils disposent d'un bouton qui permet de montrer les labels s'ils sont cachées, ou respectivement des les cacher s'ils sont affichés. Chaque fois que les utilisateurs décident d'afficher les labels, un compteur est automatiquement incrémenté.

Il s'agit d'un dispositif très simple, mais qui permet déjà de montrer à la fois les potentialités de JavaScript et la difficulté, ainsi que le nombre d'opérations nécessaires, pour construire une simple application.

Développer l'application

Les trois composantes d'une application/page web dynamique.

Nous allons développer notre application en 6 étapes progressives. Ces étapes vont d'abord illustrer de manière distincte les trois composantes principales d'une application/page web interactive :

• HTML détermine les éléments et la structure du contenu, comme par exemple l'image du cerveau, le bouton, le texte du compteur, etc.
• CSS détermine le look-and-feel de la page à travers des aspects esthétiques comme la couleur, le positionnement, etc.
• JavaScript détermine les comportements interactifs de la page, dans notre cas en réponse à l'action de l'utilisateur de cliquer sur le bouton.

Ensuite, ces trois composantes vont s'intégrer pour pouvoir obtenir les comportements attendus de l'application en termes d'affichage/masquage des labels et de incrémentation du compteur. Les étapes vont donc se composer de la manière suivante :

1. Création de la structure des fichiers et éléments HTML de base ;
2. Amélioration de l'esthétique de la page à travers du CSS ;
3. Intégration des deux cards sur la même page ;
4. Ajoute du script JavaScript qui permet d'en cacher une ;
5. Implémentation du code JavaScript qui permet d'afficher/masquer alternativement une card à la fois ;
6. Complexification du code avec l'intégration du compteur.

Première étape : fichiers et HTML

La première étape consiste à créer la structure de notre application à deux niveaux :

1. Créer les fichiers nécessaires pour démarrer le développement. On ajoutera par la suite d'autres fichiers à fur et à mesure qu'ils seront nécessaires.
2. Commencer par créer la structure de base de notre application en traduisant en éléments HTML les composantes de notre page.

Structure des fichiers et images

Structure initiale des fichiers.

Pour commencer, nous avons besoin à minima de deux choses :

1. Une page HTML qui aura la fonction de relier toutes les composantes de notre application ;
2. Les images du cerveau.

En effet, pour créer l'illusion que les labels s'affichent sur la carte, nous allons tout simplement utiliser deux images différentes : une avec les labels, l'autres sans.

Pour obtenir ce résultat nous avons d'abord téléchargé l'image Lobes of the brain depuis Wikimedia Commons. L'image originale est en SVG, mais pour simplifier les choses, nous avons téléchargé la version en .png, disponible ici. L'image est considéré de domaine publique est nous avons donc le droit de l'utiliser pour notre application.

Nous avons renommé cet image brain-without-labels.png. À partir de cette image, nous avons utilisé un logiciel de traitement d'image matricielles pour ajouter les 4 noms des lobes, en utilisant des couleurs et des flèches pour favoriser l'association avec la zone du cerveau correspondante déjà mise en valeur dans l'image originale. Nous avons nommé cette image brain-with-labels.png. Vous pouvez télécharger les deux images ici :

• Image sans labels
• Image avec labels

Pour avoir un ordre dans l'organisation des fichiers qui vont composer notre application, nous proposons de créer un dossier quelque part dans votre ordinateur. À l'intérieur de ce dossier, créer un fichier nommé index.html qui sera notre page web. Ensuite, créez un dossier qui s'appelle assets. À l'intérieur de ce dossier, créer un sous-dossier nommé images à l'intérieur duquel vous pouvez placer vos deux images.

HTML de base

Au niveau du HTML de la page, nous commençons pour créer les éléments principaux :

• Un header avec le titre de la page
• La partie principale avec un petit paragraphe introductif, l'image et le bouton
• Un footer qui réporte la source originale de l'image. Ce n'est pas obligatoire, car l'image est de domaine public, mais c'est quand même de bonne pratique de le faire.

Voici le code que vous pouvez retrouver dans les fichiers sur GitHub dans le dossier 01-step/index.html :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Brain Lobes Flash Card</title>
</head>

<body>
    <!-- Header -->
    <header>
        <h1>Brain Lobes Flash Card</h1>
    </header>

    <!-- Main content -->
    <main>
        <p>Learn the brain 4 lobes using the flash card below.</p>
        <p>
            <img src="assets/images/brain-without-labels.png" alt="The brain lobes" title="The brain lobes">
        </p>
        <button>Show labels</button>
    </main>
    <!-- Footer-->
    <footer>
        <p>The image of the brain is a
            <a href="https://commons.wikimedia.org/wiki/File:Lobes_of_the_brain_NL.svg">public domain file available at Wikimedia commons</a>.</p>
    </footer>
</body>

</html>

Le seul aspect un peut délicat du code concerne le pointage vers l'image (ligne 21), il faut bien faire attention de spécifier le bon parcours relatif.

Vous pouvez contrôler le résultat à ce stade :

• 01-step

Deuxième étape : look-and-feel avec CSS

Dans cette deuxième étape nous allons améliorer l'apparence de notre application à travers la définition de propriétés CSS qui détermine le look-and-feel des éléments HTML définit dans l'étape précédente.

Pour ce faire, nous allons agir sur deux fronts :

1. Nous allons créer une feuille de style, c'est-à-dire un fichier avec extension .css que nous appelons style.css et que nous plaçons dans un dossier assets/css ;
2. Nous allons associer des classes aux éléments HTML contenus dans le fichier index.html de la page pour pouvoir associer les propriétés CSS déclarées dans ce fichier.

Fichier CSS

D'abord, créez un dossier qui s'appelle css dans le dossier assets déjà présent. Ensuite, créez un fichier style.css à l'intérieur de ce dossier. De cette manière vous aurez une arborescene de ce type :

|- assets
    |- css
        |- style.css
    |- images
        |- brain-with-labels.png
        |- brain-without-labels.png
|- index.html

Il faudra à ce moment incorporer le fichier style.css dans votre document index.html. Dans le <head>...</head> du fichier HTML ajoutez la balise <link ...> qui pointe vers le fichier .css :

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Brain Lobes Flash Card</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>

À l'intérieur du fichier style.css nous allons définir quelques propriétés de style pour les éléments suivants :

• body

  Nous voulons enlever tout marge et padding automatique, centrer tous le contenu de la page, définir une taille de la police en peu plus grande par rapport à la taille automatique du navigateur (en utilisant donc la mesure 1.2rem), et changer enfin la police ;

  body {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    text-align: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  

• header

  Créer un header coloré, avec du padding autour du titre de la page

  header {
    padding: 10px 25px;
    background-color: slategrey;
    color: white;
    margin-bottom: 20px;
  }
  

• main

  Laisser un peu plus de marge après le contenu principale (i.e. les deux cards)

  main {
    margin-bottom: 30px;
  }
  

• .instructions-text

  Agrandir le paragraphe qui contient les instructions pour le rendre plus visible à travers une classe

  .instructions-text {
    font-size: 1.5rem;
  }