Details

Written by: Stanko Milosev

Category: JavaScript

Published: 30 May 2015

Last Updated: 23 March 2016

Hits: 4819

This morning I was reading this web site, about getters and setters in JavaScript, and here I want to copy / paste code which I saw there:

function wrapValue(_value) {
   return {
      get value() { return _value; },
      set value(newValue) { _value = newValue; }
   };
}
 
var x = wrapValue(5);
console.log(x.value); // output 5
x.value = 7;
console.log(x.value); // output 7

Details

Written by: Stanko Milosev

Category: JavaScript

Published: 24 May 2015

Last Updated: 26 May 2015

Hits: 4889

I just want to write few things which I learned these days.

$.Callbacks - sort of a queue of functions, where all be executed at once on fire. Example:

function consoleLogtestOne() {
    console.log("test one")
}

function consoleLogtestTwo() {
    console.log("test two")
}

var myCallbacks = $.Callbacks();

myCallbacks.add(consoleLogtestOne);
myCallbacks.add(consoleLogtestTwo);
myCallbacks.fire();

With line of code:

myCallbacks.fire();

we are executing both functions at once.

Array.prototype.map(Function) - executes callback function for each member in array. Example:

/*global console*/
(function () {
    "use strict";
    var myNumbers = [1, 4, 9],
        variableWhichWillDoNothing;
    variableWhichWillDoNothing = myNumbers.map(function (currentValue, index, array) {
        console.log("currentValue: " + currentValue);
        console.log("index: " + index);
        console.log("array: " + array);
        console.log("---");
        return "nothing";
    });
    console.log("Just to do something with doubles (to satisfy jsLint): " + variableWhichWillDoNothing);
}())

Result will be something like:

Function.prototype.apply() - provides arguments as array to function.

Check these two examples:

function applyLog() {
    console.log.apply(console, arguments);
}

function justLog() {
    console.log(arguments);
}

If you execute justLog like this:

justLog("test1", "test2")

Result will something like this:

As you can see result is an array.

Now lets execute applyLog:

applyLog("test1", "test2")

Result is something like:

As you can see no array.

Using apply and map you can generate array of elements, for example:

Array.apply(null, Array(24)).map(function (_, i) {return ('0' + i)});

Result:

["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "010", "011", "012", "013", "014", "015", "016", "017", "018", "019", "020", "021", "022", "023"]

slice - select elememts

Check this example:

('stanko').slice(-1)

Result:

"o"

Another:

('stanko').slice(-2)

Result:

"ko"

One more:

('stanko').slice(2)

Result:

"anko"

Details

Written by: Stanko Milosev

Category: JavaScript

Published: 30 January 2015

Last Updated: 01 February 2015

Hits: 10002

I was using this JS library, and google maps.

Exif library will extract GPS location as a Degree-Minute-Second, while Google uses Decimal degrees, that is why we need first converter:

	function ConvertDMSToDD(degrees, minutes, seconds, direction) {
		var dd = degrees + minutes/60 + seconds/(60*60);

		if (direction == "S" || direction == "W") {
			dd = dd * -1;
		} // Don't do anything for N or E
		return dd;
	}

Next thing we need to load the image, in my case I did it with simple Ajax request (no jQuery):

	var http = new XMLHttpRequest();
    http.open("GET", "IMG_20150103_154405.jpg", true);
    http.responseType = "blob";
    http.onload = function(e) {
        if (this.status === 200) {
            var image = new Image();
            image.onload = function() {

Then reading EXIF data is simple:

EXIF.getData(image, function() {
                    myData = this;
					
					var mapCanvas = document.getElementById('map-canvas');
					var latDegree = myData.exifdata.GPSLatitude[0].numerator;
					var latMinute = myData.exifdata.GPSLatitude[1].numerator;
					var latSecond = myData.exifdata.GPSLatitude[2].numerator / 1000;
					var latDirection = myData.exifdata.GPSLatitudeRef;
					var gLat = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
					
					var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
					var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
					var lonSecond = myData.exifdata.GPSLongitude[2].numerator / 1000;
					var lonDirection = myData.exifdata.GPSLongitudeRef;
					
					var gLon = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);

Notice that latSeconds I had to divide with 100, mapCanvas I need for google maps, an code for google maps looks like this:

var myLatlng = new google.maps.LatLng(gLat, gLon);
	
var mapOptions = {
  center: myLatlng,
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
	position: myLatlng,
	map: map,
	title: 'Hello World!'
});

google.maps.event.addListener(marker, 'click', function() {
	alert("Hello world")
});

To center google maps I needed myLatlng which I also used to place a marker, and here you can notice example how to add event to marker:

google.maps.event.addListener(
marker, 'click', function() {
alert("Hello world")
});

Example download from here. Also, don't forget this example requires IIS, or some other web server.