Programmation Web, année 2019
Attention.
Les TD doivent être réalisés sous Linux et non sous Windows. Chaque étudiant doit être inscrit sur Moodle. Le forum peut être utilisé pour poser des questions pendant et en dehors des TD.
A propos de la récupération de script dans le code source de la page
Le code des scripts ne sont désormais plus aussi aisément accessible via l’inspecteur (mais c’est toujours possible de les trouver en cherchant bien). Si vous souhaitez une correction particulière pour une question d’un des TD, je vous invite à la demander via le forum Moodle et je serais ravis de la fournir le plus rapidement possible.
Quelques ressources en lignes
- Le site des tutoriels du W3C est une référence pour les langages du WEB (langue anglaise).
- Pour les non anglophones le site de Mozilla possède de nombreuses ressources en français pour HTML5, CSS3 et JavaScript
- Le site openclassrooms permet également de réviser les bases HTML5 et CSS3.
Une première fonction
- Un générateur aléatoire de nombre entier
Quelle fonction permet de générer un nombre aléatoire? Définir une
fonction genererAleatoirement
JavaScript
qui prend deux arguments borneMin
et borne_max
et qui retourne un entier entre borne_min
et
borneMax
inclus.
- Utilisez la fonction
genereAleatoirement
Utilisez cette fonction pour réaliser l’exemple suivant:
min: max:
- Générer pleins de nombres
Générer 50 nombres d’un coup à l’aide d’une boucle for
et de la fonction genererAleatoirement
comme dans l’exemple
suivant.
min: max:
Faire bouger une fourmi
Télécharger l’image animée d’une fourmi ici et ajoutez la à votre répertoire.
- Faire bouger la fourmi
En vous inspirant du TD précédant, essayez de reproduire l’exemple suivant. Vous aurez besoin des fonctions trigonométriques usuelles cosinus et sinus.
Facultatif.
À l’aide de l’évènement onkeydown de l’objet document essayez de diriger la fourmi avec les flèches directionnelless du clavier.
- Enfermer la fourmi dans une boite
Quand la fourmi sors de son carré, elle disparaît. Faites en sorte dans un nouvel exemple et sans toucher à la question 3, qu’elle soit bloquée et ne puisse plus avancer.
- Une fourmi qui se déplace aléatoirement
En utilisant la fonction genererAleatoiremnt
vue dans le
début du TD faire en sorte que la fourmi se déplace aléatoirement en
allant tout droit avec probabilité \(\frac{2}{3}\) et en tournant avec une
probabilité \(\frac{1}{3}\). Lorsque la
fourmi tourne, elle peut tourner en allant à droite ou à gauche. Elle
peut tourner d’au plus 60 degrés avec une probabilité de tourner de 20
degrés de \(\frac{1}{2}\), une
probabilité de tourner de de 40 degrés de \(\frac{1}{3}\) et une probabilité de tourner
de 60 degrés de \(\frac{1}{6}\).
Faites en sorte dans un nouvel exemple et sans toucher à la question 3 de reproduire l’exemple suivant en respectant ces règles simples:
- Une fourmi qui marche toute seule
C’est un peu ennuyeux de devoir appuyer sur le bouton en permanence. En utilisant la fonction setInterval et en faisant particulièrement attention d’ajuster le temps des transitions sur le temps passé en paramètre de cette fonction, essayez de faire en sorte que cette fourmi ce débrouille toute seule, comme dans l’exemple suivant:
Un objet foumi pour faire une fourmilière
- Un objet fourmi
Nous voulons maintenant avoir une vrai fourmilière car la fourmi se sent un peu seule. Pour cela, il n’est pas souhaitable de recopier pour chaque fourmi le code que nous avons rentré. Nous allons donc utiliser pour cela un objet. Relisez très attentivement la page dédiée aux objets sur le site de la W3schools à cette adresse.
Créez une fonction nouvelleFourmi(boite)
où boite est un
élément HTML div
existant servant de boite pour la fourmi
et qui retourne un objet avec les propriétés suivantes:
- positionX (initialisée aléatoirement entre 0 et la largeur de la boite)
- positionY (initialisée aléatoirement entre 0 et la hauteur de la boite)
- angle (initialisée aléatoirement entre 0 et 360)
- image (nouvel élément
img
crée dynamiquement et dont la propriétésrc
pointe vers l’url de l’image de la fourmi) - boite (l’argument de la fonction)
Cette objet doit également avoir les méthodes suivantes:
- tourneDroite() (modifie l’angle)
- tourneGauche() (modifie l’angle)
- avance() (avance dans la direction de l’angle)
- miseAJour() (met à jour la position réelle de la fourmi à l’aide
d’une opération CSS
transform
) - marcheAleatoire() (marche aléatoirement un coup en respectant les règles de la question 6)
- commence() (ajoute l’image à la boite et commence la marche aléaoire indéfiniment)
- Une fourmilière
On peut maintenant créer une véritable fourmilière directement:
Compiled the: mer. 04 sept. 2024 12:49:36 CEST