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

AngularJS Service Example

Introduction to AngularJS Services In AngularJS world, the services are singleton objects or functions that carry out specific tasks. It holds some business logic. Separation of concern is at the heart while designing an AngularJS application. Your controller must be responsible for binding model data to views using $scope. It does not contain logic to fetch the data or…

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.

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>

Simple Tutorial to Make a Chrome Extension that uses jQuery UI

Google Chrome has had extensions for a while now, but because the Linux client is a little farther behind I never got farther than the simple hello world tutorial. Today, however, I am pleased to announce that Chrome extensions are totally boss, and it is extremely easy to get a jQuery UI skinned template app going in 15 minutes, just by following three easy steps.

Step 1 – Brushing up on the Hello World Extension Tutorial

Follow the Getting Started (Hello World) tutorial. The tutorial is very well written and will help you get your bearings about what extensions can do and the minimum you need to get started. A key part is the manifest.json

CrashPlan for Business

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

The name, version, and description fields are all self explanatory. The browser action one is interesting. It means that your extension will add a button to the browser (right after the address bar) with the specified icon. So far as I can tell the only thing that the button can do now is display a popup, though this popup can communicate with other parts of your extension. Permissions are also important, they specify what domains you can access via xmlhttprequests.

At this point you should have a working hello world tutorial, if not please continue to follow the rest of the directions on the full tutorial page, I’ll wait.

Step 2 jQuerying it up

After you finish the tutorial you may come to feel that raw JS is pretty harsh stuff and it would be great to get a little jQuery action in there. No need to fear, just add this to your “popup.html” file:

// <![CDATA[ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"> // ]]>

You don’t even need to add a file anywhere in your extension. Neat! Now you can rewrite the part of the tutorial that connects to the Flickr API like so:

$.get("http://api.flickr.com/services/rest/", {
    method: "flickr.photos.search",
    api_key: "90485e931f687a9b9c2a66bf58a3861a",
    text: "hello world",
    safe_search: 1,
    content_type: 1,
    sort: "relevance",
    per_page: 20
  }, function(data, status, request) {
    var photos = request.responseXML.getElementsByTagName("photo");    for (var i = 0, photo; photo = photos[i]; i++) {
      var img = document.createElement("image");
      img.src = constructImageURL(photo);
      document.body.appendChild(img);
    }
  }
);

Love that fresh jQuery scent. Note that I left the constructImageURL function unchanged, so you’ll still need it if you want the extension to continue working.

Step 3 Adding jQuery UI (It’s Easy!)

This is the easy part. Go to the jQuery UI custom build your own download. Keep all the UI stuff checked and choose your favorite theme, you’ll have plenty of time later to choose exactly what you want or need, but for now just focus on seeing how easy it is to integrate. Now download the zip and extract in into your extensions root directory.

You can go to chrome-extension://extensionId/index.html and see all the magic of the jQuery UI demo, but working from inside a Chrome Extension. Of course extensionId is whatever that giant random string of characters that Chrome assigned to your extension was, something like opnnhifacfpohionnikhlecfgheooenk. (Learn more here)

Congratulations!

Although getting a simple skeleton/hello world extension up only takes a short amount of time, learning about all the possibilities and actually making an extension that does great things will take much longer. I hope that with this tutorial that starting will be very easy and nothing will stand in the way of your dreams.

Peace!

HTML5 JavaScript Pasting Image Data in Chrome

Send money for FREE

Pasting anything other than simple text into the browser has historically been stupendously impossible. Until now… It’s a miracle, image data pasted into the browser can be retrieved with JavaScript (at least since Chrome 13.0.782.220)! Just use this jQuery plugin and start receiving paste events with images all their sweet gooey image data. This picks up paste events initiated with Ctrl+V, it does not provide arbitrary clipboard access (which is probably sane from a security standpoint). What’s insane is that it used to be so hard to get pasted image data, but that is all behind us now.

Copy and paste me in this webpage!Give it a try now, right click this wizard and choose “Copy Image”, then jam Ctrl+V or Command+V. Be amazed (unless you’re not using Chrome, and in that case, get off my lawn). It also works in the pixel editor on

PixieEngine. Use the wizard there too, the editor currently only handles small images. Generally there is no size restriction, you can even paste image data from your favorite image editing programs, boot one up and try it out on this page.

# Created by STRd6
# MIT License
# jquery.paste_image_reader.js.coffee
(($) ->
  $.event.fix = ((originalFix) ->
    (event) ->
      event = originalFix.apply(this, arguments)

      if event.type.indexOf('copy') == 0 || event.type.indexOf('paste') == 0
        event.clipboardData = event.originalEvent.clipboardData

      return event

  )($.event.fix)

  defaults =
    callback: $.noop
    matchType: /image.*/

  $.fn.pasteImageReader = (options) ->
    if typeof options == "function"
      options =
        callback: options

    options = $.extend({}, defaults, options)

    this.each ->
      element = this
      $this = $(this)

      $this.bind 'paste', (event) ->
        found = false
        clipboardData = event.clipboardData

        Array::forEach.call clipboardData.types, (type, i) ->
          return if found

          if type.match(options.matchType) or clipboardData.items[i].type.match(options.matchType)
            file = clipboardData.items[i].getAsFile()

            reader = new FileReader()

            reader.onload = (evt) ->
              options.callback.call element,
                dataURL: evt.target.result
                event: evt
                file: file
                name: file.name

            reader.readAsDataURL(file)

            found = true

)(jQuery)

Pretty simple plugin, eh? The first part is extending the copy and paste events in jQuery with the clipboardData object. Once the paste events have been extended with all the clipboard data that Chrome provides we can use that data to extract the image contents.

The meat of the plugin is binding a paste event to all the elements in the selector. When a paste event is triggered we loop through each MIME type until we hit one that claims to be an image. Once we find it we get the corresponding file data and load it as a dataURL. This can be used directly in CSS or passed on to the server and chopped up, base64 decoded, and stored as a regular png.

To use it you choose what element to listen to paste events on (html should get all of them). I haven’t messed around much with scoping it to other elements, but I don’t see why it wouldn’t work.

$("html").pasteImageReader (results) ->
  {filename, dataURL} = results  $("body").css
    backgroundImage: "url(#{dataURL})"

Now when someone pastes a copied image to the page it sets the background to the pasted image. This is just scratching the surface, but the great thing is that you can now capture paste events containing images in pure JS/HTML.

What’s that? CoffeeScript is hot for you to handle? Well here’s the JS version:

// Created by STRd6
// MIT License
// jquery.paste_image_reader.js
(function($) {
  var defaults;
  $.event.fix = (function(originalFix) {
    return function(event) {
      event = originalFix.apply(this, arguments);
      if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
        event.clipboardData = event.originalEvent.clipboardData;
      }
      return event;
    };
  })($.event.fix);
  defaults = {
    callback: $.noop,
    matchType: /image.*/
  };
  return $.fn.pasteImageReader = function(options) {
    if (typeof options === "function") {
      options = {
        callback: options
      };
    }
    options = $.extend({}, defaults, options);
    return this.each(function() {
      var $this, element;
      element = this;
      $this = $(this);
      return $this.bind('paste', function(event) {
        var clipboardData, found;
        found = false;
        clipboardData = event.clipboardData;
        return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
          var file, reader;
          if (found) {
            return;
          }
          if (type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType)) {
            file = clipboardData.items[i].getAsFile();
            reader = new FileReader();
            reader.onload = function(evt) {
              return options.callback.call(element, {
                dataURL: evt.target.result,
                event: evt,
                file: file,
                name: file.name
              });
            };
            reader.readAsDataURL(file);
            return found = true;
          }
        });
      });
    });
  };
})(jQuery);

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);

}

Click for Online Demo

Display server IP address dynamically with the help of AJAX

In the following example we will see how to display server IP address dynamically with the help of AJAX, HTML , & PHP.

SimpleAjax.html

<html>
<body>
// <![CDATA[
javascript” >
// ]]>
function ajaxfunction()
{
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.timeform.time.value=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”SimpleAjax.php”,true);
xmlhttp.send(null);
}
</script>
<form name=”timeform” >
Name:<input type=”text” name=”Name” onkeyup=”ajaxfunction()”; />
<br/>
Time:<input type=”text” name=”time”/>
<!–form>
</body>
</html>

SimpleAjax.php

<?php
echo ($SERVER_ADDR);
?>

SimpleAjax.html

Note: In this way we can get different dynamic values of server and other like time, date etc.

Category: JavaScript Posts

Javascript Debugging IDEs

1) Webstorm

2) Coda

3) Komodo Edit

4) Aptana

5) Visual Studio Express

6) Komodo IDE

7) Netbeans

AngularJS Service Example

Read More »

Customize Google Maps

Read More »

Resizing images with PHP

Read More »

Get Langitude and Latitude from Google Map on mouse click

Simple Tutorial to Make a Chrome Extension that uses jQuery UI

HTML5 JavaScript Pasting Image Data in Chrome

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

Display server IP address dynamically with the help of AJAX

1) Webstorm

2) Coda

3) Komodo Edit

4) Aptana

5) Visual Studio Express

6) Komodo IDE

7) Netbeans

Rate this:

Zeeshan Akhter's

Like this:

Rate this:

Zeeshan Akhter's

Like this:

Rate this:

Zeeshan Akhter's

Like this:

Read More »

Rate this:

Zeeshan Akhter's

Like this:

Rate this:

Zeeshan Akhter's

Like this:

Rate this:

Zeeshan Akhter's

Like this:

Rate this:

Zeeshan Akhter's

Like this:

Online Demo

Rate this:

Zeeshan Akhter's

Like this:

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

Like this:

Rate this:

Zeeshan Akhter's

Like this: