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
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">''</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">'(prefers-reduced-motion: reduce)'</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">'calculator:add'</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"><</span><span class="nt">script</span><span class="p">></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"><</span><span class="nx">script</span><span class="o">></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">'<script src="https://unpkg.com/es6-promise@4.2.8/dist/es6-promise.auto.min.js"><\/script>'</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">'<script src="https://unpkg.com/whatwg-fetch@3.6.2/dist/fetch.umd.js"><\/script>'</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"><</span><span class="err">/script></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">`<div class="custom-class">Code copied!</div>`</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">=></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">''</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">''</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">'Are you sure you want to delete this?'</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">'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;'</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">'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------'</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">''</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s1">'|'</span><span class="p">),</span><span class="w"> </span><span class="s1">'g'</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">'-'</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">=></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">"'"</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-']+/g</span><span class="p">,</span><span class="w"> </span><span class="s1">''</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">'-'</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">''</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">''</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">=></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">=></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">=></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">=></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">'numbers'</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">=></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">'numbers'</span><span class="p">,</span><span class="w"> </span><span class="nx">o</span><span class="w"> </span><span class="p">=></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">'numbers'</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">'Castor'</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">'Pollux'</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">'Télaïre'</span><span class="p">,</span><span class="w"> </span><span class="nx">tessiture</span><span class="o">:</span><span class="s1">'soprano'</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">'foo;bar'</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">'baz_quux'</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">'text/csv'</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">'a'</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">'none'</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">=></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">''</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">=></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) => [ 1, 2, 3, 4, 5 ]</span>
|
|
<a id="__codelineno-15-8" name="__codelineno-15-8"></a><span class="c1">// range(10, 8) => [ 8, 9, 10 ]</span>
|
|
<a id="__codelineno-15-9" name="__codelineno-15-9"></a><span class="c1">// range(10, 1, 3) => [ 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">=></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">=></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([['foo', 'bar'], [1, 2]]) => [['foo', 1], ['bar', 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">'log'</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">'green'</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">=></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">'%c%s'</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">'myapp'</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">'myapp'</span><span class="p">,</span><span class="w"> </span><span class="s1">'error'</span><span class="p">,</span><span class="w"> </span><span class="s1">'red'</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">'myapp'</span><span class="p">,</span><span class="w"> </span><span class="s1">'debug'</span><span class="p">,</span><span class="w"> </span><span class="s1">'blue'</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">'page initialized'</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">'oops'</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">'wtf'</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">=></span><span class="w"> </span><span class="s1">'-'</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">'object'</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">'foo'</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">'bar'</span><span class="p">,</span><span class="w"> </span><span class="s1">'baz'</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">'quux'</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">'valueBar'</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">'valueQuux'</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">'no-js'</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">'DOMContentLoaded'</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">'loading'</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">'DOMContentLoaded'</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">'./asset.webp'</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">'img'</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">/&/g</span><span class="p">,</span><span class="w"> </span><span class="s1">'&amp;'</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">/>/g</span><span class="p">,</span><span class="w"> </span><span class="s1">'&gt;'</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">/</g</span><span class="p">,</span><span class="w"> </span><span class="s1">'&lt;'</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">/"/g</span><span class="p">,</span><span class="w"> </span><span class="s1">'&quot;'</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">/'/g</span><span class="p">,</span><span class="w"> </span><span class="s1">'&#039;'</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">=></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">=></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">''</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">''</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">"<script>"</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">// => String { "foo &lt;script&gt; bar" }</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">'template'</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">''</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">'text/html'</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">''</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&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">'checkbox'</span><span class="p">,</span><span class="w"> </span><span class="s1">'radio'</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"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"search-stop-words"</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span>
|
|
<a id="__codelineno-31-2" name="__codelineno-31-2"></a><span class="w"> </span><span class="p">[</span><span class="s2">"stop"</span><span class="p">,</span><span class="w"> </span><span class="s2">"words"</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"></</span><span class="nt">script</span><span class="p">></span>
|
|
<a id="__codelineno-31-4" name="__codelineno-31-4"></a>
|
|
<a id="__codelineno-31-5" name="__codelineno-31-5"></a><span class="p"><</span><span class="nt">script</span><span class="p">></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">'search-stop-words'</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">' '</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">=></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">&&</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">=></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">"NFD"</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">""</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">=></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">'i'</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"></</span><span class="nt">script</span><span class="p">></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>
|