Scribd
Importer
24 vues5 pages

Chapitre_5 Introduction à JavaScript

Ce cours d'introduction à JavaScript couvre les bases du langage, y compris la manipulation du DOM et les concepts fondamentaux de la programmation. Les apprenants découvriront comment inclure JavaScript dans une page HTML, utiliser des variables, des types de données, des opérateurs, des structures de contrôle, des fonctions, et gérer des événements. À la fin du cours, les participants seront capables de créer des pages web interactives et dynamiques.

Transféré par

dioumadione004
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
24 vues5 pages

Chapitre_5 Introduction à JavaScript

Ce cours d'introduction à JavaScript couvre les bases du langage, y compris la manipulation du DOM et les concepts fondamentaux de la programmation. Les apprenants découvriront comment inclure JavaScript dans une page HTML, utiliser des variables, des types de données, des opérateurs, des structures de contrôle, des fonctions, et gérer des événements. À la fin du cours, les participants seront capables de créer des pages web interactives et dynamiques.

Transféré par

dioumadione004
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 5

Support de Cours : Introduction à JavaScript

Objectifs du Cours :
 Comprendre les bases de JavaScript.
 Apprendre à manipuler le DOM.
 Découvrir les concepts fondamentaux de la programmation en JavaScript.

1. Qu'est-ce que JavaScript ?


JavaScript est un langage de programmation de script principalement utilisé pour rendre les
pages web interactives. Il permet de manipuler le contenu d'une page web, de réagir aux
actions de l'utilisateur, et de communiquer avec un serveur.

Pourquoi apprendre JavaScript ?


 Interactivité : Ajouter des fonctionnalités dynamiques aux pages web.
 Polyvalence : Utilisable aussi bien côté client que côté serveur (avec Node.js).
 Popularité : Un des langages les plus utilisés au monde.

2. Les Bases de JavaScript

a. Inclure JavaScript dans une page HTML

JavaScript peut être inclus directement dans une page HTML à l'aide de la balise <script>.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Premier Script JavaScript</title>
</head>
<body>
<h1>Bonjour, Monde!</h1>
<script>
// Votre code JavaScript ici
alert('Bonjour, Monde!');
</script>
</body>
</html>

b. Les Variables
Les variables sont utilisées pour stocker des données. En JavaScript, on peut déclarer des
variables avec let, const, ou var.

 let : Pour les variables qui peuvent changer.


 const : Pour les variables constantes (ne peuvent pas changer).
 var : Ancienne manière de déclarer des variables (moins recommandée).
Exemple :
let message = "Bonjour, Monde!";
const PI = 3.14;
var ancienneVariable = "Ceci est une ancienne variable";

c. Les Types de Données


JavaScript supporte plusieurs types de données :
 String : Chaîne de caractères (ex: "Bonjour").
 Number : Nombre (ex: 42, 3.14).
 Boolean : Booléen (ex: true, false).
 Array : Tableau (ex: [1, 2, 3]).
 Object : Objet (ex: {nom: "Alice", age: 25}).

Exemple :
let nom = "Alice";
let age = 25;
let estEtudiant = true;
let hobbies = ["lire", "coder", "voyager"];
let utilisateur = { nom: "Alice", age: 25 };

d. Les Opérateurs
JavaScript supporte les opérateurs arithmétiques, de comparaison, et logiques.
 Arithmétiques : +, -, *, /, %.
 Comparaison : ==, ===, !=, !==, >, <, >=, <=.
 Logiques : &&, ||, !.

Exemple :
let a = 10;
let b = 5;

let somme = a + b; // 15
let estSuperieur = a > b; // true
let etLogique = (a > 0) && (b > 0); // true

3. Les Structures de Contrôle

a. Les Conditions
Les conditions permettent d'exécuter du code en fonction de certaines conditions.
 if...else :

let age = 18;

if (age >= 18) {


console.log("Vous êtes majeur.");
} else {
console.log("Vous êtes mineur.");
}
 switch :

let jour = "Lundi";

switch (jour) {
case "Lundi":
console.log("C'est le début de la semaine.");
break;
case "Vendredi":
console.log("C'est bientôt le week-end!");
break;
default:
console.log("Jour non reconnu.");
}

b. Les Boucles
Les boucles permettent de répéter des actions.
 for :

for (let i = 0; i < 5; i++) {


console.log("Itération numéro " + i);
}
 while :

let i = 0;
while (i < 5) {
console.log("Itération numéro " + i);
i++;
}
 do...while :

let i = 0;
do {
console.log("Itération numéro " + i);
i++;
} while (i < 5);

4. Les Fonctions
Les fonctions permettent de regrouper du code réutilisable.

a. Déclaration de Fonction
function direBonjour(nom) {
console.log("Bonjour, " + nom + "!");
}

direBonjour("Alice"); // Affiche "Bonjour, Alice!"


b. Fonctions Fléchées (Arrow Functions)
Les fonctions fléchées sont une syntaxe plus concise pour écrire des fonctions.

const direBonjour = (nom) => {


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

direBonjour("Bob"); // Affiche "Bonjour, Bob!"

5. Manipulation du DOM
Le DOM (Document Object Model) est une représentation de la page web sous forme
d'objets JavaScript. Il permet de manipuler le contenu et la structure d'une page web.

a. Sélectionner des Éléments


 getElementById : Sélectionne un élément par son ID.
 querySelector : Sélectionne le premier élément correspondant au sélecteur CSS.
 querySelectorAll : Sélectionne tous les éléments correspondant au sélecteur CSS.

Exemple :

let titre = document.getElementById("titre");


let premierParagraphe = document.querySelector("p");
let tousLesParagraphes = document.querySelectorAll("p");

b. Modifier le Contenu
 innerHTML : Modifie le contenu HTML d'un élément.
 textContent : Modifie le texte d'un élément.
Exemple :

titre.innerHTML = "Nouveau Titre";


premierParagraphe.textContent = "Ceci est un nouveau paragraphe.";

c. Gérer les Événements


JavaScript permet de réagir aux actions de l'utilisateur (clics, saisie, etc.).
Exemple :

let bouton = document.querySelector("button");

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

6. Exercices Pratiques
Exercice 1 : Créez une fonction qui prend deux nombres en paramètres et retourne leur
somme.
Exercice 2 : Écrivez un script qui demande à l'utilisateur son nom et affiche un message de
bienvenue.

Exercice 3 : Créez une page HTML avec un bouton. Lorsque l'utilisateur clique sur le bouton,
changez la couleur de fond de la page.

Conclusion
JavaScript est un langage puissant et essentiel pour tout développeur web. En maîtrisant les
bases de JavaScript, vous serez en mesure de créer des pages web interactives et
dynamiques.
N'oubliez pas de pratiquer régulièrement et d'explorer les nombreuses ressources
disponibles pour approfondir vos connaissances.

Vous aimerez peut-être aussi