Code And Boom !!!: Javascript

Showing posts with label Javascript. Show all posts

Friday, October 7, 2011

Object Oriented Javascript - Object, Constructor and Methods

Hey, in this post, i will share something great and incredible. Have you heard about Object Oriented Programming with Javascript? At first, maybe you think that's impossible because javascript is a very simple language. Now, you must change your mind because javascript is a very powerful language and will be mostly used by many programmers in the future. Before you read further, you must having some knowledge about javascript and object oriented programming.

Okay, let's move to the explanation. Actually, everything in javascript is an Object. There is no class in javascript. You don't need to define a class to create an object. All you have to do is create the constructor, its properties and its methods. Here's the code :

Loading page asynchronously with JQuery Ajax Load( )

Have you ever seen an interesting website that can change its content dynamically without reloading the entire page ?

I've found a simple way to doing that, thanks to JQuery Ajax load().

JQuery Ajax load() will load data from the server and place the returned HTML into the matched element (by : JQuery). To doing that, you simply need a <div> element that will be the container of the returned HTML and then define the script that will load the HTML into that <div>.

First, you need the jquery.js.. You can download the newest version of JQuery here.

After that, you must add the jquery.js to your page. Add the script reference into the head part of your page like this :

Using Google Maps Javascript v3 Street View with Panorama

Google Maps Street View is a Google's service that provides panoramic 360 degree on several street in several location (hopefully, in the short time, it will provide all street in the world.. ^_^). It's very useful for displaying photos, scenery or panoramic of a specific place in the map that you can't see clearly even with maximal zooming. You can see the location with any Point of View. All you must to do is only specify a StreetViewPanorama object with its options.

By default, Google Maps provides the Street View display. All you must to do is drag the Pegman of the map on a StreetView-enabled street. It's often marked by blue lines. Drag the Pegman in that place, drop it and your map become the Street View of that place..

Drag the Pegman

Using Directions Features of Google Maps Javascript v3

Hey, in this post, i will tell you about Directions feature in Google Maps Javascript v3 and give you a small example. First, you must be familiar with Geocoding. You can read my post about Geocoding here. After you understand about Geocoding, let's start the show...!!! ^_^

Directions is the capability of Google Maps for displaying the route and directions between two location. There are three things that you must specify before you send a directions request to Google Maps.

Origin = specify the starting point.
Destination = specify the end point
TravelMode = specify what mode of transport to use. You must specify it because it will give different route for different transport. Until this post launched, there are three type of transports that were supported by Google Maps, (TravelMode.DRIVING, TravelMode.WALKING, TravelMode.BICYCLING).

There are other parameter, you can find them here. For my example below, i will only use the three parameters above. You will also need two object for Directions features. They are :

DirectionsService that will calculate the route for you with its route() method.
DirectionsDisplay that will render the routes for you.

Okay, that's all we need to make a simple directions application. For the example, i will create a web application that will let you give a start and end point in the textbox, calculate the route and display it for you and also give the detailed text-based directions for you (like "Turn right onto bla bla bla..").

First, don't forget to add the Google Maps Javascript's script reference like below, inside the <head> tag before you use any part of Google maps.

Simple Geocoding Web Application with Google Maps Javascript..

Geocoding is the process of converting human-readable address (like "Ahmad Yani, Surabaya", "Malang", etc) into geographic coordinates (like "latitude 33.422821 and longitude -112.075639"). It's often used to place a marker in map.

I will give you a simple example that will use Geocoding to find a location on a map based on user input in a text box. I will use Google Maps. To use Google Maps, you must add a script reference to their API. The syntax is like below :

It must be placed inside <head> tag before you initialize your maps. After that, you must define the HTML element that we will need. We will need a <div..> element as a map container, a textbox for user input and a button for submit the request. Here is the code :

JSON - Javascript Object Notation

When you build an AJAX-enabled website, you must know how to communicate with the server from the client and vice versa. The most-used data interchange format is JSON (Javascript Object Notation). JSON is a lightweight data-interchange format that based on Javascript. Many developer use JSON when sending data to the server along with the request. JSON can hold simple data and complex data (array, object, etc). JSON is more popular than XML because of its speed. JSON absolutely faster than XML.

There are 2 ways to create JSON and send it to the server :
1. Directly create string JSON.
2. Create javascript object and then convert the object into string JSON.

To directly pass JSON to the server without parsing it, you must create string JSON directly.

The syntax is :

var myJSON = "{ some data }";

Here is the example of simple JSON format :

Code And Boom !!!

Pages

Friday, October 7, 2011

Object Oriented Javascript - Object, Constructor and Methods

Saturday, October 1, 2011

Loading page asynchronously with JQuery Ajax Load( )

Wednesday, September 28, 2011

Using Google Maps Javascript v3 Street View with Panorama

Monday, September 26, 2011

Using Directions Features of Google Maps Javascript v3

Friday, September 23, 2011

Simple Geocoding Web Application with Google Maps Javascript..

Friday, September 16, 2011

JSON - Javascript Object Notation