L3 MIASHS, Programmation Web 2, année 2022

  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.

(Vous pouvez reprendre un fichier CSS utilisé lors des TDs).

Partie facile (11pts)

Les questions de 1 à 4 sont notées sur 1pt, les question 5 et 6 sur 2 points et la question 7 est notée sur 3 points.

  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, affichez dans le user_agent.

  3. En modifiant uniquement le fichier index.html, ajoutez un élément HTML div 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 un élément HTML div à l’élément HTML facile contenant le texte je suis ajouté dynamiquement

  5. En modifiant uniquement le fichier index.html, ajoutez à l’élément HTML dont l’id est facile un bouton dont le texte est cliquez moi!.

  6. En modifiant uniquement le fichier script_simple.js, faites en sorte que le texte du bouton de la question précédente devienne merci si on clique dessus.

  7. En modifiant à la fois le fichier script_simple.js et index.html, créez un bouton qui quand on clique dessus, créé et affiche des éléments div ronds et vert. faites en sorte que la taille de chaque nouvel élément soit plus gros que le précédant. Indiquez en commentaire la propriété du langage de programmation de JavaScript permetant de gérer les évênements.

Partie difficile: un diagramme en bâton (19pts)

L’objectif est de faire un objet JavaScript affichant des diagrammes en bâton. Pour l’ensemble de cette partie, vous devez proposer des exemples d’utilisation des fonctions. Vous pourrez utiliser une fonction qui retourne des valeurs aléatoire ainsi qu’une fonction mathématiques de votre choix (par exemple \(f\colon:x\mapsto x^2\)).

Partie 1. (Sur 11pts)

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

  1. Créez une fonction affiche_console qui prend en argument une liste (Array) de points, une fonction à afficher et qui affiche dans la console l’application de la fonction sur la liste de points. Ajoutez dans le code source en commentaire une explication concernant le fait que cette fonction prenne une fonction en argument.

  2. Créez une fonction affiche_html_text qui prend en argument une liste (Array) de points, une fonction à afficher et un élément HTML et affiche joliment dans ce dernier le résultat de l’application de la fonction à la liste de points.

  3. Créez une fonction affiche_html_div qui prend en argument une liste (Array) de points, une fonction à afficher et un élément HTML et affiche dans ce dernier le résultat de la fonction en utilisant des div de hauteurs variables et de largeur fixe afin de produire un diagramme en bâton.

Partie 2. (Sur 8pts)

Pour cette partie, n’hésitez pas à demander de l’aide

Créez une fonction diagramme_baton qui prend en argument un élément HTML qui servira de conteneur dans lequel on affichera des diagrammes et une fonction à afficher. Retournez un objet disposant des méthodes affiche_html_text, affiche_html_div qui ajoutent au conteneur le résultat des fonctions de la partie précédente. L’objet en question doit stocker une fois pour toute la fonction à afficher comme une méthode. Cette dernière ne doit donc pas être passée en paramètre aux méthodes affiche_html_text et affiche_html_div.

Faites en sorte que le conteneur soit effacé à chaque appel de ces fonctions.

La correction est ici.


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