Support JS

AMEKSA Mohammed
emsi.ameksa@gmail.com
Introduction au JavaScript
Les types des données et les variables
Les opérations et les instructions
Les fonctions
Les objets JavaScript
La gestion des évènements
Les objets standards du navigateur {DOM – DHTML}
JavaScript est l'un des 3 langages
que tous les développeurs
web doivent apprendre :
1. HTML pour définir le contenu des
pages Web
2. CSS pour spécifier la mise en page
des pages Web
3. JavaScript pour programmer le
HTML CSS JS
comportement des pages Web
▪ Exemple
2
▪ Le JavaScript est un langage de programmation
créé en 1995.
▪ Le JavaScript va nous permettre de créer des pages
interactives et « vivantes » à l’aide de scripts.
▪ Un script, c’est tout simplement une suite
d’instructions qui vont être interprétées par un
programme.
▪ Le JavaScript est un langage de programmation dit
« client-side »: Tout comme le HTML, le JavaScript
est généralement exécuté par le navigateur de
l'internaute.
▪ Javascript est un langage de scripts incorporé aux
balises Html, qui permet d'améliorer la
présentation et l'interactivité des pages Web.
▪ Langage de programmation JavaScript JS est

massivement utilisé sur les sites web. Les
navigateurs web sont quant à eux devenus
beaucoup plus efficaces pour le traduire.
▪ En bref , parmi les avantages de JavaScript :
✓ gain de temps,
✓ fluidité et ergonomie
✓ prise en compte de l’expérience utilisateur,
✓ compatible avec tous les supports
3
numériques
Au niveau technique, JS nous permettent de:
▪ Modifier Le contenu HTML:
▪ Modifier les valeurs des attributs HTML:
La valeur de l'attribut
src='images/boat.png'
au début Cette valeur
est changeable en
fonction du bouton
cliqué par l'utilisateur.
4
▪ Modifier les styles HTML (CSS)
Si l'utilisateur clique sur

le bouton 'changer la
taille du font', la taille
du texte sera modifiée.
▪ Masquer ou afficher les éléments HTML
La 2ème paragraphe
sera masquer une fois
l'utilisateur clique sur le
bouton.
5
▪ Afficher les éléments HTML
Inspirez-vous du dernier paragraphe, et se souvenir de
la propriété css pour afficher un élément HTML.
Copiez et complétez le code suivant:
▪ JavaScript et Java sont des langages

complètement différents
▪ Java a été développé par Sun.
▪ JavaScript a été développe par Netscape
en 1995.
▪ Java est compilé (applets), Javascript est
interprété (scripts)
▪ Java permet de créer des applications
qui sont exécutées sur une machine
tandis que le code JavaScript est
exécuté uniquement sur un navigateur.
▪ Ne peut pas lire/écrire dans les fichiers
▪ ne peut pas exécuter d’autres
programmes.
6
▪ Le code JavaScript peut être inséré entre <script> et
</script>
▪ JavaScript dans <head> ou <body> ?
Les scripts peuvent être placés dans <body>, ou dans
<head> section d'une page HTML, ou dans les deux.
Placer des scripts au bas de l'élément <body>

améliore la vitesse d'affichage, car l'interprétation des
scripts ralentit l'affichage
▪ Il existe deux méthodes d’insertion:

▪ Interne: Consiste à faire appel à l'élément script et à
insérer le code JavaScript dans le même fichier HTML.
= code HTML + Code JS {Appel et Insertion}
▪ Externe: Consiste à écrire le code JavaScript dans un

ou plusieurs fichiers externes portant l’extension « .js ».
code HTML + Code JS {Appel} Code JS {Insertion}

7
▪ Insertion interne:
▪ Le résultats sur le Navigateur
8
▪ Insertion externe:
▪ Le résultats sur le Navigateur
9
▪ innerHTML: Écrire dans un élément HTML
▪ document.write() : Écrire dans la sortie HTML
▪ window.alert() / alert() : Écriture dans une
boîte de dialogue (pop-up)
▪ console.log() : Écriture dans la console du
navigateur
L'utilisation de document.write() après

le chargement d'un document
HTML supprimera tout le HTML existant
La méthode document.write() ne doit

être utilisée qu'à des fins de test.
▪ Une langage de programmation lié à HTML (intégré

aux pages HTML).
▪ Code interprété par le navigateur client  code PHP
(interprété du coté serveur).
▪ JavaScript  Java
▪ deux méthodes d’insertion: Interne et externe (dans
l’entête et/ou dans le corps).
▪ JavaScript peut Modifier le contenu HTML, les valeurs
des attributs HTML, les styles (CSS), et Masquer ou
Afficher les éléments HTML.
▪ Affichage des résultats de la sortie : InnerHTML,
document.write(), window.alert(), et console.log().
10
▪ programme informatique est une liste
d'instructions à exécuter par un
ordinateur.
▪ programme JavaScript est une liste

d'instructions à exécuter par un le
navigateur Web.
▪ En JavaScript, chaque instruction de code doit se

terminer par un point virgule.
▪ Des points-virgules séparent les instructions

exécutables JavaScript.
▪ Les instructions sont exécutées, une par une, dans le

même ordre qu'elles sont écrites.
11
commentaire JS
Un commentaire permet de placer du texte en-dehors du
script : il n’est alors pas interprété.
Deux Syntaxes sont possibles :
une seule ligne:
// commentaire.
Plusieurs lignes:
/* commentaires */.
Dans un langage de programmation, les variables sont

utilisées pour stocker des valeurs de données, (conteneurs).
▪ JavaScript utilise les
mots-clés var, let et
const pour déclarer des
variables.
▪ Chaque nouvelle variable
doit avoir un nom unique
qu’on appelle également
« identifiant ».
▪ Un signe égal est utilisé • Identifiants JavaScript
pour attribuer des valeurs sensibles à la casse.
aux variables. • Un nombre entre
guillemets, sera traité
▪ Les variables JavaScript
comme une chaîne.
peuvent contenir des
• Après la déclaration, la
nombres ainsi du texte.
variable n'a pas de valeur:
▪ Les variables JavaScript (techniquement elle a la
peuvent être de type: valeur undefined).
Entier, Réel, Booléen,
Chaine de caractères 12
Déclaration, de plusieurs variables:
▪ La déclaration et l’affectation ▪ La déclaration dans une instruction, et
dans plusieurs instructions: l’affectation par plusieurs instructions:
▪ Déclaration et affectation par

une seule instruction sur
plusieurs lignes :
▪ Déclaration et affectation dans une seule instruction et une seule ligne :
▪ Les variables définies avec let ne peuvent pas être redéclarées

▪ Les variables déclarées à l'intérieur d'un bloc avec le mot-clé let ou const ne
sont pas accessibles depuis l'extérieur du bloc
Ne peuvent pas être redéclarées ou réaffectées
Déclaration avant utilisation
Ne peuvent pas être redéclarées
13
types
▪ Pour tester le type de la valeur que contient une
variable, on utilise généralement la fonction typeof()
▪ Exemple:
▪ JavaScript a des types dynamiques
▪ JavaScript possède d'autres types: Les tableaux et Les

Objets.
▪ Objet personne
14
arithmétiques
Soient a = 20 et b = 10
Operateur Signe Exemple
Addition + a + b = 30
Soustraction - a - b = 10
Multiplication * a * b = 200
Division / a/b=2
Exponentiation ** a ** b = 10240*10^9
Incrémentation ++ a ++ = 21
Décrémentation -- a-- = 19
Modulo (reste de % a%3=2
la division)
15
affectation
Opérateur Syntaxe Identique à Exemple
= x=y x=y a=2
+= x += y x=x+y a += 5 (a = a + 5 )
-= x -= y x=x-y a -= 4 (a = a – 4 )
*= x *= y x=x*y a *= 3 (a = a * 3 )
/= x /= y x=x/y a /= 3 (a = a / 3 )
%= x %= y x=x%y a %= 2 (a = a % 2 )
**= x **= y x = x ** y a ** = 2 ( a = a ** 2 )
Résultats:
x y z
5 10 -2
7 10 -2
4 10 -2
4 40 -2
4 20 -2
4 0 -2
L’operateur + utilisé pour concaténer des chaînes
16
Comparaison et Logiques
La Comparaison:
Soit la valeur de x = 2
Opérateur Description Exemple
x == 12  false
== égal à x == 2  true
x == ‘2’  true
égale à valeur et x === 2  true
===
égale à type x === ‘2’  false
!= différent de x != 10  true
différent de x !== 2  false
!==
(valeur ou type) x !== ‘2’  true
> supérieur à x>1  true
< inférieur à x<1  false
supérieur ou
>= x >= 2.0  true
égal à
inférieur ou égal
<= x <= 2.0  true
à
Logiques :
Opérateur Description
&& Et logique
|| Ou logique
! Non logique
Les opérateurs de comparaison et logiques sont utilisés

pour tester true ou false.
17
variables et opérations
1. Créez une variable appelée nomPrenom attribuez-lui

votre nom et prénom
2. Créez une variable appelée x, affectez-lui la valeur 50
3. Sur une seule ligne, déclarez trois variables avec les
noms et valeurs suivants :
premier = AMCF
deuxieme = business
age = 26
4. Copier le script suivant dans un fichier html, et afficher
la valeur de x et y dans le console de navigateur:
5. Qu’affiche le script suivant ?
6. La déférence entre ces deux morceaux de code ?
7. Réalisez un script dont vous Multipliez 6 par 5, et alertez

le résultat
8. A votre avis qu’affiche

le script suivant ?
18
opérateur conditionnel
JavaScript contient également un opérateur

conditionnel qui attribue une valeur à une variable en
fonction d'une condition.
Syntaxe:
nomVariable = (condition) ? valeurVraie : valeurFausse
if … else
En JavaScript, nous avons les instructions

conditionnelles suivantes :
if pour spécifier un bloc de code à exécuter,
si une condition spécifiée est vraie
else pour spécifier un bloc de code à exécuter, si la même
condition est fausse
else if pour spécifier une nouvelle condition à tester, si la
première condition est fausse
switch pour spécifier de nombreux blocs de code
alternatifs à exécuter 19
if … else
Exemple :
La valeur de la variable heure
prend l’heure au moment où le
navigateur interprète le script.
La valeur de la variable
salutation change en fonction
de la condition sur l’heure.
switch
L'expression de switch est évaluée une fois, la valeur de l'expression
est comparée aux valeurs de chaque cas. S'il y a correspondance, le
bloc de code associé est exécuté, sinon, le bloc de code par défaut
est exécuté.
Exemple :
▪ break; Sort du bloc switch, et
arrêtera l'exécution à l'intérieur
du bloc.
▪ default; Spécifie le code à
exécuter s'il n'y a pas de
correspondance des cas.
▪ Blocs de code communs (ex. le
cas 1 et le cas 2 ).
▪ Comparaison stricte : switch
effectue une comparaison de
type et de valeur.
20
Les boucles peuvent exécuter un bloc de code plusieurs fois.
Plusieurs Boucles sont utilisé en JavaScript:
for : parcourt un bloc de code plusieurs fois;

while : tant qu'une condition spécifiée est vraie, on
parcourt un bloc de code;
do/while : parcourt un bloc de code tant qu'une condition
spécifiée est vraie;
for/in : parcourt les propriétés d'un objet;
for/of : parcourt les valeurs d'un objet itérable;
for
Répéter des instructions un nombre déterminé de fois
Syntaxe:
Initialisation : définit une variable avant le début de la boucle

Condition : définit la condition d'exécution de la boucle
Opération : incrémentation ou décrémentation par exemple
Exemple :
Créez une boucle for pour afficher de 0 à 9 dans

la console de vos navigateurs. Alerter la somme de
2 à 9 et le 9! 21
while
Tant qu’une condition est VRAIE, répéter des instructions
Syntaxe:
Exemple :
Copiez la fonction illustrée dans l'exemple dans un

fichier JS. Ensuite, appelez-la dans un fichier HTML et
décrivez son fonctionnement.
do…while
Répéter des instructions tant qu’une condition est VRAIE

Syntaxe:
Exemple :
Répiter le même process que l’exemple de la

boucle while en utilisant cette fois la boucle
22
do…while
for…in
parcourt les propriétés d'un objet
Syntaxe:
Exemple :
for…of
parcourt les valeurs d'un objet itérable
Syntaxe:
Utilisable pour parcourir un tableau et / ou une chaîne de caractère.
Exemples :
23
Une fonction est un bloc de code conçu pour effectuer une
tâche particulière. Elle s’exécute lorsque "quelque chose"
l'invoque (l'appelle).
• Déclaration:
function nom_de_la_fonction (arguments) {
//code des instructions }
• L’appel :
nom_de_la_fonction();
• Retourner une valeur :

function nom_de_la_fonction (arguments) {
//code des instructions
return resultats; }
1. Une fonction JavaScript est définie avec le mot-

clé function, suivi d'un nom , suivi de
parenthèses ().
2. Les parenthèses peuvent inclure des noms de

paramètres séparés par des virgules.
3. Le code à exécuter, par la fonction, est placé

entre accolades : {}
4. Une fonction peut retourner une valeur avec le

mot clé return. 24
Exemple :
▪ La déclaration
La fonction produit prend en
paramètres num1 et num2,
puis renvoie la multiplication
de ces deux nombres
▪ L’appel
1. Lorsqu'un événement se
produit (quand un
utilisateur clique sur un
bouton)
2. Quand il est invoqué
(appelé) à partir du code
JavaScript
▪ Le Pourquoi?
Permet de définir le code une seule fois et l’utiliser plusieurs
fois.
▪ Exercices :
1. Appelez la fonction suivante, pour qu’elle
soit exécuter si l’utilisateur clique sur un
bottons
2. Créez une fonction dont vous demandez à

l’utilisateur de saisir leurs nom et prénom.
Puis affiche le msg de bienvenu ‘Bienvenu
nom prénom chez nous!’ 25
▪ Variables Locales
La variable message définie dans la fonction

afficheMessage() est accessible juste à l'intérieur de la
fonction.
▪ Variables Globales
La fonction bienvenuMsg() peut accéder à la variable nom

et affiche son contenu.
Ainsi, une fonction a un
accès complet à une
variable globale.
26
▪ Les syntaxes d’une fonction
▪ D’autre syntaxes des fonctions

Function Expression Arrow functions
Ces deux derniers syntaxe la déclaration de la fonction

soit avant l’appelle de la fonction. Sinon, vous aurez
une erreur de référence.
Il est plus prudent de placer les déclarations de

fonctions dans l’en-tête <head>…</head> pour qu‘elles
soient prises en compte par l’interpréteur avant leur
exécution dans le corps de la page <body>…</body>
27
▪ En informatique, un objet possède des variables et des
fonctions, qui permettent de décrire son comportement.
Ces variables sont appelées propriétés et ces fonctions
sont appelées méthodes.
O P bjet = ropriétés + M
éthodes
Propriétés Méthodes
voiture o nom = Ferrari o start()
o poids = 850kg o conduire()
o couleur= noir o freiner()
user
nom = AMCF connexion()
profession = dev deconnexion()
password= test publier()
▪ Syntaxes pour créer un objet vide :
nomObjet
28
▪ Nous pouvons ajouter, supprimer et accéder des
propriétés d’un objet;
• AJOUTER
nomObjet
• age
• nom
• ACCÉDER
• SUPPRIMER
29
▪ Propriétés : Les propriétés d'un objet sont des variables,
représentent ses caractéristiques.
Pour accéder aux propriétés d’un objet :
nomObjet.nomPropriété nomObjet[“nomPropriété”]
▪ Méthodes : Une méthode est une fonction stockée en

tant que propriété.
Pour accéder aux méthodes d’un objet
nomObjet.nomMethode()
▪ Exemple
1. L’objet user a trois propriétés nom,

profession et password.
2. Cet objet a une méthode presentation()
▪ Le mot-clé this est l' objet courant :

Souvent, une méthode dans un objet a besoin d'accéder
aux informations stockées dans un objet. Pour ce faire,
nous utilisons le mot clé "this".
Syntaxe :
this. nomPropriété 30
Résumé :
1. Un objet est une collection de paires clé-valeur.
2. Utilisez la notation par points (.) ou la notation de type
tableau ([ ]) pour accéder à une propriété d'un objet.
3. Le mot clé delete opérateur supprime une propriété
d'un objet.
4. Le in opérateur vérifie si une propriété existe dans un
objet.
5. Le for...in itère sur les propriétés d'un objet.
6. Lorsque les fonctions sont les propriétés d'un objet,
elles sont appelées méthodes.
7. Utilisez le mot clé this intérieur de la méthode pour
accéder aux propriétés de l'objet.
Exemple
31

Support JS

Transféré par

Informations du document

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

Support JS

Transféré par

Droits d'auteur :

Formats disponibles

AMEKSA Mohammed

▪ Langage de programmation JavaScript JS est

▪ Modifier les valeurs des attributs HTML:

Si l'utilisateur clique sur

▪ Masquer ou afficher les éléments HTML

▪ JavaScript et Java sont des langages

Placer des scripts au bas de l'élément <body>

▪ Il existe deux méthodes d’insertion:

= code HTML + Code JS {Appel et Insertion}

▪ Externe: Consiste à écrire le code JavaScript dans un

code HTML + Code JS {Appel} Code JS {Insertion}

▪ Le résultats sur le Navigateur

▪ Le résultats sur le Navigateur

L'utilisation de document.write() après

La méthode document.write() ne doit

▪ Une langage de programmation lié à HTML (intégré

▪ programme JavaScript est une liste

▪ En JavaScript, chaque instruction de code doit se

▪ Des points-virgules séparent les instructions

▪ Les instructions sont exécutées, une par une, dans le

Dans un langage de programmation, les variables sont

▪ Déclaration et affectation par

▪ Déclaration et affectation dans une seule instruction et une seule ligne :

▪ Les variables définies avec let ne peuvent pas être redéclarées

Ne peuvent pas être redéclarées ou réaffectées

Déclaration avant utilisation

Ne peuvent pas être redéclarées

▪ JavaScript a des types dynamiques

▪ JavaScript possède d'autres types: Les tableaux et Les

L’operateur + utilisé pour concaténer des chaînes

Les opérateurs de comparaison et logiques sont utilisés

1. Créez une variable appelée nomPrenom attribuez-lui

5. Qu’affiche le script suivant ?

6. La déférence entre ces deux morceaux de code ?

7. Réalisez un script dont vous Multipliez 6 par 5, et alertez

8. A votre avis qu’affiche

JavaScript contient également un opérateur

En JavaScript, nous avons les instructions

for : parcourt un bloc de code plusieurs fois;

Initialisation : définit une variable avant le début de la boucle

Créez une boucle for pour afficher de 0 à 9 dans

Copiez la fonction illustrée dans l'exemple dans un

Répéter des instructions tant qu’une condition est VRAIE

Répiter le même process que l’exemple de la

Utilisable pour parcourir un tableau et / ou une chaîne de caractère.

• Retourner une valeur :

1. Une fonction JavaScript est définie avec le mot-

2. Les parenthèses peuvent inclure des noms de

3. Le code à exécuter, par la fonction, est placé

4. Une fonction peut retourner une valeur avec le

2. Créez une fonction dont vous demandez à

La variable message définie dans la fonction

La fonction bienvenuMsg() peut accéder à la variable nom

▪ D’autre syntaxes des fonctions

Ces deux derniers syntaxe la déclaration de la fonction

Il est plus prudent de placer les déclarations de

▪ Syntaxes pour créer un objet vide :

▪ Méthodes : Une méthode est une fonction stockée en

1. L’objet user a trois propriétés nom,

▪ Le mot-clé this est l' objet courant :

Vous aimerez peut-être aussi