JavaScript
JavaScript est un langage de programmation utilisé principalement pour le
développement web. Il permet d'ajouter de l'interactivité et de la dynamique aux pages
web.
I. Variables :
• Utilisez le mot-clé "let" ou "const" pour déclarer des variables.
• Exemple :
let age = 25;
const nom = "John";
II. Types de données :
• Les types de données courants en JavaScript sont les nombres, les
chaînes de caractères, les booléens, les tableaux et les objets.
• Exemple :
let num = 10
let nom = "John"
let estVrai = true
let tableau = [1, 2, 3]
let objet = { clé: "valeur" }
III. Opérateurs:
• JavaScript propose des opérateurs mathématiques (+, -, *, /) ainsi
que des opérateurs de comparaison (==, ===, <, >, etc.).
• Exemple :
let resultat = 10 + 5
let estPlusGrand = 8 > 4
IV. Instructions conditionnelles :
• Utilisez les instructions "if", "else if" et "else" pour exécuter des
blocs de code conditionnellement.
• Exemple :
let age = 18;
if (age >= 18) {
console.log("Vous êtes majeur.");
} else {
console.log("Vous êtes mineur.");
}
V. Les Boucles :
• Les boucles permettent de répéter des actions simplement et
rapidement.
• Différentes boucles fournies par JavaScript : "for","while", "do ..while"
• Exemple :
for (let i = 0; i < 5; i++) {
console.log(i)
}
let i = 0
while (i < 5) {
console.log(i)
i++
}
do{
console.log(i)
i++
}while (i<5)
VI. Les Fonctions :
• Les fonctions permettent de regrouper un bloc de code réutilisable.
• Exemple :
function saluer(nom) {
console.log("Bonjour, " + nom + " !");
}
saluer("John");
VII. Le DOM (Document Object Model)
Le DOM est une représentation hiérarchique des éléments d'une
page web, qui permet de les manipuler à l'aide de JavaScript.
1. Sélectionner des éléments :
• Utilisez les méthodes `getElementById`, `getElementsByClassName` ou
`getElementsByTagName` pour sélectionner un ou plusieurs éléments du DOM.
• Exemples :
const element = document.getElementById("monElement");
const elements = document.getElementsByClassName("maClasse");
const elements = document.getElementsByTagName("div");
2. Manipuler les propriétés d'un élément :
• Vous pouvez accéder et modifier les propriétés d'un élément, telles que
`innerHTML`, `textContent`, `value`, `src`, `className`, etc.
• Exemples :
element.innerHTML = "<p>Nouveau contenu</p>";
element.textContent = "Texte mis à jour";
input.value = "Nouvelle valeur";
img.src = "nouvelle_image.jpg";
element.className = "nouvelleClasse";
3. Manipuler les styles CSS :
• Utilisez la propriété `style` d'un élément pour accéder et modifier
les styles CSS.
• Exemples :
element.style.color = "red";
element.style.fontSize = "20px";
4. Ajouter et supprimer des classes CSS :
• Utilisez les méthodes `classList.add`, `classList.remove` et
`classList.toggle` pour ajouter, supprimer ou basculer des classes CSS sur un
élément.
• Exemples :
element.classList.add("nouvelleClasse");
element.classList.remove("maClasse");
element.classList.toggle("active");
5. Gérer les événements :
• Utilisez la méthode `addEventListener` pour écouter et réagir à des événements
sur un élément.
• Exemple :
element.addEventListener("click", fonctionDeGestion);
6. Créer et ajouter des éléments :
• Utilisez les méthodes `createElement` et `appendChild` pour créer et ajouter de
nouveaux éléments dans le DOM.
• Exemple :
const nouvelElement = document.createElement("div");
parentElement.appendChild(nouvelElement);
7. Supprimer des éléments :
• Utilisez la méthode `remove` pour supprimer un élément du DOM.
• Exemple :
Element.remove()
