Les bases de Javascript

Maintenant que vous avez acquis des connaissances solides sur le HTML et le CSS vu dans le cours précédent, nous allons plonger dans le monde du JavaScript (JS). JavaScript est un langage de programmation polyvalent et dynamique qui permet d’ajouter des fonctionnalités interactives et dynamiques à vos sites web.

Le JavaScript peut être utilisé pour effectuer des calculs, manipuler des éléments HTML, interagir avec les utilisateurs, envoyer des requêtes vers des serveurs, et bien plus encore. Il est pris en charge par tous les principaux navigateurs web, ce qui en fait un outil puissant pour rendre vos sites web plus dynamiques et engageants.

Dans cette formation sur les bases du JavaScript, nous allons couvrir les principaux concepts suivants :

• Variables et types de données
• Opérateurs et expressions
• Structures de contrôle
• Fonctions
• Manipulation du DOM
• Gestion des événements

Au fur et à mesure de notre progression, nous allons réaliser des exercices pratiques pour appliquer les concepts que nous avons abordés et renforcer votre compréhension du JavaScript.

Prêt à plonger dans le monde passionnant du JavaScript ? Allons-y !

Variables et types de données

En JavaScript, les variables sont utilisées pour stocker des valeurs. Une variable est un conteneur nommé auquel vous pouvez assigner une valeur et réassigner une nouvelle valeur par la suite. Avant d’utiliser une variable, vous devez la déclarer en utilisant le mot-clé var, let ou const, suivi du nom de la variable.

Il existe plusieurs types de données que vous pouvez stocker dans une variable en JavaScript :

• Nombre (Number) : Les nombres représentent les valeurs numériques. Ils peuvent être des nombres entiers ou des nombres à virgule flottante. Par exemple :

var age = 25;
var prix = 19.99;

• Chaîne de caractères (String) : Les chaînes de caractères représentent une séquence de caractères entourée de guillemets simples ( ») ou doubles («  »). Par exemple :

var nom = "John Doe";
var message = 'Bonjour, comment ça va ?';

• Booléen (Boolean) : Les booléens représentent les valeurs vraies (true) ou fausses (false). Ils sont couramment utilisés dans les conditions et les expressions logiques. Par exemple :

var estActif = true;
var estMajeur = false;

• Tableau (Array) : Un tableau est une structure de données qui permet de stocker plusieurs valeurs dans une seule variable. Les éléments du tableau sont accessibles à l’aide d’index numériques, commençant par 0. Par exemple :

var fruits = ["pomme", "banane", "orange"];
var nombres = [1, 2, 3, 4, 5];

• Objet (Object) : Les objets sont des structures de données qui regroupent des propriétés et des valeurs associées. Les propriétés peuvent être de différents types, y compris des nombres, des chaînes de caractères, des tableaux ou même d’autres objets. Par exemple :

var personne = {
    nom: "John Doe",
    age: 25,
    estActif: true
};

Il est important de comprendre les différents types de données en JavaScript, car cela vous permettra de manipuler et de travailler avec les valeurs stockées dans les variables de manière appropriée.

Notez également que depuis l’introduction d’ECMAScript 6 (ES6), les mots-clés let et const ont été ajoutés pour déclarer des variables. let est utilisé pour déclarer une variable dont la valeur peut être réassignée, tandis que const est utilisé pour déclarer une variable dont la valeur est constante et ne peut pas être réassignée.

En utilisant des variables et des types de données appropriés, vous pouvez effectuer des opérations, stocker des informations et interagir avec d’autres éléments de votre code JavaScript de manière efficace et flexible.

Opérateurs et expressions

Les opérateurs en JavaScript sont des symboles spéciaux utilisés pour effectuer des opérations sur les valeurs, les variables et les expressions. Les opérations peuvent être arithmétiques, logiques, de comparaison ou d’affectation. Les expressions sont des combinaisons d’opérateurs, de valeurs et de variables qui produisent une nouvelle valeur.

Voici quelques-uns des opérateurs les plus couramment utilisés en JavaScript :

Opérateurs arithmétiques :

• + : Addition
• - : Soustraction
• * : Multiplication
• / : Division
• % : Modulo (reste de la division)
• ** : Exponentiation (élévation à la puissance)

Exemple :

var x = 10;
var y = 5;
var addition = x + y; // 15
var multiplication = x * y; // 50

Opérateurs de comparaison :

• == : Égal à (comparaison de valeur)
• === : Égal à (comparaison de valeur et de type)
• != : Différent de (comparaison de valeur)
• !== : Différent de (comparaison de valeur et de type)
• > : Supérieur à
• < : Inférieur à
• >= : Supérieur ou égal à
• <= : Inférieur ou égal à

Exemple :

var a = 10;
var b = 5;
var isEqual = (a == b); // false
var isGreaterThan = (a > b); // true

Opérateurs logiques :

• && : ET logique
• || : OU logique
• ! : NON logique (négation)

Exemple :

var x = 10;
var y = 5;
var z = 3;
var isTrue = (x > y) && (y > z); // true

Opérateurs d’affectation :

• = : Affectation simple
• += : Affectation avec addition
• -= : Affectation avec soustraction
• *= : Affectation avec multiplication
• /= : Affectation avec division
• %= : Affectation avec modulo

Exemple :

var x = 10;
x += 5; // x est maintenant égal à 15

Ces exemples illustrent quelques-uns des nombreux opérateurs disponibles en JavaScript. Les opérateurs et les expressions vous permettent d’effectuer des calculs, des comparaisons et des opérations logiques, ce qui est essentiel pour manipuler les valeurs et contrôler le flux de votre code JavaScript.

Structures de contrôle

Les structures de contrôle en JavaScript vous permettent de contrôler le flux d’exécution de votre code en fonction de conditions spécifiques et de répéter des blocs de code plusieurs fois. Les structures de contrôle les plus couramment utilisées sont les instructions conditionnelles (if/else) et les boucles (for/while).

• Instructions conditionnelles (if/else) : Les instructions conditionnelles permettent d’exécuter un bloc de code en fonction d’une condition donnée. Si la condition est évaluée à true, le bloc de code dans l’instruction if est exécuté. Sinon, le bloc de code dans l’instruction else (facultative) est exécuté.

Exemple :

var age = 20;

if (age >= 18) {
    console.log("Vous êtes majeur.");
} else {
    console.log("Vous êtes mineur.");
}

• Boucle for : La boucle for permet d’exécuter un bloc de code un certain nombre de fois. Elle utilise une variable de compteur qui est mise à jour à chaque itération jusqu’à ce qu’une condition soit remplie.

Exemple :

for (var i = 0; i < 5; i++) {
    console.log("Itération : " + i);
}

• Boucle while : La boucle while permet d’exécuter un bloc de code tant qu’une condition spécifiée est évaluée à true. La condition est vérifiée avant chaque itération.

Exemple :

var i = 0;

while (i < 5) {
    console.log("Itération : " + i);
    i++;
}

Boucle do...while : La boucle do...while est similaire à la boucle while, mais elle vérifie la condition à la fin de chaque itération. Cela garantit que le bloc de code est exécuté au moins une fois, même si la condition initiale est fausse.

Exemple :

var i = 0;

do {
    console.log("Itération : " + i);
    i++;
} while (i < 5);

Ces structures de contrôle vous permettent d’ajouter de la logique et du contrôle au flux d’exécution de votre code JavaScript. Elles vous permettent de prendre des décisions en fonction de conditions spécifiques et de répéter des blocs de code aussi longtemps que nécessaire.

Fonctions

Les fonctions en JavaScript sont des blocs de code réutilisables qui peuvent être appelés et exécutés à plusieurs reprises. Elles vous permettent de regrouper du code spécifique et de l’exécuter lorsque cela est nécessaire. Les fonctions peuvent prendre des paramètres en entrée et retourner une valeur en sortie, mais elles peuvent également être définies sans paramètres ni valeur de retour.

Voici comment déclarer et utiliser des fonctions en JavaScript :

• Déclaration de fonction :

Vous pouvez déclarer une fonction en utilisant le mot-clé function, suivi du nom de la fonction et des parenthèses contenant les paramètres éventuels. Le code à exécuter est ensuite placé entre des accolades.

Exemple :

function saluer(nom) {
    console.log("Bonjour, " + nom + " !");
}

• Appel de fonction : Pour exécuter le code d’une fonction, vous devez l’appeler en utilisant son nom suivi de parenthèses. Vous pouvez également passer des arguments (valeurs) aux paramètres de la fonction lors de l’appel.

Exemple:

saluer("John"); // Affiche "Bonjour, John !"

• Fonctions avec valeur de retour :

Une fonction peut renvoyer une valeur en utilisant le mot-clé return. La valeur renvoyée peut être capturée dans une variable ou utilisée directement.

Exemple :

function addition(a, b) {
    return a + b;
}

var resultat = addition(5, 3); // La variable 'resultat' contient 8

• Fonctions sans valeur de retour :

Si vous ne spécifiez pas de valeur de retour dans une fonction, celle-ci renverra automatiquement undefined.

Exemple :

function afficherMessage() {
    console.log("Ceci est un message.");
}

var valeurRetour = afficherMessage(); // La variable 'valeurRetour' contient undefined

• Fonctions anonymes :

Vous pouvez également définir des fonctions anonymes, qui n’ont pas de nom. Elles sont souvent utilisées comme arguments pour d’autres fonctions ou pour définir des fonctions dans des expressions.

Exemple :

var addition = function(a, b) {
    return a + b;
};

var resultat = addition(2, 3); // La variable 'resultat' contient 5

Les fonctions sont un élément fondamental de la programmation en JavaScript. Elles vous permettent de structurer votre code, de le rendre modulaire et réutilisable, et de résoudre des problèmes complexes en les divisant en tâches plus petites et plus gérables.

Manipulation du DOM

Le DOM (Document Object Model) est une représentation hiérarchique de la structure d’une page web. En utilisant JavaScript, vous pouvez manipuler le DOM pour accéder et modifier les éléments HTML, ajouter ou supprimer des éléments, ou encore réagir aux événements utilisateur.

Voici quelques opérations courantes de manipulation du DOM :

• Accéder aux éléments : Vous pouvez accéder aux éléments du DOM en utilisant les méthodes de sélection, telles que getElementById, getElementsByClassName et getElementsByTagName. Ces méthodes vous permettent de récupérer des références vers des éléments spécifiques de la page.Exemple :

var element = document.getElementById("monElement");
var elements = document.getElementsByClassName("maClasse");
var elements = document.getElementsByTagName("div");

• Modifier le contenu des éléments :

Vous pouvez modifier le contenu des éléments en accédant à leurs propriétés, telles que innerHTML pour le contenu HTML interne, ou textContent pour le contenu texte.

Exemple :

var element = document.getElementById("monElement");
element.innerHTML = "<b>Nouveau contenu</b>";

• Modifier les attributs des éléments :

Vous pouvez modifier les attributs des éléments en utilisant la propriété setAttribute. Vous pouvez également accéder aux valeurs des attributs avec la méthode getAttribute

Exemple :

var element = document.getElementById("monElement");
element.setAttribute("src", "image.jpg");
var valeur = element.getAttribute("src");

• Ajouter et supprimer des éléments :

Vous pouvez ajouter de nouveaux éléments au DOM en utilisant les méthodes createElement et appendChild. Pour supprimer des éléments, vous pouvez utiliser la méthode removeChild.

Exemple :

var parent = document.getElementById("parent");
var nouvelElement = document.createElement("div");
parent.appendChild(nouvelElement);

var enfant = document.getElementById("enfant");
parent.removeChild(enfant);

• Gérer les événements :

Vous pouvez réagir aux événements utilisateur en utilisant des écouteurs d’événements, tels que addEventListener. Cela vous permet de définir des fonctions qui seront exécutées lorsque l’événement spécifié se produit.

Exemple :

var element = document.getElementById("monElement");
element.addEventListener("click", function() {
    console.log("L'élément a été cliqué !");
});

La manipulation du DOM en JavaScript vous permet de créer des interactions dynamiques avec vos pages web. En accédant aux éléments, en modifiant leur contenu, en ajoutant ou en supprimant des éléments, vous pouvez créer des expériences utilisateur riches et interactives.

Gestion des événements

La gestion des événements en JavaScript vous permet de réagir aux actions de l’utilisateur, telles que le clic sur un bouton, le survol d’un élément ou la soumission d’un formulaire. Vous pouvez ajouter des écouteurs d’événements à des éléments spécifiques et définir des actions à effectuer lorsque l’événement se produit.

Voici quelques concepts clés de la gestion des événements :

• Ajout d’écouteurs d’événements :

Vous pouvez ajouter un écouteur d’événements à un élément en utilisant la méthode addEventListener. Vous spécifiez le type d’événement (par exemple, « click » pour un clic de souris) et une fonction qui sera exécutée lorsque l’événement se produit.

Exemple :

var bouton = document.getElementById("monBouton");
bouton.addEventListener("click", function() {
    console.log("Le bouton a été cliqué !");
});

• Suppression d’écouteurs d’événements :

Pour supprimer un écouteur d’événements, vous utilisez la méthode removeEventListener. Vous devez spécifier le même type d’événement et la même fonction que ceux utilisés lors de l’ajout de l’écouteur.

Exemple :

var bouton = document.getElementById("monBouton");
var handleClick = function() {
    console.log("Le bouton a été cliqué !");
};

bouton.addEventListener("click", handleClick);

// Suppression de l'écouteur d'événements
bouton.removeEventListener("click", handleClick);

• Objets d’événement :

Lorsqu’un événement se produit, une instance de l’objet Event est créée et transmise à la fonction de gestion de l’événement. Cet objet contient des informations sur l’événement, telles que le type d’événement, la cible de l’événement et d’autres propriétés spécifiques à chaque type d’événement.

Exemple :

var bouton = document.getElementById("monBouton");
bouton.addEventListener("click", function(event) {
    console.log("Le bouton a été cliqué !");
    console.log("Type d'événement : " + event.type);
    console.log("Cible de l'événement : " + event.target);
});

• Événements courants :

Il existe de nombreux types d’événements couramment utilisés, tels que « click », « mouseover », « keydown », « submit », etc. Chaque type d’événement correspond à une action spécifique de l’utilisateur.

Exemple :

var element = document.getElementById("monElement");

element.addEventListener("mouseover", function() {
    console.log("La souris est sur l'élément !");
});

element.addEventListener("keydown", function(event) {
    console.log("Une touche a été enfoncée : " + event.key);
});

La gestion des événements en JavaScript vous permet d’interagir avec les actions de l’utilisateur sur votre page web. En ajoutant des écouteurs d’événements et en définissant des fonctions de gestion, vous pouvez créer des interactions dynamiques et réactives qui améliorent l’expérience utilisateur.

Comment intégrer du Javascript a du HTML?

Pour intégrer du JavaScript à votre code HTML, vous disposez de plusieurs options :

• Balise <script> intégrée :

Vous pouvez intégrer votre code JavaScript directement dans une balise <script> à l’intérieur de la section <head> ou <body> de votre document HTML. Voici un exemple :

<!DOCTYPE html>
<html>
<head>
  <title>Ma page</title>
  <script>
    // Votre code JavaScript ici
  </script>
</head>
<body>
  <!-- Le reste de votre contenu HTML -->
</body>
</html>

• Fichier externe :

Vous pouvez également placer votre code JavaScript dans un fichier externe avec une extension .js (par exemple, script.js) et l’inclure dans votre document HTML à l’aide de la balise <script> avec l’attribut src. Voici un exemple :

<!DOCTYPE html>
<html>
<head>
  <title>Ma page</title>
  <script src="script.js"></script>
</head>
<body>
  <!-- Le reste de votre contenu HTML -->
</body>
</html>

Exercice: Création d’un jeu de devinette en JavaScript

Maintenant que vous avez acquis des connaissances de base en JavaScript, vous allez créer un jeu de devinette simple. Le jeu consistera à deviner un nombre généré aléatoirement par l’ordinateur.

Voici les exigences pour la création du jeu :

1. Génération d’un nombre aléatoire : Utilisez JavaScript pour générer un nombre aléatoire entre 1 et 100. Ce nombre sera celui que le joueur devra deviner.
2. Interface utilisateur : Créez une interface utilisateur conviviale en utilisant HTML et CSS pour afficher le jeu de devinette. Vous pouvez utiliser des éléments tels que des zones de texte, des boutons et des messages d’erreur pour guider le joueur.
3. Entrée utilisateur : Permettez au joueur de saisir un nombre dans une zone de texte pour tenter de deviner le nombre généré aléatoirement. Assurez-vous de valider les entrées utilisateur pour éviter les erreurs.
4. Vérification de la devinette : Comparez le nombre deviné par le joueur avec le nombre généré aléatoirement. Affichez un message approprié pour indiquer si le nombre est trop bas, trop élevé ou s’il correspond au nombre à deviner.
5. Nombre de tentatives : Comptez le nombre de tentatives du joueur pour deviner le bon nombre. Affichez ce nombre à chaque tentative et félicitez le joueur s’il réussit à deviner le nombre.
6. Fin du jeu : Lorsque le joueur devine le bon nombre, affichez un message de félicitations et permettez-lui de recommencer le jeu en appuyant sur un bouton.

Votre tâche consiste à implémenter ces fonctionnalités en utilisant JavaScript pour la logique du jeu et HTML/CSS pour l’interface utilisateur. Vous pouvez personnaliser la présentation du jeu en utilisant des styles CSS selon votre préférence.

Assurez-vous de tester votre jeu de devinette en essayant différentes combinaisons de nombres et en vérifiant que toutes les fonctionnalités fonctionnent correctement.

Amusez-vous à créer ce jeu de devinette en JavaScript et défiez vos amis pour voir qui peut deviner le nombre mystère !

Résultat:

<!DOCTYPE html>
<html>
<head>
  <title>Jeu de devinette</title>
</head>
<body>
  <h1>Jeu de devinette</h1>
  <p>Devinez le nombre entre 1 et 100 :</p>
  <input type="number" id="guessInput">
  <button onclick="checkGuess()">Devinez</button>
  <p id="resultMessage"></p>
  <p>Tentatives: <span id="attemptCount">0</span></p>

  <script>
    // Génération d'un nombre aléatoire entre 1 et 100
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    var attemptCount = 0;

    function checkGuess() {
      var guessInput = document.getElementById("guessInput");
      var guess = parseInt(guessInput.value);
      var resultMessage = document.getElementById("resultMessage");
      var attemptCountElement = document.getElementById("attemptCount");

      if (isNaN(guess)) {
        resultMessage.textContent = "Veuillez entrer un nombre valide.";
      } else if (guess < 1 || guess > 100) {
        resultMessage.textContent = "Veuillez entrer un nombre entre 1 et 100.";
      } else {
        attemptCount++;
        attemptCountElement.textContent = attemptCount;

        if (guess === randomNumber) {
          resultMessage.textContent = "Félicitations! Vous avez deviné le nombre.";
          guessInput.disabled = true;
        } else if (guess < randomNumber) {
          resultMessage.textContent = "Le nombre est trop bas. Essayez à nouveau.";
        } else {
          resultMessage.textContent = "Le nombre est trop élevé. Essayez à nouveau.";
        }
      }

      guessInput.value = "";
      guessInput.focus();
    }
  </script>
</body>
</html>

Conclusion

Conclusion de la formation sur HTML, CSS et JavaScript :

Félicitations pour avoir terminé cette formation sur les bases du HTML, CSS et JavaScript ! Vous avez maintenant acquis les connaissances nécessaires pour créer des pages web interactives et attrayantes.

Pendant cette formation, vous avez appris les fondamentaux du HTML en vous familiarisant avec la structure de base d’une page, les balises de texte, les liens, les images, les listes et les tableaux. Vous avez également exploré les bases du CSS pour styliser et mettre en page vos pages web.

Ensuite, vous avez plongé dans le monde du JavaScript en découvrant les variables, les types de données, les opérateurs, les expressions, les structures de contrôle, les fonctions, la manipulation du DOM et la gestion des événements. Vous avez ainsi pu ajouter des fonctionnalités interactives à vos pages web.

Pour mettre en pratique vos nouvelles compétences, vous avez travaillé sur un exercice où vous avez créé un formulaire de contact interactif en utilisant HTML, CSS et JavaScript. Vous avez pu appliquer les concepts appris tout au long de la formation pour construire une expérience utilisateur engageante.

Pour voir l’exercice final que vous avez réalisé, vous pouvez accéder au dépôt GitHub.

N’oubliez pas que la maîtrise de ces langages est un processus continu. Continuez à pratiquer et à explorer de nouvelles fonctionnalités pour approfondir vos compétences.

Nous espérons que cette formation vous a fourni les bases solides nécessaires pour créer des sites web dynamiques et attrayants. Bonne continuation dans votre parcours de développement web !