Author Archives: vinch

Comme tout le monde, vous avez eu, tôt ou tard, des cours de mathématiques. Et comme tout le monde, vous vous êtes un jour dit que les maths ne vous servirait à rien dans votre métier et votre vie future !

Parmi tous ces trucs qui semblaient inutiles, il y en a au moins un que vous n’avez pas oublié : le théorème de Pythagore. A quoi ça pouvait bien servir de savoir que le carré de l’hypothénuse de ce fichu triangle rectangle était égale à la somme des carrés des deux autres côtés ?

Figurez-vous qu’il y a quelques temps, je réalisais une petite application géographique avec l’aide de l’API Google Maps. Le but du jeu était de trouver, dans une base de données d’une centaine de points identifiés par des coordonnées en x et y, les trois points les plus proches d’un point donné.

Il a donc fallu calculer les distances entre le point donné et chaque point de la base de données et d’en extraire ensuite les trois plus petites.

Et devinez quelle est la meilleure méthode pour calculer la distance entre deux points dans le plan ? Pythagore bien entendu !

Voyons ce que ça peut donner algorithmiquement parlant (en JavaScript) dans un exemple simple.

Soit un tableau de plusieurs points identifiés par un label, la latitude et la longitude :

var cities = [
     {label:"Brussels", lat:"50.848385", long:"4.349685"},
     {label:"Paris", lat:"48.860001", long:"2.34"},
     {label:"London", lat:"51.52", long:"-0.1"},
     {label:"Amsterdam", lat:"52.373120", long:"4.893195"},
     {label:"Berlin", lat:"52.52", long:"13.38"}
]

Nous souhaitons trouver, parmi ces cinq villes, la ville la plus proche de la ville de Dunkerque dont les données sont enregistrées dans la variable suivante :

var my_city = {label:"Dunkirk", lat:"51.036995", long:"2.37693"}

Voici l’application du théorème de Pythagore :

var distance = Number.MAX_VALUE, label, current_distance;
for (var i=0; i<cities.length; i++) {
     current_distance = Math.sqrt(Math.pow(my_city.lat-cities[i].lat,2)+Math.pow(my_city.long-cities[i].long,2));
     if (current_distance<distance) {
          distance = current_distance;
          label = cities[i].label;
     }
}

Math.sqrt sert à réaliser une racine carrée et Math.pow une puissance.

Vous n’avez plus qu’à afficher le contenu de la variable label pour découvrir la ville la plus proche de Dunkerque.

alert('La ville la plus proche de Dunkerque est : ' + label);

Voilà une très belle application d’un bête théorème appris lors de nos bons vieux cours de mathématiques. Tout ça pour vous prouver que ce qu’on apprend à l’école, parfois, ça peut servir !

Comme vous le savez, AJAX est l’acronyme de Asynchronous JavaScript and XML. Personnellement, je n’ai jamais jamais fait d’AJAX au sens précis du terme. Par contre, j’ai déjà fait un peu d’AJAPT (Asynchronous JavaScript and Plain Text) et beaucoup d’AJAJ (Asynchronous JavaScript and JSON).

En effet, le XML est une calamité à parser en JavaScript (même si certains outils tels jQuery permettent de faciliter le processus). Par contre, des formats comme le texte brut ou, mieux, le JSON sont beaucoup plus appropriés pour ce genre de tâches.

Mais c’est quoi JSON encore ?

C’est mon meilleur ami du moment !

JSON (JavaScript Object Notation) est un format de données générique qui utilise la notation des objets JavaScript pour transmettre de l’information structurée (source : Wikipédia).

En voici un exemple :

{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

L’énorme point fort de JSON est qu’il est lui-même du JavaScript, ce qui le rend très facile à manipuler avec ce langage.

Le framework Prototype l’a d’ailleurs bien compris et propose plusieurs méthodes permettant de travailler avec JSON (depuis la version 1.5.1)

Toutefois, si vous êtes quand même obligés de travailler avec du XML (provenant d’un Web Service, par exemple), sachez qu’il existe plusieurs techniques pour transformer XML en JSON (pas forcément côté serveur).

Pour ma part, j’en ai retenues deux…

BadgerFish est une convention permettant de traduire un fichier XML en un objet JSON.

Parker est une feuille de style XSLT permettant de transformer XML en JSON. Je préfère cette dernière méthode car le résultat obtenu respecte mieux le format JSON que BadgerFish (qui donne un résultat en JSON mais présentant une structure à la sauce XML).

Ce n’est bien entendu que mon pauvre avis personnel ! Les deux méthodes sont excellentes et fonctionnent relativement bien. Au développeur à utiliser l’une ou l’autre en fonction de ses préférences, de ses habitudes et de ses contraintes !

Merci à JFH qui a inspiré cet article !

Si vous avez déjà utilisé l’API de Google Maps, vous savez que vous devez générer une clé pour que cela fonctionne. Malheureusement, une clé est attachée à un et un seul domaine alors que certains sites se trouvent sur plusieurs domaines en même temps (ce qui est une erreur mais ça arrive) ou que certains sites disposent d’un serveur de test et un serveur de production.

Il faut donc ruser pour arriver à ses fins. Voici ce que je propose :

var key = '';
var current_url = window.location.host;

var urls = [
	{url:"test-url.com",key:"xxxxx"},
	{url:"prod-url.com",key:"yyyyy"}
];

var found = false;
for (var i=0;i<urls.length && !found; i++) {
	if (current_url.indexOf(urls[i].url) > -1) {
		key = urls[i].key;
		found = true;
	}
}

document.write('http://maps.google.com/maps?file=api&v=2&key='+key+'');

Il suffit de faire l’inclusion de ce fichier dans l’entête de votre fichier HTML et vous pourrez utiliser Google Maps sur une nombre illimité de domaines, à condition bien sûr de générer une clé pour chacun d’entre eux.

Pour rappel, comme l’explique Mike, inutile d’enregistrer une clé pour des sous-domaines. Si une clé est enregistrée pour un domaine, elle sera valable pour ses sous-domaines. Cela justifie l’emploi de la fonction indexOf().

Toute remarque est la bienvenue. Ce code a été écrit rapidement et n’est sans doute pas parfait !