Javascript Debugging IDEs

JavaScript is very popular among people all over the world. It is basically defined .it is very dynamic .Also, it is very weakly typed and first class functions. Javascript is a multi paradigm language and supports object oriented, imperative and functional programming styles. Javascript is also used as a client side scripting.

JavaScript is therefore implemented as a part of the web browser. This is to provide enhanced user interfaces and dynamic websites. With the help of this programmatic access to computational objects can be obtained within the host environment. Along with that JavaScript has a lot of other advantages to offer that cannot be ignored for instance its use in applications such as PDF documents, site specific browsers and desktop widgets is an example of newer and faster javascript.

Its our pleasure to share best/useful resources for our readers and all. We thankful to our readers for appreciate our previous articles and share their valuable comment. Today we are going to share highly useful IDEs for javascript debuggings. Visit this list and share your thought in out comment section below.

1) Webstorm

This site provides some of the most exciting features that the WebStorm IDE provide. The editor understands your code, its structure and offers you code completion that you expect. Full coding assistance is offered even for language mixtures such as HTML inside JavaScript strings.

2) Coda

3) Komodo Edit

4) Aptana

Aptana Studio 3.2.2 is our code base and complete environment that includes extensive capabilities to build Ruby and Rails, PHP, and Python applications, along with complete HTML, CSS and JavaScript editing.

5) Visual Studio Express

6) Komodo IDE

Komodo IDE has award-winning tools for debugging, code intelligence and navigation, all wrapped around a sweet core editor.

7) Netbeans

Customize Google Maps

Overview The Maps API allows you to Customize Google Maps look and feel of the map. Custom markers will help the user differentiate between different features of the campus (such as classrooms, bathrooms and studentfacilities). A custom legend will communicate these different types of map features, and a custom map style will help make the map overlays stand out….

Resizing images with PHP

Are you looking for image upload and Resize PHP script. I had implemented a simple PHP script to re-sizing image into different dimensions. It’s very useful to your web projects to save hosting space and bandwidth to reduce the original image to compressed size.

PHP Code
This script resize an Image into two 60px and 25px. Take a look at $newwidth you have to modify size values.

Validate username with regular expression

Username Regular Expression Pattern ^[a-z0-9_-]{3,15}$ Description ^ # Start of the line [a-z0-9_-] # Match characters and symbols in the list, a-z, 0-9, underscore, hyphen {3,15} # Length at least 3 characters and maximum length of 15 $ # End of the line Whole combination is means, 3 to 15 characters with any lower case character, digit or special symbol…

Get Langitude and Latitude from Google Map on mouse click

First an object representing google map properties is created with zoom level, map center and map type.
Then a map object is created. It takes two parameters. One is the div where the map should be displayed and the other is the object which contains various properties to initialize the google map.
With the above to lies the map can be displayed.
Next are the two event handlers which will display the lattitude and longitude when the move is moved over the google map or when the mouse is clicked on the map.
The event listener needs three parameters first is the map object, next is the event like onmousemove or onclick and the third parameter is the callback function to which the coordinates are passed as a parameter.
Each time the event handlers (callback functions) are called i am updating the lattitude and longitude.

That is all folks. Enjoy.

<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
Get <span class=”hiddenSpellError” pre=”Get “>Lattitude</span> and Longitude onmouseover and onclick in Google Map v3 – Get lat lng on click google map version 3 – Programming – Google Maps
lattitude longitude, latlng onclick google map, latlng onmousemove google map, get lattitude longitude onclick, google map mouse event, show lattitude longutude onmousemove, show latlng onclick”>
onmouseover and onmouseclick in google map version 3. Get lat lng onclick and onmouseover on google map version 3.” />
// <![CDATA[
javascript” src=”http://maps.google.com/maps/api/js?sensor=false”>
// ]]>
<style type=”text/css”>
body {font:10pt arial; }
.main { text-align:center; font:12pt Arial; width:100%; height:auto; }
.eventtext {width:100%; margin-top:20px; font:10pt Arial; text-align:left; line-height:25px; background-color:#EDF4F8;
padding:5px; border:1px dashed #C2DAE7;}
#mapa {width:100%; height:340px; border:5px solid #DEEBF2;}
ul {font:10pt arial; margin-left:0px; padding:5px;}
li {margin-left:0px; padding:5px; list-style-type:decimal;}
.code {border:1px dashed #cecece; background-color:#F7F7F7; padding:5px;}
.small {font:9pt arial; color:gray; padding:2px; }
.jimi { margin:0px;}
</style>
</head>
<body onload=”mapa()”>
<div>

0px auto;”>

mapdiv” style=”width:100%; height:500px;”>

<div>

Lattitude:

Longitude: lngspan“>

Lat Lng:

Lat Lng on click:

<input type=”text” id=”latlongclicked” style=”width:300px; border:1px inset gray;”>
</div>
</div>
</div>
<script type=”text/javascript”>
var map;
function mapa()
{
//var opts = {‘center’: new google.maps.LatLng(26.12295, -80.17122), ‘zoom’:11, ‘mapTypeId’: google.maps.MapTypeId.ROADMAP }
var opts = {‘center’: new google.maps.LatLng(34.54140959793796, 73.36364895561223), ‘zoom’:6, ‘mapTypeId’: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById(‘mapdiv’),opts);
google.maps.event.addListener(map,’click’,function(event) {
document.getElementById(‘latlongclicked’).value = event.latLng.lat() + ‘, ‘ + event.latLng.lng()
})
google.maps.event.addListener(map,’mousemove’,function(event) {
document.getElementById(‘latspan’).innerHTML = event.latLng.lat()
document.getElementById(‘lngspan’).innerHTML = event.latLng.lng()
document.getElementById(‘latlong’).innerHTML = event.latLng.lat() + ‘, ‘ + event.latLng.lng()
});
}
</script>
</body>
</html>

Google Map Geocoding Tutorial with Example

google-map-reverse-geocoding Google Map API has been a great way to show geographical information on web. A lot of mashup tools like this, have been created around Google Maps to show a wide variety of data. In my previous article about Introduction to Google Maps API, I had described basic APIs to integrate Google Map in your webpage. In this small article we will discuss a great feature of Google Maps API that can be used to locate any City/Country/Place on Map. This is called Geocoding.

Google Maps API provides a wonderful API called Geocoding API that enables you to fetch any location and pin point it on Google Map. GClientGeocoder is the class that we use to get the geocoder that get us the location. We will use getLatLng() method to get latitude/longitude of any location.
Check the following code.

var place = "New York";

geocoder = new GClientGeocoder();

geocoder.getLatLng(place, function(point) {

if (!point) {

alert(place + " not found");

} else {

var info = "<h3>"+place+"</h3>Latitude: "+point.y+" Longitude:"+point.x;

var marker = new GMarker(point);

map.addOverlay(marker);

marker.openInfoWindowHtml(info);

}

});

In above code snippet we passed string “New York” and a handler function to getLatLng() method of GClientGeocoder. GClientGeocoder class will call google server for the location and when it gets the result, it pass the result to the handler function that we specified. Thus handler function will get point (GPoint) object from which we can get the latitude and longitude of location. In above code we have created a marker and placed it on the map.

Online Demo

Google Map Reverse Geocode Example

Create your own Search Engine(Interface) using Google Custom Search API

Google Custom Search API are wonderful tools to create some awesome search engine like tools. Also if you want to add a search option to your website and customize the look and feel of your search results, Google Custom Search API serve best to you.
Ring in Spring with Stunning Lingerie from Journelle and get $25 OFF purchases of $200 or more! Use promo code: SPRING200. Offer valid 2/22/13-4/30/13. Shop Now

I have created a Real Time Search engine (I call it real time as it search as you type). I am really impressed by the speed/response of Google Search API.

DEMO

The Code

I will show the code for one of the search api that I implemented in demo page. Let us see how to implement Web Search API.

Step 1: Generate Google Search API Key and Include JavaScript

In order to use Google Search API, you have to first generate a Key for you. Go to following page and signup your self for the Key.
Sign up for Google API Key

Next step is to include the Google Search API javascript. Don’t forget to mention your key in the below code.

<script src="http://www.google.com/jsapi?key=YOURKEY" type="text/javascript"></script>

<script type="text/javascript">

google.load('search', '1');

</script>

Primary

Step 2: Add HTML Container for Web Search

We will create a textbox and a button that will take input for search. And a DIV that will be populated by results:

<input type="text" title="Real Time Search" name="searchbox"/>

<input type="button" id="searchbtn" value="Search" onclick="search(searchbox.value)"/>

<div class="data" id="web-content"></div>

When user will write a query and push Search button, a request will be made to Google Search using Custom Search API and the results are fetched. These results are then copied into the DIV.

Step 3: JavaScript to call Google Search API

We will use following JavaScript to call the Google Search API and copy the results in our container DIV.
The code in plain english is:
1. Create an object to connect Google Web search using class google.search.WebSearch.
2. Set a callback function that will get call once the results for the search are fetched.
3. Call the execute() method with search query as argument.
4. In callback function, iterate through the results and copy it to container DIV.

var webSearch;

webSearch = new google.search.WebSearch();

webSearch.setSearchCompleteCallback(this, webSearchComplete, [webSearch]);

function webSearchComplete (searcher, searchNum) {

var contentDiv = document.getElementById('web-content');

contentDiv.innerHTML = '';

var results = searcher.results;

var newResultsDiv = document.createElement('div');

newResultsDiv.id = 'web-content';

for (var i = 0; i < results.length; i++) {

var result = results[i];

var resultHTML = '<div>';

resultHTML += '<a href="' + result.unescapedUrl + '" target="_blank"><b>' +

result.titleNoFormatting + '</b></a><br/>' +

result.content +

'<div/>';

newResultsDiv.innerHTML += resultHTML;

}

contentDiv.appendChild(newResultsDiv);

}

function search(query) {

webSearch.execute(query);

}

Category: JavaScript Tutorials

Javascript Debugging IDEs

1) Webstorm

2) Coda

3) Komodo Edit

4) Aptana

5) Visual Studio Express

6) Komodo IDE

7) Netbeans

Customize Google Maps

Read More »

Resizing images with PHP

Read More »

Validate username with regular expression

Read More »

Get Langitude and Latitude from Google Map on mouse click

Google Map Geocoding Tutorial with Example

Online Demo

Create your own Search Engine(Interface) using Google Custom Search API

DEMO

DEMO

The Code

Step 1: Generate Google Search API Key and Include JavaScript

Step 2: Add HTML Container for Web Search

Step 3: JavaScript to call Google Search API

Click for Online Demo

1) Webstorm

2) Coda

3) Komodo Edit

4) Aptana

5) Visual Studio Express

6) Komodo IDE

7) Netbeans

Rate this:

Zeeshan Akhter's

Rate this:

Zeeshan Akhter's

Read More »

Rate this:

Zeeshan Akhter's

Read More »

Rate this:

Zeeshan Akhter's

Rate this:

Zeeshan Akhter's

Online Demo

Rate this:

Zeeshan Akhter's

The Code

Step 1: Generate Google Search API Key and Include JavaScript

Step 2: Add HTML Container for Web Search

Step 3: JavaScript to call Google Search API

Related articles

Rate this:

Zeeshan Akhter's