Initiation au JavaScript documentation de cours complet

(1)

Le javaScript

Initiation au langage

Description du langage

Inclusion du javaScript dans des pages html

Création d'un élément simple

Notes à propos de l'écriture du code

Un premier test en javaScript

Opérateurs, comparaisons et boucles

Écriture dans la page

Fonctions et javaScript

Les actions du document

Les indispensables getElement et innerHtml

Le navigateur

(2)

Description du langage

Le javaScript est un langage qui permet de dynamiser ou d'augmenter

l'interactivité des pages html, c'est à dire qu'il va vous permettre d'insérer des actions produites :

lors de l'affichage d'un document par l'utilisateur de diverses manières lors de l'ouverture d'une page html lors de la fermeture d'une page html

Ce langage peut être mélangé à du code html ou produire des pages

entières. Les effets de bouton des pages web est par exemple une utilisation courante de javascript.

Le javaScript est produit généralement au chargement de la page dans le navigateur. A cet instant le document va produire un nombre X d'objets javaScript avec des propriétés basées sur le html du document.

Le javaScript utilise des classes répertoriées dans le navigateur et il n'est pas possible de produire ses propres classes d'objets.

Vu de l'aspect strictement orienté objet, ce type de hiérarchie est connu en tant que hiérarchie instanciée parcequ'il fait appel à des instances spécifiques des objets plutôt qu'à des classes d'objets.

Ces objets possèdent une hiérarchie qui est illustrée ci-dessous.

Les termes en anglais sont les objets eux mêmes.

Cette hiérarchie est logique puisque l'objet window (fenêtre) contient l'objet document qui contient l'objet form qui contient l'objet text par exemple.

(3)

Les objets du formulaire sont généralement construits comme suit: <input type = "type" class ="personnalisé" name="personnalisé" id ="personnalisé" actionsSurElement="personnalisé" value="personnalisé" />

actionsSurElement sera remplacé par une ou plusieurs des actions suivantes : onclick, onblur, ondbclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect

(4)

Dans le cas d'un formulaire avec un champ de texte qui serait traduit en langage courant cela donnerait :

La fenêtre contient un document qui contient un formulaire nommé

monFormulaire qui contient un champ de texte nommé boiteDeTexte qui contient une valeur

Dans cet exemple pour savoir ce que la boite de texte contient nous y ferions référence en utilisant la hiérarchie suivante:

window.document.monFormulaire.boiteDeTexte.value

L’élément window représente la fenêtre du navigateur, cette fenêtre contient un document HTML, c’est l’élément document

L’élément window et l’élément document peuvent sembler faire appel au même élément mais ce sont 2 éléments distincts.

document est un enfant de window

monFormulaire est la valeur du name=" " du marqueur form boiteDeTexte est la valeur du name=" " du marqueur input

(5)

<html> <head> <title>exemple</title> </head> <body>  <form name="monFormulaire">

</form> </body>

</html>

Les noms de référence sont ceux indiqués dans le code source qui a construit le formulaire de la page HTML

Le chemin vers le contenu de l'élément

<input type="text name="boiteDeTexte"> va donner le chemin :

window.document.monFormulaire.boiteDeTexte.value Dans la plupart des cas la racine window va être omise :

document.monFormulaire.boiteDeTexte.value

L'élément window est considéré comme présent en permanence si l'élément document est présent puisque l'élément document dépend directement de window .

(6)

Toutes les pages des navigateurs vont contenir les objets suivants:

navigator

Cette propriété va évaluer les versions du navigateur utilisé, les types MIME utilisés par le client ainsi que les plug-in qui sont installés.

MIME: Multipurpose Internet Mail Extensions

La norme MIME est utilisée pour définir le format des messages multimédia sur Internet. Un message codé selon la norme MIME contient les en-têtes nécessaires pour décrire le type des données

utilisé. Le contenu du message peut être composé d'un ou plusieurs des éléments suivants : texte, image, son, fichier binaire quelconque, etc.

Client:

Le client est l’application qui va être mise en relation avec le serveur à partir de la machine du visiteur, c’est à dire le navigateur. Faire travailler le client plutôt que le serveur va par exemple soulager le second.

Plug-in:

Le plug-in est un module externe au navigateur et qui va augmenter les capacités du navigateur. Généralement un plug-in permet la lecture de types de fichiers autres que html. Les plus répandus sont les plug-ins java et les plug-ins Flash.

window

L’objet fenêtre est l’objet racine du document. Ses propriétés s’appliquent à l’ensemble de la fenêtre et donc à son contenu.

document

L’objet document contient les propriétés basées sur le contenu du document comme son titre, sa couleur de fond, les liens et les formulaires.

location

Cet objet va contenir les informations basées sur l’URL en cours, c'est le contenu de la barre d'url.

history

Cet objet contient les propriétés des URL précédemment visitées par le client. URL:

Universal Ressource Locator ou lien. Les URL sont la base de la navigation sur internet. http://www.google.fr est une URL absolue qui amènera de quelque endroit de la planète que ce soit sur la page d’accueil de google en français. /pages/index.html est une URL relative dans le sens ou ce lien emmènera le visiteur vers une page relative au serveur sur lequel elle est placée.

(7)

Inclusion du javaScript dans des pages html.

Une page html classique ressemble à ce qui se trouve ci-dessous:

<html>

<head>

<title>page javaScript</title>

Pour insérer un code javaScript il faut falloir le déclarer dans l'entête du document avec la balise de langage de script:

Cette balise tout comme les balises html possède un balise d'ouverture ouverte par le signe < et fermée par le signe >

Dans cet entête on intègre la méthode de script utilisé et le type de langage de script: JavaScript

Dans l’exemple suivant un commentaire html se trouve autour des balises et désactive le JavaScript.

<!-- Commentaire HTML qui va désactiver le script dans la page <script type="text/JavaScript">

//ce script ne serait pas interprété contrairement au précédent. </script>

fermeture du commentaire HTML -->

Les instructions JavaScript se terminent par un point-virgule ;

varTexte = "Le point-virgule est placé en bout de ligne. " ; alert( varTexte ) ;

(8)

Notes à propos de l'écriture du code.

Lorsque vous allez écrire du code javaScript vous allez à la fois utiliser une syntaxe de code et une mise en page.

La syntaxe de code est celle qui va contenir les objets javaScript et qui va produire les actions. La mise en page est la façon dont vous allez organiser votre code.

Dans l'exemple suivant le code est mis en page de façon lisible.

N'hésitez pas à utiliser la touche tabulation pour augmenter la lisibilité de votre code. Ici l'action est simple mais dans des actions plus complexes on se perd souvent dans son code si il est formaté de façon trop rigide.

Remarquez aussi ici l'utilisation des commentaires caractérisés par les 2 slashes //

Tout ce qui se trouvera derrière ces 2 caractères ne sera pas interprété comme du code par les navigateurs.

Vous pouvez donc insérer à l'aide de ces commentaires des informations qui vous aideront lors de la reprise du code en main mais également neutraliser certaines parties de code afin de tester telle ou autre action.

Si vous désirez isoler plusieurs lignes de code en même temps, utilisez le commentaire multi ligne ouvert avec /* pour l'ouverture et */ pour la fermeture

Exemple:

<head>

//action en dessous de ce commentaire alert("test");

/*

ceci est en commentaire multi ligne cette ligne est aussi en commentaire

le commentaire finit sur la ligne suivante avec */

</script> </head>

(9)

Un premier test en javaScript

Le message d'alerte:

Nous allons ici intégrer un message d'alerte qui s'affichera au moment où la page contenant le script sera chargée par le navigateur

Lorsque vous allez visualiser cette page html dans un navigateur vous allez obtenir un message d'alerte contenant le message que vous avez indiqué entre les guillemets

L'objet alert utilisé ici est celui qui va lancer une fenêtre d'alerte dans le navigateur au chargement de la page.

Les objets javaScript sont des élément référencés par les navigateurs internet qui produiront tel ou tel type d'action.

Il existe un nombre considérable d'objets javaScript et les lister tous serait fastidieux.

Il existe toutefois sur le réseau des documentations très complètes sur la question, en particulier sur le site de Netscape, l'inventeur du javaScript. Quelques liens :

Un site pratique pour ses explications

http://fr.selfhtml.org/javascript/index.htm

ScriptAculous, avec ses modules à télécharger

http://script.aculo.us/

alert("Bonjour tout le monde"); </script>

</head> <body> </body> </html>

Testé dans un navigateur ce document produira un message d'alerte à chaque chargement de la page.

(10)

Le message ci-dessus est produit sous le navigateur Safari sous Mac Os X 10.4

Ce n'est pas par hasard que alert est le premier test fait en javaScript.

Alert sert très souvent à tester la validité d'une action de façon simple ou à tester le contenu de variables.

Ici notre action ne contient qu'un paramètre c'est à dire une chaîne de caractères.

Les chaînes de caractères sont produites par l'utilisation des guillemets ou des apostrophes pour les délimiter.

"ceci est une chaîne de caractères"

Les guillemets et apostrophes qui vont délimiter un chaîne de caractères iront toujours par paire.

Pour insérer un retour charriot dans un alert() vous devrez utiliser le

caractère lineBreak c'est à dire : \n entre les guillemets de votre chaîne de caratères.

alert("Plusieurs lignes\nseconde ligne\n3ème ligne\netc.");

Notez que ce qui est en javascript n'est pas en HTML mais en format texte standard

(11)

Les variables

Un nom de variable ne peut contenir que des caractères alphanumériques,

Ce sont les caractères suivants : de a à z et de 0 à 9 ainsi que le underscore, (le caractère souligné) _ TOUS LES AUTRES CARACTÈRES SONT EXCLUS. Une

variable ne doit PAS commencer par un nombre, 1element est faux comme nom de variable par exemple.

Les variables sont des sortes de boites de mémoire qui vont pouvoir stocker des données, par exemple si je veux affecter à la variable monTexte la valeur de bonjour je vais écrire :

monTexte = "bonjour";

La variable monTexte contient bonjour, si je veux vérifier ce que la variable contient je vais utiliser alert(monTexte); sans guillemets

alert( monTexte );

Avec des guillemets le résultat est totalement différent : alert( "monTexte" );

Dans le premier cas monTexte n'est pas entre guillemets, c'est donc obligatoirement une variable, ce qui sera affiché c'est le contenu de la variable. Cette variable doit exister pour être utilisée.

Ceci est faux

alert(monChoix);

monChoix = "Ceci ne fonctionne pas.";

L'ordre de lecture est très important, or dans l'exemple ci-dessus la

déclaration est placée après l'appel, monChoix n'existe pas au moment où l'alert() se produit.

Pour que cela fonctionne il faut que la variable aie préalablement été déclarée.

monChoix = "Ceci fonctionnera."; alert(monChoix);

Rien n'empêche de changer la valeur d'une variable : monChoix = "Ceci fonctionnera.";

alert(monChoix);

monChoix = "Ceci à fonctionné."; alert(monChoix);

(12)

Quelques exemples sur les variables

monTexte = "Ceci est un texte, je peux y insérer ce que je veux."; alert(monTexte);

prenom = "Stéphane"; nom = "Jeanneau";

patronyme = prenom +" " + nom ;

les variables prenom et nom contiennent du texte, il est entre guillemets; la variable patronyme est composée des variables prenom et nom séparés par une chaîne de caractère qui contient un espace, l'espace est un caractère comme un autre.

alert(patronyme);

va afficher : Stéphane Jeanneau

Il existe des variables globales et des variables locales.

Une variable globale est accessible de partout alors qu'une variable locale ne sera accessible que là où elle a été déclarée, dans une fonction par exemple Vous obtenez une variable locale par la déclaration de la variable avec var à l'intérieur d'une fonction.

uneVarglobale = 10; var uneAutreVar = 10;

//dans le cas ci-dessus les deux variables seront disponibles partout function monTest(){

//ici la variable n'est disponible que dans la fonction var uneVarLocale = 22;

(13)

Les nombres et les variables nombreCD = 45

la variable nombreCD ne contient que des chiffres qui eux ne sont pas entre guillemets,

ils sont interprétés en tant que tels,

si vous placez un nombre entre guillemets il risque de perdre sa qualité de nombre pour devenir une chaîne de caractères.

Le résultat sera 85

Toutes les variables sont des nombres, leur total est donc un nombre

nombreCD = 45; nombreK7 = 5;

nombreVinyls = 35;

total = nombreCD + nombreK7 + nombreVinyls;

alert(total);

Le résultat sera 515

Toutes les variables ne sont pas des nombres, leur total est donc une chaine de caractères.

nombreK7 = 5; nombreMp3 = "15";

total = nombreK7 + nombreMp3; alert(total);

(14)

Opérateurs, comparaisons et boucles.

Afin de produire des actions avec JavaScript vous devez tout d’abord vous familiariser avec les opérateurs et les conditions et les boucles.

Les opérateurs

Ils se divisent en 3 parties :

L’opérateur d’affectation =

Les opérateurs de calcul + - / *

Les opérateurs de comparaison > < >= <= == !=

L’opérateur d’affectation est le signe égal

Il va permettre d’affecter une valeur à une variable par exemple : var monNombre = 43;

Les opérateurs de calcul :

var monCalcul0 = 25 + 25;

var monCalcul1 = monCalcul0 - 30; var monCalcul2 = monCalcul1 * 2; var monCalcul3 = monCalcul2 / 2.5;

Aux opérateurs + et - on va combiner l’opérateur d’affectation pour modifier des valeurs en cours.

unCalcul = 15;

monCalcul3 += unCalcul; ceci est équivalent à

unCalcul = 15;

monCalcul3 = monCalcul3 + unCalcul;

La première version évite la redondance d'information, monCalcul3 n'est écrit qu'une seule fois.

(15)

Les opérateurs de comparaison vont vous permettre de lancer des comparaisons sous conditions.

== est équivalent à,

> supérieur à, < inférieur à,

>= supérieur ou égal à, <= inférieur ou égal à, != est différent de,

nombreCD = 3;

if(nombreCD >= 3){

//modifiez l'opérateur ci-dessus

messageTexte = “La livraison est offerte.”; }

alert(messageTexte);

Les opérateurs de comparaison sont généralement utilisés dans des comparaisons if()

- Simple condition

Si la valeur 1 est supérieure ou égale à la valeur valeur 2 alors action. La valeur 1 sera la variable nombreCD

La valeur 2 sera la valeur que l’on veut tester en rapport avec nombreCD nombreCD = 3;

if(nombreCD >= 3){

messageTexte = “La livraison est offerte.”; alert(messageTexte);

(16)

- Double condition

Si la valeur 1 est supérieure ou égale à la valeur valeur 2 alors action 1

sinon action 2.

La valeur 1 sera la variable nombreCD

La valeur 2 sera la valeur que l’on veut tester en rapport avec nombreCD c'est à dire supérieur ou égal à : >=3

nombreCD = 3;

if(nombreCD >= 3){ //alors action 1

messageTexte = “La livraison est offerte.”; }else{

//sinon action 2

messageTexte = “La livraison est offerte à partir de 3 CD.”; }

(17)

- Triple condition et plus

Si la valeur 1 est égale à la valeur valeur 2 alors action 1

sinon si la valeur 1 est supérieure à la valeur valeur 2 alors action 2.

sinon action 3

nombreCD = 3;

if(nombreCD == 3){ //alors action 1

messageTexte = “La livraison est offerte sans bonus.”; }else if(nombreCD > 3){

//alors action 2

messageTexte = “La livraison est offerte avec un bonus.”; }else{

sinon action 3

messageTexte = “La livraison est offerte à partir de 3 CD.”; }

//action produite quoi qu’il arrive... alert(messageTexte);

(18)

Les boucles

Pour faire des séries logiques il existe des boucles qui vont vous permettre à partir de quelques paramètres de produire des séries.

- La boucle for

for(conditionDépart ; conditionArrivéemaxi ; conditionCalcul){ utilisation de la boucle

}

ce qui donnera ecriture = “”;

for(n =1 ; n<10 ; n++){

ecriture = ecriture + “numéro ”+ n +“<br>”; }

document.write(ecriture);

- La boucle while

while( initialisation et tests des valeurs){ modifications des valeurs

}

ce qui donnera

n = Number(0); while(n <= 10){

n++;

ecriture = ecriture + “numéro ”+ n +“<br>”; }

document.write(ecriture);

Ces boucle for et while vont servir à tester des séries de valeurs, à créer des listes ou des séries de boutons ou des croix à la volée.

(19)

Écriture dans la page

L’objet write va vous permettre d’écrire directement dans le navigateur mais contrairement à ce que nous avons vu précédemment le code va s’insérer directement dans la page html comme illustré dans l’exemple ci-dessous.

<title>document</title>

Ceci va produire un document html qui contiendra le texte Bonjour.

Il est possible de produire du code html dans le code pour formater le texte. Le document.write devient alors:

document.write("<br> <font face='Arial, Helvetica, sans-serif'>test</font>");

Ce qui est habituellement entre guillemets double dans le code html est ici remplacé par un guillemet simple. Les guillemets doubles ne servent alors qu’à l’écriture du code.

Pour insérer des guillemets entre des guillemets il va falloir les échapper, c'est à dire que le guillemet doit être interprété comme un caractère ordinaire et pas comme une ouverture/fermeture de chaîne.

Le caractère d'échappement est l'anti-slash \ et est placé avant le caractère à échapper.

Pour écrire la phrase :

Les guillemets " sont des caractères qui vont par paire. on écrira

texte = "Les guillemets \" \" sont des caractères qui vont par paire."; alert(texte);

</script>

Il existe une autre fonction d'écriture qui est innerHTML(), elle est documentée plus bas dans ce document.

(20)

Fonctions et javaScript

L’écriture du code que nous avons vu ci-avant est un peu laborieuse. Il est possible de systématiser l’écriture du code grâce aux fonctions. Une fonction est déclarée avec le mot-clé function

Une fonction se place en 2 paramètres : sa création

et

son utilisation, ce que l'on nomme son appel.

Si par exemple nous devons produire une fonction de calcul nous pourrions écrire:

function calcul() { resultat=25+50;

document.write(resultat); }

//appel de la fonction déclarée plus haut

calcul();

Une fonction peut être déclarée dans l'entête du document (<head>) et appelée dans le corps du document (<body>)

<html> <head> <title>exemple</title> <script type="text/JavaScript"> function calculB() { resultat = 5 + 50; alert( resultat ); } </script> </head> <body> <script type="text/JavaScript"> calculB(); </script> </body> </html>

(21)

Si par exemple nous devons produire une fonction de calcul avec des paramètres nous pourrions écrire:

function calcul(a,b) { resultat=a+b;

document.write(resultat); }

L’avantage est que nous pouvons alors appeler le calcul en modifiant les valeurs de a et de b.

calcul(14,10);

Ce qui va donner dans le document html

<title>titre</title>

Ce qui va donner résultat= 24

Exemple : Modifiez la fonction en un convertisseur de Francs en Euros au taux de 6,55957.

(22)

Les actions du document

Dans l’exemple de la page précédente le code est inséré directement dans le document entre les balises javaScript.

Il est possible d’insérer les actions de façon différente dans le document. En effet des actions peuvent être produites lors d’actions précises du document html.

Ces actions sont des objets javaScript qui s’insèrent dans la balise html <body>

Ces actions vont se produire lorsque la balise <body> va rencontrer l’action en

question. Les actions sont les suivantes:

onBlur Cette action va détecter si l’objet fenêtre perd la sélection de l’objet

formulaire contenu.

onError Cette action va se produire lors d’une erreur dans le document ou lors

du chargement d’une image. Cette action ne se produit que si une erreur est détectée dans le document.

onFocus Cette action va détecter si l’objet fenêtre perd le focus c’est à dire si la

fenêtre active perd sa position de premier plan vis à vis d’une autre fenêtre du navigateur.

onLoad Cette action va se produire lors du chargement de la fenêtre du

navigateur. Cette action peut servir à insérer du code dans la page mais aussi à ouvrir les célèbres pop-up de publicités omniprésents sur internet.

onUnload Cette action va se produire lors de la fermeture de la fenêtre du

navigateur. Cette action peut ouvrir une fenêtre à la fermeture de la page.

Pour insérer le code que nous avons produit nous allons utiliser l’objet onLoad dans le marqueur body

Le marqueur body devient alors:

(23)

La page en chargement:

<title>document</title>

function navCheck(){

leNavigateur="Vous visitez ce site avec<br>"+navigator.appName+"<br>sous plate-forme "+navigator.platform+"<br> version"+ navigator.appVersion+" .";

document.write(leNavigateur); }

</script> </head>

insertion de la fonction au chargement // <body bgcolor="#FFFFFF" onLoad="navCheck();"> </body>

</html>

Pour que cette page ouvre une fenêtre il va falloir créer une fonction qui va se charger, non seulement de l’ouverture mais également de son formatage, c’est à dire sa taille et ses options.

Les options sont:

toolbar: Affiche ou masque la barre des outils location: Affiche ou masque la barre d’adresses status: Affiche ou masque l’état de la page

menubar: Affiche ou masque la barre des menus du navigateur scrollbars: Affiche ou masque les ascenseurs

resizable: Permet ou non le redimensionnement de la page. width: Définit la largeur de la fenêtre

height: Définit la hauteur de la fenêtre

(24)

les options dans une page html

Il est évident que pour ouvrir une autre fenêtre il faut avoir au moins deux documents html. Le document à ouvrir ici se nomme: fenetre.html et est placé

dans le même dossier que le document qui contient le javaScript. Le nom du document qui ouvre n’a pas d’importance.

(25)

En ouvrant ce document dans votre navigateur web vous allez ouvrir la seconde fenêtre.

Pour fermer cette fenêtre voyez le code ci-dessous:

Fermer une fenêtre ouverte au-dessus d’une autre

<html> <HEAD> <TITLE>retour</TITLE> <script type="text/JavaScript"> function clicclose() { clicWindow=window.close(); } </script> </HEAD> <body bgcolor="#ffffff">

<a href="#" onClick="clicclose();"> Fermer cette fenêtre

</a> </body> </html>

(26)

Imprimer une page

Pour imprimer le contenu d’une fenêtre il va également falloir créer une fonction et l’appeler dans la page.

Ici c’est l’élément print qui est utilisé.

On checke tout d’abord si le navigateur prend en charge cette fonction et si c’est le cas on imprime. Si par contre ce n’est pas le cas on en informe

l’utilisateur par un message d’alerte.

<title>jano PrinIt</title>

function go(){ if (window.print){

window.print(); }else{

alert("Votre navigateur ne prend pas cette fonction en charge"); }

}

</script> </head>

</body> </html>

Revenir page précédente

Le code ci-dessous vous permet de ramener votre visiteur vers la page qu’il aura précédemment visitée.

<html> <HEAD> <TITLE>retour</TITLE> </HEAD> <body bgcolor="#ffffff"> <p>

<a href="JavaScript:history.back(1);"> Retour page précédente...</a> </p>

</body> </html>

(27)

Les indispensables getElement

getElementById()

Va donner accès à l'élément HTML par l'attribut Id entre les parenthèses

<div class="uneClasse" id="menuGauche" name="monDivAMoi"> Bonjour. </div> <script type="text/JavaScript"> test = document.getElementById("menuGauche"); alert(test); </script>

Va donner '[object HTMLDivElement]' si menuGauche a été trouvé dans le

document.

C'est le type du <div id ="menuGauche" >. Les crochets indiquent un tableau.

test = document.getElementById("menuGauche").class; alert(test);

Va donner 'uneClasse' si menuGauche a été trouvé dans le document.

C'est la classe du <div id ="menuGauche" >.

getElementsByName()

Va donner accès à l'élément HTML par l'attribut name entre les parenthèses getElements (ByName) avec s contrairement au getElement (ByDiv) sans s

test = document.getElementsByName("menuGauche").name; alert(test);

Va donner 'monDivAMoi' si menuGauche a été trouvé dans le document.

(28)

getElementsByTag()

Va donner accès à l'élément HTML par l'attribut tag entre les parenthèses L’exemple suivant va modifier la première balise <h1> </h1> trouvée dans le tableau des balises.

document.getElementsByTagName("h1")[0].firstChild.data="Changé de h1"; }

</script>

<h1> Ce titre sera remplacé </h1>

<a href="javascript:changeLeH1();"> modifier</a>

Cet élément est pratique pour lister les éléments d'une page html.

innerHTML

innerHTML est pratique pour afficher des messages contextuels Dans l'exemple suivant on affiche le texte Je suis dynamique Au passage de la souris on inscrit Vous voyez?

À la sortie de la souris on affiche Je remplace le texte

<h1 id="Test" onMouseover="this.innerHTML='Vous voyez?'";

onMouseout="this.innerHTML='Je remplace le texte'";> Je suis dynamique

</h1>

Dans l'exemple suivant on affiche la valeur de test avec une fonction ajout <script type="text/javascript">

test = 0;

function ajout(element){

test++; element.innerHTML= test; }

</script>

<p onClick="ajout(this);"> compter

(29)

Le navigateur

Le navigateur, fureteur, browser, client est le même logiciel sous différents noms, le nom pro est client

Javascript peut vous permettre de tester les navigateurs qu'utilisent vos visiteurs. Il existe deux variables pour ce test : appName et userAgent Le problème des appels de .appName est qu'ils ne sont pas fiables sur la

véritable identité du navigateur qui va visiter la page.

Par exemple Opéra affichera Internet explorer en .appName.

Pour réellement connaître la version du navigateur qui visite votre page utilisez en place l'objet: userAgent

userAgent va fournir des informations sur la véritable version du navigateur ainsi que sur son vrai nom.

//ici nous utilisons userAgent

alert("Votre navigateur est "+navigator.userAgent); //ici nous utilisons appName

alert("Votre navigateur est aussi "+navigator.appName);

Maintenant que nous avons le nom du navigateur il serait intéressant de connaître sa version.

Le mot clé navigator.appVersion va nous servir à ça. Notre code devient alors:

//ici la variable version contiendra la version stockée du navigateur version=navigator.appVersion;

//on affiche la valeur de navigateur et de version dans un message d'alert

alert("Votre navigateur est "+ navigateur +" et sa version est: " + version);

//ici nous utilisons userAgent dans une variable avec navigator.appVersion typeNavigateur = navigator.userAgent;

version = navigator.appVersion;

(30)

Externaliser le script

Il est possible d'externaliser le code javascript, un peu comme pour les css, les données seront stockées dans un document unique auquel les pages pourront faire appel.

L'avantage étant que lors d'une modification d'un script javascript tous les documents liés prendront automatiquement cette modification.

Si je crée un document monDoc.js je vais y faire appel comme suit : <script type="text/JavaScript" src="monDoc.js">

</script>

Les document en .js ne contiennent pas de déclaration de script, par exemple monDoc.js contiendrait uniquement ceci :

typeNavigateur = navigator.userAgent; version = navigator.appVersion;

alert("Votre navigateur est "+typeNavigateur+" version :"+ version); Les documents HTML qui y seraient liés produiraient une alerte.

Rien n'empêche d'avoir à la fois un document externe et du script interne mais chacun aura sa propre déclaration.