Sunday, July 24, 2016

What is ECMAScript ? and the Relation Between ES and JavaScript

Summary:

  • ECMAScript is scripting-language specification
  • JavaScript was originally created at Netscape, and they wanted to standardize the language. So, they submitted the language to the European Computer Manufacturer’s Association (ECMA) for standardization. 
  • JavaScript = ECMAScript + DOM API


-        The ECMAScript (or ES) is  scripting-language specification standardized by Ecma International developed by Brendan Eich of Netscape; initially it was named Mocha, later LiveScript, and finally JavaScript.
-        In December 1995, Sun Microsystems and Netscape announced JavaScript in a press release.
-        In March 1996, Netscape Navigator 2.0 was released, featuring support for JavaScript.
-        Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.The first edition of ECMA-262 was adopted by the Ecma General Assembly of June 1997.

-      Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core standard.

-        Is JavaScript exactly the same as ECMAScript?
o   No, The core features of Javascript are based on the ECMAScript standard, but JavaScript also has other additional features that are not in the ECMA specifications/standard.

-        JavaScript = ECMAScript + DOM API:
o   ECMAScript ® Language Specification:  defines all logic for creating and editing objects, arrays, numbers, etc...
o   DOM API: makes it possible to communicate with HTML documents e.g. document.getElementById('myid') .


#TecBites
#naadydev
#javascript

Monday, July 11, 2016

JavaScript Module Pattern & Closures

If you want to write well-organized JavaScript code, Or want to understand the concept behind almost all famous client side frameworks like jQuery, Angular, etc. … 
So you should know the following basics:

First Back To basics to be sure we will understand.

Object Literal syntax:

        var myObj = {
            defaults: { name: 'nady', age: 33 },
            myMethod: function () {
                // Do something
            }
        };

       myObj.myMethod();


Normal Function :
       function myClosureFunction() {
            alert('Called');
        }

       myClosureFunction();

Anonymous function 
       var anon = function () {
            alert('anonymous Func');
        };
        anon();

Or Simply using Closure:
-          You can declare a function that call itself immediately (Self-Executing).

       (function () {
            alert('Called');
        })();

-          The last parentheses , for calling itself so we can pass parameter like :

(function (message) {
            alert(message);
 }('called'));


Module Concept:
Simply the Module encapsulate your code like a class in other programming languages .

Creating Namespace to access our anonymous function (Module)
Declaring module in global scope enable us to call it everywhere, also we can call it from other modules.
        var myModule = (function () {
            //Code
        })();


Private Methods & Variables:
-          JavaScript variables can belong to the local or global scope.
-          Private variables can be achieved using closures.
-          Closure creates its own scope out of global scope.

       var myModule = (function () {
            var privateVar = 22;
            var privateMetod = function () {
                alert('Called');
            }
        })();


Public & Return
 Returning an Object with a function as a property:
       var myModule = (function () {

            return {
                publicMethod: function () {
                    alert('hi');
                }
            };

        })();

        myModule.publicMethod();


Define all our “private” stuff locally and only return, “the public objects”.

var myModule = (function () {

            var privateMethod = function () {
                alert('privateMethod Called');
            };

            return {
                publicMethodOne: function () {
                    alert('publicMethodOne Called');
                },
                publicMethodTwo: function () {

                },
                publicMethodThree: function () {

                }
            };

        })();

        myModule.publicMethodOne();
       // myModule.privateMethod()  you can't call this

//--------------------------------
       var myModule = (function () {

            // locally scoped Object
            var myObject = {};

            var privateMethod = function () { };

            myObject.someMethod = function () {
                alert('Hi');
            };

            return myObject;

        })();

        myModule.someMethod();

//------------------------------------
var myModule = (function () {

            var privateMethod = function () {
                // private
            };

            var methodOne = function () {
                // public
            };

            var methodTow = function () {
                // public
            };

            return {
                methodOne: methodOne,
                methodTow: methodTow
            };

        })();
//---------------------------------------------

Extend our Module

    var myOriginalModule = (function () {

            var privateMethod = function () {
               // Code
            };


        })();

        var myExtendedModule = (function (myOriginalModule) {

            myOriginalModule.myNewMethod = function () {
                // another method!
            };

            return myOriginalModule;

        })(myOriginalModule || {});


-> Notice (Module || {}) this is incase Module is undefined -it instantiate a new Object, and bind our extension method to it, and return it, to avoid errors.