I'm a Builder
Focusing in Frontend Development
Internet Explorer & Navigator
Mocha, LiveScript, JavaScript
Comunidad de JavaScript
2005 - 2009
Always bet on JavaScript
Brendan Eich
COD
Código de conducta
- Respeto (harassment-free)
- Tu pregunta es valiosa e importante
- Cero bullying
'foo' + + 'foo'
// 'fooNaN'
'5' + - + - - + - - + +
- + - + - - - '3'
'5' + - + - - + - - + +
- + - + - - - '3'
// '53'
Punto y coma
Excepto para for, function, if, switch, try and while
0.1 + 0.2
// 0.30000000000000004
// IEEE Standard for binary
// floating-point arithmetic
(0.1 + 0.2)*100
30/100
0.3
parseInt('43');
// 43
parseInt('43 Km')
// 43
parseInt(09)
Operadores de Igualdad
== y !=
'' == '0'
// false
0 == '0'
// true
false == 'false'
// false
false == '0'
// true
+ '0';
// 0
+ 'foo';
// NaN
isNaN(parseInt('hello 89'));
// true
I could be a better programmer by using only
the good parts and avoiding
the bad parts
// Quiero retornar un objeto
var color = function () {
return
{
alpha: 90
}
}
var foo = 'my value';
var moo = function () {
foo = "Change global";
}
moo();
console.log(foo)
// Declaración directa de variable global
window.foo = 'value';
// Global implícita
foo = 'value';
// Forma correcta
var foo = 'value';
// Cómo usar variables globales
var MYAPP = {};
MYAPP.author = {
name: 'Jonathan',
city: 'PEI'
};
MYAPP.skills = ['javascript', 'design', 'python'];
// ES6
let foo = 'value';
const moo = 'inmutable value';
// Statement
function foo() {
...
}
// Expression
var foo = function () {
...
}
First-class Functions
A function is an Object
var s = function () {
if (true) {
var b = 10;
}
console.log(b);
}
var sc = function () {
var a = 3, b = 5;
var bar = function () {
var b = 7, c = 11;
a += b + c;
}
bar();
console.log(a, b);
}
// let (ES6)
// Block scope
function bar() {
if (true) {
let foo = 'hello';
}
return foo;
};
// const (ES6)
// Inmutable variables
const b = 'Hello BGA!';
b = 'Bye BGA!';
b; // 'Hello BGA'
// Immediately-Invoked Function Expression
// IIFE
(function () {
// Own scope
})();
// IIFE y variables globales
(function (author) {
// Own scope
})(MYAPP.author);
// Modulos
var mymodule = (function () {
...
return {
api: api;
}
})();
Workshop 1
Aprendiendo sobre funciones y callbacks
- Crear una variable global con una propiedad data
- Definir una lista de objetos en la propiedad data
-
Crear una funcion que retorne una nueva lista solo con los nombres.
Hint: Usar for para recorrer el array
- Crear una funcion que retorne una nueva lista solo con las propiedades 'fullName' y 'city'
-
Modular las funciones anteriores en una sola llamada map.
Hint: map(array, modificador) retorna array
Extra bonus: Agreguela dentro del prototipo de Array como myMap.
- Crear una funcion que devuelva un objeto con la siguiente forma:
{'BGA': [{person}, {person}], 'PEI': [{person}, {person}] ...}
Hint: hasOwnProperty
-
Module las funciones anteriores en una sola llamada reduce.
Hint: reduce(array, combinador, valor_inicial)
Extra bonus: Agregar dentro del prototipo de Array como myReduce.
¿Realmente necesitamos
jQuery?
Workshop 2
Consultando el DOM
-
Crear una lista HTML de por lo menos 10 elementos. La etiqueta que
contiene lleva id 'list', y cada item clase 'item'
- Obtenga el elemento de ID ul#list
- Obtenga el primer item de la lista
- Obtenga el último item de la lista
- Obtenga el item número 14
- Elimine el item #7
-
6. Cree un nuevo elemento li con el texto 'Nuevo item' y
agreguelo en la posición 7
- Obtenga todos los elementos con la clase item
-
Para cada uno de los items, agregue un evento click, de modo que al dar
click sobre alguno de ellos se imprima en consola el valor de
la posición al que pertenece
- Explique el comportamiento anterior
- Haga que funcione como debe ser
