Fonctions et formulaires

Ressources

On pourra si nécessaire se référer aux bases de la syntaxe de javascript ainsi qu’à la documentation maintenue chez Mozilla.

Le guide mozilla et l’introduction à javascript à destination des chats peuvent également être consultés.

Exercice 0

Lancer firefox et cliquer avec le bouton droit dans la page affichée, sélectionner “Examiner l’élément”. L’inspecteur web est maintenant lancée. Dans l’onglet “Console”, on peut voir les erreurs causées par la page mais aussi exécuter des instructions javascripts.

  1. Tester le code suivant for (var i=0; i<12; i=i+1) {console.log(i)}
  2. Tester l’instruction alert sans et avec arguments.

Par la suite, nous écrirons le code dans des fichiers html ou js. Et nous utiliserons la console pour “déboguer”.

Exercice 1

Nous allons réaliser une page web capable de faire des calculs. Pour commencer, recopier la page html suivante dans un fichier exercice1.html.

<!DOCTYPE html>
<html>
 <head>
  <meta charset='utf-8'>
  <title>Exercice 1</title>
 </head>
 <body>

  <form>
   <input type="text" name="nombre">
   <input type="button" value="cube" onClick="cube(this.form)">
  </form>

  <script type="text/javascript">
    function cube(arg) {
        console.log(arg)
        alert(puissance(parseFloat(arg["nombre"]["value"]), 3))
    }
  </script>
 </body>
</html>

On remarque trois balises html nouvelles : form, input et script. form permet de réaliser des formulaires ayant des cases à remplir et des boutons. input désigne des éléments attendant une entrée de l’utilisateur. Ici, les deux éléments input sont une case de texte et un bouton. script permet de mettre directement dans le code html un script (ici écrit dans le langage javascript).

Il y a plusieurs choses à remarquer :

  1. la case de texte a un attribut name qui définit à peu près le nom de variable qu’aura son contenu.
  2. le bouton a un attribut onClick définissant le comportement à adopter quand on clique sur le bouton. Ici, on fait appel à la fonction cube avec pour argument this.form c’est-à-dire le contenu du formulaire.
  3. Dans la fonction cube, le paramètre formel est nommé arg. Il s’agit d’un objet de type formulaire. On peut accéder à la valeur d’une variable x contenue dans le formulaire en écrivant arg["x"]["value"]. Attention, elle est de type string. Nous l’avons donc ici convertie explicitement en nombre à l’aide la fonction parseFloat.
  4. alert est une procédure créant une fenêtre de dialogue contenant le texte passé en argument.
  5. console.log est une procédure écrivant dans la console du navigateur.

Ouvrons maintenant cette page web avec un navigateur (firefox ou chrome). Quand on clique sur le bouton, rien ne se passe car le code n’est pas complet. Pour voir l’erreur, cliquer avec le bouton droit sur la page puis sélectionner l’onglet Console ou Web Console. Il doit apparaître un texte signalant une ReferenceError en lien avec puissance. Il doit aussi apparaître le résultat de la procédure console.log qui est un dictionnaire représentant un élément html.

Questions

  1. Il manque dans notre script la fonction puissance(x, n) qui calcule la puissance n-ième d’un nombre x. L’implémenter à l’intérieur de la balise script déjà existante, recharger la page et tester.

    Rappel : nous avons déjà implémenté cette fonction en java, il suffit donc de faire une traduction. Voir la syntaxe javscript pour traduire les fonctions, les boucles…

  2. Ajouter un bouton et le code nécessaire pour calculer le carré du nombre donné.

  3. Ajouter un bouton et le code nécessaire pour calculer la racine carrée du nombre donnée à 0.001 près.

  4. Ajouter un bouton et le code nécessaire pour tester si le nombre est premier.

Exercice 2

Notre page html commence à contenir plus de javascript que de html et devient de moins en moins lisible. Nous allons donc séparer le script du fichier html (comme nous séparons le style du contenu dans un fichier css). Pour cela, nous allons mettre le contenu de la balise script dans un fichier exercice2.js et y faire référence dans le fichier html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Exercice 1</title>
    <script type="text/javascript" src="exercice2.js"></script>
  </head>
  <body>
    <form>
      <input type="text" name="nombre">
      <input type="button" value="cube" onClick="cube(this.form)">
    </form>
  </body>
</html>

Questions

  1. Réaliser les manipulations et tester la page obtenue.
  2. Il est possible de modifier le contenu d’un champ de texte : arg["x"]["value"] se comporte comme une variable, on peut donc lui affecter une valeur ! Ajouter un élément de texte dans la page html qui contiendra le résultat du dernier calcul effectué (en profiter pour enlever les alert du code).
  3. Ajouter le nécessaire pour, étant donnés x et n, afficher x^n.

Exercice 3

  1. Sur le modèle précédent, réaliser une page web qui étant donné un n calcule le n-ième nombre premier.
  2. Lui faire afficher les n plus petits nombres premiers.

Exercice 4

  1. Réaliser une page web permettant de faire les conversions binaire/décimal.
  2. Ajouter la possibilité de convertir en octal et en hexadécimal.

Exercice 5

Écrire des fonctions pour convertir un nombre décimal suivant la numération romaine et inversement. On rappelle les valeurs des chiffres romains dans le tableau ci-dessous :

Chiffre romain Valeur
I 1
V 5
X 10
L 50
C 100
D 500
M 1000

À retenir

  • Nouvelles balises html : form, input, script.
  • La balise script peut inclure du code ou lier un fichier.
  • La balise script ressemble à la balise link mais a des attributs différents (type au lieu de rel, src au lieu de href).
  • La balise script peut être dans l’entête ou dans le corps. Cela modifie le moment où son contenu sera exécuté. Définir des fonctions a plus de sens dans l’entête, exécuter des procédures dans le corps (et de préférence à la fin du corps).