TP n°2 Javascript EVENEMENTS ET OBJETS Événements souris Analyse de code javascript Balise <div> Gestion de fenêtre Informations sur le navigateur et l’écran © BTS IRIS 2002 [tv]
Exercice n°1: Événements souris Placer une image dans un lien <a>. Installer un gestionnaire d’événement qui permet de changer l’image lorsque le pointeur de la souris se trouve sur ce lien. On revient sur l’image d’origine lorsque le pointeur de la souris quitte ce lien. Le gestionnaire d’événement sera réalisé par une seule et unique fonction qui recevra en argument l’action à réaliser. Le pointeur de la souris est positionné sur l’image : elle devient bleue Le pointeur de la souris quitte l’image : elle redevient rouge
Exercice n°2: Analyse de code js Tester l’exemple suivant : <html> <head> <title>Exemple JavaScript</title> </head> <body onload='window.setInterval("scroller()",100);'> <script language="JavaScript"> var text = 'Bienvenue sur mon site web ...'; var spaces = ' '; var i = spaces.length; function scroller() { i--; if(i > 0) window.status = spaces.substr(0,i) + text; else window.status = text.substr(-i); if(i < -(text.length)) i = spaces.length; } </script> </body> </html> Que fait ce script ? Placer, à l’intérieur de ce script, des commentaires pertinents.
Exercice n°3: Balise <div> Écrire un script js qui permet de compter le nombre de caractères tapés au clavier. On utilisera des balises <div> pour afficher un texte d’aide en couleur lorsque le pointeur de la souris est placé sur les 3 éléments suivants : Exemple de balise <div>: <div id="countinfo" style="position:absolute; left:220px; top:15px; visibility: hidden"> <table border=0 cellspacing=0 cellpadding=4> <tr><td bgcolor=#00ff77> <font size=2 face="arial,helvetica" color=#333333><b> Ici est indiqué le nombre<br> de caractères saisis.<br> </b></font> </td></tr></table> </div>
Exercice n°4: Gestion de fenêtre Écrire un script js qui crée, au chargement de la page, une nouvelle fenêtre qui se fermera automatiquement au bout de 3 secondes.
Exercice n°5: Informations sur le navigateur et l’écran Écrire un script js qui affiche les informations concernant le navigateur et l’écran du client. Pour cela, vous utiliserez les propriétés des objets Navigator et Screen. Indiquer l’intérêt d’obtenir de telles informations.