Snippets en javaScript et jQuery

Notez que cet article a été écrit il y a plus de 3 ans, mais il n'est pas forcément obsolète. Il a été mis à jour il a moins d'un mois.

Image sur fond bleu écrit jQuery avec un smiley bleu à lunettes
javascript écrit sur fond jaune avec le logo js et un icone d'imac

Accéder à une variable par une chaîne

Ceci peut être bien utile dans des boucles ou des tests. Supposons que l’on ait défini la variable element1, par exemple :

Si l’on ne dispose que de la chaîne 'element1', on peut accéder à la variable :

Fonction de conversion de couleurs rgba() en #xxxxxxxx

Les couleurs hexadécimales admettent la transparence stockée dans les deux derniers caractères. Voici une fonction de conversion rgba vers hexadécimales :

Si l’on veut convertir une chaîne de la forme rgba(xx, xx, xx, xx) en objet json, on peut utiliser le snippet suivant :

JSON Object à partir de deux tableaux

Array.prototype.entries() et Object.entries()

La méthode entries() sur un tableau retourne un nouvel objet itérateur de tableau Array Iterator qui contient les paires de clé/valeur pour chaque index du tableau.

La méthode Object.entries() retourne un tableau de paires de propriétés [key, value] énumérable. L’ordre du tableau retourné par Object.entries() ne dépend pas de celui par lequel a été défini l’objet.

Itération sur un tableau avec l’index

On utilise une boucle for() et l’on combine la syntaxe de déstructuration introduite dans ES6 avec l’appel à la méthode entries () sur le tableau :

Itération sur un objet Json

On utilise une boucle for() sur l’objet :

Convertir une NodeList() en tableau Array[]

Lorsque l’on sélectionne des éléments du DOM avec les méthodes getElementsByClassName() ou querySelectorAll(), on obtient une liste d’objets Element appelé HTMLCollection ou NodeList. Ce sont presque le même type d’objet, HTMLCollection est live (un element ajouté dynamiquement après sera dans la liste) alors que Nodelist est static. Ensuite on peut utiliser la méthode forEach() pour itérer sur chaque éléments de la liste (seulement pour une liste NodeList). En effet, cette boucle est implémentée pour une liste de type NodeList. Malheureusement, il n’existe pas encore d’instruction pour sortir de la boucle avant l’itération de tous les éléments. On voudrait utiliser l’instruction break, mais celle-ci est inopérante dans une boucle forEach() (tous les éléments sont traités), il faut nécessairement être dans une boucle for(), while(), some(), every(), qui ne s’utilisent que sur des tableaux Array. Il faut donc convertir la liste NodeList en tableau Array. On a 2 possibilités pour cela :

On peut utiliser la sélection d’éléments dans une boucle for() :

Raccourcis window et document, et DOMContentLoaded en un coup

Si l’on veut attendre que le DOM Document Object Model soit entièrement chargé, et appelé avec un nom plus court les objets window et document, on écrit une fonction auto exécutable (entre parenthèses) dans un script javascript avec comme argument window et document que l’on inclut en fin de page. Cette fonction, lorsqu’elle est exécutée définie une fonction qui prend deux arguments w et d. Ainsi, le script attend que le document soit chargé et lance une fonction avec w et d représentant les objets window et document.

Propagation d’événement, event bubbling

Lorsqu’un élément n’est pas encore créé, qu’il le sera plus tard en Ajax ou javascript, on peut vouloir écouter un événement sur cet élément. Comme l’élément n’existe pas encore, il faut déléguer l’écoute de l’événement à un élément parent event handler qui existe déjà dans le code. Ainsi, le code javascript, lors du lancement de la page n’emmétra pas d’erreurs en indiquant qu’il ne peut lancer un écouteur sur un élément qui n’existe pas. On teste alors la cible de l’événement e.target :

Dans l’exemple, on écoute le click sur le body, si la cible est notre bouton, on exécute le code. L’élément parent peut être plus précis que le body. L’élément cliqué est le bouton, l’événement se propage aux multiples parents, on parle de event bubbling. Puisque l’on a cliqué sur le bouton, la cible est le bouton.

Certains événements se propagent, d’autres pas : focus ne se propage pas, il faut préférer focusin qui se propage.

Si l’on veut empêcher cette propagation sur l’événement d’un élément, on utilise stopPropagation() :

Si l’on veut empêcher le comportement par défaut, par exemple l’appui sur Entrée dans une zone de saisie input d’un formulaire et la soumission automatique du formulaire, on utilise preventDefault(), ou bien on retourne false dans la fonction de l’écouteur :

https://dom.spec.whatwg.org/#dom-event-bubbles

Enlever les accents

Avec la méthode String.prototype.normalize() :

Ecouter les appels AJAX

On surcharge les méthodes open et send de l’objet XMLHttpRequest, on peut ainsi surveiller les actions sur cet objet.

On définit les fonctions de remplacement :

On surcharge les méthodes open et send :

https://stackoverflow.com/questions/4406606/can-jquery-listen-to-ajax-calls-from-other-javascript/6036392#6036392

Lister les entrées d’un FormData

L’objet FormData permet de passer des données en Ajax avec la methode send() d’un objet XMLHttpRequest(). Pour lister les entrées d’une instance de FormData, on boucle sur les entrées renvoyées par la méthode entries() :

Connaître la valeur d’une entrée d’un FormData

Avec la méthode get(). Pour connaître toutes les méthodes disponibles, Mozilla developer FormData :

Ajouter une méthode à l’objet Element

Par exemple un toggleClass :

Et on l’utilise sur un objet de type Element :

Déclencher l’événement DOMContentLoaded

String interpolation ${}

Pour mettre la première lettre d’un mot en majuscule, on utilise des backquotes ` et la notation ${} :

Concaténation avec une variable :

Array.map() et string interpolation

Trois points, three dots ...

Paramètres REST

Les paramètres REST de sommeil, de repos ont été introduits pour réduire le code dans les arguments de fonction :

Les paramètres REST peuvent être déstructurer, pour les tableaux seulement :

Opérateur SPREAD

Pour combiner des tableaux :

Cloner, fusionner des objets :

Opérateurs SPREAD et paramètres REST

Surveiller les événements dans la console

Animation sur la commande monitorEvents(window, 'click')

La commande monitorEvents(element, 'event') écrit dans la console à chaque fois qu’un événement de type 'event' ('click' par exemple) se déclenche sur un élément. Très utile pour voir les propriétés de l’événement, et si celui-ci se déclenche vraiment, avant ou après un autre.

Charger une div avec load() sans recopier la div elle-même :

Si l’on fait :

On se retrouve avec la structure suivante :

Pour éviter cela, on peut faire :

Obtenir la date actuelle au format YYYY-MM-DD :

Toggle un attribut :

Par exemple sur l’attibut  disabled :

includes() équivalent de in_array() :

Sérialiser un tableau jSon :

On a :  args = { action: 'the-action', value: 'the-value' } . On veut obtenir une chaine :  action=the-action&value=the-value .

Sélectionner un élément dont l’id contient des crochets :

Pour éviter que jQuery ne considère les crochets comme un attribut, les crochets doivent être echappés :

Obtenir la taille réelle d’une image :

On utilise les propriétés naturalWidth et naturalHeight de l’objet javascript :

Supprimer le 1er caractère si c’est un espace :

Détecter la présence d’un bloqueur :

On crée un fichier ads.js, vide ou avec une seule ligne :

ads.js :

Et lorsque l’on veut savoir si le bloqueur de pubs est activé ou pas:

Identique à la méthode $.contains, mais qui matche exactement le contenu:

$.exp[‘:’] permet de définir en outre le pseudo selecteur :.

Obtenir la liste des clés d’un objet JSON:

L’objet est de la forme:

On obtient la liste des clés avec la méthode keys de l’objet Object:

Rendre la méthode $.contains insensible à la casse:

$.exp[‘:’] permet de définir en outre le pseudo selecteur :.

Séparer les différentes lignes d’une chaine:

lines est un tableau constitué par les différentes lignes.

Ajouter un délai avant l’exécution d’une fonction sans l’exécuter si le délai est inférieur:

et pour appliquer la fonction, par exemple pour ne déclencher l’exécution d’un callback que si la souris survole un élément plus d’1 seconde :

Détecter l’évènement paste (coller) dans un input:

Il faut mettre un setTimeout très court pour que l’événement soit détecté:

La fonction php addslashes() en javaScript:

Une chaîne peut être échappée complètement et de façon compacte en utilisant JSON.stringify

Argument facultatif dans une fonction javaScript:

L’argument precision est optionnel, s’il n’est pas donné, il est initialisé à 2.

Obtenir une valeur au hasard d’un tableau:

Et pour obtenir un élément au hasard d’un ensemble d’éléments jQuery:

La fonction htmlentities pour javaScript:

Tester si la souris est au-dessus d’un élément:

Sélectionner des éléments dont le texte commence par quelque chose:

Obtenir la date courante au format SQL ou <input type= »date »> en javaScript:

date contient la date au format yyyy-mm-dd.

Changer un attribut de nom:

Cela peut être utile si l’on veut par exemple ne pas charger une image pour la montrer ultérieurement (par exemple dans une lightbox). On utilise l’attribut data pour entrer le chemin l’image et on le change en src pour charger l’image:

Code HTML:

On change donc l’attribut data en src, l’image est déjà chargée, elle est affichée instantanément.

Code jQuery:

Pour le faire sur toute une série d’images, on inclut cela dans une bouche each():

Sélectionner les éléments possédant l’attribut ‘name’:

Et pour tester si un élément possède l’attribut ‘name’:

Selectionner le premier enfant de l’objet $(this):

on sélectionne notre objet: notif= $(« #foo »);

Plusieurs possibilités plus ou moins rapides:

La propriété firstChild de l’objet javascript est encore un peu plus rapide:

Changer une balise, par exemple un <span> en <p>:

Avec jQuery, on utilise la fonction replaceWith():

En pur javascript :

width(), innerWidth(), outerWidth():

width, innerWidth, outerWidth
width, innerWidth, outerWidth

Appui sur la touche « entrée » ou « return »:

Valider un input avec la touche « entrée » ou « return »:

N’entrer que des nombres positifs dans les input de type « number ». On empêche l’appui sur les touches non numériques:

Avec jQueryUI, sélectionner tous les effets « easing », les placer dans une liste à options.

Fonction anonyme pour se préserver des interactions avec les autres librairies js utilisant le $:

Avec un document.ready, la même fonction:

Structure d’un plugin:

Options JSON dans un plugin:

Le plugin peut être appelé de la façon suivante, en ne spécifiant que quelques options:

Sélectionner les frères qui ne sont pas des images (par exemple):

Sélectionner l’élément frère précédent qui a la même classe:

Limiter le déclenchement de l’événement « resize » pour diminuer les recalculs:

Test sur le nombre d’éléments d’une certaine classe que contient une div:

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.