javascript - uniandesisis3710/... · 2016-10-06 · ejemplo: la función foreach var numbers = [4,...

JAVASCRIPTISIS 3710

Javascript: Funciones

var x = function (a, b) {return a * b};

En JS, no hay chequeo de tipo ni de número de parámetros



var z = x(4);

var z = x();?




var z = x(4);

var z = x();


NaN

NaN


var someFunction = function() {…};someOtherFunction(someFunction);

En JS, las funciones pueden ser argumentos de otras funciones

someOtherFunction(function(){…});

Ejemplo: la función every

var ages = [32, 33, 16, 40];

function checkAdult(age) { return age >= 18;}

function myFunction() { document.getElementById("demo").innerHTML = ages.every(checkAdult);}

myFunction();

Ejemplo: la función every

var ages = [32, 33, 16, 40];

function checkAdult(age) { return age >= 18;}

function myFunction() { document.getElementById("demo").innerHTML = ages.every(checkAdult);}

myFunction();

La función every verifica que todos los elementos en un arreglo pasan una prueba que es proporcionada como parámetro

Ejemplo: la función forEach

<script>

var numbers = [4, 9, 16, 25];

function myFunction(item, index) { console.log("index[" + index + "]: " + item); }

numbers.forEach(myFunction)</script>


<!DOCTYPE html><html><body>

<script>var numbers = [4, 9, 16, 25];

function myFunction(item) { console.log("index[" + index + "]: " + item); }


</body></html>






</body></html>

?






</body></html>

>> Uncaught ReferenceError: index is not defined

Funciones: Invocaciones anidadas

<!DOCTYPE html><html><body><script>function testArg(){

var msg = "Hola";function innerCall(){

console.log(msg);}

innerCall();}testArg();</script>

</body></html>


<!DOCTYPE html><html><body><script>function testArg(){

var msg = "Hola";function innerCall(){

console.log(msg);}

innerCall();}testArg();</script>

</body></html>

>>Hola




num:7,title: "Function in object",getNum: function(){return num}


</body></html>

>>Uncaught ReferenceError: num is not defined




num:7,title: "Function in object",getNum: function(){return this.num}


</body></html>




num:7,title: "Function in object",getNum: function(){return this.num}


</body></html>

>>7

Excepciones

try{ …}catch(error){…}finally{ …}

try{ …}catch(error){console.log(error.name);console.log(error.message);}

Excepciones

throw 2; >> Uncaught 2

throw "Something is wrong"; >> Uncaught Something is wrong

throw Error("This is an error"); >> Uncaught Error: This is an error

throw {name:'Error', message:'Ooops'};>> Uncaught [object Object]

Excepciones


<script>function test(){ throw 2; throw "Something is wrong"; throw Error("This is an error"); throw {name:'Error', message:'Ooops'};}

test();</script>

</body></html>

?

Prototipos

Prototipo: Plantilla de objetos definidas como una función constructora con atributos internos

function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor;}

Prototipos

Prototipo: Plantilla de objetos definidas como una función constructora con atributos internos


var myFather = new Person("John", "Doe", 50, "blue");var myMother = new Person("Sally", "Rally", 48, "green");

Prototipos

Se pueden agregar métodos a los prototipos en tiempo de ejecución


var mario = new Person('Mario', 'Linares', '??', 'hazel');

Person.prototype.name = function() {return this.firstName+" "+ this.lastName};

console.log(mario.name());

Closures

- Función con memoria y variables privadas

- Definición encadenada de funciones, en la que la segunda (anónima) tiene acceso al contexto de la primera

- Las funciones “closure” tienen acceso a tres scopes:

local, función padre, y global

- Las funciones “closure” acceden a las variables de la función padre incluso después de ejecutada

Closures

<script>

var add = function () { var counter = 0; return counter += 1;};

console.log(add());console.log(add());console.log(add());

</script>

Closures

<script>

var add = function () { var counter = 0; return counter += 1;};


</script>

<script>var counter = 0;var add = function () { return counter += 1;};


</script>

Closures

<script>

var add = function () { var counter = 0; return function () {return counter += 1;}};


</script>

Closures

<script>

var add = function () { var counter = 0; return function () {return counter += 1;}};


</script>

>> function () {return counter += 1;}>> function () {return counter += 1;}>> function () {return counter += 1;}

Closures

<script>

var add = (function () { var counter = 0; return function () {return counter += 1;}};)()


</script>

Closures

<script>

var add = (function () { var counter = 0; return function () {return counter += 1;}};)()


</script>

>> 1>> 2>> 3

Closures

//function declaration (statement)function bar() { return 3;}

//anonymous function expressionvar a = function() { return 3;} //named function expressionvar a = function bar() { return 3;} //immediately invoked function expression (IIFE)(function sayHello() { alert("hello!");})();

Obligatorio leer: https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

Mas Javascript…

function one(){ function two() { return 2; } return two(); function two() { return 3; }}alert(one());

function one(){ var two = function() { return 2; }; return two(); var two = function() { return 3; };}alert(one());

Obligatorio leer: http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

Mas Javascript…



>>3


Mas Javascript…



>>3 >>2


Mas Javascript…

alert(one());function one(){ var two = function() { return 2; }; return two(); var two = function() { return 3; };}

function one(){ return two(); var two = function() { return 3; }; var two = function() { return 3; };}alert(one());


Mas Javascript…



>>2


Mas Javascript…



>>2>>Uncaught TypeError: two is not a function


Promesas (Promises)

Declaración de ejecuciones futuras condicionales, asociadas con llamadas asíncronas o síncronas éxito/fallo:

p.then(e, f)

Promesas (Promises)

p.then(e, f)

Función a ejecutar como parte de la promesa


Promesas (Promises)

p.then(e, f)

Comportamiento a ejecutar en caso de éxito


Promesas (Promises)

p.then(e, f)

Comportamiento a ejecutar en caso de fallo


Promesas (Promises)

var promise = new Promise(function(resolve, reject) { …..

if (success) { resolve(…); } else { reject(…); }});

Expresión usando el constructor Promise

Promesas (Promises)

Definición de los métodos a ejecutar con la promesa

promise.then(function(result) { console.log(result); // Caso de éxito}, function(err) { console.log(err); // Caso de error}

);

Promesas (Promises)

Disponibles en los siguientes browsers

32 19 29 8

Ejemplo

function get(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('GET', url);

req.onload = function() { if (req.status == 200) {

resolve(req.response); } else { reject(Error(req.statusText)); } }; req.send(); });}

Tomado de https://developers.google.com/web/fundamentals/getting-started/primers/promises

Ejemplo

get('story.json').then(function(response) { console.log("Success!", response);}, function(error) { console.error("Failed!", error);});


Encadenamiento


p.then(e).then(e)…

var promise = new Promise(function(resolve, reject) { resolve(1);});

promise.then(function(val) { console.log(val); // 1 return val + 2;}).then(function(val) { console.log(val); // 3})

Promesas múltiples


Promise.all(arrayOfPromises).then(

function(arrayOfResults) { //...}

);

javascript - uniandesisis3710/... · 2016-10-06 · ejemplo: la función foreach var numbers = [4,...

Documents