ICT305 - Fiche de TD N°3

UNIVERSITE DE YAOUNDE I UNIVERSITY OF YAOUNDE I
FACULTE DES SCIENCES FACULTY OF SCIENCES

*************** ***************
DEPARTEMENT D’INFORMATIQUE DIVISION OF COMPUTER SCIENCE
FILIERE ICT4D - NIVEAU 3 ICT4D BRANCH - LEVEL 3
Année académique 2018~2019
ICT305 – WEB APPLICATION DEVELOPMENT

Fiche de TD n°3
I) Généralités sur les objets du navigateur

Questions de cours
Répondez de manière concise et précise.
1) Donnez la signification du sigle DOM et sa définition.

2) Dans quel but le standard DOM a-t-il été mis en œuvre ?
3) On peut accéder aux objets du navigateur à l’aide de la notation objet.sous_objet
(DHTML). Quel sont les seuls éléments HTML accessibles dans un formulaire avec cette
notation ?
4) Donnez la syntaxe des instructions permettant d’accéder à la valeur d’un champ dans un
formulaire.
5) Donnez la syntaxe des instructions permettant d’accéder à l’attribut d’un champ dans un
formulaire
Exercice 1
Soit le bout de code suivant :
<form name="info">
<input type="password" name="mdp" size="50"/>
<input type="password" name="cfm" size="50"/>
</form>
Ecrivez une fonction JavaScript qui retourne vrai si les mots de passe sont identiques et faux
sinon.
Exercice 2
<form name="info">
<input type="text" name="nom" value="Votre nom" size="50"/>
</form>
1/3
Chapitre 3 : Programmation DOM avec JavaScript Njine Chuangueu
Ecrivez une fonction JavaScript qui efface le contenu du champ nom lorsque l’utilisateur clique à
l’intérieur. Redéfinissez le code HTML du champ nom dans le formulaire pour que la fonction
puisse s’exécuter lorsque ce champ reçoit le focus. Servez-vous de l’attribut onfocus.
Exercice 3
En considérant le code de l’exercice précédent, écrivez une fonction JavaScript qui remet le texte
"Votre nom" dans le champ nom s’il perd le focus sans que l’utilisateur n’ait saisi quoique ce soit.
Redéfinissez le code HTML du champ nom dans le formulaire pour que la fonction puisse
s’exécuter lorsque ce champ perd le focus. Servez-vous de l’attribut onblur.
Exercice 4
<form name="info">
<input type="text" name="nom" value="Votre nom" style="display:none;"/>
<input type="button" name="btn" value="Affichez"/>
</form>
Ecrivez une fonction JavaScript qui fait apparaître le champ nom lorsque l’utilisateur clique sur le
bouton "Afficher". La fonction doit changer le texte du bouton en "Masquer". Si on clique à
nouveau, le champ nom disparait, et le texte du bouton repasse à "Afficher". Servez-vous de
l’attribut onclick.
II) Présentation de l’arbre DOM

Questions de cours
1) Par rapport au DHTML, quel est le principal avantage du DOM ?

2) Enumérez les caractéristiques du model DOM.
3) Soit le bout de code suivant :
<html> <ul> Listes UEs
<head> <li> ICT305 </li>
<title>Titre</title> <li> ICT316 </li>
<script src="test.js"></script> <li> ... </li>
</head> </ul>
<body> </body>
<div><p> DOM 2 </p></div> </html>
Dessinez l’arbre DOM correspondant

4) Citez quelques opérations qu’on peut effectuer sur un arbre DOM.
2/3
III) Manipulation de l’arbre DOM
Questions de cours
1) Décrivez la classe Node.

2) Quelle méthode permet de créer un nœud ?
3) Quelle méthode permet d’accéder à un nœud à partir de son identifiant ? de son nom ? de
son nom d’élément ?
4) Quelle est la différence fondamentale entre la première méthode et les deux autres ?
5) Les propriétés appendChild, removeChild, parentNode, childNodes, sont membres
de quel objet ?
Exercice 5
<label for="ue"> Saisissez le nom de l’UE </label><br/>

<input type="text" id="ue" name="ue"/>
<button onclik="ajouter();"> Ajouter </button>
<fieldset>
<ul> </ul>
</fieldset>
Implémentez la fonction JavaScript ajouter() qui récupère le contenu du champ ue et ajoute

un élément de liste quand l’utilisateur clique sur le bouton ajouter.
Exercice 6
Ajoutez un bouton "Effacer" qui lorsqu’on clique dessus, efface le contenu de la liste
entièrement. Implémentez à cet effet la fonction JavaScript effacer().
Exercice 7
Améliorer la fonction ajouter() afin qu’à chaque fois qu’une unité d’enseignement (UE) est
ajoutée, qu’elle soit précédée d’un bouton case à cocher. Modifier également la fonction
effacer() afin que ne soit supprimé que les UEs qui ont été sélectionnées par l’utilisateur.
Exercice 8
A la place des cases à cocher, ajouté des boutons. Si l’utilisateur clique bouton, l’UE et le bouton
correspondant disparaissent. Et la fonction effacer reprend son comportement de l’exercice 6.
3/3

ICT305 - Fiche de TD N°3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

ICT305 - Fiche de TD N°3

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSITE DE YAOUNDE I UNIVERSITY OF YAOUNDE I

FACULTE DES SCIENCES FACULTY OF SCIENCES

ICT305 – WEB APPLICATION DEVELOPMENT

I) Généralités sur les objets du navigateur

1) Donnez la signification du sigle DOM et sa définition.

II) Présentation de l’arbre DOM

1) Par rapport au DHTML, quel est le principal avantage du DOM ?

Dessinez l’arbre DOM correspondant

1) Décrivez la classe Node.

<label for="ue"> Saisissez le nom de l’UE </label><br/>

Implémentez la fonction JavaScript ajouter() qui récupère le contenu du champ ue et ajoute

Vous aimerez peut-être aussi