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 let
et é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 sessionStorage
et 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 onclick
pas 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 div
position 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 target
c'est ce qui déclenche l'événement et currentTarget
c'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 input
heure 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 undefined
ou non, utilise simplement la triple comparaison a === undefined
et 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 return
avec 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 button
pour afficher le mot de passe et enfin un autre button
pour 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 const
commenç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 nextElementSibling
et previousElementSibling
(éléments DOM) au lieu de nextSibling
et previousSibling
(objets DOM).
Un objet DOM peut être n'importe quoi : des commentaires, du texte isolé, des sauts de ligne, etc.
Dans notre exemple, nextSibling
cela 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 Blob
et 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.code
pour obtenir un moyen lisible par l'homme de savoir quelles touches sont enfoncées.
A utiliser event.key
si 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.