1
Javascript
Présenter par : Encadrer par:
EL FARISSI Oussama [Link] MOUBTAHIJ
EL KAMDANI Hicham
ABDELAALI
EDOUMISI Hafsa Filière : Génie Informatique. EST d’Agadir
Année universitaire: 2023-2024
2
Plan:
1. Introduction au langage JavaScript
2. Concepts de base :
• Interactivité avec le langage JavaScript
• Front end / Back end
• Particularités du langage JavaScript
3. Emplacement du Code JavaScript
4. JavaScript outputs
5. Programmation avec JavaScript :
• Variables
• Types de données
• Tableaux
6. Exemple D’application:
3
Introduction
• Le JavaScript est un langage de programmation crée en 1995. Le JavaScript est aujourd’hui l’un des
langages de programmation les plus populaires et il fait partie des langages web dits « standards »
avec le HTML et le CSS.
• Langage de script incorporé dans le HTML
• Historiquement, premier langage de script pour le Web
• Apporte des améliorations au HTML
• HTML permet d'écrire
• JavaScript permet de programmer, c'est-à-dire de gérer l'information d'une manière interactive et
dynamique .
4
Concepts de base :
JavaScript est un langage de programmation polyvalent utilisé principalement pour créer des sites web dynamiques et
interactifs. Voici quelques concepts de base :
[Link] :
JavaScript utilise une syntaxe similaire à celle de nombreux langages de programmation, tels que C et Java. Les
instructions sont généralement écrites entre des balises <script> dans le code HTML ou dans des fichiers séparés
avec l'extension ".js".
[Link] :
Les variables en JavaScript sont utilisées pour stocker des données. Elles peuvent contenir différents types de
données, tels que des nombres, des chaînes de caractères et des objets.
[Link] :
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles sont définies à l'aide du
mot-clé function et peuvent prendre des paramètres et renvoyer des valeurs.
[Link] de contrôle :
JavaScript prend en charge les structures de contrôle telles que les boucles (for, while) et les instructions
conditionnelles (if, else) pour contrôler le flux d'exécution du programme.
5
Concepts de base :
Syntaxe: Variable:
// Exemple de code JavaScript dans un fichier séparé ([Link]) // Déclaration et initialisation d'une variable
function afficherMessage() { var nombre = 42;
[Link]("Bonjour, monde !"); // Déclaration d'une chaîne de caractères
} var message = "Bonjour";
// Appel de la fonction depuis le fichier HTML // <script // Déclaration et initialisation d'un objet
src="[Link]"></script> var personne = { nom: "John", age: 30 };
Fonctions:
// Définition d'une fonction qui additionne deux nombres
function additionner(a, b) {
return a + b;
}
// Appel de la fonction avec des arguments et affichage du résultat var
resultat = additionner(3, 5);
[Link]("Résultat de l'addition :", resultat);
6
Concepts de base :
Structures de contrôle :
// Structure conditionnelle
var age = 20;
If (age >= 18) {
[Link]("Vous êtes majeur.");
} else {
[Link]("Vous êtes mineur.");
}
// Boucle for
for (var i = 0; i < 5; i++) {
[Link]("Itération numéro", i);
}
// Boucle while
var x = 0; while (x < 5) {
[Link]("Valeur de x :", x);
x++;
}
7
Concepts de base :Structure d’un DOM
Avant de voir le Interactivité du javascript il faut comprendre qu’est ce qu’un DOM :
Le DOM (Document Object Model) :
•Représentation hiérarchique :
Il offre une représentation arborescente de la structure d'un document HTML ou XML, où
chaque élément est un nœud possède un seul père, et plusieurs fils.
•Interface de programmation :
Permet à JavaScript d'interagir dynamiquement avec les éléments HTML comme s'ils étaient
des objets. L’accès à un DOM est fait par l’intermédiaire d’une API (Application
Programming Interface)
•Relation parent-enfant :
Les éléments sont organisés en relations parent-enfant, reflétant ainsi la structure de la page
web.
8
Concepts de base :Structure d’un DOM
<html>
<Body> <Head>
<H1> <Div> <meta> <Title>
My Web DOM Nodes Structure
My Web Example
Demonstration
Site
DOM
9
Concepts de base :Structure d’un DOM
<body>
<h1> <div> <span> < div>
My Web To Help Understanding
Site the basics
And Forcing
Is for Education
Knowleadge
Purpose
10
Concepts de base :Structure d’un DOM
11
Concepts de base :Structure d’un DOM
<body>
<h1> <div> <span> < div>
Is for To Help And Forcing
My Web
Education <p> <h3> <p> <h4> Understandin Knowleadge
Site
Purpose g the basics
Web Java
Html Css
Devlopement Script
12
Concepts de base : APIs Spécifiques
Voici quelques exemples de manipulations du DOM (Document Object Model) en JavaScript :
1. Accès aux éléments HTML :
• Accéder à un élément par son ID :
var element = [Link]("monElement");
• Accéder à des éléments par leur classe :
var elements = [Link]("maClasse");
• Accéder à des éléments par leur balise :
var elements = [Link]("div");
13
Concepts de base : APIs Spécifiques
Voici quelques exemples de manipulations du DOM (Document Object Model) en JavaScript :
2. Manipulation du contenu :
• Modifier le contenu HTML d'un élément
[Link] = "Nouveau contenu";
• Modifier le texte d'un élément :
[Link] = "Nouveau texte";
14
Concepts de base : APIs Spécifiques
Voici quelques exemples de manipulations du DOM (Document Object Model) en JavaScript :
3. Modification des attributs :
• Modifier la valeur d'un attribut :
[Link]("src", "[Link]");
• Supprimer un attribut :
[Link]("class");
15
Concepts de base : APIs Spécifiques
Voici quelques exemples de manipulations du DOM (Document Object Model) en JavaScript :
4. Création et suppression d'éléments :
• Créer un nouvel élément :
var nouveauElement = [Link]("div");
• Ajouter un élément au DOM :
[Link](nouveauElement);
• Supprimer un élément du DOM :
[Link](elementASupprimer);
16
Concepts de base : APIs Spécifiques
Voici quelques exemples de manipulations du DOM (Document Object Model) en JavaScript :
5. Gestion des classes :
• Ajouter une classe à un élément :
[Link]("maClasse");
• Supprimer une classe d'un élément :
[Link]("maClasse");
17
Concepts de base : APIs Spécifiques
Voici quelques exemples de manipulations du DOM (Document Object Model) en JavaScript :
6. Gestion des événements :
• Ajouter un gestionnaire d'événement :
[Link]("click", maFonction);
• Supprimer un gestionnaire d'événement :
[Link]("click", maFonction);
•This property returns a collection of all <a> (anchor) elements in the document that have a href attribute.
•This property returns a collection of all <a> (anchor) elements in the document that have a href attribute.
18
Concepts de base : APIs Spécifiques
Il existe plusieurs manipulations du DOM à savoir :
• [Link]:
Cette propriété renvoie l'URL complète de la page web actuelle, comprenant le protocole (par exemple,
"[Link] ou "[Link] le nom de domaine, le chemin d'accès et éventuellement les paramètres de
requête.
• [Link]:
Cette propriété renvoie une collection de tous les éléments <a> (éléments d'ancrage) dans le document
qui ont un attribut "href".
19
Interactivité avec le langage JavaScript:
Interactivité avec le langage JavaScript
JavaScript est largement utilisé pour rendre les sites web interactifs. Voici quelques-unes de ses fonctionnalités
interactives :
1.Événements :
JavaScript peut détecter et répondre à divers événements déclenchés par l'utilisateur, tels que les clics de
souris, les saisies au clavier et les actions de navigation.
// Ajout d'un gestionnaire d'événement pour un click de Souris
[Link]('monBouton').addEventListener('click', function() { alert('Le bouton a été cliqué !'); });
20
Concepts de base :Interactivité avec le langage JavaScript
Manipulation du DOM :
•Le Document Object Model (DOM) représente la structure d'un document HTML. JavaScript peut
être utilisé pour manipuler dynamiquement le contenu, la structure et le style de la page web.
// Modifier le contenu d'un élément HTML
[Link]('monElement').innerHTML = 'Nouveau contenu’;
// Modifier le style d'un élément HTML
[Link]('monElement').[Link] = 'red’;
// Créer un nouvel élément HTML
var nouveauElement = [Link]('div');
21
Concepts de base :Interactivité avec le langage JavaScript
Validation de formulaire :
•JavaScript peut être utilisé pour valider les données saisies dans les formulaires HTML avant
leur soumission, offrant ainsi une meilleure expérience utilisateur.
// Validation d'un champ de saisie de formulaire
function validerFormulaire() {
var valeurChamp = [Link]('monChamp').value;
if (valeurChamp === ‘’) {
alert('Le champ est vide ! Veuillez saisir une valeur.’);
return false;
}
return true;
}
// Ajout d'un gestionnaire d'événement pour la soumission du formulaire
[Link]('monFormulaire').addEventListener('submit', function(event) {
if (!validerFormulaire()) {
[Link](); // Empêcher la soumission du formulaire si la validation échoue
}
});
22
Front end / Back end :
JavaScript est utilisé à la fois côté client (front end) et côté serveur (back end) dans le développement web :
[Link] end : JavaScript est largement utilisé pour créer des interfaces utilisateur interactives et réactives. Il est
exécuté dans le navigateur web de l'utilisateur et peut modifier dynamiquement le contenu de la page sans recharger
celle-ci.
[Link] end : Avec l'avènement de plates-formes telles que [Link], JavaScript peut également être utilisé pour
développer des applications côté serveur. Il permet aux développeurs de créer des serveurs web, des API et d'autres
applications back end, partageant souvent du code avec le front end pour une meilleure cohérence.
23
Emplacement du Code JavaScript
JavaScript peut être inclus dans une page web de différentes manières, et il peut générer des sorties
visibles ou invisibles pour les utilisateurs. Voici un aperçu des différents emplacements où le code
JavaScript peut être placé et des sorties qu'il peut produire :
1. Dans le code HTML :
A l'aide de balises <script>.
•Il peut être place dans la section <head> ou à la fin du <body>.
2. Fichiers externes :
•Ces fichiers sont inclus dans le code HTML à l'aide de la balise
<script src="chemin/vers/le/[Link]"></script>.
24
Emplacement du Code JavaScript
1. Dans le code HTML :
• <body>/<head>:
25
Emplacement du Code JavaScript
1. Dans le code HTML :
• <body>: • <head>:
26
Emplacement du Code JavaScript
1. Dans le code HTML :
Les trois codes donnent le même résultat .en peut même déclarer la balise <script> avant <!DOCTYPE html>
Et le resultat va être le même
Il est préférable de placer la balise <script> avant la fin de la
balise <body> car avec cette méthode il y a:
• Amélioration de la vitesse de chargement
• Accès rapide aux éléments HTML
27
Emplacement du Code JavaScript
2. Fichiers externes :
28
JavaScript outputs
JavaScript peut produire différents types de sorties, visibles ou invisibles, selon la manière dont il est utilisé :
• Alert("Message d'alerte");
Affiche une boîte de dialogue modale avec un message à l'utilisateur.
alert("Bonjour ! Cliquez sur OK pour continuer.");
29
JavaScript outputs
• [Link]("Message de débogage"):
Affiche un message dans la console du navigateur à des fins de débogage.
var x = 10;
[Link]("La valeur de x est : " + x );
30
JavaScript outputs
• confirm("Voulez-vous
continuer ?"):
Affiche une boîte de dialogue modale avec un message et deux boutons "OK" et "Annuler". Renvoie true si
l'utilisateur clique sur "OK", et false s'il clique sur "Annuler".
var confirmation = confirm("Voulez-vous
continuer ?");
if (confirmation) {
[Link]("L'utilisateur a choisi de continuer.");
} else {
[Link]("L'utilisateur a annulé l'action.");
}
de dialogue modale avec un message et une zone de saisie où l'utilisateur peut entrer des données. Renvoie la valeur saisie par l'utilisateur sous forme de chaîne de caractères, ou null si l'utilisateur cliq
31
JavaScript outputs
• prompt("Entrez votre nom :"):
Affiche une boîte de dialogue modale avec un message et une zone de saisie où l'utilisateur peut entrer des données.
Renvoie la valeur saisie par l'utilisateur sous forme de chaîne de caractères, ou null si l'utilisateur clique sur "Annuler".
var nom = prompt("Entrez votre nom :");
if (nom !== null) {
[Link]("Bonjour, " + nom + " !");
} else {
[Link]("Vous avez annulé.");
}
32
JavaScript outputs
• [Link]("Bonjour !"):
Écrit du contenu directement dans le document HTML à l'emplacement où le script est exécuté. Attention, cette
méthode est rarement utilisée car elle peut écraser le contenu existant de la page.
[Link]("Bonjour !");
33
JavaScript outputs
Programmation avec JavaScript :Variables 34
Stockage de données :
• En JavaScript, les variables sont utilisées pour stocker temporairement des données dans la
mémoire de l'ordinateur.
var name;
nom (identifiant)
Mot clé
de la variable
let name;
Programmation avec JavaScript :Variables 35
Règles de nommage :
• une variable doit être désignée avec un nom unique (dans sa portée) : identifian
• règles similaires à celles de la plupart des langages
-Noms ne peuvent contenir d'espace, d'opérateurs arithmétiques (+ , -, /, *) ou de caractère
de ponctuation (. , ; )
-Noms peuvent contenir des lettres, chiffres, _ ou $
-Noms ne peuvent commencer par un chiffre
-Noms sensibles à la casse (case sensitive) maVariable mavariable
-Noms doivent être différents des mots réservés (par ex. var, if, while, function…).
Programmation avec JavaScript :Variables 36
Déclarations et Affectations:
• JavaScript langage avec typage dynamique
- pas de définition de type à la déclaration d'une variable
- type d'une variable défini qu'au moment de l'exécution
lorsqu'une valeur est affectée à la variable
- possibilité de changer le type d'une variable à l'exécution
- une variable non initialisée a la valeur undefined
• L’affectation d’une valeur à une variable est faite par l’intermédiaire
de l’opérateur ‘=‘
var nom ="ahmed"; Opérateur d’affectation
• possibilité d'effectuer plusieurs déclaration simultanément
- séparées par ,
Programmation avec JavaScript :Variables 37
Déclarations et Affectations: Exemples
Programmation avec JavaScript :Variables 38
Utilisation des variables:
1-Avec prompt(): pour demander de saisir des données
Programmation avec JavaScript :Variables 39
2-Avec Date(): pour afficher la date
Programmation avec JavaScript :Variables 40
Différence entre let , var et const :
• historiquement déclaration par var nomDeVariable ;
• Le mot clé let est apparu avec la nouvelle version du JavaScript ES6
• var est utilisé pour déclarer une variable globale (global scope variable)
• let est utilisé pour déclarer une variable dont la portée est limitée a un bloc
(block scope variable)
• const est utilisé pour déclarer une constante (block scope constant)
Programmation avec JavaScript :Variables 41
Différence entre let , var et const : Comprendre var
La valeur de la variable
‘couleur’ est accessible hors de
la bloc de condition ‘if’ car var
déclare des variables avec un
scope globale.
Programmation avec JavaScript :Variables 42
Différence entre let , var et const : Comprendre let
La valeur de la variable
‘couleur’ n’est pas accessible
hors de la bloc de condition
‘if’ car let déclare
des variables avec un scope
block.
Programmation avec JavaScript :Variables 43
Différence entre let , var et const : Comprendre const
obligation d'initialiser la variable à sa déclaration
une tentative de modification de la constante va provoquer une
erreur d'exécution avec un message explicite sur la console
Programmation avec JavaScript :Types de données 44
En JavaScript, une variable peut prendre les types suivants:
Number Boolean
String Object
Programmation avec JavaScript :Types de données 45
Number:
Valeurs Numériques
pas de séparation entre entiers et flottants (seul type de nombres)
var year=365.25;
Ecriture avec ou sans virgule:
var month=30;
On peut aussi utiliser les notations suivantes:
var b_number=25e3; // 25000
var s_number=25e-3; // 0,0025
var number=10_000; // 10000
Programmation avec JavaScript :Types de données 46
Number: Exemples
Programmation avec JavaScript :Types de données 47
String:
Représente des données textuelles (chaînes de caractères : lettres, nombres, ponctuation,
…)
les chaînes se notent entre "…" ou '….' : "exemple", 'un autre'
var nom='Ahmed';
let nom ="Marie Louise";
let nbHeures = 3;
let s3 = `durée en secondes : ${nbHeures * 60} s`;
${ … } permet d’inclure des variables et
durée en secondes : 180 s expressions dans une chaîne .
Programmation avec JavaScript :Types de données 48
Boolean:
boolean est une valeur qui peut prendre deux valeurs littérales : true (vrai) et false (faux) .
Programmation avec JavaScript :Types de données 49
Objet:
variable ne contient plus une simple valeur mais un référence (adresse) vers un objet complexe
(valeur
non primitive) .
un objet est défini par un ensemble de propriétés (ou attributs) qui peuvent être soit des valeurs
primitives, soit elles même des objets.
variable de type objet
let etudiant= {
nom : 'Ahmadi', la variable stocke la référence
let nom='Ahmed'; prenom:'Ahmed'; (adresse) de l'objet
}
nom Ahmed
nom Ahmadi
variable de type primitif etudiant
prenom Ahmed
la variable stocke la valeur
Programmation avec JavaScript :Tableaux 50
Tableaux (arrays):
Pour créer un tableau vide, on peut utiliser l’une des deux instructions suivantes :
o const tableau = new Array();
o const tableau =[] ;
Pour définir un tableau par ses éléments :
o const tableau1 = [ 3 , 4 , "a" ];
o const tableau2 = new Array( 2 , "D" , 6 ) ;
Pour définir la valeur d’un élément ou changer la valeur d’un élément :
o tableau[0]="Nouveau" ;
Pour trouver la longueur d’un tableau :
o let taille=[Link];
Programmation avec JavaScript :Tableaux 51
Tableaux (arrays): Exemple
Programmation avec JavaScript :Tableaux 52
Fonctions importantes:
push() : Pour ajouter un élément/plusieurs éléments à la fin d’un tableau
pop() : Pour retourner et enlever le dernier élément d’un tableau
sort() : Pour trier les éléments d’un tableau
indexOf() : Pour déterminer l’indice de la première occurrence d’un élément
reverse() : Pour inverser l’ordre des éléments d’un tableau
splice() : Pour supprimer un élément du tableau
slice() : Pour extraire une partie du tableau
Programmation avec JavaScript :Tableaux 53
Fonction push() : Exemple
Programmation avec JavaScript :Tableaux 54
Fonction pop():
var last=[Link](): enlever le dernier élément du tableau
Exemple:
Programmation avec JavaScript :Tableaux 55
Fonction reverse():
[Link](): inverser les élément d’un tableau
Exemple:
Programmation avec JavaScript :Tableaux 56
Fonction sort():
[Link](): Trier les élément d’un tableau
Exemple:
Programmation avec JavaScript :Tableaux 57
Fonction indexOf():
[Link](élément) or [Link](élément,position) : renvoie le
premier indice pour lequel on trouve un élément donné dans un tableau et
renvoie -1 si l’élément cherché n’est pas présent dans le tableau
Exemple:
Programmation avec JavaScript :Tableaux 58
Fonction slice():
[Link](startPosition) or [Link](startPosition,endPosition) : renvoie
une partie d’un tableau définie par un indice de début et un indice de fin (exclus),le
tableau ne sera pas modifié.
Exemple:
Programmation avec JavaScript :Tableaux 59
Fonction splice():
splice(): modifie le contenu d’un tableau en retirant des éléments et/ou en
ajoutant de nouveaux éléments à même le tableau .on peut aussi vider ou
remplacer une partie d’un tableau.
[Link](position,Index_element): pour supprimer un élément
[Link](position,0,element): pour ajouter un élément
Programmation avec JavaScript :Tableaux 60
Fonction splice(): Exemple:
Programmation avec JavaScript :Typeof 61
TYPEOF:
JavaScript est un langage dynamique :
le type d'une variable peut changer au
cours de l'exécution d'un programme.
opérateur typeof permet de
déterminer le type d'une variable.
62
Fin