Développement Web (NFA 016)
Premiers pas en javascript

Olivier Pons   Serge Rosmorduc



1  Exercice

Écrire une page web comportant une zone demandant à l'utilisateur d'entrer son nom et un bouton d'intitulé "saluer" dont la pression produira l'affichage d'un message bonjour nom entré.

L'affichage se fera :

2  Exercice

Écrire un formulaire dans lequel on demande à l'utilisateur:

  1. son nom
  2. son sexe
  3. sa musique préférée (plusieurs choix possible parmi: rock,jazz,rap,classique,variétés,autre)

Les données sont destinées à être transmises à un script cgi de traitement se trouvant a l'URL: http://www.qenherkhopeshef.org/cgi-bin/echo.pl

Avant d'envoyer les données on veut vérifier (en local) à l'aide d'un script javascript que tous les champs ont été remplis. Modifier le code html et écrire le code javascript permettant de faire cela.

3  Exercice

Soit la page suivante:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"
                                         xml:lang="fr">
  <head>
    <title>mon exo</title>
  </head>

  <body>
     <h1 id="premier">un premier titre</h1>
     <p>bla bla bli bla bla bla bla bli bla bla
     bla bla bli bla bla bla bla bli bla bla </p>

     <h1 id="second">un second titre</h1>
     <p>blo blo bli blo blo blo blo bli blo blo
     blo blo bli blo blo blo blo bli blo blo </p>

  </body>
</html>
  1. Ajouter un menu pour choisir dans une liste (select) la couleur du fond.
  2. Ajouter le code javascript pour faire le changement correspondant.
  3. Ajouter ce qu'il faut pour qu'un click sur h1 change la couleur de la police en choisissant au hasard (fonction random de javascript)la nouvelle couleur

4  Exercice

On veut réaliser un jeu de morpion. Pour cela on construit une page HTML contenant un tableau de 3 lignes et 3 colonnes (donc 9 cases). Au départ chaque case contient un point. Dans un premier temps l'utilisateur joue pour les 2 joueurs. Pour cela il clique une case: soit

  1. Elle est occupée (par une croix ou un rond): auquel cas un message d'alert est affiché et le joueur doit cliquer une autre case.
  2. Elle est libre; Une croix ou un rond (alternativement) est alors inseré dans la case.
  3. Des qu'un joueur aligne 3 croix ou 3 ronds un message d'alert indiquant qu'il a gagné apparaît et la partie est finie.
  4. Si il n'y a plus de case libre la partie est finie.

Modifier le code précèdent pour que le second joueur soit la machine. On ne cherchera pas de stratégie. La machine tire une case au hasard (cf fonction random de javascript) vérifie si elle est libre avant s'insérer un rond et recommence si ce n'est pas le cas.


Ce document a été traduit de LATEX par HEVEA