JavaScript est un langage de script multiplateforme et orienté objet utilisé pour rendre les pages web interactives, en ajoutant des animations, des boutons cliquables, etc. Il est également utilisé côté serveur via des environnements comme Node.js.

1. Langage JavaScript
Plan:
• age • Notions de base du langage JavaScript
• Programmation événementielle en JavaScript
• Les classes prédéfinies de JavaScript
• Traitements du DOM
• Les expressions régulières
• Gestion des cookies.
• es expressions régulières
• • Gestion des cookies.

2. ● Les navigateurs Web ne comprennent que JavaScript
● Il existe des langages de programmation traduits en
JavaScript et exécutés dans les navigateurs
Introduction au JavaScript

3. Introduction au JavaScript
• 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...).

4. 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).

5. Intégration de JavaScript dans HTML
• JavaScript dans HTML • JavaScript à l'extérieur du HTML
Il existe 2 manières pour insérer un code JavaScript dans une page HTML:

6. 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

7. Entrée et sortie de données avec JavaScript

8. 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
8

9. Déclaration de variables
9

10. Structures de contrôle
Test conditionnel : if … else …
10

11. Structures de contrôle
• Boucle itérative :
for(initialisation ; condition ; opération )
{ ... instructions ... }
11

12. Structures de contrôle
• Boucle conditionnelle
while(condition) { ... instructions ... }
12

13. 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)
13

14. 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.

15. Fonctions anonymes
• syntaxe :
• 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.
15
function ([param1, …]){
//Corps de la fonction
}
Var x= function ([param1, …]){
//Corps de la fonction
}

16. Exercice N°1: TD1
16
1. Ecrire une page HTML faisant apparaitre la table de multiplication
pour un entier saisi par l’utilisateur (utiliser la fonction Prompt de
l’objet window) et présenter le résultat dans un tableau.
1. Modifier la question 1, en faisant saisir le nombre à multiplier et le
nombre de lignes dans des zones de texte.

17. Exercice N°1/Solution: TD1
17
Exercice 1 (table.html)
<script>
function multiplier(){
var nb=document.formulaire.nombre.value;
var nbl=document.formulaire.nombrel.value;
document.writeln('<table border=2 width=200px>
<caption> Table de multiplication de '+nb+'</caption>');
for(var i=1;i<=nbl;i++){
document.writeln('<tr>');
document.writeln('<td>'+ i+'</td> <td> *
</td> <td>'+ nb+ '</td><td>'+nb*i+'</td>');
document.writeln('</tr>'); }
document.writeln('</table');}
</script>
<form name="formulaire" method="POST"
action"">
<label for="nb">Entrer un nombre</label>
<input type="text" id="nb"
name="nombre" /><br/>
<label for="nbl">Entrer le nombre de
lignes</label>
<input type="text" id="nbl"
name="nombrel" /><br/>
<input type="button" value="Valider"
onClick="multiplier()"/>
</form>

18. Tableau de données (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.

19. Utilisation de tableaux
• Accès aux éléments d’un tableau: Utilisation des crochets : [ ]
19
var tableau=new Array();
tableau[0]=10;
tableau[1]=5;
// Parcourir un tableau sans connaître le nombre
d'éléments
var tableau= new Array(1, "a", 9) ;
tableau[200] = 12 ;
for (var i in tableau)
alert("tableau[" + i + "] = "+tableau[i]);
 La proprièté Length
 Parcourir un tableau
tableau.length

20. Tableaux associatifs
L’indice est une chaîne de caractères
20
La propriété Length de l’objet Array() pour ce genre de tableau ne fonctionne pas.

21. Tableaux multi-dimensionnels
21
...
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 X
O
X
O
Array permet de stocker des objets, donc des tableaux.

22. 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
22

23. 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
• unload : l’utilisateur quitte la page
23

24. 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" >
24

25. Déclenchement d’instructions JavaScript
25

26. Changer l’aspect du formulaire

27. 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>

28. Contrôle du formulaire

29. 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>

30. Exercice N°1.1: TD1
30
 La couleur du paragraphe soit changée lorsqu’on clique dessus
 La source de l’image soit modifiée lorsqu’on passe sa souris dessus.
<p id="idParagraphe"
onClick="ChangerCouleurParagraphe()">
Paragraphe qui change de couleur</p>
<img src="images/javascript.png"
id="idImage" onMouseOver="
ModifierImage()">
<script>
// Fonction pour changer la couleur du paragraphe
function ChangerCouleurParagraphe() {
document.getElementById('idParagraphe').style.color="red";}
// Fonction pour changer l'image
function ModifierImage() {
document.getElementById('idImage').src="images/jquery.jpg";
}
</script>
Ecrire une page HTML contenant un paragraphe et une image, ensuite:

31. Exercice N°2: TD1
31
Créer un formulaire permettant de changer la couleur de fond d’un
<div>, ainsi que le style, la taille et la couleur de police du texte
inclut dans le <div>

32. Exercice N°2/Solution: TD1
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Div Style</title>
<style>
#monDiv {
width: 200px;
height: 150px;
border: 2px solid black;
font-size: 12px;
overflow: auto;
} </style> </head>
<body>
<form>
<label>Couleur d'arrière plan : </label>
<input type = "color" id = "apColor"
onchange="backColor(this.value)" /><br>
<label>Couleur de police : </label>
<input type = "color" id = "policeColor" onchange =
"fontColor(this.value)" /><br>
<label>Taille de police : </label>
<input type = "number" value = 12 min = 1 id = "taille"
onchange="taillePolice(this.value)" /><br>
<label>Gras </label>
<input type = "checkbox" id = "gras"
onchange="changeStyle()" /> <br>
<label>Italic </label>
<input type = "checkbox" id = "italic"
onchange="changeStyle()" /> </form>

33. Exercice N°2/Solution(suite): TD1
33
div id = "monDiv">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Culpa, iste numquam magnam ea nam
reprehenderit adipisci alias animi placeat quod ipsum quia fugit
ratione dolor vero mollitia pariatur eligendi laudantium.</div>
<script type = "text/javascript">
var divStyle = document.getElementById("monDiv").style;
function backColor(valeur) {
divStyle.backgroundColor = valeur;
}
function fontColor(valeur){
divStyle.color = valeur;
}
function taillePolice(valeur){
divStyle.fontSize = valeur + "px"; }
function changeStyle(){
var checkGras =
document.getElementById("gras");
var checkItalic =
document.getElementById("italic");
if (checkGras.checked){
divStyle.fontWeight = "bold";
}else
divStyle.fontWeight = "normal";
if (checkItalic.checked)
divStyle.fontStyle = "italic";
else
divStyle.fontStyle = "normal";
}
</script> </body> </html>