What is the 'new' keyword in JavaScript Web Developer Introduction To Features of JavaScript "Function" Objects We can execute the function as if the function name has been replaced by the pointer name. So above, the line ptr("hello"); has the same meaning as this: myFunction("hello"); Since only pointer is stored (not the actual function itself), when we change the function object itself, all pointers pointing to that function will see the changes. Where has the old function gone? If we want to save it, we can assign a pointer to it before changing it. Example 6A: Run example. Be careful, the example below won't work because instead of modifying the function, the code below creates another function which is called myFunctionPtr. You can only call a nested function locally. In cases like this, the compiler will first look on the local address space, so it will use the nested calculate function.
Jquery Mobile – PhoneGap – Retours d’expérience et bonnes pratiques. Lors du développement d’une application mobile, nous sommes souvent confrontés au choix “application native” ou “site web mobile”. Dans cet article, nous allons présenter l’approche que nous avons eu pour le développement d’une application mobile qui mixe à la fois un framework html mobile classique avec l’utilisation de JQuery Mobile ainsi que des fonctionnalités natives grâce à PhoneGap. Nous verrons ensuite les bonnes pratiques que nous avons pu faire ressortir ainsi que les limites rencontrées. Notre application Le projet a pour but d’inventorier divers biens (matériel informatique,etc) via un appareil mobile. - Être multiplateforme mobile (Android, iOS, Windows Phone) - Avoir une version de l’application packagée avec des fonctionnalités natives (utilisation de l’API caméra pour scanner des codes barre) - Nous ne devions pas re-coder spécifiquement pour chaque plateforme l’application. Le choix de JQuery Mobile Retours d’experience Les points forts de JQuery Mobile sont : Composants Cache
Five ways to create objects… 1. Simple Object Literal myApp.notepad = {}; myApp.notepad.writeable = true; myApp.notepad.font = 'helvetica'; myApp.notepad.setFont = function(theFont) { myApp.notepad.font = theFont; } 2. Nested Object Literal 3. myApp.Notepad = function(defaultFont) { var that = {}; that.writeable = true; that.font = defaultFont; that.setFont = function(theFont) { that.font = theFont; } return that; } myApp.notepad1 = myApp.Notepad('helvetica'); 4. myApp.Notepad = function(defaultFont) { this.writeable = true; this.font = defaultFont; this.setFont = function(theFont) { this.font = theFont; } } myApp.notepad1 = new myApp.Notepad('helvetica'); 5. myApp.Notepad = function(defaultFont) { this.font = defaultFont; } myApp.Notepad.prototype.writeable = true; myApp.Notepad.prototype.setFont = function(theFont) { this.font = theFont; } myApp.notepad1 = new myApp.Notepad('helvetica'); The first two examples are best suited for creation of one-time objects. All are useful. Like this: Like Loading...
Writing polyfills in Javascript Introduction Javascript is notorious for having cross-browser compatibility issues. Internet Explorer, Mozilla Firefox, Google Chrome, Safari and Opera all have their own proprietary features and their own subset of the standard features. Different browsers implement each feature in their own way, and this can be a major headache for web developers trying to make things work for everybody. Fortunately, Javascript has enough flexibility and extensibility to bridge some of these gaps between each browser. These bridges are called polyfills. We will create a few simple polyfills to see how they work. What is a polyfill? A polyfill is a piece of code that implements the features that you expect the browser to support natively. Polyfills usually emulate a newer API that provides fallback functionality to older browsers. There are varying degrees of completeness for a polyfill: Perfect polyfills are polyfills that perfectly implement features completely without any side effects. Feature detection
Basic JavaScript Part 3 : Prototypes In previous blog posts, I talked about the rich capabilities of functions and objects in JavaScript. For this post I want to briefly touch on the concept of prototypes. Having a decent understanding of prototypes in JavaScript is highly recommended as they are a very important part of the language. I have to admit that I’m still trying to fully get my head around the concept of prototypes, but writing this blog post is part of my learning process :-). As you probably know, JavaScript is not a ‘classical’ language but a prototypal object language. This means that pretty much everything is an object, including functions. In a previous post, I showed how to use constructor functions for creating new objects. This constructor function adds two properties and one method to the objects that we created. Podcast.prototype.download = function() { console.log("Downloading podcast ..."); } As already mentioned, we can now simply call the download method that we added to the prototype.
Isomorphic JavaScript: The Future of Web Apps By Spike Brehm This post has been cross-posted on VentureBeat. At Airbnb, we’ve learned a lot over the past few years while building rich web experiences. We dove into the single-page app world in 2011 with our mobile web site, and have since launched Wish Lists and our newly-redesigned search page, among others. Each of these is a large JavaScript app, meaning that the bulk of the code runs in the browser in order to support a more modern, interactive experience. This approach is commonplace today, and libraries like Backbone.js, Ember.js, and Angular.js have made it easier for developers to build these rich JavaScript apps. JavaScript Grows Up Since the dawn of the Web, the browsing experience has worked like this: a web browser would request a particular page (say, “ causing a server somewhere on the Internet to generate an HTML page and send it back over the wire. The Single-Page App Trouble in Paradise Performance Maintainability A Hybrid Approach Routing
Basic JavaScript Part 2 : Objects In a previous blog post, I showed some of the rich capabilities of functions in JavaScript. For this post I want to have a brief look at objects in JavaScript. Let’s start with a basic example: When you’ve already seen some kind of data in JSON format, this might look familiar. console.log(podcast.title); console.log(podcast.description); console.log(podcast.link); Hopefully there are no big surprises here. var astronomyPodcast = ['Astronomy Cast', 'A fact based When I want to access the description in the array, I simply go by using the correct index: console.log(astronomy[1]); // outputs the description No big deal so far. console.log(podcast['description']); The sole difference here is that we are using the name of the property instead of a numeric index. for(var i in astronomy) { console.log(astronomy[i]); } This outputs every value contained by the array. for(var i in podcast) { console.log(podcast[i]); } Methods A method on an object is simply a property that contains a function. Closing
Converting an existing Backbone.js project to Require.js | Eventual Consistency Recently, I've undertaken the task of converting a rather large Backbone.js app to using Require.js. Since the process can get tricky at times, here's a quick recap of what I had to do to get it done. 0. Why use Require.js in the first place? Most projects start small. A couple of script tags that include jQuery (or Zepto, or whatever else you are using), a couple of plug-ins, and your own code. Require.js helps us define exactly what our component depends on, almost like "regular" imports in other development environments. 1. OK so the first part is easy enough. $ bower install requirejs (As a side-note, Bower and require.js work really well together). Once we have the library, we can add it to our project by adding a single <script> tag: that data-main attribute will tell require.js where to start. Also, this would be a good time to remove all other <script> tags you have lying around there. 2. This assumes the following structure: So what have we here? 3. 4. 5. 6.