html_css_js4.html

télécharger ou tester sur place (bouton précédent du navigateur pour revenir)

<!-- La «div» pour l’affichage de la couleur. -->
<div id="carre" style="width:100px; height:100px;"></div>

<!-- Un élément de formulaire pour la saisie de texte. -->
<input id="entree1" value="5"></input>

<!-- La «div» pour l’affichage des erreurs. -->
<div id="erreur"></div>

<!-- Le code Javascript (ou JS) pour la partie active. -->
<script>
    // Récupérer l’élément de saisie.
    var input1 = document.getElementById("entree1");

    // Récupérer la valeur (texte) de cet élément et l’afficher dans la console.
    var texte1 = input1.value;
    console.log(texte1);

    // Concaténation : en JS, c’est l’opérateur +.
    console.log("rgb(" + texte1 + ",")

    // Convertir du texte en un entier et l’afficher dans la console.
    var valeur1 = parseInt(texte1);
    console.log(valeur1);

    // Un test (celui-ci passera toujours, modifiez-le pour voir),
    // avec du code à exécuter dans le cas où le texte est vrai.
    if (valeur1 > 0) {
        document.getElementById("erreur").innerHTML = "strictement positif";
    }

    // Un autre test avec l’opérateur «ou».
    if (valeur1 == 2 || valeur1 == 6) {
        document.getElementById("erreur").innerHTML = "deux ou six";
    }

    // Changement de couleur de la div identifiée par "carre".
    document.getElementById("carre").style.background = "rgb(255,0,0)";
</script>