JSFIDDLE est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d'une vraie application 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 (Scite par exemple si vous êtes sous un système GNU/linux), 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
alert ('Le JavaScript fonctionne');
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
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>