TD TD –– Javascript

TD – Javascript
L'ensemble de vos pages doit rester valide. N'oubliez pas de faire une page d'accueil pour ce td : créez
un répertoire « ProgWebAv », placez-y un fichier index.html que vous compléterez 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 commentées
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 résultat. Modifiez-le script pour que l'affichage montre la somme à chaque pas.
3. Faites de même avec la suite de Fibonacci (suite vérifiant 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 échéant, le texte du premier titre H1 sera le
titre du document. Sinon, afficher un titre par défaut (vos prénom et nom, page de td Prog
Web) ou passé en paramètre. 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 défiler un texte de bienvenue (par exemple
« bienvenue sur la page de Prénom Nom relatives au Web avancé ») dans la barre de status du
navigateur ou un texte passé en paramètre. Faites en sorte que defileMessageStatus soit appelé
automatiquement au chargement de votre page d'accueil pour ce td. Indication : window.status
6. Insérer dans un fichier html la date de dernière modification du document. Ajoutez la date du
jour (automatiquement). Indiquez (insérer 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 répertoire images de l’archive
images.zip.
9. A côté 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 complément, 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.Créez 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 apparaître juste après 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 déroulant (balises html select et option) proposant plusieurs feuilles de style.
Faites en sorte que lorsque l'utilisateur en choisit une, elle soit appliquée à la page.
12.Récupérez les fichiers souris.js et exo6.js. Etudiez-les en répondant aux questions ci-dessous.
Si vous ne trouvez pas la réponse, essayez de répondre à la suite et revenez dessus après. 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 déchargement ? Comment (quand) les utiliser ?
Que sont les valeurs contenues dans les variables winW et winH par rapport à la fenêtre ? (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 fenêtre 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 déplacement de votre souris. Essayez de la faire disparaître cette zone
quand vous sortez de la fenêtre.
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 hiérarchie (toujours possible avec document.body).