• dans la balise script> • dans un fichier externe • grâce aux

Transcription

javascript
Pourquoi javascript ?
javascript (Netscape)
Ajout du contrôle au niveau du client
initialement LiveScript, rien à voir avec Java
• Exemple :
• contrôle des entrées du formulaire avant sa soumission.
Extension du langage html incluse dans le code.
Le code javascript est directement écrit dans la page html.
Aucune confidentialité au niveau des codes (ceux-ci sont visibles).
javascript est sensible à la casse
Chaque instruction se termine par un point-virgule.
Scripts embarqués dans des documents HTML
• Contrôle des ressources du client
• documents, formulaires, applets, …
• moins d’intervention du Serveur WWW
• Génération dynamique de documents DHTML
DOM : Document Object Model (W3C)
description « objet » d ’un document XHTML exploitable par javascript
mais IE et Mozilla ont chacun leur modèle de document
05/03/2007
Base de données 1 GMT/FP
1
A quoi ressemble un script?
05/03/2007
2
Ajout de commentaire dans le code
Script : portion de code qui vient s'insérer dans une
page html.
Ne pas confondre
les balises de commentaire html
les caractères de commentaire javascript (documente le script) !
Code du script non visible dans la fenêtre du navigateur.
Pour mettre en commentaire toute une ligne on utilise le double slash :
// Tous les caractères qui suivent sont ignorés
Le code est compris entre des balises spécifiques
Pour mettre en commentaire une partie du texte, on utilise /* et */ :
/* Toutes les lignes comprises entre ces repères sont
ignorées par l'interpréteur de code */
<script type="text/javascript" >
Placez ici le code de votre script
</script>
05/03/2007
La mise en commentaire d'une partie du code est utile pour la mise au point des programmes
(permet d'éliminer provisoirement sans effacer).
3
05/03/2007
4
Inclure du javascript dans une page html
Un exemple de javascript
Afficher une boite de dialogue après chargement d'une page html
• dans la balise <script>
• dans un fichier externe
• grâce aux événements
<html><head>
<title> Voici une page contenant du
javascript </title> </head>
<body>
alert("Voici un message d’alerte !");
// et voici un commentaire
</script> </body> </html>
05/03/2007
5
05/03/2007
6
1
Dans la balise script
Dans un fichier externe
Une page Web est traitée de haut en bas.
Il est possible de mettre les codes de javascript dans un
fichier externe (nom_fichier.js).
Si l'appel d'une fonction se situe avant la fonction dans
la page, il est probable que cela génèrera une erreur
(fonction non chargée).
<script type="text/javascript"
src="chemin/nom_fichier.js">
</script>
On place généralement le maximum d'éléments du
script dans l'en-tête (éléments situés entre les balises
<head> et </head>).
Si celui-ci n'existe pas, le navigateur exécutera le
code inséré entre les 2 balises.
Cette solution est à privilégier en cas de validation de la page
05/03/2007
7
Grâce aux évènements
05/03/2007
8
Objets dans une page html
évènement : action de l'utilisateur
ex : clic d'un bouton de la souris
javascript traite les éléments qui s'affichent dans un
navigateur comme des objets.
Les évènements javascript sont placés dans le corps de
la page comme attributs d'une balise html.
Ces objets sont classés selon une hiérarchie.
<balise evenement = "action">
Des propriétés et des méthodes leur sont associées.
<body onload = "verifie();" >
05/03/2007
9
10
Un formulaire peut contenir :
un champ de texte (textarea et nommé champ_texte).
Objet le plus élevé dans la hiérarchie :
objet window
Le champ de texte est repéré par :
window.document.forms[0].champ_texte
Dans la fenêtre s'affiche une page :
objet document
Le champ de texte a comme propriétés parmi d’autres :
value : le texte contenu dans le champ
size
: la taille du champ de texte
Cette page peut contenir plusieurs objets :
formulaires forms[n]
images
images[m]
Quelques objets de formulaire
Quelques objets dans une page
05/03/2007
05/03/2007
On peut modifier le texte du champ de texte champ_texte par :
window.document.forms[0].champ_texte.value
11
05/03/2007
12
2
05/03/2007
13
05/03/2007
14
Document simple
<html> <body>
<p><img src="bienvenue.gif"
height="69" width="184"
id=“logo” /></p>
<form id="formulaire">Nom:<br />
<input type="text"
id="nom" value="" /><br />
Mot de Passe:<br />
<input type="password“
id="motpasse" value="" />
<input type="button"
value="Valider" id="bouton"
onclick="verif(this.parent)" />
</form>
</body></html>
05/03/2007
15
Représentation arborescente d’objets d’un document
05/03/2007
16
Le concept de variable
Exemple (script relatif au document)
passwd = document.forms[0].elements[1].value;
if(passwd = =‘toto’)
{document.images[0].src = "iconlog.gif";}
else {document.images[0].src = "iconnotlog.gif";}
Une variable est définie par
1.
2.
3.
un nom (identificateur)
un type
une valeur.
Les noms de variables doivent répondre à certains critères :
• un nom de variable doit commencer par une lettre (majuscule
ou minuscule) ou un "_" ;
• un nom de variable peut comporter des lettres, des chiffres et
les caractères _ et & (espaces non autorisés !) ;
• Les noms de variables ne peuvent pas être un mot réservé.
05/03/2007
17
05/03/2007
18
3
La déclaration de variables
Les types de données dans les variables
La déclaration des variables peut se faire de deux façons :
Pas de déclaration du type de variable utilisée ...
explicite, en faisant précéder la variable du mot clé var :
var chaine= "bonjour"
4 types de données :
• nombres : entiers ou à virgules
• chaînes de caractères (string) : suite de caractères
• booléens : variables à deux états
• variables de type null : pas de données
implicite, en écrivant directement le nom de la variable suivie du
caractère = et de la valeur à affecter :
chaine= "bonjour"
Il est plus rigoureux et plus rapide à l’exécution de déclarer les variables de façon
explicite avec le mot var.
On peut déclarer plusieurs variables avec le même mot-clé
var
var i = 0, age = 15, nom = "Durand"
05/03/2007
19
Nombre entier
05/03/2007
20
Nombres à virgules (float)
nombre entier :
nombre à virgule flottante :
peut être exprimé dans différentes bases
décimale :
peut être représenté de différentes façons
l'entier est représenté par une suite de chiffres (de 0 à 9) ne
devant pas commencer par 0
entier décimal
895
nombre comportant un point (et non une virgule)
845.32
fraction
27/11
nombre exponentiel
2.75e-2
35.8E+10
hexadécimale :
l'entier est représenté par une suite de chiffres (de 0 à F)
devant commencer par 0x ou 0X
octale :
l'entier est représenté par une suite de chiffres (de 0 à 7)
devant commencer par 0
05/03/2007
21
Chaîne de caractères (string)
05/03/2007
22
Booléens (booleans)
Chaîne de caractère :
suite de caractères encadrée par des guillemets simples (') ou doubles ("),
Caractères spéciaux :
\b : touche de suppression
\n : retour à la ligne
\t : tabulation
\' : guillemets simples
booléen :
variable servant à évaluer une condition, il
peut donc avoir deux valeurs
\f : formulaire plein
\r : appui sur la touche ENTREE
\" : guillemets doubles
\\ : caractère antislash
Ainsi, si on veut stocker la chaîne suivante dans la variable Titre :
Qu'y a-t-il dans "c:\windows\"
true ou 1
false ou 0
Il faudra écrire dans le code javascript :
Titre = "Qu\'y a-t-il dans \"c:\\windows\\\"";
ou
Titre = 'Qu\'y a-t-il dans \"c:\\windows\\\"';
05/03/2007
23
05/03/2007
24
4
L'objet string
Propriété de l'objet string
L'objet string a une seule propriété :
length retourne la longueur d'une chaîne de caractères.
string : chaîne de caractères
On peut directement passer la chaîne de caractères comme objet.
Les propriétés et méthodes de l’objet
String permettent la manipulation de
chaînes de caractères.
x = ('chaine de caracteres').length;
On peut aussi utilser une propriété d’une variable de type string
x = nom_chaine.length ;
05/03/2007
25
Les méthodes de l'objet String
05/03/2007
26
Méthode charAt()
chaîne de caractères : tableau de n caractères, la position du premier caractère est 0
Une chaîne ayant n caractères aura son dernier caractère en position n-1
Deux syntaxes pour la méthode charAt()
x = "chaine de caractères"; Resultat = x.charAt(position);
Resultat = charAt("chaine de caractères", position);
charAt(chaîne, position) ou chaîne.charAt(position)
position : entier qui représente la position du caractère à récupérer, compris entre 0
Retourne le caractère situé à la position donnée en paramètre
indexOf(sous-chaîne, position)
et n-1 (où n représente la longueur de la chaîne).
Retourne la position d'une sous-chaîne (lettre ou groupe de lettres) dans une chaîne de
caractère, en effectuant la recherche de gauche à droite, à partir de la position spécifiée
en paramètre.
lastIndexOf(sous-chaîne, position)
similaire à indexOf(), à la différence que la recherche se fait de droite à gauche :
Si position est négatif ou supérieur ou égal à la longueur, charAt() renvoie une
chaîne de longueur nulle.
Chaine = 'Comment ça marche?'
var Resultat = charAt(Chaine,0) donne 'C'
var Resultat = charAt("Comment ça marche?", 1) donne 'o'
var Resultat = Chaine.charAt(17) donne '?'
var Resultat = ("Comment ça marche?").charAt(18) donne ""
substring(position1, position2)
Retourne la sous-chaîne (lettre ou groupe de lettres) comprise entre les positions 1 et 2
données en paramètre.
toLowerCase()
Convertit tous les caractères d'une chaîne en minuscules
toUpperCase()
var Resultat = charAt(Chaine, -1) donne ""
Convertit tous les caractères d'une chaîne en majuscules
05/03/2007
27
Méthode indexOf()
05/03/2007
28
Méthode lastIndexOf()
indexOf() permet de rechercher (de gauche à droite) la position d'une sous-chaîne
dans une chaîne de caractères.
Chaine = "chaine de caractères";
Sous-Chaine = "sous-chaîne de caractères";
Resultat = Chaine.indexOf(Sous-Chaine,position);
La position indiquée en argument permet de déterminer la position du caractère à
partir duquel la recherche est effectuée.
L'argument position doit être compris entre 0 et n-1.
Si cet argument est omis, la recherche débutera à la position 0.
Lorsque la recherche est infructueuse, la méthode indexOf() renvoie la valeur -1.
lastIndexOf() permet de rechercher (de droite à gauche) la position d'une souschaîne dans une chaîne de caractères.
Sous-Chaine = "sous-chaîne de caractères";
Resultat = Chaine.lastIndexOf(Sous-Chaine,position);
La position indiquée en argument permet de déterminer la position du caractère à
partir duquel la recherche est effectuée (vers la gauche pour cette méthode).
L'argument position doit être compris entre 0 et n-1.
Si cet argument est omis, la recherche débutera à partir de la fin de la chaîne.
Si la recherche est infructueuse, la méthode lastIndexOf() renvoie la valeur -1.
Chaine = 'Comment ça marche?' Sous_Chaine = 'mar'
var Resultat = Chaine.indexOf(Sous_Chaine, 6) donne '11'
var Resultat = Chaine.indexOf(Sous_Chaine) donne '11'
var Resultat = Chaine.indexOf(Sous_Chaine, 11) donne '11'
var Resultat = Chaine.indexOf(Sous_Chaine, 12) donne '-1'
var Resultat = Chaine.indexOf(Sous_Chaine, -1) donne "-1"
var Resultat = Chaine.indexOf(Sous_Chaine, 15) donne "-1"
Chaine = 'Comment ça marche?' Sous_Chaine = 'mar'
Chaine.lastIndexOf(Sous_Chaine,
Chaine.lastIndexOf(Sous_Chaine)
6) donne '-1'
donne '11'
11) donne '11'
12) donne '11'
-1) donne "-1"
Chaine.lastIndexOf(Sous_Chaine, 19) donne "-1"
05/03/2007
29
05/03/2007
30
5
Méthode substring()
Méthodes toLowerCase() et toUpperCase()
substring() permet de récupérer une sous-chaîne dans une chaîne de caractères en précisant
en paramètres les positions des caractères entre lesquels la sous-chaîne doit être récupérée.
Resultat = Chaine.substring(position1, position2);
Les positions indiquées permettent de déterminer les positions des caractères entre lesquels la
sous-chaîne doit être récupérée. position1 et position2 doivent être compris entre 0 et n-1.
• Si l'argument position1 est plus petit que l'argument position2, la méthode substring() retourne la souschaîne commençant à la position 1 et s'arrêtant au caractère situé avant position 2
• Si l'argument position1 est plus grand que l'argument position2, la méthode substring() retourne la souschaîne commençant à la position 2 et s'arrêtant au caractère situé avant position 1
• Si l'argument position1 est égal à l'argument position2, la méthode substring() retourne une chaîne vide
toLowerCase() permet de convertir toutes les lettres d'une chaîne
en minuscules, les autres caractères sont inchangés.
Chaine = 'Comment ça Marche?'
var Resultat = Chaine.toLowerCase donne 'comment ça marche?'
toUpperCase() permet de convertir toutes les lettres d'une chaîne
en majuscules, les autres caractères sont inchangés.
Chaine = 'Comment ça Marche?'
var Resultat = Chaine.toUpperCase donne 'COMMENT ÇA MARCHE?'
Chaine = 'Comment ça marche?'
var Resultat = Chaine.substring(1,5) donne 'omme'
var Resultat = Chaine.substring(6,6) donne ''
var Resultat = Chaine.substring(8,2) donne 'mment '
05/03/2007
31
Qu'est-ce qu'un évènement?
05/03/2007
32
Liste de gestionnaires d’événements
Evènement : action de l'utilisateur pouvant donner lieu à une interactivité.
html ne gère que l'événement clic de souris.
Grâce à javascript, il est possible d'associer des fonctions, des méthodes à
des événements tels que le passage de la souris au-dessus d'une zone, le
changement d'une valeur, …
Un gestionnaire d'événement associe une action à un événement.
onevenement="Action_javascript_ou_Fonction();"
Les gestionnaires d'événements sont associés à des objets et leur code
s'insère dans la balise de ceux-ci.
05/03/2007
33
Objets auxquels on peut associer des événements
onclick
onload
onunload
onmouseover
onmouseout
onfocus
onblur
onchange
onselect
on clique sur l'élément associé à l'événement
onsubmit
on clique sur le bouton de soumission d'un formulaire (qui permet
d'envoyer le formulaire)
05/03/2007
le navigateur charge la page en cours
le navigateur quitte la page en cours
on positionne le curseur de la souris au-dessus d'un élément
le curseur de la souris quitte un élément
on donne le focus à un élément (élément sélectionné actif)
l'élément perd le focus, l'utilisateur clique hors de cet élément
on modifie le contenu d'un champ de données
on sélectionne un texte (ou une partie) dans un champ de type
"text" ou "textarea"
34
Ouverture d'une boite de dialogue lors d'un click
Lien hypertexte
boîte de dialogue : window.alert("Votre Texte");
onclick, onmouseover, onmouseout
Page du navigateur
<html> <head>
<title>Ouverture d'une boite de dialogue lors d'un
click</title> </head>
<body>
<a href="javascript:;" onclick = "alert('Message d\'alerte a
utiliser avec moderation');">Cliquez ici!</a>
</body> </html>
onload, onunload
Bouton, Case à cocher, Bouton radio, Bouton Reset
onclick
Liste de sélection d'un formulaire
onblur, onchange, onfocus
Bouton Submit
Le gestionnaire d'événement onclick est inséré dans la balise de lien hypertexte
onsubmit
<a ...>
On ne désire pas que le lien charge une autre page : il faut insérer "javascript:;" dans l'attribut href. Un
attribut vide risque de révéler le contenu de votre répertoire à vos visiteurs.
Champ de texte et zone de texte
onblur, onchange, onfocus, onselect
05/03/2007
35
05/03/2007
36
6
Qu'est-ce qu'un opérateur?
Changement d’image lors du survol par la souris
Le gestionnaire onmouseover permet de changer d’image au passage de la souris.
Le gestionnaire onmouseout permet de rétablir l'image originale lorsque le curseur
quitte l'image.
opérateurs : symboles qui permettent de manipuler des
variables, ie d’effectuer des opérations, les évaluer…
<html> <head>
<title> Rollover</title> </head>
<body>
<a href="javascript:;"
onmouseover="document.img_1.src='image2.gif';"
onmouseout="document.img_1.src='image1.gif';">
<img id="img_1" src="image1.gif"> </a>
</body> </html>
types d'opérateurs :
• opérateurs
• opérateurs
• opérateurs
• opérateurs
• opérateurs
• opérateurs
de calcul
d'assignation
d'incrémentation
de comparaison
logiques
bit-à-bit
Pour pouvoir associer un événement à une image, il faut que celle-ci soit considérée comme un
lien. Ainsi on place la balise <img ...> entre les balises <a ...> et </a>
05/03/2007
37
Les opérateurs de calcul
05/03/2007
38
Les opérateurs d'assignation
Les opérateurs de calcul permettent de modifier mathématiquement la
valeur d'une variable
On peut écrire l’opération : ajouter une valeur dans une variable et stocker le
résultat dans la variable (x=x+2 par exemple) sous la forme x+=2
+
addition
Ajoute deux valeurs
x+3
+= addition deux valeurs et stocke le résultat dans la variable (à gauche)
-
soustraction
Soustrait deux valeurs
x-3
*
multiplication
Multiplie deux valeurs
x*3
/
division
Divise deux valeurs
x/3
%
modulo
Reste de la division entière
x%3
=
affectation
Affecte une valeur à une variable
x=3
x+=2 équivaut à x=x+2
05/03/2007
-=
soustrait deux valeurs et stocke le résultat dans la variable
x-=2 équivaut à x=x-2
39
Les opérateurs d'incrémentation
*=
multiplie deux valeurs et stocke le résultat dans la variable
x*=2 équivaut à x=x*2
/=
divise deux valeurs et stocke le résultat dans la variable
x/=2 équivaut à x=x/2
05/03/2007
40
Les opérateurs de comparaison
==
Un opérateur de type x++ permet de remplacer des notations
telles que x=x+1 ou bien x+=1
A ne pas confondre avec le signe d'affectation (=)
opérateur d'égalité
Compare deux valeurs et vérifie leur égalité
x==3
1 si x est égal à 3, sinon 0
Vérifie qu'une variable est strictement inférieure à une valeur
x<3
1 si x est inférieur à 3, sinon 0
Vérifie qu'une variable est inférieure ou égale à une valeur
x<=3
1 si x est inférieur à 3, sinon 0
<
opérateur d'infériorité stricte
++
Incrémentation
Augmente d'une unité la variable
x++
<=
opérateur d'infériorité
>
opérateur de supériorité stricte Vérifie qu'une variable est strictement supérieure à une valeur
--
Décrémentation
Diminue d'une unité la variable
x--
x>3
1 si x est supérieur à 3, sinon 0
>=
opérateur de supériorité
Vérifie qu'une variable est supérieure ou égale à une valeur
x>=3
1 si x est supérieur ou égal à 3,sinon 0
Vérifie qu'une variable est différente d'une valeur
x !=3
1 si x est différent de 3, sinon 0
!=
opérateur de différence
05/03/2007
41
05/03/2007
42
7
Les opérateurs logiques (booléens)
Les opérateurs bit-à-bit
Ce type d'opérateur permet de vérifier si plusieurs conditions sont vraies :
Un opérateur bit-à-bit traite ses opérandes comme des données binaires.
Les opérateurs suivants effectuent des opérations bit-à-bit, c'est-à-dire avec des bits
de même poids.
||
OU logique
(condition1)||(condition2))
Vérifie qu'une des conditions est réalisée
&
ET bit-à-bit
9 & 12 (1001 & 1100)
&&
ET logique
(condition1)&&(condition2))
Vérifie que toutes les conditions sont réalisées
|
OU bit-à-bit
9 | 12 (1001 | 1100)
!
NON logique
Inverse l'état d'une variable booléenne (retourne la valeur
1 si la variable vaut 0, 0 si elle vaut 1)
( !condition)
43
Les priorités
Retourne 1 si l'un ou l'autre des deux bits de même poids est à 1
(ou les deux)
13 (1101)
^
OU bit-à-bit
9 ^ 12 (1001 ^ 1100)
05/03/2007
Retourne 1 si les deux bits de même poids sont à 1
8 (1000)
05/03/2007
Retourne 1 si l'un des deux bits de même poids est à 1 (mais pas
les deux)
5 (0101)
44
Structure conditionnelle?
ordre décroissant des priorités de tous les opérateurs
parenthèses
opérateurs unaires
mult,div,modulo
addition,soustraction
décalage de bits
opérateurs relationnels
Égalité
ET binaire
OU exclusif binaire(XOR)
OU binaire
ET logique
OU logique
Affectations diverses
()
++ -- !
* / %
+ << >>
< > <= >=
== !=
&
^
|
&&
||
= += -= *= /= %= ^=
Structure conditionnelle :
instructions qui permettent
de tester si une condition
est vraie ou non
Si plusieurs priorités se trouvent dans la même expression et sont de même niveau, ce sera
l’opérateur le plus à gauche qui sera effectué en premier.
Grâce aux parenthèses qui sont toujours prioritaires, on peut définir l’ordre de calcul des
opérateurs. Les parenthèses rendent un programme plus clair, plus lisible.
05/03/2007
45
L'instruction if
05/03/2007
46
L'instruction if ... else
Exécute une série d'instruction si une condition est
vraie.
if (condition testée)
{liste d'instructions}
L’instruction if ne permet de tester qu'une condition
L’instruction if ... else permet d'exécuter une autre série
d'instruction en cas de non-réalisation de la condition.
la condition doit être entre des parenthèses
if (condition testée)
else
{autre série d'instructions}
Il est possible de définir plusieurs conditions à remplir
avec les opérateurs && et ||.
Par exemple :
if ((condition1)&&(condition2))
teste si les deux conditions sont vraies
if ((condition1)||(condition2))
Les instructions if…else peuvent être imbriquées
teste si l'une ou l'autre des deux conditions est vraie
05/03/2007
47
05/03/2007
48
8
La boucle for
Les boucles
boucles : structures qui permettent
d'exécuter plusieurs fois la même série
d'instructions jusqu'à ce qu'une condition
ne soit plus réalisée.
La boucle for permet d'exécuter plusieurs fois la même série
d'instructions.
for(compteur; condition; modification du compteur)
exemple :
La façon la plus commune de faire une boucle est de
créer un compteur (une variable qui s'incrémente, c'està-dire qui augmente de 1 à chaque tour de boucle) et
de faire arrêter la boucle lorsque le compteur dépasse
une certaine valeur.
05/03/2007
49
L'instruction while
for
for
for
for
(i=0;i<10;i++)
(i=0;i<=10;i++)
(i=1;i<10;i++)
(i=1;i<=10;i++)
05/03/2007
exécute
exécute
exécute
exécute
10 fois la boucle (i de 0 à 9)
50
Il peut être nécessaire de faire sauter à la boucle une ou plusieurs valeurs
sans pour autant mettre fin à celle-ci.
On utilise continue;
Cette instruction exécute la liste d'instructions tant que
la condition est réalisée.
La condition de sortie pouvant être n'importe quelle structure
conditionnelle, les risques de boucle infinie (boucle dont la
condition est toujours vraie) existent, elle peut provoquer un
plantage du navigateur !
51
Arrêt inconditionnel
Exemple :
On veut imprimer pour x allant de 1 à 10 la valeur de 1/(x-7).
x=1;
while (x<=10)
{if (x == 7)
{alert('division par 0');
x++;
continue;}
a = 1/(x-7);
alert(x);
x++;}
05/03/2007
52
La notion de fonction
L'instruction break permet d'arrêter une
boucle (for ou bien while).
fonction : sous-programme qui permet
d'effectuer un ensemble d'instruction par appel
de la fonction dans le corps du programme
principal.
Exemple : Il serait possible de faire arrêter la boucle en cas
d'annulation du dénominateur, pour éviter une division par zéro !
Les fonctions permettent d'exécuter dans plusieurs parties du
programme une série d'instruction (simplicité du code donc taille
for (x=1; x<=10; x++)
{a = x-7;
if (a == 0)
{alert('division par 0');
break; }
alert(1/a);}
05/03/2007
alert(i); dans une boucle est un bon moyen pour vérifier la valeur du compteur pas à pas !
Saut inconditionnel
L'instruction while représente un autre moyen
d'exécuter plusieurs fois la même série d'instructions.
while (condition testée)
05/03/2007
for(i=1; i<6; i++)
{alert(i)}
Toujours vérifier que la boucle a bien une condition de sortie (i.e le compteur s'incrémente correctement)
de programme minimale).
javascript contient des fonctions prédéfinies
mais on peut définir ses propres fonctions.
53
05/03/2007
54
9
La déclaration d'une fonction
Appel de fonction
Pour exécuter une fonction, il faut faire appel à elle
Avant d'être utilisée, une fonction doit être définie
La définition d'une fonction s'appelle "déclaration". Elle se fait grâce au mot clé
function :
nom_fonction();
function nom_fonction(argument1, argument2, ...)
Le mot clé function est suivi du nom que l'on donne à la fonction
Le nom de la fonction suit les mêmes règles que les noms de variables :
Les arguments sont facultatifs, mais les parenthèses doivent rester présentes
Le nombre d'accolades ouvertes (fonction, boucles et autres structures) doit être
égal au nombre de d'accolades fermées !
La même chose s'applique pour les parenthèses, les crochets ou les guillemets !
Une fonction ne s'exécutera pas tant que l'on ne fait pas appel à elle dans la page !
05/03/2007
55
Les paramètres d'une fonction (I)
• le point virgule signifie la fin d'une instruction et permet au navigateur de distinguer les
différents blocs d'instructions
• si des arguments ont été définis dans la déclaration de la fonction, il faudra les inclure lors de
l'appel de la fonction (le même nombre d'arguments séparés par des virgules !)
Une fonction doit être déclarée avant d'être appelée.
Le gestionnaire d'évènement onload (à placer dans la balise body) permet d'exécuter une
fonction au chargement de la page.
<html> <head>
function Chargement() { alert('Bienvenue sur le
site');}
</script> </head>
<body onload="Chargement();">...
</body> </html>
05/03/2007
Les paramètres d'une fonction (II)
Il est possible de passer plusieurs paramètres séparés par des virgules à
une fonction
Autre méthode qui consiste à créer une fonction qui a comme
paramètre le texte à afficher :
Ex : page Web qui affiche une boîte de dialogue avec un texte différent selon le lien
sur lequel on appuie. La méthode de base consiste à faire une fonction pour
chaque texte à afficher :
<html> <head>
<html> <head>
function Affiche1() { alert('Texte1'); }
function Affiche2() { alert('Texte2'); }
</script> </head>
<body >
<a href="javascript:;"onclick="Affiche1();">Texte1</a>
<a href="javascript:;"onclick="Affiche2();">Texte2</a>
</body> </html>
05/03/2007
56
57
Travailler sur des variables dans les fonctions
function Affiche(Texte) { alert(Texte); }
</script> </head>
<body>
onclick="Affiche('Texte1');">Texte1</a>
onclick="Affiche('Texte2');">Texte2</a>
</body> </html>
05/03/2007
58
Le mot-clé this
Portée des variables :
définition comme variables globales ou locales.
Lorsqu’on appelle une fonction à partir d'un objet, par
exemple un formulaire, le mot clé this fait référence à
l'objet en cours et évite d'avoir à définir l'objet.
Une variable déclarée implicitement (non précédée du
mot var) sera globale , c'est-à-dire accessible après
exécution de la fonction
Pour passer l'objet en cours en paramètre d'une fonction, on utilise
nom_fonction(this)
Une variable déclarée explicitement (précédée du mot
var) dans la fonction sera locale , c'est-à-dire accessible
uniquement dans la fonction, toute référence à cette
variable hors de la fonction provoquera une erreur
(variable inconnue)...
05/03/2007
59
Pour manipuler une propriété de l'objet, on utilise
this.propriete
05/03/2007
60
10
Qu'appelle-t'on une méthode?
Objets du navigateur
méthode : fonction associée à un objet, c'est-à-dire une
action que l'on peut faire exécuter à un objet.
exemple : une page html contient un objet appelé document. La
méthode write()de l’objet document permet de modifier le contenu de
la page html en affichant du texte.
Une méthode s'appelle comme une propriété :
window.objet1.objet2.methode()
Dans le cas de la méthode write(), l'appel se fait comme suit :
window.document.write()
05/03/2007
61
Les objets du navigateur sont classés hiérarchiquement
Les objets du navigateur sont classés dans une
hiérarchie qui décrit la page affichée à l'écran
Niveau1
Niveau2
navigator
window
Informations sur le browser utilisé
Gestion de la fenêtre d'affichage
parent, frames, self, top
Désignation de la sous-fenêtre
location
Informations sur l‘adresse de la page
history
historique (sites précédemment visités)
document
Informations sur contenu de la fenêtre
images[ ] Tableau des images dans la page
forms[ ]
Tableau des formulaires dans la page
links[ ]
Tableau des liens dans la page
anchors[ ] Tableau des ancres dans la page
05/03/2007
Niveau3
contient des informations sur le navigateur qui visite la page
window :
objet où s'affiche la page, contient des propriétés
concernant la fenêtre elle-même mais aussi tous les objetsenfants contenus dans celle-ci
location :
contient des informations relatives à l'adresse de la page
visitée
history :
l'historique, la liste de liens qui ont été visités précédemment
document :
contient les propriétés sur le contenu du document (couleur
d'arrière plan, titre, ...)
05/03/2007
62
Comment accéder à un objet?
Pour accéder à un objet du navigateur, il faut parcourir la hiérarchie
du navigateur, en partant du sommet (l'objet window), puis en
parcourant tous les maillons jusqu'à atteindre l'objet désiré.
window.objet1.objet2.objet3.objet_vise
Commentaire
Pour accéder/modifier une propriété de l'objet visé, il faut rajouter un
point, puis le nom de la propriété.
Certaines propriétés sont modifiables, on va pouvoir dynamiquement
modifier un élément (texte, image, ...). ex : value
D'autres par contre sont en lecture seule, on ne peut que récupérer des
informations (pas les modifier...). ex: length, size
63
05/03/2007
64
La méthode getElementById()
L'objet window
Si un objet de la page est repéré par un id,
on peut alors accéder aux propriétés de
l’objet par la méthode getElementById()
L'objet window est le parent de chaque objet
qui compose la page web, il contient donc :
l'objet document : la page en elle-même
l'objet location : le lieu de stockage de la page
l'objet history : les pages visitées précédemment
l'objet frames : les cadres (division de la fenêtre en
sous-fenêtres)
05/03/2007
navigator :
65
document.forms[0].elements[1].value
est équivalent à
getElementById(‘motdepasse’).value
05/03/2007
66
11
Les propriétés de l'objet window
defaultstatus
frames
length
name
parent
self
status
top
window
Les méthodes de l'objet window
alert(), confirm() et prompt() font apparaître une boîte de dialogue.
open() et close() permettent l'ouverture et la fermeture de fenêtres.
message qui s'affiche par défaut dans la barre d'état du navigateur
tableau qui contient les cadres présents dans la fenêtre
nombre de cadres (nombre d'éléments du tableau frames
La méthode
nom de la fenêtre dans laquelle on se trouve
fenêtre qui englobe celle dans laquelle on se trouve (s’il y en a une..)
open()
permet d'ouvrir une fenêtre
window.open("URL","nom_fenetre","options_fenetre");
synonyme de la fenêtre actuelle (redondance ou précision?)
message temporaire qui s'affiche dans la barre d'état du navigateur
URL désigne l'url de la page qui sera affichée dans la nouvelle fenêtre
Cette méthode est utilisable avec n'importe quel gestionnaire d'événement, directement dans le
code à exécuter ou bien dans une fonction.
fenêtre de plus haut niveau, celle qui contient tous les cadres (frames)
fenêtre actuelle
La méthode close() permet de fermer une fenêtre.
Elle requiert le nom de la fenêtre comme argument.
05/03/2007
67
68
La méthode alert()
Boîtes de dialogue
La méthode alert() permet d'afficher dans une boîte
composée d'une fenêtre et d'un bouton OK le texte
qu'on lui fournit en paramètre.
Une boîte de dialogue est une fenêtre qui s'affiche au
premier plan suite à un événement, et qui permet
• d'avertir l'utilisateur
• de le confronter à un choix
• de lui demander de compléter un champ pour
récupérer une information
Son unique paramètre est une chaîne de caractère, on peut :
lui fournir directement cette chaîne de caractères entre guillemets,
alert('Chaîne de caractères');
lui fournir une variable dont il affichera le contenu,
alert(nom_de_la_variable);
mêler les deux en concaténant les chaînes grâce à l'opérateur +.
alert('Chaîne de caractères' + nom_de_la_variable);
Ce type de boîte oblige une action. Les boîtes de dialogue sont un moyen
simple de débuguer (repérer les erreurs), en affichant en un point donné
une fenêtre contenant la valeur d'une variable.
05/03/2007
05/03/2007
69
La méthode confirm()
05/03/2007
70
La méthode prompt()
La méthode prompt() fournit un moyen de récupérer
une information provenant de l'utilisateur
Similaire à la méthode alert(), elle permet un
choix entre "OK" et "Annuler".
Lorsque l'utilisateur appuie sur "OK" la méthode renvoie
la valeur true, sinon elle renvoie false.
La méthode prompt() requiert deux paramètres :
le texte d'invite
la chaîne de caractères par défaut dans le champ de saisie
prompt('Posez ici votre question','chaîne par défaut');
Comme alert(), elle admet comme seul paramètre une chaîne de
caractères...
confirm('Chaîne de caractères');
05/03/2007
71
Cette boîte d'invite retourne la valeur de la chaîne saisie par l'utilisateur,
elle retourne la valeur null si aucun texte n'est saisi...
05/03/2007
72
12
Les méthodes et propriétés standards de l'objet Math
L'objet Math
L'objet Math est un objet qui a de
nombreuses méthodes et propriétés
permettant de manipuler des nombres et
qui contient des fonctions mathématiques
courantes
05/03/2007
73
Logarithmes et exponentielle
Retourne la valeur absolue d'un nombre
05/03/2007
Retourne l'entier supérieur ou égal à la valeur donnée en paramètre
Retourne l'entier inférieur ou égal à la valeur donnée en paramètre
Arrondit à l'entier le plus proche la valeur donnée en paramètre
Retourne le plus grand des deux entiers donnés en paramètre
Retourne le plus petit des deux entiers donnés en paramètre
Retourne le nombre Valeur1 à la puissance Valeur2
Retourne un nombre aléatoire compris entre 0 et 1
Retourne la racine carrée du nombre passé en paramètre
74
Trigonométrie
Math. E
Math.PI
Propriété qui retourne le nombre d'Euler (environ 2.718)
Retourne la valeur du nombre PI, soit environ 3.1415927
Math.exp(valeur)
Math.sin(valeur)
Retourne l'exponentielle de la valeur entrée en paramètre
Retourne le sinus de la valeur entrée en paramètre (doit être donnée en radians)
Math.LN2
Math.asin(valeur)
Retourne le logarithme népérien de 2
Retourne l'arcsinus de la valeur entrée en paramètre (doit être donnée en radians)
Math.LN10
Math.cos(valeur)
Retourne le logarithme népérien de 10
Retourne le cosinus de la valeur entrée en paramètre (doit être donnée en radians)
Math.log(valeur)
Math.acos(valeur)
Retourne le logarithme de la valeur entrée en paramètre
Retourne l'arccosinus de la valeur entrée en paramètre (doit être donnée en
radians)
Math.LOG2E
Math.tan(valeur)
Propriété qui retourne la valeur du logarithme du nombre d'Euler en base 2
Retourne la tangente de la valeur entrée en paramètre (doit être donnée en
radians)
Math.SQRT1_2
Propriété qui retourne la valeur de 1 sur racine de 2 (0.707)
Math.atan(valeur)
Math.SQRT2
Retourne l'arctangente de la valeur entrée en paramètre (doit être donnée en
radians)
Racine de 2 (1.414)
05/03/2007
abs()
x = Math.abs(3.26) donne x = 3.26
x = Math.abs(-3.26) donne x = 3.26
ceil()
x = Math.ceil(6.01) donne x = 7
x = Math.ceil(3.99) donne x = 4
floor()
x = Math.floor(6.01) donne x = 6
x = Math.floor(3.99) donne x = 3
round()
x = Math.round(6.01) donne x = 6
max(Nombre1, Nombre2)
x = Math.max(6,7.25) donne x = 7.25
x = Math.max(-8.21,-3.65) donne x = -3.65
x = Math.max(5,5) donne x = 5
min(Nombre1, Nombre2)
x = Math.min(6,7.25) donne x = 6
x = Math.min(-8.21,-3.65) donne x = -8.21
x = Math.min(5,5) donne x = 5
pow(Valeur1, Valeur2)
x =Math.pow(3,3) donne x = 27
x = Math.pow(9,0.5) (racine carrée) donne x = 3
random()
x = Math.random() peut donner
x = 0.6489534931546957
sqrt(Valeur)
x = Math.sqrt(9) donne x = 3
75
05/03/2007
76
13

• dans la balise script> • dans un fichier externe • grâce aux

Transcription

Documents pareils

Ramadan : les séries phares à ne pas rater

CALE A PONCER 8,3x23cm - Ref. 9057

Objet : Achat d`alambics en inox, des foyers améliorés et

Loupe optique de bureau avec support

CALENDRIER DES ELECTIONS DES REPRESENTANTS DU

De : "Dorme Hélène" yahoo.fr> date jeu. 04/12/2014

heure - l`Association contre l`heure d`été double

Trackball orbit optical KENSINGTON

Informations destinées aux agences de voyages

Planet Jogging