Scribd
Importer
2K vues68 pages

JavaScript COURS

Transféré par

Asmae Sabri
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
2K vues68 pages

JavaScript COURS

Transféré par

Asmae Sabri
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/ 68

Technologie Web

Pr. Oumaima STITINI


2024/2025
Chapitre 3: JavaScript
Objectifs
● Se familiariser avec la syntaxe JavaScript pour acquérir une
l'interactivité avec les pages HTML.
● Comprendre et manipuler le DOM pour dynamiser les pages
web en temps réel.
● Utiliser les fonctions et événements JavaScript pour créer des
interactions et des comportements réactifs.
● Développer des compétences en débogage et en optimisation
du code afin de garantir des performances efficaces et une
expérience utilisateur fluide.

3
Introduction à JavaScript
Pourquoi JavaScript ?
● Langage de programmation structurée qui concourt à
enrichir le HTML.
● L’objectif principal du JavaScript:
○ Introduire de l'interactivité avec les pages HTML.
○ Introduire de petits programmes, appelés “Script”, dans
les pages HTML.
● JavaScript est intégré complètement dans le code HTML.
● JavaScript contient des gestionnaires d'événement.

5
Écriture et exécution du code JavaScript

Entre les balises


1 <Script></Script> dans
la section head ou body.

Ecriture du code
Entre les balises
JavaScript 2 <Script></Script> dans
un fichier externe.

Associé à une balise


3 HTML qui gère un
événement.

6
Écriture et exécution du code JavaScript
Choix 1: Entre les balises <Script></Script> dans la section d'entête ou dans le corps de la page.

<head>
<"tle>Titre de la page</"tle>
<script type="text/javascript" >
func"on afficherMessage() {
Choix 1 alert("Bonjour, bienvenue sur ma page !");
}
</script>
Remarque </head>

● Dans la section <head> , le code JS n'est pas exécuté tout de suite.


● Dans la section <body>, le code est immédiatement exécuté en même temps que
le code HTML est interprété. 7
Écriture et exécution du code JavaScript
Choix 2: Entre les balises <Script></Script> dans un fichier externe.

<head>
<"tle>Titre de la page</"tle>
<script type="text/javascript" src="essai.js"
Choix 2
>
</script>
</head>
Remarque

● Faire appel à l'élément script qui se trouve dans un fichier externe “essai.js”. Dans
ce cas, l'élément script précise à l'aide de l'attribut src l'emplacement du fichier
JavaScript.
8
Écriture et exécution du code JavaScript
Choix 3: Associé à une balise HTML qui gère un événement.

<body>
<h1> Exemple avec onClick </h1>
Choix 3 <button onClick="alert('Bouton
cliqué !')">Cliquez-moi</button>
</body>

Remarque

● Associer le code JS à une balise HTML qui gère un événement onClick.

9
Les Variables et Types de
Données
La déclaration des variables

● Une variable permet de désigner un emplacement mémoire


et possède:
○ un identificateur ou nom.
○ une valeur ou contenu « optionnel ».
○ un type indiquant comment le contenu doit être
interprété.

11
La déclaration des variables
● La déclaration des variables peut se faire de deux façons:
○ Soit de façon explicite, en faisant précéder la variable du
mot clé var qui permet d’indiquer de façon rigoureuse qu'il
s'agit d'une variable.
○ Soit de façon implicite, en laissant le navigateur determiner
qu'il s'agit d'une déclaration de variable.
● Le type d’une variable n’est déterminé que lors de l'affectation.
● Pour identifier le type de la variable, la fonction
typeof(Nom_du_var) retourne le type d’une variable.

12
La déclaration des variables
● La déclaration de variables en JS se fait avec trois mots-clés:
● La portée d'une variable déclarée avec var est la fonction
Var dans laquelle elle est déclarée , ou globale si elle est
déclarée en dehors d'une fonction . Elle n'a pas de portée
de bloc.

let ● let a une portée de bloc, ce qui signifie qu'elle est limitée
au bloc de code dans lequel elle est déclarée.

● const Comme let, const a également une portée de bloc.


const
13
La déclaration des variables
● En JavaScript, il existe plusieurs types de données de base qui
permettent de stocker et manipuler des informations.
Chaine de caractère let nom = "Alice";
(String)

let entier = 42;


Nombres (Number) let décimale = 3.14;
let négatif = -10;

let estVrai = true;


Booléens (Boolean)
let estFaux = false;

14
La déclaration des variables
● En JavaScript, il existe plusieurs types de données de base qui
permettent de stocker et manipuler des informations.

Tableaux (Array) let fruits = ['Pomme', 'Banane', 'Orange'];

let personne = {
nom: 'Alice',
Objets (Object) age: 30,
profession: 'Développeuse'
};

15
Conversion des types
● Javascript gère la conversion des types d’une façon
transparente (implicite). Parfois il est nécessaire de faire la
conversion d’une façon explicite.
● On distingue les fonctions de conversions suivantes:

parseInt Conversion d’une chaîne en entier dans une base


désignée (10, 2, 8,16...).
parseFloat
Conversion d’une variable en nombre décimal.

toString Conversion d’une variable en une chaîne de


caractères . 16
Les opérateurs
Les opérateurs

Opérateurs
1 Arithmétique

Les opérateurs
Opérateurs de
2 comparaison

3 Opérateurs Logique

18
Les opérateurs

4 Opérateurs d’affectation

Les opérateurs
Opérateurs
5 d'incrémentation

Opérateurs
6 de concaténation
ou d’assignation

19
Les opérateurs arithmétiques

20
Les opérateurs de comparaison
● Le résultat renvoyé par une opération de comparaison est une
valeur booléenne.

21
Les opérateurs logiques

22
Les opérateurs d’affectation

23
Les opérateurs d'incrémentation

24
Les opérateurs de concaténation ou
d’assignation

● L'opérateur '+' lorsqu'il est utilisé avec des chaînes de


caractères permet de les concaténer, c'est-à-dire de joindre
bout-à-bout les deux chaînes de caractères.

25
Les structures de contrôles
Structures de contrôle

1 Les conditions

Structure de contrôle
2 Les boucles

3 La gestion des erreurs.

27
Les structures de contrôle conditionnelles
● On appelle structure de contrôle les instructions qui
permettent de tester si une condition est vraie ou non, ce
qui permet notamment de donner de l'interactivité aux
scripts.
Remarque:

● Il est à noter que les instructions «if» peuvent être imbriquées.


● La condition doit être entre des parenthèses.
● Il est possible de définir plusieurs conditions à remplir avec les
opérateurs ET et OU (&& et ||).
28
Les structures de contrôle conditionnelles

29
Les structures de contrôle conditionnelles
● La condition doit être toujours entourée de ( )
● La séquence 1 est exécutée si la condition est vraie.
● La séquence 2 (optionnelle) est exécutée si la condition est
fausse.
● Les { } ne sont pas obligatoires qu'en cas d'instructions
multiples. if(condition){
Séquence 1
}
else{
Séquence 2
} 30
Les structures de contrôle conditionnelles
● L'instruction switch évalue une expression et, selon le
résultat obtenu et le cas associe, exécute les instructions
correspondantes. switch(expression){
case valeur1: Instructions à
exécuter lorsque le résultat de l'expression
correspond à valeur1
break;
default: instructions à exécuter
lorsqu'aucune des valeurs // ne correspond
}

31
Les structures de contrôle itérative

for (valeur initiale; condition; poursuite)

{ séquence d'instructions }

● Une valeur ou expression initiale portant sur une variable


entière appelée compteur.
● Une condition: tant qu'elle est vraie, la répétition est
poursuivie.
● une expression de poursuite qui consiste en la mise à jour
du compteur. 32
Les fonctions
Les fonctions
Déclaration des fonctions
● On appelle fonction un sous-programme qui permet
d'effectuer un ensemble d'instructions par simple appel de la
fonction dans le corps du programme principal.
● Une fonction en javascript est déclarée comme suit:
function nameFunc(argument1, argument2, ...):
function addition(a, b) {
return a + b;
}

34
Les fonctions
● Le couple de parenthèses contenant des arguments servent
à fournir des informations à la fonction lors de son
exécution.
● { liste d’instructions } contenant le code que la fonction
devra exécuter à chaque appel.
● Une fonction peut retourner ou non un résultat, pour
retourner un résultat on utilise l’instruction return.
function nameFunc(argument1, argument2, ...){
liste d’instructions
return …..;
}
35
DOM( Document Object Model )
DOM

37
Document Object Model

1 Sélection d'éléments

DOM
Manipulation du
2 contenu et des
attributs d'éléments

3 Modification du style
via JavaScript

38
DOM
● En HTML chaque balise est considérée comme un noeud et
peut posséder des attributs.
○ <a href=‘test.html’> Page d’accueil </a>
● En présence de plusieurs nœuds du même type, je peux
attribuer un identifiant unique pour y accéder après:

<div id=‘par1’> Ceci est le paragraphe 1 </div>


<div id=‘par2’> Ceci est le paragraphe 2 </div>
<div id=‘par3’> Ceci est le paragraphe 3 </div>
39
DOM
A partir de document on peut accéder aux éléments à l’aide des
méthodes:
● getElementById(‘valeur_id’): accéder à un élément via son Id

document.getElementById(‘par1’);

● getElementsByTagName(‘nom_element’): accéder à tous les


éléments.
○ retourne un tableau contenant tous les éléments de type
div
document.getElementsByTagName(‘div’)
40
DOM
A partir de document on peut accéder aux éléments à l’aide des
méthodes:
● getElementsByClassName(‘nom_classe’): accéder à tous les
éléments sur la base de l’attribut class.

document.getElementById(‘par1’);

41
DOM
● Pour accéder au contenu de l'élément il faut utiliser la
méthode innerHTML ou la méthode textContent
document.getElementById(‘par1’).innerHTML;
document.getElementById(‘par1’).textContent();

● Pour modifier le contenu de l'élément il faut utiliser la


méthode innerHTML
document.getElementById(‘par1’).innerHTML=‘bienvenue’;
42
DOM
● Pour modifier la valeur d’un attribut:
document.querySelector(‘a’).href=‘http://www.ens.com;

● Pour modifier la valeur d’un attribut class:

document.querySelector(‘.para’).className=‘class1’;

● Pour modifier le css:

document.getElementById(‘p’).style. color=’blue’;
43
Gestion des événements
Gestion des événements
● Un événement est une action de l’utilisateur prise en compte
par le navigateur.

Clic droit
Touche enfoncée
Position de la souris

● Les événements sont des actions de l'utilisateur, qui vont


pouvoir donner lieu à une interactivité. L’événement par
excellence est le clic de souris, car c'est le seul que le HTML
gère.
45
Gestion des événements
● Grâce au JavaScript il est possible d'associer des fonctions,
des méthodes à des événements tels que le passage de la
souris au- dessus d'une zone, le changement d'une valeur.

● Les gestionnaires d'événements sont associés à des objets, et


leur code s'insère dans la balise de ceux-ci.

● Chaque événement ne peut pas être associé à n'importe quel


objet. Ainsi par exemple, l'événement OnChange ne peut pas
s'appliquer à un lien hypertexte.
46
Gestion des événements
● Le gestionnaire d'événements permet d’associer une action à
un événement sur un objet ou un élément de la page.
onEvenement="Action_Javascript_ou_Fonction();
"
● Pour associer un événement à un élément:

<img src='une_image.jpg '


onclick='nom_de_lafonction(parametre1,parametre
2)' />
47
Gestion des événements
● Pour associer un événement à un élément et si on a plusieurs
fonctions:

<img src='une_image.jpg' onclick='fonction1() ;


fonction2() ; fonction3()' />

48
Méthode 1:
Gestion des événements DOM-0

● Pour associer un événement à un élément après le chargement


de la page:
○ Via une fonction
document.getElementById('mon_element').onclick=nom_de_l
a_fonction;

○ Via une fonction anonyme


document.getElementById('mon_element').onclick=function(
"un_parametre")
49
Méthode 2:
Gestion des événements DOM-2

● Pour associer un événement à un élément après le chargement


de la page:
○ Via addEventListener Il est possible d’ajouter plusieurs
fonctions à un événement.

document.getElementById('mon_element').addEventListener(
"click", nom_de_la_fonction],true]);

● Il est possible de retirer un événement en utilisant


removeEventListener():
document.getElementById('mon_element').removeEventListe
ner("click", nom_de_la_fonction ], true]); 50
Gestion des événements

51
Gestion des événements

52
Tableaux et objets
Déclaration et utilisation de tableaux
● Un tableau, en JavaScript, est une variable pouvant contenir
plusieurs données indépendantes, indexées par un numéro,
appelé indice.
● L'indice d'un tableau est ainsi l'élément permettant d'accéder
aux données qui y sont stockées.

54
Déclaration et utilisation de tableaux
● Remarque: Le premier élément d'un tableau porte toujours
l'indice 0.
● Dans un tableau à n éléments, le nième élément porte ainsi
l'indice n-1.
● Le langage JavaScript propose l'objet Array, comportant de
nombreuses méthodes permettant de manipuler les tableaux,
c'est- à-dire d'insérer, supprimer, ou extraire des éléments dans
le tableau et également de trier les éléments du tableau.

55
Création de tableaux
● Le langage JavaScript fournit plusieurs façons de créer un
tableau:

56
Accès aux données
● L'accès aux éléments du tableau se fait en écrivant le nom du
tableau suivi de crochets contenant l'indice de l'élément.

57
Accès aux données
● L'accès aux éléments du tableau se fait en écrivant le nom du
tableau suivi de crochets contenant l'indice de l'élément.

58
Les boîtes de dialogue
Les boîtes de dialogue
● Une boîte de dialogue est une fenêtre qui s'affiche au
premier plan suite à un événement, et qui permet:
○ Soit d'avertir l'utilisateur.
○ Soit le confronter à un choix.
○ Soit lui demander de compléter un champ pour
récupérer une information.
● JavaScript en propose trois différentes méthodes:
○ alert().
○ prompt().
○ confirm().
● Ce sont des méthodes de l'objet window. 60
Les boîtes de dialogue: La méthode alert
● La méthode alert() permet d'afficher dans une boîte toute
simple composée d'une fenêtre et d'un bouton (OK), le texte
qu'on lui fournit en paramètre.
● Dès que cette boîte est affichée, l'utilisateur n'a d'autre
alternative que de cliquer sur le bouton OK.
● Le paramètre unique de cette méthode est une chaîne de
caractère.
● On peut donc lui fournir:
○ Directement cette chaîne de caractères entre guillemets.
○ Lui fournir une variable dont il affichera le contenu.
○ Mêler les deux en concaténant les chaînes grâce à l'opérateur +.
61
Les boîtes de dialogue: La méthode alert
● alert(nom_de_la_variable);
● alert('Chaîne de caractères');
● alert('Chaîne de caractères' + nom_de_la_variable);

alert('Message à afficher');

62
La méthode confirm()
● La méthode confirm() est similaire à la méthode alert(), si ce
n'est qu'elle permet un choix entre "OK" et "Annuler".
● Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la
valeur true. Elle renvoie false dans le cas contraire.

● Elle admet comme alert() un seul paramètre: une chaîne de


caractères.

confirm('Chaîne de caractères');

63
La méthode prompt()
● La méthode prompt est un peu plus évoluée que les deux
précédentes puisqu'elle fournit un moyen simple de récupérer
une information provenant de l'utilisateur, on parle alors de
boîte d'invite.
● La méthode prompt() requiert deux arguments:
○ le texte d'invite
○ la chaîne de caractères par défaut dans le champ de saisie.

prompt('Posez ici votre question','chaîne par défaut');


64
Introduction aux classes (ES6) :
La méthode prompt()
● Concepts à couvrir:
○ Création de classes et de constructeurs.
○ Méthodes de classes.
○ Héritage et superclasses.

66
La classe
● C’est une représentation abstraite d’un ensemble d'éléments
ayant des attributs (propriétés) et méthodes (fonctions)
communs.

67
Méthode 1 via la classe Object
En Javascript tout est évalué comme un objet, même si c’est une
valeur que vous avez affectée à une variable.
1. Créer la variable: var E1 = new Object();

2. Affecter/Remplir les attributs, les attributs seront


automatiquement ajoutés. E1.nom=‘CHAKIB’;

3. Utiliser les attributs


document.write(E1.nom);

NB: L’ajout de méthodes se fait à l’aide d’une propriété qui recevra comme valeur une fonction anonyme.
68

Vous aimerez peut-être aussi