TP : Une page web avec du javascript

Ressources nécessaires :


Objectif : On veut créer une interface qui convertit les nombres décimaux, binaires et hexadécimaux.

Convertisseur

Décimal :  

Binaire :  

Hexadécimal :  

Partie 1 : Mise en page

Tu vas insérer le convertisseur dans une page web de ton site. ce sera la page qui est dans le menu sous le titre connaissances et de sous-titre binaire et hexa....

  1. Ouvre la page correspondante dans ton éditeur de code Notepad++.
  2. On va faire le plan de la page :
    • Une introduction présentant sommairement les nombres décimaux, binaires et hexadécimaux.
    • Un tableau donnant les premières valeurs.
    • Notre convertisseur.
    Crée les titres de la page en utilisant les balises adaptées
  3. Rédige le texte correspondant à la première partie, tu pourras t'aider du cours ou d'une recherche internet. Pour la mise en page, libre à toi d'utiliser des paragraphes, des listes à puces etc...

Partie 2: le tableau

Voici le code html qui permet de construire un tableau : 

<table>
	<tr><th>Décimaux</th><th>Binaires</th><th>Héxadécimaux</th></tr>
	<tr><td>0</td><td>0</td><td>0</td></tr>
	<tr><td>1</td><td>1</td><td>1</td></tr>
	<tr><td>2</td><td>10</td><td>2</td></tr>
</table>

Recopie ce code sur ta page, complète-le afin d'obtenir un tableau allant jusqu'au décimal 16.

Pense aussi à regarder si ton template te propose un modèle de tableau, utilise-le pour avoir directement la mise en forme.

Partie 3 : le convertisseur

Mise en forme

Pour réaliser notre convertisseur, nous allons utilser un formulaire html.

Ce formulaire sera composé de 3 lignes.

chaque ligne sera composé de 3 éléments :

Voici le code html qui permet de construire ce formulaire : 

<form>
<fieldset>
	<legend>Convertisseur</legend>
<p><span>Décimal : </span><input type="text"><input type="button" value="&rarr;"></p>
<p><span>Binaire : </span><input type="text"><input type="button" value="&rarr;"></p>
<p><span>Hexadécimal : </span><input type="text"><input type="button" value="&rarr;"></p>
</fieldset>
</form>

Voir le résultat

Convertisseur

Décimal :

Binaire :

Hexadécimal :


Masquer

Voilà le décor est planté, maintenant il faut programmer...

La programmation en javascript

Pour programmer, il nous faut des variables, ici elles sont stockées dans les zones de saisie. Nous allons personnaliser chaque zone de saisie avec l'instruction id="identifiant".

Nous devons donc écrire 3 programmes, en fait un pour chaque bouton. Nous écrirons ces programmes sous forme de fonction (function). A chaque bouton, nous affectons le lancement d'une fonction avec l'instruction : onClick="fonc();"

On complète le code html de la façon suivante :

<form>
<fieldset>
	<legend>Convertisseur</legend>
<p><span>Décimal : </span><input type="text" id="decimal"><input type="button" value="&rarr;" onClick="xdecimal();"></p>
<p><span>Binaire : </span><input type="text" id="binaire"><input type="button" value="&rarr;" onClick="xbinaire();"></p>
<p><span>Hexadécimal : </span><input type="text" id="hexadecimal"><input type="button" value="&rarr;" onClick="xhexadecimal();"></p>
</fieldset>
</form>

Nous pouvons passer au javascript.

  1. Dans Notepad++, crée un nouveau fichier, avec l'encodage utf-8 et le langage javascript.
    Puis enregistre-le dans le dossier JS sous le nom convertisseur (l'éditeur mettra automatiquement .js derrière).
  2. Rajoute dans le <head> de ta page html la ligne suivante :
    <script src="JS/convertisseur.js"></script>
  3. Recopie le code javascript suivant dans ton fichier convertisseur.js: 

    
 function xdecimal()
{
	decimal = document.getElementById("decimal");
	binaire = document.getElementById("binaire");
	hexadecimal = document.getElementById("hexadecimal");
	
	hexadecimal.value = (decimal.value-0).toString(16);
	binaire.value = (decimal.value-0).toString(2);
}

function xhexadecimal()
{
	decimal = document.getElementById("decimal");
	binaire = document.getElementById("binaire");
	hexadecimal = document.getElementById("hexadecimal");
	
	decimal.value = parseInt(hexadecimal.value,16);
	binaire.value = (parseInt(hexadecimal.value,16)).toString(2);
}

    Quelques commentaires :
    • Une fonction très utilisée en javascript est document.getElementById("decimal"). Elle repère l'objet du document qui a cet identifiant, ici une zone de texte, qu'on a nommé decimal et avec decimal.value, on a la valeur qui est affecté à la zone de texte.
    • La méthode nombre.toString(X) analyse nombre et tente de renvoyer une chaîne de caractères représentant le nombre dans la base X. (plus d'info)
    • La méthode parseInt(nombre,X) considère que nombre est en base X et le transforme en base 10.(plus d'info)
  4. Programme la fonction xbinaire().

Voilà ! ton convertisseur est prêt. Tu peux l'embellir avec du CSS...