JAVASCRIPT

Es una $#%&!!!




?


Agenda




  1. Algo de historia
  2. Funciones
  3. Scope
  4. Closures
  5. Patrones
  6. Herramientas
  7. Lo que viene (ES6)


Algo de historia



Javascript es un lenguaje de programación basado en scripting, fue creado por Brendan Eich para Netscape buscando enriquecer la experiencia de usuario en las paginas web. 

La primera versión del navegador que apareció haciendo uso de Javascript fue la 2.0 en 1995.

Netscape lo presentó ante la ECMA International y fue estandarizado como ECMAScript en el estándar ECMA 262.

Funciones


Son la estructura principal del lenguaje, existen varias formas de definir una función:

//Forma tradicional
function myFuncion(){
};

//Funciones anónimas
function (){
};

//Forma de variable
var myFuncion = function(){
};

 Scope(Contexto o ámbito)


El contexto de una variable, función u objeto en Javascript esta determinado por la función u objeto que lo contiene.

Un caso particular de lo anterior, son las variables llamadas globales, estas no pertenecen a ninguna función definida por el usuario, pertenecen al objeto window.





Ejemplo


var saludo = "hola ";

window.onload = saludar;

function saludar(){
  var b = "mundo";
  var element = document.getElementById("content");
  element.innerHTML = saludo + b;
}

//saludo esta disponible en toda la aplicacion ya que esta en el scope global.
console.log(saludo);

//b no esta disponible fuera de la función saludar.
console.log(b);


 Closure


Un closure es una función anidada que guarda referencias de las variables que estan presentes en el mismo scope que la función, inclusive después que ha retornado.

  • Evitan colisiones de nombres.
  • Dan orden al código.
  • Encapsulan funcionamiento.

Ejemplo


function enviar(nombre) {
// variable Local 'nombre' es guardada en el closure// función anidada.
  return function () {
  enviarHola(nombre);
  }
}

function enviarHola(msg) {
  console.log('Hola ' + msg);
}

var func = enviar('Juan');
func();
EnviarHola('Pedro');
func();

Patrones de desarrollo


Conjunto de estrategias y buenas practicas que facilitan el desarrollo de las aplicaciones.

En Javascript algunos de los patrones mas utilizados son:

  • Single var
  • Namespaces
  • Modulos
  • Prototipos

Single var

Definición de variables tradicional:

var miVariable1=1;
var miVariable2=2;
var miFuncion = function(){
};

Usando Single var podemos definirlas de la siguiente forma:

var miVariable1 = 1,
    miVariable2 = 2,
    miFuncion = function(){
};

No existen consideraciones de rendimiento usando este patrón, solo permite escribir menos y es un poco mas organizado.

Namespaces

Usando namespaces garantizamos que no existen colisiones de nombres en nuestra aplicacion y también cuando usamos librerias existentes. 
Definición: 
var Namespace = Namespace || {};
Un buen ejemplo de uso de namespaces:

var MyCompany = MyCompany || {};MyCompany.MyApplication = {};MyCompany.MyApplication.Model = {};

Módulos

Pros:

  • Variables y funciones sacadas del contexto global.
  • Permite la creación de componentes reutilizables.
  • Permite definir miembros públicos y privados.
Contras:

  • Las funciones son duplicadas en memoria por cada instancia de los objetos creados.
  • No es sencillo extender funcionalidad.


Estructura



var Identificador = function(){//private variables//private functionsreturn{//public members};};

Ejemplo


var Calculadora = function(x, y) {
  if (!x) {
    x = 1;
  }
  if (!y) {
    y = 2;
  }

  return {
    add: function() {
      return x + y;
    },


    multiply: function() {
      return x * y;
    }
  };
};

Prototipos

Pros:

  • Las funciones son cargadas en memoria solo una vez.
  • Variables y funciones sacadas del contexto global.
  • Permite la creación de componentes reutilizables.
  • Se soporta sobre caracteristicas nativas del lenguaje.
  • Posibilidad de sobreescribir funciones.

    • Contras:

  • Hay que tener especial cuidado con la palabra reservada "this".
  • El constructor esta separado de la definicion del prototipo.

    • Estructura


    var Identificador = function(args){
//Inicialización
}; 
    Identificador.prototype = {//Miembros públicos}

    Ejemplo


    var Calculadora =  function(elementId){this.elementReference = document.getElementById(elementId);};
    Calculadora.prototype = {add: function(x, y){     var val = x + y;     this.elementReference.innerHTML = val;}}

    Herramientas


    Editores Gratuitos:

    • Notepad ;)
    • Aptana Studio 3
    • Sublime Text 3
    • Visual Web Developer Express 2013

    Debugging:

    • Browser Developer Tools(Chrome, Firefox, IE)
    • Firebug???

    Lo que viene... ECMA Script 6

    Definicion de variables de bloque de codigo:
    // ES 5
function doSomething() {
  var N = 5;
  if (someCondition) {
     var N = 10;
     doSomethingElse(N);
  }
  console.log(N); // 10
} 
    // ES 6
function doSomething() {
  let N = 5;
  if (someCondition) {
     let N = 10;
     doSomethingElse(N);
  }
  console.log(N); // 5
}


    Constantes:

    /// ES 6
'use strict'
const limit = 100;
limit = 200; // SyntaxError: Assignment to constant variable.

    Parametros con valor por defecto:

    function prueba(x=2, y=1, z=0) {console.log(x);console.log(y);
    console.log(z);
    }
    prueba(); // 2, 1, 0
    Clases:

    // ES 5
function Vehicle(color) {
  this.color = color;
  this.speed = 0;
}
 
Vehicle.prototype.drive = function() {
  this.speed = 40;
}

// ES 6
class Vehicle {
  constructor(color) {
    this.color = color;
    this.speed = 0;
  }
  drive() {
    this.speed = 40;
  }
}
    Módulos: 

    //mathlib.js
export function sum(x, y) {
    return x + y;
  }

const HALF = 0.5;
export function sqrt(x) {
  return Math.exp(HALF * Math.log(x));
}

//tu app.js
import { sqrt } from 'mathlib';
console.log(sqrt(16));


    Y muchas caracteristicas mas...




    ¿Preguntas?

    Recursos




    Happy Coding!



    Javascript

    By AresDev

    Made with Slides.com

    Javascript

    Patrones de desarrollo Javascript

    • 310

    More from AresDev