Formation Javascript

Initiation à JAVASCRIPT
Animation et inter activité de pages Web

v1.0
hubert.borderiou@ujf-grenoble.fr
Présentation de chacun.
Connaissez-vous HTML ou XHTML ?
Connaissez-vous un langage de programmation ?
Avez-vous déjà utilisé Javascript ?
Qu'attendez-vous de Javascript ?
Pages web exemples.
Formation Javascript v1.0 Hubert Borderiou 1/28

Table des matières
1 Introduction...................................................................................................................................... 4
1.1 Affichage d'une page web dans son navigateur
......................................................................................................................................................... 4
1.2 Ce que fait et ne fait pas Javascript ..........................................................................................4
1.3 Outil de développement utilisés ...............................................................................................4
2 Le langage Javascript....................................................................................................................... 4
2.1 Insérer du code Javascript dans une page web......................................................................... 5
2.1.1 Dans le fichier HTML.......................................................................................................5
2.1.1.1 Dans le Header.......................................................................................................... 5
2.1.1.2 Dans le corps du document....................................................................................... 6
2.1.1.2.1 Dans une balise <script>....................................................................................6
2.1.1.2.2 Dans un évènement associé à une balise HTML standard................................ 6
2.1.2 Dans un fichier externe..................................................................................................... 7
2.2 Programmer en Javascript.........................................................................................................8
1.1.1 Généralités ....................................................................................................................... 8
2.2.1 Les variables..................................................................................................................... 9
2.2.1.1 Déclaration................................................................................................................ 9
2.2.1.2 Type de variable........................................................................................................ 9
2.2.1.3 Variables locales et globales................................................................................... 10
2.2.2 Tableaux..........................................................................................................................10
2.2.2.1 Tableaux associatifs................................................................................................ 10
2.2.3 Les structures de contrôle............................................................................................... 11
2.2.3.1 Tests.........................................................................................................................11
2.2.3.1.1 If.......................................................................................................................11
2.2.3.1.2 Switch.............................................................................................................. 11
2.2.3.2 Boucles.................................................................................................................... 12
2.2.3.2.1 While............................................................................................................... 12
2.2.3.2.2 For....................................................................................................................12
2.2.3.2.3 For ... in............................................................................................................13
2.2.3.2.4 Break et Continue............................................................................................ 13
2.2.4 Procédures et Fonctions.................................................................................................. 13
2.2.5 Expressions régulières.....................................................................................................14
2.2.5.1 Composantes d'une expression régulière :.............................................................. 14
2.2.5.2 match....................................................................................................................... 15
2.2.5.3 replace..................................................................................................................... 16
2.2.5.3.1 Utilisation avancée de replace : ...................................................................... 16
2.2.5.4 search.......................................................................................................................17
2.2.6 Fenêtres de dialogue........................................................................................................17
2.2.7 Les événements Javascript.............................................................................................. 18
2.2.7.1 Événement de fenêtre :............................................................................................ 18
2.2.7.2 Evenement de formulaire : ..................................................................................... 18
2.2.7.3 Evenements clavier :............................................................................................... 19
2.2.7.4 Evénement souris :.................................................................................................. 19
3 DOM (Document Object Model)................................................................................................... 19
3.1 Qu'est ce que DOM ?.............................................................................................................. 19
3.2 DOM et Javascript.................................................................................................................. 20
3.2.1 Présentation de l'inspecteur DOM de Firefox1.5............................................................ 21
3.2.1.1 Récupérer des informations concernant le navigateur avec Javascript/DOM.........21

3.2.1.2 Informations concernant la fenêtre du navigateur avec Javascript/DOM............... 22
3.2.1.3 Accéder à un élément avec Javascript/DOM.......................................................... 22
3.2.1.4 Interagir avec un élément avec Javascript/DOM.................................................... 23
4 Les éléments Frame et iFrame........................................................................................................24
5 L'objet fenêtre : window.................................................................................................................25
6 Exercice :........................................................................................................................................ 27
6.1 Vérification d'un formulaire................................................................................................... 27

1 Introduction
1.1 Affichage d'une page web dans son navigateur
Schéma simplifié :
Requête Fichier
HTTP Serveur : HTML Client :
Client :
- navigateur + URL - construit la page web - page web affichée
(php, base de données...) dans le navigateur,
éxécution du code
Javascript.
1.2 Ce que fait et ne fait pas Javascript
− ce qu'il fait
− contrôler dynamiquement une page web (lire, modifier, supprimer des éléments) au niveau
du navigateur.
La page web chargée, elle est manipulée au niveau du client sans nouvel échange avec le
serveur.
− Intégrer une application dans une page web (ex : une calculatrice, une table de choix des
couleurs, un éditeur HTML...)
− lire/écrire un cookie (http://www.actulab.com/les-cookies-en-javascript.php)
− utiliser des événements afin de déclencher des actions dans la page web, sans
communication avec le serveur (ex : afficher du texte, une image suite à un click ou au
survol d'une zone).
− ce qu'il ne fait pas
− lire des informations contenues sur le serveur (c'est le travail de PHP, Java, Perl...)
− lire des informations contenues sur le poste client (à l'exception des cookies). (ouf !).
1.3 Outil de développement utilisés

Firefox + Inspecteur DOM (installer Firefox en mode Personnaliser et Sélectionner Outils de
Développement).
Web Developer Toolbar pour Firefox : https://addons.mozilla.org/firefox/60/
Extensions Firefox : http://www.framasoft.net/IMG/html/firefoxwdev2-traduction.html
Éditeur HTML quelconque.
2 Le langage Javascript
Ce document ne présente pas le langage Javascript de manière exhaustive, pour des informations

plus détaillées, vous pouvez consulter des sites comme :
http://fr.selfhtml.org/javascript/index.htm
http://www.w3schools.com/js/default.asp
Référence DOM : http://www.mozilla.org/docs/dom/domref/dom_shortIX.html
2.1 Insérer du code Javascript dans une page web

Il est théoriquement possible d'insérer du code Javascript dans le HEADER ou n'importe où dans le
BODY d'une page web.
Nous allons voir ci-après ce qu'il convient de faire.
2.1.1 Dans le fichier HTML

Entre des balises
<script type="text/javascript>
...
</script>
'type="text/javascript"' est obligatoire depuis HTML4.0
2.1.1.1 Dans le Header

On peut placer du code Javascript, déclaration de fonction, ou de variable dans la partie HEADER
du document HTML dans une balise <script type="text/javascript">.
Le code placé dans le HEADER sera exécuté avant la première ligne du BODY (voir exemple ci
dessous).
Ex : code Javascript dans le HEADER (exemple01.html)
<html>
<head>
<script type="text/javascript">
// Directement exécuté
document.write('Avant le début !');
// Déclaration des fonctions
function hello() {
alert('Hello');
}
</script>
</head>
<body>
debut
<br/>
hello();
</script>
fin
</body>
</html>

Bien qu'il soit possible de déclarer des fonctions dans le BODY, il convient de placer la
déclaration des fonctions Javascript dans le HEADER afin de s'assurer de leur visibilité
dans tout le reste du document.
2.1.1.2 Dans le corps du document
2.1.1.2.1 Dans une balise <script>

On peut placer du code Javascript, déclaration de fonction, ou de variable dans la partie BODY du
document HTML dans une balise <script type="text/javascript">.
On préférera cependant déclarer les fonctions ou variables dans la section HEADER afin qu'elles
soient accessibles dans toute la page.
Ex : déclaration de fonction dans la section BODY (exemple02.html)

<html>
<head>
</head>
<body id="plop">
debut
/* appelle de la fontion hello()
la fonction n'a pas encore été
déclarée, cela ne fontionne pas */
hello();
</script>
<hr/>
// Déclaration de la fonction hello()
function hello() {
document.write('Hello');
}
</script>
<hr/>
/* appelle de la fonction hello()
déjà déclarée, ça marche. */
hello();
</script>
<br/>
fin
</body>
</html>
2.1.1.2.2 Dans un évènement associé à une balise HTML standard

Un certain nombre d'événements sont associés aux éléments HTML, par exemple onclick (en

cliquant), onfocus (en activant l'élément), onmouseover (en passant sur l'élément avec la souris)...
On retrouvera, par exemple, l'événement onclick pour un bouton, l'événement onmouseover pour
une image...
Voir Chapitre "Les événements Javascript" pour plus de détails.
Ex : événement HTML appelant une fonction Javascript (exemple03.html)

<html>
<body>
debut
<input value="plik" type=button
onclick="alert('plok')"/>
fin
</body>
</html>
2.1.2 Dans un fichier externe.

On appellera un fichier Javascript externe "nom_de_fichier.js" dans le HEADER comme suit :
<script src="carre.js" type="text/javascript">
</script>
On ne pourra pas raccourcir cette écriture en <script src="carre.js" type="text/javascript"

/>.
Ex : code Javascript dans un fichier externe

Fichier Javascript : exemple04.js
function hello() {
document.write("Hello!");
}
Fichier HTML (exemple04.html) :

<html>
<head>
<script src="exemple4.js"
type="text/javascript" >
</script>
</head>
<body id="plop">
debut

// fonction déclaré dans le fichier script.js
hello();
</script>
fin
</body>
</html>
2.2 Programmer en Javascript
1.1.1 Généralités
– Javascript est sensible à la casse : toto différent de Toto différent de TOTO
– Les commentaires Javascript débutent par /* et se terminent par */ pour des
commentaires sur plusieurs lignes; ou commençant par // pour des commentaires sur une
seule ligne
Ex : commentaires en Javascript :
/* ceci est une commentaire Javascript
sur plusieurs lignes */
// ceci est un commentaire Javascript sur une ligne
var data = 12; // description de la variable en commentaire ici !

– Expression : les expressions se terminent par un point virgule : ;

La majorité des navigateurs autorise de passer de ce ;
– Les bloc d'instructions se trouvent entre accolade :
Ex : bloc d'instructions :
{ // début du bloc d'instructions
instruction1;
instruction2;
} // fin du bloc d'insctructions
– La balise <noscript> : tout message entre les balises <noscript> et </noscript> ne sera vu que
par un utilisateur dont le Javascript est désactivé dans son navigateur.
Ex : la balise <noscript> avec IE6 : exemple15.html

<html>
<body>
<noscript>
Vous devez activer le javascript pour
poursuivre.
</noscript>
document.write("Le javascript est
activé.");
// self.location.href =
"maPageWebAvecDuJavascript.html";
</script>
</body>
2.2.1 Les variables
2.2.1.1 Déclaration
On déclare une variable avec le mot réservé var.
var valeur; // la variable a la valeur undefined
var valeur = 2000;
var valeur = "deux mille";
On peut se passer de var si l'on initialise la variable :

newvaleur = "2000";
2.2.1.2 Type de variable

– Chaînes de caractères : l'opérateur de concaténation est "+".
– Nombres
– Booléens : false = 0; true = 1 (ou une valeur différente de 0).
On retrouve en Javascript les types de variables d'un langage standard. Le typage en Javascript est
dit faible; c'est à dire que l'on peut utiliser une variable dans un contexte ou son type serait
inaproprié.
Ex : typage faible de Javascript : exemple16.html

<html>
<body>
<noscript>
Vous devez activer le javascript pour
poursuivre.
</noscript>
var nombre = 10;
var phrase = "Bonjour, après 9 il y a : ";
alert(phrase+nombre);
</script>
</body>
2.2.1.3 Variables locales et globales
Toute variable déclarée hors du champ d'une fonction sera globale et vue par le code Javascript
suivant sa déclaration.
2.2.2 Tableaux
Déclaration d'un tableau :
var tableau = new Array();
Taille initiale d'un tableau : var tableau = new Array(5);
Tableau avec valeurs prédéfinies : var tableau = new Array("un", "deux", "trois");
Assigner une valeur : tableau[0] = "valeur";
Taille d'un tableau : tableau.length (indices de 0 à tableau.length-1)
Parcourir un tableau : for (var i=0; i<tab.length; i++) { document.write(tab[i]); }
2.2.2.1 Tableaux associatifs

On peut déclarer des tableaux associatifs en Javacript :
var tabasso = new Array();
tabasso["pomme"] = "fruit";
tabasso["poire"] = "fruit";
tabasso["courgette"] = "légume";
Attention, les tableaux associatifs ne sont pas soumis aux mêmes règles que les tableaux ordinaires
en ce qui concerne leur taille, puisqu'ils sont définis avec leur propre ensemble indices. Un tableau
associatif, aura pour taille 0.
Pour tester les tableaux (exemple05.html) :

<html>
<body>
<h3>Taille d'un tableau</h3>
var tab=new Array(2); //
document.write(tab.length+"<br/>");
// donne 2
// la taille définie d'un tableau est informative
et peut être dépassée.
// on peut prédéfinir la taille d'un tableau si
l'on doit utiliser tableau.length par exemple.
tab[3] = "troisième élément";
document.write(tab.length+"<br/>");
// donne 4 (indices 0, 1, 2, 3)
</script>
<h3>Tableau associatif</h3>
document.write(tabasso.length+"<br/>");
// donne 0
document.write(tabasso["pomme"]+"<br/>");
// donne fruit
document.write(tabasso[0]+"<br/>");
// donne undefined
</script>
</body>
</html>
2.2.3 Les structures de contrôle
2.2.3.1 Tests
2.2.3.1.1 If
&& : et logique
|| : ou logique
! : non logique
Exemple :
var i=1;
var j=2;
var k=3;
if (i == 1 && (j>3 || k==3)) { // est vrai
...;
}
2.2.3.1.2 Switch
Exemple :
var nom="jean";
switch (nom) {
case "jean" : alert("Bonjour jean");
break;
case "bob" : alert("Bonjour bob");

break;
default : alert("Bonjour");
}
Utilisation du break dans un switch :

Lorsque la variable testée est trouvée par la commande case, toutes les instructions à partir de ce
niveau sont exécutées jusqu'au break suivant.
Exemple : utilisation du switch et du break (exemple06.html)
<html>
<head>
function tester(innom){
switch (innom) {
case "jean" : document.write(innom+" 23 <br/>");
case "bob" : document.write(innom+"
Geldov<br/>");
break;
default : document.write("fin");
}
}
</script>
</head>
<body>
<h3>Utilisation du switch<br/>et du break</h3>
<script>
var nom1 = "jean";
var nom2 = "bob";
var nom3 = "sam";
tester(nom1);
document.write("<hr/>");
tester(nom2);
tester(nom3);
</script>
</body>
2.2.3.2 Boucles
2.2.3.2.1 While
Exemple :
Var i=0;
While (i<12) {
...;
i++;
}
2.2.3.2.2 For
Exemple :
For (var i=0; i<12; i++) {
...;
}

2.2.3.2.3 For ... in
Exemple : utilisation de For...in (exemple07.html)
<html>
<body>
<h3>For ... in</h3>
for (var nom in tabasso) {
document.write(nom+" =>
"+tabasso[nom]+"<br/>");
}
</script>
</body>
</html>
2.2.3.2.4 Break et Continue

Ces instructions permettent de sortir d'une boucle, ou de passer à l'élément suivant de la boucle.
Exemple : utilisation de break et continue dans une boucle (exemple08.html)
<html>
<body>
<h3>Break et Continue</h3>
<h4>Break</h4>
var tab = new Array("a", "b", "c", "d");
// arrivé à "c" on arrête la boucle
for (var i=0; i<tab.length; i++) {
if (tab[i] == "c") break;
document.write(tab[i]+"<br/>");
}
</script>
<h4>Continue</h4>
var tab = new Array("a", "b", "c", "d");
// on n'effectue pas le traitement pour "c"
for (var i=0; i<tab.length; i++) {
if (tab[i] == "c") continue;
document.write(tab[i]+"<br/>");
}
</script>
</body>
</html>
2.2.4 Procédures et Fonctions

On déclare une fonction avec le mot clef : function
Les paramètres sont déclarés entre parenthèse.
L'éventuel résultat sera renvoyé avec le mot clef return

Exemples :
function hello(innom) {
alert("Bonjour "+innom);
}
function ajoute(inval1, inval2) {

return inval1+inval2;
}
Appel d'une fonction : resultat = mafonction(paramètres_éventuels);

Appel d'une procédure : maprocédure(paramètres_éventuels);
2.2.5 Expressions régulières

(http://fr.selfhtml.org/javascript/objets/regexp.htm)
Elle respecte la syntaxe standard des expressions régulières UNIX.
Exemples :
Expression régulière pour un nom ou un prénom : /^[çàäéèëêïîöôüûùa-z\- ]+$/i
Expression régulière pour un mail : /^([a-zA-Z0-9_\-]+\.)*[a-zA-Z0-9_\-]+\@([a-zA-Z0-9_\-]
+\.)+\w{2,4}$/i
Expression régulière pour une date au format jj/mm/aaaa : /^[0-3][0-9]\/[0-1][0-9]\/[0-9]{4}$/
(on pourra remplacer [0-9] par \d)
2.2.5.1 Composantes d'une expression régulière :
(source : http://fr.selfhtml.org/javascript/objets/regexp.htm)
Composante Exemple Description
trouve "par", à savoir dans "par", "départ", "parlement" et
/par/
"répartie".
^ trouve "par" au début de la valeur à rechercher, à savoir dans
/^par/ "par" et "parlement", à condition que l'un de ces mots apparaisse
en premier dans la valeur.
$ trouve "par" à la fin de la valeur à rechercher, à savoir dans
/par$/ "par" et "Épar", à condition que l'un de ces mots apparaisse en
dernier dans la valeur.
* trouve "par", "parr" et "parrrrrr", donc le dernier signe avant
/par*/
l'étoile est répété 0 ou un nombre de fois au choix.
+ trouve "parr" et "parrrrrr", donc le dernier signe avant l'étoile
/par+/
est répété au moins une ou un nombre de fois au choix.
. trouve "épar" et "Spar", donc un signe au choix à un endroit
/.par/
déterminé.
.+ trouve "épar" et "hépar", donc une suite de signes au choix à un
/.+par/ endroit déterminé. Résumé de caractère au choix et nombre au
choix de caractères au choix.
\b trouve "par" en tant que mot distinct. \b signifie une extrémité
/\bpar\b/
de mot.
\B trouve"par" uniquement à l'intérieur de mots, par exemple dans
/\Bpar\B/
"départir" ou "impartir". \B signifie pas d'extrémité de mot.
\d trouve un chiffre entier quelconque. \d signifie un chiffre (0 à
/\d.+\B/
9)

\D /\D.+/ trouve" ex." dans "3 ex.", donc pas de chiffres.
\f /\f/ trouve un signe de saut de page.
\n /\n/ trouve un signe d'avance d'une ligne (LF)..
\r /\r/ trouve un signe de retour chariot (CR).
\t /\t/ trouve un signe de tabulation.
\v /\v/ trouve un signe de tabulation verticale.
\s /\s/ trouve toute sorte d'espace blanc donc \f\n\t\v et des espaces.
\S trouve un caractère quelconque distinct qui ne soit ni espace blanc donc
/\S.+/
pas \f\n\t\v ni un espace.
\w trouve tous les signes alphanumériques et le tiret de
soulignement (condition typique par exemple pour des noms
/\w.+/
attribués soi-même pour qu'ils soient conformes aux langages de
programmation).
\W trouve un signe qui ne soit ni alphanumérique ni tiret de
soulignement (typique pour rechercher des signes non permis dans
/\W/
des noms attribués soi-même pour qu'ils soient conformes aux
langages de programmation)..
\() trouve "par" et en prend note en interne. Jusqu'à 9 parenthèses
/(par)/ de ce genre (endroits marqués) sont permises dans une expression
régulière.
/.../g trouve "par" aussi souvent qu'il apparaît dans le passage à
/par/g rechercher. Les occurrences sont sauvegardées en interne dans un
tableau.
/.../i /par/i trouve "par", "Par" et "PAR", donc sans respecter la casse.
/.../gi trouve "par", aussi souvent qu'il apparaît dans le passage à
/par/gi
rechercher (g) et sans respecter la casse (i
2.2.5.2 match
Soit re une expression régulière et chaîne une chaîne de caractères :
chaine.match(re) : retourne la chaîne matchée si la chaîne vérifie l'expression régulière re, null
sinon.
Exemple : utilisation de match (exemple09.html)
<html>
<body>
<h3>Expressions régulières : match</h3>
var nom1="jean 23";
var nom2="23 JEAN 23";
var nom3="23";
var re=/[a-z]+/gi;
document.write(nom1.match(re)+"<br/>");
if (nom1.match(re)) { document.write(nom1+"
matche"); }
</script>
</body>
</html>

2.2.5.3 replace
Soit re une expression régulière et chaine une chaine de caractère :
nouvelle_chaine = chaine.replace(re, "remplacement") : la partie de la chaîne vérifiant re est
remplacée par "remplacement".
Exemple : utilisation de replace (exemple10.html)
<html>
<body>
<h3>Expressions régulières : replace</h3>
var nom1="jean 12 34 ";
var re1=/[0-9]+/;
var re2=/[0-9]+/g;
document.write(nom1.replace(re1, "00")+"<br/>");
document.write(nom1.replace(re2, "00")+"<br/>");
</script>
</body>
</html>
2.2.5.3.1 Utilisation avancée de replace :
Le second paramètre : "remplacement" peut également être une fonction.

Cela permet de générer la chaîne de remplacement en fonction de la chaîne trouvée. La valeur
retournée par la fonction (return...) est alors la chaîne de remplacement.
Le premier paramètre de la fonction, est la valeur qui vérifie l'expression régulière, les autres
paramètres sont les valeurs extraient de l'expression régulière par les parenthèses de sélection d'une
expression régulière.
Exemple : utilisation avancée de replace (exemple11.html)
<html>
<body>
<h3>Expressions régulières :</h3>
<h3>replace avancé</h3>
var nom1="jean 1 2 3 4 ";
var re1=/[0-9]+/;
var re2=/[0-9]+/g;
document.write(nom1.replace(re2,
function remplace(str) {
switch (str) {
case "1" : return "un";
case "2" : return "deux";
case "3" : return "trois";
default : return "0";
}
}
));
</script>
</body>
</html>

2.2.5.4 search
Soit re une expression régulière et chaine une chaîne de caractère :
chaine.search(re) : retourne -1 si la chaîne ne vérifie pas re, sinon, donne l'indice dans la chaîne ou
se trouve la sous-chaîne vérifiant re.
Exemple : utilisation de search (exemple12.html)
<html>
<body>
<h3>Expressions régulières : search</h3>
var nom="mais ou est donc or ni car";
var re1 = /or/g;
var re2 = /o/;
var re3 = /o/g;
var search1 = nom.search(re1);
document.write(search1+" "+search2+" "+search3);
</script>
</body>
</html>
2.2.6 Fenêtres de dialogue

3 fonctions prédéfinies permettent de communiquer avec l'utilisateur :
– alert(message); // pour envoyer un message à l'utilisateur.
– confirm(message); // pour poser une question à l'utilisateur qui répondra par Ok ou Annuler. Le
résultat de l'appel à cette fonction sera true ou false.
– prompt(message, [valeur par défaut]); // pour poser une question ouverte à l'utilisateur. Le
résultat de l'appel à cette fonction sera une chaîne de caractères contenant la réponse de
l'utilisateur.
Ex : utilisation de alert(), confirm() et prompt() : exemple17.html
<html>
<body>
<script type="text/javascript" >
alert("Nous allons utiliser les fonctions confirm() et
prompt()");
if (confirm("Voulez vous essayer la fonction prompt() ?
")) {
var comment = prompt("Quelles sont vos impressions
concernant l'utilsation de confirm() ?");
document.write("Merci pour votre commentaire :
<br/>[");
document.write(comment);
document.write("]");
}
else {
document.write("Revenez utiliser prompt() une autre
fois.");
}
</script>
</body>

</html>
2.2.7 Les événements Javascript

Les événements Javascript sont des actions (fonctions Javascript) que l'on peut déclencher par un
événement sur une balise.
Par exemple, lorsque la page web a terminé son chargement ou bien lorsque l'on clique sur une
image, ou lorsque l'on presse une touche du clavier.
Vous pourrez trouver une liste des événements à l'URL suivante :

http://www.w3schools.com/tags/ref_eventattributes.asp ou
http://fr.selfhtml.org/javascript/langage/gestevenements.htm#generalites
Vous pourrez trouver quel événement est utilisable pour quel élément HTML à l'adresse suivante :
http://www.w3schools.com/tags/default.asp; en sélectionnant un élément et dans la partie "Event
Attributes".
(source : http://www.w3schools.com/tags/ref_eventattributes.asp)
2.2.7.1 Événement de fenêtre :

Valable pour une élément <body> ou <frame>
Attribute Description
onload Script à exécuter à la fin du chargement de la fenêtre.
onunload Script à exécuter lorsque l'on ferme la fenêtre.
2.2.7.2 Evenement de formulaire :

Valable pour les éléments d'un formulaire (<input>, <textarea>, <select>...).
onchange Script à exécuter quand la valeur d'un élément change.
onsubmit Script à exécuter quand le formulaire est validé.
onreset Script à exécuter quand le formulaire est réinitialisé (méthode reset()).
onselect Script à exécuter quand un élément est sélectionné.
onblur Script à exécuter quand un élément perd le focus.
onfocus Script à exécuter quand un élément gagne le focus.
Note : un élément peut avoir le focus sans que son contenu ne soit
sélectionné.

2.2.7.3 Evenements clavier :
Non valable pour les éléments : base, bdo, br, frame, frameset, head, html, iframe, meta, param,
script, style, et title.
onkeydown Script à exécuter quand une touche est appuyée.
onkeypress Script à exécuter quand une touche est appuyée puis relâchée.
onkeyup Script à exécuter quand une touche est relâchée.
2.2.7.4 Evénement souris :

Non valables pour les éléments : base, bdo, br, frame, frameset, head, html, iframe, meta, param,
script, style, et title.
onclick Script à exécuter lors d'un click souris.
ondblclick Script à exécuter lors d'un double click souris.
onmousedown Script à exécuter quand le bouton de la souris est appuyé.
onmousemove Script à exécuter quand le pointeur de la souris bouge.
onmouseover Script à exécuter quand le pointeur de la souris passe sur l'élément.
onmouseout Script à exécuter quand le pointeur de la souris quitte un éliment.
onmouseup Script à exécuter quand le bouton de la souris est relâché.
3 DOM (Document Object Model)
3.1 Qu'est ce que DOM ?

"Il ne s'agit pas ici d'un langage de programmation mais au contraire d'un schéma pour langages de
programmation, qui décrit comment accéder à des éléments de HTML et aussi aux éléments de
votre choix de documents basés sur XML. Le DOM règle par exemple quelles possibilités
JavaScript doit mettre à disposition pour permettre au programmeur de rechercher dans un fichier le
texte d'un titre N°1, pour le remplacer par un autre texte . Le DOM n'est par opposition au
JavaScript pas un langage de programmation concret."
(http://fr.selfhtml.org/introduction/technologies/javascript.htm)
"DOM permet de construire un arbre logique contenant les informations issues d'un document. Il est
donc nécessaire de parcourir et de mémoriser l'intégralité du document avant de pouvoir effectuer
les traitements voulus. Pour cette raison, les programmes utilisant DOM ont souvent une empreinte
mémoire volumineuse en cours de traitement. À l'inverse, à partir d'un arbre DOM donné, il est
possible de générer des documents dans le langage de balisage voulu, qui pourront à leur tour être
manipulés par l'interface DOM.

DOM est essentiellement utilisé pour pouvoir modifier facilement des documents XML."
(fr.wikipedia.org)
Voir l'inspecteur DOM de Firefox.
3.2 DOM et Javascript

Javascript possède une librairie qui permet d'accéder à l'arbre DOM afin de le consulter ou de le
modifier :
http://www.mozilla.org/docs/dom/domref/dom_shortIX.html
Lorsqu'une modification de l'arbre DOM est effectuée, elle est affichée dynamiquement par la page
web, sans avoir besoin ni d'accéder au serveur, ni de recharger la page.
Ex : affichage du type et du contenu d'un élément HTML avec Javascript/DOM (exemple13.html)

<html>
<body>
debut
<hr>
<form name="monform">
<input name="moninput" value="hop" />
</form>
document.write(document.monform.nodeName);
document.write(document.monform.moninput.value);
</script>
<hr>
fin
</body>
</html>
Note : les types d'éléments renvoyés sont en majuscule. Afin d'éviter toute confusion lors de test
d'égalité, on pourra utiliser les fonctions toLowerCase() toUpperCase().
Ces fonctions sont utiles lors de test de deux chaînes de caractères.
Exemple :
if ( document.monform.nodeName.toLowerCase() == "form") { ... }
var nom1 = "jean";
var nom2 = "Jean";
if (nom1.toLowerCase() == nom2.toLowerCase()) { ... }

3.2.1 Présentation de l'inspecteur DOM de Firefox1.5
Une instruction telle que document.write ajoute du code html à l'arbre DOM de la page web.
La source de la page, montre le code Javascript et non ce qui est affiché sur le navigateur.
L'inspecteur DOM de Firefox indique le contenu de l'arbre DOM en mémoire, et donc ce qui est
affiché à l'écran.
On remarque la structure arborescente d'une page web dans la représentation DOM.
3.2.1.1 Récupérer des informations concernant le navigateur avec Javascript/DOM

window.navigator.appName Retourne le nom de code interne du navigateur
(ex : Netscape pour Mozilla, Firefox et
Netscape; Microsoft Internet Explorer pour IE6)
window.navigator.appVersion Retourne la version du navigateur

("5,0(Windows;fr)" pour Firefox1.5; "4.0
(compatible; MSIE 6.0; Windows NT 5.1;
SV1)" pour IE6)
window.navigator.language Retourne le langage par défaut du navigateur

(sur 2 caractères)
window.navigator.cookieEnabled est vrai si le navigateur accepte les cookies

window.navigator.plugins document.write(window.navigator.plugins.item(
10).name
window.navigator.platform Retourne la plate forme du navigateur. (Win32,
Linux...)
Exemple : information concernant le navigateur (exemple14.html)
<html>
<body>
<h3>Information concernant le navigateur :</h3>
<script>
document.write("System d'exploitation :
"+window.navigator.platform+"<br/>");
document.write("Nom du navigateur :
"+window.navigator.appName+"<br/>");
document.write("Version du navigateur :
"+window.navigator.appVersion+"<br/>");
document.write("Langage du navigateur :
"+window.navigator.language+"<br/>");
document.write("Le navigateur autorise les
cookies :
"+window.navigator.cookieEnabled+"<br/>");
document.write("Liste des plugins installés sur
le navigateur :");
document.write("<p style='font-size:80%; font-
style:italic;'>");
for (var i in window.navigator.plugins){
document.write(window.navigator.plugins.item(
i).name+"<br/>");
}
document.write("</p>");
</script>
</body>
</html>
3.2.1.2 Informations concernant la fenêtre du navigateur avec Javascript/DOM

window.innerHeight; window.innerWidth Donne ou modifie la hauteur (largeur) de la
partie réservée à l'affichage de la page web du
navigateur. On peut modifier la hauteur (largeur)
de la fenêtre avec cette instruction.
window.outerHeight; window.outerWidth Donne ou modifie la hauteur (largeur) de la
fenêtre du navigateur (bord extérieur).
window.screenX; window.screenY Donne ou modifie l'abscisse (ou l'ordonnée) de
la fenêtre à l'écran. (0,0) étant le coin en haut à
gauche.
3.2.1.3 Accéder à un élément avec Javascript/DOM

Il existe de nombreuses fonctions permettant d'accéder à un élément HTML de la page web.
Par exemple :

getElementById(id) element = document.getElementById(id)
Se réfère à l'attribut id d'une balise HTML. Note
: l'ID doit être unique dans le document.
getElementsByTagName(nomBalise) elements =
element.getElementsByTagName(tagName)
Donne un tableau des éléments de balise
nomBalise dans le document.
On trouvera aussi des fonctions comme : getAttribute, firstChild, childNodes, parentNode etc...
Ces fonctions sont documentées sur le site de référence DOM :
http://www.mozilla.org/docs/dom/domref/dom_shortIX.html
La fonction la plus couramment utilisée est getElementById.
Nous allons voir une utilisation de getElementById dans le chapitre suivant.
3.2.1.4 Interagir avec un élément avec Javascript/DOM

Une fois l'élément que l'on veut manipuler repéré, nous pouvons récupérer des informations le
concernant (type de balise, contenu etc...) ou le modifier.
Ci dessous quelques exemples d'interaction avec un élément :
information : element.nodeName donne le type de balise de l'élément. (ex : DIV,

TABLE ...)
information, modification : element.className donne la classe CSS de l'élément. Permet de
changer la classe
information, modification : innerHTML donne le contenu de la balise. Permet de changer
le contenu.
innerHTML et className permettent de nombreuse actions sur un élément.
exemple18 : information et modification d'un élément (exemple18.html)

<html> Permet de changer le contenu et le
<head>
<style type="text/css"> style CSS d'un élément dont on
.style1 {background-color:#FFFFBB} connaît l'ID.
.style2 {background-color:#DDDDFF}
</style>
</head>
<body>
<div id="bloc1" class="style1">
Mon texte original.
</div>
// on test si l'élément d'id "bloc1" existe
if (document.getElementById("bloc1")) {
document.write("bloc1 est un élément :
"+document.getElementById("bloc1").nodeName);

alert("Cliquez pour modifier la valeur de bloc1.");
document.getElementById("bloc1").innerHTML =
"Nouveau contenu pour bloc 1.";
alert("Cliquez pour modifier le style de bloc1.");
document.getElementById("bloc1").className =
"style2";
}
</script>
</body>
</html>
4 Les éléments Frame et iFrame
Source : http://fr.selfhtml.org/javascript/objets/frames.htm
"Avec l'objet frames vous avez accès aux cadres, à savoir à un jeu de cadres et à ses fenêtres cadres
définis dans un fichier HTML.
Étant donné que chaque fenêtre cadre représente une fenêtre distincte pour le navigateur, l'objet
frames est en fin de compte une variante de l'objet window, l'objet fenêtre plus général. Toutes les
propriétés et méthodes qui font partie de l'objet window peuvent être aussi utilisées sur l'objet
frames donc sur des fenêtres cadres distinctes. L'objet frames ne représente un objet distinct que
parce qu'il comprend une propriété supplémentaire et qu'un certain nombre de particularités pour
l'adressage de fenêtres cadres en JavaScript sont à observer:
Schéma 1 / exemple 1:
parent.frames[#].propriété/méthode();
parent.frames[1].location.href = "sport.html";
Schéma 2 / exemple 2:
parent.nomdecadre.propriété/méthode();
parent.fenetredroite.close();
Explication:
parent est un nom de fenêtre réservé que vous pouvez utiliser pour adresser les fenêtres d'un jeu de
cadres. À la place de parent vous pouvez également utiliser top. Avec parent vous adressez la
fenêtre mère de la fenêtre cadre actuelle, avec top dans chaque cas la fenêtre d'affichage du
navigateur la plus élevée dans la hiérarchie.
Vous pouvez adresser les fenêtres cadres de deux façons:
avec un numéro d'index (comme dans le schéma 1 / exemple 1)
Si vous utilisez des numéros d'index, mentionnez frames suivi entre crochets du numéro d'ordre de
la fenêtre cadre désirée dans le jeu de cadres. Veillez que le comptage commence par 0, c'est à dire
vous adressez la première fenêtre cadre avec frames[0] la deuxième fenêtre cadre avec frames[1]
etc... Pour le comptage prévaut l'ordre dans lequel les commandes <frame> sont définies dans le jeu
de cadres.
avec le nom de la fenêtre cadre (comme dans le schéma 2 / exemple 2)
Pour cela, mentionnez le nom défini dans la définition HTML de la fenêtre cadre <frame ...> avec
l'attribut name=.
Étant donné que l'objet frames est à vrai dire une variante de l'objet window, vous pouvez non
seulement utiliser toutes les propriétés et méthodes de l'objet window sur l'objet frames, mais aussi
toutes les autres qui dans la hiérarchie sont sous l'objet window. De la même façon que vous pouvez

par exemple modifier grâce à window.document.forms[0].elements[0].value = "Serge" le contenu
d'un champ de saisie d'un formulaire dans un fichier HTML normal, vous pouvez obtenir la même
chose dans un jeu de cadres avec parent.frames[1].document.forms[0].elements[0].value = "Serge".
"
Exemple19 : fichiers exemple19.html, exemple19-haut.html et exemple19-bas.html : source :

http://fr.selfhtml.org/javascript/objets/affichage/bsp_frame_scripts.htm
Exemple20 : fichiers exemple20.html et exemple20-iframe.html. On peut également manipuler le

contenu d'un iFrame.
5 L'objet fenêtre : window
Source : http://fr.selfhtml.org/javascript/objets/window.htm
"window: généralités sur l'utilisation
L'objet window (Fenêtre) est l'objet le plus élevé dans la famille des objets pour tout ce qui est
affiché dans la fenêtre du navigateur. Par l'intermédiaire de l'objet window vous pouvez questionner
et contrôler la fenêtre du document. De plus, vous pouvez définir de nouvelles fenêtres et en
spécifier librement les propriétés.
Vous pouvez adresser la fenêtre d'affichage principale disponible du navigateur WWW par les
objets window ou self. Les propriétés et méthodes de l'objet window peuvent être appliquées aux
objets window et self.
Exemple:
<html><head><title>Test</title>

</script>
</head><body>
</body></html>
Explication:
L'exemple affiche en permanence dans la barre d'état de la fenêtre d'affichage actuelle la valeur "Ma
page d'accueil". Pour cela la propriété de fenêtre vers le bas defaultStatus a été appelée.
window ou self peuvent aussi être omis. Ainsi window.moveTo(200,100) a le même effet que
moveTo(200,100).Pour la clarté il est pourtant préférable de mentionner le nom prédéfini de l'objet.
.

Même des fenêtres cadres dans un jeu de cadres représentent du point de vue de JavaScript des
fenêtres distinctes. Lisez aussi à ce sujet la partie traitant de l'objet Autre page d'information frames.
Vous pouvez non seulement adresser des fenêtres disponibles avec JavaScript, mais aussi créer de
nouvelles fenêtres et adresser celles ci sous des noms de variables."
Exemple 21 : exemple21.html.
Ouverture d'une nouvelle fenêtre et manipulation de son contenu.
Remarque : on évitera cependant l'ouverture intempestive de nouvelles fenêtres par window.open.

La plupart des navigateurs bloquent l'ouverture de nouvelles fenêtres non demandées pas
l'utilisateur.

6 Exercice :
6.1 Vérification d'un formulaire

Objectif : vérifier la validité des valeurs d'un formulaire avant de les envoyer au serveur.
Dans le cas où on laisse ce travail au serveur (ex : une page php après le submit du formulaire), cela
implique, en cas de valeurs erronées, 2 accès serveurs :
1. chargement de la page de récupération des valeurs du formulaire
2. vérification des valeurs par le serveur et si erronées, (re)chargement du formulaire avec message
indiquant les erreurs sur les valeurs.
L'interface Javascript permet de guider instantanément l'utilisateur dans le remplissage de son
formulaire. Il faudra alors imposer l'utilisation du Javascript pour cette page.
Technologies utilisées : Javascript, DOM, expression régulières
Exercice 1 : réaliser un formulaire qui demande à l'utilisateur ses nom, prénom, numéro d'adhérent
(3 chiffres) et mail. Le bouton submit appellera une fonction check_form() qui retournera vrai ou
faux selon la validité des valeurs des champs du formulaire. Nom, prénom et numéro d'adhérent
sont des champs obligatoires, le mail est facultatif.
Afin de simplifier cet exercice, l'action du formulaire sera action="javascript:alert('Formulaire
envoyé au serveur')" et non l'appel à une page web, par exemple, PHP.
Indice 1 : on utilisera l'événement onsubmit="return check_form();"pour l'élément <form>
En effet, si onsubmit est à vrai, le formulaire sera envoyé au serveur; si onsubmit est à faux, rien ne
se passe.
Indice 2 : on accède à la valeur des éléments du formulaire en utilisant :
document.nom_formulaire.nom_element.value
Exercice 1.1+ : en cas de valeur erronée d'un champ lors de l'appui sur le bouton submit l'élément
dont la valeur est erronée sera activé et son contenu sélectionné : on utilisera les fonctions focus() et
select().
Exercice 1.1++ : on enlèvera les espaces avant et après la valeur de l'élément avant sa vérification.
On ajoutera la fonction trim comme suit :
String.prototype.trim = function() { return this.replace(/^\s*|\s*$/g, '') }
ex : mon_texte_sans_espace = montexte.trim();
Exercice 1.2 : créer un fichier checkform.js qui contiendra une fonction vérifiant la conformité
d'une valeur et sa taille minimum et maximum.
On n'utilisera pas la fonction trim pour cet exercice.
Spécification de la fonction :
nom : verifChamp

paramètres en entrée :
type de l'élément (nom, mail, nombre)
objet élément
label de l'objet
taille min
taille max
valeur retournée :
vrai si la valeur est valide;
Faux sinon.
Exemple : if (!verifChamp(NOMPRENOM, document.monform.nom.trim(), "Nom", 1, 30))

{ return false; }
Fonctions utilisées : texte.length donne la taille du texte.
On pourra réutiliser cette fonction Javascript dans toute page web utilisant des formulaires, et
l'enrichir de nouveaux types, comme date (jj/mm/aaaa) etc...
Astuce : on pourra remplacer : <input type="submit" />

par <input type="button" onclick="document.monform.submit()" value="Valider" />
afin d'éviter que la touche <return> ne soumette le formulaire.
Il faudra alors cliquer sur le bouton afin de soumettre le formulaire.
Cette astuce permet d'éviter des erreurs d'envoi de formulaire par un <return> non approprié.

Formation Javascript

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

Formation Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Initiation à JAVASCRIPT

Animation et inter activité de pages Web

Connaissez-vous HTML ou XHTML ?

Connaissez-vous un langage de programmation ?

Avez-vous déjà utilisé Javascript ?

Pages web exemples.

Formation Javascript v1.0 Hubert Borderiou 1/28

Formation Javascript v1.0 Hubert Borderiou 2/28

Formation Javascript v1.0 Hubert Borderiou 3/28

1.1 Affichage d'une page web dans son navigateur

1.2 Ce que fait et ne fait pas Javascript

1.3 Outil de développement utilisés

Web Developer Toolbar pour Firefox : https://addons.mozilla.org/firefox/60/

Extensions Firefox : http://www.framasoft.net/IMG/html/firefoxwdev2-traduction.html

Éditeur HTML quelconque.

Formation Javascript v1.0 Hubert Borderiou 4/28

2.1 Insérer du code Javascript dans une page web

2.1.1 Dans le fichier HTML

'type="text/javascript"' est obligatoire depuis HTML4.0

2.1.1.1 Dans le Header

Formation Javascript v1.0 Hubert Borderiou 5/28

2.1.1.2 Dans le corps du document

2.1.1.2.1 Dans une balise <script>

Ex : déclaration de fonction dans la section BODY (exemple02.html)

2.1.1.2.2 Dans un évènement associé à une balise HTML standard

Formation Javascript v1.0 Hubert Borderiou 6/28

Ex : événement HTML appelant une fonction Javascript (exemple03.html)

2.1.2 Dans un fichier externe.

On ne pourra pas raccourcir cette écriture en <script src="carre.js" type="text/javascript"

Ex : code Javascript dans un fichier externe

Fichier HTML (exemple04.html) :

Formation Javascript v1.0 Hubert Borderiou 7/28

2.2 Programmer en Javascript

– Expression : les expressions se terminent par un point virgule : ;

Ex : la balise <noscript> avec IE6 : exemple15.html

Formation Javascript v1.0 Hubert Borderiou 8/28

2.2.1 Les variables

On peut se passer de var si l'on initialise la variable :

2.2.1.2 Type de variable

Formation Javascript v1.0 Hubert Borderiou 9/28

2.2.1.3 Variables locales et globales

2.2.2.1 Tableaux associatifs

Formation Javascript v1.0 Hubert Borderiou 10/28

2.2.3 Les structures de contrôle

Formation Javascript v1.0 Hubert Borderiou 11/28

Utilisation du break dans un switch :

Formation Javascript v1.0 Hubert Borderiou 12/28

2.2.3.2.4 Break et Continue

2.2.4 Procédures et Fonctions

Formation Javascript v1.0 Hubert Borderiou 13/28

function ajoute(inval1, inval2) {

Appel d'une fonction : resultat = mafonction(paramètres_éventuels);

2.2.5 Expressions régulières

2.2.5.1 Composantes d'une expression régulière :

Formation Javascript v1.0 Hubert Borderiou 14/28

Formation Javascript v1.0 Hubert Borderiou 15/28

2.2.5.3.1 Utilisation avancée de replace :

Le second paramètre : "remplacement" peut également être une fonction.

Formation Javascript v1.0 Hubert Borderiou 16/28

2.2.6 Fenêtres de dialogue

Formation Javascript v1.0 Hubert Borderiou 17/28

2.2.7 Les événements Javascript

Vous pourrez trouver une liste des événements à l'URL suivante :

2.2.7.1 Événement de fenêtre :