‭Exercice 1‬

<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬
‭
<‭
‭h‬tml‬‭
lang‬
=‬
‭ "en"‬
‭ >‬
‭
<‭
‭h‬ead‬
>‬
‭
<‭
‭m‬eta‬‭
charset‬
=‬
‭ "UTF-8"‬
‭ >‬
‭
<‭
‭m‬eta‬‭
http-equiv‬
=‬
‭ "X-UA-Compatible"‬‭
‭ content‬
=‬
‭ "IE=edge"‬
‭ >‬
‭
<‭
‭m‬eta‬‭
name‬
=‬
‭ "viewport"‬‭
‭ content‬
=‭
‭"‬width=device-width,‬
initial-scale=1.0"‬
‭ >‬
‭
<‭
‭t‬itle‬
>Exercice 1</‬
‭ title‬
‭ >‬
‭
<‭
‭l‬ink‬‭
rel‬
=‬
‭ "stylesheet"‬‭
‭ href‬
=‬
‭ "ex1.css"‬
‭ >‬
‭
</‬
‭ head‬
‭ >‬
‭
<‭
‭b‬ody‬
>‬
‭
<‭
‭f‬ieldset‬
>‬
‭
<‭
‭l‬egend‬
>Inscription</‬
‭ legend‬
‭ >‬
‭
<‭
‭f‬orm‬ ‭
id‬
=‬
‭ "myform"‬
‭ >‬
‭
<‭
‭t‬able‬
>‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
><‬
‭ label‬‭
‭ for‬
=‭
‭ "
‬name"‬
>Prénom et Nom‬‭
‭ *:</‬
label‬
‭ > </‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬
><‬
‭ input‬‭
‭ type‬
=‬
‭ "text"‬‭
‭ size‬
=‬
‭ "29"‬‭
‭ name‬
=‬
‭ "name"‬
‭
id‬
‭ =‬
‭ "name"‬
‭ ></‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
><‬
‭ label‬‭
‭ for‬
=‭
‭ "
‬cin"‬
>CIN *:</‬
‭ label‬
‭ >‬‭
‭ </‬
td‬
‭ >‬
‭
<‭
‭t‬d‬
><‬
‭ input‬‭
‭ type‬
=‬
‭ "text"‬‭
‭ size‬
=‬
‭ "10"‬‭
‭ name‬
=‬
‭ "cin"‬
‭
id‬
‭ =‬
‭ "cin"‬
‭ ></‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
><‬
‭ label‬‭
‭ for‬
=‭
‭ "
‬mail"‬
>Adresse Email‬‭
‭ *:</‬
label‬
‭ > </‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬
><‬
‭ input‬‭
‭ type‬
=‬
‭ "text"‬‭
‭ size‬
=‬
‭ "29"‬‭
‭ name‬
=‬
‭ "mail"‬
‭
id‬
‭ =‬
‭ "mail"‬
‭ ></‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
><‬
‭ label‬‭
‭ for‬
=‭
‭ "
‬cin"‬
>Niveau scolaire‬‭
‭ :</‬
label‬
‭ > </‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬
>‬
‭
<‬
‭ input‬‭
‭ type‬
=‬
‭ "radio"‬‭
‭ name‬
=‭
‭"‬niv"‬‭
id‬
=‬
‭ "niv1"‬
‭
checked‬
‭ >Sécondaire‬
‭
<‬
‭ input‬‭
‭ type‬
=‬
‭ "radio"‬‭
‭ name‬
=‭
‭"‬niv"‬
id‬
‭ =‬
‭ "niv2"‬
‭ >Universitaire‬
‭
<‬
‭ input‬‭
‭ type‬
=‬
‭ "radio"‬‭
‭ name‬
=‭
‭"‬niv"‬‭
id‬
=‬
‭ "niv3"‬
‭ >Autre‬
‭
</‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
 <‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬‭
id‬
=‬
‭ "tdtop"‬
‭ ><‬
‭ label‬‭
‭ for‬
=‬
‭ "forma"‬
‭ >Modules‬‭
‭ de formation‬
:</‬
‭ label‬
‭ > </‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬
>‬
‭
<‬
‭ select‬‭
‭ name‬
=‬
‭ "forma"‬‭
‭ id‬
=‬
‭ "forma"‬‭
‭ multiple‬
>‬
‭
<‬
‭ option‬‭
‭ value‬
=‭
‭"‬HTML5"‬
>HTML5</‬
‭ option‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‭
‭"‬CSS3"‬
>CSS3</‬
‭ option‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‭
‭"‬JavaScript"‬
>JavaScript</‬
‭ option‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‭
‭"‬JQuery"‬
>JQuery</‬
‭ option‬
‭ >‬
‭
</‬
‭ select‬
‭ >‬
‭
</‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬‭
colspan‬
=‬
‭ "2"‬
‭ >‬
‭
(*) Champs obligatoires <‬
‭ br‬
‭ >‬
‭
<‬
‭ input‬‭
‭ type‬
=‬
‭ "submit"‬‭
‭ value‬
=‬
‭ "Envoyer"‬‭
‭ >‬
<‬
‭ input‬‭
‭ type‬
=‬
‭ "reset"‬‭
‭ value‬
=‬
‭ "Annuler"‬
‭ >‬
‭
</‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭

</‬
‭ table‬
‭ >‬
‭
</‬
‭ form‬
‭ >‬
‭
</‬
‭ fieldset‬
‭ >‬
‭
<‭
‭s‬cript‬
>‬
‭
form‬
‭ =‭
‭d‬ocument.‬
getElementById‬
‭ (‬
‭ "myform"‬
‭ );‬
‭
form.‬
‭ addEventListener‬
‭ (‬
‭ 'submit'‬
‭ ,‬
‭
function‬
‭ (‭
‭e‬‬
){‬
‭ verif‬
‭ ();‬
‭ e‬
‭ .‬
‭ preventDefault‬
‭ ();})‬
‭
</‬
‭ script‬
‭ >‬
‭
<‭
‭s‬cript‬‭
src‬
=‬
‭ "ex1.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭

body‬
‭ {‬
‭
background-color‬
‭ :‬‭
‭ #BDB76B‬
;‬
‭
}‬
‭
legend‬
‭ {‬
‭
color‬
‭ :‬‭
‭ darkgreen‬
;‬
‭
}‬
‭
fieldset‬
‭ {‬
‭
width‬
‭ :‬‭
‭ 60‬
%‬
‭ ;‬
‭
border‬
‭ :‬‭
‭ 2‭
p‬x‬‭
darkgreen‬‭
solid‬
;‬
‭
border-radius‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
}‬
‭
#tdtop‬
‭ {‬
‭
vertical-align‬
‭ :‬‭
‭ top‬
;‬
‭
}‬
‭

function‬‭
‭ verif‬
(){‬
‭

//vérification des élements "required"‬

‭
let‬‭
‭ name‬
=‭
‭d‬ocument.‬
getElementById‬
‭ (‬
‭ "name"‬
‭ ).value;‬
‭
let‬‭
‭ cin‬
=‬
‭ document.‬
‭ getElementById‬
‭ (‬
‭ "cin"‬
‭ ).value;‬
‭
let‬‭
‭ mail‬
=‭
‭d‬ocument.‬
getElementById‬
‭ (‬
‭ "mail"‬
‭ ).value;‬
‭

if‬‭
‭ (name‬
==‬
‭ ""‬‭
‭ ||‬‭
cin‬
==‬
‭ ""‬
‭ ||‬‭
‭ mail‬
==‬
‭ ""‬
‭ ){‬
‭
alert‬
‭ (‬
‭ "nom, cin et adresse email doivent etre‬‭
‭ non vides"‬
);‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭

//vérification Maj‬
‭
const‬‭
‭ myArray‬‭
=‬‭
name.‬
split‬
‭ (‭
‭"‬ "‬
);‬
‭
//verif prenom‬
‭
let‬‭
‭ p‭
=‬‬
myArray[‬
‭ 0‬
‭ ];‬
‭
let‬‭
‭ testp‬
=‬
‭ p.‬
‭ toUpperCase‬
‭ ();‬
‭
if‬‭
‭ (p‬
!=‬
‭ testp){‬
‭
alert‬
‭ (‬
‭ "Prénom n'est pas en majus)"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
myArray.‬
‭ forEach‬
‭ (‭
‭e‬lement‬‭
=>‬‭
{‬
if‬‭
‭ (‬element‬
‭ [‭
‭0‬‬
]‬
‭ >=‬
‭ "a"‬‭
‭ &&‬‭
element‬
[‬
‭ 0‬
‭ ]‭
‭<‬=‬
"z"‬
‭ ){‬
‭
alert‬
‭ (‬
‭ "Prénom et nom sont invalides (Min‬‭
‭ au debut)"‬
);‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
});‬
‭

//verif cin‬
‭
if‬‭
‭ (cin.length‬‭
!=‬‭
8‬‭
||‬‭
isNaN‬
(cin)){‬
‭
alert‬
‭ (‬
‭ "num CIN est invalide"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭

//verif mail‬
‭
if‬‭
‭ (mail.‬
indexOf‬
‭ (‬
‭ "@"‬
‭ )‬
‭ <‬
‭ 0‬‭
‭ ||‬‭
mail.‬
indexOf‬
‭ (‬
‭ "."‬
‭ )‬
‭ ==-‬
‭ 1‭
‭)‬{‬
alert‬
‭ (‬
‭ "adresse email est invalide"‬
‭ );‬
‭
 return‬‭
‭ false‬
;‬
‭
}‬
‭

//verif modules formation : max 3‬

‭
modules‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‬
‭ "forma"‬
‭ );‬
‭
let‬‭
‭ count‬
=‬
‭ 0‬
‭ ;‬
‭
for‬‭
‭ (‭
l‬et‬‭
index‬‭
=‬‭
0‬; index‬‭
‭ <‬‭
modules.options.length;‬‭
index‬
++‬
‭ ){‬
‭
if‬‭
‭ ( modules.options[index].selected‬‭
===‬‭
true‬‭
) count‬
++‬
‭ ;‬
‭
}‬
‭

if‬‭
‭ (count‬
>‬
‭ 2‬
‭ ){‬
‭
alert‬
‭ (‬
‭ "Nombre des formations max est 2"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
//formulaire valide‬
‭
alert‬
‭ (‬
‭ "Formulaire Valide !"‬
‭ );‬
‭
}‬
‭
 ‭Exercice 3‬
<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬
‭
<‭
‭h‬tml‬‭
lang‬
=‬
‭ "en"‬
‭ >‬
‭
<‭
‭h‬ead‬
>‬
‭
<‭
‭m‬eta‬‭
charset‬
=‬
‭ "UTF-8"‬
‭ >‬
‭
<‭
‭m‬eta‬‭
http-equiv‬
=‬
‭ "X-UA-Compatible"‬‭
‭ content‬
=‬
‭ "IE=edge"‬
‭ >‬
‭
<‭
‭m‬eta‬‭
name‬
=‬
‭ "viewport"‬‭
‭ content‬
=‭
‭"‬width=device-width,‬
initial-scale=1.0"‬
‭ >‬
‭
<‭
‭t‬itle‬
>Document</‬
‭ title‬
‭ >‬
‭
<‭
‭l‬ink‬‭
rel‬
=‬
‭ "stylesheet"‬‭
‭ href‬
=‬
‭ "ex3.css"‬
‭ >‬
‭
</‬
‭ head‬
‭ >‬
‭
<‭
‭b‬ody‬
>‬
‭
<‭
‭f‬orm‬‭
id‬
=‭
‭"‬myform"‬
>‬
‭
<‭
‭f‬ieldset‬‭
id‬
=‬
‭ "field1"‬
‭ >‬
‭
<‭
‭l‬egend‬
>Vos Coordonnées</‬
‭ legend‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‬
‭ "container"‬
‭ >‬
‭

<‬
‭ div‬‭
‭ class‬
=‭
‭"‬formelem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‬
‭ "lname"‬
‭ >Nom:</‬
‭ label‬
‭ >‬
‭
<‬
‭ input‬‭
‭ class‬
=‬
‭ "data"‬‭
‭ type‬
=‭
‭"‬text"‬‭
id‬
=‭
‭"‬lname"‬
placeholder‬
‭ =‬
‭ "votre nom"‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭

<‬
‭ div‬‭
‭ class‬
=‭
‭"‬formelem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‬
‭ "fname"‬
‭ >Prénom:</‬
‭ label‬
‭ >‬
‭
<‬
‭ input‬‭
‭ class‬
=‬
‭ "data"‬‭
‭ type‬
=‭
‭"‬text"‬‭
id‬
=‭
‭"‬fname"‬
placeholder‬
‭ =‬
‭ "votre prenom"‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭

<‬
‭ div‬‭
‭ class‬
=‭
‭"‬formelem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‬
‭ "daten"‬
‭ >Date naissance:</‬
‭ label‬
‭ >‬
‭
<‬
‭ input‬‭
‭ class‬
=‬
‭ "data"‬‭
‭ type‬
=‭
‭"‬date"‬‭
id‬
=‭
‭"‬daten"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭

<‬
‭ div‬‭
‭ class‬
=‭
‭"‬formelem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‬
‭ "email"‬
‭ >eMail :</‬
‭ label‬
‭ >‬
‭
<‬
‭ input‬‭
‭ class‬
=‬
‭ "data"‬‭
‭ type‬
=‭
‭"‬email"‬‭
id‬
=‬
‭ "email"‬
‭
placeholder‬
‭ =‬
‭ "votre email"‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭

<‬
‭ div‬‭
‭ class‬
=‭
‭"‬formelem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‬
‭ "site"‬
‭ >Site :</‬
‭ label‬
‭ >‬
‭
 <‬
‭ input‬‭
‭ class‬
=‬
‭ "data"‬‭
‭ type‬
=‭
‭"‬text"‬
placeholder‬
‭ =‬
‭ "Votre site"‬‭
‭ id‬
=‬
‭ "site"‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭

<‬
‭ div‬‭
‭ class‬
=‭
‭"‬formelem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‬
‭ "code"‬
‭ >Mot de passe‬‭
‭ :</‬
label‬
‭ >‬
‭
<‬
‭ input‬‭
‭ class‬
=‬
‭ "data"‬‭
‭ type‬
=‭
‭"‬password"‬
placeholder‬
‭ =‬
‭ "Votre site"‬‭
‭ id‬
=‬
‭ "code"‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭"‬formelem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‬
‭ "genre"‬
‭ >Genre :</‬
‭ label‬
‭ >‬
‭
<‬
‭ input‬‭
‭ type‬
=‬
‭ "radio"‬‭
‭ name‬
=‭
‭"‬genre"‬
>Homme‬
‭
<‬
‭ input‬‭
‭ type‬
=‬
‭ "radio"‬‭
‭ name‬
=‭
‭"‬genre"‬
>Femme‬
‭
</‬
‭ div‬
‭ >‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭"‬formelem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‬
‭ "pays"‬
‭ >Pays :</‬
‭ label‬
‭ >‬
‭
<‬
‭ select‬‭
‭ class‬
=‭
‭"‬data"‬
name‬
‭ =‭
‭"‬pays"‬‭
id‬
=‭
‭"‬pays"‬
>‬
‭
<‬
‭ option‬‭
‭ value‬
=‬
‭ ""‬‭
‭ selected‬
>Votre‬
‭
pay</‬
‭ option‬
‭ >‬
‭
<‬
‭ optgroup‬‭
‭ label‬
=‬
‭ "Afrique"‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‬
‭ "tn"‬
‭ >Tun</‬
‭ option‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‬
‭ "alg"‬
‭ >Alger</‬
‭ option‬
‭ >‬
‭
</‬
‭ optgroup‬
‭ >‬
‭
<‬
‭ optgroup‬‭
‭ label‬
=‬
‭ "Europe"‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‬
‭ "fr"‬
‭ >Fr</‬
‭ option‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‬
‭ "belg"‬
‭ >Belg</‬
‭ option‬
‭ >‬
‭
</‬
‭ optgroup‬
‭ >‬
‭
<‬
‭ optgroup‬‭
‭ label‬
=‬
‭ "Amérique"‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‬
‭ "ca"‬
‭ >Ca</‬
‭ option‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‬
‭ "arg"‬
‭ >Arg</‬
‭ option‬
‭ >‬
‭
</‬
‭ optgroup‬
‭ >‬
‭
<‬
‭ optgroup‬‭
‭ label‬
=‬
‭ "Autres"‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‬
‭ "eur"‬
‭ >Europ</‬
‭ option‬
‭ >‬
‭
<‬
‭ option‬‭
‭ value‬
=‬
‭ "asi"‬
‭ >Asie</‬
‭ option‬
‭ >‬
‭
</‬
‭ optgroup‬
‭ >‬
‭
</‬
‭ select‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭

</‬
‭ fieldset‬
‭ >‬
‭
<‭
‭f‬ieldset‬
>‬
‭
<‭
‭l‬egend‬
>Vos formation</‬
‭ legend‬
‭ >‬
‭
<‭
‭d‬iv‬
>‬
‭
 <‭
‭i‬nput‬‭
type‬
=‬
‭ "checkbox"‬‭
‭ name‬
=‬
‭ "forma"‬‭
‭ value‬
=‬
‭ "html"‬
‭ >‬
‭
formation en html 5 <‬
‭ br‬
‭ >‬
‭
<‭
‭i‬nput‬‭
type‬
=‬
‭ "checkbox"‬‭
‭ name‬
=‬
‭ "forma"‬‭
‭ value‬
=‬
‭ "css"‬
‭ >‬
‭
formation en CSS3 <‬
‭ br‬
‭ >‬
‭
<‭
‭i‬nput‬‭
type‬
=‬
‭ "checkbox"‬‭
‭ name‬
=‬
‭ "forma"‬‭
‭ value‬
=‬
‭ "js"‬
‭ >‬
‭
formation en JS <‬
‭ br‬
‭ >‬
‭
<‭
‭t‬extarea‬‭
name‬
=‭
‭"‬desc"‬‭
id‬
=‭
‭"‬desc"‬‭
cols‬
=‬
‭ "50"‬‭
‭ rows‬
=‭
‭"‬5"‬
placeholder‬
‭ =‬
‭ "decrire votre besoin"‬
‭ ></‬
‭ textarea‬
‭ >‬
‭

</‬
‭ div‬
‭ >‬
‭
</‬
‭ fieldset‬
‭ >‬
‭
<‭
‭f‬ieldset‬
>‬
‭
<‭
‭l‬egend‬
>Envoyer nous votre photo</‬
‭ legend‬
‭ >‬
‭
<‭
‭i‬nput‬‭
id‬
=‬
‭ "myfile"‬‭
‭ type‬
=‬
‭ "file"‬‭
‭ value‬
=‭
‭"‬Choisir‬‭
un fichier"‬
>‬
‭
<‭
‭i‬nput‬‭
type‬
=‭
‭"‬hidden"‬‭
value‬
=‬
‭ "taille max‬‭
‭ 10ko"‬
>‬
‭
<‭
‭b‬r‬
>‬
‭
<‭
‭i‬nput‬‭
type‬
=‭
‭"‬reset"‬‭
value‬
=‭
‭"‬Effacer"‬‭
class‬
=‬
‭ "btn"‬
‭ >‬
‭
<‭
‭i‬nput‬‭
type‬
=‭
‭"‬submit"‬‭
value‬
=‬
‭ "Envoyer"‬‭
‭ class‬
=‬
‭ "btn"‬
‭ >‬
‭

</‬
‭ fieldset‬
‭ >‬
‭
</‬
‭ form‬
‭ >‬
‭
<‭
‭s‬cript‬
>‬
‭
form‬
‭ =‭
‭d‬ocument.‬
getElementById‬
‭ (‬
‭ "myform"‬
‭ );‬
‭
form.‬
‭ addEventListener‬
‭ (‬
‭ 'submit'‬
‭ ,‬
‭
function‬
‭ (‭
‭e‬‬
){‬
‭ e‭
‭.‬‬
preventDefault‬
‭ ();‬
‭ verif‬
‭ ();})‬
‭
</‬
‭ script‬
‭ >‬
‭
<‭
‭s‬cript‬‭
src‬
=‬
‭ "ex3.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭

</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭

fieldset‬
‭ {‬
‭
margin‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
width‬
‭ :‬‭
‭ 50‬
%‬
‭ ;‬
‭
box-shadow‬
‭ :‬‭
‭ -1‬
px‬‭
‭ -1‬
px‬‭
‭ 10‬
px‬‭
‭ 2‬px‬‭
‭ rgb‬
(‬
‭ 194‬
‭ ,‬‭
‭ 194‬
,‬‭
‭ 194‬
);‬
‭
border‬
‭ :‬‭
‭ 2‭
p‬x‬‭
solid‬‭
rgb‬
(‬
‭ 194‬
‭ ,‬‭
‭ 194‬
,‬‭
‭ 194‬
);‬
‭
border-radius‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
}‬
‭

legend‬
‭ {‬
‭
padding‬
‭ :‬‭
‭ 5‬px‬
‭ ;‬
‭
border‬
‭ :‬‭
‭ 4‭
p‬x‬‭
solid‬‭
rgb‬
(‬
‭ 194‬
‭ ,‬‭
‭ 194‬
,‬‭
‭ 194‬
);‬
‭
 background-color‬
‭ :‬‭
‭ gainsboro‬
;‬
‭
border-radius‬
‭ :‬‭
‭ 7‭
p‬x‬
;‬
‭
font-weight‬
‭ :‬‭
‭ bold‬
;‬
‭
font-size‬
‭ :‬‭
‭ large‬
;‬
‭
}‬
‭
label‬‭
‭ {‬
/* Pour être sûrs que toutes les étiquettes‬
‭
ont même taille et sont correctement alignées */‬
‭
display‬
‭ :‬‭
‭ inline-block‬
;‬
‭
width‬
‭ :‬‭
‭ 80‬
px‬
‭ ;‬
‭
font-weight‬
‭ :‬‭
‭ bold‬
;‬
‭

}‬
‭
#daten‬
‭ {‬
‭
vertical-align‬
‭ :‬‭
‭ top‬
;‬
‭
}‬
‭
#pays‬
‭ {‬
‭
width‬
‭ :‬‭
‭ 81‬
%‬
‭ ;‬
‭
height‬
‭ :‬‭
‭ 37‬
px‬
‭ ;‬
‭
}‬
‭
.data‬
‭ {‬
‭
width‬
‭ :‬‭
‭ 80‬
%‬
‭ ;‬
‭
height‬
‭ :‬‭
‭ 30‬
px‬
‭ ;‬
‭
border‬
‭ :‬‭
‭ 2‭
p‬x‬‭
rgb‬
(‭
‭1‬83‬
,‬‭
‭ 183‬
,‬‭
‭ 183‬
)‬‭
‭ solid‬
;‬
‭
border-radius‬
‭ :‬‭
‭ 5‭
p‬x‬
;‬
‭
}‬
‭

.green‬
‭ {‬
‭
border‬
‭ :‬‭
‭ 4‭
p‬x‬‭
solid‬‭
green‬
;‬
‭
width‬‭
‭ :‬‭
80‬
%‬
‭ ;‬
‭
height‬
‭ :‬‭
‭ 30‬
px‬
‭ ;‬
‭
border-radius‬
‭ :‬‭
‭ 5‭
p‬x‬
;‬
‭
}‬
‭
textarea‬
‭ {‬
‭
border‬
‭ :‬‭
‭ 2‭
p‬x‬‭
rgb‬
(‭
‭1‬83‬
,‬‭
‭ 183‬
,‬‭
‭ 183‬
)‬‭
‭ solid‬
;‬
‭
border-radius‬
‭ :‬‭
‭ 5‭
p‬x‬
;‬
‭
width‬
‭ :‬‭
‭ 90‬
%‬
‭ ;‬
‭
}‬
‭
.formelem‬
‭ {‬
‭
margin‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
}‬
‭
.btn‬
‭ {‬
‭
font-weight‬
‭ :‬‭
‭ bold‬
;‬
‭
 margin‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
border-radius‬
‭ :‬‭
‭ 15‬
px‬
‭ ;‬
‭
border‬
‭ :‬‭
‭ none‬
;‬
‭
padding‬
‭ :‬‭
‭ 20‬
px‬
‭ ;‬
‭
/*padding-left: 20px;‬
‭
padding-right: 20px;*/‬
‭
padding-top‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
padding-bottom‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
color‬
‭ :‬‭
‭ white‬
;‬
‭
background-color‬
‭ :‬‭
‭ rgb‬
(‬
‭ 113‬
‭ ,‬‭
‭ 186‬
,‬‭
‭ 218‬
);‬
‭
}‬
‭
#myfile‬
‭ {‬
‭
margin-left‬
‭ :‬‭
‭ 30‬
px‬
‭ ;‬
‭
}‬
‭

function‬‭
‭ verif‬
(){‬
‭
//collect data from form‬
‭
lname‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‭
‭"‬lname"‬
).value;‬
‭
fname‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‭
‭"‬fname"‬
).value;‬
‭
daten‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‭
‭"‬daten"‬
).value;‬
‭
site‬
‭ =‭
‭d‬ocument.‬
getElementById‬
‭ (‬
‭ "site"‬
‭ ).value;‬
‭
code‬
‭ =‭
‭d‬ocument.‬
getElementById‬
‭ (‬
‭ "code"‬
‭ ).value;‬
‭
mail‬
‭ =‭
‭d‬ocument.‬
getElementById‬
‭ (‬
‭ "email"‬
‭ ).value;‬
‭

//required fields‬
‭
if‬ ‭
‭ (lname‬
==‬
‭ ""‬
‭ ){‬
‭
alert‬
‭ (‬
‭ "le nom est obligatoire"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
if‬ ‭
‭ (fname‬
==‬
‭ ""‬
‭ ){‬
‭
alert‬
‭ (‬
‭ "le prenom est obligatoire"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
if‬ ‭
‭ (daten‬
==‬
‭ ""‬
‭ ){‬
‭
alert‬
‭ (‬
‭ "date naissance est obligatoire"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
//Le mot de passe doit être formé exactement de‬‭
‭ 8 caractères.‬
if‬ ‭
‭ (code.length‬
!=‬
‭ 8‬
‭ ){‬
‭
alert‬
‭ (‬
‭ "pass invalide => 8 caracteres"‬
‭ );‬
‭
 return‬‭
‭ false‬
;‬
‭
}‬
‭
//Le choix d’un genre est obligatoire‬
‭
genre‬
‭ =‬
‭ document.‬
‭ getElementsByName‬
‭ (‬
‭ "genre"‬
‭ );‬
‭
if‬ ‭
‭ (‭
!‬‬
genre[‬
‭ 0‭
‭]‬.checked‬‭
&&‬‭
!‭
g‬enre[‬
1‭
‭]‬.checked){‬
alert‬
‭ (‬
‭ "genre obligatoire !"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
//La sélection d’un pays est obligatoire‬
‭
pays‬
‭ =‭
‭d‬ocument.‬
getElementById‬
‭ (‬
‭ "pays"‬
‭ );‬
‭

if‬ ‭
‭ (pays.selectedIndex‬
<‬
‭ 1‬
‭ ){‬
‭
alert‬
‭ (‬
‭ "pays obligatoire !"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
// Au moins une formation est choisie‬
‭
forma‬
‭ =‬
‭ document.‬
‭ getElementsByName‬
‭ (‬
‭ "forma"‬
‭ );‬
‭
if‬ ‭
‭ (‭
!‬‬
forma[‬
‭ 0‭
‭]‬.checked‬‭
&&‬‭
!‭
f‬orma[‬
1‭
‭]‬.checked‬‭
&&‬‭
!‭
f‬orma[‬
2‭
‭]‬.checked){‬
alert‬
‭ (‬
‭ "formation obligatoire (min : 1)!"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭

// L’envoie d’une image est obligatoire‬

‭
file‬
‭ =‭
‭d‬ocument.‬
getElementById‬
‭ (‬
‭ "myfile"‬
‭ ).value;‬
‭
console.‬
‭ log‬
‭ (file);‬
‭
let‬‭
‭ p‬‭
=‬‭
file.‬
lastIndexOf‬
‭ (‬
‭ "."‬
‭ );‬
‭
let‬‭
‭ ext‬‭
=‬‭
file.‬
substring‬
‭ (p‬
‭ +‭
‭1‬‬
);‬
‭
console.‬
‭ log‬
‭ (ext);‬
‭

//images !! jpg png bmp ...‬

‭
if‬ ‭
‭ (file.value‬
==‬
‭ ""‬
‭ ){‬
‭
alert‬
‭ (‬
‭ "fichier obligatoire !"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
//sol => string indexof‬
‭
mesExt‬
‭ =‬
‭ "jpg png bmp"‬
‭ ;‬
‭
if‬‭
‭ (mesExt.‬
indexOf‬
‭ (ext)‬
‭ ==-‬
‭ 1‭
‭ )
‬{‬
alert‬
‭ (‬
‭ "ext : jpg png bmp uniquement !"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
//sol 2 => array includes‬
‭
mesExt‬
‭ =‬
‭ [‬
‭ "jpg"‬
‭ ,‬‭
‭ "png"‬
,‬‭
‭ "bmp"‬
];‬
‭
if‬‭
‭ (mesExt.‬
includes‬
‭ (ext)‬
‭ ==‬
‭ false‬
‭ ){‬
‭
 alert‬
‭ (‬
‭ "ext : jpg png bmp uniquement !"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭

//...........................‬
‭
return‬‭
‭ true‬
;‬
‭
}‬
‭

//Lorsqu’une zone de texte ou textarea perd le focus‬‭

‭ la bordure prenne‬
une‬
‭
//couleur verte.‬
‭

function‬‭
‭ myfocus‬
(‭
‭ i
‬d‬
) {‬
‭
//recherche‬
‭
input‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‭
‭i‬d‬
);‬
‭
input.‬
‭ setAttribute‬
‭ (‬
‭ "class"‬
‭ ,‭
‭"‬data green"‬
);‬
‭
}‬
‭

‭Exercice 2‬

<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬
‭
<‭
‭h‬tml‬‭
lang‬
=‬
‭ "en"‬
‭ >‬
‭
<‭
‭h‬ead‬
>‬
‭
<‭
‭m‬eta‬‭
charset‬
=‬
‭ "UTF-8"‬
‭ >‬
‭
<‭
‭m‬eta‬‭
http-equiv‬
=‬
‭ "X-UA-Compatible"‬‭
‭ content‬
=‬
‭ "IE=edge"‬
‭ >‬
‭
<‭
‭m‬eta‬‭
name‬
=‬
‭ "viewport"‬‭
‭ content‬
=‭
‭"‬width=device-width,‬
initial-scale=1.0"‬
‭ >‬
‭
<‭
‭t‬itle‬
>Document</‬
‭ title‬
‭ >‬
‭
<‭
‭l‬ink‬‭
rel‬
=‬
‭ "stylesheet"‬‭
‭ href‬
=‬
‭ "ex2.css"‬
‭ >‬
‭
</‬
‭ head‬
‭ >‬
‭
<‭
‭b‬ody‬
>‬
‭
<‭
‭f‬orm‬‭
action‬
=‭
‭"‬"‬‭
id‬
=‬
‭ "myform"‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‬
‭ "container"‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‬
‭ "cont2"‬
‭ >‬
‭
 <‭
‭d‬iv‬‭
class‬
=‭
‭"‬elem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‭
‭ "
‬dim"‬
>Taille</‬
‭ label‬
‭ >‬
‭
<‬
‭ input‬‭
‭ onblur‬
=‭
‭"‬‬
fnblur‬
‭ (‬
‭ this‬
‭ .‬
‭ id‬
‭ )"‬
‭
onfocus‬
‭ =‬
‭ "‭
‭f‬nfocus‬
(‭
‭ t
‬his‬
.‬
‭ id‬
‭ )"‬‭
‭ class‬
=‬
‭ "data"‬‭
‭ type‬
=‭
‭"‬text"‬‭
name‬
=‬
‭ "dim"‬
‭
id‬
‭ =‬
‭ "dim"‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭"‬elem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‭
‭ "
‬min"‬
>Borne inf</‬
‭ label‬
‭ >‬
‭
<‬
‭ input‬‭
‭ onblur‬
=‭
‭"‬‬
fnblur‬
‭ (‬
‭ this‬
‭ .‬
‭ id‬
‭ )"‬
‭
onfocus‬
‭ =‬
‭ "‭
‭f‬nfocus‬
(‭
‭ t
‬his‬
.‬
‭ id‬
‭ )"‬‭
‭ class‬
=‬
‭ "data"‬‭
‭ type‬
=‭
‭"‬text"‬‭
name‬
=‬
‭ "min"‬
‭
id‬
‭ =‬
‭ "min"‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭"‬elem"‬
>‬
‭
<‬
‭ label‬‭
‭ for‬
=‭
‭ "
‬max"‬
>Borne sup</‬
‭ label‬
‭ >‬
‭
<‬
‭ input‬‭
‭ onblur‬
=‭
‭"‬‬
fnblur‬
‭ (‬
‭ this‬
‭ .‬
‭ id‬
‭ )"‬
‭
onfocus‬
‭ =‬
‭ "‭
‭f‬nfocus‬
(‭
‭ t
‬his‬
.‬
‭ id‬
‭ )"‬‭
‭ class‬
=‬
‭ "data"‬‭
‭ type‬
=‭
‭"‬text"‬‭
name‬
=‬
‭ "max"‬
‭
id‬
‭ =‬
‭ "max"‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‬
‭ "cont3"‬
‭ >‬
‭
<‭
‭i‬nput‬‭
type‬
=‬
‭ "submit"‬‭
‭ value‬
=‬
‭ "generate"‬‭
‭ name‬
=‭
‭"‬btn"‬
id‬
‭ =‬
‭ "btn"‬‭
‭ class‬
=‬
‭ "mybtn"‬
‭ >‬
‭

</‬
‭ div‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‬
‭ "result"‬
‭ >‬
‭
<‭
‭t‬able‬‭
id‬
=‬
‭ "mytable" class="table-light"‬
‭ ></‬
‭ table‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ form‬
‭ >‬
‭

<‭
‭s‬cript‬
>‬
‭
form‬‭
‭ =‬‭
document.‬
getElementById‬
‭ (‬
‭ "myform"‬
‭ );‬
‭
form.‬
‭ addEventListener‬
‭ (‬
‭ 'submit'‬
‭ ,‬‭
‭ function‬‭
(‬e‬
‭ )‬‭
‭ {‬
e‭
‭.‬‭
p
‬reventDefault‬
();‬‭
‭ verif‬
(); })‬
‭
</‬
‭ script‬
‭ >‬
‭
<‭
‭s‬cript‬‭
src‬
=‬
‭ "ex2.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭

.container‬
‭ {‬
‭
width‬
‭ :‬
‭ 70‬
‭ %‭
‭;‬‬
 margin‬
‭ :‬‭
‭ auto‬
;‬
‭
}‬
‭
label‬
‭ {‬
‭
padding-left‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
}‬
‭
.cont2‬
‭ {‬
‭
margin‬
‭ :‬‭
‭ auto‬
;‬
‭
display‬
‭ :‬‭
‭ flex‬
;‬
‭
justify-content‬
‭ :‬‭
‭ space-around‬
;‬
‭
}‬
‭
.data‬
‭ {‬
‭
margin‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
height‬
‭ :‬‭
‭ 30‬
px‬
‭ ;‬
‭
border-radius‬
‭ :‬‭
‭ 5‭
p‬x‬
;‬
‭
font-size‬
‭ :‬‭
‭ 15‬
px‬
‭ ;‬
‭
border‬‭
‭ :‬‭
1‬px‬‭
‭ solid‬‭
#299be4‬
;‬
‭
}‬
‭
.focusClass‬
‭ {‬
‭
outline‬
‭ :‬‭
‭ none‬
;‬
‭
box-shadow‬
‭ :‬‭
‭ -1‬
px‬‭
‭ -1‬
px‬‭
‭ 10‬
px‬‭
‭ 2‬px‬ ‭
‭ #299be4‬
;‬
‭
}‬
‭
.elem‬
‭ {‬
‭
display‬
‭ :‬‭
‭ grid‬
;‬
‭
}‬
‭
.cont3‬
‭ {‬
‭
display‬
‭ :‬‭
‭ flex‬
;‬
‭
justify-content‬
‭ :‬‭
‭ space-around‬
;‬
‭
}‬
‭
.result‬
‭ {‬
‭

display‬
‭ :‬‭
‭ flex‬
;‬
‭
justify-content‬
‭ :‬‭
‭ space-around‬
;‬
‭
}‬
‭
.mybtn‬
‭ {‬
‭
margin-bottom‬
‭ :‬‭
‭ 30‬
px‬
‭ ;‬
‭
padding‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
border‬
‭ :‬‭
‭ none‬
;‬
‭
border-radius‬
‭ :‬‭
‭ 7‭
p‬x‬
;‬
‭
margin-top‬
‭ :‬‭
‭ 30‬
px‬
‭ ;‬
‭
width‬
‭ :‬‭
‭ 80‬
%‬
‭ ;‬
‭
color‬
‭ :‬‭
‭ white‬
;‬
‭
background-color‬
‭ :‬
‭ #299be4‬
‭ ;‬
‭
font-size‬
‭ :‬‭
‭ larger‬
;‬
‭
 font-weight‬
‭ :‬‭
‭ bold‬
;‬
‭
}‬
‭
table‬
‭ {‬
‭
width‬
‭ :‬‭
‭ 80‬
%‬
‭ ;‬
‭
border-collapse‬
‭ :‬‭
‭ collapse‬
;‬
‭
border‬
‭ :‬‭
‭ 2‭
p‬x‬‭
solid‬‭
#ddd‬
;‬
‭
text-align‬
‭ :‬‭
‭ center‬
;‬
‭
}‬
‭
.table-light‬‭
‭ td‬
{‬
‭
padding‬
‭ :‬‭
‭ 10‬
px‬
‭ ;‬
‭
border-right‬
‭ :‬‭
‭ 2‬px‬‭
‭ solid‬‭
#ddd‬
;‬
‭
}‬
‭
.table-light‬‭
‭ tr‬
{‬
‭
border-top‬
‭ :‬‭
‭ 2‭
p‬x‬‭
solid‬‭
#ddd‬
;‬
‭
}‬
‭
.table-light‬‭
‭ tr‬
:nth-child‬
‭ (‬
‭ odd‬
‭ ){‬
‭
background-color‬
‭ :‬‭
‭ rgba‬
(‭
‭0‬‬
,‬‭
‭ 0‭
,‬‬‭
0‭
,‬‬‭
0.05‬
);‬
‭
}‬
‭

function‬‭
‭ verif‬
(‬
‭ params‬
‭ ) {‬
‭

}‬
‭
function‬‭
‭ fnfocus‬
(‭
‭ i
‬d‬
) {‬
‭
//recherche‬
‭
console.‬
‭ log‬
‭ (‬
‭ "focus fn on => "‬
‭ +‭
‭i‬d‬
);‬
‭
input‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‭
‭i‬d‬
);‬
‭
input.‬
‭ setAttribute‬
‭ (‬
‭ "class"‬
‭ ,‭
‭"‬focusClass data"‬
);‬
‭
}‬
‭
function‬‭
‭ fnblur‬
(‬
‭ id‬
‭ ) {‬
‭
//recherche‬
‭
console.‬
‭ log‬
‭ (‬
‭ "blur fn on => "‬
‭ +‬
‭ id‬
‭ );‬
‭
input‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‭
‭i‬d‬
);‬
‭
input.‬
‭ setAttribute‬
‭ (‬
‭ "class"‬
‭ ,‭
‭"‬data"‬
);‬
‭
}‬
‭

function‬‭
‭ verif‬
() {‬
‭
//test taille vide/entier‬
‭
let‬‭
‭ dim‬
=‬
‭ document.‬
‭ getElementById‬
‭ (‬
‭ "dim"‬
‭ ).value;‬
‭
if‬‭
‭ (dim‬
==‬
‭ ""‬‭
‭ ||‬‭
isNaN‬
(dim)){‬
‭
 alert‬
‭ (‬
‭ "dim requried or must be number"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
//test max/min‬
‭
let‬‭
‭ max‬
=‬
‭ document.‬
‭ getElementById‬
‭ (‬
‭ "max"‬
‭ ).value;‬
‭
let‬‭
‭ min‬
=‬
‭ document.‬
‭ getElementById‬
‭ (‬
‭ "min"‬
‭ ).value;‬
‭
if‬‭
‭ (min‬
==‬
‭ ""‬‭
‭ ||‬‭
max‬‭
==‬
""‬‭
‭ ||‬‭
isNaN‬
(min)‬
‭ ||‬‭
‭ isNaN‬
(max)){‬
‭
alert‬
‭ (‬
‭ "min & max requried"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‭
‭e‬lse‬
{‬
‭
if‬
‭ (‬
‭ parseInt‬
‭ (min)‬
‭ >‬
‭ parseInt‬
‭ (max)){‬
‭
alert‬
‭ (‬
‭ "min > max : error"‬
‭ );‬
‭
return‬‭
‭ false‬
;‬
‭
}‬
‭
}‬
‭

//5.3 --> 6‬
‭

table‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‭
‭"‬mytable"‬
);‬
‭ //recherche‬‭
‭ table‬
//calcule "ROWS"‬
‭
rows‬
‭ =‭
‭M‬ath.‬
ceil‬
‭ (‬
‭ parseInt‬
‭ (dim)‬
‭ /‬
‭ 10‬
‭ );‬
‭ // nb des lignes‬
‭
for‬
‭ (‬
‭ let‬‭
‭ j‭
=‬‬
0‬
‭ ;j‬
‭ <‬
‭ rows;j‬
‭ ++‬
‭ ){‬
‭
tr‬
‭ =‬
‭ document.‬
‭ createElement‬
‭ (‭
‭"‬tr"‬
);‬
‭ //creation‬‭
‭ TR‬
for‬‭
‭ (‭
l‬et‬‭
i‬‭
=‬‭
0‬; i‬‭
‭ <‬‭
10‬
; i‬
‭ ++‬
‭ ) {‬
‭
//...........................‬
‭
td‬
‭ =‬
‭ document.‬
‭ createElement‬
‭ (‭
‭"‬td"‬
);‬
‭ //creation‬‭
‭ td‬
let‬‭
‭ n‬‭
=‬‭
getRandomInt‬
(min,max);‬‭
‭ //création‬‭
random int‬
tn‬
‭ =‬
‭ document.‬
‭ createTextNode‬
‭ (n);‬‭
‭ //création‬‭
node text‬
//-------------------------------‬
‭
td.‬
‭ appendChild‬
‭ (tn);‬
‭
tr.‬
‭ appendChild‬
‭ (td);‬
‭
}‬
‭
table.‬
‭ appendChild‬
‭ (tr);‬
‭
}‬
‭

return‬‭
‭ true‬
;‬
‭
}‬
‭

function‬‭
‭ fnfocus‬
(‭
‭ i
‬d‬
) {‬
‭
//recherche‬
‭
 console.‬
‭ log‬
‭ (‬
‭ "focus fn on => "‬
‭ +‭
‭i‬d‬
);‬
‭
input‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‭
‭i‬d‬
);‬
‭
input.‬
‭ setAttribute‬
‭ (‬
‭ "class"‬
‭ ,‭
‭"‬focusClass data"‬
);‬
‭
}‬
‭
function‬‭
‭ fnblur‬
(‬
‭ id‬
‭ ) {‬
‭
//recherche‬
‭
console.‬
‭ log‬
‭ (‬
‭ "blur fn on => "‬
‭ +‬
‭ id‬
‭ );‬
‭
input‬
‭ =‬
‭ document.‬
‭ getElementById‬
‭ (‭
‭i‬d‬
);‬
‭
input.‬
‭ setAttribute‬
‭ (‬
‭ "class"‬
‭ ,‭
‭"‬data"‬
);‬
‭
}‬
‭

function‬‭
‭ getRandomInt‬
(‬
‭ min‬
‭ ,‬‭
‭ max‬
) {‬
‭
min‬‭
‭ =‬‭
Math.‬
ceil‬
‭ (‬
‭ Number‬
‭ (‬
‭ min‬
‭ ));‬
‭
max‬‭
‭ =‬‭
Math.‬
floor‬
‭ (‬
‭ Number‬
‭ (‬
‭ max‬
‭ )‬
‭ +‭
‭1‬‬
);‬
‭
return‬‭
‭ Math.‬
floor‬
‭ (Math.‬
‭ random‬
‭ ()‬‭
‭ *‬‭
(‬max‬‭
‭ -‬‭
min‬
))‬‭
‭ +‬‭
min‬
;‬
‭
}‬
‭

‭Exercice 4 :‬
<!‬
‭ doctype‬‭
‭ html‬
>‬
‭
<‭
‭h‬tml‬
>‬
‭

<‭
‭h‬ead‬
>‬
‭
<‭
‭t‬itle‬
>Manipuler Styles</‬
‭ title‬
‭ >‬
‭
<‭
‭m‬eta‬‭
charset‬
=‬
‭ "utf-8"‬
‭ >‬
‭
</‬
‭ head‬
‭ >‬
‭
<‭
‭b‬ody‬
>‬
‭
<‭
‭d‬iv‬
>‬
‭
<‭
‭t‬able‬‭
border‬
=‬
‭ "1"‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
>couleur de fond (rgb)</‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬
>‬
‭
0<‬
‭ input‬‭
‭ type‬
=‬
‭ "range"‬‭
‭ min‬
=‭
‭ "
‬0"‬‭
max‬
=‬
‭ "255"‬‭
‭ step‬
=‬
‭ 5‬
‭
name‬
‭ =‭
‭'‬color'‬‭
oninput‬
=‬
‭ '‬
‭ update‬
‭ (‬
‭ this‬
‭ )'‬‭
‭ value‬
=‬
‭ "0"‬
‭ >255‬
‭
</‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬‭
rowspan‬
=‬
‭ "6"‬‭
‭ width‬
=‭
‭"‬400"‬‭
align‬
=‬
‭ "center"‬
‭ >‬
‭
<‬
‭ h1‬‭
‭ id‬
=‭
‭"‬p1"‬
>Titre de test</‬
‭ h1‬
‭ >‬
‭
</‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
>padding</‬
‭ td‬
‭ >‬
‭
 <‭
‭t‬d‬
>‬
‭
0<‬
‭ input‬‭
‭ type‬
=‬
‭ "range"‬‭
‭ name‬
=‬
‭ "padding"‬‭
‭ min‬
=‬
‭ "0"‬
‭
max‬
‭ =‭
‭ "
‬30"‬‭
step‬
=‬
‭ 5‬‭
‭ oninput‬
=‭
‭'‬‬
update‬
‭ (‬
‭ this‬
‭ )'‬‭
‭ value‬
=‭
‭"‬0"‬
>30‬
‭
</‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
>height</‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬
>‬
‭
0<‬
‭ input‬‭
‭ type‬
=‬
‭ "range"‬‭
‭ min‬
=‭
‭ "
‬5"‬‭
max‬
=‬
‭ "200"‬
‭
name‬
‭ =‭
‭"‬height"‬‭
step‬
=‬
‭ 50‬‭
‭ value‬
=‬
‭ "0"‬‭
‭ oninput‬
=‬
‭ '‭
‭u‬pdate‬
(‬
‭ this‬
‭ )'‬
‭ >200‬
‭
</‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
>width</‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬
>‬
‭
0<‬
‭ input‬‭
‭ type‬
=‬
‭ "range"‬‭
‭ min‬
=‭
‭ "
‬5"‬‭
max‬
=‬
‭ "200"‬‭
‭ name‬
=‬
‭ "width"‬
‭
step‬
‭ =‭
‭5‬0‬‭
value‬
=‬
‭ "0"‬‭
‭ oninput‬
=‬
‭ '‭
‭u‬pdate‬
(‭
‭t‬his‬
)'‬
‭ >200‬
‭
</‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
>arrondi</‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬
>‬
‭
0<‬
‭ input‬‭
‭ type‬
=‬
‭ "range"‬‭
‭ min‬
=‭
‭ "
‬5"‬‭
max‬
=‬
‭ "30"‬‭
‭ name‬
=‭
‭"‬radius"‬
step‬
‭ =‭
‭5‬‬‭
value‬
=‭
‭"‬0"‬‭
oninput‬
=‬
‭ '‬
‭ update‬
‭ (‬
‭ this‬
‭ )'‬
‭ >30‬
‭
</‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭
<‭
‭t‬r‬
>‬
‭
<‭
‭t‬d‬
>rotation</‬
‭ td‬
‭ >‬
‭
<‭
‭t‬d‬
>‬
‭
0<‬
‭ input‬‭
‭ type‬
=‬
‭ "range"‬‭
‭ min‬
=‭
‭ "
‬5"‬‭
max‬
=‬
‭ "180"‬
‭
name‬
‭ =‭
‭"‬rotation"‬‭
step‬
=‬
‭ 5‬‭
‭ value‬
=‬
‭ "0"‬‭
‭ oninput‬
=‭
‭'‬‬
update‬
‭ (‭
‭t‬his‬
)'‬
‭ >180‬
‭
</‬
‭ td‬
‭ >‬
‭
</‬
‭ tr‬
‭ >‬
‭

</‬
‭ table‬
‭ >‬
‭

</‬
‭ div‬
‭ >‬
‭
<‭
‭s‬cript‬‭
src‬
=‬
‭ "ex4.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭

</‬
‭ html‬
‭ >‬
‭
function‬‭
‭ update‬
(‬
‭ elem‬
‭ ) {‬
‭
var‬‭
‭ p1‬‭
=‬‭
document.‬
getElementById‬
‭ (‬
‭ "p1"‬
‭ );‬
‭ //recherche‬
‭
if‬‭
‭ (‬elem‬
‭ .‭
‭g‬etAttribute‬
(‬
‭ "name"‬
‭ )‬‭
‭ ==‬‭
"color"‬
) {‬
‭
p1.‬
‭ style‬
‭ .background‬‭
‭ =‬‭
"rgb("‬‭
+‬‭
elem‬
.value‬‭
‭ +‬‭
","‬‭
+‬‭
elem‬
.value‬‭
‭ +‬
","‬‭
‭ +‬‭
elem‬
.value‬‭
‭ +‬‭
")"‬
;‬
‭
var‬‭
‭ c‬‭
=‬‭
255‬‭
-‬‭
elem‬
.value;‬
‭
p1.‬
‭ style‬
‭ .color‬‭
‭ =‬‭
"rgb("‬‭
+‬‭
c‬‭
+‬‭
","‬‭
+‬‭
c‬‭
+‬‭
","‬‭
+‬‭
c‬‭
+‬‭
")"‬
;‬
‭
}‬
‭
else‬‭
‭ if‬‭
(‭
e‬lem‬
.‬
‭ getAttribute‬
‭ (‭
‭"‬name"‬
)‬‭
‭ ==‬‭
"padding"‬
)‬‭
‭ {‬
p1.‬
‭ style‬
‭ .padding‬‭
‭ =‬‭
elem‬
.value‬‭
‭ +‬‭
"px"‬
;‬
‭
}‬
‭
else‬‭
‭ if‬‭
(‭
e‬lem‬
.‬
‭ getAttribute‬
‭ (‭
‭"‬name"‬
)‬‭
‭ ==‬‭
"height"‬
)‬‭
‭ {‬
p1.‬
‭ style‬
‭ .height‬‭
‭ =‬‭
elem‬
.value‬‭
‭ +‬‭
"px"‬
;‬
‭
}‬
‭
else‬‭
‭ if‬‭
(‭
e‬lem‬
.‬
‭ getAttribute‬
‭ (‭
‭"‬name"‬
)‬‭
‭ ==‬‭
"width"‬
)‬‭
‭ {‬
p1.‬
‭ style‬
‭ .width‬‭
‭ =‬‭
elem‬
.value‬‭
‭ +‬‭
"px"‬
;‬
‭
}‬
‭
else‬‭
‭ if‬‭
(‭
e‬lem‬
.‬
‭ getAttribute‬
‭ (‭
‭"‬name"‬
)‬‭
‭ ==‬‭
"radius"‬
)‬‭
‭ {‬
p1.‬
‭ style‬
‭ .borderRadius‬‭
‭ =‬‭
elem‬
.value‬‭
‭ +‬‭
"px"‬
;‬
‭
}‬
‭
else‬‭
‭ if‬‭
(‭
e‬lem‬
.‬
‭ getAttribute‬
‭ (‭
‭"‬name"‬
)‬‭
‭ ==‬‭
"rotation"‬
)‬‭
‭ {‬
p1.‬
‭ style‬
‭ .transform‬‭
‭ =‬‭
"rotate("‬‭
+‬‭
elem‬
.value‬‭
‭ +‬‭
"deg)"‬
;‬
‭
}‬
‭

}‬
‭