Skip to content

Instantly share code, notes, and snippets.

View johnsi15's full-sized avatar
🤖
Web technology lover 👨‍💻

John Serrano johnsi15

🤖
Web technology lover 👨‍💻
View GitHub Profile
@johnsi15
johnsi15 / TemplateStrings.js
Created August 9, 2017 15:21
Con ES6 podemos interpolar Strings de una forma más sencilla que como estábamos haciendo hasta ahora. Fíjate en este ejemplo:
//ES6
let nombre1 = "JavaScript";
let nombre2 = "awesome";
console.log(`Sólo quiero decir que ${nombre1} is ${nombre2`);
// Solo quiero decir que JavaScript is awesome
// También podemos tener String multilínea sin necesidad de concatenarlos con +.
//ES5
var saludo = "ola " +
@johnsi15
johnsi15 / Promesas.js
Last active July 26, 2017 03:57
Las Promesas son objetos y están asociadas con alguna tarea asincrónica.
function get(URL){
//New Promise recibe una funcion
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
const DONE = 4
const OK = 200
if (this.readyState === DONE) {
if(this.status === OK){
@johnsi15
johnsi15 / Callback.js
Last active July 26, 2017 03:16
Manejo de los callbacks y como funcionan
function get(URL, callback){
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
const DONE = 4
const OK = 200
if (this.readyState === DONE) {
if(this.status === OK){
//Todo OK
callback(null, JSON.parse(this.responseText))
@johnsi15
johnsi15 / CallyApply.js
Last active July 22, 2017 03:59
Con call y apply podemos definir el valor de this y ejecutar la función
const sacha = {
nombre: 'Sacha',
apellido: 'Lifszyc'
}
function saludar(veces, uppercase) {
let str = `Hola ${this.nombre} ${this.apellido}`
str = uppercase ? str.toUpperCase() : str
for (let i = 0; i < veces; i++) {
console.log(str)
@johnsi15
johnsi15 / La función bind
Last active July 11, 2017 15:42
El método bind devuelve otra función que asigna el this a lo que nosotros le pasamos como parametro
class Toggable {
constructor(el) {
// inicializar el estado interno
this.el = el
this.el.innerHTML = 'Off'
this.activated = false
this.onClick = this.onClick.bind(this) // Si no se hace el bind toma como referencia el this el elemento del button
this.el.addEventListener('click', this.onClick)
}
@johnsi15
johnsi15 / This, _this y los arrow functions
Created July 7, 2017 03:46
This hace referencia a un objeto y su valor depende de donde lo usemos
class Persona {
constructor(nombre, amigos = []) {
this.nombre = nombre
this.amigos = amigos
}
listarAmigos() {
const _this = this
this.amigos.forEach((amigo) => {
@johnsi15
johnsi15 / closures de JavaScript
Created June 30, 2017 04:02
Los closure son funciones que recuerdan el entorno en el cual fuerón creadas, esto quiere decir que al llamar la función van a recordar las variables que tenian en ese momento. Por ejemplo, si queremos hacer una función para saludar determinada familia
function saludarFamilia(apellido) {
return function saludarMiembroDeFamilia(nombre) {
console.log(`Hola ${nombre} ${apellido}`)
}
}
const saludarGomez = saludarFamilia("Gomez")
const saludarPerez = saludarFamilia("Perez")
const saludarRomero = saludarFamilia("Romero")
@johnsi15
johnsi15 / Operaciones con arrays
Last active July 1, 2017 03:19
Los arrays son una forma de guardar nuestros datos muy importante en JavaScript, en este vídeo veremos como trabajar con Arrays. De esta forma utilizamos el método reduce con el cual cuentan los arrays, este nos permite ir iterando por todo el array y acumulando el valor en una variable.
function suma(...numeros) { // Los tres puntos significa que vamos a pasar n cantidad de parametros
return numeros.reduce(function (acum, numero) {
acum += numero
return acum
}, 0)
}
// Ahora queremos ejecutar una operación sobre todos los elementos del array, para esto tenemos un método llamado map
const dobles = (...numeros) => numeros.map(numero => numero * 2)
@johnsi15
johnsi15 / scope de las variables
Created June 29, 2017 03:33
Escope es el conjunto de variables y funciones que podemos llamar en una parte del código Si definimos una variable en el scope global (window en el navegador) podemos acceder a ella dentro de cualquier lugar del código. Si definimos una variable dentro de una función solo lo podemos utilizar dentro de esa función si lo declaramos con var, si lo…
var nombre = "Sacha"
function saludar10() {
var nombre
if (true) {
nombre = "Eric"
}
console.log(`Hola ${nombre}`)
}
@johnsi15
johnsi15 / Mover Puntos
Last active June 28, 2017 16:50
Objetos Avanzado en JavaScript
const p1 = {
x: 0,
y: 4,
moverEnX(x) {
this.x += x
},
moverEnY(y) {
this.y += y
}
}