Définir et appeler des fonctions en JavaScript

Introduction

Dans ce laboratoire, les étudiants exploreront les concepts fondamentaux de la définition et de l'appel de fonctions en JavaScript. Le laboratoire propose une introduction complète aux bases des fonctions, couvrant des compétences essentielles telles que la création de fonctions simples, la manipulation des paramètres et la compréhension des valeurs de retour de fonctions. Les participants apprendront à structurer les fonctions, les exécuter et à utiliser la sortie console pour démontrer leur fonctionnalité.

Au cours d'une série d'exercices pratiques, les apprenants pratiqueront la création de fonctions sans valeur de retour, la mise en œuvre de fonctions avec des paramètres et l'exploration de différentes façons d'appeler et d'utiliser les fonctions. À la fin du laboratoire, les étudiants auront acquis une expérience pratique dans l'écriture de blocs de code réutilisables, la compréhension de la syntaxe des fonctions et l'application des concepts de fonctions en programmation JavaScript.

Comprendre les bases des fonctions

Dans cette étape, vous allez apprendre les concepts fondamentaux des fonctions en JavaScript. Les fonctions sont des blocs de code réutilisables qui exécutent une tâche spécifique et aident à organiser votre logique de programmation.

Une fonction est définie en utilisant le mot clé function, suivi d'un nom, de parenthèses () et d'un bloc de code entouré de accolades {}. Voici une structure de fonction de base :

function functionName() {
  // Code à exécuter
}

Créeons un exemple simple pour démontrer les bases des fonctions. Ouvrez le WebIDE et créez un nouveau fichier appelé functions.js dans le répertoire ~/project.

// Définition d'une fonction simple
function greet() {
  console.log("Hello, JavaScript Functions!");
}

// Appel de la fonction
greet();

Lorsque vous exécutez ce code, vous verrez la sortie suivante :

Sortie de l'exemple :
Hello, JavaScript Functions!

Points clés à comprendre sur les fonctions :

• Les fonctions sont définies en utilisant le mot clé function
• Elles peuvent être appelées plusieurs fois
• Elles aident à réduire la répétition du code
• Les fonctions peuvent être simples ou complexes

Essayez d'expérimenter en appelant la fonction greet() plusieurs fois pour voir comment elle fonctionne.

Créer une fonction simple sans valeur de retour

Dans cette étape, vous allez apprendre à créer des fonctions qui exécutent des actions sans renvoyer de valeur. Ces fonctions sont souvent utilisées pour exécuter une tâche spécifique ou afficher des informations.

Ouvrez le WebIDE et créez un nouveau fichier appelé simple_functions.js dans le répertoire ~/project. Nous allons créer quelques exemples de fonctions sans valeur de retour.

// Fonction pour afficher un message de bienvenue
function displayWelcome() {
  console.log("Welcome to JavaScript Functions!");
}

// Fonction pour imprimer la table de multiplication
function printMultiplicationTable(number) {
  console.log(`Table de multiplication pour ${number}:`);
  for (let i = 1; i <= 10; i++) {
    console.log(`${number} x ${i} = ${number * i}`);
  }
}

// Appel des fonctions
displayWelcome();
printMultiplicationTable(5);

Lorsque vous exécutez ce code, vous verrez la sortie suivante :

Sortie de l'exemple :
Welcome to JavaScript Functions!
Table de multiplication pour 5:
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50

Points clés sur les fonctions sans valeur de retour :

• Elles exécutent des actions telles que l'impression ou la modification de données
• Elles utilisent console.log() pour afficher des informations
• Elles peuvent prendre des paramètres pour être plus flexibles
• Elles n'utilisent pas le mot clé return pour renvoyer une valeur

Essayez d'expérimenter en créant vos propres fonctions ou en modifiant les fonctions existantes pour afficher différents messages ou exécuter diverses tâches.

Créer une fonction avec des paramètres et une valeur de retour

Dans cette étape, vous allez apprendre à créer des fonctions qui acceptent des paramètres et renvoient des valeurs. Ces fonctions sont plus polyvalentes et peuvent effectuer des calculs ou des transformations.

Ouvrez le WebIDE et créez un nouveau fichier appelé parameter_functions.js dans le répertoire ~/project. Nous allons créer des fonctions qui démontrent les paramètres et les valeurs de retour.

// Fonction pour calculer l'aire d'un rectangle
function calculateRectangleArea(length, width) {
  return length * width;
}

// Fonction pour vérifier si un nombre est pair
function isEven(number) {
  return number % 2 === 0;
}

// Fonction pour saluer une personne
function createGreeting(name) {
  return `Hello, ${name}! Welcome to JavaScript.`;
}

// Demonstration des appels de fonction et des valeurs de retour
let rectangleArea = calculateRectangleArea(5, 3);
console.log(`Aire du rectangle : ${rectangleArea} unités carrées`);

let checkNumber = 6;
console.log(`Le nombre ${checkNumber} est-il pair? ${isEven(checkNumber)}`);

let personalGreeting = createGreeting("Alice");
console.log(personalGreeting);

Lorsque vous exécutez ce code, vous verrez la sortie suivante :

Sortie de l'exemple :
Aire du rectangle : 15 unités carrées
Le nombre 6 est-il pair? true
Hello, Alice! Welcome to JavaScript.

Points clés sur les fonctions avec des paramètres et des valeurs de retour :

• Les paramètres permettent aux fonctions d'accepter des entrées
• Le mot clé return renvoie une valeur à partir de la fonction
• Les fonctions peuvent effectuer des calculs et renvoyer le résultat
• Les valeurs de retour peuvent être utilisées dans des calculs supplémentaires ou dans la journalisation

Essayez d'expérimenter en créant vos propres fonctions avec différents paramètres et types de retour.

Pratiquer l'implémentation de fonctions

Dans cette étape, vous allez pratiquer l'implémentation de fonctions en créant un petit programme qui démontre diverses techniques de fonctions. Nous allons construire une application de calculatrice simple pour renforcer votre compréhension de l'implémentation de fonctions.

Ouvrez le WebIDE et créez un nouveau fichier appelé calculator.js dans le répertoire ~/project. Nous allons implémenter plusieurs fonctions mathématiques :

// Fonction pour additionner deux nombres
function add(a, b) {
  return a + b;
}

// Fonction pour soustraire deux nombres
function subtract(a, b) {
  return a - b;
}

// Fonction pour multiplier deux nombres
function multiply(a, b) {
  return a * b;
}

// Fonction pour diviser deux nombres avec gestion d'erreur
function divide(a, b) {
  if (b === 0) {
    return "Error: Division by zero";
  }
  return a / b;
}

// Fonction pour calculer le carré d'un nombre
function square(x) {
  return x * x;
}

// Démontrez les fonctions de la calculatrice
console.log("Addition: 5 + 3 =", add(5, 3));
console.log("Soustraction: 10 - 4 =", subtract(10, 4));
console.log("Multiplication: 6 * 7 =", multiply(6, 7));
console.log("Division: 15 / 3 =", divide(15, 3));
console.log("Carré de 4 =", square(4));
console.log("Division par zéro:", divide(10, 0));

Lorsque vous exécutez ce code, vous verrez la sortie suivante :

Sortie de l'exemple :
Addition: 5 + 3 = 8
Soustraction: 10 - 4 = 6
Multiplication: 6 * 7 = 42
Division: 15 / 3 = 5
Carré de 4 = 16
Division par zéro: Error: Division by zero

Points clés sur l'implémentation de fonctions :

• Créez des fonctions avec des responsabilités claires et uniques
• Utilisez des paramètres pour rendre les fonctions flexibles
• Implémentez la gestion d'erreurs si nécessaire
• Testez vos fonctions avec différents inputs
• Utilisez des noms de fonctions et de variables significatifs

Essayez d'expérimenter en ajoutant plus de fonctions mathématiques ou en modifiant les existantes.

Explorer l'appel de fonctions et la sortie

Dans cette étape, vous allez apprendre différentes façons d'appeler des fonctions et d'explorer diverses techniques de sortie en JavaScript. Nous allons créer un exemple complet qui démontre plusieurs stratégies d'appel de fonctions et de méthodes de sortie.

Ouvrez le WebIDE et créez un nouveau fichier appelé function_output.js dans le répertoire ~/project :

// Fonction pour générer un message de bienvenue personnalisé
function createGreeting(name, time) {
  return `Good ${time}, ${name}!`;
}

// Fonction pour calculer le prix total avec taxe
function calculateTotalPrice(price, taxRate = 0.1) {
  return price + price * taxRate;
}

// Fonction avec plusieurs paramètres et valeurs par défaut
function displayUserInfo(name, age = "Not specified", city = "Unknown") {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}

// Démontrez différentes techniques d'appel de fonctions
let morningGreeting = createGreeting("Alice", "morning");
console.log(morningGreeting);

let eveningGreeting = createGreeting("Bob", "evening");
console.log(eveningGreeting);

let productPrice = 100;
let totalPrice = calculateTotalPrice(productPrice);
console.log(`Product Price: $${productPrice}`);
console.log(`Total Price (with tax): $${totalPrice}`);

// Appel de fonction avec différentes combinaisons de paramètres
displayUserInfo("Charlie");
displayUserInfo("David", 30);
displayUserInfo("Eve", 25, "New York");

Lorsque vous exécutez ce code, vous verrez la sortie suivante :

Sortie de l'exemple :
Good morning, Alice!
Good evening, Bob!
Product Price: $100
Total Price (with tax): $110
Name: Charlie
Age: Not specified
City: Unknown
Name: David
Age: 30
City: Unknown
Name: Eve
Age: 25
City: New York

Points clés sur l'appel de fonctions et la sortie :

• Les fonctions peuvent être appelées avec un nombre différent d'arguments
• Les valeurs de paramètre par défaut offrent de la flexibilité
• Utilisez les littéraux de gabarit pour une sortie formatée
• console.log() est utile pour afficher les résultats des fonctions
• Vous pouvez stocker les valeurs de retour de fonctions dans des variables

Essayez d'expérimenter en créant des appels de fonctions et des scénarios de sortie plus complexes.

Sommaire

Dans ce laboratoire, les participants ont exploré les concepts fondamentaux des fonctions JavaScript, apprenant à définir, créer et appeler des fonctions avec différentes caractéristiques. Le laboratoire a guidé les apprenants dans la compréhension des bases des fonctions, y compris la syntaxe des fonctions, la déclaration et l'exécution, en mettant l'accent sur la création de blocs de code réutilisables qui peuvent exécuter des tâches spécifiques.

Le parcours d'apprentissage a couvert la création de fonctions simples sans valeur de retour, l'implémentation de fonctions avec des paramètres et la démonstration de la manière dont les fonctions peuvent être utilisées pour organiser la logique de programmation, imprimer la sortie et effectuer des calculs. En pratiquant l'implémentation de fonctions et en explorant diverses techniques d'appel de fonctions, les participants ont acquis des compétences pratiques dans l'écriture de code JavaScript modulaire et efficace.