Interaction avec l’utilisateur dans une page web

Categories:Leçons

par Anna |

on décembre 7, 2021

1 – HTML le langage des pages web

Le code HTML et le code CSS sont bien séparés comme le montre cette activité.

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)

On associe le langage CSS au langage HTML 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>

Activité 1 : http://yb-isn.fr/2021/nsi/anna/2021/12/07/initiation-au-html/

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

<html>
  <head>
    <meta charset="UTF-8">
    <title>tjs003</title>    
  </head>
  <body>
    <h3 id="date"></h3>
    <h4 id="TITRE" ></h4>
    <p id="texte"></p>
    
  </body>
      <script >
      var jour = new Date();
      document.getElementById("date").innerHTML = jour;
      document.getElementById("TITRE").innerHTML="BONJOUR !";            
      document.getElementById("texte").style.color = "#FF00AF";
      document.getElementById("texte").innerHTML="Hello World !";
      </script>        
</html>

Rendu :

3 – Exemples d’interactions avec l’utilisateur

1 ) Gestion d’un clic de souris

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>tjs004</title>    
  </head>
<body>
<p>Cliquez sur le bouton pour enregistrer votre pseudo</p>
<button onclick="myFunction()">Cliquez</button>
<p id="test"></p>
<script>
function myFunction() {
  var nom = prompt("Entrez votre nom","pseudo");
    document.getElementById("test").innerHTML =
    "Bonjour " + nom;
  }
</script>
</body>
</html>

Rendu :

Lorsqu’on clique sur le bouton :

On rentre son pseudo :

Le site affiche alors :

La partie en Java permet d’interagir et de créer des objets sur la page :

Common HTML Events

Here is a list of some common HTML events:

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page

2) Clic, entrée clavier, tests, calculs…

Tirage aléatoire :

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="alea.ico" />
    <title>Alea</title>
    <meta charset="UTF-8" />
    <script src="alea.js"></script>
    <body>
        <h2>tirage aléatoire</h2>
        <p>Saisir un nombre entre 1 et 10:</p>
        <input id="nombre">
        <button type="button" onclick="myFunction()">Envoyer</button>
        <h3 id="reponse"></h3>
    </body>
</html>

Pour définir « myFunction( ) » et « reponse » :

function myFunction() {
    var x, y, text;
    x = document.getElementById("nombre").value;
    y = getRandomInt(1, 10)
    if (isNaN(x) || x < 1 || x > 9) {
        text = "Non autorisé";
    } else {
        if (x == y) {
            text = "gagné bravo !";
        } else {
            text = "perdu ! la bonne réponse était " + y.toString();
        }
    }
    document.getElementById("reponse").innerHTML = text;
}
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;

Rendu :

On rentre un nombre :

Si on à la mauvaise réponse :

Si on à la bonne réponse :

4 – Projets

1) Convertisseur de monnaie

<html lang="fr">
    <head>
        <title>Euros</title>
        <meta charset="UTF-8"/>
		<link rel="icon" type="image/png" href="monnaie.png" />
        <script>
            function affiche(){
				var devise=prompt('votre monnaie?');
				var newDevise=prompt('nouvelle monnaie?');
                var coef=parseFloat(prompt('combien vaut 1 '+devise+ ' en '+newDevise ));
				var somme=parseFloat(prompt('votre somme en '+ devise));				
                var monnaie=coef*somme;
				var resultat=somme.toFixed(2)+" "+devise+" valent "+monnaie.toFixed(2)+" "+ newDevise
                alert(resultat);
				document.getElementById("test").innerHTML ="<b>"+resultat+"</b>";
                }

        </script>
    </head>
    
    <body bgcolor="white">
	
		<h1>Convertisseur</h1>
		<img src="devise.png" alt="image" style="width:200px"><br>
		<a href="https://www.boursorama.com/bourse/devises" target="_blank">Cours des devises</a><br><br>        
        <button onclick="affiche()">Cliquez</button>
		<h2 id="test"></h2>
    </body>
</html>

2) Plafond nuageux

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

Résolution avec Python :

1) On calcule la température de rosée qui est la température à partir de laquelle apparait la première goutte de liquide. Cette température permet de calculer la hauteur du plafond nuageux.

import math

a=17.27
b=237.7

temperature=float(input("Température en °C  :  "))
humiditeRelative=float(input("Thumidité en%  entre 0 et 100  : "))

alpha=((a*temperature)/(b+temperature) +math.log(humiditeRelative/ 100))
tpreRosee = (b* alpha) / (a-alpha)
plafondNuage = 125 * (temperature -tpreRosee)

print("température de rosée = ",tpreRosee,"°C")
print("plafond Nuageux  = ",plafondNuage,"m")

2) Amélioration du calcul avec une fonction

import math

a=17.27
b=237.7

def plafondNuageux(tpre,tH):

  alpha=((a*tpre)/(b+tpre) +math.log(tH / 100))
  t_rosee = (b* alpha) / (a-alpha)
  plafondNuage = 125 * (tpre -t_rosee)
  return t_rosee,plafondNuage

tpreRosee,plafondNuage=plafondNuageux(20,50)

print("température de rosée = ",tpreRosee,"°C")
print("plafond Nuageux  = ",plafondNuage,"m")

3) On précise les types des arguments de la fonction et de la donnée retournée

import math

a=17.27
b=237.7

def plafondNuageux(tpre:float,tH:float)->tuple:

  alpha=((a*tpre)/(b+tpre) +math.log(tH / 100))
  t_rosee = (b* alpha) / (a-alpha)
  plafondNuage = 125 * (tpre -t_rosee)
  return t_rosee,plafondNuage

tpreRosee,plafondNuage=plafondNuageux(20,50)

print("température de rosée = ",tpreRosee,"°C")
print("plafond Nuageux  = ",plafondNuage,"m")

4) On documente la fonction

import math

a=17.27
b=237.7

def plafondNuageux(tpre:float,tH:float)->tuple:
  """
  La temperature doit être en °C et tH. l'humidité relative est comprise entre 0 et 100
  la fonction renvoi un tuple contenant la temperature de rosée puis le plafond nuageux.
  """

  alpha=((a*tpre)/(b+tpre) +math.log(tH / 100))
  t_rosee = (b* alpha) / (a-alpha)
  plafondNuage = 125 * (tpre -t_rosee)
  return t_rosee,plafondNuage

tpreRosee,plafondNuage=plafondNuageux(15,0.01)

print("température de rosée = ",tpreRosee,"°C")
print("plafond Nuageux  = ",plafondNuage,"m")

help(plafondNuageux)

5) Assertion : on demande au programme de tester des pré-conditions avant d’exécuter la fonction. lorsque la condition n’est pas vérifiée une erreur est déclenchée avec un message.

import math

a=17.27
b=237.7

def plafondNuageux(tpre:float,tH:float)->tuple:
  """
  La temperature doit être en °C et tH. l'humidité relative est comprise entre 0 et 100
  la fonction renvoi un tuple contenant la temperature de rosée puis le plafond nuageux.
  """
  assert tH>0 and tH<=100, 'th doit être >0 et <=100'
  assert type(tpre)==float or type(tpre)==int, ' la temperature est un entier ou un décimal'
  assert type(tH)==float or type (tH)==int , " le taux d'humidité est un entier ou un décimal"

  alpha=((a*tpre)/(b+tpre) +math.log(tH / 100))
  t_rosee = (b* alpha) / (a-alpha)
  plafondNuage = 125 * (tpre -t_rosee)
  return t_rosee,plafondNuage

tpreRosee,plafondNuage=plafondNuageux(0,1)

print("température de rosée = ",tpreRosee,"°C")
print("plafond Nuageux  = ",plafondNuage,"m")

Résolution avec JavaScript :

1) code html de la page web

<html lang="fr">
<head>
    <title>Nuages</title>
    <meta charset="UTF-8" />
    <link rel=" stylesheet" href="nuages.css" />
</head>
<script>
    function affiche() {
        var temperature =parseFloat(prompt('température en°C?'));
        var humiditeR =parseFloat(prompt('humidité relative en %?'));
        var a = 17.27;
        var b = 237.7;
        var meteo=""
        var alpha = a * temperature / (b + temperature) + Math.log(humiditeR * 0.01);
        var pointRosee = b * alpha / (a - alpha);
        var plafondNuage = 125 * (temperature - pointRosee)
        var plafondNuageFt =400*(temperature - pointRosee)
        if(isNaN(plafondNuage)||humiditeR>100||humiditeR<0||isNaN(humiditeR)){meteo="erreur"}
        else{
        meteo = "Le point de rosée est égal à " + pointRosee.toFixed(0) + "°C " +"et la base des nuages est à " + plafondNuage.toFixed(0) + "m .";
        meteo = meteo + "<br><b>soit " + plafondNuageFt.toFixed(0) + " ft .</b>";
        }
        document.getElementById("test").innerHTML = "<b>" + meteo + "</b>";
           }
</script>
<body>
    <h2>Hauteur du plafond nuageux</h2><br>
    <button class="button" onclick="affiche()">Calculateur</button><br><br>
    <h4 id="test"></h4>
    </body>
</html>

2) Exécution du code