Université Sidi Mohamed Ben Abdllah
Faculté des sciences Dhar El Mahraz
PROGRAMMATION WEB
JAVASCRIPT
RÉALISÉ PAR: PR. MAHRAZ MED ADNANE
ANNÉE UNIVERSITAIRE:2020/2021
INTRODUCTION
JavaScript permet de dynamiser un site Web.
Code JavaScript intégré aux pages HTML.
Code interprété par le navigateur client code PHP (interprété du coté serveur).
JavaScript est un langage événementiel (association d’actions aux événements
déclenchés par l’utilisateur (passage de souris, clic, saisie clavier, etc...).
INTÉRÊTS DE JAVASCRIPT ?
Supporté par les principaux navigateurs, c.-à-d., il ne nécessite pas de plug-in
particulier.
Accès aux objets contenus dans un document HTML
Possibilité de mettre en place des animations sans l’inconvénient des longs temps
de chargement nécessités par les données multimédia.
Langage relativement sécurisé : il est impossible de lire ou d’écrire sur le disque
client (impossibilité de récupérer un virus par ce biais).
INTÉGRATION 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 HTML</title> <title>Page HTML</title>
</head> <script src=“monScript.js”>
<body> </script>
<script> </head>
alert(‘bonjour’); <body>
</script>
</body> </body>
</html> </html>
ENTRÉE ET SORTIE DE DONNÉES AVEC JAVASCRIPT
3 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 document.write permet d ’écrire du code HTML dans la page WEB
ENTRÉE ET SORTIE DE DONNÉES AVEC JAVASCRIPT
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script>
alert('bonjour');
document.write (prompt('quel est votre nom ?','Indiquer votre nom
ici'));
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
DÉCLARATION DE VARIABLES
Utilisation de l’instruction var variable=valeur;
Pas de typage (détection automatique par l’interpréteur)
Nom de variable sensible à la casse.
Portée :
déclaration en dehors de fonction globale
déclaration dans une fonction locale
7
DÉCLARATION DE VARIABLES
<html>
<head>
<title>Exemple</title>
</head>
<body>
<script>
var nom;
var texte;
nom=prompt("quel est votre nom");
texte="je connais votre nom, c'est "+"<g><i>"+nom+"</i></g>";
document.write(texte);
</script>
</body>
</html>
8
STRUCTURES DE CONTRÔLE
Test conditionnel : if … else …
<html>
<head>
<title>Exemple</title>
</head>
<body>
<script>
var age=prompt("quel est votre age");
if (age>=18){
alert("vous etes Majeur...");
}else{
alert("vous etes Mineur...");
}
</script>
</body> 9
</html>
STRUCTURES DE CONTRÔLE
Boucle itérative :
<html> for(initialisation ; condition ; opération )
<head> { ... instructions ... }
<title>Exemple</title>
</head>
<body>
<script>
var nb=prompt("Donnez un nombre");
var somme=0;
for(var i=1;i<=nb;i++){
somme+=i;
}
alert("La somme des nombres entre 0 est "+ nb +" est "+somme);
</script>
</body> 10
</html>
STRUCTURES DE CONTRÔLE
Boucle conditionnelle
while(condition) { ... instructions ... }
<html>
<head>
<title>Exemple</title>
</head>
<body>
<script>
var nb=prompt("Donnez un nombre");
var somme=0, i=0;
while(i<=nb){
somme+=i; i++;
}
alert("la somme des nombres entre 0 est "+nb+" est "+somme);
</script> 11
</body>
</html>
FONCTIONS
syntaxe :
function nom_fonction ([param1, …]){
//Corps de la fonction
}
Corps de la fonction
Déclaration des variables locales, propres à la fonction,
Instructions réalisés par la fonction,
Instruction return pour renvoyer une valeur ou un objet (Facultative)
12
FONCTIONS ET PORTÉE DES VARIABLES
La portée d’une variable déclarée dépend de l’endroit où elle est déclarée :
VARIABLE GLOBALE: déclarée en dehors de la fonction.
VARIABLE LOCALE: déclarée à l’intérieur d’une fonction aura une portée limitée à cette seule fonction.
<script> <script>
var nom="Mohamed"; //variable globale var nom="Mohamed"; //variable globale
function afficher(){ function saisir(){
alert("Votre nom est: "+nom); var nom; //variable locale
} nom=prompt("Quel est votre nom:");
alert("Votre nom est: "+nom); Window.alert(window.nom);
</script> return nom;
}
alert("Votre nom est: "+saisir());
alert("Votre nom est: "+nom);
</script>
FONCTIONS ANONYMES
syntaxe :
function ([param1, …]){ Var x= function ([param1, …]){
//Corps de la fonction //Corps de la fonction
} }
On peut attribuer cette fonction à une variable.
Pour que cette fonction s’appelle automatiquement:
(function(){//Corps de la fonction})();
Isoler les variables déclarées au sein de la fonction au monde extérieur. 14
JAVASCRIPT
OBJETS PRÉDÉFINIS
OBJETS PRÉDÉFINIS
Plusieurs objets prédéfinis en JavaScript:
Array, Boolean, Date, Function, Image, Number, Object, ou String.
L’opérateur Typeof
L'opérateur typeof renvoie une chaîne de caractères indiquant quel est le type de
l'opérande.
var titre="Les raisins de la colère";
typeof titre; //retourne string
TABLEAU DE DONNÉES (OBJET ARRAY)
Déclaration par l’utilisation de var.
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.
// création implicite d’un tableau
var mon_tableau = ["Ali", ‘Mohamed', "Sarah", 10, 6];
// création d’un tableau de 10 éléments
var mon_tableau = Array(10);
// création d’un tableau avec l’opérateur « new »
var mon_tableau = new Array(10);
var mon_tableau = new Array();
UTILISATION DE TABLEAUX
Accès aux éléments d’un tableau: Utilisation des crochets : [ ]
var tableau=new Array();
tableau[0]=10;
tableau[1]=5;
La proprièté Length
tableau.length
Parcourir un tableau
// Parcourir un tableau sans connaître le nombre
d'éléments
var tableau= new Array(1, "a", 9) ;
tableau[200] = 12 ;
18
for (var i in tableau)
alert("tableau[" + i + "] = "+tableau[i]);
TABLEAUX ASSOCIATIFS
L’indice est une chaîne de caractères
var tab=new Array();
tab["nom"] ="Ben ali";
tab["prenom"] ="Mohamed";
tab["age"] =25;
tab["adresse"] ="Fes";
...
...
alert("Votre nom est: "+tab["nom"]);
...
La propriété Length de l’objet Array() pour ce genre de tableau ne fonctionne pas. 19
TABLEAUX MULTI-DIMENSIONNELS
Array permet de stocker des objets, donc des tableaux.
...
var row0=new Array();
var row1=new Array();
var row2=new Array();
var morpion=new Array();
morpion[0]=row0; morpion[1]=row1; morpion[2]=row2;
...
morpion[1][2]="X"; O X
...
X O X
20
O X
L'OBJET ARRAY
Il y a des méthodes pour manipuler l’objet Array :
concat( ) : permet de concaténer 2 tableaux;
join( ) : converti un tableau en chaîne de caractères;
slice( ) : retourne une section du tableau;
sort( ) : permet le classement des éléments du tableau;
reverse( ) : inverse le classement des éléments du tableau;
L'OBJET STRING
L'objet String permet de manipuler les chaînes de caractères
Propriété :
length : retourne la longueur de la chaîne de caractères;
Méthodes :
1. Opérations sur les chaînes
concat(str) : retourne la chaîne concaténée avec str
split(str) : retourne, sous forme de tableau, les portions de la chaînes délimitées par str
substring(debut,fin) : extrait une sous-chaîne, depuis la position debut (incluse) à fin (excluse).
substr(debut,i) : extrait une sous-chaîne, depuis la position debut, en prenant i caractères
L'OBJET STRING
2. Opérations sur les caractères
charAt(i) : retourne le iième caractère
indexOf(str) : retourne la position de str dans la chaîne (-1 si elle n'est pas trouvée)
lastIndexOf(str) : idem, mais renvoie la position de la dernière occurrence de str
toLowerCase() : retourne la chaîne en minuscules
toUpperCase() : retourne la chaîne en majuscules
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 1 sur racine carrée de 2 (~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
complete // Exemple
img = new Image() ;
width img.src = ‘image.gif' ; // Préchargement
img.onload = function(){
height
// Modification de la 13e image de la page Web
src document.images[12].src = img.src ;
}
Méthodes
constructeur
Image()
Image(largeur, hauteur)
L'OBJET DATE
Méthodes
Constructeur
getDay(), attention de 0 (dimanche) à 6 (samedi)…
var jour = new Date();
getDate() / setDate() alert(jour.getFullYear());
getMonth() / setMonth(), attention de 0 à 11… // 2011
getYear() / setYear() / getFullYear() / setFullYear() var anniversaire= new Date(2015, 10, 25);
alert(anniversaire.toLocaleString());
getHours()/ setHours() // dimanche 25 octobre 2015 00:00
getMinutes() / setMinutes()
getTime() / setTime()
FONCTIONS SUPÉRIEURES
eval(chaine)
isFinite(nombre)
isNaN(objet)
parseFloat(chaine)
parseInt(chaine)
FONCTIONS SUPÉRIEURES
document.write(isFinite(Math.log(0))) ;
false
document.write(isNaN("abcd")) ;
true
document.write("12.34"+2) ;
12.342
document.write(parseFloat("12.34")+2) ;
14.34
JAVASCRIPT
PROGRAMMATION ÉVÉNEMENTIELLE
DÉCLENCHEMENT D’INSTRUCTIONS JAVASCRIPT
Programmation événementielle
JavaScript = langage réactif
L’interaction avec l’utilisateur est gérée via des événements
Événement = tout changement d’état du navigateur
31
DÉCLENCHEMENT D’INSTRUCTIONS JAVASCRIPT
Événements JavaScript
blur : le focus est enlevé d’un objet
focus : le focus est donné à un objet
change : la valeur d’un champ de formulaire à été modifiée par l’utilisateur
mouseover : la souris est déplacée sur un objet
click : un clic souris est déclenché sur un objet
select : un champ de formulaire est sélectionné (par tabulation)
submit : un formulaire est soumis
load : la page est chargée par le navigateur 32
unload : l’utilisateur quitte la page
DÉCLENCHEMENT D’INSTRUCTIONS JAVASCRIPT
Il est possible de baser l’exécution de fonctions sur des événements
Événements détectables
Nom de l’événement précédé de on :
onBlur, onChange, onClick, onFocus, onLoad, onMouseover, onSelect, onSubmit, onUnload
Association événement - action
Dans le code HTML, identique à la déclaration d ’une propriété :
<nom_élément attributi = propriétéi événementj = "actionj" >
<button onClick=" envoyer()">Envoyer<button>
33
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> 34
</html>
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
<form>
<input type="text" value="" name="texte1" onBlur="unchanger(this)" onFocus="changer(this)"/>
<input type="text" value="" name="texte2" onBlur="unchanger(this)" onFocus ="changer(this)"/>
<input type="submit"/>
</form>
<script>
var changer=function(texte){
texte.style.border="2px solid green";
}
var unchanger=function(texte){
texte.style.border="";
}
</script>
CONTRÔLE DU FORMULAIRE
<html>
<head><title>Contrôle</title>
<script>
function verifier() {
if (document.formulaire.txt.value != '')
return confirm(‘Voulez-vous envoyer le formulaire?') ;
Ecrire
return une
false page
; } HTML contenant un formulaire (zone de texte et le
bouton envoyer). Un message d’erreur est affiché si la zone de
</script></head>
texte
<body> est vide au moment de la soumission.
<form name="formulaire" action= "test.php" method= "POST" onSubmit="return verifier();">
<input type="text" name="txt" />
<input type="submit" value="Envoyer" />
</form>
</body>
</html>
CONTRÔLE DU FORMULAIRE
<form onSubmit="return verifier()">
<input type="text" name="texte" value="" name="texte1" />
<input type="submit" />
</form>
<script>
var verifier=function(){
if (document.forms[0].elements["texte"].value==""){
alert("zone vide");
return false;
}
}
</script>
DOM
DOCUMENT OBJECT MODEL
DOM = DOCUMENT OBJECT MODEL
Le modèle d'objet du document (DOM) donne une représentation en mémoire des objets du document.
Un objet est un élément HTML.
Le DOM est l'adresse par laquelle vous pouvez localiser un objet de la page HTML.
Un objet peut être récupéré et exploité par le Javascript (ou un autre langage de programmation).
DOM(DOCUMENT OBJECT MODEL)
Le DOM décrit le chemin partant
de la fenêtre du navigateur pour
descendre jusqu'aux objet de la
page Web. <p>c’est <em>le
seul</em> paragraphe</p>
Le DOM est structuré comme un
arbre est suit de près la structure
hiérarchique du code HTML.
L'arbre contient des nœuds, les
nœuds peuvent avoir des fils, et
tous les nœuds ont un parent
(sauf la racine).
"c’est" "paragraphe"
"le seul"
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 »
Le DOM « document » qui permet de sélectionner un objet au sien d’un document:
document.getElementById() ; // par son ID
document.getElementsByName() ; // par son attribut « name »
document.getElementsByTagName() ; // par son nom de balise HTML
document.getElementsByClassName() ; // par son nom de la classe
<input type="search" class="c1" name="rechercher" id="rechercher"/>
var zone1=document.getElementById("rechercher");
var zone2=document.getElementsByName("rechercher");
var zone3=document.getElementsByTagName("input");
var zone3=document.getElementsByClassName("c1");
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"/>
document.querySelectorAll(". c1")[1]; //retourne le deuxième élément qui a la classe « c1 ».
var zone2=document.querySelector("#text"); //retourne le premier élément qui a un id « text ».
DOM « ELEMENT » +DOM « ATTRIBUTE »
Le DOM « element » permet de faire une action sur les éléments sélectionnés.
Le DOM « attribute» permet de de modifier les attributs des éléments sélectionnés
<input type="search" name="recherche" id="rechercher"/>
var zone1=document.getElementById("rechercher"); // selectionne la zone de recherche
zone1.style.color="red"; //change la couleur du texte
Zone1.style.setProperty('color','red'); //changer une propriété
Var attribut=zone1.getAttribute("type"); // renvoie « search »
zone1.setAttribute("placeholder", " Texte à chercher " ); // ajout l’attribut « placeholder »
zone1.removeAttribute("placeholder"); // supprime l’attribut « placeholder »
DOM « EVENTS »
<input type="search" placeholder="Texte à chercher" name="recherche" id="c"/>
Le DOM « events » permet de faire une action lors d'un événement (exemple au clic de la souris)
<script> <script>
var zone=document.getElementById("c"); var zone=document.getElementById("c");
zone.onfocus=function(){ zone.onfocus=vider;
zone.value=""; function vider(){
} zone.value="";
</script> }
</script>
DOM « EVENTS »: ADDEVENTLISTENER
La méthode addEventListener permet d’abonner à l’objet sur lequel elle est invoquée une fonction pour
l’événement précisé.
objet.addEventListener(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 • Error
• dblclick • load
• mousedown • resize
• mousemove • scroll
• mouseover • unload
• mouseout • blur
• mouseup • change
• keydown • focus
• keypress • reset
• keyup • select
• abort • submit
DOM « EVENTS »: ADDEVENTLISTENER
Exemple 1:
window.addEventListener('load',function(){
console.log('la page est totalement chargée');
});
Exemple 2:
document.addEventListener('DOMContentLoaded',function(){
var img = document.getElementsByTagName("img")[0];
img.addEventListener('mouseover',function(){
img.style.opacity=0.5;
});
img.addEventListener('mouseout',function(){
img.style.setProperty('opacity',1);
});
});
DOM « EVENTS »: ADDEVENTLISTENER (LISTENER FUNCTION)
dans une fonction listener, la variable this est définie et désigne l’objet qui a déclenché l’événement
typiquement l’élément du document.
un objet event est créé pour chaque événement. Cet objet est passé en paramètre lors du
déclenchement de la fonction listener associée. Le type d’objet event varie selon l’événement. Un
objet event possède des propriétés qui informent sur l’événement.
MODIFIER LE DOM
Deux Solutions pour modifier le DOM:
innerHTML
DOM « pur »
MODIFIER LE DOM: INNERHTML
Identifier un élément HTML
<div id="un_id"></div>
Accéder à un élément
e = document.getElementById("un_id");
Construire une chaîne contenant du HTML
s = "Voici <b>un texte</b>";
Modifier le contenu de l’élément
e.innerHTML = s;
Interprétation « automatique » par le navigateur du nouveau contenu pour modifier le document
MODIFIER LE DOM « PUR »
Identifier un élément HTML
<div id="un_id"></div>
div
Accéder à un élément
id="un_id"
e = document.getElementById("un_id");
Créer un nœud de type « texte »
Voic
t1 = document.createTextNode('Voici '); b
i
t2 = document.createTextNode('un texte');
Créer un nouveau nœud de type « balise » un
b = document.createElement('b'); texte
Construire des liens de parenté
e.appendChild(t1);
b.appendChild(t2); e.appendChild(b);
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.
span
CORRECTION
<script>
function verifier(objet){
if (objet.prenom.value==""){
var text1=objet.nom.value;
var sp=document.getElementById("c2");
var text2=objet.prenom.value;
var chaine="<b>Ce champs est obligatoire<b>";
if (text1==""){
sp.innerHTML=chaine;
var sp=document.getElementById("c1");
sp.style.color="red";
var b=document.createElement("b");
}else{
var text=document.createTextNode("Ce champs est obligatoire");
document.getElementById("c2").innerHTML="";}
b.appendChild(text);
if (objet.nom.value=="" || objet.prenom.value=="")return false;
sp.appendChild(b);
return true;
sp.style.color="red";
}
}else{
</script>
document.getElementById("c1").innerHTML="";}
Fin du cours
L’exercice 5 de la série 4 sera déposé
sur la plateforme sous forme
d’une vidéo très bientôt
