Mohamed-Amine ETTALH - Exercice 01

Exercice 1:
Créez une fonction qui prend deux nombres comme arguments et retourne leur somme.
<script>
function addition(x, y) {
if (typeof x !== "number" || typeof y !== "number") {

return "Erreur : veuillez entrer deux nombres!";
}
return x + y;
}
val1=(prompt("Entrer la valeur 01"));

val2=(prompt("Entrer la valeur 02"));
alert("Resultat est :"+addition(val1,val2));
</script>
Exercice 2:
Écrivez une fonction qui prend un nombre entier de minutes et le convertit en secondes.
<script>
function minuteToSecond(minutes) {
return minutes * 60;
}
</script>
Exercice 3:
Créez une fonction qui prend un nombre en argument, incrémente le nombre +1 et renvoie le
résultat.
<script>
function increment(n) {
return ++n;
}
</script>
Exercice 4:
Écrivez un programme JavaScript pour récupérer l’URL d’un site Web
<script>
console.log(document.URL);
</script>
Exercice 05:
Créez une fonction qui vérifier l’égalité de deux paramètres a et b. La valeur et le type de paramètres
doivent être testés afin d’avoir une égalité. La fonction doit renvoyer TRUE si les paramètres sont
égaux et FALSE s’ils sont différents.
<script>
function checkEq(a, b) {
return a === b;
}
Exercice 06:
Créez une fonction qui renvoie TRUE si une chaîne est vide et sinon renvoie FALSE.
<script>
function isEmpty(str) {
return str.length == 0;
}
</script>
Exercice 07:
Créez une fonction qui prend un nom et renvoie un message d’accueil sous la forme d’une chaîne.
N’utilisez pas une fonction normale mais utilisez une fonction fléchée(Arrow)
<script>
const msg = name => `Hello ${name}, Welcome to WayToLearnX!`
</script>
Exercice 08:
 Créez une page web multiplication.html qui contiendra un formulaire. Ce formulaire contiendra

deux champs de texte et un bouton de soumission.
 Il faudra faire en sorte que lorsque le formulaire est soumis, la page courante soit rechargée.
Sous le formulaire, si celui-ci a été soumis, vous afficherez un tableau contenant les tables de
multiplication.
 Les tables auront m lignes et n colonnes, où m est la valeur du premier champ du formulaire,
et n est la valeur du deuxième champ du formulaire (avant soumission).
 Si les valeurs des champs de texte du formulaire ne sont pas des entiers, vous afficherez une
erreur (indice : vous pouvez utiliser la fonction is_integer()).
 Faites en sorte que les cellules de votre tableau HTML aient une vue Bootstrap4.
 Vous n’utiliserez pas de PHP ; uniquement du HTML, du Bootstrap (CSS) et du JavaScript.
 Votre page pourra par exemple ressembler à ceci :
<body>
<div class="container">
<form class="row g-3" action="">
<div class="col-md-2 pt-1">
<label for="nbrLignes">
<strong>
Nombre de lignes :
</strong>
</label>
</div>
<div class="col-md-1">
<input type="number" class="form-control" id="nbrLignes">
</div>
<div class="col-md-2 pt-1">

<label for="nbrColonnes">
<strong>
Nombre de colonnes :
</strong>
</label>
</div>
<input type="number" class="form-control" id="nbrColonnes">
</div>
<input type="button" class="btn btn-primary mb-3"
onclick="creerTable()" value="GÃĐnÃĐrer">
</div>
<div id="zoneSaisie"></div>
</form>
</div>
<script>
function creerTable(){
let nbc = document.getElementById("nbrColonnes").value;
let nbl = document.getElementById("nbrLignes").value;
let ajoutLigne="";
ajoutLigne+="<table class='w-75 table table-dark table-striped
table-bordered'>";
for (let m=1;m<=nbl;m++)

{
ajoutLigne+="<tr><td>"+m+"</td>";
for (let y=2;y<=nbc;y++)
{
ajoutLigne+="<td>"+m*y+"</td>";
}
ajoutLigne+="</tr>";
}
ajoutLigne+="</table>";
document.getElementById("zoneSaisie").innerHTML=ajoutLigne;
}

</script>
</body>
Exercice 09:
Utilisation de switch et de l'objet Date
Au click sur le bouton, lancer la fonction jourDeLaSemaine(). Cette fonction détermine le jour de la

semaine et affiche selon le cas dimanche, lundi, mardi... etc. jusqu'à samedi.
<script type="text/javascript">
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>
Exercice 01 :
Illustration de la notion de portée des variables en JavaScript : exemple pratique
Réécrivez le code ci-dessous :
<body>

<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<script>
//On déclare deux variables globales
let x = 0;
var y = 1;
//On définit une premiere fonction qui utilise les variables globales
function testPortee1(){
document.getElementById('p1').innerHTML =
'Depuis testPortee1() : <br>x = ' + x + '<br>y = ' + y;
}
//On définit une deuxieme fonction qui définit des variables locales
let a = 5;
var b = 8;
'Depuis testPortee2() : <br> a = ' + a + '<br>b = ' + b;
}
//On définit une troisieme fonction qui défnit également des variables
locales
let x = 10;
var y = 70;
'Depuis testPortee3() : <br>x = ' + x + '<br>y = ' + y;
}
testPortee1();
testPortee2();
testPortee3();
'Depuis l\'espace global : <br>x = ' + x + '<br>y = ' + y;
'Depuis l\'espace global : <br>a = ' + a + '<br>b = ' + b;
</script>
</body>
Exercice 02 :
SetTimeout indique un délai avant exécution
La méthode globale setTimeout() permet de définir un minuteur qui exécute une fonction ou un code

donné après la fin du délai indiqué.
setTimeout(() => {console.log("Voici le premier message")}, 5000);

setTimeout(() => {console.log("Voici le second message")}, 3000);
setTimeout(() => {console.log("Voici le troisième message")}, 1000);
setTimeout(function() {
console.log('Hello World!');
}, 500);
<button onclick="myFunction()">Try it</button>
<script>
let timeout;
function myFunction() {
timeout = setTimeout(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}
Exercice 03 :
Créer deux boutons simples sur une page web qui sont reliés aux
fonctions setTimeout() et clearTimeout(). Appuyer sur le premier bouton déclenchera un minuteur
qui affichera un message après deux secondes et enregistrera l'identifiant du minuteur pour que
celui-ci soit utilisé avec clearTimeout(). En appuyant sur le deuxième bouton, on peut annuler le
minuteur.
<button onclick="delayedMessage();">Afficher un message après deux

secondes</button>
<button onclick="clearMessage();">Annuler le message avant qu'il
apparaisse</button>
<div id="output"></div>
<script>
let timeoutID;
function setOutput(outputContent) {
document.querySelector('#output').textContent = outputContent;
}
function delayedMessage() {
setOutput('');
timeoutID = setTimeout(setOutput, 2*1000, "C'était lent !");
}
function clearMessage() {
clearTimeout(timeoutID);
}
</script>
La méthode setInterval() permet d’exécuter une fonction ou un bloc de code en l’appelant en boucle

selon un intervalle de temps fixe entre chaque appel.
Cette méthode va prendre en arguments le bloc de code à exécuter en boucle et l’intervalle entre
chaque exécution exprimé en millisecondes.
Exercice 04:
Créer des fonctions qui permettent de :
 De cliquer sur un bouton et afficher Un message après 2 secondes

 De cliquer sur un bouton et de stopper cette action.
 De cliquer sur un bouton et afficher l’heure
<script>
let b1 = document.getElementById('b1');
let p1 = document.getElementById('p1');
let timeoutId;
b1.addEventListener('click', message);
b2.addEventListener('click', stopDelai);
b3.addEventListener('click', afficheHeure);
function message(){
timeoutId = setTimeout(alert, 2000, 'Message d\'alerte après 2 secondes');
}
function stopDelai(){
clearTimeout(timeoutId);
}
function afficheHeure(){
setInterval(function(){
let d = new Date();
p1.innerHTML = d.toLocaleTimeString();
}, 1000)
}
</script>
Exercices 05 :
Afficher "Hello" toutes les secondes (1000 millisecondes) :
Utiliser setInterval pour afficher le décompte des secondes.
La fonction finish après 10 secondes affiche le message "TERMINE" et stoppe le décompte par un

appel à clearInterval.
Cliquer sur le bouton pour commencer: Lancer le décompte
<button onclick="start()">Lancer le décompte</button>

<div id="bip" class="display"></div>
<script>
var counter = 10;
var intervalId = null;
function finish() {
clearInterval(intervalId);
document.getElementById("bip").innerHTML = "TERMINE!";
}
function bip() {
counter--;
if(counter == 0) finish();
else {
document.getElementById("bip").innerHTML = counter + " secondes
restantes";
}
}
function start(){
intervalId = setInterval(bip, 1000);
}
</script>
Exercice 06 :
Après un délai de quelques secondes, le script insère un mot dans la page.
<div id="storage1"></div>
<div id="storage3"></div>
<script>
function a()
{
var e = document.getElementById("storage1");
e.innerHTML = "<b style='font-size:100%'>Hello!</b>";
}
setTimeout(a, 2500);
var x = setInterval(function(){
document.getElementById('storage3').innerHTML+="<b>Bip</b><br>";
}, 1000);
Exercice 07 :
Déclenchement à date donnée
En combinant les méthodes de Date et la méthode setTimeout, déclencher un évènement à un

moment donné.
Il faut cependant que la page contenant le code reste affichée pour réaliser l'évènement.
Le principe consiste :
 Fixer la date de l'évènement, qui sera dans la démo l'affichage d'un message dans la page.
 Puis on retrouve la date actuelle avec l'objet Date et on calcule la différence avec le moment
de l'évènement.
 On lance alors setTimeout avec cette différence.
<body>

<form action="">
<input type="text" id="hours">
<input type="text" id="minutes">
<input type="text" id="seconds">
<button type="button" onclick="term()">Tester</button>
<p id="storage"></p>
</form>
<script>
function a()
{
var e = document.getElementById("storage");
e.innerHTML += "<p style='font-size:120%'>Le moment est venu!</p>";
}
function term()
{
var now = new Date();
var hours = document.getElementById("hours").value;
var minutes = document.getElementById("minutes").value;
var seconds = document.getElementById("seconds").value;
var term = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours,
minutes, seconds, 0);
setTimeout(a, term - now);
var e = document.getElementById("storage");
var diff = Math.round((term.getTime() - now.getTime()) / 1000);
e.innerHTML += "<p><p>L'opération sera déclenchée dans " + diff + "
secondes...</b></p>";
}
</script>
</body>
Exercice 08 :
Exécuter une fonction anonyme en utilisant une variable, qui permet d’afficher un message dans une
alert
<script>
let myAlerte = function(){
alert('Alerte exécutée par une fonction anonyme');
};
myAlerte();
</script>
Auto-invoquer une fonction anonyme
Exercice 09:
Créer deux fonction qui permettent d’afficher un message dans une alert et auto-invoquée les, l’une
anonyme et l’autre nommée en utilisant une
<p id="p1">Para1</p>
<p id="p2">Para2</p>
<script>
//Fonction anonyme auto-invoquée

(
function(){
alert('Alerte exécutée par une fonction anonyme')
}
)();
//Fonction nommée auto-invoquée

(
function bonjour(){
alert('Bonjour !')
}
)();
//Représentent nos paragraphes p id='p1' et p id='p2'

let para1 = document.getElementById('p1');
let para2 = document.getElementById('p2');
/*On utilise la fonction addEventListener() qui sert de gestionnaire

*d'év?nement. Ici, on demande ? exécuter la fonction anonyme passé en
*deuxi?me argument lors de l'év?nement "click" (clic) que l'élément
*p id='p1' ou p id='p2'*/
para1.addEventListener('click', function(){alert('Clic sur p id=p1');});
para2.addEventListener('click', function(){alert('Clic sur p id=p2');});
</script>
Exercice 10 :
Créer une fonction fléchée, qui permet d’afficher un message dans une alert.
Exercice 11 :
Créer une fonction fléchée, qui permet d’afficher un bonjour et votre nom comme argument dans
une alert
Exercice 12 :
Créer une fonction fléchées, qui permet de calculer la somme de deux nombres.
<script>
let somme = (a, b) => a + b;
document.getElementById("p1").innerHTML = "la somme de 10 et 11
est :"+somme(10,11);
hi = () => "Hello World!";
document.getElementById("p3").innerHTML = hi();
let hello = "";

hello = (val) => "Hello " + val;
document.getElementById("p2").innerHTML = hello("Universe!");
</script>
Fonctions de rappel
Exercice 13
Nous allons écrire une fonction ask(question, yes, no)avec trois paramètres :
Question : Texte de la question
Yes : Fonction à exécuter si la réponse est "Oui"
No : Fonction à exécuter si la réponse est "Non"
La fonction doit demander la question et, selon la réponse de l'utilisateur, appeler yes() ou no():
<script>
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
function showOk() {
alert( "You agreed." );
}
function showCancel() {
alert( "You canceled the execution." );
}
// usage: functions showOk, showCancel are passed as arguments to ask

ask("Do you agree?", showOk, showCancel);
</script>
Exercice 14 :
Améliorer l’exercice précédent et utiliser Fonction Expressions pour écrire une fonction équivalente
plus courte :
Exercice 15 : simplifier encore plus en utilisant un opérateur de point d'interrogation ?:
let age = prompt("What is your age?", 18);

let welcome;
if (age < 18) {
welcome = function() {
alert("Hello!");
};
} else {
welcome = function() {
alert("Greetings!");
};
}
welcome();
<script>
let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?

function() { alert("Hello!"); } :
function() { alert("Greetings!"); };
welcome();
</script>
Exercice 16 :
Créer un script qui permet d’afficher l’heure les minutes et les secondes avec settimeout
<div id="horloge">...</div>
function Timer() {
var dt=new Date()
document.getElementById("horloge").innerHTML=dt.getHours()
+":"+dt.getMinutes()+":"+dt.getSeconds();
setTimeout("Timer()",900);
console.log("Une sec de plus");
}
Timer();
</script>
Exercice 17 :
Créer un script qui permet d’afficher l’heure les minutes et les secondes avec setintervale
<div id="monHorloge"></div>
function Horloge() {
var dt=new Date();
document.getElementById("monHorloge").innerHTML=dt.getHours()
+":"+dt.getMinutes()+":"+dt.getSeconds();
}
var timer=setInterval("Horloge()", 250);
</script>
<A href="javascript:clearInterval(timer)">Arr?ter l'horloge</A>
//Décommentez le code pour l'exécuter (attention, la boucle peut faire planter votre syst?me s'il
n'est pas assez puissant)
let x = 0;
//L'exécution de cette boucle devrait prendre un certain temps
while (x <= 100000000000){
x++;
}
//La suite du script de ne s'exécute qu'apr?s la fin de l'opération précédente
alert('Suite du script');

Mohamed-Amine ETTALH - Exercice 01

Transféré par

Informations du document

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

Mohamed-Amine ETTALH - Exercice 01

Transféré par

Droits d'auteur :

Formats disponibles

Exercice 1:

if (typeof x !== "number" || typeof y !== "number") {

val1=(prompt("Entrer la valeur 01"));

Écrivez un programme JavaScript pour récupérer l’URL d’un site Web

 Créez une page web multiplication.html qui contiendra un formulaire. Ce formulaire contiendra

<div class="col-md-2 pt-1">

for (let m=1;m<=nbl;m++)

Utilisation de switch et de l'objet Date

Au click sur le bouton, lancer la fonction jourDeLaSemaine(). Cette fonction détermine le jour de la

alert("Nous sommes "+jourFrancais+".");

Illustration de la notion de portée des variables en JavaScript : exemple pratique

Réécrivez le code ci-dessous :

SetTimeout indique un délai avant exécution

La méthode globale setTimeout() permet de définir un minuteur qui exécute une fonction ou un code

Réécrivez le code ci-dessous :

setTimeout(() => {console.log("Voici le premier message")}, 5000);

Réécrivez le code ci-dessous :

Réécrivez le code ci-dessous :

<button onclick="myFunction()">Try it</button>

<button onclick="delayedMessage();">Afficher un message après deux

La méthode setInterval() permet d’exécuter une fonction ou un bloc de code en l’appelant en boucle

Créer des fonctions qui permettent de :

 De cliquer sur un bouton et afficher Un message après 2 secondes

Afficher "Hello" toutes les secondes (1000 millisecondes) :

Utiliser setInterval pour afficher le décompte des secondes.

La fonction finish après 10 secondes affiche le message "TERMINE" et stoppe le décompte par un

Cliquer sur le bouton pour commencer: Lancer le décompte

<button onclick="start()">Lancer le décompte</button>

Après un délai de quelques secondes, le script insère un mot dans la page.

Déclenchement à date donnée

En combinant les méthodes de Date et la méthode setTimeout, déclencher un évènement à un

//Fonction anonyme auto-invoquée

//Fonction nommée auto-invoquée

//Représentent nos paragraphes p id='p1' et p id='p2'

/*On utilise la fonction addEventListener() qui sert de gestionnaire

hi = () => "Hello World!";

let hello = "";

Nous allons écrire une fonction ask(question, yes, no)avec trois paramètres :

Question : Texte de la question

Yes : Fonction à exécuter si la réponse est "Oui"

No : Fonction à exécuter si la réponse est "Non"

// usage: functions showOk, showCancel are passed as arguments to ask

Exercice 15 : simplifier encore plus en utilisant un opérateur de point d'interrogation ?:

let age = prompt("What is your age?", 18);

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?

Vous aimerez peut-être aussi