JavaScript

Transcription

JavaScript
JavaScript
Mourad Oudghiri
FSO - Département Math-Info
[email protected]
Avril 2010
Oudghiri
JavaScript
Généralités
JavaScript
C’est un langage interprété, structuré et Orienté Objet.
Inspiré du langage C.
Il permet de résoudre les problèmes que HTML ne sait pas
résoudre.
Il s’écrit directement dans la Page HTML.
Il sait gérer les évènements principaux de la souris :
déplacements, clicks, ...
Il sait gérer les temporisations.
Oudghiri
JavaScript
Généralités
Insertion de code JavaScript
Le code JavaScript doit être placé
toujours à l’intérieur de script
<script language="JavaScript">
............
</script>
D’habitude, on place la balise
script à l’intérieur de la balise
head. Cependant, il est possible
de la mettre n’importe où, même
dans la balise body.
Dans cet exemple, le navigateur
affiche :
Bonjour tout le monde
<html>
<head><title>premier script</title>
<script language="JavaScript">
document.write("Bonjour ")
</script>
</head>
<script language="JavaScript">
document.write("tout le monde")
</script>
</body>
</HTML>
Dans un fichier html, on peut appeler un fichier contenant du code
JavaScript.
<script src="NomFichier.js" >
</script>
Oudghiri
JavaScript
Généralités
Règles générales
Exécution directe
Un code qui est destiné à
s’exécuter automatiquement lors
du chargement de la page, on le
met dans la balise body
<body>
<script language="JavaScript">
document.write("Bonjour");
</script>
Exécution différée
Le code qui s’exécute lors d’un
événement généré par
intervention de l’utilisateur est
placé dans la balise head. Dans
ce cas, le code est lu par le
navigateur, stocké en mémoire,
pour ne s’exécuter que sur
demande expresse.
<head>
<title>Exécution
différée</title>
<script language="JavaScript">
function auRevoir (){
alert("Au revoir");
}
</script>
</head>
<body onUnload=auRevoir();>
</body>
Oudghiri
JavaScript
Généralités
Règles générales
L’insertion des espaces peut s’effectué n’importe où dans
le script. Donc n’hésitons pas à éclaircir nos écritures.
Pour rendre plus clair et plus compréhensible notre
programme, on peut placer des commentaires :
En utilisant le double slash // : tout ce qui se trouve à droite
est commentaire.
Un commentaire sur plusieurs lignes doit être placé entre /*
et */
Chaque commande doit être terminée par un point-virgule
(;).
Un nombre à virgule est séparé par un point (.) et non par
une virgule (0.5 et non 0,5)
Javascript est sensible à la casse
Oudghiri
JavaScript
Les variables
Déclaration et affectation
Les variables sont des contenants qui permettent de manipuler
facilement des valeurs numériques ou autres.
Le mot-clé var permet de déclarer
une ou plusieurs variables.
Après la déclaration de la variable, il est possible de lui affecter
une valeur.
Déclaration et affectation en
même temps :
var nom, age;
nom="toto";
age=35;
var prenom="tati";
La lecture d’une variable non déclarée provoque une
erreur.
Une variable correctement déclarée mais dont aucune
valeur n’est affectée, est indéfinie.
Oudghiri
JavaScript
Les variables
Types de variables
le Javascript n’autorise la manipulation que des quatre types de
données suivant :
Nombres: entiers ou à virgules
Chaînes de caractères
booléens:
true : si le résultat est vrai
false : si le résultat faux
null: possède une seule valeur, null, et indique que la
variable ne contient aucune donnée.
undefined : possède une seule valeur, undefined, et
indique que la variable non initialisée (ou non existante)
Le type de la variable est déterminée par la valeur que l’on lui
affecte.
Oudghiri
JavaScript
Les variables
Contraintes sur les noms de variables
Les noms de variables ne peuvent contenir que des lettres,
chiffres, ou le caractère de _ : Mon_Prenom est un nom
valide.
Les noms de variables ne doivent pas commencer par un
chiffre.
Les caractères spéciaux et accentués sont interdits :
Mon_Prénom n’est pas un nom valide.
Les majuscules et les minuscules ont leur importance :
MonPrenom et Monprenom sont deux variables
différentes.
Un nom de variable ne peut contenir d’espaces : Mon
Prenom n’est pas un nom de variable correct.
Les mots réservés JavaScript ne peuvent être utilisés
comme noms de variable : var ne peut être un nom de
variable par exemple.
Oudghiri
JavaScript
Les variables
Conseils
il est intéressant de choisir un nom de variable qui rappelle sa
fonction dans le programme. Et si cette fonction fait intervenir
plusieurs mots, on essaie de choisir un nom utilisant une
contraction de ces mots en faisant précéder chacun d’eux par
une Majuscule ou _.
Exemple :
MonPrenom ou mon_prenom
Oudghiri
JavaScript
Les variables
Opérations sur les chaînes
Concaténation
+ permet de concaténer
plusieurs chaines.
nom="Toto";
document.write("Bonjour " + nom)
//Navigateur affiche //Bonjour Toto
longueur d’une chaîne
length retourne la longueur
d’une chaîne.
document.write("toto".length);
//Navigateur affiche 4
Caractère
charAt(n) retourne le caractère
situé à la n position.
document.write("toto".charAt(1));
//Navigateur affiche o
Extraction
substring(n, m) retourne la
sous-chaîne comprise entre les
positions n et m.
document.write(
"abcdef".substring(2,4));
//Navigateur affiche cd
Oudghiri
JavaScript
Les variables
0pérations sur les chaînes
big() : augmente la taille de la police
bold() : met le texte en gras
fontcolor(#cccccc) : modifie la couleur du texte
fontsize("20px") : modifie la taille de la police
sub() : transforme le texte en indice
sup() : Transforme le texte en exposant
toLowerCase() : convertit tous les caractères d’une chaîne
en minuscule.
toUpperCase() : Convertit tous les caractères d’une chaîne
en majuscule.
Oudghiri
JavaScript
Les variables
Opérations arithmétiques
Opérateurs de calcul (x = 7) :
+ : addition (x + 3 donne 10)
- : soustraction (x − 3 donne 4)
* : multiplication (x ∗ 3 donne 21)
/ : division (x/3 donne 2.3333333)
= : affectation (x = 3 affecte la valeur 3 à la variable x)
% : reste de la division (x%3 donne 1)
Opérateurs d’affectation (x = 7):
x+=2 : ajoute 2 à x et stocke le résultat 9 dans x
x-=2 : soustrait 2 à x et stocke le résultat 5 dans x
x*=2 : multiplie 2 et x et stocke le résultat 14 dans x
x/=2 : divise x par 2 et stocke le résultat 3.5 dans x
x%=2 : stocke le reste 1 de la divise de x par 2 dans x
Opérateurs d’incrémentation et décrémentation (résultat x = 7)
x++ : incrémentation (résultat x = 8)
x– : décrémentation (résultat x = 6)
Oudghiri
JavaScript
Les variables
Autres opérateurs
Opérateurs de comparaison :
Ces opérateurs retournent une des valeurs : True ou False
== : opérateur d’égalité
!= : opérateur de différence
< : opérateur d’infériorité stricte
<= : opérateur d’infériorité
> : opérateur de supériorité stricte
>= : opérateur de supériorité
opérateurs logiques (booléens)
|| : OU logique. Syntaxe ((expression1)||(expression2))
&& : ET logique. Syntaxe ((expression1)&&(expression2))
! : NON logique. Syntaxe (!expression)
Oudghiri
JavaScript
Quelques instructions
Structure : if
if
Structure conditionnelle de test orientant l’exécution d’une
portion de script du genre : si ... alors ...
function parite(x){
x = Number(x);
if(x%2==1){
document.write(x+" est impair");
}
else{
document.write(x+" est pair");
}
}
parite(15);
//Navigateur affiche :
//
15 est impair
Syntaxe :
if(condition){
instruction1
}
else{
instruction2
}
Oudghiri
JavaScript
Quelques instructions
Structure : for
La boucle for
Déclare une boucle incrémentale sur un compteur en assurant
la gestion de l’incrément et de la sortie de la boucle.
Syntaxe :
for ( i=0 ; i<10; i++) { ... }
Le premier paramètre initialise la variable compteur.
Le second paramètre indique le critère qui permet de
poursuivre la boucle. Dès que le critère est false la boucle
est interrompue.
Le dernier argument indique comment le compteur évolue
à chaque tour de boucle.
for(i=0; i<10; i=i+2) {
document.write(i + " ; ");
}
Navigateur affiche :
0;2;4;6;8;
Oudghiri
JavaScript
Quelques instructions
Structure : while
La boucle while
Déclare une boucle qui se poursuit tant qu’une expression est
vraie.
La boucle while est à utiliser quand on ne connaît pas à
l’avance le nombre d’incréments qui seront nécessaires au
traitement.
La boucle peut aussi être interrompue à tout moment par
l’appel à break.
var i = 500;
while (i>5) {
document.write(i + ";");
i = i / 2;
}
Navigateur affiche :
400;200;100;50;25;12.5;6.25;
Oudghiri
JavaScript
Quelques instructions
do ... while
La boucle do while
Cette boucle exécute un groupe d’instructions jusqu’à ce que la
condition renvoie false.
document.write("boucle 1 :");
var x = 10;
do {
document.write("x * x = " + (x * x));
x = x + 1;
}
while(x < 10);
document.write("<br>boucle 2 :");
var x = 10;
while(x < 10) { document.write("x * x
= " + (x * x)); x = x + 1;
}
Navigateur affiche :
boucle 1 : x * x = 100
boucle 2 :
Oudghiri
JavaScript
Quelques instructions
Structure : Switch
switch
Elle permet de mettre en oeuvre des traitements en fonction de
la valeur d’une variable.
Syntaxe :
switch(variable) {
case valeur1 : instruction1; break;
case valeur2 : instruction2; break;
.
.
case valeurN : instructionN; break;
default : instruction_par_défaut
}
x=prompt("entrer un nom",""); switch(x) {
case "tayra" : document.write(x+" est un chat"); break;
case "goumi" : document.write(x+" est un chien"); break;
default : document.write(x+" n’est ni chat ni chien");
}
Oudghiri
JavaScript
Les fonctions
Ecriture des fonctions
En JavaScript, une fonction aura la forme suivante :
function Nom_de_la_fonction (paramètre_1, paramètre_2, ...) {
Liste d’instructions;
}
function Bonjour(nom,prenom){
document.write("Bonjour<br>
votre nom est "+nom.toUpperCase()+"<br>
votre prenom est "+prenom);
}
Le navigateur affiche
Bonjour
votre nom est YOUSSEFI
votre prenom est Khalid
Bonjour("Youssefi","Khalid");
Oudghiri
JavaScript
Les fonctions
Fonctions récursives
une fonction qui faire appel à elle-même, est dite récursive.
function fact(n) {
if (n==0) return 1
else return (n*fact(n-1))
}
n=prompt("Entrer un entier positive","0");
document.write(n+"!="+fact(n));
Oudghiri
JavaScript
Les fonctions
Fonctions prédéfinies
Fonction eval()
Evalue et exécute le code
javascript contenu dans chaine.
Fonction isFinite()
Retourne true si le paramètre est
un nombre fini, sinon retourne
false.
Fonction isNaN()
Retourne true si le paramètre
n’est pas un nombre, sinon
retourne false.
Oudghiri
var a=1;
chaine="a = a + 10";
eval(chaine);
document.write("Valeur de a = "+a);
//Résultat : Valeur de a = 11
document.write(isFinite("10")+"<br>");
document.write(isFinite("aa10"));
//Résultat :
//true
//false
document.write(isNaN("10")+"<br>");
document.write(isNaN("aa10"));
//Résultat :
//false
//true
JavaScript
Les fonctions
Fonctions prédéfinies
Fonction parseFloat()
Convertit le paramètre en un
nombre décimal. Retourne le
nombre si la conversion est
possible et NaN si la conversion
est impossible.
document.write(parseFloat("100.5")
+"<br>");
document.write(parseFloat("aa10"));
//Résultat :
//100.5
//NaN
Fonction parseInt()
Convertit le paramètre en un
nombre entier. Retourne le
nombre si la conversion est
possible et NaN si la conversion
est impossible.
Oudghiri
document.write(parseInt("100.5")
+"<br>");
document.write(parseInt("aa10"));
//Résultat :
//100
//NaN
JavaScript
Les fonctions
Fonctions prédéfinies
Fonction escape()
Encode les caractères spéciaux d’une chaîne de caractères en
les remplaçant par leur code équivalent du type %xx.
La fonction unescape() permet de réaliser l’opération inverse.
document.write(escape("chaîne de caractères !"));
//Résultat : cha%EEne%20de%20caract%E8res%20%21
Fonction Number()
Convertit l’objet spécifié en
valeur numérique.
Fonction String()
Convertit l’objet spécifié en
chaîne de caractères.
Oudghiri
var jour = new Date("Jun 21, 2010
20:03:35");
//converit la date en millisecondes
document.write(Number(jour));
//Résultat : 1277147015000
jour = new Date(1277147015000);
//Convertit le nombre en date Mois
jour, Annéee etc.
document.write(String(jour));
//Résultat :
Mon Jun 21 2010 20:03:35
GMT+0100
JavaScript
Les objets
Généralités
Les objets de JavaScript, sont des entités appartenant au
monde des navigateurs et du langage.
Objets prédéfinis :
Le navigateur qu’on utilise pour voir une page, est un objet
qui s’appelle navigator.
La fenêtre du navigateur est un objet nommé window.
La page HTML est un objet que l’on appelle document.
Un formulaire à l’intérieur d’un document, est aussi un
objet appelé form.
Un lien hypertexte dans une page HTML, est encore un
autre objet appelé link.
Nouveau objet
Pour définir un objet en JavaScript : var obj1 = new Object ( );.
Oudghiri
JavaScript
Les objets
Propriétés et méthodes
Propriétés
Chaque objet JavaScript possède des propriétés, valeurs
associées à l’objet.
Si l’ordinateur était un objet au sens JavaScript, ses propriétés
pourraient être par exemple : Système d’exploitation, mémoire
vive, Capacité de stockage, ...
Méthodes
Chaque objet JavaScript possède des méthodes.
Revenons à notre exemple d’ordinateur. Les méthodes
d’utilisation varient entre : programmer, jouer, regarder des
films, msn...
Oudghiri
JavaScript
Les objets
Hiérarchie des objets du navigateur
Oudghiri
JavaScript
Les objets
Objet Navigator
Quelques propriétés
appCodeName : renvoie le nom du navigateur : Ex.
Netscape, Mozilla.
appVersion : renvoie la version du navigateur.
platform : renvoie le système d’exploitation de l’ordinateur
de l’internaute.
plugins : Table contenant les plugins supportés par le
navigateur
language : renvoie la langue du navigateur.
mimeTypes : Table contenant les types mime supportés
par le navigateur.
document.write(navigator.appCodeName); //Résultat : Mozilla
Méthode javaEnabled() permet de vérifier si le navigateur est
configuré pour exécuter des applets Java.
Oudghiri
JavaScript
Les objets
Objet window
La propriété closed permet de détecter si la fenêtre est ouverte
ou a été fermée.
Méthode alert()
Affiche le paramètre dans une boîte d’alerte ou d’information.
Pour un retour à la ligne en utilise \n.
window.alert() et alert() : les deux sont valides.
alert("Cette page contient ...\n du
JavaScript ! ")
Oudghiri
JavaScript
Les objets
Objet window
Méthode prompt()
Elle invite l’utilisateur à saisir un texte qui sera retourné en
cliquant sur Valider. Si l’utilisateur clique sur Annuer, la
méthode retourne null. window.prompt() et prompt() : les deux
sont valides.
var numero=Number(prompt("Tapez
un numéro",5));
//5 est la valeur par défaut
var rest=numero%3;
document.write("reste de la division
de "+numero+" par 3 est "+rest);
Oudghiri
JavaScript
Les objets
Objet window
Méthode confirm()
Affiche le paramètre texte dans un message d’alerte avec 2
boutons de confirmation.
Retourne true si le visiteur clique sur Ok.
Retourne false si le visiteur clique sur Annuler ou appuye
sur la touche Echap.
window.confirm() et confirm() : les deux sont valides.
popup=window.open("pub.html",
"pub","width=200, height=200");
//On ouvre une fenêtre
if(confirm("Voulez-vous fermer cette
fenêtre ?")) {
// On propose au visiteur de fermer
la fenêtre
popup.close();
}
Oudghiri
JavaScript
Les objets
Objet window
Quelques méthodes
open("url","name","option") : ouvre une nouvelle fenêtre
dont le nom est name et qui affiche la page déterminée par
url. Option permet préciser entre autres : width et height.
focus() : place le focus sur la fenêtre.
blur() : enlève le focus de la fenêtre.
print() : Imprime la page en cours.
resizeBy(x,y ) : grandit ou réduit la taille d’une fenêtre de x
pixels en largeur et de y pixels en hauteur.
resizeTo(x,y ) : Redimensionne une fenêtre à la taille x ∗ y
pixels.
Oudghiri
JavaScript
Les objets
Objet window
Quelques méthodes (Suite)
setInterval(code,delai) : Lance un traitement javascript
code répété à intervalle régulier de delai millisecondes.
clearInterval() : Arrête l’exécution d’un traitement
précédemment défini avec setInterval().
setTimeout(code,delai) : Déclenche une minuterie et
appelle le code javascript fonc dans delai millisecondes.
clearTimeout() : Suspend la minuterie déclarée par la
méthode setTimeout().
Oudghiri
JavaScript
Les objets
Objet document
Propriété : bgColor
Elle contient la couleur de fond de page. Elle permet de
changer dynamiquement la couleur de fond.
Exemple :
<a href="javascript:void(document.bgColor=’#339999’)">Fond bleu</a>
<a href="javascript:void(document.bgColor=’#66FF99’)">Fond vert</a>
Ces deux liens permettant de modifier la couleur de fond après
un clic.
Propriété : fileSize
Retourne la taille en octets de la page. Elle fonctionne
uniquement sous Internet Explorer.
Exemple :
document.write("Taille de la page : "+document.fileSize+" octets")
Oudghiri
JavaScript
Les objets
Objet document
Autres propriétés
lastModified : retourne la date de dernière modification.
location : retourne l’url complète de la page.
protocol : retourne le type de protocole de chargement de
la page (uniquement sous IE) : http, https, ...
title : retourne le titre du document dans la balise title.
Méthode : write()
Elle écrit le paramètre dans le document, à la position de
l’appel du script.
Oudghiri
JavaScript
Les objets
Objet document
Méthode : getElementById()
Retourne un objet HTML à partir de son id
<input type="text" id="toto">
<script type="text/javascript">
document.getElementById("toto").value="texte
défaut";
</script>
par
Méthode : getElementsByName()
Retourne un tableau d’objets HTML ayant nom défini dans la
propriété name de la balise de l’objet.
<input type="text" name="toto"> <BR><BR>
<input type="text" name="toto" value=""><BR><BR>
<input type="text" name="toto" value=""><BR>
<script language=javascript>
document.getElementsByName("toto")[0].value = "toto 0";
document.getElementsByName("toto")[1].value = "toto 1";
document.getElementsByName("toto")[2].value = "toto 2";
</script>
Oudghiri
JavaScript
Les objets
Objet document
this
this se rapporte toujours à l’élément en cours.
<script language="javascript">
function teste(x){
document.getElementsByName("attention")[0].innerHTML="Attention !
choisi la couleur "+x;
}
</script>
<form>
Choisissez une couleur de fond :
<select onchange="teste(this.value)">
<option value="blue">blue</option>
<option value="gris">gris</option>
<option value="vert">vert</option>
</select>
</form>
<p name="attention" style="color:red;"></p>
Oudghiri
JavaScript
vous avez
Les objets
Objet document
innerHTML est une instruction qui permet de modifier le
contenu d’un paragraphe ou d’insérer un objet dans la page.
<p id="paragraphe">texte texte</p>
<script type="text/javascript">
document.getElementById("paragraphe").innerHTML = "Texte changé";
</script> //Navigateur affiche : Texte changé
Attention : innerHTML doit être utilisé après l’insertion de
l’élément sur lequel il s’applique.
Oudghiri
JavaScript
Les objets
Objet history
L’objet history permet de naviguer dans l’historique du
navigateur.
Propriété : length
Retourne le nombre d’urls stockées dans l’historique.
Méthodes : back() et forward()
Permettent de retourner respectivement aux page précédente
et suivante.
Exemple : <a href="javascript:history.back()">Page Précédente</a>
Exemple : <a href="javascript:history.forward()">Page Suivante</a>
Méthode : go()
Force le navigateur à afficher une page de l’historique. Le
paramètre indique la position de la page dans l’historique.
Exemple : <a href="javascript:history.go(-2)">2 pages en arrière</a>
Oudghiri
JavaScript
Les objets
Objet location
Propriétés
host : retourne le nom de domaine de l’url.
href : retourne l’url complète de la page en cours.
pathname : retourne le chemin de la page
protocol : retourne le protocole de communication de l’url.
Méthode : reload()
Permet de recharger la page en cours. Equivalent à l’action du
bouton Actualiser.
Exemple : <a href="javascript:window.location.reload()">Recharger la page</a>
Méthode : replace()
Elle charge dans le navigateur la page définie dans le
paramètre sans l’enregistrer dans l’historique.
Exemple : <a href="javascript:window.location.replace()">Recharger la page</a>
Oudghiri
JavaScript
Les objets
Objet Math
L’objet Math permet de manipuler les nombres et d’accéder aux
fonctions mathématiques classiques.
Méthodes
Fonctions classiques : abs(), cos(), sin(), tan(), exp(), log(),
sqrt().
max() : retourne le maximum parmi deux nombres.
min() : retourne le minimum parmi deux nombres.
pow(x,y ) : retourne x à la puissance y .
round(x) : retourne l’arrondi (entier) x.
random() : retourne un nombre aléatoire entre 0 et 1.
Oudghiri
JavaScript
Les objets
Objet Image
Propriétés
fileSize : retourne la taille de l’image.
width : retourne la largeur de l’image.
height : retourne la hauteur de l’image.
id : retourne l’identifiant de l’image.
src : retourne l’adresse de l’image.
Oudghiri
JavaScript
Les objets
Objet Date()
Méthodes
getDate() : Retourne le jour du mois
getDay() : Retourne le jour de la semaine
getFullYear() : Retourne l’année
getHours() : Retourne l’heure
getMilliseconds() : Retourne les millisecondes de la date
getMinutes() : Retourne les minutes
getMonth() : Retourne le numéro du mois
getSeconds() : Retourne les secondes
var ladate=new Date()
document.write("Nous sommes le : ");
document.write(ladate.getDate()
+"/"+(ladate.getMonth()+1)+
"/"+ladate.getFullYear())
Oudghiri
JavaScript
Les objets
Objet Date()
Méthodes
setDate() : Affecte la date du mois
setFullYear() : Affecte l’année de la date
setHours() : Affecte les heures
setMinutes() : Affecte les minutes
setMonth() : Affecte le mois de la date
setSeconds() : Affecte les secondes
var MaDate=new Date(1996,10,20,12,5,0)
//Là on fixe une date
ladate.setFullYear(2010);
document.write("Nous sommes le : ");
document.write(ladate.getDate() +"/"+
(ladate.getMonth()+1)+ "/"+ladate.getFullYear());
//On affiche 20/11/2010
Oudghiri
JavaScript
Les objets
Objet Tableau
Syntaxe :var tab=new Array([val1, ..., valn])
Méthodes
join(", ") : Convertit un tableau en chaîne de caractères
composée de tous les éléments du tableau séparés par
une virgule.
x.concat(y) : Retourne la concaténation des tableaux x et y
pop() : Supprime le dernier élément du tableau
unshift("a","b","c") : Insère des éléments en début de
tableau.
push() : Insère des éléments en fin de tableau
reverse() : Inverse l’ordre des éléments
shift() : Supprime le premier élément du tableau
sort() : Trie les éléments d’un tableau
Oudghiri
JavaScript
Les évènements
OnClick
Execute une action lors du clic sur un élément : bouton,
champs, ...
<form>
<input type="text" name="champ_texte" value="valeur d’origine"
/>
<input type="button" name="bouton" value="Changer"
onclick="champ_texte.value=’valeur après clic’" />
</form>
onChange
Exécuter une action lorsqu’une option, un champ est changé.
<form action="" name="formulaire">
<input type="text" name="valeur" value="Changez ce texte"
onchange="affich_newvalue.value=’Valeur changée’" />
<input type="text" name="affich_newvalue" value="" /> </form>
Oudghiri
JavaScript
Les évènements
onBlur
L’action est exécutée lorsque l’élément perd le focus : Ex. sortir
d’une zone text dans laquelle on est rentré.
<form>
<input type="text" name="champ_texte" value="Ma valeur
d’origine"
onblur="champ_texte.value=’J ai perdu le focus’" />
</form>
onFocus
onFocus est le contraire de onBlur. L’action est exécutée lors
du clic dans la zone text.
<form>
<input type="text" name="champ_texte" value="Ma valeur
d’origine"
onfocus="champ_texte.value=’Là j ai le focus’" />
</form>
Oudghiri
JavaScript
Les évènements
onMouseOver
Exécute une action lord du survol d’une zone text, d’un bouton
...
<form>
<input type="text" name="champ_texte" value="Ma valeur
d’origine"
onmouseover="champ_texte.value=’Vous pointez sur moi’" />
</form>
onMouseOut
Exécute une action lorsque le pointeur est hors de la zone text.
<form>
<input type="text" name="champ_texte" value="Ma valeur
d’origine"
onmouseout="champ_texte.value=’Le curseur est parti’" />
</form>
Oudghiri
JavaScript

Documents pareils