Scribd
Importer
38 vues91 pages

Introduction à JavaScript et ses Fonctions

Le document présente une introduction à JavaScript, un langage de programmation permettant de dynamiser les pages web avec des fonctionnalités interactives. Il aborde des concepts clés tels que l'intégration de JavaScript dans HTML, la déclaration de variables, les structures conditionnelles et itératives, ainsi que les expressions de fonction. Enfin, il mentionne des objets prédéfinis en JavaScript, notamment les tableaux, et leurs propriétés et méthodes.

Transféré par

ndikderrick
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
38 vues91 pages

Introduction à JavaScript et ses Fonctions

Le document présente une introduction à JavaScript, un langage de programmation permettant de dynamiser les pages web avec des fonctionnalités interactives. Il aborde des concepts clés tels que l'intégration de JavaScript dans HTML, la déclaration de variables, les structures conditionnelles et itératives, ainsi que les expressions de fonction. Enfin, il mentionne des objets prédéfinis en JavaScript, notamment les tableaux, et leurs propriétés et méthodes.

Transféré par

ndikderrick
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd

Institut supérieur d'ingénierie et des affaires

JAVASCRIPT

Pr: Salma Boua


ich
bouaich.salma2
@[Link]
Introduction

Permet de dynamiser intégré aux pages


un site Web HTML.

est un langage
événementiel
(association d’actions interprété par le
aux événements navigateur client 
déclenchés par code PHP (interprété
l’utilisateur (passage de du coté serveur).
souris, clic, saisie clavier,
etc...).
Intérêts de JavaScript ?
• Interactivité côté client : JavaScript permet d'ajouter des fonctionnalités interactives aux pages web,
offrant ainsi une expérience utilisateur plus dynamique.
• Utilisation fluide : JavaScript permet de mettre en place des animations sans l’inconvénient des longs
temps de chargement nécessités par les données multimédia.

• Compatibilité avec les navigateurs populaires : JavaScript est supporté par les principaux navigateurs,
c.-à-d., il ne nécessite pas de plug-in particulier.
• Sécurité : JavaScript est considéré comme un langage sécurisé, car il ne permet pas la lecture ou
l'écriture directe sur le disque client, éliminant ainsi la possibilité de récupérer un virus par ce biais.
• Validation des formulaires: JavaScript rend possible la vérification des informations saisies dans un
formulaire directement sur le navigateur de l'utilisateur.

• Manipulation du DOM : JavaScript permet d’accéder et modifier dynamiquement la structure et le


style des objets contenus dans un document HTML.
Comment intégrer de javascript dans HTML?

Il existe 2 manières pour insérer un code JavaScript dans une page HTML:

JavaScript dans HTML JavaScript à l'extérieur du HTML


<html>
<html>
<head>
<head>
<title>Page
<title>Page HTML</title>
HTML</title>
<script
</head>
src=“[Link]”>
<body>
</script>
<script>
</head>
alert(‘bonjour’);
<body>
</script>
</body>
</body>
</html>
</html>
Entrée et sortie de données avec JS
 En JavaScript, l'entrée et la sortie de données peuvent se faire de différentes manières en fonction
du contexte.
 On présente trois types de boites de messages peuvent être affichés en utilisant Javascript : Alerte,
Confirmation et Invite
• Méthode alert(): Sert à afficher à l’utilisateur des informations simples de type texte. Une fois
que ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte.
• Méthode confirm(): Permet à l’utilisateur de choisir entre les boutons OK et Annuler.
• Méthode prompt(): La méthode prompt() permet à l’utilisateur de taper son propre message
en réponse à la question posée.
 La méthode [Link] permet d ’écrire du code HTML dans la page WEB
 La fonction [Link] est couramment utilisée pour afficher des messages dans la console du
navigateur.
Entrée et sortie de données avec JS

<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script>
alert('bonjour');
[Link] (prompt('quel est votre nom ?','Indiquer votre nom ici'));
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
Fonctions simples
Syntaxe:
function nom_fonction ([param1, …]){
//Corps de la fonction
}

Corps de la fonction :
Déclaration des variables,
Instructions réalisés par la fonction,
Instruction return pour renvoyer une valeur ou un objet (Facultative)
Déclaration de variables
4 façons pour déclarer une variable en JavaScript :

• En utilisant le mot clé var, • Le mot-clé var est utilisé dans


toutes les versions JavaScript de
1995 à 2015.
•• IlLepermet de const
mot clé faire une déclaration
permet de
• En utilisant le mot clé let, de portée fonction
déclarer une variable dont le
• Le •contenu
mot cléestlet
Les mots-clés inchangeable.
permet
let et constde
ont été ajoutés
• En utilisant le mot clé const, déclarer
à JavaScript en 2015:
une variable ECMAScript
dont le 6 ou
ES6. peut changé.
contenu
• Les deux déclarations let et const créent
des variables qui ont une portée bloc
• Elles n'existent que dans le bloc le plus
• Ne rien utiliser. interne qui les entoure.
Déclaration de variables

• Utilisation de l’instruction
[var , let , const , ] variable=valeur;

 Pas de typage (détection automatique par l’interpréteur)


 Nom de variable sensible à la casse.
 Portée :
globale  visibilité dans tout le module
fonction  visibilité dans toute la fonction
bloc  visibilité dans le bloc interne
Portée fonction et portée globale
• Une variable déclarée avec le mot clé var pourra avoir deux portées: globale et fonction.
• La portée d’une variable déclarée par var dépend de l’endroit où elle est déclarée :
• Portée globale: déclarée en dehors de la fonction.
• Portée fonction: déclarée à l’intérieur d’une fonction aura une portée limitée à cette seule
fonction.
Exemple 2
Exemple 1
var nom="Mohamed"; //variable
var nom="Mohamed"; //variable globale
globale function saisir(){
function afficher(){ var nom; //variable locale
[Link]("Votre nom est: nom=prompt("Quel est votre
"+nom); nom:");
} [Link]([Link]);
[Link]("Votre nom est: "+nom); return nom;
}
[Link]("Votre nom est:
Déclaration de variables: portée bloc
 La portée de bloc en JavaScript se réfère à la visibilité d'une variable à l'intérieur d'un bloc
délimité par des accolades { }.

• Avant ES6 (2015), JavaScript n'avait que la portée globale et la portée fonction.

• ES6 a introduit deux nouveaux mots-clés JavaScript importants : let et const.

• Ces deux mots-clés fournissent une portée bloc.

 Les variables déclarées à l'intérieur d'un bloc { } ne sont pas accessibles depuis l'extérieur
du bloc
Déclaration de variables: portée bloc

Variable nom à une portée bloc Variable nom à une portée fonction
function test() { function test() {
if (true) { if (true) {
let nom = "Rachid"; var nom = "Rachid";
} }
[Link](nom); // Rachid
[Link](nom);/*ReferenceError }
:nom is not defined*/
}
Déclaration de variables: portée bloc

La portée bloc signifie que vous pouvez masquer des variables dans une fonction :

function test() {
let nb = 5;
if (···) {
let nb = 10; // Masquer la variable externe
`nb`
[Link](nb); // 10
}
[Link](nb); // 5
}
Déclaration de variables: let vs const

• Une variable déclarée avec let est modifiable :

let mot = "abcd";


mot = "Rachid";
[Link](mot);
// Rachid

• Une variable déclarée avec const est immuable :

const mot = "abcd";


mot = ‘Rachid'; // TypeError
Concaténation des chaines de caractères avec
des expressions

• On peut utiliser l’opérateur + pour faire la


concaténation:
let nom = "Rachid";
let chaine = "Je m’appelle "+
nom;
[Link](chaine);
// Je m’appelle Rachid
• On peut utiliser les littéraux de gabarits
(template literal)
let nom = "Rachid";
let chaine = `Je m’appelle $
{nom}`;
[Link](chaine);
// Je m’appelle Rachid
Structures conditionnelles

La structure: if…else…

<script>
let age=prompt("quel est votre age");
if (age>=18){
alert("vous etes Majeur...");
}else{
alert("vous etes Mineur...");
}
</script>
Structures conditionnelles

Opérateur Ternaire: condition ? exprSiTrue : exprSiFalse

<script>

let age=prompt("quel est votre age");

age >= 18? alert("vous etes majeur"):alert("vous etes


mineur");

</script>
Structures conditionnelles
La structure: switch

<script>
var jour = "lundi";
switch (jour) {
case "lundi":
[Link]("C'est le début de la semaine.");
break;
case "vendredi":
[Link]("C'est bientôt le week-end !");
break;
default:
[Link]("C'est un jour de la semaine.");
}
</script>
Structures de contrôle
La boucle conditionnelle : While
while(condition) { ... instructions ... }
<script>

let nb=prompt("Donnez un nombre");


let somme=0, i=0;
while(i<=nb){
somme+=i;
i++;
}
alert(`la somme des nombres entre 0 est ${nb} est $
{somme}`);
</script>
Structures itératives (boucles)
La boucle: for
for(initialisation ; condition ; opération ) { ... instructions ... }

<script>

let nb=prompt("Donnez un nombre");


let somme=0;
for(let i=1;i<=nb;i++){
somme+=i;
}
alert("La somme des nombres entre 0 est "+ nb +" est
"+somme);

</script>
Expressions de Fonction
En JavaScript, une expression de fonction est une façon de déclarer une fonction en tant qu'expression.
Elles peuvent être anonymes, nommées ou fléchées, et sont souvent utilisées dans le contexte de
l'affectation d'une variable ou de la transmission d'un argument à une autre fonction.

 Fonction Anonyme
<script>
// Expression de fonction anonyme
var addition = function(a, b) {
return a + b;
};
// Utilisation de la fonction
var resultat = addition(3, 5);
[Link](resultat); // Affiche 8

</script>
Expressions de Fonction

 Fonction Anonyme Auto-Exécutante

<script>
// Expression de fonction anonyme auto-exécutante
var resultat = (function(a, b) {
return a + b;
})(3, 5);

[Link](resultat); // Affiche 8 directement sans


assignation à une variable

</script>
Expressions de Fonction

 Fonction Nommée dans une Expression


<script>

// Expression de fonction nommée


var multiplication = function multiplier(a, b) {
return a * b;
};

// Utilisation de la fonction
var produit = multiplication(4, 5);
[Link](produit); // Affiche 20

</script>
Expressions de Fonction

 Fonction Fléchée
La version ECMAScript 6 (ES6) introduit une nouvelle syntaxe pour définir des fonctions nommée par
Les fonctions fléchées.

<script>
// Expression de fonction fléchée
const carre = (x) => {
return x * x;
};
// Utilisation de la fonction
var resultatCarre = carre(4);
[Link](resultatCarre); // Affiche 16

</script>
Expressions de Fonction

 IIFE (Expression de la fonction appelée


automatiquement)
Englober la définition
de la fonction (()=>{ //Corps de la fonction }

)(); C'est une fonction fléchée qui ne


prend pas de paramètres.

Appeler immédiatement la fonction, créant


ainsi une IIFE. Cela signifie que le code à
l'intérieur de la fonction sera exécuté dès que
le script est chargé.
Expressions de Fonction

Transmission d'un argument à une autre fonction


On peut utiliser IIFE avec une fonction fléchée pour transmettre un argument à
une<script>
autre fonction.
// Fonction principale
function fonctionPrincipale() {
var donnee = "Donnée à transmettre";
// IIFE avec une fonction fléchée pour transmettre l'argument à une autre
fonction
(() => {
fonctionReceptrice(donnee);
})();
}
// Fonction qui reçoit l'argument
function fonctionReceptrice(arg) {
[Link]("La fonction receptrice a reçu :", arg);
}
</script>
Expressions de Fonction et la portée

const nom_fonction=([param1,…])=>{
//Corps de la fonction
}

• const permet d’empêcher la redéfinition de la fonction une deuxième fois puisqu’ils


sont de type bloc.
• Si on a une seule instruction dans une fonction, on peut ne pas utiliser le mot clé
return ni d’accolades { }.

const add = (x, y) => x + y;


[Link](add(1, 2)); // 3
//On essaie de changer la fonction
add = (x, y) => x - y; // Uncaught TypeError: Assignment to constant
variable.
Exercice

• Écrivez une fonction nommé qui prend un nombre en argument et retourne


"Pair" si le nombre est pair, sinon "Impair".
• Refaites l’exercice en utilisant une fonction anonyme auto-exécutante et
une fonction fléchée.
Exercice

Convertissez les fonctions suivantes en fonctions fléchées :

function ajouter(a, b) {
return a + b;
}

function carre(x) {
return x * x;
}

function estPair(nombre) {
return nombre % 2 === 0;
}
Javascript
Objets prédéfinis & propres
Objets prédéfinis
 En JavaScript, il existe plusieurs objets prédéfinis qui sont intégrés dans le
langage et qui fournissent diverses fonctionnalités.
 Array
 Boolean
 Date
 Function
 Image
 Number
 Object
 String
Tableau de données (Objet array)
• Déclaration par l’utilisation de
• var/let.
Le premier élément du tableau est
indexé à 0.
• Il est possible de déclarer un tableau sans dimension fixée: Sa taille
s'adapte en fonction du contenu.
// Avec la syntaxe littérale
let fruits = ['pomme', 'orange', 'banane'];

// Avec le constructeur Array


let fruits = new Array('pomme', 'orange', 'banane');

// création d’un tableau de 10 éléments


let tab = Array(10);

// création d’un tableau avec l’opérateur « new »


let tab = new Array(10);
let tab = new Array();
Tableau de données (Objet array)

 Accès aux éléments d’un tableau: Utilisation des crochets : [ ]

[Link](fruits[0]); // Affiche 'pomme'


[Link](fruits[2]); // Affiche 'banane'

 Modification des éléments du tableau :

fruits[1] = 'kiwi';
[Link](fruits); // Affiche ['pomme', 'kiwi',
'banane']
Tableau de données (Objet array):
Propriétés & méthodes
• La propriété length: renvoie la longueur du tableau (le nombre d'éléments).
[Link]([Link]); // Affiche
3
• La méthode push(): ajoute un ou plusieurs éléments à la fin du tableau.
[Link]('grape');
[Link](fruits); // Affiche [‘pomme', 'kiwi', 'banane',
‘raisin']
• La méthode pop(): retire le dernier élément du tableau.
[Link]();
[Link](fruits); // Affiche [‘pomme', 'kiwi', 'banane']

• La méthode shift(): retire le premier élément du tableau.


[Link]();
[Link](fruits); // Affiche ['kiwi', 'banane']
Tableau de données (Objet array):
Propriétés & méthodes
• La méthode unshift(): ajoute un ou plusieurs éléments au début du tableau.
[Link]('poire');
[Link](fruits); // Affiche ['poire','kiwi', 'banane']

• La méthode indexOf(): renvoie l'index du premier élément correspondant trouvé dans le tableau,
sinon -1.
[Link]([Link]('banane')); // Affiche 2

• La méthode splice() peut être utilisée pour ajouter ou supprimer des éléments à partir d'une
position spécifiée.
[Link](0, 2); // Supprime 2 éléments à partir de
l'index 0
[Link](fruits); // Affiche ['banane']
[Link](1, 0, 'orange'); // Ajoute 'orange' à l'index 1
[Link](fruits); // Affiche ['banane', 'orange']
Tableau de données (Objet
array):Utilisation de tableaux
• Parcourir un tableau
// Parcourir un tableau sans connaître le nombre d'éléments
let tableau= new Array(1, "a", 9) ;
for (let i=0; i<[Link]; i++)
[Link]("tableau[" + i + "] = "+tableau[i]);

• Parcourir un tableau sans connaitre le nombre d’éléments


let tableau= new Array(1, "a", 9) ;
tableau[200] = 12 ;
for (let i in tableau)
[Link]("tableau[" + i + "] = "+tableau[i]);
• Parcourir un tableau sans connaitre le nombre d’éléments avec ES6
let tableau = new Array(1, "a", 9) ;
[Link]((data,index)=>
{[Link]("tab["+index+"]="+data);
});
Tableau de données (Objet array):Tableaux
associatifs
• L’indice est une chaîne de caractères

let tableau=new Array();


tableau["nom"] ="Ben ali";
tableau["prenom"] ="Mohamed";
tableau["age"] =25;
tableau["adresse"] ="Fes";
...

...
alert("Votre nom est: "+tab["nom"]);
...

La propriété length de l’objet Array() pour ce genre de tableau ne fonctionne pas.


Tableau de données (Objet array): Autres
méthodes

• La méthode concat(): est utilisée pour concaténer deux tableaux ou plus, créant ainsi un nouveau
tableau qui contient les éléments des tableaux d'origine.

let tableau1 = [1, 2, 3];


let tableau2 = [4, 5, 6];
let nouveauTableau = [Link](tableau2);
[Link](nouveauTableau); // Affiche [1, 2, 3, 4, 5,
6]

• La méthode join(): crée une chaîne de caractères en concaténant tous les éléments d'un tableau,
en les séparant par une virgule ou un autre séparateur spécifié.
let fruits = ['pomme', 'orange', 'banane'];
let chaineFruits = [Link](', ');
[Link](chaineFruits); // Affiche "pomme, orange, banane"
Tableau de données (Objet array): Autres
méthodes
• La méthode slice(): retourne une section du tableau en spécifiant les indices de début et de fin.
let nombres = [1, 2, 3, 4, 5];
let sousTableau = [Link](1, 4);
// La tranche va du premier index (1) jusqu'au deuxième index (4, non
inclus)
[Link](sousTableau); // Affiche [2, 3, 4]
• La méthode sort(): est utilisée pour trier les éléments d'un tableau.
let fruits = ['orange', 'pomme', 'banane'];
[Link]();
[Link](fruits); // Affiche ["banane", "orange", "pomme"]

• La méthode reverse(): inverse l'ordre des éléments d'un tableau.

let nombres = [1, 2, 3, 4, 5];


[Link]();
[Link](nombres); // Affiche [5, 4, 3, 2, 1]
Objet string

 L'objet String en JavaScript représente une séquence de caractères.

 L'objet String permet de manipuler les chaînes de caractères.

 L'objet String fournit diverses méthodes pour effectuer des opérations sur ces chaînes.

Création d'une chaîne de caractères :

let maChaine = "Bonjour, monde!";


Objet string: Propriétés & méthodes

 Opérations sur les chaînes

• La propriété length: retourne la longueur de la chaîne.


[Link]([Link]); // Affiche la longueur de la
chaîne
• La méthode concat(): est utilisée pour concaténer plusieurs chaînes de caractères.
let Chaine = " Comment ça va?";
let resultat = [Link](Chaine);
[Link](resultat); // Affiche "Bonjour, monde! Comment ça va?"

• La méthode split(): divise la chaîne en un tableau de sous-chaînes en fonction du séparateur spécifié.


let mots = [Link](" ");
[Link](mots); // Affiche un tableau ["Bonjour,", "monde!"]
Objet string: Propriétés & méthodes

• La méthode substring(debut, fin): renvoie une sous-chaîne de caractères comprise entre les indices
spécifiés début et fin.
let sousChaine = [Link](0,
7);
// La position fin est non inclus
[Link](sousChaine); // Affiche
"Bonjour"
• La méthode substr(debut, longueur): renvoie une sous-chaîne de caractères, en commençant à l'index
spécifié début et en extrayant un certain nombre de caractères déterminé par la valeur de longueur.
let sousChaine = [Link](0, 8);
[Link](sousChaine); // Affiche "Bonjour,"
Objet string: Propriétés & méthodes

 Opérations sur les caractères

• Les méthodes indexOf(substring) et lastIndexOf(substring): renvoient l'index de la première et de la


dernière occurrence d'une sous-chaîne spécifiée.
[Link]([Link]("monde")); // Affiche l'index de
la première occurrence "9"
[Link]([Link]("o")); // Affiche l'index de
la dernière occurrence de "o" "10"

• Les méthodes toUpperCase() et toLowerCase(): convertissent la chaîne en majuscules ou en


minuscules.
[Link]([Link]()); // Affiche la chaîne en
majuscules "BONJOUR, MONDE!"
[Link]([Link]()); // Affiche la chaîne en
minuscules "bonjour, monde!"
Objet string: Propriétés & méthodes

 Opérations sur les caractères

• La méthode charAt(index): retourne le caractère à la position spécifiée dans la chaîne.


[Link]([Link](0)); // Affiche "B"

• La méthode replace() remplace une sous-chaîne par une autre.

let nouvelleChaine = [Link]("monde", "le monde");


[Link](nouvelleChaine); // Affiche "Bonjour, le monde!"
L'objet Math

 Propriétés :
• E : renvoie la valeur de la constante d'Euler (~2.718);
• LN2 : renvoie le logarithme népérien de 2 (~0.693);
• LN10 : renvoie le logarithme népérien de 10 (~2.302);
• LOG2E : renvoie le logarithme en base 2 de e (~1.442);
• LOG10E : renvoie le logarithme en base 10 de e (~0.434);
• PI : renvoie la valeur du nombre pi (~3.14159);
• SQRT1_2 : renvoie la racine carrée de ½ (~0.707);
• SQRT2 : renvoie la racine carrée de 2 (~1.414);
L'objet Math
 Méthodes :
• abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ),
min( ), sqrt( ) sont les opérations mathématiques habituelles;
• atan2( ) : retourne la valeur radian de l'angle entre l'axe des abscisses
et un point;
• ceil( ) : retourne le plus petit entier supérieur à un nombre;
• floor( ) : retourne le plus grand entier inférieur à un nombre;
• pow( ) : retourne le résultat d'un nombre mis à une certaine puissance;
• random( ) : retourne un nombre aléatoire entre 0 et 1;
• round( ) : arrondi un nombre à l'entier le plus proche.
L'objet Images: Propriétés

• La propriété src: représente l'URL de la source de l'image.


let monImage="URL"; // Ajouter l'URL de la source de
l'image
• La propriété alt contient le texte alternatif de l'image, qui est généralement affiché si l'image ne
peut pas être chargée.

[Link]([Link]); // Affiche le texte alternatif de


l'image
• Les propriétés width et height représentent la largeur et la hauteur de l'image, respectivement.

[Link]([Link]); // Affiche la largeur de


l'image
[Link]([Link]); // Affiche la hauteur de
l'image
L'objet Images: Propriétés

• Les propriétés naturalWidth et naturalHeight: représentent la largeur et la hauteur naturelles de


l'image, sans tenir compte des styles ou des attributs de dimension appliqués.

[Link]([Link]); // Affiche la largeur naturelle de


l'image
[Link]([Link]); // Affiche la hauteur naturelle
de l'image

• La propriété complete: indique si l'image est complètement chargée.

[Link]([Link]); // true si l'image est complètement


chargée, sinon false
L'objet Images: Méthodes

• Le constructeur Image() : pour créer un nouvel objet image

let monImage = new Image();

 Exemple
img = new Image() ;
// Attribution de la source (URL) à l'image pour le préchargement
[Link] = '[Link]’ ;
// Attente du chargement complet de l'image
[Link] = function(){
// Modification de la 13e image de la page Web
[Link][12].src = [Link] ;
}
L'objet Date

• Création d'une instance de Date: let dateActuelle = new Date();

• Création à partir d'une chaîne de date : let dateFromString = new Date("2023-12-01T[Link]")

• Accéder aux composants de la date :

let annee = [Link]();


let mois = [Link]();
let jour = [Link]();

let heure = [Link]();

let minutes = [Link]();

let secondes = [Link]();

let secondes = renvoie le nombre de millisecondes depuis le


1er janvier 1970 [Link].
[Link]();
L'objet Date
• Modification des composants de la date :

[Link](2024);
[Link](5);
[Link](20);

[Link](09);

[Link](55);
[Link](10); let jour = new Date();
alert([Link]());// 2023
let anniversaire= new Date(2023, 11,
25);
alert([Link]());
// 25/12/2023 [Link]
L'objet Function

• L'objet fonction est une fonction constructrice qui permet de créer de nouvelles instances de
fonctions.

• Un objet fonction comprend une chaîne qui contient le code réel de la fonction.

• Bien que cela ne soit pas recommandé, vous pouvez créer un nouvel objet fonction en transmettant
au constructeur Function le nom et le corps de la fonction.

let maFonction = new Function('param1', 'param2', 'return param1 +


param2');
let resultat = maFonction(3, 5);
[Link](resultat); // Affiche 8
Fonctions supérieures

• eval(chaine): est une fonction qui prend une chaîne de caractères et l'évalue comme du code
JavaScript.

[Link](eval("2+2")); //
affiche 4
• isFinite(nombre): est utilisée pour vérifier si une valeur numérique est finie, c'est-à-dire si elle n'est
ni Infinity ni -Infinity. Elle renvoie true si la valeur est finie et false sinon.

[Link](isFinite(42)); // true
[Link](isFinite(Infinity)); //
false
[Link](isFinite(-Infinity));
[Link](isFinite("hello")); ////
false
false
[Link](isFinite("42")); // true (converti en
nombre)
Fonctions supérieures
• isNaN(objet) : est une fonction qui vérifie si une valeur est de type NaN (Not-a-Number).

[Link](isNaN(12)); // false
[Link](isNaN("12")); // false
[Link](isNaN("hello")); //
true
• parseFloat(chaine) : est une fonction qui prend une chaîne de caractères représentant un nombre à
virgule flottante et renvoie ce nombre.
[Link]("3.14"+2); // 3.142
[Link](parseFloat("3.14")+2); // 5.14

• parseInt(chaine) : est une fonction qui prend une chaîne de caractères représentant un nombre
entier et renvoie ce nombre.
[Link](parseInt("3.14")
+2); // 5
Objets propres : Déclaration et création
d’objets
• En JavaScript, les objets sont des structures de données clés-valeurs flexibles.

• Les objets peuvent être créés à l'aide de littéraux d'objets {}.

• Les objets peuvent être créés à l'aide de littéraux d’objets du constructeur Object avec new Object().

• les objets créés à partir d'une expression littérale seront des instances d'Object.

const obj= { const obj = new Object();


propriété_1: valeur_1, [Link]été_1=valeur_1;
propriété_2: valeur_2, [Link]été_2=valeur_2,
… …
propriété_n: valeur_n [Link]été_n= valeur_n;
};
Objets propres : Déclaration et création
d’objets
• Les objets peuvent également être créés en utilisant la méthode [Link]().

const Animal = {
type: "Invertébrés", // Valeur par défaut
afficherType : function() { // Une méthode pour afficher le type
Animal
[Link]([Link]);
}
}
let animal1 = [Link](Animal); // On crée un nouveau type
d'animal: animal1
[Link](); // affichera Invertébrés
let animal2 = [Link](Animal); // On crée un nouveau type
d'animal: animal2
animal2["type"]= "poisson"; // ou bien [Link]= "poisson";
[Link](); // affichera poisson
Objets propres : Déclaration et création
d’objets
 Création d’objets propres en utilisant un constructeur par:
• Définition d’une fonction constructrice (un constructeur).
• Utilisation de this pour faire référence à l’objet courant.
• Instanciation des objets à partir du constructeur avec new.

function Etudiant(Le_nom,Le_prenom,Le_CODE){
[Link]=Le_nom;
[Link]=Le_prenom;
[Link]=Le_CODE;
}
let e1=new Etudiant("Ben Ali", "Mohamed", "1298742046");
alert("Votre nom est: "+[Link]);
Objets propres : Déclaration et création
d’objets
 Déclaration de méthodes
• Association de fonctions dans la création de l’objet

function Etudiant(Le_nom,Le_prenom,Le_CODE){
[Link]=Le_nom;
[Link]=Le_prenom;
[Link]=Le_CODE;
[Link]=affiche_Etudiant;
}
function affiche_Etudiant(){
[Link]("Votre nom et prénom est: "+ [Link]+" "
+[Link]+ ",Votre CODE est: "+ [Link] );
}
let e=new Etudiant("Ben Ali", "Mohamed", "1298742046");
[Link]();
Objets propres : Déclaration et création
d’objets
 La méthode constructeur est une méthode spéciale d'une classe pour créer et initialiser une
instance d'objet de cette classe.

class Polygon { class Personne {


constructor() { constructor(nom) {
[Link] = 'Polygon'; [Link] = nom;
} }
} introduire() {
[Link](`Salut, mon nom est $
class Square extends Polygon { {[Link]}`);
constructor() { }
super(); }
} const p = new Personne("Otto");
} [Link](); // Salut, mon nom est Otto

const poly1 = new Polygon();


[Link]([Link]);// "Polygon"
Exercice

 Définir une fonction constructeur « Produit » avec les attributs libelle , catégorie et
prix et une méthode description() pour afficher le détail du produit.

 Définir une fonction constructeur « Commande » qui comporte un attribut tableau


de produits, une méthode ajouter() permettant d’ajouter un produit au tableau et
une méthode affiche() permettant d’afficher le tableau de produits.

 Créer une instance de « Commande » et y ajouter des produits.

 Afficher les produits d’une commande en utilisant la méthode affiche().


Javascript
Programmation
événementielle
Déclenchement d’instructions JavaScript

 La programmation événementielle est centrale dans la création d'expériences utilisateur


dynamiques et interactives.

 JavaScript est souvent qualifié de "langage réactif" en raison de sa capacité à réagir aux
actions de l'utilisateur.

 L'interaction avec l'utilisateur est principalement gérée via des événements qui peuvent être
déclenchés par des actions de l'utilisateur (clics, survols, etc.) ou par d'autres parties du
code.
Déclenchement d’instructions JavaScript

 Événements JavaScript
• blur : Déclenché lorsque le focus est enlevé d'un objet. Par exemple, lorsque l'utilisateur quitte un
champ de formulaire.
• focus : Déclenché lorsque le focus est donné à un objet. Cela se produit généralement lorsque
l'utilisateur clique sur un champ de formulaire ou un autre élément interactif.

• change : Déclenché lorsque la valeur d'un champ de formulaire a été modifiée par l'utilisateur. Cela
peut s'appliquer à des champs de texte, des menus déroulants, etc.

• mouseover : Déclenché lorsque la souris est déplacée sur un objet. Utile pour créer des effets visuels
lorsque la souris survole un élément.

• click : Déclenché lorsqu'un clic de souris est effectué sur un objet. Très couramment utilisé pour
capturer les actions de l'utilisateur, comme cliquer sur un bouton.
Déclenchement d’instructions JavaScript

 Événements JavaScript
• select : Déclenché lorsqu'un champ de formulaire est sélectionné, généralement par tabulation.

• submit : Déclenché lorsqu'un formulaire est soumis. Vous pouvez utiliser cet événement pour valider
les données du formulaire ou effectuer d'autres actions lors de la soumission.

• load : Déclenché lorsque la page est complètement chargée par le navigateur. Souvent utilisé pour
effectuer des initialisations ou des actions spécifiques une fois que la page est prête.

• unload : Déclenché lorsque l'utilisateur quitte la page. Il offre l'opportunité d'effectuer des opérations
de nettoyage ou d'enregistrer des données avant que l'utilisateur ne quitte définitivement la page.
Déclenchement d’instructions JavaScript

 Il est possible de déclencher l'exécution de fonctions en réponse à des événements détectables.

 Les événements sont reconnaissables par leur nom précédé de "on", tels que:

onBlur, onChange, onClick, onFocus, onLoad, onMouseover, onSelect, onSubmit,


onUnload.

 L'association d'un événement à une action peut être réalisée dans le code HTML, de manière
similaire à la déclaration d'une propriété, par exp:

<nom_élément attributi = propriétéi événementj = "actionj" >

<button
onClick="envoyer()">Envoyer</button>
Déclenchement d’instructions JavaScript
<html>
<head>
<title>Exemples de déclenchements</title>
<script>
function saluer() {
alert("Bonjour tout le monde");
}
</script>
</head>
<body onLoad="saluer()">
<h1 onMouseover="saluer()">Survoler le pointeur pour exécuter
l’événement</h1>
<form>
<input type="button" name="bouton" value="salut"
onClick="saluer()">
</form>
<h1>Exécution sur protocole javascript:</h1>
<a href="javascript:saluer()">pour saluer</a>
</body>
Changer l’aspect du formulaire

Ecrire une page HTML contenant un formulaire (deux zones


de texte et le bouton envoyer). La bordure de la zone du
texte est changée en vert s’elle est sélectionnée, sinon, elle
devient en gris.
Changer l’aspect du formulaire

<head>
<body> <script>
<form> function saluer() {
<input type="text" value="" name="texte1" alert("Bonjour tout le
onBlur="unchanger(this)" monde");
onFocus="changer(this)"/> }
let changer=function(texte){
<input type="text" value="" name="texte2" [Link]="4px solid green";
onBlur="unchanger(this)" onFocus }
="changer(this)"/> let unchanger=function(texte){
<input type="submit"/> [Link]="4px solid
</form> gray";
}
</body>
</script>
</head>
Contrôle du formulaire

Ecrire une page HTML contenant un formulaire (zone de texte


et le bouton envoyer). Un message d’erreur est affiché si la
zone de texte est vide au moment de la soumission.
Contrôle du formulaire

<body>
<form onSubmit="return verifier()">
<input type="text"
name="texte"/>
<input type="submit" />
</form>
</body>
<script>
let verifier=function(){
if
([Link][0].elements["texte"].value==""){
alert("zone vide");
return false;
}
}
</script>
DOM
Document Object Model
DOM = Document Object Model

 Le DOM (Document Object Model) en JavaScript est une interface de programmation qui
représente la structure d'un document HTML sous forme d’arbre d’objets.
 Le DOM permet aux développeurs d'interagir dynamiquement avec le contenu d'une page
web en utilisant JavaScript.

 Chaque élément HTML est représenté comme un objet dans le DOM.

 Le DOM est l'adresse par laquelle vous pouvez localiser un objet de la page HTML

 DOM permet également de réagir aux événements déclenchés par les utilisateurs, tels que
les clics de souris ou les touches de clavier
DOM = Document Object Model

DOM représente la structure hiérarchique d'une


page web sous forme d'un arbre. Chaque
élément du document, tel que les balises HTML,
les attributs, le texte, les commentaires, etc., est
représenté par un nœud dans cet arbre.

 Chaque balise HTML devient un nœud dans


l'arbre.

 L'arbre représente les relations parent-enfant


entre les éléments. Un élément peut être le
parent d'un autre s'il englobe ce dernier dans
le code HTML.
Utilisation du DOM

A l’aide de Javascript :

• On peut sélectionner un élément (<p> par exemple), et modifier sa couleur (DOM document
+ DOM element).

• On peut sélectionner un élément et lui assigner un événement (DOM document + DOM


events).

• On peut sélectionner les attributs ("title" par exemple) et changer leur contenu (je remplace
title="image2" par title="beau tigre") (DOM document + DOM attribute).
DOM « document »
• L'objet document est la racine de la structure hiérarchique et fournit des méthodes et des
propriétés permettant de sélectionner les éléments d'une page web.
[Link]() ; // par son ID
[Link]() ; // par son attribut « name
»
[Link]() ; // par son nom de balise
HTML
[Link]() ; // par son nom de la classe

<input type="search" class="c1" name="rechercher" id="rechercher"/>

let
zone1=[Link]("rechercher");
let
zone2=[Link]("rechercher");
let
zone3=[Link]("input");
DOM « document »
• Deux autres méthodes basées sur les selecteurs CSS:

 querySelectorAll(selector): retourne tous les éléments correspondant au selector css.

 querySelector(selector): retourne uniquement le premier élément trouvé.

<input type="text" class="c1" name="text" id="text"/>


<input type="search" class=" c1" name="recherche" id="rechercher"/>

let zone1=[Link](".c1")[1];
//retourne le deuxième élément qui a la classe «
c1 ».

let zone2=[Link](".c1");
//retourne le premier élément qui a la classe «
c1 ».

let zone3=[Link]("#text");
//retourne l’élément qui a un id « text ».
DOM « element » +DOM « attribute »
• DOM « element »: Lorsque vous sélectionnez un élément du DOM, que ce soit par son ID, sa
classe, ou tout autre sélecteur, vous obtenez une référence à cet élément en tant qu'objet
element, qui permet d'effectuer diverses actions sur les éléments sélectionnés.

<input type="search" name="recherche" id="rechercher"/>

let zone1=[Link]("rechercher"); // selectionne la zone de


recherche
zone1 est une référence à un objet de type élément du DOM. Plus précisément, c'est une référence à
l'élément qui a l'ID "rechercher" sur la page.

 Cet objet zone1 possède des propriétés et des méthodes qui permettent de manipuler cet élément
particulier.
 Vous pouvez utiliser cette référence pour accéder et modifier le contenu, les styles, les classes, les
attributs, etc., de cet élément sur la page.
DOM « element » +DOM « attribute »

[Link]="red"; //change la couleur du texte


[Link]('color','red'); //changer une propriété

• DOM « attribute »: permet de manipuler les attributs des éléments HTML sélectionnés.

var attribut=[Link]("type");
// obtenir la valeur de l'attribut "type" et renvoie
« search »

[Link]("placeholder", " Texte à chercher ");


// ajouter l’attribut « placeholder »

[Link]("placeholder");
// supprimer l’attribut « placeholder »
DOM « events »

• DOM « events »: permet de réagir et de faire des actions en réponse à des événements sur
une page web. Les événements peuvent être déclenchés par différentes actions de
l'utilisateur, comme un clic de souris, une pression de touche, un survol de la souris, etc.

<input type="search" placeholder="Texte à chercher" name="recherche"


id="c"/>

<script> <script>
let
let
zone=[Link]("c");
zone=[Link]("c");
[Link]=vider;
[Link]=function(){
function vider(){
[Link]=""; [Link]="";
} }
</script> </script>
DOM « events »: addEventListener

• La méthode addEventListener est utilisée pour attacher un gestionnaire d'événements à un


objet sur lequel elle est invoquée.

[Link](eventType,
listenerFunction)
 objet : l’objet ciblé (window, document ou un élément de la page).

 eventType : une chaîne de caractères désignant le type d’événement:

"click", "load", "change", "mouseover", "keypress" etc.

 listenerFunction : la fonction listener qui sera appelée lorsque l’événement se produit


DOM « events »: addEventListener

click: Un clic de souris. submit: Le formulaire est soumis.


dblclick: Double clic de souris. reset: Le formulaire est réinitialisé.
mousedown: Bouton de la souris enfoncé. load: La page ou les ressources ont été complètement
chargées.
mouseup: Bouton de la souris relâché.
unload: La page est en cours de déchargement (fermeture
mousemove: La souris est déplacée.
de la fenêtre ou de l'onglet).
mouseover: La souris survole un élément.
resize: La fenêtre du navigateur est redimensionnée.
mouseout: La souris quitte un élément.
scroll: Le contenu de la page est défilé.
keydown: Une touche du clavier est enfoncée.
focus: Un élément obtient le focus.
keyup: Une touche du clavier est relâchée.
blur: Un élément perd le focus.
keypress: Une touche du clavier est enfoncée et relâchée.
change: La valeur d'un élément de formulaire (input,
select, etc.) change.
DOM « events »: addEventListener

• Exemple 1:
[Link]('load',function(){
[Link]('la page est totalement chargée');
});
Exemple 2:
[Link]('DOMContentLoaded',function(){
let img = [Link]("img")[0];
[Link]('mouseover',function(){
[Link]=0.5;
});
[Link]('mouseout',function(){
[Link]('opacity',1);
});
});
DOM « events »: addEventListener

• Dans une fonction de gestionnaire d'événements (listener), la valeur de this est généralement définie
sur l'objet qui a déclenché l'événement.

<button id="monBouton">Cliquez</button>

var monBouton = [Link]('monBouton');

[Link]('click', function() {
[Link](this);
// 'this' fait référence à l'objet qui a déclenché
l'événement, dans ce cas, l'élément bouton
});
DOM « events »: addEventListener

• chaque fois qu'un événement est déclenché, un objet event est créé pour représenter cet
événement. Cet objet event est passé en tant que paramètre à la fonction de gestionnaire
d'événements (listener) associée à cet événement.

• L'objet event possède différentes propriétés qui fournissent des informations sur l'événement,

var monBouton = [Link]('monBouton');

[Link]('click', function(event) {

[Link]('Type d\'événement :', [Link]);


[Link]('Cible de l\'événement :', [Link]);
[Link]('Coordonnées du clic :', [Link],
[Link]);

});
DOM « events »: addEventListener
Exemple
[Link]('DOMContentLoaded',function(){
let box=[Link]('#box');
[Link]('click',function(event){
[Link]('tu as cliqué sur la div');
});
let bt=[Link]('button');
[Link]('click',function(event){
[Link]();
if ([Link]=='BUTTON'){
[Link]('tu as cliqué sur le bouton');
}
});
});
Modifier le DOM

 Deux Solutions pour modifier le DOM:

• InnerHTML: La propriété innerHTML permet d'accéder ou de définir le contenu HTML


d'un élément.

• DOM « pur » : Manipuler le DOM de manière « pure » signifie travailler directement


avec les nœuds du DOM sans passer par innerHTML. Cela implique généralement la
création, la modification et la suppression de nœuds.
Modifier le DOM: innerHTML

 Identifier un élément HTML


<div id="un_id"></div>

 Accéder à un élément
e = [Link]("un_id");

 Construire une chaîne contenant du HTML

s = "Voici <b>un texte</b>";


 Modifier le contenu de l’élément
[Link] = s;
 Interprétation « automatique » par le navigateur du nouveau contenu pour modifier le
document.
Modifier le DOM: innerHTML
 Identifier un élément HTML
<div id="un_id"></div>
div
 Accéder à un élément id="un_id
e = [Link]("un_id"); "
 Créer un nœud de type « texte » Voic
b
i
t1 = [Link]('Voici ');
t2 = [Link]('un un
texte'); texte
 Créer un nouveau nœud de type « balise »
b = [Link]('b');
 Construire des liens de parenté
[Link](t1);
[Link](b);
[Link](t2);
Exercice

• Ecrire une page HTML qui contient un script qui vérifie lors de la
soumission du formulaire, si le champ n’est pas vide, sinon, un
message d’erreur est affiché.
1. Utiliser innerHTML pour insérer le message dans la balise span, en gras avec
une couleur rouge.
2. Utiliser une modification manuelle sur le DOM.
Solution: HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="[Link]
rel="stylesheet">
<title>Document</title>
</head>
<body>
<br><br>
<div class="container">
<form>
<div id="message" class="alert alert-danger" role="alert">
Veuillez remplir tous les champs!
</div>
<input type="text" name="nom" class="form-control" id="firstname"/>
<input type="text" name="prenom" class="form-control" id="lastname"/>
<input type="button" class="btn btn-outline-primary" value="S'inscrire">
</form>
</div>
</body>
Solution : script

<script> else{
text1[1].setAttribute("class","form-control is-
valid");
[Link]("DOMContentLoaded",functio }
n(){ [Link]("display","block");
if (text1[0].getAttribute("class")=="form-control
let message=[Link]("message"); is-invalid" ||
[Link]="none" text1[1].getAttribute("class")=="form-control is-
let invalid"){
[Link]("class","alert alert-
btn=[Link]("input[type=button]"); danger");
[Link]("click",function(){ [Link]="<b>Veuillez remplir tous
let les champs!</b>";
}else{
text1=[Link]("input[type=text]"); [Link]("class","alert alert-
if (text1[0].value==""){ info");
text1[0].setAttribute("class","form-control is- [Link]="<b>Données envoyées avec
succès</b>";
invalid"); }
}else{ })
text1[0].setAttribute("class","form-control is- })
</script>
valid");
}
if (text1[1].value==""){

Vous aimerez peut-être aussi