TP 6 - JavaScript

Retour à la page de l'UE

Question 0.1 Créez un fichier tp6.html dans votre répertoire www, dans lequel vous réaliserez le TP d'aujourd'hui. Vous placerez le CSS et le JavaScript dans ce même fichier. Vous rendrez le fichier sur Jalon à la fin de la séance.

Exercice 1 : tables de multiplication

Question 1.1 Nous voulons produire un tableau HTML qui contient les tables de multiplications, de 1 à 12. Comme produire ce tableau à la main serait fastidieux, il va falloir le faire en quelques lignes de JavaScript. Vous pourrez pour cela utiliser deux boucles qui font varier un indice de 1 à 12. Dans la boucle interne, vous pourrez produire une cellule (i.e., écrire un td avec document.write()) qui contiendra le produit des deux indices. Où devrez-vous commencer et terminer les lignes, i.e., ouvrir et fermer des balises tr ? Vous devez obtenir ce résultat. Niveau CSS, on veut que les cellules aient une bordure grise, une largeur de 50 pixels, une marge interne de 5 pixels, et que le texte des cellules soit centré.
Question 1.2 Modifiez le tableau HTML précédent pour que les cellules contenant un nombre pair aient un fond bleu clair, que celles contenant un nombre divisible par trois aient un fond rosé, et que celles contenant un nombre pair divisible par trois aient un fond violet clair. Vous devez obtenir un résultat qui ressemble à ceci.

Exercice 2 : algorithme d'Euclide

On veut maintenant programmer l'algorithme d'Euclide en JavaScript. Pour rappel, cet algorithme permet de calculer le PGCD (Plus Grand Commun Diviseur) de deux entiers. Voici le pseudo-code de l'algorithme :

fonction PGCD(a, b) :
    variables locales : m, n, t
    m <- a, n <- b, t <- m
    tant que n > 0:
        t <- m mod n
        m <- n
        n <- t
    renvoyer m

Question 2.1 Ajoutez deux champs de texte (balises input avec type="text") dans lequel l'utilisateur pourra entrer les valeurs pour lesquelles il veut calculer le PGCD. Ajouter un bouton "Calculer" qui, à chaque clic, calculera le PGCD des deux nombres récupérés dans les champs de texte créés précedemment. Le résultat sera stocké dans une champ de texte qui aura l'attribut readonly (lecture seule). Voilà ce que vous devez obtenir... en vous assurant bien sûr que cliquer sur "Calculer" donne le bon résultat !
Question 2.2 S'il vous reste du temps, ajoutez deux boutons radio permettant de choisir s'il faudra calculer le PGCD ou le PPCM (Plus Petit Commun Multiple). Le PPCM de deux nombres a et b est égal à a * b / PGCD(a, b). Faites en sorte que selon le bouton radio sélectionné, cliquer sur "Calculer" calcule soit le PGCD, soit le PPCM des deux nombres que l'utilisateur aura entré dans les deux champs de texte éditables.

Valid XHTML 1.1