Comment rendre les équations MathJax après une entrée utilisateur, une injection de code tex brut ou du contenu ajouté dynamiquement. 2 fonctions simples à connaître avec MathJax 3 pour du contenu plus interactif : typesetPromise, tex2chtmlPromise

Pour des blocs HTML relativement statiques (entêtes, pieds de page…), on cherche souvent une méthode simple pour importer du code HTML à partir de fichiers. Il existait une méthode simple (<link rel="import" href="footer.html">) MAIS cette spécification a été rendue obsolète. Quelle est l’alternative ? Utiliser la méthode javascript fetch.

Non 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.

Plus 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…

Lors 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.

Interroger 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.

Un 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.

La 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.

Le 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é.

MathML 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.

L’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.

Quel 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.