Exercice 1 :
Soit le code HTML suivant :
<html>
<head> <title> Modification </title> </head>
</html>
<body>
<p id="p1"> Bonjour tout le monde !</p>
<input type="button" value="Changer le texte">
</body>
</html>
Correspondant à la page «Modifier.html »
1. On vous propose d’écrire une fonction en javascript « ChangerTexte() » qui permet de changer le contenu de la balise <p> par le texte « DSI2 ! ».
2. Modifier le code HTML ci-dessus pour que la fonction « ChangerTexte() » s’exécute en cliquant sur le bouton.
Exercice 2 :
On veut modifier la page «Modifier.html » de l’exercice précèdent comme suit :
Name : zone
Type : text
Publicité
1. Ecrire le code HTML correspondant à la zone de texte.
2. On vous propose de modifier la fonction « ChangerTexte() ». Dorénavantelle permettra de changer le contenu de la balise <p> par le contenu de la zone de texte.
3. En utilisant les feuilles de styles CSS, modifier la mise en forme de la balise <p> comme suit : {taille = 40px, couleur = #09C, bordure = (2px solid #E1E1E1) et alignée au centre.
Exercice 3 :
On reprend l’exercice précédent.
1. Ajouter un bouton « Copier Texte » à la fin.
2. Ecrire une fonction en javascript « CopierTexte() » qui permet de créer une nouvelle balise <p> à chaque fois qu’on clique sur le bouton « Copier Texte ».
Le contenu de la nouvelle balise <p> sera une copie de la balise <p> initiale identifiée par « p1 ».
1. Apporter les modifications nécessaires aux codes CSS et javascript pour que les balises <p> crées auront la même mise en forme que la balise <p> initiale.
Exercice 4 :
Soit le code HTML suivant :
</head>
</html>
<body>
<h1> Un titre </h1>
<p> Un paragraphe </p>
<div id="informations">
<p> un titre de niveau 2</p>
<p> un sous-titre de niveau 2</p>
Publicité
<p> un paraph de niveau 2</p>
</div>
<a href="http://www.w3schools.com"> un premier lien </a>
<a href="http://www.xul.fr/dom/"> un deuxième lien </a>
<br><br>
<input type="button" value="Nombres">
<input type="button" value="Contenu">
</body>
1. Ecrire une fonction en javascript « Nombres() » qui permet à chaque fois qu’on clique sur le bouton « Nombres »d’afficher:
1. le nombre de paragraphes.
2. le nombre de liens
2. Ecrire une fonction en javascript « Contenu() » qui permet à chaque fois qu’on clique sur le bouton « Contenu »d’afficher:
1. Les paragraphes entiers.
2. Les liens (un premier lien, …)
3. Les adresses web des liens (http://....)
NB : Vous pouvez utiliser la fonction « alert() » ou de préférence vous pouvez créer un emplacement dans la page pour l’affichage des résultats (par exemple, une balise <div>).
Etude de cas
Le but de cette partie est de réaliser une page web en utilisant les fonctions du DOM dans un exemple plus cohérent.
header
Publicité
La page aura l’allure suivante :
aside
section
nav
Fig1 : index.html
label
Input (type text)
Input (type file)
textarea
Fig2 : zone aside
Pour la réalisation de notre site, nous aurons besoin à une feuille de style « style.css », un fichier « MonScript.js », certaines images, et une page HTML 5. Le projet aura l’arborescence finale suivante :
Partie 1 (HTML et CSS)
Commencez par la préparation de la maquette de la figure « Fig1 » en se basant sur les sur les connaissances que vous avez apprises pendant les 2 TPs précédents.
Remarque : les styles sont à mettre au niveau du fichier style.css.
Partie 2 (DOM)
1. Ecrire une fonction en javascript « Poster() » qui sera exécuté en cliquant sur le bouton « Envoyer » et qui permet de
Publicité
1. Récupérer les informations des éléments dans la balise <aside>» (nom, prénom, description et fichier image)
Remarque : Vous pouvez utiliser une fonction du DOM (getElementById() par exemple)
- 1. Créer une nouvelle balise <article> contenant les informations déjà récupérées.
La nouvelle balise article aura l’allure suivante :
Date d’insertion
Description
Nom et prénom
Fig3 : Balise <article>
image
- 1. Insérer la balise <article> créée dans la balise <section>.
Fig4 : Exemple après insertion
1. Pour optimiser le travail, vous pouvez traiter les cas particuliers (Si vous choisissez un fichier qui n’est pas une image par exemple, etc) ;