Vous n'êtes pas connecté. Connexion
|
|
TP2 : DOM et ECMAScript, JSON, AjaxDe $1Table des matièresTravail à faireManipulation du DOM et gestion d'évènementsPendant la première heure de ce TP vous allez vous familiariser avec les différentes méthodes du DOM. Toute cette partie se fera en Javascript/HTML et dans Firefox 3.5 minimum. Pour vous simplifier la tâche, vous pouvez installer les addons suivants : Liens utiles :
Exercice n°1 :A partir du code suivant, créez un script qui insère dynamiquement un élement <li> dans une liste et qui met à jour son label en fonction du nombre de <li> existants dans la page. Vous devrez vous aider des fonctions :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>Manipulation DOM</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> function addListItem(){} </head> <body> <h1>Manipulation du DOM</h1> <h2>Insertion d'éléments</h2> Ajouter des éléments dans une liste HTML <ul id="myList"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> <a href="javascript:addListItem()">Ajouter un élément à la liste</a> <h2>Parcours d'éléments</h2> <p>Le DOM est un modèle objet.</p> <p>Il permet d'interagir avec n'importe quelle partie du document.</p> <p>Il existe de nombreux moyens de parcourir le document. Avec les noms de balises, avec les attributs, les ID.</p> <p>Néanmoins, attention, le DOM n'est pas implémenté de la même manière dans tous les navigateurs. Certains navigateurs comme IE6 et IE7 ne respectent pas la norme.</p> </body> </html>
|
Powered by MindTouch Deki Open Source Edition v.8.08 |