TP 5 - CSS et Javascript

Retour à la page de l'UE

Question 0.1. Comme la dernère fois, allez aussi loin que vous le pouvez dans le TP, et à la fin, créez une archive contenant votre répertoire www que vous rendrez sur Jalon.

Exercice 1 : un peu de JavaScript...

Question 1.1. Dans le fichier index.html de votre répertoire www/, ajoutez une section qui aura pour titre (h2) "Essais JavaScript". Ajoutez-y un bouton ayant pour texte "Hello, world !", qui, lorsqu'on clique dessus, affiche une boîte de dialogue avec le texte "Hello, world !".
Question 1.2. Dans cette même section, ajouter un bouton ayant pour texte "Changer le titre" qui, lorsqu'on clique dessus, affiche une boîte de dialogue demandant d'entrer du texte. Si l'utilisateur clique sur "OK", il faudra que le texte de titre principal (h1) de votre page soit remplacé par le texte qu'a entré l'utilisateur. Si l'utilisateur clique sur "Annuler", le titre ne doit pas être modifié.
Question 1.3. On veut maintenant que lorsque la souris survole l'image dans laquelle il y a votre adresse e-mail, celle-ci s'agrandisse. On veut que lorsque la souris en sorte, l'image retrouve sa taille originale. Pour cela, vous pourrez utiliser les paramètres onmouseover et onmouseout qui fonctionnent de manière similaire à onclick, sauf qu'ils récupèrent les évènements "entrée de la souris" et "sortie de la souris" (dans l'élément concerné). Vous pouvez récupérer l'image grâce à document.getElementById(). Sachez que vous pouvez changer la largeur d'un élément element avec element.height = ... (devinez comment faire pour la largeur...).
Question 1.4. Ajoutez maintenant une section dans votre fichier index.html appellée "Coordonnées de la souris", qui contiendra les coordonnées de la souris sur la page. Vous pourrez les placer dans un élément span, par exemple. Vous devrez définir une fonction appellée à chaque mouvement de la souris, qui mettra à jour ces coordonnées. Pour cela, ajoutez dans votre body un paramètre onmousemove qui appellera votre fonction avec un paramètre event. Vous pourrez ensuite récupérer les coordonnées x et y en lisant les champs clientX et clientY de l'argument de votre fonction.

Exercice 2 : le jeu des douze erreurs

Consultez la page à l'adresse http://i3s.unice.fr/~jplozi/intro_web_2016/exemples/sparks/. Il s'agit d'une page récupérée de l'intranet de l'équipe de recherche SPARKS, à l'I3S. Il est donc normal que vous ne puissiez pas accéder à la plupart des liens.

Question 2.1. Creez un répertoire sparks/ dans votre répertoire www/. Créez-y un fichier index.html qui contiendra la source de la page que vous venez de consulter. Accédez à cette page sur votre compte en HTTP avec votre navigateur. La page que vous voyez sur votre compte est-elle identique à celle que vous avez vu précédemment (notamment du point de vue de la mise en page...) ?
Question 2.2. Il vous manque la feuille de style. Trouvez la, téléchargez-la et ajoutez-la dans votre répertoire sparks/. Assurez-vous que maintenant, la page a la même mise en forme que celle que vous avez consulté précédemment ici.
Question 2.3. Douze erreurs ont été intégrées dans la page index.html et sa feuille de style. Utilisez https://html5.validator.nu/ (ou le validateur sur le site du W3C) pour valider la page sparks/index.html, et utilisez https://jigsaw.w3.org/css-validator/ pour valider la feuille de style. Les validateurs peuvent trouver plus de 12 erreurs car chaque erreur peut potentiellement produire des problèmes en cascade. Ils peuvent aussi trouver moins d'erreurs, car certaines erreurs sont si problématiques que le validateur n'essaiera pas de lire ce qui reste du document après l'erreur. Corrigez le fichier index.html ainsi que la feuille de style jusqu'à ne plus avoir une seule erreur !
Question 2.4. Lisez le fichier HTML et la feuille de style, pour comprendre plus ou moins leur fonctionnement, vous pouvez également utiliser l'inspecteur dans votre navigateur. En particulier, à quoi servent les lignes qui contiennent @media dans la feuille de style ?

Valid XHTML 1.1