How to render MathJax equations after user input, raw tex code injection or content added dynamically. For more interactive content, 2 functions to know using MathJax 3 : typesetPromise and tex2chtmlPromise.

For static HTML blocks (headers, footers…), we search an easy way to import HTML code from files. There was an easy way (<link rel="import" href="footer.html">) BUT this specification has been deprecated. What is the alternative ? Use the javascript fetch method.

Not used to Latex, using HTML and the MathJax javascript library to publish content containing mathematical expressions, one is quickly faced to heavy and repetitive syntaxes. To automate, standardize and simplify Tex commands, the MathJax javascript library supports Tex macros. Some concrete examples for beginners, beyond the "Hello World" examples to put text in bold.

More efficient than a long tutorial, examples of MathJax / Tex equations in the most common situations.

• Matrices
• Fractions
• Piecewise functions
• Arrays
• Centering equations on the sign =
• Numbering equations, bookmarks and hyperlinks
• Styles
• And more to come by the time…

MathML for writing mathematical expressions in HTML has not become a standard in HTML 5. Google Chrome does not support MathML, Google argued that powerful libraries in Javascript already exist and cover the needs for a very limited audience of scientists. Indeed, the MathJax javascript library coupled with AsciiMath is perfect when you want to write expressions in HTML pages with a professional and ergonomic rendering supported on all platforms. This article is not a MathJax tutorial, it introduces simple examples and especially how to dynamically load the MathJax.js library on demand using CSS classe names. A few words about the underscore character in AsciiMath syntaxes, the delimiter, the styles and the MathJax menu to quickly copy/paste.

When developing a Web site, event listeners are implemented, by third party libraries or by your own. In some circumstances, when starting performance improvements tasks or when debugging behavior issues in event listeners due to a third party library, we may need to get an overview of all event listeners. How to get the full list : the events defined with addEventListener and the ones defined with the corresponding attribute ? It's not so trivial.

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

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.