Vous êtes sur la page 1sur 2

TD Javascript

L'ensemble de vos pages doit rester valide. N'oubliez pas de faire une page d'accueil pour ce td : crez un rpertoire ProgWebAv , placez-y un fichier index.html que vous complterez au fur et mesure, et mettez un lien depuis votre page d'accueil principale. 1. Pour l'ensemble du td, vous avez votre disposition trois fonctions javascript commentes dans le fichier getFullText.js. Que font ces trois fonctions ? 2. Faire un premier fichier JavaScript : qui calcule la somme des 100 premiers entiers non nuls et affiche le rsultat. Modifiez-le script pour que l'affichage montre la somme chaque pas. 3. Faites de mme avec la suite de Fibonacci (suite vrifiant n = (n-1) + (n-2)). 4. Faites une fonction setTitle( ) qui changera le titre du document automatiquement si le document contient (au moins) un titre H1. Le cas chant, le texte du premier titre H1 sera le titre du document. Sinon, afficher un titre par dfaut (vos prnom et nom, page de td Prog Web) ou pass en paramtre. Faites en sorte que setTitle soit appel automatiquement au chargement de votre page d'accueil pour ce td. Testez en mettant ou non un titre H1. Indication : getElementsByTagName et document.title 5. Faites une fonction defileMessageStatus() qui fasse dfiler un texte de bienvenue (par exemple bienvenue sur la page de Prnom Nom relatives au Web avanc ) dans la barre de status du navigateur ou un texte pass en paramtre. Faites en sorte que defileMessageStatus soit appel automatiquement au chargement de votre page d'accueil pour ce td. Indication : window.status 6. Insrer dans un fichier html la date de dernire modification du document. Ajoutez la date du jour (automatiquement). Indiquez (insrer un texte qui indique) combien de jours il reste avant le 1er mai 2045 0h00 7. Faites une horloge avec du texte (qui indique l'heure au format hh :mm :ss en la mettant jour toutes les secondes) avec javascript dans une page html : pensez utiliser setInterval et getElementById (et les balises div et/ou span avec un id). 8. Refaites une horloge en utilisant les images des chiffres dans le rpertoire images de larchive images.zip. 9. A ct d'un champ texte de saisie (input avec type="text" dans un formulaire), mettez un zone de texte (div ou span) avec un fond de couleur. Si le texte entr n'est pas un nombre, faites en sorte que la zone de texte devienne rouge, mais si l'utilisateur tape un nombre, alors le fond doit devenir vert. En complment, modifiez le texte de la zone de texte (avec par exemple "ce n'est pas un nombre" ou "ceci est un bien un nombre"). Pour cela utilisez la fonction isNaN(). 10. Crez une page contenant un texte, un champ texte et un bouton qui permette de surligner dans le texte le mot entr dans le champ. Le mot doit alors apparatre juste aprs le texte "mot rechercher". Lorsqu'on appuie sur le bouton "rechercher", les occurrences du mot dans le texte doivent tre mises en vidence ( l'aide d'une balise span).

11. crivez un menu droulant (balises html select et option) proposant plusieurs feuilles de style. Faites en sorte que lorsque l'utilisateur en choisit une, elle soit applique la page. 12. Rcuprez les fichiers souris.js et exo6.js. Etudiez-les en rpondant aux questions ci-dessous. Si vous ne trouvez pas la rponse, essayez de rpondre la suite et revenez dessus aprs. Au besoin, essayez le bout de script. 13. A quoi servent les fonctions getMouseX() et getMouseY() ? Quelle est l'utilit de la variable version_navigateur_souris_js ? 14. A quoi servent les fonctions chargement et dchargement ? Comment (quand) les utiliser ? Que sont les valeurs contenues dans les variables winW et winH par rapport la fentre ? (si vous ne voyez pas, essayez ce bout de script dans une page, afficher une fois winH et winW avec un alert par exemple, redimensionner votre fentre firefox et rechargez la page...) Quelle est l'utilit du +20 pour les variables x et y ? Comprenez-vous la fin de la fonction suivit ? Parfait, dans ce cas, utilisez la dans un de vos document... A NE PAS OUBLIER (entre autre) : <style type="text/css"> #objetquisuit{ position: absolute; z-index:100; background-color: #DDFFDD; border: black thin solid; } </style> 15. Allons plus loin...normalement, si tout va bien, vous avez une petite zone de texte sur fond vert clair qui suit les dplacement de votre souris. Essayez de la faire disparatre cette zone quand vous sortez de la fentre. Indication : la fonction removeChild(c) permet d'enlever le fils c d'un noeud (du DOM html), par exemple pour document.body. A l'oppos, appendChild(c) permet d'ajouter un fils c la fin de la hirarchie (toujours possible avec document.body).