JavaScript est un langage de programmation côté client largement utilisé pour créer des applications web interactives. Les fonctions JavaScript sont des blocs de code réutilisables qui effectuent une tâche spécifique lorsqu’elles sont appelées. Dans cet article, nous explorerons une liste de fonctions JavaScript couramment utilisées avec des exemples pour illustrer leur utilisation.

1. Fonctions de Manipulation de l’HTML

a. getElementById()

Cette fonction récupère un élément HTML en fonction de son ID.

Exemple:

var element = document.getElementById('monId');

b. getElementsByTagName()

Cette fonction récupère un tableau d’éléments HTML en fonction de leur nom de balise.

Exemple:

var elements = document.getElementsByTagName('div');

c. getElementsByClassName()

Cette fonction récupère un tableau d’éléments HTML en fonction de leur classe.

Exemple:

var elements = document.getElementsByClassName('maClasse');

2. Fonctions de Manipulation de l’Attribut

a. getAttribute()

Cette fonction récupère la valeur d’un attribut spécifié sur l’élément.

Exemple:

var value = element.getAttribute('monAttribut');

b. setAttribute()

Cette fonction définit la valeur d’un attribut sur l’élément.

Exemple:

element.setAttribute('monAttribut', 'nouvelleValeur');

3. Fonctions de Manipulation de la CSS

a. style.setProperty()

Cette fonction définit une nouvelle valeur pour une propriété CSS sur un élément.

Exemple:

element.style.setProperty('color', 'red');

b. classList.add()

Cette fonction ajoute une classe CSS à l’élément.

Exemple:

element.classList.add('maClasse');

c. classList.remove()

Cette fonction supprime une classe CSS de l’élément.

Exemple:

element.classList.remove('maClasse');

4. Fonctions de Manipulation du Texte

a. innerText

Cette propriété définit ou retourne le texte d’un élément, sans inclure le texte de ses enfants.

Exemple:

element.innerText = 'Nouveau texte';

b. innerHTML

Cette propriété définit ou retourne le contenu HTML d’un élément, y compris le texte et les balises HTML.

Exemple:

element.innerHTML = '<strong>Nouveau texte</strong>';

5. Fonctions Mathématiques

a. Math.random()

Cette fonction génère un nombre pseudo-aléatoire entre 0 (inclus) et 1 (exclus).

Exemple:

var randomNumber = Math.random();

b. Math.round()

Cette fonction arrondit un nombre à l’entier le plus proche.

Exemple:

var roundedNumber = Math.round(3.7);

Exemples d’application

1. Application de Gestion de Tâches :

Extrait de Code :

var inputTask = document.getElementById('taskInput');
var addButton = document.getElementById('addButton');

addButton.addEventListener('click', function() {
    var newTask = inputTask.value;
    // Ajouter la nouvelle tâche à la liste des tâches
});

2. Application de Galerie d’Images :

Extrait de Code :

var imageContainer = document.getElementById('imageContainer');
var thumbnailImages = document.getElementsByClassName('thumbnail');

for (var i = 0; i < thumbnailImages.length; i++) {
    thumbnailImages[i].addEventListener('click', function() {
        var selectedImage = this.getAttribute('src');
        // Afficher l'image sélectionnée dans le conteneur principal
    });
}

3. Calculateur de Prêts ou de Crédits :

Extrait de Code :

var loanAmountInput = document.getElementById('loanAmount');
var interestRateInput = document.getElementById('interestRate');
var calculateButton = document.getElementById('calculateButton');

calculateButton.addEventListener('click', function() {
    var loanAmount = parseFloat(loanAmountInput.value);
    var interestRate = parseFloat(interestRateInput.value);
    // Calculer les mensualités et afficher les résultats
});

4. Jeu de Devinettes :

Extrait de Code :

var randomNumber = Math.floor(Math.random() * 10) + 1;
var guessInput = document.getElementById('guessInput');
var submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', function() {
    var userGuess = parseInt(guessInput.value);
    // Vérifier si la devinette est correcte et afficher un message approprié
});

5. Application de Liste de Courses :

Extrait de Code :

var shoppingListItems = document.getElementsByTagName('li');

for (var i = 0; i < shoppingListItems.length; i++) {
    shoppingListItems[i].addEventListener('click', function() {
        this.classList.toggle('checked');
        // Marquer l'article comme acheté ou non acheté
    });
}

Ces extraits de code illustrent comment les fonctions JavaScript peuvent être utilisées dans différents scénarios d’application pour améliorer l’interaction et la fonctionnalité de l’interface utilisateur.

Cet article présente une sélection de fonctions JavaScript couramment utilisées dans le développement web. En comprenant et en utilisant ces fonctions, les développeurs peuvent créer des applications web dynamiques et interactives.