Conceptos avanzados de Javascript
En el lenguaje de programación líder en el mundo, siempre viene bien repasar algunos de los conceptos avanzados más importantes.
Conceptos avanzados de Javascript
Desde hace ya varios años, JavaScript ocupa el primer lugar como el lenguaje de programación más usado del mundo. Con casi 70% de la cuota mundial, seguido de HTML/CSS, SQL, Python y Java, es omnipresente en todo tipo de dispositivos. Es utilizado principalmente para desarrollo web —páginas como 7 slots casino, por ejemplo—, juegos, aplicaciones móviles y servidores web, gracias a su facilidad de aprendizaje y versatilidad.
Aunque es virtualmente infinito el número de opciones disponibles para aprender este lenguaje de programación, nunca viene mal un repaso. Y si se trata de conceptos avanzados que se usan solo en algunos escenarios o que ya olvidamos, mucho mejor. He aquí una breve selección de funciones que seguramente avivarán tus ganas de aprender o profundizar en este poderoso lenguaje.
Same Origin Policy (Política del Mismo Origen)
Como su nombre lo indica, es una función que solo permite la ejecución de scripts que provengan del mismo origen. Esto es, que comparten el mismo esquema, hostname y puerto, y que son ejecutados en diferentes páginas o ventanas del navegador. De este modo, se les permite acceder sin restricciones a sus respectivos DOM (Document Objet Model).
Es una medida de seguridad que protege al usuario de scripts maliciosos que provengan de otros sitios sin su conocimiento. Veamos unos ejemplos:
Mismo origen:
- http://mysite.com
- http://mysite.com/
- http://mysite.com/my/page.html
Diferente origen:
- http://www.mysite.com (dominio .com)
- http://mysite.org (dominio .org)
- https://mysite.com (diferente protocolo)
- http://mysite.com:8080 (puerto diferente)
Esta política aplica también para las peticiones AJAX —del tipo XMLHttpRequest—, que solo podrán comunicarse con el host especificado. Sin embargo, los WebSockets, que permiten una comunicación bidireccional y simultánea, no se ven afectados y permiten acceder a diferentes dominios.
Aunque la Same Origin Policy viene implementada por defecto en todos los navegadores —antiguos y modernos—, no es ineludible. Veamos dos maneras de «burlar» esta política de seguridad: JSONP y CORS.
JSONP
JSONP o «JSON con padding» es una API de intercambio de datos creada para resolver la limitación de la Same Origin Policy. JSON y JSONP son casi lo mismo, pero esta última se diferencia por su envoltura o «padding», de allí su nombre. Esta envoltura le posibilita usar una alternativa permitida de carga que le permite acceder a datos bloqueados para una JSON.
Si, desde la página mysite.com, ejecutamos el siguiente script en un navegador
$.ajax({
url: ‘http://www.ANOTHERSITE. com/datos.json’,
success: function(data) {
console.log(data)
}
});
obtendremos un mensaje como este:
Refused to connect to ‘http://www.anothersite.com/datos. json’ because it violates the following Content Security Policy directive.
Esto se debe a la Same Origin Policy del objeto XMLHttpRequest, que detecta la diferencia entre los dominios (mysite.com y anothersite.com). Sin embargo, al ejecutar el siguiente script:
<script type=»text/javascript» src=»http://www.ANOTHERSITE.com/datos.json»></\script>
podremos acceder sin problemas a los datos del JSON mediante la etiqueta script y el atributo src del otro dominio.
CORS
Su nombre son las siglas de Cross-Origin Resourse Sharing, que significa «intercambio de recursos de origen cruzado». En efecto, se trata de un protocolo que habilita el intercambio de contenido entre distintos servidores de manera segura.
Esta tecnología, disponible en los navegadores web modernos, tampoco permite cualquier tipo de intercambio, precisamente por razones de seguridad. CORS solo permite ejecutar peticiones cuando el dominio de destino —el servidor— acepte recibir peticiones del dominio de origen.
Una petición CORS usando jQuery, por ejemplo, que quiera conectarse a GitHub, podría ser tan sencilla como esta:
$.ajax({
url: «https: //api.github.com/users/somecoolguy/repos»,
success: function( response_json ) {
console.info (response_json); }
}
);
La web de nuestros días, cada día más compleja e interconectada, depende en gran medida de las solicitudes de origen cruzado. Sin embargo, CORS es una herramienta que debe utilizarse de la manera más restrictiva posible, para evitar cualquier brecha de seguridad.
Prototype
Con frecuencia, JavaScript es descrito como un lenguaje de programación basado en prototipos, justamente a causa de esta potente propiedad. Prototype es un mecanismo que permite a los objetos creados en JS heredar características y atributos entre sí. Un objeto prototipo de un objeto determinado puede, a su vez, tener otro objeto prototipo y así sucesivamente.
Esta propiedad, conocida como «cadena de prototipos», permite que objetos diferentes puedan exhibir atributos y métodos definidos en otros objetos. Dicha propiedad habilita un gran abanico de posibilidades que aceleran el desarrollo y generan un código limpio y eficiente.
Herencia
Es el mecanismo predeterminado en JavaScript para que una clase le extienda atributos a otra, es decir, implemente la herencia. Supongamos que tenemos la clase «animal»:
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
run(speed) {
this.speed = speed;
alert(`${this.name} corre a una velocidad de ${this.speed}.`);
}
stop() {
this.speed = 0;
alert(`${this.name} se queda quieto.`);
}
}
let animal = new Animal( «Mi animal»);
y nos proponemos crear la clase «Topo»:
class Mole extends Animal {
hide() {
alert(`¡${this.name} se esconde.`);
}
}
let mole = new Mole( «Topo»);
mole.run(5); // Topo corre a una velocidad de 5.
mole.hide(); // Topo se esconde.
Así, los objetos de la clase «Mole» pueden acceder tanto a los métodos de su clase como los de «Animal». Esto, bajo la forma de una cadena de prototipos, puede adquirir cuanta complejidad sea necesaria para nuestro proyecto.
