JavaScript Fundamentals

JavaScript is the programming language of the web par excellence. Built into every modern browser, it lets you create interactive websites and dynamic applications.

Why Learn JavaScript?

• Ubiquitous: Used by more than 97% of websites
• Versatile: Front end, back end (Node.js), mobile apps, desktop apps…
• Rich ecosystem: Thousands of libraries and frameworks (React, Vue, Angular…)
• Active community: One of the largest developer communities in the world

JavaScript Basics

Variables and Data Types

JavaScript offers several ways to declare variables:

// Mutable variables
let age = 25;
let nom = "Alice";

// Constants (cannot be reassigned)
const PI = 3.14159;

// Avoid (legacy approach)
var ancienneVariable = "Déprécié";

The main data types are:

// Strings
let message = "Bonjour le monde !";

// Numbers
let entier = 42;
let decimal = 3.14;

// Booleans
let estVrai = true;
let estFaux = false;

// Arrays
let fruits = ["pomme", "banane", "orange"];

// Objects
let personne = {
  nom: "Dupont",
  prenom: "Jean",
  age: 30,
  adresse: {
    ville: "Paris",
    codePostal: "75001"
  }
};

// Special values
let valeurVide = null;
let valeurNonDefinie = undefined;

Operators

JavaScript provides many operators for manipulating data:

// Arithmetic operators
let somme = 5 + 3;        // 8
let difference = 10 - 4;  // 6
let produit = 3 * 4;      // 12
let quotient = 20 / 5;    // 4
let modulo = 10 % 3;      // 1 (remainder of the division)

// Comparison operators
let estEgal = 5 == "5";           // true (loose equality)
let estStrictementEgal = 5 === 5; // true (strict equality, type included)
let estDifferent = 5 != "6";      // true
let estSuperieur = 10 > 5;        // true

// Logical operators
let et = true && false;  // false
let ou = true || false;  // true
let non = !true;         // false

Conditional Statements

Conditions let you run code depending on certain circumstances:

// If, else if, else
let heure = 14;

if (heure < 12) {
  console.log("Bonjour");
} else if (heure < 18) {
  console.log("Bon après-midi");
} else {
  console.log("Bonsoir");
}

// Ternary operator (condition ? if true : if false)
let statut = age >= 18 ? "Majeur" : "Mineur";

// Switch
let jour = "Mardi";

switch (jour) {
  case "Lundi":
    console.log("Début de semaine");
    break;
  case "Mardi":
  case "Mercredi":
  case "Jeudi":
    console.log("Milieu de semaine");
    break;
  case "Vendredi":
    console.log("Fin de semaine");
    break;
  default:
    console.log("Week-end");
}

Loops

Loops let you repeat actions:

// for loop
for (let i = 0; i < 5; i++) {
  console.log(`Itération ${i}`);
}

// while loop
let compteur = 0;
while (compteur < 5) {
  console.log(`Compteur: ${compteur}`);
  compteur++;
}

// do...while loop
let j = 0;
do {
  console.log(`J vaut ${j}`);
  j++;
} while (j < 3);

// Iterating over an array
let couleurs = ["rouge", "vert", "bleu"];

// Modern method
couleurs.forEach(couleur => {
  console.log(couleur);
});

// With for...of
for (let couleur of couleurs) {
  console.log(couleur);
}

// Iterating over an object
let utilisateur = { nom: "Dupont", age: 30, ville: "Paris" };

// With for...in
for (let propriete in utilisateur) {
  console.log(`${propriete}: ${utilisateur[propriete]}`);
}

Functions

Functions let you group reusable code together:

// Function declaration
function saluer(nom) {
  return `Bonjour, ${nom} !`;
}

// Function expression
const direAuRevoir = function(nom) {
  return `Au revoir, ${nom} !`;
};

// Arrow function (ES6+)
const multiplier = (a, b) => a * b;

// Function with default parameters
function creerProfil(nom, age = 30, ville = "Paris") {
  return {
    nom,
    age,
    ville
  };
}

// Function call
console.log(saluer("Marie"));  // "Bonjour, Marie !"
console.log(multiplier(4, 5)); // 20

DOM Manipulation

JavaScript lets you interact with HTML and CSS through the DOM (Document Object Model):

// Select elements
const titre = document.getElementById("monTitre");
const paragraphes = document.querySelectorAll("p");
const bouton = document.querySelector(".btn-primary");

// Change content
titre.textContent = "Nouveau titre";
titre.innerHTML = "Titre avec <em>emphase</em>";

// Change styles
titre.style.color = "blue";
titre.style.fontSize = "24px";

// Add/remove classes
titre.classList.add("important");
titre.classList.remove("cache");
titre.classList.toggle("actif");

// Create elements
const nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Je suis un nouveau paragraphe.";
document.body.appendChild(nouveauParagraphe);

// Handle events
bouton.addEventListener("click", function(event) {
  alert("Bouton cliqué !");
});

document.addEventListener("DOMContentLoaded", function() {
  console.log("Page entièrement chargée");
});

Asynchronous JavaScript

JavaScript handles asynchronous operations through several mechanisms:

// Callbacks
function chargerDonnees(callback) {
  setTimeout(() => {
    const donnees = { id: 1, nom: "Produit" };
    callback(donnees);
  }, 1000);
}

chargerDonnees(function(resultat) {
  console.log(resultat);
});

// Promises
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve({ id: 1, nom: "Produit" });
      } else {
        reject("Erreur lors du chargement");
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Async/await (ES8+)
async function chargerUtilisateur() {
  try {
    const response = await fetch('https://api.exemple.com/utilisateurs/1');
    const utilisateur = await response.json();
    console.log(utilisateur);
  } catch (error) {
    console.error("Erreur:", error);
  }
}

Conclusion

JavaScript is an essential language for every web developer. Its fundamentals are relatively easy to learn, but its depth and versatility mean it can take time to master completely.

To go further, explore:

• Modern frameworks (React, Vue, Angular)
• Server-side JavaScript with Node.js
• The new features of ECMAScript (ES6+)
• Object-oriented programming in JavaScript
• Modern web APIs (Fetch, WebSockets, etc.)