Astuce Javascript+html: confirmer lors d'un clic sur un lien

Je partage une petit truc vraiment tout con que je viens de tester pour une de mes applis de boulot.

J'avais besoin de confirmer vite fait et sans prise de tête le clic sur un lien «supprimer»: j'ai opté pour l'utilisation d'un attribut «confirm» et d'un bout de JS qui va bien.

Le code ci-dessous utilise ma petite betalib VanillaJS perso (http://cdn.warriordudimanche.net/VanillaJS.js) parce que j'avais la flemme de récrire la partie ciblage et foreach, mais vous aurez pigé le concept (c'est vraiment tout con)

HTML

<a href="http://warriordudimanche.net/?delete" confirm="true">Delete</a>

JS

on('click','a[confirm]',function(e){
        // La partie à mettre dans un évènement click
    e.stopPropagation();
    if (!confirm("Etes-vous certain ?")){
        e.preventDefault();
        return false;
    }
});

L'avantage, c'est qu'il suffit de coller l'attribut «confirm» sur un lien pour qu'il ne soit activé qu'en cas de confirmation.

Fonctions fléchées - JavaScript | MDN

Ha, ben je viens de comprendre l'intérêt des fonctions fléchées par rapport aux fonctions habituelles en JS... une fonction fléchée ne redéfinit pas le this.

voilà qui est intéressant et qui évite des jonglages avec des variables tampon quand on imbrique des trucs comme un gros babouin...

Oui, je sais, tout le monde s'en était aperçu à part moi, gnagnagna, «t'as les yeux couverts de peaux de saucisson» toussa...

7 Useful JavaScript Tricks

Je retiens:

Virer les false ou équivalents dans un array


 array.filter(boolean)

Mélanger des objets


const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };


const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/

Récupérer la query string



 // Assuming "?post=1234&action=edit"
var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

Récuperer l'URL absolue

var getAbsoluteUrl = (function() {
    var a;
    return function(url) {
        if(!a) a = document.createElement('a');
        a.href = url;
        return a.href;
    };
})();
// Usage
getAbsoluteUrl('/something'); // https://davidwalsh.name/something

Astuce : Les template strings en JavaScript

L'usage de base consiste à imbriquer des variables dans les chaînes, entre ${ et }. Elles se verront "remplacées" par leur valeur au moment de l'exécution.





var kiwis = 3;

const message = `J'ai ${kiwis} kiwis dans mon panier`;

// Résultat : J'ai 3 kiwis dans mon panier


On retrouve ici le même concept qu'en PHP avec les chaînes de texte entre guillemets doubles qui interprètent les variables : 


echo "Ma variable : $kiwis";


Source image
Fil RSS des articles