jQuery, la bibliothèque javascript créée par John Resig, choisie par Microsoft pour embellir ASP.NET est désormais intégrée à Visual Studio 2010 avec l’intellisense (auto-complétion).
Cette auto-complétion fonctionne avec les fichiers xxxx-vsdoc.js disponibles sur le site de jQuery.
Le lien « Visual Studio » pointe vers le fichier jquery-1.4.1-vsdoc.js correspondant au fichier javascript de la librairie jquery-1.4.1.js. Ces 2 fichiers doivent être placés dans le même dossier et respecter le même format comme décrit ci-dessous :
Le fichier script.js contient notre code utilisant jQuery. C’est dans ce fichier que nous souhaitons bénéficier de l’intellisense. Cependant par défaut, aucune complétion n’est disponible pour jQuery. Afin d’activer la complétion dans notre fichier script.js, glisser-déposer depuis l’explorateur de solution le fichier jquery-1.4.1.js dans la fenêtre de code du fichier script.js.
Une fois cette opération effectuée un commentaire apparaît dans le code : l’intellisense est disponible :
Note : Si le fichier xxx-vsdoc.js est renommé ou ajouté ultérieurement, un redémarrage de Visual Studio 2010 peut être nécessaire pour obtenir l’intellisense.
Il est habituel d’utiliser l’API Google Maps en javascript pour générer des cartes Google Maps.
Voici une utilisation en PHP de l’API Google Maps pour récupérer les coordonnées (x et y) d’un point à partir d’une adresse.
Par exemple en spécifiant : « Washington, DC, USA », on obtiendra un tableau (array) contenant les coordonnées -77.036667 et 38.895000.
Avant de de pouvoir utiliser le code ci-dessous, il faut se procurer une clé Google Maps API disponible ici.
Voici le code utilisé :
<?php
define('KEY', 'votre_cle_google');
$webService = 'http://maps.google.com/maps/geo?q=' . urlencode($location) . '&output=csv&key=' . GOOGLE_API_KEY;
// Lieu à géolocaliser
$location = 'Washington, DC, USA';
// Récupération des données
$data = explode(',', file_get_contents($webService));
// Test du résultat
$coord = 200 === (int)$data[0] ? array((float)$data[2], (float)$data[3]) : null;
// Affichage des coordonnées
var_dump($coord);
?>
array(2) {
[0]=>
float(-77.03666)
[1]=>
float(38.895000)
}
Pour mon nouveau site (qui devrait sortir sous peu), j’avais besoin d’un champ texte pour entrer une date dans un format précis (jj/mm/aaaa) avec un petit calendrier permettant de choisir cette date.
Après de multiples recherches sur Google, je suis tombé sur le site de Aeron Glenmann et sur son script de calendrier utilisant Mootools :
Pour l’installer ajouter le fichier Mootools ou utiliser Google API ainsi que le fichier calendar.js dans les balises <head></head> de votre page.
Dans un fichier javascript à inclure également ajouter le code suivant :
window.addEvent('domready', function() { myCal = new Calendar({ date: 'd/m/Y' }); });
De multiples petites options sont disponibles pour changer le comportement du calendrier sont disponibles sur le site de l’auteur.
Dans le HTML, ajouter simplement un input de type texte portant l’id date :
<input id="date" name="date" type="text" />
Par défaut le calendrier n’a pas de CSS attaché, mais l’auteur explique sur son site comment le mettre en forme.
Par défaut le script utilise la balise <button> pour afficher le petit bouton à coté du champ texte. Sous Safari 4 sur mac, le bouton envoie le formulaire, j’ai donc remplacé la ligne suivante dans calender.js :
button: new Element('button', { 'type': 'button' }),
par
button: new Element('span' ),
Petite astuce que j’ai découvert il y a quelques jours : la possibilité de charger grâce à Google API les fichiers javascript nécessaires au fonctionnement des frameworks javascript comme Mootools, jQuery, DoJo, etc… (liste complète disponible ici).
Pourquoi utiliser Google plutôt qu’une copie du fichier .js sur votre serveur ?
- Les serveurs de Google sont surement plus rapides que celui qui héberge votre site web
- Le poids de la page est diminué
- Economie de la bande passante
- Même si Google API prévoit un système de versionning dans son appel aux libraires, il permet de toujours avoir la dernière version sortie de la librairie.
L’inconvénient que beaucoup avanceront sera le fait que vous dépendez de Google, si il connait une défaillance, la librairie sera indisponible. Même problème si Google décide d’arrêter ce système ou de le modifier.
Comment ça fonctionne ?
Il suffit d’inclure entre les balise <head></head> de votre site le code suivant :
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
afin de charger l’API Google.
Pour charger la librairie javascript que vous souhaitez (ici Mootools par exemple), ajouter toujours entre les balise <head></head> :
<script type="text/javascript">
google.load("mootools", "1.2.3");
</script>
La list des codes à ajouter est disponible ici.
Catégories
- .NET (51)
- ASP.NET (6)
- C# (20)
- DevExpress (2)
- Silverlight (23)
- WPF (1)
- Accès aux données (5)
- ADO.NET (1)
- Entity Framework (2)
- Linq To SQL (2)
- Azure (1)
- Base de données (6)
- MySQL (2)
- SQL Server (4)
- Communauté (3)
- Développement (1)
- Développement web (15)
- Javascript (4)
- PHP (6)
- Wordpress (1)
- Evénements (2)
- Afterworks (1)
- Imagine Cup 2011 (3)
- Livre (1)
- Mac OS X (1)
- Microsoft Student Partner (2)
- Non classé (2)
- Perso (2)
- Publications (2)
- Réseaux (5)
- Réseaux sociaux (1)
- Visual Studio 2010 (10)
- WebMatrix (1)
- Windows Phone 7 (13)
- Windows Server 2008 (2)
