Archivo de la categoría ‘JavaScript’

Bind en las clases de ES6 de JavaScript

Publicado por Iván Gajate el 21 de septiembre de 2019 en Desarrollo Web, Eventos, JavaScript | No hay comentarios »

Respuesta corta:

// Utilizo bind para vincular la función con el scope this
this.onClick = this.onClick.bind(this);

Respuesta larga:

Al pasar el manejador del evento como un callback, se pierde el ámbito, de tal manera que la función se ejecuta correctamente, pero dentro de ella se cree que this es el propio botón (la etiqueta html <button>). Cuando realmente nosotros esperamos que this sea la propia clase.

Para solucionarlo basta con reasignar en el propio constructor el scope que debe tener esa función.

this.onClick = this.onClick.bind(this);

y nuestra clase funcionará como esperamos:

class Foo{
 
  constructor(){
    this.onClick = this.onClick.bind(this);
    // Listener del boton
    document.getElementById('button').addEventListener('click', this.onClick);
  }
 
  onClick(){
    console.log(this); // Foo {...}
    // Ahora puedo remover el listener sin problema
    document.getElementById('button').removeEventListener('click', this.onClick);
  }
 
}
 
var foo = new Foo();

Una muy buena referencia y explicado con más detalle: https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

Usar npm sin sudo

Publicado por Iván Gajate el 8 de septiembre de 2019 en Desarrollo Web, JavaScript | No hay comentarios »

A menudo cuando vamos a escribir, por ejemplo

npm install vue

seguramente nos de un error de permisos, y tengamos que utilizar sudo para que se pueda instalar, insertando la contraseña de administrador.

Tras mucho buscar he encontrado esta forma de solucionarlo, bastante fácil de aplicar.

Consiste en usar nvm (Node Version Manager) para instalar Node desde el terminal en lugar del instalador ejecutable.

Instalamos nvm con Brew

brew install nvm

Luego podemos ver las versiones actuales de Node

nvm ls-remote

e instalamos la última, en mi caso la 10.16.3

nvm install v10.16.3

Visto en https://www.competa.com/blog/use-nvm-for-fun-and-profit-and-to-run-npm-without-sudo/

Subflash 2019 Cantabria

Publicado por Iván Gajate el 30 de agosto de 2019 en css, Desarrollo Web, JavaScript, marketing | No hay comentarios »

Qué mejor excusa para volver a escribir que contaros el fin de semana en Subflash que este año ha sido en Torrelavega.

Leer el resto de esta entrada

Cordova – Problema de seguridad al cargar archivos del dispositivo

Publicado por Iván Gajate el 30 de noviembre de 2016 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Si estamos tratando de cargar un archivo desde el móvil, por ejemplo tras buscarlo con el explorador de archivos de Android, seguramente nos dará un error como este:

Refused to connect to 'content://...' because it violates the following Content Security Policy directive...

Esto es debido a que las rutas de tipo «content://…» no son rutas válidas cuando hacemos un window.resolveLocalFileSystemURL (plugin File)

Para obtener la ruta real (del tipo file:///…) necesitamos usar Cordova Plugin FilePath, así:

window.FilePath.resolveNativePath('content://com.android.externalstorage.documents/document/...', successCallback);
 
function successCallback(realPath){
   console.log(realPath);   // file:///storage/emulated/0/Android/data...
}

Lo he encontrado tras mucho buscar, en Ourcodeworld

Descargar Cordova Plugin FilePath

JS – Getters y Setters implícitos en un objeto

Publicado por Iván Gajate el 19 de noviembre de 2016 en JavaScript | Los comentarios están cerrados.

Podemos añadir métodos getters y setters implícitos a nuestros propios objetos, tal y como se hace en otros lenguajes de programación.

var Bola = function(){
   var _api = {};
   var _diametro = 10;
 
   // Defino la propiedad "diametro" en el objeto que retorna mi constructor
   Object.defineProperty(_api, 'diametro', {
      get:function(){
         return _diametro;
      },
      set:function(value){
         _diametro=value;
      }
   });
 
   return _api;
}

Ahora podemos crear una instancia de Bola y utilizar nuestros nuevos métodos diametro (getter) y diametro=valor (setter)

var miBola = new Bola();
miBola.diametro;   // 10
miBola.diametro = 55;
miBola.diametro;   // 55

Documentación de Object.defineProperty()

JS – Recoger Parámetros de la Etiqueta Script

Publicado por Iván Gajate el 22 de febrero de 2015 en JavaScript | Los comentarios están cerrados.

Si tenemos una etiqueta script con algún parámetro así:

<script type="javascript" src="js/myscript.js?id=123"></script>

podemos recoger los parámetros usando esta función:

// Extract "GET" parameters from a JS include querystring
function getParams(script_name) {
  // Find all script tags
  var scripts = document.getElementsByTagName("script");
 
  // Look through them trying to find ourselves
  for(var i=0; i<scripts.length; i++) {
    if(scripts[i].src.indexOf("/" + script_name)>-1 && scripts[i].src.indexOf("?")>-1) {
      // Get an array of key=value strings of params
      var pa = scripts[i].src.split("?").pop().split("&");
 
      // Split each key=value into array, the construct js object
      var p = {};
      for(var j=0; j<pa.length; j++) {
        var kv = pa[j].split("=");
        p[kv[0]] = kv[1];
      }
      return p;
    }
  }
 
  // No scripts match
  return {};
}

Visto en loopj.com

Así, getParams(‘myscript’) devolverá:

{id:123}

JS – Métodos Estáticos en JavaScript

Publicado por Iván Gajate el 26 de octubre de 2014 en JavaScript | Los comentarios están cerrados.

A veces podemos necesitar que una clase que instanciemos muchas veces guarde alguna variable o método a nivel de clase, no a nivel de instancia (variables estáticas).
Podemos usar las clausuras para ello:

http://jsfiddle.net/yporqueno/h1n2gk2d/

var Persona = function (){
    // Variable de clase (estatica)
    var count = 0;
 
    // Constructor de la clase Persona
    var fn = function(){
        var _api = {};
        _api.saluda = function(){
            alert('Hola #'+count);
        };
        count++;
        return _api;
    };
 
    // Metodo estatico de Persona
    fn.getCount = function(){
        alert('Numero de personas '+count);
    }
 
    return fn;
}();

De esta manera la variable «count» solo se crea una vez, y queda accesible para cada instancia que creemos de la clase Persona.
Ahora podemos crear tantas instancias como queramos de Persona y acceder al conteo que lleva la clase de forma centralizada.

var manolo = new Persona();
manolo.saluda();
 
var pepe = new Persona();
pepe.saluda();
 
// Metodo estatico de la clase Persona
Persona.getCount();

Gracias Javi por la idea!! 🙂

Timeline – Parámetro Position

Publicado por Iván Gajate el 6 de octubre de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Sigo siendo super fan del TweenMax como herramienta para animar, y cuando utilizas a fondo el TimelineMax se pueden hacer animaciones que nunca pensaste hacer en HTML 🙂
Hay un parámetro extra al final del todo que nos da mucha flexibilidad. Position:

.to( target, duration, vars, position )

Lo que hace es «sacar» esa animación de su flujo normal en el timeline y fuerza a que empiece en otro momento que nosotros queramos.
Podemos decirle que empiece en un tiempo concreto desde que empezó el timeline, un segundo, dos segundos… o relativo a lo que sería su tiempo normal de comienzo, «+=1» por ejemplo empieza un segundo después de lo que le correspondería.
También se puede crear un label como haríamos en Flash para referirnos a ese momento con mayor facilidad.

Algo así:

 

tl.to(element, 1, {x:200})
  //1 second after end of timeline (gap)
  .to(element, 1, {y:200}, "+=1")
  //0.5 seconds before end of timeline (overlap)
  .to(element, 1, {rotation:360}, "-=0.5")
  //at exactly 6 seconds from the beginning of the timeline
  .to(element, 1, {scale:4}, 6);

Se explica muy bien en el propio vídeo de Greensock.

Hay ejemplos muy chulos como este.

JS – Hacer una Transición de un Valor Numérico

Publicado por Iván Gajate el 17 de septiembre de 2014 en JavaScript | Los comentarios están cerrados.

Hay una forma muy sencilla de hacer una interpolación entre dos valores numéricos. Un tween de un valor, como si lo hiciésemos de una posición o de la anchura de un objeto pero de un valor numérico.
Yo esto lo suelo usar para cambiar el volumen de un sonido.
Tan solo hay que envolver el valor que queramos interpolar en un objeto y hacer un tween con TweenMax como siempre:

var obj = {value:0};
TweenMax.to(obj, 1, {value:3, ease:Linear.easeNone, onUpdate:onUpdate});
function onUpdate() {
	console.log(obj.value);
}

En este ejemplo hago un tween desde 0 hasta 3 en 1 segundo.
Devolvería esto:

0
0.126
0.33
0.396
0.42000000000000004
0.471
0.522
0.573
0.6180000000000001
0.672
0.7230000000000001
0.771
0.8219999999999998
0.8699999999999999
0.9239999999999999
0.9719999999999999
1.023
1.071
1.1219999999999999
1.17
1.224
1.272
1.323
1.371
1.4249999999999998
1.4729999999999999
1.524
1.572
1.6230000000000002
1.674
1.722
1.7759999999999998
1.8239999999999998
1.875
1.9260000000000002
2.022
2.073
2.127
2.175
2.226
2.277
2.325
2.376
2.4269999999999996
2.4779999999999998
2.526
2.577
2.628
2.676
2.7270000000000003
2.775
2.8289999999999997
2.877
2.928
2.979

JS – Detectar si estoy en un iFrame

Publicado por Iván Gajate el 12 de septiembre de 2014 en JavaScript | Los comentarios están cerrados.

A veces viene bien saber si nuestra página está siendo cargado dentro de un iFrame. Es así de simple 😀

var insideIframe = window.top !== window.self;
if(insideIframe){
     // lo que sea...
}