Superheroic JavaScript MVW Framework Understanding JavaScript’s this keyword | JavaScript, JavaScript (In Portugese) The JavaScript this keyword is ubiquitous yet misconceptions abound. What you need to know Every execution context has an associated ThisBinding whose lifespan is equal to that of the execution context and whose value is constant. 1. 2. a) Invoke as a methodthis is the baseValue of the property reference b) Invoke as baseless function callthis is the global object (or undefined in strict mode) The same applies to self invoking functions: c) Invoke using Function.prototype.callthisis passed by argument d) Invoke using Function.prototype.applythis is passed by argument e) Invoke a constructor using newthis is the newly created object 3. What you might want to know This section explores the process by which this gets its value in the functional context – using ECMA-262 version 5.1 as a reference. Lets start with the ECMAScript definition of this: The this keyword evaluates to the value of the ThisBinding of the current execution context. from ECMA 5.1, 11.1.1 How is ThisBinding set? 1.
toDataURL, Canvas, and SVG Monday, October 5th, 2009 <p>I’m a fan of all the new ways of drawing on the web. I consider myself a Canvas evangelist, an SVG evangelist, and an evangelist for the new CSS Animation work going on. When asked “SVG or Canvas” I’ve long felt the right answer is: “Yes” :) Canvas is great at pixels, SVG is great at vectors, ’nuff said. Give me my scriptable image tag (Canvas) AND my easy scene graph (SVG). Along these lines, I was delighted to attend a recent presentation by Samuli Kaipiainen and Matti Paksula from the University of Helsinki at SVG Open 2009. First, they showed apps built with SVG that should have used Canvas and vice versa to identify when to use one or the other. They then showed a Space Invaders game written with SVG that obviously should have used Canvas instead: there’s no mouse interaction, it’s keyboard driven, and it needs rapid pixel-based updates since it’s a game: Samuli and Matti end their paper with the following quote:
jQuery datePicker home A flexible unobtrusive calendar component for jQuery Welcome to the homepage for version 2 of the jQuery datePicker plugin. This is an clean, unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages. Requirements Note about using with older versions of jQuery The datePicker is compatible with jQuery 1.1+. Download The latest version of the date picker will always be available through the googlecode project downloads page, alternatively you can download it below. Usage Simply reference the relevant files at the head of your page like so: (note that I am using IE's conditional compilation to include the bgiframe plugin as it isn't necessary for other browsers so it seems pointless for them to download it) Then simply instantiate the date picker as you like - see the demos below for inspiration... Documentation Demos A picture is worth a thousand words and so is a demo! simple datePicker simple datePicker with today selected renderCalendar
JRE Emulation Reference - Google Web Toolkit - Google Code GWT includes a library that emulates a subset of the Java runtime library. The list below shows the set of JRE packages, types and methods that GWT can translate automatically. Note that in some cases, only a subset of methods is supported for a given type. Appendable append(char), append(CharSequence), append(CharSequence, int, int) ArithmeticException ArithmeticException(String), ArithmeticException() ArrayIndexOutOfBoundsException ArrayIndexOutOfBoundsException(), ArrayIndexOutOfBoundsException(int), ArrayIndexOutOfBoundsException(String) ArrayStoreException ArrayStoreException(), ArrayStoreException(String) AssertionError AssertionError(), AssertionError(boolean), AssertionError(char), AssertionError(double), AssertionError(float), AssertionError(int), AssertionError(long), AssertionError(Object) Boolean Boolean(boolean), Boolean(String), parseBoolean(String), toString(boolean), valueOf(boolean), valueOf(String), booleanValue(), compareTo(Boolean), equals(Object), hashCode(), toString() Byte
Introduction to RequireJS In this tutorial we are going to take a look at RequireJS, an AMD compatible asynchronous script loader that is incredibly powerful. In my experiments with RequireJS I've hugely enjoyed working with it and will be using it heavily in my future development. This is a fairly heavy post as far as complexity goes, but please do stick with it. I struggled to get my head around RequireJS and AMD for a long time but once it "clicks" it is really awesome. The basic use case for RequireJS is as a basic script loader, but in this tutorial I wont concentrate on that, but on its uses for modular development. To do this, we are going to build an app (sort of - it's all very basic snippets of code) that has dependencies. Firstly, create your project directory and the structure within. ├── app.js ├── index.html ├── lib │ ├── modules │ │ └── template.js │ ├── require.js │ └── underscore.js app.js is my main file, we will look into this shortly.lib/modules is where all my self-written modules will go.
Google Closure: How not to write JavaScript At the Edge of the Web conference in Perth last week I got to catch up with Dmitry Baranovskiy, the creator of the Raphaël and gRaphaël JavaScript libraries. Perhaps the most important thing these libraries do is make sophisticated vector graphics possible in Internet Explorer, where JavaScript performance is relatively poor. Dmitry, therefore, has little patience for poorly-written JavaScript like the code he found in Google’s just-released Closure Library. Having delivered a talk on how to write your own JavaScript library (detailed notes) at the conference, Dmitry shared his thoughts on the new library over breakfast the next morning. “Just what the world needs—another sucky JavaScript library,” he said. When I asked him what made it ‘sucky’, he elaborated. For the rest of the day, to anyone who would listen, Dmitry cited example after example of the terrible code he had found when he went digging through Closure. “I’ll make you a deal,” I told him. The Slow Loop return ! return !
Adequately Good - JavaScript Module Pattern: In-Depth - by Ben Cherry The module pattern is a common JavaScript coding pattern. It's generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I'll review the basics and cover some truly remarkable advanced topics, including one which I think is original. The Basics We'll start out with a simple overview of the module pattern, which has been well-known since Eric Miraglia (of YUI) first blogged about it three years ago. If you're already familiar with the module pattern, feel free to skip ahead to "Advanced Patterns". Anonymous Closures This is the fundamental construct that makes it all possible, and really is the single . (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }()); Notice the () around the anonymous function. Global Import JavaScript has a feature known as . Luckily, our anonymous function provides an easy alternative. Module Export Advanced Patterns Augmentation Sub-modules
Pourquoi générer le code JavaScript est une fausse bonne idée. Bonjour. En lisant le forum et en répondant aux questions, je me suis dit qu'une petite mise au point semblait nécessaire. Souvent, dans nos développements, nous avons un serveur dynamique PHP, ASP, JAVA, C#, Ruby, etc. Il est très facile et tentant de générer les divers éléments dont on a besoin directement avec le langage de ce serveur. C'est simple, ça apporte des facilités mais ce n'est pas toujours aussi efficace qu'on le pense. Lorsqu'on crée le code HTML de la page, on place au fur et à mesure le code JavaScript dont on a besoin en incluant directement dans celui-ci, tout comme pour le HTML, les valeurs des variables du langage hôte. Code php : Parmi les avantages, le regroupement de tout le code concernant un point précis. Autre avantage, on peut très facilement ne produire que le code JavaScript nécessaire à ce besoin. Bref, je ne vais pas énumérer les avantages et encore moins les inconvénients. Mon propos est juste de montrer pourquoi cette idée est une fausse bonne idée.
google analytics 10s update / bounce rate Written by Brian Cray on April 12th, 2011 Google Analytics has a major problem with the way it calculates its Time On Site metric: its based on the length of time between a user entering your site and their last page view. Can't see the holes yet? Here are 2 scenarios where this becomes a major problem (Bob will be our user): Worst case scenario In the above scenario Bob enters your site, loyally reads an article for 2 minutes and 13 seconds, saves it to his browser boomarks, then leaves. Another bad scenario Let's say Bob enters your site and even visits a second page, spending a total of 2 minutes and 13 seconds on your site before leaving. Google's calculation of Time On Site and Bounce Rate is limited by its unit of measure: the Pageview. Solution With Google's Event Tracking API, we'll tell Google Analytics that Bob is still on our site every 10 seconds. Javascript magic Paste this javascript snippet right before </body> in your HTML pages. Conclusion
Javascript Territory - Jster Javascript Catalog A JavaScript Module Pattern Eric Miraglia (@miraglia) is an engineering manager for the YUI project at Yahoo. Eric has been at Yahoo since 2003, working on projects ranging from Yahoo Sports to YUI. For the past several years, Eric and his colleagues on the YUI team have worked to establish YUI as the foundation for Yahoo’s frontend engineering work while open-sourcing the project and sharing it with the world under a liberal BSD license. Eric is an editor and frequent contributor to YUIBlog; his personal blog is at ericmiraglia.com. Prior to working at Yahoo, Eric taught writing at Stanford and elsewhere and led frontend engineering teams at several startups. Global variables are evil. Douglas Crockford has been teaching a useful singleton pattern for achieving this discipline, and I thought his pattern might be of interest to those of you building on top of YUI. 1. YAHOO.namespace("myProject"); This assigns an empty object myProject as a member of YAHOO (but doesn’t overwrite myProject if it already exists). 2.
Asynchronous CommonJS Modules for the Browser (and Introducing Transporter) | SitePen Blog Modules are an integral architectural piece of robust application development since they allow individual components to be developed with proper dependency management. Modules can specify dependencies and these can be automatically resolved and loaded to bring various pieces together automatically. In application development this is vastly more scalable and easier than having to track all the different dependencies and manually load modules or insert script tags. The CommonJS module format is increasingly ubiquitous as the de facto module format for JavaScript. However, if CommonJS modules, by themselves, are directly executed, they require synchronous loading of modules. Synchronous loading is known to be very problematic in the browser since it locks the browser user interface, requires eval-based compilation of scripts which confuses debuggers, and is less efficient than using standard script tags. Automated Module Wrapping Dojo, RequireJS, CommonJS
Adapter jQuery à vos besoins Cet article se base sur l'acquis. Je vous conseille de lire ou de relire : Lors de la lecture de la FAQ jQuery, j'attire plus particulièrement votre attention sur la partie concernant jQuery.sub() . Nous allons revisiter l'espace de noms dvjh et nous servir de jQuery.sub() pour encapsuler une version personnalisée de jQuery. Rappel : les fenêtres de code s'ouvrent en cliquant sur le bouton placé à droite. jQuery.sub() produit un clone de l'objet jQuery, il a été créé pour deux types d'utilisations spécifiques : modifier les méthodes jQuery sans détruire les méthodes d'origine ; faciliter l'encapsulation et définir un espace de noms pour les plugins jQuery. Nous l'écrirons donc dorénavant en utilisant un clone de jQuery : Espace de noms dvjh Sélectionnez var dvjh = (function($){ // Propriétés, méthodes et objets privés return { // Propriétés, méthodes et objets publics } ; })(jQuery.sub()) ; Modification du prototype du clone Rendre le $ disponible Soupe de jQuery $(function(){ dvjh1.