Ceci est la version imprimable de JavaScript.

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.

JavaScript

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

Vous avez la permission de copier, distribuer et/ou modifier ce document selon les termes de la Licence de documentation libre GNU, version 1.2 ou plus récente publiée par la Free Software Foundation ; sans sections inaltérables, sans texte de première page de couverture et sans Texte de dernière page de couverture. Une copie de cette licence est inclue dans l'annexe nommée « Licence de documentation libre GNU ».

Premiers pas

**Version imprimable**
Leçon : JavaScript

Chapitre n^o 1
Retour au	Sommaire
Chap. suiv. :	Syntaxe du langage

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Version imprimable
JavaScript/Version imprimable », n'a pu être restituée correctement ci-dessus.

JavaScript[modifier | modifier le wikicode]

Qu'est-ce que c’est ?[modifier | modifier le wikicode]

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 ?[modifier | modifier le wikicode]

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 :

...
<head>

<script type="text/javascript" src="./dossier_javascript/fichier.js"></script>

</head>
...

Dans le cas n^o 2, le code doit se tenir entre les balises <script> et </script> comme ceci :

...
<head>

<!-- (déconseillé) -->

<script>
// Votre script
</script>

<!-- OU -->

<script language="javascript">
// Votre script
</script>

<!-- OU (conseillé) -->

<script type="text/javascript">
// Votre script
</script>

</head>
...

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 :

<input type="button" onClick="..." />

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[modifier | modifier le wikicode]

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

// Affichons le message "Bonjour tout le monde !"
document.write("Bonjour tout le monde !");

// On peut ajouter du HTML
document.write("<b>Bonjour</b><br /><img src=\"mon_image.jpg\" /><br /><u>tout le monde !</u>");

// On peut aussi l’afficher en popup plutôt que dans la page
alert("Bonjour tout le monde !");

Sur la Wikiversité[modifier | modifier le wikicode]

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.

JavaScript

Sommaire

Syntaxe du langage

Syntaxe du langage

**Version imprimable**
Leçon : JavaScript

Chapitre n^o 2
Chap. préc. :	Premiers pas
Chap. suiv. :	Structures de contrôle

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Version imprimable
JavaScript/Version imprimable », n'a pu être restituée correctement ci-dessus.

Les commentaires[modifier | modifier le wikicode]

Les commentaires sont les mêmes que ceux du PHP, à savoir :

// Deux slashes pour un commentaire sur une ligne

/* Un slash et une étoile
   pour un commentaire sur
   plusieurs lignes...
*/

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[modifier | modifier le wikicode]

Notion de cadrage[modifier | modifier le wikicode]

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 :

window.document.form.champ.-----

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 :

// On avait ça :
document.write("Bonjour tout le monde !");
// Cela équivaut à cela :
window.document.write("Bonjour tout le monde !");

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 :

write("Bonjour tout le monde !");

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[modifier | modifier le wikicode]

Les variables en JavaScript n'ont pas nécessairement besoin d’être déclarées; mais il est plus correct de le faire :

// Déclaration de la variable nombre
var nombre;

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

var entier = 5;
var float = 1.999992;
var string = "J'adore wikiversity !";
var boolean = true; // ou false
var object = null;

Opérateurs[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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.

var nombre = 18;
var chaine = "Bonjour tout le monde !";

// Et aussi
var a;
var b;
a = b;

// Et...
a = b = 0; // a et b valent toutes les deux 0

Opérateurs binaires de calcul[modifier | modifier le wikicode]

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)

var a = b = c = 2; // On initialise a, b et c
var d = a/(b+c)-a*4; // d = 2/(2+2)-2*4 = 1/2-8 = -7.5
var e = 3*(3+3); // e = 3*6 = 18

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 :

var a = 3;
var b = a-2;

a -= b; // a = a-b = 3-1 = 2
a += b; // a = a+b = 3+1 = 4
b *= a; // b = b*a = 1*3 = 3
b /= b; // b = b/b = 1

Opérateurs de comparaisons[modifier | modifier le wikicode]

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 :

Valeur1 Opérateur de comparaison Valeur2

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

var a = b = 10;

document.write(a>b); // false
document.write(a>=b); // true
document.write((a+1)>b); // true
document.write(b!=a); // false
document.write(b==a); // true
document.write(b<=a); // true

Bien entendu il ne faut pas confondre l'opérateur "=" d'affectation et l'opérateur "==" de comparaison.

Opérateur de négation[modifier | modifier le wikicode]

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

Exemple :

var a = 3;
var b = 5;

document.write(a<b); // affiche true car 3<5
document.write(!(a<b)); // affiche false car l’expression équivaut à a>=b

Concaténation[modifier | modifier le wikicode]

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 :

var chaine_a = "Bonjour";
var chaine_b = "tout le monde";

// On affiche les deux chaînes à la suite
document.write(chaine_a);
document.write(chaine_b);

Et bien désormais, vous pouvez faire ainsi :

var chaine_a = "Bonjour";
var chaine_b = "tout le monde";

// On affiche les deux chaînes à la suite avec la concatenation
document.write(chaine_a+chaine_b);

On décline un peu...

var chaine_a = "Bonjour";
var chaine_b = "tout le monde";

chaine_a += chaine_b; // chaine_a vaut Bonjourtout le monde

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[modifier | modifier le wikicode]

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

var a = 0;
a++; // a = a+1 = 0+1 = 1
a--; // a = a-1 = 1-1 = 0
a--; // a = -1

Notez que si vous placez ces opérateurs devant la variable à incrémenter, l'action sera faite immédiatement ; voici un exemple simple :

var a = 0;
document.write(a++); // Affiche 0
document.write(++a); // Affiche 2
document.write(--a); // Affiche 1

JavaScript

Premiers pas

Structures de contrôle

Structures de contrôle

**Version imprimable**
Leçon : JavaScript

Chapitre n^o 3
Chap. préc. :	Syntaxe du langage
Chap. suiv. :	Les tableaux

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Version imprimable
JavaScript/Version imprimable », n'a pu être restituée correctement ci-dessus.

Structures conditionnelles[modifier | modifier le wikicode]

Tests conditionnels avec `if` et `else`[modifier | modifier le wikicode]

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.

if (condition){
  ...
}else{
  ...
}

Dans la condition, on se sert généralement des opérateurs de comparaison mais toute fonction renvoyant un booléen est autorisée.

var age = 15;

if (age >= 18){
  document.write("Vous pouvez entrer.");
}else{
  document.write("Vous ne pouvez pas entrer.");
}

Notez que ceci est également possible (lorsque le bloc à exécuter ne nécessite qu'une seule ligne) :

var age = 15;

if (age >= 18) document.write("Vous pouvez entrer.");
else document.write("Vous ne pouvez pas entrer.");

On peut aussi rajouter des conditions intermédiaires entre le if et le else qui permettront de tester plus de cas. Voyez plutôt :

var temps = "orageux";
var je_prends;

if (temps == "ensoleillé") je_prends = "mon parasol.";
else if (temps == "nuageux") je_prends = "mon chapeau.";
else if (temps == "pluvieux") je_prends = "mon parapluie.";
else je_prends = "mon paratonnerre.";

document.write("Lorsque le temps est "+temps+", je prends "+je_prends);
// Lorsque le temps est orageux, je prends mon paratonnerre.

Cet exemple montre comment gérer simplement les conditions multiples en JavaScript.

Rallier plusieurs conditions[modifier | modifier le wikicode]

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 :

var temps = "neigeux";
var temperature = -5;
var je_prends;

if (temps == "neigeux" || temperature <= 0) je_prends = "ma luge ou mon gros blouson.";
else if (temps == "neigeux" && temperature <= 0) je_prends = "ma luge et mon gros blouson.";
else je_prends = "mes lunettes de soleil."; // Avec un peu de chance il fait beau :)

document.write("Lorsque le temps est "+temps+" et que la température est de "+temperature+"{{Abbr|°C|degré Celcius}}, je prends "+je_prends);
// Lorsque le temps est orageux et que la température est de -5{{Abbr|°C|degré Celcius}}, je prends ma luge ou mon gros blouson.

On peut aussi séparer les ET et les OU avec des parenthèses.

L'alternative `switch`[modifier | modifier le wikicode]

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 :

switch (variable)
{
  case a:  /*...*/  break;
  case b:  /*...*/  break;
  case c:  /*...*/  break;
  default:  /*...*/  break;
}

L'instruction switch permet de gérer plusieurs cas en fonction de la valeur d'une variable.

Exemple :

var temps = "soleil";
var je_prends;

switch (temps)
{
  case "soleil": je_prends = "mon parasol."; break;
  case "nuageux": je_prends = "mon chapeau."; break;
  case "pluvieux": je_prends = "mon parapluie."; break;
  default: je_prends = "mon paratonnerre."; break;
}

document.write("Lorsque le temps est "+temps+", je prends "+je_prends);
// Lorsque le temps est soleil, je prends mon parasol.

Vous admettrez que la seconde méthode est préférable :-)

Structures ternaires[modifier | modifier le wikicode]

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 :

(condition) ? ...bloc du if : ...bloc du else

Le "?" remplace donc l'accolade du if tandis que les " : " remplacent celle du else. Un code avec if et else :

var age = 15;

if (age >= 18) document.write("Vous pouvez entrer.");
else document.write("Vous ne pouvez pas entrer.");

Un code avec structure ternaire renvoyant le même résultat :

var age = 15;

document.write((age >= 18) ? "Vous pouvez entrer." : "Vous ne pouvez pas entrer.");

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[modifier | modifier le wikicode]

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`[modifier | modifier le wikicode]

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 :

while (condition)
{
  ... (instructions, incrémentation...)
}

Voici un exemple simple :

var i = 0;
while (i < 5){
  document.write("Ligne "+i+"<br />");
  i++;
}
document.write("Boucle terminée !");

Cela va vous afficher ceci :

Ligne 0

Ligne 1

Ligne 2

Ligne 3

Ligne 4

Boucle terminée !

L'instruction `do... while`[modifier | modifier le wikicode]

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 :

var i = 5;
do
{
  document.write("Ligne "+i+"<br />");
  i++;
} while (i < 5);

document.write("Boucle terminée !");

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`[modifier | modifier le wikicode]

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 :

for (initialisation; condition; incrémentation)
{
  ...
}

Exemple :

for (i = 0; i<5; i++)
{
  document.write("Ligne "+i+"<br />");
}
document.write("Boucle terminée !");

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`[modifier | modifier le wikicode]

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

var i = 1;
while (i <= 10)
{
  if (i == 5) break;
  i++;
}
document.write("La valeur de i est "+i);

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`[modifier | modifier le wikicode]

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.

JavaScript

Syntaxe du langage

Les tableaux

Les tableaux

**Version imprimable**
Leçon : JavaScript

Chapitre n^o 4
Chap. préc. :	Structures de contrôle
Chap. suiv. :	Boîtes de dialogues

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Version imprimable
JavaScript/Version imprimable », n'a pu être restituée correctement ci-dessus.

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[modifier | modifier le wikicode]

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

Déclaration[modifier | modifier le wikicode]

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

var mon_tableau = new Array('Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine'); // première méthode
var mon_tableau = ['Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine']; // seconde méthode

Accès aux valeurs[modifier | modifier le wikicode]

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

document.write(mon_tableau[0]); // Affiche "Christophe"
document.write(mon_tableau[4]); // Affiche "Nicolas"

Listage des valeurs[modifier | modifier le wikicode]

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 :

for (var i = 0; i < mon_tableau.length; i++)
{
  document.write(i+" => "+mon_tableau[i]); // On affiche chaque couples indice => valeur
}

Affection de valeurs[modifier | modifier le wikicode]

Pour remplir un tableau avec une seule valeur (13 par exemple), on utilise une boucle.

var a = 13;
var long_tableau = 10;
var mon_tableau = new Array();

for (var i = 0; i < long_tableau; i++)
{
  mon_tableau[i] = a;
}

Il existe des tableaux de tableaux de tableau... (ce sont des tableaux multidimensionnels). Ainsi, ceci est tout à fait faisable :

var mon_tableau = new Array('Christophe', new Array('Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine'));
document.write(mon_tableau[1][0]); // Affiche "Sarah"

Des outils pratiques[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

Pour créer un objet, on peut utiliser les deux syntaxes :

var mon_objet = new Object();

// ou :

var mon_objet = {};

Pour attacher le nom à sa valeur, on utilise le signe mathématique égal comme ceci :

mon_objet['prenom_0'] = 'Christophe';
mon_objet['prenom_1'] = 'Sarah';
mon_objet['prenom_2'] = 'Carole';
mon_objet['prenom_3'] = 'Alex';
mon_objet['prenom_4'] = 'Nicolas';
mon_objet['prenom_5'] = 'Sandrine';

Ou on peut les attacher à la création de l’objet :

var mon_objet = {
	"prenom_0": 'Christophe',
	'prenom_1': 'Sarah',
	'prenom_2': 'Carole'
};

Accès aux valeurs[modifier | modifier le wikicode]

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

document.write(mon_objet['prenom_3']); // Affiche "Alex"

// Ou bien, si la clé respecte la règle concernant la nomination des variables :
document.write(mon_objet.prenom_1); // Affiche "Sarah"

Listage des valeurs[modifier | modifier le wikicode]

Pour lister les valeurs de l’objet mon_objet ci-dessus, on procède ainsi :

for (var nom_indice in mon_objet){
	document.write(mon_objet[nom_indice]);
}

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[modifier | modifier le wikicode]

Soit directement en utilisant le nom de l'indice:

mon_objet['prenom_3'] = "Alex"

// Ou comme précédemment :
mon_objet.prenom_3 = "Alex"

Soit via la boucle for(...in...) (ici remise à 0 de toutes les valeurs de l'objet)

for (var nom_indice in mon_objet){
	mon_objet[nom_indice] = 0;
}

À présent, vous en savez assez sur la tableaux en JavaScript pour pouvoir continuer le cours tranquillement.

JavaScript

Structures de contrôle

Boîtes de dialogues

Boîtes de dialogues

**Version imprimable**
Leçon : JavaScript

Chapitre n^o 5
Chap. préc. :	Les tableaux
Chap. suiv. :	Les fonctions

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Version imprimable
JavaScript/Version imprimable », n'a pu être restituée correctement ci-dessus.

JavaScript et les "Dialog Box"[modifier | modifier le wikicode]

Introduction[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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 :

window.alert (texte d'alerte);

Le window devant la fonction alert est facultatif. Exemple :

alert('Bonjour, bienvenue sur mon site.\nIl est tout neuf !');

Notez l'emploi du caractère spécial \n pour sauter une ligne dans une alerte JavaScript.

Boîte confirmation[modifier | modifier le wikicode]

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 :

window.confirm(texte de confirmation);

Exemple :

var choix = confirm("Voulez-vous supprimer tous les messages ?");
if (choix) alert("Vous avez cliqué sur OK");
else alert("Vous avez cliqué sur ANNULER ou vous avez fermé");

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[modifier | modifier le wikicode]

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 :

window.prompt(texte de demande, valeur par défaut du textfield);

Exemple :

do
{
  choix = prompt("Veuillez entrer un nombre supérieur à zéro :", 0);
} while (isNaN(choix) || !choix || Number(choix) < 0);

document.write("Le nombre que vous avez entré est : "+choix);

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

JavaScript

Les tableaux

Les fonctions

Les fonctions

**Version imprimable**
Leçon : JavaScript

Chapitre n^o 6
Chap. préc. :	Boîtes de dialogues
Chap. suiv. :	Introduction au DHTML

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Version imprimable
JavaScript/Version imprimable », n'a pu être restituée correctement ci-dessus.

Introduction aux fonctions[modifier | modifier le wikicode]

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 :

join (Tableau); // méthode normale
Tableau.join(); // méthode prototype

Pour le moment, nous allons apprendre à créer des méthodes non prototype.

Première fonction[modifier | modifier le wikicode]

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.

function afficher_phrase (phrase, n) // On déclare la fonction
{
  var term = (parseInt(n) > 1) ? '<br />' : ''; // Si n > 1, on saute une ligne à chaque fois
  var i = 1; // On démarre i à 1
  do
  {
    document.write(phrase+term);
    i++;
  }while (i <= n);
}

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 ?

// Appel à notre fonction
afficher_phrase ("Salut tout le monde", 10); // La phrase sera affichée 10 fois de suite

Retourner une valeur[modifier | modifier le wikicode]

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

function volume_boule (rayon)
{
  return (4/3)*Math.PI*Math.pow(parseInt(rayon), 3);
}

document.write(volume_boule (10)); // On affiche le résultat : 4188.790204786391

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[modifier | modifier le wikicode]

Fonction de redirection[modifier | modifier le wikicode]

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é[modifier | modifier le wikicode]

function redirection (url, a_confirmer)
{
  if (url != '')
  {
    var demande = false;
    a_confirmer = (a_confirmer == undefined) ? false : true;
    if (a_confirmer) demande = confirm("Voulez-vous être redirigé ?");
    if (!a_confirmer || demande) document.location = url; // window.location = url; marche aussi
    else return;
  }
  else return false;
}

redirection('http://fr.wikiversity.org');

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

window.refresh();
//ou
window.location.reload(true);

Attention : si une page appelle cette commande obligatoirement, elle se rafraîchira sans fin. Il faut la déclencher après une action (facultativement).

JavaScript

Boîtes de dialogues

Introduction au DHTML

Introduction au DHTML

**Version imprimable**
Leçon : JavaScript

Chapitre n^o 7
Chap. préc. :	Les fonctions
Chap. suiv. :	Introduction à Prototype

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Version imprimable
JavaScript/Version imprimable », n'a pu être restituée correctement ci-dessus.

Présentation du DHTML[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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 :

document.mon_formulaire.mon_textfield.value = "Salut tout le monde !";

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[modifier | modifier le wikicode]

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 ?[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

É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[modifier | modifier le wikicode]

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function direBonjour() {
	alert('Bonjour à vous !');
}
</script>
</head>

<body onload="direBonjour();">
</body>
</html>

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[modifier | modifier le wikicode]

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
window.onload = direBonjour;

function direBonjour() {
	alert('Bonjour à vous !');
}
</script>
</head>

<body>
</body>
</html>

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[modifier | modifier le wikicode]

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

getElementById
getElementsByName
getElementsByTagName

getElementById[modifier | modifier le wikicode]

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function supprimerTexte (id_zone) {
  if (document.getElementById) {
    document.getElementById(id_zone).innerHTML = '';
  }
}

</script>
</head>

<body>

<span id="mon_texte">Bonjour le monde...</span>

<p align="center">
<a href="javascript: supprimerTexte('mon_texte');">Supprimer le texte de cette page</a>
</p>

</body>
</html>

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 :

var image = document.getElementById('mon_image');

// Mise en cache de la nouvelle image
var new_image = new Image();
new_image.src = './dossier_images/my_picture.jpg';
image.src = new_image.src;

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[modifier | modifier le wikicode]

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 :

// On recherche tous les éléments dont la valeur de l'attribut "name" est égale à "mes_images"
var images = document.getElementsByName('mes_images');
var old_image = images[0]; // si l’on prend la première de la collection

// Mise en cache de la nouvelle image
var new_image = new Image();
new_image.src = './dossier_images/my_picture.jpg';
old_image.src = new_image.src;

getElementsByTagName[modifier | modifier le wikicode]

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 :

// On recherche toutes les balises "IMG" (nota: on peut aussi écrire "img")
var images = document.getElementsByTagName('IMG');
var old_image = images[0]; // si l’on prend la première de la collection

// Mise en cache de la nouvelle image
var new_image = new Image();
new_image.src = './dossier_images/my_picture.jpg';
old_image.src = new_image.src;

JavaScript

Les fonctions

Introduction à Prototype

Introduction à Prototype

**Version imprimable**
Leçon : JavaScript

Chapitre n^o 8
Chap. préc. :	Introduction au DHTML
Chap. suiv. :	jQuery

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Version imprimable
JavaScript/Version imprimable », n'a pu être restituée correctement ci-dessus.

Prototype[modifier | modifier le wikicode]

Qu'est-ce que Prototype ?[modifier | modifier le wikicode]

Prototype est une librairie (ensemble de classes et de fonctions) JavaScript gratuite et libre qui facilite le travail des développeurs de site 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 librairie très intéressante.

Télécharger Prototype[modifier | modifier le wikicode]

Télécharger la librairie 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[modifier | modifier le wikicode]

Découvrons à présent les fonctions de bases fournies dans Prototype :

$()[modifier | modifier le wikicode]

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 :

// Sans Prototype :
var content = document.getElementById('id_champ_de_texte').value;
// Avec Prototype...
var content = $('id_champ_de_texte').value;

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()[modifier | modifier le wikicode]

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;

<p id="paragraphe">Lorem ipsum</p>

... il faudra procéder ainsi :

var content = $F('paragraphe');
document.write(content);

Et voilà, cela va écrire "Lorem ipsum".

JavaScript

Introduction au DHTML

jQuery

jQuery

**Version imprimable**
Leçon : JavaScript

Chapitre n^o 9
Chap. préc. :	Introduction à Prototype
Chap. suiv. :	Sommaire

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Version imprimable
JavaScript/Version imprimable », n'a pu être restituée correctement ci-dessus.

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

Installation[modifier | modifier le wikicode]

Il suffit de télécharger le fichier du site officiel^[1], 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 :

<script type="text/javascript" src="jQuery.js"></script>

Les grandes lignes du langage jQuery[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

Manipulation de tableaux[modifier | modifier le wikicode]

Pour transformer un tableau en chaine de caractères :

.join()
.toString()

Pour trier un tableau :

.sort()

Manipulation de chaînes de caractères[modifier | modifier le wikicode]

Sur l'espace...

style=//

present{background-color:#456548;}

Penser à :

 $(document).ready(function(){
   $(selector).text("voici le texte qui sera placé sur le compartiment ''selector'' ou ''element'' etc");
 });

à chaque fois qu’il y à une fonction mise en place

Propriétés et méthodes[modifier | modifier le wikicode]

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.

 $(selector,context)
 $(element)
 $(elements)
 $(jQueryObject)
 $(html)

afin de manipuler le DOM il existe sur jQuery des méthodes.

each(callback  length ...

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)

$("lkj").link ("style","origine")  function(){alert("ceci est ma liste"};

De nombreux effets visuels sont disponibles.

Syntaxe[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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(#ID).merge

jQuery().merge (Array1 ,Array2) function (){ });

jQuery(#ID).each

jQuery().each (Array , function (){(index , value )});

jQuery(#ID).grep()

jQuery().grep() (Array , function (){( value, index )});

jQuery(#ID).map()

jQuery().map (Array , function (){(value, index )});

jQuery(#ID).trim

jQuery().trim (string);

<div style="width:740px;height:632px;border:2px outset #191956;overflow:hidden;">

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">(ID : eq(2)") 
<span style="color:#ee66bb;"> sélect la 3eme cellule d'un d'un tableau</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">("tr : even").css 
<span style="color:#ee66bb;"> sélect les élements pairs</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">(a : gt(1)) 
<span style="color:#ee66bb;"> sélect. tous les link's début 3eme</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">(tr : odd).css 
<span style="color:#ee66bb;"> sélect.Elements impairs (index numérique à partir de 0)</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">$('#titre');$(#titre).html('texte') 
<span style="color:#ee66bb;"> ajout une chaine de caractère à titre</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">$('#titre');$(#titre).html('texte') 
<span style="color:#ee66bb;"> ajout une chaine de caractère à titre</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">$.extend(obj1,obj2);...var obj = $.extend({obj1,obj2,obj3});
<span style="color:#ee66bb;"> ajout </span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">//<! [CDATA[var expréss= new regexp("[a-zA-Zèéàçùî\-]+",""gi");<br />
var tabl = test.match(expréss);<br />
var aff= "nombre de noms...etc" + tabl.length + "\n";<br />
for (var i=0;i < tabl.length ;i++){aff = aff + "[" + tabl[i] + "]\n";}<br />//]]>
<form name ='form' action = ""><br />
input type = 'text' name = exempl..<br />onclick = ectraire (form) { var test = document.form.exemple.value;
<span style="color:#ee66bb;"> utiliser lastIndexOf() pour vous déplacer dans le occurrence texte vers le mot suivant (car IndexOf c’est le premier caractère</span></dd>
 jQuery chaine de caractères
 jQuery list = "liste"<br />
 jQuery surfloading = [];<br />

</div>

Formulaires[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

La méthode jQuery.ajax() permet de lancer des requêtes asynchrones^[2] 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 :

    $.ajax({
        url: "http://www.example.com"

    }).done(function(data) {
        alert(data);

    }).fail(function() {
        alert('The file is missing!');
    });

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^[3].

Voir aussi[modifier | modifier le wikicode]

Outils de tests en ligne :

Plugins et frameworks jQuery :

Références[modifier | modifier le wikicode]

JavaScript

Introduction à Prototype

Sommaire

GFDL

Vous avez la permission de copier, distribuer et/ou modifier ce document selon les termes de la licence de documentation libre GNU, version 1.2 ou plus récente publiée par la Free Software Foundation ; sans sections inaltérables, sans texte de première page de couverture et sans texte de dernière page de couverture.

[1] ttp://docs.jQuery.com/Downloading_jQuery

[2] ttp://api.jquery.com/jquery.ajax/

[3] ttps://stackoverflow.com/questions/10931836/should-i-use-done-and-fail-for-new-jquery-ajax-code-instead-of-success-and

[1]

[2]

[3]

Premiers pas

JavaScript[modifier | modifier le wikicode]

Qu'est-ce que c’est ?[modifier | modifier le wikicode]

Où place-t-on le code ?[modifier | modifier le wikicode]

Premier script[modifier | modifier le wikicode]

Sur la Wikiversité[modifier | modifier le wikicode]

Syntaxe du langage

Les commentaires[modifier | modifier le wikicode]

Théorie sur l'organisation du code[modifier | modifier le wikicode]

Notion de cadrage[modifier | modifier le wikicode]

Variables[modifier | modifier le wikicode]

Opérateurs[modifier | modifier le wikicode]

Opérateurs binaires d'affectation[modifier | modifier le wikicode]

Opérateurs binaires de calcul[modifier | modifier le wikicode]

Opérateurs de comparaisons[modifier | modifier le wikicode]

Opérateur de négation[modifier | modifier le wikicode]

Concaténation[modifier | modifier le wikicode]

Opérateurs d'incrémentation et de décrémentation[modifier | modifier le wikicode]

Structures de contrôle

Structures conditionnelles[modifier | modifier le wikicode]

Tests conditionnels avec if et else[modifier | modifier le wikicode]

Rallier plusieurs conditions[modifier | modifier le wikicode]

L'alternative switch[modifier | modifier le wikicode]

Structures ternaires[modifier | modifier le wikicode]

Structures répétitives : les boucles[modifier | modifier le wikicode]

La boucle while[modifier | modifier le wikicode]

L'instruction do... while[modifier | modifier le wikicode]

L'instruction for[modifier | modifier le wikicode]

L'instruction break[modifier | modifier le wikicode]

L'instruction continue[modifier | modifier le wikicode]

Les tableaux

Tableaux à indices numériques[modifier | modifier le wikicode]

Déclaration[modifier | modifier le wikicode]

Accès aux valeurs[modifier | modifier le wikicode]

Listage des valeurs[modifier | modifier le wikicode]

Affection de valeurs[modifier | modifier le wikicode]

Des outils pratiques[modifier | modifier le wikicode]

Objets[modifier | modifier le wikicode]

Déclaration[modifier | modifier le wikicode]

Accès aux valeurs[modifier | modifier le wikicode]

Listage des valeurs[modifier | modifier le wikicode]

Affectation de valeurs[modifier | modifier le wikicode]

Boîtes de dialogues

JavaScript et les "Dialog Box"[modifier | modifier le wikicode]

Introduction[modifier | modifier le wikicode]

Définition[modifier | modifier le wikicode]

Boîte d'alerte[modifier | modifier le wikicode]

Boîte confirmation[modifier | modifier le wikicode]

Boîte de saisie[modifier | modifier le wikicode]

Les fonctions

Introduction aux fonctions[modifier | modifier le wikicode]

Première fonction[modifier | modifier le wikicode]

Retourner une valeur[modifier | modifier le wikicode]

Travail pratique[modifier | modifier le wikicode]

Fonction de redirection[modifier | modifier le wikicode]

Corrigé[modifier | modifier le wikicode]

Introduction au DHTML

Présentation du DHTML[modifier | modifier le wikicode]

Premier code en DHTML[modifier | modifier le wikicode]

Les évènements[modifier | modifier le wikicode]

Qu'est-ce qu'un évènement en DTHML ?[modifier | modifier le wikicode]

Traquer un évènement[modifier | modifier le wikicode]

Liste des écouteurs[modifier | modifier le wikicode]

Exemple[modifier | modifier le wikicode]

Reconnaissance à la volée[modifier | modifier le wikicode]

Méthodes de caractérisation[modifier | modifier le wikicode]

getElementById[modifier | modifier le wikicode]

getElementsByName[modifier | modifier le wikicode]

getElementsByTagName[modifier | modifier le wikicode]

Introduction à Prototype

Prototype[modifier | modifier le wikicode]

Qu'est-ce que Prototype ?[modifier | modifier le wikicode]

Télécharger Prototype[modifier | modifier le wikicode]

Les fonctions de bases[modifier | modifier le wikicode]

$()[modifier | modifier le wikicode]

$F()[modifier | modifier le wikicode]

jQuery

Installation[modifier | modifier le wikicode]

Les grandes lignes du langage jQuery[modifier | modifier le wikicode]

Méthodes utiles[modifier | modifier le wikicode]

Tests conditionnels avec `if` et `else`[modifier | modifier le wikicode]

L'alternative `switch`[modifier | modifier le wikicode]

La boucle `while`[modifier | modifier le wikicode]

L'instruction `do... while`[modifier | modifier le wikicode]

L'instruction `for`[modifier | modifier le wikicode]

L'instruction `break`[modifier | modifier le wikicode]

L'instruction `continue`[modifier | modifier le wikicode]