JavaScript : Premiers pas
JavaScript/Premiers pas

Une page de Wikiversité.

 

Premiers pas
Computer-aj aj ashton 01.svg
Chapitre 1
Leçon : JavaScript
Retour au sommaire
Chap. suiv. : Syntaxe du langage

Sommaire

[masquer]

[modifier] JavaScript

[modifier] Qu'est-ce que c'est ?

Le JavaScript (JS pour les intimes) est un langage dit "client" qui est exécuté par le navigateur Web. 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, vous devez posséder :

  • Un navigateur outillé d'une extension firebug-like.
  • Un éditeur de texte avec coloration syntaxique (Emacs, Notepad++, etc.)
  • Connaître les bases du HTML (et le CSS, optionnel)

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 par les internautes :)

JavaScript permet de faire beaucoup de choses. Avec l'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.

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

Comme pour le CSS, le code JavaScript peut se placer à trois endroits différents :

  1. Dans un fichier externe à la page web (avec l'extension obligatoire .js).
  2. Entre les balises <head> et </head> de la page web.
  3. Directement dans une balise de la page (à l'aide des évènements).

Dans le cas no 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 no 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û aperçevoir 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...

[modifier] Premier script

Comme premier script, voyons comment écrire un texte à l'écran (tout simplement) :

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

JavaScript : Syntaxe du langage (basique)
JavaScript/Syntaxe du langage

Une page de Wikiversité.

 

Syntaxe du langage (basique)
Computer-aj aj ashton 01.svg
Chapitre 2
Leçon : JavaScript
Chap. préc. : Premiers pas
Chap. suiv. : Structures de contrôle

Sommaire

[masquer]

[modifier] Les commentaires

Les commentaires sont les même que ceux de PHP à savoir :

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

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

[modifier] 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 fera de la sorte :

window.document.form.champ.xxxxx

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 "xxxxx" sont les méthodes et les caractères de chaque occurrences 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.

[modifier] Variables

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;

[modifier] Opérateurs

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

[modifier] 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.

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

[modifier] 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)
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 = 2+1 = 3
b *= a; // b = b*a = 1*3 = 3
b /= b; // b = b/b = 1

[modifier] 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 :

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

[modifier] 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 :

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

[modifier] 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 :

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

JavaScript : Structures de contrôle
JavaScript/Structures de contrôle

Une page de Wikiversité.

 

Structures de contrôle
Computer-aj aj ashton 01.svg
Chapitre 3
Leçon : JavaScript
Chap. préc. : Syntaxe du langage
Chap. suiv. : Les tableaux

Sommaire

[masquer]

[modifier] Structures conditionnelles

[modifier] if, 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.

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 == "soleil") 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.

[modifier] Ralier plusieurs conditions

Il est possible de ralier 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+"°C, je prends "+je_prends);
// Lorsque le temps est orageux et que la température est de -5°C, je prends ma luge ou mon gros blouson.

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

[modifier] 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 :

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

Switch permet de gérer plusieurs cas en fonction de la valeur d'une variable. Son utilisation, bien que pratique, est réputée être (un peu) plus lente que le if et surtout assez restreinte.

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

[modifier] 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 :

(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 mit la condition en ternaire directement dans le document.write (allez faire ça avec un if...)

[modifier] 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ée 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).

[modifier] while

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 !

[modifier] 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 :

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 !

[modifier] 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 :

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.

[modifier] 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 terminer 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.

[modifier] 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.

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

[modifier] 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
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émentée; 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 : Les Tableaux
JavaScript/Les tableaux

Une page de Wikiversité.

 

Les Tableaux
Computer-aj aj ashton 01.svg
Chapitre 4
Leçon : JavaScript
Chap. préc. : Structures de contrôle
Chap. suiv. : Boîtes de dialogues

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.

Sommaire

[masquer]

[modifier] Tableaux à indices numériques

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

[modifier] Déclaration

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

[modifier] 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).

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

[modifier] 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 :

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

[modifier] Affection de valeurs

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 (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"

 

[modifier] 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 principale :

  • 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() : cette méthode renvoie tous les éléments (valeurs) de Tableau sous forme d'une chaîne de caractères.
  • Tableau.push (valeur1[, valeur2, ...]) : cette méthode permet d'ajouter des éléments à la fin de Tableau.
  • Tableau.unshift (valeur1[, valeur2, ...]) : cette méthode permet d'ajouter des éléments au début de Tableau.
  • pop (Tableau) ou Tableau.pop() : cette méthode supprime le dernier élément de Tableau après avoir retourné sa valeur.
  • Tableau.reverse() : cette méthode inverse l'ordre des éléments de Tableau.
  • Tableau.sort() : cette méthode permet de trier tous les éléments de Tableau.
  • Tableau.splice() : cette méthode ajoute ou retire des éléments dans Tableau.

 

[modifier] 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.

[modifier] Déclaration

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_object = {
	"prenom_0": 'Christophe',
	'prenom_1': 'Sarah',
	prenom_2: 'Carole'
};

[modifier] Accès aux valeurs

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"

[modifier] Listage des valeurs

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

for (var nom_indice in mon_object){
	document.write(mon_object[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.

[modifier] Affectation de valeurs

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 : Boîtes de dialogues
JavaScript/Boîtes de dialogues

Une page de Wikiversité.

 

Boîtes de dialogues
Computer-aj aj ashton 01.svg
Chapitre 5
Leçon : JavaScript
Chap. préc. : Les tableaux
Chap. suiv. : Les fonctions

Sommaire

[masquer]

[modifier] JavaScript et les "Dialog Box"

[modifier] 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.

[modifier] 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.

[modifier] Boîte d'alerte

Une boîte d'alerte sur Firefox

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.

[modifier] Boîte confirmation

Une boîte de confirmation sur Firefox

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 :

  1. TRUE si le visiteur a cliqué sur OK.
  2. FALSE si le visiteur a cliqué sur ANNULER ou a cliqué sur la croix rouge de fermeture.

[modifier] Boîte de saisie

Une boîte de saisie sur Firefox

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

JavaScript : Les fonctions
JavaScript/Les fonctions

Une page de Wikiversité.

 

Les fonctions
Computer-aj aj ashton 01.svg
Chapitre 6
Leçon : JavaScript
Chap. préc. : Boîtes de dialogues
Chap. suiv. : Introduction au DHTML

Sommaire

[masquer]

[modifier] 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 :

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

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

[modifier] 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.

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

[modifier] Retourner une valeur

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

[modifier] Travail pratique

[modifier] 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).

[modifier] Corrigé

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

avaScript : Introduction au DHTML
JavaScript/Introduction au DHTML

Une page de Wikiversité.

 

Introduction au DHTML
Computer-aj aj ashton 01.svg
Chapitre 7
Leçon : JavaScript
Chap. préc. : Les fonctions
Chap. suiv. : Introduction à Prototype

Sommaire

[masquer]

[modifier] 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.

[modifier] 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 :

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

[modifier] Les évènements

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

[modifier] 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).

[modifier] 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.

[modifier] 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 soit avec le bouton [enter]).
onunload Se déclenche lorsque l'utilisateur quitte la page actuelle.

[modifier] 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 :

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

[modifier] 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 :

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

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

[modifier] 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 :

<!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 = '';
  }
}

JavaScript : Introduction à Prototype
JavaScript/Introduction à Prototype

Une page de Wikiversité.

 

Introduction à Prototype
Computer-aj aj ashton 01.svg
Chapitre 8
Leçon : JavaScript
Chap. préc. : Introduction au DHTML

Sommaire

[masquer]

[modifier] Prototype

[modifier] Qu'est-ce que Prototype ?

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.

Prototype.gif

[modifier] Télécharger Prototype

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

[modifier] Les fonctions de bases

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

[modifier] $()

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 énormement le travail des codeurs JS.

[modifier] $F()

Rassurez-vous tout de suite; toutes les fonctions de Prototype ne sont pas de la sorte. La fonction $F() renvoit 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".

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

[modifier] 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 :

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

[modifier] 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 :

 

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

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 raffraîchir la page (équivalent de F5).

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).
Aujourd'hui sont déjà 2 visiteurs (16 hits) Ici!
Ce site web a été créé gratuitement avec Ma-page.fr. Tu veux aussi ton propre site web ?
S'inscrire gratuitement