Interaction avec l’utilisateur dans une page web

1)HTML le langage des pages web

Cette première activité nous montre bien 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

<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>
  Cliquez ici pour ouvrir la page distante pour tester des exemples en ligne: https://www.w3schools.com/js/js_htmldom_elements.asp    

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.

Si vous souhaitez aller plus loin :cliquez ici

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 vous pourrez trouvez toutes les références dont vous avez besoin sur w3school : cliquer ici

Vous devez prendre des notes au cours de la séance pour pouvoir produire une fiche papier (langage javascript ) qui sera relevée.

3-1)Gestion d’un clic de souris

Activité 3 : Un bouton pour interagir
<!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>
boutons : https://www.w3schools.com/js/js_variables.asp variables :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 Le même programme se trouve sur un serveur web distant : Cliquez 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…

Activité 4 : Tirage aléatoire
Après avoir analysé les scripts ci-dessous , expliquer sur feuille le fonctionnement du jeu. Le même programme se trouve sur un serveur web distant : Cliquez ici
<!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>
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;
Quelques liens vers W3scools Math : cliquer Conditions : cliquer

4) projets

4-1)Projet 1

Problème 1 :Réaliser un convertisseur de monnaies en ligne
  • monnaie 1 à convertir en monnaie 2
  • somme disponible (monnaie 1)
  • cours du jours de la monnaie 2
  • Afficher la somme convertie
https://www.w3schools.com/js/default.asp

corrigé : convertisseur de monnaie

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é. Proposer une fiche de réalisation manuscrite et faire valider par le professeur avant de commencer à coder. 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 *