< Javascript >

JavaScript est un langage de programmation utilisé principalement pour rendre les pages web interactives. Il fonctionne dans le navigateur et permet d’ajouter des animations, de modifier du contenu et de répondre aux actions des utilisateurs.

Les variables

Une variable en JavaScript est comme une boîte dans laquelle on peut stocker une information (un nombre, un texte, une couleur, etc.). Ensuite, on peut réutiliser cette information plus tard dans le programme.

let espece = "oxalis"; // Chaîne de caractères (string)
let hauteur: = 25;       // Nombre (number)
let plante = true;     // Booléen (true/false)

Les types de données : string, number, boolean, null, undefined;

Exemple mathématique:

let total = 10 + 5; // Addition → 15
let reste = 10 % 3; // Modulo (reste de division) → 1

Les conditions

let hauteur = 50; // Hauteur en cm

if (hauteur > 100) {
    console.log("C'est une très grande fleur 🌳 !");
} else if (hauteur >= 50) {
    console.log("C'est une fleur de taille moyenne 🌹 !");
} else if (hauteur > 20) {
    console.log("C'est une petite fleur 🌼 !");
} else {
    console.log("C'est une très petite fleur 🌱 !");
}

let couleurFleur = "rouge";

if (couleurFleur == "rouge") {
    console.log("Cette fleur est une rose 🌹 !");
} else if (couleurFleur == "jaune") {
    console.log("C'est un tournesol 🌻 !");
} else if (couleurFleur == "bleue") {
    console.log("C'est une hortensia 🔵 !");
} else {
    console.log("Je ne connais pas cette fleur 🌼.");
}

let aPluAujourdhui = false;  // Il n'a pas plu aujourd'hui
let solSec = true;           // Le sol est sec
let planteResistante = false; // Ce n'est pas une plante résistante à la sécheresse

if (!aPluAujourdhui && solSec && !planteResistante) {
    console.log("💧 Il faut arroser la fleur !");
} else {
    console.log("🚫 Pas besoin d'arroser.");
}

Les fonctions

Une fonction en JavaScript est un bloc de code réutilisable qui effectue une tâche spécifique. Elle permet d’éviter de répéter du code et d’organiser un programme plus efficacement.

Structure d’une fonction en JavaScript

Une fonction a trois parties principales :

1️⃣ Déclaration : On crée la fonction avec function + un nom. 2️⃣ Instructions : Le code à exécuter est mis entre {}. 3️⃣ Appel : On utilise la fonction en écrivant son nom suivi de ().

function arroserFleur(niveauHumidite) {
    if (niveauHumidite < 30) {
        return "💧 Arrose la fleur, elle a soif !";
    } else {
        return "✅ Pas besoin d'arroser pour l'instant.";
    }
}

console.log(arroserFleur(20)); // "💧 Arrose la fleur, elle a soif !"
console.log(arroserFleur(50)); // "✅ Pas besoin d'arroser pour l'instant."

Manipulation du DOM

Le DOM (Document Object Model) représente la page web sous forme d'un arbre. Par exemple, un <div>, un <h1>, un <p>, etc. sont des éléments du DOM que l'on peut manipuler avec JavaScript.

Exemple ajouter une fleur à la liste:

HTML:

<ul id="listeFleurs">
    <li>Rose</li>
    <li>Tulipe</li>
</ul>
<button id="ajouterFleur">Ajouter une fleur</button>

Javascript:

// Ajouter un événement "click" au bouton pour ajouter une fleur à la liste
document.getElementById("ajouterFleur").addEventListener("click", function() {
        let nouvelleFleur = document.createElement("li"); // Créer un élément <li>
        nouvelleFleur.innerText = "Orchidée 🌸"; // Donner un nom à la fleur
        document.getElementById("listeFleurs").appendChild(nouvelleFleur); // Ajouter la fleur à la liste
});