TP8

//HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="http://hec.unil.ch/info1ere/elemprog/jquery.min.js"></script>
  </head>
  <body onload="appliquerCouleur()">
    <div id="couleur">

      <!--
      A compléter:
      Modifier les attributs onclick et onchange.
      Le bouton + incrémente la couleur de 5.
      Le bouton - décrémente la couleur de 5.
      -->
      <div id="rouge">
        <button onclick="ajouterRouge(-5)">-</button>
        <input type="text" onchange="changerRouge" />
        <button onclick="ajouterRouge(5)">+</button>
      </div>

      <!--
      A compléter:
      Modifier les attributs onclick et onchange.
      Le bouton + incrémente la couleur de 5.
      Le bouton - décrémente la couleur de 5.
      -->
      <div id="vert">
        <button onclick="ajouterVert(-5)">-</button>
        <input type="text" onchange="changerVert" />
        <button onclick="ajouterVert(5)">+</button>
      </div>

      <!--
      A compléter:
      Modifier les attributs onclick et onchange.
      Le bouton + incrémente la couleur de 5.
      Le bouton - décrémente la couleur de 5.
      -->
      <div id="bleu">
        <button onclick="ajouterBleu(-5)">-</button>
        <input type="text" onchange="changerBleu" />
        <button onclick="ajouterBleu(5)">+</button>
      </div>

    </div>
  </body>
</html>

//FIN HTML

//DEBUT JAVASCRIPT

/**
 * Ces variables sont utilisées pour gérer l'intensité du rouge du vert et du bleu.
 */
var r = 255;
var v = 200;
var b = 255;

/**
 * A compléter:
 * La fonction retourne toujours un nombre entier compris entre 0 et 255.
 * Si couleur n'est pas un nombre, la valeur retournée est 255.
 * Si couleur est un nombre plus grand que 255, la valeur retournée est 255.
 * Si couleur est un nombre plus petit que 0, la valeur retournée est 0.
 * Sinon, la valeur retournée est couleur.
 * Fonctions JavaScript: parseInt(), isNaN().

rgb(255,255,255)

*/
function couleurValide(couleur) {
    couleur = parseInt(couleur);
    if(isNaN(couleur)){
        return 255;
         }
    else if(couleur>255){return 255;}
    else if(couleur<0){return 0;}
    else{
         return couleur;
     }

}

/**
 * A compléter:
 * La fonction applique les couleurs au fond d'écran, aux boutons et aux valeurs des champs de saisie.
 * JQuery permet de mettre à jour toutes ces propriétés.
 */
function appliquerCouleur() {

    // Ne pas modifier:
    // Mettre à jour les valeurs du formulaire à l'aide de JQuery.
    // JavaScript: $("...").val(x);
    $("#rouge input").val(r);
    $("#vert input").val(v);
    $("#bleu input").val(b);

    // A compléter:
    // Afficher individuellement chaque couleur dans le formulaire.
    // Par exemple, en css, le rouge le plus intense correspond à "rgb(255,0,0)"
    // alors que le rouge le moins intense correpond à "rgb(0,0,0)".
    // Pour chaque couleur, cette chaine de caractère peut être créée à l'aide des variables r, v et b.
    // JavaScript: $("...").css("propriété", "valeur");
    $("#rouge").css("background-color","rgb("+r+",0,0)");
    $("#vert").css("background-color","rgb(0,"+v+",0)");
    $("#bleu").css("background-color","rgb(0,0,"+b+")");


    // A compléter:
    // Combiner le rouge, le vert et le bleu pour générer la couleur d'arrière plan.
    // Les couleurs sont combinées à l'aide de la propriété css "rgb(r, g, b)".
    $('body').css("background-color","rgb("+r+","+v+","+b+")");

}

/**
 * A compléter:
 * Le paramètre n de cette fonction permet d'incrémenter ou de décrémenter l'indice de la couleur.
 * Après modification, la couleur doit toujours être valide.
 * Après chaque changement, le fond d'écran et les boutons doivent être mis à jour.
 */
function ajouterRouge(n) {
    r = couleurValide(r+n);
    changerRouge();
    appliquerCouleur();

}

/**
 * A compléter:
 * A l'aide de JQuery, la fonction récupère la valeur du champs de saisie de la couleur correspondante.
 * Après chaque changement, le fond d'écran et les boutons doivent être mis à jour.
 */
function changerRouge() {
    r =  couleurValide($("#rouge input").val());

    appliquerCouleur();

}

/**
 * A compléter:
 * Le paramètre n de cette fonction permet d'incrémenter ou de décrémenter l'indice de la couleur.
 * Après modification, la couleur doit toujours être valide.
 * Après chaque changement, le fond d'écran et les boutons doivent être mis à jour.
 */
function ajouterVert(n) {
    v = couleurValide(v+n);
    changerVert();
    appliquerCouleur();

}

/**
 * A compléter:
 * A l'aide de JQuery, la fonction récupère la valeur du champs de saisie de la couleur correspondante.
 * Après chaque changement, le fond d'écran et les boutons doivent être mis à jour.
 */
function changerVert() {
    v = couleurValide($("#vert input").val());

    appliquerCouleur();

}

/**
 * A compléter:
 * Le paramètre n de cette fonction permet d'incrémenter ou de décrémenter l'indice de la couleur.
 * Après modification, la couleur doit toujours être valide.
 * Après chaque changement, le fond d'écran et les boutons doivent être mis à jour.
 */
function ajouterBleu(n) {
    b = couleurValide(b+n);
    changerBleu();
    appliquerCouleur();

}

/**
 * A compléter:
 * A l'aide de JQuery, la fonction récupère la valeur du champs de saisie de la couleur correspondante.
 * Après chaque changement, le fond d'écran et les boutons doivent être mis à jour.
 */
function changerBleu() {
    b = couleurValide($("#bleu input").val());

    appliquerCouleur();

}

//FIN JAVASCRIPT