Learn To Code: Javascript

Showing posts with label Javascript. Show all posts

Sunday, April 16, 2017

Format currency without jQuery plugin

In this tutorial you will learn how to format currency without using any jQuery plugin.
Let’s have a look how to accomplish this

Javascript Function:-

function formatCurrency(total) {
    var neg = false;
    if(total < 0) {
        neg = true;
        total = Math.abs(total);
    }
    return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}

Call of the function will be like this:
formatCurrency(8000000000);
formatCurrency(0.700);
formatCurrency(100);

Output will be
$8,000,000,000.00
$0.70
$100.00

Saturday, March 25, 2017

How to format number in javascript jquery

Today we will figure out how to format a number utilizing JavaScript or jQuery. I was taking a shot at a report when I need the add up to be formatted and after some seeking on web I discovered some plugins however I would prefer not to use plugin on my website for such a little errand. At long last I've discovered strategy which works for me so I've chosen to compose a post to impart these little strategies to every one of you. Here I am sharing two strategies so it's your decision to use anybody of them which is appropriate for you.

Function 1 :-
//-----------------Apply comma formation on Amount using JavaScript ------------------

function CommaFormatted(amount) {
            var delimiter = ","; // replace comma if desired
            var a = amount.split('.', 2)
            var d = a[1];
            var i = parseInt(a[0]);
            if (isNaN(i)) { return ''; }
            var minus = '';
            if (i < 0) { minus = '-'; }
            i = Math.abs(i);
            var n = new String(i);
            var a = [];
            while (n.length > 3) {
                var nn = n.substr(n.length - 3);
                a.unshift(nn);
                n = n.substr(0, n.length - 3);
            }
            if (n.length > 0) { a.unshift(n); }
            n = a.join(delimiter);
            if (d.length < 1) { amount = n; }
            else { amount = n + '.' + d; }
            amount = minus + amount;
            return amount;
        }

Function 2:-
This Function take string as parameter and by using jQuery .test() function and regular expression we are adding comma to the amount.i.e. 2000 will become 2,000

function addCommas(nStr) {
            nStr += '';
            x = nStr.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? '.' + x[1] : '';
            var rgx = /(\d+)(\d{3})/;
            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + ',' + '$2');
            }
            return x1 + x2;
        }

Monday, March 20, 2017

Difference between document.ready and window onload

Today we are going to look at the difference between document.ready and window.onload events.

In JavaScript we use window.onload() whereas in JQuery we are using $(document).ready() and normally developer think these both are same but it’s not true because there are many differences between them. Basically JQuery wrap up the window.onload() from JavaScript and give the world $(document).ready() but still both are different.

Let's have a look with example:

Window.onload():

This method called up when all data/content on a page is fully loaded here all content means DOM, images, async scripts etc all we have on a page. onload method must wait for images and other frames to load and after that this event is fired.

$(window).load(function () {
             alert("all content is loaded");
    });

By adding these lines to any page, it will show alert when page is fully loaded.There is another way to call this event is:

<body onload="func_call();" >

we can add this to the body tag of page and it will work same like $(window).onload.

$(document).ready():
JQuery execute earlier than window.onload. document.ready event is fired when all DOM is loaded on the page. DOM (document Object Model) include all html tag and scripts it does not include the images and other frames. DOM load is early stage of a page to load that’s why this event starts earlier than window.onload(). so when DOM is ready document.ready() event will start execution.

$(document).ready(function () {
              alert("DOM is ready.");
    });

Another way which work same like document.ready or we can say shorthand for document.ready is:

$(function() {
        alert("DOM is ready." );
    });

Notes:

Window.onload is a JavaScript event and document.ready is specific event from JQuery.
If you have to perform some manipulation on images then its preferred to use window.load but if your operations are only related to DOM then use document.ready.
On a single page we cannot use window.load event more than one whereas document.ready is allowed to use more than once. we can have multiple document.ready but window.load will be single on a page.

Comment and suggestion are always welcome.

Pages