Introduction à l`objet document

Transcription

JAVASCRIPT
Sommaire
Sommaire
SOMMAIRE................................................................................................................................... 1
C'EST QUOI UN JAVASCRIPT ?............................................................................................... 2
LES DIFFERENCES ENTRE JAVASCRIPT ET JAVA.......................................................... 2
LES DIFFERENTES VERSIONS JAVASCRIPT ..................................................................... 2
DIFFERENCES ENTRE JAVASCRIPT ET VBSCRIPT......................................................... 3
PRINCIPE D'EXECUTION DU SCRIPT PAR LE NAVIGATEUR ....................................... 3
LA PROGRAMMATION EN JAVASCRIPT ............................................................................ 3
LES COMMENTAIRES : .................................................................................................................... 3
LES VARIABLES :............................................................................................................................ 3
LES EXPRESSIONS MATHEMATIQUES : ............................................................................................ 3
LES OPERATEURS : ......................................................................................................................... 4
LES INSTRUCTIONS DE CONTROLE : ................................................................................................ 5
LES BOUCLES : ............................................................................................................................... 5
LES FONCTIONS :............................................................................................................................ 5
INTEGRATION DE JAVASCRIPT ............................................................................................ 5
LIEN VERS UN SCRIPT :............................................................................................................ 6
MOTS CLES A JAVASCRIPT .................................................................................................... 6
INTRODUCTION A L'OBJET DOCUMENT ........................................................................... 7
LES PRINCIPALES PROPRIETES DE L'OBJET DOCUMENT .......................................... 7
LES PRINCIPALES METHODES DE L'OBJET DOCUMENT............................................. 7
QUELQUES EXEMPLES .................................................................................................................... 7
INTRODUCTION A L'OBJET NAVIGATOR .......................................................................... 8
LES PRINCIPALES PROPRIETES DE L'OBJET WINDOW................................................ 8
INTRODUCTION A L'OBJET MATH..................................................................................... 10
LES PRINCIPALES PROPRIETES DE L'OBJET MATH .......................................................................... 10
LES PRINCIPALES METHODES DE L'OBJET MATH ........................................................................... 10
INTRODUCTION A L'OBJET HISTORY............................................................................... 11
LES PRINCIPALES PROPRIETES DE L'OBJET HISTORY :.................................................................... 11
LES PRINCIPALES METHODES DE L'OBJET HISTORY ....................................................................... 11
INTRODUCTION A L'OBJET WINDOW............................................................................... 12
LES PRINCIPALES METHODES DE L'OBJET WINDOW :..................................................................... 12
INTRODUCTION A L'OBJET FORM..................................................................................... 13
LES PRINCIPALES PROPRIETES DE L'OBJET FORM .......................................................................... 13
INTRODUCTION A L'OBJET DATE...................................................................................... 15
LES PRINCIPALES PROPRIETES DE L'OBJET DATE ........................................................................... 15
LES PRINCIPALES METHODES DE L'OBJET DATE ............................................................................ 15
1
JAVASCRIPT
Les différentes versions JavaScript
C'est quoi un Javascript ?
JavaScript a été créé par Netscape pour développer des applications Internet et, par la même
occasion, pour étendre les possibilités du HTML. Il s'agit d'un langage léger et orienté objet,
permettant d'écrire des scripts. Attention : il ne faut pas confondre Java et JavaScript !
Java est un langage de programmation développé par SUN et non un langage de script comme
JavaScript. De plus, les scripts écrits avec JavaScript sont interprétés par le navigateur et
incorporés dans le code HTML, ce qui n'est pas le cas du langage Java.
Les différences entre JavaScript et JAVA
JavaScript
JAVA
Code non intégré dans la page
Code intégré dans la page HTML.
HTML (applet).
Code interprété par le navigateur Code source compilé avant son
au moment de l'exécution.
exécution.
Langage de programmation
Code de programmation simple
complexe mais illimitée
mais limité.
(presque).
Pas d'accès aux objets du
Accès aux objets du navigateur.
navigateur.
Les différentes versions JavaScript
A l'heure actuelle, il existe plusieurs versions de Javascript. Voici, ci-dessous, un tableau
résumant les différentes versions avec les navigateurs compatibles ainsi que la balise définissant
la version.
Version
JavaScript
1.0
Javascript
1.1
Javascript
1.2
Javascript
1.3
Compatibilité
Balise
<SCRIPT
I.Explorer 3.0 - Netscape
LANGUAGE="JavaScript1.
2.0
0">
<SCRIPT
Netscape 3.0
1">
<SCRIPT
I.Explorer 4.x - Netscape
4.x
2">
<SCRIPT
I.Explorer 5.x - Netscape
6.x
3">
2
JAVASCRIPT
La programmation en Javascript
Différences entre JavaScript et VBScript
Pour réaliser vos scripts, il existe deux langages possibles : JavaScript (technologie Netscape) et
VBScript (technologie Mic rosoft). Voici un tableau résumant les propriétés et points forts de ces
deux langages.
Javascript
VBScript
Compatibilité
Internet Explorer et
Netscape
Internet Explorer
Origine
C++
Visual
Basic
Notions
Notions en C++
recommandées
Sans notions
particulières
Implantation
Excellente
Moyenne
Principe d'exécution du script par le navigateur
Les Scripts permettent d'indiquer aux navigateurs comment ils doivent réagir à certains
événements, comme par exemple un clic de souris sur un bouton. On appelle ceci "la gestion par
l'événement".
Schéma décrivant ce phénomène :
L'objet
(bouton)
Object
Evénement
--------->
(clic de souris)
Event
Gestionnaire d'événement
(envoi du formulaire)
Event Handler
Avant de vous lancer dans l'écriture de scripts, voici quelques bases pour des scripts sans ERRORS.
LES COMMENTAIRES :
Vous pouvez ajouter des commentaires personnels dans vos scripts :
sur une ligne avec //
// ceci est un commentaire sur une ligne
sur plusieurs lignes avec /* ....... */
/* ceci est un commentaire
sur plusieurs lignes */
LES VARIABLES :
C'est là où vous stockez vos valeurs.
LES EXPRESSIONS MATHEMATIQUES :
Elles renvoient le résultat d'un calcul. Exemple : 2+3
Ajoute 2 et 3 et renvoie le résultat 5, 2 et 3 étant des opérandes et le signe + l'opérateur.
3
JAVASCRIPT
LES OPERATEURS :
Ils permettent par exemple de comparer des valeurs.
Exemple : 1 < 2
Résultat vrai (true) car 2 est bien supérieur à 1.
Voici un tableau récapitulant les opérateurs (calcul et comparaison) les plus fréquents. Pour tester
le résultat (valeur ou vrai ou faux) a est égal à 5 et b est égal à 4.
Symbole Type d'opérateur Description
Opérateur de
=
A la valeur de
calcul
Opérateur de
+
Addition
calcul
Opérateur de
Soustraction
calcul
Opérateur de
*
Multiplication
calcul
Opérateur de
/
Division
calcul
Opérateur de
%
Reste de division
calcul
Opérateur de
==
Egale à
comparaison
Opérateur de
<
Inférieur à
comparaison
Opérateur de
>
Supérieur à
comparaison
Opérateur de Inférieur ou égal
<=
comparaison
à
Opérateur de
Supérieur ou
>=
comparaison
égal à
Opérateur de
!=
Différent de
comparaison
&&
Opérateur booléen
Et
||
Opérateur booléen
Ou
+=
-=
*=
/=
Opérateur
associatif
Opérateur
associatif
Opérateur
associatif
Opérateur
associatif
Exemple
Résultat
a=5
true (vrai)
a+2
7
a-4
1
a*2
10
a/5
1
a%2
1
a==6
false (faux)
a<4
false (faux)
a >2
true (vrai)
a <= 5
true (vrai)
a >= 6
false (faux)
a != 6
true (vrai)
(test1) &&
(test2)
(test1) ||
(test2)
test 1 et test 2
test 1 ou test 2
Plus égal
a+=b
9
Moins égal
a-=b
1
Multiplié égal
a*=b
20
Divisé égal
a/=b
1.25
4
JAVASCRIPT
Intégration de Javascript
LES INSTRUCTIONS DE CONTROLE :
Ces instructions de contrôle permettent tout simplement de vérifier le bon déroulement d'un
script. Ce déroulement est souvent rédigé suivant cette syntaxe.
IF cela THEN alors ELSE sinon.
Exemple :
if (x > 2); Si x est bien supérieur à 2.
alert ("Envoyer"); Alors afficher Envoyer.
else
alert ("Annuler"); Sinon afficher Annuler.
LES BOUCLES :
Les boucles sont à envisager, lorsque l'instruction doit se faire de façon répétitive, jusqu'à ce que
la condition soit OK (ou non). Ceci est souvent décrit autour de cette syntaxe.
WHILE (boucle) condition(s) ---> instruction(s).
Exemple :
while (i < 100)
{
alert (i);
i = i + 1;
}
LES FONCTIONS :
Les fonctions sont utilisées pour partager vos scripts en différentes parties. Ces fonctions seront
nommées par un nom quelconque et possèdent une liste d'arguments.
Exemple :
<!-function Test()
{
........ etc .....
}
//-->
Intégration de Javascript
Pour intégrer un script JavaScript dans une page HTML, le code du script doit être placé à
l'intérieur des balises <SCRIPT> et </SCRIPT>. Le langage doit être spécifié avec l'attribut
LANGUAGE :
<SCRIPT LANGUAGE="JAVASCRIPT">
Ou (avec HTML 4.0)
<SCRIPT TYPE="text/javascript">
pour VBscript.
<SCRIPT LANGUAGE="VBSCRIPT">
Ou (avec HTML 4.0)
<SCRIPT TYPE="text/vbscript">
5
JAVASCRIPT
Mots clés à Javascript
De plus; n'oubliez pas d'entourer les scripts par des balises de commentaires (), ce qui
a pour effet de cacher le contenu des scripts aux anciens navigateurs non compatibles avec la
balise <SCRIPT>.
Note : Une solution de rechange peut être envisagée avec les balises <NOSCRIPT> et
</NOSCRIPT> qui permettent d'accueillir du texte et/ou du code HTML.
Exemple d'intégration d'un script :
<SCRIPT LANGUAGE="JavaScript">
<!-document.write ("Dernière modif de ce document : " + document.lastModified);
//-->
</SCRIPT>
<NOSCRIPT>
Votre navigateur n'accepte pas le JavaScript.
</NOSCRIPT>
Lien vers un script :
Vous pouvez choisir de ne pas intégrer un script dans votre code HTML. Pour cela, il suffit
d'indiquer à la balise <SCRIPT> où votre fichier script se trouve. Votre fichier script doit porter
l'extension .js s'il est rédigé en Javascript ou .vbs pour VBSCRIPT.
Exemple pour un fichier JavaScript :
<SCRIPT SRC="message.js" TYPE="text/JavaScript"></SCRIPT>
Mots clés à Javascript
Le Langage Javascript comprend des mots que vous ne pouvez pas utiliser (sous peine d'erreurs),
comme noms de variables, de fonctions, de méthodes ou d'objets.
Note : Certains mots, même s'ils ne sont pas utilisés actuellement par Javascript, sont réservés
pour un usage futur.
boolean
break
byte
case
catch
char
class
const
continue
default
do
double
else
extends
false
final
finally
for
function
goto
if
implement
import
in
instanceof
int
interface
long
native
new
null
package
private
protected
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
var
void
while
with
6
JAVASCRIPT
Les principales méthodes de l'objet document
Introduction à l'objet document
L'objet document est compatible avec les navigateurs Netscape Navigator et Internet Explorer. Il
contient des informations concernant le document courant (par le biais de tableaux et de
propriétés). C'est l'un des objets les plus utilisés (avec window) en JavaScript et permet, par
exemple, d'écrire dans le document html, on appelle cela : écrire dans le flux d'un document.
Les principales propriétés de l'objet document
Exemple d'utilisation : document.propriété
Propriétés
alinkColor
anchors
applets
bgColor
cookie
fgColor
forms
images
lastModified
linkColor
links
location
referrer
title
vlinkColor
Description
Idem à ALINK (attribut de BODY)
Tableau contenant les ancrages
Tableau contenant les applets
Idem à BGCOLOR (attribut de BODY)
Chaîne de caractères reflétant le contenu du fichier cookie.txt
Idem à TEXT (attribut de BODY)
Tableau contenant les formulaires
Tableau contenant les images
Date de la dernière modification du document
Idem à LINK (attribut de BODY)
Tableau contenant les liens du document
Propriété de l'URL du document
Représente l'URL n-1 (précédente)
Idem à TITLE
Idem à VLINK (attribut de BODY)
Les principales méthodes de l'objet document
Exemple d'utilisation : document.méthode(arg)
Méthode
close()
open(arg)
write(arg)
writeIn(arg)
Description
fermeture du document (ou fenêtre) en cours
Ouvre un flot de sortie vers un document
Ecrire (du texte ou du html) dans un document
Idem à write avec un retour de chariot
QUELQUES EXEMPLES
Exemple 1 :
Hello World
<!-document.write("<FONT FACE='Impact, Arial' SIZE=3 COLOR='#008000'>Hello
World</FONT">)
//-->
</SCRIPT>
7
JAVASCRIPT
Les principales propriétés de l'objet window
Exemple 2 :
<!-document.write("L'URL courante est "+document.location+"<BR> et vous venez de
"+document.referrer+"")
//-->
</SCRIPT>
Exemple 3 :
<!-document.write("Cette page se nomme : "+document.title+"<BR>")
document.write("Last Updated (format US) : "+document.lastModified+"")
//-->
</SCRIPT>
Introduction à l'objet navigator
L'objet navigator est compatible avec les navigateurs Netscape Navigator et Internet Explorer.
Cet objet permet de récupérer des informa tions sur le navigateur qu'utilise le visiteur. L'utilité de
cet objet est, avant tout, de pouvoir identifier I.Explorer ou Netscape Navigator et ainsi, diriger ce
navigateur vers une version (page html) de votre site totalement compatible avec les spécificités
de ce même navigateur.
Exemple d'utilisation : navigator.propriété
Note : Les propriétés de l'objet navigator sont en lecture seule.
Propriété
Description
App CodeName
Retourne le nom de code du navigateur
App Name Retourne le nom du navigateur
App Version Retourne diverses information sur la version du navigateur
Retourne le "user-agent header" (toutes les informations) du
Use user Agent
navigateur
plugin *
Génère des sorties à partir d'une application plugin
* : Cette propriéte de l'objet navigator est également un objet.
Exemples pour chaque propriété
Exemple
navigator.appCodeName
navigator.appName
navigator.appVersion
navigator.userAgent
Retourne ...
Mozilla
Microsoft Internet Explorer
4.0 (compatible; MSIE 5.0b2; Windows 98)
Mozilla/4.0 (compatible; MSIE 5.0b2; Windows 98)
8
JAVASCRIPT
Si le navigateur est Netscape les valeurs retournées sont :
Version
2.0
3.0
4.0
4.5
appName
Netscape
Netscape
Netscape
Netscape
appVersion
2.0 (Win98; I)
3.XX (Win98; I)
4.XX (Win98; I)
4.5X (Win98; I)
Version JavaScript
JavaScript 1.0
JavaScript 1.1
JavaScript 1.1
JavaScript 1.2
Si le navigateur est Internet Explorer les valeurs retournées sont :
Version appName
Microsoft Internet
3.0
Explorer
Microsoft Internet
4.0
Explorer
Microsoft Internet
5.0
Explorer
appVersion
Version JavaScript
2.0 (compatible; MSIE 3.0X;
JavaScript 1.0
Windows 98)
4.0X (compatible; MSIE 4.0X;
JavaScript 1.2
Windows 98)
5.XX (compatible; MSIE 4.0X;
JavaScript 1.2
Windows 98)
Quelques exemples
Exemple 1 : ce premier exemple permet (comme abordé ci-dessus) de déterminer les différentes
informations du navigateur.
<!-document.write ( "<FONT COLOR=red>Votre navigateur est</FONT><BR>"
+ navigator.appName + navigator.appVersion)
//-->
</SCRIPT>
Exemple 2 : cet exemple permet de définir quel est le navigateur utilisé par le visiteur et affiche le
logo correspondant à ce même navigateur.
<!-Navigateur = navigator.appName;
if (Navigateur == 'Netscape')
{
document.write("<IMG SRC='gif/logns.gif' WIDTH=88 HEIGHT=31 ALT='Logo
Netscape'>");
}
if (Navigateur == 'Microsoft Internet Explorer')
{
document.write("<IMG SRC='gif/logie.gif' WIDTH=88 HEIGHT=31 ALT='Logo Internet
Explorer'>");
}
//-->
</SCRIPT>
9
JAVASCRIPT
Introduction à l'objet math
Introduction à l'objet math
Comme son nom l'indique, l'objet math permet d'accéder à toutes les fonctions et constantes
mathématiques. Il sert donc principalement à réaliser divers calculs avancés comme par exemple
retourner une valeur aléatoire.
LES PRINCIPALES PROPRIETES DE L'OBJET MATH
Exemple d'utilisation : math.propriété
Propriété
E
LN10
LN2
LOG10E
LOG2E
PI
SQRT1_2
SQRT2
Description
Retourne la valeur d'Euler (logarithme)
Retourne la valeur du logarithme 10 (soit 2.302)
Retourne la valeur du logarithme 2 (soit 0.693)
Retourne la valeur de la base 10 du logarithme (soit 0.434)
Retourne la valeur de la base 2 du logarithme (soit 1.442)
Retourne la valeur de pi (soit 3.1415)
Retourne la valeur de la racine carrée de 0.5 (soit 0.707)
Retourne la valeur de la racine carrée de 2 (soit 1.414)
LES PRINCIPALES METHODES DE L'OBJET MATH
Exemple d'utilisation : math.méthode(nb)(ici nb est égal à un nombre quelconque)
Méthode
abs(nb)
acos(nb)
asin(nb)
atan(nb)
Description
Retourne la valeur absolue de nb
Retourne la valeur de l'arc cosinus en radians de nb
Retourne la valeur de l'arc sinus en radians de nb
Retourne la valeur de l'arc tangente en radians de nb
Retourne la valeur de l'angle de nb des coordonnées
atan2(nb)
polaires correspondant aux coordonnées cartesiennes
ceil(nb)
Retourne le plus petit entier plus grand ou égal de nb
cos(nb)
Retourne le cosinus de nb
exp(nb)
Retourne exponentiel nb
floor(nb)
Retourne le plus grand entier plus petit ou égal à nb
log(nb)
Retourne le logarithme de nb
Retourne le plus grand de deux nombres (ici nb ou
max(nb,nb2)
nb2)
mix(nb,nb2) Retourne le plus petit de deux nombres (ici nb ou nb2)
pow(nb,expo Retourne nb exposant (où nb est la base de la
sant)
puissance)
random()
Retourne alétoirement un nombre entre 0 et 1
round(nb) Retourne l'arrondi de nb
sin(nb)
Retourne le sinus de nb
sqrt(nb)
Retourne la racine carré de nb
tan(nb)
Retourne la tangente de nb
Quelques exemples
Exemple 1 : arrondir un nombre, avec la méthode round et en utilisant les événements (ici
OnClick) Javascript
10
JAVASCRIPT
Introduction à l'objet history
<FORM NAME="arrondir">
Nombre : <INPUT TYPE="text" NAME="nb" SIZE=6><INPUT TYPE="button"
VALUE="Arrondir" OnClick="form.arrondi.value = Math.round(arrondir.nb.value)">
<BR>
Nombre arrondi : <INPUT TYPE="text" NAME="arrondi">
</FORM>
Exemple 2 : nombre aléatoire, avec la fonction parseInt et la méthode random de l'objet Math
<FORM>
<INPUT TYPE="button" VALUE="Nombre Aléatoire"
OnClick="form.alea.value=parseInt(Math.random()*100)">
Nombre : <INPUT TYPE="text" NAME="alea" SIZE=10>
</FORM>
Introduction à l'objet history
Avec cet objet, on peut accéder à n'importe quelle page de la liste d'historique stockée par le
navigateur. La plupart du temps, cet objet est utilisé pour créer des bouton "précédent" (back) et
"suivant", (forward) équivalents aux boutons du navigateur.
LES PRINCIPALES PROPRIETES DE L'OBJET HISTORY :
Exemple d'utilisation : history.propriété
Propriété
current
length
next
previous
Description
Permet d'accèder à l'URL courante
Nombre d'entrée dans l'historique
Entrée suivante dans la liste d'historique
Entrée précédente dans la liste d'historique
LES PRINCIPALES METHODES DE L'OBJET HISTORY
Exemple d'utilisation : history.méthode(n)
Méthode
back()
forward()
go(n)
Description
charge le document précédent
charge le document suivant
charge le document n (n étant un nombre positif ou négatif ou
une chaîne de caractères)
Quelques exemples
Exemple 1 : retour n-3 document dans votre historique
<FORM>
<INPUT TYPE="button" VAL UE="Recule n-3 document" NAME="Précédente3"
OnClick="history.go(-3)">
</FORM>
Exemple 2 : actualiser une page
11
JAVASCRIPT
Introduction à l'objet window
<FORM>
<INPUT TYPE="button" VALUE="All HTML.org" NAME="url"
OnClick="history.go(0)">
</FORM>
Introduction à l'objet window
L'objet window est compatible avec les navigateurs Netscape Navigator et Internet Explorer :
c'est l'objet maître du JavaScript (implicite)! Il peut être défini comme une véritable fenêtre, où
l'objet document est considéré comme le contenu de cette même fenêtre. L'utilisation la plus
courante est la création d'une fenêtre volante (popup).
3. Les principales propriétés de l'objet window
Exemple d'utilisation : window.propriété
Propriété
closed
defaultstatus
document *
history *
length
location *
name
parent
self
status
statusbar
toolbar
top
Description
Indique si une fenêtre a été fermée
Message par défaut contenu dans la barre d'état du navigateur
Représente le contenu de la fenêtre (lecture seule)
Historique de la fenêtre (lecture seule)
Nombre de frames dans la fenêtre courante
URL courante de la fenêtre
Nom d'une fenêtre
Indique une fenêtre d'un cadre (frame)
Indique la fenêtre courante
Lit ou écrit le contenu de la barre d'état du navigateur
Affichage ou non de la barre d'état du navigateur
Affichage ou non de la barre d'outils du navigateur
Indique l'objet fenêtre le plus haut
* : Ces propriétés de l'objet window sont également des objets.
LES PRINCIPALES METHODES DE L'OBJET WINDOW :
Exemple d'utilisation : window.mé thode(arg)
Méthode
alert('message')
back()
blur()
clearTimeout
close()
confirm(arg)
focus()
forward()
open(arg)
prompt()
setTimeout
Quelques exemples :
Description
Permet d'afficher une boîte de dialogue (avertissement)
URL précédente (historique) du navigateur
Permet de désactiver la fenêtre spécifiée
Efface la fonction "chrono mètre"
Permet de fermer la fenêtre spécifiée
Permet d'afficher une boîte de dialogue (confirmation)
Active la fenêtre spécifiée
URL suivante (historique) du navigateur
Permet d'ouvrir une nouvelle fenêtre
Permet d'afficher une boîte de dialogue (informations à saisir
par l'utilisateur)
Permet d'activer une fonction "chronomètre" (en ms)
12
JAVASCRIPT
Introduction à l'objet form
Exemple 1 : comme vu plus haut, la propriété window (avec la méthode open) est couramment
utilisée pour ouvrir une fenêtre. Voici les différentes caractéristiques d'une fenêtre.
Syntaxe : window.open('URL','nom_fenêtre','caractéristiques'
1> menubar (défaut : no).
2> toolbar (défaut : no).
3> location (défaut : no).
4> status (défaut : no).
5> scrollbars (défaut : no).
Note : La valeur resizable, si elle est égale à yes, permet au visiteur de redimensionner la fenêtre.
Les valeurs top et left permettent de positionner (par rapport à la fenêtre maître ) la nouvelle
fenêtre.
<FORM>
<INPUT TYPE="button" VALUE="Exemple" NAME="Exemple"
onClick="window.open('fenetre.htm', 'Exemple',
'width=250,height=300,top=120,left=120')">
</FORM>
Exemple 2 : à l'intérieur de cette fenêtre vous pouvez créer un bouton de fermeture.
<FORM>
<INPUT TYPE="BUTTON" VALUE="Fermer !!" ONCLICK="window.close()">
</FORM>
L'objet form représente la section d'une page contenue entre les balise <FORM> et </FORM>.
Il est donc utilisé lo rsque vous souhaitez interagir avec un formulaire. Vous pouvez, par exemple,
lire et modifier les différentes valeurs d'un élément issu d'un formulaire.
LES PRINCIPALES PROPRIETES DE L'OBJET FORM
Exemple d'utilisation : form.propriété
Propriété
action
elements
encoding
length
method
name
target
parent
Description
Définit l'URL où le formulaire sera envoyé
Tableau représentant les éléments du formulaire
Définit l'encodage (MIME) utilisé pour l'envoi du
formulaire
Nombre d'éléments à l'intérieur du formulaire
Définit le type d'envoi du formulaire (GET ou POST)
Définit le nom du formulaire
Définit la page (fenêtre ou frame) de réponse
Indique une fenêtre d'un cadre (frame)
Note : Les propriétés (button, checkbox, fileupload, hidden, password, radio, reset, select,
submit, text, textarea) sont également des objets.
Les principales méthodes de l'objet form
13
JAVASCRIPT
Méthod
Description
e
Permet de stimuler le clic souris sur le bouton remise à zéro
reset
du formulaire
Permet de stimuler le clic souris sur le bouton envoyer du
submit
formulaire
Exemple d'utilisation : form.méthode(arg)
5. Quelques exemples
Exemple 1 : exemple type d'un formulaire et les différents objets
1> Objet window.
2> Objet document.
3> Objet form.
4> Objet text.
5> Objet button.
Exemple 2 : contrôler un élément. Script à placer entre les balise <HEAD> et </HEAD>
<!-function controle ()
{
if (document.formulaire.visa.value.length != 8)
{
alert("8 caractères minimum, vous avez entré " +
document.formulaire.visa.value.length + " caractères")
}
}
//-->
</SCRIPT>
Formulaire :
<FORM NAME=formulaire onSubmit="controle()">
Entrez votre numéro :
<INPUT TYPE="text" VALUE="1" SIZE=8 NAME=visa>
<INPUT TYPE="submit" VALUE="Envoyer"> <INPUT TYPE="reset"
VALUE="Annuler">
</FORM>
14
JAVASCRIPT
Introduction à l'objet date
Intégré à Javascript, l'objet date est l'un de ses éléments clés car il est très souvent rencontré dans
les scripts. Il permet, comme son nom de l'indique, de manipuler les dates, heures et années en
JavaScript.
LES PRINCIPALES PROPRIETES DE L'OBJET DATE
Exemple d'utilisation : date.propriété
Propriété
prototype
Description
Permet d'ajouter une propriété à l'objet date
Note : L'objet date possède une seule propriété.
LES PRINCIPALES METHODES DE L'OBJET DATE
Note : Il existe également les méthodes parse (date.parse) et UTC (date.UTC)
A noter que pour :
Year : Le nombre retourné est un nombre entier à 2 chiffres (l'année 1999 est égale à 99)
Month : Le nombre retourné est un nombre entier compris entre 0 et 11 (0 = Janvier; 11 =
Décembre)
Date : Le nombre retourné est un nombre entier compris entre 1 et 31
Day : Le nombre retourné est un nombre entier compris entre 0 et 6 (0 : Dimanche; 6 : Samedi)
Hours : Le nombre retourné est un nombre entier compris entre 0 et 23
Minutes : Le nombre retourné est un nombre entier compris entre 0 et 59
Seconds : Le nombre retourné est un nombre entier compris entre 0 et 59
Méthode
getYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getTime()
Description
Retourne l'année
Retourne le mois
Retourne le jour du mois
Retourne le jour de la semaine
Retourne l'heure
Retourne les minutes
Retourne les secondes
Retourne le nombre de milisecondes depuis le 1er
janvier 1970
getTimezone
Retourne le décalage horaire suivant l'heure GMT
Offset
SetYear(n) Donne la valeur n à l'année
SetMonth(n) Donne la valeur n au mois
SetDate(n) Donne la valeur n au jour du mois
SetHours() Donne la valeur n à l'heure
SetMinutes(n
Donne la valeur n aux minutes
)
SetSeconds() Donne la valeur n aux secondes
15
JAVASCRIPT
SetTime()
Donne la valeur n au nombre de milisecondes depuis
le 1er janvier 1970
toGMTStrin
Retourne une chaîne correspondante à la date en GMT
g
toLocaleStrin Retourne une chaîne correspondante à la date suivant
g
le fuseau horaire
Quelques exemples
Exemple 1 : Une simple horloge...
<!-function time()
{
Today = new Date()
document.write("Il est " + Today.getHours() + "h" + Today.getMinutes ())
}
time()
//-->
</SCRIPT>
Il est 16h17
Exemple 2 : La date au format GMT (H - 1)...
<!-today = new Date();
dateGMT = today.toGMTString()
document.write("Date au format GMT :"+dateGMT);
//-->
</SCRIPT>
Date au format GMT : Thu, 22 Feb 2001 15:17:38 UTC
UN JOUR UNE IMAGE
<!-now=new Date();
day=now.getDay();
document.write("<IMG SRC='image/" + day + ".gif' WIDTH=50 HEIGHT=50
ALT='Image aléatoire'>");
//-->
</SCRIPT>
Vous trouverez de nombreux tutoriels javascript sur le site de l'AFCI : www.tsom.fr. Référence :
Javascript.
16

Introduction à l`objet document

Transcription

Documents pareils

2 + 2 personnes, 50 m2 Platano est un appartement

Paramètres (arguments)

Erreurs JavaScript (bogues) :

Lotus Notes Domino v7/v8, JavaScript

dreamweaver perfectionnement

Les bases de Javascript.

Technologies du Web Correction de l`examen

Utilisation du navigateur Internet Explorer 6

De l`Afrotrap au Coupé décalé, MHD met Abidjan sur

ActiveX et JavaScript