Namespaces

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 6313

According to Wikipedia: "Namespaces provide a level of direction to specific identifiers, thus making it possible to distinguish between identifiers with the same exact name."

Also this is good article to read, and this article you should also read (focus on "Using an Object Constructor").

For example, let's say we want to have method which we will call it like my.namespace.SomeText.apply(); to achive this first we have to define my:

window.my = window.my || {};

then namespace:

window.my.namespace = window.my.namespace || {};

Don't forget semicolons otherwise you will receive error "Uncaught TypeError: object is not a function".

Whole example would go like this:

window.my = window.my || {};
window.my.namespace = window.my.namespace || {};

(function (ns) {
	var someTextModel = {
			someText: "test"
		}
	
	ns.SomeText = {
		apply: function () {
			ko.applyBindings(someTextModel)
		}
	}
}(my.namespace));

Notice that I executed function with parameter "my.namespace" which means that ns parameter of a function will be my.namespace.

HTML part looks like:

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="/knockout-3.2.0.js"></script>
		<script type="text/javascript" src="/index.js"></script>
	</head>
	
	<body onload="my.namespace.SomeText.apply();">
			Some text: <span data-bind="text: someText"></span>
	</body>

</html>

Here notice onload="my.namespace.SomeText.apply();"

Example you can see here.

---

One more example. 

JS:

window.my = window.my || {};
window.my.namespace = window.my.namespace || {};
window.my.namespace.myTest = window.my.namespace.myTest || {};

(function(ns) {
	function myTest() {
		return {
			iAm: function(param) {
				alert(param);
			}
		}
	}
	window.my.namespace.myTest = myTest;
})(window.my.namespace.myTest)

From console you can write something like:

window.my.namespace.myTest().iAm()

Example you can see here.

---

Another example. Consider following code:

window.my = window.my || {};
window.my.namespace = window.my.namespace || {};

(function () {
	var makeMyMethod = function (myMessage) {
		return {
			doTheAlert: function () {
				alert(myMessage);
			}
		};
	};

	myMethod = makeMyMethod("I am test.");
	
	window.my.namespace = {
		myMethod: myMethod
	}
	
}(window.my.namespace));

window.my.namespace.myMethod.doTheAlert();

With line of code:

window.my.namespace.myMethod.doTheAlert();

We executed method doTheAlert which we "attached" to our namespace with code:

window.my.namespace = {
  myMethod: myMethod
}

Here I wrote little bit more about namespaces.

onLoad

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 4743

Just short note to my self. If getElementById doesn't work, most probably I forgot window.onload, because if page is not loaded yet, and javascript is executed, then my element with ID will not exist. So, html part looks like:

 

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="/arrayAssignment.js"></script>
	</head>
	
	<body>
		Variable <strong>A</strong>: <span id='varA'></span>
		<br/>
		<strong>var b = a</strong>: <span id='b=a'></span>
		<br/>
		b.splice(3);
		<br/>
		Variable <strong>A</strong>: <span id='bSplice'></span>
		<br/>
	</body>

</html>

and javascript part should lok something like:

window.onload = function() {
	var a = [];
	var b = [];
	a = [1, 2, 3, 4]
	b = a;
	document.getElementById("varA").innerHTML = a;
	document.getElementById("b=a").innerHTML = b;
	b.splice(3);
	document.getElementById("bSplice").innerHTML = a;
};

This is just short note to myself since I always forget onLoad part :)

Array in javascript

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 4541

It seems that javascript considers array as a pointer, therefore, simple assignment like:

a = b

will not copy values, variable a will just "point out" to variable b.

Consider following example: 

var a = [];
var b = [];
a = [1, 2, 3, 4]
b = a;
b.splice(3);

In this case, variable a will be 1, 2, 3

Full example you can see here.

Solution is something like: 

b = [].concat(a);

Taken from here.

setTimeout hell

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 4747
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		
		<script>
			function errorTimeOut(strInTest) {
				alert('I will wait 10 seconds, but no variables (error: Uncaught ReferenceError: strTest is not defined). ' + strInTest)
			}
			
			function errorAlert() {
				var strTest = "I am here!";
				setTimeout("errorTimeOut(strTest)", 10000);
			}
			
			function correctTimeOut(strInTest) {
				alert('I was waiting 20 seconds, and everything is ok: ' + strInTest)
			}

			function correctAlert() {
				var strTest = "I am here!";
				setTimeout(function() {
					correctTimeOut(strTest)
				}, 20000);
			}
		
			setTimeout(alert('I am fired immediately'), 10000);
			
			errorAlert();
			
			correctAlert();
			
		</script>
	
	</head>
	
	<body>

	</body>
   
</html>

As you can see from previous code, setTimeout(alert('I am fired immediately'), 10000); will not work.

setTimeout("alert('I will wait')", 10000); - this will work, alert under quotes, but you can not pass varibles.

And the code:

function correctAlert() {
	var strTest = "I am here!";
	setTimeout(function() {
		correctTimeOut(strTest)
	}, 20000);
}

Will work properly.

  1. Create an array of objects
  2. Prototype a string
  3. False is not defined
  4. Check members of object

Subcategories

Ajax

JavaScript

ExtJS


jQuery

Bing Maps AJAX Control, Version 7.0

Knockout

Jasmine

Moment

node.js

Page 7 of 24