Hello world!

Écrivez un script qui affiche le message "Hello World !" sur la page.

Affichage d'un formulaire avec un champ texte

Écrivez un script qui affiche un formulaire avec un champ texte. Écrivez ensuite dans ce champ le
message "Vous avez réussi votre exercice".

Validation d'un formulaire

Vous avez une page avec un formulaire et un champ. Écrivez un script qui va valider le formulaire.
Si le champ est vide, un message d'erreur est affiché à côté du champ et le formulaire n'est pas
envoyé. Si le champ contient des données, le formulaire peut être envoyé.

Type des variables

Déclarez trois variables a, b et c comme "1", "2" et a+b. Afficher le type et la valeur de chaque
variable. Ensuite, forcez le type de a et b à entier et exécuter à nouveau a+b. Afficher le type et la
valeur de chaque variable.

Fonction avec nombre indéterminé d'arguments

Créez une fonction qui fait la somme d'un nombre indéterminé d'entiers. Écrivez un script qui va
tester cette fonction.

Nombre aléatoire
Écrivez un script qui va générer un nombre aléatoire. Vous devrez trouver ce nombre. Pour chaque
essai, le script vous dira si le nombre à trouver est plus grand ou plus petit. Lorsque le nombre est
trouvé, le script vous dira en combien de coups.

Objet en chaîne de caractères

Définir un objet 'member' (membre) avec les attributs 'id' (identifiant), 'name' (nom) et 'grade' et
une méthode 'toString' personnalisée. Créer un objet 'team' qui contient des membres. Créer une
instance de 'team' et y ajouter des membres. Afficher les membres de 'team' en utilisant la fonction
'toString' de 'member'.

Calculateur de salaire
Calculer le salaire d'une personne sur base de son salaire brut en décomptant les frais suivants:

Impôts sur le revenu : 18%

Assurance employé : 7%
Régime de pensions du Canada : 5%
Les personnes peuvent recevoir comme supplément un bonus de 100$ ou une allocation de 150$.

Il est possible de recevoir des réductions sur les impôts sur le revenu sous certaines conditions :

Si le travailleur est une femme, elle reçoit 2% de réduction.

Si le travailleur a 3 personnes à charge, il reçoit 1% de réduction.
Si le travailleur a 4 personnes à charge, il reçoit 2% de réduction.

SOLUTION

Calculateur de salaire
Énoncé
Calculer le salaire d'une personne sur base de son salaire brut en décomptant les frais suivants:

Impôts sur le revenu : 18%

Assurance employé : 7%
Régime de pensions du Canada : 5%
Les personnes peuvent recevoir comme supplément un bonus de 100$ ou une allocation de 150$.

Il est possible de recevoir des réductions sur les impôts sur le revenu sous certaines conditions :

Si le travailleur est une femme, elle reçoit 2% de réduction.

Si le travailleur a 3 personnes à charge, il reçoit 1% de réduction.
Si le travailleur a 4 personnes à charge, il reçoit 2% de réduction.
Solution
Fichier "js/script.js"
Number.prototype.formatMoney = function (c, d, t) {
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d === undefined ? "." : d,
t = t === undefined ? "," : t,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d +
Math.abs(n - i).toFixed(c).slice(2) : "");
}; // Source: http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-
javascript
function ElementReader() {
this.InputCheckbox = function (idInput) {
var input = document.getElementById(idInput);
if (input === null) {
return undefined;
}
return input.checked;
};
this.InputInt = function (idInput) {
var input = document.getElementById(idInput);
if (input === null) {
return undefined;
}
return parseInt(input.value);
};
this.Select = function (idSelect) {
var select = document.getElementById(idSelect);
if (select === null) {
return undefined;
}
var idx = select.selectedIndex;
return select.options[idx].value;
};
}

function ElementWriter() {
this.Tag = function (idTag, value) {
var tag = document.getElementById(idTag);
if (tag !== null) {
tag.innerHTML = value;
}
};
this.TagCurrency = function (idTag, value) {
this.Tag(idTag, value.formatMoney(2, ',', '&nbsp;') + '$');
};
}

function salaryCalculator() {
var incomeTaxRate = 0.18;
var employmentInsuranceRate = 0.07;
var canadaPensionPlanRate = 0.05;
var additionBonusValue = 100;
var additionAllowanceValue = 150;
 this.grossSalary;
this.additionBonus;
this.additionAllowance;
this.gender;
this.dependents;
this.getAdditions = function () {
var additions = 0;
if (this.additionBonus === true) {
additions += additionBonusValue;
}
if (this.additionAllowance === true) {
additions += additionAllowanceValue;
}
return additions;
};
this.getCanadaPensionPlan = function () {
return this.grossSalary * canadaPensionPlanRate;
};
this.getEmploymentInsurance = function () {
return this.grossSalary * employmentInsuranceRate;
};
this.getFinalSalary = function () {
return this.grossSalary - this.getCanadaPensionPlan() - this.getEmploymentInsurance() -
this.getIncomeTax() + this.getAdditions();
};
this.getIncomeTax = function () {
var relevantIncomeTaxRate = incomeTaxRate;
if (this.gender === 'F') {
relevantIncomeTaxRate -= 0.02;
}
if (this.dependents === 3) {
relevantIncomeTaxRate -= 0.01;
} else if (this.dependents > 3) {
relevantIncomeTaxRate -= 0.02;
}
return this.grossSalary * relevantIncomeTaxRate;
};
}

function computeSalary() {
var reader = new ElementReader();
var writer = new ElementWriter();
var salCalc = new salaryCalculator();
salCalc.grossSalary = reader.InputInt('grossSalary');
 salCalc.additionBonus = reader.InputCheckbox('additionBonus');
salCalc.additionAllowance = reader.InputCheckbox('additionAllowance');
salCalc.gender = reader.Select('gender');
salCalc.dependents = reader.InputInt('dependents');
writer.TagCurrency('incomeTaxResult', salCalc.getIncomeTax());
writer.TagCurrency('employmentInsuranceResult', salCalc.getEmploymentInsurance());
writer.TagCurrency('canadaPensionPlanResult', salCalc.getCanadaPensionPlan());
writer.TagCurrency('additionsResult', salCalc.getAdditions());
writer.TagCurrency('finalSalaryResult', salCalc.getFinalSalary());
}

function resetAll() {
var writer = new ElementWriter();
var results = ['incomeTaxResult', 'employmentInsuranceResult', 'canadaPensionPlanResult',
'additionsResult', 'finalSalaryResult'];
for (var i = 0; i < results.length; i++) {
writer.Tag(results[i], '');
}
}

Fichier "index.html"
<!DOCTYPE html>
<html>
<head>
<title>Calculateur de salaire</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Calculateur de salaire</h1>
<form id="myForm" onsubmit="return false;">
<div>
<label for="grossSalary">Salaire brut&nbsp;:</label>
<input id="grossSalary" type="number">$
</div>
<div>
<label for="additionBonus">Bonus&nbsp;:</label>
<input id="additionBonus" type="checkbox">
</div>
<div>
<label for="additionAllowance">Allocation&nbsp;:</label>
<input id="additionAllowance" type="checkbox">
</div>
<div>
 <label for="gender">Genre&nbsp;:</label>
<select id="gender">
<option value="M">Homme</option>
<option value="F">Femme</option>
</select>
</div>
<div>
<label for="dependents">Personnes à charge&nbsp;:</label>
<input id="dependents" type="number">
</div>
<div>
<input type="submit" value="Calculer" onclick="computeSalary()">
<input type="reset" value="Effacer" onclick="resetAll()">
</div>
</form>
<hr>
<p>Impôt sur le revenu&nbsp;: <span id="incomeTaxResult"></span></p>
<p>Assurance employé&nbsp;: <span id="employmentInsuranceResult"></span></p>
<p>Régime de pensions du Canada&nbsp;: <span id="canadaPensionPlanResult"></span></p>
<p>Suppléments&nbsp;: <span id="additionsResult"></span></p>
<p>Salaire net&nbsp;: <span id="finalSalaryResult"></span></p>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>

Objet en chaîne de caractères

Énoncé
Définir un objet 'member' (membre) avec les attributs 'id' (identifiant), 'name' (nom) et 'grade' et
une méthode 'toString' personnalisée. Créer un objet 'team' qui contient des membres. Créer une
instance de 'team' et y ajouter des membres. Afficher les membres de 'team' en utilisant la fonction
'toString' de 'member'.

Solution
Fichier "js/script.js"
function member(id, name, grade) {
this.id = id;
this.name = name;
this.grade = grade;
this.toString = function() {
 return "ID: "+this.id+", Name: "+this.name+", Grade: "+this.grade;
}
}

function team() {
this.members = new Array();
this.add = function(member) {
var index = this.members.length;
this.members[index] = member;
return index;
}
this.toString = function() {
return this.members.join("\n");
}
}

var myTeam = new team();

myTeam.add(new member(42, "Alice", "ICT C"));

myTeam.add(new member(43, "Abdelhamid", "ICT C"));
myTeam.add(new member(44, "Baya", "ICT C"));
myTeam.add(new member(45, "Firmus", "ICT B"));
myTeam.add(new member(46, "Jean", "ICT C"));
myTeam.add(new member(47, "Badria", "ICT A"));
myTeam.add(new member(48, "Lalla", "ICT C"));
myTeam.add(new member(49, "Souleymane", "ICT B"));

document.writeln(myTeam);
Fichier "index.html"
<!DOCTYPE html>
<html lang="fr">
<head>
<meta author="Sébastien Adam">
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Objet en chaîne de caractères</title>
</head>
<body>
<pre>
<script type="text/javascript" src="js/script.js"></script>
</pre>
</body>
</html>
Nombre aléatoire
Énoncé
Écrivez un script qui va générer un nombre aléatoire. Vous devrez trouver ce nombre. Pour chaque
essai, le script vous dira si le nombre à trouver est plus grand ou plus petit. Lorsque le nombre est
trouvé, le script vous dira en combien de coups.

Solution
Fichier "js/script.js"
function verifyReply() {
var proposedValue = valueField.value;
var pattern = /^\d+$/;
if(pattern.test(proposedValue)) {
numberTry++;
proposedValue = parseInt(proposedValue);
if(proposedValue < valueToFind) {
document.getElementById('result').innerHTML = "Le nombre à trouver est plus grand";
valueField.value = '';
valueField.focus();
} else if(proposedValue > valueToFind) {
document.getElementById('result').innerHTML = "Le nombre à trouver est plus petit";
valueField.value = '';
valueField.focus();
} else {
document.getElementById('result').innerHTML = "Vous avez trouvé la solution en
"+numberTry+" coups";
}
} else {
document.getElementById('result').innerHTML = "La valeur proposée doit être un nombre!!";
}
return false;
}

var maxValue = 1024;

var valueToFind = Math.floor((Math.random()*maxValue)+1);
var numberTry = 0;
var valueField = document.getElementById('valueField');

if(valueToFind > maxValue) {

valueToFind = maxValue;
}
document.getElementById('maxValue').innerHTML = maxValue;
valueField.value = '';
valueField.focus();
Fichier "index.html"
<!DOCTYPE html>
<html lang="fr">
<head>
<meta author="Sébastien Adam">
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Nombre aléatoire</title>
</head>
<body>
<p>
Vous devez trouver un nombre entre 1 et <span id="maxValue"></span>.
</p>
<div>
<form id="myForm" onsubmit="return verifyReply();">
<div>
<input type="text" id="valueField" size="4">
<input type="submit" value="Tester">
</div>
</form>
</div>
<p id="result"></p>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

Fonction avec nombre indéterminé d'arguments

Énoncé
Créez une fonction qui fait la somme d'un nombre indéterminé d'entiers. Écrivez un script qui va
tester cette fonction.

Solution
Fichier "js/script.js"
function sumAll() {
var index;
var sum = 0;
 for(index = 0; index < arguments.length; ++index) {
sum += arguments[index];
}
return sum;
}

var a = 12;
var b = 34;
var c = 56;
var d = 78;
var e = 90;

document.writeln("Variables définies:");
document.writeln("-------------------");
document.writeln("a = "+a);
document.writeln("b = "+b);
document.writeln("c = "+c);
document.writeln("d = "+d);
document.writeln("e = "+e);
document.writeln("")

document.writeln("Additions:");
document.writeln("----------");
document.writeln("Somme de a ("+a+"), b ("+b+") et c ("+c+") : sumAll(a, b, c) =>
"+sumAll(a, b, c));
document.writeln("Somme de b ("+b+") et d ("+d+") : sumAll(b, d) =>
"+sumAll(b, d));
document.writeln("Somme de a ("+a+"), b ("+b+"), c ("+c+"), d ("+d+") et e ("+e+") : sumAll(a,
b, c, d, e) => "+sumAll(a, b, c, d, e));
document.writeln("Somme d'aucun élément : sumAll() => "+sumAll());
Fichier "index.html"
<!DOCTYPE html>
<html lang="fr">
<head>
<meta author="Sébastien Adam">
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Fonction avec un nombre indéterminé d'arguments</title>
</head>
<body>
<pre>
<script type="text/javascript" src="js/script.js"></script>
</pre>
</body>
</html>

Type des variables

Énoncé
Déclarez trois variables a, b et c comme "1", "2" et a+b. Afficher le type et la valeur de chaque
variable. Ensuite, forcez le type de a et b à entier et exécuter à nouveau a+b. Afficher le type et la
valeur de chaque variable.

Solution
Fichier "js/script.js"
a = "1";
b = "2";
c = a + b;

document.writeln("Type et valeur des variables:");

document.writeln("-----------------------------");
document.writeln(" a: ("+typeof(a)+") "+a);
document.writeln(" b: ("+typeof(b)+") "+b);
document.writeln(" c: ("+typeof(c)+") "+c);

document.writeln("");

a = parseInt(a);
b = parseInt(b);
c = a + b;

document.writeln("Type et valeur des variables:");

document.writeln("-----------------------------");
document.writeln(" a: ("+typeof(a)+") "+a);
document.writeln(" b: ("+typeof(b)+") "+b);
document.writeln(" c: ("+typeof(c)+") "+c);
Fichier "index.html"
<!DOCTYPE html>
<html lang="fr">
<head>
<meta author="Sébastien Adam">
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Type des variables</title>
</head>
<body>
<pre>
<script type="text/javascript" src="js/script.js"></script>
</pre>
</body>
</html>

Validation d'un formulaire

Énoncé
Vous avez une page avec un formulaire et un champ. Écrivez un script qui va valider le formulaire.
Si le champ est vide, un message d'erreur est affiché à côté du champ et le formulaire n'est pas
envoyé. Si le champ contient des données, le formulaire peut être envoyé.

Solution
Fichier "js/script.js"
function validateForm() {
if(document.getElementById('myField').value == '') {
document.getElementById('myFieldError').innerHTML = 'Le champ ne peut être vide';
return false;
} else {
document.getElementById('myFieldError').innerHTML = '';
alert('Le formulaire peut être envoyé');
return true;
}
}
Fichier "index.html"
<!DOCTYPE html>
<html lang="fr">
<head>
<meta author="Sébastien Adam">
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Validation d'un formulaire</title>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div>
<form id="myForm" onsubmit="return validateForm();">
<div>
<label for="myField">Champ&nbsp;:</label>
<input type="text" id="myField" size="60">
<span id="myFieldError"></span>
</div>
<div>
 <input type="submit" value="Envoyer">
</div>
</form>
</div>
</body>
</html>

Affichage d'un formulaire avec un champ texte

Énoncé
Écrivez un script qui affiche un formulaire avec un champ texte. Écrivez ensuite dans ce champ le
message "Vous avez réussi votre exercice".

Solution
Fichier "js/script.js"
document.writeln('<form id="myForm">');
document.writeln('<div>');
document.writeln('<label for="myField">Champ&nbsp;:</label>');
document.writeln('<input type="text" id="myField" size="60">');
document.writeln('</div>');
document.writeln('</form>');

document.getElementById('myField').value="Vous avez réussi votre exercice";

Fichier "index.html"
<!DOCTYPE html>
<html lang="fr">
<head>
<meta author="Sébastien Adam">
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Affichage d'un formulaire avec un champ texte</title>
</head>
<body>
<div>
<script type="text/javascript" src="js/script.js"></script>
</div>
</body>
</html>
Hello world!
Énoncé
Écrivez un script qui affiche le message "Hello World !" sur la page.

Solution
Fichier "js/script.js"
document.writeln('Hello World!');
Fichier "index.html"
<!DOCTYPE html>
<html lang="fr">
<head>
<meta author="Sébastien Adam">
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Hello world</title>
</head>
<body>
<p>
<script type="text/javascript" src="js/script.js"></script>
</p>
</body>
</html>

Ecrire le code permettant de réaliser le formulaire suivant :

function affichage() {
FenetreAffichage = window.open('','NouvelleFenetre',
'toolbar=no,status=no,width=300,height=200')
FenetreAffichage.document.write("souvenez-vous de vos informations");
FenetreAffichage.document.write("

Vous êtes connecté entant que : " + document.formulaire1.nom.value);

FenetreAffichage.document.write("
Voici votre mot de passe : " + document.formulaire1.adresse.value);
FenetreAffichage.document.write("
Et votre E-mail est : " + document.formulaire1.email.value);
FenetreAffichage.document.write("
");
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>formulaire</title>
<script type="text/javascript">
function ChangeStatut(formulaire) {
if(formulaire.regagree.checked == true) {formulaire.validation.disabled = false }
if(formulaire.regagree.checked == false) {formulaire.validation.disabled = true }
}
</script>
<script src="passparam.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function Envoyer(f) {
f.submit();
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
/* On crée une fonction de verification */
function verifForm(formulaire)
{
if(formulaire.nom.value == "") /* on detecte si saisie33 est vide */
alert('saisissez votre pseudo !!'); /* dans ce cas on lance un message d'alerte */
else
formulaire.submit(); /* sinon on envoi le formulaire */
}
</SCRIPT>
</head>

<body bgcolor="#666666" >

<script language="javascript">

</script>
<font color="#ffffcc" dir="ltr" face ="Times New Roman" size="+6"><center><u>Remplir le
formulaire</blink></u>
</center></font><br /><br /><br />
<form Action="mailto:
amine_arbitre@hotmail.com?subject=Essaie formulaire" Method="Post" Entype="text/plain"
name="formulaire1">
<center>
Nom:<br>
<input name="n1" size="30" ><br /><br />
Prénom:<br>
<input name="prenom" size="30" ><br /><br />
Date de naissance:<br>
<select style="WIDTH: 57px"><option selected
>jour</option><option>--------------------
</option><option>01</option><option>02</option><option>03</option><option>04</option><
option>05</option><option>06</option><option>07</option><option>08</option><option>09</
option><option>10</option><option>11</option><option>12</option><option>13</option><opt
ion>14</option><option>15</option><option>16</option><option>17</option><option>18</opt
ion><option>19</option><option>20</option><option>21</option><option>22</option><option
>23</option><option>24</option><option>25</option><option>26</option><option>27</option
><option>28</option><option>29</option><option>30</option><option>31</option></select><
select style="WIDTH: 58px"><option selected
>mois</option><option>----------------------
</option><option>01</option><option>02</option><option>03</option><option>04</option><
option>05</option><option>06</option><option>07</option><option>08</option><option>09</
option><option>10</option><option>11</option><option>12</option>
</select><input name="annee" size="6" value="année">
<br /><br />
homme:
<input type="radio" tcheked> femme: <INPUT type="radio"><BR/>
<br />
<b>choisir un pseudo* :</b><br /> <input name="nom" size="30" /><br /><br />
<b>E-mail* :<u>exemple:
votre_nom@hotmail.com</u> </b><br /> <input name="email" size="30" /><br />
<br />
<b>mot de passe* :</b> <br /><input type="password" name="adresse" size="30" >
<br /><br />
confirmer mot de passe* :<br><input type="password" name="confirmer" size="30" /><br
/><br />
Ajouter votre photo:<br />

<input type="file" ><br /><br />

Exemple d'un contrat:<br /><textarea rows="6" cols="40" disabled="disabled">ce formulaire est
réalisé pour vous:
pour l'essayer,remplissez le pseudo,le mot de passe,et l'e-mail
puis cliquez sur vérifiez vos informations avant de s'inscrire </textarea><br /><br />

<p><input type="checkbox" name="regagree" value="valeur" onClick="ChangeStatut(this.form)"

/>J'ai fais la vérification</p>

<p>
<input TYPE="button" value="Vérifier vos informations avant de s'inscrire"
onClick="affichage();" />
<input type="button" name="validation" value="S'inscrire" disabled
onClick="verifForm(this.form)" />
<input type="reset" value="effacer la saisie" />
<input type="button" value="fermer la fenêtre" onclick="self.close()" /></p>
<hr align="center" /><font color="#FFFFCC">Réalisé par Nous</font>
</center>
</form>
<script language="JavaScript">

</script>
</body>
</html>