TP Programmation multi-cadres

Exercice 1 (exo-messages-cadres.html)

Voici le partage de la fenêtre du navigateur.

<FRAMESET ROWS="*,*,*">
  <FRAME NAME="cadre0" SRC="fichier0.html">
  <FRAME NAME="cadre1" SRC="fichier1.html">
  <FRAME NAME="cadre2" SRC="fichier2.html">
</FRAMESET>

Dans form0, on crée le formulaire nommé "form0" contenant la zone de texte nommée "texte0".
Dans form2, on crée le formulaire nommé "form2" contenant une zone de texte nommée "texte2".
Dans form1, on crée le formulaire nommé "form1" contenant 2 zones de texte nommées "saisie" et "texte1", et un bouton "Copier".
Les 2 événements : clic sur le bouton et validation de la saisie (dans le champ saisie), doivent appeler la même fonction copier().
Celle-ci est déclarée dans le document du cadre form1 et provoquera la copie du texte saisi dans les 3 autres zones de texte.

Exercice 2 (exo-famille-cadres.html)

(d'après un exercice de JavaScript / M. Dreyfus /Sybex)
On considère l'arborescence suivante de cadres :

Remarquer qu'il y a 3 cadres dans la page mais hiérarchisés. Ils ne sont pas de même niveau. Alfred et Jules sont frères, Tom est leur oncle.
Créer la page f3.html avec le FRAMESET constitué des 2 cadres f4 et f5 et contenant respectivement f4.html et f5.html.
Créer ensuite la page f1.html avec le FRAMESET constitué des cadres f2 et f3 contenant respectivement f2.html et f3.html.
Dans chacun des 3 cadres, écrire une phrase indiquant quelle est la personne concernée. Ex : " ici Jules, frère d'Alfred et neveu de Tom ".
Puis, dans chacun des 3 cadres ajouter un formulaire contenant une zone de texte nommée " message".
On coisit de se positionner dans la situation de Jules. Jules va envoyer un message à son frère, un autre à son oncle et un à lui-même. Pour cela compléter le formulaire de Jules par 3 boutons correspondant aux 3 messages à transmettre.
Le gestionnaire d'événement onClick de chaque bouton devra effectuer l'envoi dans la zone de texte du cadre correspondant. Par exemple, le click sur le bouton "écrire à mon frère" enverra le message "salut Alfred, ici ton frère jules" dans la zone de texte message du cadre d'Alfred.

Exercice 3 (exo-cadres-couleurs.html)

Partager l'écran en 9 cadres de même taille. On demande 2 versions :

afficher des couleurs de fond aléatoires dans ces cadres, toutes les secondes
afficher au hasard une image ou rien dans les 9 cadres, toutes les 3 secondes.

Exercice 4 (exo-cadres-images.html)

Il s'agit de choisir à la fois une image et le cadre où elle doit être affichée

Où voulez vous afficher les images ? Choisissez d'abord le lieu : en haut en bas Ensuite l'image : image de mon chat un plan de métro un plan du 93 des roses Pour recommencer

Exercice 5 (exo-visionner-images)

Voici une copie d'écran.
Les gestionnaires d'événements onMouseOver et onMouseOut seront utilisés pour provoquer un aperçu "furtif" de l'image ou du document dans une fenêtre indépendante.

Exercice 6 (changer-images-cadre)

Il s'agit de construire un menu simple basé sur des changements d'images suivant la rubrique pointée par la souris.
On dispose des 5 images zone1.gif ... zone5.gif qu'on chargera dans un tableau à l'affichage de la page.

Quelques projets

metaChercheur
Il s'agit de simuler le travail d'un méta-chercheur. Un ou plusieurs mots-clés sont choisis et une chaine de requête conforme à la syntaxe de chaque moteur leur est adressé.
Simulation de devis
Exemple : devis proposé par la société MicroHard
QCM, tests ..
Exemple : entrainement au calcul mental