Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Mario H. Cornejo committed Jul 29, 2013
0 parents commit c86ada3
Show file tree
Hide file tree
Showing 13 changed files with 673 additions and 0 deletions.
53 changes: 53 additions & 0 deletions byValueVsbyReference.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass-by-Value o Pass-by-Reference?</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
<h1>Pass-by-Value o Pass-by-Reference?</h1>

<div class="description">
<pre class="prettyprint" lang="js">
function changeStuff(num, obj1, obj2)
{
num = num * 10;
obj1.item = "nuevo";
obj2 = {item: "nuevo"};
}

var num = 10;

var obj1 = {};
obj1.item = "original";

var obj2 = {};
obj2.item = "original";

changeStuff(num, obj1, obj2);
console.log(num);
console.log(obj1.item);
console.log(obj2.item);
</pre>

Produce:
<pre>
10
changed
unchanged
</pre>
Si fuera puramente pass by value, entonces cambiar obj1.item no hubiera tenido efecto fuera de la función.
<br /><br />
Si fuera puramente pass by reference, entonces todo hubiera cambiado, num hubiera valido 100 y obj2.item valdría "nuevo".
<br /><br />
Lo que sucede, es que que <strong>los argumentos son pasados por <em>valor</em></strong>. Pero el <strong>elemento que es pasado por valor es en sí una <em>referencia</em></strong>.
<br /><br />
En términos prácticos, si cambias el parámetro mismo(num y obj2), no tiene efecto fuera de la función. Pero si cambias los internos del parámetro, el cambio se propaga (como con obj1)
</div>

<a class="source" href="js/byValueVsbyReference.js">Código</a>
<script src="js/byValueVsbyReference.js"></script>
</body>
</html>
39 changes: 39 additions & 0 deletions callVsApply.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>call vs. apply</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
<h1>call vs. apply</h1>
<div class="description">
Ambos te permiten invocar una función.

La diferencia es que <em>apply</em> te deja invocar la función utilizando los argumentos como un arreglo.
<br />
<br />
<em>call</em> requiere que los parámetros sean listados explícitamente.

<pre>
function miFuncion(nombre, edad, profesion){
console.log("Hola, mi nombre es "+ nombre + ", tengo " + edad + " años y mi profesión es " + profesion);
console.log("Por cierto, el valor de this es: " + this);
}

miFuncion("Yves", 25, "Ingeniero en computación");
miFuncion.apply(undefined, ["Aplicantino", 10, "Aplicante"]);
miFuncion.call(undefined, "Callantino", 20, "Caller");
</pre>

<strong>Tip: <br />
a</strong>pply = <strong>a</strong>rreglo <br />
<strong>c</strong>all = <strong>c</strong>olumna de argumentos

</div>

<a class="source" href="js/callVsApply.js">Código</a>
<script src="js/callVsApply.js"></script>
</body>
</html>
23 changes: 23 additions & 0 deletions closures-emulate-private.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Closures - emulando variables y métodos privados</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<h1>Closures - emulando variables y métodos privados</h1>
<p class="description">
Lenguajes como Java proveen la habilidad de declarar variables o métodos privados, lo que significa que sólo son visibles para miembros de la misma clase.
<br /><br />
JavaScript no provee una manera nativa de hacer esto, pero es posible de emular miembros privados utilizando Closures.
<br /><br />
Los miembros privados no sólo son útiles para restringir el acceso a código, sino también proveen una manera de manejar el namespace global, manteniendo métodos no escenciales fuera de ensuciar la interfaz pública de tu código.
</p>

<a class="source" href="js/closures-emulate-private.js">Código</a>

<div id="test"></div>
<script src="js/closures-emulate-private.js"></script>
</body>
</html>
37 changes: 37 additions & 0 deletions closures.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Closures</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<h1>Closures</h1>
<div class="description">
Variables que están en el <em>scope</em> de una función que no son des-asignadas de memoria una vez que la función regresa

<pre>
function creaSumador(a){
return function(b){
return a + b;
};
}

var suma5 = creaSumador(5);
var suma10 = creaSumador(10);

console.log(suma5(1));
console.log(suma10(1));
</pre>
</div>

<p>¿Para qué me sirven?</p>
<ul>
<li><a href="closures-emulate-private.html">Emular variables y métodos privados</a></li>
</ul>

<a class="source" href="js/closures.js">Código</a>

<script src="js/closures.js"></script>
</body>
</html>
55 changes: 55 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
margin: 50px 50px 50px 50px;
}

h1 {
text-align: center;

}

h2 {
text-align:center;
}

h3 {
text-decoration: underline;
}

ul{
padding: 0;
margin: 0 0 10px 25px;
}

li {
line-height: 20px;
}

.description {
font-size: 20px;
line-height: 26px;

}

.source {
position:absolute;
bottom: 0;
right:0;
}

.left {
float: left;
width: 50%;
}

.right{
margin-left: 50%;
}

.centered {
text-align:center;
}
47 changes: 47 additions & 0 deletions declarationVsExpression.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Declaración vs. definición de funciones</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<h1>Declaración vs. definición de funciones</h1>
<br />
<div class="left">
<h2>Function Declaration</h2>
<p class="description">
Define una función con nombre sin la necesidad de asignar su valor a una variable.
<br /><br />
No pueden ser anidadas en bloques que no sean funciones.
<br /><br />
Deben empezar con <em>function</em>
<br /><br />
</p>
<pre>
function bar(){
return 3;
}
</pre>
</div>
<div class="right">
<h2>Function Definition</h2>
<p class="description">
Define a una función como parte de una expresión mayor (típicamente asignación de una variable)
<br /><br />
Pueden tener nombre o ser anónimas.
<br /><br />
No pueden empezar con <em>function</em>
<br /><br />
</p>
<pre>
var a = function() {
return 3;
}
</pre>
</div>
<a class="source" href="js/declarationVsExpression.js">Código</a>

<script src="js/declarationVsExpression.js"></script>
</body>
</html>
38 changes: 38 additions & 0 deletions hoisting.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hoisting</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
<h1>Hoisting</h1>

<div class="description">
¿Qué se va a imprimir en consola?
<pre>
var a = 10;
function ejemploHoist(){
console.log(a);
var a=1337;
}
ejemploHoist();
</pre>
Las declaraciones de funciones y de variables siempre son movidas (hoist) hasta el tope de su <em>scope</em>.
<br/><br/>
Lo cual significa que la función anterior, en realidad funciona de la siguiente manera:

<pre>
function ejemploHoist(){
var a; // a = undefined;
console.log(a);
a=1337;
}
</pre>
</div>

<a class="source" href="js/hoisting.js">Código</a>
<script src="js/hoisting.js"></script>
</body>
</html>
46 changes: 46 additions & 0 deletions iife.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Immediately Invoked Function Expressions</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
<h1>Immediately Invoked Function Expressions</h1>
<h2>(También llamadas Self-Invoking Anonymous Functions)</h2>
<div class="description">
Ya sea que necesites definir una función como
<pre>function foo() {}</pre>
o como
<pre>var foo = function() {}</pre>
terminas con un identificador para una función, la cual puedes invocar utilizando paréntesis
<pre>foo();</pre>
No tiene sentido que la función pueda ser invocada simplemente usando () después de su declaración?
<pre>function(){ /*código */ }(); // SyntaxError: Unexpected token ( </pre>
Cuando el parser encuentra la palabra <strong>function</strong>, ya sea en el <em>scope</em> global o dentro de una función, la trata como si fuera una <em>function declaration</em>, y no como una <em>function expression</em>, por lo que piensa que es una <em>function declaration</em> sin nombre y arroja un error de sintáxis porque las </em>function declarations</em> requiren un nombre.
<br /><br />
Y si le asignamos un nombre a la función?
<br /><br />
Si le asignamos un nombre a la función y usamos paréntesis inmediatamente después, el parser también arroja un error de sintáxis, aunque por una razón distinta.

Cuando usas paréntesis después de una declaración (<em>statement</em>) los paréntesis son tratados como operador agrupador (como para controlar el orden de una evaluación).

<pre>
function foo() { /* código */ }(); //SyntaxError: unexpected token )

function foo() { /* código */}(1); //No hay excepción, pero no hace nada porque equivale a:

function foo(){ /* código */}
(1);
</pre>
Afortunadamente, es fácil solucionar el error de sintáxis. Hay muchas maneras de lograr esto, pero la más usada es utilizando paréntesis para envolver la expresión de la función. Ya que en JavaScript, los paréntesis no pueden contener <em>statements</em>, cuando el parser encuentra la palabra <strong>function</strong>, lo tratará como un <em>function expression</em> y no un <em>function declaration</em>.

<br /><br />
<a href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/">Muy buen árticulo sobre el tema </a>
</div>

<a class="source" href="js/iife.js">Código</a>
<script src="js/iife.js"></script>
</body>
</html>
35 changes: 35 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plain Old Vanilla JavaScript</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<h1>Plain Old Vanilla JavaScript</h1>

<ul>
<li><a href="closures.html">Closures</a></li>
<li><a href="inheritance.html">Herencia en JavaScript</a></li>
<li><a href="declarationVsExpression.html">Diferencia entre Function Declaration y Function Expression</a></li>
<li><a href="iife.html">Immediately Invoked Function Expressions</a></li>
<li><a href="scope.html">Alcance (<em>scope</em>)</a></li>
<li><a href="hoisting.html">Hoisting</a></li>
<li><a href="nullVsUndefined.html">Diferencia entre null y undefined</a></li>
<li><a href="byValueVsbyReference.html">Pass by value o pass by reference?</a></li>
<li><a href="callVsApply.html">call vs apply</a></li>
<li><a href="misc.html">Otras preguntas no tan comunes</a></li>
</ul>
<script>
(function(){
var expositor = {
nombre: "Yves Mancera",
twitter: "@yvesmancera",
edad: 25,
descripcion: "Ingeniero en Computación egresado de la UABC, Desarrollador JavaScript de apps interactivas en DirecTV en Los Angeles, lector, gamer, deportista y feliz"
};
console.log(expositor);
})();
</script>
</body>
</html>
Loading

0 comments on commit c86ada3

Please sign in to comment.