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.

Lorsque l'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.

Cette série d'articles a pour but de vous faire découvrir les différentes fonctions du framework script.aculo.us. Dans un premier temps, nous allons voir comment mettre en place le framework dans une page HTML.

Les effets visuels de script.aculo.us sont répartis en deux catégories, les effets noyau et les effets combinés.
Les effets combinés sont en fait une combinaison d'effets de base préformatés.
Bien comprendre cette notion vous sera très utile lorsque vous voudrez créer vos propres effets personnalisés.

Cet article vous montrera comment modifier l'opacité d'un élément (X)HTML suite à une sélection grâce au Framework Script.aculo.us.

La plupart des plugins exécutent une seule tâche et les méthodes d'écriture de plugin utilisées dans « Mon Cahier d'exercicesMon Cahier d'exercices », dans la FAQ jQueryFAQ jQuery et dans l'article « Adapter jQuery à vos besoinsAdapter jQuery à vos besoins » couvrent la majorité des besoins. Lorsque l'on souhaite inclure la modification des options et implémenter plusieurs méthodes on doit penser multitâche. Dans cet article, j'explique la méthode de construction que j'utilise et je donne trois exemples de plugins multitâches.

Il y a beaucoup de plugins du style des carrousels (slide), et ils ont tous des forces et des faiblesses différentes. Cependant, RoyalSlider de Dmitry Semenov est une très bonne galerie d'images jQuery réactive et activable également via les touches du clavier.

Nous allons, dans cet article, effectuer une introduction à la bibliothèque JavaScript : jQuery.
Il va sans dire que pour comprendre tant soit peu l'article qui suit, il vous faut un minimum de connaissances JavaScript et du modèle objet des documents (DOM). Nous verrons donc la base en vous donnant les détails nécessaires à votre apprentissage afin que vous soyiez en mesure de progresser par vous-même facilement.

Avec un JavaScript omniprésent et des codes de plus en plus complexes, le programmeur se doit de maîtriser les bases du langage, la structuration et la modularisation du code, il se doit d'écrire un code gérable, réutilisable et facilement évolutif. Dans cet esprit, je vous propose de généraliser l'usage de la clôture jQuery (closure jQuery). L'utilisation de la clôture implique celle de la fonction globale et d'un espace de noms.

Les récentes évolutions de la bibliothèque jQuery permettent de revisiter l?espace de noms pour y inclure la personnalisation d'un clone de jQuery.

Je suis persuadé que jQuery est un outil fantastique pour la manipulation du DOM, mais cela ne représente que 80 % de la programmation en JavaScript. Pour le solde, la Programmation Orientée Objet (POO) répond à l'essentiel des besoins. Faut-il pour autant recourir obligatoirement à une autre bibliothèque JavaScript comme Dojo ? Non, je crois qu'il suffit d'un outil léger, permettant l'héritage simple. L'outil, l'objet $.dvjhClass, permet de réunir dans un même corpus la fonction d'initialisation et son prototype.

Pour mes projets de développement jQuery, je dispose de toute une série de trucs et astuces que je souhaite vous faire partager. Dans cet article, vous trouverez donc en une seule page les meilleures techniques trouvées en ligne.

Un des plus grands défis d'un concepteur web est de trouver un moyen de placer beaucoup d'informations sans perdre de lisibilité. Les onglets sont un bon moyen de gérer ce type de problème. Depuis l'avènement du Web 2.0, on voit une quantité phénoménale de blogs utilisant cette technique. Nous allons donc voir comment créer une boîte d'onglets en HTML et en y ajoutant des fonctionnalités à l'aide de CSS, JavaScript et jQuery.

Un des plus grands défis d'un concepteur Web est de trouver un moyen de placer beaucoup d'informations sans perdre de lisibilité. Les onglets sont un bon moyen de gérer ce type de problème. Depuis l'avènement du Web 2.0, on voit une quantité phénoménale de blogs utilisant cette technique. Nous allons donc voir comment créer une boîte d'onglets dynamique avec JavaScript et jQuery en partant d'une base HTML / CSS qui vous a déjà été présentée dans le précédant article : Créez une boîte d'onglets avec CSS et jQuery - Partie 1

Nous allons nous attarder à la lecture d'un fichier ou d'une source XML à partir de jQuery.

Il existe une multitude de guides afin d'afficher sous forme graphique des données à l'aide de CSS. Par contre, il arrive que de simples histogrammes ne soient pas suffisants dans des cas où vos données changent en fonction du temps par exemple. Un histogramme ne peut représenter ce genre de données. C'est ici que le plugin Flot pour jQuery entre en jeu. Flot est un plugin permettant l'affichage de graphiques à l'allure très professionnelle.
Dans un monde toujours plus informatisé, il arrive de plus en plus d'avoir besoin d'afficher une grande quantité de données sur le Web. Généralement, un simple tableau d'en-têtes et de valeurs fera l'affaire si la quantité de données est petite. Par contre, si l'on se fie à l'être humain, ce dernier aura plus de facilité à assimiler des données si elles sont affichées graphiquement. Nous allons donc voir ici comment utiliser Flot afin d'ajouter une touche professionnelle à l'affichage de vos données.

Easy Slider (c'est comme ça que je l'ai appelé) permet de faire défiler des images ou du contenu horizontalement ou verticalement suite au clic. Il est configurable avec uniquement du CSS. Il suffit donc juste d'intégrer le fichier, d'indiquer le contenu et de le mettre en forme avec des CSS.

En complément de mon article sur la création de boîtes de message, j'ai voulu m'amuser un peu avec et ajouter quelques animations avec (vous l'aurez deviné) jQuery. L'idée est très simple. Animons le message lorsqu'il apparait et éjectons après l'avoir lu.

Cet article est la traduction de l'article jQuery MultiSelect. jQuery MultiSelect est un plugin configurable pour jQuery. Il a été conçu pour transformer des formulaires à sélections multiples en une simple liste déroulante conviviale.

C'est toujours une joie de comprendre comment les choses fonctionnent. Bon, en tout cas c'est mon cas. Alors cette fois-ci, je souhaite vous montrer comment créer des info-bulles simples avec jQuery. Beaucoup de scripts que l'on pêche sur le net utilisent les évènements onmouseover et onmouseout. Ca fait vraiment fouillis et ça me gêne. Et c'est là que jQuery arrive à la rescousse. La manière dont cela fonctionne est très simple : j'utilise les attributs rel et title des ancres pour identifier une info-bulle et savoir ce qu'elle contient.

Les menus déroulants sont une solution idéale pour insérer un grand contenu dans un espace initial réduit. Pendant longtemps, les développeurs se sont contentés d'utiliser les menus déroulants standards des formulaires HTML, mais avec un minimum d'efforts, vous pouvez réaliser un bien meilleur effet avec jQuery et les CSS.

Beaucoup de formulaires peuvent être ennuyeux et plats, ne faites pas entrer les vôtres dans ce mélange. Ce tutoriel va vous montrer comment les épicer avec des classes CSS et des valeurs par défaut qui changent en fonction des éléments sélectionnés d'un formulaire. Le tout avec un peu de jQuery.

Digg.com est l'un des sites sociaux les plus appréciés. Il vous permet de partager des ressources sur le Web. Dans ce tutoriel, nous allons recréer leur formulaire d'inscription avec des fonctionnalités uniques comme les informations sur le champ que vous êtes en train de remplir. La même approche sera utilisée pour afficher les messages d'erreur.

Avez-vous déjà vu de remarquables menus animés avec jQuery (en quelques exemples ici) qui vous donnent envie de créer le votre ? Nous allons en réaliser un en l'animant avec des effets fluides.

Cet article va présenter la création d'un plugin pour jQuery en réalisant un widget de liste déroulante personnalisée. Il est conseillé d'être déjà à l'aise avec l'utilisation de jQuery pour aborder cet article.

Cet article va vous montrer comment réaliser un effet d'accordéon avec du CSS et un peu de JavaScript

Les formulaires de contact sont une partie indispensable de tout site web. Ils sont pour la plupart mis en place sur une page séparée et ils montrent rarement de la créativité, même s'il existe plusieurs façons d'améliorer leur style visuel. Dans ce tutoriel, vous verrez comment créer un formulaire de contact dynamique en utilisant jQuery.

Ceci est un plugin de menu contextuel pour jQuery dont les fonctions sont : implémentation facile, raccourcis clavier, style CSS et méthodes de contrôles.

Dans ce tutoriel, nous partirons d'un en-tête de style dessin animé, créerons deux états pour le contenu et nous animerons la transition entre ces états avec jQuery. Cela va être une grosse tâche ! Je vous préviens tout de suite, il y a beaucoup de code à copier coller. J'expliquerai l'essentiel dans le tutoriel, mais pour des raisons de place, je ne commenterai pas ligne par ligne. Si vous avez besoin d'explications complémentaires, n'hésitez pas à laisser un commentaire sur le forum.

La fonctionnalité "Tableau de bord" sur le système d'exploitation des Macintosh est très agréable et le menu permettant d'ajouter ou retirer des outils joliment fait. Un effet similaire permettrait d'ajouter un ensemble complet de fonctionnalités à un site web avec un simple menu déroulant en haut d'une page.

Dans cet article, nous allons combiner la propriété CSS z-index et la puissance de jQuery pour réaliser une galerie d'images avec l'apparence d'une pile de photos.

Dans cet article, nous allons améliorer notre galerie d'images détaillée dans l'article précédent. Nous allons ajouter un indicateur de préchargement d'images pour obtenir une meilleure apparence de la galerie. Tout cela en même pas 10 lignes de code !

Un plugin AJAX d'exploration de fichiers pour jQuery.

Il existe déjà une multitude de techniques différentes afin 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 2 ensemble.

La fluidité du mouvement est souvent différente entre les sites en Flash lourds et les sites basés sur les standards du Web. Les interfaces flash ont toujours semblées beaucoup plus vivantes - répondant aux interactions avec l'utilisateur de manière dynamique comparé aux sites basés sur les standards du web.
Plus tard, tout a changé, bien sûr, avec une réapparition des effets dynamiques dans les interfaces, aidés par les librairies JavaScript qui le font facilement, librairies comme Prototype, Scriptaculous, Moo,YUI, MochiKit (et je pourrais en citer d'autres). Il est vraiment temps de revisiter la technique des Sprites CSS datant d'il y a quatre ans, et de voir si on peut exprimer un peu de mouvement.
Ce qui suit montre les CSS Sprites2 par l'exemple, la technique sera couverte par cet article.

Voici une astuce simple qui peut être facilement mise en application dans vos sites Web. Avec quelques lignes de code, jQuery fera la transition de la couleur de vos liens vers une autre au passage de la souris.

Certaines vidéos sur YouTube disposent d'une fonctionnalité appelée "Turn the lights down". Lorsque vous cliquez, toute la page s'assombrit à l'exception de la vidéo et vous pouvez regarder la vidéo comme au cinéma. Ce tutoriel va vous montrer comment créer cet effet. Bien entendu, n'hésitez pas à faire part de vos commentaires.

Cet article a pour but de vous montrer comment créer des boîtes ou des légendes coulissantes avec la bibliothèque JavaScript jQuery.

Le framework jQuery est un outil puissant qui a su s'imposer comme étant un framework de référence pour le développement Web. Dans cet article, vous découvrirez comment installer le plug-in Coda-Slider, comment l'intégrer à votre page et comment le configurer.

Cet article montre la mise en place avec jQuery d'un système de navigation par onglets. Le but est simple : plutôt que d'afficher toutes les informations sur la page, ce qui aurait un aspect un peu austère et pourrait rebuter certains visiteurs, nous choisissons de n'en afficher qu'une partie et de mettre des pseudos liens de navigation pour permettre de visualiser les autres parties.

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 afin 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 2 ensemble.

Jean-Philippe Déry est le concepteur de Moobile, le framework MooTools orienté mobile. Il nous propose ici un article permettant de débuter avec Moobile.

Jean-Philippe Déry est le concepteur de Moobile, le framework MooTools orienté mobile. Il nous propose ici un article permettant de créer une application Hello World.

Jean-Philippe Déry est le concepteur de Moobile, le framework MooTools orienté mobile. Il nous propose ici un article permettant de créer des transitions avec des effets de styles.

Jon Bomgardner contribue au projet jxlib.org. Après s'être abonné récemment aux envois d'e-mails des développeurs de MooTools, et après avoir partagé son expérience pour la mise à jour de JxLib pour la version 1.4.2 de MooTools, Aaron Newton (membre de l'équipe MooTools) lui a demandé d'expliquer plus en détail son travail sur JxLib, un framework JavaScript d'interfaçage utilisateur conçu avec MooTools.

Aaron Newton travaille depuis plusieurs années sur la conception d'interfaces utilisateur et apporte beaucoup de contenu et de soutien à l'équipe MooTools. Il propose ici une bibliothèque pour le framework MooTools dont le but est d'automatiser des comportements afin d'alléger le code. Cette bibliothèque s'appelle MooTools Behavior (comportement).

Avec l'apparition des Frameworks JavaScript, la construction de ligthbox est devenue une pratique courante pour améliorer vos galeries d'images, voire de vidéos. Cet outil permet de visionner une série d'images dans un pop up d'un design bien plus agréable qu'une simple page HTML, et avec navigation intégrée.

Cet article vous montre comment mettre en place facilement des curseurs de réglage de type Facebook en utilisant les technologies JavaScripts (Mootools) et les feuilles de style.

Cet article est une introduction au framework JavaScript Dojo. Il en décrit les bases ainsi que les bibliothèques complémentaires Dijit et Dojox.

Cet article décrit le système de build de Dojo permettant d'optimiser les performances d'une application Dojo. Il explique les raisons du build et en donne un exemple en utilisant Ant.

JDBC, ADO.NET, PDO, autant d'acronymes pour des couches de connexions aux données en Java, .NET ou PHP. Aujourd'hui chaque langage ou Framework propose sa couche « data ». Et ce qui était réservé, il y a encore quelques années, à une démarche serveur devient indispensable côté Client, dans nos navigateurs.
Consommer des données. Pas spécialement des données issues des SGBD mais plutôt tout type de données, à partir du moment où on dispose... d'une source de données !
Rapidement chaque framework Javascript a proposé son API Data pour unifier l'interrogation, la lecture, l'écriture et la sauvegarde de ces données, puis leur liaison avec les composants graphiques. Dojo n'y échappe pas, son API se nomme dojo.data , et je vous propose de la découvrir dans ce premier article d'une série de 2. Vous découvrirez progressivement toutes les possibilités des stores, et sous son aspect généraliste cet article se veut complet. Ainsi à l'issue de sa lecture chacun pourra porter un jugement sur cette api et pourra la manipuler sans encombre.

Cet article a pour but de présenter comment concevoir une application JavaScript en utilisant la programmation orientée objet et de montrer comment le framework Dojo permet de simplifier cette écriture.

Neil McGuigan propose régulièrement des trucs et astuces pour l'utilisation du framework JavaScript ExtJS. Ces idées lui viennent de ses propres expériences et il partage la solution qu'il a trouvé pour palier à certains cas problématiques.

Alex Young a décidé de lancer une série de tutoriels sur AngularJS pour vous faire découvrir cet outil.

Partie 1 Partie 1 - Google, Twitter et AngularJS Commentez
Partie 2 Partie 2 - créer un lecteur de flux RSS Commentez

Alex Young a décidé de lancer une série de tutoriels sur Backbone.js qui vous guidera à travers la création d'une application Web monopage possédant une implémentation personnalisée de Backbone.sync.

Partie 1 Partie 1 - environnement de développement Commentez
Partie 2 Partie 2 - les API Google et RequireJS Commentez
Partie 3 Partie 3 - authentification avec OAuth2 Commentez
Partie 4 Partie 4 - Backbone.sync Commentez
Partie 5 Partie 5 - affichage des listes Commentez
Partie 6 Partie 6 - créer des listes Commentez
Partie 7 Partie 7 - modifier des listes Commentez
Partie 8 Partie 8 - supprimer des listes Commentez
Partie 9 Partie 9 - les tâches Commentez
Partie 10 Partie 10 - oh non, pas plus de tâches Commentez
Partie 11 Partie 11 - Spies, Stubs et Mocks Commentez
Partie 12 Partie 12 - tester avec Mocks Commentez
Partie 13 Partie 13 - routage Commentez
Partie 14 Partie 14 - personnaliser l'interface Commentez
Partie 15 Partie 15 - mettre à jour, purger Commentez

Paul Underwood nous explique dans ce tutoriel comment utiliser l'API JavaScript full screen sur des éléments HTML.

Enyo est un framework pour ordinateurs de bureau et mobiles qui utilise JavaScript et HTML5, développé par HP et la communauté open source. Robert Kowalski est un développeur qui apprécie le JavaScript. Il aime explorer divers frameworks et c'est d'ailleurs ce qu'il a fait avec le framework Enyo. Aujourd'hui il désire nous apprendre à maîtriser efficacement ce dernier.

Partie 1Partie 1 - kind, contrôles, événements, accesseurs et constructeurs Commentez
Partie 2Partie 2 - components, chargement, propriétés publiées et compilation Commentez

L'article de Rod Vagg a pour but d'expliquer le mécanisme d'Ender et de le démystifier. Ender est un outil de construction pour le regroupement des bibliothèques JavaScript dans un seul fichier. Le fichier résultant constitue un nouveau "framework" basé sur le modèle de collection d'éléments du DOM de jQuery.

Rialto est un framework orienté vers les applications de gestion. Cet article montre la mise en oeuvre des principaux widgets.