Technologie Et Programmation Web 4

Technologie et
programmation Web
Abir MHENNI
Dr. Ing. en Informatique
abirmhenni@gmail.com
Filière : 2ème année Licence Multimédia
2020-2021 1
Chapitre 4
Introduction au JavaScript
2
Plan 3
• Définition
• Déclaration du code JavaScript
• Les variables et fonctions
• Les boîtes de dialogues
• Les objets de programmation
• Les événements
• Le DOM : Document Object Model
• Les expressions régulières ite soit calé en haut et qu'il soit toujours visible, etc.
Définition 4
• JavaScript est un langage de script inséré dans une page HTML.

• Un langage de script est plus léger qu’un langage de programmation car il ne
nécessite pas une phase de compilation mais il sera interprété.
• Le JavaScript est donc un langage de script qui est interprété par le navigateur
web (côté client).
• Le JavaScript a pour but :
▪ D’améliorer l’interactivité de la page web (ajout de contrôle, animation, …)
▪ Traiter les événements provoqués par l’internaute (clic, survol, …)
▪ Le JavaScript est un langage de script orienté objet dont la syntaxe est
proche de Java et C.
Déclaration du code JavaScript 5
• On peut placer du code JavaScript dans une page HTML selon des façons et des
formes bien différentes.
1. Entre des balises <script> et </script>
2. Code associé à un fichier d'extension .js
3. Code associé à une balise HTML
• On peut placer du code JavaScript dans une page HTML selon des façons et des
formes bien différentes.
1. Entre des balises <script> et </script>
• Quand ces balises sont placées à l’intérieur du <body> le code JavaScript sera
directement interprété au chargement de la page.
• Quand ces balises sont placées dans le <head> le code ne sera pas interprété
directement. Il le sera lorsque on y référence dans le <body>. Généralement, on
définit des fonctions JavaScript dans le <head> qui seront appelées dans le
<body>.
2. Code associé à un fichier d'extension .js

• On peut séparer le code JavaScript dans un fichier ayant l’extension .js puis
l’insérer dans la page web.
• Syntaxe : <script src="fichier.js"></script>
• Cela permet de réutiliser le code JavaScript dans plusieurs pages web.
• Ces fichiers contiennent, généralement, la définition des fonctions JavaScript qui
seront appelées dans le body des pages web
3. Code associé à une balise HTML

• Le code JavaScript peut s’insérer sous forme d’un appel de fonction, affectée à un
gestionnaire d'événement qui apparaît comme un attribut dans une balise .
• Syntaxe : <balise onevenement="fonction JS" >
• Exemple :
Les variables 9
• Le mot-clé var permet de déclarer une ou plusieurs variables.

• Après la déclaration de la variable, il est possible de lui affecter une valeur par
l'intermédiaire du signe d'égalité (=).
• var valeur = 500; <script
• La valeur affectée définit le type de la variable. language="javascript">
• Les variables peuvent être globales ou locales. var valeur=500;
▪ Une variable globale est déclarée en début function NomFonction(arg1)
de script et est accessible à n'importe quel {
endroit de ce code. var valeur=500;
▪ Une variable locale est déclarée à …
l'intérieur d'une fonction et n'est utilisable }
que dans la fonction elle-même. </script>
Les fonctions 10
• En JavaScript les fonctions sont définis soit dans le <head> ou dans un fichier js et
l’appel se fait en <body>.
• Syntaxe de définition :
<script>
function nom_De_La_Fonction(argument1, argument2, …)
{
liste d'instructions
}
</script>
• Syntaxe d’appel :
onevenement=" nom_De_La_Fonction(x,y,...)"
Les boites de dialogues 11
• Une boîte de dialogue est une fenêtre qui s'affiche à l’écran, et qui permet :
▪ Soit d'avertir l'utilisateur (alert)
▪ Soit de confirmer un choix (confirm)
▪ Soit de lui demander de saisir une information (prompt)
• La méthode alert()
• permet d'afficher une boîte composée d'une fenêtre d'un bouton OK et le texte
qu'on lui fournit en paramètre.
• Dès que cette boîte est affichée, l'utilisateur n’a d'autre alternative que de cliquer
sur le bouton OK.
• Syntaxe : alert("Attention!");
Exercice1.html
<html>
<head>
<script language="javascript">
function afficheMessage() {
alert('Première ligne...\n Deuxième ligne...');
}
</script>
</head>
<body>
<div style="text-align:center" >Cliquer sur le bouton pour afficher une fenêtre d'alerte :<br>
<button onClick="afficheMessage()"> Cliquer içi </button>
</div>
</body>
</html>
Exercice1.html fichier.js
<html> <script language="javascript">
<head> function afficheMessage() {
<script src="fichier.js"></script> alert('Première ligne...\nDeuxième ligne...');
</head> }
<body> </script>
<div style="text-align:center" >Cliquer sur le bouton
ci-dessous pour afficher une fenêtre d'alerte :<br>
<button onClick="afficheMessage()"> Cliquer içi
</button>
</div>
</body>
</html>
• La méthode confirm()
• permet à l’utilisateur de choisir entre les boutons "OK" et "Annuler".
• Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la valeur true. Elle
renvoie false dans le cas contraire.
• Syntaxe : var c = confirm("message");
Exercice2.html
<html>
<head> <body>
<script language="javascript"> <div style="text-align:center" >Cliquer sur le bouton
function afficheMessage() { ci-dessous :<br>
var rep=confirm('Voulez-vous continuer ?'); <input type="button"
if (rep==true) { value="Cliquer" onClick="afficheMessage()"></div>
alert('Super, c\'parti !'); </body>
} else { </html>
alert('Oh, c\'est dommage !');
}
}
</script>
</head>
• La méthode prompt() fournit un moyen simple de récupérer une information

provenant de l'utilisateur. La méthode prompt() requiert deux arguments :
▪ le texte d'invite
▪ la chaîne de caractères par défaut dans le champ de saisie
• Syntaxe : rep = prompt('Question','valeur par défaut');
Exercice3.html
<html>
<head>
function afficheMessage() {
var rep=prompt('Quel est le prénom dEinstein ?');
if (rep=="Albert"||rep=="ALBERT") {
alert('BRAVO !!!');
} else {
alert('Réponse incorrecte !');
}
}
</script>
</head>
<body>
<div style="text-align:center" >Cliquer sur le bouton ci-dessous :<br>
<input type="button" value="Cliquer" onClick="afficheMessage()"></div>
</body>
</html>
Exercice4.html : Utilisation d'une variable

<html>
<head>
var nbClic=0;
function clic() {
nbClic++; //incrémente nbClic de 1
if (nbClic>=3) {
alert('Perdu !!!\nVous avez cliqué '+nbClic+' fois');
}
}
function raz() {
nbClic=0;
}
</script>
</head>
<body>
<div style="text-align:center" >Ne cliquez pas sur ce <input type="button"
value="Cliquer" onClick="clic()"> plus de 2 fois !<br><br>
<input type="button" value="Remise à zéro" onClick="raz()"> <div>
</body>
</html>
Les objets de programmation 20
• La classe Array : représente un tableau en JavaScript. Les éléments d’un tableau

peuvent être de type différent.
• La classe Date permet de représenter avec des méthodes, la date et l’heure
système.
• La classe String contient un certain nombre de propriétés et de méthodes
permettant la manipulation de chaînes de caractères.
Les événements 21
• Les événements sont des actions de l'utilisateur, qui vont pouvoir aboutir à une
interactivité. On peut associer des appels de fonctions à des événements.
Evénement Description
Change (onChange) Se produit lorsque l'utilisateur modifie l’état d’un élément d’un formulaire
Click (onClick) Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement.
Load (onLoad) Se produit lorsque le navigateur de l'utilisateur charge la page en cours

MouseOver
Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un élément
(onMouseOver)
Se produit lorsque le curseur de la souris quitte un élément.
MouseOut (onMouseOut)
Cet événement fait partie du Javascript 1.1.
Se produit lorsque l'utilisateur sélectionne un texte (ou une partie d'un texte) dans un champ
Select (onSelect)
de type "text" ou "textarea"
Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire (le bouton
Submit (onSubmit)
qui permet d'envoyer le formulaire)
Unload (onUnload) Se produit lorsque le navigateur de l'utilisateur quitte la page en cours
Ecrire du texte 22
• La méthode write() de l'objet document permet de modifier de façon dynamique

le contenu d'une page HTML. Voici la syntaxe de la méthode write() :
▪ document.write("texte à écrire") ; Exemple.html
<html>
▪ document.write(Nom_variable) ; <head>
function LaDate() {
document.write(Date());
}
</script>
</head>
<body>
<div style="text-align:center" >Cliquer sur
le bouton :
<input type="button" value="Cliquer"
onClick="LaDate()"><br>
</body>
</html>
Le Document Object Model (DOM) 23
• Le DOM fournit une représentation hiérarchique des

éléments (balises) d’une page web et permettant à
JavaScript l’accès aux propriétés de ces balises.
▪ L'objet le plus grand est l'objet fenêtre (window)
▪ Dans la fenêtre s'affiche une page, c'est l'objet
document
▪ Cette page peut contenir plusieurs objets, comme
des formulaires, des images, des paragraphes, etc.
▪ Le formulaire contient des objets inputs et autres
▪ Exemple : pour récupérer la valeur d’un input de
type texte nommé nom placé dans un formulaire
nommé form1 :
▪ document.form1.nom.value
• Ainsi avec l’objet document (qui représente la page web) on peut accéder aux
différents éléments de la page grâce essentiellement aux méthodes :
▪ La méthode getElementById("idname")
▪ La méthode getElementsByTagName("tagname")
• La méthode getElementById
• permet de sélectionner un élément d'identifiant donné dans une page.
• Exemple:
▪ si on a dans une page <div id="intro">...</div>,
▪ document.getElementById("intro") permettra de sélectionner précisément
l'élément div en question.
• La méthode getElementsByTagName
• permet de sélectionner les éléments portant un nom de balise donné dans une
page.
• Exemple :
Si on a dans une page
<h1> ………</h1>
…
<h1> ………</h1>
• var t = document.getElementsByTagName("h1") retournera (dans un tableau t) la
liste des éléments (balises) dont la nom est h1. Dans cet exemple il y a 2.
Exercice5.html : utilisation de l'identité des objets

<html>
<head>
var nbClic=0; //création de la variable : nom et valeur initiale
function compteClic() {
nbClic++; //incrémentation de nbClic de 1
document.getElementById('texte1').value=nbClic;
}
</script>
</head>
<body>
<div style="text-align:center" >Cliquer sur le bouton :
<input type="button" value="Cliquer" onClick="compteClic()"><br>
Vous avez cliqué <input type="text" id="texte1" style="background-color:#FFFFFF;
border:#FFFFFF none 0px; text-align:center" value="0" size="3" > fois.</div>
</body>
</html>
• innerHTML est une propriété des éléments HTML pour insérer un contenu
dynamiquement dans ces éléments.
• Cette propriété est essentiellement utilisée pour les balises HTML ayant un
contenu textuel : p, h1, li, ….
• Cette propriété permet de lire ou écrire le contenu d’un élément pointé par l’une
des méthodes précédentes.
• Sa syntaxe est la suivante : element.innerHTML
• Exemple:
• Modifiez le contenu HTML d'un élément <p> avec id = "demo":
• document.getElementById("demo").innerHTML = "Paragraph changed!";
Les expressions régulières 28
• HTML5 a apporté un nouveau attribut nommé pattern utilisé avec les balises
<input>. Cet attribut a pour rôle de définir un modèle des valeurs à saisir dans le
champ input.
• Ces modèles sont exprimés comme des expressions régulières JavaScript.
• Ces expressions régulières suivent un vocabulaire définit comme suit :
Caractère Utilité
\ Le caractère antislash représente lui-même ou le caractère spécial qui le suit.
[] Les crochets définissent une liste de caractères. Ex : [0-9]
Les accolades lorsqu'elles contiennent un ou plusieurs chiffres séparés par des virgules
{} représentent le nombre d'occurences de l'élément les précédant (par exemple p{2,5}
correspond à ppp, pppp ou ppppp
Un moins entre deux caractères dans une liste représente un intervalle (par exemple [a-
- d] représente [abcd]).
. Le caractère point représente un caractère quelconque.
Le caractère astérisque indique un nombre d'occurrences indéterminé (y compris
* aucune) de l'élément le précédant.
Caractère Utilité
+ Le caractère plus indique une ou plusieurs occurrences de l'élément le précédant.
Le caractère "point d'interrogation" indique une occurrence éventuelle (0 ou 1) de
? l'élément le précédant.
La barre verticale signifie l'occurrence de l'élément situé à sa gauche ou de celui situé à

| sa droite. Exp : (abc | def) ~ la chaîne qui contient abc ou def (ou les deux)
\s Le caractère espace.
^ Placé en début d'expression il signifie "chaîne commençant par .. "
$ Placé en fin d'expression il signifie "chaîne finissant par ... "
Exemple 31 31
<html> </script>
<head> </head>
<body>
function Validate() {
Mail : <input type="text" id="text1"> <br/><br/>
var mailformat = /^[a-z0-9._-]+@[a-z0-9]{2,}\.[a-z]{2,3}$/;
if(document.getElementById('text1').value.match(mailformat))
Phone : <input type="text" id="text2"> <br/><br/>
{
alert("Valid email address!"); <button onclick="Validate()" > submit </button>
document.getElementById('text1').focus(); </body>
}
</html>
else
{
alert("You have entered an invalid email address!");
document.getElementById('text1').focus();
}
• Exemple:
• Numéro de téléphone : XX XXX XXX
^[0-9]{2}\s[0-9]{3}\s[0-9]{3}$
• Adresse mail :
^[a-z0-9._-]+@[a-z0-9]{2,}\.[a-z]{2,3}$
Lien intéressant 33
• http://www.ostralo.net/javascript/pages/pageC1.htm
Exemple 34
<html>
Ecrivez l’expression
régulière pour <head>
trouver le temps <script language="javascript">
(heures:minutes) function tester() {
dans la chaîne. var str = "Le restaurant ouvre à 08:00 situé au boulevard du 200:200";
var expr = "[0-9]{2}:[0-9]{2}" ;
var result = str.match(expr);
document.writeln(result.join(""));
}
</script>
</head>
<body onload="tester()">
</body>
</html>
To be continued …
35

Technologie Et Programmation Web 4

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

Technologie Et Programmation Web 4

Transféré par

Droits d'auteur :

Formats disponibles

Technologie et

• JavaScript est un langage de script inséré dans une page HTML.

2. Code associé à un fichier d'extension .js

3. Code associé à une balise HTML

• Le mot-clé var permet de déclarer une ou plusieurs variables.

• La méthode prompt() fournit un moyen simple de récupérer une information

Exercice4.html : Utilisation d'une variable

• La classe Array : représente un tableau en JavaScript. Les éléments d’un tableau

Load (onLoad) Se produit lorsque le navigateur de l'utilisateur charge la page en cours

• La méthode write() de l'objet document permet de modifier de façon dynamique

• Le DOM fournit une représentation hiérarchique des

Exercice5.html : utilisation de l'identité des objets

• Ces expressions régulières suivent un vocabulaire définit comme suit :

• Ces expressions régulières suivent un vocabulaire définit comme suit :

La barre verticale signifie l'occurrence de l'élément situé à sa gauche ou de celui situé à

Vous aimerez peut-être aussi