Discussion :

[Marco46]

Si je reprends les balises de script du site et l'exemple de Marco46, en remplaçant const par var, j'ai bien la fonction qui est appelée et une carte qui s'affiche.

Effectivement const change la portée j'ai fait ça à l'arrache sans tester mais la structure générale est à revoir.

Cela dit utiliser des classes (ES6) sans const ça n'a vraiment aucun sens. Mais l'ensemble du code devrait être revu pour être ES6 compatible, et le point de départ c'est qu'il n'y a pas de modules. Il faut du coup aussi un Babel / TypeScript pour transpiler et un bundler pour charger tout ça proprement dans le browser.

On pourrait avoir le lien de l'exercice et du cours associé ?

[Elztx]

C'est ça le vrai problème !
Il faut penser à faire des affichages un peu partout, désactiver du code, tester dans des fichiers simplifiés etc.
Même en étant débutant, on arrive ainsi à cerner la plupart des problèmes.

...

En effet, merci, j'avais quelque chose qui coinçait ailleurs, c'est résolu. Je vais tenter de remettre mes marqueurs à présent !
J'hésite à les mettre directement dans mon fichier map.js, je vais regarder ça.

Je commence à voir le bout ! Merci encore

[Elztx]

Bon, j'en profite pour vous dire de ne pas vous battre aha,
Dans le cadre de ma formation on me demande de procéder ainsi. Après libre à moi par la suite d'approfondir dans un sens ou dans l'autre.

Une fois rédigé en class, le code ne me pose pas de souci de lecture, et j'en apprécie la structure. Par contre j'ai vraiment l'impression de me prendre la tête pour rien quand je dois modifier mon code pour le faire passer en POO avec des class. D'autant plus que la demande a été modifiée en cours de formation...

Par ailleurs, le canvas et le diapo ne m'avaient pas posé de souci du tout alors que certains ont eu plus de mal avec ça et plus de facilités avec la map... je ne dois pas réfléchir pareil aha..

Par exemple, je bloque encore sur mon fichier markers !

Je n'ai pas cette facilité à retranscrire dans les class et je perds vite patience quand je pars d'un code fonctionnel pour devoir tout refaire et que ça bloque..

[Sodium]

JavaScript va de toute façon peu à peu évoluer et sortir de son modèle archaïque pour se rapprocher des autres langages beaucoup plus intuitifs et lisibles (le typage statique est prévu pour la prochaine version notamment), donc autant apprendre directement la bonne manière de faire

[Marco46]

je perds vite patience quand je pars d'un code fonctionnel pour devoir tout refaire et que ça bloque..

Ça s'appelle du refactoring. Tu vas littéralement passer ta carrière à en faire, autant t'y habituer

[Elztx]

En réalité cette formation est une passerelle pour moi, je ne compte pas faire que du dév, mais les compétences ajoutées m'intéressent pour mes projets persos, et la formation m'offre un titre bac +2 pour entamer autre chose derrière !

Et puis mon poste actuel en alternance m'attire beaucoup et il ne correspond pas vraiment à un profil de Dév mais plus de DA / Gestion de Projet..

Je vais faire une petite pause je crois, ces satanés marqueurs m'énervent ahaha.

Egalement, si vous avez des liens sur le sujet je veux bien..

[Engiwip]

Il y a vraiment une forme d'ego disproportionné et réfractaire aux changements chez les développeurs JS en fait.

"NON, on ne veut pas que JavaScript ait des classes, du typage et ressemble à n'importe quel langage normal. On veut que ça reste tordu et qu'il faille un long apprentissage pour maîtriser ses particularités (absurdités ?) pour pour pouvoir continuer à dire aux autres développeurs qu'ils n'ont rien compris !"

réfractaire au changement ? quelle drôle d'idée.

avec babel tu peux choisir la syntaxe que tu souhaites en entrée et le format JS en sortie que tu souhaites.

tu peux meme t'inventer un balisage ( jsx , tsx , h , <nouveau truc muche>...) pour plus de lisibilité .

tu peux modulariser ou , packager en morceaux les parties projet que tu souhaites .

tu peux inserer la vue , le controleur , le modele au meme endroit pour penser composant ou tout eclater pour definir une strategie de developpement

travailler avec un semblant de poo ou du lambda fonctionnel

en fait tu fais ce que tu veux réellement .

bref La liberté.

[Loralina]

Bonsoir,

Effectivement const change la portée

Plus ou moins un problème de portée :
A la limite, disons que oui si on considère qu'avec const/let, createMap n'a pas d'existence sur l'objet window (la constante/variable ainsi déclarée dans le contexte global n'est pas une propriété de cet objet).
Mais ce n'est pas un problème de contexte/bloc, comme si on avait mis des accolades et qu'on cherchait à y accéder en dehors.

Pour détailler un peu :
Si j'ai bien compris, la chaîne "createMap.initMap" est traitée sur le client par le js de google.
Elle est coupée sur le point et le script semble tenter un window["createMap"]["initMap"].

Voilà le fragment de code concerné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for(var b=a.split("."),c=window,d=window,e=0;e<b.length;e++)if(d=c,c=c[b[e]],!c)throw _.Wc(a+" is not a function");

On peut tester ce code dans map.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
//const createMap = new MapCreator('https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=67c4688df481c3a0da62ebfb2eb8619cca1a3542');
var createMap = new MapCreator('https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=67c4688df481c3a0da62ebfb2eb8619cca1a3542');
var a="createMap.initMap";
for(var b=a.split("."),c=window,d=window,e=0;e<b.length;e++)
	{
	if(d=c,c=c[b[e]],!c)
		{
		throw "is not a function";
		}
	console.log(c);
	}

Si on écrit var, ça passe car window.createMap existe.
Avec const/let, ce n'est pas le cas.

Par contre, si on fait un script php comme ceci :
map.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php echo $_GET['callback'].'();';?>

et un fichier html comme ceci :
test.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script src="map.js"></script>
<script src="http://127.0.0.1/map.php?callback=createMap.initMap"></script>

alors là, on peut tout à faire écrire const createMap = ... dans map.js, le script généré par map.php y aura bien accès.

[Sodium]

En réalité cette formation est une passerelle pour moi, je ne compte pas faire que du dév, mais les compétences ajoutées m'intéressent pour mes projets persos, et la formation m'offre un titre bac +2 pour entamer autre chose derrière !

Et puis mon poste actuel en alternance m'attire beaucoup et il ne correspond pas vraiment à un profil de Dév mais plus de DA / Gestion de Projet.. .

Si ton objectif n'est pas particulièrement de faire du JS tu as tout intérêt à apprendre les patterns communs à la majorité des langages plutôt qu'approfondir ses bizarreries.

réfractaire au changement ? quelle drôle d'idée.

avec babel tu peux choisir la syntaxe que tu souhaites en entrée et le format JS en sortie que tu souhaites.

tu peux meme t'inventer un balisage ( jsx , tsx , h , <nouveau truc muche>...) pour plus de lisibilité .

Et c'est censé être une qualité le fait que tout le monde puisse faire sa tambouille comme il le souhaite ?

Génial pour faire du recrutement et assurer une cohérence au sein d'une équipe en effet...

[Engiwip]

Et c'est censé être une qualité le fait que tout le monde puisse faire sa tambouille comme il le souhaite ?

Génial pour faire du recrutement et assurer une cohérence au sein d'une équipe en effet...

Mais de quoi on parle au juste ? tu mélanges tout. Je te repond par rapport au fait que les dev JS soient réfractaires au changement...

Tu peux tout faire en language Go aussi tu aura un maximum de coherence , c'est bien simple ils ont tout enlevé. Mais c'est chiant à mourrir.

il y en a qui aime .

[Sodium]

Vous êtes réfractaires au fait que JavaScript devienne un langage normal. Vous considérez que la manière dont JavaScript est mieux parce qu'il est mieux. Jamais vous ne vous posez la question de ce qui justifie le fait que JavaScript fonctionne comme il fonctionne.

[Watilin]

Il faudrait essayer var à la place de const

Mais du coup, on perd l’avantage de const. On peut utiliser Object.defineProperty() sur window pour arriver au même effet, mais bon c’est moins clair
Le mieux serait de revoir le reste du code pour ne plus avoir besoin d’une variable globale.

Il y a vraiment une forme d'ego disproportionné et réfractaire aux changements chez les développeurs JS en fait.

"NON, on ne veut pas que JavaScript ait des classes, du typage et ressemble à n'importe quel langage normal. On veut que ça reste tordu et qu'il faille un long apprentissage pour maîtriser ses particularités (absurdités ?) pour pour pouvoir continuer à dire aux autres développeurs qu'ils n'ont rien compris !"

Sodium, ah c’est dommage, j’ai pas envie de te contredire, parce que ton avatar est un violon, et moi j’aime les violons ^^
Pour réagir à « réfractaires au changement » : JavaScript est un ilôt de prototypes dans un océan de classes et c’est nous qui refusons le changement ?
Pour réagir à « on veut que ça reste tordu » : pas moi. En fait personne, il me semble, n’aime développer avec un langage tordu. Je l’ai déjà dit dans mon post précédent mais j’ai envie de reformuler : la schyzophénie objet de JS est un choix commercial, pas un choix technique, et c’est ça qui fout la merde (passez-moi l’expression) depuis des décennies. Il aurait fallu choisir un seul paradigme au départ, classe ou prototype, l’un ou l’autre m’aurait convenu. En attendant, c’est grâce à JS que j’ai appris le modèle prototype et je ne regrette pas.

Si ton objectif n'est pas particulièrement de faire du JS tu as tout intérêt à apprendre les patterns communs à la majorité des langages plutôt qu'approfondir ses bizarreries.

Tu marques un point. Mais je tiens à préciser que les prototypes ne sont pas propres à JS : Brendan Eich s’est inspiré du langage Self, et ils sont également utilisés par Lua, un langage de script employé pour faire de l’automation ou du modding.

Et c'est censé être une qualité le fait que tout le monde puisse faire sa tambouille comme il le souhaite ?

Là je suis d’accord avec toi, JavaScript donne un choix qu’il ne devrait pas donner sur la façon de faire de l’objet.

Jamais vous ne vous posez la question de ce qui justifie le fait que JavaScript fonctionne comme il fonctionne.

Si, tous les jours. JavaScript est bourré de défauts à cause de son histoire, et on est nombreuses et nombreux à en avoir conscience. C’est pour ça que certaines et certains font le choix d’utiliser un transpileur de « sur-langages » plus ou moins proches, tels que Babel, TypeScript ou encore CoffeeScript.

[Elztx]

Hello,

Je reviens vers vous aujourd'hui car après moult tentatives, je ne parviens toujours pas à replacer mes markers lorsque je passe mon code en class...
Si quelqu'un pouvait m'aider à les placer svp.. je maitrise correctement le gestionnaire d'évènements mais il doit y avoir quelque chose que je fais de travers au moment d'ajouter les marqueurs.

J'ai pourtant réussi à passer le reste en class sans souci...

Merci beaucoup,
Je relink mon site actualisé et je vais passer en Class mon fichier Ajax : http://velocdwj.eu3.biz/

[Watilin]

Bonjour,
je vois l’erreur suivante, 9 fois sur 10, quand je fais un rechargement sans cache de ton site :

TypeError: this.map_ is null — markerclusterer.js:163:3

Ça ressemble fort à une histoire de chargements concurrents.

Deux choses sont à l’origine de ce problème :

• createMap.initMap est passé à Google Maps comme fonction de rappel ;
• la balise qui déclare le script Google Maps a les attributs async et defer, ce qui fait qu’il est chargé de manière asynchrone.

Une brève explication des trois modes de chargement des scripts :
Sans attribut, par défaut, un script est synchrone. Pendant qu’il est chargé et interprété, l’analyse du code HTML interrompue. C’est dû au fait qu’il peut y avoir des document.write() dans le script qui rajouteraient du code HTML à analyser. Les scripts suivants ne sont pas chargés, et donc pas exécutés, car l’analyseur HTML ne les a pas encore découverts.

Avec async, le code source du script est chargé en parallèle et l’anayse du code HTML continue. Dès que le script a fini de charger, l’analyse HTML est interrompue et le script est exécuté. S’il y a d’autres scripts dans la page, l’ordre d’exécution n’est pas garanti.

Avec defer, le code source du script est chargé en parallèle et son exécution est mise en attente jusqu’à la fin de l’analyse HTML. Si plusieurs scripts ont l’attribut defer, ils sont exécutés dans l’ordre où ils apparaissent dans le code HTML. (S’ils sont injectés dynamiquement, je ne sais pas comment ça se passe.)

Dans la spec il y a un joli schéma qui résume tout ça.

Quand les deux attributs async et defer sont présents, c’est async qui a priorité, et defer est là pour les anciens navigateurs qui ne connaissent pas async.
Ça signifie que dans ton cas, le script Google Maps est chargé en mode « async », et donc il y a une probabilité pour que tes scripts à toi s’exécutent avant que l’API soit prête.

Tu as deux solutions :

1. supprimer les attributs async et defer ;
2. supprimer seulement async, et ajouter des defer sur tes scripts qui dépendent de Google Maps.

[Elztx]

Bonjour,
je vois l’erreur suivante, 9 fois sur 10, quand je fais un rechargement sans cache de ton site :

TypeError: this.map_ is null — markerclusterer.js:163:3

Etrange, je n'ai pas été confrontée à ce message d'erreur.. je n'ai pas de souci actuellement même au rechargement de mon côté, mais dès que j'essaie de réécrire mon code du fichier markers.js avec des class je m'en sors pas, ils n'apparaissent pas sur la map...

Je vais tout de même me pencher sur ce que tu viens de remonter comme souci, merci

[Watilin]

Je ne sais pas ce que tu as essayé, donc je vais faire des suppositions.

Actuellement, MarkerManager est un objet littéral (var MarkerManager = { … }) qui te sert de prototype : tu en crées des objets dérivés avec Object.create(). Plus précisément, tu ne crées qu’un seul objet de ce que j’ai pu voir.

Je suppose que ce qui te pose problème est la propriété markers. Lorsqu’on définit une classe, on ne peut pas spécifier de membres (autres que des méthodes). Il faut donc ruser et initialiser ces membres dans le constructeur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
class MarkerManager {
  constructor() {
    this.markers = [];
  }
 
  add(location) { // “hire” ?
    ...
  }
 
  pushMarker() {
    ...
  }
}

L’instanciation devient donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
class MapCreator {
  ...
 
  setMarker() {
    const manager = new MarkerManager();
    ...
  }
}

Une petite remarque à propos de l’argument location : c’est un nom de variable déjà utilisé en JS (window.location). C’est pourquoi j’ai indiqué “hire” en commentaire, car c’est une traduction anglaise qui pourrait convenir pour « location », dans le contexte d’une location de vélo.

[Elztx]

Merci beaucoup de prendre le temps de me répondre et de m'apporter toutes ces précisions !

Je n'ai pas encore tout ajouté du code d'avant, mais déjà ce que j'ai fait ne fonctionne pas.
(J'ai modifié le fichier map.js comme tu me l'as indiqué)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
27
28
29
30
31
32
33
34
35
36
class MarkerManager {
    constructor() {
        this.markers = [];
        this.position = location.position;
        this.title = location.name;
        this.icon = "images/biker_green.png";
    }
 
    add(hire) {
        let marker = new google.maps.Markers({
            map: createMap.map,
            position: this.position,
            title : this.name,
            icon : {
                url: this.icon,
                scaledSize : new google.maps.Size(47, 47),
            }
 
        });
         this.markers.push(marker);
    }
 
    couleurIcon() { 
		if (location.available_bikes <= 0) {
            marker.icon = 'images/biker_red.png';
        } else if (location.available_bikes < 3) {
            marker.icon = 'images/biker_orange.png';
        } else {
            marker.icon = 'images/biker_green.png';
        }
	};
};
 
let marker = new MarkerManager();
marker.add(hire);
marker.couleurIcon();

[Watilin]

Tu n’utilises plus MapCreator ?
Attention, dans le contexte global, hire n’est pas définie. La ligne marker.add(hire); devrait lever une erreur.

Plus difficile à déceler : tu n’as pas de location dans le contexte du constructeur, du coup c’est l’objet location global qui est utilisé, et il n’a pas de propriétés name ni position. Ces lignes ne lèveront pas d’erreur malheureusement.

Attention également, tu sembles confondre les noms de propriété name et title.

[Elztx]

Tu n’utilises plus MapCreator ?

Attention également, tu sembles confondre les noms de propriété name et title.

Oups, en effet, je n'avais pas fait attention..

Voilà les lignes d'erreur que j'ai à présent :