Introduction au JavaScript
Donnez vie à vos pages web
Réalisée par:
Ben Béchir Chaima
1 Qu'est-ce que le JavaScript ?
2 Les 3 manières d'inclure le JavaScript
3 Les bases : variables, types et opérateurs
4 Les structures de contrôle
5 Les fonctions
6 Manipulation du DOM (Document Object Model)
7 Les événements
8 Introduction aux tableaux et objets
9 Conclusion et prochaines étapes
Qu'est-ce que le
JavaScript ?
1
Qu'est-ce que
Le langage de programmation du Web le JavaScript ?
➢ Un langage de programmation dynamique et de haut niveau.
➢ Initialement créé pour le navigateur web, il est maintenant utilisé partout
(serveurs, applications mobiles, etc.).
➢ Il rend les pages web interactives et dynamiques.
➢ Il fonctionne avec HTML et CSS pour créer des expériences utilisateur
complètes.
➢ L'évolution moderne, ES6 (ECMAScript 2015) et au-delà, a introduit de
nombreuses fonctionnalités importantes.
2
Les 3 manières
d'inclure le
JavaScript
3
Les 3 manières
d'inclure le
Où placer votre code ? JavaScript
1. JavaScript Externe :
✓ La méthode recommandée.
✓ Le code est dans un fichier .js séparé.
✓ Liaison dans le HTML avec une balise <script>.
✓ Exemple : <script src="[Link]"></script>
2. JavaScript Interne :
✓ Le code est dans une balise <script> directement dans le HTML.
✓ Utile pour du code très spécifique à une seule page.
✓ Exemple : <script> alert("Bonjour !"); </script>
3. JavaScript en ligne (Inline) :
✓ Le code est dans un attribut d'événement sur une balise HTML.
✓ À éviter autant que possible.
✓ Exemple : <button onclick="alert('Bouton cliqué !');">Cliquez-moi</button> 4
Les bases :
variables, types et
opérateurs
5
Les bases :
variables, types
et opérateurs
Les fondations du code
❖ Variables :
✓ Déclaration avec let, const ou var.
✓ Let pour les variables qui peuvent changer.
✓ Const pour les variables constantes.
❖ Types de données primitifs :
String (chaîne de caractères), number (nombre), boolean (vrai/faux), null,
undefined.
❖ Opérateurs :
✓ Mathématiques :+,-,*,/,%.
✓ Logiques : && (ET), || (OU) , ! (NON).
✓ De comparaison :==, ===, !=, !==, >, <, etc.
6
Les structures de
contrôle
7
Les structures
de contrôle
Prendre des décisions et répéter des
actions
❖ Conditions :
✓ if...else if...else : Pour exécuter du code en fonction d'une condition.
✓ Switch : Pour les conditions multiples.
❖ Boucles :
✓ For : Pour répéter un bloc de code un nombre de fois défini.
✓ While : Pour répéter tant qu'une condition est vraie.
✓ for...of : Pour itérer sur des tableaux.
8
Les fonctions
9
Les fonctions
Organiser votre code
Définition : Un bloc de code réutilisable qui exécute une tâche spécifique.
Syntaxe de base
Fonctions fléchées (ES6) : Une syntaxe plus courte.
Exemple : const maFonction = (param) => { ... };
10
Manipulation du
DOM (Document
Object Model)
11
Manipulation
du DOM
(Document
Object Model)
Interagir avec la page HTML
Concept : Le DOM est une représentation en "arbre" de la structure HTML.
JavaScript permet de le modifier.
❖ Sélectionner des éléments :
✓ [Link]('mon-id')
✓ [Link]('.ma-classe')
✓ [Link]('p')
❖ Modifier des éléments :
✓ Modifier le contenu : [Link] = 'Nouveau contenu';
✓ Modifier le style : [Link] = 'red';
✓ Ajouter/retirer des classes : [Link]('ma-classe');
12
Les événements
13
Réagir aux actions de l'utilisateur Les événements
Définition : Des actions qui se produisent dans le navigateur (clic, survol, saisie clavier,
etc.).
❖ Syntaxe :
✓ [Link]('type_evenement', fonctionAExecuter);
✓ Exemple : [Link]('click', () => { alert('clic !'); });
❖ Types d'événements courants :
✓ Click, mouseover, submit, load, keyup.
14
Introduction aux
tableaux et objets
15
Introduction
aux tableaux et
objets
Structurer les données
❖ Tableaux (Arrays) :
✓ Une collection ordonnée d'éléments.
✓ Déclaration : const fruits = ['pomme', 'banane', 'orange'];
❖ Objets :
✓ Une collection de paires clé-valeur.
✓ Déclaration :
16
Conclusion et
prochaines étapes
17
Conclusion et
prochaines
étapes
Résumé et pistes de développement
Résumé :
✓ JavaScript est indispensable pour l'interactivité..
✓ Il manipule le DOM pour modifier les pages.
✓ Il réagit aux événements de l'utilisateur.
Prochaines étapes :
✓ Apprendre ES6+ (arrow functions, modules, etc.).
✓ Découvrir les frameworks/librairies populaires (React, Vue, Angular).
✓ Étudier l'asynchrone (Promises, async/await).
18
