Objects natifs de Javascript

Licence Informatique 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Notes de cours

Exercice 1 — Objets natifs de Javascript #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW2/TP07/ex1/objets.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Enregistrer le fichier HTML donné. Ce fichier contient le code HTML pour chaque question.

Important : pour obtenir le contenu d'un champ input ou textarea il faut utiliser la propriété value, par exemple document.getElementById('texte-encode-1').value pour l'exercice 1.

Question 1 : encoder et décoder des chaines de caractères

Lettres inversées

Yvan a la tête à l'envers... tous les mots de son message ont les lettres inversées. Le premier textarea contient un exemple de message reçu.

Écrire un programme qui permet de décoder (et donc aussi d'encoder) un message saisi quand on clique sur le bouton et qui affiche le résultat dans la division d'identifiant texte-resultat-1.

Lettres décalées

Brieuc, lui, n'y voit pas clair... au lieu de taper sur la touche d'une lettre donnée il tape sur la touche à sa gauche.

On considèrera que le clavier est en azerty, que seules les lettres non accentuées sont changées, et que si on est en début de ligne du clavier alors on aura a remplacé par n, q remplacé par p et w remplacé par m.

Écrire un programme qui permet de décoder et d'encoder un message saisi quand on clique sur le bouton et qui affiche le résultat dans la division d'identifiant texte-resultat-2.

Note : écrire votre code pour ne pas avoir de redondance de code (une bonne partie du code pour encoder et décoder sont les mêmes).

Améliorations optionnelles (finir le TP d'abord) : ajouter un champ pour pouvoir choisir si on encode avec la touche de gauche ou de droite, voire avec un décalage de N touches vers la gauche ou la droite.

Question 2 : Dates

En informatique, le timestamp Unix est le nombre de secondes écoulées depuis le 1er janvier 1970 00:00:00 UTC (communément appelé le début de l'ère Unix). Une date ccorrespondont donc à un timestamp Unix. Attention, en Javascript, ce timestamp est en millisecondes et non en secondes.

Utiliser la documentation sur l'objet Date pour trouver les méthodes à utiliser dans cet exercice.

  • Afficher en console le jour de la semaine, le mois, par exemple Nous somme mardi et Nous sommes en février. Vous devrez auparavant créer la liste des noms de jours et la liste des noms de mois en français. Attention ça correspond au calendrier américain donc la semaine commence par dimanche et non lundi...
  • Afficher en console le timestamp Unix (en secondes) correspondant à la date de chargement de la page web.
  • Écrire une fonction qui utilise l'objet Date pour calculer l'âge d'une personne à partir de sa date de naissance. Afficher en console l'âge de Gilles né le 16 janvier 1989 et de Mélodie née le 28 novembre 2001.
  • Saisir dans le champ input une date de naissance et afficher l'âge et le jour de naissance dans l'élément d'identifiant date-resultat.
    On pourra utiliser la méthode split sur la chaine saisie et extraire ainsi les 3 composants jour, mois et année. Penser à vérifier que ces 3 composants sont bien des nombres (utiliser parseInt() et isNaN()). On pourra aussi tester que la date saisie n'est pas une date du futur !

Question 3 : timer

  • Créer une barre de progression qui démarre au chargement de la page et s'arrête au bout de 5 secondes, comme ceci :
    Un timer