Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

Introduction à Node.js

JavaScript a longtemps été cantonné à un emploi côté client. Ce langage était utilisé pour ajouter un peu d'interactivité aux pages web.
Pour les accès aux bases de données il fallait utiliser un langag orienté serveur, le plus utilisé étant PHP.

Sachez que cette époque est révolue. L'environnement Node.js permet désormais d'utiliser JS côté serveur, d'interroger une base de données distante avec ce langage.

Présentation de Node.js

Node.js est un environnement d'exécution open-source, multi-plateformes, qui permet aux développeuses de créer toutes sortes d'applications et d'outils côté serveur encodées en JS.
Grâce à Node.js vous pouvez utiliser JavaScript en dehors du navigateur.

Que peut faire Node.js ?

Node.js peut générer du contenu de page dynamique.
Node.js peut créer, ouvrir, lire, écrire, supprimer et fermer des fichiers sur le serveur.
Node.js peut collecter des données de formulaire.
Node.js peut interroger une base de données : lire, ajouter, supprimer des lgnes d'une table de la base, etc.

Node.js utilise le même moteur JavaScript que le navigateur Chrome (moteur V8) ; l'exécution d'un programme Node est donc très rapide.

Les limites de Node.js

Attention Node.js ce n'est pas toujours la panacée !
Imaginons comme thématique l'ajout d'une ligne à une table (d'une base MySQL ou SQLite) via un formulaire HTML (afin d'avoir une saisie contrôlée).
Avec le couple HTML-PHP, la code est fort simple : une simple page web contenant du code HTML5 et un script en PHP (pour la connexion à la base et appel d'une requête SQL de type INSERT).
Obtenir le même rendu avec Node.js demande une programmation qui peut paraître déroutante ...
PHP reste encore une solution pertinente pour le développement "back-end" de sites web.
Tuto sur PHP dans mon site

Un article intéressant : quel langage Back-end choisir ?

Premiers pas avec Node.js

Il faut bien sûr installer Node.js et ensuite se familiariser avec la console Node.

Installation de node.js

Il s'agit d'abord d'installer l'environnement sur votre ordinateur.
L'installation de Node.js sous Windows ne pose pas de problème particulier.
Il suffit de se rendre sur le site nodejs.org et de suivre les instructions

La console Node

Maintenant que vous avez installé Node sur votre PC, vous pouvez utiliser la console Node.
Il faut d'abord lancer l'invite de commmandes en tapant cmd dans la zone "Rechercher" de la barre des tâches.

Quelques commandes à saisir dans la "console Windows" (fenêtre sur fond noir légendée "invite de commandes"): C:\Users\boulanger>node -v v18.13.0 C:\Users\boulanger>node Welcome to Node.js v18.13.0. Type ".help" for more information. > function multi(a,b) {return a*b; } undefined > multi(10,15) 150 > multi(5,8) 40 > Math.PI 3.141592653589793 > Math.random() 0.15216264361258802 > var date = new Date() undefined > console.log (date) 2023-06-14T06:24:47.888Z undefined >.exit

J'ai tapé la commande "node -v" pour connaitre la version installée de Node.js (j'aurais pu écrire "node --version").
Puis j'ai saisi la commande "node" pour accéder plus précisément à la console Node ; la fenêtre de la console a désormais pour titre "invite de commandes - node".
Enuite j'ai défini une fonction "multi" (commme "multiplication") qui retourne le produit de deux valeurs.
J'ai appelé cette fonction deux fois.
J'ai ensuite saisi des expressions JS de l'objet Math bien connues.
J'ai aussi créé un objet Date.
Pour quitter la console Node et donc revenir à la console windows tapez .exit.

Donc pour testez la syntaxe JS, il existe une alternativez à la console du navigateur : la console Node.

Exécuter un script dans la console Node.js

À Partir de la console Node vous pouvez exécuter des scripts Node.
Commandes saisies dans l'invite de commande : C:\Users\boulanger>cd documents\prog_node C:\Users\boulanger\Documents\prog_node>node test.js afficher les pairs de 1 à 100 2 4 6 8 10 12 ...

Tout cela mérite quelques explications ...
Mes scripts sont stockés dans le dossier "documents/prog_node".
À partir de l'invite de commmandes, j'ai produit la commande DOS cd documents\prog_node pour accéder à ce réperetoire.
j'ai saisi ensuite la commande "node test.js" ; test.js est un programme Node stocké dans le dossier "documents\prog_node".

Voyons le contenu de ce programme : console.log("afficher les pairs de 1 à 100"); for (var i =2; i <=100; i+=2) console.log(i);

Les programmes Node sont très succincts.

La boucle permet d'afficher les nombres paires compris entre 2 et 100 ; i est en effet incrémenté de 2.

Créer un serveur web basique avec Node.js

Il est simple de créer un serveur web avec Node.js.

Code du programme "creer_serveur.js"

L'exemple qui suit crée un serveur web qui écoute une requête sur l'URL localhost:8080.
Quand une requête est reçue, le script répond en affichant la chaine "Bonjour tout le monde".
Le programme tient en quelques lignes. var http = require("http"); var message = function(requete,resultat) { resultat.end("Bonjour tout le monde"); } var serveur = http.createServer(message); serveur.listen(8080); console.log ("serveur sur port 8080");

Exécutez ce programme à partir de l'invite de commmandes ; tapez donc "node creer_serveur.js" (après avoir séléctionner le répertoire "prog_node" du dossier "documents" via une commande DOS).
La console affiche : "Serveur sur port 8080"
Ouvrez alors le navigateur ; tapez en guise d'URL "localhost:8080"; le message "Bonjour le monde" s'affiche dans la fenêtre.
Pour fermer le serveur produisez la commande CTRL+C dans la console.

Explications détaillées du script

Le module "http" est un des multiples modules ("packages") de Node.js
Ce module a la particularité d'être nativement installé ; pour les autres modules il faut préalablement les installer via un un gestionnaire de paquets : NPM.

Une variable nommée "message" est créée par une fonction.
Cette fonction est appelée lorqu'il y a création du serveur web.

Le serveur est créé au port 8080 et affiche la contenu de la variable message

Pour créer un serveur web il faut utiliser la méthode createServer() de l'objet http ; la méthode listen() du serveur précise le port.
La commande CTRL+C met fin à un programme Node.js

Script - autre syntaxe

Si vous préférez une écriture plus concise. var http = require('http'); http.createServer(function (requete, resultat) { resultat.end('Bonjour le monde !'); }).listen(8080); console.log ("serveur sur port 8080");

Un serveur web plus sophistiqué

On veut que le navigateur retourne un texte au format HTML.

Le script

J'ai rajouté l'instruction "resultat.writeHead(200, {'Content-Type': 'text/html'})".
Cette instruction précise que le message adressé au serveur est au format HTML.
La méthode result.end() est argumentée par une instruction HTML (balises B & I encadrant du texte).

Le rendu

Le message dans le navigateur apparait en gras et italique conformément au balisage.

Qu'est-ce que le NPM

NPM (Node Package Manager) est un gestionnaire de modules ("packages") de Node.js.
Lorsque vous installez Node.js, NMP est aussi installé d'office.
Les modules sont des bibliothèques JavaScript que vous pouvez inclure dans le script.

Télécharger un "package"

Pour installer un module il suffit de produire dans la console Windows, la commande : npm install nomModule.
Exemple : je souhaite télécharger un package appelé "upper-case" ; il suffit de taper : npm install upper-case

Message converti en majuscules

Thème : nous voulons que le message "bonjour tout le monde" soit affiché en majuscules.
Il suffit d'inclure dans le script le module "upper-case".

Le programme

Pour que le script fonctionne, il faut bien sûr avoir installé auparavant le module "upper-case".
Notez la syntaxe : result.end(uc.upperCase("bonjour tout le monde ! ")). Il faut donc que le message retourné au serveur soit l'argument de la méthode upperCase() de l'objet uc.

Le rendu

Dans le navigateur le message "bonjour tout le monde" s'affiche en italique mais surtout en majuscules.

Lire une chaine de requête

Il est possible de récupérer ce qui a été saisi dans la barre d'URL après le nom de domaine grâce à la propriété "url" de l'objet "req".

Le script

Le rendu

Dans la barre d'URL saisissez "localhost:8080/?dupont&jacques
Le navigateur affiche : /?dupont&jacques

Le module url

Pour une analyse pointue d'un URL il faut faire appel au module "url" et à sa méthode parse().
Je rappelle que le verbe "to parse" veut dire analyser.
Le module "url" est natif donc aucune installation nécessaire avec npm

Exemple 1

L'url est dans le script.
Le script: // nom programme : manipuler_url.js const url = require("url"); const source = "https://darchevillepatrick.info/js/js31.php " // url d'une page de mon site const page = url.parse(source); console.log ("Protocole : " + page. protocol); console.log ("Domaine : " + page.hostname); console.log ("Chemin : " + page.pathname)

Pour obtenir l'objet "page" on applique la méthode parse() à l'url.
L'objet "page" peut alors être analysé gràce à différentes propriétés : protocol, hostname, pathname,etc.

Le rendu :
La console Node retourne : Protocole : https: Domaine : darchevillepatrick.info Chemin : /js/js31.php

Exemple 2

Cette fois il faut analyser l'url saisie dans le navigateur.
Le script est forcément un peu plus complexe : // nom programme : manipuler_url2.js var http = require('http'); var url = require('url'); var serveur = http.createServer(function (requete, resultat) { resultat.writeHead(200, {'Content-Type': 'text/html'}); var q = url.parse(requete.url, true).query; var texte = q.year + " " + q.month; resultat.end(texte); }); serveur.listen(8080); console.log('Serveur web localhost:8080'); console.log("Saisir dans la barre d'url : localhost:8080/?year=2023&month=June");

Le rendu :
Saisir dans la barre d'URL du navigateur : 'localhost:8080/?year=2023&month=June'
Attention aucun espace dans la saisie !
Le navigateur retourne : "2023 june"

Créer ses propres modules

Nous voulons que les dates apparaissent avec un format très explicite pour un francophone. Du genre : lundi 24 juillet 2023 à 19:17:40
JavaScript propose désormais le constructeur Intl.DateTimeFormat pour formater proprement et rapidement des dates. A partir de cet objet paramétré la méthode format() retourne la date au format défini.
Pour en savoir plus sur le constructeur Intl.dateTimeFormat

Le script de "monModule.js"

Le fiichier est enregistré dans le dossier "documents/prog_node", bien sûr. // nom module : monModule.js function dateHeure(dt) { var international = new Intl.DateTimeFormat("fr-FR", {hour12 : false, weekday : "long", year : "numeric" , month : "long", day : "numeric", hour : "2-digit", minute : "2-digit", second : "2-digit"}); return international.format(dt); } // Instruction pour construire un module perso exports.dateHeure = dateHeure;

Notez la dernière instruction qui indique que le fonction dateHeure devient publique.

Utilisation du module perso

Le script de "emploiModule.js"

Le fichier enregistré dans le dossier "documents/prog_node", bien sûr. // nom script : emploiModule.js const monModule = require("./monModule.js"); var date1 = new Date(); console.log (monModule.dateHeure(date1)); var date2 = new Date('1995-12-17T03:24:00'); console.log (monModule.dateHeure(date2));

const monModule = require("./monModule.js") : appel du module perso.
"./" indique que le fichier à appeler est dans le même répertoire que le script principal.

console.log (monModule.dateHeure(date1)) : Formatage de la date courante en utilisant la fonction dateHeure du module perso.

Le rendu

Script exécuté le 25 juillet 2023. mardi 25 juillet 2023 à 08:55:35 dimanche 17 décembre 1995 à 03:24:00

Vous apprenez que le 17 décembre 1995 était un dimanche ...