Javascript Partie1

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
Externaliser le script
javaScript Stéphane Jeanneau © 2008 page n° 1

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.

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

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
Le code HTML correspondant :

<html>
<head>
<title>exemple</title>
</head>
<body>

<form name="monFormulaire">


<input type="text name="boiteDeTexte">


<input name="envoiMessageMel" type="submit" value="Envoyez">


</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 .

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.

Inclusion du javaScript dans des pages html.
Une page html classique ressemble à ce qui se trouve ci-dessous:
<html>
<head>
<title>page javaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
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:
<script type="text/JavaScript">
</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.

Les instructions JavaScript se terminent par un point-virgule ;
varTexte = "Le point-virgule est placé en bout de ligne. " ;

alert( varTexte ) ;

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>

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/
<html>
<head>
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.

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
alert("Plusieurs lignes\nLe <br> n'est pas pris en compte");

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);

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;
}

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.
nombreCD = 45;
nombreK7 = 5;
nombreVinyls = 35; Le résultat sera 85
total = nombreCD + nombreK7 + Toutes les variables sont des

nombreVinyls; nombres, leur total est donc un
nombre
alert(total);
nombreK7 = 5; Le résultat sera 515

nombreMp3 = "15";
Toutes les variables ne sont pas
total = nombreK7 + nombreMp3; des nombres, leur total est donc
alert(total); une chaine de caractères.

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.

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){

- 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
}else{
//sinon action 2
messageTexte = “La livraison est offerte à partir de 3 CD.”;

- 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...
Le dernier sinon, else{ }, si il est présent, doit toujours fermer la condition.

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.

É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.
<html>
<head>
<title>document</title>
</head>
<body bgcolor="#FFFFFF">
document.write("Bonjour");
</script>
</body>
</html>
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.

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>
function calculB() {
resultat = 5 + 50;
alert( resultat );
}
</script>
</head>
<body>
calculB();
</script>
</body>
</html>

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
<html>
<head>
<title>titre</title>
function calcul(a,b)
{
resultat=a+b;
document.write("résultat =" + resultat);
}
</script>
</head>
calcul (14,10);
</script>
</body>
</html>
Ce qui va donner résultat= 24
Exemple : Modifiez la fonction en un convertisseur de Francs en Euros au

taux de 6,55957.

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.
onErrorCette 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:
<body bgcolor="#FFFFFF" onLoad="navCheck();">
Vous trouverez la page complète en page suivante.

La page en chargement:
<html>
<head>
<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
Une capture page suivante place les options dans une page html

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.

<html>
<head>
<title>page1</title>
function ouvreFenetre(uneURL,nomFenetre,details) {
window.open(uneURL,nomFenetre,details);
}
</script>
</head>
<body onLoad="ouvreFenetre('fenetre.html','nom','toolbar=yes,location=yes,
status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=200,height=100')">
</body>
</html>
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>
function clicclose()
{
clicWindow=window.close();
}
</script>
</HEAD>
<body bgcolor="#ffffff">
<a href="#" onClick="clicclose();">
Fermer cette fenêtre
</a>
</body>
</html>

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.
<html>
<head>
<title>jano PrinIt</title>
function go(){
if (window.print){
window.print();
}else{
alert("Votre navigateur ne prend pas cette fonction en charge");
}
}
</script>
</head>
<form method="POST" name="form">
<input type="button" name="Btn" value="Print cette page" onClick="go();">
</form>
</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>

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>
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.

C'est le name du <div id ="menuGauche" >.

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.
<script type="text/javascript">
function changeLeH1(){
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
</p>

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;
alert("Votre navigateur est " + typeNavigateur +" version :"+ version );

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.
<script type="text/JavaScript" src="monDoc.js">

</script>
alert("Pas de problème.....");
</script>

Javascript Partie1

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript Partie1

Transféré par

Droits d'auteur :

Formats disponibles

Le javaScript

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

Les actions du document

Les indispensables getElement et innerHtml

javaScript Stéphane Jeanneau © 2008 page n° 1

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

lors de l'affichage d'un document

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

Le javaScript est produit généralement au chargement de la page dans le

Le javaScript utilise des classes répertoriées dans le navigateur et il n'est pas

Vu de l'aspect strictement orienté objet, ce type de hiérarchie est connu en

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

javaScript Stéphane Jeanneau © 2008 page n° 2

actionsSurElement sera remplacé par une ou plusieurs des actions suivantes :

onclick, onblur, ondbclick, onfocus, onkeydown, onkeypress, onkeyup,

onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect

javaScript Stéphane Jeanneau © 2008 page n° 3

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

L’élément window représente la fenêtre du navigateur, cette fenêtre contient

L’élément window et l’élément document peuvent sembler faire appel au

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

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

Le code HTML correspondant :

javaScript Stéphane Jeanneau © 2008 page n° 4

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

<input type="text name="boiteDeTexte">

Dans la plupart des cas la racine window va être omise :

L'élément window est considéré comme présent en permanence si l'élément

javaScript Stéphane Jeanneau © 2008 page n° 5

MIME: Multipurpose Internet Mail Extensions

La norme MIME est utilisée pour définir le format des messages

L’objet fenêtre est l’objet racine du document. Ses propriétés s’appliquent à

L’objet document contient les propriétés basées sur le contenu du document

javaScript Stéphane Jeanneau © 2008 page n° 6

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

Pour insérer un code javaScript il faut falloir le déclarer dans l'entête du

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

Dans l’exemple suivant un commentaire html se trouve autour des balises et

<!-- Commentaire HTML qui va désactiver le script dans la page

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

fermeture du commentaire HTML -->

Les instructions JavaScript se terminent par un point-virgule ;

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

javaScript Stéphane Jeanneau © 2008 page n° 7

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

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

Tout ce qui se trouvera derrière ces 2 caractères ne sera pas interprété

Si vous désirez isoler plusieurs lignes de code en même temps, utilisez le

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

//action en dessous de ce commentaire

javaScript Stéphane Jeanneau © 2008 page n° 8

Nous allons ici intégrer un message d'alerte qui s'affichera au moment où la

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

Il existe toutefois sur le réseau des documentations très complètes sur la

Un site pratique pour ses explications