Discussion :

[Kawarien]

Salut tous le monde
voila, je doit Créer un document HTML qui permet d'entrer 3 notes de Devoir, qui calcule et affiche la moyenne
obtenue en vert si elle est supérieure ou égale à 10 et en rouge dans le cas contraire.
es quelqu'un pourra bien m'expliquer ce que je doit faire , je doit dire aussi que suis nouveau en javascript , je me debrrouille en HTML / CSS.

[01001111]

Bonjour,

je te conseille d'utiliser, côté html, des champs input en type "text" ou bien des select (select seulement si les notes n'ont pas de virgule)
D'abord il faut récupérer leur valeur en utilisant l'évènement onchange, et l'attribut value permettra de sortir la valeur du champ.
Si input en type "text", tu peux tester leur valeur avec une expression régulière, comme celles-ci:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
if (/[0-9]{1,2}[\.,]?[0-9]*/.test(valeur)) {
      // les instructions ici seront lancées si un nombre à un ou deux chiffres avec ou sans virgule est rencontré
}
// pour limiter de 0 à 20
if (/(?:[0-9][\.,]?[0-9]*|1[0-9][\.,]?[0-9]*|20)/.test(valeur)) {
      // les instructions ici seront lancées si un nombre à un ou deux chiffres de 0 à 20 avec ou sans virgule est rencontré
}

Pour vérifier que les notes sont bien toutes les trois renseignées, tu peux faire un tableau indexé et le remplir

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
// hors de la fonction lancée par onchange, l'initialisation
var notes=[false, false, false];
/* dans la function lancée par onchange, il faut que tu sortes l'index à partir d'un attribut de l'élément initiateur (id, ou un élément perso comme data-index).
Attention, dans les langages informatiques, les index de tableaux commencent par 0 et non 1 */
notes[index]=false;
// une fois la condition que la note est bien valide
notes[index]=note;
if (notes.indexOf(false)===-1) {
       // toutes les notes sont renseignées, tu peux lancer le calcul de la moyenne
      moyenne();
}

Une fois la validité des données vérifiée pour les trois notes dans le cas du input ou bien une fois les trois choix faits pour le select,
tu peux faire la moyenne en utilisant la fonction parseFloat pour convertir les valeurs que tu additionnes, en utilisant la division (/3) et l'afficher en utilisant document.querySelector pour cibler l'élément voulu et y mettre la moyenne normalisée éventuellement avec innerText ou innerHTML, qui sont des getters autant que des setters, à savoir qu'il permettent de prendre une valeur, ou de la changer.
Une condition if te permettra de changer le style en appliquant un className par exemple, ou directement d'agir sur le css avec element.style.color="#f00" (un rouge) ou element.style.color="#0f0"; (un vert).