Envoyé par
Hoobux
Mais cela veut dire que les "paramètres" qui sont entre parenthèses peuvent êtres nommés comme bon nous semble ?
Oui, tant que tu n’oublies aucun endroit où le nom apparaît durant le renommage, et tant que ça ne crée pas de conflit de noms, c’est-à-dire quand deux variables se retrouvent avec le même nom ; on appelle ça aussi une collision.
Peut on simplifié ce code ?
Oui. Le code qui t’a été donné peut se décomposer en deux parties :
- la partie qui déclare Request, et qui est la partie réutilisable ;
- la partie qui crée l’objet requestApiJcDecaux, puis qui l’utilise. C’est la partie situationnelle, non réutilisable.
Écrire du code réutilisable permet de réduire le temps de développement et de faciliter la maintenance du code. Mais sur le plan purement théorique, ce n’est pas utile, et quand on débute, on peut sauter cette étape. Avec l’expérience tu comprendras son utilité par toi-même.
Et mon code est il correct ou pas ??
Il y a deux petits problèmes, qui sont tous deux liés à des particularités de JavaScript qui ne sont pas intuitives.
Le premier problème, c’est la façon dont tu déclares call à l’intérieur de la fonction Requete. Quand tu utilises pour la première fois un nom de variable, sans utiliser ni var ni let, JavaScript suppose que ton intention est de faire une variable globale. Cette situation peut mener à des problèmes de collision inattendus, du coup on préfère éviter.
(Idem pour stations plus bas.)
C’est un problème tellement courant qu’un mode optionnel a été conçu (entre autres) pour le détecter et empêcher que ça arrive : le mode strict. Pour moi, le mode strict est indispensable, et je pense que c’est un très bon réflexe à adopter quand on débute, aussi on va ajouter une petite ligne au début de ton code :
Ça va passer tout ton script en mode strict, et les variables non déclarées seront signalées par un message d’erreur, que tu pourras voir dans la console.
Au fait, si tu ne connais pas la console, c’est un autre outil indispensable pour développer en JS. Tous les navigateurs en ont une, appuie simplement sur F12 et choisis l’onglet « console ».
le second problème, c’est cette variable url dans l’instruction suivante :
console.log("erreur avec l'url " + url);
Puisque que tu as supprimé l’argument url de la fonction Requete, cette variable ne correspond plus à rien et, si un problème de connexion survient (évènement 'error'), ton script lèvera une erreur. Le plus simple serait de la remplacer par l’url « en dur » que tu as utilisée au-dessus, 'https://api.jcdecaux.com/...'. Mais vu qu’il ne s’agit que d’afficher un message dans la console, ce n’est pas très important.
À noter qu’ici, le message devrait être adressé à l’utilisateur final, vu qu’il s’agit d’un problème de connexion et qu’il peut probablement y faire quelque chose (vérifier son wifi ou autre). L’utilisateur n’est pas censé se servir de la console, aussi il faudrait trouver un autre moyen de lui indiquer le problème, idéalement en injectant du HTML dans la page. Mais c’est un détail.
J’attire ton attention sur un autre petit truc, qui n’est pas un problème en JS mais qui pourrait en être un dans un autre langage, par exemple Java ou C. Je te le dis pour que tu ne sois pas surpris le jour où tu décides d’apprendre un autre langage.
Il s’agit du nombre d’arguments d’une fonction.
Je m’explique : en supprimant les arguments de la fonction Requete, tu as modifié ce qu’on appelle sa signature. La signature n’est pas importante en JS car on peut appeler une fonction avec autant de paramètres qu’on veut : autant, moins, ou plus que ce qui est attendu. Par exemple si tu as la fonction suivante :
1
2
3
| function f(a, b) {
return a + 2*b;
} |
Tu peux l’appeler de ces façons :
Le troisième exemple renverra un résultat bizarre, mais aucune erreur ne sera levée.
Une petite note sur la terminologie. En théorie, on est censé parler d’« argument » dans la déclaration de la fonction, autrement dit dans sa signature ; et « paramètre » au moment d’appeler la fonction, quand on lui passe des valeurs. Dans la pratique, la plupart des gens utilisent l’un ou l’autre des ces termes sans faire la distinction.
Dans ton code simplifié, tu passes toujours des paramètres à new Requete, mais tu les passes dans le vent car ils n’ont plus d’arguments correspondants dans la signature.
Je vois que tu utilises let. C’est une bonne chose, et je pense que pour débuter il ne faut pas trop se soucier de var. Les différences entre les deux sont subtiles, et il n’est pas urgent de les connaître. Les choses se passent très bien quand on utilise uniquement let.
Je t’invite à consulter l’article du MDN sur let pour te familiariser avec le concept de portée des variables en JavaScript.
J’ai essayer et je me retrouve avec cela :
[…]
Mais je pense qu’il y a encore plus simple mais je ne trouve pas.
On peut simplifier encore plus en se débarassant de la partie réutilisable, à savoir Requete. On peut même extraire le contenu de la fonction call. Du coup, il faut déplacer la fonction qu’on lui passait en paramètre (callback). Pour faire ça j’ai créé une nouvelle fonction que j’ai appelée ma_callback. Voilà ce que ça donne :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| "use strict";
function ma_callback(response) {
response = JSON.parse(response);
response.forEach(function (info) {
L.marker([info.position.lat, info.position.lng]).addTo(mymap).bindPopup("Je suis un Texte.");
});
});
let req = new XMLHttpRequest();
req.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Toulouse&apiKey=xxxxxxxxxxxxxxxxxxxxxxxxx');
req.addEventListener('load', function() {
if (req.status >= 200 && req.status < 400) {
let stations = JSON.parse(req.responseText);
ma_callback(req.responseText);
} else {
ma_callback(req.status);
}
});
req.addEventListener('error', function() {
console.log("erreur de connexion");
});
req.send(null); |
Note, je ne sais pas comment sont déclarées les variables L et mymap que ton script utilise. Si tu dois copier ton bout code au milieu d’un autre script, assure-toi que l’instruction "use strict"; se trouve bien au début du fichier, sinon elle ne marchera pas. (Il y a bien une technique pour contourner cette contrainte, mais je ne veux pas t’embrouiller avec encore plus de détails pour l’instant.)
Compréhension de code
Répondre avec citation
) merci d'avance.
Partager