A text-based bookmark manager rendered in a web page
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1797 lines
160 KiB

<!doctype html>
<html lang="fr" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Partage de petits bouts de codes utiles et commentés en Python, JS, CSS, etc.">
<meta name="author" content="David Larlet">
<link rel="canonical" href="https://code.larlet.fr/javascript/">
<link rel="prev" href="../python-servers/">
<link rel="next" href="../javascript-forms/">
<link rel="alternate" type="application/rss+xml" title="Flux RSS" href="../feed_rss_created.xml">
<link rel="alternate" type="application/rss+xml" title="Flux RSS du contenu mis à jour" href="../feed_rss_updated.xml">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.5.2">
<title>Généralités - Code.larlet.fr</title>
<link rel="stylesheet" href="../assets/stylesheets/main.50c56a3b.min.css">
<link rel="stylesheet" href="../assets/stylesheets/palette.06af60db.min.css">
<link rel="stylesheet" href="../static/stylesheets/termynal.css">
<link rel="stylesheet" href="../static/stylesheets/fonts.css">
<link rel="stylesheet" href="../static/stylesheets/extra.css">
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<link type="text/html" href="https://mastodon.social/@dav" rel="me">
<!-- Is that even respected? Retrospectively? What a shAItshow…
https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#javascript" class="md-skip">
Aller au contenu
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="En-tête">
<a href=".." title="Code.larlet.fr" class="md-header__button md-logo" aria-label="Code.larlet.fr" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Code.larlet.fr
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Généralités
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69m-9.15 3.96h2.3L12 9l-1.15 3.65Z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="teal" data-md-color-accent="blue" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="teal" data-md-color-accent="blue" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_2">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg>
</label>
</form>
<script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Rechercher" placeholder="Rechercher" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Recherche">
<button type="reset" class="md-search__icon md-icon" title="Effacer" aria-label="Effacer" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initialisation de la recherche
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://gitlab.com/davidbgk/larlet-fr-code" title="Aller au dépôt" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M216.29 158.39H137C97 147.9 6.51 150.63 6.51 233.18c0 30.09 15 51.23 35 61-25.1 23-37 33.85-37 49.21 0 11 4.47 21.14 17.89 26.81C8.13 383.61 0 393.35 0 411.65c0 32.11 28.05 50.82 101.63 50.82 70.75 0 111.79-26.42 111.79-73.18 0-58.66-45.16-56.5-151.63-63l13.43-21.55c27.27 7.58 118.7 10 118.7-67.89 0-18.7-7.73-31.71-15-41.07l37.41-2.84zm-63.42 241.9c0 32.06-104.89 32.1-104.89 2.43 0-8.14 5.27-15 10.57-21.54 77.71 5.3 94.32 3.37 94.32 19.11zm-50.81-134.58c-52.8 0-50.46-71.16 1.2-71.16 49.54 0 50.82 71.16-1.2 71.16zm133.3 100.51v-32.1c26.75-3.66 27.24-2 27.24-11V203.61c0-8.5-2.05-7.38-27.24-16.26l4.47-32.92H324v168.71c0 6.51.4 7.32 6.51 8.14l20.73 2.84v32.1zm52.45-244.31c-23.17 0-36.59-13.43-36.59-36.61s13.42-35.77 36.59-35.77c23.58 0 37 12.62 37 35.77s-13.42 36.61-37 36.61zM512 350.46c-17.49 8.53-43.1 16.26-66.28 16.26-48.38 0-66.67-19.5-66.67-65.46V194.75c0-5.42 1.05-4.06-31.71-4.06V154.5c35.78-4.07 50-22 54.47-66.27h38.63c0 65.83-1.34 61.81 3.26 61.81H501v40.65h-60.56v97.15c0 6.92-4.92 51.41 60.57 26.84z"/></svg>
</div>
<div class="md-source__repository">
GitLab
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href=".." title="Code.larlet.fr" class="md-nav__button md-logo" aria-label="Code.larlet.fr" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
Code.larlet.fr
</label>
<div class="md-nav__source">
<a href="https://gitlab.com/davidbgk/larlet-fr-code" title="Aller au dépôt" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M216.29 158.39H137C97 147.9 6.51 150.63 6.51 233.18c0 30.09 15 51.23 35 61-25.1 23-37 33.85-37 49.21 0 11 4.47 21.14 17.89 26.81C8.13 383.61 0 393.35 0 411.65c0 32.11 28.05 50.82 101.63 50.82 70.75 0 111.79-26.42 111.79-73.18 0-58.66-45.16-56.5-151.63-63l13.43-21.55c27.27 7.58 118.7 10 118.7-67.89 0-18.7-7.73-31.71-15-41.07l37.41-2.84zm-63.42 241.9c0 32.06-104.89 32.1-104.89 2.43 0-8.14 5.27-15 10.57-21.54 77.71 5.3 94.32 3.37 94.32 19.11zm-50.81-134.58c-52.8 0-50.46-71.16 1.2-71.16 49.54 0 50.82 71.16-1.2 71.16zm133.3 100.51v-32.1c26.75-3.66 27.24-2 27.24-11V203.61c0-8.5-2.05-7.38-27.24-16.26l4.47-32.92H324v168.71c0 6.51.4 7.32 6.51 8.14l20.73 2.84v32.1zm52.45-244.31c-23.17 0-36.59-13.43-36.59-36.61s13.42-35.77 36.59-35.77c23.58 0 37 12.62 37 35.77s-13.42 36.61-37 36.61zM512 350.46c-17.49 8.53-43.1 16.26-66.28 16.26-48.38 0-66.67-19.5-66.67-65.46V194.75c0-5.42 1.05-4.06-31.71-4.06V154.5c35.78-4.07 50-22 54.47-66.27h38.63c0 65.83-1.34 61.81 3.26 61.81H501v40.65h-60.56v97.15c0 6.92-4.92 51.41 60.57 26.84z"/></svg>
</div>
<div class="md-source__repository">
GitLab
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href=".." class="md-nav__link">
<span class="md-ellipsis">
Accueil
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Python
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Python
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/" class="md-nav__link">
<span class="md-ellipsis">
Généralités
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python-servers/" class="md-nav__link">
<span class="md-ellipsis">
Serveurs
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
JavaScript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
JavaScript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Généralités
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Généralités
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table des matières">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table des matières
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#raccourci-pour-selectionner-une-liste-de-nuds" class="md-nav__link">
<span class="md-ellipsis">
Raccourci pour sélectionner une liste de nœuds
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#recuperer-la-chaine-de-lancre-dune-url" class="md-nav__link">
<span class="md-ellipsis">
Récupérer la chaîne de l’ancre d’une URL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#prendre-en-compte-les-preferences-utilisateurice-pour-lancer-une-animation" class="md-nav__link">
<span class="md-ellipsis">
Prendre en compte les préférences utilisateur·ice pour lancer une animation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#raccourci-pour-creerattacher-un-evenement" class="md-nav__link">
<span class="md-ellipsis">
Raccourci pour créer/attacher un évènement
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#polyfills-a-la-demande" class="md-nav__link">
<span class="md-ellipsis">
Polyfills à la demande
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#copier-dans-le-presse-papier" class="md-nav__link">
<span class="md-ellipsis">
Copier dans le presse-papier
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#confirmation-de-suppression" class="md-nav__link">
<span class="md-ellipsis">
Confirmation de suppression
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#generer-un-slug" class="md-nav__link">
<span class="md-ellipsis">
Générer un slug
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#un-systeme-de-plugins" class="md-nav__link">
<span class="md-ellipsis">
Un système de plugins
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#parametres-par-defaut" class="md-nav__link">
<span class="md-ellipsis">
Paramètres par défaut
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#telecharger-un-fichier-dynamiquement" class="md-nav__link">
<span class="md-ellipsis">
Télécharger un fichier dynamiquement
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#enlever-des-espaces" class="md-nav__link">
<span class="md-ellipsis">
Enlever des espaces
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#avoir-une-methode-range" class="md-nav__link">
<span class="md-ellipsis">
Avoir une méthode range()
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#avoir-une-methode-zip" class="md-nav__link">
<span class="md-ellipsis">
Avoir une méthode zip()
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#utiliser-des-loggers-personnalises" class="md-nav__link">
<span class="md-ellipsis">
Utiliser des loggers personnalisés
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#du-camel-au-kebab" class="md-nav__link">
<span class="md-ellipsis">
Du camel au kebab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#raccourcis-pour-les-attributs" class="md-nav__link">
<span class="md-ellipsis">
Raccourcis pour les attributs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#chargement-lorsque-le-dom-est-pret" class="md-nav__link">
<span class="md-ellipsis">
Chargement lorsque le DOM est prêt
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#stocker-des-informations-dans-lurl" class="md-nav__link">
<span class="md-ellipsis">
Stocker des informations dans l’URL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#generer-des-chemins-relatifs-pour-des-fichiers-statiques-de-modules" class="md-nav__link">
<span class="md-ellipsis">
Générer des chemins relatifs pour des fichiers statiques de modules
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#echapper-le-contenu-de-variables-au-rendu" class="md-nav__link">
<span class="md-ellipsis">
Échapper le contenu de variables au rendu
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#retirer-les-tags-html-dune-chaine" class="md-nav__link">
<span class="md-ellipsis">
Retirer les tags HTML d’une chaîne
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#pre-remplir-un-formulaire-avec-les-parametres-de-lurl" class="md-nav__link">
<span class="md-ellipsis">
Pré-remplir un formulaire avec les paramètres de l’URL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#rechercher-des-mots-dans-un-texte" class="md-nav__link">
<span class="md-ellipsis">
Rechercher des mots dans un texte
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#pour-aller-plus-loindifferemment" class="md-nav__link">
<span class="md-ellipsis">
Pour aller plus loin/différemment
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../javascript-forms/" class="md-nav__link">
<span class="md-ellipsis">
Formulaires
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript-images/" class="md-nav__link">
<span class="md-ellipsis">
Images
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript-fetch/" class="md-nav__link">
<span class="md-ellipsis">
Fetch
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript-webcomponents/" class="md-nav__link">
<span class="md-ellipsis">
Web Components
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../css/" class="md-nav__link">
<span class="md-ellipsis">
CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../html/" class="md-nav__link">
<span class="md-ellipsis">
HTML
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../makefile/" class="md-nav__link">
<span class="md-ellipsis">
Makefile
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../shell/" class="md-nav__link">
<span class="md-ellipsis">
Shell
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../regexp/" class="md-nav__link">
<span class="md-ellipsis">
RegExps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../sql/" class="md-nav__link">
<span class="md-ellipsis">
SQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../pages/" class="md-nav__link">
<span class="md-ellipsis">
Pages
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../divers/" class="md-nav__link">
<span class="md-ellipsis">
Divers
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../blog/" class="md-nav__link">
<span class="md-ellipsis">
Blog
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../colophon/" class="md-nav__link">
<span class="md-ellipsis">
Colophon
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="javascript">JavaScript<a class="headerlink" href="#javascript" title="Permanent link">⚓︎</a></h1>
<h2 id="raccourci-pour-selectionner-une-liste-de-nuds"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 4a8 8 0 0 1 8 8 8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8m0 2a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 6-6 6 6 0 0 0-6-6m-1 2h1.5v3.78l2.33 2.33-1.06 1.06L14 12.4V8M2 18a1 1 0 0 1-1-1 1 1 0 0 1 1-1h3.83c.31.71.71 1.38 1.17 2H2m1-5a1 1 0 0 1-1-1 1 1 0 0 1 1-1h2.05L5 12l.05 1H3m1-5a1 1 0 0 1-1-1 1 1 0 0 1 1-1h3c-.46.62-.86 1.29-1.17 2H4Z"/></svg></span> Raccourci pour sélectionner une liste de nœuds<a class="headerlink" href="#raccourci-pour-selectionner-une-liste-de-nuds" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>La méthode standard qui consiste à utiliser <code class="highlight"><span class="nx">querySelectorAll</span><span class="p">()</span></code>
est relativement verbeuse et ne permet pas de faire facilement un
<code class="highlight"><span class="nx">forEach</span><span class="p">()</span></code> dessus. Cette version simplifiée est un raccourci utile
lorsqu’on doit le faire souvent :</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">qsa.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1">1</a></span>
<span class="normal"><a href="#__codelineno-0-2">2</a></span>
<span class="normal"><a href="#__codelineno-0-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">qsa</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span><span class="w"> </span><span class="nx">root</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nb">Array</span><span class="p">.</span><span class="kr">from</span><span class="p">(</span><span class="nx">root</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="nx">selector</span><span class="p">))</span><span class="w"> </span><span class="c1">// (1)!</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<ol>
<li>On en profite pour retourner un <code class="highlight"><span class="nb">Array</span></code> !</li>
</ol>
<h2 id="recuperer-la-chaine-de-lancre-dune-url"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M320 96a32 32 0 1 1-64 0 32 32 0 1 1 64 0zm21.1 80C367 158.8 384 129.4 384 96c0-53-43-96-96-96s-96 43-96 96c0 33.4 17 62.8 42.9 80H224c-17.7 0-32 14.3-32 32s14.3 32 32 32h32v208h-48c-53 0-96-43-96-96v-6.1l7 7c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L97 263c-9.4-9.4-24.6-9.4-33.9 0L7 319c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l7-7v6.1c0 88.4 71.6 160 160 160h160c8.2 0 16.3-.6 24.2-1.8-22.2-16.2-40.4-37.5-53-62.2H320V240h32c17.7 0 32-14.3 32-32s-14.3-32-32-32h-10.9zM640 368a144 144 0 1 0-288 0 144 144 0 1 0 288 0zm-76.7-43.3c6.2 6.2 6.2 16.4 0 22.6l-72 72c-6.2 6.2-16.4 6.2-22.6 0l-40-40c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l28.7 28.7 60.7-60.7c6.2-6.2 16.4-6.2 22.6 0z"/></svg></span> Récupérer la chaîne de l’ancre d’une URL<a class="headerlink" href="#recuperer-la-chaine-de-lancre-dune-url" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>Je passe toujours trop de temps à retrouver comment faire.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">anchor.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span>
<span class="normal"><a href="#__codelineno-1-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">currentAnchor</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="prendre-en-compte-les-preferences-utilisateurice-pour-lancer-une-animation"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.32 10.56 8.38 9.5 7.32 8.44l1.06-1.06L10.5 9.5l-2.12 2.12-1.06-1.06M4.5 9h.08C5.77 6.07 8.64 4 12 4c2.19 0 4.16.88 5.61 2.3.15-.6.45-1.3.81-1.96A9.958 9.958 0 0 0 12 2c-4.89 0-8.95 3.5-9.82 8.14C2.74 9.44 3.59 9 4.5 9M21 10.5c-.42 0-.82-.09-1.19-.22.12.55.19 1.13.19 1.72 0 4.42-3.58 8-8 8-3.36 0-6.23-2.07-7.42-5H4.5c-.5 0-1.04-.14-1.5-.4-.32-.18-.59-.42-.82-.7C3.07 18.5 7.11 22 12 22c5.5 0 10-4.5 10-10 0-.55-.06-1.09-.14-1.62a3.5 3.5 0 0 1-.86.12M21 3s-2 2.9-2 4 .9 2 2 2 2-.9 2-2-2-4-2-4m-5.38 4.38L13.5 9.5l2.12 2.12 1.06-1.06-1.06-1.06 1.06-1.06-1.06-1.06M8.56 17c.69-1.19 1.97-2 3.44-2s2.75.81 3.44 2h1.68c-.8-2.05-2.79-3.5-5.12-3.5-.87 0-1.7.2-2.43.57L6 12c0-.5-.27-1-.75-1.29-.72-.41-1.63-.17-2.05.55-.41.74-.17 1.63.55 2.05.48.28 1.05.25 1.49 0l2.97 1.72c-.57.53-1.03 1.21-1.33 1.97h1.68Z"/></svg></span> Prendre en compte les préférences utilisateur·ice pour lancer une animation<a class="headerlink" href="#prendre-en-compte-les-preferences-utilisateurice-pour-lancer-une-animation" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>Très important car des personnes sont mal à l’aise avec certaines
animations (j’en fait partie, parfois).</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">motion.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span>
<span class="normal"><a href="#__codelineno-2-2">2</a></span>
<span class="normal"><a href="#__codelineno-2-3">3</a></span>
<span class="normal"><a href="#__codelineno-2-4">4</a></span>
<span class="normal"><a href="#__codelineno-2-5">5</a></span>
<span class="normal"><a href="#__codelineno-2-6">6</a></span>
<span class="normal"><a href="#__codelineno-2-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">prefersReducedMotion</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a><span class="w"> </span><span class="s1">&#39;(prefers-reduced-motion: reduce)&#39;</span>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a><span class="p">).</span><span class="nx">matches</span>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">prefersReducedMotion</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="kc">true</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a><span class="w"> </span><span class="c1">// do animation</span>
<a id="__codelineno-2-7" name="__codelineno-2-7"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p>Voir aussi ce qu’il est possible de faire <a href="../html/#prendre-en-compte-les-preferences-utilisateurice-pour-lancer-une-animation">en <abbr title="Hyper Text Markup Language">HTML</abbr></a> et <a href="../css/#prendre-en-compte-les-preferences-utilisateurice-pour-lancer-une-animation">en <abbr title="Cascading Style Sheets">CSS</abbr></a>.</p>
<h2 id="raccourci-pour-creerattacher-un-evenement"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 19V8H5v11h14M16 1h2v2h1a2 2 0 0 1 2 2v14c0 1.11-.89 2-2 2H5a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2h1V1h2v2h8V1m-5 8.5h2v3h3v2h-3v3h-2v-3H8v-2h3v-3Z"/></svg></span> Raccourci pour créer/attacher un évènement<a class="headerlink" href="#raccourci-pour-creerattacher-un-evenement" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>Un bout de code qui vient de Chris Ferdinandi
(voir <a href="https://gomakethings.com/custom-events-with-vanilla-js/">1</a>, <a href="https://gomakethings.com/a-vanilla-js-custom-event-helper-function/">2</a> et <a href="https://gomakethings.com/custom-event-naming-conventions/">3</a>) :</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">emit.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1">1</a></span>
<span class="normal"><a href="#__codelineno-3-2">2</a></span>
<span class="normal"><a href="#__codelineno-3-3">3</a></span>
<span class="normal"><a href="#__codelineno-3-4">4</a></span>
<span class="normal"><a href="#__codelineno-3-5">5</a></span>
<span class="normal"><a href="#__codelineno-3-6">6</a></span>
<span class="normal"><a href="#__codelineno-3-7">7</a></span>
<span class="normal"><a href="#__codelineno-3-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">emit</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span><span class="w"> </span><span class="nx">detail</span><span class="p">,</span><span class="w"> </span><span class="nx">elem</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">event</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">CustomEvent</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a><span class="w"> </span><span class="nx">bubbles</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="w"> </span><span class="nx">cancelable</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<a id="__codelineno-3-5" name="__codelineno-3-5"></a><span class="w"> </span><span class="nx">detail</span><span class="o">:</span><span class="w"> </span><span class="nx">detail</span><span class="p">,</span>
<a id="__codelineno-3-6" name="__codelineno-3-6"></a><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-3-7" name="__codelineno-3-7"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">elem</span><span class="p">.</span><span class="nx">dispatchEvent</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span>
<a id="__codelineno-3-8" name="__codelineno-3-8"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p>Il peut s’utiliser ainsi
<code class="highlight"><span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;calculator:add&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="nx">total</span><span class="o">:</span><span class="w"> </span><span class="mf">20</span><span class="p">},</span><span class="w"> </span><span class="nx">calendarElement</span><span class="p">)</span></code>
et s’écouter de manière classique.</p>
<h2 id="polyfills-a-la-demande"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.73 12 3.98-3.96c.39-.39.39-1.04 0-1.41l-4.34-4.34c-.37-.39-1.02-.39-1.41 0L12 6.27 8 2.29a1.001 1.001 0 0 0-1.41 0L2.25 6.63c-.39.37-.39 1.02 0 1.41L6.23 12l-3.98 4c-.39.39-.39 1 0 1.41l4.34 4.34c.41.39 1.02.39 1.41 0l4-3.98 3.96 3.98c.2.2.45.29.71.29.26 0 .51-.1.71-.29l4.34-4.34c.39-.41.39-1.02 0-1.41l-3.99-4M12 9a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m-4.71 1.96L3.66 7.34l3.63-3.63 3.62 3.62-3.62 3.63M10 13a1 1 0 0 1-1-1 1 1 0 0 1 1-1 1 1 0 0 1 1 1 1 1 0 0 1-1 1m2 2a1 1 0 0 1-1-1 1 1 0 0 1 1-1 1 1 0 0 1 1 1 1 1 0 0 1-1 1m2-4a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m2.66 9.34-3.63-3.62 3.63-3.63 3.62 3.62-3.62 3.63Z"/></svg></span> Polyfills à la demande<a class="headerlink" href="#polyfills-a-la-demande" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>Il est possible d’importer des <code>polyfills</code> externes directement
depuis une balise <code class="highlight"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span></code>, par exemple pour
<code>Promise</code> ou <code>fetch</code> :</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">polyfills.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-4-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-4-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-4-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-4-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-4-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-4-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-4-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-4-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-4-10">10</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="o">&lt;</span><span class="nx">script</span><span class="o">&gt;</span>
<a id="__codelineno-4-2" name="__codelineno-4-2"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nb">Promise</span><span class="w"> </span><span class="o">||</span>
<a id="__codelineno-4-3" name="__codelineno-4-3"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span>
<a id="__codelineno-4-4" name="__codelineno-4-4"></a><span class="w"> </span><span class="s1">&#39;&lt;script src=&quot;https://unpkg.com/es6-promise@4.2.8/dist/es6-promise.auto.min.js&quot;&gt;&lt;\/script&gt;&#39;</span>
<a id="__codelineno-4-5" name="__codelineno-4-5"></a><span class="w"> </span><span class="p">)</span>
<a id="__codelineno-4-6" name="__codelineno-4-6"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">fetch</span><span class="w"> </span><span class="o">||</span>
<a id="__codelineno-4-7" name="__codelineno-4-7"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span>
<a id="__codelineno-4-8" name="__codelineno-4-8"></a><span class="w"> </span><span class="s1">&#39;&lt;script src=&quot;https://unpkg.com/whatwg-fetch@3.6.2/dist/fetch.umd.js&quot;&gt;&lt;\/script&gt;&#39;</span>
<a id="__codelineno-4-9" name="__codelineno-4-9"></a><span class="w"> </span><span class="p">)</span>
<a id="__codelineno-4-10" name="__codelineno-4-10"></a><span class="o">&lt;</span><span class="err">/script&gt;</span>
</code></pre></div></td></tr></table></div>
<p>En pratique, c’est quand même mieux de ne pas faire des requêtes
externes et d’avoir les fichiers en local.</p>
<h2 id="copier-dans-le-presse-papier"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.04 12.13c.14 0 .27.06.38.17l1.28 1.28c.22.21.22.56 0 .77l-1 1-2.05-2.05 1-1c.11-.11.25-.17.39-.17m-1.97 1.75 2.05 2.05L15.06 22H13v-2.06l6.07-6.06M19 3c1.1 0 2 .9 2 2v4L11 19v2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h4.18C9.6 1.84 10.7 1 12 1c1.3 0 2.4.84 2.82 2H19m-7 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1Z"/></svg></span> Copier dans le presse-papier<a class="headerlink" href="#copier-dans-le-presse-papier" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>Lorsqu’il y a un champ avec un code ou une URL à copier-coller, ça peut
être intéressant de proposer à l’utilisateur·ice de cliquer pour mettre
l’information dans son presse-papier et le coller ailleurs.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">copy-clipboard.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-5-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-5-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-5-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-5-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-5-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-5-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-5-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-5-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-5-10">10</a></span>
<span class="normal"><a href="#__codelineno-5-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">copyToClipboard</span><span class="p">(</span><span class="nx">codeElement</span><span class="p">,</span><span class="w"> </span><span class="nx">alert</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-2" name="__codelineno-5-2"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-3" name="__codelineno-5-3"></a><span class="w"> </span><span class="nx">navigator</span><span class="p">.</span><span class="nx">clipboard</span><span class="p">.</span><span class="nx">writeText</span><span class="p">(</span><span class="nx">codeElement</span><span class="p">.</span><span class="nx">innerText</span><span class="p">)</span>
<a id="__codelineno-5-4" name="__codelineno-5-4"></a><span class="w"> </span><span class="nx">alert</span><span class="p">.</span><span class="nx">innerHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`&lt;div class=&quot;custom-class&quot;&gt;Code copied!&lt;/div&gt;`</span>
<a id="__codelineno-5-5" name="__codelineno-5-5"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-6" name="__codelineno-5-6"></a><span class="w"> </span><span class="nx">alert</span><span class="p">.</span><span class="nx">innerHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;&#39;</span>
<a id="__codelineno-5-7" name="__codelineno-5-7"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="mf">3000</span><span class="p">)</span><span class="w"> </span><span class="c1">// (1)</span>
<a id="__codelineno-5-8" name="__codelineno-5-8"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">ex</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-9" name="__codelineno-5-9"></a><span class="w"> </span><span class="nx">alert</span><span class="p">.</span><span class="nx">innerHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;&#39;</span>
<a id="__codelineno-5-10" name="__codelineno-5-10"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-5-11" name="__codelineno-5-11"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<ol>
<li>Vous pouvez adapter cette valeur qui correspond au temps d’affichage
de l’information (en millisecondes).</li>
</ol>
<h2 id="confirmation-de-suppression"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 4v2H3V4h3.5l1-1h5l1 1H17M4 19V7h12v12c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2m15-4h2v2h-2v-2m0-8h2v6h-2V7Z"/></svg></span> Confirmation de suppression<a class="headerlink" href="#confirmation-de-suppression" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>La façon la plus simple d’ouvrir une popup de confirmation.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">delete-confirmation.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1">1</a></span>
<span class="normal"><a href="#__codelineno-6-2">2</a></span>
<span class="normal"><a href="#__codelineno-6-3">3</a></span>
<span class="normal"><a href="#__codelineno-6-4">4</a></span>
<span class="normal"><a href="#__codelineno-6-5">5</a></span>
<span class="normal"><a href="#__codelineno-6-6">6</a></span>
<span class="normal"><a href="#__codelineno-6-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">deleteConfirmation</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-2" name="__codelineno-6-2"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">confirm</span><span class="p">(</span><span class="s1">&#39;Are you sure you want to delete this?&#39;</span><span class="p">))</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-3" name="__codelineno-6-3"></a><span class="w"> </span><span class="k">return</span>
<a id="__codelineno-6-4" name="__codelineno-6-4"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-5" name="__codelineno-6-5"></a><span class="w"> </span><span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span>
<a id="__codelineno-6-6" name="__codelineno-6-6"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-7" name="__codelineno-6-7"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="admonition danger">
<p class="admonition-title">Fermeture automatique</p>
<p>Notez qu’à force de recevoir des notifications, les utilisateur·ices
sont promptes à fermer une fenêtre, aussi rouge soit-elle.
Il peut-être pertinent de demander une confirmation qui demande de
saisir quelque chose comme le fait Github lorsqu’on supprime un
dépôt (il faut taper le nom complet du dépôt concerné).</p>
</div>
<h2 id="generer-un-slug"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"/></svg></span> Générer un slug<a class="headerlink" href="#generer-un-slug" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>Pour transformer un titre en français en une portion d’URL par exemple.
Adapté depuis <a href="https://mhagemann.medium.com/the-ultimate-way-to-slugify-a-url-string-in-javascript-b8e4a0d849e1">cet article</a>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">slugify.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-7-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-7-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-7-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-7-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-7-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-7-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-7-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-7-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-7-10">10</a></span>
<span class="normal"><a href="#__codelineno-7-11">11</a></span>
<span class="normal"><a href="#__codelineno-7-12">12</a></span>
<span class="normal"><a href="#__codelineno-7-13">13</a></span>
<span class="normal"><a href="#__codelineno-7-14">14</a></span>
<span class="normal"><a href="#__codelineno-7-15">15</a></span>
<span class="normal"><a href="#__codelineno-7-16">16</a></span>
<span class="normal"><a href="#__codelineno-7-17">17</a></span>
<span class="normal"><a href="#__codelineno-7-18">18</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">slugify</span><span class="p">(</span><span class="nx">str</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-7-2" name="__codelineno-7-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">a</span><span class="w"> </span><span class="o">=</span>
<a id="__codelineno-7-3" name="__codelineno-7-3"></a><span class="w"> </span><span class="s1">&#39;àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;&#39;</span>
<a id="__codelineno-7-4" name="__codelineno-7-4"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">b</span><span class="w"> </span><span class="o">=</span>
<a id="__codelineno-7-5" name="__codelineno-7-5"></a><span class="w"> </span><span class="s1">&#39;aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------&#39;</span>
<a id="__codelineno-7-6" name="__codelineno-7-6"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">p</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">RegExp</span><span class="p">(</span><span class="nx">a</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;|&#39;</span><span class="p">),</span><span class="w"> </span><span class="s1">&#39;g&#39;</span><span class="p">)</span>
<a id="__codelineno-7-7" name="__codelineno-7-7"></a>
<a id="__codelineno-7-8" name="__codelineno-7-8"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">str</span>
<a id="__codelineno-7-9" name="__codelineno-7-9"></a><span class="w"> </span><span class="p">.</span><span class="nx">toString</span><span class="p">()</span>
<a id="__codelineno-7-10" name="__codelineno-7-10"></a><span class="w"> </span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span>
<a id="__codelineno-7-11" name="__codelineno-7-11"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\s+/g</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;-&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">// Replace spaces with -</span>
<a id="__codelineno-7-12" name="__codelineno-7-12"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span><span class="w"> </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">b</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">a</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">c</span><span class="p">)))</span><span class="w"> </span><span class="c1">// Replace special characters</span>
<a id="__codelineno-7-13" name="__codelineno-7-13"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/’/g</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;&#39;&quot;</span><span class="p">)</span><span class="w"> </span><span class="c1">// Turn apostrophes to single quotes</span>
<a id="__codelineno-7-14" name="__codelineno-7-14"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[^a-zA-Z0-9-&#39;]+/g</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">// Remove all non-word characters except single quotes</span>
<a id="__codelineno-7-15" name="__codelineno-7-15"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/--+/g</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;-&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">// Replace multiple - with single -</span>
<a id="__codelineno-7-16" name="__codelineno-7-16"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/^-+/</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">// Trim - from start of text</span>
<a id="__codelineno-7-17" name="__codelineno-7-17"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/-+$/</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">// Trim - from end of text</span>
<a id="__codelineno-7-18" name="__codelineno-7-18"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="un-systeme-de-plugins"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.5 11H19V7a2 2 0 0 0-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1 2.5 2.5 0 0 0 8 3.5V5H4a2 2 0 0 0-2 2v3.8h1.5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7H2V20a2 2 0 0 0 2 2h3.8v-1.5c0-1.5 1.2-2.7 2.7-2.7 1.5 0 2.7 1.2 2.7 2.7V22H17a2 2 0 0 0 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5Z"/></svg></span> Un système de plugins<a class="headerlink" href="#un-systeme-de-plugins" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>Ce fragment est issu de <a href="https://simonwillison.net/2021/Jan/3/weeknotes/">ce qu’à fait Simon Willison</a>
pour Datasette, aidé <a href="https://github.com/simonw/datasette/issues/983#issuecomment-752888552">par Matthew Somerville</a>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">plugins.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-8-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-8-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-8-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-8-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-8-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-8-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-8-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-8-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-8-10">10</a></span>
<span class="normal"><a href="#__codelineno-8-11">11</a></span>
<span class="normal"><a href="#__codelineno-8-12">12</a></span>
<span class="normal"><a href="#__codelineno-8-13">13</a></span>
<span class="normal"><a href="#__codelineno-8-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">datasette</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">datasette</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="p">{}</span>
<a id="__codelineno-8-2" name="__codelineno-8-2"></a><span class="nx">datasette</span><span class="p">.</span><span class="nx">plugins</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-3" name="__codelineno-8-3"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">registry</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{}</span>
<a id="__codelineno-8-4" name="__codelineno-8-4"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-5" name="__codelineno-8-5"></a><span class="w"> </span><span class="nx">register</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">hook</span><span class="p">,</span><span class="w"> </span><span class="nx">fn</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-6" name="__codelineno-8-6"></a><span class="w"> </span><span class="nx">registry</span><span class="p">[</span><span class="nx">hook</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">registry</span><span class="p">[</span><span class="nx">hook</span><span class="p">]</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="p">[]</span>
<a id="__codelineno-8-7" name="__codelineno-8-7"></a><span class="w"> </span><span class="nx">registry</span><span class="p">[</span><span class="nx">hook</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">fn</span><span class="p">)</span>
<a id="__codelineno-8-8" name="__codelineno-8-8"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-8-9" name="__codelineno-8-9"></a><span class="w"> </span><span class="nx">call</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">hook</span><span class="p">,</span><span class="w"> </span><span class="nx">args</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-10" name="__codelineno-8-10"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">results</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">registry</span><span class="p">[</span><span class="nx">hook</span><span class="p">]</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="p">[]).</span><span class="nx">map</span><span class="p">((</span><span class="nx">fn</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">fn</span><span class="p">(</span><span class="nx">args</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="p">{}))</span>
<a id="__codelineno-8-11" name="__codelineno-8-11"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">results</span>
<a id="__codelineno-8-12" name="__codelineno-8-12"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-8-13" name="__codelineno-8-13"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-8-14" name="__codelineno-8-14"></a><span class="p">})()</span>
</code></pre></div></td></tr></table></div>
<p>Il s’utilise ensuite ainsi :</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-9-1">1</a></span>
<span class="normal"><a href="#__codelineno-9-2">2</a></span>
<span class="normal"><a href="#__codelineno-9-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1"></a><span class="nx">datasette</span><span class="p">.</span><span class="nx">plugins</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="s1">&#39;numbers&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">({</span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">a</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">b</span><span class="p">)</span>
<a id="__codelineno-9-2" name="__codelineno-9-2"></a><span class="nx">datasette</span><span class="p">.</span><span class="nx">plugins</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="s1">&#39;numbers&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">o</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">o</span><span class="p">.</span><span class="nx">a</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">o</span><span class="p">.</span><span class="nx">b</span><span class="p">)</span>
<a id="__codelineno-9-3" name="__codelineno-9-3"></a><span class="nx">datasette</span><span class="p">.</span><span class="nx">plugins</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="s1">&#39;numbers&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="nx">a</span><span class="o">:</span><span class="w"> </span><span class="mf">4</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="o">:</span><span class="w"> </span><span class="mf">6</span><span class="p">})</span>
</code></pre></div></td></tr></table></div>
<h2 id="parametres-par-defaut"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2 2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3h2Z"/></svg></span> Paramètres par défaut<a class="headerlink" href="#parametres-par-defaut" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-08</p>
<p>Il est possible de définir des paramètres par défaut en utilisant la syntaxe suivante :</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">parameters.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-10-1">1</a></span>
<span class="normal"><a href="#__codelineno-10-2">2</a></span>
<span class="normal"><a href="#__codelineno-10-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">checkName</span><span class="p">({</span><span class="w"> </span><span class="nx">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;Castor&#39;</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{})</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-10-2" name="__codelineno-10-2"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">({</span><span class="w"> </span><span class="nx">name</span><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-10-3" name="__codelineno-10-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p>Il est aussi possible d’avoir un comportement similaires aux <code class="highlight"><span class="o">**</span><span class="n">kwargs</span></code> en Python grâce au <em>rest parameter</em> :</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">parameters-kwargs.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-11-1">1</a></span>
<span class="normal"><a href="#__codelineno-11-2">2</a></span>
<span class="normal"><a href="#__codelineno-11-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">checkNameWithKwargs</span><span class="p">({</span><span class="w"> </span><span class="nx">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;Pollux&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nx">kwargs</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{})</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-11-2" name="__codelineno-11-2"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">({</span><span class="w"> </span><span class="nx">name</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nx">kwargs</span><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-11-3" name="__codelineno-11-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p>Cela nécessite d’appeler la fonction avec un objet (ce qui pourrait être une bonne pratique ?).</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-12-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1"></a><span class="nx">checkNameWithKwargs</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Télaïre&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">tessiture</span><span class="o">:</span><span class="s1">&#39;soprano&#39;</span><span class="p">})</span>
</code></pre></div></td></tr></table></div>
<h2 id="telecharger-un-fichier-dynamiquement"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7 7-7Z"/></svg></span> Télécharger un fichier dynamiquement<a class="headerlink" href="#telecharger-un-fichier-dynamiquement" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-09</p>
<p>Parfois, on veut pouvoir télécharger un fichier généré dynamiquement en JavaScript, par exemple ici pour transformer un tableau en un export CSV (la récupération des données n’est pas montrée).</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">download-file.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-13-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-13-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-13-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-13-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-13-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-13-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-13-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-13-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-13-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-13-10">10</a></span>
<span class="normal"><a href="#__codelineno-13-11">11</a></span>
<span class="normal"><a href="#__codelineno-13-12">12</a></span>
<span class="normal"><a href="#__codelineno-13-13">13</a></span>
<span class="normal"><a href="#__codelineno-13-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">downloadAsCSV</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-13-2" name="__codelineno-13-2"></a><span class="w"> </span><span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span>
<a id="__codelineno-13-3" name="__codelineno-13-3"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">content</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;foo;bar&#39;</span><span class="w"> </span><span class="c1">// (1)!</span>
<a id="__codelineno-13-4" name="__codelineno-13-4"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;baz_quux&#39;</span>
<a id="__codelineno-13-5" name="__codelineno-13-5"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">filename</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`export_</span><span class="si">${</span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">().</span><span class="nx">toLocaleDateString</span><span class="p">()</span><span class="si">}</span><span class="sb">_</span><span class="si">${</span><span class="nx">name</span><span class="si">}</span><span class="sb">.csv`</span><span class="w"> </span><span class="c1">// (2)!</span>
<a id="__codelineno-13-6" name="__codelineno-13-6"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">csvFile</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Blob</span><span class="p">([</span><span class="nx">content</span><span class="p">],</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;text/csv&#39;</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="c1">// (3)!</span>
<a id="__codelineno-13-7" name="__codelineno-13-7"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">fakeDownloadLink</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">// (4)!</span>
<a id="__codelineno-13-8" name="__codelineno-13-8"></a><span class="w"> </span><span class="nx">fakeDownloadLink</span><span class="p">.</span><span class="nx">download</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">filename</span><span class="w"> </span><span class="c1">// (5)</span>
<a id="__codelineno-13-9" name="__codelineno-13-9"></a><span class="w"> </span><span class="nx">fakeDownloadLink</span><span class="p">.</span><span class="nx">href</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">csvFile</span><span class="p">)</span><span class="w"> </span><span class="c1">// (6)!</span>
<a id="__codelineno-13-10" name="__codelineno-13-10"></a><span class="w"> </span><span class="nx">fakeDownloadLink</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;none&#39;</span>
<a id="__codelineno-13-11" name="__codelineno-13-11"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">fakeDownloadLink</span><span class="p">)</span>
<a id="__codelineno-13-12" name="__codelineno-13-12"></a><span class="w"> </span><span class="nx">fakeDownloadLink</span><span class="p">.</span><span class="nx">click</span><span class="p">()</span><span class="w"> </span><span class="c1">// (7)!</span>
<a id="__codelineno-13-13" name="__codelineno-13-13"></a><span class="w"> </span><span class="nx">fakeDownloadLink</span><span class="p">.</span><span class="nx">remove</span><span class="p">()</span>
<a id="__codelineno-13-14" name="__codelineno-13-14"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<ol>
<li>Le contenu souhaité du fichier à aller récupérer par ailleurs</li>
<li>C’est toujours intéressant d’avoir la date dans des fichiers d’export</li>
<li>Création d’un Blob simulant le fichier</li>
<li>Création du faux lien qui va nous servir à simuler le téléchargement</li>
<li>Utilisation de l’attribut <code>download</code> qui permet de donner un nom au fichier téléchargé</li>
<li>Création d’une URL contenant le contenu du fichier</li>
<li>Simulation du clic avant la suppression de l’élément pour lancer le téléchargement</li>
</ol>
<h2 id="enlever-des-espaces"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 15h2v4h14v-4h2v4c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-4Z"/></svg></span> Enlever des espaces<a class="headerlink" href="#enlever-des-espaces" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-09</p>
<p>Il est très courant de vouloir enlever des espaces et sauts de lignes (depuis un <code>element.textContent</code> par exemple).</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">strip-extra-spaces.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-14-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">stripExtraSpaces</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">str</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\r?\n|\r|\s\s+/g</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">)</span>
</code></pre></div></td></tr></table></div>
<h2 id="avoir-une-methode-range"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m1.39 18.36 1.77-1.76L4.58 18l1.06-1.05-1.42-1.41 1.42-1.42 2.47 2.48 1.06-1.06-2.47-2.48 1.41-1.41 1.42 1.41L10.59 12l-1.42-1.41 1.42-1.42 2.47 2.48 1.06-1.06-2.47-2.48 1.41-1.41 1.41 1.41 1.07-1.06-1.42-1.41 1.42-1.42L18 6.7l1.07-1.06-2.47-2.48 1.76-1.77 4.25 4.25L5.64 22.61l-4.25-4.25Z"/></svg></span> Avoir une méthode range()<a class="headerlink" href="#avoir-une-methode-range" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-11</p>
<p>Un moyen d’avoir une méthode <code>range()</code> qui ait le même comportement qu’en Python, décrite <a href="https://barker.codes/blog/create-a-range-of-numbers-using-the-array-from-method/">en détail par Kieran Barker</a> et <a href="https://gomakethings.com/a-vanilla-javascript-range-method/">adaptée par Chris Ferdinandi</a>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">range.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-15-1">1</a></span>
<span class="normal"><a href="#__codelineno-15-2">2</a></span>
<span class="normal"><a href="#__codelineno-15-3">3</a></span>
<span class="normal"><a href="#__codelineno-15-4">4</a></span>
<span class="normal"><a href="#__codelineno-15-5">5</a></span>
<span class="normal"><a href="#__codelineno-15-6">6</a></span>
<span class="normal"><a href="#__codelineno-15-7">7</a></span>
<span class="normal"><a href="#__codelineno-15-8">8</a></span>
<span class="normal"><a href="#__codelineno-15-9">9</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">range</span><span class="p">(</span><span class="nx">stop</span><span class="p">,</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="nx">step</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">1</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-15-2" name="__codelineno-15-2"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nb">Array</span><span class="p">.</span><span class="kr">from</span><span class="p">(</span>
<a id="__codelineno-15-3" name="__codelineno-15-3"></a><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">length</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">stop</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">start</span><span class="p">)</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="nx">step</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-15-4" name="__codelineno-15-4"></a><span class="w"> </span><span class="p">(</span><span class="nx">_</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">step</span>
<a id="__codelineno-15-5" name="__codelineno-15-5"></a><span class="w"> </span><span class="p">)</span>
<a id="__codelineno-15-6" name="__codelineno-15-6"></a><span class="p">}</span>
<a id="__codelineno-15-7" name="__codelineno-15-7"></a><span class="c1">// range(5) =&gt; [ 1, 2, 3, 4, 5 ]</span>
<a id="__codelineno-15-8" name="__codelineno-15-8"></a><span class="c1">// range(10, 8) =&gt; [ 8, 9, 10 ]</span>
<a id="__codelineno-15-9" name="__codelineno-15-9"></a><span class="c1">// range(10, 1, 3) =&gt; [ 1, 4, 7, 10 ]</span>
</code></pre></div></td></tr></table></div>
<h2 id="avoir-une-methode-zip"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.9 21.47a6.09 6.09 0 0 1-1.72-6.63l2.13-5.93a.765.765 0 0 1 1.38-.13l.31.55c.24.39.29.87.14 1.3l-.98 2.74.43.38L15.55 7c.35-.4.95-.44 1.36-.09.39.35.43.96.09 1.35l-4.45 5.03.58.51 5.45-6.18c.35-.4.96-.44 1.35-.09.4.35.44.97.07 1.36l-5.44 6.18.58.51 4.69-5.32c.35-.4.96-.44 1.35-.09s.44.96.09 1.33l-4.69 5.34.57.51 3.17-3.59c.35-.4.96-.44 1.36-.09s.43.96.08 1.33l-5.2 5.92a6.13 6.13 0 0 1-8.66.55m3.69-12.25L14.43 6c.24-.27.54-.5.87-.63l.38-.78a.947.947 0 0 0-.44-1.28.964.964 0 0 0-1.28.44l-2.51 5.14c.05.11.11.22.14.33M11 8v.05l2.78-5.67a.965.965 0 0 0-.45-1.28.951.951 0 0 0-1.28.44L9.41 6.95c.65.11 1.22.48 1.59 1.05m-6.23 6.33L6.9 8.4c.27-.75.9-1.26 1.65-1.43l2.14-4.39a.961.961 0 0 0-.44-1.28.952.952 0 0 0-1.28.44L5 9.84l-.5-.25.21-2.91c.04-.45-.14-.9-.46-1.22L3.79 5c-.47-.43-1.24-.14-1.29.5L2 11.79c-.13 2.04.77 3.99 2.35 5.21-.02-.88.11-1.79.42-2.67Z"/></svg></span> Avoir une méthode zip()<a class="headerlink" href="#avoir-une-methode-zip" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-11</p>
<p>Un vieux truc que j’avais <a href="https://stackoverflow.com/a/10284006">récupéré sur StackOverflow</a> qui est quasiment un équivalent de la méthode <code>zip()</code> en Python.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">zip.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-16-1">1</a></span>
<span class="normal"><a href="#__codelineno-16-2">2</a></span>
<span class="normal"><a href="#__codelineno-16-3">3</a></span>
<span class="normal"><a href="#__codelineno-16-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">zip</span><span class="p">(</span><span class="nx">rows</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-16-2" name="__codelineno-16-2"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">rows</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">map</span><span class="p">((</span><span class="nx">_</span><span class="p">,</span><span class="w"> </span><span class="nx">index</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">rows</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">row</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">row</span><span class="p">[</span><span class="nx">index</span><span class="p">]))</span>
<a id="__codelineno-16-3" name="__codelineno-16-3"></a><span class="p">}</span>
<a id="__codelineno-16-4" name="__codelineno-16-4"></a><span class="c1">// zip([[&#39;foo&#39;, &#39;bar&#39;], [1, 2]]) =&gt; [[&#39;foo&#39;, 1], [&#39;bar&#39;, 2]]</span>
</code></pre></div></td></tr></table></div>
<h2 id="utiliser-des-loggers-personnalises"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.197 10a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm-2.382 4a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm-1.581 4a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Z"/><path d="M4.125 0h15.75a4.11 4.11 0 0 1 2.92 1.205A4.11 4.11 0 0 1 24 4.125c0 1.384-.476 2.794-1.128 4.16-.652 1.365-1.515 2.757-2.352 4.104l-.008.013c-.849 1.368-1.669 2.691-2.28 3.97-.614 1.283-.982 2.45-.982 3.503a2.625 2.625 0 1 0 4.083-2.183.75.75 0 1 1 .834-1.247A4.126 4.126 0 0 1 19.875 24H4.5a4.125 4.125 0 0 1-4.125-4.125c0-2.234 1.258-4.656 2.59-6.902.348-.586.702-1.162 1.05-1.728.8-1.304 1.567-2.553 2.144-3.738H3.39c-.823 0-1.886-.193-2.567-1.035A3.647 3.647 0 0 1 0 4.125 4.125 4.125 0 0 1 4.125 0ZM15.75 19.875c0-1.38.476-2.786 1.128-4.15.649-1.358 1.509-2.743 2.343-4.086l.017-.028c.849-1.367 1.669-2.692 2.28-3.972.614-1.285.982-2.457.982-3.514A2.615 2.615 0 0 0 19.875 1.5a2.625 2.625 0 0 0-2.625 2.625c0 .865.421 1.509 1.167 2.009A.75.75 0 0 1 18 7.507H7.812c-.65 1.483-1.624 3.069-2.577 4.619-.334.544-.666 1.083-.98 1.612-1.355 2.287-2.38 4.371-2.38 6.137A2.625 2.625 0 0 0 4.5 22.5h12.193a4.108 4.108 0 0 1-.943-2.625ZM1.5 4.125c-.01.511.163 1.008.487 1.403.254.313.74.479 1.402.479h12.86a3.648 3.648 0 0 1-.499-1.882 4.11 4.11 0 0 1 .943-2.625H4.125A2.625 2.625 0 0 0 1.5 4.125Z"/></svg></span> Utiliser des loggers personnalisés<a class="headerlink" href="#utiliser-des-loggers-personnalises" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-11</p>
<p>Il est possible de définir ses propres <em>loggers</em> pour s’y retrouver plus facilement dans la console.
C’est notamment utile si vous faites une lib ou un module réutilisable.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">logger.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-17-1">1</a></span>
<span class="normal"><a href="#__codelineno-17-2">2</a></span>
<span class="normal"><a href="#__codelineno-17-3">3</a></span>
<span class="normal"><a href="#__codelineno-17-4">4</a></span>
<span class="normal"><a href="#__codelineno-17-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-17-1" name="__codelineno-17-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">logger</span><span class="p">(</span><span class="nx">scope</span><span class="p">,</span><span class="w"> </span><span class="nx">level</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;log&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;green&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-17-2" name="__codelineno-17-2"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-17-3" name="__codelineno-17-3"></a><span class="w"> </span><span class="nx">console</span><span class="p">[</span><span class="nx">level</span><span class="p">](</span><span class="s1">&#39;%c%s&#39;</span><span class="p">,</span><span class="w"> </span><span class="sb">`color:</span><span class="si">${</span><span class="nx">color</span><span class="si">}</span><span class="sb">`</span><span class="p">,</span><span class="w"> </span><span class="nx">scope</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nx">args</span><span class="p">)</span>
<a id="__codelineno-17-4" name="__codelineno-17-4"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-17-5" name="__codelineno-17-5"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p>Cela peut s’utiliser ensuite ainsi (très adaptable en fonction de votre sensibilité) :</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-18-1">1</a></span>
<span class="normal"><a href="#__codelineno-18-2">2</a></span>
<span class="normal"><a href="#__codelineno-18-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-18-1" name="__codelineno-18-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">log</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">logger</span><span class="p">(</span><span class="s1">&#39;myapp&#39;</span><span class="p">)</span>
<a id="__codelineno-18-2" name="__codelineno-18-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">logerr</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">logger</span><span class="p">(</span><span class="s1">&#39;myapp&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;error&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;red&#39;</span><span class="p">)</span>
<a id="__codelineno-18-3" name="__codelineno-18-3"></a><span class="kd">const</span><span class="w"> </span><span class="nx">logdev</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">logger</span><span class="p">(</span><span class="s1">&#39;myapp&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;debug&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;blue&#39;</span><span class="p">)</span>
</code></pre></div></td></tr></table></div>
<p>Et puis dans votre code enfin :</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-19-1">1</a></span>
<span class="normal"><a href="#__codelineno-19-2">2</a></span>
<span class="normal"><a href="#__codelineno-19-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-19-1" name="__codelineno-19-1"></a><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;page initialized&#39;</span><span class="p">)</span>
<a id="__codelineno-19-2" name="__codelineno-19-2"></a><span class="nx">logerr</span><span class="p">(</span><span class="s1">&#39;oops&#39;</span><span class="p">)</span>
<a id="__codelineno-19-3" name="__codelineno-19-3"></a><span class="nx">logdev</span><span class="p">(</span><span class="s1">&#39;wtf&#39;</span><span class="p">)</span>
</code></pre></div></td></tr></table></div>
<p>Je vous laisse vous amuser dans la console :).</p>
<h2 id="du-camel-au-kebab"><img alt="🐫" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f42b.svg" title=":camel:"> Du camel au kebab<a class="headerlink" href="#du-camel-au-kebab" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-11</p>
<p>Toute petite fonction mais bien pratique pour convertir des noms de variables en <code>data-attributes</code> par exemple !</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">camel-to-kebab.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-20-1">1</a></span>
<span class="normal"><a href="#__codelineno-20-2">2</a></span>
<span class="normal"><a href="#__codelineno-20-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-20-1" name="__codelineno-20-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">camelToKebab</span><span class="p">(</span><span class="nx">s</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-20-2" name="__codelineno-20-2"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[A-Z]/g</span><span class="p">,</span><span class="w"> </span><span class="p">(</span><span class="nx">s</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="s1">&#39;-&#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">())</span>
<a id="__codelineno-20-3" name="__codelineno-20-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="raccourcis-pour-les-attributs"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 4a8 8 0 0 1 8 8 8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8m0 2a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 6-6 6 6 0 0 0-6-6m-1 2h1.5v3.78l2.33 2.33-1.06 1.06L14 12.4V8M2 18a1 1 0 0 1-1-1 1 1 0 0 1 1-1h3.83c.31.71.71 1.38 1.17 2H2m1-5a1 1 0 0 1-1-1 1 1 0 0 1 1-1h2.05L5 12l.05 1H3m1-5a1 1 0 0 1-1-1 1 1 0 0 1 1-1h3c-.46.62-.86 1.29-1.17 2H4Z"/></svg></span> Raccourcis pour les attributs<a class="headerlink" href="#raccourcis-pour-les-attributs" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-11</p>
<p>Et là vous allez comprendre pourquoi la précédente fonction était utile.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">attributes.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-21-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-21-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-21-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-21-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-21-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-21-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-21-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-21-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-21-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-21-10">10</a></span>
<span class="normal"><a href="#__codelineno-21-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-21-1" name="__codelineno-21-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">attr</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span><span class="w"> </span><span class="nx">name</span><span class="p">,</span><span class="w"> </span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">undefined</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-21-2" name="__codelineno-21-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">curValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">el</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span>
<a id="__codelineno-21-3" name="__codelineno-21-3"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">name</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;object&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-21-4" name="__codelineno-21-4"></a><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">const</span><span class="w"> </span><span class="nx">at</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="nx">name</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-21-5" name="__codelineno-21-5"></a><span class="w"> </span><span class="nx">el</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="nx">camelToKebab</span><span class="p">(</span><span class="nx">at</span><span class="p">),</span><span class="w"> </span><span class="nx">name</span><span class="p">[</span><span class="nx">at</span><span class="p">])</span><span class="w"> </span><span class="c1">// (1)!</span>
<a id="__codelineno-21-6" name="__codelineno-21-6"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-21-7" name="__codelineno-21-7"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span>
<a id="__codelineno-21-8" name="__codelineno-21-8"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">value</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="kc">undefined</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">el</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span>
<a id="__codelineno-21-9" name="__codelineno-21-9"></a><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">value</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="kc">null</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">el</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="nx">name</span><span class="p">),</span><span class="w"> </span><span class="nx">curValue</span>
<a id="__codelineno-21-10" name="__codelineno-21-10"></a><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">el</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span><span class="w"> </span><span class="nx">value</span><span class="p">),</span><span class="w"> </span><span class="nx">value</span>
<a id="__codelineno-21-11" name="__codelineno-21-11"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<ol>
<li>Nécessite la fonction <code>camelToKebab()</code> définie juste au-dessus.</li>
</ol>
<p>Cela s’utilise ainsi :</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-22-1">1</a></span>
<span class="normal"><a href="#__codelineno-22-2">2</a></span>
<span class="normal"><a href="#__codelineno-22-3">3</a></span>
<span class="normal"><a href="#__codelineno-22-4">4</a></span>
<span class="normal"><a href="#__codelineno-22-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-22-1" name="__codelineno-22-1"></a><span class="nx">attr</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;foo&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">// récupère l’attribut `foo` de `el`</span>
<a id="__codelineno-22-2" name="__codelineno-22-2"></a><span class="nx">attr</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;bar&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;baz&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">// l’attribut `bar` passe à `baz`</span>
<a id="__codelineno-22-3" name="__codelineno-22-3"></a><span class="nx">attr</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;quux&#39;</span><span class="p">,</span><span class="w"> </span><span class="kc">null</span><span class="p">)</span><span class="w"> </span><span class="c1">// retrait de l’attribut `quux`</span>
<a id="__codelineno-22-4" name="__codelineno-22-4"></a><span class="nx">attr</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="nx">dataFoo</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;valueBar&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">dataBaz</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;valueQuux&#39;</span><span class="w"> </span><span class="p">])</span>
<a id="__codelineno-22-5" name="__codelineno-22-5"></a><span class="c1">// set l’attribut `data-foo` à `valueBar` et `data-baz` à `valueQuux`</span>
</code></pre></div></td></tr></table></div>
<h2 id="chargement-lorsque-le-dom-est-pret"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2.03v2.02c4.39.54 7.5 4.53 6.96 8.92-.46 3.64-3.32 6.53-6.96 6.96v2c5.5-.55 9.5-5.43 8.95-10.93-.45-4.75-4.22-8.5-8.95-8.97m-2 .03c-1.95.19-3.81.94-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68v-2M4.26 5.67A9.885 9.885 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9L4.26 5.67M15.5 8.5l-4.88 4.88-2.12-2.12-1.06 1.06 3.18 3.18 5.94-5.94L15.5 8.5M2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8.002 8.002 0 0 1 4.06 13h-2m5.04 5.37-1.43 1.37A9.994 9.994 0 0 0 11 22v-2a8.002 8.002 0 0 1-3.9-1.63Z"/></svg></span> Chargement lorsque le DOM est prêt<a class="headerlink" href="#chargement-lorsque-le-dom-est-pret" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2022-11</p>
<p>Il y pas mal de façon de le faire mais ça revient un peu toujours au même.
J’aime bien que ce soit explicite et que ça prenne soin de retirer l’écouteur de l’évènement à la fin.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">dom-ready.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-23-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-23-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-23-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-23-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-23-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-23-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-23-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-23-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-23-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-23-10">10</a></span>
<span class="normal"><a href="#__codelineno-23-11">11</a></span>
<span class="normal"><a href="#__codelineno-23-12">12</a></span>
<span class="normal"><a href="#__codelineno-23-13">13</a></span>
<span class="normal"><a href="#__codelineno-23-14">14</a></span>
<span class="normal"><a href="#__codelineno-23-15">15</a></span>
<span class="normal"><a href="#__codelineno-23-16">16</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-23-1" name="__codelineno-23-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">onload</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-23-2" name="__codelineno-23-2"></a><span class="w"> </span><span class="c1">// An example of what you might want to do:</span>
<a id="__codelineno-23-3" name="__codelineno-23-3"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">root</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span>
<a id="__codelineno-23-4" name="__codelineno-23-4"></a><span class="w"> </span><span class="nx">root</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="s1">&#39;no-js&#39;</span><span class="p">)</span>
<a id="__codelineno-23-5" name="__codelineno-23-5"></a>
<a id="__codelineno-23-6" name="__codelineno-23-6"></a><span class="w"> </span><span class="c1">// Do something!</span>
<a id="__codelineno-23-7" name="__codelineno-23-7"></a>
<a id="__codelineno-23-8" name="__codelineno-23-8"></a><span class="w"> </span><span class="c1">// Clean up</span>
<a id="__codelineno-23-9" name="__codelineno-23-9"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;DOMContentLoaded&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">onload</span><span class="p">)</span>
<a id="__codelineno-23-10" name="__codelineno-23-10"></a><span class="p">}</span>
<a id="__codelineno-23-11" name="__codelineno-23-11"></a>
<a id="__codelineno-23-12" name="__codelineno-23-12"></a><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">readyState</span><span class="w"> </span><span class="o">!=</span><span class="w"> </span><span class="s1">&#39;loading&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-23-13" name="__codelineno-23-13"></a><span class="w"> </span><span class="nx">onload</span><span class="p">()</span>
<a id="__codelineno-23-14" name="__codelineno-23-14"></a><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-23-15" name="__codelineno-23-15"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;DOMContentLoaded&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">onload</span><span class="p">)</span>
<a id="__codelineno-23-16" name="__codelineno-23-16"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="stocker-des-informations-dans-lurl"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.368 1.01a.75.75 0 0 1 .623.859L6.57 4.5h3.98l.46-2.868a.75.75 0 0 1 1.48.237L12.07 4.5h2.18a.75.75 0 0 1 0 1.5h-2.42l-.64 4h2.56a.75.75 0 0 1 0 1.5h-2.8l-.46 2.869a.75.75 0 0 1-1.48-.237l.42-2.632H5.45l-.46 2.869a.75.75 0 0 1-1.48-.237l.42-2.632H1.75a.75.75 0 0 1 0-1.5h2.42l.64-4H2.25a.75.75 0 0 1 0-1.5h2.8l.46-2.868a.75.75 0 0 1 .858-.622ZM9.67 10l.64-4H6.33l-.64 4Z"/></svg></span> Stocker des informations dans l’URL<a class="headerlink" href="#stocker-des-informations-dans-lurl" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2023-01</p>
<p>Une façon de stocker des données ou un état dans un hash d’URL <a href="https://www.scottantipa.com/store-app-state-in-urls">partagée par Scott Antipa</a>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">store-in-url.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-24-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-24-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-24-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-24-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-24-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-24-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-24-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-24-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-24-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-24-10">10</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-24-1" name="__codelineno-24-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">stateString</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">appState</span><span class="p">)</span><span class="w"> </span><span class="c1">// appState is a json object</span>
<a id="__codelineno-24-2" name="__codelineno-24-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">compressed</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">compress</span><span class="p">(</span><span class="nx">stateString</span><span class="p">)</span>
<a id="__codelineno-24-3" name="__codelineno-24-3"></a><span class="kd">const</span><span class="w"> </span><span class="nx">encoded</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Base64</span><span class="p">.</span><span class="nx">encode</span><span class="p">(</span><span class="nx">compressed</span><span class="p">)</span>
<a id="__codelineno-24-4" name="__codelineno-24-4"></a><span class="c1">// Push that `encoded` string to the url</span>
<a id="__codelineno-24-5" name="__codelineno-24-5"></a><span class="c1">// ... Later, on page load or on undo/redo we read the url and</span>
<a id="__codelineno-24-6" name="__codelineno-24-6"></a><span class="c1">// do the following</span>
<a id="__codelineno-24-7" name="__codelineno-24-7"></a><span class="kd">const</span><span class="w"> </span><span class="nx">decoded</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Base64</span><span class="p">.</span><span class="nx">decode</span><span class="p">(</span><span class="nx">encoded</span><span class="p">)</span><span class="w"> </span><span class="c1">// same encoded as above, but read from url</span>
<a id="__codelineno-24-8" name="__codelineno-24-8"></a><span class="kd">const</span><span class="w"> </span><span class="nx">uncompressed</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">uncompress</span><span class="p">(</span><span class="nx">decoded</span><span class="p">)</span>
<a id="__codelineno-24-9" name="__codelineno-24-9"></a><span class="kd">const</span><span class="w"> </span><span class="nx">newState</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">uncompressed</span><span class="p">)</span>
<a id="__codelineno-24-10" name="__codelineno-24-10"></a><span class="c1">// Now load your application with the newState</span>
</code></pre></div></td></tr></table></div>
<p>Il faut par contre une bibliothèque de dé·compression en complément, comme <a href="https://github.com/nodeca/pako">pako</a> (la partie compress/uncompress).</p>
<h2 id="generer-des-chemins-relatifs-pour-des-fichiers-statiques-de-modules"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.94 3.045a.75.75 0 0 0-1.38-.59l-4.5 10.5a.75.75 0 1 0 1.38.59l4.5-10.5ZM5 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/></svg></span> Générer des chemins relatifs pour des fichiers statiques de modules<a class="headerlink" href="#generer-des-chemins-relatifs-pour-des-fichiers-statiques-de-modules" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2023-01</p>
<p>Découvert via <a href="https://modern-web.dev/guides/going-buildless/es-modules/#referencing-reusable-assets-with-importmetaurl">Going Buildless</a> de Modern Web.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">modules-relative-paths.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-25-1">1</a></span>
<span class="normal"><a href="#__codelineno-25-2">2</a></span>
<span class="normal"><a href="#__codelineno-25-3">3</a></span>
<span class="normal"><a href="#__codelineno-25-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-25-1" name="__codelineno-25-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">imgSrc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">URL</span><span class="p">(</span><span class="s1">&#39;./asset.webp&#39;</span><span class="p">,</span><span class="w"> </span><span class="k">import</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">url</span><span class="p">)</span>
<a id="__codelineno-25-2" name="__codelineno-25-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">image</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;img&#39;</span><span class="p">)</span>
<a id="__codelineno-25-3" name="__codelineno-25-3"></a><span class="nx">image</span><span class="p">.</span><span class="nx">src</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">imgSrc</span><span class="p">.</span><span class="nx">href</span>
<a id="__codelineno-25-4" name="__codelineno-25-4"></a><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">image</span><span class="p">)</span>
</code></pre></div></td></tr></table></div>
<p>L’utilisation de la valeur un peu magique de <code class="highlight"><span class="k">import</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">url</span></code> va permettre de générer une URL relative au fichier <abbr title="JavaScript">JS</abbr> concerné, ce qui permet de garder les fichiers statiques proches du code.
Intéressant pour une approche composants/modulaire.</p>
<h2 id="echapper-le-contenu-de-variables-au-rendu"><img alt="🧷" class="twemoji" src="../https:/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f9f7.svg" title=":safety_pin:"> Échapper le contenu de variables au rendu<a class="headerlink" href="#echapper-le-contenu-de-variables-au-rendu" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2023-01</p>
<p>Découvert en analysant le code d’<a href="https://github.com/simonw/datasette-search-all/blob/5b5f1926d7634ae3ed39f7eaf3fa74325e5d842b/datasette_search_all/templates/search_all.html#L73-L106">un plugin datasette</a>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">autoescape.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-26-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-26-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-26-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-26-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-26-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-26-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-26-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-26-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-26-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-26-10">10</a></span>
<span class="normal"><a href="#__codelineno-26-11">11</a></span>
<span class="normal"><a href="#__codelineno-26-12">12</a></span>
<span class="normal"><a href="#__codelineno-26-13">13</a></span>
<span class="normal"><a href="#__codelineno-26-14">14</a></span>
<span class="normal"><a href="#__codelineno-26-15">15</a></span>
<span class="normal"><a href="#__codelineno-26-16">16</a></span>
<span class="normal"><a href="#__codelineno-26-17">17</a></span>
<span class="normal"><a href="#__codelineno-26-18">18</a></span>
<span class="normal"><a href="#__codelineno-26-19">19</a></span>
<span class="normal"><a href="#__codelineno-26-20">20</a></span>
<span class="normal"><a href="#__codelineno-26-21">21</a></span>
<span class="normal"><a href="#__codelineno-26-22">22</a></span>
<span class="normal"><a href="#__codelineno-26-23">23</a></span>
<span class="normal"><a href="#__codelineno-26-24">24</a></span>
<span class="normal"><a href="#__codelineno-26-25">25</a></span>
<span class="normal"><a href="#__codelineno-26-26">26</a></span>
<span class="normal"><a href="#__codelineno-26-27">27</a></span>
<span class="normal"><a href="#__codelineno-26-28">28</a></span>
<span class="normal"><a href="#__codelineno-26-29">29</a></span>
<span class="normal"><a href="#__codelineno-26-30">30</a></span>
<span class="normal"><a href="#__codelineno-26-31">31</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-26-1" name="__codelineno-26-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">htmlEscape</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-26-2" name="__codelineno-26-2"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">html</span>
<a id="__codelineno-26-3" name="__codelineno-26-3"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&amp;/g</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;&amp;amp;&#39;</span><span class="p">)</span>
<a id="__codelineno-26-4" name="__codelineno-26-4"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&gt;/g</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;&amp;gt;&#39;</span><span class="p">)</span>
<a id="__codelineno-26-5" name="__codelineno-26-5"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&lt;/g</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;&amp;lt;&#39;</span><span class="p">)</span>
<a id="__codelineno-26-6" name="__codelineno-26-6"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&quot;/g</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;&amp;quot;&#39;</span><span class="p">)</span>
<a id="__codelineno-26-7" name="__codelineno-26-7"></a><span class="w"> </span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&#39;/g</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;&amp;#039;&#39;</span><span class="p">)</span>
<a id="__codelineno-26-8" name="__codelineno-26-8"></a><span class="p">}</span>
<a id="__codelineno-26-9" name="__codelineno-26-9"></a>
<a id="__codelineno-26-10" name="__codelineno-26-10"></a><span class="kd">class</span><span class="w"> </span><span class="nx">Safe</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nb">String</span><span class="w"> </span><span class="p">{}</span>
<a id="__codelineno-26-11" name="__codelineno-26-11"></a>
<a id="__codelineno-26-12" name="__codelineno-26-12"></a><span class="kd">function</span><span class="w"> </span><span class="nx">safe</span><span class="p">(</span><span class="nx">s</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-26-13" name="__codelineno-26-13"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">s</span><span class="w"> </span><span class="ow">instanceof</span><span class="w"> </span><span class="nx">Safe</span><span class="p">))</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-26-14" name="__codelineno-26-14"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Safe</span><span class="p">(</span><span class="nx">s</span><span class="p">)</span>
<a id="__codelineno-26-15" name="__codelineno-26-15"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-26-16" name="__codelineno-26-16"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">s</span>
<a id="__codelineno-26-17" name="__codelineno-26-17"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-26-18" name="__codelineno-26-18"></a><span class="p">}</span>
<a id="__codelineno-26-19" name="__codelineno-26-19"></a>
<a id="__codelineno-26-20" name="__codelineno-26-20"></a><span class="kd">const</span><span class="w"> </span><span class="nx">autoescape</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">fragments</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nx">inserts</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span>
<a id="__codelineno-26-21" name="__codelineno-26-21"></a><span class="w"> </span><span class="nx">safe</span><span class="p">(</span>
<a id="__codelineno-26-22" name="__codelineno-26-22"></a><span class="w"> </span><span class="nx">fragments</span>
<a id="__codelineno-26-23" name="__codelineno-26-23"></a><span class="w"> </span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">fragment</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-26-24" name="__codelineno-26-24"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">insert</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">inserts</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s1">&#39;&#39;</span>
<a id="__codelineno-26-25" name="__codelineno-26-25"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">insert</span><span class="w"> </span><span class="ow">instanceof</span><span class="w"> </span><span class="nx">Safe</span><span class="p">))</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-26-26" name="__codelineno-26-26"></a><span class="w"> </span><span class="nx">insert</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">htmlEscape</span><span class="p">(</span><span class="nx">insert</span><span class="p">.</span><span class="nx">toString</span><span class="p">())</span>
<a id="__codelineno-26-27" name="__codelineno-26-27"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-26-28" name="__codelineno-26-28"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">fragment</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">insert</span>
<a id="__codelineno-26-29" name="__codelineno-26-29"></a><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-26-30" name="__codelineno-26-30"></a><span class="w"> </span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span>
<a id="__codelineno-26-31" name="__codelineno-26-31"></a><span class="w"> </span><span class="p">)</span>
</code></pre></div></td></tr></table></div>
<p>Ça s’utilise ensuite ainsi (en imaginant que <code>meh</code> ait été saisi par l’utilisateur·ice) :</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-27-1">1</a></span>
<span class="normal"><a href="#__codelineno-27-2">2</a></span>
<span class="normal"><a href="#__codelineno-27-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-27-1" name="__codelineno-27-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">meh</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;&lt;script&gt;&quot;</span>
<a id="__codelineno-27-2" name="__codelineno-27-2"></a><span class="nx">autoescape</span><span class="sb">`foo </span><span class="si">${</span><span class="nx">meh</span><span class="si">}</span><span class="sb"> bar`</span>
<a id="__codelineno-27-3" name="__codelineno-27-3"></a><span class="c1">// =&gt; String { &quot;foo &amp;lt;script&amp;gt; bar&quot; }</span>
</code></pre></div></td></tr></table></div>
<h2 id="retirer-les-tags-html-dune-chaine"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m14.6 16.6 4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4Z"/></svg></span> Retirer les tags <abbr title="Hyper Text Markup Language">HTML</abbr> d’une chaîne<a class="headerlink" href="#retirer-les-tags-html-dune-chaine" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2023-11</p>
<p>Récupéré depuis <a href="https://phuoc.ng/collection/html-dom/strip-html-from-a-given-text/">cet article</a> (ce site contient beaucoup d’astuces du genre !).</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">striptags-template.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-28-1">1</a></span>
<span class="normal"><a href="#__codelineno-28-2">2</a></span>
<span class="normal"><a href="#__codelineno-28-3">3</a></span>
<span class="normal"><a href="#__codelineno-28-4">4</a></span>
<span class="normal"><a href="#__codelineno-28-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-28-1" name="__codelineno-28-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">stripTags</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-28-2" name="__codelineno-28-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">template</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;template&#39;</span><span class="p">)</span>
<a id="__codelineno-28-3" name="__codelineno-28-3"></a><span class="w"> </span><span class="nx">template</span><span class="p">.</span><span class="nx">innerHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">html</span>
<a id="__codelineno-28-4" name="__codelineno-28-4"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">template</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">textContent</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s1">&#39;&#39;</span>
<a id="__codelineno-28-5" name="__codelineno-28-5"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p>On crée un élément <code class="highlight">template</code> (vs. <code class="highlight">div</code>), ce qui évite d’exécuter les potentiels scripts inconvenants qui pourraient se trouver dans le <abbr title="Hyper Text Markup Language">HTML</abbr> transmis. Simple et efficace.</p>
<p>La version consistant à utiliser <code>DOMParser</code> est intéressante aussi :</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">striptags-domparser.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-29-1">1</a></span>
<span class="normal"><a href="#__codelineno-29-2">2</a></span>
<span class="normal"><a href="#__codelineno-29-3">3</a></span>
<span class="normal"><a href="#__codelineno-29-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-29-1" name="__codelineno-29-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">stripTags</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-29-2" name="__codelineno-29-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">doc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">DOMParser</span><span class="p">().</span><span class="nx">parseFromString</span><span class="p">(</span><span class="nx">html</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;text/html&#39;</span><span class="p">)</span>
<a id="__codelineno-29-3" name="__codelineno-29-3"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">textContent</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s1">&#39;&#39;</span>
<a id="__codelineno-29-4" name="__codelineno-29-4"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="pre-remplir-un-formulaire-avec-les-parametres-de-lurl"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.803 14.817a.966.966 0 1 1 1.933 0 .966.966 0 0 1-1.933 0m2.736 0c0-.196-.053-.376-.112-.553-.234-.702-.876-1.216-1.657-1.216-.125 0-.235.046-.353.07C.615 13.286 0 13.965 0 14.817a1.77 1.77 0 0 0 3.539 0m-1.77-7.149a.967.967 0 1 1 0 1.934.967.967 0 0 1 0-1.934m0 2.736a1.77 1.77 0 0 0 1.77-1.77c0-.195-.053-.376-.112-.552-.234-.702-.877-1.217-1.657-1.217-.125 0-.235.047-.353.072C.615 7.104 0 7.782 0 8.634c0 .977.792 1.77 1.77 1.77M14.99 4.71a.966.966 0 0 1-.966-.967.966.966 0 0 1 .967-.966.966.966 0 1 1 0 1.933m-9.6 16.513a.967.967 0 0 1 0-1.933.966.966 0 0 1 .966.967.966.966 0 0 1-.966.966m9.6-19.249c-.978 0-1.77.792-1.77 1.77 0 .208.053.402.119.588L5.039 18.558c-.803.168-1.418.846-1.418 1.699a1.77 1.77 0 0 0 3.539 0 1.74 1.74 0 0 0-.111-.553l8.343-14.273c.778-.186 1.368-.853 1.368-1.688a1.77 1.77 0 0 0-1.77-1.769m7.24 2.736a.966.966 0 0 1-.966-.967.966.966 0 0 1 .967-.966.966.966 0 1 1 0 1.933m-9.6 16.513a.966.966 0 0 1-.966-.967.966.966 0 0 1 .966-.966.966.966 0 0 1 0 1.933m9.6-19.249a1.77 1.77 0 0 0-1.77 1.77c0 .208.053.402.119.588l-8.301 14.226c-.802.168-1.417.846-1.417 1.699a1.77 1.77 0 0 0 3.538 0c0-.197-.053-.376-.111-.553l8.343-14.273C23.409 5.245 24 4.578 24 3.743a1.77 1.77 0 0 0-1.77-1.769"/></svg></span> Pré-remplir un formulaire avec les paramètres de l’URL<a class="headerlink" href="#pre-remplir-un-formulaire-avec-les-parametres-de-lurl" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2023-04</p>
<p>Il est souvent pratique de pouvoir faire un lien vers un formulaire en ayant pré-remplis certains champs <code>/mon-form/?author=Bob&amp;accept=1</code>.</p>
<p>La solution suivante pré-suppose que chaque input ait un attribut <code>name</code>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">prefill-form.js</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-30-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-30-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-30-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-30-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-30-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-30-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-30-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-30-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-30-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-30-10">10</a></span>
<span class="normal"><a href="#__codelineno-30-11">11</a></span>
<span class="normal"><a href="#__codelineno-30-12">12</a></span>
<span class="normal"><a href="#__codelineno-30-13">13</a></span>
<span class="normal"><a href="#__codelineno-30-14">14</a></span>
<span class="normal"><a href="#__codelineno-30-15">15</a></span>
<span class="normal"><a href="#__codelineno-30-16">16</a></span>
<span class="normal"><a href="#__codelineno-30-17">17</a></span>
<span class="normal"><a href="#__codelineno-30-18">18</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-30-1" name="__codelineno-30-1"></a><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="nx">value</span><span class="p">]</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">URL</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">).</span><span class="nx">searchParams</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-2" name="__codelineno-30-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">elements</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByName</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span>
<a id="__codelineno-30-3" name="__codelineno-30-3"></a><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">const</span><span class="w"> </span><span class="nx">element</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="nx">elements</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-4" name="__codelineno-30-4"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">([</span><span class="s1">&#39;checkbox&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;radio&#39;</span><span class="p">].</span><span class="nx">includes</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">type</span><span class="p">))</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-5" name="__codelineno-30-5"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">value</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="nx">value</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-6" name="__codelineno-30-6"></a><span class="w"> </span><span class="nx">element</span><span class="p">.</span><span class="nx">checked</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span>
<a id="__codelineno-30-7" name="__codelineno-30-7"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-30-8" name="__codelineno-30-8"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">multiple</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-9" name="__codelineno-30-9"></a><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">const</span><span class="w"> </span><span class="nx">option</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="nx">element</span><span class="p">.</span><span class="nx">options</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-10" name="__codelineno-30-10"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">option</span><span class="p">.</span><span class="nx">value</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="nx">value</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-11" name="__codelineno-30-11"></a><span class="w"> </span><span class="nx">option</span><span class="p">.</span><span class="nx">selected</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span>
<a id="__codelineno-30-12" name="__codelineno-30-12"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-30-13" name="__codelineno-30-13"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-30-14" name="__codelineno-30-14"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-15" name="__codelineno-30-15"></a><span class="w"> </span><span class="nx">element</span><span class="p">.</span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">value</span>
<a id="__codelineno-30-16" name="__codelineno-30-16"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-30-17" name="__codelineno-30-17"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-30-18" name="__codelineno-30-18"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="rechercher-des-mots-dans-un-texte"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h7c-.41-.25-.8-.56-1.14-.9a6.478 6.478 0 0 1-.36-9.18C13.69 9.5 17.33 9.13 20 11V8l-6-6m-1 7V3.5L18.5 9H13m7.31 9.9c1.33-2.11.69-4.9-1.4-6.22-2.11-1.33-4.91-.68-6.22 1.4-1.34 2.11-.69 4.89 1.4 6.22 1.46.93 3.32.93 4.79.02L22 23.39 23.39 22l-3.08-3.1m-3.81.1a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5Z"/></svg></span> Rechercher des mots dans un texte<a class="headerlink" href="#rechercher-des-mots-dans-un-texte" title="Permanent link">⚓︎</a></h2>
<p><img alt="🐣" class="twemoji" src="../assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f423.svg" title=":hatching_chick:"> 2023-10</p>
<p>Un travail que l’on avait commencé ensemble avec <a href="https://ricaud.me/blog/">Anthony</a> pour mon blog et que j’ai adapté et réutilisé récemment.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">search-text.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-31-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-31-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-31-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-31-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-31-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-31-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-31-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-31-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-31-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-31-10">10</a></span>
<span class="normal"><a href="#__codelineno-31-11">11</a></span>
<span class="normal"><a href="#__codelineno-31-12">12</a></span>
<span class="normal"><a href="#__codelineno-31-13">13</a></span>
<span class="normal"><a href="#__codelineno-31-14">14</a></span>
<span class="normal"><a href="#__codelineno-31-15">15</a></span>
<span class="normal"><a href="#__codelineno-31-16">16</a></span>
<span class="normal"><a href="#__codelineno-31-17">17</a></span>
<span class="normal"><a href="#__codelineno-31-18">18</a></span>
<span class="normal"><a href="#__codelineno-31-19">19</a></span>
<span class="normal"><a href="#__codelineno-31-20">20</a></span>
<span class="normal"><a href="#__codelineno-31-21">21</a></span>
<span class="normal"><a href="#__codelineno-31-22">22</a></span>
<span class="normal"><a href="#__codelineno-31-23">23</a></span>
<span class="normal"><a href="#__codelineno-31-24">24</a></span>
<span class="normal"><a href="#__codelineno-31-25">25</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-31-1" name="__codelineno-31-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;search-stop-words&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;application/json&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-31-2" name="__codelineno-31-2"></a><span class="w"> </span><span class="p">[</span><span class="s2">&quot;stop&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;words&quot;</span><span class="p">]</span><span class="w"> </span><span class="c1">// https://github.com/stopwords-iso/stopwords-fr</span>
<a id="__codelineno-31-3" name="__codelineno-31-3"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-31-4" name="__codelineno-31-4"></a>
<a id="__codelineno-31-5" name="__codelineno-31-5"></a><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-31-6" name="__codelineno-31-6"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">stopWords</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span>
<a id="__codelineno-31-7" name="__codelineno-31-7"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;search-stop-words&#39;</span><span class="p">).</span><span class="nx">textContent</span><span class="w"> </span><span class="c1">// (1)</span>
<a id="__codelineno-31-8" name="__codelineno-31-8"></a><span class="w"> </span><span class="p">)</span>
<a id="__codelineno-31-9" name="__codelineno-31-9"></a>
<a id="__codelineno-31-10" name="__codelineno-31-10"></a><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">matchSearch</span><span class="p">(</span><span class="nx">needle</span><span class="p">,</span><span class="w"> </span><span class="nx">stack</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-31-11" name="__codelineno-31-11"></a><span class="w"> </span><span class="c1">// Create a regex for each word from the needle</span>
<a id="__codelineno-31-12" name="__codelineno-31-12"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">regMap</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">needle</span>
<a id="__codelineno-31-13" name="__codelineno-31-13"></a><span class="w"> </span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span>
<a id="__codelineno-31-14" name="__codelineno-31-14"></a><span class="w"> </span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39; &#39;</span><span class="p">)</span>
<a id="__codelineno-31-15" name="__codelineno-31-15"></a><span class="w"> </span><span class="p">.</span><span class="nx">filter</span><span class="p">((</span><span class="nx">word</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">word</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">!</span><span class="nx">stopWords</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="nx">word</span><span class="p">))</span>
<a id="__codelineno-31-16" name="__codelineno-31-16"></a><span class="w"> </span><span class="c1">// See https://stackoverflow.com/a/37511463</span>
<a id="__codelineno-31-17" name="__codelineno-31-17"></a><span class="w"> </span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">word</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">word</span><span class="p">.</span><span class="nx">normalize</span><span class="p">(</span><span class="s2">&quot;NFD&quot;</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[\u0300-\u036f]/g</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">))</span>
<a id="__codelineno-31-18" name="__codelineno-31-18"></a><span class="w"> </span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">word</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">RegExp</span><span class="p">(</span><span class="nx">word</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;i&#39;</span><span class="p">))</span>
<a id="__codelineno-31-19" name="__codelineno-31-19"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">matches</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span>
<a id="__codelineno-31-20" name="__codelineno-31-20"></a><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">reg</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="nx">regMap</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-31-21" name="__codelineno-31-21"></a><span class="w"> </span><span class="nx">matches</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">stack</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">reg</span><span class="p">)</span>
<a id="__codelineno-31-22" name="__codelineno-31-22"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-31-23" name="__codelineno-31-23"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">matches</span>
<a id="__codelineno-31-24" name="__codelineno-31-24"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-31-25" name="__codelineno-31-25"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<ol>
<li>Je documente aussi la logique de mettre les <em>stop words</em> dans le <abbr title="Hyper Text Markup Language">HTML</abbr> en <abbr title="JavaScript Object Notation">JSON</abbr>
puis de les parser pour les récupérer car c’est la manière la plus performante de faire.</li>
</ol>
<p>Voir aussi <a href="../python/#retirer-les-accents-dune-chaine-de-caracteres">cette entrée Python</a> et les suivantes pour avoir la logique côté serveur.</p>
<h2 id="pour-aller-plus-loindifferemment"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.12 10H19V8.2h-3.62l-2-3.33c-.3-.5-.84-.84-1.46-.84-.18 0-.34.03-.5.08L6 5.8V11h1.8V7.33l2.11-.66L6 22h1.8l2.87-8.11L13 17v5h1.8v-6.41l-2.49-4.54.73-2.87M14 3.8c1 0 1.8-.8 1.8-1.8S15 .2 14 .2 12.2 1 12.2 2 13 3.8 14 3.8Z"/></svg></span> Pour aller plus loin/différemment<a class="headerlink" href="#pour-aller-plus-loindifferemment" title="Permanent link">⚓︎</a></h2>
<ul>
<li><a href="https://1loc.dev/">1LOC</a></li>
<li><a href="https://htmldom.dev/"><abbr title="Hyper Text Markup Language">HTML</abbr> DOM</a></li>
<li><a href="https://thisthat.dev/">THIS vs. THAT</a></li>
<li><a href="https://vanillajstoolkit.com/">The Vanilla <abbr title="JavaScript">JS</abbr> Toolkit</a></li>
<li><a href="https://phuoc.ng/latest/">Phuoc Nguyen</a></li>
</ul>
<aside class="md-source-file">
<span class="md-source-file__fact">
<span class="md-icon" title="Dernière mise à jour">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1-2.1-2M12.5 7v5.2l4 2.4-1 1L11 13V7h1.5M11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2v1.8Z"/></svg>
</span>
<span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date">2023-11-09</span>
</span>
</aside>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
Retour en haut de la page
</button>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Site par <a href="https://larlet.fr/david/">David Larlet</a>.
</div>
</div>
<div class="md-social">
<a href="https://mastodon.social/@dav" target="_blank" rel="noopener me" title="mastodon.social" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
</a>
<a href="/feed_rss_created.xml" target="_blank" rel="noopener" title="" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m2.5 12A1.5 1.5 0 0 0 6 16.5 1.5 1.5 0 0 0 7.5 18 1.5 1.5 0 0 0 9 16.5 1.5 1.5 0 0 0 7.5 15M6 10v2a6 6 0 0 1 6 6h2a8 8 0 0 0-8-8m0-4v2a10 10 0 0 1 10 10h2A12 12 0 0 0 6 6Z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "..", "features": ["content.code.annotate", "navigation.top", "toc.integrate"], "search": "../assets/javascripts/workers/search.f886a092.min.js", "translations": {"clipboard.copied": "Copi\u00e9 dans le presse-papier", "clipboard.copy": "Copier dans le presse-papier", "search.result.more.one": "1 de plus sur cette page", "search.result.more.other": "# de plus sur cette page", "search.result.none": "Aucun document trouv\u00e9", "search.result.one": "1 document trouv\u00e9", "search.result.other": "# documents trouv\u00e9s", "search.result.placeholder": "Taper pour d\u00e9marrer la recherche", "search.result.term.missing": "Non trouv\u00e9", "select.version": "S\u00e9lectionner la version"}}</script>
<script src="../assets/javascripts/bundle.d7c377c4.min.js"></script>
<script src="../static/javascript/termynal.js"></script>
<script src="../static/javascript/termynal-setup.js"></script>
</body>
</html>