La gestion des événements en JavaScript

Cet article est une introduction aux notions nécessaires pour bien comprendre et utiliser les événements en JavaScript. JavaScript est un langage événementiel : le développeur a un contrôle limité sur le flux d'exécution du code, qui est déterminé principalement par les interactions avec l'environnement (activation d'un lien, mouvement de la souris, chargement du contenu du document, …). La gestion des événements est un sujet essentiel dans le cadre de ce langage. Elle reste pourtant assez mal comprise, en partie à cause des lacunes et erreurs d'implémentation des différents navigateurs. Cet article présente les trois grandes familles d'interfaces qui sont aujourd'hui à notre disposition : Le DOM niveau 0, standard de facto hérité de Netscape ; il s'agit de l'interface la plus largement supportée mais aussi la moins puissante. Les concepts présentés dans la suite de l'article sont communs à ces trois familles, sauf indication contraire. L'objet Event target type stopPropagation preventDefault

Utilisez la console JavaScript des navigateurs Concevoir un site dynamique implique de faire appel à JavaScript, langage de plus en plus populaire et puissant. Afin de donner les bons outils aux développeurs web, les navigateurs se sont peu à peu équipés de consoles de développement permettant d'entrer des instructions à la volée, avec bien souvent de l'auto-complétion, de consulter les données en mémoire ou d'explorer les fonctions et variables disponibles. Des commandes plus avancées visent à définir des points d'arrêt et d'inspecter la pile des appels. La console est un outil indispensable lorsque l'on souhaite écrire quelques lignes de JavaScript, ou bien concevoir des scripts plus évolués notamment avec des frameworks tels que jQuery. Accès La console se retrouve bien souvent dans un menu orienté pour les développeurs, à l'aide d'une touche de raccourci, ou dans des extensions spécifiques telles que Firebug pour Firefox. Aperçus Internet Explorer Google Chrome Mozilla Firefox Opera Astuces Fonctions utiles Journal console.log(fruits);

Comment bien coder en Javascript ? Cet article vous montre, au travers de bonnes pratiques, comment obtenir un code Javascript non intrusif, évolutif, accessible, facilitant la maintenance et minimisant les risques d'interaction. Ce document regroupe diverses notions de base et d'autres plus avancées telles que les tests de fonctions, les variables globales, la séparation de la structure, de la présentation, du comportement voire des données, le modèle objet, les littéraux, une introduction à JSON ou encore la gestion des événements. Une bonne page web doit être consultable et entièrement fonctionnelle sans Javascript. Cela veut donc dire que vous ne disposez pas forcément de toutes les fonctionnalités de votre page si ce langage est indisponible. Mauvais code pour un lien d'impression : <a href="#" onclick="window.print(); return false;">Imprimer Résultat (lien présent mais non fonctionnel sans Javascript) : Imprimer Bon code pour un lien d'impression : <script type="text/javascript"><! Salut, ça va ?

Menu de navigation avec amélioration progressive L'ouvrage "Adaptive Web Design" d'Aaron Gustafson, dont nous avons fait le retour de lecture récemment est un excellent condensé du principe de développement par "Amélioration Progressive" (progressive enhancement) dans le Web. Nous allons tenter de comprendre cette approche et en quoi elle est primordiale à travers un cas concret : la conception d'un menu de navigation responsive. Amélioration progressive ? L'amélioration progressive, ou "web design adaptatif", n'est pas une question de compatibilité. L'enjeu est plutôt de comprendre : de quoi est composé le parc des agents utilisateurs et périphériques susceptibles de tirer information de votre site (navigateurs, moteurs de recherche, synthèses vocales, imprimantes, smartphones) le plus petit dénominateur commun à tous les agents utilisateurs afin que le contenu soit toujours restitué d'enrichir progressivement l'expérience utilisateur pour les agents utilisateurs qui supportent ces améliorations Voir la démonstration Les microdonnées