By Leave a Comment on 20-Interaction avec l’utilisateur dans une page web

voir blog

consignes pour le projet : hauteur du plafond nuageux.

Le travail doit être rendu à la fin de la séance du jeudi 11 Décembre.

Il est recommander de bien comprendre le convertisseur de monnaie pour réaliser votre projet

Calculer et afficher en ligne la hauteur du plafond nuageux à partir de la température et du taux d’humidité.

Trois ressources pour vous aider :
base d’un nuage
point de rosée
math-javascript

Le travail doit être rendu sous la forme d’un fichier archive votre_nom.zip

il faut donc créer un dossier votre_nom

dans ce dossier 4 fichiers

  1. une image
  2. un fichier en .js
  3. un fichier .html
  4. un fichier .css

compresser le dossier pour obtenir votre_nom.zip

envoyer le fichier unique par mail : prof.yb.lfm@gmail.com

pour être certain que l’envoi ne soit pas bloqué, modifiez l’extension de votre fichier .js en .txt avant de compresser. le dossier

1)HTML le langage des pages web

L’activité précédente nous a montré la séparation entre le contenu qui est géré par le code HTML et le style par le code CSS.

HTML : HyperText MarkupLangage

Une page web est un type de document. HTML est un langage de description des pages web basé sur des balises destinées au navigateur.

CSS : Cascading Style Sheet (feuille de style)

Au langage HTML on associe le langage CSS pour la mise en forme.

DOM : Document Object Model ou DOM

Le DOM est un arbre créé par le navigateur pour représenter la page.La racine de l’arbre est <html>

2)Javascript : un langage de programmation pour les pages web

Activité 2 :html + javascript Pour ajouter du code javascript dans une page html il suffit d’écrire le code entre deux balises: <script>…..</script> Par la suite on placera le code javascript dans un fichier séparé.

  • Tapez le code ci-dessous dans un éditeur de texte comme notepad++
  • Enregistrer le fichier au format html
  • Examiner le fichier (clic droit) avec un navigateur
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>tjs003</title>
  </head>
  <body>
    <h3 id="date"></h3>
    <h4 id="TITRE"></h4>
    <p id="texte"></p>

    <script>
      // On crée un objet Date
      const jour = new Date();
      // Affichage dans un format lisible en français
      document.getElementById("date").textContent =
        jour.toLocaleString("fr-FR");

      document.getElementById("TITRE").textContent = "BONJOUR !";

      const paragraphe = document.getElementById("texte");
      paragraphe.style.color = "#FF00AF";
      paragraphe.textContent = "Hello World !";
    </script>
  </body>
</html>

Si vous souhaitez aller plus loin :cliquez ici

Dans cette seconde activité nous avons vu comment manipuler un document hml en javascript grâce à des identifiants attribués aux balises.La méthode JavaScript getElementById() nous a permis de récupérer les informations d’une balise identifiée par son id pour effectuer des modifications.

C’est le DOM qui permet au script d’examiner et de modifier le contenu affiché par le navigateur web.

Vous avez ci-dessous une représentation du DOM de la page de l’activité 2.

En 1995 Brendan Eich crée le langage javascript. Aujourd’hui, presque toutes les pages Web contiennent du code JavaScript. JavaScript est un langage de programmation associé au langage HTML.

Le développeur internet code ses pages HTML en y intégrant des sources JavaScript. Le visiteur, par l’intermédiaire de son navigateur, charge le code des pages.

C’est le navigateur (coté client) qui interprète les codes HTML et JavaScript.

JavaScript est un langage objet et événementiel. Le développeur peut créer des objets sur la page, avec des propriétés et des méthodes et leur associer des actions en fonction d’événements déclenchés par le visiteur (passage de souris, clic, saisie clavier, etc…)

3)Exemples d’interactions avec l’utilisateur

Dans ce qui suit nous allons simplement survoler ce langage.

Pour vous aider dans vos projets vous pourrez trouver toutes les références dont vous avez besoin sur w3school : cliquer ici

3-1)Gestion d’un clic de souris

Activité 3 : Un bouton pour interagir

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>tjs004</title>
  </head>
  <body>
    <p>Cliquez sur le bouton pour enregistrer votre pseudo</p>

    <button type="button" onclick="demanderNom()">Cliquez</button>

    <p id="test"></p>

    <script>
      function demanderNom() {
        let nom = prompt("Entrez votre nom", "pseudo");
        const zoneTexte = document.getElementById("test");

        if (nom === null || nom.trim() === "") {
          zoneTexte.textContent = "Vous n'avez pas saisi de pseudo.";
        } else {
          zoneTexte.textContent = "Bonjour " + nom + " !";
        }
      }
    </script>
  </body>
</html>

variables : https://www.w3schools.com/js/js_variables.asp

boutons :https://www.w3schools.com/tags/tag_button.asp

prompt() : https://www.w3schools.com/jsref/met_win_prompt.asp

  Comprendre puis modifier le programme en modifiant l’événement déclencheur de l’interaction avec l’utilisateur. Vous trouverez d’autres événements HTML ici

L’utilisateur déclenche un événement (en cliquant sur le bouton par exemple). Cet événement entraîne l’exécution d’un code JavaScript sur la machine de l’utilisateur.

Les événements sont donc des actions de l’utilisateur qui permettent d’ajouter de l’interactivité à une page web.

Tester en ligne d’autres exemples sur la gestion des événements :

cliquer ici

3-2)clic ,entrée clavier , tests, calculs…

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Alea</title>
    <link rel="icon" href="alea.ico">
    <script src="alea.js"></script>
  </head>
  <body>
    <h2>Tirage aléatoire</h2>
    <p>Saisir un nombre entre 1 et 10 :</p>
    <input id="nombre" type="number" min="1" max="10">

    <button type="button" onclick="myFunction()">Envoyer</button>

    <h3 id="reponse"></h3>
  </body>
</html>


function myFunction() {
  var x, y, text;

  // Récupération et conversion en nombre entier
  x = parseInt(document.getElementById("nombre").value, 10);

  // Tirage d'un entier entre 1 et 10 inclus
  y = getRandomInt(1, 10);

  if (isNaN(x) || x < 1 || x > 10) {
    text = "Non autorisé";
  } else {
    if (x === y) {
      text = "gagné bravo !";
    } else {
      text = "perdu ! la bonne réponse était " + y;
    }
  }

  document.getElementById("reponse").textContent = text;
}

function getRandomInt(min, max) {
  // renvoie un entier entre min et max, bornes incluses
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

4) projets

4-1)Projet 1 : convertisseur de monnaies

Lien vers convertisseur est en ligne

  • Inspecter la page
  • créer un dossier monnaie et placer les 4 fichiers dans le dossier .
  • Tester la page web en local
  • Tester la page sur un serveur web local (si disponible)

Explication ligne par ligne de chaque fichier : HTML, CSS, et JS.

📌 1. Explication du fichier HTML (index.html)

<!DOCTYPE html>

➡ Indique que le document est en HTML5 (la version actuelle du langage).

<html lang="fr">

➡ Le code HTML commence ici et indique que la langue principale est le français.

<head>

➡ Début de la partie invisible qui contient les informations du site (titre, liens, etc.).

    <meta charset="UTF-8">

➡ Indique que les caractères utilisés sont en UTF-8 (important pour les accents).

    <title>Convertisseur de devises</title>

➡ Texte affiché dans l’onglet du navigateur.

    <link rel="stylesheet" href="styles.css">

➡ On relie le fichier HTML à notre fichier CSS (styles visuels).

    <link rel="icon" type="image/png" href="monnaie.png">

➡ Définit l’icône affichée dans l’onglet (favicon).

</head>

➡ Fin de la section d’informations.

<body>

➡ Début de la partie visible de la page.

<h1>Convertisseur</h1>

➡ Titre principal.

<img src="devise.png" alt="Image devise" class="logo">

➡ Affiche une image.
class="logo" permet de la styliser via le CSS.

<a href="https://www.boursorama.com/bourse/devises" target="_blank">
    Cours des devises
</a>

➡ Lien vers un site externe.
target="_blank" → s’ouvre dans un nouvel onglet.

🧾 Le formulaire
<div class="form-container">

➡ Conteneur (boîte) pour organiser les champs.

Chaque zone suit cette forme :

<label>
    Devise actuelle :
    <input type="text" id="devise" placeholder="Ex: EUR">
</label>

➡ label : texte descriptif
➡ input : champ dans lequel l’utilisateur tape quelque chose
➡ id="devise" : permet de retrouver ce champ facilement dans le JavaScript
➡ placeholder : exemple affiché en gris clair à l’intérieur

Les autres champs suivent la même logique :

  • nouvelle devise
  • taux de conversion
  • somme à convertir
<button id="convertir">Convertir</button>

➡ Bouton qui déclenche la conversion lorsque l’on clique dessus.

<h2 id="resultat"></h2>

➡ Zone où le résultat de la conversion va s’afficher.

<script src="script.js"></script>

➡ Charge le fichier JavaScript pour que la page devienne interactive.

</body>
</html>

➡ Fin de la page HTML.

🎨 2. Explication du fichier CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background: white;
    padding: 20px;
}

➡ Donne une police agréable
➡ Centre le contenu
➡ Met du padding (marges intérieures)

.logo {
    width: 200px;
    margin-bottom: 15px;
}

➡ Donne une taille à l’image
➡ Ajoute un espace en bas

.form-container {
    margin: 20px auto;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

➡ Centrage automatique
➡ Largeur fixée
➡ Organisation verticale (flexbox)
➡ Espacement entre les champs

label {
    text-align: left;
    font-weight: bold;
}

➡ Les descriptions des champs sont en gras et alignées à gauche.

input {
    width: 100%;
    padding: 6px;
    margin-top: 4px;
    border: 1px solid #aaa;
    border-radius: 5px;
}

➡ Les zones de texte sont jolies et arrondies
➡ Le padding agrandit l’intérieur
➡ Le border-radius arrondit les coins

button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    background: #0077ff;
    color: white;
    border: none;
    border-radius: 6px;
    transition: 0.2s;
}

➡ Look moderne pour le bouton
➡ cursor: pointer → main quand on passe dessus
➡ transition pour un effet doux

button:hover {
    background: #005fcc;
}

➡ Change la couleur quand on passe la souris dessus.

#resultat {
    margin-top: 20px;
    color: #0a4;
    font-weight: bold;
}

➡ Zone du résultat mise en avant en vert.

⚙️ 3. Explication du fichier JavaScript (script.js)

document.getElementById("convertir").addEventListener("click", () => {

➡ On récupère le bouton grâce à son id="convertir"
➡ On dit : “Quand on clique dessus, exécute ce code”.

🔍 Récupération des valeurs entrées :
const devise = document.getElementById("devise").value.trim();

➡ On lit ce que l’utilisateur a écrit dans le champ « devise ».
➡ .trim() enlève les espaces inutiles.

Même chose pour les autres champs :

  • newDevise
  • coef
  • somme
const result = document.getElementById("resultat");

➡ Zone où afficher le résultat.

⚠ Vérification des saisies
if (!devise || !newDevise || isNaN(coef) || isNaN(somme)) {

➡ Si un champ est vide ou mal rempli…

result.textContent = "Veuillez remplir toutes les informations correctement.";
result.style.color = "red";
return;

➡ On affiche un message d’erreur en rouge
➡ return arrête le code ici

🧮 Calcul de la conversion
const montantConverti = coef * somme;

➡ Formule : somme × taux de conversion

📤 Affichage du résultat
result.style.color = "#0a4";
result.textContent = `${somme.toFixed(2)} ${devise} valent ${montantConverti.toFixed(2)} ${newDevise}`;

➡ Change la couleur du texte en vert
➡ toFixed(2) → arrondi à 2 décimales
➡ Affiche la phrase complète

🎉 Résumé pour débutant

FichierRôle
HTMLStructure de la page (titres, images, champs, boutons)
CSSApparence de la page (couleurs, disposition, tailles)
JavaScriptLogique : récupère les valeurs, calcule, affiche

4-2)Projet 2

Problème 2 :Plafond nuageux


Calculer et afficher en ligne la hauteur du plafond nuageux à partir de la température et du taux d’humidité.

Trois ressources pour vous aider :
base d’un nuage
point de rosée
math-javascript

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *