Mon premier programme en Javascript

Mise en place

Nous allons intégrer le code javascrpt dans notre page web.

Nous allons créer un fichier qui contiendra du HTML (xxxxx.html)(voir les activités consacrées au HTML5 et au CSS3 pour plus d'informations).

À l'aide d'un éditeur de texte (Notepad++), créer ce nouveau fichier.

Sauvegardez-le en précisant son nom, par exemple index.html.

Écrivez le code suivant dans votre éditeur de texte (sans oublier de sauvegarder quand vous avez terminé) : 


<!doctype html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <title>Voici mon site</title>
</head>
<body>
</body>
</html>

Si vous avez déjà eu l'occasion d'étudier le HTML, vous reconnaîtrez la structure d'un fichier HTML. Ce fichier est la "brique" de base d'un "site internet".

C'est à partir de ce fichier que nous "appellerons" un fichier javascript afin de l'exécuter.

À l'aide d'un éditeur de texte, créez un fichier JavaScript xxxx.js : par exemple monJS.js

Traditionnellement, les "apprentis programmeurs" commencent leur "carrière" en écrivant un programme qui permet d'afficher à l'écran le message "Hello World !". Nous n'allons pas déroger à cette tradition. En JavaScript, il suffit d'une "instruction" pour afficher ce message (notez bien que selon le langage utilisé cela peut-être plus complexe) : 


document.write("hello world !");

Il nous faut ensuite associer ce fichier à notre page HTML, modifiez votre code HTML en ajoutant la ligne suivante <script src="monJS.js"></script> : 


<!doctype html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <title>Voici mon site</title>
 <script src="monJS.js"></script>
</head>
<body>
</body>
</html>

Testez votre code à l'aide d'un navigateur web (Firefox ou Chrome) en “double-cliquant” sur le fichier index.html

Vous devriez voir le message hello world ! s'afficher dans le navigateur.

Bravo, vous venez d'écrire votre premier programme !

Nous verrons par la suite qu'il est possible d'utiliser des guillemets simples ' à la place de "

Dans tous les exemples que nous venons de voir, les fichiers index.html et monJS.js se trouvent au même niveau dans l'arborescence des fichiers. Il est souvent utile de placer les fichiers JavaScript dans un dossier “JavaScript”. Il faudra alors modifier le code HTML en conséquence : 


<script src="JavaScript/monJS.js"></script>

À faire vous même 1.1

Écrivez un programme qui affichera votre prénom à l'écran.

Testez-le.