Les instructions écrites en JavaScript sont placées entre deux balises <SCRIPT> et </SCRIPT>, le plus souvent dans l'entête de la page (entre les balises <HEAD>), mais aussi dans le corps de la page (en peut même placer des instruction JavaScript dans une page séparée par exemple truc.js, à laquelle on fait appel par une ligne <SCRIPT SRC="truc.js"></SCRIPT>).
Si on est très anxieux, on peut préciser le langage en écrivant : <SCRIPT LANGUAGE="JavaScript">, mais c'est surtout utile quand plusieurs langages cohabitent sur une même page.
Quelques fonctionnalités utiles avant d'entrer dans le détail de JavaScript
Les chaînes de caractères
Les chiffres
Les opérateurs logiques
Les Boucles
Les fonctions
Les boites de dialogue et formulaires
Les fenêtres et les documents
Les objets, les tableaux
Les liens hypertexte
Lancer un JavaScript de n'importe où
Les styles, animations (Internet Explorer)
Tout le vocabulaire du JavaScript (moteur de recherche)
Quelques exemples
Quelques fonctionnalités utiles avant d'entrer dans le détail de JavaScript :
document.write permet d'inscrire un texte dans la page Web. document.write("toto") aura exactement le même effet que d'inscrire directement toto, ce qui a un intéret limité, mais si on a défini une variable "age" et qu'on lui a donné la valeur 18, on pourra écrire, directement dans le corps de la page HTML :
Amélie Poulain a <SCRIPT>document.write(age)</SCRIPT> ans.
On peut aussi envoyer un message dans la barre d'état par window.status="toto"
alert permet d'envoyer un message à l'internaute qui lit la page. alert("toto") va renvoyer "toto" (cliquer pour voir le message).
Pour lancer cette instruction alert, on peut par exemple l'inclure dans une fonction javascript que l'on place dans l'entête de la page HTML :
<HEAD>
<SCRIPT>
function machin()
{
alert("toto")
}
</SCRIPT>
</HEAD>
Noter
- les parenthèses qui suivent le nom de la fonction (peuvent contenir des arguments)
- les accolades qui entourent le corps de la fonction
- l'absence de majuscules à alert.
Pour changer de ligne dans le message, utiliser \n : alert("bonjour \nbonjour")
La fonction peut être appelée par un lien hypertexte :
<A HREF="javascript:machin()">cliquez ici</A>
On peut aussi taper directement javascript:alert("bonjour") ou javascript:document.write("bonjour"), puis Enter dans la barre d'adresses du navigateur.
attention à la casse, JavaScript fait la différence entre majuscules et minuscules
Attention aussi aux fonctions qui ne sont pas supportées par tous les navigateurs. Netscape et IE n'utilisent pas toujours le même vocabulaire.
Pour connaitre le navigateur utilisé, on peut utiliser navigator.appName qui renvoie "Netscape" ou "Microsoft Internet Explorer"
(votre navigateur renvoie : )
ou bien (document.layer)?1:0 qui renvoie 1 avec NS et (document.all)?1:0 qui renvoie 1 avec IE.
Les chaînes de caractères
Les chaînes de caractères sont placées entre guillemets : "toto"
On peut utiliser + pour rabouter (concaténer) deux chaînes :
<SCRIPT>document.write("Amélie a " + 18 + " ans")<SCRIPT>
ou bien <SCRIPT>document.write("Amélie a " + age + " ans")<SCRIPT>
donne :
Pour inscrire un guillemet (double ou simple), il faut le faire précéder par un antislash (\) ou bien inverser guillemets simples et doubles :
document.write("du \"Javascript\"") et document.write('du "JavaScript"')
renverront :
Rien n'empêche d'insérer des balises HTML dans le texte :
document.write("Ecrire <FONT COLOR='red'>en rouge</FONT>")
va renvoyer : .
Plusieurs fonctions permettent de manipuler les chaines de caractères :
Si txt représente la chaine "Bonjour tout le monde",
Le nombre de caractères de txt chaîne est renvoyé par txt.length ou "Bonjour tout le monde".length ().
txt.charAt(5) va renvoyer le cinquième caractère, c'est à dire u (Attention, le premier caractère correspond au zéro).
txt.indexOf("jour") renvoie (position du texte "jour" dans la chaine, toujours en partant de zéro).
txt.lastIndexOf("on") renvoie (position du dernier "on" dans la chaine txt).
txt.substring(3,7) renvoie (caractères compris entre les rangs 3 inclu et 7 exclu).
txt.toUpperCase() renvoie (tout en majuscules).
On utilise txt.toLowerCase() pour passer un texte en minuscules (commode pour comparer des textes sans prendre en compte la casse).
Pour insérer un commentaire dans une instruction JavaScript, il suffit de mettre // devant chaque ligne de commentaire.
Si le commentaire est très long, on le fait préceder de /* et suivre de */.
Les chiffres
Pas de difficulté pour comprendre 1+2, 5-4, 5*2 ou 7/3.
Plus original, 10 % 3 renvoie le reste de la division de 10 par 3.
De nombreuses fonctions mathématiques sont des méthodes de l'objet Math (attention au M majuscule !):
Math.abs(-5) renvoie
Math.max(2,10) renvoie , Math.min(2,10) renvoie
Math.round(5.35) renvoie
new Date() renvoie la date du jour (Attention au D majuscule !).
Pour créer une nouvelle date : nouv = new Date("June 10, 2002")
getDate(), getMonths(), getYear(), getHours(), getMinutes(), getSeconds(), renvoient les jour, mois, année, heures, minutes et secondes d'une date :
Pour la date actuelle :
aujourd=new Date()
alert("nous sommes le " + aujourd.getDate() + "-" + (1+aujourd.getMonth()) + "-" + aujourd.getYear())
pour la date de dernière mise à jour de la page : document.lastModified (le pour cette page).
Pour savoir quand une page de site Web a été mise à jour, afficher la page dans le navigateur et taper javascript:alert(document.lastModified) dans la barre d'adresse puis taper Enter.
Pour commaître la date de mise à jour de la page que vous êtes en train de lire, et qui est située dans le deuxième frame du deuxième frame, on peut écrire dans la barre d'adresses :
javascript:alert(frames[1].frames[1].document.lastModified).
Exemple de valisation de dates : cliquez ici.
Les opérateurs logiques
age=18 affecte la valeur 5 à la variable age
Le signe == (deux signes = successifs) permet de comparer deux valeurs :
age==18 renvoie true, age==14 renvoie false
différent de s'écrit !=, supérieur à, inférieur à, supérieur ou égal, inférieur ou égal : >, <, >=, <=.
On peut utiliser ces opérateurs de comparaison pour lancer des instructions conditionnelles :
if (age==18) {alert("Amélie a 18 ans")}
Bien noter :
- les parenthèses qui entourent la condition
- les accolades qui entourent l'instruction
- et ne pas oublier que JavaScript fait la différence entre majuscules et minuscules, ne pas écrire If.
On peut également utiliser else :
if (age==18) {alert("Amélie a 18 ans")}
else {alert("Amélie n'a pas 18 ans, elle en a " + age)}
On peut également utiliser des expressions conditionnelles qui renvoie une valeur dépendant d'une condition :
txt=(age>18) ? "plus de 18 ans" : "moins de 18 ans"
txt vaudra "plus de 18 ans" si la variable age est supérieure à 18 et "moins de 18 ans" sinon.
(Noter les parenthèses entourant la condition et les deux points séparant la valeur renvoyée quand la condition est remplie de la valeur renvoyée quand la condition n'est pas remplie).
document.write("Amélie a" + txt) renvoie donc
Les conditions peuvent être combinées grace à des opérateurs logiques :
L'opérateur "et" s'écrit &&,
L'opérateur "ou" s'écrit ||,
L'opérateur "non" s'écrit !.
Les Boucles
Deux signes + devant une variable augmentent sa valeur de 1 et renvoient la valeur incrémentée.
Dans notre exemple, à chaque fois que l'on va lancer (cliquer ici) l'instruction
alert("Amélie a " + ++age + " ans"), Amélie va vieillir d'un an.
Après avoir vieilli Amélie, on peut relancer la fonction conditionnelle du paragraphe précédent.
(on peut de même utiliser --age pour rajeunir Amélie).
Si on place les deux signes ++ (ou --) derrière la variable, elle est incrémentée de 1 mais renvoie la valeur avant incrémentation.
while... est utilisé pour construire des boucles :
Par exemple
<SCRIPT>age=17;while (age<21) {document.write("<BR>Amélie a " + age + " ans ");age++}</SCRIPT>
va donner:
On peut aussi utiliser for...next qui donne un résultat similaire :
for (age = 17 ; age < 21 ; age++) {document.write(age + " ans <BR>")}
Les fonctions
Une fonction (function) est une instruction executée par JavaScript. Elle ne renvoie pas forcément une valeur et peut se contenter d'effectuer une action.
Elle peut dépendre de paramètres (arguments).
Placée dans une zone de script dans l'entête d'une page HTML, elle pourra être appelée depuis n'importe où dans la page.
La syntaxe est la suivante :
function suivi du nom de la fonction suivi de deux parenthèses contenant éventuellement le nom des arguments
ouverture d'une accolade
texte des instructions executées par la fonction
fermeture de l'accolade :
function machin()
{
alert("toto")
}
(cliquez ici pour lancer machin)
Il n'est pas obligatoire de passer à la ligne avant et après les accolades, mais cela peut éviter des erreurs. On peut écrire :
function machin()
{alert("toto")}
voire : function machin(){alert("toto")}
Pour utiliser une fonction avec des arguments, il suffit de les mettre entre les parenthèses :
function message(truc)
{alert(truc)}
cliquez ici pour lancer message("zaza").
Enfin, une fonction peut renvoyer une valeur, par l'intermédiaire de return :
function phrase(nb_ans)
{return("Amélie a " + nb_ans + " ans")}
cliquez ici pour lire la valeur retournée par "phrase(20)".
Pour lancer l'execution d'une fonction, plusieurs méthodes, dont notamment :
- l'utilisation d'évênements, comme onload, onMouseOver ou onclick, par exemple
<BODY onload="machin()"> qui va lancer l'execution de la fonction machin() dès le chargement de la page.
Ou bien <INPUT TYPE="button" VALUE="cliquer" onClick="machin()">
- l'utilisation d'un lien hypertexte pointant vers la fonction :
<A HREF="javascript:machin()">lancer machin()</A>
- on peut aussi appeler une fonction à partir d'une autre fonction, simplement en la nommant.
- on peut retarder le lancement d'une fonction avec setTimeout :
timer=setTimeout("machin()",1000) va lancer machin dans 1000 millisecondes.
Les boites de dialogue et formulaires
- On a déjà vu la fonction alert() qui permet d'envoyer un message à l'internaute.
- On peut aussi utiliser confirm pour afficher un message avec deux boutons (OK et annuler):
if (confirm("fait-il beau ?"))
{alert("il fait beau")}
else {alert("il ne fait pas beau")}
- Pour l'inviter à saisir des données, on peut utiliser prompt.
par exemple : prompt("quel âge a Amélie ?")
ou bien : prompt("quel âge a Amélie ?","20 ans")
La valeur renvoyée est celle qui est saisie par l'utilisateur :
réponse = prompt("quel âge a Amélie ?","20 ans")
ou encore :
alert("Amélie a " + prompt("quel âge a Amélie ?","20 ans"))
Pour insérer un saut de ligne dans une boite de dialogue, utiliser \n.
En JavaScript, un formulaire est un objet form, dépendant d'un objet document :
document.forms[2] représente le troisième formulaire (on compte toujours à partir de zéro) de la page en cours. On peut aussi l'appeler par son nom HTML : document.forms("truc") (attention aux crochets et parenthèses !).
Pour sélectionner une zone de saisie d'un formulaire, on utilise select(). Pour sélectionner un autre élément d'un formulaire, on utilise focus() (et blur() pour désélectionner.
Pour simuler un clic de souris sur un objet, on utilise click() :
Si un bouton s'appelle bouton_truc, on peut écrire bouton_truc.click().
document.forms[1].submit() permet de simuler le clic de souris sur le bouton de validation du deuxième formulaire.
Les fenêtres et les documents
document correspond à une page html.
document.open() permet d'ouvrir une nouvelle page en écriture, on peut ensuite utiliser document.write("blabla") pour y écrire du texte et document.close() pour afficher le résultat.
on peut aussi utiliser writeln qui ajoute un changement de ligne en fin de texte.
document.clear efface le contenu de la fenetre.
document.lastModified renvoie la date de dernière modification de la page : . L'adresse URL de la page est donnée par document.location ou document.location.href (), son titre par document.title ().
Le code html de la page est accessible par document.body.outerHTML (cliquez ici).
Open permet aussi d'ouvrir une nouvelle fenêtre
fen=window.open() ouvre une nouvelle fenêtre (objet nommé fen).
fen=window.open("http://boursorama.fr","nouv","width=200,height=100") ouvre une nouvelle fenêtre contenant Boursorama, de dimension 200-100 (en pixels), dont le nom HTML est "nouv".
window.open accepte d'autres arguments, comme toolbar, location, directories, status, menubar, scrollbars, resizable...
window représente la fenêtre en cours. Elle est fermée par window.close() ou redimentionnée par window.resizeTo(100,200).
Ses dimensions sont renvoyées par window.innerWidth et window.innerHeight sous Netscape (version 4 et plus) et document.body.clientWidth ou document.body.offsetWidth et .clientHeight sous Internet Explorer (version 4 et plus).
Pour déterminer la largeur de la fenêtre active, il faut d'abord déterminer le type de navigateur puis utiliser document.body.clientWidth pour Internet Explorer ou window.innerWidth pour Netscape :
if(document.all){largeur=document.body.clientWidth}
if(document.layers){largeur=window.innerWidth}
ou, plus court :
largeur=(document.all)?document.body.clientWidth:window.innerWidth.
Dans ce document, largeur vaut .
On peut déplacer le document dans la fenêtre par window.scrollBy(x,y).
Cliquer ici pour voir l'effet de window.scrollBy(0,20).
On peut afficher un nouveau document dans une fenêtre grace à location.
window.location="http://boursorama.fr"
va afficher boursorama dans la fenêtre en cours.
parent désigne la fenêtre parente de la fenêtre en cours :
parent.location="http://boursorama.fr"
va afficher boursorama dans la fenêtre parente.
history.back() permet de recharger la dernière page visitée.
history.forward() permet de recharger la page suivante.
document.referrer renvoie l'URL de la page appelante
Les cadres sont nommés frames en JavaScript.
parent.frames[1] renvoie le deuxième cadre de la fenêtre parente (fenêtre contenant les cadres en cours) :
<SCRIPT>document.write(parent.frames[0].name)</SCRIPT> renvoie :
<SCRIPT>document.write(parent.frames[1].name)</SCRIPT> renvoie :
<SCRIPT>document.write(parent.parent.frames[0].name)</SCRIPT> renvoie :
<SCRIPT>document.write(parent.parent.frames[1].name)</SCRIPT> renvoie :
Pour afficher un document dans le frame menu, on peut utiliser location :
parent.menu.location="http://boursorama.fr"
ou parent.frames("menu").location="http://boursorama.fr"
ou encore parent.frames[0].location="http://boursorama.fr"
cliquez ici pour voir un exemple de cadres imbriqués.
Les objets, les tableaux
JavaScript utilise de nombreux objets, window, frame, document... sont des objets.
Rien n'empêche de créer de nouveaux objets.
La notion d'objet est également très utile pour modifier les styles d'une page html, ce qui ouvre des possibilités particulièrement intéressantes (cliquez ici).
L'objet auquel on a le plus souvent recours est le tableau :
Une liste de prénoms comme prenom[0]="Lucie", prenom[1]="Marie", prenom[2]="Emilie", prenom[3]="Amélie", prenom[4]="Julie" forme un tableau de 5 éléments.
Pour créer le tableau précédent, il suffit d'écrire :
prenom[0]="Lucie"
prenom[1]="Marie"
prenom[2]="Emilie"
prenom[3]="Amélie"
prenom[4]="Julie"
On peut aussi crér un objet tableau à l'aide d'une fonction :
function cree_tableau()
{num=0
this.length=cree_tableau.arguments.length
while(num<this.length)
{this[num]=cree_tableau.arguments[num]
num++}}
La fonction définit la taille du tableau puis attribue la valeur de ses arguments à chacun des éléments du tableau. Le nouvel objet tableau est créé en utilisant new et en appelant la fonction :
tableau_prenoms=new cree_tableau("Marie","Emilie","Julie","Lucie")
Une fois le tableau créé, tableau_prenoms[1] renvoie "Emilie".
Les liens hypertexte
link permet d'afficher un lien hypertexte :
<SCRIPT>document.write("Boursorama".link("http://boursorama.fr"))</SCRIPT> va donner :
document.links[1] renvoie le deuxième lien (objet) de la page.
document.links[1].href est l'URL cible.
On peut également utiliser hash (nom de l'ancre cible éventuelle), pathname (chemin d'accès de la cible), search (paramètres transmis avec l'URL), et target (fenêtre cible).
Par exemple, l'URL du dernier lien (déjà chargé) de cette page est donné par : <SCRIPT>document.write(document.links[document.links.length-1].hash)</SCRIPT> qui renvoie :
De même,
<SCRIPT>
for (num=1;num<=document.links.length;num++)
{document.write(document.links[num-1].hash)}
</SCRIPT>
va faire la liste de tous les liens (déjà chargés) de la page:
Si on crée un lien nommé "retour" par :
<A HREF="truc.html#accueil_htmlxl" target="_blank" NAME="retour"> zaza </A>
<SCRIPT>document.write(document.links("retour").hash)</SCRIPT> va renvoyer ,
<SCRIPT>document.write(document.links("retour").pathname)</SCRIPT> va renvoyer ,
et <SCRIPT>document.write(document.links("retour").href)</SCRIPT> va renvoyer .
Plus intéressant, JavaScript permet de modifier un lien en utilisant les propriétés href et target de l'objet link.
cliquez sur le lien...
puis sur celui-ci
Le premier lien s'appelle "lien" (<A HREF="" NAME="lien">cliquez...</A>)
Le deuxième lien lance une fonction qui va modifier l'URL du premier lien :
document.links("lien").href="nouvel URL...
De la même façon, on peut modifier l'adresse d'une image avec sa propriété src :
Pour changer la première image de la page : document.images[0].src="futileon.gif"
cliquez pour changer l'image
Lancer un JavaScript de n'importe où
Habituellement, les fonctions JavaScript sont insérées dans une page HTML, le plus souvent dans l'entête, entre des balises <SCRIPT> elles-mêmes placées entre les balises <HEAD>.
Mais on peut aussi insérer la focntion dans le corps du document html, toujours entre deux balises <SCRIPT>.
On peut également faire appel à un JavaScript directement dans un lien hypertexte :
<A HREF='javascript:alert("bonjour")'>
On peut séparer deux instructions par un point-virgule :
<A HREF='javascript:alert("bonjour");alert("au revoir")''>
plutôt que d'appeler un message (alert), le JavaScript peut par exemple ouvrir une nouvelle fenêtre (windows.open et y écrire un texte (document.write) :
<A HREF='javascript:fen=window.open();fen.document.write("zaza")'>
Cette technique est notamment très pratique pour envoyer à l'utilisateur une information dans une petite fenêtre (genre pop up) : cliquez ici
Le lien peut d'ailleurs contenir une grande quantité d'information sous forme de javascript, par exemple le texte complet d'une page Web : cliquez ici, le texte de la page qui apparait est completement inclu dans le texte du lien sur lequel vous avez cliqué (cliquez ici pour voir le texte du lien).
C'est une copie de la page modif_web.html qui explique comment utiliser cette particularité pour "modifier virtuellement" des sites existants.
Le lien hypertexte n'est pas forcément dans une page html, il peut par exemple être dans un fichier Excel :
Ouvrir un classeur Excel, faire Insertion / lien hypertexte / fichier ou url :
javascript:document.write("nous sommes le "+new Date())
On peut aussi envoyer un message sous forme de lien dans un mail :
Ouvrir un nouveau message, taper
url:javascript:"nous%20sommes%20le%20"+new%20Date()%20
ou bien url:javascript:document.write("nous%20sommes%20le%20"+new%20Date());%20
ou encore url:javascript:alert("nous%20sommes%20le%20"+new%20Date());%20
puis envoyez le message (les %20 remplacent les espaces pour éviter que le texte ne soit coupé).
On peut aussi lancer un javascript en le tapant directement (précédé de "javascript:" dans la barre d'adresse d'Internet Explorer, voire dans celle de l'explorateur Windows !
Recopiez par exemple javascript:fen=window.open();fen.document.write("zaza") dans la barre d'adresse d'Internet Explorer, puis cliquez sur Enter. Faites ensuite de même dans l'Explorateur Windows.
La technique est à retenir lorsque vous faites des recherches sur Internet. Pour savoir si les informations que vous consultez sont fraiches, il suffit de taper
javascript:alert(document.lastModified)
dans la barre d'adresse de la page que vous consultez et de taper sur Enter !