Yahoo YUI Compressor vs. Microsoft AJAX Minifier vs. Google Closure Compiler - Nick Berardi's Coder Journal A little more than a year and half ago I created a MSBuild Task for the YUI Compressor that was very well received, and even highlighted on the YUI Compressor site. At the time of writing that article YUI Compressor was king of the hill, and for the most part the only game in town that was really designed for production level use. Since then a number of new competitors have been released by Google and Microsoft, and I wanted to see how they stacked up against the YUI Compressor. Setup For these tests I wanted to test a pretty complex set of JavaScript to really stretch the limits of each of the optimizers. So I choose jQuery 1.4 as the subject for the tests. The setup of my machine is as follows: Windows 7 Pro (x64) Java 6 Update 17 .NET 3.5 SP1 Each optimizer and the version: Testing I ran the following from the command line on jQuery 1.4 raw source code to produce the following files. jquery-1.4.js Microsoft ajaxmin jquery-1.4.js -o microsoft.js microsoft.js Microsoft (Hypercrunch) Yahoo
Constructores en Javascript considerados ligeramente confusos Traducido del Original en el blog code.h(oe)kje. Considerando la afirmación de Flanagan 2006, (página 111) que aparece en una pregunta de comp.lang.javascript el mes pasado: En javascript, cada objeto tiene una propiedad constructor que se refiere a la función constructor que inicializa el objeto. Suena bien: hace que los constructores parezcan estáticos como las clases en Java. Pero la vida no es tan simple: ¿Qué pasa? Objetos y métodos Los objetos en Javascript son simples bolsas de propiedades con nombre que pueden ser leidas y escritas. Las funciones en javascript son objetos de primera clase. Prototipos El prototipo (prototype) de un objeto es una propiedad interna a la que me referire como "[[Prototype]]" (como en Ecma-262). Los objetos javascript pueden delegar propiedades a su [[Prototype]] (y su [[Prototype]] puede hacer lo mismo; y así hasta Object Prototype). Búsqueda de propiedades ¿Qué está pasando? Esto es lo que las propiedades prototype y [[Prototype]] parecen. Notas al pie
Prototypal Inheritance Douglas Crockford www.crockford.com Five years ago I wrote Classical Inheritance in JavaScript (Chinese Italian Japanese). It showed that JavaScript is a class-free, prototypal language, and that it has sufficient expressive power to simulate a classical system. My programming style has evolved since then, as any good programmer's should. I have learned to fully embrace prototypalism, and have liberated myself from the confines of the classical model. My journey was circuitous because JavaScript itself is conflicted about its prototypal nature. new () produces a new object that inherits from .prototype This indirection was intended to make the language seem more familiar to classically trained programmers, but failed to do that, as we can see from the very low opinion Java programmers have of JavaScript. Fortunately, it is easy to create an operator that implements true prototypal inheritance. function object(o) { function F() {} F.prototype = o; return new F(); } if (typeof Object.create !
Ajax File Upload Response Handling A while ago, I wrote an article on Ajax File Uploading - the method of uploading a file without refreshing the page using a hidden iframe. Since then people wanted to know how to get information about the uploaded file back into the javascript application. Consider this the second part of that article - this post will tell you how to get the information about the uploaded file in javascript. A Sample Application For example, say you are building a photo gallery. The Code And the server side(PHP in this case) script will look something like this... <? Here we are printing the data that should be given to JS directly into the iframe. Explanation Lets see whats happening here - a play by play commentary... document.getElementById("upload_target").onload = uploadDone; Set an event handler that will be called when the iframe has compleated loading. var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML; var data = eval("("+ret+")"); These two lines are an eyesore.
Using Prototype Property in JavaScript Exclusive offer: get 50% off this eBook here Object-Oriented JavaScript — Save 50% Create scalable, reusable high-quality JavaScript applications and libraries by Stoyan Stefanov | August 2008 | AJAX Web Development In this article by Stoyan Stefanov, you'll learn about the prototype property of the function objects. The following topics are discussed in this article: Every function has a prototype property and it contains an objectAdding properties to the prototype objectUsing the properties added to the prototypeThe difference between own properties and properties of the prototype__proto__, the secret link every object keeps to its prototypeMethods such as isPrototypeOf(), hasOwnProperty(), and propertyIsEnumerable() The functions in JavaScript are objects and they contain methods and properties. If you define a simple function foo() you can access its properties as you would do with any other object: >>>function foo(a, b){return a * b;}>>>foo.length >>>foo.constructor Function() "object" "foo"
An Introduction to YUI With jQuery dominating the JavaScript framework landscape, many newcomers aren't exposed to other JavaScript frameworks. The truth is that there are a plethora of excellent JavaScript frameworks available, like MooTools, Prototype, Ext JS, and...YUI! While not as well known as some of the other libraries, YUI provides a wealth of tools for the web developer. Today, we're going to take a quick tour of some of its features. What is YUI? YUI (short for Yahoo User Interface and pronounced Y-U-I) is an open source JavaScript and CSS library developed primarily by Yahoo.com. There are currently two supported versions of YUI. Why YUI? So you may be wondering, why should I even consider learning another JavaScript framework? Ok, now that you've heard a little about YUI, let's start looking at some code! Including the Library YUI allows for a lot of flexibility when it comes to loading the library; let's look at a couple ways you can do it. Method 1: YUI 3 Seed File Method 2: YUI 3 Configurator Events
Ajax File Upload You might have seen Ajax File Uploading in some sites. The basic idea is to upload a file without refreshing the page. Some sites go even further by providing details on how much percentage is uploaded, etc. It is very easy to achieve this effect using javascript. First off, I did not like using the term 'Ajax' when describing this method. But there is no other word that can be used. Theory The basic idea behind this effect is to redirect a form's action into a hidden IFrame. See the small squire? Code JavaScript function init() { document.getElementById('file_upload_form').onsubmit=function() { document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe } } window.onload=init; This should be in upload.php - the action of the form. <? The code to upload the file must be given here. Update: Part two - Ajax File Upload Response Handling
Using Prototypes in Javascript | TimKadlec.com As mentioned in my previous post, I think using prototypes is powerful enough to deserve a more detailed explanation. To start off, let me say we are talking about the prototype method here, not the JavaScript library. Prototypes allow you to easily define methods to all instances of a particular object. function Pet(name, species){ this.name = name; this.species = species;}function view(){ return this.name + " is a " + this.species + "!" As you can see, by using simply using prototype when we attached the view method, we have ensured that all Pet objects have access to the view method. function Pet(name, species){ this.name = name; this.species = species;}function view(){ return this.name + " is a " + this.species + "!" We set up the Dog object, and have it call the Pet function using the call() method. Moving on, we then give Dog a custom method called bark that only Dog objects have access to. It is important to understand that prototype follows a chain.
Uniform - Sexy forms with jQuery AJAX file upload tutorial In this tutorial I will show you how to create simple AJAX file upload system using PHP and JavaScript. Tutorial info: Bookmark AJAX file upload tutorial Step 1 - AJAX file upload AJAX file upload tutorial First of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. The concept: Create a simple HTML form for file uploadSet the target to an iFrame which is on the actual page but not visibleCall a JavaScript function on form submit to display the animationAfter the PHP part finishes the upload process, then it hides the animation Creating the HTML file: The HTML file we will use in this article is quite simple. Code: <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" > File: <input name="myfile" type="file" /><input type="submit" name="submitBtn" value="Upload" /></form> Besides this we need to add a bit more code to it. <p id="f1_upload_process">Loading... Server side code:
Introduction to Object-Oriented JavaScript Object-oriented to the core, JavaScript features powerful, flexible OOP capabilities. This article starts with an introduction to object-oriented programming, then reviews the JavaScript object model, and finally demonstrates concepts of object-oriented programming in JavaScript. This article does not describe the newer syntax for object-oriented programming in ECMAScript 6. JavaScript review If you don't feel confident about JavaScript concepts such as variables, types, functions, and scope, you can read about those topics in A re-introduction to JavaScript. You can also consult the JavaScript Guide. Object-oriented programming Object-oriented programming (OOP) is a programming paradigm that uses abstraction to create models based on the real world. OOP envisions software as a collection of cooperating objects rather than a collection of functions or simply a list of commands (as is the traditional view). Terminology Namespace Class Defines the object's characteristics. Object Property Method