Bloguons JavaScript

Je suis programmeur informatique depuis 1995. Développeur web depuis 2005. J'ai passé par plusieurs langages: Foxpro, Assembleur, Clipper, VisualBasic, ASP... et depuis maintenant 15 ans LAMP (Linux-Apache-MySQL-PHP). Et le javascript s'est insidieusement imposé dans mon bagage de connaissances - tu ne peux pas faire 15 ans de web sans avoir touché au javascript! Au début, le langage me rebutait. C'était une bibitte (je suis Québécois, alors ça se peut qu'il y ait certains régionalismes qui m'échappent, désolé) avec laquelle je dois composer, parce que, maudit torrieux (décidément...), on n'est pas pour tout faire côté serveur. Et tranquillement pas vite, on s'habitue. Puis, on adopte. Puis,...

Lire la suite

C'est tellement facile avec jQuery, et jadis autrement plus compliqué en JS vanille. Heureusement, ça s'est (un peu) amélioré dans les dernières années, avec la venue de deux nouveaux types d'objets : FormData et URLSearchParams. Normalement les deux expressions suivantes devraient donner le même résultat : const r = $(form).serialize(); // ou const r = (new window.URLSearchParams(new FormData(form)).toString()); Je dis bien « devrait », mais ça se peut qu'il y ait des différences d'encodages. Bref, on ne peut pas remplacer une expression par l'autre en toute confiance sans tester.  ...

Lire la suite

Dieu merci, on a créé une méthode pour remplacer l'inutilement compliqué XMLHttpRequest. Par contre, fetch() retourne un type d'objet qui n'est pas toujours bien compris par les développeurs. Et je m'y inclus... Mais bon, ça permet toujours bien de créer des appels XHR sans trop de code superflu. Pour un appel avec la méthode GET, remplacer : $.get(url,function(data){/*CODE*/}); par : fetch(url).then(p => p.text()).then(data => {/*CODE*/}); Pour un appel avec la méthode GET qui est sensé retourner un objet JSON, remplacer : $.getJSON(url, function (data) {/*CODE*/}); par : fetch(url).then(p => p.json()).then(data => {/*CODE*/}); Pour un appel avec la méthode POST, remplacer :...

Lire la suite

L'affaire qui se passe, c'est que $(el).on() ne fait pas seulement la même chose que el.addEventListener(). $(el).on() enregistre aussi l'événement dans une liste d'événements d'un certain type (ex:'click') pour que si jamais on fasse $.off() sur le même type d'événement, ça puisse les effacer. Une façon de faire pour effacer tous les événements possibles sur un élément serait el.outerHTML=el.outerHTML; ... sauf que ça supprime TOUS les événements de TOUS les types. Idéalement, 2 trucs: Soit on nomme l'événement (autrement dit, une fonction qu'on retient dans une variable) : var el = document.querySelector('textarea'); var foo = () => console.log('Allô!'); el.addEventListener('click',...

Lire la suite

Pour remplacer la méthode jQuery.on(), ou son ancêtre jQuery.live(), qui permettent d'attacher un événement virtuellement à des éléments qui n'existent pas encore au moment de l'appel, ces deux méthodes sont très utiles. EventTarget.addEventListener() existe depuis longtemps. En fait, c'est Internet Explorer (encore) qui a été le dernier à l'intégrer, à sa version 9. Ça fait quand même une couple de lunes. La méthode Element.closest(), quant à elle, est un peu plus récente. Implémentée dans Chrome et Firefox au début de 2016 et dans Edge fin 2017, elle permet d'imiter quelque peu la méthode jQuery.parent() lorsqu'elle contient un sélecteur CSS, à la différence suivante: Considérant : <div...

Lire la suite

Ok, le titre est un peu exagéré. Mais jQuery est devenu somme toute une tare dans la programmation JavaScript. Aujourd'hui, utiliser jQuery retarde l'apprentissage du JavaScript. jQuery demande le chargement d'une bibliothèque de plus de 200 kibioctets, ce qui peut paraître léger pour un ordinateur de bureau, mais très lourd pour un mobile. Et son utilisation, tout comme n'importe quelle bibliothèque, impose souvent ce constat : on charge du code qui ne sera jamais utilisé. Ceci dit, je dois reconnaître les bons coups de jQuery, et sa grande pertinence au moment où il a été créé. Le projet est publié pour la première fois en janvier 2006, à un moment où Internet Explorer 7 n'était même pas...

Lire la suite

Le mot-clé this1 est un raccourci parfois utile lorsqu'on écrit du nouveau code JavaScript. Ce mot-clé a cependant la particularité de se comporter différemment du this en C, C++ ou Java. Il se comporte même différemment selon la version JavaScript ou même si on est en mode strict ou pas. C'est pourquoi je déteste ce mot-clé. Je fais tout en mon possible pour éviter d'y avoir recours. Mon argumentaire tient toujours à la maintenance du code. C'est à dire d'être capable de relire mon code six mois plus tard et le comprendre avec le moins d’ambiguïtés possibles. Je me suis déjà retrouvé avec un code semblable: /* Considérant <button id='allo'>Allo</button> */ const objet = { f0 :...

Lire la suite