Nous allons maintenant utiliser jQuery, si jQuery vous est inconnu, n'hésitez pas à vous plonger dans les activités ici.
Créez une nouvelle application.
Complétez les fichiers avec les codes suivants :
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<h1></h1>
</body>
</html>
script.js
$(function(){
$('h1').html('Hello World!')
});
serveur.js
var express = require('express');
var app = express();
app.use('/javascript', express.static(__dirname + '/javascript'));
app.use('/lib', express.static(__dirname + '/lib'));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/html/index.html');
});
app.listen(8080);
Testez cette application.
Analyse du fichier serveur.js
Une seule nouveauté dans ce code :
app.use('/javascript', express.static(__dirname + '/javascript'));
app.use('/lib', express.static(__dirname + '/lib'));
Nous utilisons la méthode « use » de l'objet app.
Le fichier html nous indique que le fichier script.js se trouve dans le dossier javascript et que le fichier jquery-2.1.4.min.js se trouve dans le dossier lib. Il faut indiquer à express où se trouvent «réellement» ces fichiers sur le serveur. Pour cela nous utilisons une méthode (static) de l'objet express, nous passons le chemin absolu à utiliser («__dirname + '/javascript'») pour trouver le fichier.
En résumé, si je prends comme exemple la 2e ligne «app.use('/lib', express.static(__dirname + '/lib'));», si dans le fichier html (ou ailleurs...) on recherche un fichier se trouvant dans le répertoire « lib », il faudra aller le chercher dans le répertoire «lib» ayant pour chemin absolu «__dirname + '/lib'». Sans ces 2 lignes, cet exemple ne fonctionnerait pas.
En vous appuyant sur l'exemple du "À faire vous-même 4.1", modifiez l'application pour que le titre (balise h1), soit centré. Vous utiliserez le fichier style.css. N'hésitez pas à consulter les activités consacrées au couple HTML+CSS ici.