Posts

Showing posts from July, 2007

JavaScript ElementTraversal proposal

27 July W3 announced a new Working Draft, called: ElementTraversal This is a "new" feature but today it's not cross browser so this is my proposal to have Element Trasversal with every recent browser: (ElementTraversal = function(node){ this.node = node; this.firstElementChild = this.getFirstElementChild(); this.lastElementChild = this.getLastElementChild(); this.previousElementSibling = this.getPreviousElementSibling(); this.nextElementSibling = this.getNextElementSibling(); this.childElementCount = this.getChildElementCount(); }).extend(null, { getFirstElementChild:function(){ for(var c = this.node.childNodes, i = 0, j = (c && c.length) || 0, e; i i++ ){ if(c[i].nodeType === 1) e = c[j = i]; }; return e; }, getLastElementChild:function(){ for(var c = this.node.childNodes, i = ((c && c.length) || 0) - 1, j = -1, e; i > j; i-- ){ if(c[i].nodeType === 1) e = c[j = i]; }; return e; }, ...

JavaScript Blackboard

Does We really need only canvas element to draw something? This is a basic blackboard example that uses my extend.js proposal and my setInterval and setTimeout with arguments fix for Internet Explorer. Just draw something on Blackboard and have fun with JavaScript ;-)

625 bytes to extend JavaScript

These days I've studied (again) JavaScript prototypal inheritance and common extend functions or methods used by different libraries. This post is a summary about my experiments and every example code is based on this script . Probably someone is thinking about my unreadable source code, however it's self packed and quite clear, atleast for me. The goal was to write 2 basic prototypes to extend objects or functions using "best practices" to do them using less chars as possible ... so, goal done ;-) If You're interested about these prototypes logic please tell me, I'll try to find more time to explain better each one. Object.prototype.extend This is the first proposal and it's really simple to use/understand. var a = {a:"a"}, b = {b:"b"}.extend(a); alert([b.a, b.b]); // a,b This is a basic example. Extend prototype works with object itself and return them after a for in loop discarding prototyped methods. function A(value){ this.valu...

Quick Fix - Internet Explorer and toString problems

As You can read on precedent post I'm testing common libraries extend behaviour, both for objects or constructors. One feature that many developers seems to ignore is IE behaviour when an object contains an explicit toString method. Look at this simple example: for(var key in {toString:function(){return "bye bye IE"}}) alert(key); now test them with IE 5, 5.5, 6 or last 7 version. What's up? ... absolutely nothing ... so what the hell? IE doesn't recognize that toString method as explicit one but it " thinks " that's a native one. This means that a lot of extend functions doesn't assign correctly this method if client broser is IE so every extended object will simply have native or prototyped toString method and not new explicit one. How to fix this IE behaviour ? // generic object/instance var o = { a:"a", b:"b", toString:function(){ return "hello IE too" } }; for(var key in o){ // doSttuff ... for exampl...

JavaScript prototypal inheritance using known libraries

JavaScript is a "quite old" scripting language but every day there's some news about its normal behaviour or some common code ... well, today is my round :-) There are a lot of frameworks or libraries We use every day but I think every JS developer should know atleast basic JavaScript prototypal inheritance. It seems to be the ABC of this wonderful scripting language but if You'll read this post I suppose You'll be surprised! Let me start with a simple example about JavaScript inheritance, a constructor A with just one prototyped method and a sort of subclass B that would be extend A one. So, this is the A constructor: function A(){}; A.prototype.constructorIs = function(F){return this.constructor === F}; // alert((new A).constructorIs(A)); // true This is a basic constructor example and every instance will inherit constructorIs method. This one will return instance .constructor and compare them with a generic constructor Function. Well, at this point We need...