Déc 10, 2019 Javascript

Maîtriser Javascript : introduction

Javascript est un langage intéressant, sans doute le plus intéressant. Et pourtant c’est l’un des langages les plus difficiles à maîtriser. Aujourd’hui Javascript ne se contente plus de piloter les navigateurs, il permet aussi le codage côté serveur.

Dans cet article je vais évoquer rapidement les bases du langage.

Un peu d’histoire

Si on veut faire un peu d’histoire on se rend compte qu’il est apparu dans le navigateur Netscape dans les années 90. A l’époque c’était le grand concurrent d’Internet Explorer et la guerre a duré longtemps. Puis Ecma a normalisé le langage en ECMAScript et publie régulièrement des spécifications. La première (ECMAScript 1) a été publiée en 1997. Ont suivi plusieurs autres versions jusqu’à ECMAScript 9 en 2018. Mais évidemment ce dernier est encore loin d’être bien pris en charge par les navigateurs. Pour être à peu près tranquille il faut se limiter à ECMAScript 2015 aussi dénommé ES6. Voici ce qu’en dit actuellement le site de référence Can I use :

On voit qu’avec des navigateurs à jour on s’en sort bien. Si on veut utiliser une version plus récente il est conseillé de transpiler en ES6 ou même ES5 pour plus de sécurité, par exemple avec Babel. A vous de voir !

Comment jouer ?

Dans cette série d’article on va progresser tranquillement en commençant par les bases. Pour jouer avec du Javascript il existe des console en ligne comme celle-ci :

Mais vous pouvez aussi utiliser la console de votre navigateur (les outils de développement sont en général accessibles avec F12) :

On va partir très fort avec une boîte d’alerte :

alert("Javascript je m'y mets !")

Mais pour aller plus loin vous aurez besoin d’un bon IDE et là il y a du choix ! Personnellement j’utilise de plus en plus Visual Studio Code. Mais on peut faire aussi beaucoup de choses avec les IDE en ligne comme JS Bin.

Types de données, opérateurs,variables et constantes

Javascript offre 5 types de données :

  • des nombres : des entiers, des nombres avec virgule flottante..
  • des chaînes de caractères (string)
  • des booléens (boolean)
  • des objets
  • des fonctions

On dispose aussi des opérateurs classiques : +, , /, *, ** (puissance) et %, avec les priorités tout aussi classiques pouvant être changées avec des parenthèses.

On a aussi les opérateurs de comparaison classiques : ==, ===, !=, !==, >, <, >+, <=

Et enfin les opérateurs booléens : &&, || et !

On peut aussi créer des variables qu’il faut déclarer. On dispose des mots-clés var et let pour le faire. On verra plus tard la différence entre les deux.

var nom = "Durand"
console.log(nom)

// Affiche Durand dans la console

Au passage on voit que les commentaires pour une ligne commencent avec //. pour plusieurs lignes il faut utiliser /* … */.

Pour les constantes on utilise le mot-clé const. Évidemment une constante ne peut pas changer de valeur, Javascript n’aime pas ça du tout :

Je n’insiste sur tout ça qui est assez classique.

Les objets

Javascript comporte des objets prêts à être utilisés, par exemple pour gérer le DOM :

  • window : pour accéder à la fenêtre du navigateur
  • console : pour accéder à la console
  • location : pour accéder à l’url
  • document : pour accéder à la page du navigateur
  • Math : pour les opérations mathématiques
  • Date : pour gérer les dates

On utilise les méthodes des objets en séparant le nom de l’objet et la méthode avec un point, par exemple :

Un autre objet intéressant est Array qui peut contenir une liste de valeurs. On dispose de plusieurs méthodes, par exemple :

On peut aussi créer des objets comme nous le verrons plus tard.

Les conditions et les boucles

Comme tout langage qui se respecte on dispose d’instructions conditionnelles :

var a = Math.random()
if(a < .5) {
    console.log("La valeur est inférieure à 0.5 : " + a)
} else {
    console.log("La valeur est supérieure à 0.5 : " + a)
}

Voilà ce qu’on peut obtenir dans la console :

"La valeur est supérieure à 0.5 : 0.7768581921690688"
"La valeur est inférieure à 0.5 : 0.12286310548734547"
"La valeur est supérieure à 0.5 : 0.5685746007124385"
"La valeur est supérieure à 0.5 : 0.616718456780491"
"La valeur est inférieure à 0.5 : 0.03611693840801622"

On dispose aussi du switch :

var metier = "plombier"
switch(metier){
  case "plombier":
    console.log("Bravo vous avez un beau métier !")
    break
  case "voleur":
  case "politique":
    console.log("c'est pas génial comme métier !")
}

On a aussi la possibilité de faire des boucles avec for :

var str = "Dupont"
var inverse = ""
for (var i = str.length - 1; i >= 0; i--) {
  inverse += str[i]
}
console.log(inverse)
// Affiche "tnopuD"

On peut faire la même chose avec un do while :

var str = "Dupont"
var inverse = ""
var i = str.length - 1
do {
  inverse += str[i]
} while(--i >= 0)
console.log(inverse)

Ou avec un simple while :

var str = "Dupont"
var inverse = ""
var i = str.length - 1
while(i >= 0) {
  inverse += str[i--]
}
console.log(inverse)

On peut aussi parcourir un objet avec for in. J’en reparlerai quand on verra les objets.

Avec ES6 est arrivée la boucle for of qui permet de parcourir un objet itérable :

const tableau = ["a", "b", "c"];
var resultat = ""
for (var e of tableau) {
  resultat += e
}
console.log(resultat);
// Donne "abc"

Les fonctions

Que serait un langage sans fonction ? D’autant que le programmation fonctionnelle connaît actuellement un fort engouement ! Javascript évidemment autorise l’écriture de fonctions :

function double(a) {
  return 2 * a
}
console.log(double(10))
// Donne 20

On peut aussi écrire une fonction comme une expression avec le même résultat :

var double = function (a) {
  return 2 * a
}
console.log(double(10))

Avec ES6 est apparue la fonction fléchée qui simplifie l’écriture :

var double = a => 2 * a
console.log(double(10))

Le navigateur

Javascript a d’abord été inventé pour intervenir dans le navigateur et donnant des possibilités dynamiques. On peut ainsi facilement intervenir sur le DOM (si vous n’êtes pas trop sûr de quoi il s’agit voilà un bon article sur le sujet).

Sélection

On dispose de nombreuses méthodes pour accéder aux éléments du DOM. Tous les éléments du DOM sont des objets et disposent de méthodes. J’ai parlé ci-dessus de l’objet document qui permet d’accéder à une page HTML. Voici un premier exemple :

<p id="montexte">Texte</p>

let texte = document.getElementById("montexte")
console.log(texte.innerText)
// Donne "Texte"

On voit ici qu’on a récupéré un élément du DOM par son ID. On peut aussi utiliser le tag ou la classe :

  • getElementsByTagName
  • getElementsByClassName

Mais on a des méthodes encore plus performantes avec lesquelles n’importe quel sélecteur CSS est utilisable :

<ol>
  <li>Café</li>
  <li>Thé</li>
  <li>Vin</li>
</ol>

let texte = document.querySelector("ol li:first-child")
console.log(texte.innerText)
// Donne "Café"

On peut récupérer un groupe d’éléments avec querySelectorAll.

Création

On peut sélectionner des éléments du DOM mais on peut aussi en créer :

<ol>
  <li>Café</li>
  <li>Thé</li>
  <li>Vin</li>
</ol>

let ol = document.querySelector("ol")
let li = document.createElement("li")
li.innerText = "Liqueur"
ol.appendChild(li)

On aura :

    1. Café
    2. Thé
    3. Vin
    4. Liqueur

Les événements

Une autre possibilité très importante pour l’interactivité est l’interception d’événements. par exemple un clic sur un bouton :

<button>Clic ici</button>

document.querySelector("button").addEventListener("click", (e) => {
  console.log("Quelqu'un a cliqué !")
})

Les librairies

Vous avez sans doute remarqué dans tout ce que je vous ai dit que je n’ai utilisé aucune librairie particulière mais du simple Javascript. On appelle ça du Vanilla.js. On peut évidemment tou faire de cette manière mais il existe une foule de librairies pour nous simplifier là vie… ou pas…

JQuery

La librairie la plus célèbre est sans aucun doute JQuery. Avec cette librairie plus de souci pour la manipulation du DOM, la mise en place d’événements, les animations… Mais avec l’amélioration des API des navigateurs cette librairie est de moins en moins justifiée. j’ai écrit récemment un article pour justement se poser cette question et donner des éléments de réponse.

React

React est une librairie Javascript qui a été développée par facebook en 2013 et qui a connu un très grand succès. Elle permet de créer des composants réutilisables et n’utilise aucun template, contrairement aux autres librairies.

Vue.js

Vue.js est une autre librairie pour gérer l’interface frontend. J’ai rédigé un cours complet pour cette librairie.

Il existe de nombreuses autres librairies comme Angular, Next, Meteor… Chacune présente des avantages et des inconvénients que je ne vais pas détailler ici.

Les ressources

Il existe une multitude de ressources en ligne pour Javascript, voici celles qui sont gratuites et que je considère comme les plus utiles :

Si vous avez des liens intéressants je peux allonger la liste !

Conclusion

Cet article est juste une mise en bouche, nous irons un peu plus en profondeur dans le prochain.

 

 

 

 

Laisser un commentaire