Decalation of Array in Javascript

An array is used to store a collection of data. In javascript, data doesn’t need to have same type.

var arr = [ 1,"sam", true, {"name":"kumar"} ];

Declaration

Array can be declared in several ways,

Syntax Explanation Result
var myArray = new Array() Creates Empty Array [ ]
var myArray = new Array(3) Creates Array with
Length 3
Value all empty
[” “,” “,” “]
var myArray = [3] Creates Array with
length 1
Value 3
[3]
var myArray = new Array(1,2,3) Creates Array with
length 3
Value 1,2,3
[1,2,3]
var myArray = [“apples”, “bananas”, “oranges”] Creates Array with
length 3
Value “apple”, “banana”, “orange”
[“apple”, “banana”, “orange”]

Get Postal code using latitude and longitude

Working Demo.

$(function() {
    var lat = 13.0826802;
    var longt = 80.27071840000008;
    var keyVal = "AIzaSyDm6BvPpVO0Fc2JRcXuRuafyX6mBr31nwM";
    $.ajax({
        url: 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + longt + '&key=' + keyVal,
        type: "GET",
        dataType: 'json',
        async: false,
        success: function(data) {
            var results = data.results;
            var postalCode = getPostalCode(results);

            alert(postalCode);
        }
    });

    function getPostalCode(place) {
        for (var k = 0; k < place.length; k++) {
            for (var i = 0; i < place[k].address_components.length; i++) {
                for (var j = 0; j < place[k].address_components[i].types.length; j++) {
                    if (place[k].address_components[i].types[j] == "postal_code") {
                        return place[k].address_components[i].long_name;
                    }
                }
            }
        }
    }
});

Hoisting in javascript

Hoisting is JavaScript’s default behavior of moving declarations to the top.

function hoistTest(){
   x = 5;            // Assign "5" to x - now x is a global variable
   console.log( x ); // returns "5"
   var x;            // Declare x - now x is a local variable
}
hoistTest();
console.log( x ); // returns undefined

In the above example we assigned value for “x” without declaring it and declared it at last of function. But once javascript runs the declaration moved to top and “x” becomes the local variable. Hence outside the function it becomes undefined. This is how the “x” declaration in hoisted.

If not declared, “x” stays as global variable.

function hoistTest(){
   x = 5;            // Assign 5 to x - now x is a global variable
   console.log( x ); // returns "5"
}
hoistTest();
console.log( x ); // returns "5"

Find Pangram in JS

Pangram is a sentence containing every letter of the alphabet. A simple try in js to find Pangram. DEMO

var i, alphabets = "abcdefghijklmnopqrstuvwxyz";

function isPangramFun() {
    var isPangram = true;
    var input = document.getElementById("inputTxt").value;
    for (i = 0; i < 26; i++) {
        if (input.toLowerCase().indexOf(alphabets[i]) == -1) {
            isPangram = false;
            break;
        }
    }
    alert(isPangram ? "Pangram" : "Not Pangram");
}

Number Animation using jQuery

Number is an important value that we could see in many places, Just a try to make that number look awesome. DEMO

$(function(){
  $('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
   });
});

Draw a line from x,y with a given angle and length

Draw a line from x,y with a given angle and length. DEMO Fiddle

function drawLine(x1,y1,r,theta){
    ctx.clearRect(0, 0, c.width, c.height);    
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x1 + r * Math.cos(Math.PI * theta / 180.0), y1 + r * Math.sin(Math.PI * theta / 180.0));   
    ctx.closePath();
    ctx.stroke();
  }

Angular Bind Model to Model

I had a scenario, i have to show 4 inputs. In which 4th input is the sum of other 3. this should be easy, but the challenging factor is that i have to save the last input value in a model. So the scenario changed to “Give value for a model from another three model” and the change should be dynamic. Here is the solution i found for that. 🙂 DEMO

<input type="text" ng-model="textInput1" id="textBoxval1" value="temp2"/>
<input type="text" ng-model="textInput2" id="textBoxval2" value="temp2"/>
<input type="text" ng-model="textInput3" id="textBoxval3" value="temp2"/>
<input type="text" ng-model="textInputT" id="textBoxvalT" 
value = "{{textInputT=textInput1 +'-'+ textInput2 +'-'+ textInput3}}"/>