Conception — Javascript
Thumbnail Logo

Often unavoidable in web development to make it more dynamic : Javascript.

On client or server side with Node.js, libraries available are powerful and rich : from frameworks (ReactJS, VueJS) to more specialized libraries (PrismJS, amCharts, MathJax, etc.).

MathJax 3 - Advanced Javascript rendering methods May 19th, 2021
Thumbnail LogoHow 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.
Javascript - Importing HTML blocks, fetch May 17th, 2021
Thumbnail LogoFor 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.
MathJax, Macros and Packages. Tex simplified commands March 30th, 2021
Thumbnail LogoNot 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.
MathJax - Tex : Quick Reference Guide December 29th, 2020
Thumbnail LogoMore 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…
Mathematical expressions and equations in HTML with MathJax and AsciiMath June 18th, 2020
Thumbnail LogoMathML 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.
Javascript - Listing active event listeners on a Web page April 10th, 2020
Thumbnail LogoWhen 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.
No more articles in English. Below, the available articles but in french.
Distribution de données inter domaines avec JSONP, cas pratiques (AddThis…) September 20th, 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 September 20th, 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 September 19th, 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…) September 16th, 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é.
Ajout dynamique de code Javascript, différences entre les navigateurs (canHaveChildren) June 20th, 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 December 30th, 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.