Année Universitaire

2022-2023

Workshop N°2:
JavaScript

Objectifs :
 Manipuler les bases du JavaScript.

 Création de fonctions

 Introduction au DOM

Exercice 1 : console
Quel est le résultat du code suivant ?
function test() {
console.log(a);
console.log(four());

var a = 1;
function four() {
return 4;
}
}

test();

 Undefined et 4
La déclaration de la variable a et de la fonction four () sont décalées en haut mais sans la valeur de la
variable a.
Le code est équivalent au code suivant :
function test() {
var a;
function foo() {
return 2;
}

console.log(a);
console.log(foo());

a = 1;
}

test();

1|Page
 Année Universitaire
2022-2023

Workshop N°2:
JavaScript
Exercice 2: Opérateurs
1. Ecrire une fonction closestTo100 qui détermine quel entier est le plus proche de 100 entre 2
entiers.
const closestTo100 = (nb1, nb2) => (100 – nb1) > (100 – nb2) ? nb2 : nb1;

2. Ecrire un script qui additionne deux nombres saisies par l’utilisateur et affiche le résultat au
niveau de la console puis au niveau de la page HTML.

var firstNumber = parseFloat(prompt("Premier nombre"));

var secondNumber = parseFloat(prompt("Deuxième nombre"));

var theTotal = firstNumber + secondNumber;

console.log(firstNumber + " + " + secondNumber + " = " + theTotal);

document.write(firstNumber + " + " + secondNumber + " = " + theTotal);

3. Ecrire une fonction hailstone qui prend en argument un nombre n et affiche la séquence d’étapes
pour obtenir la valeur 1 tel que
Si le nombre n est pair on le divise par 2  n=n/2
Sinon n = n*3+1
const hailstone = nb => {

console.log(nb);

return nb === 1 ? nb : (nb%2===0 ? hailstone(nb/2) : hailstone(nb*3+1));

Exercice 3: Chaînes de caractères

1. Ecrire une fonction makeNewString qui permet de créer une nouvelle chaîne de caractères à partir
des 3 premières lettres de la chaîne ch et les 3 dernières lettres de la même chaîne. La taille de ch
doit être supérieur ou égale à 3 sinon ch est renvoyée.

const makeNewString = (str) => str.length <3 ? str: str.slice(0, 3) + str.slice(-3);

2|Page
 Année Universitaire
2022-2023

Workshop N°2:
JavaScript
2. Ecrire une fonction firstHalf qui extrait la première moitié d’une chaîne de caractères (taille
paire)
const firstHalf = (str) => str.slice(0, str.length /2) ;

3. Ecrire une fonction concatinate qui concatène 2 chaînes de caractères à l’exception de la

première lettre de chacune.
const concatinate = (str1, str2) => str1.slice(1) + str2.slice(1) ;

4. Ecrire une fonction contains2To4 qui vérifie si une chaîne contient de deux à quatre occurrences
du même caractère.
const countChar = (str, c) => str.split(‘’).filter(ch => ch ===c ).length;
const contains2To4 = (str, c) => countChar(str, c) >= 0 && countChar(str, c) <=4;
Or
const contains2To4 = (str, char) => (str.split(char).length - 1) > 1 &&
(str.split(char).length - 1) < 5;

Exercice 4 : Tableau

1. Ecrire une fonction evenNumbers qui teste si un nombre passé en paramètres est pair.

function evenNumbers (number) {

return number % 2 === 0
}

2. Ecrire un script qui permet de définir une variable nommée numbers qui contient ce tableau :

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Définir une variable nommée filtered qui contient le résultat de numbers.filter(). La fonction à passer
à la méthode .filter() est evenNumbers (number).

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(numbers.filter(function evenNumbers (number){ return number % 2 === 0 }));

3. Ecrire une fonction pop qui renvoie les n premiers éléments d’un tableau passé en paramètre. Si le
nombre n est omis la fonction renvoie le premier élément.

function pop(array, n){

if (array == null)

3|Page
 Année Universitaire
2022-2023

Workshop N°2:
JavaScript
return void 0;
if (n == null)
return array[0];
if (n < 0)
return [];
return array.slice(0, n);
};

Exercice 5 : DOM
1. Ecrire un Script permettant d’afficher la table des multiplications suivante dans une page HTML.

var limit = prompt("Donner une valeur")

document.write("<center>");

/* Mettre un titre pour la table */

document.write("<caption> Table de multiplication</caption>");

/* Créer la table*/
document.write("<table border=1>");

/* Créer la première ligne */

document.write("<tr><td>", "[X]", " </td>");
for (var i = 1; i <= limit; i++)

4|Page
 Année Universitaire
2022-2023

Workshop N°2:
JavaScript

document.write("<td>", i, "</td>");

/* créer les autres lignes*/

for (var i = 1; i < limit; i++)
{ /* Créer la ligne numéro i*/

document.write("<tr>");
document.write("<td>", i, "</td>");
for (var j = 1; j <= limit; j++)
{ /* Créer la colonne numéro j*/
document.write("<td>", i * j, "</td>");
}
document.write("</tr>");
}
document.write("</table>");

Exercice 6 : DOM - Events

1. Soit le code la page web suivante et son code HTML ci-après:
<form name="form">
<input type="checkbox" name="choix" value="-8" /> Case 1 <br/>
<input type="checkbox" name="choix" value="5" /> Case 2 <br/>
<input type="checkbox" name="choix" value="3" /> Case 3 <br/>
<input type="checkbox" name="choix" value="10" /> Case 4 <br/>
<input type="checkbox" name="choix" value="0" /> Case 5 <br/>
<input type="checkbox" name="choix" value="-1" /> Case 6 <br/>
<input type="checkbox" name="choix" value="-7" /> Case 7 <br/>
<input type="checkbox" name="choix" value="15" /> Case 8 <br/>
<input type="checkbox" name="choix" value="8" /> Case 9 <br/>
<input type="checkbox" name="choix" value="3" /> Case 10 <br/>
<input type="button" value="Calculer le score du jeu"
onClick="CalculScore()"/> <br/>
<input type="text" value="" name="resultat" disabled/>
</form>

5|Page
 Année Universitaire
2022-2023

Workshop N°2:
JavaScript
Ecrire une fonction CalculScore()permettant de :
 Afficher une alerte si le joueur coche moins ou plus de trois cases

 Calculer le score du jeu et afficher une alerte, « Vous êtes déjà un joueur expert » si le score est

plus grand que 15, sinon afficher une alerte « Vous êtes encore un joueur débutant ».

function CalculScore() {
var nb = 0, score = 0;
for (var i = 0; i < 10; i++){
if (document.form.choix[i].checked) {
nb++;
score+= parseInt(document.form.choix[i].value)
}
}
console.log('nb = ' + nb)
console.log('score = ' + score)

if (nb != 3) {
alert('Veuillez cocher trois cases')
}
else {
alert(score >= 15 ? 'Vous êtes un expert': 'Vous êtes débutant')
document.form.resultat.value = score
for (var i = 0; i < 10; i++){document.form.choix[i].checked=false; }
// document.form.choix.forEach(check => check.checked=false);
}
}

6|Page