- Changement dynamique de thème (Skinning)
L'attribut href d'une balise <link> peut être modifié via JavaScript pour alterner entre différentes feuilles de sttyle CSS.
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Thème Dynamique</title>
<link id="feuilleStyle" rel="stylesheet" href="theme-defaut.css">
<script>
function appliquerTheme(nomFichier) {
const lien = document.getElementById('feuilleStyle');
lien.href = nomFichier;
}
</script>
</head>
<body>
<button onclick="appliquerTheme('theme-sombre.css')">Thème Sombre</button>
<button onclick="appliquerTheme('theme-clair.css')">Thème Clair</button>
</body>
</html>
- Attributs des éléments et propriété className
Tous les attributs HTML sont accessilbes et modifiables via des propriétés JavaScript correspondantes. Une exception notable : l'attribut class HTML devient la propriété className en JavaScript, car class est un mot réservé.
<style>
#conteneur { width: 120px; height: 120px; border: 1px solid #333; }
.style-rouge { background-color: #e74c3c; }
</style>
<script>
function colorierEnRouge() {
const div = document.getElementById('conteneur');
div.className = 'style-rouge';
}
</script>
<button onclick="colorierEnRouge()">Appliquer le style</button>
<div id="conteneur"></div>
- Méthodes d'accès aux propriétés
Les propriétés des objets DOM peuvent être manipulées avec la notation point (objet.propriete) ou la notation crochets (objet['propriete']). Cette dernière est utile lorsque le nom de la propriété est dynamique.
<script>
function mettreAJourChamp(nomPropriete) {
const champ = document.getElementById('saisie');
champ[nomPropriete] = 'Nouveau contenu';
}
</script>
<input type="text" id="saisie">
<button onclick="mettreAJourChamp('value')">Mettre à jour la valeur</button>
- Types de données et conversion
L'opérateur typeof retourne une chaîne représentant le type d'une valeur. Les types primitifs courants sont : number, string, boolean, undefined, object, et function.
<script>
let donnee = 42; // typeof donnee → 'number'
donnee = 'texte'; // typeof donnee → 'string'
donnee = true; // typeof donnee → 'boolean'
donnee = function() {}; // typeof donnee → 'function'
donnee = document; // typeof donnee → 'object'
let nonDefini; // typeof nonDefini → 'undefined'
</script>
Conversion explicite :
Les fonctions parseInt() et parseFloat() convertissent une chaîne en nombre. Si la conversion échoue, elles retournent NaN (Not a Number). La fonction isNaN() teste cette valeur.
<script>
window.onload = function() {
const champA = document.getElementById('numA');
const champB = document.getElementById('numB');
const boutonCalc = document.getElementById('calculer');
boutonCalc.addEventListener('click', function() {
const valeurA = parseInt(champA.value);
const valeurB = parseInt(champB.value);
if (isNaN(valeurA) || isNaN(valeurB)) {
alert('Veuillez entrer des nombres valides.');
return;
}
alert('Somme : ' + (valeurA + valeurB));
});
};
</script>
Conversion implicite :
L'opérateur == tente de convertir les opérandes au même type avant comparaison, tandis que === (égalité stricte) compare à la fois la valeur et le type.
console.log(5 == '5'); // true (conversion implicite)
console.log(5 === '5'); // false (types différents)
console.log('10' + 2); // '102' (concaténation de chaîne)
console.log('10' - 2); // 8 (conversion numérique implicite)
- Closures (Fermetures)
Une closure est créée lorsqu'une fonction interne accède à des variables d'une fonction externe, même après que cette fonction externe a terminé son exécution. Cela permet de créer des données privées et des fabriques de fonctions.
<script>
function creerCompteur() {
let compteur = 0; // Variable privée
return {
incrementer: function() {
compteur++;
console.log('Valeur actuelle : ' + compteur);
},
getValeur: function() {
return compteur;
}
};
}
const monCompteur = creerCompteur();
monCompteur.incrementer(); // 1
monCompteur.incrementer(); // 2
console.log(monCompteur.getValeur()); // 2
</script>
- Conventions de nommage
Des noms explicites et cohérends améliorent la lisibilité et la maintenabilité du code. La convention camelCase est standard en JavaScript (maVariable, calculerTotal).
- Valeurs truthy et falsy
En JavaScript, les valeurs sont évaluées comme true (truthy) ou false (falsy) dans un contexte booléen.
- Falsy :
false,0,""(chaîne vide),null,undefined,NaN. - Truthy : Toutes les autres valeurs, y compris
"0",[],{},function(){}.
- Manipulation d'objets JSON
Les objets JSON (ou littéraux d'objet) stockent des paires clé-valeur. La boucle for...in permet d'itérer sur leurs propriétés.
<script>
const inventaire = {
pommes: 15,
bananes: 8,
oranges: 22
};
for (const article in inventaire) {
if (inventaire.hasOwnProperty(article)) {
console.log(article + ' : ' + inventaire[article] + ' en stock');
}
}
</script>