L’environnement de développement

Editeur de texte

L’éditeur de texte Visual Studio Code permet entre autres choses de faire du développement d’application Web. Comme tous les outils, il faut une période d’apprentissage pour le maitriser. C’est un choix que vous devez faire. L’intérêt de VS Code est dans son caractère universel. Vous pourrez l’utiliser dans de nombreux travaux de développements comme python, Java, PHP, C++, javascript et bien d’autres.

Il propose des composants complémentaires qui ajoutent des capacités et des facilités qui augmentent votre productivité. En voici une liste non exhaustive :

• Bracket Pair Colorizer : Permet de repérer les niveaux de parenthèses.
• Indent Rainbow: ajoute de la couleur à l’indentation.
• AutoClose Tag Auto Rename Tag : Propose les balises, éléments en fonction du début de la frappe.
• VS Code Icons : Ajoute des petites images en fonction de l’extension du fichier.
• HTML Boilerplate : Création d’une page HTML 5 vide.
• Prettier : Permet le formatage du document.
• Markdown All in One : Utilisation du langage de création de documentation.
• Markdown Preview Enhanced Affichage du résultat après traduction.
• GitLens : Utilisation de git, le gestionnaire de version, dans votre éditeur.
• Et bien d’autres voir l’article VS Code Extensions For Web Dev Productivity.

Mise en situation

Dans la suite du module, vous allez devoir créer des pages web qui associent des balises HTML, du code CSS et du code Javascript. Comme indiqué précédemment, il est important de faire le choix d’un environnement de développement qui contient :

• Un éditeur de texte (Environnement de Développement Intégré EDI ou IDE en anglais pour Integrated Development Environment)
• Un mécanisme de visualisation
• Un environnement de debug

Nous vous proposons d’utiliser VS Code comme éditeur de texte, votre navigateur comme outil de visualisation et le mécanisme de debug associé à VS Code.

Pour cela il faut :

• Récupérer VS Code (déjà disponible sur les machines de TP, ou dans l’installation de la rentrée),
• Installer les plugins proposés précédemment,
• Configurer l’outil de visualisation pour qu’il utilise votre navigateur,
• Configurer l’outil de debug.

Nous allons ajouter des images dans la page. Pour créer des pages avec des figures dans la préparation d’une maquette, il existe des sites qui proposent des images aléatoires libres de droit d’utilisation. Voici une liste non exhaustive de sites qui proposent des images :

• Koben Site d’information.
• Placeholder propose des rectangles qui représentent la taille de l’image.
• Lorem picsum Autre photos.

Nous allons utiliser un fichier de style pour vérifier que l’environnement de développement fonctionne.

Voici un petit exemple de fichier de style :

body {
    background-color: khaki;
}

h1 {
    border-bottom: 1px brown solid ;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 13px 27px -5px hsl(240deg 30% 28% / 25%), 0 8px 16px -8px hsl(0deg 0% 0% / 30%), 0 -6px 16px -6px hsl(0deg 0% 0% / 3%);
}

Nous allons maintenant ajouter un fichier javascript dans la page index.html.

HTML 5 propose des API qui permettent de dialoguer avec un environnement dans un cadre normé. C’est le cas pour le langage javascript.

Il y a plusieurs possibilités pour inclure du code javascript dans une page HTML5 :

• Dans la partie entête avec la balise script :

  <script src="js/global.js"></script>    

  solution préférable ou

  <script>      
  alert("JavaScript c’est surpuissant !");
  </script>

• Dans le corps de la page html qu’il faut en général éviter.

Le lien entre le code HTML et un programme se fait en utilisant le DOM (Document Object Model) qui est une représentation dans la mémoire de la page HTML5 interprétée par le navigateur.

Le programme javascript est chargé dès qu’il apparait dans la page. Cela peut provoquer des lenteurs à l’affichage dans le navigateur. C’est pourquoi il est important d’associé avec la balise script l’attribut async ou defer.

• async : le code javascript est exécuté dès qu’il est disponible (sans vérifier que le reste du contenu est disponible) et ne bloque pas le chargement du reste de la page.
• defer : le code javascript est chargé dans l’ordre d’apparition dans le document et le navigateur exécutera le code après l’analyse du reste du code.

En conclusion l’attribut defer est le plus sûr, mais peut retarder l’exécution du code. S’il n’y a pas de dépendance entre morceaux de code async sera moins contraignant.

<script src="js/global.js" defer></script>       

    <p id="nom">Saisir votre nom : </p>

let para = document.getElementById("nom");

para.addEventListener("click", updateName);

function updateName() {
  let name = prompt("Saisir un nouveau nom");
  para.textContent = "Collaborateur : " + name;
}