JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.
- Wikipedia

JavaScript and ECMAScript are usually considered as being synonyms, but ECMAScript is basically JavaScript subset.

Complete JavaScript implementation consists of:

• The Core (ECMAScript)
• The Document Object Model (DOM)
• The Browser Object Model (BOM)

ECMAScript

ECMAScript language is language described in ECMA-262 specification which latest edition 5.1 is released in June 2011.

ECMAScript is script language serving as a base on which more powerful scripting languages can be built through extensions. Most often those languages are implemented in host environments and functionality of the extensions are specific to the environments.

Web browsers are one kind of host environment with JavaScript implementation which, as mentioned above, consists of ECMAScript, DOM and BOM.

* Incomplete implementations

The Document Object Model (DOM)

The DOM is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated
- W3C

The DOM maps out an entire page as a three like hierarchy of nodes. Each part of an HTML page is a type of a node containing other nodes or data.

The DOM allows developers to manipulate its content and structure. Nodes can be removed, added, replaced, and modified by using the DOM API.

DOM Levels

DOM Levels represent W3C recommendations for the DOM implementations. There have been 3 DOM level recommendations so far (DOM4 underway). The DOM is not JavaScript-specific. It has been implemented in other languages, as well. Nevertheless, it makes up a large part of the JavaScript language.

DOM Level 1

DOM Level 1 came to existence in 1998. It consists of two modules:

• DOM Core – provides minimal set of objects and interfaces for accessing and manipulating parsed HTML and XML documents (document objects).
• DOM HTML – extends the DOM Core to describe objects and methods specific to HTML documents.

DOM Level 2

DOM level 2, besides upgrading the DOM Core 1 and DOM HTML 1, introduced four new DOM modules to deal with new types of interfaces:

• DOM Views - defines interfaces that allows programs and scripts to access and update a content of a document.
• DOM Events - defines interfaces for events and event handling (generic event system for programs and scripts).
• DOM Style - defines interfaces that allows programs and scripts to dynamically access and update the content of style sheets.
• DOM Traversal and Range - defines interfaces to traverse and manipulate nodes in a document tree.

DOM Level 3

The DOM Level 3 further extended the DOM2 Core (support for all of XML 1.0) and DOM2 Events (added keyboard events and handling). Also, DOM3 added following modules:

• DOM3 Load and Save - defines a set of interfaces for loading and saving document objects.
• DOM3 Validation - defines a way to dynamically update content and structure of a document while ensuring that the document remains valid. Guided construction and editing of the (XML) documents.
• DOM3 XPath - defines API for accessing DOM tree by XPath expressions.

Like JavaScript, other languages (like XML-based Scalable Vector Graphics – SVG 1.0, Mathematical Markup Language – MathML 1.0, Synchronized Multimedia Integration Language – SMIL, Mozilla’s XML User Interface Language – XUL) also may have their own DOM implementations.

* almost all
** partial

The Browser Object Model (BOM)

Browser Object Model (BOM) is interface that allows access and manipulation of the browser window and access to the computer screen. BOM refers to all the objects exposed as extensions to JavaScript by the web browser as its host environment.

Before HTML5 BOM had no standard it relates to, which led to situation in which each browser has its own implementation of the BOM. Now HTML5 should make the BOM more compatible throughout browsers landscape. Still, even now, there is a subset of the BOM that exists in every browser environment. Some of the objects found in this cross-browser BOM subset are:

• browser capabilities to open (pop up) new browser windows, to move, resize, and close them
• The navigator object – provides information on the browser and its capabilities
• The location object – provides information about URL of the currently loaded page in the browser
• The screen object – provides information about the screen outside of the browser
• The frames object – provides access to all frames and iframes of the current page
• The history object – provides access (though limited) to the previously visited pages
• The XMLHttpRequest and IE’s ActiveXObject objects - Ajax interactions backbones
• cookie support etc.

Pick ups

JavaScript is a scripting language made of:

• ECMAScript, provides core functionality and it is based on ECMA-262 specification
• The DOM, provides methods and interfaces for working with the content of a web page
• The BOM, provides methods and interfaces for interacting with the browser and the computer screen

Levels of support for these three JavaScript parts differs across the web browsers, but substantial subset of each is implemented with ECMAScript leading the way.

Bibliography:

• Professional JavaScript for Web Developers by Nicholas C. Zakas
• Object Oriented JavaScript by Stoyan Stefanov
• JavaScript: The Good Parts by Douglas Crockford
• Mozilla Developer Network
• Wikipedia

Three ways to tell a Git to ignore certain files

Git ignore the Zend Studio way

If you are using Zend Studio 9 with Git plugin that comes with it you should right click file you want ignored, hover over Team option in menu and select Ignore submenu (see picture below). This basically creates .gitignore file in root of the current project and sets file name of the file to be ignored in it or appends it to the file if one already exists.

Git ignore the .gitignore file way

.gitignore file should be set in the root of a project and can be commited to be shared with other collaborators on the project.
In the file should be listed files to be ignored and there are some rules:

# Lines starting with '#' are considered comments.
# Ignore any file named foo.txt.
foo.txt
# Ignore (generated) html files,
*.html
# except foo.html which is maintained by hand.
!foo.html
# Ignore objects and archives.
*.[oa]

The global Git ignore

There are some files which should be ignored forever and in every single project IMO, like Zend Studio/Eclipse project settings.

For those there is a option of setting global .gitignore file.

1. make .gitignore_global (could be named whatever you find suitable) file and place it in a convenient place. I set it in the root folder which holds all projects I work on.
2. add/register it to your global git config like this:
   git config –global core.excludesfile /path_you_chose/.gitignore_global
3. add files to be ignored globally:

# Zend Studio files #
#####################
.buildpath
.project
.settings*

Become a Git ignore guru (: by researching resources in bibliography section below and most of all enjoy ignoring or better by following this guide on Version Control and Git.

Bibliography:

• gitignore(5) Manual Page
• Git Ignore files on Github
• Ignoring files in Git Community book

Version control system is must for every working developer. They are great time savers and must in every team environment, even in one man show teams (you just have to put your self together from time to time (: ).

Me, I prefer Git, but, at the moment, I am using SVN at work on daily basis.

Anyway, there are great resources around www you can use to get up to speed with Git and version control in general.

Starting point in using version control

Getting to know basics behind the idea of version control is starting point on your way to start using one.

Following resources will give you enough information so you can justify to yourself why are you spending time learning another technology (-: :

1. Wikipedia article about revision control – to get general ideas behind version control systems.
2. A visual guide to version control – traditional (centralized) version control systems explained.
3. Intro to Distributed Version Control (Illustrated) – distributed version control system explained.

After those resources mention above you have all you need to start appreciating version control systems and be thrilled to get to learning Git.

Getting experience with Git

Now you need to start using one of the concrete tools. Go with the Git.

This tutorial will get you up and running:

• Easy Version Control with Git – intro tutorial that should set on your way to using Git.

After studying above resource you should have a enough Git skills to start using it in your projects and following resource will be your crouches for the long period of time (-: :

• Git User’s Manual

But, one day ((-:, my man, you will start walking.

More great resources on Git

• Official Git page
• Great video to master Git and workflow by Bart Trojanowski
• Community made book on Git
• Pro Git – free book by Apress

Git in the cloud

Disclaimer 2: spare yourself and do not bother with these for some time if you are beginner. Give yourself time to get comfortable with Git in local first.

It was said to me that one is not considered serious developer if one is not having Github account (and using it, I guess), but I prefer using Bitbucket, which is basically the same as Github except that it offers unlimited private repositories for free while Github offers 0 (zero, nada).

Both of them, Bitbucket and Github, are great web services and helps distributed teams to collaborate without bothering with setting their own Git servers and infrastructure in general.

Take care and control your version.

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.