Javascript call method tutorial

Javascript’s call method looks really complicated but actually it is not as difficult as you think it is. Let takes a look at one example of how to use the javascript’s call method to show an alert box with greeting message!

Below example will show a greeting message after the web page has been loaded.

$(document).ready(function() {

function hello() {
  var hello = ['Good morning ', this.name, this.sayHello].join(' ');
  alert(hello);
}

var obj = {
  name: 'MR Noob', 
  sayHello: ', how are you today?'
};

hello.call(obj); 

});

The call method above takes one argument, which is the object that will be used in the alert method in hello function. As you can see the keyword this in the hello function will be replaced by the object after the call. That is basically what will happen when we passed an object into a call method of another object.

Let takes a look at another example, this time we will call the Computer function within the Laptop function and pass in the brand and price to the call method of the Computer function. What the below does is to show an alert box with the values we have passed in as well as using the origin property of the Laptop computer in the alert box.

jQuery(document).ready(function() {

	function Computer(brand, price) {
		
		var product_brand_price = ['I bought ', brand, ' which is made in ', this.origin, ' with $', price, '!'].join(' ');
		alert(product_brand_price);

	}

	function Laptop(brand, price) {
		this.origin = 'USA';
		Computer.call(this, brand, price);
	}

	var myPc = new Laptop("Dell", 3000);
});
Javascript call method
Javascript call method

There is one thing you need to take note of which is if you use the this keyword to represent the Computer object within the Computer object then this will no longer refer to the Laptop object anymore and thus if you call this.origin within that alert box then it will return an empty value because this will now represent the Computer object instead of the Laptop object and the Computer object does not have the origin property.

JavaScript Object tutorial

Javascript object consists of properties that are an association between a name (or key) and a value (which can either be a number, boolean or a method).

The universal javascript objects such as Strings, Arrays, Dates and etc are ready to be used in our program, for example we can create a new Date object to get the current year with below statements.

var date = new Date();
var year = date.getFullYear();

We can also create a custom made object and then call it’s method or return it’s value anytime we need to.

var Webserver = {

    brand : "xyz",
    loadtime : 0.5,
    price : 1.99,
    info : function() {

    	return this.brand + " loading time is " + this.loadtime + " sec, " + "and monthly price is " + this.price + " usd.";

    } 

};

//When we want to refer to that object within that object itself we will use the reserve keyword 'this'. 

alert(Webserver.info());

We can change the value of the above object as well to any value we like after we have created the object.

Webserver.price = 0.99;

Besides that, we can also create an empty object and then input the object’s properties later on.

var boy = new Object();
boy.haircolor = "Black";
boy.eyecolor = "brown";
boy.age = 10;

Another method to create a new javascript object is through creating the object template which I have talked about in my previous post.

do while loop javascript

The Javascript do while loop will run all the statements within the do while code block until the condition of the do while loop has been met. Here is an example of which the do while loop will run six times and shows the alert box six times before the loop terminates.

var i = 0;
do {
	alert("Hello World!");
	i++;
}while(i <= 5)

No matter what the above loop will at least run one time before it terminates. If you need to check the condition before the loop starts then I would suggest using the while loop or the for loop instead.

How to create object template for gaming character in Javascript?

Most javascript game developer nowadays likes to use object template to create a new object. What is an object template? Object template is just like a blueprint which we can later use to mass produce as many objects as we want from it. For example, we can create an object template of an enemy in our game.

var noobMonkey = {
	health: 100,
	shields: 50,
	strength: 100,
	strike: function() {
		// do something here
	}
};

Then we can create a new object based on this template like this…

var firstNoobMonkey = Object.create(noobMonkey);

We can even assign different property value to a different object like this…

firstNoobMonkey.strength = 50;

We can also go further to create a new property for a particular enemy at the time of it’s creation…

firstNoobMonkey.x = 30;
firstNoobMonkey.y = 30;

Template is always very useful when it comes to create a game object because of it’s “Build once and use it everywhere concept”.

How to run javascript locally on our web browser?

Hi, this is the tutorial series about Javascript which is the language I am going to use to create HTML5 game. The first topic today is about how to run javascript on any web browser.

In order to run javascript on web browser we just need a simple tool, which is a web browser, I will use Firefox here. Before we can run our program we do need to set up a few files and write a few lines of code, so lets get started!

First lets create an html5 file and name it df.html

<!doctype html>
	<head>
		<meta charset="utf-8">
		<title>JS Demo</title>
	</head>
	<body>
		<script type="text/javascript" src="hello.js"></script>
	</body>
</html>

Next create the hello.js file and insert the below code.

alert("Hello World!");

We will link the javascript file in the above html page.

Now make sure both files are in the same folder then click on the df.html file to open it on the web browser, you should see the below screen.

hello

This conclude our first lesson in javascript which will be used to create the html5 game!