Files
web_2025/R4.01_R4.A.10/td_tp/tp1
2026-01-23 11:06:35 +01:00
..
2026-01-23 11:06:35 +01:00
2026-01-23 11:06:35 +01:00
2026-01-23 11:06:35 +01:00
2026-01-23 11:06:35 +01:00

TP javascript : bases du langages.

Un peu d'aide.

Séance 1

Ex1 : fourmi de Langton

Une fourmi, assimilable à un petit automate, se promène sur une grille de points colorés; pour commencer, tous les points sont blancs.

  • la fourmi est initialement placée au centre de la grille. Elle se déplace dans les quatre directions cardinales. Initialement, elle va vers l'est.
  • A chaque pas, elle se déplace d'une case dans sa direction. Son parcours est dicté par les deux règles suivantes :
    • Si la case atteinte est noire, elle la repeint en blanc, et tourne de 90° à gauche.
    • Si la case est blanche, elle la repeint en noire, et tourne de 90° à droite.
  • Elle continue son chemin en suivant ces règles.
_Les 9 premiers pas de la fourmi_

Vous disposez de sources que vous allez compléter. En particulier, il y a 2 modules :

  • une classe Ant qui représente l'univers : la fourmi, et les tuiles sur lesquelles elle se déplace.
  • une fonction render qui gére l'affichage graphique.
  • La fourmi a une position sur la grille, ainsi qu'une direction. La direction sera codée par un entier (angle 0,90,180 ou 270).
  • Les tuiles sont repréntées par un tableau à 2 dimensions. Chaque tuile a 2 valeurs possibles (0 ou 1).
  1. Complétez le code de la classe Ant.
  2. Complétez le code de app.js.
  3. Ajoutez un bouton/lien qui permet de réinitialiser la simulation.
  4. Dissociez, en terme de classe/structure, la fourmi de la grille sur laquelle elle évolue, et modifiez le code en conséquence.

Ex2 : fourmi de Langton

On peut complexifier et généraliser la fourmi précédente, et les règles d'évolution de l'automate correspondant : la fourmi, et les tuiles peuvent avoir un nombre quelconque d'états. Les règles de l'automate sont alors décrites par une table de transition.

Exemple 1 : on donne la table de transition suivante (T désigne la tuile, a la fourmi) à 2 états pour la fourmi, et 2 états pour les tuiles.

T: 0 T: 1
a: 0 (1,0,1) (0,90,1)
a: 1 (0,-90,1) (1,0,1)

Chaque triplet représente (Ant State Change, Ant Direction Change, Tile State Change). Ainsi,

  • (1,90,0) => on incrémente 1 à l'état de la fourmi, 90 à sa direction, et 0 à l'état de la tuile.
  • (0,-90,1) => on incrémente 0 à l'état de la fourmi, -90 à sa direction, et 1 à l'état de la tuile.

Les incrémentations se font modulo le nombre d'états possibles.

Avec cet automate, on obtient la figure :

Par commodité, on note la table de transition précédente simplement :

 (1,0,1)    (0,90,1) 
 (0,-90,1)   (1,0,1)   
  1. Modifiez le code de l'exercice 1 de manière à pouvoir simuler l'automate ci-dessus. Votre solution doit pouvoir permettre une simulation quelconque. Quelle est la table correspondante à la fourmi de la première partie du tp ?

  2. Testez avec

    (1,90,0) (0,-90,1)
    (0,-90,1) (1,90,1)
    
  3. Testez avec

    (1, 0, 1) (0, 90, 0) 
    (0, -90, 1) (1, 0, 1)
    

Séance 2

Soit le tableau d'objets suivant :

let customers = [
	{
		'id': 1,
		'f_name': 'Abby',
		'l_name': 'Thomas',
		'gender': 'M',
		'married': true,
		'age': 32,
		'expense': 500,
		'purchased': ['Shampoo', 'Toys', 'Book']
	},
	{
		'id': 2,
		'f_name': 'Jerry',
		'l_name': 'Tom',
		'gender': 'M',
		'married': true,
		'age': 64,
		'expense': 100,
		'purchased': ['Stick', 'Blade']
	},
	{
		'id': 3,
		'f_name': 'Dianna',
		'l_name': 'Cherry',
		'gender': 'F',
		'married': true,
		'age': 22,
		'expense': 1500,
		'purchased': ['Lipstik', 'Nail Polish', 'Bag', 'Book']
	},
	{
		'id': 4,
		'f_name': 'Dev',
		'l_name': 'Currian',
		'gender': 'M',
		'married': true,
		'age': 82,
		'expense': 90,
		'purchased': ['Book']
	},
	{
		'id': 5,
		'f_name': 'Maria',
		'l_name': 'Gomes',
		'gender': 'F',
		'married': false,
		'age': 7,
		'expense': 300,
		'purchased': ['Toys']
	},
	{
		'id': 6,
		'f_name': 'Homer',
		'l_name': 'Simpson',
		'gender': 'M',
		'married': true,
		'age': 39,
		'expense': 500,
		'purchased': ['Book']
	}
];

En utilisant les fonctions/méthodes forEach, filter, map, reduce, some, donnez ou calculez :

  1. un tableau des client séniors (dont l'âge est plus de 60 ans).
  2. un tableau où chaque client possède un nouvel attribut full_name.
  3. s'il y a un client de moins de 10 ans.
  4. le nombre d'acheteurs de livres.
  5. la somme totale d'argent dépensé par les clients marriés.
  6. Pour chaque produit, la liste (id) des acheteurs.