Langage de script :
Javascript
M. Ebobissé Yves
[Link]@[Link]
Ressources
• [Link]
• [Link]
• [Link]
EMSI 2018-2019 2
Fonctionnement du Web
• Navigateur : demande de page située à une URL
• Serveur : stocke les fichiers et renvoie la page au navigateur
pour affichage
Get : url de la page
OK : page
EMSI 2018-2019 3
Pré requis
HTML : HyperText markup Language
• Langage de balise permettant de définir la structure de la
page et d’organiser le contenu
• Inclure des images, créer des formulaires, des liens, des
paragraphes
EMSI 2018-2019 4
HTML
HyperText Markup
Language
Structure générale d’un fichier HTML
<html>
<head>
<title>mon premier fichier</title>
</head>
<body>
hello world
</body>
</html>
EMSI 2018-2019 5
Pré requis
HTML : HyperText markup Language
Eléments : images, fichier audio, video, paragraphe, tableau, etc…
Balises :
<p> Contenu</p> : permet de définir un paragraphe
<b>Contenu </b> : mettre en gras
EMSI 2018-2019 6
Pré requis
HTML : HyperText markup Language
attributs : chaque balise possède des attributs
Exemple :
<img src=“lien_fichier” />
<a href=“url_lien” target=“”> contenu </a>: lien
EMSI 2018-2019 7
Langage de
programmation pour le
Server Side :
web
Client Side : exécution sur le serveur.
exécution sur le navigateur Le navigateur interroge le
Toutes les données pour et les serveur qui effectue des
traitements sont déjà chargées traitements et retourne les
sur la page résultats au navigateur
Vérification de formulaires PHP, ASP, JSP, etc..
Javascript
Get : url de la page
OK : page
EMSI 2018-2019 8
Langage de script :
Javascript
Inclusion du code: <script></script>
1. Dans l’élément head de la page html
<head>
<script> alert(‘Bonjour’); 3. Dans l’élément un fichier externe de la
</script> page html
</head> <head>
<script src=‘’[Link]’’> </script>
2. Dans l’élément body de la page html </head>
<body>
<script> alert(‘Bonjour’);
</script>
</body>
EMSI 2018-2019 9
Langage de script :
Javascript
alert(): fonction qui permet d’afficher une boite de dialogue
confirm(): fonction qui permet d’afficher une boite de dialogue avec les
boutons ok et annuler
m=prompt(): afficher une zone de saisie qui récupère du texte dans la
variable
NB : parseInt() et parseFloat() permettent de convertir
Affichage des résultats:
1. À l’aide de la console
[Link](‘message à afficher’);
2. Dans la page html à l’aide de
[Link](‘Message à afficher’);
EMSI 2018-2019 10
Langage de script :
Javascript – Variables & Opérateurs
Toute instructionse termine par ;
commentaires // ou /* */
Variables : commencent par une lettre, var a=100, b=‘100’, c=true;
Sensibilité à la casse var e=null;
Type : number, string, booléen, null, NaN, //faiblement typé
undefined typeof() : retoune le type de la variable
Opérateurs arithmétiques +,-,*,/, +=, -=,/=,*=
Opérateurs de concaténation +
Opérateurs de comparaison <,>,<=,>=, ==, ===
Opérateurs logiques &&, ||, !
EMSI 2018-2019 10
Langage de script :
Javascript – Conditions et boucles
Conditions Boucles
if(condition){ initialisation
//code while(condition_répétition){
} //code
pas
}
if (condition) { do{
//code //code
}else pas
{ }while(condition_repetition);
//code
}
switch(condition){ for(initialisation; condition_rpet;pas){
case val1: ……; break; //code
case val2 : ……; break; }
}
EMSI 2018-2019 12
Langage de script :
Javascript - Fonctions
Fonctions :
<script>
//Définition
function test(a, b) Portée des variables :
Toute variable déclarée dans
{
une fonction n’est valable que
return a+b; dans cette fonction
}
var m=test(1,2);//Appel
</script>
EMSI 2018-2019 13
Langage de script :
Javascript - Fonctions
Il est possible de définir des fonctions anonymes : sans nom
<script>
//Définition
var test=function (a, b)
Pour l’instant affecter la fonction
{ à une variable pour l’exécuter
return a+b;
}; //une affectation
var m=test(1,2);//Appel
</script>
EMSI 2018-2019 14
Langage de script :
Javascript – classes et objets
Classe : une représentation abstraite d’un ensemble
d’éléments ayant des attributs (propriétés) et méthodes (fonctions)
communs
Une instance d’une classe est appelée objet.
Etudiant Par exemple
CNE E1 : Etudiant
Nom 2016/ER1
Prenom Lahcen Pour accéder à un
Etudier() Ahmed attribut/méthode
estenVacance() [Link] ------- 2016/ER1
Etudier()
[Link]()
estenVacance()
EMSI 2018-2019 15
Langage de script :
Javascript – classes et objets
En Javascript tout est évalué comme un objet, même si c’est une valeur que vous
avez affectée à une variable.
Création d’objets : Méthode 1 via la classe object.
a- créer la variable : var E1 = new Object();
b- affecter /remplir les attributs [Link]=‘Ali’;
les attributs seront automatiquement ajoutés
c - utiliser les attributs [Link]([Link]);
NB : L’ajout de méthodes se fait à l’aide d’une propriété
qui recevra comme valeur une fonction anonyme
EMSI 2018-2019 16
Langage de script :
Javascript – classes et objets
Création d’objets : Méthode 1 via la classe object.
var E1= new Object();
[Link]=‘Ali’;
[Link]=‘Ahmed;
[Link]= ‘2012/RET’;
[Link]=function(){
return [Link]+ ’ ’+ [Link]+ ’ ’+[Link];
};
[Link]([Link] ());
EMSI 2018-2019 17
Langage de script :
Javascript – classes et objets
Création d’objets : Méthode 2 - objet littéral.
Un objet littéral est un objet qui contient déjà les valeurs de ses
attributs .
Il reste à définir les propriétés et les méthodes.
var E1 = {
CNE : ‘2012/RET’,
Nom : ‘Ali’,
prenom : ‘Ahmed’,
Une méthode sera mentionnée comme un attribut
infoCNE : function(){ this permet d’accéder à une propriété interne à
return [Link]; l’objet
}
};
[Link]([Link]());
EMSI 2018-2019 18
Langage de script :
Javascript – classes et objets
Création d’objets : Méthode 3 – constructeur/fonction
Il s’agit de définir un constructeur/méthode qui sera utilisé pour
créer un objet et initialiser les valeurs de l’objet.
function Etudiant(numCNE, Nome, Prenome) {
[Link] = numCNE; [Link]=Nome; [Link] = Prenome;
[Link] = function(){
return [Link]+ ’ ’+ [Link]+ ’ ’+[Link];
}
}
var E1=new Etudiant(‘2012/RET’, ‘Ali’, ‘Ahmed’); //Creation objet
[Link]([Link]()); //appel d’une fonction
EMSI 2018-2019 19
Langage de script :
Javascript – classes et objets
Création de classes : Méthode 4 – constructeur/classe
Il s’agit de définir une classe avec ses propriétés et ses fonctions
parmi lesquelles le constructeur.
class Etudiant {
constructor(numCNE, Nome, Prenome) {
[Link] = numCNE;
[Link]=Nome;
[Link] = Prenome;}
info (){
return [Link]+ ’ ’+ [Link]+ ’ ’+[Link];
}
}
var E1=new Etudiant(‘2012/RET’, ‘Ali’, ‘Ahmed’); //Creation objet
[Link]([Link]()); //appel d’une fonction
EMSI 2018-2019 20
Langage de script :
Javascript – Tableaux
Création de tableaux:
1. 2.
var t=[1, 2, 3, 4]; var t=new Array(1, 2, 3, 4);
var liste=[‘Ali’, ’Car’, ’maison’ ]; var liste=new Array(‘Ali’, ’Car’, ’maison’ );
Accès aux champs t[0] , liste[2]
Taille du tableau [Link] => 3
Parcours
1. for (i=0; i<[Link];i++){ }
2. for (i in t){ } la boucle s’arrête à la fin du tableau, i prend la
valeur des indices
EMSI 2018-2019 21
Langage de script :
Javascript – Tableaux
Méthodes spécifiques :
concat(ch2) : concatène 2 tableaux retourne la nouvelle chaine
pop() : supprime le dernier élément
push(val1, val2, etc..) : ajoute à la fin
shift(): retire le premier élément
unshift() : ajoute un élément au début
slice(debut [,fin]) : retourne une portion du tableau
splice(debut , nbr_el,val1, val2, etc..]) : ajoute/remplace les
éléments situés à partir de début
includes(val), reverse()
EMSI 2018-2019 22
Langage de script :
Javascript – Number
Méthodes spécifiques:
isInteger() : vérifie si c’est un entier
toFixed(nbr) : spécifie le nombre de chiffres après la virgule
toString(): transforme en chaîne de caractères
isNaN() : is not a number
EMSI 2018-2019 23
Langage de script :
Javascript – Math
Attributs spécifiques:
PI: valeur de PI
LN2: valeur de log 2
SQRT2 : la racine carrée de 2
Méthodes spécifiques:
abs(), sin(), cos() :
min(val1, val2, ….valn), max(val1, val2, ….valn) : min et max,
floor() : l’entier précédent, ceil() : l’entier suivant
random() : nombre aléatoire entre 0 et 1
EMSI 2018-2019 24
Langage de script :
Javascript – String
Attributs spécifiques:
length: longueur de la chaine
Méthodes spécifiques:
charAt(pos): retourne le caractère de la position
[Link](ch2): concatène la ch1 et ch2 et retourne la chaine concaténée
includes(ch) : vérifie si la chaine1 contient la chaine ch
search(ch) : retourne la position de ch dans la chaine
toUpperCase() : retourne la chaine en majuscules
toLowerCase () : retourne la chaine en minuscules
split(motif) : sépare la chaîne en fonction du motif transmis
EMSI 2018-2019 25
Langage de script :
Javascript – Date
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
Méthodes spécifiques:
getDate(): retourne le jour du mois entre 1-31
getFullYear/Day/Hours/Minutes/Seconds/Milliseconds(): retourne la valeur
demandée
setFullYear/Day/Hours/Minutes/Seconds/Milliseconds(val): modifie un objet Date
now() : retourne le nombre de millisecondes écoulées depuis le 1 Janvier 1970
NB getDay() : retourne le jour de la semaine
EMSI 2018-2019 26
Javascript
DOM - HTML
DOM : Document Object Model
DOM HTML : Considérer tout le document ainsi que les
éléments comme des objets/noeuds auquel je peux
accéder à partir de javascript
EMSI 2018-2019 27
Javascript
DOM - HTML
En HTML chaque balise est considérée comme un noeud et peut posséder
des attributs
<a href=‘[Link]’> Page d’acueil </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 2</div>
EMSI 2018-2019 28
Javascript
DOM - HTML
A partir de Document je peux accéder aux éléments à l’aide des méthodes
getElementById(‘valeur_id’) : accéder à un élément via son Id
Exemple : [Link](‘par1’);
getElementsByTagName(‘nom_element’) : accéder à tous
les éléments
Exemple : [Link](‘div’); retourne un tableau
contenant tous les éléments de type div
getElementsByClassName(‘nom_classe’) : accéder à tous
les éléments sur la base de l’attribut class
EMSI 2018-2019 29
Javascript
DOM - HTML
A partir de Document je peux accéder aux éléments à l’aide des méthode
querySelector(‘’) : accéder au premier élément correspondant
Exemple : [Link](‘div’);
querySelectorAll(‘’) : accéder à tous les éléments
Exemple : [Link](‘div’); retourne un tableau contenant
tous les éléments de type div
Ces deux méthodes se basent sur le sélecteur CSS
EMSI 2018-2019 30
Javascript
DOM - HTML
Pour accéder au contenu de l’élément il faut utiliser
• la méthode innerHTML
Exemple : [Link](‘par1’).innerHTML;
La méthode textContent
Exemple : [Link](‘par1’).textContent();
Pour modifier le contenu de l’élément il faut utiliser
• la méthode innerHTML
Exemple :
[Link](‘par1’).innerHTML=‘bienvenue’;
EMSI 2018-2019 31
Javascript
DOM - HTML
Pour modifier la valeur d’un attribut
[Link](‘a’).href=‘[Link]
Pour modifier la valeur d’un attribut class
[Link](‘.para’).className=‘class1’;
Pour modifier le css
[Link](‘p’).style. color=’blue’;
EMSI 2018-2019 32
Javascript
Gestion des évènements
Un évènement est une action de l’utilisateur prise en compte par le navigateur
Exemple : Clic droit, touche enfoncée, position de la souris, etc…..
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,parametre2)' />
Et si j’ai plusieurs fonctions
<img src='une_image.jpg' onclick='fonction1() ; fonction2() ; fonction3()' />
EMSI 2018-2019 33
Javascript
Gestion des évènements
Pour associer un évènement à un élément après le chargement de la page:
Méthode 1 : DOM-0
A- via une fonction
[Link]('mon_element').onclick=nom_de_la_fonction;
B- Via une fonction anonyme
[Link]('mon_element').onclick=function("un_parametre"){du code du
code...etc}
Méthode 2 : via addEventListener - DOM-2
[Link]('mon_element').addEventListener("click", nom_de_la_fonction], true]);
- Il est possible d’ajouter plusieurs fonctions à un évènement
Il est possible de retirer un évènement en utilisant removeEventListener();
[Link]('mon_element').removeEventListener("click", nom_de_la_fonction ], true]);
EMSI 2018-2019 34
Javascript
Gestion des évènements
Pour associer un évènement à un élément après le chargement de la page:
Méthode 3 : L’objet Event
Cet objet contient les informations liées à un évènement déclenché
Il faut transmettre cet objet lors de l’appel de la fonction.
A- [Link] = function(e) {
// L'argument « e » va récupérer une référence vers l'objet « Event »
alert([Link]); // Ceci affiche le type de l'événement (click, mouseover, etc.)
};
B- [Link]('click', function(e) {
// L'argument « e » va récupérer une référence vers l'objet « Event »
alert([Link]); // Ceci affiche le type de l'événement (click, mouseover, etc.)
});
EMSI 2018-2019 35