docJavascript - UFR de Mathématiques et Informatique
download 
Plainte Transcription
Javascript - UFR de Mathématiques et Informatique
Javascript
Gaël Mahé
UFR math-info
automne 2004
Qu'est-ce que javascript ?
Objectif = dynamiser html :
Ø Adapter la mise en page
Ø Ouvrir de nouvelles fenêtres
Ø Réagir à des actions de l'utilisateur
Ø Traiter des infos saisies par l'utilisateur
localement,
sur le client
2
Insertion des scripts dans html
<html>
<head>
<script language="javascript">
function nomFonction()
{code javascript}
</script>
</head>
OU
<script src="fichier.js">
</script>
<body>
…
function nomFonction()
<script>
{code javascript}
// code javascript,
// avec appel de la
// fonction
fichier.js
</script>
OU
…
</body> </html>
<a href="javascript:nomFonction()"> un lien </a>
URL javascript
3
Variables et types simples
entiers : décimal (1223), octal (0776) et hexadécimal (0x12ED)
5 types primitifs simples
: 2.5e-3
Typage dynamique. Ex :
réels : -2.5,
• number
var toto = 10; // type number
• boolean
true / false
...
• string
toto = 'bonjour'; // -> type string
• null
• undefined
<script>
var text_1 = "Il demanda \"Ca va ?\" ";
var text_2 = "Elle répondit \" Oui \" ";
document.write(text_1 + "<br>" + text_2);
</script>
Il demanda "Ca va ?"
Elle répondit "Oui"
4
Tableaux
Déclaration :
var Tableau = new array(12); OU var Tableau = [12,,14,6,4];
Exemple :
<script language="javascript1.3">
var Tableau = new Array()
Tableau[0] = 'debut'; Tableau[1] = 'milieu'; Tableau[2]= 'fin'
document.write('La taille de ce tableau est : ' + Tableau.length)
</script>
Tableaux multidimensionnels :
var matrice=new Array(2) ;
matrice[0]= new Array(2) ; matrice[1]=new Array(2) ;
matrice[0][0] = 1 ; matrice[1][1] = 1 ;
Tableaux hétérogènes :
Tableaux associatifs :
var t = [2, "lettre", [a,b] ]
t["Gaston"]="Lagaffe"
5
Instructions de contrôle (1)
if (condition)
{
instruction1
……..
instructionp
}
else {
instruction1
……..
instructionp
}
switch (expression) {
case val1: instruction1; break ;
…………
case valn: instructionn; break ;
default: instructiondefaut }
Exemple :
<script>
var chiffre = 2
switch (chiffre) {
case 1: document.write('Un'); break ;
case 2: document.write('Deux'); break ;
case 3: document.write('Trois'); break ;
default: document.write('Ce n\' est pas
un chiffre < 4') }
</script>
6
Instructions de contrôle (2)
while (condition)
{ instruction1 ;
do { instruction1 ;
while (condition)
…….. ; instructionp }
…….. ;
instructionp ;}
for (initialisation ; test ; incrémentation)
{
instruction1 ;
…….. ; instructionp ;
}
Exemple :
<script language="javascript" >
var i ;
for(i=5 ; i<=10 ; i++) {document.write(i + "<br>")}
</script>
7
Les fonctions (1)
Déclaration
function nomfonction(arg1, …, argn)
{
instruction1 ;
……
instructionp ;
return valeuraretourner ;
}
Ex :
<head> <script type="text/javascript" >
function salutation(){document.write("Bonjour!")}
</script> </head>
Appel :
<body> Voici un résultat :
<script>salutation()</script>
</body> </html>
ou
<body>Voici un résultat:
<a href="javascript:salutation()">
plus ?</a>
</body>
8
Les fonctions (2)
Portée des variables. Ex :
<script language="javascript1.4">
var x=’dehors’
function essai()
{var x=’dedans’ ; document.write(x) ;}
document.write(x) ; essai() ;
</script>
Tableau des arguments : arguments[ ]
function myConcat(separateur)
{resultat="" ;
// Initialisation de la boucle
for (i=1; i<arguments.length ; i++)
{ resultat += arguments[i] + separateur }
return resultat
}
Application : myConcat(", ","red","orange","blue")
retourne "red, orange, blue, "
9
Événements (1)
Evénement =
• erreur de l'interpréteur Javascript
• écoulement d'un laps de temps (minuterie)
• action de l'utilisateur
Détection par le navigateur
Traitement par un gestionnaire d'événement :
<nomBalise
onEvénement = "code JS à exécuter" >
10
Événements (2)
html> <head> <title>rollover</title>
<body>
<table bgcolor="#FF6600" align="center">
<tr>
<td> <img src="image_1.gif" name="image1" border="0"></td>
<td rowspan="2"><img src="image_defaut.gif"
name="centrale"></td>
<td> <img src="image_3.gif" name="image3" border="0"></td>
</tr>
<tr>
<td> <img src="image_2_nb.gif" name="image2"
border="0"></a></td>
<td> <img src="image_4_nb.gif" name="image4"
border="0"></a></td>
</tr> </table> </body> </html>
11
Événements (2)
<html> <head> <title>rollover</title>
<script>
function redim() {self.resizeTo(400, 200);}</script>
</head>
<body onload= redim()>
<table bgcolor="#FF6600" align="center">
<tr>
<td><a href="#" onClick="document.centrale.src='image_1G.gif'"
onMouseOver=document.image1.src="image_1C.gif"
onMouseOut=document.image1.src="image_1.gif">
Modèle événement :
<img src="image_1.gif" name="image1" border="0">
• condition spéciale : clic
</a></td>
• attribut : onClick
<td rowspan="2"><img src="image_defaut.gif" name="centrale">
</td>
• script gestionnaire : " ... "
...
• objet cible : document.centrale
• contrôle donné à l'interpréteur
• donnée d'accompagnement de l'événement :
12
image_1G.gif
Objets (1)
Définition : objet ≈ ensemble de propriétés et de méthodes
Ex :
function f_disbonjour()
{document.write(" Bonjour, <br /> ") ;}
déclaration
var personne = new Object ;
personne.nom = ‘dupont’ ;
propriétés
personne.age = 32 ;
personne.disbonjour = f_disbonjour ; // Définition d'une méthode
...
personne.disbonjour()
// Appel de la méthode
OU :
var personne = {nom:'dupont', age:32, disbonjour:f_disbonjour
13
Objets (2)
Constructeurs
function Constructeur(valeur_Propriété_1, …., valeur_Propriété_n)
{
this.Propriété_1 = valeur_Propriété_1
……………..
this.Propriété_n = valeur_Propriété_n
}
Ex :
function Employe(nom, age)
{this.nom = nom ;
this.age= age ;}
définition du constructeur
...
var personne1 = new Employe(‘Alain’,47) ; construction d'un objet
14
Objets (3)
<html> <head>
<script>
// Constructeur de la "classe" Individu
function Individu(nom, adresse) {
this.nom = nom;
this.adresse = adresse;
this.afficher = f_afficherIndividu; }
// fonction définissant la méthode afficher
function f_afficherIndividu()
{ document.write(this.nom+" habite "+ this.adresse);}
// Instanciation de deux objets Individu (as et mm)
as = new Individu("Seigneur","rue Tabaga") ;
mm = new Individu("LaMenace","Bd du crime");
</script></head>
<body> // Appels des méthodes
<script> as.afficher();</script>
</body> </html>
Seigneur habite rue Tabaga
15
Objets prédéfinis
Boolean
Ex : var x = new Boolean(false) ;
1 méthode : toString()
Number
Ex : var x = new Number(5) ;
propriétés : MAX_VALUE,NaN,...
Math
1 seul objet math
intérêt : accès aux constantes et fonctions mathématiques :
Ex : PI, sqr(), log()...
→ Math.PI, Math.log(2), Math.sqr(3)
16
Objets prédéfinis : Array
Déclaration : tab = new Array(); OU tab = {element_1,...,element_n};
→ Objets et tableaux sont interchangeables
Ex :
Tab = new Array()
→ Tab.x = 1 OU Tab[‘x’] = 1
Obj = new Object
→ Obj[‘x’]= 1 OU Obj.x = 1
Conséquence : parcours des propriétés d'un objet
AS = new Individu("Seigneur","rue Tabaga") ;
nom = Seigneur
for (var i in AS)
{document.write(i+"="+obj[i]+"<br />");} adresse = rue Tabaga
Méthodes :
concat(), join(), pop(), shift(), reverse(), sort()
Propriété :
length
17
Objets prédéfinis : String
Méthodes pour l'affichage:
bold() italics() sub() sup() fontcolor() fontsize()
Ex1 : document.write(texte.fontsize(10))
Ex2 : document.write(texte.bold().fontsize(10))
Méthodes pour la manipulation : Ex:
citation = "Eureka";
citation.charAt(4) = k
citation.indexOf("ka") = 4
citation.indexOf("ki") = -1
citation.toLowerCase() ="eureka"
citation.substring(1,4) + citation.charAt(5) = ureka
citation.split("e") = { "ur", "ka"}
18
Objets prédéfinis : Date
Ex : October 29, 2004, 09:00:00
Création :
today = new Date()
unJour = new Date(100000)
PremierMai2005 = new Date(2005,4,1,9,18,37)
PremierMai2005 = new Date("may, 2005, 1")
Méthodes :
Lecture d'éléments de la date :
Ex : getDay()
Modification d'éléments de la date :
Ex : setHours()
Conversion pour l'affichage :
Ex : toLocaleString() ToGMTString()
19
Modèle objet navigateur (1)
<html>
<body>
<form>
<radio> etc
20
Modèle objet navigateur (2)
Window
Textarea
Frame
D o cument
Location
History
Link
Image
Form
Area
......
Text
Submit
Radio
Button
Select
................
Ex : désignation du 1er bouton radio du 1er formulaire :
(window).document.form[0].radio[0].
OU, si form[0] défini par <form id="premier_formulaire"> :
(window).document.premier_formulaire.radio[0].
21
Modèle objet navigateur (3) :
Objets navigator et screen
Navigator :
Propriétés : appName appVersion language platform ...
Screen :
Propriétés : top width height availWidth availHeight ...
22
L'objet document
Window
Frame
Textarea
Document
Location
History
Link
Image
Form
Area
......
Text
Submit
Radio
Button
Select
................
Propriétés :
alinkColor linkColor vlinkColor bgColor fgColor
lastModified title cookie location
23
L'objet document
Méthodes :
<html> <head>
<script language="javascript">
function coucou()
{
var texte = "<html> <body> Salut ! </body> </html>" ;
var win = open("","PageBlanche"); // ouverture page blanche
win.document.open() ;
// ouverture du flux d'affichage
win.document.write(texte) ; // écriture du contenu
win.document.close() ; // ferme le flux d'affichage
}
</script> </head>
<body>
<form>
<input type="button" value="coucou" onclick="javascript:coucou()" />
</form>
</body></html>
24
Le modèle objet document (DOM)
DOM = représentation de l'objet document sous forme d'arbre
→ balises HTML et texte entre 2 balises = objets node
Objectif : rendre chaque élément accessible
(accessoirement, éviter les écritures du type :
document.formulaire.liste.options[i].value )
Méthodes d'accès de l'objet document à ses nœuds :
getElementById(), getElementsByName(),
getElementsByTagName(), getSelection()
25
DOM / ex1 : modification d'attributs
<html><head> <script type="text/javascript">
function aligner(comment)
{document.getElementById("indecis").align =comment;}
</script></head>
<body>
<h1 id="indecis">Où est donc ma place?</h1>
<a href="javascript:aligner('left')">à gauche?</a><br>
<a href="javascript:aligner('center')">au centre?</a><br>
<a href="javascript:aligner('right')">à droite?</a><br>
</body></html>
26
<body>
<p id="letexte">
Ex2 DOM : accès
aux noeuds enfants
Texte avec
<b>
des caractères gras
et
<u>
du texte souligné
<html><body>
<p id="letexte">Texte avec <b>des caractères gras</b> et <u>du texte
souligné</u></p>
<script type="text/javascript">
var nombre = document.getElementById("letexte").childNodes.length;
var premier = document.getElementById("letexte").firstChild.nodeValue;
var deuxieme =
document.getElementById("letexte").childNodes[1].childNodes[0].nodeValue;
document.write("Nombre de noeuds enfant: <b>" + nombre +"<\/b><br>")
document.write("Valeur du premier noeud enfant: <b>" + premier
+"<\/b><br>");
document.write("Valeur du fils deuxieme noeud enfant: <b>" + deuxieme
+"<\/b><br>");
</script>
</body></html>
27
Formulaires
Ex :
<body>
<form name="formulaire">
<input type="text" name="un_champ_txt">
Accès au formulaire : document.form[0] OU document.formulaire
Accès à un élément : document.formulaire.elements[0]
OU document.formulaire.un_champ_txt
Méthodes : submit() et reset()
→ événements onsubmit et onreset
28
Formulaires : champs input
text, button, radio, checkbox, submit, reset
Propriétés : name type value defaultvalue size maxlength
checked disabled readOnly class style
Méthodes : focus() et blur()
→ événements onfocus et onblur
Ex :
<html><head><script>
function testerRadio(OperSys)
{for (var i=0; i<OperSys.length;i++)
{if (OperSys[i].checked) alert("Système = "+OperSys[i].value)}}
</script> </head>
<body> <form name="fo">
<input type="radio" name="os" value="Windows NT" />Windows NT
<input type="radio" name="os" value="Linux" />Linux
<input type="radio" name="os" value="Autre" />Autre
<input type="button" value="Tester"
OnClick="testerRadio(this.form.os)">
29
</form> </body></html>
Formulaires : champs select
Propriétés de select :
name
Nom de la liste
size
Nombre de lignes à afficher
multiple
Sélection multiple autorisée
disabled
Grisage de la liste
class
Classe de feuille de style
style
Style de la liste
selectedIndex
indice de la ligne courante
options
tableau des options
Propriétés de options :
defaultSelected
selected
Propriétés de options[i] :
option choisie par défaut
option sélectionnée
value
Valeur d'une ligne
text
Libellé d'une ligne
length Nombre de lignes
Méthodes : add() remove() focus() blur()
30
Formulaires : champs select : ex
<html><head> <script>
function ajouter()
{
// création d'une nouvelle valeur d'option
nouvel_element = new Option(document.formulaire.nouveau.value);
// Positionnement de la nouvelle option à la fin de la liste
document.formulaire.choix.options[document.formulaire.choix.length]
= nouvel_element ;
// Réinitialisation du champ texte
document.formulaire.nouveau.value = "";
}
</script></head>
<body>
<form name="formulaire" >
<select name="choix" size="8">
<option>Un élément</option>
</select>
<p /> Entrer le nouvel élément à ajouter à la liste :
<input type="text" name="nouveau"><br />
<input type="button" value="Ajouter" onClick="ajouter()">
</form> </body></html>
31
Les fenêtres : objet window
Propriétés
name status defaultStatus
Evénements rattachés (à mettre dans la balise body)
onload onunload onfocus onblur onresize
Exemple
<html>
<head>
<title>Test</title></head>
<script> window.defaultStatus = "le statut par defaut" </script>
<body>
<input type="button" value="changer statut"
onClick="window.status='le nouveau statut';return true">
</body></html>
32
Les fenêtres : méthodes de base
focus() blur()
moveBy(x,y) moveTo(x,y)
resizeBy(x,y) resizeTo(x,y)
back(), forward(), stop(), home()
print()
Ex : <html> <head> <script>
function shake(n)
{ for (i = 10; i > 0; i--)
{for (j = n; j > 0; j--)
{self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
</script> </head>
<body><form>
<input type=button onClick="shake(10)" value="Secouez l'écran!">
</form>
</body> </html>
33
Minuteries
Méthodes de l'objet window :
Déclenchement : setTimeout(nom_fonction, temps en ms)
setInterval(chaine de la fonction, intervalle en ms)
Arrêt : clearTimeout(nom_minuterie)
clearInterval(nom_minuterie).
Ex : <html><head<script>
function Couleur()
{ if(couleur==1) { document.bgColor="yellow"; couleur=2; }
else
{ document.bgColor="aqua"; couleur=1; }
i = i + 1;
if(i >= 10)
window.clearInterval(actif) ;
}
</script </head>
<body> <script>
var actif = window.setInterval("Couleur()",1000);
var i = 0, couleur = 1;
</script></body></html>
34
Open() et close()
Ouverture :
fenetre = window.open(URL, nom_fenetre, options)
Fermeture :
fenetre.close()
Ex :
Fichier popup.html : <html> <body> fenêtre secondaire </body> </html>
Fichier main.html :
<html> <body>
FENETRE PRINCIPALE<br />
avec ouverture d'une fenêtre secondaire
<a href="javascript:win.close();"> Fermer le popup </a><br>
<a href="#" onClick="win=open('popup.html','popup',
'resizable=no,width=200,height=200');"> Ouvrir le popup
</a>
</body> </html>
35
Multifenêtrage
<html><head><script>
function coucou_1() {return "<br> coucou produit par la 1ere
fenetre<br>"}
</script> </head>
<body><script>
win2=open('multiwin2.html','fenetre 2',
'width=400,height=300,left=300,top=200,alwaysraised=yes');
</script>
<input type="button" value="action sur fenetre 2"
onClick="win2.bonjour_2();">
</body> </html>
1ere fenêtre : multiwin1.html
<html> <head> <script>
function bonjour_2() {document.getElementById("bonjour").style.display='';}
</script> </head>
<body> <script>
chaine = opener.coucou_1(); document.write(chaine);
</script>
<span id="bonjour" style="display:none">
Bonjour activé par la 1ere fenetre
</span></body> </html>
2e fenêtre : multiwin2.html
36
Multifenêtrage
Pour les frames :
• accès aux cadres enfants par leurs noms
• accès au cadre parent par parent
• accès à la fenêtre principale par top
37
Boîtes de dialogue
alert('Chaîne de caractères');
confirm('Chaîne de caractères');
retourne TRUE ou FALSE
confirm('Chaîne',
'réponse par defaut);
retourne la chaîne saisie
38
Sous-objets de l'objet window
history
location
document
Ex :
<a href= « # » onclick= « window.history.go(-1) »>
Pour revenir au contenu précédent </a>
<a href= « # » onclick= « window.location.reload() »>
Pour rafraîchir la page courante à partir de la mémoire cache </a>
<a href= « # » onclick= « window.location.reload(true) »>
Pour recharger la page à partir du site web distant </a>
<a href= « # » onclick= « window.location.replace(url)»>
Pour rafraîchir la page courante mais en effaçant l'historique
(le bouton Back est désactivé) </a>
39
Les cookies
Cookie = informations placées par une page web sur le disque de
l'utilisateur et récupérées aux connexions suivantes
Intérêt :
• Faciliter navigation
• Accélérer traitements
Inconvénient :
Utilisateur doit accepter accès à son disque
40
Structure d'un cookie
Cookie défini par :
• nom associé à 1 valeur
• date = chaîne "Day, JJ-MM-AA HH-MM-SS GMT"
• répertoire de validité
• serveur de validité
• attribut de sécurité si cookie autorisé uniquement pour https
41
tomate
2
~~local~~/D:\donnees\Enseignement\LicPro\demos_C5\
1088
3829776384
29683671
Création d'un cookie526890064
:
29672341
document.cookie *= "nom=valeur; expires=date;
jambonpath=le_repertoire; domain=le_serveur;
[secure]";
3
~~local~~/D:\donnees\Enseignement\LicPro\demos_C5\
1088
Ex :
3829776384
document.cookie =29683671
"tomate=2;date=Sat, 01-Jan-2005 08:00:00 GMT";
document.cookie =791270064
"jambon=3;date=Sat, 01-Jan-2005 08:00:00 GMT";
29672341
Fichier de cookies créé par IE,
*
identifié par domain et path
Manipulation des cookies
Accès aux cookies :
les_cookies = document.cookie ;
chaîne avec tout le contenu du fichier...
42
Fonctions de création et lecture
var dateExp="Sat, 01-Jan-2005 08:00:00 GMT"; // date d'expiration
function newCookie(name,value)
{ document.cookie=name+"="+value+";expires="+dateExp+"secure";}
function getCookie(nomCookie)
{ var cookieTrouve=false; var debut=0; var fin=0;
var ch=document.cookie;
var i=0;
while (i<=ch.length && !cookieTrouve) {
debut=i; fin=debut+nomCookie.length;
if (ch.substring(debut,fin)==nomCookie)
{cookieTrouve=true;}
i++; }
if (cookieTrouve) {
debut=fin+1; fin=document.cookie.indexOf(";",debut);
if(fin<debut) fin=document.cookie.length;
return document.cookie.substring(debut,fin); }
return "";
}
43
Ex d'utilisation d'un cookie
<html><head><script LANGUAGE="JavaScript">
function recFavoritePage()
{ var URL=this.location.href ; //URL de la page en cours
newCookie('Favorite',URL); //mémorisation dans le cookie 'Favorite'
}
</script></head>
<body> Une page du site<br>
<a href="javascript:recFavoritePage()">
Cliquez-ici si cette page est votre favorite</a></body><html>
<html><head><script LANGUAGE="JavaScript">
function goFavoritePage()
{var URL=getCookie('Favorite'); //URL de la page favorite
if (URL!=""){document.location.href=URL ; //Saut vers cette
page}
}
</script> </head>
<body> La page d'accueil <br>
<a href="page1.html"> page 1 </a> <br>
...
<a href="pageN.html"> page N </a> <br>
<a href="javascript:goFavoritePage()">
Votre page favorite</a></body><html>
44
