DIU-EIL - TP “introduction à HTML5, CSS3 et JavaScript”

IMPORTANT La correction du TP

Documentation

Documentation de référence

• Référence : https://developer.mozilla.org/en-US/docs/Web
• Référence : https://devdocs.io/
• Livre en ligne : https://javascript.info/
• (pour les puristes) Standards : HTML, DOM, CSS et JavaScript

Bonnes pratiques

• Éditeur : Visual Studio Code
• HTML Best Practices https://github.com/hail2u/html-best-practices
• Google HTML/CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html
• Guide de style JavaScript https://github.com/airbnb/javascript
  • existe aussi pour CSS mais beacoup moins populaire
• css {guide: lines;} https://cssguidelin.es/ et https://cssreference.io/
• Front-End Checklist https://github.com/thedaviddias/Front-End-Checklist

Tutoriaux et guides

• Tutoriaux W3S : http://www.w3schools.com/
• Tutoriaux MDN : https://developer.mozilla.org/en-US/docs/Learn
• Mozilla’s Web Literacy Program https://learning.mozilla.org/en-US/web-literacy>
  • 14 compétences illustrées avec des activités pour public variés
• Informatique au lycée de David Roche https://pixees.fr/informatiquelycee/jhindex.html
• Programmation Python orientée Web : https://www.fullstackpython.com/
• Modern CSS Explained For Dinosaurs : https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525

Partie : découverte des outils du développeur

Les fichiers sont disponibles dans l’archive DIU-EIL-WEB-fichiers.zip :

• Téléchargez puis ouvrez les fichiers DIU-EIL-WEB.html dans votre navigateur Firefox (ou Chromium, c’est très proche)
• Ouvrez les fichiers DIU-EIL-WEB.html, DIU-EIL-WEB.js et DIU-EIL-WEB.css avec votre éditeur.

Exercice : outils du développeur, prise en main

Dans l’onglet de DIU-EIL-WEB.html, ouvrez les outils de développement (F12) de Firefox. Utilisez les outils du développeur pour répondre aux questions suivantes :

• quels sont les identifiants des sections ?
• quels sont les classes CSS utilisées ?
• quelles sont les propriétés CSS utilisées pour mettre en forme les boutons Range et Reset ? Modifiez les dynamiquement depuis Firefox
• quels sont les fichiers qui sont téléchargés lors du chargement de la page ? Il y a t’il des erreurs ?

Editez ensuite DIU-EIL-WEB.html pour l’indenter selon la structure arborescente du contenu HTML.

Remarques

• Vous pouvez facilement ouvrir un serveur web avec la commande python3 -m http.server 5000 (pour le port 5000).
• Vous pouvez aussi ouvrir un serveur qui va automatiquement recharger la page lors des modifications :
  • avec l’extension Live Server de VSCode
  • avec le module Python Livereload qui s’installe avec pip install -U livereload et qui se lance avec livereload -p 5000 .

Partie : HTML5 et CSS3

Exercice : formatage de texte

Téléchargez les règles du jeu et ajoutez une partie de ces règles à la page HTML dans la section 2 en respectant la structure du document.

A ce stade, la mise en forme sera différente, mais cherchez surtout à reproduire la structure logique du document.

Exercice : prise en main CSS : les sélecteurs

• Passez les 32 niveaux de http://flukeout.github.io/
• (plus avancé mais sympa) Retrouvez l’image qui se cache sur dans Le Coloriage Magique n°1

Exercice : application CSS

Modifiez DIU-EIL-WEB.css en s’inspirant de la mise en forme ci-dessous, pour cela :

• donnez des couleurs aux principaux éléments sémantiques HTML5 avec la propriété background-color
• centrez le texte de l’en-tête et du pied-de-page avec la propriété text-align
• utilisez a:hover pour changer la couleur des liens du menu lors d’un survol
• utilisez display: flex ou display: table pour créer le menu sur la gauche

L’interface doit rester adaptable à la taille du dispositif, sans zone de taille fixe.

Exercice : pour aller plus loin

• Mettez en forme la règle du jeu
• Transformez le menu pour qu’il soit horizontal sans toucher au HTML. Pour cela, utilisez soit display : inline; avec un positionnement float:left soit des flexbox

Partie : programmation en JavaScript

Exercice : prise en main

Allez dans l’onglet console des outils de développement :

• Exécutez console.log(fibonacci(10));,
• Retrouvez où est chargé le fichier JavaScript DIU-EIL-WEB.js,
• Retrouvez la définition de la fonction fibonacci dans DIU-EIL-WEB.js,
• Ajouter une constante au fichier DIU-EIL-WEB.js afficher sa valeur dans la console.

Exercice : la fonction range, presque comme en Python

On veut écrire une fonction qui fait comme la fonction range() de Python.

Avec l’API des tableaux et une boucle for écrire la fonction range(stop, [start], [step]) qui prend trois arguments en paramètre et renvoie le tableau des entiers compris entre start (inclus) et stop (exclu) avec un pas de step :

• si start n’est pas défini, sa valeur par défaut est 0;
• si step n’est pas défini, sa valeur par défaut est 1;
• si stop est inférieur ou égal à start, alors le tableau vide est retourné.

Testez votre fonction dans la console. Vous pouvez utiliser les arguments par défaut ES6

Exemples

• range(10, 0) == range(10) == [0,1,2,3,4,5,6,8,9]
• range(10, 4, 2) == [4,6,8]
• range(-2, 0)=[]

Partie : l’API DOM

Exercice : prise en main

• Quelle est la fonction qui est exécutée quand on clique sur le bouton #btn-exec ? Où est-ce fait dans le code JavaScript ?
• Créez une fonction que vous associerez au bouton #btn-exec à la place de l’éxistante. Cette fonction demandera à l’utilisateur de saisir une chaîne et remplacera le texte du bouton par la chaîne saisie.

Exercice : associer des événements au formulaire de la fonction range

Ajoutez les handlers pour faire fonctionner le formulaire fourni pour la fonction range, pour cela, dans une fonction :

• Allez chercher les champs <input> de saisie avec document.getElementById
• Avec Number.parseInt, convertir les saisies en entiers et gérer les cas d’erreurs avec Number.isNaN
• Exécutez range avec les paramètres fournis puis convertissez le résultat en chaine avec JSON.stringify
• Ajoutez la chaine résultat à l’élément <code id="output">
• Ajoutez un handler sur bouton Reset pour vide l’élément <code id="output">

Exercice : modifier la structure et le contenu de la page

• Dans la console, avec document.querySelectorAll et avec un sélecteur CSS et l’attribut Element​.inner​HTML, comptez le nombre d’éléments <li> qui sont dans le menu <nav>
• Ajoutez, en JavaScript (ou à défaut dans le HTML), un bouton à la page
• Associer au bouton crée un handler qui renommera tous les liens du menu <nav>. Vous utiliserez pour cela document.querySelectorAll

Remarque : dans le handler d’un événement, vous pouvez faire référence à l’élément HTML en question avec this

Exercice : suivre la souris

Dans la feuille de style, une classe dot permet d’afficher un point. On va utiliser cette classe pour traquer le curseur de la souris en affichant le point dessous.

• Ajoutez dynamiquement (en JavaScript) ou statiquement (dans le html) un div avec la classe dot
• Créez une fonction follow_mouse() qui aura le comportement suivant :
  • elle garde une variable locale mouse_pos qui va stocker la position courante de la souris
  • elle associe à l’événement mousemove un handler qui met à jour mouse_pos
  • elle va déclencher toutes les 50ms avec setInterval une fonction qui lit mouse_pos et positionne le point sous le curseur en modifiant les attributs CSS left et top du div

Pour aller plus loin, ajoutez un bouton et lors d’un clic, faites en sorte :

• que si le traqueur n’est pas active on l’active,
• que si le traqueur est actif on le désactive : on cache le cercle et on supprime les handlers,
• utilisez pour cela classList.toggle("invisible"); avec une classe qui rend les élements invisibles

Exercice : le konami code

Le Konami Code est la séquence de touches suivante : ↑ ↑ ↓ ↓ ← → ← → B A. Faites en sorte que quand ce code est saisie au clavier, la page web affiche un popup.

Utilisez pour cela le gestionnaire d’événement onkeydown l’attribut [key}(https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) de l’événement pour déjà afficher toutes les frappes clavier.

Pour savoir où vous en êtes dans l’avancement de la saisie du Konami Code, utilisez une fermeture, voir notamment l’exemple Emulating private methods with closures de MDN

Pour aller plus loin en JavaScript

Vous pouvez reprendre la partie interface dynamique de la plate-forme de TP 2018-2019.