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

Une première fonction

  1. 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.

  1. Utilisez la fonction genereAleatoirement

Utilisez cette fonction pour réaliser l’exemple suivant:


min: max:
  1. 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.

  1. 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.

  1. 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.

  1. 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:

  1. 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

  1. 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:

Cette objet doit également avoir les méthodes suivantes:

  1. Une fourmilière

On peut maintenant créer une véritable fourmilière directement: