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

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 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: Frontend Single Point of Failure 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!

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. Thinking Async Here's the rub: when you load JavaScript from a third party you should do it asynchronously. You might want to load your own scripts asynchronously too, but for this article let's focus on third parties. There are two reasons for this:

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 Separating JavaScript download and execution Not too long ago, I wrote a post entitled, Thoughts on script loaders[1], in which I discussed my thoughts on the continuing introduction of script loaders such as LABjs and ControlJS. In that post I also mentioned what I thought was the main problem that led to existence of these libraries. That problem is the inability of the developer to control the download of JavaScript files as separate from its execution. After a conversation with Steve Souders about ControlJS, I put together a proposal for a delayed script execution model in browsers[2].

reveal.js - The HTML Presentation Framework HTML Presentations Made Easy Created by Hakim El Hattab / @hakimel Heads Up Review of JS Frameworks — Journey Through The JavaScript MVC Jungle When writing a Web application from scratch, it’s easy to feel like we can get by simply by relying on a DOM1 manipulation library (like jQuery412) and a handful of utility plugins. The problem with this is that it doesn’t take long to get lost in a nested pile of jQuery callbacks and DOM elements without any real structure in place for our applications. In short, we’re stuck with spaghetti code3. Fortunately there are modern JavaScript frameworks that can assist with bringing structure and organization to our projects, improving how easily maintainable they are in the long-run. What Is MVC, Or Rather MV*?

How do I create a video lightbox? / Video and Technical Questions / Knowledge Base - vzaar Support The only prerequisite for adding this effect to your site is that you must have FTP access to upload the JavaScript files that are needed. You will need to replace parts of this code with your own video details. All of these are marked in capital letters. Feature sniffing Internet Explorer - Snippets Pretty much all web developers should know by now that browser sniffing is evil. If you don’t know why, you should definitely read Richard Cornford’s excellent treatise Browser Detection (and What to Do Instead). Feature detection, where you look for the specific feature you want to use, is much safer; taken to the extreme, it can end up like the rather clever Modernizr project. But what if you really do just want to know if your code has the misfortune to be running on IE7?