EXERCICES JAVASCRIPT Exercice N 01 Écrire un script java qui permet de saisir le nom de l utilisateur et de l afficher en gras, dans une page Web. Exercice N 02 Écrire un script java qui utilise une fonction qui permet d afficher un message de bienvenue en Bleu centré, qui sera appelée au chargement de la page. Exercice N 03 Ecrire un script java qui est composé de deux fonction, la premier est appelée lorsque la page Web et chargée pour afficher Bienvenue, la deuxième affiche Au revoir lorsque on ouvre la page Web de l exercice précédant. Exercice N 04 Écrire un script java qui affiche Bravo si le pointeur de la souris passe au dessus du lien message important. Exercice N 05 Créer une page Web composé d une image image1.png avec les fonctionnalités suivantes : Lorsque l image1.png est survolée, elle est remplacée par une autre image2.png Si l utilisateur clic sur l image2.png il déclenche la saisie d un email à l adresse suivante Lazhar.Zouari@laposte.net Exercice N 06 Vous disposez de 4 images avec les noms respectifs i1.png, i2.png, i3.png et i4.png On vous demande de donner le code d un document HTML, permettant d afficher les 4 images sous forme d une matrice centrée sur la page composée de 2 lignes et 2 colonnes (de gauche à droite, 1 ère ligne : i1 i2, 2 ème ligne : i3 i4) puis de programmer les fonctionnalités suivantes : Si l utilisateur passe le pointeur de la souris au-dessus de l image i1, vous remplacez l image i2 par l image i4. De même, si l image i2 est survolée par le pointeur de la souris vous substituez l image i1 par l image i3. Si l utilisateur clic sur i3, une rotation à droite des différentes images est effectué (remplacer l image i1 par i3, i2 par i1, i4 par i2 et i3 par i4). Exercice N 07 Ecrire un script java qui affiche tous les valeurs de la fraction Exercice N 08 Écrire un script java qui permet de vérifier si l @ email taper par l utilisateur, dans une zone de saisie, est valide ou pas. Exercice N 09 Ecrire un script java qui affiche le texte tapé par l utilisateur dans la zone d entrée dans la zone de sortie. Exercice N 10 Ecrire un script java qui affiche la valeur choisie d une liste de sélection par l utilisateur de votre page Web. 1
Exercice N 11 Ecrire un script java qui affiche la valeur de la case d option choisie parmi 3. Exercice N 12 Écrire le code d un fichier HTML permettant de créer une calculatrice avec 4 opérateurs de base et d afficher le résultat dans une boite d information. Exercice N 13 On se propose de développer un formulaire HTML, composé d une zone de texte, de trois objets liste déroulante et d un bouton de type «submit»: La zone de texte sera crée avec du code HTML, alors que les trois listes seront générées avec du code Java Script, qui contient respectivement les numéros des jours d un mois (de 1 à 31), les mois de l année (de Janvier à Décembre) et les années (de 1975 jusqu à cette année). NB On vous demande d avoir une programmation modulaire. Un clic sur le bouton envoyer devra faire appel à un fichier, se trouvant dans le même répertoire que le formulaire et ayant comme nom sauvegarder.htm 2
Solution Exercice N 1 SOLUTIONS <script LANGUAGE="Javascript"> <!-- var nom = window.prompt("tapez votre nom "); document.write("<b>" + nom + "</B>"); //--> Solution exercice N 2 <script LANGUAGE="Javascript"> <!-- function message() { document.write('<center><font COLOR = "BLUE"> Bienvenue à ma page</font></center>'); //--> <BODY onload="message();"> Solution exercice N 3 <script LANGUAGE='Javascript'> function bienvenue() { alert("bienvenue à cette page"); function au_revoir() { alert("au revoir"); 3
<BODY onload = "bienvenue()" onunload = "au_revoir()"> <A HREF = "EX02.htm">Exercice précédant</a> Solution : Exercice N 4 <script language="javascript"> function message(){ alert("bravo") <A HREF="" onmouseover="message()">message important</a> Solution : Exercice N 5 <script LANGUAGE="Javascript"> function survolee() { document.images["image"].src="image2.png" function nonsurvolee() { document.images["image"].src="image1.png" <A HREF="mailto://Lazhar.Zouari@laposte.net" onmouseover="survolee();" onmouseout="nonsurvolee();"> <IMG SRC="image1.png" name="image" width=126 height=126 border=0> </A> 4
Solution : Exercice N 6 <script LANGUAGE="Javascript"> function survolee(n) { if (n == 1) document.images["image2"].src=document.images["image4"].src; else document.images["image1"].src=document.images["image3"].src; function rotation() { var tempo = document.images["image1"].src; document.images["image1"].src=document.images["image3"].src; document.images["image3"].src=document.images["image4"].src; document.images["image4"].src=document.images["image2"].src; document.images["image2"].src=tempo; <TABLE WIDTH = "18%" ALIGN="center"> <TR> <TD> <A HREF="#" onmouseover="survolee(1);" > <IMG SRC="i1.png" name="image1" width=72 height=72> </A> </TD> <TD> <A HREF="#" onmouseover="survolee(2);" > <IMG SRC="i2.png" name="image2" width=72 height=72> </A> </TD> </TR> <TR> <TD> <A HREF="#" onclick="rotation();"> <IMG SRC="i3.png" name="image3" width=72 height=72> </A> </TD> <TD> <A HREF="#"> <IMG SRC="i4.png" name="image4" width=72 height=72> </A> </TD> </TR> 5
</TABLE> Solution : Exercice N 7 <TITLE> Voici une page contenant du Javascript</TITLE> <script language="javascript"> for (x = 1;x <= 10; x++) { if (x == 7) { document.write('1 \/ \('+ x + ' \- 7\) \= <B>division par 0</B><BR>'); else { a = 1/(x-7); document.write('1 \/ \('+ x + ' \- 7\) \= '+a +'<BR>'); Solution : Exercice N 8 <script LANGUAGE="javascript"> function controle(email) { var ch = document.form1.email.value; var p1 = ch.indexof("@",1); if ((p1 > 0)&& (p1 < ch.length - 1)) { alert(ch + " est une @ email valide"); else alert (ch + " n'est pas une @ email valide"); 6
<FORM NAME="form1"> <CENTER><B>Email : </B><INPUT TYPE="text" NAME="email" SIZE = "30"><BR> <INPUT TYPE="button" NAME="bouton" VALUE="Contrôler" onclick="controle(email)"></center> </FORM> Solution : Exercices N 9 <script LANGUAGE="javascript"> function afficher(form2) { var testin =document.form2.input.value; document.form2.output.value=testin Solution : Exercice N 10 <script language="javascript"> function liste(form5) { alert("l\'élément " + (form1.list.selectedindex + 1)); <B>Entrez votre choix : </B> <FORM NAME="form1"> <SELECT NAME="list"> <OPTION VALUE="1">Elément 1 <OPTION VALUE="2">Elément 2 <OPTION VALUE="3">Elément 3 </SELECT> <INPUT TYPE="button" VALUE="Quel est l'élément retenu?" onclick="liste(form1)"> </FORM> 7
Solution : Exercice N 11 <script language="javascript"> function afficher(form1) { if (document.form1.choix[0].checked) alert(document.form1.choix[0].value) else if (document.form1.choix[1].checked) alert(document.form1.choix[1].value) else if (document.form1.choix[2].checked) alert(document.form1.choix[2].value); <B> Votre choix : </B> <FORM NAME="form1"> <INPUT TYPE = "radio" NAME = "choix" VALUE = "Choix 1" ><B> Choix 1</B> <INPUT TYPE = "radio" NAME = "choix" VALUE = "Choix 2" ><B> Choix 2</B> <INPUT TYPE = "radio" NAME = "choix" VALUE = "Choix 3" ><B> Choix 3</B> <INPUT TYPE="button" VALUE="Quel est le choix retenu?" onclick="afficher(form1)"> </FORM> Solution : Exercice N 12 <script language="javascript"> function calculer(form1) { var x = Number(document.form1.var1.value); var y = Number(document.form1.var2.value); if (document.form1.choix[0].checked) if (y!= 0) alert(x / y) else alert ("Opération invalide!") else if (document.form1.choix[1].checked) alert(x + y) else if (document.form1.choix[2].checked) alert(x - y) else if (document.form1.choix[3].checked) 8
alert(x * y); <FORM NAME="form1"> <TABLE ALIGN = "CENTER"> <TR> <B>Variable 1 : </B><INPUT TYPE = "text" NAME = "var1"><br> <B>Variable 2 : </B><INPUT TYPE = "text" NAME = "var2"><br><br> </TR> <TR> <TD> <B>Opérateurs : </B><BR><BR> <INPUT TYPE = "radio" NAME = "choix"><b> Division</B><BR> <INPUT TYPE = "radio" NAME = "choix"><b> Addition</B><BR> <INPUT TYPE = "radio" NAME = "choix"><b> Soustraction</B><BR> <INPUT TYPE = "radio" NAME = "choix"><b> Multiplication</B><BR></BR> </TD> <TD><INPUT TYPE="button" VALUE="Calculer" onclick="calculer(form1);"><input TYPE="reset" VALUE="Effacer" ></TD> </FORM> </TR> </TABLE> Solution : Exercice N 13 <script language="javascript"> var jour = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septe mbre","octobre","novembre","décember"); function creer() { document.write('<b>date de naissance : </B><SELECT NAME="jj">'); for (i = 1; i <= 31; i++) { document.write('<option VALUE="' + i +'">' + i); document.write('</select><b> / </B>'); 9
document.write('<select NAME="mm">'); for (i = 0; i < 12; i++) { document.write('<option VALUE="' + i +'">' + jour[i]); document.write('</select><b> / </B>'); document.write('<select NAME="aaaa">'); date1 = new Date(); a = date1.getyear(); for (i = 1975; i <= a; i++) { document.write('<option VALUE="' + i +'">' + i); document.write('</select><br><br>'); <TABLE ALIGN = "center"> <FORM NAME="form1" action ="sauvegarder.htm"> <B>Nom et Prénom : </B> <INPUT TYPE = "text" NAME = "nom_prenon" SIZE = "50"><BR><BR> <script language="javascript"> creer(); <CENTER><INPUT TYPE = "submit" VALUE = "Envoyer"></CENTER> </FORM> </TABLE> 10