Skip to content

Latest commit

 

History

History

01-clear-ideas

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

img

img

 
 

README.md

README.md

 
 

README.md

Clear Ideas about Javascript

But the big difference has always been between IE and the rest of the browsers (until IE9)

  • These JS (engines) in each browser, perform different types of optimizations in the code. That's why the performance in different according to different browsers

    http://jsperf.com/browse

  • A library is a set of utilities commonly used that can be used to develope applications saving time and effort. The most popular library is jQuery.

A brief history of Javascript

JS History 1

  • Javascript was created in 10 days in May 1995 by Brendan Eich, under the name of Mocha

  • The first version of Javascript appears in the browser Netscape 2.0

  • On December 1995 SUN Microsystems and Netscape decided to give the name JavaScript to it (before it was called Mocha and LiveScript) because of a simple matter of pure marketing (Java was the most popular language in those days).

  • In 1996 Internet Explorer 3.0 includes its own version of this language which later would be the standard ECMAScript and named it JScript

  • In 1997 this language is proposed as a standard and the European Computer Manufacturers Association (ECMA) take it as that. That's the why of the name ECMAScript

  • In June 1997 the first edition of ECMA-262 is published

  • In 1998 and because of the diferences between the different implementations in the browsers, the W3C (World Wide Web Consortium) designs the standard DOM that is an interface (API) to access and modify the structured content (HTML) of the documents.

  • In 1999, the modern Javascript (as we know it) starts with the arrival of the third edition of ECMA-262, also called EcmaScript 3

JS History 2

  • In 2005, the term AJAX is coined y revolutionizes the world of web development with the arrival of asynchronous web sites (Gmail , Google Maps, ...)

  • In 2005 the first version of jQuery is launched. Differences between browsers have marked developments until today and it's very common the use of libraries and frameworks (like jQuery) to help us out with these differences.

  • In 2009 the fifth edition of ECMA-262, also known as ECMAScript 5, is released. The edition 5.1 is released in 2011

  • In december 2014 the 6th edition of ECMA-262 or ECMAScript 6 is approved.

  • In June 2015 the 6th edition of ECMAScript is launched rebaptised as ECMAScript 2015

ECMAScript

EcmaScript 5

ECMAScript5.1 was launched on 2011 and we can say that is the actual Javascript standard (2016).
This version extends the previous ones with some improvements:

  • strict mode

    function() {
  "use strict";
}

    http://cjihrig.com/blog/javascripts-strict-mode-and-why-you-should-use-it/
    http://www.nczonline.net/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/

  • Object new methods

    // Creates an object with parent as prototype and properties from donor
Object.create(parent, donor);

// Meta properties of an object
var descriptor = {
  value: "test",
  writable: true,    // Can the value be changed?
  enumerable: true,  // Will it appear in for-in and Object.keys(object)?
  configurable: true, // Can the property be removed?
  set: function(value) { test = value}, // Getter
  get: function() { return test }       // Setter
}

// Methods for manipulation the descriptors
Object.defineProperty(object, property, descriptor)
Object.defineProperties(object, descriptors)
Object.getOwnPropertyDescriptor(object, property)
Object.getPrototypeOf(object)

// Returns an array of enumerable properties
Object.keys(object)
// Returns an array of all properties
Object.getOwnPropertyNames(object)

// Prevents anyone from adding properties to the object, cannot be undone.
Object.preventExtensions(object)
Object.isExtensible(object)

// Prevents anyone from changing, properties or descriptors of the object.
// The values can still be changed
Object.seal(object)
Objcect.isSealed(object)

// Prevents any changes to the object.
Object.freeze(object)
Object.isFrozen(object)

  • Function.prototype.bind()

    var tapir = {
  method: function(name){
    this.name = name;
  }
};
setTimeout( tapir.method.bind(tapir, "Malayan"), 100 );

  • String.prototype.trim()

    >>> var orig = '   foo  ';
>>> console.log(orig.trim());
'foo'

  • Array new methods

    // Do all elements satisfy predicate?
Array.prototype.every(predicate)

// Return a new array with the elements that satisfy predicate?
Array.prototype.filter(predicate)

// Call action(element) for each element.
Array.prototype.forEach(action)

// What is the index of the first element that equals value?
Array.prototype.indexOf(value, fromIndex)

// What is the index of the last element that equal value?
Array.prototype.lastIndexOf(value, fromIndex)

// Create a new array by applying unaryFunc to each element
Array.prototype.map(unaryFunc)

// Reduces the elements of the array, by applying binaryFunc
// between the elements
// [a0, a1].reduce(+ , seed)  == seed + a0 + a1
Array.prototype.reduce(binaryFunc, seed)

// Is at least one element satisfied by the predicate?
Array.prototype.some(predicate)

  • Native JSON support with JSON.parse() and JSON.stringify()

If we look at the statistics about the use of browsers and the compatibility of these browsers with ES5 we can conclude that : based on ES5, our code will work well on the majority of browsers currently used (2016).

We can give support of some ES5 features in older browsers that doesn't support them by using the proper shim

EcmaScript 3

ECMAScript 3 was launched on 2001 and ALL the browsers (old y modern ones) follow this standard.

It adds (from the previous standard): do-while, regular expressions, new string methods (concat, match, replace, slice , split w/ regular expressions, etc.), exception handlers and more.

EcmaScript 6

ECMAScript 6 is the latest Javascript standard but still is not enough implemented in the most used browsers.

https://6to5.org/docs/tour/
https://github.com/ericdouglas/ES6-Learning
http://es6rocks.com/
http://code.tutsplus.com/articles/use-ecmascript-6-today--net-31582

This last version adds to the language a lot of sugar syntax and new features

Although we can give support of some of this features not supported in browsers by using the proper shim

Also we can use pre-processors tools to work w/ ES6 and automatically convert this code (transpile) into the more implemented in browsers ES 5.1