| \n\tInitiation \u00e0 la pens\u00e9e computationnelle avec JavaScript | \n|
|---|---|
| Module: Concepts de base de JavaScript \u25ac\u25b6 | \n|
| \u25c0\u25ac\u25ac\u25b6 | \n|
| \u2690 \u00e0 finaliser | \n\u2638 | \n
| \u2692 2020/09/26 | \n\n |
| Cat\u00e9gorie: JavaScript |
Introduction[modifier | modifier code]
\n![](\"/fr/Fichier:Unofficial_JavaScript_logo.svg\"){kind=logo}
JavaScript, souvent abr\u00e9g\u00e9 en JS, est un langage de script tr\u00e8s utilis\u00e9, surtout au niveau des pages/applications web. Cette page propose une description des diff\u00e9rents aspects de JavaScript d\u2019un point de vue plut\u00f4t th\u00e9orique et conceptuel, sans entrer dans les d\u00e9tails du codage. Pour une approche plus concr\u00e8te, bas\u00e9e directement sur les caract\u00e9ristiques du langage, voir :\n
\n- Tutoriel JavaScript de base pour un aper\u00e7u global de la syntaxe ; \n
- Computation avec JavaScript pour l'explication d'exemples sur le fonctionnement du langage ; \n
- Tutoriel JavaScript c\u00f4t\u00e9 client pour l'utilisation de JavaScript dans les pages web ; \n
- Interactivit\u00e9 avec JavaScript pour l'explication d'exemples d'applications/pages web.
Pour d'autres ressources plus en g\u00e9n\u00e9ral :\n
\n- Initiation \u00e0 la pens\u00e9e computationnelle avec JavaScript \n
- Review de ressources pour d\u00e9buter JavaScript pour une liste faite principalement par les \u00e9tudiants du cours STIC I \n
- Liens JavaScript \n
- Les autres pages de la cat\u00e9gorie JavaScript
D\u00e9finition formelle[modifier | modifier code]
\n\u00ab JavaScript est un langage de script, multi-plateforme et orient\u00e9 objet \u00bb (Mozilla Developer Network, 2015). Cette br\u00e8ve d\u00e9finition, qui ne sera pas tr\u00e8s explicative pour un n\u00e9ophyte, permet par contre de synth\u00e9tiser les points forts d\u2019un langage souvent sous-estim\u00e9, mal compris et surtout mal utilis\u00e9 (Crockford, 2008; Simpson, 2015). Longtemps consid\u00e9r\u00e9 comme un pseudo-langage dont l\u2019utilit\u00e9 \u00e9tait limit\u00e9e \u00e0 quelques fonctionnalit\u00e9s de base pour les pages web (surtout pour les formulaires web), JavaScript est en r\u00e9alit\u00e9 un langage tr\u00e8s puissant, avec un cadre d\u2019utilisation tr\u00e8s large.\n
\nD\u00e9finition informelle[modifier | modifier code]
\nDans la plupart des cas, lorsqu'on se r\u00e9f\u00e8re \u00e0 JavaScript, on consid\u00e8re ce qu'il faudrait plus correctement appeler JavaScript c\u00f4t\u00e9 client, ou, de mani\u00e8re encore plus pr\u00e9cise, JavaScript plus les Web (ou Browser) API (acronyme d'Application Programming Interface en anglais). En effet, la plupart des personnes - d\u00e9veloppeurs et non - qui s'approchent \u00e0 JavaScript le font \u00e0 travers l'ajoute de comportements dynamiques ou interactifs \u00e0 une page web. Concr\u00e8tement, ceci se traduit par la possibilit\u00e9 de modifier les pages web une fois qu'elles ont \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9es dans le navigateur de l'utilisateur.\n
Depuis quelques ann\u00e9es, cependant, JavaScript est utilis\u00e9 \u00e9galement dans d'autres contextes, par exemple dans le d\u00e9veloppement c\u00f4t\u00e9 serveur avec Node.js, dans les objets connect\u00e9s, ou dans le d\u00e9veloppement de logiciels desktop. Cet article illustre bri\u00e8vement les principaux cadres d'utilisation.\n
\nHistoire de JavaScript[modifier | modifier code]
\nJavaScript a \u00e9t\u00e9 cr\u00e9\u00e9 en 1995 par Brendan Eich qui travaillait \u00e0 l\u2019\u00e9poque pour Netscape. Le langage (\u00e9galement connu au d\u00e9but avec les noms de Mocha ou LiveScript) a ensuite int\u00e9gr\u00e9 les standards ECMA pour favoriser la diffusion et l'utilisation. Formellement, donc, le nom du langage est ECMAScript et ses sp\u00e9cifications sont \u00e9tablies par le groupe TC39. Ce groupe s'occupe de d\u00e9finir les propri\u00e9t\u00e9s d'un langage de scripting, et JavaScript est un langage qui impl\u00e9mente ces propri\u00e9t\u00e9s.\n
Dans la plupart des cas, cependant, on ne fait pas cette distinction technique et on utilise tout simplement le terme JavaScript de mani\u00e8re omnicompr\u00e9hensive. Ce nom cr\u00e9e parfois de la confusion avec un autre langage de programmation tr\u00e8s connu : Java. Toutefois, malgr\u00e9 le fait que les deux langages partagent certaines similitudes, JavaScript et Java sont deux langages diff\u00e9rents !\n
L\u2019histoire de JavaScript est longue et compliqu\u00e9e (voir une br\u00e8ve histoire sur le site W3C). De mani\u00e8re tr\u00e8s sch\u00e9matique, on peut s\u00e9parer l\u2019histoire de JavaScript en deux p\u00e9riodes :\n
\n- Avant le Web 2.0 : langage peu et mal utilis\u00e9, consid\u00e9r\u00e9 comme un pseudo-langage \u00e0 \u00e9viter pour les d\u00e9veloppeurs \u00ab s\u00e9rieux \u00bb ; \n
- Apr\u00e8s le Web 2.0 : boom du langage qui est utilis\u00e9 pour ajouter des fonctionnalit\u00e9s interactives aux pages web, gr\u00e2ce notamment \u00e0 son int\u00e9gration avec HTML5.
Depuis 2010-2015, il y a \u00e9galement une tendance pour utiliser JavaScript en dehors des pages web, notamment dans le d\u00e9veloppement c\u00f4t\u00e9-serveur ou dans le d\u00e9veloppement d\u2019application desktop et mobile. Cette tendance est bien synth\u00e9tis\u00e9e par la loi de Atwood: \u00ab any application that can be written in JavaScript, will eventually be written in JavaScript \u00bb.\n
\nVersions de JavaScript[modifier | modifier code]
\nL'histoire compliqu\u00e9e de JavaScript se refl\u00e8te \u00e9galement dans les noms de ses versions. En effet, comme tout langage de programmation, JavaScript a \u00e9volu\u00e9 dans le temps et des changements ont \u00e9t\u00e9 apport\u00e9s aux propri\u00e9t\u00e9s de l'impl\u00e9mentation ECMAScript. Voici un tableau r\u00e9capitulatif des changements jusqu'en 2018 :\n
\n| Nom officiel\n | \nAbr\u00e9viation | \nNom non officiel | \nDate\n |
|---|---|---|---|
| ECMAScript 1\n | \nES1 | \n- | \n1997\n |
| ECMAScript 2\n | \nES2\n | \n- | \n1998\n |
| ECMAScript 3\n | \nES3 | \n- | \n1999\n |
| ECMAScript 4\n | \n-\n | \n-\n | \nVersion abandonn\u00e9e et jamais impl\u00e9ment\u00e9e\n |
| ECMAScript 5\n | \nES5\n | \n-\n | \n2009\n |
| ECMAScript 6\n | \nES6\n | \nES2015\n | \n2015\n |
| ECMAScript 7\n | \nES7\n | \nES2016\n | \n2016\n |
\u00c0 partir de 2015, il y a le souhait de rel\u00e2cher des nouvelles versions de mani\u00e8re plus fr\u00e9quente, par exemple une fois par ann\u00e9e. Il faut n\u00e9anmoins tenir compte qu'une nouvelle version du langage n\u00e9cessite \u00e9galement d'une version de l'interpr\u00e8te qui puisse comprendre les nouveaut\u00e9s du langage. Ceci est l'une des sources d'incompatibilit\u00e9 les plus r\u00e9pandues, surtout dans les pages web qui n\u00e9cessitent d'une version du navigateur r\u00e9cent pour pouvoir \u00eatre interpr\u00e9t\u00e9e correctement.\n
\nComprendre JavaScript[modifier | modifier code]
\n![](\"/fr/Fichier:JavaScript_trois_niveau_js.png\")
Une des pratiques pour initier les n\u00e9ophytes \u00e0 JavaScript consiste \u00e0 montrer un exemple de bo\u00eete d\u2019alerte qui s\u2019affiche \u00e0 l\u2019int\u00e9rieur du navigateur web avec un \u00ab Hello world \u00bb. Voici le r\u00e9sultat en image et le code pour l\u2019obtenir :\n
\n![](\"/fr/Fichier:JavaScript_exemple_alert.png\")
alert(\"Hello World en JavaScript\");\n\n
Cet exemple, sans doute utilis\u00e9 pour sa simplicit\u00e9 d\u2019une part, et probablement pour l\u2019excitation qu\u2019il est cens\u00e9 transmettre aux n\u00e9ophytes par le fait qu\u2019il se passe quelque chose \u00e0 l\u2019\u00e9cran; n\u2019est cependant pas tr\u00e8s repr\u00e9sentatif des bases du langage. En effet, JavaScript s\u2019articule sur trois niveaux emboit\u00e9s. De l\u2019int\u00e9rieur \u00e0 l\u2019ext\u00e9rieur, on trouve :\n
\n- Les fondamentaux du langage \n
- L\u2019environnement \n
- Le code source
Les fondamentaux du langage[modifier | modifier code]
\nLe premier niveau concerne les \u00e9l\u00e9ments fondamentaux et constitutifs du langage lui-m\u00eame. Comme tout langage de programmation, on retrouve \u00e0 ce stade des aspects li\u00e9s \u00e0 la syntaxe, aux \u00e9l\u00e9ments n\u00e9cessaires pour la construction d\u2019algorithmes, etc. (voir Introduction \u00e0 la programmation pour un aper\u00e7u de ces \u00e9l\u00e9ments). Les \u00e9l\u00e9ments disponibles \u00e0 ce niveau sont accessibles \u00e0 tout moment et dans n\u2019importe quel cadre d\u2019utilisation de JavaScript.\n
\n- Voir Tutoriel JavaScript de base pour un aper\u00e7u des fondamentaux du langage
L\u2019environnement[modifier | modifier code]
\n![](\"/fr/Fichier:JS-environments.png\")
Le deuxi\u00e8me niveau concerne l\u2019environnement dans lequel JavaScript est ex\u00e9cut\u00e9, c'est-\u00e0-dire o\u00f9 se trouve \"physiquement\" l'interpr\u00e8te qui lit et compute les scripts, car selon le type d\u2019environnement, le langage a acc\u00e8s \u00e0 diff\u00e9rents \u00e9l\u00e9ments et fonctionnalit\u00e9s. C\u2019est \u00e0 ce stade que se fait la distinction entre JavaScript \u00ab c\u00f4t\u00e9-client \u00bb, \u00ab c\u00f4t\u00e9-serveur \u00bb et d\u2019autres types d\u2019utilisation.\n
Les fronti\u00e8res entre les environnements deviennent de moins en moins d\u00e9finies car on a plut\u00f4t la tendance \u00e0 int\u00e9grer plusieurs environnements m\u00eame pour une seule application. N\u00e9anmoins, il est important de comprendre o\u00f9 se passe la computation en termes de input et output. Prenons la configuration la plus r\u00e9pandue dans le d\u00e9veloppement web qui consiste dans l'architecture client-serveur : un client fait une requ\u00eate au serveur ; le serveur envoie la r\u00e9ponse au client. Nous pouvons d\u00e9composer ce m\u00e9canisme en diff\u00e9rentes \u00e9tapes et pour chaque \u00e9tape d\u00e9finir l'input, l'output et la fonction F(X) = Y.\n
| \u00c9tape\n | \nEnvironnement\n | \nInput\n | \nOutput\n | \nF(X) = Y\n |
|---|---|---|---|---|
| #1\n | \nClient\n | \nURL\n | \nRequ\u00eate HTTP\n | \nL'utilisateur saisit ou clique sur un lien qui pointe vers un URL sp\u00e9cifique, par exemple https://edutechwiki.unige.ch. Le navigateur compute donc une requ\u00eate vers cet URL.\n |
| #2\n | \nServeur\n | \nRequ\u00eate HTTP\n | \nR\u00e9ponse\n text/html\n \n | \nLe serveur qui est li\u00e9 \u00e0 cet URL re\u00e7oit la r\u00e9ponse HTTP et compute la r\u00e9ponse. Dans ce cas, il s'agit d'une \"simple\" page HTML, mais on aurait pu avoir une computation plus complexe, avec la r\u00e9cup\u00e9ration d'informations depuis une base de donn\u00e9es, un m\u00e9canisme d'authentification de l'utilisateur, etc.\n |
| #3\n | \nClient\n | \nR\u00e9ponse text/html\n | \nAffichage de la page\n | \nLorsque le navigateur re\u00e7oit la r\u00e9ponse, il doit computer le code HTML de la page et faire toutes les op\u00e9rations n\u00e9cessaires pour afficher le r\u00e9sultat dans la fen\u00eatre du navigateur. Si cette page poss\u00e8de du code JavaScript, alors le navigateur doit \u00e9galement computer le code qui vient avec la page.\n |
L'environnement d\u00e9termine donc principalement o\u00f9 se passe la computation en termes d'input et output. Selon le type d'environnement, le code source peut donc acc\u00e9der \u00e0 des inputs ou outputs diff\u00e9rents. Dans la suite du paragraphe, nous proposons une br\u00e8ve illustration des environnements principaux dans lesquels du code JavaScript peut \u00eatre ex\u00e9cut\u00e9/comput\u00e9. \n
\nJavaScript \u00ab c\u00f4t\u00e9-client \u00bb[modifier | modifier code]
\nL\u2019ex\u00e9cution du code se fait directement sur l\u2019ordinateur de l\u2019utilisateur, plus sp\u00e9cifiquement \u00e0 l\u2019int\u00e9rieur du navigateur web. Le langage de base est impl\u00e9ment\u00e9 par des \u00e9l\u00e9ments qui permettent d\u2019acc\u00e9der \u00e0 certains aspects du navigateur, notamment au niveau de la fen\u00eatre qui contient la page visualis\u00e9e. \n
La cr\u00e9ation de la bo\u00eete d\u2019alerte utilis\u00e9e dans l\u2019exemple au d\u00e9but de cette page se situe exactement \u00e0 ce niveau : la bo\u00eete n\u2019est pas un \u00e9l\u00e9ment fondamental du langage, mais est un \u00e9l\u00e9ment du navigateur web auquel JavaScript a acc\u00e8s gr\u00e2ce \u00e0 une sorte d'\u00ab extension \u00bb du langage de base. De mani\u00e8re plus technique, JavaScript peut acc\u00e9der \u00e0 l\u2019objet window du navigateur qui poss\u00e8de une m\u00e9thode (fonction) nomm\u00e9e alert et qui permet d\u2019afficher un message sous forme de bo\u00eete. \n
L'environnement de JavaScript c\u00f4t\u00e9-client est repr\u00e9sent\u00e9 par ce qu'on appelle les Web API (ou Browser API ou encore Client-Side API) qui permettent justement d'avoir acc\u00e8s et manipuler diff\u00e9rents types d'informations disponibles gr\u00e2ce \u00e0 l'interm\u00e9diaire du navigateur web. Parmi les Web API figurent :\n
\n- DOM API\n
- Manipulation du Document Object Model qui permet de modifier dynamiquement le contenu de la page affich\u00e9e dans le navigateur ;
\n - Audio et Video API \n
- Contr\u00f4le sur les \u00e9l\u00e9ments audio et vid\u00e9o pr\u00e9sent dans la page.
\n - Graphique API\n \n
- AJAX\n
- Possibilit\u00e9 de r\u00e9cup\u00e9rer des informations depuis d'autres pages (i.e. envoyer d'autres requ\u00eates HTTP), sans mettre \u00e0 jour la page actuelle.
\n - API du dispositif\n
- Acc\u00e8s \u00e0 des informations sur le navigateur, et par extensions sur le dispositif lui-m\u00eame. Possibilit\u00e9 d'utiliser la g\u00e9olocalisation du dispositif, d'envoyer des notifications, etc.
\n - API de Stockage\n
- Possibilit\u00e9 de sauvegarder et r\u00e9cup\u00e9rer des informations directement dans le navigateur de l'utilisateur de mani\u00e8re plus avanc\u00e9e par rapport aux simples cookies.
\n - Third party API\n
- Possibilit\u00e9 d'\u00e9changer, souvent avec AJAX, des informations avec des services tiers comme Google Maps, Twitter, etc. \u00c0 noter que certains Third party API n\u00e9cessite de requ\u00eate c\u00f4t\u00e9-server pour des raisons de s\u00e9curit\u00e9 (voir Node.js plus bas).
Cette liste est bas\u00e9e sur APIs web utilis\u00e9es c\u00f4t\u00e9 client, MDN web docs, f\u00e9vrier 2018.\n
\nJavaScript \u00ab c\u00f4t\u00e9-serveur \u00bb[modifier | modifier code]
\nL\u2019ex\u00e9cution du code se fait directement sur le serveur, c\u2019est-\u00e0-dire sur l\u2019ordinateur qui re\u00e7oit les requ\u00eates (e.g. une requ\u00eate http pour une page web). Le langage de base est impl\u00e9ment\u00e9 par des \u00e9l\u00e9ments qui permettent d\u2019acc\u00e9der \u00e0 certaines fonctionnalit\u00e9s utiles pour fournir un service aux utilisateurs qui ont lanc\u00e9 la requ\u00eate, par exemple la recherche dans une base de donn\u00e9es, l\u2019envoi d\u2019email, etc. \n
Pour que JavaScript puisse \u00eatre utilis\u00e9 sur un serveur, en consid\u00e9ration du fait qu'il s'agit d'un langage interpr\u00e9t\u00e9, il faut justement que le serveur ait install\u00e9 un interpr\u00e8te/moteur. \u00c0 pr\u00e9sent, le plus utilis\u00e9 \u00e0 ce propos est Node.js qui est expliqu\u00e9 plus en d\u00e9tail plus bas dans la page.\n
\nAutres environnements[modifier | modifier code]
\nLe m\u00eame principe s\u2019adapte \u00e0 tout autre environnement. Par exemple, lors de l\u2019utilisation de JavaScript pour d\u00e9velopper des applications mobiles, le langage fondamental sera impl\u00e9ment\u00e9 par des \u00e9l\u00e9ments propres au smartphone (e.g. orientation, microphone, GPS, etc.). Dans les objets connect\u00e9s, le langage de base pourra exploiter des \u00e9l\u00e9ments comme les senseurs et les capteurs, ou les actuateurs (e.g. des LED, les bras/jambes d'un robot, ...). \n
Voici quelques exemples d\u2019utilisation de JavaScript dans d\u2019autres environnements :\n
\n- D\u00e9veloppement d\u2019application Desktop cross-plateforme, voir Electron \n
- D\u00e9veloppement d\u2019application mobile, voir Adobe PhoneGap \n
- Internet des objets avec JavaScript
Le code source[modifier | modifier code]
\nLe troisi\u00e8me niveau concerne le code source, c\u2019est-\u00e0-dire le code \u00e9crit par le(s) d\u00e9veloppeur(s) et qui repr\u00e9sente l\u2019application (i.e. le programme \u2013 ce qu\u2019on peut/veut faire avec l\u2019ensemble des instructions). Le code source se compose du m\u00e9lange entre \u00e9l\u00e9ments fondamentaux et \u00e9l\u00e9ments disponibles dans l\u2019environnement. Par cons\u00e9quent, il faut conna\u00eetre \u00e0 la fois les \u00e9l\u00e9ments de base de JavaScript, mais \u00e9galement l\u2019environnement dans lequel le code source va \u00eatre ex\u00e9cut\u00e9. \nVoici un premier exemple de combinaison tr\u00e8s simple de code source pour obtenir un r\u00e9sultat similaire \u00e0 la bo\u00eete d\u2019alerte de l\u2019exemple de d\u00e9part, c\u2019est-\u00e0-dire dans l\u2019environnement c\u00f4t\u00e9-client du navigateur web (la seule chose qu\u2019il faut conna\u00eetre \u00e0 propos du code \u00e0 ce stade concerne l\u2019utilisation des commentaires avec la notation //Ceci est un commentaire, pas une instruction). \n
//1.Utilisation du langage fondamental\nvar message = 'hello world';\n//2. Utilisation du langage fondamental\nvar shout = message.toUpperCase();\n//3. Utilisation de l'environnement\nwindow.alert(shout);\nVoici une br\u00e8ve explication des trois lignes de code :\n
\n- Utilisation du langage fondamental pour associer \u00e0 une variable nomm\u00e9e 'message' la suite de caract\u00e8res (string) 'hello world'; \n
- Utilisation du langage fondamental pour associer \u00e0 la variable nomm\u00e9e 'shout' la transformation de 'hello world' en 'HELLO WORLD' gr\u00e2ce \u00e0 la m\u00e9thode toUpperCase() associable \u00e0 une suite de caract\u00e8res (i.e. objet string). \n
- Utilisation de l'environnement pour afficher 'HELLO WORLD' dans une boite d'alerte disponible dans le navigateur web de l'utilisateur gr\u00e2ce \u00e0 la m\u00e9thode alert() associable \u00e0 la fen\u00eatre (i.e. objet window) du navigateur.
Cadre d\u2019utilisation de JavaScript[modifier | modifier code]
\nLe cadre d\u2019utilisation de JavaScript d\u00e9pend de l\u2019environnement dans lequel il est ex\u00e9cut\u00e9, et \u00e0 l\u2019int\u00e9rieur de ces environnements, les possibilit\u00e9s d\u2019utilisation de JavaScript sont potentiellement infinies. Voici une liste non exhaustive des utilisations les plus fr\u00e9quentes : \n
\nJavaScript : utilisation de base avec HTML[modifier | modifier code]
\nL\u2019utilisation la plus r\u00e9pandue de JavaScript \u00ab c\u00f4t\u00e9-client \u00bb concerne le d\u00e9veloppement de pages web dynamiques qui r\u00e9agissent \u00e0 certains \u00e9v\u00e9nements. Par exemple, JavaScript permet de :\n
\n- Interagir avec la structure d\u2019une page web (i.e. le Document Object Model, ou DOM) pour changer dynamiquement le contenu affich\u00e9 dans le navigateur en fonction notamment des actions de l\u2019utilisateur (e.g. cliquer sur un bouton) \n
- Cr\u00e9er des formulaires web qui affichent des feedbacks et/ou messages d\u2019erreurs avant d\u2019envoyer le contenu du formulaire ; \n
- Cr\u00e9er des animations qui facilitent la pr\u00e9sentation d\u2019informations telles que des carrousels d\u2019images, des fen\u00eatres modales (qui ont remplac\u00e9 le pop-up), \u00ab tabs \u00bb, etc. \n
- Faciliter la navigation \u00e0 travers des menus d\u00e9roulants, des effets de scroll de la page pour les ancrages internes, etc.
Cette utilisation de JavaScript a \u00e9t\u00e9 identifi\u00e9e par le pass\u00e9 (ann\u00e9es 1990) avec l'acronyme DHTML, c'est-\u00e0-dire Dynamic HTML. Ce terme n'est plus r\u00e9pandu \u00e0 pr\u00e9sent, mais le concept reste le m\u00eame.\n
\nJavaScript et HTML5 : utilisation avanc\u00e9e[modifier | modifier code]
\n![](\"/fr/Fichier:JavaScript_as_a_controller.png\")
HTML5 introduit des \u00e9l\u00e9ments (i.e. balises) dans le langage et propose des API (Application Programming Interface) qui sont express\u00e9ment con\u00e7us pour JavaScript. HTML5 n\u2019a pas tout simplement introduit une nouvelle fa\u00e7on de coder le contenu des pages web ; il a introduit un \u00e9cosyst\u00e8me qui se compose de plusieurs \u00e9l\u00e9ments \u00e0 diff\u00e9rents niveaux. \n
La structure d\u2019une page/application web n\u2019a plus vraiment la forme de trois ensembles qui se recouvrent seulement partiellement : contenu (HTML), forme (CSS), et comportements (JavaScript). On est plut\u00f4t dans une perspective d\u2019int\u00e9gration totale, dans laquelle JavaScript peut assumer le r\u00f4le de contr\u00f4leur qui g\u00e9n\u00e8re et/ou transforme le contenu, mais qui impl\u00e9mente \u00e9galement d\u2019autres aspects interactifs :\n
\n- Cr\u00e9ation et animation d\u2019\u00e9l\u00e9ments graphiques \u00e0 travers l\u2019\u00e9l\u00e9ment canvas ou SVG ; \n
- Interaction avec \u00e9l\u00e9ments multim\u00e9dia : audio et vid\u00e9o pr\u00e9sent sur internet, mais \u00e9galement micro et webcam de l\u2019utilisateur ; \n
- G\u00e9olocalisation, messages en temps r\u00e9el, \u2026
Biblioth\u00e8ques JavaScript[modifier | modifier code]
\nLes d\u00e9veloppeurs JavaScript disposent \u00e0 pr\u00e9sent de plusieurs biblioth\u00e8ques qui mettent \u00e0 disposition des fonctionnalit\u00e9s plus ou moins sp\u00e9cifiques, ou qui les aident \u00e0 acc\u00e9l\u00e9rer le codage gr\u00e2ce \u00e0 des notations plus simples. Un autre avantage des biblioth\u00e8ques JavaScript concerne la compatibilit\u00e9 entre diff\u00e9rents navigateurs.\n
\n- Voir Biblioth\u00e8ques JavaScript \n
- jQuery, qui est une des biblioth\u00e8ques les plus utilis\u00e9es \n
- Vue.js pour quelques \u00e9l\u00e9ments de programmation appliqu\u00e9s au niveau interm\u00e9diaire
JavaScript Object Notation (JSON)[modifier | modifier code]
\nLe JavaScript Object Notation (JSON) est un format qui exploite la syntaxe des objets en JavaScript (voir Tutoriel JavaScript de base) pour l'\u00e9change de donn\u00e9es textuelles. Par rapport au format XML, qui est souvent utilis\u00e9 dans le cadre de l'\u00e9change de donn\u00e9es entre machines/sites web, le format JSON a l'avantage d'\u00eatre d\u00e9j\u00e0 en format objet JavaScript. Il est par cons\u00e9quent simple d'int\u00e9grer les donn\u00e9es re\u00e7ues d'une autre source directement dans le code JavaScript. JSON est donc souvent utilis\u00e9 dans le cadre des API (Application Programming Interface). Voir \u00e9galement : \n
\n- JSON \n
- en:JSON sur EduTechWiki en anglais \n
- JSON official site
Node.js : JavaScript server-side et dans d'autres contextes[modifier | modifier code]
\nM\u00eame si l\u2019utilisation la plus r\u00e9pandue de JavaScript reste dans le d\u00e9veloppement front-end, depuis quelques ann\u00e9es il est \u00e9galement possible d\u2019utiliser JavaScript du c\u00f4t\u00e9 serveur. Node.js est un environnement cross plateforme qui permet de cr\u00e9er surtout (mais pas seulement) des applications web. Le projet est support\u00e9 par la Linux Foundation et Node.js est d\u00e9j\u00e0 utilis\u00e9 par plusieurs gros acteurs dans le milieu technologique. Ses principaux avantages concernent :\n
\n- La possibilit\u00e9 d'utiliser le m\u00eame langage pour le c\u00f4t\u00e9 front-end et back-end, ainsi que les d\u00e9veloppeurs ne doivent pas utiliser deux syntaxes diff\u00e9rentes, comme c'est souvent le cas lorsqu'on utilise un langage c\u00f4t\u00e9 serveur comme PHP. \n
- L\u2019architecture \u00ab event-driven \u00bb et les streams : dans les architecture traditionnelles, la requ\u00eate et la r\u00e9ponse sont consid\u00e9r\u00e9es comme deux entit\u00e9s s\u00e9par\u00e9es, tandis que avec Node.js il est plus facile de cr\u00e9er des \"streams\" (i.e. des flux de donn\u00e9es) entre le client et le serveur. \n
- L\u2019aspect \u00ab non-blocking \u00bb : contrairement \u00e0 d\u2019autres interpr\u00e8tes qui ex\u00e9cutent les instructions de mani\u00e8re proc\u00e9durale, en attendant que chaque instruction soit termin\u00e9e avant d\u2019entamer la suivante, Node.js ex\u00e9cute les instructions en parall\u00e8le si la m\u00e9moire le permet.
Pour approfondir le d\u00e9veloppement avec JavaScript en dehors du navigateur, voir :\n
\n- Node.js : pr\u00e9sentation g\u00e9n\u00e9rale sur ce wiki, voir \u00e9galement le Site officiel \n
- Express.js : framework pour application web \n
- Socket.io : real-time, bi-directional application entre client et serveur \n
- Electron : d\u00e9veloppement de logiciels desktop cross-plateformes \n
- Internet des objets avec JavaScript : Node.js est utilis\u00e9 en g\u00e9n\u00e9ral \u00e9galement comme interpr\u00e8te sur les objet connect\u00e9s comme les plateformes Arduino ou Raspberry PI
JavaScript en Data Science[modifier | modifier code]
\nM\u00eame si JavaScript est utilis\u00e9 principalement dans le d\u00e9veloppement web, gr\u00e2ce au fait qu'il soit d\u00e9sormais omnipr\u00e9sent, des d\u00e9veloppeurs commencent \u00e0 l'appliquer \u00e0 des contextes qui sont traditionnellement domin\u00e9s par d'autres langages. C'est le cas du traitement des donn\u00e9es, ou plus g\u00e9n\u00e9ralement du \"data science\", dans lequel on utilise normalement des langages comme Python ou R. Il existe des projets qui permettent d'utiliser directement JavaScript pour le traitement et la visualisation des donn\u00e9es : \n
\n- JavaScript for Data Science : introduction compl\u00e8te \u00e0 JavaScript dans le contexte du Data Science \n
- Data-Forge : data wrangling et analyses de donn\u00e9es \n
- jStat : biblioth\u00e8que pour analyse statistique \n
- D3.js Biblioth\u00e8que pour la visualisation de donn\u00e9es
JavaScript dans d'autres logiciels[modifier | modifier code]
\nDe plus en plus de logiciels mettent \u00e0 disposition une API pour pouvoir int\u00e9grer directement du JavaScript dans leur logique, en maximisant ainsi la possibilit\u00e9 de personnaliser le fonctionnement selon ses besoins :\n
\n- Qualtrics permet d'ajouter du code JavaScript \n
- Microsoft met \u00e0 disposition la JavaScript API for Office \n
- Adobe permet d'ajouter du JavaScript aux PDF \u00e0 travers Acrobat
JavaScript et les bases de donn\u00e9es[modifier | modifier code]
\nJavaScript est de plus en plus utilis\u00e9 \u00e9galement dans les lignes de commandes (ou shell) pour administrer, interroger et effectuer des op\u00e9rations directes sur les bases de donn\u00e9es. Ces databases sont souvent de type NoSQL et utilisent JSON comme format de transfert des donn\u00e9es aux applications qui en font demande. Parmi les bases de donn\u00e9es les plus c\u00e9l\u00e8bres qui utilisent JavaScript on retrouve :\n
\n- MongoDB, un database de type NoSQL \n
- Apache CouchDB, autre database de type NoSQL
Avantages de JavaScript[modifier | modifier code]
\nJavaScript est un langage tr\u00e8s flexible \u00e0 plusieurs niveaux. \n
\n- Pour les n\u00e9ophytes \n
- Pour commencer \u00e0 programmer avec JavaScript, il suffit de disposer d\u2019un \u00e9diteur de texte et d\u2019un navigateur internet ; \n
- JavaScript permet d\u2019obtenir des r\u00e9sultats \u00ab visibles \u00bb avec relativement peu d\u2019effort et avec une connaissance de base du langage ; \n
- Les \u00ab r\u00e8gles \u00bb du langage sont assez souples, moins strictes compar\u00e9es \u00e0 d\u2019autres langages. (Ceci peut \u00eatre consid\u00e9r\u00e9 en revanche un d\u00e9savantage car source de confusion ou des pratiques approximatives bas\u00e9es exclusivement sur le r\u00e9sultat final) ; \n
- Pour des sites/applications web simples, il suffit de t\u00e9l\u00e9verser les fichiers sur internet pour que n\u2019importe qui puisse y avoir acc\u00e8s ;
- Pour des end-user developers plus ambitieux \n
- JavaScript a une structure orient\u00e9e objet tr\u00e8s flexible, qui ne ressemble pas (ou en tout cas pas encore) aux classes des langages plus traditionnels, et qui permet donc plusieurs styles de d\u00e9veloppement ; \n
- Gr\u00e2ce \u00e0 l\u2019\u00e9cosyst\u00e8me li\u00e9 \u00e0 HTML5, JavaScript dispose d\u2019un acc\u00e8s privil\u00e9gi\u00e9 \u00e0 diff\u00e9rents API telles que le micro ou la webcam, la g\u00e9olocalisation, les contenus multim\u00e9dia, etc. ; \n
- Il existe des centaines de biblioth\u00e8ques qui permettent d\u2019\u00e9tendre la syntaxe de base pour augmenter la facilit\u00e9 de codage ou mettre en place des fonctionnalit\u00e9s complexes avec peu d\u2019effort ; \n
- Avec l\u2019introduction et l\u2019affirmation de Node.js, il est d\u00e9sormais possible d\u2019utiliser le m\u00eame langage pour le d\u00e9veloppement cot\u00e9-client et c\u00f4t\u00e9-serveur, avec une int\u00e9gration facilit\u00e9e entre les deux c\u00f4t\u00e9s, ainsi que dans d'autres environnements comme le d\u00e9veloppement desktop ou mobile, ou encore les objets connect\u00e9s. \n
- Pour des applications en local, l'installation de Node.js est beaucoup plus simple et requi\u00e8re moins d'espace par rapport \u00e0 mettre en place ou installer une architecture compl\u00e8te de type LAMP ou WAMP.
D\u00e9savantages de JavaScript[modifier | modifier code]
\nJavaScript existe depuis les ann\u00e9es 1990 et le langage a connu diff\u00e9rentes \u00e9volutions qui ont souvent \u00e9t\u00e9 plus \u00ab philosophiques \u00bb que techniques. L\u2019\u00e9volution du langage a longtemps \u00e9t\u00e9 intrins\u00e8quement li\u00e9e aux navigateurs web, et par cons\u00e9quent \u00e0 des gros probl\u00e8mes de compatibilit\u00e9s. Loin d\u2019\u00eatre r\u00e9solus, ces probl\u00e8mes sont toutefois moins d\u00e9terminants aujourd\u2019hui. Il reste n\u00e9anmoins des s\u00e9quelles d\u2019une \u00ab mauvaise r\u00e9putation \u00bb du langage qui se manifeste de la mani\u00e8re suivante :\n
\n- La qualit\u00e9 des ressources et tutoriels disponibles dans le web d\u00e9pendent strictement de leur date. Les anciennes ressources utilisent des pratiques (e.g. injecter JavaScript dans les attributs des \u00e9l\u00e9ments HTML) qui ne facilitent pas la compr\u00e9hension du langage ; \n
- D'autre part, surtout dans les derni\u00e8res ann\u00e9es (environ depuis 2015), le langage est constamment en \u00e9volution et en faisant du \"tourisme web\", vous risquez de voir des syntaxes diff\u00e9rentes. Pour des d\u00e9butants il est peut-\u00eatre conseill\u00e9 de se concentrer d'abord sur des guides, tutoriel, MOOC, etc. qui peuvent garantir une certaine coh\u00e9rence interne, voir \u00e0 ce propos la review de ressources pour d\u00e9buter JavaScript propos\u00e9e par des \u00e9tudiants. \n
- \u00ab Il existe un snippet pour tout \u00bb. Surtout lorsqu\u2019on est n\u00e9ophytes, on a tendance \u00e0 chercher directement des solutions \u00ab take away \u00bb sous forme d\u2019ensemble d\u2019expressions et fonctions (i.e. des snippets), sans r\u00e9fl\u00e9chir sur ce que le code fait effectivement. Pour des applications de petite taille, ceci ne repr\u00e9sente pas un probl\u00e8me, mais d\u00e8s que le code se complexifie, il est facile de faire confusion. \n
- Vu que JavaScript est utilis\u00e9 un peu partout, sans une bonne connaissance du fonctionnement de base du langage, on peut essayer d\u2019utiliser du code dans un contexte diff\u00e9rent de celui pour lequel il est adapt\u00e9. \n
- Du c\u00f4t\u00e9 serveur, la disponibilit\u00e9 d\u2019h\u00e9bergeurs qui supportent Node.js dans des offres mutualis\u00e9es est beaucoup plus r\u00e9duite par rapport notamment \u00e0 PHP, mais ceci semble destin\u00e9 \u00e0 changer assez vite.
Bibliographie[modifier | modifier code]
\n- Crockford, D. (2008). JavaScript: The Good Parts. Unearthing the Excellence in JavaScript. Sebastopol, CA: O\u2019Reilly. \n
- Flanagan, D. (2011). JavaScript: The Definitive Guide, 6th Edition . Activate Your Web Pages (6th editio). Sebastopol, CA: O\u2019Reilly. \n
- Haverbeke, M. (2015). Eloquent JavaScript. A modern Introduction to Programming. Second Edition. San Francisco, CA: no starch press. Version web grauite sur le site officiel http://eloquentjavascript.net/.\n
- Il existe \u00e9galement la traduction en fran\u00e7ais pour la premi\u00e8re version du livre http://fr.eloquentjavascript.net/.
\n - Simpson, K. (2015-2016). You Don't Know JS (book series). Sebastopol, CA: O'Reilly. Version non edit\u00e9e disponible gratuitement sous ce lien.