Scribd
Importer
219 vues58 pages

Web Chap4 JavaScript - 2023

Transféré par

chaimatounsi26
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
219 vues58 pages

Web Chap4 JavaScript - 2023

Transféré par

chaimatounsi26
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Programmation web I

Dr. Fatma Ellouze


[Link]@[Link]

1ère année GI
(Version 0) 1
Plan

• Chapitre 1: Introduction à la programmation web

• Chapitre 2: Introduction au langage HTML5

• Chapitre 3: Introduction au langage CSS3

• Chapitre 4: Introduction au langage JavaScript

2
Chapitre 4 : Introduction au langage JavaScript

3
Chapitre 4 : Introduction au langage JavaScript

Objectifs

• Découvrir les principes de Javascript


• Manipuler des variables
• Utiliser des structures conditionnelles et itératives
• Découvrir les objets de Javascript
• Manipuler les événements
Fatma ELLOUZE
2022

4
Chapitre 4 : Introduction au langage JavaScript

Plan
1. Les principes de JavaScript
2. Où écrire le code JavaScript ?
3. Entrées/sorties avec JS
4. Syntaxe
5. JavaScript : un langage orienté objet
6. Les fonctions/méthodes
7. Les opérateurs
8. Création d’objets en JavaScript
9. Styles en JS
Fatma ELLOUZE

10. Les Événements


2022

11. Association avec un formulaire


12. Exercices 5
Chapitre 4 : Introduction au langage JavaScript

JavaScript versus HTML


• HTML
- permet de décrire des pages, un peu de la manière d’un traitement de
texte (texte en gras, retour à la ligne, insérer une image, etc.)
• JavaScript
- permet de programmer des actions en fonctions d’évènements
(gestionnaire d’évènements).
- permet de rendre un site interactif.
- permet d’effectuer des calculs sans aucun recours au serveur.
Fatma ELLOUZE
2022

6
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Exemples : calculs sans recours au serveur

7
Chapitre 4 : Introduction au langage JavaScript

JavaScript : Principes

• Langage de script objet


Un script est une suite d’instructions qui vont être interprétées par un programme
• Syntaxe style C / C++ / Java
• N’est PAS du Java
• Exécuté par le client Web [Link] les paramètres du navigateur.
[Link] la section "Confidentialité et sécurité", cliquez sur
• Peut être désactivé par le client "Paramètres du site".
3.désactivez l'option "JavaScript".
• Gestion des événements HTML
Fatma ELLOUZE
2022

8
Chapitre 4 : Introduction au langage JavaScript

Les versions
• ECMAScript 1 a été publiée pour la première fois en juin 1997
• ECMAScript 3 (publié en 1999)
• ECMAScript 5 (ES5) : La 5e édition d'ECMAScript, normalisée en 2009.
Cette norme a été complètement mise en œuvre dans tous les
navigateurs modernes.
• ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015) : La 6e édition
d'ECMAScript, normalisée en 2015. (e.g., let and const Keywords,
Arrow Functions … )
• ECMAScript 7 / 2016 ECMAScript 8 / 2017 …
Fatma ELLOUZE

• ECMAScript 2023 (ES14) (juin 2023)


2022

9
Chapitre 4 : Introduction au langage JavaScript

Où écrire le code JavaScript ?


• Deux types d’insertion (comme CSS)
➢Directement dans le fichier HTML
➢Dans un fichier externe

• Utilisation d'une balise spécifique directement dans le fichier HTML


la page HTML devra TOUJOURS contenir la balise SCRIPT avec les deux attributs
type et language ou l’un des deux.

<SCRIPT type="text/javascript" language="JavaScript">


Fatma ELLOUZE
2022

contenu du script
</SCRIPT>
10
Chapitre 4 : Introduction au langage JavaScript

Où écrire le code JavaScript ?


• Dans le corps de la page HTML
➢Entre les balises <body> et </body>
➢Code exécuté lors du chargement de la page
➢<SCRIPT>…</SCRIPT>: autant de fois que nécessaire et n'importe où dans le
document HTML.
Fatma ELLOUZE
2022

11
Chapitre 4 : Introduction au langage JavaScript

Où écrire le code JavaScript ?


• Dans l’entête de la page HTML
➢Entre les balises <head> et </head>
➢Code exécuté lors d'un événement utilisateur
➢L'événement se trouve dans le corps du document.
Fatma ELLOUZE
2022

12
Chapitre 4 : Introduction au langage JavaScript

Où écrire le code JavaScript ?


• Placer le code JavaScript dans un fichier externe avec l’extension .js
• Utilisation de l'attribut « SRC » pour faire référence à l'URL , i.e. le
fichier qui contient le script.
Fatma ELLOUZE
2022

Avantage : réutilisation du script dans plusieurs pages


13
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Entrées/sorties avec JS

14
Chapitre 4 : Introduction au langage JavaScript

Entrées/sorties
• 3 types de boites de messages peuvent être affichés en utilisant
Javascript
➢Méthode alert (): permet d’écrire un message dans une fenêtre.
➢Méthode confirm (): permet à l’utilisateur de choisir entre les boutons
OK et Annuler.
➢Méthode prompt(): ouvre une boite de dialogue avec une zone saisie
et 2 boutons OK et Annuler
• La méthode [Link]() permet d’écrire du code HTML dans une
page WEB.
Fatma ELLOUZE
2022

15
Chapitre 4 : Introduction au langage JavaScript

prompt(), alert ()

<html>
<head><title>Programme In1</title></head>
<body>
<script type="text/JavaScript">
annee= prompt('En quelle année sommes-nous ? ');
alert('Vous avez répondu : ' + annee);
</script>
</body>
</html>
Fatma ELLOUZE
2022

16
Chapitre 4 : Introduction au langage JavaScript

confirm ()
<html>
<head><title>Programme</title></head>
<body>
<script type="text/JavaScript">
if (confirm('Je vais dire sur quel bouton vous avez appuyé : ')) x= confirm('Je …')
{ if (x==true)
alert(' Sur OK \n Continuez avec :'); }
else {
alert(' Sur Annuler \n Sortez avec Ok !') ;}
</script>
</body> </html>
Fatma ELLOUZE
2022

17
Chapitre 4 : Introduction au langage JavaScript

[Link] ()
• Comment écrire, afficher... l'information dans une fenêtre
HTML ?

<html>
<head>
<title>Programme Out1</title>
</head>
<body>
<script type="text/JavaScript">

[Link]("<h1>" + "Salut !"+"</h1>") ;


</script>
<p> Lorem …..non. </p>

</body>
Fatma ELLOUZE

</html>
2022

18
Chapitre 4 : Introduction au langage JavaScript

open(), [Link] ()

• Ouverture d’une fenêtre : open() : Permet d’ouvrir une fenêtre et


d’écrire dedans.
<html>
<head><title>Exemple avec open</title> </head>
<body> Remarque: Les deux
<script type="text/JavaScript"> premiers paramètres
(URL et nom) sont
fille= open("", "", "height=50, width=300"); laissés vides. Si on ne
[Link]('<title>' + 'Titre fenêtre fille' +'</title>'); spécifie pas d’URL alors
[Link]('<p>' + 'Texte dans la fenêtre fille'+'</p>'); une fenêtre vide sera
ouverte.
</script>
</body>
Fatma ELLOUZE

</html>
2022

19
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Syntaxe

20
Chapitre 4 : Introduction au langage JavaScript

Syntaxe

• La casse est importante: les majuscules et minuscules ne doivent


jamais être interchangées entre elles. E.g., alert() n’est pas Alert()
• Le caractère point-virgule est utilisé comme séparateur de fin de ligne
mais sa présence n'est pas obligatoire si la ligne ne comporte qu'une
seule instruction.
• Les commentaires simples(sur une ligne) sont indiqués par une
double barre oblique (//).
• Les commentaires qui s'étendent sur plusieurs lignes utilisent /* et */.
Fatma ELLOUZE
2022

21
Chapitre 4 : Introduction au langage JavaScript

Variables & types de données

• Variables non typées à la déclaration


var nom_variable ;
• Typage dynamique à l’affectation
Types gérés
• Nombres e.g. var a= 3;
• Booléens e.g. var isTrue = true;
• Chaînes e.g. var text = "Salut !", var text = 'Salut !'
Fatma ELLOUZE

• Undefined e.g. si la variable n’est pas initialisée à la déclaration


2022

22
Chapitre 4 : Introduction au langage JavaScript

Variables & types de données

• Tester le type d’une variable : L’opérateur typeof


Fatma ELLOUZE
2022

23
Chapitre 4 : Introduction au langage JavaScript

Variables - Conversion de type


• parseInt() permet de convertir une variable en nombre entier
• parseFloat() permet de convertir une variable en nombre décimal
Exemple
• var a = "123", b = "456";
• [Link](a+b,"<br>"); //Affiche 123456
• [Link](parseInt(a)+parseInt(b),"<br>"); // Affiche 579
• Javascript convertit automatiquement les entiers en chaînes de
caractères, ce qui permet de concaténer des entiers avec des chaînes
Fatma ELLOUZE

de caractères :
2022

• var x = 50 + " euro" : affecte à x la chaîne "50 euro"


24
Chapitre 4 : Introduction au langage JavaScript

La portée des variables

<script language="Javascript"> Variable globale


var message = 'Bonjour !';
function showMsg() { Variable locale
var message = 'Bonne journée !';
alert(message);
}
showMsg();
// Bonne journée !
alert(message);
Fatma ELLOUZE

//Bonjour !
2022

</script>
25
Chapitre 4 : Introduction au langage JavaScript

Structures conditionnelles
Switch ()
if (condition)
switch(compte) {
{
case 1 :
instructions ; // traitement1 ….
} Break ;
[ else case 2 :
{ // traitement2 ….
instructions ; Break ;
Fatma ELLOUZE

}] default:
2022

// traitement par défaut


Break ;} 26
Chapitre 4 : Introduction au langage JavaScript

Structures conditionnelles
• Exemple
<script language="JavaScript">
var code;
code= [Link]("Entrez le code de chiffres du produit", "");
if ([Link] == 3)
{
[Link] ("Le code est bon!");
}
else
{
[Link]("SVP, recommencez car le code \"" +code+ "\" n'est pas
valide.");
Fatma ELLOUZE

}
2022

</script>

27
Chapitre 4 : Introduction au langage JavaScript

Structures itératives

while (condition) for (instr ; condition ; instr)


{ {
instructions ; instructions ;
} }
do
{ for (variable in objet)
instructions ; {
} instructions ;
Fatma ELLOUZE
2022

while (condition) ; }

28
Chapitre 4 : Introduction au langage JavaScript

Structures itératives
Exemple
<script language="Javascript">
for (i=0; i<10; i++) {
[Link](i + "<BR>")
}
</script>

<script language="Javascript">
var
person={fname:"John",lname:"Doe",age:25};
var txt="";
for (x in person)
Fatma ELLOUZE

{
txt=txt + person[x];
2022

}
[Link] (txt);
</script> 29
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Les fonctions/méthodes

30
Chapitre 4 : Introduction au langage JavaScript

Les fonctions
• Deux types de fonctions
1. Les fonctions propres à Javascript. Elles sont associées à un objet bien
particulier comme c’est le cas de la méthode alert() avec l'objet window.
alert (« bonjour »); // alert() est une fonction
[Link] (« bonjour »); // alert() est une méthode appliquée à un objet

2. Les fonctions définies par l’utilisateur


• Il est recommandé de définir les fonctions à l’intérieur du couple de balises
<head> </head> ou dans un fichier séparé.
• La déclaration d'une fonction se fait grâce au mot clé function selon la
Fatma ELLOUZE

syntaxe suivante
2022

31
Chapitre 4 : Introduction au langage JavaScript

Quelques fonctions prédéfinies


• Javascript dispose d’un certain nombre de fonctions prédéfinies pour la
manipulation des objets :
✓ isNaN() : vérifie si la valeur n’est pas un nombre. Elle retourne true si
ce n’est pas un nombre, false sinon.
✓Number() : convertit le contenu d'un objet en nombre.
✓toString () : transforme le contenu d’un objet en une chaîne de
caractères
✓[Link]() c’est la méthode la plus utilisée,
Fatma ELLOUZE

elle retourne une référence au premier objet associé à l'attribut id ou


2022

NAME spécifié.

32
Chapitre 4 : Introduction au langage JavaScript

Fonctions-utilisateurs Exemple
<html>
• Valeur de retour non typée <head>
• Arguments non typés <script language="JavaScript">
Déclaration function Affiche(Texte)
function ma_fonction(arguments) { alert(Texte); }
{ </script>
instructions ; </head>
return quelque_chose; // ou pas… <body>
} <script language="JavaScript">
Appel
Fatma ELLOUZE

Affiche('ma première fonction en JavaScript');


ma_fonction(12) ;
2022

</script>
</body>
</html> 33
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Les opérateurs

34
Chapitre 4 : Introduction au langage JavaScript

Les opérateurs
• On distingue 8 opérateurs de comparaison

• 6 opérateurs de calcul
Fatma ELLOUZE
2022

35
Chapitre 4 : Introduction au langage JavaScript

Les opérateurs
• 2 opérateurs logiques

• 2 opérateurs d'incrémentation 4 opérateurs associatifs


Fatma ELLOUZE
2022

36
Chapitre 4 : Introduction au langage JavaScript

Les objets du navigateur


• Quand une page web est chargée, le navigateur crée plusieurs objets
pour représenter les informations y figurant
• Les éléments manipulés par JavaScript et affichés dans le navigateur
sont des objets
• Ces objets sont classés de manière hiérarchique
• L'objet le plus grand est la fenêtre : window
• Dans la fenêtre s'affiche une page : document
Fatma ELLOUZE
2022

37
Chapitre 4 : Introduction au langage JavaScript

Hiérarchie des objets


• Pour accéder à cet élément, on utilise la notation pointée
[Link]
Fatma ELLOUZE
2022

38
Chapitre 4 : Introduction au langage JavaScript

Nommage des objets-éléments


• Pour pouvoir manipuler un objet en javaScript, il doit posséder un nom.
• Pour pouvoir distinguer les différents objets-éléments d’une page Web, il suffit
de leur donner un nom à travers l’attribut NAME
e.g., <Form name = « formulaire1 »>
• Pour adresser un objet, il ne suffit pas de donner son nom : il faut aussi préciser
son « chemin d’accès » dans l’arborescence de la structure
<HTML>
<BODY onLoad="[Link]='Bonjour' ">
<FORM name="formulaire">
Fatma ELLOUZE

<INPUT type="text" name="zone" id=" zoneID" >


2022

</FORM>
</BODY>
</HTML> 39
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Styles en JS

40
Les instructions de formatage de document
Chapitre 4 : Introduction au langage JavaScript

en JS
• On peut changer la couleur d'arrière-plan d'un document avec deux
méthodes :
1) [Link]="white"; //une manière ancienne obsolète
2) [Link]="white"; //manière moderne
et recommandée

• On peut ajouter une bordure à l’objet document :


Fatma ELLOUZE

[Link]="10px ridge silver";


2022

41
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Les Événements

42
Chapitre 4 : Introduction au langage JavaScript

Événements
• Les événements sont des actions de l'utilisateur, qui vont donner lieu
à une interactivité.
• L'événement
• par excellence est le clic de souris.
• le passage de la souris au-dessus d'une zone,
• le changement d'une valeur, ...
Fatma ELLOUZE
2022

43
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Gestionnaires d’événement

44
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Gestionnaires d’événement

45
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Gestionnaires d’événement

46
Chapitre 4 : Introduction au langage JavaScript

Gestionnaires d’événement <HTML>


<HEAD>
<SCRIPT LANGUAGE='Javascript'>
function bienvenue() {
Utilisation : (2 manières) alert("Bienvenue à cette page");
}
1ere manière : onévénement="instructions JS" function au_revoir() {
alert("Au revoir");
e.g., onClick ="afficher();" }
e.g., onClick="alert('Vous avez cliqué ');" </SCRIPT>
</HEAD>
2eme manière : <BODY onLoad='bienvenue()'
onUnload='au_revoir()'>
la méthode addEventListener(événement, instructions JS) Html normal
</BODY>
var x=[Link]('quest'); </HTML>
Fatma ELLOUZE

[Link](‘click', afficher);
2022

47
Chapitre 4 : Introduction au langage JavaScript

Exercice 1
• Voici une zone de texte. Entrez une valeur et appuyer sur le bouton
contrôler pour afficher ce que nous avons écrit dans la zone texte.
(utiliser une fonction avec un paramètre)
Fatma ELLOUZE
2022

48
Chapitre 4 : Introduction au langage JavaScript

Solution
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(x) {
alert("Vous avez tapé : " + x);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
Fatma ELLOUZE

<INPUT TYPE="text" NAME= "chaine" id= "chaineID" > <br>


2022

<INPUT TYPE="button" NAME="bouton" VALUE="Contrôler" onClick="controle([Link])">


</FORM> </BODY> </HTML>
OU onClick="controle([Link]('chaineID').value)" 49
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Exercice 2

50
HTML Code:
Chapitre 4 : Introduction au langage JavaScript

• <!DOCTYPE html>
• <html>
• <head>
• <SCRIPT type="text/javascript" src="[Link]"> </SCRIPT>
• </head>
• <body>
• <form name="form">
• 1st Number : <input type="text" name="n1" id="firstNumber" /><br>
• 2nd Number: <input type="text" name = "n2" id="secondNumber" /><br>
• <input type="button" onClick="multiplyBy()" Value="Multiply" />
• <input type="button" onClick="divideBy()" Value="Divide" />
• </form>
Fatma ELLOUZE

• <p>The Result is : <br>


2022

• <input type="text" id = "result" readonly>


• </p></body></html> 51
Chapitre 4 : Introduction au langage JavaScript

JavaScript Code: fichier [Link]


• function multiplyBy()
• {
• num1 = [Link];
• num2 = [Link];
• [Link]("result").value = num1 * num2;
• }
• function divideBy()
• {
• num1 = [Link]("firstNumber").value;
• num2 = [Link]("secondNumber").value;
• [Link]("result").value = num1 / num2;
Fatma ELLOUZE

• }
2022

52
Fatma ELLOUZE
Chapitre 4 : Introduction au langage JavaScript
2022

Association avec un formulaire

53
Chapitre 4 : Introduction au langage JavaScript

Les boutons radio


• Les boutons radio sont utilisés pour noter un choix, et seulement un
seul, parmi un ensemble de propositions.

Propriété Description
name indique le nom du contrôle. Tous les boutons portent le
même nom.
index l'index ou le rang du bouton radio en commençant par 0.
checked indique l'état en cours de l'élément radio
Fatma ELLOUZE

defaultchecked indique l'état du bouton sélectionné par défaut.


2022

value indique la valeur de l'élément radio.


54
Chapitre 4 : Introduction au langage JavaScript
Les boutons radio
<HTML>
<HEAD>
<SCRIPT language="javascript">
function choixprop(form) {
if ([Link][0].checked) { alert("Vous avez choisi la proposition " + [Link][0].value) };
if ([Link][1].checked) { alert("Vous avez choisi la proposition " + [Link][1].value) };
if ([Link][2].checked) { alert("Vous avez choisi la proposition " + [Link][2].value) };
}
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form">
Fatma ELLOUZE

<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR>


2022

<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro 2<BR>


<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel est votre choix ?" onClick="choixprop(form)">
55
</FORM> </BODY> </HTML>
Chapitre 4 : Introduction au langage JavaScript

Les boutons case à cocher (checkbox)


• Les boutons case à cocher sont utilisés pour noter un ou plusieurs
choix parmi un ensemble de propositions. A part cela, sa syntaxe et
son usage est tout à fait semblable aux boutons radio sauf en ce qui
concerne l'attribut name.
Propriété Description
name indique le nom du contrôle. Toutes les cases à cocher
portent un nom différent
index l'index ou le rang du bouton radio en commençant par 0.
Fatma ELLOUZE

checked indique l'état du bouton sélectionné par défaut.


2022

defaultchecked indique l'état du bouton sélectionné par défaut.


value indique la valeur de l'élément case à cocher.
56
Chapitre 4 : Introduction au langage JavaScript

Les boutons checkbox


<html>
<head>

<script language="javascript" src="[Link]">


</script>
</head>
<body>
Entrez votre choix :
<form NAME="form4">
<input TYPE="CHECKBOX" NAME="check" VALUE="1">Choix numéro 1<br>
<input TYPE="CHECKBOX" NAME="check" VALUE="2">Choix numéro 2<br>
Fatma ELLOUZE

<input TYPE="CHECKBOX" NAME="check" VALUE="3">Choix numéro 3<br>


<input TYPE="CHECKBOX" NAME="check" VALUE="4">Choix numéro 4<br>
2022

<input TYPE="button" NAME="but" VALUE="Corriger" onClick="reponse(form4)">


</form>
</body>
</html> 57
Chapitre 4 : Introduction au langage JavaScript

function reponse(form4) {
if (
([Link][0].checked===true) &&
([Link][1].checked===true) &&
([Link][2].checked===false) &&
([Link][3].checked===true)
) {
alert("C'est la bonne réponse!");
} else {
[Link]([Link][0].checked);

alert("Désolé, continuez à chercher.");


}
}
Fatma ELLOUZE
2022

58

Vous aimerez peut-être aussi