Qu'est-ce que JavaScript ?
Le langage JavaScript, à ne pas confondre avec Java, est un langage de programmation web, incorporé dans une page web pour lui ajouter des fonctions qui seraient bien souvent impossibles à implémenter avec un autre langage de programmation. Pourquoi me direz-vous ? Eh bien parce que JavaScript est interprété par le navigateur, une fois que la page a été générée par le serveur. Ainsi, JavaScript vous permet par exemple, de programmer quelque chose de bien précis lorsque vous cliquez sur un élément donné de votre page, ceci sans la recharger. Voyons tout de suite un premier exemple.
Un exemple d'utilisation simple de JavaScript : afficher une boite de dialogue
- Soit le petit formulaire suivant :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<form action="#" method="get">
<div>
<input type="text" id="input"
value="LeCoinDuWebmaster.Org vous souhaite la bienvenue !"
style="width: 200px;" />
<input type="button" class="button" id="clear" value="Effacer"
onclick="javascript:document.getElementById(\'input\').value = \'\';" />
<input type="reset" class="button" id="reset" value="Réinitialiser" />
<input type="submit" class="button" value="Exécuter ce script !"
onclick="javascript:alert(document.getElementById(\'input\').value);"
/>
</div>
</form>
- Illustration : tapez un court texte dans la zone de saisie ci-dessous, ou laissez le texte par défaut. En cliquant sur le bouton "Exécuter ce script !" ci-dessus, vous devriez voir apparaître une boite de dialogue avec le message que vous venez de taper, ou celui par défaut si vous n'avez rien changé. Si rien ne se passe, c'est que votre navigateur ne reconnaît pas JavaScript, ou que vous ne l'avez pas activé.
- Explication : il s'agit d'un simple formulaire en xhtml.
Pour en savoir plus sur ce meta-langage, consultez la section xhtml.
Vous aurez remarqué la présence de deux lignes bien particulières : les lignes 7 et 10, qui contiennent chacune une instruction JavaScript.- Ligne 7
1.
onclick="javascript:document.getElementById('input').value = '';" - Ligne 10
1.
onclick="javascript:alert(document.getElementById('input').value);"
La commande onclick est appelée un événement. L'événement onclick intervient, comme l'on pourrait s'en douter, lorsque l'utilisateur clique sur un élément de votre page. Ici, il est associé à deux des trois boutons du formulaire ci-dessus. Lorsque l'utilisateur clique sur l'élément de la page auquel l'événement onclick est associé, les instructions qui se trouvent entre guillemets sont exécutées.
Examinons les instructions des deux occurences précédentes de l'événement onclick :
- A la ligne 7, l'instruction est javascript:document.getElementById('input').value = '';.
Elle commence par javascript: pour bien spécifier au navigateur le langage dans lequel est codée l'instruction qui va suivre. Ensuite, on trouve document.getElementById('input').value = '';. Cette instruction est, je trouve, assez intuitive, dans le sens où, même avec un niveau en anglais des plus rudimentaires, on peut facilement la comprendre. Elle signifie : aller chercher dans le document (la page en cours) l'élément dont l'identifiant (attribut xhtml id) est 'input', et fixer sa valeur à une chaîne vide.
Concrètement : vider le champ de saisie. - A la ligne 10, l'instruction est javascript:alert(document.getElementById('input').value);.
Comme précédemment, on retrouve javascript:, pour la même raison. La suite est l'élément principal de ce petit script : alert(document.getElementById('input').value);. Il s'agit de l'instruction qui va afficher la fameuse boite de dialogue contenant le message du champ de saisie.
Sa syntaxe est alert('Votre message d\'alerte !\');. Ne pas oublier d'échapper les guillemets simples à l'intérieur du message d'alerte, sinon le navigateur risque de ne pas comprendre ! Ici, le message d'alerte est la valeur du champ de saisie.
- Ligne 7
