Installer et configurer VSCode

Créer une page HTML avec VSCode

Ajouter du CSS sur une page HTML

Utiliser display flex en CSS

Introduction à JavaScript

HTML/CSS

CSS3

Javascript

#### Qu'est-ce que JavaScript ? 🤔

JavaScript est **un langage de programmation** qui permet de rendre votre page web dynamique. 
Grâce à JavaScript, vous pouvez faire des choses amusantes comme :

- Faire apparaître des alertes
- Réagir aux actions de l'utilisateur (comme un clic)
- Modifier le contenu de la page sans la recharger

#### Comment ajouter du JavaScript à votre page ? 🛠️

Pour inclure du JavaScript dans votre page HTML, il suffit de créer un fichier index.js dans le dossier `js` de vôtre projet. Voici comment appeler votre fichier JavaScript :

```html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ma première page avec JavaScript</title>
		
  </head>
  <body>
    <h1>Bienvenue sur mon site !</h1>
		<script type="text/javascript" src="js/index.js"></script>
  </body>
</html>
```

Les balises `<script>` indiquent au navigateur que vous allez appeler un ficher JavaScript. Vous pouvez placer ce script soit dans le `<head>`, soit juste avant la fin de la balise `</body>` (c'est préférable pour que le HTML se charge avant d'exécuter le JavaScript).

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

### Étape 1 : Afficher une alerte avec JavaScript 📢

Commençons doucement ! Ajoutons un message d'alerte qui apparaît lorsque la page est chargée.

```javascript
  alert("Salut ! Bienvenue sur mon super site !");
```

Le code `alert()` est une fonction JavaScript qui affiche une boîte de dialogue avec un message. Ce genre de pop-up est souvent utilisé pour avertir ou informer l'utilisateur.

#### Explication
- **`alert()`** : C'est comme un petit panneau qui s'affiche et dit : "Hé, regarde ça !". Le texte que vous mettez entre les parenthèses sera affiché.

Essayez de sauvegarder votre fichier HTML. Vous devriez voir apparaître une pop-up avec votre message.


### Étape 2 : Modifier du texte avec JavaScript ✏️

Maintenant, ajoutons un peu de dynamisme à votre page en modifiant le contenu de la page avec JavaScript.

1. Ajoutez un élément HTML avec un identifiant (`id`) que vous allez manipuler avec JavaScript. Par exemple, un paragraphe avec du texte.

```html
<body>
  <h1>Bienvenue sur ma page interactive !</h1>
  <p id="mon-paragraphe">Je suis un texte ennuyeux. Changez-moi !</p>

<script type="text/javascript" src="js/index.js"></script>
</body>
```

2. Utilisez JavaScript pour modifier ce texte :

```javascript
  // Sélectionnez l'élément avec l'id "mon-paragraphe"
  document.getElementById("mon-paragraphe").textContent = "Bravo ! Le texte a changé grâce à JavaScript.";
```

#### Explication
- **`document.getElementById("mon-paragraphe")`** : Cette fonction permet de sélectionner un élément HTML ayant un certain `id` (ici, "mon-paragraphe").
- **`.textContent`** : C'est la propriété qui contient le texte à l'intérieur de l'élément. En le modifiant, vous changez le texte qui s'affiche à l'écran.

Sauvegarder, et vous verrez que le texte a été modifié automatiquement par JavaScript !

---

### Étape 3 : Réagir aux clics d'un bouton 🎯

Une page interactive n'est rien sans boutons ! Voyons comment faire réagir votre page à un clic.

1. Ajoutez un bouton à votre HTML :

```html
<body>
  <h1>Bienvenue sur ma page interactive !</h1>
  <p id="mon-paragraphe">Cliquez sur le bouton pour changer ce texte !</p>
  <button id="mon-bouton">Cliquez-moi !</button>

<script type="text/javascript" src="js/index.js"></script>
</body>
```

2. Utilisons JavaScript pour détecter quand ce bouton est cliqué et changer le texte du paragraphe.

```javascript
  // Sélectionnez le bouton
  const bouton = document.getElementById("mon-bouton");

  // Ajoutez un écouteur d'événement pour détecter le clic
  bouton.addEventListener("click", function () {
    document.getElementById("mon-paragraphe").textContent =
      "Vous avez cliqué sur le bouton !";
  });
```

#### Explication
- **`document.getElementById("mon-bouton")`** : Sélectionne le bouton.
- **`addEventListener("click", function() {...})`** : Ajoute un "écouteur" au bouton qui attend qu'on clique dessus. Quand l'utilisateur clique, la fonction à l'intérieur est exécutée.
- **`function () { ... }`** : C'est une fonction JavaScript. Elle contient les instructions qui seront exécutées quand l'événement (ici, le clic) se produit.

Cliquez sur le bouton et voyez le texte du paragraphe changer !

---

### Étape 4 : Interagir avec l'utilisateur via des saisies 📝

Maintenant, ajoutons un champ de texte où l'utilisateur peut écrire quelque chose, et nous afficherons son texte avec JavaScript.

1. Ajoutez un champ de texte et un bouton à votre HTML :

```html
<body>
  <h1>Bienvenue sur ma page interactive !</h1>
  <input type="text" id="champ-texte" placeholder="Écrivez ici..." />
  <button id="bouton-afficher">Afficher le texte</button>
  <p id="texte-affiche"></p>

<script type="text/javascript" src="js/index.js"></script>
</body>
```

2. Utilisez JavaScript pour récupérer et afficher le texte que l'utilisateur a entré :

```javascript
  // Sélectionnez les éléments
  const boutonAfficher = document.getElementById("bouton-afficher");
  const champTexte = document.getElementById("champ-texte");
  const texteAffiche = document.getElementById("texte-affiche");

  // Ajoutez l'événement pour détecter le clic sur le bouton
  boutonAfficher.addEventListener("click", function () {
    // Récupérez le texte saisi par l'utilisateur
    const texteSaisi = champTexte.value;

    // Affichez ce texte dans le paragraphe
    texteAffiche.textContent = "Vous avez écrit : " + texteSaisi;
  });
```

#### Explication
- **`champTexte.value`** : Récupère la valeur entrée par l'utilisateur dans le champ texte.
- **`texteAffiche.textContent`** : Affiche cette valeur dans le paragraphe.

Essayez d'entrer du texte dans le champ, cliquez sur le bouton, et voyez comment JavaScript réagit !

---

### Conclusion : Bravo pour vos premiers pas en JavaScript 🎉

Vous venez d'apprendre les bases de **JavaScript** : comment ajouter du code à une page web, manipuler du texte, réagir aux actions de l'utilisateur, et afficher du contenu dynamique. 🎈

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

Ce tutoriel va vous guider pas à pas pour que vous compreniez tous les concepts clés du développement web. À la fin de cette formation, vous serez capable de maîtriser HTML, CSS, JavaScript et bien plus encore.