Awelty : société de création de site - Référencement - Amiens, Somme, Picardie » javascript

Initiation à JQuery, une librairie JavaScript

Arnaud-K — Mon, 18 May 2009 11:47:00 +0000

La librairie JavaScript JQuery est une librairie légère (à partir de 19 Kio), compatible avec tous les navigateurs et qui supporte le CSS3. Son utilisation est bien sûr entièrement gratuite.

Mais à quoi ça sert ?

Ce n’est pas par hasard si le slogan de JQuery est : « Write less, do more » (que l’on peut littéralement traduire par : « Ecrivez moins, faîtes-en plus »). JQuery permet donc de faire du JavaScript plus facilement et plus rapidement. Cette librairie est également utile pour réaliser de légers effets graphiques ou bien encore des animations (certains sites faits avec JQuery ressemblent beaucoup à des sites en flash).

Comment ça fonctionne ?

La première chose à faire est de télécharger la dernière version (à l’heure actuelle 1.3.2) de JQuery (disponible ici). Il faut ensuite lier JQuery à votre page HTML comme n’importe quel fichier externe JavaScript :

Ensuite, pour faire un premier effet (agrandir un bloc par exemple), il faut insérer ce script dans votre page (ou dans un fichier externe, selon votre préférence) :

$(document).ready(function() {  $('a#agrandir').click(function() {
$("#bloc1").animate( { width:"90%" }, 1000 )  });});

Quelques explications :

la première ligne permet de demander au navigateur d’exécuter le code JavaScript lorsque la page est chargée (équivalent à l’attribut onload).
la deuxième ligne permet de détecter si le lien ayant pour id agrandir (a#agrandir) a été cliqué (équivalent à l’attribut onclick)
la troisième ligne permet d’animer le bloc ayant pour id bloc1 jusqu’à ce qu’il ait une largeur de 90% (l’animation durera 1000 millisecondes, soit une seconde).

Une documentation en français de JQuery existe, elle est disponible ici.

Microsoft Live Maps et Google Maps

Arnaud-K — Fri, 27 Mar 2009 10:08:00 +0000

Pour le développement de Coconews, j’ai dû utiliser un outil de géolocalisation. Mon choix se serait logiquement tourné vers l’API de Google Maps (que je connaissais déjà) si Google Maps permettait la géolocalisation dans les Antilles françaises (Guadeloupe, Martinique et Guyane dans mon cas).

J’ai donc été obligé de trouver une solution alternative : l’API Live Maps de Microsoft (l’outil est également nommé Virtual Earth). Cette API proposant une bonne géolocalisation des Antilles françaises, j’ai donc pu l’utiliser sur Coconews.

J’ai trouvé que la documentation et les exemples que propose Microsoft pour l’utilisation des Live Maps étaient moins complets que ce qui est proposé par Google. Microsoft propose une vue supplémentaire : Bird’s view (littéralement « vue d’oiseau »). C’est une simple vue aérienne mais avec un décalage de 45° (voir l’image ci-dessous). Il faut également souligner que ce sont les données de l’IGN qui sont utilisées dans les Live Maps. Enfin il est à noter que, contrairement aux Google Maps, l’utilisation des Live Maps ne nécessite aucune inscription.

Pour insérer les Live Maps sur Coconews, je n’ai pas rencontré de grosses difficultés. Le plus dur a été de trouver des ressources et des exemples sur Internet. Il y en a assez peu et presque tout est en anglais. Les deux principales ressources que j’ai utilisées sont disponibles ici et là. Je n’ai pas utilisé l’outil de Géolocalisation direct (trouver la latitude et la longitude à partir d’une adresse) proposé par Microsoft car celui-ci ralentissait l’affichage de la carte et n’était pas toujours très pertinent. J’ai donc utilisé l’outil que propose Yahoo qui m’a permis de récupérer les coordonnées de chaque villes de Guadeloupe, Martinique et Guyane (plus d’informations disponibles sur ce billet de Tony : [PHP/SQL] Géolocalisation et distance entre des villes). J’ai également constaté que l’affichage de la carte est parfois plus lent avec Firefox qu’avec Internet Explorer.

Côté code, pour simplement afficher la carte (centrée sur Pointe-à-Pitre) il faut d’abord charger l’API JavaScript de microsoft (entre les balises et de la page html):

Ensuite pour afficher la carte, il faut insérer le JavaScript suivant :

Enfin, dans la page html il faut dire au navigateur de charger la carte au chargement de la page (attribut onload de la balise ) et prévoir le bloc dans lequel la carte sera affichée :

Créer un contrôle javascript universel en Javascript / jQuery

Tony Samson — Wed, 11 Feb 2009 16:10:00 +0000

En plus de la création des formulaires en HTML, pour laquelle j’ai déjà donné une astuce dans un précédent billet, il y a un autre aspect long et peu intéressant dans la conception de formulaires : les contrôles javascript. Ces derniers permettent de vérifier que le formulaire a été dûment rempli par l’internaute avant d’enregistrer ou d’envoyer par E-mail les données saisies.

En général, pour chaque formulaire sur un site on créé une fonction spécifique. Ce qui peut s’avérer rapidement une grosse perte de temps.

La problématique est donc posée : comment gagner du temps tout en effectuant des contrôles sur les formulaires en bonne et due forme ?

Il suffit d’avoir une seule et même fonction pour l’ensemble des formulaires. C’est là que l’utilisation de jQuery devient très intéressante. En effet, avec jQuery il est possible d’agir sur les éléments de la page ayant le même sélecteur.

Nous allons donc définir une classe spécifique aux éléments de formulaire obligatoires. De plus, nous allons indiquer un élément title aux champs formulaires afin de pouvoir les réutiliser dans notre fonction :

Ainsi, tous les éléments ayant la classe « obligatoire » devront être remplis. La fonction javascript suivante se charge du contrôle :

function VerifForm(){ var count=1; var message=""; $(".obligatoire").map(function(){

if($(this).val()== »)
{
message += « \n – « +$(this).attr(« title »);
count++;
}
});

message += « \n\n »+ »Puis validez de nouveau le formulaire »;

if(count==2) { alert(« Veuillez remplir ce champ :\n »+message);
return false; }
else if(count>2) { alert(« Veuillez remplir ces champs\n »+message);
return false; }
else { return true; }

}

Ainsi, si le champ « nom » n’est pas rempli, une alerte javascript (qui peut être modifiée par une alerte ajax, avec par exemple le plugin facebox) indiquera que le champ n’est pas rempli.

Il ne faut pas oublier d’appeler cette fonction dans la balise

Une bibliothèque javascript/Ajax légère et efficace : Simple JS

Tony Samson — Tue, 16 Sep 2008 11:50:00 +0000

J’ai découvert il y a peu Simple.JS, une petite bibliothèque Javascript qui permet quelques effets très web 2.0 et d’effectuer des requêtes Ajax (rechargement de DIV). Pour voir ce qu’elle permet de faire, je l’ai utilisé sur le site de la communauté de communes du Val de Nièvre que nous sommes entrain de réaliser (vous ne verrez pas encore le résultat en ligne, c’est en cours de dev.). J’ai été surpris de sa simplicité d’exécution et la puissance des fonctionnalités proposées. De plus, elle est compatible sur tous les navigateurs, même IE6…

Les fonctionnalités sont peu nombreuses mais le poids de la bibliothèque fait 14 ko tout rond. A comparer avec les « mastodontes » que sont Prototype/Scriptaculous, YUI and co (où on utilise jamais plus de 10% de leurs possibilités), c’est un poids plume et les fonctionnalités proposées sont suffisantes pour un petit projet dans lequel on a juste besoin de quelques effets pour afficher/cacher un div, effectuer une requête AJAX, appliquer un effet sur un texte, …

Simple JS permet donc quelques effets intéressants : clignotement, effet « toggle », effet accordéon, opacité d’un texte ou image, petit diaporama, rechargement AJAX d’un DIV, etc. Le mieux est de vous rendre sur le site web de cette librairie javascript où vous pourrez voir des exemples et la télécharger.

Petits exemples :

Tout d’abord, il faut mettre ce code dans le header de votre page :

Si vous souhaitez afficher/cacher un élément dans votre page avec l’effet toggle avec un état de départ caché :

Lire la suite

Voici la suite de mon texte

De la même manière, si vous souhaitez effectuer une requête ajax, c’est à dire inclure sans rechargement de la page une page externe dans un bloc div :

Lire la suite

Je vous recommande donc cette bibliothèque si vous ne souhaitez pas vous prendre la tête avec des bibliothèques plus imposantes sachant que les fonctionnalités proposées sont suffisantes pour votre projet.