Java Script

Université Mohamed Khider-Biskra
Faculté des Sciences Exactes et des Sciences de la Nature et de la Vie

Département d'informatique
Dr. A.Aloui DAW- L2 2022/2023

JavaScript
Dr. A.Aloui DAW- L2 2022/2023 2

JavaScript
 JavaScript est un langage de programmation utilisé en conjonction avec
HTML et CSS pour créer des sites web interactifs et dynamiques.
 Il permet de créer des animations, de valider des formulaires,

d'envoyer des requêtes HTTP, de gérer des événements, etc.
 Il est généralement exécuté côté client (dans le navigateur web) et permet

d'interagir avec l'utilisateur en temps réel.
Dr. A.Aloui DAW- L2 2022/2023 3

JavaScript
 En JavaScript, les programmes sont appelés des scripts et peuvent être
intégrés directement dans une page HTML pour une exécution
automatique lors du chargement de la page.
 les scripts JavaScript sont des fichiers texte brut contenant du code
exécutable directement par les navigateurs web.
 Ils n'ont pas besoin d'être préparés ou compilés avant leur exécution.
Dr. A.Aloui DAW- L2 2022/2023 4

JavaScript
 Les navigateurs web interprètent directement le code JavaScript pour

exécuter les actions spécifiées dans le script.
 C'est ce qui permet une rapidité d'exécution des scripts.
Dr. A.Aloui DAW- L2 2022/2023 5

JavaScript
 JavaScript et Java sont deux langages de programmation distincts, bien

qu'ils partagent certaines similitudes de syntaxe et de conception.
 Bien que JavaScript ait été initialement nommé "LiveScript", son nom a été
changé pour capitaliser sur la popularité croissante de Java à l'époque.
Dr. A.Aloui DAW- L2 2022/2023 6

JavaScript
 Cependant, au fil du temps, JavaScript a évolué pour devenir un langage de
programmation polyvalent utilisé pour développer :
• Des applications web.

• Des applications mobiles et
• Des applications de bureau.
Dr. A.Aloui DAW- L2 2022/2023 7

JavaScript
 Aujourd'hui, JavaScript peut être exécuté non seulement dans les

navigateurs, mais aussi sur les serveurs et sur de nombreux appareils,
grâce aux moteurs JavaScript qui existent sur ces plates-formes
(Node.js).
Dr. A.Aloui DAW- L2 2022/2023 8

JavaScript
Les éditeurs de code
 Parmi les éditeurs de code populaires, on peut citer Visual Studio
Code, Sublime Text, Atom, Notepad++, Vim et Emacs.
Dr. A.Aloui DAW- L2 2022/2023 9

Fondamentaux JavaScript
La balise “script”
 Le code JavaScript peut être inséré directement dans la balise "script" ou

chargé à partir d'un fichier externe à l'aide de l'attribut "src".
<script src="chemin/vers/script.js"> </script>.
 La balise <script> permet d'insérer des programmes JavaScript dans

n'importe quelle partie d'un document HTML.
Dr. A.Aloui DAW- L2 2022/2023 10
<!DOCTYPE HTML>
<html>
Par exemple 26:
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>
Dr. A.Aloui DAW- L2 2022/2023 11
Par exemple 27:
script.js
HTML
<!DOCTYPE html> document.getElementById("id2").innerHTML
<html> = "Bonjour le monde !";
<head>
<title>Exemple</title>
</head>
<body>
<h1 id="id1"> Exemple </h1>

<p id="id2"> </p>  La balise script peut être placée
dans le head ou le body de la page
<script src="script.js"></script> HTML en fonction de l'effet
souhaité.
</body>
</html>
Dr. A.Aloui DAW- L2 2022/2023 12

Scripts externes
1) Il est recommandé de placer la balise script dans le head :
 Si le code JavaScript doit être exécuté avant le chargement de la

page ou si le code est nécessaire pour le chargement correct des
éléments de la page. Cela permet d'assurer que le code est chargé
avant que la page ne soit affichée.
2) Il est recommandé de placer la balise script à la fin du body:
 Si le code JavaScript est utilisé pour modifier dynamiquement les

éléments de la page ou pour répondre aux actions de l'utilisateur.
Cela permet de s'assurer que tous les éléments de la page sont
chargés avant que le code ne soit exécuté.
Dr. A.Aloui DAW- L2 2022/2023 13
Exemple 28: la balise script dans le head
 Supposons que vous vouliez charger une page qui contient des éléments
interactifs et dépendent d'un script externe pour fonctionner correctement.
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<script src="script.js"></script>
</head>
<body>
<h1>Titre de la page</h1>
<p>Ceci est un paragraphe.</p>
<button onclick="maFonction()">Cliquez ici</button>
</body>
</html>
Dr. A.Aloui DAW- L2 2022/2023 14

Exemple 29: la balise script à la fin du body
script.js
HTML var images =
document.getElementById("slideshow").getElementsBy
<!DOCTYPE html> TagName("img");
<html> var currentImageIndex = 0;
<head> var intervalId;
<title>Diaporama d'images</title>
</head> function startSlideshow() {
<body> intervalId = setInterval(function()
<h1>Mon diaporama d'images</h1> {
<div id="slideshow"> images[currentImageIndex].style.display = "none";
<img src="imgGmail.jpg" alt="Image 1"> currentImageIndex = (currentImageIndex + 1) %
<img src="imgGoogle.jpg" alt="Image 2"> images.length;
<img src="imgMaps.jpg" alt="Image 3"> images[currentImageIndex].style.display = "block";
</div> }, 2000);
<script src="diaporama.js"></script> }
</body>
</html> startSlideshow();
Dr. A.Aloui DAW- L2 2022/2023 15

Scripts externes
 Si src est défini, le contenu de la balise script est ignoré.
<script>
// code JavaScript ici
<script src="file.js">
</script>
alert(1); // le contenu est
ignoré.
</script>
<script src="file.js">
</script>
Dr. A.Aloui DAW- L2 2022/2023 16

Exercices :
Q1: Créez une page qui affiche un message “I'm JavaScript!”.
Q2: Prendre la solution de Q1 précédente Afficher une alerte. Modifiez-

le en extrayant le contenu du script dans un fichier externe alert.js,
résidant dans le même dossier.
Dr. A.Aloui DAW- L2 2022/2023 17

Structure du code
 La structure du code en JavaScript est généralement organisée en blocs
logiques de code appelés fonctions.
 Les fonctions peuvent contenir du code qui effectue des actions

spécifiques et renvoie des valeurs.
function addition(a, b) {
return a + b;
}
var result = addition(2, 3);
Dr. A.Aloui DAW- L2 2022/2023 18

Les variables
 En JavaScript, les variables sont utilisées pour stocker des valeurs.

Elles peuvent être déclarées avec les mots clés var, let ou const.
 Le type d’une variable dépend de la valeur stockée dans cette variable.
Dr. A.Aloui DAW- L2 2022/2023 19

Les variables
<script>
// Declaration des variables
var v0="Ali";
Exemple 30:
v0="Omar";
var v1=100;
var v2= true;
var v3=5, v4=48;
var person={name:"Amine", age:"20"};

document.write(typeof v0);
document.write("<br>");
document.write(v4);
document.write(typeof person);
document.write(person.name);
document.write(v0 + " ; " + v3);
/*
Constant
*/
const p=3.14;
document.write(p);
</script>
Dr. A.Aloui DAW- L2 2022/2023 20

Les variables
Var & Let

<script>
Exemple 31: let x = 1;

var y = 2;
if (true)
{
let x = 3; // Nouvelle variable x, limitée au bloc
interne
var y = 4; // La variable y existante est réaffectée
document.write("In bloc IF x =",x); // Affiche 3

document.write("In bloc IF y =",y); // Affiche 4
}
document.write(x); // Affiche 1
document.write(y); // Affiche 4
</script>
Dr. A.Aloui DAW- L2 2022/2023 21

Les types de données
 Il est important de noter que les types de données en JavaScript sont
dynamiques, cela signifie qu'une variable peut changer de type en
cours d'exécution du programme.
 Nombre (Number) : les valeurs numériques
 Chaîne de caractères (String)
 Booléen (Boolean)
 Tableau (Array)
 Objet (Object)
Dr. A.Aloui DAW- L2 2022/2023 22

Interaction: alert, prompt, confirm
 En JavaScript, il existe trois fonctions principales pour l'interaction avec

l'utilisateur : alert, prompt et confirm.
 alert affiche un message à l'utilisateur et attend qu'il appuie sur le

bouton "OK".
 prompt affiche un message à l'utilisateur et attend qu'il saisisse

une réponse dans une boîte de dialogue.
 confirm affiche un message à l'utilisateur et lui demande de

confirmer ou d'annuler en cliquant sur les boutons "OK" ou
"Annuler".
Dr. A.Aloui DAW- L2 2022/2023 23
Interaction: alert, prompt, confirm
<script>
let name = prompt("Quel

est votre nom ?");
Exemple 32: alert(`Bienvenue, ${name}
!`);
let confirmation =
confirm("Voulez-vous continuer ?");
if (confirmation) {
// Code à exécuter si
l'utilisateur veut continuer
} else {
// Code à exécuter si
l'utilisateur ne veut pas continuer
</script>
Dr. A.Aloui DAW- L2 2022/2023 24
Boucles : while et for
 Les trois types de boucles disponibles en JavaScript sont :
La boucle while
La boucle do….while
La boucle for
Dr. A.Aloui DAW- L2 2022/2023 25

Les événements de navigateur
 En JavaScript, les événements de navigateur sont des actions qui se

produisent dans le navigateur, telles que :
 le chargement d'une page,
 le clic d'un bouton,

 la soumission d'un formulaire,
 la fermeture d'une fenêtre, etc.
 Ces événements permet de rendre les pages web interactives et réactives

aux actions des utilisateurs.
Dr. A.Aloui DAW- L2 2022/2023 26
Exemple 33: <!DOCTYPE html>
Exemple 34:
<html>
<html> <head>
<head> <title>Exemple d'événement de clic de bouton</title>
<title> Page onclick</title>
</head>
</head> <body>
<button id="myButton">Cliquez-moi !</button>
<body> <script>
<h1
// Sélectionner le bouton
onclick="window.id1.innerHTML='Hello';"> Bonjour</h1> let button =
document.querySelector('#myButton');
<h1 id="id1"> </h1>
<br> <br> // Function
<button function handleClick()

onclick="window.txt.value='ALGO';"> OK </button>
{
<br> <br>
alert('Vous avez cliqué sur le bouton
<input id="txt" value="DAW" /> !');
<br> <br> }
// Attacher un gestionnaire d'événements au clic

<br> <br> sur le bouton
button.addEventListener('click', handleClick);
</script>
</body> </body>
Dr. A.Aloui DAW- L2 </html>
2022/2023 27
</html>
Événements de souris:
 Les événements de souris sont des événements qui sont déclenchés par
les interactions de l'utilisateur avec la souris, tels que : le clic, le
déplacement, le survol, le relâchement de bouton, etc.
 En JavaScript, nous pouvons utiliser addEventListener() pour ajouter

des actions (gestionnaires d'événements) de souris à nos éléments
HTML :
Dr. A.Aloui DAW- L2 2022/2023 28

 click : se déclenche lorsqu'un bouton de la souris est cliqué.
 mouseover : se déclenche lorsqu'un curseur de souris entre dans un élément.
 mouseout : se déclenche lorsqu'un curseur de souris sort d'un élément.
 mousedown : se déclenche lorsqu'un bouton de souris est enfoncé.
 mouseup : se déclenche lorsqu'un bouton de souris est relâché.
Dr. A.Aloui DAW- L2 2022/2023 29

Exemple 35:
Exemple 36:
Exemple 37:
Dr. A.Aloui DAW- L2 2022/2023 30

Événements de clavier :
 Les événements de clavier en JavaScript permettent de détecter les touches

qui sont enfoncées et relâchées sur le clavier d'un utilisateur.
 Les événements de clavier les plus couramment utilisés sont keydown,

keyup et keypress.
Dr. A.Aloui DAW- L2 2022/2023 31

Événements de clavier :
 L'événement keydown se produit lorsqu'une touche est enfoncée, et

il se répète à intervalles réguliers si la touche reste enfoncée.
 L'événement keyup se produit lorsqu'une touche est relâchée.
 l'événement keypress se produit lorsqu'une touche est enfoncée et

qu'elle produit un caractère.
Exemple 38:
Dr. A.Aloui DAW- L2 2022/2023 32

Events Form:
Exemple 39:
Dr. A.Aloui DAW- L2 2022/2023 33

Fonctions en JavaScript
 En JavaScript, une fonction est un bloc de code qui peut être appelé à
partir d'autres parties du code pour effectuer une tâche spécifique.
 Une fonction peut prendre des entrées (appelées arguments) et peut

renvoyer une sortie (appelée valeur de retour).
Dr. A.Aloui DAW- L2 2022/2023 34

<script >
function hello()
{
var name=window.txt.value;
window.idh1.innerHTML="bonjour "+ name;

}
</script>
Dr. A.Aloui DAW- L2 2022/2023 35
Exemple 40:
Exemple 41:
Exemple 42:
Dr. A.Aloui DAW- L2 2022/2023 36

fonction fléchée
 Une fonction fléchée en JavaScript est une manière plus concise et
simplifiée de définir une fonction.
 Elle utilise une syntaxe plus courte que les fonctions traditionnelles et
est souvent utilisée pour écrire du code plus lisible et plus efficace.
Dr. A.Aloui DAW- L2 2022/2023 37

fonction fléchée
syntaxe
(param1, param2, …, paramN) => { instructions }
Exemple
const sum = (a, b) => a + b;
Dr. A.Aloui DAW- L2 2022/2023 38

fonction classqiue fonction fléchée
function sum (a, b) {

return a + b; const sum = (a, b) => a + b;
}
Dr. A.Aloui DAW- L2 2022/2023 39

fonction classqiue fonction fléchée
const arr = [1, 2, 3];

const arr = [1, 2, 3];
const c = arr.map(x => x * x);
const c = arr.map(function(x)
{
return x * x;
});
Dr. A.Aloui DAW- L2 2022/2023 40
fonction fléchée
const myFunction = (param) => {

// instructions de la fonction
}
const myParentFunction = () => {

// instructions de la fonction parent
myFunction(param); // appel de la fonction fléchée à partir de

la fonction parent
// instructions de la fonction parent

}
Dr. A.Aloui DAW- L2 2022/2023 41
fonction fléchée
Exemple
const result = square(5);

const square = (num) => num * num;
console.log(result); // affiche 25
Dr. A.Aloui DAW- L2 2022/2023 42

Exercices : Javascript
Dr. A.Aloui DAW- L2 2022/2023 43

Java Script

Transféré par

Informations du document

Titre original

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

Java Script

Transféré par

Droits d'auteur :

Formats disponibles

Université Mohamed Khider-Biskra

Faculté des Sciences Exactes et des Sciences de la Nature et de la Vie

Dr. A.Aloui DAW- L2 2022/2023

Dr. A.Aloui DAW- L2 2022/2023 2

 Il permet de créer des animations, de valider des formulaires,

 Il est généralement exécuté côté client (dans le navigateur web) et permet

Dr. A.Aloui DAW- L2 2022/2023 3

Dr. A.Aloui DAW- L2 2022/2023 4

 Les navigateurs web interprètent directement le code JavaScript pour

 C'est ce qui permet une rapidité d'exécution des scripts.

Dr. A.Aloui DAW- L2 2022/2023 5

 JavaScript et Java sont deux langages de programmation distincts, bien

Dr. A.Aloui DAW- L2 2022/2023 6

• Des applications web.

Dr. A.Aloui DAW- L2 2022/2023 7

 Aujourd'hui, JavaScript peut être exécuté non seulement dans les

Dr. A.Aloui DAW- L2 2022/2023 8

 Parmi les éditeurs de code populaires, on peut citer Visual Studio

Code, Sublime Text, Atom, Notepad++, Vim et Emacs.

Dr. A.Aloui DAW- L2 2022/2023 9

 Le code JavaScript peut être inséré directement dans la balise "script" ou

<script src="chemin/vers/script.js"> </script>.

 La balise <script> permet d'insérer des programmes JavaScript dans

<p>Before the script...</p>

<h1 id="id1"> Exemple </h1>

Dr. A.Aloui DAW- L2 2022/2023 12

 Si le code JavaScript doit être exécuté avant le chargement de la

2) Il est recommandé de placer la balise script à la fin du body:

 Si le code JavaScript est utilisé pour modifier dynamiquement les

Dr. A.Aloui DAW- L2 2022/2023 14

Dr. A.Aloui DAW- L2 2022/2023 15

 Si src est défini, le contenu de la balise script est ignoré.

Dr. A.Aloui DAW- L2 2022/2023 16

Q1: Créez une page qui affiche un message “I'm JavaScript!”.

Q2: Prendre la solution de Q1 précédente Afficher une alerte. Modifiez-

Dr. A.Aloui DAW- L2 2022/2023 17

 Les fonctions peuvent contenir du code qui effectue des actions

var result = addition(2, 3);

Dr. A.Aloui DAW- L2 2022/2023 18

 En JavaScript, les variables sont utilisées pour stocker des valeurs.

 Le type d’une variable dépend de la valeur stockée dans cette variable.

Dr. A.Aloui DAW- L2 2022/2023 19

var person={name:"Amine", age:"20"};

Dr. A.Aloui DAW- L2 2022/2023 20

Var & Let

Exemple 31: let x = 1;

document.write("In bloc IF x =",x); // Affiche 3

Dr. A.Aloui DAW- L2 2022/2023 21

 Nombre (Number) : les valeurs numériques

 Chaîne de caractères (String)

Dr. A.Aloui DAW- L2 2022/2023 22

 En JavaScript, il existe trois fonctions principales pour l'interaction avec

 alert affiche un message à l'utilisateur et attend qu'il appuie sur le

 prompt affiche un message à l'utilisateur et attend qu'il saisisse

 confirm affiche un message à l'utilisateur et lui demande de

let name = prompt("Quel

 Les trois types de boucles disponibles en JavaScript sont :

Dr. A.Aloui DAW- L2 2022/2023 25

 En JavaScript, les événements de navigateur sont des actions qui se

 le chargement d'une page,

 le clic d'un bouton,

 la fermeture d'une fenêtre, etc.

 Ces événements permet de rendre les pages web interactives et réactives