Introduction à JavaScript

Qu’est-ce que JavaScript?

JavaScript est un langage de programmation de haut niveau, interprété, avec un typage faible et dynamique. Il est principalement connu comme le langage de script des navigateurs web, mais il est également utilisé sur le serveur via Node.js par exemple.

Exemple de code :

console.log("Bonjour, monde !");

Ce code affiche le message “Bonjour, monde !” dans la console.

Pourquoi apprendre JavaScript?

JavaScript est l’un des langages de programmation les plus populaires et les plus utilisés aujourd’hui. Apprendre JavaScript vous ouvre la porte au développement web côté client pour créer des sites web interactifs, mais aussi au développement côté serveur.

Comment intégrer JavaScript dans un site web

Il existe plusieurs manières d’intégrer JavaScript dans un site web : en ligne, interne et externe.

Exemple de code :

• En ligne :

<button onclick="alert('Bonjour, monde !')">Cliquez-moi !</button>

• Interne :

<script>
    function saluer() {
        alert('Bonjour, monde !');
    }
</script>
<button onclick="saluer()">Cliquez-moi !</button>

• Externe :

<script src="script.js"></script>

Dans script.js :

function saluer() {
    alert('Bonjour, monde !');
}

Dans votre HTML :

<button onclick="saluer()">Cliquez-moi !</button>

Les fondamentaux de JavaScript

Syntaxe de base

Découvrons les éléments de base de la syntaxe JavaScript : les commentaires, les déclarations, les instructions et les blocs.

Exemple de code :

// Ceci est un commentaire en ligne

/* Ceci est un commentaire
sur plusieurs lignes */

let salutation = "Bonjour, monde !"; // Déclaration et affectation d'une variable

console.log(salutation); // Affichage de la variable

Types de données et variables

En JavaScript, nous avons différents types de données : les nombres, les chaînes de caractères, les booléens, les objets, etc. Voyons comment déclarer des variables et leur affecter ces types de données.

Exemple de code :

let nombre = 10; // nombre
let estVrai = true; // booléen
let texte = "Bonjour"; // chaîne de caractères
let objet = {nom: "Dupont", prenom: "Jean"}; // objet

console.log(nombre, estVrai, texte, objet);

Opérateurs et structures de contrôle

Les opérateurs permettent de manipuler des valeurs, tandis que les structures de contrôle déterminent le flux d’exécution du programme (conditionnelles, boucles).

Exemple de code :

let a = 5;
let b = 10;

console.log(a + b); // addition
console.log(a * b); // multiplication

if (a < b) {
    console.log("a est inférieur à b");
} else {
    console.log("a est supérieur ou égal à b");
}

for (let i = 0; i < 5; i++) {
    console.log("Le compteur est à " + i);
}

Cet exemple montre l’utilisation de différents opérateurs, d’une structure conditionnelle if...else et d’une boucle for.

Fonctions et objets en JavaScript

Création et utilisation des fonctions

Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles peuvent accepter des paramètres et retourner une valeur.

Exemple de code :

function saluer(nom) { // Déclaration de la fonction saluer
    return "Bonjour " + nom + "!";
}

console.log(saluer("Alice")); // Appel de la fonction avec "Alice" comme argument

Comprendre les objets JavaScript

Un objet est une collection de propriétés associées à des valeurs. Les objets sont essentiels pour structurer et manipuler des données plus complexes.

Exemple de code :

let voiture = {
    marque: "Toyota",
    modele: "Corolla",
    annee: 2005,
    afficherDetails: function() {
        return this.marque + " " + this.modele + ", " + this.annee;
    }
};

console.log(voiture.afficherDetails()); // Affiche "Toyota Corolla, 2005"

Portée et fermeture de variables

La portée détermine la visibilité ou l’accessibilité d’une variable dans le code. La fermeture est un concept important qui permet aux fonctions d’accéder aux variables de leur portée englobante, même après que cette portée ait été fermée.

Exemple de code :

let externe = "Je suis une variable externe";

function afficherExterne() {
    let interne = "Je suis une variable interne";
    console.log(externe); // Peut accéder à la variable externe car elle est dans la portée englobante
    console.log(interne); // Peut accéder à la variable interne car elle est dans la même portée
}

afficherExterne(); // Affiche "Je suis une variable externe" et "Je suis une variable interne"
console.log(interne); // Erreur, car interne n'est pas définie dans cette portée

Manipulation du DOM avec JavaScript

Qu’est-ce que le DOM?

Le Document Object Model (DOM) est une interface de programmation qui permet à JavaScript d’interagir avec le contenu HTML d’une page web.

Sélection et modification des éléments DOM

JavaScript permet de sélectionner des éléments du DOM en utilisant des méthodes comme getElementById(), getElementsByClassName(), getElementsByTagName() et querySelector(). Une fois un élément sélectionné, il est possible de lire ou modifier ses propriétés, de changer son contenu ou son style, etc.

Exemple de code :

let titre = document.getElementById("monTitre"); // Sélection de l'élément avec l'ID "monTitre"
titre.style.color = "red"; // Modification du style de l'élément pour changer la couleur du texte en rouge
titre.innerHTML = "Nouveau titre"; // Modification du contenu de l'élément

Événements et gestion des événements

Les événements sont des actions qui se produisent lorsque l’utilisateur interagit avec la page web (clics, survols, appuis sur des touches, etc.). JavaScript permet de définir des fonctions qui seront exécutées lorsque ces événements se produisent, on les appelle des “gestionnaires d’événements” ou “event handlers”.

Exemple de code :

let bouton = document.getElementById("monBouton"); // Sélection de l'élément avec l'ID "monBouton"
bouton.addEventListener("click", function() { // Ajout d'un gestionnaire d'événement pour le clic sur le bouton
    alert("Le bouton a été cliqué!");
});

Introduction à AJAX et JSON

Comprendre AJAX

AJAX (Asynchronous JavaScript and XML) est une technique qui permet à une page web de communiquer avec un serveur web sans avoir besoin de recharger la page entière. Cela permet de créer des sites web plus réactifs et interactifs.

Comprendre JSON

JSON (JavaScript Object Notation) est un format de données utilisé pour stocker et échanger des données. Il est souvent utilisé dans les applications web pour envoyer des données depuis le serveur vers le client et vice versa.

Utilisation d’AJAX et JSON dans JavaScript

En JavaScript, l’objet XMLHttpRequest ou la fonction fetch() peuvent être utilisés pour effectuer des requêtes HTTP, permettant ainsi la mise en place de la technique AJAX. Les données échangées sont souvent formatées en JSON.

Exemple de code:

fetch('https://api.example.com/data', {
  method: 'GET',
})
.then(response => response.json()) // Transformer la réponse en JSON
.then(data => console.log(data)) // Afficher les données
.catch((error) => console.error('Error:', error)); // Gérer les erreurs

Les promesses et l’asynchronisme en JavaScript

Comprendre l’asynchronisme en JavaScript

L’asynchronisme est une caractéristique importante de JavaScript qui permet d’exécuter des opérations sans bloquer le fil d’exécution principal. Cela est particulièrement utile pour les opérations qui prennent du temps, comme les requêtes réseau.

Introduction aux promesses

Les promesses sont un moyen de gérer les opérations asynchrones en JavaScript. Une promesse représente une valeur qui peut ne pas être disponible immédiatement, mais qui le sera à un moment donné dans le futur, ou qui peut échouer.

Utilisation async / await

async et await sont des mots-clés introduits en ES2017 pour simplifier le travail avec les promesses. Une fonction marquée avec async retourne toujours une promesse, et l’opérateur await peut être utilisé pour attendre qu’une promesse soit résolue.

Exemple de code :

async function getJSONAsync(url) {
  let response = await fetch(url); // Attente de la réponse
  let data = await response.json(); // Attente de la transformation en JSON
  return data; // Retour des données
}

getJSONAsync('https://api.example.com/data')
.then(data => console.log(data)) // Affichage des données
.catch(error => console.error('Error:', error)); // Gestion des erreurs

Projet Pratique 1 – Création d’un calendrier interactif

Description du projet

Dans ce projet, nous allons créer un calendrier interactif à l’aide de JavaScript. Les utilisateurs pourront naviguer entre les mois et cliquer sur un jour pour voir les événements prévus pour cette date.

Planification et structure du calendrier

Nous commencerons par définir la structure de notre calendrier. Nous aurons besoin d’une grille pour afficher les jours du mois, et d’un moyen pour les utilisateurs de naviguer entre les mois.

Implémentation du calendrier en JavaScript

Nous utiliserons JavaScript pour rendre notre calendrier interactif. Nous gérerons les clics sur les jours et les boutons de navigation, et nous utiliserons le DOM pour mettre à jour l’affichage du calendrier.

Exemple de code :

// Création d'un nouvel objet Date
let date = new Date();

// Obtention du mois actuel
let month = date.getMonth();

// Obtention de l'année actuelle
let year = date.getFullYear();

// Fonction pour afficher le calendrier du mois
function displayCalendar(month, year) {
  // Initialisation du calendrier en tant que tableau vide
  let calendar = [];
  
  // Obtenir le nombre de jours dans le mois
  let daysInMonth = new Date(year, month, 0).getDate();
  
  // Remplir le calendrier avec les jours du mois
  for(let day = 1; day <= daysInMonth; day++) {
    calendar.push(day);
  }
  
  // Afficher le calendrier
  for(let day of calendar) {
    console.log(`${month}/${day}/${year}`);
  }
}

// Appel de la fonction pour afficher le calendrier de Mai 2023
displayCalendar(5, 2023);


// Fonction pour naviguer au mois précédent
function previousMonth() {
  if (month == 0) { // Si nous sommes en janvier
    month = 11; // Passer à décembre
    year -= 1; // Diminuer l'année
  } else {
    month -= 1; // Sinon, simplement diminuer le mois
  }
  displayCalendar(month, year);
}

// Fonction pour naviguer au mois suivant
function nextMonth() {
  if (month == 11) { // Si nous sommes en décembre
    month = 0; // Passer à janvier
    year += 1; // Augmenter l'année
  } else {
    month += 1; // Sinon, simplement augmenter le mois
  }
  displayCalendar(month, year);
}

// Affichage du calendrier initial
displayCalendar(month, year);

Projet Pratique 2 – Création d’une calculatrice avec interface

Description du projet

Pour ce deuxième projet, l’objectif est de créer une calculatrice simple mais fonctionnelle. Les utilisateurs pourront effectuer des opérations de base comme l’addition, la soustraction, la multiplication et la division.

Planification et structure de la calculatrice

Nous aurons besoin d’un moyen pour les utilisateurs de saisir les chiffres et les opérations, ainsi qu’un affichage pour montrer les résultats. Les boutons numériques de 0 à 9, les boutons d’opérations (+, -, *, /), un bouton d’égalité (=) et un bouton de réinitialisation (C) seront présents.

Implémentation de la calculatrice en JavaScript

Nous utiliserons JavaScript pour gérer les entrées de l’utilisateur, effectuer les calculs et afficher les résultats. Chaque fois qu’un bouton est pressé, nous mettrons à jour l’affichage et, si nécessaire, effectuerons un calcul.

Exemple de code :

let currentOperation = '';
let currentNumber = '';

function pressNumber(number) {
  currentNumber += number;
  updateDisplay();
}

function pressOperator(operator) {
  currentOperation = operator;
  currentNumber = '';
  updateDisplay();
}

function pressEqual() {
  // Effectuer le calcul ici
  currentOperation = '';
  currentNumber = '';
  updateDisplay();
}

function pressClear() {
  currentOperation = '';
  currentNumber = '';
  updateDisplay();
}

function updateDisplay() {
  // Mettre à jour l'affichage de la calculatrice
}

// Associer les fonctions aux boutons de la calculatrice
document.getElementById('btn-1').addEventListener('click', function() {
  pressNumber('1');
});

// Faire de même pour les autres boutons...

Dans cet exemple, lorsque l’utilisateur appuie sur un bouton numérique, nous ajoutons ce nombre à la fin de currentNumber. Si l’utilisateur appuie sur un bouton d’opérateur, nous stockons cet opérateur et réinitialisons currentNumber. Lorsque l’utilisateur appuie sur le bouton d’égalité, nous effectuons le calcul et affichons le résultat. Le bouton de réinitialisation efface simplement l’opération actuelle et le numéro actuel.

Conclusion et perspectives d’avenir pour JavaScript

Résumé des points clés

Au cours de ce voyage d’apprentissage du JavaScript, nous avons couvert les bases de la syntaxe et des structures de contrôle, les objets et les fonctions, les interactions avec le Document Object Model (DOM), l’utilisation d’AJAX et JSON pour les requêtes asynchrones, et l’asynchronisme et les promesses en JavaScript. Pour couronner le tout, nous avons mis ces concepts en pratique à travers la réalisation de deux projets : un calendrier interactif et une calculatrice.

Tendances et évolutions futures de JavaScript

Alors que JavaScript continue de se développer et de se renforcer en tant que l’une des principales langues de programmation web, de nouvelles fonctionnalités sont continuellement ajoutées et les pratiques d’écriture de JavaScript continuent d’évoluer. Par exemple, l’ES6 a apporté des fonctionnalités telles que les classes, les modules et les promesses qui ont considérablement amélioré la manière d’écrire du code JavaScript. Il est important de rester à jour avec ces tendances pour rester pertinent en tant que développeur JavaScript.

Ressources pour continuer à apprendre

Il y a de nombreuses ressources disponibles pour continuer à apprendre JavaScript. MDN Web Docs est un excellent endroit pour comprendre en profondeur les concepts et les fonctionnalités de JavaScript. Des plateformes comme freeCodeCamp, Codecademy et Udemy proposent des cours qui peuvent aider à renforcer votre compréhension de JavaScript et à acquérir de nouvelles compétences. Les communautés en ligne comme StackOverflow et GitHub peuvent également être des lieux précieux pour poser des questions, partager des idées et collaborer avec d’autres développeurs.