browser – Sam & Max http://sametmax.com Du code, du cul Wed, 23 Dec 2020 13:35:02 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.7 32490438 Qu’est-ce que Javascript et à quoi ça sert ? http://sametmax.com/quest-ce-que-javascript-et-a-quoi-ca-sert/ http://sametmax.com/quest-ce-que-javascript-et-a-quoi-ca-sert/#comments Sun, 07 Apr 2013 22:04:26 +0000 http://sametmax.com/?p=5619 évident.]]> La question parait bête, mais je me la suis posé il y a des années. Et personne n’avait écrit un article pour expliquer ça. Personne. C’était tellement évident.

Cet article est pour toi, étudiant en info, commercial dans une boîte IT ou juste curieux qui trouve que l’article Wikipedia ne veut rien dire.

Ce que c’est

Javascript est un langage de programmation, c’est une forme de code qui permet, quand on sait l’écrire, de dicter à l’ordinateur quoi faire.

Le code Javascript ressemble à ça :

setTimeout(function(){
    if (truc == machin) {
        alert('Bidule !')
    }
}, 100)

C’est du texte. Juste du texte. Comme une autre langue.

On trouve la majorité du code Javascript dans des pages Web, même si vous ne le voyez pas s’afficher. En effet, c’est le seul langage qui permette de dicter à un navigateur Web (Internet Explorer, Firefox, Chrome…) ce qu’il doit faire sans rien installer. La grande majorité des navigateurs Web “parlent” le Javascript.

Ce qu’on peut faire avec

La plupart du code Javascript se trouve dans des pages Web, et sert donc à dire comme la page Web doit réagir. Cela marche ainsi :

  1. L’utilisateur clique sur un lien ou entre une adresse.
  2. Son navigateur charge la page Web. Il voit le texte, les couleurs, les images.
  3. Si la page Web contient du code Javascript, le navigateur lit le code Javascript et suit les instructions du code.

Généralement le code Javascript dans une page Web sert à :

  • Faire bouger, apparaitre ou disparaitre des éléments de la page (un titre, un menu, un paragraphe, une image…).
  • Mettre à jour des éléments de la page sans recharger la page (changer le texte, recalculer un nombre, etc).
  • Demander au serveur un nouveau bout de page et l’insérer dans la page en cours, sans la recharger.
  • Attendre que l’utilisateur face quelque chose (cliquer, taper au clavier, bouger la souris…) et réagir (faire une des opérations ci-dessus suite à cette action).

Le code Javascript sert donc à donner du dynamisme à la page. Sans lui, la page ressemble à une page de livre, un peu animée (grâce à un autre langage appelé le CSS), mais qui ne change pas beaucoup.

Par exemple, voici quelques fonctionnalités que l’on peut voir dans une page Web qui impliquent Javascript :

Cela ne veut pas dire qu’on ne pourrait pas avoir ces fonctionnalités avec autre chose que Javascript, mais dans notre cas, elles ont été produites avec Javascript.

Certains sites Web ne pourrait tout simplement pas fonctionner sans Javascript. C’est le cas de Facebook, Youtube ou Twitter qui utilisent le langage pour presque tout leur affichage. La page de recherche de Google, en revanche, peut fonctionner sans Javascript.

Voilà par exemple deux pages similaires. L’une avec Javascript (cliquez sur le texte pour voir l’effet) :

Et l’autre sans (cliquez, il ne se passe rien):

Quelques subtilités

Le code Javascript est lu et exécuté sur le navigateur Web, donc sur l’ordinateur de l’internaute.

C’est ce qu’on appelle du code “côté client”. Et il ne peut pas interagir directement avec le code “côté serveur” (celui qui a produit la page Web); et donc on ne peut pas communiquer directement entre le Javascript côté client et PHP côté serveur par exemple.

Comme l’internaute a le contrôle de sa machine, il peut choisir de désactiver le support de Javascript sur son navigateur. Dans ce cas, ce dernier ignorera le code Javascript et fera comme si il n’était pas là. Il verra la page, mais tous les éléments qui fonctionnent avec Javascript ne marcheront pas.

Les pages Web sont aussi parcourues par des navigateurs qui ne supportent pas Javascript, et par des robots qui ne sont pas des navigateurs Web. De nombreux moteur de recherche (comme Google, DuckDuckGo ou Bing) ont en effet de tels robots pour lister toutes les pages Web, et souvent leurs robots ignorent Javascript.

Javascript, quand il est dans le navigateur Web, a aussi cette particularité d’être un langage limité à ce que le navigateur lui laisse faire. C’est ce qui le rend assez sécurisé. Mais chaque navigateur a ses particularités et comprend parfois le Javascript différemment. De plus, l’exécution du code Javascript a pendant longtemps été quelque chose de lent.

Cela a rendu le langage impopulaire, il été évité pour sa difficulté d’utilisation, ses limites importantes et ses performances basses.

Javascript moderne

Aujourd’hui le langage Javascript est massivement utilisé sur tous les sites Web grand public. Des outils, tel que jQuery, on été développés pour faciliter son utilisation et les navigateurs sont devenus beaucoup plus efficaces dans son traitement.

La popularité grandissante dans les années 2000 d’un outil appelé AJAX, qui permet à Javascript de mettre à jour une page sans la recharger, a propulsé le langage sur le devant de la scène. L’utilisation d’AJAX rendant, si il elle est bien faite, la consultation du site plus rapide et fluide, on l’a rapidement retrouvé sur tous les sites les plus fréquentés.

La conséquence est qu’il est aujourd’hui impossible de se dire sérieusement développeur Web si l’on n’est pas capable d’écrire un minimum de code Javascript. Si vous voulez développer des sites Web, vous devez apprendre au moins les bases de Javascript. Si vous recrutez un développeur Web, assurez vous qu’il les connaisse.

Javascript permet aujourd’hui, avec le support d’autres technologies (Flash, HTML5, canvas, CSS3, WebGL…), de faire des choses très évoluées comme de la 3D, de la manipulation d’images, de sons et de videos. Bientôt, avec des innovations comme WebRTC, Javascript permettra de faire du Peer-to-peer et de la vision conférence à l’intérieur du navigateur Web :

Si vous voyez un jeu vidéo ou un film dans une page Web, un code Javascript est impliqué quelque part. Le langage a quitté depuis longtemps son statut de technologie “jouet” et est actuellement l’un de ceux qui possèdent le plus de potentiel d’évolution.

Des innovations importantes sont à attendre du côté de Javascript avec la maturation d’outils tels que MeteorJs qui permettent de coder, en Javascript, la génération des pages côté serveur ET le code client des navigateurs, tout en les faisant interagir automatiquement. Si cette phrase ne veut rien dire pour vous, dites vous seulement que c’est le seul langage à tenir cette promesse actuellement.

Javascript, en dehors d’un navigateur Web

Avec l’amélioration des performances de Javascript, le langage a été de plus en plus utilisé en dehors du navigateur Web. On le retrouve aujourd’hui un peu partout :

  • Sur les serveurs, l’exemple le plus célèbre étant NodeJS, un outil qui permet de générer les pages Web avant de les envoyer au navigateur.
  • Sur les interfaces des ordinateurs, il permet d’afficher des fenêtres et des boutons (Scripting QT, Gnome Shell).
  • Sur les téléphones, pour le moment sur FirefoxOS et PhoneGap, il permet d’écrire des applications.

Frameworks Javascript

Javascript est né en tant que technologie minimaliste. Le langage est puissant, mais ne fait pas grand chose de lui-même. Avec sa professionalisation sont apparus ce que l’on appelle des frameworks, c’est à dire des collections de code qui rendent le développement en Javascript plus rapide, plus facile et plus puissant.

Sur le navigateur, le plus connu et utilisé est sans aucun doute jQuery. Il est aussi celui que nous préférons utiliser chez Sam et Max, et il n’existe presque plus de raison de ne pas l’utiliser aujourd’hui. Par défaut, si rien d’évident ne s’oppose fortement à inclure jQuery, nous recommandons toujours de l’ajouter d’office à la première lettre du code Javascript tapée sur un projet Web.

Si vous ne savez pas utiliser jQuery mais devez programmer du Javascript pour une page Web, commencez par apprendre à utiliser jQuery. Coder en Javascript à la main de nos jours, c’est comme moudre sa farine soi-même, c’est instructif, mais pas très productif.

Il existe tout de même d’autres frameworks : Mootools, Prototype.js, YahooUI… Ceux qui existent encore actuellement sont ceux qui ont survécu à l’effet mode, et ce sont tous des outils aujourd’hui solides.

Ensuite il y a des bibliothèque spécialisées dans des problématiques telles que le routing, la manipulation de modèles, le templating, etc. Encore une fois, si ces termes ne vous parlent pas, c’est que vous n’avez pas encore besoin de ces bibliothèques. On retrouve dans le lot backbone.js, spine.js, mustache.js et bien d’autres.

Des frameworks hybrides couvrant de nombreuses problématiques à la fois sont arrivés ces dernières années, notamment knockout.js de Microsoft et AngularJS de Google qui sont encore très jeunes mais qui méritent d’être suivis de prêt.

Les mauvais côtés de Javascript

Malgré ma lucidité concernant l’importance grandissante de Javascript, j’aimerais partager avec vous des choses que les enthousiastes ne vous disent pas.

D’abord, c’est un langage extrêmement laid. Ça va vous sembler futile, mais ça se traduit par un temps d’apprentissage du langage plus élevé. Un temps de relecture BEAUCOUP plus élevé (et on lit le code des centaines de fois par jour). Un temps de debuggage plus long également. Et des erreurs plus nombreuses car le JS est très permissif. Bref, c’est un langage très improductif si on le compare à Ruby, Python ou même à PHP.

Pour donner une idée de la chose, voici un code Javascript que peut produire un débutant pour écrire la fameuse chanson 99 bottle of beers:

for (var i = 99 ; i > 0 ; i--) {

  j = i - 1;

  if (i != 1) { 
    icase = "bottles"; 
  } else { 
    icase = "bottle";
  }

  if (j != 1) {
    jcase = "bottles";
  } else {
    jcase = "bottle";
  }

  console.log(i + " " + icase + " of beer on the wall,");
  console.log(i + " " + icase + " of beer,");
  console.log("Take 1 down, pass it around,");

  if (j != 0) {
    console.log(j + " " + jcase + " of beer on the wall.");
  } else {
    console.log("No more bottles of beer on the wall!");
  }
  
  console.log()
}

Et voici l’équivalent (littéral) en Python :

for i in xrange(99, 0, -1):

    j = i - 1

    if i != 1:
        icase = "bottles"
    else:
        icase = "bottle"

    if j != 1:
        jcase = "bottles"
    else:
        jcase = "bottle"

    print "%s %s of beer on the wall" % (i, icase)
    print "%s %s of beer," % (i, icase)
    print "Take 1 down, pass it around,"

    if j:
        print "%s %s of beer on the wall." % (j, jcase)
    else:
        print "No more bottles of beer on the wall!"
    
    print

En plus d’être plus plus d’être plus long de 50 caractères, le code Javascript comporte deux bugs potentiels : les variables non déclarées fonctionnent, mais sont partagées avec tout le reste du code. Le console.log va lui aussi fonctionner sur un serveur et sur certains navigateurs, mais fera planter d’autres navigateurs qui n’ont pas accès à cet objet. On peut le remplacer par document.writeln mais alors le code ne marchera pas sur un serveur.

Les prérequis pour coder un simple bout de code Javascript sans erreur sont plus élevés, la vigilance demandée est plus grande.

Ensuite, il est difficile de trouver de bons développeurs Javascript. Les profils les plus courants sont des designers forcés à faire un peu de JS, ou des codeurs PHP qui de temps en temps insèrent du JS dans leurs pages. Les spécialistes Javascript sont rares, chers et pas faciles à embaucher.

D’ailleurs, pour former quelqu’un ou se former à Javascript, les ressources sont spartiates. Je ne parle pas des milliers de scripts tout fait prêts à être utilisés. Ça il y en a plein. Je parle de cours pour devenir un codeur sérieux, et sortir de la relation d’amateurisme que la majorité des développeurs Web ont avec Javascript.

Côté navigateur, le Javascript est mûr. En revanche, en dehors du navigateur, c’est une technologie qui est encore dans son enfance. Oui, je parierai cher qu’il va devenir très dominant dans les prochaines années. Mais en attendant, ceux qui s’y mettent maintenant vont payer les pots cassés : libs pas testées, mal documentées, incompatibles, maintenues avec des baguettes… quand elles existent.

Rien qu’installer de quoi coder en Javascript sur sa machine est une plaie : sous Linux et Mac, Ruby et Python sont installés par défaut. Javascript demande des étapes en plus. Sous Windows, c’est le parcours du combattant.

En clair : mettre trop de billes dans Javascript coûte cher, et c’est pour cela que je m’en tiens à développer avec sur des pages Web qui est son habitat naturel puisqu’il n’y a besoin de rien installer. C’est la raison de sa popularité initiale, et on est en train de faire exactement l’inverse en forçant son portage partout ailleurs.

Javascript n’est pas adapté à tout, et en ce moment, on veut le mettre à toutes les sauces. C’est à mon sens préjudiciable, très fortement influencé par un effet de mode, et met de côté d’excellents autres langages qui seraient beaucoup plus adaptés. Aussi, si vous devez faire de la programmation serveur ou d’interface graphique, je vous recommande plutôt Ruby ou Python, avec une préférence pour ce dernier somme toute biaisée par l’usage intensif qu’on en fait.

En prime ils vous rendront service pour le scripting, les traitements et l’analyse de données, le prototypage, et plein d’autres situations auxquelles vous n’aviez pas pensé. Ce sont des langages créés à l’origine pour être généralistes, pas adaptés durant les dernières années parce qu’ils ont le vent en poupe (Python est plus vieux que Java…).

Cela ne vous dispense pas de capitaliser sur des talents en Javascript en plus de ceux existant. Cela risque d’être plus qu’utile pour le futur.

]]>
http://sametmax.com/quest-ce-que-javascript-et-a-quoi-ca-sert/feed/ 39 5619