Les fonctions
Javascript
Il existe plusieurs façon de déclarer une fonction :
function name(a, b) { ... }
const name = function(a, b) { ... }
S'adapter à la taille du contenu
CSS
Prend la largeur de son contenu
width: fit-content;
Sélecteur d'attribut [attribut="valeur"]
Javascript
Sélectionne les éléments dont l'attribut correspond exactement à la valeur.
Exemples :
document.querySelector('[data-id="42"]')
Déstructuration de la réponse d'une base de données
Javascript
const result = await pool.query('SELECT * FROM table');
// result = [ [lignes...], [metadata...] ]
result[0] // → les lignes de la requête
result[1] // → metadata (champs, types, etc.) — rarement utile
Avec la déstructuration :
const [cards] = await pool.query('SELECT * FROM cards');
// cards = result[0] → les lignes directement
AddEventListener - appel unique
Javascript
Il est possible d'ajouter une option sur un événement pour qu'il ne se déclenche qu'une seule fois.
element.addEventListener('click', () => { ... }, {once: true});
L'écouteur est détruit après sa première utilisation.Insérer un nœud HTML
Javascript
Insérer en premier :
parent.prepend('child');
Insérer en dernier :
parent.appendChild('child');
Insérer avant / après un élément précis :
parent.insertBefore('child');
parent.afterBefore('child');
Opérateur de chaînage optionnel
Javascript
const alert = document.querySelector('#alertContainer');
alert?.remove()
La méthode remove() ne se déclenchera pas si alert est undefined ou null.
Opérateur de coalescence nulle : valeur ?? "défaut"
Javascript
Retourne le côté droit uniquement si le côté gauche est null ou undefined
const age = user.age ?? 18 // retourne 18 seulement si age est null/undefined
Loading animation spinner
CSS
Spinner simple pour afficher un chargement.
Les couleurs et le délai sont personnalisables.
.circle {
width: 40px;
height: 40px;
border: 5px solid black;
border-radius: 50%;
border-top-color: red;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
Redimensionner un textarea dynamiquement
CSS
Une nouvelle propriété permet de résoudre le problème de la hauteur d'un textarea dynamiquement sans faire appel à JS. La voici :
textarea {
field-sizing: content;
}
Opérateur ternaire
Javascript
Il est possible d'utiliser un opérateur ternaire, le ? (point d'interrogation) à la place d'une condition if else.
let result = condition ? value1 : value2
// Cette ligne est fait la même chose que celle-ci :
if (condition) {
result = value1
} else {
result = value2
}
On pourrait être tenter d'enchaîner les conditions, ce qui est possible mais déconseillé par manque de visibilité en lecture humaine.Conserver un width avec un padding
CSS
Pour conserver la taille définie avec width malgré l'utilisation d'un padding, il faut utiliser cette balise :
box-sizing: border-box;
Git push [origin/main]
Git
git push -u origin main