Javascript 1

1
Javascript
Présenter par : Encadrer par:
EL FARISSI Oussama MR.EL 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 :
1.Syntaxe :
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".
2.Variables :
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.
3.Fonctions :
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.
4.Structures 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é (script.js) // Déclaration et initialisation d'une variable
function afficherMessage() { var nombre = 42;
console.log("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="script.js"></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);
console.log("Résultat de l'addition :", resultat);
6
Concepts de base :
Structures de contrôle :
// Structure conditionnelle
var age = 20;
If (age >= 18) {
console.log("Vous êtes majeur.");
} else {
console.log("Vous êtes mineur.");
}
// Boucle for
for (var i = 0; i < 5; i++) {
console.log("Itération numéro", i);
}
// Boucle while
var x = 0; while (x < 5) {
console.log("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

<html>
<Body> <Head>
<H1> <Div> <meta> <Title>
My Web DOM Nodes Structure

My Web Example
Demonstration
Site
DOM
9

<body>
<h1> <div> <span> < div>
My Web To Help Understanding

Site the basics
And Forcing
Is for Education
Knowleadge
Purpose
10

11

<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 = document.getElementById("monElement");
• Accéder à des éléments par leur classe :
var elements = document.getElementsByClassName("maClasse");
• Accéder à des éléments par leur balise :
var elements = document.getElementsByTagName("div");

13

2. Manipulation du contenu :
• Modifier le contenu HTML d'un élément
element.innerHTML = "Nouveau contenu";
• Modifier le texte d'un élément :
element.textContent = "Nouveau texte";

14

3. Modification des attributs :
• Modifier la valeur d'un attribut :
element.setAttribute("src", "nouveau.jpg");
• Supprimer un attribut :
element.removeAttribute("class");
15

4. Création et suppression d'éléments :
• Créer un nouvel élément :
var nouveauElement = document.createElement("div");
• Ajouter un élément au DOM :
parentElement.appendChild(nouveauElement);
• Supprimer un élément du DOM :
parentElement.removeChild(elementASupprimer);
16

5. Gestion des classes :
• Ajouter une classe à un élément :
element.classList.add("maClasse");
• Supprimer une classe d'un élément :
element.classList.remove("maClasse");
17

6. Gestion des événements :
• Ajouter un gestionnaire d'événement :
element.addEventListener("click", maFonction);
• Supprimer un gestionnaire d'événement :
element.removeEventListener("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
Il existe plusieurs manipulations du DOM à savoir :

• document.URL:
Cette propriété renvoie l'URL complète de la page web actuelle, comprenant le protocole (par exemple,
"http://" ou "https://"), le nom de domaine, le chemin d'accès et éventuellement les paramètres de
requête.
• document.links:
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

document.getElementById('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

document.getElementById('monElement').innerHTML = 'Nouveau contenu’;
// Modifier le style d'un élément HTML
document.getElementById('monElement').style.color = 'red’;
// Créer un nouvel élément HTML
var nouveauElement = document.createElement('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 = document.getElementById('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

document.getElementById('monFormulaire').addEventListener('submit', function(event) {
if (!validerFormulaire()) {
event.preventDefault(); // 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 :
1.Front 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.
2.Back end : Avec l'avènement de plates-formes telles que Node.js, 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/fichier.js"></script>.
24

• <body>/<head>:
25

• <body>: • <head>:
26

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

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
• console.log("Message de débogage"):
Affiche un message dans la console du navigateur à des fins de débogage.
var x = 10;
console.log("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) {
console.log("L'utilisateur a choisi de continuer.");
} else {
console.log("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) {
console.log("Bonjour, " + nom + " !");
} else {
console.log("Vous avez annulé.");
}
32
JavaScript outputs
• document.write("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.
document.write("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;
 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…).
 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 ,
 Déclarations et Affectations: Exemples

 Utilisation des variables:

1-Avec prompt(): pour demander de saisir des données
2-Avec Date(): pour afficher la date

 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)
 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.
 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.
 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
 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
 Number: Exemples
 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 .
 Boolean:
 boolean est une valeur qui peut prendre deux valeurs littérales : true (vrai) et false (faux) .
 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=tableau1.length;
 Tableaux (arrays): Exemple

 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

 Fonction push() : Exemple

 Fonction pop():
var last=array.pop(): enlever le dernier élément du tableau
Exemple:
 Fonction reverse():
array.reverse(): inverser les élément d’un tableau
Exemple:
 Fonction sort():
array.sort(): Trier les élément d’un tableau
Exemple:
 Fonction indexOf():
array.indexOf(élément) or array.indexOf(é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:
 Fonction slice():
array.slice(startPosition) or array.slice(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:
 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.
array.splice(position,Index_element): pour supprimer un élément
array.splice(position,0,element): pour ajouter un élément

 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

Javascript 1

Transféré par

Droits d'auteur :

Formats disponibles

Javascript 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript 1

Transféré par

Droits d'auteur :

Formats disponibles

1

Concepts de base :Structure d’un DOM

Le DOM (Document Object Model) :

Concepts de base :Structure d’un DOM

<H1> <Div> <meta> <Title>

My Web DOM Nodes Structure

Concepts de base :Structure d’un DOM

<h1> <div> <span> < div>

My Web To Help Understanding

Concepts de base :Structure d’un DOM

Concepts de base :Structure d’un DOM

<h1> <div> <span> < div>

Is for To Help And Forcing

Concepts de base : APIs Spécifiques

1. Accès aux éléments HTML :

• Accéder à un élément par son ID :

var element = document.getElementById("monElement");

• Accéder à des éléments par leur classe :

var elements = document.getElementsByClassName("maClasse");

• Accéder à des éléments par leur balise :

var elements = document.getElementsByTagName("div");

Concepts de base : APIs Spécifiques

• Modifier le contenu HTML d'un élément

element.innerHTML = "Nouveau contenu";

• Modifier le texte d'un élément :

element.textContent = "Nouveau texte";

Concepts de base : APIs Spécifiques

3. Modification des attributs :

• Modifier la valeur d'un attribut :

Concepts de base : APIs Spécifiques

4. Création et suppression d'éléments :

• Créer un nouvel élément :

var nouveauElement = document.createElement("div");

• Ajouter un élément au DOM :

• Supprimer un élément du DOM :

Concepts de base : APIs Spécifiques

5. Gestion des classes :

• Ajouter une classe à un élément :

• Supprimer une classe d'un élément :

Concepts de base : APIs Spécifiques

6. Gestion des événements :

• Ajouter un gestionnaire d'événement :

• Supprimer un gestionnaire d'événement :

Concepts de base : APIs Spécifiques

Il existe plusieurs manipulations du DOM à savoir :

Interactivité avec le langage JavaScript:

Interactivité avec le langage JavaScript

// Ajout d'un gestionnaire d'événement pour un click de Souris

Concepts de base :Interactivité avec le langage JavaScript

// Modifier le contenu d'un élément HTML

Concepts de base :Interactivité avec le langage JavaScript

// Ajout d'un gestionnaire d'événement pour la soumission du formulaire

Front end / Back end :

Emplacement du Code JavaScript

1. Dans le code HTML :

Emplacement du Code JavaScript

Emplacement du Code JavaScript

Emplacement du Code JavaScript

Il est préférable de placer la balise <script> avant la fin de la