You can read further on that matter in article on event order at quirksmode.org, which is great site and you should certainly spend some time over there if you already haven’t.

Let’s get down to the essence of this article, which is handling problem of form not submitting when Enter is pressed while some text input field has focus and solution you could find in jQuery.

You have and form:

<form id="signup" action="/process/login-form" method="post">
  <label for="answer1">What are you think about blue?</label>
  <input id="answer1" name="answer1" type="text" />
  <input type="submit" value="Answer" />
</form>

and it is bugged down (I have no idea if this phrase exists) as explained above, you are using jQuery (please, don’t use jQuery just to overcome this obstacle – it is non sense) and you are thinking about your solutions.

One of the solutions could be:

	$("#answer1").keydown(function(event){
		if(event.keyCode == 13 && jQuery.support.submitBubbles) {
			$(this).parents("form").submit();
		};
	})

What that code does is it binds keypress event to the input field of interest and checks on keypress (when that field has focus) if event code corresponds to the keyCode (13) of the Enter key and if it does it sends submit to the parent form, which could be called by its id, but this way you can address different input fields with same class from different forms, which is not rare on web today, to have a whole bunch of forms in one page.

jQuery.support object is “A collection of properties that represent the presence of different browser features or bugs.” as it is said in jQuery reference. It relies on feature detection (not browser detection) which is recommended and  safer method.

I hope you find this article helpful.

Understanding big and little endian byte order

I am really impressed how some people know to deliver such a great contribution to cyberspace.

Bravo and thank you to the author Kalid Azad.

Because of its nature, JavaScript has different way of implementation of the Singleton Pattern than “traditional” object-oriented languages like Java, C#, PHP etc.

To get proper Singleton implementation (in JavaScript) we have to fulfill following demands:

• once instantiated, attempt to instantiate same class again should actually return the first object
• instance should not be rewritable

function Test() {
	// private
	var instance = this;

	// rest of the code

	// overwriting itself (constructor) from global space
	// so that following calls to new Test();
	// actually returns private variable instance
	Test = function () {
		return instance;
	};
}

obj1 = new Test();
obj2 = new Test();

obj1 === obj2 // result: true

This pattern uses power of closures to preserve global namespace from cluttering and instance from being overridden from that same space, the global one.

In above primer we have Test class. In it there is instantiated variable instance with var keyword so that it becomes private variable. Then this is assigned to it so that it could be called from inner functions and most of all inner Test function which will override its parent Test (because of the same name) constructor from global namespace once the parent gets instantiated.

That’s the reason obj1 and obj2 identity comparison returns true, because second call new Test() actually just returns instance variable. Keeping in mind that objects are passed by reference in JavaScript, it’s obvious that obj1 and obj2 are just different name pointing to the same address in memory.

function Test() {
	// private
	var instance = this;

	// rest of the code
	// ...

	// private
	var oneVeryImportanFunction = function(){
		alert(typeof instance);
	}

	// public
	this.getType = function(){
            oneVeryImportanFunction();
	}

	// overwriting itself (constructor) from global space
	// so that following calls to new Test();
	// actually return private variable instance
	Test = function () {
		return instance;
	};
}

obj1 = new Test();
obj2 = new Test();

obj1 === obj2;

obj2.getType();

Usually, “By convention, we make a private that” = this ” variable. This is used to make the object available to the private methods. This is a workaround for an error in the ECMAScript Language Specification which causes this to be set incorrectly for inner functions.” ^crockford , but here in oneVeryImportanFunction() function we could use instance variable as it serves same thing like that, but it has different name.

The complete Test class:

function Test(name){

	var that = this;

	var fname;

	var __construct = function(passedName){
		fname = passedName;
	}(name);

	this.getName = function(){
		return fname;
	};

	this.changeText = function(){
		document.getElementById("name").innerHTML = this.getName();
	}
}

var Test = new Test("Dusan");
Test.changeText();

And html:

<html>
	<head>
	</head>
	<body>
		<div id="name"></div>
	</body>
</html>

Output is of course: Dusan

Whole point is within few lines of code:

var __construct = function(passedName){
	fname = passedName;
}(name);

__construct is private self invoking function and it is passed name param during Test object construct. It sets fname var to name param value.

It could easily be something more complex like config object:

function Test(configObject){
	var __construct = function(params){
		fname = params["fname"];
		lname= params["lname"];
	}(configObject);

This is anything, but a complex, but you got an idea.

Notes:

• You can name __construct function as you wish. I named it like this for clarity and because of my PHP roots.
• __construct returns void so there is no possibility of revoking it. It becomes typeof “undefined”.
• It has to be defined like var chooseContructorName = function(){…} to stay private and to parse as self invoking.

Enjoy.

I am looking forward to logging my thoughts on web development, programming etc.

It’ll be fun.