Tutoriel HTML, CSS et JavaScript : Apprendre avec des astuces rapides

Dans cet article, tu vas retrouver une liste des astuces HTML, CSS et JavaScript, des bouts de code que tu peux réutiliser dans tout ton projet web.

Quelques fois, la documentation du HTML, CSS, JavaScript n'explique pas tout ce qu'il faut.

Il nous donne juste l'essentiel pour commencer, c'est après des longues heures de pratiques qu'on peut faire certaines choses avec le code.

D'autres développeurs ont rencontré certains problèmes avant nous et nous ont partagé leurs solutions ou expériences.

Alors découvrons simplement, le quelques astuces pratiques HTML, CSS et JavaScript.

Comment tout désactiver avec CSS ?

Code CSS :

.disabled {
  filter: grayscale(1);
  pointer-events: none;
}`

Comment diviser un tableau en morceaux sans mutabilité ?

Code Javascipt :

const array = [1, 2, 3, 4]
const size = 3

const new_array = array.reduce((acc, a, i) => {
     i % size ? acc[parseInt(i / size)].push(a) : acc.push([a])
      return acc
}, [])

ou même plus court :

const new_array = array.reduce((acc, a, i) => i % size ? acc : [...acc, array.slice(i, i + size)], [])

N'oublie pas, commence à utiliser const pour ce qui ne change pas, si tu doiss modifier sa valeur, utilise letet évite autant que possible var.

Comment enregistrement et chargement des dates ?

Enregistre ta datetime toujours au format UTC ISO et charge-le dans l'interface utilisateur à l'aide de l'ISO local. 

Utilise des widgets natifs pour éviter de faire face aux préférences de format de date (middle endian, little endian, etc.)

Code HTML:

<input type="datetime-local">
<button>Enregistrer</button>
<button>Charger</button>

Code JavaScript

$button_save.onclick = () =>localStorage.setItem('datetime', $input.value && new Date($input.value).toISOString())

$button_load.onclick = () => $input.value = localStorage.getItem('datetime') && toLocalISOString(new Date(localStorage.getItem('datetime'))).slice(0,-8)function toLocalISOString(d) {
  const offset = d.getTimezoneOffset()
  return new Date(
      d.getFullYear(),
      d.getMonth(),
      d.getDate(),
      d.getHours(),
      d.getMinutes() - offset,
      d.getSeconds(),
      d.getMilliseconds()
  ).toISOString()
}

Je recommande d'utiliser sessionStorageet localStorage. 

N'abuse pas des cookies s'ils ne sont pas strictement nécessaires. 

Si tu as besoin de plus de stockage local, tu peux utiliser IndexedDB.

Comment sélectionner les colonnes du tableau HTML en cliquant sur les en-têtes ?

Code JavaSCript :

document.querySelectorAll('th').forEach($th => $th.onclick = event => {
    document.querySelectorAll(`td:nth-of-type(${event.currentTarget.cellIndex + 1})`)
    .forEach($td =>$td.classList.toggle('selected'))
 })

N'oublie onclickpas qu'il écrase toujours la fonction précédente (au cas où il y en aurait eu), utilise-le addEventListener()pour plusieurs fonctions.

Comment renommer lors de la déstructuration ?

Nous allons renommer la propriété time lors du tri de notre tableau d'objets.

Code Javascript

  let times = [
    {name:'dog', time: '10:23'}, 
    {name: 'laundry', time: '09:34'}, 
    {name: 'work', time: '11:00'}
  ]
times.sort(({ time: a }, { time: b }) => a < b ? -1 : a > b ? 1 : 0)

sort()`change le tableau d'origine.

Comment créer une liste déroulante de la saisie semi-automatique ?

As-tu déjà utilisé des listes déroulantes de saisie semi-automatique à partir d'options tierces jQuery UI ou Bootstrap ? 

Un gâchis complet des poids lourds.

Heureusement, nous avons eu il y a quelques années une solution attendue: la liste déroulante Native HTML5 Autocomplete avec datalist. 

Une norme légère prise en charge dans tous les appareils.

Code HTML :

<input list="series">
<datalist id="series">
  <option value="Adventure Time">
  <option value="Rick and Morty">
  <option value="Game of Thrones">
  <option value="Planet Earth 2">
</datalist>

Économise ton temps d'outillage et tes dépendances, utilises le moins de bibliothèques et de frameworks possible !

Réactivité vraiment simple avec CSS Grid

CSS Grid est le moyen le plus simple, le plus propre et le plus puissant de gérer la réactivité, une toute nouvelle approche élaborée au cours des dernières années et prête à l'emploi.

CSS Grid change la façon dont tu as l'habitude de mettre en page tes documents, au lieu de divitis (beaucoup de divs) et JavaScript pour changer de divposition en fonction des écrans (ce que fait Bootstrap de nos jours), tu peux utiliser des mises en page de grille CSS pures avec juste les divs significatifs et indépendamment du document ordre des sources.

Tu n'as pas besoin de toucher HTML ou JavaScript, tu n'as pas besoin de Bootstrap ou même de règles CSS complexes.

Ce que tu vois dans votre CSS est ce que tu obtiens sur votre écran.

Cote HTML :

<div class="grid">
  <div class="name">Name</div>
  <div class="skills">Skills</div>
  <div class="score">Score</div>
  <div class="chart">Chart</div>
 <div class="another">Another</div>
</div>

Code CSS :

.grid {
   display: grid;
   grid-template-areas: 
   "name" 
   "score" 
   "skills" 
   "chart";
}
@media only screen and (min-width: 500px) {
  .grid {
    grid-template-areas:
    "name skills" 
    "score skills"
    "chart chart";
  }
}
.name {
  grid-area: name;
}
.score {
  grid-area: score;
}
.skills {
  grid-area: skills;
}
.chart {
  grid-area: chart;
}

Comment déplacer des parties de l'interface utilisateur sans perte d'interaction ?

Code HTML :

<ul> <li> <button id="up">Haut</button> <button id="down">Bas</button> </li> <li>Vide</li> <li>Vide</li> </ul>

Code JavaScript :

document.querySelector('#up').onclick = e => {
    const $li = e.target.parentElement
    if ($li.previousElementSibling)  $li.parentElement.insertBefore($li, $li.previousElementSibling)
  }

document.querySelector('#down').onclick = e => {
  const $li = e.target.parentElement
  if ($li.nextElementSibling) $li.parentElement.insertBefore($li.nextElementSibling, $li)
}

N'oublie pas que targetc'est ce qui déclenche l'événement et currentTargetc'est ce à quoi tu vas affecté ton ecouteur.

Temps de saisie HTML au format 24 heures

Faites confiance aux widgets HTML natifs sans dépendre de bibliothèques tierces. 

Cependant, il y a parfois des limitations, si tu veux déjà traité une inputheure HTML dont tu savez de quoi il s'agit, essayer de configurer des heures/minutes maximales ou minimales et/ou passer du format 12 heures à 24 heures et vice-versa. 

A présent, une bonne solution pour éviter les maux de tête est d'utiliser 2 entrées de type numéro et une pincée de JavaScript.

Code HTML :

<div>
  <input type="number" min="0" max="23" placeholder="23">:
  <input type="number" min="0" max="59" placeholder="00">
</div>

Code CSS :

div {
  background-color: white;
  display: inline-flex;
  border: 1px solid #ccc;
  color: #555;
}
input {
   border: none;
   color: #555;
   text-align: center;
   width: 60px;
 }

Code JavaScript :

document.querySelectorAll('input[type=number]')
  .forEach(e => e.oninput = () => {
    if (e.value.length >= 2) e.value = e.value.slice(0, 2)
    if (e.value.length == 1) e.value = '0' + e.value
    if (!e.value) e.value = '00'
 })

Souviens toi, ==double comparaison pour l'égalité et ===triple pour l'égalité et le type.

Si tu veux vérifier si une variable est undefinedou non, utilise simplement la triple comparaison a === undefinedet la même chose pour null. 

Si tu veux vérifier s'il existe ou non, utilise typeof a != 'undefined'.

Boucle n fois sans variables mutables

Code JavaScript :

[...Array(10).keys()].reduce((sum, e) => sum + `<li>${e}</li>`, '')

comme ça aussi :

[...Array(10)].reduce((sum, _, i) => sum + `<li>${i}</li>`, '')

Comment centrer un block horizontal et vertical en css ?

La méthode simple, utilise simplement Flexbox et configure le centre horizontal et le centre vertical dans le conteneur.

Code CSS :

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
div {
  background-color: #555;
  width: 100px;
  height: 100px;
}

Javascript : Comment récupérer les données en asynchrone ?

Utilisation fetch()avec des fonctions asynchrones.

Code JavaScript :

async function async_fetch(url) {
  let response = await fetch(url)
  return await response.json()
}
async_fetch('https://httpbin.org/ip')
                    .then(data => console.log(data))
                    .catch(error => console.log('Fetch error: ' + error))

Remarque, comme tu l'as remarqué je n'écris pas le ;point - virgule, c'est parfaitement bien, en JavaScript ce ;n'est pas obligatoire, peu importe qu'il soit là ou non, le moteur JS va le vérifier et l'insérer si besoin, sois juste prudent avec les nouvelles lignes qui commencent par la (parenthèse et évitez returnavec la valeur dans une ligne différente.

Pied de page avec boutons droit et gauche

Code HTML

<footer>
  <div>
    <button>Button 1</button>
    <button>Button 2</Button>
  </div>
  <div>
    <button>Button 3</button>
    <button>Button 4</button>
  </div>
</footer>

Code CSS :

footer {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

Défiler dans l'affichage

J'ai créé n boîtes (divs) avec des couleurs aléatoires pour en sélectionner une au hasard et la rendre visible sur la fenêtre. 

Chaque fois que tu réexécutes le code, tu verras sur ton écran la case sélectionnée quelle que soit sa position.

Code JavaScript :

document.querySelector(`div:nth-child(${random})`).scrollIntoView()

Aplatir des tableaux d'objets

Code JavaScript :

array = alphas.map(a => 
  a.gammas.map(g => g.betas)
).join()

N'oubliez pas que si tu souhaites mettre à plat des tableaux de tableaux, tu peux le faire facilement avec flat().

[1, 2, [3, 4, [5, 6]]].flat(Infinity)

Imbrication de tableaux d'objets

Renvoie un tableau de n éléments remplis de contenu :

Code JavaScript :

let get_array = (n, content) => Array(n).fill(content)

Renvoie un objet avec une propriété name qui a une valeur de contenu :

let get_object = (name, content) => Object.defineProperty({}, name, {value: content})

3 niveaux de tableaux avec objets (emboîtés)

a = get_array(3, get_object('b', 
  get_array(6, get_object('c', 
    get_array(3, {})
  ))
))

Javascript : comment avoir un tableau sans valeurs en double ?

Code Javascript :

const array = [1, 2, 3, 3, 3, 2, 1]

La stratégie d'ensemble :

[...new Set(array)]

La stratégie de filtrage (plus facile à comprendre mais plus lente) :

array.filter((elem, index) => index == array.indexOf(elem))

Rappelles toi, Array.from(iterableObj) = [...iterableObj]

Saisie HTML avec unités

Code HTML :

  <span><input type="number" min="0" value="50">€</span>

Code CSS :

span {
  background: white;
  border: 1px solid #e8e8e8;
}
input {
  background: inherit;
  outline: none;
  border: none;
  padding: 0 5px;
}

Vidéo en boucle d'arrière-plan réactive

Code HTML :

<video autoplay loop poster="https://website/video.jpg"> <source src="http://website/video.webm"> </video>

Code CSS :

video.landscape {
  width: 100vw;
  height: auto;
}
video {
  width: auto;
  height: 100vh;
}

Tu pouvez ajouter autant de sources que tu le souhaites pour prendre en charge différents formats vidéo.

Comment imprimer un élément HTML spécifique

J'aimerais avoir quelque chose comme ça :

Au moment de cet article, la norme ne prend en charge que window.print(), mais nous pouvons faire l'affaire avec CSS et un peu de JavaScript :

Code CSS

@media print {
  body.print-element *:not(.print) {
    display: none;
  }
}

Code JavaScript :

function print_this(elem) {
  document.body.classList.add('print-element')
  elem.classList.add('print')
  window.print()
  document.body.classList.remove('print-element')
  elem.classList.remove('print')
}

Comment afficher, masquer, saisir et générer un mot de passe ?

Un indice juste à l'intérieur du input, puis un buttonpour afficher le mot de passe et enfin un autre buttonpour générer des mots de passe aléatoires.

Code HTML :

<input id="password" type="password" placeholder="type password...">
<button id="view-password"></button>
<button id="generate-password">↻</button>

Afficher ou masquer le mot de passe :

Code JavaScript :

$view_password.addEventListener('click', e => {
  e.currentTarget.classList.toggle('view')
  if (e.currentTarget.className.includes('view'))
    $password.setAttribute('type', 'text')
  else $password.setAttribute('type', 'password')
})

Défini un mot de passe aléatoire et assure-toi qu'il s'affiche :

  $generate_password.addEventListener('click', () => {
     $view_password.classList.add('view')
     $password.setAttribute('type', 'text')
     $password.value = Math.random().toString(36).slice(-8)
  })

Remarque, je nomme personnellement le sélecteur constcommençant par un $.

Sélection précédente et suivante infinie

Sélectionner chaque élément dans une boucle de sélection. 

Si tu avances dès que tu avais terminé la liste des éléments, tu commencerais à sélectionner depuis le début et de même si tu vas en sens inverse.

Code HTML :

<button id="previous">Previous</button>
<button id="next">Next</button>
<ul>
   <li></li>
   <li class="selected"></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

Code JavaScrit :

document.querySelector('#next').addEventListener('click', () => {
  const $selected = document.querySelector('.selected')
  const $next_element = $selected.nextElementSibling
  if (!$next_element) $next_element = $selected.parentElement.firstElementChild
  $selected.classList.remove('selected')
  $next_element.classList.add('selected')
})

N'oublie pas d'utiliser nextElementSiblinget previousElementSibling(éléments DOM) au lieu de nextSiblinget previousSibling(objets DOM). 

Un objet DOM peut être n'importe quoi : des commentaires, du texte isolé, des sauts de ligne, etc.

Dans notre exemple, nextSiblingcela aurait fonctionné si nous avions défini tous nos éléments HTML ensemble sans rien entre eux :

<ul><li></li><li></li></ul>

Carré réactif

J'ai vu de nombreuses façons étranges de créer des carrés réactifs, c'est pourquoi j'aimerais en partager une facile. 

Code css

div {
  width: 60vw;
  height: 60vw;
  margin: 20vh auto;
  background-color: #774C60;
}

Zone de cercle définie par un clic de souris

Nous allons définir l'aire d'un cercle en fonction de l'endroit où nous cliquons dans une zone de boîte. 

Nous pouvons gérer cela en utilisant des événements JavaScript, un peu de mathématiques de base et CSS.

La largeur et la hauteur sont identiques, peu importe ce que nous allons définir pour nos calculs :

Code Javascript :

const width = e.currentTarget.clientWidth

Position absolue du curseur de la souris par rapport au centre du cercle :

const x = Math.abs(e.clientX — offset.left — width / 2)
const y = Math.abs(e.clientY — offset.top — width / 2)

Le maximum nous indiquera le pourcentage de la surface du cercle :

percent = Math.round(2 * Math.max(x, y) * 100 / width)
$circle.style.width = percent + '%'
$circle.style.height = percent + '%'

Écrasement de texte

Eh bien, tu penses peut-être que tu peux simplement activer ta touche Insert à partir de votre clavier, mais que faire si tu ne l'as pas ou si tu veux toujours avoir un mode d'écrasement (indépendamment) tout en tapant certaines entrées et zones de texte spécifiques. 

Tu peux le faire facilement.

Code JavaScript

$input.addEventListener('keypress', function(e) {
  const cursor_pos = e.currentTarget.selectionStart
  if (!e.charCode) return $input.value = $input.value.slice(0, cursor_pos) + $input.value.slice(cursor_pos + 1)
  e.currentTarget.selectionStart = e.currentTarget.selectionEnd = cursor_pos
})

Compteur avec remise à zéro par fermetures

Mettre en place un comptoir de base avec une fermeture et quelques options externes accessibles.

Code JavaScritp :

const add = (function() {
  let offset = 0
  return function(option) {
    switch (option) {
      case 0: offset = 0; break;
      case 1: offset++; break;
      case 2: offset — ; break;
      default: throw ‘Not a valid option’;
    }
    console.log(offset)
  }
})()

Pour rappel, une fermeture tu permet juste de garder enregistré et protégé tes variables.

Comment créer un defilement infini(scroll) en javacript ?

As-tu déjà vu ces "Charger plus" automatiques pendant que tu faites défiler vers le bas ? 

Les as-tu vus sur Twitter, Tiktok, Instagram ou Facebook ? 

Cool, n'est-ce pas ? 

Le scroll infini est une alternative à la pagination et il est partout. 

Il optimise l'expérience utilisateur en chargeant les données selon les besoins de l'utilisateur (indirectement). 

Tu obtiens un processus de chargement plus rapide pour les pages, le Web, les applications et il ne charge que ce dont tu as besoin au lieu de tout le groupe. 

Tu n'as pas besoin d'ajouter d'interactions, de boutons ou de widgets supplémentaires car cela vient avec le comportement de lecture normal auquel tu êtes habitué : fais défiler vers le bas avec la souris ou avec le doigt sur un écran tactile.

Code JavaScript :

const $ol = document.querySelector('ol')function load_more() {
  let html = ''for (var i = 0; i < 5; i++) html += '<li></li>'
  $ol.innerHTML += html
}$ol.addEventListener('scroll', function() { 
  if ($ol.scrollHeight — $ol.scrollTop == $ol.clientHeight) 
    load_more()
})

Note simplement dans l'exemple ci-dessus que nous pourrions le rendre plus efficace en créant des nœuds et en utilisant appendChild().

Comment ajouter des icons Icônes google maretial ?

Code HTML :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><i class="material-icons">face</i>

Faire une transition CSS de base utilisant box-shadow

Notre CSS changera si la souris est sur l'élément avec un effet de transition facile (début et fin lents). 

Nous remplissons l'élément avec une ombre intérieure (encart)

Code CSS

i { 
  transition: all 0.5s ease-in-out;
  box-shadow: 0 0 0 75px #E94F37 inset;
}
i:hover {
  box-shadow: 0 0 0 4px #E94F37 inset;
  color:#E94F37;
}

Comment exporter le tableau HTML vers un fichier CSV ?

Imagine que tu as un tableau HTML et que tu souhaites le télécharger sous forme de tableau CSV.

Cote HTML :

<table>
  <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  <tr><td>JEAN</td><td>26</td><td>France</td></tr>
  <tr><td>RODRIGO</td><td>19</td><td>Spain</td></tr>
  <tr><td>MARKOV</td><td>32</td><td>Russia</td></tr>
</table>

Tout d'abord, tu vas passer du HTML au CSV :

Code JavaScript :

let csv = []
let rows = document.querySelectorAll('table tr') 
for (var i = 0; i < rows.length; i++) {
  let row = [], cols = rows[i].querySelectorAll('td, th')for (var j = 0; j < cols.length; j++) 
    row.push(cols[j].innerText)csv.push(row.join(',')) 
} 
download_csv(csv.join('\n'), filename)

Après cela, tu peux le télécharger en utilisant Blobet un lien :

let csvFile = new Blob([csv], {type: 'text/csv'})let downloadLink = document.createElement('a')
downloadLink.download = filename
downloadLink.href = window.URL.createObjectURL(csvFile)
downloadLink.style.display = 'none'document.body.appendChild(downloadLink)downloadLink.click()

Comment Suivre les événements clavier en Javascript ?

À utiliser event.codepour obtenir un moyen lisible par l'homme de savoir quelles touches sont enfoncées.  A utiliser event.keysi tu souhaitez faire la distinction entre majuscule ou non, et éviter les raccourcis du navigateur, ex : Ctrl + P (imprimer)

Code JavaScript :

document.onkeydown = event => {
  switch (event.code) {
    case 'ArrowDown':
      $div.style.top = `${parseInt($div.style.top || 0) + step}px`
      break
    case 'KeyR':
      if (event.altKey) $div.style.top = 0
      break
  }
}

Quelle est la différence entre propriété et attribut ?

Une propriété est dans le DOM ; un attribut est dans le HTML qui est analysé dans le DOM.

Code HTML :

<body onload="foo()">

Code Javascript :

document.body.onload = foo

Évite l'instruction switch lorsque tu n'as pas besoin de logique

Les tableaux sont plus rapides, dans l'exemple suivant, si tu veux maintenant, qui est le neuvième mois, tu pouvez simplement coder months[9].

Code Javascript :

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

Conclusion

Des astuces simple et rapide à utiliser pour renforcer ces connaissances en javascript.

Nous avons décours des astuces :

-HTML - CSS - et JavaScript

Des codes simples que tu peux réutiliser ou copier et adapter à ta sauce.