Bonjour ! Parmi les choses qui m'ont donné le goût de l'informatique, il y a le JavaScript. C'est un langage de programmation, tout simple, facile à manipuler et à intégrer partout. Il est surpuissant et peut être appris en seulement quelques heures. Vous ne me croyez pas ? Même si vous n'avez jamais écrit une ligne de code de votre vie, en un quart d'heure, vous aurez compris les concepts de base et vous exécuterez votre premier script. Attachez vos ceintures et préparez-vous à une plongée dans l'univers captivant du développement !

Les concepts de base du JavaScript

Pour commencer, il est essentiel de comprendre quelques notions clés : variables, objets, fonctions, conditions.

Une variable est une sorte de boîte qui peut contenir différents types de données : texte, nombres, etc. En JavaScript, on déclare une variable avec le mot-clé let. Il existe plusieurs types de variables et plusieurs mots clé pour les déclarer, mais ne retenez pour le moment que celui-ci.

Imaginons une variable "nom" qui contient "Michel". Si nous affichons un message "Bonjour " + nom, nous obtiendrons le message "Bonjour Michel".

Amusez-vous à changer dans le code ci-dessus "Michel" par ce que vous souhaitez, en prenant soin de toujours conserver les guillemets " autours et le point-virgule ; à la fin. Les guillemets servent à indiquer que "Michel" est une chaîne de caractères (en anglais string), une suite de lettre qui n'est pas du code informatique. Le point-virgule sert à marquer la fin de l'instruction.

Il est possible de stocker n'importe quoi dans une variable. Par exemple, nous pouvons enregistrer la date dans une variable.

Ici, nous créons un objet Date, qui contient la date et l'heure courante, que l'on peut facilement manipuler pour en extraire les informations dont nous avons besoin. Il est possible de créer des objets de toute sorte. Retenez simplement qu'un objet est un outil qui rend la donnée intelligente, plus facile à manipuler.

Ce qui serait bien, ce serait de pouvoir ranger ce code pour pouvoir le réutiliser plus tard. C'est tout l'intérêt des fonctions : un script mis dans une variable.

Ici, nous avons créé une fonction heure() qui retourne l'heure courante. Partout où nous appellerons cette fonction heure(), l'heure courante sera calculée et retournée. On peut l'utiliser plusieurs fois sans avoir à la réécrire et on peut complètement oublier comment elle fonctionne. C'est très pratique quand on débute, on peut utiliser des fonctions écrites par d'autres personnes. JavaScript propose des fonctions préexistantes, comme alert() qui permet d'afficher une boite de dialogue.

Imaginons que l'on vous fournisse une fonction complexe, avec un fonctionnement un peu obscur, comme celle-ci :

let prononcer = function (texte) {
    let synthetiseur = window.speechSynthesis;
    let parole = new SpeechSynthesisUtterance(texte);
    let voix = synthetiseur.getVoices().filter((voix) => voix.lang === 'fr-FR')[0];
    parole.voice = voix;
    synthetiseur.speak(parole);
};

Inutile de la comprendre si on vous explique comment elle fonctionne. Écrivez juste prononcer("Le texte à prononcer"); après la définition de cette fonction pour que votre ordinateur ou votre téléphone énonce ce que vous lui avez demandé.

Voyons maintenant une autre notion essentielle : la condition. Elle permet de prendre une décision à partir d'un paramètre.

Par exemple, nous pouvons dire "Bonjour !" si l'heure (heure()) est inférieure à 17h (ou < 17), sinon "Bonsoir !". Pour cela, nous inscrivons :

• if suivi de la condition entre parenthèses, ici heure() < 17,
• puis le code à exécuter si la condition est remplie entre accolades { et },
• suivi de else
• puis le code à exécuter si la condition n'est pas remplie entre accolades { et }.

La condition est généralement une comparaison entre des éléments : supérieur à >, inférieur à <, supérieur ou égal à >=, inférieur ou égal à <=, égal à ==…

Voici le code au complet :

Du JavaScript sur mon site

L'un des intérêts majeurs du JavaScript est qu'il peut être embarqué dans une simple page web pour la rendre un peu plus intelligente, ou qu'elle devienne une véritable application à part entière. Pour ce faire :

1. Rendez-vous sur l'administration de votre site et identifiez-vous si nécessaire,
2. Cliquez sur Rédaction du site,
3. Placez-vous sur la page de votre choix (de préférence une page peu fréquentée pour vos premiers essais),
4. Cliquez sur
5. À la toute fin, écrivez le code suivant, avant d'enregistrer et de tester en cliquant sur Voir la page :

<script>
alert("Ceci est du JavaScript");
</script>

Tant que votre code est encadré par les balises <script> et </script> et que celui-ci est correct, il sera interprété par votre navigateur.

Le JavaScript peut aussi manipuler un élément dans votre page. Reprenons l'exemple de bonjour/bonsoir.

Dans votre page, au tout début, avant le tout premier caractère, inscrivez ceci :

<p id="bonjour-bonsoir">Bonjour !</p>

Maintenant, entre les balises <script> et </script>, supprimez le code alert("Ceci est du JavaScript"); et inscrivez ceci à la place :

<script>
let heure = function() {
  let dateCourante = new Date();
  let h = dateCourante.getHours();
  return h;
};
if (heure() >= 17) {
  let element = document.getElementById("bonjour-bonsoir");
  element.innerHTML = "Bonsoir !";
}
</script>

Ici, document sert à manipuler la page web courante. getElementById permet de choisir quel élément manipuler, grâce à l'attribut id "bonjour-bonsoir" que nous lui avons défini. Nous stockons cet élément dans la variable element sous la forme d'un objet. Ensuite, nous modifions son contenu grâce à la propriété innerHTML.

Ainsi, lorsque le visiteur accède à la page :

1. La page web complète est chargée, avec à son début le mot "Bonjour !" dans un paragraphe comportant l'id "bonjour-bonsoir".
2. Le script est chargé et exécuté immédiatement, une seule fois.
3. Le script détermine quelle heure il est.
4. Si l'heure est supérieure ou égale à 17 (en d'autres termes, s'il est 17h, 18h, 19h, 20h, 21h, 22h ou 23h), alors :
   1. L'élément qui comporte l'id "bonjour-bonsoir" est recherché
   2. Son contenu est remplacé par "Bonsoir !"

Aviez-vous remarqué que si vous lisez cet article le soir, il commencera par "Bonsoir" ?

Aller plus loin ?

Bien entendu, il ne s'agit ici que d'une présentation de la technologie, ce n'est pas avec ce petit article de blog que vous développerez la prochaine révolution numérique. Les possibilités du JavaScript sont proches de l'infini, je pourrais écrire des dizaines d'articles sur le sujet : il est possible de développer des jeux (avez-vous essayé Z ?), des applications, des animations, des effets 3D, des réseaux d'échanges de fichiers… Aimeriez-vous lire d'autres articles sur ce sujet ? Est-ce trop technique ? Dites-moi ça en commentaire.