Scribd
Importer
34 vues27 pages

Cours Web M1 GL - 5

Le document décrit les scripts JavaScript et leur utilisation pour dynamiser les pages web. Il explique les différents types de scripts, leurs fonctions, et présente des exemples d'utilisation de fonctions, variables, boucles et autres structures de base du langage.

Transféré par

david pechel
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
34 vues27 pages

Cours Web M1 GL - 5

Le document décrit les scripts JavaScript et leur utilisation pour dynamiser les pages web. Il explique les différents types de scripts, leurs fonctions, et présente des exemples d'utilisation de fonctions, variables, boucles et autres structures de base du langage.

Transféré par

david pechel
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 27

Master 1 Génie Logiciel

M 521
Web
Java Script
Scripts
Les scripts permettent de rendre les pages web
dynamiques.
Un script est un programme écrit avec un langage de
programmation
Son exécution est déclenchée par un événement qui se
produit sur la machine cliente, soit automatiquement
(comme au chargement d’un document HTML) soit
suite à une action de l’utilisateur.
Scripts
Il existe 2 types de Scripts :
Scripts côté Serveur : situés et s’exécutent sur le serveur,
et peuvent envoyer un résultat vers la machine cliente.
Ils étaient anciennement de type CGI (Common
Gateway Interface). Il existe aussi ASP, PHP, JSP, …
Scripts côté Client : plus rapides que les précédents. Ils
peuvent accompagner le document HTML. Ils
s’exécutent sur la machine cliente suite à un événement,
et préservent ainsi les ressources du serveur
Scripts
Les scripts augmentent la réactivité et le dynamisme
de documents HTML.
Exemple:
Actions particulières suite à un événement comme le
chargement, déchargement, prise de focus d’un élément,
mouvement de la souris, etc..
Accompagner un formulaire et valider les données avant
la soumission
Action liée aux commandes d’un formulaire (ex.: les
boutons) pour simuler une interface utilisateur
graphique
Scripts
Il existe 2 catégories principales de scripts:
Scripts à action unique : exécutés une seule fois, lors
du chargement du document par l’utilisateur. Ils
apparaissent dans le document à l’intérieur d’un élément
SCRIPT
Scripts répétitifs : exécutés à chaque fois qu’un
événement particulier se produit (ex: clic avec la souris
sur un bouton)
Introduction à JavaScript
Le code JavaScript s'insère souvent dans la page HTML elle-
même
Il peut aussi être inséré en faisant appel à un fichier ou
module externe (src)
 Dans ce cas, on écrit le lien suivant: <script src="URL du
module externe"> …. </script>
 Ce lien est placé entre <body>et</body> dans le cas d'une
exécution à l'ouverture de la page
 ou entre les Balises <head> et</head>pour une exécution
différée
 il est écrit sous forme de texte simple dans un fichier avec
l'extension .js ou simplement .txt(texte)
Insérer un script dans du code HTML
<html>
<head>
</head>
<body>
<br>
Ceci est une page HTML.
<br>
<script language="JavaScript">
document.write("Ceci est un script JavaScript inséré dans cette page !")
</script>
<br>
Le HTML reprend la main.
</body>
Les fonctions
 function somme(a,b) {
sum=a+b;
return sum;
}
Offrir une interactivité à une page HTML
<html>
<head>
<script language="JavaScript">
function bonjour() {
alert ("Bienvenue à JavaScript -dans une nouvelle fenêtre !");
}
</script>
</head>
<body>
<form>
<input type="button" name="unBouton" value="Cliquez ici" onClick="bonjour()">
</form>
</body>
</html>
Offrir une interactivité à une page HTML
(suite)
Lors du chargement de la page
la fonction est mise en mémoire
la page est lue
La fonction est exécutée quand l'utilisateur appuie sur
le bouton (Fonction OnClick)
OnClick="bonjour()" indique au navigateur que sur le
clic du bouton il devra exécuter la fonction bonjour
Le "Alert" de la fonction ouvre une boîte de dialogue
qui affiche le texte entre guillemets
Récupérer les données transmises par un
utilisateur
<html>
<head>
<script language="JavaScript">
function nom(chaine) {
alert("Bonjour, "+chaine+"!");
}
</script>
</head>
<body>
Entrez votre nom s'il vous plait:
<form>
<input type="text" name="EntreNom" onBlur="nom(this.value)"value="">
</form>
</body>
</html>
Récupérer les données transmises par un
utilisateur (suite)
Cet exemple contient un champ de saisie (input
type="texte")dans lequel l'utilisateur entre son nom
Le 'onBlur' dans la balise <input> indique au
navigateur quelle fonction il doit appeler lorsqu’il y a
une saisie dans le formulaire
La fonction 'nom(chaîne)' s'exécute
quand l'utilisateur quitte le champ de saisie
ou utilise la touche "entrée" après avoir tapé un text
La fonction nom prend comme paramètre (this.value),la
chaîne de caractères saisie dans le champ du formulaire
Récupérer les données transmises par un
utilisateur (suite)
<html>
<head>
<TITLE>Un script tout simple</TITLE>
<script language="JavaScript">
function lecture(o) {
alert("Vous avez tapé : "+o.monTexte.value);
}
</script>
</head>
<body>
<form Name="MonFormulaire">
Entrer une Valeur :
<input Name="monTexte" type="text" width="40">
<input type="button" value="OK" onClick="lecture(this.form)">
</form>
</body>
</html>
Ouvrir des fenêtres
<html>
<head>
<script language="JavaScript">
Function ouvrirFenetre() {
msg=open("","Fenetre","toolbar=no, directories=no, menubar=no");
msg.document.write("<HEAD><TITLE>Coucou!</TITLE> </HEAD>");
msg.document.write(" <BODY><CENTER><h1><B>Mais c'est une fenêtre
ouverte...</B></h1></CENTER></BODY>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Bouton" value="Cliquez-ici" onClick="ouvrirFenetre()">
</form>
</body>
</html>
Ouvrir des fenêtres (suite)
La fonction OuvrirFenetre() crée une nouvelle fenêtre en
appelant la méthode open (msg=open("","Fenetre",
"toolbar=no, directories=no, menubar=no");)
Les premières doubles-quotes contiennent l'URL de la page
Ici, vous pouvez mettre l'adresse d'un document HTML
Si vous le laissez vide, aucune page ne sera chargée et vous
pourrez écrire dans cette fenêtre avec JavaScript
 Les guillemets suivants indiquent le nom de la fenêtre.
 Les guillemets suivants après spécifient les propriétés de la
fenêtre (en mettant toolbar=yes, la fenêtre aura une barre
d'outils)
Insertion code externe
Code source JavaScript placé entre <head> et
</head> : <script src="jsexterne.js"> </script>
Code contenu dans le fichier externe jsexterne.js :
Function affiche() {
alert("Exemple de code à exécution différée par appel à
un fichier ou module externe .\n Ce message ne
s'affiche que lorsque vous avez cliqué sur le
bouton \"Evénement\".\n\n Cliquez sur OK pour
poursuivre.")
}
Insertion code externe (suite)
Code source JavaScript du bouton placé entre <body>
et </body> :
<form>
<input type="button" name="evenement"
value="Cliquez ici pour générer un événement"
onClick="affiche()">
</form>
Les variables
Les variables contiennent des données qui peuvent
être modifiées lors de l'exécution d'un programme
Chaque variable possède :
un nom
ex. taille, poids, ...
qui doit commencer par une lettre (alphabet ASCII) ou le
signe _ et être composée de lettres, chiffres et des
caractères _ et $(à l'exclusion du blanc)
et une valeur
ex: poids=55 ; taille = 1.68 ;
Les variables (suite)
Une variable doit être déclarée
soit de façon explicite avec le mot réservé var
var taille ;
soit de façon implicite
nom_de_la_variable= valeur ;
Les objets
Les pages HTML sont divisées en objets prédéfinis juxtaposés
ou imbriqués les uns dans les autres ex. fenêtres,
documents, formulaires, contrôles de formulaires, etc...
Hiérarchie: les objets sont juxtaposés ou imbriqués les uns
dans les autres
Chaque objet possède un nom, des attributs et
(éventuellement) des méthodes
Accès à un objet par la notation "point" :
nom_de_l'objet.nom_de_la_propriété
Exemples : o.monTexte.value
document.form.radio[0].checked
Les objets (suite)
Les objets de JavaScript, sont des entités appartenant au monde
des navigateurs et du langage. Ils sont:
 Soit prédéfinis dans le langage
 Soit créés par le programmeur
Par exemple, le navigateur utilisé pour voir une page est un objet
qui s'appelle "navigator"
La fenêtre du navigateur dans laquelle s'affiche une page HTML,
est un objet appelé "window"
La page HTML elle-même est un objet appellé "document"
Un formulaire est aussi un objet appelé "form"
Un lien hypertexte est un objet appelé "link"
etc...
Les objets (suite)
document.write("<BODY BGCOLOR="#FFFFFF");
document.bgColor="white";
document.bgColor="#FFFFFF"; // couleur d’arrière
plan

document.getElementById('par').innerHTML =
'<b>modification du texte</b>';
…
<p id ="par">test</p>
Boites de dialogues
 alert : ouvre une petite fenêtre avec le texte indiqué et un bouton OK
 qui reste ouverte jusqu'au clic de l’utilisateur sur le bouton
 alert (Message à afficher)
 prompt (=boite de saisie) : contient 2 boutons : OK et ANNULER
(ouCancel)
 prompt ( message [,texte d'entrée par défaut] )
 ex. : var permis = prompt (‘Possédez-vous le Permis de conduire ?’,’Oui’);
 confirm (=boite de message)
 affiche le message passé entre les parenthèses
 Comporte 2 Boutons (OK et ANNULER (ou Cancel) )
 Retourne VRAI (true) si l'utilisateur clique sur OK et FAUX (false) sil
clique sur ANNULER
 ex. reponse = confirm(‘Voulez-vous tester ?’) ? return true : return false ;
Le test conditionnel
 if (Type="Ens") {
window.location="Enseignant.htm";
} else {
window.location="Etudiant.htm";
}
Les structures de boucles
 function somme(N) {
var sum=0;
for (var i=1;i<=N;i=i+1) {
sum=sum+i;
}
alert("Somme de 1 à "+N+" = "+sum);
}
Les structures de boucles (suite)
 function demander() {
var nb=0;
while (nb<=100) {
nb=prompt("Entrez un nombre supérieur à 100");
}
alert("Merci !");
}

Vous aimerez peut-être aussi