Archives de catégorie : JavaScript

Trucs, astuces et tutoriels sur le JavaScript, le langage de programmation dans les navigateurs Web.

Le retour du compteur de caractères

Publié le par
Répondre

Après être revenu dernièrement sur ma série de tutos d’introduction aux canvas, j’ai décidé de m’attaquer à l’un de mes anciens articles me valant le plus d’affichage sur le moteur de recherche d’Alphabet : le compteur de caractères.

Comme pour mes derniers articles traitant de JavaScript, une fois de plus je n’utiliserai que des fonctions natives, sans aucune librairie.

Organisation du nouveau code

Le nouveau code sera réparti dans deux fonctions : une fonction d’initialisation, et la fonction en charge du compte des caractères. Cette dernière fonction étant appelée une fois à l’initialisation, pour pouvoir être utilisable sur une page où les champs de formulaire contiennent déjà du texte (une amélioration par rapport à l’ancien code), et ensuite attachée à un événement sur les champs.

Un des gros changement est la manière dont on va passer les paramètres à notre champ compteur de caractères : au lieu de passer ces paramètres à notre fonction d’initialisation, on va utiliser des attributs HTML.

Continuer la lecture →

Gloubi tuto – menu interactif déroulant

Publié le par
Répondre

Cette semaine, attaquons-nous à un autre script de menu présenté chez notre gloubi adversaire.

Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes.

Fonctionnement

Le menu produit par ce script se présente sous la forme d’un tableau dans un tableau (je parle là des balises HTML).

<table>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
</table>
Continuer la lecture →
Pages : 1 2

Amusons-nous avec les canvas – le retour

Publié le par
Répondre

Il y a quelques années, j’avais écrit une série d’articles expliquant comment créer à l’aide du  tag <canvas> un texte ombré avec une image en fond utilisant une police Google Fonts.

La technique ayant un peu évolué depuis, et ayant fait de nouveaux essais de mon côté, je pense qu’il est temps de créer une nouvelle version de ce code.

Le premier changement concerne la façon dont on gère l’utilisation de la police Google Font dans le canvas.

Dans le premier script, le chargement de la police était assuré de manière “classique” par CSS. Le problème ? Pour que la police soit utilisable dans le canvas, il faut que la police soit utilisée sur au moins un élément de notre page. Et pour s’assurer que la police soit bien chargée, le code qui s’occupe du “dessin” est exécuté après 1s (utilisation d’un setTimeOut()).

Depuis les versions 35 de Chrome et la version 41 de Firefox, toutes deux sorties après la rédaction de la première série d’articles, il existe un objet JavaScript qui permet de définir une police personnalisée, qui par la suite peut être utilisée partout sur le document, y compris dans les canvas.

Continuer la lecture →

Gloubi tuto – un texte en dégradé

Publié le par
Répondre

Pour ce deuxième gloubi tuto, on s’attaque à un script qui a eu son petit succès sur Skyblog : le texte « arc-en-ciel » (en dégradés).

Script original et explication

Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre Némésis dans la deuxième guerre du gloubi.

Le script fonctionne comme suit :

Avant d’appeler la principale fonction de notre script, on construit un tableau de correspondance décimal vers hexadécimal à l’aide de deux boucles imbriquées.

Continuer la lecture →
Pages : 1 2

Gloubi tuto – un menu interactif Hello Kitty

Publié le par
Répondre

Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty.

Présentation et explication de l’existant

Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi.

Continuer la lecture →

Carte interactive OpenLayers avec contrôle de calques

Publié le par
Répondre

Après avoir réalisé une carte historique de la ligne 2 du tramway d’Île-de-France avec Leaflet (voir le tutoriel), je me suis attaqué à la création de cette même carte avec OpenLayers.

Bien que plus complet sur certains points, OpenLayers n’inclus pas nativement deux fonctionnalités utilisées dans la carte :

  • Le contrôle de calques
  • Les tooltips.

Pour le contrôle de calques, j’ai utilisé le plugin ol-layerswitcher de Matt Walker.

Pour les tooltips, j’ai utilisé un overlay et une interaction sur les calques des stations. Le corps du tooltip consiste en une div incluse dans la div de la carte :

<div id="map" style="width: 800px;height: 600px;">
  <div id="tooltip" class="tooltip"></div>
</div>
Continuer la lecture →
Pages : 1 2

Carte avec contrôle de calques avec Leaflet

Publié le par
Répondre

Cette semaine encore, nous allons encore voir la création d’une carte interactive avec la librairie Leaflet.

La carte présentée aujourd’hui utilise les groupes de calques, ainsi que le contrôle de calques, afin de réaliser une carte historique de la ligne 2 du tramway d’Île-de-France.

Bref historique

Afin d’expliquer le découpage des données et les différents calques, un bref historique de la ligne doit être fait.

Jusqu’en 1993, une partie des voies empruntées par la ligne actuelle était exploitée par la SNCF (le tramway actuel est exploité par la RATP) sous le nom de « Ligne de Puteaux à Issy-Plaine ».

En 1997, entre en service le T2, qui empreinte le même parcours, plus une extension au nord. Toutes les stations de l’ancienne ligne sous réutilisées, certaines changeant de nom, et 4 nouvelles sont créées.

En 2006, une section du parcours est déviée.

En 2009, la ligne est prolongée une première fois au sud, avec l’ajout de 4 nouvelles stations.

En 2012, la ligne est prolongée une deuxième fois vers le nord, rajoutant 7 nouvelles stations.

Continuer la lecture →
Pages : 1 2

Carte interactive des rues sans mégots avec OpenLayers

Publié le par
Répondre

Bon, je suppose que vous commencez à avoir l’habitude que je vous présente la manière de créer une carte interactive à l’aide des deux librairies majeures OpenLayers et Leaflet.

Après avoir rapidement créé la carte des rues et sections de rue concernées par l’opération « Des rues sans mégots » avec Leaflet, j’ai bien entendu créé une version avec OpenLayers de cette carte.

Sources des données

Pour cette carte j’utilise le même fichier GeoJSON que pour la carte avec Leaflet :

  • La liste des rues ou sections de rue provient de la page d’actualités de Paris.fr
  • Le tracé des rues a été extrait des données disponibles sur Paris Data.
Continuer la lecture →
Pages : 1 2

Carte interactive des rues sans mégots avec Leaflet

Publié le par
8

Cette carte interactive des rues sans mégots de Paris a été réalisée suite à la suite de la consultation de la page d’actualités de la ville de Paris concernant cette action de propreté, qui ne contenait qu’une image pour présenter la cartographie des différentes rues concernées par cette opération.

Sources des données

La liste des rues ou sections de rues proviennent de la page d’actualités.

Le tracé des rues provient de Paris Data, le site d’open data de la Ville de Paris.

Je suis parti des données en CSV, pour en extraire plus facilement les rues participantes. Pour les rues concernées seulement en partie j’ai ensuite supprimé manuellement les sections inutiles, en passant par geojson.io pour m’assurer que je ne supprimais pas des parties couvertes par l’opération.

Chaque feature de rue a au moins une propriété « name ». Pour les rues ne participant que sur une section je rajoute une propriété « between » pour indiquer cette section.

Ces données ont ensuite été rassemblées dans une FeatureCollection de LineStrings dans un fichier GeoJSON.

Continuer la lecture →

Carte interactive du métro de Paris avec OpenLayers

Publié le par
Répondre

Après vous avoir créé une carte interactive du métro de Paris avec la librairie Leaflet (voir mon précédent article), j’ai décidé de recréer cette carte avec l’autre libraire majeure de cartographie en ligne : OpenLayers (que j’ai déjà utilisée pour ma carte utilisant un fond statique).

Données utilisées

Les données utilisées pour créer cette carte sont les même que pour celle réalisée avec Leaflet :

  • Fond de carte Stamen Toner Lite
  • Tracé des lignes fournis par le STIF sur leur site d’open data : opendata.stif.info
  • Code couleur des lignes fournis par la RATP : data.ratp.fr
  • Coordonnées des stations fournies par le STIF et Wikipédia pour les stations fantômes
  • Logo utilisé comme marqueur de position trouvé sur le site de la RATP
Continuer la lecture →
Pages : 1 2 3