Nouvelles du web

Ce cours a pour objectif de vous aider à maîtriser les bases du langage JavaScript. Nous allons couvrir les sujets essentiels pour vous permettre de créer des applications web dynamiques.

Prérequis et public cible:
Ce cours est destiné aux débutants en programmation. Aucune connaissance préalable en JavaScript n'est requise. Cependant, une connaissance de base en HTML et CSS serait un atout.

Chapitre 1: Introduction au JavaScript

Qu’est-ce que le JavaScript?
JavaScript est un langage de programmation utilisé principalement pour ajouter des fonctionnalités interactives aux pages web. Il permet de créer des effets visuels, de valider des formulaires, d'envoyer des requêtes au serveur sans recharger la page, etc.

Où s’exécute le code JavaScript?
Le code JavaScript s'exécute principalement dans le navigateur web du client. Cependant, il peut également être exécuté côté serveur avec l'aide de technologies telles que Node.js.

Comment ajouter du code JavaScript à une page HTML?
Il existe deux façons d'ajouter du code JavaScript à une page HTML: en l'incluant directement dans la page avec la balise <script> ou en créant un fichier séparé avec l'extension .js et en le liant à la page avec l'attribut src de la balise <script>.

Exemple:

<!-- Inclure le code directement dans la page -->
<script>
  alert('Hello World!');
</script>

<!-- Lier un fichier externe -->
<script src="script.js"></script>

Chapitre 2: Les bases du langage (suite)

Les opérateurs et les expressions
Les opérations mathématiques courantes telles que l'addition (+), la soustraction (-), la multiplication (*) et la division (/) peuvent être effectuées en utilisant des opérateurs. Les expressions sont des combinaisons de valeurs, de variables et d'opérateurs qui produisent une nouvelle valeur.

Exemple:

let x = 5;
let y = 2;
let z = x + y; // z vaut 7

Les structures de contrôle (if/else, for, while)
Les structures de contrôle permettent de contrôler l'exécution du code en fonction de conditions. La structure if/else permet d'exécuter un bloc de code si une condition est vraie et un autre bloc si elle est fausse. Les boucles for et while permettent d'exécuter un bloc de code plusieurs fois.

Exemple:

// Structure if/else
let age = 18;
if (age >= 18) {
    console.log('Vous êtes majeur.');
} else {
    console.log('Vous êtes mineur.');
}

// Boucle for
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// Boucle while
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

Chapitre 3: Les fonctions en JavaScript

Définition et utilisation des fonctions
Une fonction est un bloc de code qui peut être appelé à plusieurs reprises. Elle peut prendre des paramètres en entrée et renvoyer une valeur en sortie. Pour définir une fonction en JavaScript, on utilise le mot-clé function suivi du nom de la fonction et des paramètres entre parenthèses.

Exemple:

function sayHello(name) {
    console.log('Hello ' + name);
}

sayHello('John'); // Affiche 'Hello John'

Portée des variables et fermetures (closures)
La portée d'une variable détermine où elle peut être utilisée dans le code. En JavaScript, il existe deux types de portée: la portée globale et la portée locale. Une variable déclarée à l'extérieur d'une fonction a une portée globale et peut être utilisée partout dans le code. Une variable déclarée à l'intérieur d'une fonction a une portée locale et ne peut être utilisée que dans cette fonction.

Fonctions anonymes et fonctions fléchées
Une fonction anonyme est une fonction sans nom qui peut être stockée dans une variable ou passée en paramètre à une autre fonction. Une fonction fléchée est une syntaxe plus concise pour définir des fonctions anonymes.

Exemple:

// Fonction anonyme stockée dans une variable
let sayHello = function(name) {
    console.log('Hello ' + name);
}

sayHello('John'); // Affiche 'Hello John'

// Fonction fléchée stock

Chapitre 4: Manipulation du DOM avec JavaScript

Qu’est-ce que le DOM?
Le DOM (Document Object Model) est une représentation hiérarchique des éléments d'une page web sous forme d'objets. Il permet aux scripts JavaScript d'accéder aux éléments de la page pour les modifier ou leur ajouter des événements.

Sélectionner des éléments dans la page
Pour sélectionner un élément dans la page avec JavaScript, on peut utiliser les méthodes getElementById(), getElementsByTagName() ou querySelector().

Exemple:

// Sélectionner un élément par son ID
let element = document.getElementById('my-element');

// Sélectionner tous les éléments d'un certain type
let elements = document.getElementsByTagName('p');

// Sélectionner un élément avec un sélecteur CSS
let element = document.querySelector('#my-element');

Modifier le contenu et les attributs des éléments
Pour modifier le contenu d'un élément avec JavaScript, on peut utiliser la propriété innerHTML ou textContent. Pour modifier les attributs d'un élément, on peut utiliser les méthodes setAttribute() ou removeAttribute().

Exemple:

// Modifier le contenu d'un élément
let element = document.getElementById('my-element');
element.innerHTML = 'Nouveau contenu';

// Modifier un attribut d'un élément
element.setAttribute('class', 'my-class');

// Supprimer un attribut d'un élément
element.removeAttribute('class');

Chapitre 5: Événements et gestionnaires d’événements en JavaScript

Qu’est-ce qu’un événement?
Un événement est une action qui se produit sur un élément de la page web, comme un clic sur un bouton ou l'appui sur une touche du clavier.

Ajouter des gestionnaires d’événements aux éléments
Pour ajouter un gestionnaire d'événement à un élément avec JavaScript, on peut utiliser la méthode addEventListener(). Cette méthode prend en paramètre le type d'événement à écouter et une fonction à exécuter lorsque l'événement se produit.

Exemple:

let button = document.getElementById('my-button');

button.addEventListener('click', function() {
    console.log('Le bouton a été cliqué.');
});

Conclusion: En suivant ce cours, vous avez appris les bases du langage JavaScript et comment l’utiliser pour créer des applications web dynamiques. Vous avez découvert comment manipuler les éléments d’une page web avec le DOM et comment ajouter des événements aux éléments pour rendre vos pages interactives.

Exemple de code final:

<!DOCTYPE html>
<html>
<head>
    <title>Exemple de page avec JavaScript</title>
</head>
<body>
    <h1>Exemple de page avec JavaScript</h1>
    <p id="my-paragraph">Ceci est un paragraphe.</p>
    <button id="my-button">Cliquez-moi!</button>

    <script>
        // Sélectionner le paragraphe et le bouton
        let paragraph = document.getElementById('my-paragraph');
        let button = document.getElementById('my-button');

        // Ajouter un gestionnaire d'événement au bouton
        button.addEventListener('click', function() {
            // Modifier le contenu du paragraphe
            paragraph.innerHTML = 'Le bouton a été cliqué!';
        });
    </script>
</body>
</html>

Ce code crée une page HTML simple avec un titre, un paragraphe et un bouton. Lorsque l’utilisateur clique sur le bouton, le contenu du paragraphe est modifié grâce à l’utilisation d’un gestionnaire d’événement en JavaScript.

Nous espérons que ce cours vous a été utile et que vous continuerez à explorer les possibilités offertes par le langage JavaScript. Bonne continuation dans votre apprentissage!