JAVASCRIPT Ini LesObjets Correction PDF

MODULE WEB AVANCE
Lessentiel sur JavaScript

EXERCICES
La partie cours aborde les points suivants :
Les tableaux
Les vnements
Les structures conditionnelles
Les botes de dialogue
Les objets
Les fonctions
Correction
EXERCICE 1 : Tableau une dimension
En juin 2012, le Communaut europenne comptait 27 pays. Le tableau a t cr

ainsi en JS :
var pays_ce_jun12 =
[Allemagne,Autriche,Belgique,Bulgarie,Chypre,Danemark,Espagne,Es
tonie,Finlande,France,Grce,Hongrie,Irlande,Italie,Lettonie,Litu
anie,Luxembourg,Malte,Pays-Bas,Pologne,Portugal,Rpublique
tchque,Roumanie,Royaume-Uni,Slovaquie,Slovnie,Sude]
a) Cette instruction contient des fautes. Lesquelles ?
Comment retrouver le dernier lment de cette liste (classe par ordre
alphabtique en franais) ?
b) Partant de la liste ci-dessus que vous aurez corrige, afficher tous les pays
c) Afficher tous les pays en 2 ou trois colonnes
a) Les fautes
Pour rappel,
1. Chaque lment de la liste est une chaine de caractres, il faut donc qu'il soit not entre
guilles ;
2. Une dclaration avec affectation est une instruction, donc il faut un point-virgule en fin
d'instruction ;
3. Une dclaration explicite et affectation d'un tableau commence par le mot cl var (T.B.) et
le signe d'affectation est suivi de new Array avec parenthses (oubli) ;
4. si la dclaration est implicite, il n'y a pas de mot rserv var, ni de new Array et usage de
crochets.
Le dernier
Comme il y a 27 pays, JS les compte de 0 26.
le dernier sera appel ainsi :
pays_ce_jun12[26]
<html>
<head><title>CUY exo 26a</title>
<script type="text/javascript">
</script>
</head>
<body bgcolor="#FFFFFF" background="../../../images/FondClem2.jpg">
<?php include('tr3.php'); ?>
<h1>Exo 26a</h1>
<p>var pays_ce_jun12 =
[Allemagne,Autriche,Belgique,Bulgarie,Chypre,Danemark,Espagne,Estonie,Finlande,France,
Grce,Hongrie,Irlande,Italie,Lettonie,Lituanie,Luxembourg,Malte,PaysBas,Pologne,Portugal,Rpublique tchque,Roumanie,RoyaumeUni,Slovaquie,Slovnie,Sude]
<h2>Les fautes </h2>
<p>Pour rappel,<br> <br>
1. Chaque lment de la liste est une chaine de caractres, il faut donc qu'il soit not entre
guilles ; <br>
2. Une dclaration avec affectation est une instruction, donc il faut un point-virgule en fin
d'instruction ;<br>
3. Une dclaration explicite et affectation d'un tableau commence par le mot cl var (T.B.) et
le signe d'affectation est suivi de new Array avec parenthses (oubli) ;<br>
4. si la dclaration est implicite, il n'y a pas de mot rserv var, ni de new Array et usage de
crochets.</p>
<h2>Le dernier</h2>
<p>Comme il y a 27 pays, JS les compte de 0 26.<br>
le dernier sera appel ainsi :<br>
<b>pays_ce_jun12[26]</b></p>
<h2></h2>
</body>
</html>
b) afficher tous les pays

<html>
<head><title>CUY exo 26b</title>
</head>
<h1>Exo 26b</h1>
pays_ce_jun12 =
["Allemagne","Autriche","Belgique","Bulgarie","Chypre","Danemark","Espagne","Estonie",
"Finlande","France","Grce","Hongrie","Irlande","Italie","Lettonie","Lituanie","Luxembo
urg","Malte",
"Pays-Bas","Pologne","Portugal","Rpublique tchque","Roumanie","RoyaumeUni","Slovaquie","Slovnie","Sude"];
var esp8 = "
";
for (i=1;i<=27;i++) {
document.write(pays_ce_jun12[i-1]+esp8);
}
</script>
</body>
</html>
c) Afficher tous les pays en 2 ou trois colonnes
<html>
<head><title>CUY exo 26c</title>
</head>
<h1>Exo 26c</h1>
pays_ce_jun12 =
["Allemagne","Autriche","Belgique","Bulgarie","Chypre","Danemark","Espagne","Estonie",
"Finlande","France","Grce","Hongrie","Irlande","Italie","Lettonie","Lituanie","Luxem
bourg","Malte",
"Pays-Bas","Pologne","Portugal","Rpublique tchque","Roumanie","RoyaumeUni","Slovaquie","Slovnie","Sude"];
var nouv_ligne = "<br>";
var tiers = pays_ce_jun12.length/3 ;
document.write("<table align='center' cellpadding='10' border='1'><tr><td>");
for (i=0;i<tiers;i++) {
document.write(pays_ce_jun12[i]+nouv_ligne);
}
document.write("</td><td>");
for (i=tiers;i<2*tiers;i++) {
}
document.write("</td><td>");
for (i=2*tiers;i<27;i++) {
}
document.write("</td></tr></table>");
</script>
</body>
</html>
EXERCICE 2 Imaginez un lien en HTML dont l'aspect (couleur du texte, couleur de
background et autres) se modifient lorsque l'on survole ce lien avec la souris.
<html>
</script>
<STYLE>
.on {
font-size: 22;
text-decoration: underline;
color: red;
background: #FFFFFF;
}
.off {
font-size: 22;
text-decoration: none;
color: white;
background: #33BB33;
}
</STYLE>
</head>
<h1>Exo 22a</h1>
<h2>Texte qui contient un <a href="http;//www.cuy.be" class="off"
onMouseOver="this.className='on';" onMouseOut="this.className='off';">lien</a> vers un site
d'exception </h2>
<p>Pour rappel,<br>
passer la souris sur ce lien</p>
</body>
</html>
EXERCICE 3 :
partir d'un petit menu de dpart tel que celui prsent ci-dessous, crez plusieurs
sous-menus qui contiennent des liens. Chaque sous-menu n'apparaitra que si
l'utilisateur passe sa souris sur l'lment du menu principal quivalent et disparaitra
ds que la souris quitte cette zone sensible.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>CUY exo22c Menu et sous-menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../../style.css">
<SCRIPT LANGUAGE="JavaScript1.2" src="../../../rech3.js"></script>
</head>
<body background="../../../images/FondClem2.jpg" onLoad="LoadCoeffic()">

<script language="JavaScript" type="text/javascript">
<!-function afficher(_param) {
document.getElementById(_param).style.visibility = "visible";
}
function cacher(_param) {
document.getElementById(_param).style.visibility = "hidden";
}
fonc = "#bbaa55";
clair = "#ddcc77";
function coul_fonc(v_calque) {
v_calque.style.backgroundColor = fonc;
}
function coul_clai(v_calque) {
v_calque.style.backgroundColor = clair;
}
//-->
</script>
<style type="text/css">
#menu0 {
position:absolute;
top:200px;
left:150px;
}
.m_bouton {
position:absolute;
top:0px;
width:110px;
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:900;
background-color:#bb9977;
padding-left:3px;
}
#m1 { left:0px; }
#m2 { left:115px; }
#m3 { left:230px; }
#m4 { left:345px; }
.m_calque {
position:absolute;
top:25px;
width:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:900;
background-color:#99aadd;
padding-left:3px;
visibility:hidden;
}
a{
color:green;
text-decoration:none;
}
#mc1 { left:0px; }
#mc2 { left:115px; }
body {
font-family: arial,helvetica;
font-size: 18px;
}
a{
color: #000000;
text-decoration: none;
}
#barre {
position: absolute;
top: 500px;
left: 150px;
}
.nav {
position: absolute;
top: 0px;
background-color: #ddcc44;
width: 145px;
height: 24px;
border: 1px solid #000000;
padding-left: 2px;
}
#nav1 { left: 0px; }
.menuu {
position: absolute;
top: 24px;
background-color: #ddcc44;
visibility: hidden;
width: 130px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#menu1 { left: 0px; }
.choix {
width: 113px;
padding: 1px 0px 1px 4px; /* haut droite bas gauche */
}
</style>
</head>
<CENTER>
<p>
<p>
<h1>Exo 22c</h1>
<p> </p>
<p>Premire solution
<div id="menu0">
<div id="m1" class="m_bouton" onmouseover="afficher('mc1');"
onmouseout="cacher('mc1');">Menu 1</div>
<div id="mc1" class="m_calque" onmouseover="afficher('mc1');"
onmouseout="cacher('mc1');">
<div class="m_item"><a href="abc.html">Option 1</a></div>
</div>
</div>
</div>
onmouseout="cacher('mc4');">Solution 1</div>
</div>
</body>
</html>
EXERCICE 4 :
partir d'une question pose, imaginez un indice (hint, ide, suggestion) qui
apparaisse au moment du survol de la question. La solution propose fait appel aux
identifications d'objets.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CUY exo22e</title>
<script TYPE="text/javaScript">
function indice() {
d= document.getElementById("indic");
d.innerHTML=" --> indication : Non, ce n'est pas 'How To Make Love...', songez un langage
utilisant des liens et des balises.";
}
function supprime_indice() {
d= document.getElementById("indic");
d.innerHTML="";
}
</script>
</head>
<body">
<h1>Exo 22e</h1>
<p onmouseover="indice();" onmouseout= "supprime_indice();" id="question">Quel est le sens du
sigle HTML ?
<span id="indic" style="color:green" ></span>
</p><p> </p>
</body>
</html>
Exercice 5 : Tableaux, fonctions, boucles :

1.
2.
Dfinir en JavaScript un tableau contenant des notes d'tudiants comprises entre 0 et 20.
Implmenter en JavaScript les fonctions qui permettent d'afficher un tel tableau, de savoir combien
d'tudiants ont eu 10, de calculer la moyenne des notes, de connatre la note maximale, de rechercher
une note particulire, etc.
<!DOCTYPE html>
2: <html lang="fr">
3: <head>
4: <title>Premiers algorithmes sur les tableaux</title>
5: <meta charset="utf-8" />
6: </head>
7: <body>
8:
9: <h1>Premiers algorithmes sur les tableaux</h1>
10:
11: <script>
12:
13: /* Affiche le contenu d'un tableau en HTML */
14:
15: function affiche_tableau (t) {
16: document.writeln('<p>le tableau est :</p>');
17: document.writeln('<table border="1"><tr>');
18: for (var i=0 ; i<t.length ; i++) {
19: document.writeln('<td>',t[i],'</td>');
20: }
21: document.writeln('</tr></table>');
22: }
23:
24:
25: /* Calcule et affiche la moyenne des lments d'un tableau */
26: function affiche_moyenne (t) {
27: var somme = 0;
29: somme = somme + t[i];
30: }
31: document.writeln('<p>la moyenne vaut ',(somme/t.length),'</p>');
32: }
33:
34: /* Compte et affiche le nombre d'apparitions d'un lment dans un tableau */
35: function occurrences (x,t) {
36: var fois = 0;
38: if (t[i]==x) {
39: fois = fois + 1;
40: }
41: }
42: document.writeln('<p>',x,' apparait ',fois,' fois.</p>');
43: }
44:
45:
46: /* Compte et affiche combien ont eu 10 ou plus */
47: function onteulamoyenne (t) {
48: var n = 0;
50: if (t[i]>=10) {
51: n = n + 1;
52: }
53: }
54: document.writeln('<p>',n,' ont eu la moyenne.</p>');
55: }
56:
57: /* Indique si un lment est prsent dans un tableau ou non */
58: function recherche (x,t) {
59: var i = 0;
60: while ((i<t.length) && (t[i]!=x)) {
61: i = i+1
62: }
63: if (i<t.length) {
64: document.writeln('<p>',x,' est prsent.</p>');

65: } else {
66: document.writeln('<p>',x,' n\'est pas prsent.</p>');
67: }
68: }
69:
70:
71: /* appels aux procdures dfinies ci-dessus */
72:
73: var notes = [5,12,8,20,10];
74: notes[2] = 9;
75:
76: affiche_tableau(notes);
77: affiche_moyenne(notes);
78: occurrences(12,notes);
79: occurrences(2,notes);
80: onteulamoyenne(notes);
81: recherche(12,notes);
82: recherche(2,notes);
83: </script>
84:
85: </body>
86: </html>
EXERCICE 6 : Les dates

a)
b)
c)
d)
Prvoyez un bouton qui indique le jour que nous sommes selon la date du jour. "Nous sommes
dimanche" devrait apparaitre tous les dimanches, etc.
Ecrivez une fonction Javascript permettant laffichage de la date complte. On ne soccupera
pas du format daffichage, on se contentera dun "simple" affichage de lobjet Date.
Testez lutilisation de la mthode getYear() en fonction de votre navigateur. On rcuprera
lanne dans une variable que lon fera afficher dans une page web.
crivez une fonction Javascript permettant laffichage de la date sous la forme "jour mois
anne", par exemple : "Nous sommes 3 janvier 2013, il est 8 h 15 min. 36 sec." Vous crirez
votre script pour le navigateur que vous voulez.
Prvoyez un bouton qui indique le jour que nous sommes selon la date du jour. "Nous
sommes dimanche" devrait apparaitre tous les dimanches, etc.
<html>
<head><title>CUY exo 35a - jour de la semaine</title>
</head>
<h1>Exo 35a - jour de la semaine</h1>

function jourDeLaSemaine(){
var aujourdhui= new Date;
jour=aujourdhui.getDay();
var jourFrancais ;
switch (jour) {
case 0 : jourFrancais="dimanche";break;
case 1 : jourFrancais="lundi";break;
case 2 : jourFrancais="mardi";break;
case 3 : jourFrancais="mercredi";break;
case 4 : jourFrancais="jeudi";break;
case 5 : jourFrancais="vendredi";break;
case 6 : jourFrancais="samedi";break;
default: jourFrancais="jour inexistant"; break;
}
alert("Nous sommes "+jourFrancais+".");
}
</script>
<p>Cliquez sur le bouton pour lancer la fonction - jour de la semaine : <button
onclick="jourDeLaSemaine()">Lancer la fonction</button></p>
</body>
</html>
Ecrivez une fonction Javascript permettant laffichage de la date complte. On ne soccupera
pas du format daffichage, on se contentera dun "simple" affichage de lobjet Date.
<html>
<head><title>CUY exo 35b - date</title>
</head>
<h1>Exo 35b - date</h1>
function jourdate(){
alert("Date sans aucun format\nNous sommes \n"+aujourdhui+".");
}
</script>
<p>Cliquez sur le bouton pour lancer la fonction - date : <button onclick="jourdate()">Lancer la
fonction</button></p>
</body>
</html>
Testez lutilisation de la mthode getYear() en fonction de votre navigateur. On rcuprera

lanne dans une variable que lon fera afficher dans une page web.
<html>
<head><title>CUY exo 35c - getYear()</title>
</head>
<h1>Exo 35c - getYear()</h1>
var annee = aujourdhui.getYear();
alert("Essai de la mthode getYear() \nAnne en cours\nNous sommes en :\n"+annee+".");
}
</script>
<p>Cliquez sur le bouton pour tester la mthode getYear() : <button onclick="jourdate()">Lancer la
fonction</button></p>
</body>
</html>
crivez une fonction Javascript permettant laffichage de la date sous la forme "jour mois
anne", par exemple : "Nous sommes 3 janvier 2013, il est 8 h 15 min. 36 sec." Vous crirez
votre script pour le navigateur que vous voulez.
<html>
<head><title>CUY exo 35d - date et heure belge</title>
</head>
<h1>Exo 35d - date et heure belges</h1>
var aujourdhui = new Date;
var dateN = aujourdhui.getDate();
var Mois = aujourdhui.getMonth();
//
alert(Mois);
var MoisFr = new
Array("janvier","fvrier","mars","avril","mai","juin","juillet","aout","septembre","octobre","novembr
e","decembre");
var annee = aujourdhui.getFullYear();
var heure=aujourdhui.getHours();
var min=aujourdhui.getMinutes();
var sec=aujourdhui.getSeconds();
var datefrcomplete = dateN+ " "+ MoisFr[Mois]+" " + annee +" \nIl est : \n" +heure +" h
"+min+ " min "+sec+" sec";
alert("Date et heure belges\nNous sommes le\n"+datefrcomplete+".");
}
</script>
<p>Cliquez sur le bouton pour connaitre >> date et heure BE : <button onclick="jourdate()">Lancer
la fonction</button></p>
</body>
</html>
EXERCICE 7 : Les RegExp

Vous souhaitez, par exemple, que tous les visiteurs de vos pages se fassent connatre par un pseudo qui doit
comporter de 6 9 caractres alphanumriques sans caractres spciaux, ni accentus. Lorsque la chane ne
convient pas renvoyer un message derreur.
function f_verifier(f) {
var expregu=new RegExp("^[a-zA-Z0-9]{6,9}$","g");
le_pseudo=f.pseudo.value;
if ( expregu.test(le_pseudo) ) {
alert("B I E N !\nLe pseudo [ "+le_pseudo+" ]
est acceptable :)");
} else {
alert(" D E S O L !\n\nLe pseudo [
"+le_pseudo+" ] n'est pas admissible ! :(");
}
}
EXERCICE 8 : Remplacer les caractres accentus
Si vous devez attribuer des adresses mail un groupe, vous devez savoir qu'une adresse mail ne peut contenir
de caractres accentus ni de caractres spciaux et sont recommands en bas de casse. Lorsque le mail entr
nest pas correct, renvoyer un message derreur.
function f_attribuer(f) {
var le_prennom = f.prennom.value;
var le_mail = le_prennom.toLowerCase();
var regAccentA = new RegExp('[]', 'gi');
var regAccentE = new RegExp('[]', 'gi');
var regCarSpe = new RegExp('[\']', 'gi');
var regDot = new RegExp('[ ]', 'gi');
//
le_mail = le_mail.replace(regAccentA,'a');
le_mail = le_mail.replace(regAccentE,'e');
le_mail = le_mail.replace(regDot,'.')
le_mail = le_mail.replace(regCarSpe,'');
le_mail = le_mail+'@cuy.be';
alert(le_mail);
}
EXERCICE 9 :
Crer et affecter 2 variables qui soient des chaines de caractres, chacune tant une phrase complte.
Concatner ces 2 chaines et affecter une 3e variable. Afficher cette nouvelle variable dans un alert.
<html>
</head>
<h1>Exo 5a</h1>
ch1 = "Ceci est un test. ";
ch2 = "Ne vous inquitez pas.";
_chaines = ch1 + ch2;
window.alert(_chaines);
</script>
</body>
</html>
EXERCICE 10 :
Crer une expression rgulire qui vrifie l'exactitude d'une url telle que "http://www.cuy.be".
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>CUY exo 5e</title>
</head>
<h1>Exo 5e</h1>
re = " /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/";
function teste_chaine()
{
var inp=document.getElementById('inp_id').value;
if (re.test(inp))
{
alert("Cette URL (" +inp+") est valide");
}
else
{
alert("L'URL donne (" +inp+") N'EST PAS valide");
}
}
</script>
<p>
<p>
<p>Entrez une chaine qui soit une URL correcte.</p>
<input id="inp_id" onchange="teste_chaine();">
</body>
</html>
EXERCICE 11 :
Crer une expression rgulire qui vrifie l'exactitude dun numro de tlphone franais
ar regexTel = /^(0[1-68])(?:[ _.-]?(\d{2})){4}$/;
var numeroTel = prompt("Quel est votre numro de tlphone ?");
if(regexTel.test(numeroTel))
alert("Votre numro semble correct");
else
alert("Ce n'est pas un numro de tlphone (franais) valide");

JAVASCRIPT Ini LesObjets Correction PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

JAVASCRIPT Ini LesObjets Correction PDF

Transféré par

Droits d'auteur :

Formats disponibles

MODULE WEB AVANCE

Lessentiel sur JavaScript

En juin 2012, le Communaut europenne comptait 27 pays. Le tableau a t cr

b) afficher tous les pays

c) Afficher tous les pays en 2 ou trois colonnes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Exercice 5 : Tableaux, fonctions, boucles :

64: document.writeln('<p>',x,' est prsent.</p>');

EXERCICE 6 : Les dates

<h1>Exo 35a - jour de la semaine</h1>

Testez lutilisation de la mthode getYear() en fonction de votre navigateur. On rcuprera

EXERCICE 7 : Les RegExp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR"

Vous aimerez peut-être aussi