CategoryJavascript

[javascript] L’équivalent ES6/vanilla JS de la méthode .eq() de jQuery

Source: Pure JS equivalent of Jquery eq().

La méthode .eq() de jQuery

La même chose en ES6/vanilla JS

[javascript] Corriger l’erreur « Uncaught TypeError: Cannot read property ‘getData’ of undefined » (ou ‘setData’) en déclarant un addEventListener correctement

Source: Ondragstart Attribute doesn’t appear when created dynamically.

En essayant de convertir la génération d’un élément TD dans le DOM avec jQuery en code vanilla JS, je me suis heurté aux erreurs suivantes:

Uncaught TypeError: Cannot read property ‘getData’ of undefined
Uncaught TypeError: Cannot read property ‘setData’ of undefined

Le code jquery de départ:

Version vanilla JS/ES6

On commence par créer l’élément TD:

Puis on lui assigne de multiples attributs (id, title, class) (source: Setting multiple attributes for an element at once with JavaScript):

(pour n’ajouter qu’un seul attribut: $row.setAttribute("class", "is-row");)

Mais pour ajouter des attributs relatifs à des événements (ondrop, ondragover, …), il faut utiliser la méthode addEventListener:

[Javascript] Une alternative ES6+ à la méthode .remove() de jQuery avec querySelectorAll et parentNode.removeChild

Source: Pure JavaScript alternative to jQuery’s .remove()

Instruction initiale (en jQuery):

Boucle for:

Sous forme de fonction

[javaScript] Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

Attention: l’article et le code ci-dessous ne sont valables qu’au document ready. Ceci signifie qu’au chargement de la page seulement, on va vérifier la disponibilité d’un ou plusieurs éléments dans le DOM. Les sources ne concernent pas l’observation de modifications dans le DOM une fois que la page est chargée et/ou qu’un utilisateur effectue des actions. Pour cette deuxième fonctionnalité, se référer à la documentation de Mutation Observer sur developer.mozilla.org et un exemple d’utilisation ici: [Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur.

Source: Using Mutation Observers to Watch for Element Availability. Code source sous GIT. Version PDF pour la postérité.

[RequireJS] Astuces, bonnes pratiques

Apprendre les bases

Doc officielle

La documentation officielle de RequireJS avec un chapitre sur les erreurs les plus communes.

Tutoriels

RequireJS et le code JavaScript modulaire (tutoriel en français).

Tuto très clair de codedamn sur YouTube et code source. Permet d’aborder les bases avec:

  • Le fichier de config
  • La fonction require
  • La fonction define
  • AMD et les modules

Troubleshooting

La console me remonte cette erreur: require.js:166 Uncaught Error: Mismatched anonymous define(): dans le code source, remplacer define par require!

[javascript] Importer des breakpoints CSS

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

[Javascript] Vérifier qu’une chaîne de caractères string contient une sous-chaîne substring spécifique avec les méthodes includes ou indexOf

Source: en ES6 et pour Internet Explorer How to check whether a string contains a substring in JavaScript?

ES6

ES5 ou plus ancien (Internet Explorer)

Exemple in the field:

[Javascript] Supprimer les entrées dupliquées d’un tableau clé/valeur

Source: Removing elements from an array of objects based on duplicate values of multiple keys

[javascript] Les bases: les opérateurs

Ressources:

Exemple d’opérateurs: delete, &&, =, +, !, *, ||, typeof

Jargon

  • a = 10 « a » et « 10 » sont des operands ou des arguments.
  • Unary operators: un opérateur qui n’a qu’un seul argument:

  • Binary operators: un opérateur qui a 2 arguments:

Notation

Infix notation

Opérateur est déclaré ENTRE 2 operands/arguments:

Prefix notation

Opérateur est déclaré AVANT l’operand/argument:

Postfix notation

Opérateur est déclaré APRES l’operand/argument:

Demo:

Opérateurs de comparaison

<, <=, >, <=, ==, !=, ===, !==

Opérateurs logiques (logical operators)

and, or, not

Cas pratiques

© 2020 devfrontend.info

Theme by Anders NorénUp ↑