Alsacreations.com - Actualités - Archives (mai 2019)
Les dernières actualités d'Alsacreations.com
Ce livre écrit par par Thomas Parisot est une belle référence pour quiconque s'intéresse à l'univers fourmillant de Node.js. Si vous avez déjà utilisé npm, node ou les outils qui y sont liés sans forcément vous plonger dans ses rouages, c'est l'occasion de découvrir tout ce que l'on peut créer par soi-même avec JavaScript exécuté non plus dans le navigateur mais sur votre machine ou sur un serveur.
Aux éditions Eyrolles dans la collection blanche, le contenu du livre a été rédigé en open-source sur Github. Très clair dans ses explications et ses exemples, il vous permet d'aborder proprement les applications web et l'usage de node en ligne de commande.
Si vous êtes déjà développeur back-end (PHP, Python, Ruby ou équivalent) vous aurez plaisir à prendre la main sur cet écosystème, comprendre son histoire, sa structure, ses particularités et évolutions.
On y retrouvera tous les concepts nécessaires à un développement back-end en JavaScript, du routage d'URL jusqu'à la gestion des logs en passant par l'utilisation de plateformes Cloud et les précautions à prendre pour la sécurité.
Au sommaire :
- Histoire, écosystème et gouvernance
- Installer, mettre à jour et développer
- Jouer avec JavaScript
- Jouer avec Node.js
- Jouer avec npm
- Déployer notre code
- Créer une application web
- Créer un outil en ligne de commande
- Créer une application front-end
- Sélection de modules npm
Copier vers le presse-papier du système d'exploitation une information provenant du document est une tâche que l'on souhaite parfois réaliser pour faciliter la vie de l'utilisateur, lors de l'utilisation d'une application web : une chaîne aléatoire complexe, une URL, une clé, ou tout simplement un message... C'est à la portée de la fonction JavaScript execCommand() qui prend en paramètre l'opération que l'on souhaite réaliser copy (copier), cut (couper), paste (coller).
On retrouve ce principe souvent sur les fonctions de partage de document par lien tel que sur Google Drive :
Ceci fait l'objet d'une spécification "non officielle" execCommand pourtant très bien supportée par tous les navigateurs. A terme, on devrait plutôt s'orienter vers ContentEditable et Input Events
Supposons que vous avez structuré le texte à copier de la façon suivante, dans un quelconque élément HTML :
<p>
Copiez cette adresse : <span id="tocopy">https://www.knacss.com/</span>
</p>
On va y adjoindre un bouton d'action pour lancer la copie, doté d'une classe js-copy pour lui lier un événement JavaScript et un attribut data-target permettant de ne pas coder "en dur" dans la fonction correspondante l'élément cible. Ceci a l'intérêt de pouvoir réutiliser cette même classe js-copy avec de multiples éléments, chacun définissant quelle est sa "source" d'information.
<p>
Copiez cette adresse : <span id="tocopy">https://www.knacss.com/</span>
<input type="button" value="Copier" class="js-copy" data-target="#tocopy">
</p>
Sans plus attendre, le script associé, qui va se servir des méthodes createRange et getSelection pour sélectionner une portion de contenu dans le document et ensuite exécuter par-dessus la commande de copie :
var btncopy = document.querySelector('.js-copy');
if(btncopy) {
btncopy.addEventListener('click', docopy);
}
function docopy() {
// Cible de l'élément qui doit être copié
var target = this.dataset.target;
var fromElement = document.querySelector(target);
if(!fromElement) return;
// Sélection des caractères concernés
var range = document.createRange();
var selection = window.getSelection();
range.selectNode(fromElement);
selection.removeAllRanges();
selection.addRange(range);
try {
// Exécution de la commande de copie
var result = document.execCommand('copy');
if (result) {
// La copie a réussi
alert('Copié !');
}
}
catch(err) {
// Une erreur est surevnue lors de la tentative de copie
alert(err);
}
// Fin de l'opération
selection = window.getSelection();
if (typeof selection.removeRange === 'function') {
selection.removeRange(range);
} else if (typeof selection.removeAllRanges === 'function') {
selection.removeAllRanges();
}
}
Démo
See the Pen Copier by Alsacreations (@alsacreations) on CodePen.
Pour savoir si une commande est supportée par le navigateur, on peut interroger la méthode queryCommandSupported en lui passant en paramètre le nom de la commande :
document.queryCommandSupported('copy')