![[LOGO]](css/UGE.png) |
Premiers pas en Javascript |
Comme pour les TP précédents, on vous demande de créer un
répertoire tp4 qui contiendra les exercices de cette feuille de TP et de
faire un compte rendu de TP en HTML.
Ce TP sera relu attentivement par votre chargé de TP, qui reviendra vers
vous pour vous signaler quelles questions vous avez bien traitées et celles pour
lesquelles vous vous êtes trompés.
Vous avez le droit de lire l'intégralité du sujet du TP pour comprendre où on souhaite
que vous alliez.
Attention : Chaque fois que l'on vous demande
de réécrire une fonction ou de remplacer votre code par un nouveau code,
il faudra mettre l'ancien code en commentaire et surtout pas
le supprimer. Sinon, votre chargé de TP ne sera plus en mesure de vérifier que l'ancien
code répondait à la question précédente.
Exercice 1 : Hello World
Cet exercice montre comment utiliser les outils de
developpement présents sur les navigateurs, comme la console.
- Recopiez la page Web exo1.html dans votre répertoire tp4.
Que se
passe-t-il lorsque l'on visualise la page ?
Comment fait-on
pour ouvrir la console avec Firefox ?
Et avec Chrome ?
- Mettez l'ancien code en commentaire.
Ecrivez un code
permettant d'afficher, toujours dans la console, les nombres de 0 à 2025 inclus
(il n'est pas nécessaire de faire une fonction pour l'instant).
Note : par pitié, pas de copier/coller, d'autant plus que l'on doit afficher 2026 nombres !
- Mettez l'ancien code en commentaire.
Réécrivez un nouveau code code pour afficher dans la console
les nombres divisibles par 2 ou par 3 allant de 0 à 2025 inclus : 0, 2, 3, 4, 6, 8, …, 2020, 2022, 2024, 2025.
- Commentez l'ancien code et écrire une fonction (que vous
nommerez de façon claire et intelligente) prenant un entier en
paramètre et affichant sur la console les nombres divisibles par 2 ou par 3 allant de de 0 à cet entier
(inclus).
Puis écrivez un code de test de la fonction avec les
valeurs 7 et puis 10. Que se passe-t-il si on teste la fonction avec la valeur -1 ?
Exercice 2 : Manipulations simples
Ici, nous allons manipuler des objets dont le type est un type de base : number, boolean, string.
- Recopiez la page Web exo2.html dans votre répertoire tp4.
-
Dans la section Question 1, remplir le corps de la fonction sumSquares de sorte que sumSquares(n) renvoie la somme des carrés des entiers de 0 à n inclus.
Par exemple, sumSquares(3) = 0 × 0 + 1 × 1 + 2 × 2 + 3 × 3 = 14.
Afficher ensuite dans la console les valeurs de sumSquares(n) lorsque n vaut 3, 10, 10000000, et enfin 100000000.
La valeur de sumSquares(100000000) vous surprend-elle ?
-
Décommenter la ligne où l'on appelle la fonction question2.
Que s'affiche-t-il dans la console ? Expliquer chacun des résultats des huits tests que l'on a effectués.
-
Recommenter la ligne où l'on appelle la fonction question2 puis décommenter la ligne où l'on appelle la fonction question3.
Que s'affiche-t-il dans la console ? Expliquer chacun des résultats des trois tests que l'on a effectués.
Exercice 3 : Nombres premiers et PGCD
Le but est ici d'écrire quelques fonctions en rapport avec l'arithmétique, puis de les tester en direct.
- Recopiez la page Web exo3.html dans votre répertoire tp4.
-
Quel message d'avertissement pouvez-vous lire quand vous ouvrez la console ?
Et que voyez-vous quand vous ouvrez l'onglet « Réseau » de la console de développement Web ?
Lire attentivement le code source du fichier exo3.html et téléchargez dans votre répertoire tp4 la ressource qu'il vous manque pour faire fonctionner correctement la page exo3.html.
-
En haut de la page Web se trouve une section intitulée Somme.
Vous pouvez y écrire deux entiers, dans deux zones balisées de type textarea.
Que se passe-t-il quand vous appuyez sur le bouton C'est parti ! situé juste en-dessous ?
Quelle ressource devez-vous charger pour
-
Dans cette première section, on calculait la somme de deux entiers, à l'aide d'une fonction nommée sum.
Dans la deuxième section, on souhaite calculer le PGCD de deux entiers.
Pour ce faire, remplir le corps de la fonction pgcd de sorte que pgcd(a,b) renvoie le PGCD des entiers a et b.
On rappelle que le PGCD peut se calculer à l'aide de l'algorithme d'Euclide.
Tester votre fonction en écrivant des entiers dans les deux zones balisées de type textarea.
-
On souhaite maintenant vérifier si un nombre est premier.
On rappelle qu'un entier n est premier lorsque n possède exactement deux diviseurs strictement positifs.
Remplir le corps de la fonction isPrime de sorte que isPrime(n) renvoie true si n est un nombre premier, et false sinon.
Tester votre fonction en écrivant un entier dans la zone balisée de type textarea.
-
On souhaite enfin afficher la liste des premiers nombres premiers.
Remplir le corps de la fonction listPrimes de sorte que listPrimes(n) renvoie une chaîne de caractères contenant les écritures décimales des nombres premiers compris entre 2 et n inclus, séparées par des virgules.
Par exemple, listPrimes(9) renvoie la chaîne de caractères "2,3,5,7".
Tester votre fonction en écrivant un entier dans la zone balisée de type textarea.
Exercice 4 : Affichage de formes dans la console
On cherche à afficher des formes simples dans la console.
- Recopiez la page Web exo4.html dans votre répertoire tp4.
- On souhaite afficher des croix qui formeront un triangle rectangle isocèle.
La fonction triangleRectangle(n) doit permettre d'afficher un tel triangle de côté n.
Par exemple, triangleRectangle(4) permet d'afficher les lignes
.
..
...
....
Remplir le corps de la fonction triangleRectangle de manière adéquate puis la tester avec plusieurs valeurs de n.
- On souhaite maintenant disposer d'un triangle isocèle dont l'axe de symétrie est vertical.
La fonction triangleIsocèle(n) doit permettre d'afficher un tel triangle de hauteur n et de base 2n-1.
Par exemple, triangleIsocèle(4) permet d'afficher les lignes
.
...
.....
.......
Remplir le corps de la fonction triangleIsocèle de manière adéquate puis la tester avec plusieurs valeurs de n.
- On souhaite ensuite disposer d'un rectangle.
La fonction rectangle(a,b) doit permettre d'afficher un tel rectangle de hauteur a et de largeur b, sans compter les cases occupées par les bords du rectangle.
Par exemple, rectangle(4,6) permet d'afficher les lignes
+------+
| |
| |
| |
| |
+------+
Remplir le corps de la fonction rectangle de manière adéquate puis la tester avec plusieurs valeurs de a et b.
- On souhaite enfin disposer d'un carré.
La fonction carré(n) doit permettre d'afficher un tel carré de côté n, sans compter les cases occupées par les bords du carré.
Par exemple, carré(4) permet d'afficher les lignes
+----+
| |
| |
| |
| |
+----+
Remplir le corps de la fonction carré de manière adéquate puis la tester avec plusieurs valeurs de n.
- Le corps de la fonction carré doit prendre au plus une ligne, facile à lire et à comprendre.
Si ce n'est pas le cas, commentez votre code et réécrivez la fonction carré de sorte à satisfaire cette nouvelle contrainte.
© Université Gustave Eiffel