Différences

Ci-dessous, les différences entre deux révisions de la page.

--- kb_it:javascript [2022/05/19 10:37] – befe
+++ kb_it:javascript [2024/12/12 21:59] (Version actuelle) – befe
@@ Ligne 12: / Ligne 12: @@
 }
 </code>
+=== kebab-case to camelCase ===
+<code javascript>
+const capitalizeFirstLetter = (text: string) => text.charAt(0).toUpperCase() + text.slice(1)
+const kebab2camelCase = (text: string) => text.split('-').map(capitalizeFirstLetter).join('')
+</code>
+=== Echapement d'une expression régulière ===
+Voir la librairie regexp.escape : https://www.npmjs.com/package/regexp.escape
 ==== Traitement des tableaux ====
@@ Ligne 18: / Ligne 29: @@
 <code javascript>
-people.sort((a, b) => a.firstname.localeCompare(b.firstname) || a.lastname.localeCompare(b.lastname) || a.age - b.age)
+myArray.sort((a, b) => a.firstname.localeCompare(b.firstname) || a.lastname.localeCompare(b.lastname) || a.age - b.age)
 </code>
@@ Ligne 24: / Ligne 35: @@
 <code javascript>
-people.sort((a, b) => {
+myArray.sort((a, b) => {
     const compFirstname = a.firstname.localeCompare(b.firstname)
     const compLastname = a.lastname.localeCompare(b.lastname)
@@ Ligne 37: / Ligne 48: @@
 <code javascript>
-Object.keys(this.toDetail).sort().reduce(
+Object.keys(myObject).sort().reduce(
     (obj, key) => {
-        obj[key] = this.toDetail[key]
+        obj[key] = myObject[key]
         return obj
     }, {}
 )
+</code>
+==== Traitement des dates ====
+=== Formatage ===
+En javascript pur :
+<code javascript>
+function formatDate (date) {
+  return `${date.getDate()}/${('0' + (date.getMonth() + 1)).slice(-2)}/${date.getFullYear()} ${date.getHours()}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`
+}
 </code>
@@ Ligne 90: / Ligne 112: @@
   console.log('e')
 })
+</code>
+==== Génération de nombres et chaînes aléatoires ====
+=== Série de chiffres de longueur donnée ===
+<code javascript>
+genNumbers (length) {
+  return Math.floor(Math.pow(10, length - 1) + Math.random() * 9 * Math.pow(10, length - 1))
+}
+</code>
+==== Gestion des clics et double-clics sur un même élément ====
+<code javascript>
+let clickCounter = 0
+let timer: NodeJS.Timeout
+domElement.addEventListener('click', () => {
+  clickCounter++
+  if (clickCounter === 1) {
+    timer = setTimeout(() => {
+      clickCounter = 0
+      // Simple click
+      onSvgNodeClick(node)
+    }, 300)
+    return
+  } else {
+    clearTimeout(timer)
+    clickCounter = 0
+    // Double click
+    onSvgNodeDblclick(node)
+  }
+})
+</code>
+==== Gestion des erreurs ====
+=== Etendre la classe Error ===
+<code javascript>
+class DownloadError extends Error {
+  response: Response
+  constructor(message: string, response: Response) {
+    super(message);
+    this.response = response;
+    Object.setPrototypeOf(this, DownloadError.prototype);
+  }
+};
+new DownloadError('Erreur au téléchargement du fichier', response);
 </code>
 ==== Manipulation du DOM  ====
+=== Attendre le chargement complet du DOM ===
+<code javascript>
+window.readyHandlers = [];
+window.ready = function ready(handler) {
+  window.readyHandlers.push(handler);
+  handleState();
+};
+window.handleState = function handleState () {
+  if (['interactive', 'complete'].indexOf(document.readyState) > -1) {
+    while(window.readyHandlers.length > 0) {
+      (window.readyHandlers.shift())();
+    }
+  }
+};
+document.onreadystatechange = window.handleState;
+ready(function () {
+  // your code here
+});
+</code>
 === Attendre la présence d'un élément ===
@@ Ligne 106: / Ligne 202: @@
     }, 100);
 }
+</code>
+==== Divers ====
+=== Mise en surbrillance de text HTML ===
+Avec mark.js
+<code javascript>
+highlight (text, search) {
+  if (typeof text !== 'undefined' && text !== null && !!search) {
+    const el = document.createElement('div')
+    el.innerHTML = text
+    const mark = new Mark(el)
+    mark.mark(search, {
+      'acrossElements': true
+    })
+    return el.innerHTML
+  }
+  return text
+}
+</code>
+=== Fixer plusieurs lignes et/ou plusieurs colonnes d'un tableau ===
+HTML
+<code html>
+<table class="software-table" data-sticky-rows="2" data-sticky-cols="3">
+    ...
+</table>
+</code>
+CSS
+<code css>
+table[data-sticky-rows] th,
+table[data-sticky-rows] td,
+table[data-sticky-cols] th,
+table[data-sticky-cols] td {
+    position: relative;
+    z-index: -2;
+}
+table[data-sticky-rows] tr.sticky th,
+table[data-sticky-rows] tr.sticky td,
+table[data-sticky-cols] tr th.sticky,
+table[data-sticky-rows] tr td.sticky {
+    position: sticky;
+    z-index: -1;
+}
+table[data-sticky-rows] tr.sticky th.sticky,
+table[data-sticky-rows] tr.sticky td.sticky {
+    z-index: 0;
+}
+</code>
+Javascript
+<code javascript>
+document.querySelectorAll('table[data-sticky-rows],table[data-sticky-cols]').forEach(table => {
+    const options = {
+        rows: parseInt(table.getAttribute('data-sticky-rows')) || 0,
+        cols: parseInt(table.getAttribute('data-sticky-cols')) || 0
+    };
+    const tableStyle = getComputedStyle(table);
+    let deltaV = deltaH = 0;
+    // Si le style border-collapse est "separate", il faut en tenir compte
+    if (tableStyle.borderCollapse === 'separate') {
+        const borderSpacing = tableStyle.borderSpacing.split(' ');
+        deltaV += parseFloat(borderSpacing[0]) * 2;
+        deltaH += parseFloat(borderSpacing[1]) * 2;
+    }
+    let top = 0;
+    // Pour chaque ligne du tableau
+    table.querySelectorAll('tr').forEach((row, rowI) => {
+        let left = 0;
+        let totalColspan = 0;
+        // Pour chaque cellule de la ligne
+        [...row.querySelectorAll('th,td')].some((cell, cellI) => {
+            const colspan = cell.getAttribute('colspan');
+            colspan && (totalColspan += parseInt(colspan) - 1);
+            if (rowI < options.rows) {
+                cell.style.top = `${top}px`
+            }
+            if (cellI < options.cols - totalColspan) {
+                cell.classList.add('sticky');
+                cell.style.left = `${left}px`;
+            }
+            if (rowI >= options.rows && cellI >= options.cols - totalColspan) {
+                return true;
+            }
+            left += cell.offsetWidth + deltaH;
+        });
+        if (rowI < options.rows) {
+            row.classList.add('sticky');
+            top += row.offsetHeight + deltaV;
+        }
+    });
+});
+</code>
+=== Télécharger des données en provenance d'une variable ===
+<code javascript>
+function download (data, type = 'text') {
+  const a = document.createElement('a')
+  a.setAttribute('download', 'data')
+  a.href = window.URL.createObjectURL(new Blob([data], { type: type }))
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+const data = Array.from({ length: 256 }, (_, i) => -128 + i)
+  .sort(() => Math.random() - 0.5)
+  .join("\n")
+download(data)
 </code>