ISAE - GAFSA

Institut Supérieur d'Administration des Entreprises

Matière : Développement Web 2

Enseignant : KHMIL Boubaker

Niveau : 2ème Année Business Computing

Travaux Pratiques N°2

JavaScript : Fonctions et Tableaux

Organiser son code et manipuler des collections de données

Objectifs Pédagogiques

1

Les Fonctions

1.1 Déclaration classique

Une fonction regroupe un bloc de code réutilisable. En JavaScript, la syntaxe classique est :

function calculerTTC(prixHT, tva) {
    let ttc = prixHT + (prixHT * tva);
    return ttc;
}

// Appel de la fonction
let prix = calculerTTC(100, 0.19);
console.log(prix);  // 119
Rappel

Sans return, une fonction retourne undefined. Le return arrête immédiatement l'exécution de la fonction.

À faire maintenant

Écrivez une fonction saluer(prenom) qui retourne "Bonjour, [prénom] !". Testez-la dans la console avec votre prénom.

1.2 Fonctions fléchées (Arrow Functions)

Syntaxe plus concise introduite en ES6 :

// Forme complète
const calculerTTC = (prixHT, tva) => {
    let ttc = prixHT + (prixHT * tva);
    return ttc;
};

// Forme raccourcie (une seule expression → return implicite)
const carre = (n) => n * n;
const double = (n) => n * 2;

console.log(carre(5));   // 25
console.log(double(7));  // 14
À faire maintenant

Réécrivez votre fonction saluer en arrow function (forme raccourcie).

1.3 Paramètres par défaut

const creerCompte = (nom, role = "étudiant") => {
    return `${nom} — Rôle : ${role}`;
};

console.log(creerCompte("Ahmed"));              // Ahmed — Rôle : étudiant
console.log(creerCompte("Fatma", "admin"));   // Fatma — Rôle : admin

1.4 Portée des variables (Scope)

Une variable déclarée dans une fonction n'est pas accessible à l'extérieur :

let message = "Global";

function tester() {
    let secret = "Local";
    console.log(message);  // ✅ "Global" — accessible
    console.log(secret);   // ✅ "Local" — accessible
}

tester();
console.log(message);      // ✅ "Global"
console.log(secret);       // ❌ ReferenceError: secret is not defined
À faire maintenant

Avant d'exécuter ce code, prédisez le résultat de chaque console.log. Puis vérifiez dans la console.

2

Les Tableaux (Arrays)

2.1 Créer et accéder aux éléments

let notes = [12, 15, 9, 14, 17];

console.log(notes[0]);              // 12 — premier élément
console.log(notes[2]);              // 9 — troisième élément
console.log(notes.length);           // 5 — nombre d'éléments
console.log(notes[notes.length - 1]); // 17 — dernier élément

// Modifier un élément
notes[2] = 11;
console.log(notes);  // [12, 15, 11, 14, 17]
Attention

Les indices commencent à 0. Un tableau de 5 éléments a des indices de 0 à 4. Accéder à notes[5] retourne undefined.

À faire maintenant

Créez un tableau de 5 prénoms. Affichez le premier, le dernier, et la taille du tableau.

2.2 Méthodes essentielles

Méthode Action Retourne
push(val) Ajouter à la fin Nouvelle taille
pop() Retirer le dernier Élément retiré
unshift(val) Ajouter au début Nouvelle taille
shift() Retirer le premier Élément retiré
splice(i, n) Supprimer n éléments à partir de l'indice i Éléments supprimés
indexOf(val) Position d'un élément Indice ou -1
includes(val) Vérifie la présence true / false 
let fruits = ["pomme", "banane"];

fruits.push("orange");        // ["pomme", "banane", "orange"]
fruits.unshift("fraise");     // ["fraise", "pomme", "banane", "orange"]

let dernier = fruits.pop();    // dernier = "orange"
let premier = fruits.shift(); // premier = "fraise"

console.log(fruits);           // ["pomme", "banane"]

// Recherche
console.log(fruits.includes("pomme"));  // true
console.log(fruits.indexOf("banane"));  // 1
console.log(fruits.indexOf("kiwi"));    // -1 (non trouvé)
À faire maintenant

Partez d'un tableau ["HTML", "CSS"]. Ajoutez "JavaScript" à la fin, puis "Python" au début. Supprimez "CSS" avec splice. Affichez le résultat.

2.3 Parcourir un tableau

let matieres = ["Math", "Info", "Gestion", "Anglais"];

// Méthode 1 : for classique (quand on a besoin de l'indice)
for (let i = 0; i < matieres.length; i++) {
    console.log(`${i + 1}. ${matieres[i]}`);
}

// Méthode 2 : for...of (quand on veut juste les valeurs)
for (let matiere of matieres) {
    console.log(matiere);
}
Quelle boucle choisir ?

Utilisez for...of par défaut. Utilisez le for classique uniquement quand vous avez besoin de l'indice i (numéroter, comparer avec l'élément suivant, etc.).

À faire maintenant

Créez un tableau de 5 notes. Parcourez-le pour afficher chaque note avec son numéro : "Note 1 : 12", "Note 2 : 15", etc.

3

Combiner Fonctions et Tableaux

3.1 Passer un tableau en paramètre

Un tableau peut être passé comme argument à une fonction, ce qui permet de créer des outils réutilisables :

const calculerSomme = (tableau) => {
    let somme = 0;
    for (let val of tableau) {
        somme += val;
    }
    return somme;
};

let notes = [12, 15, 9, 14];
console.log(calculerSomme(notes));  // 50

3.2 Exemple complet : Calcul de moyenne

const calculerMoyenne = (notes) => {
    if (notes.length === 0) return 0;

    let somme = 0;
    for (let note of notes) {
        somme += note;
    }
    return somme / notes.length;
};

const getMention = (moyenne) => {
    if (moyenne >= 16) return "Très Bien";
    if (moyenne >= 14) return "Bien";
    if (moyenne >= 12) return "Assez Bien";
    if (moyenne >= 10) return "Passable";
    return "Non admis";
};

// Utilisation
let mesNotes = [12, 15, 9, 14, 16, 11];
let moy = calculerMoyenne(mesNotes);

console.log(`Moyenne : ${moy.toFixed(2)}`);
console.log(`Mention : ${getMention(moy)}`);
toFixed(n)

La méthode toFixed(2) arrondit un nombre à 2 décimales et retourne une chaîne. Utile pour afficher des moyennes proprement.

À faire maintenant

Testez ce code avec différents tableaux de notes. Modifiez-le pour qu'il affiche aussi le nombre total de notes.

4

Exercices

Réalisez ces exercices dans votre fichier script.js. Créez une fonction pour chaque exercice et testez-la.

Exercice 1 Convertisseur de température

Écrivez deux fonctions :

  • celsiusVersFahrenheit(c) — formule : F = C × 9/5 + 32
  • fahrenheitVersCelsius(f) — formule : C = (F − 32) × 5/9

Testez avec plusieurs valeurs et affichez les résultats formatés :

// Résultat attendu :
// 0°C = 32.00°F
// 100°C = 212.00°F
// 98.6°F = 37.00°C
Exercice 2 Analyse complète de notes

À partir du tableau suivant, écrivez des fonctions séparées pour calculer chaque statistique :

let notes = [12, 8, 15, 6, 14, 17, 9, 11];

// Fonctions à créer :
// calculerMoyenne(notes)        → moyenne
// trouverMax(notes)             → note la plus haute
// trouverMin(notes)             → note la plus basse
// compterReussites(notes)       → nombre de notes >= 10

// Résultat attendu :
// ============================
//   RAPPORT DE NOTES
// ============================
// Nombre de notes : 8
// Moyenne : 11.50
// Note max : 17
// Note min : 6
// Réussites : 5 / 8
// Mention : Assez Bien
// ============================
Exercice 3 Recherche dans un annuaire

Écrivez une fonction rechercherEtudiant(liste, nom) qui :

  • Vérifie si l'étudiant existe dans le tableau
  • Retourne sa position (en commençant à 1) s'il est trouvé
  • Retourne -1 s'il n'est pas trouvé
let etudiants = ["Ahmed", "Fatma", "Mohamed", "Ines", "Youssef"];

// Résultat attendu :
// rechercherEtudiant(etudiants, "Fatma")   → "Fatma trouvé(e) en position 2"
// rechercherEtudiant(etudiants, "Ali")     → "Ali non trouvé(e) dans la liste"
Exercice 4 FizzBuzz amélioré

Reprenez le FizzBuzz du TP1, mais cette fois :

  • Créez une fonction fizzBuzz(n) qui retourne "Fizz", "Buzz", "FizzBuzz" ou le nombre
  • Utilisez un tableau pour stocker tous les résultats de 1 à 30
  • Affichez le tableau final avec console.table()
// Structure attendue :
const fizzBuzz = (n) => {
    // votre logique ici
};

let resultats = [];
// Remplir le tableau avec une boucle
// Afficher avec console.table(resultats)
Exercice 5 Gestion d'une liste de courses

Simulez une liste de courses interactive avec un tableau et trois fonctions :

  • ajouterArticle(liste, article) — ajoute l'article seulement s'il n'est pas déjà présent
  • supprimerArticle(liste, article) — supprime l'article s'il est trouvé, sinon affiche un message
  • afficherListe(liste) — affiche la liste numérotée dans la console

Testez le scénario suivant :

let courses = [];

ajouterArticle(courses, "Pain");
ajouterArticle(courses, "Lait");
ajouterArticle(courses, "Oeufs");
ajouterArticle(courses, "Beurre");
afficherListe(courses);
// 1. Pain
// 2. Lait
// 3. Oeufs
// 4. Beurre

ajouterArticle(courses, "Pain");
// "Pain est déjà dans la liste"

supprimerArticle(courses, "Lait");
supprimerArticle(courses, "Café");
// "Café n'est pas dans la liste"

afficherListe(courses);
// 1. Pain
// 2. Oeufs
// 3. Beurre
Indices

Utilisez includes() pour vérifier les doublons, indexOf() + splice() pour supprimer un élément précis.

Récapitulatif

Concept Syntaxe
Fonction classique function nom(p) { return ...; }
Arrow function const nom = (p) => ...;
Paramètre par défaut function f(a, b = 10) { }
Créer un tableau let t = [1, 2, 3];
Ajouter / Retirer push(), pop(), unshift(), shift()
Supprimer à une position splice(index, count)
Chercher indexOf(), includes()
Parcourir (avec index) for (let i = 0; i < t.length; i++)
Parcourir (valeurs) for (let el of tableau)
Arrondir nombre.toFixed(n)

Ressources complémentaires