Introduction au développement Web

Jean-Philippe Doyle, Projet Héritage 2005-2006

JavaScript

Table des matières

1 - Introduction
2 - JavaScript dans HTML
3 - Variables
4 - Fonctions
5 - Objets HTML
6 - Révison
7 - Références

1 - Introduction

JavaScript est un langage client, c'est-à-dire qu'il est interprété par le navigateur Web. Il existe aussi une version qui est un langage serveur, LiveWire JavaScript, que nous n'aborderons pas ici. JavaScript est à la fois le langage de programmation le plus utilisé du Web et le plus méconnu.

Il y a dans un premier temps son nom qui créé de la confusion. Certains voient dans le préfixe Java un lien avec le Java, une sous-version ou une version allégée de Java. Détromper vous, il n'y a aucun lien entre Java et JavaScript. Java a été développé chez Sun Microsystems tant dit que JavaScript l'a été chez Netscape. Ensuite, d'autres voient dans le suffixe Script un langage uniquement de script qui n'est pas un langage de programmation. JavaScript est certes moins complexe que Java ou C, mais ce n'est pas moins pour autant un langage de programmation.

Dans un deuxième temps, il y a des utilisateurs amateurs qui lui font une mauvaise réputation. La plupart des gens qui font une utilisation de JavaScript sont des amateurs, des gens qui n'ont aucune connaissance en programmation, ce qui nuit grandement à sa réputation. JavaScript peutêtre très puissant et faire beaucoup plus qu'afficher des alertes ou faire de jolis boutons roll-over (boutons dont l'image change lorsque l'on passe au dessus avec la souris).

2 - JavaScript dans HTML

Tout comme les feuilles de style, le JavaScript peux être introduit directement dans la page et ou dans un fichier externe.

Nous allons prendre un exemple dans lequel lorsque l'on clique sur un élément, une fonction est appelée à afficher une alerte contenant un numéro transmis à la fonction. Nous ne nous attarderons pas ici au fonctionnement des fonctions, une section suivante y étant consacrée.

Exemple avec un code interne :

Fichier index.HTML

<HTML>
<script type="text/javascript">
function mafonction(variable){
  alert('Vous avez cliqué sur l\'élément # '+variable+' !')
}
</script>

<body>
<span onclick="javascript:mafonction(1)">Élément 1</span>
<span onclick="javascript:mafonction(2)">Élément 2</span>
<span onclick="javascript:mafonction(3)">Élément 3</span>
</body>
</HTML>

Exemple avec un code externe :

Fichier index.HTML

<HTML>
<script src="fonctions.js" type="text/javascript"></script>
<body>
<span onclick="javascript:mafonction(1)">Élément 1</span>
<span onclick="javascript:mafonction(2)">Élément 2</span>
<span onclick="javascript:mafonction(3)">Élément 3</span>
</body>
</HTML>

Fichier fonctions.js

function mafonction(variable){
  alert('Vous avez cliqué sur l\'élément # '+variable+' !');
}

Le résultat est le suivant pour les deux possibilités (cliquez sur les éléments):

Élément 1 Élément 2 Élément 3

Il y a plusieurs avantages à utiliser un fichier externe. On peut le modifier sans avoir à modifier toutes les pages. De plus, le navigateur n'a qu'à charger le JavaScript une seule fois.

Mais il peut être, dans certaines situations, plus avantageux d'intégrer le JavaScript directement dans la page comme si par exemple le code est lourd et utilisé uniquement dans une page.

3 - Variables

Avec JavaScript, il est possible d'utiliser des variables. Une variable contient une information ou plusieurs informations sous forme de tableau. Lorsqu'une variable est initiée, elle existe jusqu'à ce que le client quitte la page. Cependant, si une variable est initiée à l'intérieur d'une fonction, elle existera uniquement à l'intérieur de la fonction lorsqu'elle est appelée. Voici un exemple simple de la création d'une variable nommée nom qui contient l'information Monsieur Culet :

nom = "Monsieur Culet"

Le nom d'une variable doit débuter par un caractère alphabétique ou un _ et le reste peux aussi contenir des chiffres. Il est important de ne pas oublier que JavaScript est sensible aux majuscules. La valeur d'une variable peut être un nombre (nom = 312), une valeur logique (nom = true ou nom = false), une chaîne de caractères (nom = "Une chaîne de caractères!") ou encore une valeur nulle (nom = null). Il est important aussi de savoir que lorsque l'on veut utiliser le caractère qui défini le début et la fin de la chaine (" ou ') à l'intérieur de ceux-ci, il faut utiliser l'anti-slash devant celui-ci et c'est valable autant pour JavaScript que pour PHP et MySQL.

Il est aussi possible qu'une variable contienne plusieurs sous-variables, ce que l'ont appelle un tableau. Un tableau permet de regrouper des données dans un seul élément et il en va comme suit :

noms = new Array("Monsieur Culet","Monsieur Landry","Madame Claire")

Par la suite, si on veut utiler une donnée du tableau pour par exemple définir de nouvelle variables, il faut utiliser des crochets ainsi

nom_un = noms[0]
nom_deux = noms[1]
nom_trois = noms[2]

Il est important de noter que la numérotation commence à 0 et non à 1, et c'est la même chose dans la plupart des langages, dont celui-ci et PHP. Mais il y a d'autres manières de créer des tableaux. Il est possible de procéder comme suit, ce qui permet de rajouter des données au tableau après la création de celui-ci :

noms = new Array(3)
noms[0]="Monsieur Culet"
noms[1]="Monsieur Landry"
noms[2]="Madame Claire"

Il est possible de définir à l'avance le nombre d'entrées dans le tableau, mais c'est optionnel. On aurait donc pu écrire aussi :

noms = new Array()
noms[0]="Monsieur Culet"
noms[1]="Monsieur Landry"
noms[2]="Madame Claire"
noms[3]="Madame Blanche"

On peut aussi utiliser des noms à la place de nombres pour chacune des entrées de la table comme suit:

noms = new Array()
noms["monsieur1"]="Monsieur Culet"
noms["monsieur2"]="Monsieur Landry"
noms["madame1"]="Madame Claire"

De plus, une entrée du tableau peut toujours contenir un autre tableau ce qui permet de créer une certaine hiéarchie. Exemple :

manger = new Array()
manger["liquide"] = new Array("eau","jus","lait")
manger["solide"] = new Array("pomme","orange","poire")

C'est donc tout ce qu'il y a savoir pour la base de création de variables.

4 - Fonctions

Il y a 2 catégories de fonctions, celles définies par défaut par JavaScript et celles définies par l'utilisateur. Les fonctions définies par JavaScript permettent par exemple d'afficher une alerte, d'obtenir le temps, etc. Vous pouvez trouver toutes ces fonctions en cherchant sur le Web ou en consultant les liens proposés plus loin. Nous nous attarderons ici aux fonctions définies par l'utilisateur. Nous verrons dans un premier temps comment créer un fonction et dans un deuxième temps comment appeler une fonction.

Créer une fonction

Lorsque l'on crée une fonction, il faut utiliser cette syntaxe :

function [nom de la fonction]([variable1],[variable2],[variable3]){
  [code]
  [return]
}

[nom de la fonction]

Le nom de la fonction sera utilisé afin de l'appeler et ne doit pas être le nom d'une fonction déjà établie par JavaScript. Il est important d'utiliser uniquement des caractères alphanumériques en minuscule.

[variable1],[variable2],[variable3]

Les variables sont les données qui pourront être transmises lors de l'appel de la fonction. Il est possible d'ajouter autant de variables (séparé par des virgules) à la fonction que voulu. Il est aussi possible d'inclure aucune variable, mais il faut quand même mettre les parenthèses comme suit : ().

[code]

Le code est ce qui sera exécuté lors de l'appel de la fonction. Il peut utiliser les variables transmises. Il peut aussi retourner ou non une information à ce qui a appelé la fonction. Pour retourner une information, il faut utiliser la déclaration return suivie d'une information à retourner. Voici un exemple ou nous voulons que la variable result contienne le résultat de la fonction mafonction :

function mafonction(var1,var2){
  calcul=var1*var2+10
  return calcul
}
result=mafonction(3,4)

La variable result contiendra alors 24.

Appeler une fonction

Les fonctions sont appelées lors d'événements définis dans les balises HTML. Par exemple avec l'événement onclick (lors du clic) :

<a href="#" onclick="javascript:mafonction()">Appeler ma fonction!</a>

Vous pouvez obtenir une liste de ces événements dans la plupart des éditeurs de site Web tel que Macromedia Dreamweaver ou en consultant le site du World Wide Web Consortium (organisme qui définit les standards du Web).

5 - Objets HTML

Maintenant que vous savez créer et utiliser des variables, créer et appeler des fonctions, il est temps de mettre tout ça en lien avec les éléments de vos pages. Lorsque vous créez une structure avec HTML, il est possible d'obtenir toutes les informations sur celle-ci à l'intérieur de JavaScript. Il y a deux façons d'obtenir ces informations : avec la variable document et un chemin ou avec la variable document et la fonction getElementById. Si l'on utilise la méthode avec chemin, il faut respecter la hiérarchie de notre HTML. Voici un exemple ou l'on utilise les deux méthodes pour modifier la valeur d'une case d'un formulaire (value):

<form name="mon_formulaire" method="post" action="">
<input type="text" value="Défaut" name="mon_champ" id="id_de_mon_champ">
</form>
<script type="text/javascript">
function mafonction1(variable){
  document.mon_formulaire.mon_champ.value = "Méthode document"
}
function mafonction2(variable){
  document.getElementById("id_de_mon_champ").value = "Méthode document"
}
</script>
<span onclick=mafonction1()>Méthode document</span> ou <span onclick=mafonction2()>Méthode getElementById</span>

Et le résultat est le suivant :

Méthode document ou méthode getElementById

C'est maintenant à vous de découvrir toutes les combinaisons possibles d'éléments HTML, de propriétés de ces éléments et de fonctions JavaScript. Si vous continuez votre apprentissage au développement Web, vous pourrez même découvrir les combinaisons possibles avec PHP et MySQL.

6 - Révison

Voir la section à cet effet sur la page révison.

7 - Références

JavaScript (sans date), sur le site Douglas Crockford's Wrrrld Wide Web. Consulté le 13 février 2006.
http://www.crockford.com/javascript/

JavaScript Tutorial (sans date), sur le site W3School Online Website. Consulté le 13 février 2006.
http://www.w3schools.com/js/

JavaScript Guide (sans date), sur le site Netscape. Consulté le 13 février 2006.
http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/

HTML 4.01 Specifiation (sans date), sur le site World Wide Web Constortium. Consulté le 20 février 2006.
http://www.w3.org/TR/REC-HTML40/interact/scripts.HTML#h-18.2.3