JavaScript | Agichevski

JavaScript Array Basics

Aleksandar Gichevski — Sat, 08 Feb 2014 10:20:20 +0000

Array is an object that is used for storing multiple values in a single variable.

When first time JavaScript was published array objects weren’t available. So if you wanted to store more values under one variable you needed to write:

var v1 = 1;
var v2 = 2;
var v3 = 3;
var v4 = 4;
...

But this is not practical solution at all. What if you had 500 values? I’m sure nobody would write 500 variables or even if you do how would you loop over all variables and find a specific one?

Array can store multiple values under same name using index parameter. So when you would like to access any value of the array you just need to refer to the index number.

JavaScript Array Syntax

Here are some JavaScript syntax examples:

Create Array

There are 2 ways how you can create an array:

var newArr = new Array();  //Array Constructor
var newArr = []; //Array Literal

Create Array with 50 empty slots (undefined values):

var newArr = new Array(50);

Create Array with already defined items:

var newArr = new Array("one", "two", "three", "four");  
var newArr = ["one", "two", "three", "four"];

Access Array

To access an array value refer to the array index. In below example we get the third array value:

var newArr = ["one", "two", "three", "four"];  
var thirdValue = newArr[2];

Modify Array

Modifying an array value is very easy, again based on the array index you assign new value.

var newArr = ["one", "two", "three", "four"];  
var newArr[3] = '4';
//["one", "two", "three", "4"];

Loop over Array

Using FOR Loop you can go over all elements in an array and execute any code you want. To get the size of the array use “.length” property.

var newArr = ["one", "two", "three", "four"];  
for (var i = 0; i < newArr.length; i++) {
    console.log(newArr[i]);
}

Add new value in Array

To add new value at the end of the array use ".length" property to get the last index. This property starts counting from 1 while array index from 0 so arr.length will always show you last array position.

var newArr = ["one", "two", "three", "four"];  
newArr[newArr.length] = "five";  
// ["one", "two", "three", "four", "five"]

You can also add a value to an array using "push" method:

var newArr = ["one", "two", "three", "four"];  
newArr.push("five");  
// ["one", "two", "three", "four", "five"]

Remove value from Array

To remove last value from an array use "pop()" method:

var newArr = ["one", "two", "three", "four"];  
newArr.pop();  
// ["one", "two", "three"]

You can also use "splice()" method:

var newArr = ["one", "two", "three", "four"];  
newArr.splice(2, 1); // removes 1 element from index 2  
// ["one", "two", "four"];

"splice()" method can be also used for adding an value or replacing depending on second and third passed argument.

JavaScript Array Properties

Here is a list of each property and its description.

Property	Description
constructor	Returns a reference to the array function that created the object.
index	The property represents the zero-based index of the match in the string
input	This property is only present in arrays created by regular expression matches.
length	Reflects the number of elements in an array.
prototype	The prototype property allows you to add properties and methods to an object.

JavaScript Array Methods

Here is a list of each method and its description.

Method	Description
concat()	Returns a new array comprised of this array joined with other array(s) and/or value(s).
every()	Returns true if every element in this array satisfies the provided testing function.
filter()	Creates a new array with all of the elements of this array for which the provided filtering function returns true.
forEach()	Calls a function for each element in the array.
indexOf()	Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
join()	Joins all elements of an array into a string.
lastIndexOf()	Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
map()	Creates a new array with the results of calling a provided function on every element in this array.
pop()	Removes the last element from an array and returns that element.
push()	Adds one or more elements to the end of an array and returns the new length of the array.
reduce()	Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.
reduceRight()	Apply a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.
reverse()	Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.
shift()	Removes the first element from an array and returns that element.
slice()	Extracts a section of an array and returns a new array.
some()	Returns true if at least one element in this array satisfies the provided testing function.
toSource()	Represents the source code of an object
sort()	Sorts the elements of an array.
splice()	Adds and/or removes elements from an array.
toString()	Returns a string representing the array and its elements.
unshift()	Adds one or more elements to the front of an array and returns the new length of the array.

The post JavaScript Array Basics first appeared on Agichevski.

Integrate Google Maps and Google Street View API

Aleksandar Gichevski — Sat, 07 Dec 2013 18:16:13 +0000

Showing specific place or location on a website hasn’t been easier. Thanks to Google we can use their API and integrate Google Maps and Google Street View anywhere we want. For those that don’t know let’s explain these 2 services.

What is Google Maps

Google Maps is a web mapping service application that powers many map-based services, including Google Maps website, Google Ride Finder, Google Transit and maps embedded on third-party websites. It offers street maps and a route planner for traveling by foot, car, bike or with public transportation and it also includes locator for urban businesses in numerous countries.

What is Google Street View

Google Street View is a technology featured in Google Maps and Google Earth that provides panoramic views from positions along many streets in the world. It was launched on May 25, 2007, in several cities in the United States, and has since expanded to include cities and rural areas worldwide.Where available, Street View images appear after zooming in beyond the highest zooming level in maps and satellite images, and also by dragging a “pegman” icon onto a location on a map.

Google Maps – search by Address

Using Google Maps API we are able to integrate Google Maps on many ways and use it exactly for the purpose we need. In our example I will place a Google Map that will show location based on the provided Address parameter.

First what we need to do is create basic HTML/PHP page with following code:

Google Maps API Integration

In above code we have 2 main elements:

[id=map-canvas] represents div element that will contain the Google Map.
[form] element that is used to enter desired address and execute POST action in order to be generated new Map

In HEAD section we add JavaScript code that is used for generating Google Map. We add reference to Google API JavaScript document and create function codeAddress that accepts address parameter for generating map.

The page now creates Google Map that has marker in center of New York. We will modify the last line of this JavaScript code and write few lines of PHP to accept the parameter from the form and parse it into codeAddress() function.

New modified code will look like this:



google.maps.event.addDomListener(window, 'load', codeAddress(''));

We have successfully coded Google Map search by address service using Google API code.

Google Street View – search by Address

If we want also to add Street View service we just need to add few more lines of code and our visitors will be able to see panoramic view on the desired address.

Add new div element [id=pano] right below our div element for google map [id=map-canvas]

Update the function codeAddress() below code for showing marker add following code for generating Google Street View:

var panoramaOptions = {
	position: results[0].geometry.location,
	pov: {
	 heading: 34,
	 pitch: 10
	}
};
var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);

That’s it.. you should see now Google Maps and Google Street View on same page. Here is full code of the example:

Google Maps API Integration

The post Integrate Google Maps and Google Street View API first appeared on Agichevski.

jQuery Fixed Table Header

Aleksandar Gichevski — Tue, 22 Oct 2013 18:30:30 +0000

Often we are using tables to present specific kind of data on a web page. They help us to arrange and structure our information in nice and clean way so visitor can read and understand it.

Tables are great choice when we want to present some statistics information, records or any other type of information. Using the possibility to modify the tables we can create as many rows and columns as we need, we can merge cells, align text and all other css style customization that are allowed in html elements.

When we are presenting large amount of data and we are not using pagination we experience with long table that need to be scrolled down to view all records. What happens to me all the time is when I scroll over long table I forget the fields and I must scroll back to top to see again what field what information represents.

So this is not user friendly at all and because of that I always add fixed table header when I create long tables so when scrolled down the first row that represents the fields scrolls also down with the screen.

jQuery Fixed Table Header

This is very nice simple script written by Mustafa that gives you option to create fixed header in top of a table and it is very easy for implementation.

There are 3 options that you can define in this script:

HeaderRowSize – This option defines the number of fixed header rows. Default is 1 but you can set the number of rows that will be included in your fixed table header
HighlightRow – This option defines if table row will be highlighted onMouseOver. Default value is FALSE.
HighlightClass – This option defines the CSS class that is used when HighlightRow is set to TRUE.

Implementation

Step 1: Include jquery.min.js and jquery.fixedtableheader.min.js into HTML page like this:

Step 2: Insert also below lines into HTML page to point the table that will use this script.

Step 3: Finaly we create a table that will have class property set to ‘exampleTable1’

.....

Here is the script in action, below table has by default 1 fixed header row

Field 1	Field 2	Field 3	Field 4	Field 5
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value

Now let’s make the table with 2 fixed header rows and add highlight onMouseOver effect. We will accomplish that with setting HeaderRowSize = 2 and HighlightRow = TRUE. Here is the full code:

Also above we add a style CSS definition on ‘highlight’ class that we use it in highlightClass option. Here is demonstration on 2 rows fixed table header and onMouseOver effect:

Field 1	Field 2	Field 3	Field 4	Field 5
SubField 1		SubField 2		SubField 3
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value
Field1_Value	Field2_Value	Field3_Value	Field4_Value	Field5_Value

The post jQuery Fixed Table Header first appeared on Agichevski.

AJAX Tutorial – Beginners, Learn How to Code Ajax

Aleksandar Gichevski — Thu, 10 Oct 2013 22:52:48 +0000

Asynchronous JavaScript and XML or shortly called AJAX is the best technique invented for exchaning data between client and server side in real-time. Combining JavaScript and other server language in our tutorial PHP you are able to execute any action on server and retreive results without reloading specific page.

You were asking what is the secret of Google Maps and how it works? Your see everything updated, new information but all on same screen, that is the power of AJAX technique.

This is not a new programming language but just a new way of using existing standards to make things better.

How does it work

When visitor performs action on website, using JavaScript XMLHttpRequest Object it is sent HTTP request to the server, which depending from the sent HTTP request executes and action and gives back response to the website which is parsed directly without reloading the page.

Here is a nice and simple preview on how AJAX works and what happens in the background:

Creating XMLhttpRequest

When creating XMLHTtpRequest object first you must know the browser type and then create the object, because Internet Explorer uses ActiveXObject method while other browsers use predefined JavaScript object for creating XMLhttpRequest.

Here is quick function that checks what type is visitor’s browser and based on that info returns the created object.

function GetXmlHttpObject()
{ 
	 var objXMLHttp=null;
	 
	 if (window.XMLHttpRequest)
		objXMLHttp=new XMLHttpRequest();
	 else if(window.ActiveXObject)
		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
		
	 return objXMLHttp;
}

Sending Request to Server

After creating the object here it is AJAX function that sends HTTP request to specific server.

httpObj=GetXmlHttpObject();

function doRequest()
{	
		if (httpObj==null)
		 {
			 alert ("Browser does not support HTTP Request");
			 return;
		 }
		
		var url="action-page.php";
		url=url+"?sid="+Math.random();
		url = url + "&showTime=1";
		
		httpObj.onreadystatechange=receiveResponse;
		httpObj.open("GET",url,true);
		httpObj.send(null);
}

Let’s analyze this function. First what we do is we check if XMLhttpRequest object has been created, if problem occurs then we stop the procedure and give message to the visitor that something went wrong.

The ‘url’ parameter represents the page that will receive the HTTP request on remote server in our case ‘action-page.php’. We are sending there ‘GET’ request with parameters added normaly in url query (&parameter=value).

You are maybe asking why is ‘sid’ parameter included? That is my little trick to struggle with cached pages, because today we have strong cache engines like CloudFlare that cache even dynamic pages so only what helps is some random parameter added that will force the server to give you fresh content instead reading from cache.

In onreadystatechange we specify the function that will receive the response from remote server when request is completed, more on this below.

open() method accepts three arguments.

First defines which method to use GET or POST.
Second argument specifies the url
Third argument specifies that the request should be handled asynchronously.

The send() method sends the request off to the server.

Accepting the HTTP Request on Server

On remote server we create file action-page.php where we add some code to execute and to write that result. Here is very simple code that checks if ‘showTime’ parameter is ‘1’ and if so returns current time in timestamp.


Catch the Response from remote server
If you remember above in doRequest() we specified receiveResponse() as function that will receive the response and use it. When response is received we check if it has been completed and place it in variable for futher use.
function receiveResponse() 
{ 
	if (httpObj.readyState==4 || httpObj.readyState=="complete")
	{ 	
		var response = httpObj.responseText;	
		alert(response);
	}
}

Now only what you need to do is to create a HTML code that will execute the main doRequest() function when user clicks on some HTML object.
The post AJAX Tutorial – Beginners, Learn How to Code Ajax first appeared on Agichevski.

Javascript validation numbers only

Aleksandar Gichevski — Sat, 24 Aug 2013 17:12:30 +0000

Often we need to put html form to collect data from visitors.

It is quite easy and straightforward process to process the data if the information is entered correctly. But from my experience people not always enter the data in the correct format as we need it.

In this article I will show you example on validation with JavaScript where visitor should enter only numbers.

We are going to use regex to check the entered value in the form.

1. Accepting only numbers

This function will return “true” only if the value contains numbers without any other character.

Demo

2. Accepting numbers and dots

This function will return “true” if the value contains numbers only or numbers and dots. Also the value must start and end with a number.

Here you can change the dot(.) with comma(,) for other format.

Demo

The post Javascript validation numbers only first appeared on Agichevski.

Submit form into popup window using javascript

Aleksandar Gichevski — Sat, 17 Aug 2013 13:38:19 +0000

Sometimes when using popup window on the website it is useful to submit a form using javascript and parse the information.

JavaScript popup form is easy and clean way how this can be done. Using attribute ‘target’ there is an option to assign event that is executed when form is submitted and all data from the form is parsed to the new popup window.

On destination file in our example (popup.php) you get the information as every normal form is submitted.

Below is example of code that does submit form into popup.

Code

See it in action

Here it is real example so you can see this in action.

The post Submit form into popup window using javascript first appeared on Agichevski.

jQuery animate() function overview

Aleksandar Gichevski — Sun, 03 Mar 2013 01:49:36 +0000

jQuery animate() function is powerful method for performing animation to a given html object.

With using this function and combination of CSS rules you are able to create nice effects on your website where the value of CSS rules is changed gradually.

Notice: With animate() function you can animate only numeric values exp. (width:200px; or margin:30px;).

String values can’t be animated and won’t create any effect.

Animate() Syntax

(selector).animate({styles},speed,easing,callback)

Parameters

Below is information about the parameters used in this function

Let’s show some examples with animate() function.

First what we need to do is include jQuery Library in our html file in the HEAD section.

Below code is example of our html file that is used.










This is example div.

Width Animation

Example of Width Animation

Height Animation

Example of Height Animation

Opacity Animation

For opacity we use little different html code in order to show you best result.









This is example div.

And here is the jQuery code for opacity animation.

Example of Opacity Animation

These are only few basic examples to show you the power of jQuery animate() function.

With combining more ‘animate’ executions and css rules you can create variety of effects that will make your website look nicer, interesting and user friendly.

The post jQuery animate() function overview first appeared on Agichevski.