Exercices JavaScript

par Zouari Dim 24 Jan - 22:16

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éclanche 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 taper 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.
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 conformément à l’imprime écran donné
ci-dessous :

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
Exercice N° 14 *****

Écrire le code d’un fichier HTML, permettant de créer un album composé de huit photos
timbres. Chaque clic sur une image vignette ouvre une nouvelle fenêtre contenant
la même image agrandie.
NB :
On suppose que toutes les images jpg sont enregistrées dans un répertoire nommé album photos, se trouvant dans le même répertoire que le fichier HTML.
Exercices N° 15 *****
Écrire le code d’un fichier HTML, permettant de sauvegarder la liste des images du
répertoire album photos dans un tableau Java Script. Les boutons suivant et précédent permettent respectivement de passer à l’image suivante et précédente dans la liste.
NB :
On suppose que toutes les images jpg sont enregistrées dans un répertoire nommé album photos, se trouvant dans le même répertoire que le fichier HTML.

Exercice N° 16 ***

Écrire le code d’un fichier HTML, permettant l’affichage de la date système, générée avec la police comic sans ms, taille 14 et la couleur bleu.
Exercices N° 17 ****
Écrire le code d’un fichier HTML, permettant l’affichage de l’heure système, et la rafraîchir toute les secondes.

Prochainement les solutions

par Zouari Lun 25 Jan - 21:48

Solution Exercice N° 1

Code:: <HTML> <BODY> <script LANGUAGE="Javascript">  </script> </BODY> </HTML>

par Zouari Lun 25 Jan - 21:51

Solution exercice N° 2

Code:: <HTML> <HEAD> <script LANGUAGE="Javascript">  </script> </HEAD> <BODY onLoad="message();"> </BODY> </HTML>

par Zouari Lun 25 Jan - 21:57

Solution exercice N° 3

Code:: <HTML> <HEAD> <script LANGUAGE='Javascript'> function bienvenue() { alert("Bienvenue à cette page"); } function au_revoir() { alert("Au revoir"); } </script> </HEAD> <BODY onLoad = "bienvenue()" onUnload = "au_revoir()"> <A HREF = "EX02.htm">Exercice précédant</A> </BODY> </HTML>

par Zouari Lun 25 Jan - 22:00

Solution : Exercice N° 4

Code:: <HTML> <HEAD> <script language="Javascript"> function message(){ alert("Bravo") } </script> </HEAD> <BODY> <A HREF="" onmouseOver="message()">message important</A> </BODY> </HTML>

par Zouari Lun 25 Jan - 22:02

Solution : Exercice N° 5

Code:: <HTML> <HEAD> <script LANGUAGE="Javascript"> function survolee() { document.images["image"].src="image2.png" } function nonsurvolee() { document.images["image"].src="image1.png" } </script> </HEAD> <BODY> <A HREF="mailto://Lazhar.Zouari@laposte.net" onmouseOver="survolee();" onmouseOut="nonsurvolee();"> <IMG SRC="image1.png" name="image" width=126 height=126 border=0> </A> </BODY> </HTML>

par Zouari Lun 25 Jan - 22:06

Solution : Exercice N° 6

Code:: <HTML> <HEAD> <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; } </script> </HEAD> <BODY> <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> </TABLE> </BODY> </HTML>

par Zouari Lun 25 Jan - 22:11

Solution : Exercice N° 7

Code:: <HTML> <HEAD> <TITLE> Voici une page contenant du Javascript</TITLE> </HEAD> <BODY> <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>'); } } </script> </BODY> </HTML>

par Zouari Lun 25 Jan - 22:18

Solution : Exercice N° 8

Code:: <HTML> <HEAD> <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"); } </script> </HEAD> <BODY> <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> </BODY> </HTML>

par Zouari Lun 25 Jan - 22:20

Solution : Exercices N° 9

Code:: <HTML> <HEAD> <script LANGUAGE="javascript"> function afficher(form2) { var testin =document.form2.input.value; document.form2.output.value=testin } </script> </HEAD> <BODY> <CENTER><FORM NAME="form2"> <B>Entrée : </B><INPUT TYPE="text" NAME="input" VALUE=""> <INPUT TYPE="button" NAME="bouton" VALUE="Afficher >>" onClick="afficher(form2)"> <B> Sortie : </B><INPUT TYPE="text" NAME="output" VALUE=""> </FORM></CENTER> </BODY> </HTML>

par Zouari Lun 25 Jan - 22:27

Solution : Exercice N° 10

Code:: <HTML> <HEAD> <script language="javascript"> function liste(form5) { alert("L\'élément " + (form1.list.selectedIndex + 1)); } </script> </HEAD> <BODY> <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> </BODY> </HTML>

par Zouari Mer 27 Jan - 19:43

Solution : Exercice N° 11

Code:: <HTML> <HEAD> <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); } </script> </HEAD> <BODY> <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> </BODY> </HTML>

par Zouari Mer 27 Jan - 19:46

Solution : Exercice N° 12

Code:: <HTML> <HEAD> <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) alert(x * y); } </script> </HEAD> <BODY> <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> </BODY> </HTML>

par Zouari Mer 27 Jan - 23:50

Solution : Exercice N° 13

Code:: <HTML> <HEAD> <script language="javascript"> var jour = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","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>'); 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>'); } </script> </HEAD> <BODY> <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(); </script> <CENTER><INPUT TYPE = "submit" VALUE = "Envoyer"></CENTER> </FORM> </TABLE> </BODY> </HTML>

par Zouari Sam 6 Fév - 15:04

Solution complète de la série
Solution

par wiem ghith Mar 16 Fév - 23:20

pour le partage Exercices JavaScript 312683

par manianis Ven 20 Jan - 10:22

Assalamou Alaykom

Merci pour la série, il y a des notions abordées qui sont hors programme tel que l'utilisation des tableaux en JavaScript

par Contenu sponsorisé

Exercices JavaScript

Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript

Re: Exercices JavaScript