initiation à javascript animation et inter activité de pages web · 2014. 8. 19. · 2.2...

Initiation à JAVASCRIPTAnimation et inter activité de pages Web

v1.0

[email protected]

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é :

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 JavascriptCe document ne présente pas le langage Javascript de manière exhaustive, pour des informations


Client : - navigateur + URL

Serveur :- construit la page web (php, base de données...)

Client : - page web affichéedans le navigateur, éxécution du codeJavascript.

Requête HTTP

Fichier HTML

http://www.actulab.com/les-cookies-en-javascript.php

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

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 webIl 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 HTMLEntre des balises <script type="text/javascript>

...</script>

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

2.1.1.1 Dans le HeaderOn 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 fonctionsfunction hello() {

alert('Hello');}</script></head><body>debut<br/><script type="text/javascript">

hello();</script>fin</body></html>





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

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

<script type="text/javascript">/* appelle de la fontion hello()la fonction n'a pas encore été déclarée, cela ne fontionne pas */hello();</script>

<hr/><script type="text/javascript">// Déclaration de la fonction hello()function hello() {document.write('Hello');}</script>

<hr/><script type="text/javascript">/* 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 standardUn 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.jsfunction hello() {

document.write("Hello!");}

Fichier HTML (exemple04.html) :<html>

<head><script src="exemple4.js"

type="text/javascript" ></script></head><body id="plop">debut<script type="text/javascript">


// fonction déclaré dans le fichier script.jshello();</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 Javascriptsur plusieurs lignes */// ceci est un commentaire Javascript sur une lignevar 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> <script type="text/javascript"> document.write("Le javascript est activé."); // self.location.href = "maPageWebAvecDuJavascript.html"; </script></body>

2.2.1 Les variables

2.2.1.1 DéclarationOn déclare une variable avec le mot réservé var.var valeur; // la variable a la valeur undefinedvar 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> <script type="text/javascript"> 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 TableauxDé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 associatifsOn 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> <script type="text/javascript"> 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> <script type="text/javascript"> var tabasso = new Array(); tabasso["pomme"] = "fruit"; tabasso["poire"] = "fruit"; tabasso["courgette"] = "légume"; 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 SwitchExemple :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> <script type="text/javascript"> 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); document.write("<hr/>"); tester(nom3);</script></body>

2.2.3.2 Boucles

2.2.3.2.1 WhileExemple : Var i=0;While (i<12) { ...; i++;}

2.2.3.2.2 ForExemple :For (var i=0; i<12; i++) { ...;}


2.2.3.2.3 For ... inExemple : utilisation de For...in (exemple07.html)<html> <body> <h3>For ... in</h3> <script type="text/javascript"> var tabasso = new Array(); tabasso["pomme"] = "fruit"; tabasso["poire"] = "fruit"; tabasso["courgette"] = "légume"; for (var nom in tabasso) { document.write(nom+" => "+tabasso[nom]+"<br/>"); } </script> </body></html>

2.2.3.2.4 Break et ContinueCes 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> <script type="text/javascript"> 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> <script type="text/javascript"> 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 FonctionsOn 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\- ]+$/iExpression régulière pour un mail : /^([a-zA-Z0-9_\-]+\.)*[a-zA-Z0-9_\-]+\@([a-zA-Z0-9_\-]+\.)+\w{2,4}$/iExpression 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

/par/ trouve "par", à savoir dans "par", "départ", "parlement" et "répartie".

^/^par/

trouve "par" au début de la valeur à rechercher, à savoir dans "par" et "parlement", à condition que l'un de ces mots apparaisse en premier dans la valeur.

$/par$/

trouve "par" à la fin de la valeur à rechercher, à savoir dans "par" et "Épar", à condition que l'un de ces mots apparaisse en dernier dans la valeur.

* /par*/ trouve "par", "parr" et "parrrrrr", donc le dernier signe avant l'étoile est répété 0 ou un nombre de fois au choix.

+ /par+/ trouve "parr" et "parrrrrr", donc le dernier signe avant l'étoile est répété au moins une ou un nombre de fois au choix.

. /.par/ trouve "épar" et "Spar", donc un signe au choix à un endroit déterminé.

.+/.+par/

trouve "épar" et "hépar", donc une suite de signes au choix à un endroit déterminé. Résumé de caractère au choix et nombre au choix de caractères au choix.

\b /\bpar\b/ trouve "par" en tant que mot distinct. \b signifie une extrémité de mot.

\B /\Bpar\B/ trouve"par" uniquement à l'intérieur de mots, par exemple dans "départir" ou "impartir". \B signifie pas d'extrémité de mot.

\d /\d.+\B/ trouve un chiffre entier quelconque. \d signifie un chiffre (0 à 9)


http://fr.selfhtml.org/javascript/objets/regexp.htm

\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 /\S.+/ trouve un caractère quelconque distinct qui ne soit ni espace blanc donc

pas \f\n\t\v ni un espace.\w

/\w.+/trouve tous les signes alphanumériques et le tiret de soulignement (condition typique par exemple pour des noms attribués soi-même pour qu'ils soient conformes aux langages de programmation).

\W/\W/

trouve un signe qui ne soit ni alphanumérique ni tiret de soulignement (typique pour rechercher des signes non permis dans des noms attribués soi-même pour qu'ils soient conformes aux langages de programmation)..

\()/(par)/

trouve "par" et en prend note en interne. Jusqu'à 9 parenthèses de ce genre (endroits marqués) sont permises dans une expression régulière.

/.../g/par/g

trouve "par" aussi souvent qu'il apparaît dans le passage à 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 /par/gi trouve "par", aussi souvent qu'il apparaît dans le passage à

rechercher (g) et sans respecter la casse (i

2.2.5.2 matchSoit 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> <script type="text/javascript"> var nom1="jean 23"; var nom2="23 JEAN 23"; var nom3="23"; var re=/[a-z]+/gi; document.write(nom1.match(re)+"<br/>"); document.write(nom2.match(re)+"<br/>"); document.write(nom3.match(re)+"<br/>"); if (nom1.match(re)) { document.write(nom1+" matche"); } </script> </body></html>


2.2.5.3 replaceSoit 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> <script type="text/javascript"> 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> <script type="text/javascript"> 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 searchSoit 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> <script type="text/javascript"> 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); var search2 = nom.search(re2); var search3 = nom.search(re3); document.write(search1+" "+search2+" "+search3); </script> </body></html>

2.2.6 Fenêtres de dialogue3 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 JavascriptLes é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 Descriptiononload 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>...).

Attribute Descriptiononchange 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é.


http://www.w3schools.com/tags/default.asp

http://fr.selfhtml.org/javascript/langage/gestevenements.htm#generalites

http://www.w3schools.com/tags/ref_eventattributes.asp

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.

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

Attribute Descriptiononclick 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 JavascriptJavascript 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><script type="text/javascript"> document.write(document.monform.nodeName); document.write("<hr/>"); 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()) { ... }


http://www.mozilla.org/docs/dom/domref/dom_shortIX.html

3.2.1 Présentation de l'inspecteur DOM de Firefox1.5Une 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/DOMIl 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/DOMUne 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><head><style type="text/css"> .style1 {background-color:#FFFFBB} .style2 {background-color:#DDDDFF}</style></head>

<body><div id="bloc1" class="style1">Mon texte original.</div><script type="text/javascript">// on test si l'élément d'id "bloc1" existeif (document.getElementById("bloc1")) { document.write("bloc1 est un élément : "+document.getElementById("bloc1").nodeName);

Permet de changer le contenu et le style CSS d'un élément dont on connaît l'ID.


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 type="text/javascript"></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 formulaireObjectif : 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 formulaire2. 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émentlabel de l'objettaille mintaille 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é.


initiation à javascript animation et inter activité de pages web · 2014. 8. 19. · 2.2...

Documents