L3 MIASHS, Programmation Web 2, année 2022

Pour vous aider à comprendre les questions, vous pouvez consulter la correction offusqué. Il s’agit d’une page web où vous trouverez le comportement attendu. Le code JavaScript n’est pas lisible.

• Internet est autorisé
• Les documents sont autorisés
• Tout copié collé depuis internet doit être indiqué dans le source. Tout entorse à cette règle entraine 0 et sera considété comme du plagiat
• La communication entre étudiants est interdite

Le barème est indicatif, et sera ajusté en fonction des rendus des étudiants.

Énoncés

1. Créez un répertoire exam_{nom} en remplaçant {nom} par votre nom. Dans la suite de l’examen, ce repertoire sera appelé répertoire de travail.

2. Dans votre répertoire de travail, créez un fichier index.html et ajoutez lui une feuille de style (un fichier CSS) de votre choix.

3. Indiquez dans votre fichier HTML votre nom et votre numéro d’étudiant.

Partie facile (11pts)

1. Créez un fichier script_simple.js dans le répertoire de travail et faites en sorte qu’il soit exécuté lorsqu’un navigateur charge la page index.html.

2. En modifiant uniquement le fichier script_simple.js, ajouter la date en utilisant la fonction date

3. En modifiant uniquement le fichier index.html, ajoutez un élément HTML section dont l’id est facile contenant un élément HTML h2 affichant Réponses aux questions faciles

4. En modifiant uniquement le fichier script_simple.js, ajouter à l’élément facile cette image

5. Ajouter de la manière de votre choix deux boutons pour aggrandir et rettrécir l’image.

6. Ajouter un bouton qui fait faire une rotation à 45° de l’image. Vous devez obtenir le résultat suivant:

Partie difficile: un tableau dynamique(19pts)

L’objectif est de faire un objet JavaScript est de faire un tableau dynamique. Il s’agit d’un tableau qui peut afficher des données tabulaires et trier en ordre croissant ou décroissant une colonne.

1. Ajouter le fichier data.js a votre document html. Il contient des données stockées dans la variable globale data qui est de type Array.

   • Créez un fichier script_difficile.js et faites en sorte que data.js et script_difficile.js soient executées au chargement de la page (dans cet ordre!)
   • Ajouter une nouvelle section à votre document dont l’id est difficile.
   • Afficher dans la console la taille de data.

2. Réalisé un tableau statique affichant les données:

Ajouter à la section d’id difficile une section d’id statique qui contient:

• Un titre Le tableau statique
• un conteneur de tableau
• le tableau dans son conteneur
• Qui évite que le tableau prenne trop de place en hauteur (en CSS)

3. Réaliseé un tableau dynamique affichant les données

Ajouter à la section d’id difficile une section d’id statique qui contient:

• Un titre Le tableau dynamique
• un conteneur de tableau
• le tableau dans son conteneur
• Qui évite que le tableau prenne trop de place en hauteur (en CSS)
• Faites en sorte que le tableau soit trié quand on clique sur un entête de colonne
• Changer le sens du trie quand on reclique sur l’entête

Compiled the: dim. 07 janv. 2024 23:19:11 CET