Programmation WEB Licence

Iut de Sénart Fontainebleau

Programmation web licence professionnelle bdise

TP javascript : Manipulation du DOM.

  1. Dans le fichier liens.js sont stockés dans un tableau associatif un ensemble de sites internet avec les liens correspondants :

    1. var liens=[];
    2. liens["Google"]="www.google.fr";
    3. liens["Le monde"]="www.lemonde.fr";
    4. liens["l'équipe"]="www.lequipe.fr";
    5. liens["l'IUT"]="www.iut-fbleau.fr";

    En partant du code suivant, 

    1.  
    2. 		<html>
    3. 			<head>
    4. 				<script language=javascript src="liens.js"> </script>
    6. 					function remplir_liste()
    7. 			{
    8. 				/* a completer */
    9. 			}
    10. 				</script>
    11. 			</head>
    12. 			<body onload="remplir_liste()">
    13. 				<div id="ma_liste">
    14. 				</div>
    15. 			</body>
    16. 		</html>

    Completer la fonction remplir_liste de manière à afficher l'ensemble des sites sous formes d'une liste de liens.

    Quelques conseils
    • Le tableau associatif liens est aussi un objet. Vous pouvez parcourir l'ensemble des éléments avec la syntaxe for (cle in liens) liens[cle]
    • Il vous faut créer dynamiquement les noeuds nécessaires avec l'api dom de javascript.

      Vous aurez besoin des méthodes :

      createElement Crée un noeud élément
      createTextNodeCrée un noeud texte
      setAttributeCrée un attribut avec sa valeur
      appendChildAjoute un fils à un noeud
  2. Modifier le programme précédent pour qu'il accepte la syntaxe JSON pour liens : 
    1. var liens=[
    2. {"nom":"Google"  ,"url":"www.google.fr"},
    3. {"nom":"Le Monde","url":"www.google.fr"},
    4. {"nom":"L'Equipe","url":"www.lequipe.fr"}
    5. ];

  3. Ecrire une page html, affichant une table, et pourlaquelle un click souris dans une ligne provoque son effacement.



    Quelques conseils
    • Enregistrer un gestionnaire d'évènements au niveau de la table elle-même qui capturera les clicks souris.
    • Pour effacer une ligne, on peut utiliser la méthoderemoveChild de la classe Node, ou encore la méthode deleteRow de la classe HTMLTableElement.
  4. Formualaire dynamique.Ecrire une page html qui :

    affiche une liste déroulante permettant de choisir un nombre d'enfants entre 1 et 5.

    ajoute au formualire le nombre de champs texte permettant de saisir le prénom de chaque enfant.

  5. On dispose d'une page (un formulaire par exemple) disposé en partie distincte. Chaque partie est un element div de classe "container".

    Voici le code html.

    Vous devez ecrire le code javascript, exécuté au chargement, pour :

    • Dès que l'on focus dans une zone de texte d'un container, la couleur de fond du container change, du blanc au gris.
    • Dès qu'un container perd le focus, sa couleur de fond change, du gris au blanc.
    6. Quelques conseils
    • On peut utiliser la capture d'événements.
    • Pour changer le fond des div container, utiliser les propriétés dom html. (ici la propriété style, avec l'attribut backgroundColor)
  6. Tooltip.

    le but est d'ajouter aux éléments html d'une page quelconque qui possède l'attribut title (avec un contenu) une bulle au survol de la souris en affichant le texte correspondant à cette attribut. (la bulle suit le pointeur dans l'élément)

    Ceci devra être réaliser uniquement par l'inclusion dans la partie head d'un fichier javascript.

    Proposer et implanter cette fonctionnalité.

    L'affichage classique correspondant à l'attribut title doit être courcircuité !

    Quelques conseils

    Utiliser un seul gestionnaire d'évènements, au bon endroit !

retour à la page d'accueil

retour au sommet