How to loop through the javascript array with the for loop

Suppose you have created a javascript array and need to loop through all the elements within that array then the best method to use will be either the for or the while loop. In this article we will use the for loop.

var array1 = ["hello", "this", "world"];
for(var i=0; i<array1.length; i++)
	alert(array1[i]);

The above program will loop through the javascript’s array with the for loop and shows the alert box in every passes of the loop.

Show alert with javascript prototype

Every object in javascript has the prototype property which we can attach a new function or property to it. Below javascript program will show two alert boxes once you have loaded the webpage.

function helloWorld() {
	alert("Hello World!")
}

helloWorld.prototype.helloAgain = function(name) {
					alert("Hello " + name);
				}
								
var helloTwice = new helloWorld();

helloTwice.helloAgain("John");

We first create a function named helloWorld then we added another function (which will show the name of a person) to helloWorld’s prototype. Next we create an object which owns all the properties of helloWorld then pass in the name of a person which will be used by the helloAgain function. The “Hello World!” alert will show first follows by the second alert in the helloAgain function.

hello world

hello john

Show alert with javascript prototype program is super simple, isn’t it?

How to draw a cup on the HTML5 canvas with javascript

In this tutorial I am going to show you how to draw a cup on HTML5 canvas with javascript. First of all lets take a look at the finish product.

html5 canvas drawing

In order to draw the above cup we need lots of points to plot, therefore I would suggest you to collect the points using Bear Draws, which is a painting software creates with javascript. After you have gathered all the points that you needed, then all will become a textbook stuff by just filling in the blank. Below is the entire javascript program which creates the drawing above.

(function() {

var context = document.getElementById('canvas').getContext('2d');
context.strokeStyle = 'black';
context.shadowColor = 'rgba(144, 145, 148, 1.0)';
context.shadowOffsetX = 1;
context.shadowOffsetY = 1;
context.shadowBlur = 1;
context.lineWidth = 3;
context.lineCap = 'round';

var array1 = [[286,266],[286,265],[286,263],[286,261],[286,258],[286,256],[287,254],[289,252],[289,250],[291,247],[292,245],[293,242],[296,238],[298,235],[301,233],[303,229],[307,226],[310,223],[314,219],[317,217],[321,214],[326,211],[330,209],[334,206],[338,203],[342,201],[347,198],[350,196],[357,194],[364,191],[370,189],[377,187],[384,185],[389,184],[392,184],[399,182],[406,181],[411,179],[417,179],[423,178],[429,177],[436,176],[442,176],[448,176],[457,176],[465,176],[471,176],[478,176],[485,177],[492,179],[498,180],[503,181],[509,182],[516,184],[522,185],[530,187],[538,188],[545,190],[550,193],[556,196],[563,198],[567,201],[573,204],[577,207],[580,209],[583,211],[585,214],[586,216],[588,217],[589,219],[591,221],[591,223],[592,225],[594,227],[595,229],[596,231],[597,234],[597,236],[597,239],[597,242],[597,245],[597,247],[597,249],[597,252],[597,255],[597,258],[596,261],[594,265],[593,269],[591,272],[588,277],[585,280],[583,284],[580,287],[578,290],[576,292],[573,294],[571,296],[569,297],[566,299],[562,301],[560,302],[558,304],[554,304],[550,306],[546,308],[542,309],[537,310],[534,310],[531,311],[528,312],[524,313],[517,315],[510,316],[504,317],[499,318],[494,319],[490,319],[487,320],[483,320],[480,320],[476,321],[471,321],[467,321],[463,321],[459,321],[454,321],[448,321],[443,321],[437,321],[432,321],[428,321],[424,321],[418,321],[413,321],[406,321],[402,321],[395,321],[390,321],[383,321],[378,321],[372,321],[368,321],[364,321],[361,321],[358,321],[355,321],[353,320],[351,320],[350,320],[350,319],[348,319],[346,319],[345,319],[344,318],[342,317],[341,317],[340,317],[339,316],[338,315],[336,315],[334,314],[333,313],[332,313],[330,313],[330,312],[329,311],[328,311],[326,310],[325,309],[323,308],[323,307],[321,306],[320,305],[319,304],[319,303],[317,302],[316,301],[314,300],[314,299],[313,298],[313,297],[311,296],[311,295],[310,294],[309,294],[309,293],[308,293],[308,291],[307,290],[306,290],[305,289],[303,286],[302,286],[301,284],[300,283],[298,281],[297,280],[297,279],[296,278],[295,277],[294,276],[294,275],[293,275],[292,274],[292,273],[291,272],[291,271],[290,271],[290,270],[290,268],[289,267],[288,266],[288,265],[288,264],[288,262],[287,261],[286,260],[285,259],[285,258],[284,258],[283,257]];

context.beginPath();
context.moveTo(287,267);
for (var i = 0; i <array1.length; i++) {
	context.lineTo(array1[i][0],array1[i][1]);
	context.stroke();
}
context.closePath();

var array2 = [[359,225],[361,224],[367,220],[369,219],[372,217],[380,214],[383,212],[388,210],[391,210],[394,208],[396,207],[399,206],[401,206],[403,205],[405,204],[407,204],[409,203],[410,203],[412,202],[414,202],[418,201],[419,201],[420,201],[422,201],[424,200],[426,200],[427,200],[429,200],[433,200],[435,200],[437,200],[439,200],[441,200],[444,200],[449,200],[452,200],[454,200],[458,200],[460,200],[462,200],[465,200],[468,201],[472,202],[475,202],[476,203],[479,203],[481,204],[484,204],[491,206],[496,207],[499,207],[503,208],[504,209],[506,209],[509,209],[509,210],[510,211],[512,211],[512,212],[514,213],[515,213],[519,215],[521,218],[523,218],[524,221],[525,222],[531,234],[531,241],[531,242],[531,243],[531,244],[531,247],[529,248],[529,249],[528,251],[527,252],[526,253],[526,254],[524,256],[522,257],[522,258],[520,260],[518,261],[518,262],[514,263],[512,265],[507,267],[505,268],[501,268],[496,269],[494,270],[492,270],[488,270],[483,271],[480,272],[474,273],[471,274],[465,275],[462,276],[455,277],[452,277],[449,277],[443,277],[436,277],[432,277],[423,277],[414,277],[410,277],[406,277],[400,277],[394,277],[388,277],[383,276],[380,275],[378,275],[366,270],[364,268],[363,267],[361,263],[360,262],[358,259],[357,255],[356,254],[356,251],[355,249],[355,247],[355,244],[355,243],[355,241],[355,237],[355,234],[355,231],[355,229],[355,227],[355,225],[355,224],[355,223],[356,222]
];

context.beginPath();
context.moveTo(358,226);
for (var i = 0; i <array2.length; i++) {
	context.lineTo(array2[i][0],array2[i][1]);
	context.stroke();
}
context.closePath();

var array3 = [[283,253],[283,264],[283,274],[283,281],[283,285],[283,291],[283,296],[283,302],[284,308],[284,312],[284,316],[284,321],[285,324],[286,331],[286,333],[296,357],[297,361],[298,364],[300,369],[301,373],[301,375],[302,379],[304,384],[304,388],[305,392],[306,396],[307,399],[307,401],[308,403],[308,406],[309,407],[310,409],[310,412],[312,413],[312,416],[314,420],[314,424],[314,425],[314,426],[315,426],[315,428],[316,428],[317,429],[318,430],[320,430],[322,431],[322,432],[323,432],[337,434],[346,438],[356,439],[366,442],[379,444],[390,446],[413,447],[432,449],[448,449],[463,449],[482,449],[487,449],[501,449],[506,449],[511,449],[521,449],[527,449],[531,449],[534,448],[542,446],[547,444],[553,442],[554,441],[561,438],[564,437],[567,435],[571,433],[573,431],[584,424],[585,423],[586,422],[588,421],[589,419],[590,416],[591,414],[591,410],[593,407],[594,402],[595,397],[597,392],[597,387],[597,382],[599,376],[599,372],[599,368],[601,363],[602,359],[602,355],[603,351],[604,346],[604,342],[604,333],[604,328],[605,322],[606,316],[607,314],[607,313],[608,303],[609,299],[610,296],[610,287],[610,284],[610,281],[610,279],[610,276],[610,273],[609,268],[609,267],[609,265],[609,260],[609,258],[609,256],[608,254],[608,253],[607,250],[606,248],[606,247],[606,246],[604,244],[604,243],[603,241],[603,240],[603,238],[601,236],[601,234],[599,232],[599,231],[598,230],[598,229]];

context.beginPath();
context.moveTo(283,251);
for (var i = 0; i <array3.length; i++) {
	context.lineTo(array3[i][0],array3[i][1]);
	context.stroke();
}
context.closePath();

var array4 =[[598,227],[603,223],[608,221],[613,218],[618,215],[639,213],[650,213],[655,213],[658,214],[660,215],[665,216],[669,220],[675,223],[681,228],[686,231],[692,235],[697,240],[701,246],[703,248],[706,255],[708,262],[709,268],[709,275],[711,288],[711,294],[711,299],[710,303],[709,306],[707,310],[706,313],[704,317],[702,320],[700,323],[699,326],[697,328],[695,330],[694,332],[691,333],[688,335],[686,336],[678,339],[676,339],[674,339],[669,340],[663,341],[660,341],[657,341],[655,341],[651,341],[649,341],[647,341],[645,341],[643,341],[641,340],[640,340],[637,338],[624,332],[622,329],[617,327],[613,325],[612,325],[611,324],[610,323],[610,322],[609,322]];

context.beginPath();
context.moveTo(599,228);
for (var i = 0; i <array4.length; i++) {
	context.lineTo(array4[i][0],array4[i][1]);
	context.stroke();
}
context.closePath();

var array5 = [[603,255],[607,253],[608,252],[610,250],[612,249],[617,247],[619,247],[621,247],[624,247],[626,247],[628,247],[630,247],[634,247],[636,247],[638,248],[641,249],[644,251],[649,255],[652,258],[657,270],[659,277],[660,280],[661,283],[661,288],[661,290],[661,293],[661,295],[661,296],[660,297],[658,298],[655,300],[653,302],[651,303],[647,304],[646,305],[645,305],[643,305],[641,305],[639,305],[637,305],[635,305],[633,304],[632,304],[632,303],[631,303],[629,302],[625,299],[623,298],[621,297],[620,296],[618,296],[617,295],[616,295],[615,295],[614,294],[613,293],[612,293],[611,291],[611,290],[611,282],[610,278],[610,276],[609,275],[608,274],[608,273],[607,272],[606,271],[605,271],[604,269],[604,266],[603,266],[603,262],[603,259],[603,258],[604,257],[604,256]];

context.beginPath();
context.moveTo(603,256);
for (var i = 0; i <array5.length; i++) {
	context.lineTo(array5[i][0],array5[i][1]);
	context.stroke();
}
context.closePath();

var array6 = [[385,233],[389,231],[391,230],[394,228],[396,227],[400,226],[404,224],[405,224],[407,223],[411,222],[415,221],[426,218],[427,218],[429,218],[432,218],[434,218],[436,218],[438,218],[440,218],[441,218],[444,218],[446,218],[463,218],[464,219],[465,219],[467,219],[469,220],[473,220],[477,220],[478,222],[482,223],[484,224],[486,225],[490,232],[490,236],[491,240],[491,242],[491,244],[491,246],[491,248],[489,250],[487,250],[484,251],[480,252],[466,255],[465,255],[460,255],[458,256],[457,257],[455,257],[453,257],[451,257],[449,257],[444,257],[435,257],[430,257],[428,257],[426,257],[422,257],[418,257],[414,257],[410,257],[409,257],[407,256],[405,255],[404,254],[402,253],[399,251],[397,250],[395,248],[394,248],[394,246],[393,245],[391,242],[390,241],[389,239],[388,238],[387,237],[387,236],[387,235],[386,235],[384,234],[384,233],[381,232]];

context.beginPath();
context.moveTo(384,233);
for (var i = 0; i <array6.length; i++) {
	context.lineTo(array6[i][0],array6[i][1]);
	context.stroke();
}
context.closePath();

})();  

As you can see now, the points that you have collected will be grouped into a few arrays. Then we just draw the points on the canvas.

Don’t forget to include the canvas tag on your html5 file.

<canvas id='canvas' width='960' height='500'>
   Canvas not supported
</canvas>

It is easy to draw the cup with canvas’s api after you have all the points ready.

How to create a smile with context.quadraticCurveTo api

In this article I am going to show you how to use the context.quadraticCurveTo api to create a smile on the html5 canvas. We need a control point, a starting point and the end point to draw the smile as shown below the article.

(function() {
	var context = document.getElementById('canvas').getContext('2d');
	context.fillStyle = 'cornflowerblue';
	context.strokeStyle = 'yellow';
	context.shadowColor = 'rgba(144, 145, 148, 1.0)';
	context.shadowOffsetX = 2;
	context.shadowOffsetY = 2;
	context.shadowBlur = 4;
	context.lineWidth = 20;
	context.lineCap = 'round';
	context.beginPath();
	context.moveTo(150, 130);
	context.quadraticCurveTo(225, 200, 300, 130);
	context.stroke();
})();

Don’t forget to include the canvas tag on the html5 page with the id=”canvas” assigned to it. The js code above will create the smile below.

html5 effect

JavaScript if else statement

Here is how the javascript’s if else statement looks like.

if (condition)
{
     //run this code if condition is true
}
else
{
     //else run this code if the first condition is not true
}

Here is an example of how to use the if else statement.

if (age < 12)
{
  alert("small boy");
}
else if (age < 50)
{
  alert("young man");
}
else
{
  alert("old man");
}

As you can see from the example above if the first condition is true then the code within the first if block will run and the rest of the if block will be skipped. Else if the second condition is true then the second code block will run instead and finally the third code block will run if both the first and second if statements are false.

Javascript for and while loop

Javascript for loop has the following syntax.

for (statement 1; statement 2; statement 3) {
        the code block
}

Statement number 1 is where we will initiate a value before the loop starts. Statement 2 defines the condition for running the loop. Statement 3 is where we increase the initial value. In below example we will show the alert function 10 times with the for loop.

for (var i=0; i<10; i++)
{
   alert("Hi");
}

The below alert box will continue to show as long as the condition is true.

while (true)
{
   alert("hey");
}

The above while loop will run forever until the computer is running out of resources and the browser will be forced to shut down.

JavaScript switch statement

The javascript switch statement is used to perform different action based on condition. Below is an example of the switch statement.

switch(n)
{
    case 1:
      	//run code block 1
      	break;
    case 2:
      	//run code block 2
      	break;
    case 3:
	//run code block 3
      	break;
    default:
	//if n is different from case 1, 2 and 3 then run the code under the default case
}

The break keyword is very important because if we do not use the break keyword then the code will continue on the next case automatically. If the n value is not in any of the 1, 2 or 3 case then the code under the default case will be called. One more thing we need to know here is that the switch statement does not take value other than number so make sure you only pass in the number.

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.