background preloader

La gestion des événements en JavaScript

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 Related:  Javascript

A Beginner's Guide to Using the Application Cache Introduction It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individual items out of the cache at any point to make room for other things. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface. Using the cache interface gives your application three advantages: Offline browsing - users can navigate your full site when they're offline Speed - resources come straight from disk, no trip to the network. The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. The cache manifest file The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Referencing a manifest file To enable the application cache for an app, include the manifest attribute on the document's html tag:

BNOTIONS We laughed, we learned and we connected with hundreds of developers at the jQueryTO 2013 conference in downtown Toronto. The 2-day conference attracted the top talent in the city and beyond, featuring cutting edge presentations and a stellar speaker lineup, which included Paul Irish and Addy Osmani from the Chrome team and some of the biggest names in the jQuery developer community. (Slides for all the speaker’s presentations follow below.) We used Google+ as a social platform during the event and asked everyone to “check-in” and use “party mode,” so we could crowd-source photos from the conference. Over 2 days, more than 150 photos were uploaded from attendees! A collection of great photos from jQueryTO 2013 “A huge thank you to the 500+ devs that stayed to watch my paint performance keynote at +jQueryTO. We want to thank all the volunteers for their help in running an awesome conference. Louis Lazaris – When jQuery and CSS3 3,181 views

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 ?

Ajax (informatique) - Wikipdia Un article de Wikipédia, l'encyclopédie libre. Pour les articles homonymes, voir Ajax. L'architecture informatique Ajax (acronyme d'Asynchronous JavaScript and XML) permet de construire des applications Web et des sites web dynamiques interactifs sur le poste client en se servant de différentes technologies ajoutées aux navigateurs web entre 1995 et 2005. Ajax combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin d'améliorer maniabilité et confort d'utilisation des Applications Internet Riches (abr. DOM et JavaScript permettent de modifier l'information présentée dans le navigateur en respectant sa structure ;L'objet XMLHttpRequest sert au dialogue asynchrone avec le serveur Web ;XML structure les informations transmises entre serveur Web et navigateur. Outre le XML, les échanges de données entre client et serveur peuvent utiliser d'autres formats, tels que JSON. Dialogue entre serveur et navigateur Le World Wide Web a été créé en 1989, et popularisé dans les années 1990.

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);

Creating a Mouseover Fade Effect with jQuery My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. Add the jQuery script between your head tags. Here is the function. Here is the CSS. And here is the body code. All together you got something that looks like this. Test it out below: NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.

JSONLint - The JSON Validator. 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

twitter/innovators-patent-agreement GitHub HTML5 Grayscale Image Hover Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I've put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify's partner) for the jQuery and Javascript code. View Demo HTML5 Grayscale The Purpose This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. jQuery Code The jQuery code below will look for the target images and generate a grayscale version. How to use it To apply this to your site: include a copy of jquery.js paste the code as shown above set the target image (eg: .post-img, img, .gallery img, etc.) you may change the animation speed (ie. 1000 = 1 second) Compatibility It works with any browser that support HTML5 and Javascript such as Chrome, Safari, and Firefox. Credits

Frontend Single Point of Failure | Dean Hume At this year's Velocity Europe conference, I watched a great talk by Google's Patrick Meenan about 3rd party scripts and frontend Single Point of Failure (SPOF). A single point of failure is a part of a system that, if it fails, will stop the entire system from working. Quite often, you may add 3rd party scripts such as jQuery, social sharing buttons or Ad tracking scripts to your website with the best intentions, but depending on the way that these scripts are loaded you could potentially create a frontend single point of failure that can block the entire site! If these 3rd party scripts are not implemented and deployed properly they pose a significant risk for the websites that host them. Once you have downloaded and added the plugin to Chrome, simply navigate to your desired webpage. Click on the plugin and you will be presented with a list of the blocking scripts. As you surf the web with this plugin enabled, you may notice how many websites have blocking scripts on their pages!

Related: