- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 4423
Check this code:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery-2.1.3.js"></script> <script type="text/javascript" src="/index.js"></script> </head> <body> Here my web site will be loaded: <div id="myWebSite"></div> </body> </html>
JS:
window.onload=function () {
var contentURI = 'http://localhost/jasmineClock/file.html',
isLoadingStarted,
loadingTimeOutHandle;
isLoadingStarted = true;
setTimeout(function () {
$( "#myWebSite" ).html( $( "#myWebSite" ).html() + "<p>setTimeout</p>" );
isLoadingStarted = false;
}, 100);
$.get(contentURI, function (data) {
$( "#myWebSite" ).html( $( "#myWebSite" ).html() + data );
});
isLoadingStarted = false;
}
file.html which will be loaded:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var i = 0;
while (i < 1000000000) {
i++
}
</script>
</head>
<body>
I will be loaded.
</body>
</html>
If you execute this code, you will see that setTimeout will be executed AFTER ajax call is finished, delete javascript part from file.html, and maybe add some long lorem ipsum, just to slow down execution, and you will see that setTimeout will be executed beofre ajax call.
Here you can see example with javascript, and here you can see example with long lorem ipsum.
Â
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 4117
Consider following example:
var Foo=function () {
var number = 1;
self.number = 1;
}
Foo.prototype.bar = function () {
console.log("test");
};
var foo = new Foo();
foo.bar();
Notice here that in line Foo.prototype.bar = function () I didn't write "var".
This code will work perfectly, in console you will see "test".
Now check following code:
var Foo=function () {
var number = 1;
self.number = 1;
return {inc: function() {
self.number = self.number + 1;
}}
}
Foo.prototype.bar = function () {
console.log("test");
};
var foo = new Foo();
foo.bar();
This code will not work, we will receive error "Uncaught TypeError: undefined is not a function", because with return we will loose "this". Solution is to add return this:
var Foo=function () {
var number = 1;
self.number = 1;
return this;
}
Foo.prototype.bar = function () {
console.log("test");
};
var foo = new Foo();
foo.bar();
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3908
Just one simple example about private and public methods in JavaScript.
Check this code in JS:
(function (ns) {
function myCreator () {
var self=this;
function privateMethod() {
alert("Hi I am private method and I can be executed only within myCreator class (I will be never called)");
}
self.publicMethod = function () {
document.getElementById("publicMethodCall").innerHTML = "Hi, I am called from publicMethod";
}
}
ns.myCreator = myCreator;
}(window.privateAndPublic))
Here you can see how private method is declared:
function privateMethod
and public method:
self.publicMethod
When you open console and check what newly created object has, you will see that there is no privateMethod (because it is inaccessible):
Example download from here.
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3925
Here and here I already explained some ways of introducing methods in javascript, and now i will show one more way.
Let's say we have JS like:
(function (ns) {
function myCreator () {
var self=this;
function privateMethod() {
alert("Hi I am private method and I can be executed only within myCreator class (I will never be called)");
}
self.publicMethod = function () {
document.getElementById("publicMethodCall").innerHTML = "Hi, I am called from publicMethod";
}
}
ns.myCreator = myCreator;
}(window.privateAndPublic))
Then, we introduce JS like:
(function (ns) {
function myCreatorReturn() {
var self = this;
self.myCreator = new window.privateAndPublic.myCreator();
return {
myCreator: self.myCreator
}
}
ns.myCreatorReturn = myCreatorReturn;
}(window.myReturn))
Here notice line:
self.myCreator = new window.privateAndPublic.myCreator();
Now we can call method "publicMethod" like:
window.onload = function() {
mCR = new window.myReturn.myCreatorReturn();
mCR.myCreator.publicMethod();
}
Notice line:
mCR.myCreator.publicMethod();
Example download from here.