JS-Win

Accueil

Bienvenue sur Win JS, la plateforme pour apprendre JavaScript pas à pas avec quelques exemples visibles.

Win JS

À propos

Ce site vous aide à comprendre les bases de JavaScript : variables, conditions, boucles, tableaux et manipulation du DOM.

Variables

Une variable est un espace pour stocker une information que vous pouvez réutiliser.

let : variable modifiable
const : valeur fixe

    
let nom = "Ali";
const pays = "Burkina Faso";
console.log("Je m'appelle "+nom+" 
et je viens du "+pays);

Exemple de code


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Variables JS</title>
</head>

<body>

  <h1>Les variables en JavaScript</h1>

  <script>
    let age = 18;
    const nom = "Gouba";

    console.log("Nom :", nom);
    console.log("Âge :", age);

    
  </script>

</body>
</html>

Conditions

Les conditions permettent d'exécuter du code selon une situation.

let age = 17;
if(age >= 18){
  console.log("Vous êtes majeur");
}else{
  console.log("Vous êtes mineur");
}

résultat1:

let note = 14;
if(note >= 16){
  console.log("Très bien");
}else if(note >= 10){
  console.log("Admis");
}else{
  console.log("Échec");
}

résultat2:

Exemple de code :


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Conditions en JavaScript</title>
</head>

<body>

  <h1>Les conditions en JavaScript</h1>
  <p>Ouvre la console pour voir les résultats</p>

  <script>
    let note = 14;

    if (note >= 16) {
      console.log("Très bien 🎉");
    } else if (note >= 10) {
      console.log("Admis 🙂");
    } else {
      console.log("Ajourné ❌");
    }
  </script>

</body>
</html>

Boucles

Les boucles répètent une action plusieurs fois.

// Boucle for
for(let i=1;i<=3;i++){
  console.log("For "+i);
}

// Boucle while
let j=1;
while(j<=3){
  console.log("While "+j);
  j++;
}

// Boucle do...while
let k=1;
do{
  console.log("Do "+k);
  k++;
}while(k<=3);

résultat1:

résultat2:

résultat3:

Exemple de code :


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Boucles while, do while et for</title>
</head>

<body>

  <h1>Les boucles while, do...while et for</h1>
  <p>Ouvre la console pour voir les résultats</p>

  <script>

    // Exemple avec while
    let compteur = 1;

    while (compteur <= 5) {
      console.log("while :", compteur);
      compteur++;
    }

    // Exemple avec do...while
    let nombre = 1;

    do {
      console.log("do while :", nombre);
      nombre++;
    } while (nombre <= 5);

    // Exemple avec for
    for (let i = 1; i <= 5; i++) {
      console.log("for :", i);
    }

  </script>

</body>
</html>

Tableaux

Un tableau (Array) stocke plusieurs valeurs dans une seule variable. « Dans un tableau, le premier élément se trouve à l’indice 0. Autrement dit, on commence à compter à partir de 0 et non de 1. »

let fruits = 
["Pomme","Banane","Mangue"];

    console.log(fruits[0]);
    👇

    console.log(fruits[1]);
    👇

    console.log(fruits[2]);
    👇


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Tableaux en JavaScript</title>
</head>

<body>

  <h1>Les tableaux (fruits) en JavaScript</h1>
  <p>Ouvre la console pour voir les résultats</p>

  <script>

    // Création d'un tableau de fruits
    let fruits = ["Pomme", "Banane", "Mangue", "Orange"];

    // Afficher tout le tableau
    console.log("Tableau complet :", fruits);

    // Afficher chaque fruit individuellement
    console.log("Premier fruit :", fruits[0]);
    console.log("Deuxième fruit :", fruits[1]);
    console.log("Troisième fruit :", fruits[2]);
    console.log("Quatrième fruit :", fruits[3]);

    // Parcourir le tableau avec une boucle for
    for (let i = 0; i < fruits.length; i++) {
      console.log("Fruit via boucle :", fruits[i]);
    }

    // Ajouter un fruit à la fin
    fruits.push("Kiwi");
    console.log("Après ajout :", fruits);

    // Supprimer le dernier fruit
    fruits.pop();
    console.log("Après suppression du dernier :", fruits);

  </script>

</body>
</html>

DOM

Le DOM (Document Object Model) est une représentation de ta page HTML sous forme d’arbre que JavaScript peut lire et modifier. Chaque élément HTML devient un objet que on peut manipuler : modifier du texte, changer le style, ajouter ou supprimer des éléments, etc.

1. Sélectionner des éléments

Pour manipuler le DOM, il faut d’abord sélectionner les éléments :

document.getElementById : sélectionne un élément avec son id unique.
document.getElementsByClassName : sélectionne tous les éléments avec une certaine classe.
document.getElementsByTagName : sélectionne tous les éléments d’un type (p, div, li...).
document.querySelector : sélectionne le premier élément qui correspond à un sélecteur CSS.
document.querySelectorAll : sélectionne tous les éléments correspondant à un sélecteur CSS.

2. Exemple pratique

  const bouton = document.querySelector("#monBouton");
bouton.addEventListener("click", () => {
alert("Tu as cliqué sur le bouton !");
});

  const nouveauPara = document.createElement("p");
nouveauPara.textContent =
 "Je suis un
 paragraphe ajouté dynamiquement avec une couleur orange!";
nouveauPara.style.color = "orange";
document.getElementById
("nav")
.appendChild(nouveauPara);

Exemple de code :


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Manipulation du DOM</title>
  <style>
    #nav {
      border: 2px solid black;
      padding: 10px;
      margin-top: 10px;
    }
    button {
      margin-top: 10px;
      padding: 8px 12px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <h1>Manipulation du DOM avec JavaScript</h1>

  <!-- Bouton qui déclenche un événement -->
  <button id="monBouton">Clique-moi !</button>

  <!-- Conteneur pour ajouter dynamiquement des paragraphes -->
  <div id="nav">
    <p>Voici le conteneur de paragraphes dynamiques.</p>
  </div>

  <script>
    // Sélectionner un élément avec querySelector
    const bouton = document.querySelector("#monBouton");

    // Ajouter un événement au clic
    bouton.addEventListener("click", () => {
      alert("Tu as cliqué sur le bouton !");
    });

    // Créer dynamiquement un nouveau paragraphe
    const nouveauPara = document.createElement("p");
    nouveauPara.textContent = "Je suis un paragraphe ajouté dynamiquement avec une couleur orange!";
    nouveauPara.style.color = "orange";

    // Ajouter le paragraphe dans le conteneur avec l'id "nav"
    document.getElementById("nav").appendChild(nouveauPara);
  </script>

</body>
</html>

© Tous droits réservés |Gouba kirbouré Godwin-2026.Ce site n'utilise aucune information personnelle de l'utilisateur.