Décomposition du contenu de la séquence précédente

<div class="premier"><input type="text" id="zone_première_valeur" value="première valeur" onClick="Javascript:this.value=vider(this.value)"/></div>

Pour commencer, la balise div est un conteneur, auquel l'on peut affecter un attribut. Ici c'est l'attribut class qui est choisi. Ne le réutilisant pas ailleur, nous aurions pu choisir id.

Dans ce conteneur, nous avons choisi d'effectuer une interaction sur la base d'un input, c'est à dire que nous utilisons une balise input. Il existe différent types de champs input. Nous avons choisi ici le type text.

A l'écran, une zone de texte va apparaître. Ses caractéristiques sont à développer dans le css. Cette zone de texte est rempli par le texte "première valeur" qui est entré dans l'attribut value. Un attribut onClick appelle un programme JavaScript qui va remplacer value (cette valeur) par le retour de la fonction vider qui prend comme argument la valeur value (cette valeur).

L'utilisteur va donc pouvoir saisir une valeur dans cette zone. Un programme pourra avoir accès à cette valeur grace à l'attribut id "zone_première_valeur"

function vider(texte)
{
    if(texte=="première valeur" || texte=="seconde valeur")
        return "";
    else
        return texte;
}

Que fait cette fonction si l'on clique sur la zone? Si le texte passé en argument est "première valeur" ou "seconde valeur", on le remplace par rien, sinon on ne fait rien. Cela permet de vider la zone de texte pour laisser place à une saisie.

Vous remarquerez la syntaxe de l'écriture d'une fonction et du traitement conditionnel en JavaScript et vous ferez le parallèle avec la syntaxe en python

Vous remarquez qu'ici, une seule instruction suit le if ou le else. Si il y en a plusieurs, il faut les mettre entre acolades.

function vider(texte)
{
    if(texte=="première valeur" || texte=="seconde valeur")
        {return "";}
    else
        {return texte;}
}

Regardons le code css de la balise input :

input
{
	background-color: #DCDCFA;
	color: blue;
	font-family: Calibri;
	font-size: 20px;
	padding-left: 20px;
}

input:hover
{
	background-color: orange;
	cursor: pointer;
}

Vous remarquerez que la couleur de fond est donnée en hexadécimale, la couleur du texte en bleu, le style en Calibri, la taille de la police 20 pixels et qu'il y a 20 pixels à gauche de la cellule.

Vous remarquerez le input:hover qui s'exécute si le curseur passe sur la zone input. Dans ce cas, la couleur du fond change et le curseur se transforme en pointer.

<input type="button" value="somme" onClick="somme()"/></div>
<br>
<div class="zone_résultat" type="text" id="resultat">Résultat</div>

Vous remarquerez que le input est de type button, que la valeur affichée est somme et que lors d'un clique, la fonction Javascript somme() est appelée.

Regardons comment fonctionne cette fonction. Comment elle fait pour récupérer des informations et comment elle fait pour en renvoyer.

function somme()
{
    var pvaleur; var svaleur; var somme;
    
    pvaleur = document.getElementById("zone_première_valeur").value;
    svaleur = document.getElementById("zone_seconde_valeur").value;
    somme = parseFloat(pvaleur)+parseFloat(svaleur);
    document.getElementById("resultat").innerText=somme;
}

Vous constaterez que les variables sont déclarées: pvaleur (première valeur), ...

Puis l'on affecte des valeurs aux variables. Ces valeurs, le programme va les chercher dans le document avec la méthode : getElementById qui permet d'aller chercher la valeur (value) liée à un attribut id

Les valeurs capturées sont de type chaine de caractère. Pour les additionner, il faut les transformer en réels parseFloat()

Il reste à transmettre le résultat dans la zone d'affichage. Là encore, nous allons obtenir (get) l'id résultat que nous allons remplacer innerText par la valeur contenue dans la variable somme.