Catégories
Developpement Open-source Planet-libre Web

Une introduction à node.js

Node.js est un framework implémentant, coté serveur, la version 8 du moteur Javascript de Google (pour une présentation rapide, je vous conseille de parcourir ces quelques slides).

L’objectif de ce billet est d’installer Node.js sur votre machine GNU/Linux et d’exécuter votre premier programme (hello.js).

Installation de Node.js depuis les sources

Il n’existe pas, à l’heure à laquelle je rédige ce billet, de « package » officiel de Node.js pour Debian/Ubuntu (voir le chapitre suivant pour une installation depuis un PPA). L’installation est cependant assez simple. Pour installer la dernière version (stable) depuis le dépôt officiel GIT, il suffit de saisir les commandes suivantes:

mkdir ~/src
cd ~/src
git clone https://github.com/joyent/node.git
cd ~/src/node
git checkout v0.8.0
sudo mkdir /opt/node
./configure --prefix=/opt/node
make
sudo make install
echo 'export PATH=$PATH:/opt/node/bin' >> ~/.profile
echo 'export NODE_PATH=/opt/node:/opt/node/lib/node_modules' >> ~/.profile
source ~/.profile

L’installation va se faire dans le répertoire /opt/node.

Pour vérifier que Node.js est bien installé sur votre machine:

# node -v
v0.8.0

Les modules avec NPM

Pour étendre les fonctions de bases de Node.js, il faut utiliser l’utilitaire NPM (Node Package Manager). Grâce à lui il est possible d’ajouter des packages à Node.js.

Pour installer Node.js depuis les sources (voir le chapitre suivant pour une installation depuis un PPA):

curl http://npmjs.org/install.sh | sudo sh -c 'export PATH=$PATH:/opt/node/bin ; export NODE_PATH=/opt/node:/opt/node/lib/node_modules ; sh'

Je vous laisse ensuite regarder la documentation puis la liste des packages disponibles.

Installation depuis un PPA

Si vous êtes sous Ubuntu, il existe un PPA maintenant les dernières versions de Nodejs et de NPM. Pour installer le PPA sur votre système:

sudo add-apt-repository ppa:chris-lea/node.js

Puis l’installation de Nodejs et NPM:

sudo apt-get update && sudo apt-get install nodejs npm

Un premier exemple, ou le fameux « Hello world ! »

On commence par éditer un fichier ‘hello.js‘ contenant le code suivant:

//
// A JavaScript based on Node.js
//
// Nicolas Hennion (aka) Nicolargo
//
// GPL v3.0
//

var http = require('http');
var url = require('url');
var spawn = require ('child_process').spawn;

//**********
// Variables
//**********

var listenport = 1337;

//**********
// Functions
//**********

// Chomp function (delete the \n)
String.prototype.chomp = function () {
return this.replace(/(\n|\r)+$/, '');
};

// HTTP request
function onRequest(req, res) {
console.log("New request: "+req.url);
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello World');
res.end();
};

//*************
// Main program
//*************

// Create the HTTP server
http.createServer(onRequest).listen(listenport);

// Get the hostname (FQDN)
var listenaddress = spawn('hostname', ['-f']);
listenaddress.stdout.on('data', function (data) {
var fqdn = new String(data);
console.log('Server running listenning http://'+fqdn.chomp()+':'+listenport+'/');
});

Puis on lance le noeud (node) avec la commande:

# node ./hello.js
Server running listenning http://VotreMachine:1337/

Il ne reste plus (après avoir autorisé les requêtes vers le port TCP 1337 si vous avez un Firewall sur votre machine de test) qu’à pointer une navigateu Web vers l’URL donnée par la commande pour voir affiché le résultat:

Détail du code

On commence par initialiser les fonctions de Node.js dont on a besoin (voir la liste dans la documentation officielle). Pour notre exemple, nous avons besoin de générer un serveur HTTP (http) et de lancer une commande système (spawn) récupérant le nom FQDN de la machine.

[cc lang= »javascript »]

var http = require(‘http’);

var spawn = require (‘child_process’).spawn;

[/cc]

Après la définition d’une variable globale (contenant le numéro TCP du port d’écoute du serveur) ainsi que d’une fonction enlevant le caractère de retour à la ligne du chaine (chomp), on passe au vif du sujet en générant un serveur HTTP:

[cc lang= »javascript »]

// Create the HTTP server

http.createServer(function (req, res) {

res.writeHead(200, {‘Content-Type’: ‘text/plain’});

res.end(‘Hello World\n’);

}).listen(listenport);

[/cc]

Cette commande est « forké » (elle génère donc un daemon HTTP écoutant sur le port ‘listenport’ et renvoyant le message texte ‘Hello World’). Enfin on affiche dans la console l’URL du serveur:

[cc lang= »javascript »]

// Get the hostname (FQDN)

var listenaddress = spawn(‘hostname’, [‘-f’]);

listenaddress.stdout.on(‘data’, function (data) {

var fqdn = new String(data);

console.log(‘Server running listenning http://’+fqdn.chomp()+’:’+listenport+’/’);

});

[/cc]

Aller plus loin

Bien évidement, ce billet n’est qu’une simple introduction à ce framework (d’ou le titre :)). Le code donnée en exemple est sûrement « optimisable » mais à un objectif pédagogique.  Je reviendrai rapidement sur ce sujet en proposant des développement basée sur Node.js pour la supervision de nos belles machines. Stay tuned

Sources ayant inspirées ce billet:

Catégories
Developpement Open-source

Tutorial jQuery

Jquery logojQuery est une bibliothèque javascript open-source et cross-browser qui permet de traverser et manipuler très facilement l’arbre DOM de vos pages web à l’aide d’une syntaxe fortement similaire à celle d’XPath (qui est la syntaxe de manipulation d’arbre XML). jQuery vous permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. mais également de gérer les événements javascript ainsi que de faire des requetes AJAX le plus simplement du monde.

Pour développer jQuery, il suffit de connaitre un seul objet référencé par la variable « $ ». Cet objet est en fait une fonction javascript qui est le point d’entrée de tout le framework, et dont le retour est l’object « $ » lui-meme (dont le contexte dépend de la fonction appelée) ce qui permet d’enchainer facilement et rapidement des actions (comme nous le verrons dans les exemples qui suivent).

Maintenant que les présentations sont faites, passons sans attendre aux exemples !

Tout d’abord, jQuery peut etre téléchargé ici sous forme d’un fichier .js normal ou compressé : http://jquery.com.Une fois téléchargé, il suffit de l’insérer entre les balises <head> et </head> de vos pages html.

Exemple : <script type= »text/javascript » src= »jquery-1.2.2.min.js »/>Quelques bases sur la sélection…

  • $(« p »);
    Cet appel retourne tous les éléments P (paragraphes) de votre document : on a rarement fait plus simple.
  • $(« .tata »);
    Cet appel retourne tous les éléments de votre document qui ont la classe CSS « tata ».
  • $(« #toto »);
    Cet appel retourne l’élément de votre document, s’il existe, dont l’attribut ID est « toto ».
  • $(« #titi > span »);
    Cet appel retourne tous les éléments SPAN contenus dans l’élément dont l’identifiant est « titi ». On pourrait écrire cet appel de cette façon également : $(« span », $(« #titi »));
  • $(« table#tutu > tr:even »);
    Cet appel retourne tous les éléments TR pairs (pour les lignes impaires remplacer « even » par « odd ») contenus dans l’élément TABLE dont l’identifiant est « tutu » (à noter la grande originalité des noms que je donne a mes identifiants…). Cet appel peut etre extremement utile pour appliquer une couleur de fond a toutes les lignes paires par exemple.

A partir de la, vous pouvez appliquer toutes les fonctions de jQuery que vous voulez. En voici quelques exemples concrets (cliquez ici pour télécharger les exemples d’appels jQuery du tutorial et les jouer chez vous) !

  • $(« p »).addClass(« bluebg »);
    Cet appel va chercher tous les éléments P de votre document et leur ajouter la classe CSS nommée « bluebg » si ils ne la possèdent pas déjà.
  • $(« p »).removeClass(« bluebg »);
    Cet appel retire la classe « bluebg » des éléments P du document.
  • $(« p »).toggleClass(« bluebg »);
    Cet appel va alterner les fonctions « addClass » et « removeClass » vues précédemment.
  • $(« p:odd »).css(« border », « 5px solid black »);
    Cet appel va ajouter une bordure noire de 5px d’épaisseur a tous les éléments P impairs.
  • $(« a[href=http://www.google.fr] »).css(« font-weight », « bold »).css(« color », « red »).css(« background-color », « green »);
    Cet appel va transformer tous les liens pointant vers le site http://www.google.fr, comme celui-ci : google.fr c’est par ici !
  • $(« p#testAppend > span »).append(« Hello World ! »);
    Cet appel va ajouter du texte a la balise SPAN contenu dans l’élément P dont l’identifiant est « testAppend ».

Quelques effets sympas maintenant !

  • $(« #testAnim »).show(« slow »);
  • $(« #testAnim »).hide(« normal »);
  • $(« #testAnim »).slideDown(500);
  • $(« #testAnim »).slideUp(200);
  • $(« #testAnim »).toggle();
  • $(« #testAnim »).fadeIn();
  • $(« #testAnim »).fadeOut();

Si jamais vous trouvez que la bibliothèque jQuery propose peu d’animation, sachez qu’il est possible de rajouter des plugins ! Voici une petite liste de plugins très intéressants :

  • Interface est certainement le plugin le plus connu : il ajoute énormément d’animations a jQuery. Allez voir la page d’exemples ici
  • ThickBox permet de faire des « popup » html (pour faire des galeries d’images par exemple)
  • UI Datepicker permet de créer des calendriers très simplement
  • etc.

Voila, c’est fini pour cette petite introduction a jQuery. Voici quelques liens qui vous seront certainement utiles :

Bon développement !NDNicolargo: Merci à Ritchi, maître-es développeur pour ce billet !