# JavaScript/Version imprimable

* Si vous imprimez cette page, choisissez « Aperçu avant impression » dans votre navigateur, ou cliquez sur le lien Version imprimable dans la boîte à outils, vous verrez cette page sans ce message, ni éléments de navigation sur la gauche ou en haut.
* Cliquez sur Rafraîchir cette page pour obtenir la dernière version du cours.
* Pour plus d'informations sur les version imprimables, y compris la manière d'obtenir une version PDF, vous pouvez lire l’article Versions imprimables.
Une version à jour et éditable de ce livre est disponible sur la Wikiversité, une bibliothèque de livres pédagogiques, à l'URL : http://fr.wikiversity.org/wiki/JavaScript

# Premiers pas
## JavaScript
### Qu'est-ce que c’est ?

Le JavaScript (JS) est un langage dit "client" qui est exécuté par le navigateur web (il n’est pas nécessaire de lire ses pages depuis un serveur web comme pour le PHP). Il est désactivable sur la plupart des navigateurs web en modifiant le menu "options".
Ce langage permet entre autres de développer l'interactivité d'un site (pop-up, pop-under, contrôle de formulaire, chargement d'images...).
Pour suivre ce cours, il est recommandé de posséder :
* Un navigateur outillé d'un débogueur, comme la touche F12 pour IE8, ou l'extension Firebug pour Firefox et Chrome.
* Un éditeur de texte avec coloration syntaxique (Emacs, Notepad++, TextPad, etc.).
* Connaître les bases du HTML et du CSS.
Tout votre code JavaScript sera visible par tous les internautes car contrairement aux langages serveurs tels que PHP, asp, cfm, jsp... le code est visible dans la source de la page. Pour cette raison, il faut éviter de mettre des mots de passe dans le JavaScript en s'imaginant qu’ils seront invisibles pour les internautes :)
JavaScript permet de faire beaucoup de choses. Avec le HTML dynamique, nous pouvons manier les balises d'une page web. Avec AJAX, il est possible d'échanger des informations avec le serveur sans rechargement de la page.

### Où place-t-on le code ?

Comme pour le CSS, le code JavaScript peut se placer à trois endroits différents :
* Dans un fichier externe à la page web (avec l'extension obligatoire .js).
* Entre les balises <head> et </head> de la page web.
* Directement dans une balise de la page (à l'aide des évènements).
Dans le cas n$^o$ 1, on doit inclure le fichier .js directement dans notre page web et toujours entre les balises <head> et </head> comme ceci :
Dans le cas n$^o$ 2, le code doit se tenir entre les balises <script> et </script> comme ceci :
Dans le dernier cas, nous verrons cela plus tard dans le cours mais voici un exemple très simple que vous avez déjà dû apercevoir un jour :
Il s'agit d'un évènement. JavaScript gère très bien beaucoup d'évènements : du simple clic sur un bouton (exemple ci-dessus) jusqu'à la fermeture de la fenêtre en cours...

### Premier script

Comme premier script, voyons comment écrire un texte à l'écran une fois la page chargée :

### Sur la Wikiversité

Il est possible de tester vos scripts directement sur le site en les plaçant dans votre apparence (Spécial:mypage/common.js par défaut). Un échantillon est offert sur cette page.
* Les javascripts partagés sur les wikis de la fondation doivent respecter une convention de codage pour faciliter leur compréhension.
| Sommaire | Syntaxe du langage |

# Syntaxe du langage
## Les commentaires

Les commentaires sont les mêmes que ceux du PHP, à savoir :
Les commentaires ne sont pas pris en compte. Ils ne servent que de repères et d'aide pour le codeur du script.

## Théorie sur l'organisation du code
### Notion de cadrage

C'est le seul point assez complexe du langage capricieux qu'est JavaScript. En effet le JavaScript se base sur des objets de la page où il est présent. En fait il s'agit d'une hiérarchie telle celle du langage ActionScript (Flash). Pour être très "propre" et pour faire référence à un objet de la page, on notera de la sorte :
Explications :
* L'objet window pointe sur la fenêtre du navigateur (c'est donc le niveau le plus bas dans la hiérarchie possible en js).
* L'objet document est à un niveau un peu supérieur. En effet, cela pointe sur la page mais au niveau de son contenu brut (sa source en l’occurrence).
* L'objet form (parmi tant d'autres) est un objet qui vise les formulaires présents dans la page. C’est donc un niveau encore plus précis que document.
* Enfin, l’objet champ est une occurrence de form. C’est un objet appartenant à form.
Et les (cinq) tirets finaux correspondent aux méthodes et caractères de chaque occurrence de l’objet form.
Il faut donc retenir qu'une fenêtre possède plusieurs niveaux en JavaScript. Du plus bas (window) au plus haut qui est un caractère d'une occurrence d'un niveau inférieur tel que form.
Vous verrez par la suite que ce qui paraît compliqué en théorie s'avère simple en pratique !
Voyons l'exemple du chapitre précédent :
Ici, on peut constater que write n'est en fait qu'une méthode (fonction) de l’ensemble document. Cela peut faire penser à la POO (Programmation orientée objet) mais cela ne va pas jusque là.
Mais ceci est une erreur :
Car on ne précise pas à quel ensemble appartient la méthode write. Cela n'affiche rien ou un message d'erreur.
Par ailleurs, la méthode JSON peut permettre le transport de données par AJAX.

## Variables

Les variables en JavaScript n'ont pas nécessairement besoin d’être déclarées; mais il est plus correct de le faire :
La déclaration de variable se fait avec l'instruction var (variables en anglais (et en français)). Inutile de déclarer le type de variable (comme le feraient certains adeptes d'ActionScript). On peut immédiatement déclarer une valeur par défaut (mais cela n'est nullement obligatoire) :

## Opérateurs

Tout comme les autres langages, JavaScript dispose d'opérateurs permettant d'effectuer les opérations informatiques de bases. Voici leur liste :

### Opérateurs binaires d'affectation

Comme vu dans les exemples précédents, le symbole "=" (égal) permet d'affecter une valeur (nombre ou chaîne de caractères) à une variable.

### Opérateurs binaires de calcul

* L'addition s'effectue en utilisant le traditionnel symbole "+" (plus)
* La soustraction avec le symbole "-" (moins)
* La multiplication avec le symbole "*" (étoile)
* La division se sert du symbole "/" (slash)
Il existe aussi les opérateurs +=, -=, *= et /= qui s'utilisent lorsque l'opération s'effectue sur une seule variable. Voici un exemple très simple :

### Opérateurs de comparaisons

Les opérateurs de comparaison permettent de comparer deux valeurs et renvoient une valeur de type booléen (true, vrai ou false, faux) selon les cas. La syntaxe est simple à comprendre :
* > : est strictement supérieur
* < : est strictement inférieur
* >= : est supérieur ou égal
* <= : est inférieur ou égal
* == : est strictement égal
* != : est strictement différent
Bien entendu il ne faut pas confondre l'opérateur "=" d'affectation et l'opérateur "==" de comparaison.

### Opérateur de négation

Comme dans l'exemple précédent, il s'agit du point d'exclamation "!". Ainsi, true devient false et vice-versa.
Exemple :

### Concaténation

La concaténation est une technique qui consiste à rassembler deux chaînes de caractères pour n'en former qu'une seule. C’est en quelque sorte le collage de ces deux chaînes. Pour ce faire, utilisez le signe "+" et "+=". C’est le même principe que précédemment.
Voici comme vous faisiez avant pour afficher deux chaînes à la suite :
Et bien désormais, vous pouvez faire ainsi :
On décline un peu...
Notez bien qu’il existe une ambiguïté entre l'opérateur de concaténation et le signe de l'addition en JavaScript. Cependant, l'interpréteur reconnaît s'il s'agit d'une chaîne (donc concaténation) ou bien d'un nombre (addition).

### Opérateurs d'incrémentation et de décrémentation

Ils sont deux et permettent soit de diminuer de 1 la valeur d'une variable (décrémentation), soit de l'augmenter de 1 (incrémentation).
* ++ : incrémente de 1
* -- : décrémente de 1
Notez que si vous placez ces opérateurs devant la variable à incrémenter, l'action sera faite immédiatement ; voici un exemple simple :
| Premiers pas | Structures de contrôle |

# Structures de contrôle
## Structures conditionnelles
### Tests conditionnels avec if et else

Les instructions if et else mettent en place une condition dans le code. Elles permettent de différencier plusieurs cas lors de l'exécution.
Dans la condition, on se sert généralement des opérateurs de comparaison mais toute fonction renvoyant un booléen est autorisée.
Notez que ceci est également possible (lorsque le bloc à exécuter ne nécessite qu'une seule ligne) :
On peut aussi rajouter des conditions intermédiaires entre le if et le else qui permettront de tester plus de cas. Voyez plutôt :
Cet exemple montre comment gérer simplement les conditions multiples en JavaScript.

#### Rallier plusieurs conditions

Il est possible de rallier plusieurs conditions en une seule. Évidemment, la précision sera moindre mais cela se révèle vite incontournable et très pratique. Pour cela il existe deux opérateurs très simples d’utilisation.
* && : il veut dire ET.
* || : il veut dire OU.
Voyons comment cela fonctionne :
On peut aussi séparer les ET et les OU avec des parenthèses.

### L'alternative switch

Il existe une alternative intéressante aux if et else. En effet, lorsque vous avez un nombre important de cas à vérifier, il peut être intéressant de ne pas avoir à recopier une cascade de else if.
Pour cela, il y a le mot-clé switch :
L'instruction switch permet de gérer plusieurs cas en fonction de la valeur d'une variable.
Exemple :
Vous admettrez que la seconde méthode est préférable :-)

### Structures ternaires

Derrière ce nom "barbare" se cache un procédé raisonnablement complexe mais surtout très pratique et permettant de gagner du temps, de la place et de la lisibilité.
Les ternaires sont en fait un concentré d'un groupe if et else (sans else if au milieu). Cela permet d'écrire une condition en une seule ligne. C’est une alternative aux structures conditionnelles vues précédemment. Voici la syntaxe :
Le "?" remplace donc l'accolade du if tandis que les " : " remplacent celle du else. Un code avec if et else :
Un code avec structure ternaire renvoyant le même résultat :
Pratique non ?
Ici, on a mis la condition en ternaire directement dans le document.write (allez faire ça avec un if...)

## Structures répétitives : les boucles

Qu'est-ce qu'une boucle ?
Une boucle, c’est un bloc d'instructions qui sera répété tant qu'une condition sera vérifiée (= true). Une boucle peut être finie (elle finira à un moment) ou au contraire infinie (généralement il s'agit d'une erreur de code et cela finit par faire "planter" le navigateur).

### La boucle while

L'instruction while est la boucle la plus simple d’utilisation puisqu'elle ne comporte qu'un seul "argument" : la condition ! Voici la syntaxe de while :
Voici un exemple simple :
Cela va vous afficher ceci :
Ligne 0
Ligne 1
Ligne 2
Ligne 3
Ligne 4
Boucle terminée !

### L'instruction do... while

La boucle do while est la sœur de la boucle while puisqu’il s'agit de la même boucle SAUF que le bloc d'instruction s'effectuera au minimum une fois et ce même si la condition de la boucle n’est pas vérifiée dès le début.
Voici un exemple simple :
Ici, la condition vaut false dès le début. Un while normal aurait donc sauté la condition pour passer à la suite du code. Mais le do while exécute une fois le code et affiche :
Ligne 5
Boucle terminée !

### L'instruction for

Cette structure répétitive ne porte pas bien son nom contrairement aux précédentes. Pour faire court, for est un alias de while à la différence qu'elle regroupe en son sein l'initialisation de(s) variable(s) utilisée(s), la condition ainsi que l'incrémentation (décrémentation) de celle(s)-ci.
Syntaxe :
Exemple :
Le résultat est le même que celui de la boucle while. Ceci dit, l’utilisation d'une des trois boucles dépend du contexte et des besoins du script.

### L'instruction break

Il arrive parfois que l’on veuille sortir d'une boucle alors même que la condition de la boucle est encore vraie. Pour cela, on peut faire appel à l'instruction break. Lorsque cette instruction est exécutée, la boucle se termine immédiatement et le code la suivant est exécuté.
Ce qui affiche : La valeur de i est 5. En effet, le programme sort de la boucle lorsque i prend la valeur de 5, donc après 4 tours.

### L'instruction continue

Le rôle de l'instruction continue est de sauter le tour actuel et d’en recommencer un nouveau. Cette instruction s'utilise exactement de la même façon que break.
| Syntaxe du langage | Les tableaux |

# Les tableaux

Les tableaux (array en anglais) sont des tableurs virtuels où peuvent être stockées des centaines d'informations à la fois. À la base, un tableau n'est qu'une simple variable. Il existe deux sortes de tableaux :
* les tableaux à indices numériques ;
* les tableaux associatifs.
Les valeurs d'un tableau peuvent être de tout type (booléen, nombre, chaîne de caractères, array...). JavaScript propose l’objet Array avec plusieurs méthodes permettant de manipuler les tableaux sans problème.

## Tableaux à indices numériques

Ce sont des tableaux où chaque valeur est associée à un indice (nombre entier positif).

### Déclaration

Voici comment déclarer un tableau à indices numériques en JavaScript et lui donner des valeurs initiales :

### Accès aux valeurs

Pour accéder aux valeurs d'un tableau à indices numériques, la seule possibilité est de passer par l'indice de chacune des valeurs contenues dans ce tableau. La numérotation des indices commence par 0 (zéro).

#### Listage des valeurs

Pour lister l'intégralité du tableau, il nous faut utiliser une boucle. Il va nous être utile de connaître la "longueur" du tableau (le nombre d'indice qu’il possède). Pour cela, on fait appel à la méthode length de l’objet Array. Ainsi, on accède aux valeurs de notre tableau grâce à ses indices comme ceci :

#### Affection de valeurs

Pour remplir un tableau avec une seule valeur (13 par exemple), on utilise une boucle.
Il existe des tableaux de tableaux de tableau... (ce sont des tableaux multidimensionnels). Ainsi, ceci est tout à fait faisable :

## Des outils pratiques

Même si nous n'avons pas encore vu comment marchaient les fonctions en JavaScript; il est à savoir que celui-ci met à disposition des fonctions pour la gestion des tableaux. En voici la liste des principales :
* concat(Tableau1, Tableau2[, Tableau3, ...]) : cette méthode permet de concaténer (coller) plusieurs tableaux pour n'en former plus qu'un seul.
* join(Tableau) ou Tableau.join ou Tableau.toString : renvoie tous les éléments (valeurs) de Tableau sous forme d'une chaîne de caractères.
* Tableau.toLocaleString : convertit un tableau en caractères.
* pop(Tableau) ou Tableau.pop : supprime le dernier élément de Tableau après avoir retourné sa valeur.
* Tableau.shift : supprime le premier élément de Tableau après avoir retourné sa valeur.
* Tableau.unshift(valeur1[, valeur2, ...]) : permet d'ajouter des éléments au début de Tableau.
* Tableau.push(valeur1[, valeur2, ...]) : permet d'ajouter des éléments à la fin de Tableau.
* Tableau.sort : permet de trier tous les éléments de Tableau.
* Tableau.reverse : inverse l’ordre des éléments de Tableau.
* Tableau.splice(début, fin, valeur) : écrase les valeurs des éléments dans Tableau dont l'indice est compris entre début et fin.
* Tableau.slice(début, fin) : retourne les éléments dont l'indice est compris entre fin et début.

## Objets

Les objets, omniprésents dans le JavaScript, peuvent être créés afin d'obtenir l'équivalent d'un tableau associatif, c'est-à-dire lorsque chacune de ses valeurs est associée à un nom.

### Déclaration

Pour créer un objet, on peut utiliser les deux syntaxes :
Pour attacher le nom à sa valeur, on utilise le signe mathématique égal comme ceci :
Ou on peut les attacher à la création de l’objet :

### Accès aux valeurs

Comme précédemment sauf qu'on utilise le nom associé à la variable au lieu de son indice :

#### Listage des valeurs

Pour lister les valeurs de l’objet mon_objet ci-dessus, on procède ainsi :
En effet, la boucle for(...in...) attribue à la variable nom_indice le nom de l'indice et passe au suivant à chaque itération. Il est à noter que cette méthode permet aussi de lister les noms d'indices si nécessaire.

#### Affectation de valeurs

Soit directement en utilisant le nom de l'indice:
Soit via la boucle for(...in...) (ici remise à 0 de toutes les valeurs de l'objet)
À présent, vous en savez assez sur la tableaux en JavaScript pour pouvoir continuer le cours tranquillement.
| Structures de contrôle | Boîtes de dialogues |

# Boîtes de dialogues
## JavaScript et les "Dialog Box"
### Introduction

Comme beaucoup le savent déjà ou l’on déjà remarqué; JavaScript met a disposition de ses utilisateurs un moyen d'échanger des informations entre l'interface et l'internaute que sont les boîtes de dialogues. Il en existe en tout trois différentes. Nous allons les étudier une par une et voir comment elles fonctionnent. Nous verrons aussi qu’il ne faut surtout pas en mettre trop au risque de lasser les visiteurs.

### Définition

Une boîte de dialogue est une petite fenêtre rectangulaire qu'est capable d'afficher n’importe quel navigateur pourvu de JavaScript. Cette boîte permet soit de demander une confirmation au visiteur (confirm), soit de prévenir le visiteur (alert) ou soit de demander quelque chose au visiteur (prompt). Une telle boîte n'est nullement compliquée à mettre en place. Chacune de ces boîtes s'ouvre en faisant appel à des fonctions de JavaScript.
Notez aussi que chacune des boîtes de dialogue de JavaScript a le focus bloqué par le navigateur. C'est-à-dire qu’il faudra cliquer sur un des boutons pour pouvoir continuer.

## Boîte d'alerte

Il existe une boîte de dialogue qui a pour principal objectif d'alerter le visiteur de quelque chose. Il s'agit de la boîte d'alerte.
Caractéristiques:
* Nom : alert
* Boutons : "OK" (et la croix de fermeture)
* Code :
Le window devant la fonction alert est facultatif. Exemple :
Notez l'emploi du caractère spécial \n pour sauter une ligne dans une alerte JavaScript.

## Boîte confirmation

JavaScript met aussi a disposition des codeurs une fonction nommée confirm qui permet d'afficher une boîte de dialogue demandant une confirmation au visiteur. Par exemple : Voulez-vous supprimer tous les messages ?.
Caractéristiques:
* Nom: confirm
* Boutons : "OK", "ANNULER" (et la croix de fermeture)
* Code :
Exemple :
On comprend donc sur cet exemple que confirm peut renvoyer deux valeurs :
* TRUE si le visiteur a cliqué sur OK.
* FALSE si le visiteur a cliqué sur ANNULER ou a cliqué sur la croix rouge de fermeture.

## Boîte de saisie

C'est la dernière boîte de dialogue que nous allons voir. Celle-ci permet de demander une saisie au visiteur. Elle contient donc un champs de texte.
Caractéristiques:
* Nom: prompt
* Boutons : "OK", "ANNULER" (et la croix de fermeture)
* Code :
Exemple :
Le code est certes plus compliqué que précédemment mais il est tout à fait compréhensible. Explication :
* En premier lieu, on utilise la boucle do-while car nous voulons être sûr que celle-ci sera parcourue au moins une fois (on aurait aussi pu initialiser choix à null avant une boucle while simple).
* Dans la boucle, on demande d'entrer un nombre positif via le prompt.
* Ensuite, il y a le while et sa condition : les || veulent dire OU. isNaN (is Not a Number) permet de vérifier si la saisie est bien un nombre. Puis on vérifie que le visiteur n'a pas cliqué sur ANNULER (!choix ou choix == false) et enfin, on vérifie que le nombre est supérieur à 0 (avec Number(choix) > 0).
| Les tableaux | Les fonctions |

# Les fonctions
## Introduction aux fonctions

Avis aux retardataires : nous employons le mot fonction issue de classe par abus de langage car une fonction issue d'une classe est appelée une méthode.
Comme dit dans le second chapitre, la plupart des méthodes disponibles directement en JavaScript appartiennent à des ensembles. Ils en existe beaucoup, par exemple l’ensemble Math (appelé aussi la classe Math) regroupe un certain nombre de méthodes permettant de gérer les nombres. Il y a la classe Array étudiée précédemment, la classe Date permettant de gérer les dates.
Attention cependant à ne pas confondre les fonctions (ou méthodes) et les attributs. Par exemple, l'attribut location n’est pas une méthode de la classe document. C’est un attribut de document.
On écrit donc document.location = 'page.html'; ou encore window.document.location = 'page.html'; On écrit une méthode issue d'une classe JavaScript de cette façon : MaClasse.maMéthode.
Parfois, une fonction peut avoir deux "versions". Une version telle que vous en avez l'habitude (nom de la fonction et arguments entre parenthèses). Cependant, il existe aussi des fonctions dites "de prototype" qui ont le même rôle mais qui ne s'adapatent qu’à un certain type d'arguments. Par exemple, la join dans le cadre d'un tableau JavaScript peut s'écrire :
Pour le moment, nous allons apprendre à créer des méthodes non prototype.

## Première fonction

Premièrement, pour déclarer une fonction il faut le mot clé function suivi du nom de notre fonction sans caractères spéciaux (pas d'espace, de virgule...). Puis, entre accolades se trouvent les instructions de la fonction. Une fonction peut posséder des arguments (ou paramètres) qui sont des noms de variable à mettre entre parenthèses après le nom de la fonction et avant la première accolade et séparés par des virgules.
Pour commencer simplement, nous allons faire une petite fonction qui va simplement afficher la phrase "Bonjour tout le monde" un certain nombre de fois.
Voilà, notre fonction est écrite. Une précision : la fonction parseInt permet de convertir une chaîne en un nombre.
Maintenant, comment se servir de notre fonction ?

### Retourner une valeur

À présent, créons une fonction de calcul. Et... qui dit calcul dit aussi que nous allons devoir renvoyer une valeur. Pour cela, il y a le mot clé return qui comme son nom l'indique veut dire "retourner" en anglais. Il est simplement suivi de la valeur à retourner.
Voici un exemple assez simple se servant de la librairie Math :
Donc, quelques explications :
* return : il sert à retourner le résultat de la formule suivante.
* Math.PI : cela retourne la constante PI (3,14...). C’est une constante.
* Math.pow : il s'agit de la méthode permettant de mettre un nombre à un exposant (ici, le rayon est à l'exposant 3).
Ici, la fonction volume_boule est donc de type float puisqu'elle renvoie un nombre décimal. Cependant, on aurait pu la transformer en fonction void (qui ne retourne aucune valeur) en remplaçant le return par un document.write ou un alert.

### Travail pratique
#### Fonction de redirection

Si vous vous sentez audacieux, vous pouvez tenter de coder une fonction simple de redirection en JavaScript. Si vous avez lu les chapitres précédents, tout est présent pour que vous puissiez y arriver. Cette fonction prend deux arguments : l'URL (l'adresse Web) de redirection (de type String) et la demande de confirmation au visiteur (de type boolean).

#### Corrigé

Ici, rien de nouveau à part le undefined mais cette ligne était facultative. Elle permettait de rendre le paramètre "a_confirmer" facultatif. Désormais, vous savez comment faire une redirection en JavaScript. Mais je vous rassure : on peut faire ça en une ligne :)
Une méthode qui pourrait vous servir, c’est refresh de window qui permet de rafraîchir la page (équivalent de F5).
Attention : si une page appelle cette commande obligatoirement, elle se rafraîchira sans fin. Il faut la déclencher après une action (facultativement).
| Boîtes de dialogues | Introduction au DHTML |

# Introduction au DHTML
## Présentation du DHTML

Le DHTML (Dynamic Hypertext Markup Language) est apparu aux alentours des années 1990. Il s'agit en fait de la possibilité de rendre une page HTML interactive et ce grâce au JavaScript. Cependant, le DHTML a un gros défaut : il n’est pas compatible partout et certains navigateurs, trop anciens, ne le reconnaissent pas.

## Premier code en DHTML

Le DHTML sert le plus souvent à contrôler et rendre les éléments d'une page Web interactifs. C’est son intérêt majeur : il permet de changer le style d'une balise sans recharger la page (changer la valeur d'un champ de texte...).
Voici un premier code assez simple à comprendre qui permet de changer la valeur d'un champ de texte :
Comment dit dans le chapitre II; il s'agit avant tout d'une hiérarchie entre les éléments et vous allez voir qu’à force de pratiquer DHTML, on ne s'en rend même plus compte :)

## Les évènements

Les évènements sont de loin la base du DHTML. Sans eux, le DHTML n'aurait plus aucune possibilité.

### Qu'est-ce qu'un évènement en DTHML ?

C'est par exemple lorsque vous cliquez sur un lien, que vous fermez une fenêtre, que vous cliquez sur un bouton ou encore lorsque tout bêtement la page se charge. Toute cette liste (et elle est encore très longue) sont des évènements qu'on peut relever en JavaScript (pour ne pas dire DHTML évidemment).

### Traquer un évènement

La question désormais qui se pose est comment détecter un nouvel évènement sur la page.
La réponse est assez simple : tout simplement en JavaScript. En effet, le langage est doté de plusieurs écouteurs d'évènements. Chacun d'eux permet de détecter un type d'évènement. Et tous ces écouteurs s'incrustent directement dans les balises HTML concernées. Voici la liste des évènements les plus récurrents :
Tous les évènements commencent par le préfixe on suivit de l'action qui s'exécute.

#### Liste des écouteurs

| Évènement JS | Description |
| onabort | Se déclenche lorsque l'utilisateur stoppe le chargement de la page. |
| onblur | Se déclenche lorsqu'un élément de la page perd le focus (lorsque l'utilisateur clique ailleurs). |
| onchange | Se déclenche à chaque fois que la valeur d'un champ de donnée voit sa valeur modifiée. |
| onclick | Se déclenche lorsque l'utilisateur clique sur l'élément en question. |
| ondblclick | Se déclenche lorsque l'utilisateur double-clique sur l'élément en question. |
| ondragdrop | Se déclenche lorsque l'utilisateur glisse et dépose (drag and drop) un objet. |
| onerror | Se déclenche lorsqu'une erreur apparaît sur la page (JavaScript 1.1). |
| onfocus | Se déclenche lorsque l'utilisateur donne le focus à un élément (il clique dessus). |
| onkeydown | Se déclenche lorsque l'utilisateur appuie une touche du clavier (JavaScript 1.2). |
| onkeypress | Se déclenche lorsque l'utilisateur maintient une touche du clavier enfoncée. |
| onkeyup | Se déclenche lorsque l'utilisateur relâche une touche du clavier (JavaScript 1.2). |
| onload | Se déclenche lorsque l'utilisateur charge la page. |
| onmousedown | Se déclenche lorsque l'utilisateur appuie sur un bouton de sa souris au-dessus d'un élément de la page. |
| onmouseout | Se déclenche lorsque l'utilisateur ne survole plus un élément de la page (JavaScript 1.1). |
| onmouseover | Se déclenche lorsque l'utilisateur survole un élément de la page. |
| onmouseup | Se déclenche lorsque l'utilisateur arrête d'appuyer sur un bouton de sa souris au-dessus d'un élément de la page. |
| onreset | Se déclenche lorsque l'utilisateur clique sur un input de type reset (réinitialisation d'un formulaire). |
| onresize | Se déclenche lorsque l'utilisateur redimensionne la fenêtre actuelle. |
| onselect | Se déclenche lorsque l'utilisateur sélectionne un texte dans un champ de type text ou textarea. |
| onsubmit | Se déclenche lorsque l'utilisateur soumet un formulaire (soit par un bouton à cliquer soit avec la touche [enter]). |
| onunload | Se déclenche lorsque l'utilisateur quitte la page actuelle. |

#### Exemple

Par exemple, si vous voulez dire bonjour au visiteur lorsque celui-ci charge une page de votre site, vous devrez procéder de la sorte :
On aurait évidemment pu mettre le alert directement dans l'évènement sans créer une fonction. On pourrait ajouter l'évènement onunload qui se déclenche à la fermeture de la page pour appliquer une fonction direAuRevoir par exemple. Mais cela suffit pour l'exemple.

### Reconnaissance à la volée

N'importe quel évènement peut aussi être reconnu "à la volée". C'est-à-dire directement depuis la balise <script>. Par exemple, voici un code analogue à l'exemple précédent :
Avec ce code, vous pouvez donc gérer vos évènements depuis le header de votre page. Cela peut être pratique pour s'y retrouver plus facilement.

## Méthodes de caractérisation

Voici trois méthodes intéressantes pour cibler un élément du DOM dans votre page Web.
* getElementById
* getElementsByName
* getElementsByTagName

### getElementById

Cette méthode permet d'accéder aux propriétés d'un élément de votre page (par exemple un lien, une image ou un paragraphe) juste en fournissant l'id de celui-ci. Voyons un exemple simple :
La propriété innerHTML vous permet d'éditer le contenu de l'élément de la page que vous avez désigné. Cependant, si vous voulez éditer un champ de texte, vous devrez utiliser directement l'attribut value ou encore si vous souhaitez cocher une case, vous utiliserez l'attribut checked. Vous pouvez absolument récupérer le contenu de toute balise du code HTML avec getElementById et en modifier les attributs : style, valeur, etc. Par exemple, pour changer l'image affichée par une balise img, vous n'aurez qu’à utiliser :
Donc si vous prenez ce code et ce que vous avez appris sur les évènements vous pouvez aisément faire un système permettant de changer une image au passage de la souris (onMouseOver, onMouseOut).

### getElementsByName

Cette méthode est semblable à getElementById bien qu'elle soit largement moins utilisée que la première. En fait, celle-ci fonctionne comme getElementById sauf qu'elle se base sur l'attribut name des balises au lieu de se baser sur leur id. Comme plusieurs éléments de la page Web peuvent avoir la même valeur d'attribut name, la méthode ne retournera pas un seul élément, mais une collection d'éléments sous forme de tableau (array). Ceci même dans le cas où un seul élément porte le nom recherché (tableau avec une seule valeur). Pour se souvenir de ce comportement, notez bien le "s" de "Elements" dans le nom de la méthode.
En reprenant l'exemple précédent, on aurait :

### getElementsByTagName

Cette méthode fonctionne comme "getElementsByName" sauf qu'elle se base sur la balise des éléments recherchés, et non sur la valeur d'un attribut.
Avec le même exemple, on aurait :
| Les fonctions | Introduction à Prototype |

# Introduction à Prototype
## Prototype
### Qu'est-ce que Prototype ?

Prototype est une bibliothèque (ensemble de classes et de fonctions) JavaScript gratuite et libre qui facilite le travail des développeurs de sites web 2.0 (sites basés en partie sur les nouvelles technologies telle qu'Ajax). En effet, cette bibliothèque permet de s'épargner les tâches répétitives telle que l'écriture incessante et pénible du célèbre document.getElementById. Nous allons donc découvrir les bases de cette bibliothèque très intéressante.

### Télécharger Prototype

Télécharger la bibliothèque Prototype est très simple puisqu’il ne s'agit que d'un seul fichier nommé "prototype.js". Voici le lien : http://www.prototypejs.org/download

## Les fonctions de bases

Découvrons à présent les fonctions de bases fournies dans Prototype :
Et bien oui, ceci est bien une fonction JavaScript ! Et justement, c’est une des fonctions les plus pratiques de Prototype, vous allez tout de suite voir pourquoi... Voici deux codes identiques :
Bon, ça n'a peut-être pas l'air comme ça, mais vous allez voir que cette fonction de base simplifie énormément le travail des codeurs JS.

### $F

Rassurez-vous tout de suite, toutes les fonctions de Prototype ne sont pas de la sorte. La fonction $F renvoie simplement la valeur de l'élément fourni en paramètre. Par exemple si vous voulez connaître la valeur de paragraphe;
... il faudra procéder ainsi :
Et voilà, cela va écrire "Lorem ipsum".
| Introduction au DHTML | jQuery |

# jQuery

jQuery est un framework JavaScript libre lancé en janvier 2006 par John Resig.

## Installation

Il suffit de télécharger le fichier du site officiel, puis de le stocker dans un endroit où les scripts l'utilisant feront mention. Par exemple pour un .html ou .js dans le même répertoire :

## Les grandes lignes du langage jQuery

Dans ce framework (comme dans Prototype), la fonction $ permet de sélectionner (remplace les getElementBy). Elle est synonyme de jQuery.
Par extension le jQuery.UI ajoute des plugins, c'est-à-dire des fonctions pré-programmées stockées sur pages JS : jQuery.NomDeLaFonction.js. Fonctions graphiques, Drag & Drop, multi-forms etc.
Déclarer une fonction dans celle-ci ($(function{.....});) le fait après le chargement de la page (onload), ce qui assure sa bonne exécution dès l’affichage complet.

## Méthodes utiles
### Manipulation de tableaux

Pour transformer un tableau en chaine de caractères :
Pour trier un tableau :

### Manipulation de chaînes de caractères

Sur l'espace...
style=//
* present{background-color:#456548;}
Penser à :
à chaque fois qu’il y à une fonction mise en place

## Propriétés et méthodes

* noConflict : permet d'annuler l'alias $, pour n'utiliser que jQuery.
* browser
* fn.jQuery
De nombreux sélecteurs simples, d'attributs, de classe ou d'identifiants sont disponibles sur jQuery.
afin de manipuler le DOM il existe sur jQuery des méthodes.
Gérer les Attributs et Propriétés Gérer les Classes CSS, les styles, les dimensions, positions et contenu.
* La gestion des évènements (events)
* la requête serveur avec $.Ajax(options)
De nombreux effets visuels sont disponibles.

## Syntaxe

jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript.

### Les méthodes employés

Obj(tableau d'éléments,Objet,Objet jQuery)
* un tableau sera sérialisé en nom/valeur //un Obj par clé \ valeur .
* Effets visuels // animate // toogle etc
* sélecteurs CSS // $(sélecteur).animate (ObjStyle,[duration],[easing],[callback]);
jQuery.merge (Array1 ,Array2) function{ });
jQuery.each (Array , function{(index , value )});
jQuery.grep (Array , function{( value, index )});
jQuery.map (Array , function{(value, index )});
jQuery.trim (string);

## Formulaires

* Pour savoir si une case est cochée : if ($('input#my_checkbox').is(':checked')) {…
* Pour créer un évènement sur libération d'un champ : $('#my_field').focusout(function {…

## AJAX

La méthode jQuery.ajax permet de lancer des requêtes asynchrones en XMLHttpRequest (XHR).
Pour appliquer un traitement dépendant du résultat de ces requêtes, il suffit de les faire suivre par les méthodes existantes qui correspondent à chaque type de résultat.
Par exemple, le code suivant récupère un fichier et affiche son contenu, ou une erreur si le fichier est inaccessible :
* Le style avec callbacks "error: / success:" sous "url:" est moins bien géré au niveau "defer" que les méthodes ".done et .fail" (voire ".then et .fail"), introduites dans la v1.5.