Utilisation d'ordinateurs en réseau
TP numéro 5
27 mars 2017
Jean Méhat

Contenu du TP : utiliser Javascript

Le TP du jour porte essentiellement sur l'utilisation de Javascript. Pour les premiers programmes du TP, on utilise console.log(), qui affiche des messages dans la console du navigateur. On trouve souvent cette console avec la touche F12, ou sinon dans le menu developper>web console.

Attention, j'ai vraiment du mal à lire le code mal indenté : prétez-y attention dès le départ s'il vous plait.


Fonctions, nombres en virgules flottantes

On a vu en cours comment calculer en JavaScript le plus petit nombre auquel on peut ajouter 1 sans modifier sa valeur ; le code ressemblait à celui de la page add1.html. À faire : charger la page add1.html, regarder la console et indiquer l'ordre de grandeur de la réponse.

Question 1 : sur le même modèle, calculer le plus petit nombre positif qui va donner Infinity si on le multiplie par 2. Dans la réponse, n'indiquer que les différences indiquées par diff entre votre page et celle du add1.html original.


Tableaux

Constater que console.log écrit les tableaux sous une forme lisible, par exemple avec du code comme

        var x = [ "un", "deux", "trois" ];
        console.log(x);
      

Question 2 En utilisant le squelette suivant, écrire une fonction qui calcule et affiche sur la console les premières lignes du triangle de pascal :

        var courant = [];
        var suivant = [];
        var nfois = 10;

        courant[0] = 1; // initialiser la première ligne
        console.log(courant);

        for(var i = 0; i < nfois; i++){
          Votre code ici pour calculer suivant à partir de courant
          console.log(suivant);
  
          for(var i = 0; i < suivant.length; i++)
            courant[i] = suivant[i];
        }
      
Ne rendre que le code que vous avez ajouté.


Intervenir dans le DOM

Le compteur avec les boutons pour le modifier évoqué en cours peut se trouver ici. C'est un exemple simple de JavaScript qui modifie du HTML, ici quand on clique sur les boutons.

À faire : charger et étudier la page pos.html. Modifier les paramètres de déplacement du bouton et regarder l'effet produit.

Question 3 : simuler du texte clignotant (comme on pouvait en avoir autrefois avec la balise blink). [Indication : avec l'appel setInterval(fun, 500), on demande à JavaScript d'appeler la fonction fun toutes les 500 millisecondes. La fonction appelée peut jouer sur le visibility du style d'un élément, en basculant entre visible et hidden.]

Pour la réponse à cette question, n'indiquer que l'URL de la page sur le serveur web du bocal.

À faire : le fichier img.html contient un peu de texte et quelques images dont on peut modifier la taille avec des boutons. Son intérêt principal est l'utilisation de la méthode getElementsByTagName qui permet d'extraire dans un tableau tous les éléments du DOM d'un type donné. Examiner et comprendre le code.

À faire : le fichier img2.html contient un peu de texte et quelques images dont on peut modifier la taille en cliquant dessus. Son intérêt principal est qu'on passe l'élément concerné aux fonctions JavaScript (sous le nom this). Examiner et comprendre le code.


Du JavaScript dans votre CV

Question 4 : en vous inspirant par exemple de la page cv.html, reprenez le CV sur lequel vous avez travaillé pendant les premiers TPs et mettez-le en page. Ajoutez des effets JavaScript. Par exemple, afficher un menu quand la souris pénêtre dans la barre de gauche. Par exemple, changer (subtilement) la couleur de fond du paragraphe sur lequel se trouve la souris. Comme pour la question précédente, n'indiquer que l'URL de la page sur le serveur web du bocal.


Rendu des réponses

Les réponses aux questions posées sont à remettre, dans un seul fichier, sur la page Moodle du cours, avant 21 heures.