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:

function generer() { var bmin = parseInt(document.getElementById(“borne_min”).value); var bmax = parseInt(document.getElementById(“borne_max”).value); var nombres = document.getElementById(“n1”); var nombre = document.createElement(“div”); nombre.setAttribute(“class”, “nombre”); nombre.innerHTML = genererAleatoirement(bmin, bmax); nombres.appendChild(nombre); } function genererAleatoirement(borneMin, borneMax) { if (borneMax < borneMin) return 0; else return Math.floor(Math.random()*(borneMax - borneMin + 1)) + borneMin; }

  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:

function generer2() { var bmin = parseInt(document.getElementById(“borne_min2”).value); var bmax = parseInt(document.getElementById(“borne_max2”).value); var nombres = document.getElementById(“n2”); var nombre = document.createElement(“div”); nombre.setAttribute(“class”, “nombre”); for (var i=0; i<50; i++) { nombre.innerHTML += genererAleatoirement(bmin, bmax)+“,”; } nombre.innerHTML = nombre.innerHTML.slice(0,-2); nombres.appendChild(nombre); }

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.

var f1Posx = 250; var f1Posy = 250; var f1angle = 0; var f1 = document.getElementById(“f1”); function update() { f1.style.transform = “translate(”+f1Posx+“px,”+f1Posy+“px) rotate(”+f1angle+“deg)”; }; function avancer() { f1Posx += -Math.cos(2*f1angle/360*Math.PI) * 50; f1Posy += -Math.sin(2*f1angle/360*Math.PI) * 50; update(); } function gauche() { f1angle += -20; update(); }; function droite() { f1angle += +20; update(); }; update();

Facultatif.

À l’aide de l’évènement onkeydown de l’objet document essayez de diriger la fourmi avec les flèches directionnelless du clavier.

var toggle = document.getElementById(“toggleArrow”); var arrow=false; function toggleArrow(){ if (!arrow){ toggle.value =“Désactiver les flèches”; window.onkeydown = function(event){ if(event.keyCode == 37) gauche(); if(event.keyCode == 38) avancer(); if(event.keyCode == 39) droite(); event.preventDefault(); }} else{ toggle.value =“Activer les flèches”; window.onkeydown = function(){};} arrow = !arrow; }
  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.

var f2Posx = 250; var f2Posy = 250; var f2angle = 0; var f2 = document.getElementById(“f2”); function update2() { f2.style.transform = “translate(”+f2Posx+“px,”+f2Posy+“px) rotate(”+f2angle+“deg)”; }; function avancer2() { f2Posx += -Math.cos(2*f2angle/360*Math.PI) * 50; f2Posy += -Math.sin(2*f2angle/360*Math.PI) * 50; var canvas2 = document.getElementById(“canvas2”); if (f2Posx < 0) { f2Posx = 0; } if (f2Posy < 0) { f2Posy = 0; } if (f2Posx > canvas2.clientWidth - 30 ) { f2Posx = canvas2.clientWidth -30 ; } if (f2Posy > canvas2.clientHeight -30 ) { f2Posy = canvas2.clientHeight -30; } update2(); }; function gauche2() { f2angle += -20; update2(); }; function droite2() { f2angle += +20; update2(); }; update2();

  1. Une fourmi qui se déplace aléatoirement

En utilisant la fonction genererAleatoiremnt vue dans le debut du TD5 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:

var f3Posx = 250; var f3Posy = 250; var f3angle = 0; var f3 = document.getElementById(“f3”); function update3() { f3.style.transform = “translate(”+f3Posx+“px,”+f3Posy+“px) rotate(”+f3angle+“deg)”; }; function avancer3() { f3Posx += -Math.cos(2*f3angle/360*Math.PI) * 50; f3Posy += -Math.sin(2*f3angle/360*Math.PI) * 50; var canvas3 = document.getElementById(“canvas3”); if (f3Posx < 0) { f3Posx = 0; } if (f3Posy < 0) { f3Posy = 0; } if (f3Posx > canvas3.clientWidth - 30 ) { f3Posx = canvas3.clientWidth -30 ; } if (f3Posy > canvas3.clientHeight -30 ) { f3Posy = canvas3.clientHeight -30; } update3(); }; function gauche3() { f3angle += -20; update3(); }; function droite3() { f3angle += +20; update3(); }; update3(); function marcheAleatoire3() { var i = genererAleatoirement(0,2); if (i < 2){ avancer3(); } else{ var j = genererAleatoirement(0,11); if (j<6) { tourne = function(){droite3()}; } else { tourne = function(){gauche3()}; } j = j-6;
if (j<3) tourne(); if (j=3 || j==4) { tourne(); tourne(); } if (j= 5) { tourne(); tourne(); tourne(); } } }

  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:

var f4Posx = 250; var f4Posy = 250; var f4angle = 0; var f4 = document.getElementById(“f4”); function update4() { f4.style.transform = “translate(”+f4Posx+“px,”+f4Posy+“px) rotate(”+f4angle+“deg)”; }; function avancer4() { f4Posx += -Math.cos(2*f4angle/360*Math.PI) * 50; f4Posy += -Math.sin(2*f4angle/360*Math.PI) * 50; var canvas4 = document.getElementById(“canvas4”); if (f4Posx < 0) { f4Posx = 0; } if (f4Posy < 0) { f4Posy = 0; } if (f4Posx > canvas4.clientWidth - 30 ) { f4Posx = canvas4.clientWidth -30 ; } if (f4Posy > canvas4.clientHeight -30 ) { f4Posy = canvas4.clientHeight -30; } update4(); }; function gauche4() { f4angle += -20; update4(); }; function droite4() { f4angle += +20; update4(); }; update4(); function marcheAleatoire4() { var i = genererAleatoirement(0,3); if (i < 2){ avancer4(); } else{ var j = genererAleatoirement(0,11); if (j<6) { tourne = function(){droite4()}; } else { tourne = function(){gauche4()}; } j = j-6;
if (j<3) tourne(); if (j=3 || j==4) { tourne(); tourne(); } if (j= 5) { tourne(); tourne(); tourne(); } } } setInterval(marcheAleatoire4, 900);

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:

function nouvelleFourmi(boite) { var fourmi = {}; fourmi.positionX = genererAleatoirement(0, parseInt(boite.clientWidth)); fourmi.positionY = genererAleatoirement(0, parseInt(boite.clientHeight)); fourmi.angle = genererAleatoirement(0, 259); fourmi.image = document.createElement(“img”); fourmi.image.src = “/teaching/2017/internet_langages/fourmi.gif”; fourmi.image.setAttribute(“class”, “fourmis”); fourmi.boite = boite;
fourmi.tourneDroite = function(){ this.angle += -20; this.miseAJour(); }; fourmi.tourneGauche = function(){ this.angle += 20; this.miseAJour(); }; fourmi.avance = function() {
this.positionX += -Math.cos(2*this.angle/360*Math.PI) * 50; this.positionY += -Math.sin(2*this.angle/360*Math.PI) * 50; if (this.positionX < 0) { this.positionX = 0; } if (this.positionY < 0) { this.positionY = 0; } if (this.positionX > this.boite.clientWidth - 30 ) { this.positionX = this.boite.clientWidth -30 ; } if (this.positionY > this.boite.clientHeight -30 ) { this.positionY = this.boite.clientHeight -30; }
this.miseAJour(); }; fourmi.miseAJour = function() { this.image.style.transform = “translate(”+this.positionX+“px,”+this.positionY+“px) rotate(”+this.angle+“deg)”; }; fourmi.marcheAleatoire = function() { var i = genererAleatoirement(0,2); var that = this; if (i < 2){ this.avance(); } else{ var j = genererAleatoirement(0,11); if (j<6) { tourne = function(){that.tourneDroite()}; } else { tourne = function(){that.tourneGauche()}; } j = j-6;
if (j<3) tourne(); if (j=3 || j==4) { tourne(); tourne(); } if (j= 5) { tourne(); tourne(); tourne(); } } }; fourmi.commencer = function() { var that = this; this.boite.appendChild(this.image); setInterval(function(){that.marcheAleatoire();}, 900);
}; return fourmi; }
function ajoutFourmi() { var boite =document.getElementById(“canvas5”); var fourmi = nouvelleFourmi(boite); fourmi.commencer(); }

  1. Une fourmilière

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

function ajoutFourmi2() { var boite =document.getElementById(“canvas6”); var fourmi = nouvelleFourmi(boite); fourmi.commencer(); } for (var i=0; i<100;i++) ajoutFourmi2();