React est une bibliothèque JavaScript construite en 2013 par l'équipe de développement de Facebook pour rendre les interfaces utilisateurs plus modulaires (ou réutilisables) et plus faciles à maintenir. Selon le site Web de React, il est utilisé pour « Construire des composants encapsulés qui gèrent leurs propres états, puis les assembler pour réaliser des interfaces utilisateurs complexes ».

Ce tutoriel est une introduction à la programmation en JavaScript. JavaScript a été créé en 1995, pour le compte de la société Netscape (éditeur d'un des premiers navigateurs Web, dont Mozilla Firefox est l'héritier), puis standardisé sous le nom d'ECMAScript (souvent réduit à ses initiales « ES »). Utilisable sur de nombreuses plateformes, JavaScript est le seul langage de programmation inclus en standard dans les navigateurs Web. On dit donc que c'est « le langage du Web ».

Vue.js est une bibliothèque qui permet de créer facilement des interfaces Web interactives. Dans ce cours, nous allons voir dans un premier temps comment l'installer et dans un deuxième temps les concepts clés ainsi qu'un petit exemple de réalisation pour illustrer.

Ce tutoriel s'adresse à tous les développeurs qui ont déjà les bases de la programmation orientée objet et qui souhaitent la découvrir avec les prototypes et les classes en JavaScript.

Ce tutoriel est sous la forme d'un mémo présentant les chapitres les plus importants du framework Angular. Chaque chapitre est composé de codes sources agrémentés de diverses explications et points-clés à connaitre. Ce mémo est destiné aux développeurs Angular débutants et aussi confirmés.

Cet article est une introduction au langage JavaScript. Il est destiné à ceux et celles qui souhaitent découvrir ce langage qui permet de dynamiser les pages Web. Néanmoins, de bonnes bases en HTML et CSS sont nécessaires pour aborder sereinement le JavaScript.

À travers six cours complets en vidéo, accompagnés d'exemples de codes source, apprenez à développer en JavaScript. Apprenez les bases de la programmation. Vous verrez ici à quoi servent les booléens. Comment utiliser les conditions, créer et gérer des tableaux, manipuler des chaînes de caractères et des dates et enfin utiliser des fonctions mathématiques.

À travers six cours complets en vidéo, accompagnés du code source commenté, vous apprendrez comment effectuer le débogage rapide de votre code JavaScript. Puis vous découvrirez l'utilisation des opérateurs arithmétiques et de comparaison ainsi que les conditions if - else - elseif - switch - case - break. Ensuite, vous verrez comment utiliser la puissance des boucles for, while, do while, de même que la gestion des événements. Finalement, vous apprendrez comment utiliser les formulaires JavaScript - listes déroulantes, checkbox, boutons radio…

Cours de DEUG MIAS 2e année pour débuter en JavaScript.

Partagés entre le copier/coller de Javascripts glanés de gauche à droite sur le Web, furieux de voir échouer les quelques modifications apportées, dépités devant la documentation à priori hermétique de Netscape et un peu « nuls » en programmation, vous souhaitez peut-être comme moi comprendre un peu plus ce langage qui met un peu de piment dans les pages Html. Ce tutoriel vous est destiné.

Lorsqu'on souhaite créer des pages Web, il y a de très nombreuses manières d'arriver au but. Nous allons voir ici comment utiliser les technologies de manière simple et efficace.
Il s'agit ici d'un cours pour débutants. Nous n'aborderons pas de techniques complexes dans les tutoriels.

Wassim Chegham est un fervent défenseur des technologies Web front et suit de près les versions ECMAScript. Il nous propose des articles pointus sur des aspects complexes ou nouveaux du JavaScript.

Episode IEpisode I : au coeur des fonctions - Au cœur des fonctions17 commentaires

JavaScript est l'un des langages de programmation les plus utilisés et les plus populaires sur Internet. JavaScript s'est donc rapidement répandu, car il est simple d'utilisation, précis et possède un vaste champ d'action.
Mais les navigateurs interprètent le DOM (Document Object Model) différemment. C'est la raison pour laquelle les frameworks JavaScript fleurissent sur le marché, rendant ainsi le scripting multinavigateurs possible. Je vais vous apprendre pas à pas à créer un framework JavaScript, en utilisant de simples effets DOM et quelques fonctions utiles en AJAX. Nous espérons que vous pourrez utiliser ces informations et apprendre à les mettre en œuvre par vous-même.

Partie 1Partie 1 8 commentaires
Partie 2Partie 2 3 commentaires
Partie 3Partie 3 3 commentaires
Partie 4Partie 4 4 commentaires

Une rapide introduction à Javascript issue du cours de HTML.

Dans ce tutoriel nous allons voir comment intégrer simplement des Google Maps dans vos pages WEB grâce à Gmap.js.

L'API Google Maps fournit une interface intuitive et très réactive construite en utilisant les technologies AJAX. C'est une API ouverte permettant la personnalisation de la carte y compris la possibilité d'ajouter au sein de l'application des données spécifiques à la carte (personnalisation des contrôles, gestion des événements, création des marqueurs avec infobulle…). Encore mieux, Google donne accès à ce service gratuitement. Dans cet article, nous allons examiner quelques-unes des fonctionnalités de base fournies par l'API Google Maps.

Il existe déjà une multitude de techniques différentes permettant d'afficher une carte Google Map dans votre page WEB. Voyons-en une de plus aujourd'hui grâce à l'utilisation de jQuery et des API Google. Voyons donc comment faire interagir les deux.

Les Web Components ont fait beaucoup parler d'eux depuis l'avancée des dernières spécifications et le développement de polyfills permettant de les utiliser dès maintenant. Ils ont même été décrits par plusieurs articles de presse comme la prochaine révolution du développement WEB. Mais cet engouement est-il justifié ? Pour aller à contre-courant de la multitude d'articles en vantant les mérites, nous allons détailler dans cet article l'intérêt discutable, les limitations, les inconvénients et les mauvais cas d'utilisation des Web Components.

Google Gears est l'un des produits Google les plus récents. Il propose de créer des applications web fonctionnant également en mode déconnecté.
Cet article nous présente le principe général du fonctionnement de Google Gears.

Cette librairie constitue une bibliothèque de fonctions et de classes évoluées pour faciliter son intégration dans les pages Web. Elle regroupe essentiellement des fonctionnalités pour la manipulation d'images comme les animations, les menus, les galeries d'images ou les cadres.

Les frameworks JavaScript usuels apportent l'essentiel des fonctionnalités qu'un développeur peut espérer. De plus, leurs capacités d'extension par les systèmes de plugin les rendent encore plus puissants. Malgré tout, il se peut que vous n'ayez pas envie d'utiliser de tels frameworks ou que celui que vous utilisez n'ait pas de fonctions suffisamment spécialisées pour vos besoins.
Dans ce cas, il existe de nombreuses librairies autonomes très utiles.
W3Avenue vous a compilé une liste de librairies JavaScript indépendantes qui devraient vous rendre service si votre framework (Prototype, jQuery, MooTools, Dojo, etc.) ne couvre pas vos besoins spécifiques ou si vous n'en utilisez pas.

Voici un tutoriel permettant de créer un chat grâce à l'API websocket en HTML5.

Ce tutoriel présente comment développer un filtre facial webcam thème Matrix avec Three.js

Maintenant que savez comment installer Node JS sur votre ordinateur ainsi que NPM (si ce n'est pas le cas, voir le tutoriel dessus) nous allons nous attaquer à Socket.IO afin de créer notre première application Web en temps réel !

Si vous arrivez ici, c'est que vous savez déjà installer socket.io et jouer avec sur un serveur node.js, si ce n'est pas le cas, je vous invite à lire mon tutoriel sur Socket.io version débutant. Nous allons voir dans ce tutoriel des fonctionnalités avancées avec les sockets qui vous permettront d'optimiser votre code en évitant d'utiliser des événements juste pour une confirmation d'action, mais aussi pouvoir limiter l'envoi de sockets à des groupes en utilisant les « rooms ».

Sylvain Pollet-Villard s'ennuyait sûrement le jour où il eut l'idée saugrenue de coder du JavaScript avec le moins de caractères possible. Et pourtant, il l'a fait ! Il nous explique les différentes étapes de sa démarche qui aboutit à la rédaction d'un compilateur.

Cet article montre comment utiliser JavaScript et surtout sa dernière mouture (ES6) pour implémenter un algorithme simple de MapReduce. L'objectif de ce tutoriel est de disséquer l'algorithme en l'implémentant de bout en bout sans recourir à une bibliothèque spécialisée.

Après quelques années à écrire dans un langage, on finit facilement par oublier les premières difficultés que l'on avait rencontrées Nous allons explorer ici les trois notions fondamentales de JavaScript qui sont probablement les plus grosses sources de bogues, d'incompréhension et de frustration pour le développeur Web moyen. Et qui accessoirement sont la base d'une programmation plus évoluée par la suite.

Admettons donc que vous ayez digéré sans problème les portées et les fonctions, passons à deux choses vraiment particulières à JavaScript. Le renvoi de fonctions qui permettent de belles optimisations et qui ouvrent la voie à des patterns que les amoureux de la théorie du langage apprécieront. Une implémentation de classe statique, pour reprendre le terme utilisé en PHP ou en Java. Enfin nous verrons une proposition d'implémentation de deux design pattern célèbres et particulièrement utiles en JavaScript : Singleton et Factory.

La concaténation de chaînes de caractères est une source de discussion des développeurs JavaScript. Faut-il utiliser la concaténation grâce à l'opérateur + et grâce à la méthode concat ou utiliser d'autres algorithmes ? Dans le cadre de cet article, je fais la synthèse des différents tests et articles lus sur le Web. Je réunis ces informations dans une série de tests sur différents navigateurs.

Une couverture exhaustive des expressions rationnelles a jusqu'ici fait partie de l'atelier JS Puissant. Elle occupait bien 1h, voire 1h30, en matinée.
C'est un sujet qui me tient véritablement à cœur, pour les raisons que je vais développer dans les deux premiers titres. Mais on m'a quelquefois fait remonter, très justement, qu'une telle couverture, au sein d'un atelier de 8h, est tout à fait hors de proportion et que le temps libéré pourrait être utilement mis à profit en entrant plus dans le détail d'autres aspects (programmation fonctionnelle, structuration de code?).
Afin de ne pas simplement cesser de transmettre ces connaissances et de « convertir » les gens au bon usage des expressions rationnelles, j'ai donc opté pour l'approche inverse : sortir ce contenu des formations pour en faire un contenu librement accessible sur le site de JS Attitude !

Cet article s'adresse à une population de développeurs déjà familière avec la problématique du développement Web et le langage JavaScript. Dans cet article, vous apprendrez comment packager vos bibliothèques en simulant en JavaScript ce que l'on appelle un espace de noms (« namespace » en anglais).

Si vous avez lu les deux premiers articles de cette série (comprendre l'amélioration progressive et amélioration progressive avec CSS), vous commencez sans doute à entrer dans le mouvement de l'amélioration progressive. Dans cet article nous allons étudier l'application de la philosophie de l'amélioration progressive aux scripts côté client. Comme vous le verrez bientôt, ça repose sur deux points : sobriété et organisation.

Dans cet article, je vais vous présenter trois fonctions permettant d'enregistrer, lire et supprimer des cookies. Ces fonctions vous permettront d'utiliser facilement les cookies sur votre site.
Tout d'abord, je vous présenterai rapidement ce qu'est un cookie ainsi que l'objet JavaScript document.cookie, suivi d'un exemple. Ensuite, je vous proposerai ces trois fonctions en expliquant leur fonctionnement.

Cet article a pour but de présenter un peu plus posément et en détail les Promises (ou Promesses en français)

Ce tutoriel fait partie de la collection ES3 dans le détail et en constitue le premier chapitre

Ce tutoriel fait partie de la collection ES3 dans le détail et en constitue le Chapitre 7. Il va traiter des six types existants en JavaScript dans sa version ES3.

JavaScript a pas mal changé ces dernières années. Ce tutoriel détaille douze nouvelles fonctionnalités que vous pouvez utiliser dès aujourd’hui.

Dans ce cours, je vous présente ES6 qui conserve l’existant (donc tout ES5 reste valable) et ajoute de nombreuses et intéressantes possibilités, en particulier les modules et les classes ?

Dans ce cours, je vous présente ES6 qui conserve l’existant (donc tout ES5 reste valable) et ajoute de nombreuses et intéressantes possibilités, en particulier les modules et les classes.‌

Dans ce tutoriel, nous allons discuter d'une propriété supplémentaire liée aux contextes d'exécution : le mot-clé this.

Ce tutoriel est dédié, encore une fois, à un mécanisme lié aux contextes d'exécution : j'ai nommé la chaîne des portées.

Nous allons nous intéresser à différents types de fonctions et définir comment chacun de ces types influence l'objet des variables d'un contexte et ce qu'il y a à l'intérieur de chaque chaîne des portées de chaque fonction.

Ce billet résume, en français, les avantages du modèle RORO (recevoir un objet, retourner un objet) de Bill Sourour.

Nous allons donc utiliser le sujet de l'isomorphisme comme fil conducteur dans cet article pour traiter : de l'import / export de Modules ECMAScript en version 6, du JavaScript côté serveur avec Node.js, des équivalences ECMAScript version 5 pour le require / export, de l'isomorphisme exploitable pour faire du Web avec Vanilla JS et Node.js

Ce tutoriel fait partie de la collection ES3 dans le détail et en constitue la partie 6. Dans ce tutoriel, nous allons parler d'un des sujets les plus souvent questionnés en JavaScript : les fermetures (« closures »).

Dans ce cours, je vous présente ES6 qui conserve l’existant (donc tout ES5 reste valable) et ajoute de nombreuses et intéressantes possibilités, en particulier les modules et les classes.

Ce tutoriel est une introduction à la programmation en JavaScript. JavaScript a été créé en 1995, pour le compte de la société Netscape (éditeur d'un des premiers navigateurs Web, dont Mozilla Firefox est l'héritier), puis standardisé sous le nom d'ECMAScript (souvent réduit à ses initiales « ES »). Utilisable sur de nombreuses plateformes, JavaScript est le seul langage de programmation inclus en standard dans les navigateurs Web. On dit donc que c'est « le langage du Web ».

Ce tutoriel va traiter de deux points importants de l'implémentation de la programmation orientée objet du point de vue de JavaScript, les fonctions constructeurs et la chaîne des prototypes.

Le JavaScript dispose d’une demi-dizaine d’instructions distinctes permettant d’effectuer une boucle sur une variable. Quelles sont les méthodes les plus adaptées aux différents types de valeurs ? Quelles sont les implications de telle ou telle méthode ? Dans quel contexte préférer une instruction plutôt qu’une autre ? Autant de questions auxquelles nous allons apporter une réponse.

Voici un livre qui traite du contrôle des ordinateurs. Aujourd’hui, les ordinateurs sont aussi communs que le sont les tournevis, mais ils sont hautement plus complexes, et faire de sorte qu’ils puissent exécuter ce que vous voudriez qu’ils fassent n’est pas toujours si facile.

Avez-vous déjà manipulé de grands pans de HTML en JavaScript, et trouvé ça peu lisible et fastidieux ? Les templates sont là pour vous simplifier la vie et produire du code plus lisible facile à maintenir. Cet article fait le tour des principales solutions de templating existantes en JavaScript pour vous permettre de trouver la bibliothèque qu'il vous faut.

L'objectif de cet article, relativement exhaustif, est de permettre de comprendre comment manipuler les événements DOM en JavaScript. Avant d'aborder les événements du DOM (Document Object Model), vous devez comprendre la construction arborescente d'un document HTML, avec les notions inhérentes de nœuds, de nœud parent et de nœud enfant. Idéalement, vous pouvez acquérir préalablement la notion d'arbre XML qui est le fondement de la construction arborescente des documents HTML.

Ce document a pour but de vous expliquer comment personnaliser le moindre élément des formulaires (X)HTML.

Apprenez à construire rapidement votre premier moteur d'affichage 2D en HTML5 avec la balise canvas et le langage JavaScript. Vous pourrez ainsi vous construire une base de code saine pour toutes vos applications riches (RIA), vos jeux, vos sites Web tout en vous payant le luxe de savoir ce qu'il y a sous le capot !
Au programme, les bases du dessin avec canvas, du compositing, la mise en place d'une display list, les interactions avec l'utilisateur sans oublier les filtres !

Ce tutoriel est le premier d'une série consacrée au développement de contrôles Web avancés en JavaScript. Vous allez apprendre au cours de votre lecture à penser et concevoir des outils plus complexes au travers d'une étude de cas : la conception d'une table éditable.

Dans un précédent tutoriel, nous avons conçu une table HTML éditable en JavaScript : HtmlEditTable v1.0. Pour la v2.0, nous allons réviser un peu le code et ajouter les fonctionnalités suivantes :
* création d'un HTMLEditable à partir d'une table HTML existante ;
* navigation au clavier.

EditGrid.com est un webservice pratique pour utiliser facilement des grilles de type Excel sur un site Internet. Je vous propose de voir comment il s'installe et s'utilise. Ce tutoriel ne vise pas à remplacer la documentation officielle, mais simplement à rendre plus abordables des fonctionnalités utiles et efficaces, qui ne sont pas encore, ou peu, documentées en français.

Ce tutoriel, vous présente comment implémenter une fonctionnalité de drag and drop. Cette fonction prend en charge la gestion de la souris, mais aussi du clavier.
N'hésitez pas à faire part de vos remarques concernant cet article.

Solution complète d'upload Ajax-jQuery avec classes PHP serveur. Informations en temps réel, styles et fonctions JavaScript événementiels, file d'attente et fragmentation.

Le Développement Web est de plus en plus complexe. Accompagnée de Firefox, l'extension Firebug s'impose comme l'outil incontournable au service du développeur. Firebug, c'est la possibilité d'inspecter et d'éditer le code HTML et CSS, de voir, monitorer et déboguer le code JavaScript, de visualiser les échanges entre le serveur et le navigateur et d'utiliser bien d'autres fonctionnalités encore. Dans cet article, je vous invite à découvrir les principales caractéristiques de Firebug et à en comprendre le fonctionnement.

JavaScript a un rôle prédominant dans le développement Web actuel ; les librairies JavaScript telles que jQuery, Prototype, Mootools ou autres, nous ont rendu bien des services. Malgré tout, l'émergence des Applications Internet Riches (Rich Internet Applications ou RIA) et leur adoption rapide, le besoin de coder du JavaScript plus fiable, plus robuste et plus puissant a significativement augmenté.
Que vous soyez un développeur JavaScript novice ou expérimenté, les outils que vous utilisez ont un impact direct sur votre productivité. Grâce au mouvement Open Source, se procurer des outils performants ne signifie pas dépenser une fortune ; en fait, il n'y a même souvent rien à dépenser. Voici une liste d'outils libres pour les développeurs JavaScript.

ECMAScript for XML (E4X) est une extension de ECMAScript qui ajoute un support natif du langage XML. E4X est un peu à ECMAScript ce que SimpleXML est à PHP5 : il fournit aux développeurs une alternative simple à DOM pour accéder et manipuler des documents XML.
Cet article présente E4X à travers l'utilisation de Rhino, une version de JavaScript conforme aux standards ECMA implémentée en Java. C'est ainsi également l'occasion d'introduire Rhino à travers l'utilisation d'E4X sur des exemples simples.

Dans ce tutoriel consacré à Grunt, vous allez découvrir et comprendre ce qu'est Grunt et quelle est son utilité, comment l'installer et le mettre en place dans un projet.

Avant d'aller plus loin et d'entrer dans le cœur du sujet - la création, la configuration et l'exécution des tâches Grunt -, faisons un tour d'horizon de l'API Grunt.

Dans ce tutoriel, vous allez mettre en pratique ces connaissances dans le cadre de la configuration des tâches.

La lecture des précédents tutoriels de cette série fait que l'API Grunt et la configuration des tâches n'ont plus de secret pour vous ! Passons à la création de tâches ! Simple, à cibles multiples, alias, asynchrone : il y en a pour tous les goûts.

Justin Naifeh nous propose un article sur la technique du decorator pattern afin d'optimiser son code et de pouvoir l'étendre de manière simple et efficace.

Justin Naifeh nous propose un article sur les Hash Map liées en JavaScript.

L'objectif de cet article est de décrire les mécanismes de base mis à disposition par JavaScript afin de mettre en œuvre la programmation orientée objet par prototype.
La connaissance de ces mécanismes permet de mieux développer avec le langage JavaScript afin de réaliser des traitements plus modulaires, plus faciles à maintenir et évolutifs. Elle permet également d'appréhender plus facilement les diverses bibliothèques JavaScript disponibles sur Internet telles que Prototype, jQuery, script.aculo.us et Dojo.

Partie 1Partie 1 - Mécanismes de bases (prototype)
Partie 2Partie 2 - Mécanismes avancés (héritage)
Partie 3Partie 3 - Problèmes classiques

Ce tutoriel a pour cible les développeurs qui ont une expérience du PHP et qui veulent se lancer dans un projet JavaScript. Cela va donc commencer par savoir écrire des classes en JavaScript. Le but n'est pas de rentrer dans la théorie de JavaScript ni même d'être exhaustif, mais de vous fournir un template pour commencer à écrire vos classes.

Ce tutoriel s'adresse à tous les développeurs qui ont déjà les bases de la programmation orientée objet et qui souhaitent la découvrir avec les prototypes et les classes en JavaScript.

Ce tutoriel expliquera comment modifier les requêtes reçues (en réalité, vous pouvez également contrôler celles envoyées, les intercepter, en produire d’autres…). Cependant ce n’est pas la modification en tant que telle qui est intéressante même si, pour beaucoup de développements en Web, c’est déjà un changement de paradigme. L'intérêt c’est d'appréhender une vision radicale des « pages » du Web au profit d’une gestion des ressources offertes par le réseau et de l’utilisation de l’ensemble des « contenus » du navigateur.

Le JavaScript est l'un des langages les plus utilisés et aussi l'un des plus populaires du moment. Côté client, côté serveur, il est omniprésent sur le Web. Malgré cela, le JS demeure mal compris par un grand nombre de développeurs. Pourtant, à mesure que son usage s'intensifie et qu'il est le cœur d'applications de plus en plus complexes, il convient de bien appréhender son modèle objet. En route pour le royaume des objets !

Nous déclarons des variables et des fonctions avec lesquelles tournent nos programmes. Mais comment, et quand l'interpréteur trouve-t-il ces données ? Que se passe-t-il quand une référence à un objet est demandée ?

Les réponses aux questions les plus fréquemment posées sur les forums JavaScript, AJAX, Frameworks et Bibliothèques (comprenant jQuery, MooTools, Dojo, Google Maps, ExtJS, etc.).

Les sources proposées par le forum JavaScript.