Conception — Javascript
Thumbnail Logo

Souvent incontournable dans le développement Web pour le rendre plus vivant et dynamique : Javascript.

Côté client ou côté serveur avec Node.js, les librairies disponibles sont puissantes et riches : des frameworks (ReactJS, VueJS) aux librairies plus spécialisées (PrismJS, amCharts, MathJax…).

MathJax, Macros et packages. Commandes Tex simplifiées 30 mars 2021
Thumbnail LogoNon habitué à Latex, en utilisant le langage HTML et la bibliothèque javascript MathJax pour publier du contenu comportant des expressions mathématiques, on est rapidement confronté à des syntaxes lourdes et répétitives. Pour automatiser, uniformiser et simplifier les commandes Tex, la bibliothèque javascript MathJax supporte les macros Tex. Quelques exemples très concrets pour les débutants qui vont au-delà des exemples "Hello World" pour mettre du texte en gras.
MathJax - Tex : guide pratique, aide-mémoire 29 décembre 2020
Thumbnail LogoPlus efficace qu’un long tutoriel, des exemples d’équations MathJax / Tex mettant en œuvre les situations les plus courantes.
  • Matrices
  • Fractions
  • Fonctions par morceaux
  • Tableaux
  • Centrer des équations sur le signe =
  • Numéroter des équations, appliquer des signets
  • Styles
  • Et plus à venir au fil du temps…
Javascript - Lister les event listeners actifs sur une page Web 10 avril 2020
Thumbnail LogoLors du développement d’un site Web, des écouteurs d’événements, appelés event listeners par abus de langage en français, sont implémentés soit par des librairies tierces, soit par soi même. Dans certaines circonstances, lors du démarrage des tâches d'améliorations des performances ou lors du debug de problèmes de comportement avec les event listeners à cause d’une librairie tierce, il s’avère utile d’obtenir une cartographie de tous les event listeners. Comment obtenir cette liste complète : les événements définis avec addEventListener et ceux définis avec l’attribut correspondant ? Ce n'est pas aussi trivial que cela pourrait l’être.
Distribution de données inter domaines avec JSONP, cas pratiques (AddThis…) 20 septembre 2016
Thumbnail LogoInterroger et manipuler des données JSON avec Javascript et XMLHttpRequest est facile et séduisant. Lorsqu’il s’agit de requêtes de données au format JSON dans un contexte inter domaines (cross domains), la méthode est bien différente : JSONP (JSON Padding) doit être utilisé. Les données JSON sont chargées comme s’il s'agissait d’un script Javascript, l’adresse URL doit simplement contenir le paramètre callback indiquant la fonction de rappel lorsque les données sont reçues. Voici un cas pratique avec la récupération au format JSON de la liste des articles tendance (trending content) depuis le service AddThis.com.
Automatiser l’ouverture des liens hypertextes dans un nouvel onglet avec Javascript et l’attribut rel external 20 septembre 2016
Thumbnail LogoUn exemple hypra basique avec une fonction appelée rebuild_href pour industrialiser l’ouverture de liens hypertextes externes dans un nouvel onglet grâce à Javascript et l’attribut natif rel="external". Plus aucun lien hypertexte ne pourra désormais échapper à la règle.
Fonction générique de chargement de données JSON avec Javascript. Gestion du cache du client et du mode synchrone et asynchrone 19 septembre 2016
Thumbnail LogoLa lourdeur du langage XML n’a pas toujours convaincu (syntaxes et méthodes), en revanche essayer JSON (JavaScript Object Notation), c’est l’adopter. Les données d’un fichier JSON sont facilement lisibles et modifiables que ce soit humainement ou par des API (PHP, Python…). Une fonction générique en Javascript pour charger les données des fichiers JSON, wsys_load_json, est proposée ici. La problématique du cache des navigateurs pour les fichiers JSON est abordée avec 2 solutions : le module mod_expires d’Apache ou l’application d’une empreinte dans l’adresse URL du fichier JSON. Il est important aussi de prêter attention à l’exécution synchrone ou asynchrone du chargement des données JSON afin d’éviter certains pièges dans les développements. Un cas concret illustre ce sujet.
Développer une fonction générique de chargement dynamique de librairies Javascript (callback, attributs…) 16 septembre 2016
Thumbnail LogoLe sujet n’est pas nouveau, et encore moins révolutionnaire : pour simplifier l’ajout dynamique de librairies javascript (Google +1, MathJax, HighlightJS…) avec des options très diverses pour chacune d’elles (attributs id async defer, fonctions de rappel ou fonctions callback, nœud texte…), une fonction générique en pur Javascript (sans jQuery) peut tout prendre en charge. En voici une, wsys_load_js, elle est loin d’être parfaite et ne respecte peut être pas l’excellence du codage en Javascript mais si ça peut aider, alors l’objectif est atteint. Internet Explorer 8 et ses incompatibilités avec les standards Javascript (addEventListener, appendChild d’un nœud texte sur un objet script) est encore supporté dans la fonction proposée car étrangement, malgré la fin de Windows XP, 5% des visiteurs sur ce site utilisent encore cette version en septembre 2016. En juin 2017, le support d’IE 8 devrait être retiré.
Expressions et équations mathématiques en HTML avec MathJax et AsciiMath 14 septembre 2016
Thumbnail LogoMathML pour l’écriture d'expressions mathématiques en HTML n’est pas devenu un standard avec HTML 5. Google Chrome ne supporte pas ce langage avec l’argument de l’existence de puissantes librairies en Javascript pour répondre à ce besoin d’un public de scientifiques assez limité. Effectivement la librairie javascript MathJax couplée à AsciiMath est parfaite lorsqu’on désire écrire en HTML des expressions pour un rendu professionnel et ergonomique et afin de ne pas utiliser des images ou des expressions brutes de fonderie illisibles notamment lorsqu’il y a des fractions. Une présentation de cas très simples, il ne s’agit pas d'un tutoriel à propos de MathJax, mais surtout comment charger dynamiquement la librairie MathJax.js en cas de besoin dans un fichier HTML grâce aux classes CSS et Javascript. En bonus, quelques mots sur le caractère underscore dans les expressions AsciiMath, le changement de délimiteur (backtick par défaut) et le menu MathJax disponible sur les expressions pour réaliser rapidement un copier coller.
Ajout dynamique de code Javascript, différences entre les navigateurs (canHaveChildren) 20 juin 2011
Thumbnail LogoL’ajout dynamique de code javascript est réalisé tout naturellement avec les méthodes createElement, createTextNode et appendChild. Une fois de plus malheureusement Internet Explorer se comporte différemment. Dans le contexte de l’implémentation du bouton +1 de Google, une syntaxe multi navigateurs est développée pour ajouter dynamiquement du code Javascript en testant l’existence de la propriété canHaveChildren spécifique à Microsoft Internet Explorer.
Ajout et suppression d’éléments avec Javascript - Suppression de document.write 30 décembre 2010
Thumbnail LogoQuel travail fastidieux pour respecter les normes et standards W3C et DOM dans un contexte de support multi navigateurs et multi versions ! Les fonctions Javascript compatibles DOM/W3C pour ajouter et supprimer dynamiquement des éléments HTML/XML avec createElement, createAttribute, appendChild, removeChild, insertBefore… sont relativement simples pour éradiquer la méthode document.write non recommandée et 100% incompatible avec le standard XHTML. Si ces fonctions Javascript sont simples en théorie, certains écueils sont rencontrés avec Microsoft Internet Explorer 6 et 7 (toujours le même navigateur !). Leur résolution est bonne à savoir afin de s’épargner des heures de débogage. Internet Explorer 6 et 7 sont encore très présents dans les statistiques Web et ne doivent surtout pas être négligés lors de la conception. Ce constat alarmant démontre la difficulté de migrer les plateformes Windows qui incorporent Internet Explorer dans son noyau, contrairement à FireFox ou Google Chrome sous Windows qui sont mis à jour régulièrement.