[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > Javascript > Lecture du tutoriel

Votre premier script

	Auteur : JoSé2 Créé : le 06/08/2006 02:58:27 Modifié : le 07/06/2007 22:44:10 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Une bonne nouvelle au programme : on va vraiment commencer à coder en JS !

Vous allez créer votre premier script : à la fin de ce chapitre, vous serez capable d'afficher des boîtes de dialogue (contenant un message).
Rien d'impressionnant, certes, mais ces boîtes de dialogue vous seront fort utiles pour la suite...

Sommaire du chapitre :

Logiciels nécessaires
Vos débuts en JavaScript
Où se place le code JavaScript ?
De quoi se compose le "code" ?
Q.C.M.

Logiciels nécessaires

Comme j'ai pu vous le dire dans le premier chapitre, le JavaScript est un langage facile à mettre en oeuvre.
De même que pour créer une page (x)HTML, il vous suffit :

d'un éditeur de texte : Bloc-notes est suffisant, mais d'autres logiciels offrent plus d'options, comme la coloration syntaxique, qui est très appréciable.
Notepad++ (que vous possédez peut-être déjà... ) en est un bon exemple.
d'un navigateur : FireFox, avec le plugin Web Developer, est parfaitement approprié pour cela.
Cependant, pour vérifier la compatibilité de vos scripts, il peut être utile de les tester sur plusieurs des navigateurs les plus courants (Internet Explorer 6, Opera et Firefox étant les références pour les PC).

Liens vers les sites de Notepad++, FireFox et Web Developer.

Vos débuts en JavaScript

Les commentaires

Si vous êtes un bon utilisateur du (x)HTML et du CSS (et je suis sûr que c'est le cas

), vous devriez savoir vous servir des commentaires.

Je vous rappelle que les commentaires sont des phrases qu'on utilise justement... pour commenter le code ! Elles n'ont aucune conséquence sur celui-ci.
Cela permet d'avoir un code clair et compréhensible par toute personne qui le lirait

.
Ils seront très utilisés dans la suite de ce cours.

Les commentaires, c'est comme tout, il ne faut pas en abuser : il n'est pas nécessaire de commenter chaque ligne, ça rendrait votre code lourd.
Mieux faut commenter le code par portion, en ne mettant des commentaires que lorsque vous les jugez utiles.

En (x)HTML

Les commentaires, en (x)HTML, s'écrivent de cette manière :

Code : HTML

1	<!-- je suis un commentaire -->

Vous pouvez donc y écrire plus ou moins ce que vous voulez, évitez cependant les caractères spéciaux (particulièrement les crochets < et >, le dernier pouvant être interprété par le navigateur comme la fin du commentaire).

Voici un exemple d'utilisation d'un commentaire (au milieu d'une page (x)HTML) :

Code : HTML

1 2	<!-- lien vers le site du zéro --> <a href="http://www.siteduzero.com">Le site du Zér0 !</a>

En JavaScript

En JS, c'est tout à fait différent.
Il y a deux manières d'écrire un commentaire.

Les commentaires sur une seule ligne : ils se placent sur la fin de la ligne, après // (deux slashs).
Évitez cependant d'écrire trop de choses de cette manière. Fixez-vous une limite (généralement, on prend 80 caractères maximum par ligne, code compris, mais il n'y a aucune obligation).
Les commentaires sur plusieurs lignes : exactement comme en CSS ,
ils se placent entre /* et */ : il n'y a ici aucune limitation sur la longueur du commentaire. Vous pouvez donc en écrire autant que vous voulez.
Notez que vous pouvez parfaitement utiliser cette notation pour les commentaires courts (certaines personnes n'utilisent que celle-ci).

Un petit exemple pour vous montrer :

Code : JavaScript

duCode;        // commentaire court
codeBis;       /* autre commentaire court */
suiteDuCode;
encoreDuCode;  /* ici, je vais mettre un commentaire long
     je peux écrire autant que je veux,
     sur plusieurs lignes si j'ai envie */

Afficher une boîte de dialogue

C'est quoi, une boîte de dialogue ? o_O

C'est une petite fenêtre (une boîte) qui sert à communiquer (dialoguer) avec l'utilisateur (lui afficher ou lui demander quelque chose).
Celle que nous allons créer sert à afficher un message.

Notre boîte de dialogue

Voici le code qui permet de créer un tel message :

Code : JavaScript

1	alert('Hello world');

Ceci est du code JavaScript.
Si vous l'écrivez tel quel dans votre page HTML, il ne marchera pas.
Nous allons voir quelques lignes plus bas comment exécuter ce code ; lisez donc la suite avant de vous précipiter sur Notepad++

Vous pouvez remplacer le classique "Hello world" par le texte de votre choix, en laissant les apostrophes de part et d'autre de votre message (qui doit lui-même ne pas contenir d'apostrophe).

Nous étudierons plus en détail ce code, une fois que vous saurez insérer du JS sur une page Web, autrement dit un peu plus bas sur cette page.

Où se place le code JavaScript ?

Insérer du JavaScript dans une page xHTML

On écrit le JS dans notre page HTML, et c'est le navigateur qui lit et exécute ce code.
Mais comment fait-il pour différencier les deux ?

Vous le savez sûrement déjà, un ordinateur, c'est bête : il faut lui dire tout ce qu'il doit faire.
Eh bien c'est ce que nous allons devoir faire : si on ne précise pas à notre navigateur que notre code est du JS, il ne le devinera pas tout seul.
Voyons donc comment le lui dire...

Avant de continuer, je vous rappelle juste quelques informations essentielles concernant le xHTML :

Structure de la page (code minimal) :
Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Titre de la page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <!-- en-tete du document -->
</head>
<body>
  <!-- corps du document -->
</body>
</html>

Formation des balises et vocabulaire :
Code : HTML

<!-- paire de balises -->
<nom propriété="valeur">texte</nom>

<!-- balise seule -->
<nom propriété="valeur" />

Revenons à notre JavaScript :
Il y a deux méthodes différentes pour insérer du JavaScript dans une page Web.

Directement dans les balises

La première méthode consiste à écrire le code directement à l'intérieur de la balise qui va être concernée par le script.

Comment ça marche ?

Pour insérer le code dans une balise, une nouvelle propriété est nécessaire. Il s'agit du gestionnaire d'événements (en anglais : event handler).

Cette propriété est caractéristique du JS : elle suffit à dire au navigateur : "attention, ce qui suit est du JS".
Elle porte le nom de l'événement qui doit déclencher le script (c'est pour cela qu'on parle de "gestionnaire d'événements").
Elle contient comme valeur le script à exécuter lors de cet événement.

Pour résumer, la balise en question aura cette forme-là (ici il s'agit d'une balise seule, c'est le même principe pour les balises fonctionnant par paires) :

Code : HTML

1	<nom eventHandler="script" />

Examinons tout de suite un exemple.

Nous allons utiliser un lien.
On ne veut pas qu'il nous envoie sur une autre page : c'est pourquoi nous utiliserons le symbole # en guise d'adresse.
On part donc de ceci :

Code : HTML
1
<a href="#">lien</a>
L'événement déclenchant le script sera un clic de souris sur ce lien.
Le nom de cet événement est : onclick.
Le script à exécuter sera l'ouverture d'une boîte de dialogue. Le code sera donc :

Code : JavaScript
1
alert('Bonjour !'); // (j'ai change le texte au passage)

Ça nous donne ceci :

Code : HTML

1	<a href="#" onclick="alert('Bonjour !');">lien</a>

Vous pouvez tester ce code (c'est même conseillé : réécrivez-le, vous le retiendrez beaucoup mieux qu'en faisant un copier-coller).

Résultat : notre boîte de dialogue devrait apparaître lorsque vous cliquez sur le lien :magicien:

Après le on, le C de click doit être en minuscule ! Ceci est valable pour tous les gestionnaires d'événements.
S'ils sont écrits avec une majuscule, la page est invalide !

Si, même après le changement de la majuscule, rien ne se passe, votre navigateur a peut-être empêché le JS de s'exécuter.
Dans ce cas, référez-vous à l'aide de celui-ci.

Vous venez de créer votre premier script ! :soleil:

Maintenant, un petit exercice :
essayez de faire la même chose, mais avec une image, cette fois...

Solution :

Secret (cliquez pour afficher)

Code : HTML

1	<img src="monImage.png" alt="Mon Image" onclick="alert('Pourquoi cliques-tu sur cette image ?');" />

Cas d'un lien :
Il est possible d'écrire du JavaScript directement à la place de l'adresse d'un lien, en le faisant précéder de javascript:, comme dans cet exemple :

Code : HTML

1	<a href="javascript:alert('Coucou');"> Cliquez ici </a>

Cette méthode a l'avantage de ne pas faire remonter le visiteur en haut de la page, comme l'aurait fait un lien portant le petit dièse (#) ; c'est ce que vous avez sûrement dû voir si vous avez testé le code.

Autres gestionnaires d'événements

Il existe d'autres événements que le clic de souris, rassurez-vous

.
Leur syntaxe est la même : onevent, event étant le nom de l'événement (en minuscule dans le tuto, pour respecter la validité du SdZ).
Les événements s'appliquent à la plupart des balises (sauf événements particuliers, relatifs à des balises précises).

En voici quelques-uns :

onclick : au clic (gauche) de la souris
ondblclick : lors d'un double clic
onmouseover : au passage de la souris
onmouseout : lorsque la souris "sort" de cet élément (en quelque sorte, le contraire de onmouseover).

Gestionnaires d'événements de la balise <body> :

onload : au chargement de la page
onunload : lorsqu'on quitte la page (ou qu'on change de page).

Le mieux est de les essayer, vous verrez par vous-mêmes à quoi correspond chaque événement.
Voici une image contenant plusieurs gestionnaires d'événements :

Code : HTML

1	<img src="monImage.png" alt="Mon Image" ondblclick="alert('Double clic');" onmouseout="alert('La souris sort');" />

Et voici la balise <body> pour créer une page disant "Bonjour" et "Au revoir" :

Code : HTML

1
2
3

<body onload="alert('Bonjour !');" onunload="alert('Au revoir !');">
  <!-- corps de la page -->
</body>

Ce dernier exemple est typique de ce qu'il ne faut pas faire !
Une page contenant trop de JavaScript devient vite énervante, surtout dans ce type d'utilisation.

Entre les balises <script> et </script>

Une nouvelle paire de balises

Et si notre script est très long, on ne va quand même pas tout mettre dans notre gestionnaire d'événements ? :waw:

Rassurez-vous, s'il existe plusieurs manières différentes d'insérer du JavaScript, ce n'est pas pour rien.
La seconde solution consiste à écrire le script entre deux balises spécifiques, <script> et </script>.

Il faut commencer par préciser au navigateur que notre script est... du JavaScript.
Pour cela, on rajoute la propriété type="text/javascript", ce qui nous donne ceci :

Code : HTML

<script type="text/javascript">

   /* votre code javascript se trouve ici
   c'est deja plus pratique pour un script de plusieurs lignes */

</script>

Mais il y a un problème !
Imaginez un vieux navigateur qui ne connaît pas le JS : s'il tombe sur cette balise, il va tout simplement l'ignorer, car elle lui sera inconnue. Mais tout le code qui suit sera considéré comme du texte, il va donc l'afficher sur votre page !
Pas très élégant

.
Il existe heureusement une solution...

Pour faire ignorer ce texte à ce vieux navigateur, on lui fait tout simplement croire qu'il s'agit d'un commentaire en (x)HTML.

Pour un navigateur qui connaît le JavaScript, il saura qu'il n'a plus affaire à du (x)HTML, et passera donc la balise du commentaire (<!--) sans en tenir compte.
Mais pour éviter qu'il soit déboussolé en rencontrant la balise de fin de commentaire (-->), nous allons lui dire, en JS, qu'il s'agit d'un commentaire, grâce à //.

Pour résumer, voici comment placer du JS dans une page en utilisant la balise <script> :

Code : HTML

<script type="text/javascript">
<!--

   /* et vous pouvez placer votre code JS ici
   sans etre inquiete par les vieux navigateurs */

//-->
</script>

Dans l'en-tête ou dans le corps de la page (x)HTML

Ces balises, elles sont à mettre dans l'en-tête, ou dans le corps de la page ?

On peut les placer soit dans l'en-tête (<head> ... </head>), soit dans le corps (<body> ... </body>) de la page (x)HTML :

dans le corps de la page, sont à placer les scripts à exécuter au chargement de cette dernière (lorsque le navigateur "lira" le code, il l'exécutera en même temps).
C'est ce que nous allons utiliser pour cet exemple, il suffit d'écrire le code à exécuter entre les balises ;
en revanche, sont à placer dans l'en-tête les éléments qui doivent être exécutés plus tard (lors d'un événement particulier, par exemple).
Dans ce cas, le code n'est pas écrit "en vrac", nous apprendrons plus loin comment l'organiser.

Ce qui nous fait donc deux manières d'insérer le code grâce à ces balises.

Exemple d'application

Essayez de réaliser cet exemple : dans notre page web, on veut :

une boîte de dialogue indiquant le début du chargement de la page (donc, le code est à placer au début du corps de la page),
une autre indiquant la fin du chargement de celle-ci (donc, à la fin du corps).

Voici le code complet de la page :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

<!-- en-tete du document -->

  <title>Un exemple</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

  <!-- script pour le debut du chargement -->
  <script type="text/javascript">
  <!--
    alert('Debut du chargement de la page');
  //-->
  </script>
  
  <!-- ici se trouve le contenu de la page web -->
  <p>
    Vous testez un script...<br />
    Enjoy ;)
  </p>
   
  <!-- script pour la fin du chargement -->
  <script type="text/javascript">
  <!--
    alert('Fin du chargement de la page');
  //-->
  </script>

</body>

</html>

Vous remarquez que tant que la première boîte de dialogue est ouverte, la page n'est pas chargée.
En effet, le navigateur exécute le JS au fur et à mesure du chargement de la page : il attend donc que le script soit terminé avant de charger la suite.

Placer le code dans un fichier séparé

Importer un fichier externe

Comme pour le CSS, on peut très bien placer notre code dans un fichier indépendant. On dit que le code est importé depuis un fichier externe. En CSS, l'extension de ce fichier (les deux à quatre lettres précédées d'un point à la fin d'un fichier) était .css.
Vous l'avez peut être deviné, l'extension du fichier externe contenant du code JavaScript est .js.

On va indiquer aux balises le nom et l'emplacement du fichier contenant notre (ou nos) script(s), grâce à la propriété src (comme pour les images).

Comme il n'y a plus de code entre les balises, la technique pour masquer le code aux anciens navigateurs n'a plus lieu d'être.

Et voici ce que cela nous donne :

Code : HTML

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

Comme vous l'avez peut-être remarqué, il n'y a rien à écrire entre les balises <script> et </script>... On peut donc faire de ces balises jumelles une seule et même balise, qui sera <script/>.

Voici donc comment importer le fichier script.js :

Code : HTML

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

Ce même fichier qui contiendra par exemple ceci :

Code : JavaScript

1	alert('Bonjour');

Créer le fichier

Si vous ne savez pas créer un fichier ayant l'extension .js, voici comment faire.

Avec Notepad++

Créez un nouveau fichier avec le menu Fichier, puis Nouveau.
Dans le menu Langage, sélectionnez... Javascript !
Enregistrez votre fichier, en lui donnant le nom que vous voulez, suivi de .js.
Pour ouvrir à nouveau ce fichier, clic droit, puis Open in Notepad++.

Avec Bloc-notes

Ouvrez Bloc-notes.
Dans le menu Fichier, choisissez Enregistrer sous...
Dans le menu déroulant Type de la nouvelle fenêtre, choisissez Tous les fichiers (ou All types en anglais).
Entrez le nom que vous voulez, suivi de .js.
Pour rouvrir ce fichier, faites un clic droit dessus, Ouvrir avec... puis choisissez Bloc-notes.

Enregistrer sous... avec Bloc-notes

De quoi se compose le "code" ?

Reprenons le "code" affichant une boîte de dialogue :

Code : JavaScript

1	alert('Hello world');

Voyons voir de quoi il se compose...

Des instructions

Qu'est-ce que c'est ?

Voici un mot important en programmation ; une petite explication s'impose donc...
Une instruction est un "ordre" que l'on donne à l'ordinateur, comme on pourrait taper "format C:" dans sa console (les joies de Win pour les adeptes du grand nettoyage de printemps

).
alert('Hello world'); est donc une instruction : on ordonne au script de créer une boîte de dialogue.
Un autre exemple : un calcul est une instruction.

Une grande partie de ce que vous écrirez en JS sont des instructions, mais pas tout.
Difficile de vous donner des exemples maintenant, je vous indiquerai au fur à mesure ce qui est ou n'est pas une instruction.

Séparer des instructions

Quand on donne une instruction à l'ordinateur, il faut également lui dire où est la fin de cette instruction...
Pour cela, en JS, il y a deux solutions :

revenir à la ligne (avec la touche Entrée ou Enter) : l'ordinateur comprendra qu'il aura ensuite affaire à une autre instruction.
utiliser un point-virgule (;) à la fin de l'instruction, comme je l'ai fait dans les exemples jusqu'ici.
Il est bien sûr parfaitement possible d'utiliser un point-virgule et un (ou plusieurs) retour(s) à la ligne...

Dans de nombreux langages de programmation (le JavaScript étant une exception), le point-virgule est obligatoire à la fin d'une instruction.
Je vous recommande donc fortement de prendre l'habitude d'en mettre un après chaque instruction.

Les fonctions

Explication

Une fonction est une suite d'instructions ayant un rôle précis. ( o_O

)
Un exemple :
Code : JavaScript

1	alert('Hello world');

Cette fonction affiche, lorsqu'on l'appelle (terme à retenir), une boîte de dialogue contenant le texte entre les apostrophes (ici : 'Hello world').

Si vous êtes un peu matheux (ou si vous avez simplement suivi en cours au collège et au lycée

), le terme fonction ne doit pas vous être inconnu... On a dit tout à l'heure qu'un calcul est une instruction. La fonction f telle que f(x) = 15x - 4 est une suite de calculs, donc en quelque sorte une suite "d'instructions" (par analogie avec le JavaScript, car instruction est un terme purement informatique).

Eh bien en JS, on a, parmi beaucoup d'autres, la fonction alert().

Rôle des parenthèses

À quoi servent les parenthèses vides que tu mets en écrivant alert() ?

Excellente question !

Revenons à notre exemple mathématique : entre les parenthèses, on précise la valeur de l'argument x.
Avec x = 5, on aura f(5) = 15*5 - 4 = 71.

C'est le même principe en JavaScript : par exemple, avec alert(), l'argument est le texte à afficher. S'il y a plusieurs arguments, ils sont séparés par des virgules.
On doit obligatoirement mettre ces parenthèses, même s'il n'y a aucun argument (elles seront alors vides).

Normalement, le nom de la fonction est alert, ou f pour la fonction mathématique citée plus haut.
Employer le nom alert() est un abus de langage, mais cela permet de repérer facilement qu'on parle d'une fonction.

De nouvelles fonctions

Il y a des fonctions déjà définies en JavaScript.
On peut aussi créer nos propres fonctions ?

Bien sûr !

Il existe en effet des fonctions déjà définies (retenez également ce terme) en JS, qu'on va donc pouvoir utiliser directement, comme notre fonction alert(). Le navigateur va alors chercher la définition de cette fonction et l'exécuter, ce qui aura pour effet de faire apparaître notre message.

Mais il est également possible de créer nos propres fonctions (par exemple, une fonction qui convertit des euros en francs), ce sera l'objet d'un chapitre.

Q.C.M.

Quel commentaire est correct en JavaScript ? (Correct en termes de syntaxe, l'utilité du commentaire n 'a pas d'importance ici.)

// J'écris ce commentaire pour indiquer que le code qui va suivre est mon premier script. Il a simplement pour effet d'afficher une boîte de dialogue contenant le message de mon choix, avec un bouton "Valider" pour fermer cette boîte.
/* J'ai créé mon premier script, il affiche une boîte de dialogue. */

Quel est le terme exact pour désigner un ordre que l'on donne à l'ordinateur ?

Un ordre
Une instruction
Une commande
Une fonction

Parmi ces gestionnaires d'événements, lequel correspond au double-clic de la souris ?

Vous savez désormais exécuter du code JavaScript ; attaquons donc sans plus tarder le chapitre suivant !

Le chapitre qui va suivre est capital !
Lisez-le avec attention car il introduit des notions assez complexes.

Auteur : JoSé2
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité