TEMA 3: Programación con

funciones, arrays y objetos

definidos por el usuario

Desarrollo web en entorno cliente

 Funciones
2

 Es posible crear funciones personalizadas

diferentes a las funciones predefinidas por el
lenguaje.
 Con estas funciones se pueden realizar las

tareas que queramos.

 Una tarea se realiza mediante un grupo de

instrucciones relacionadas a las cuales

debemos dar un nombre.

DWEC-UT3 (E. Carballo)

 Funciones
3

Sintaxis declaración de una función:

function Identificador( Lista de parámetros formales ) {
Sentencias}

<SCRIPT type=“text/JavaScript”>
/* Se debe definir antes de llamarla*/
function Hola(){
window.alert(“Función Hola”);
}
/* Llamada */
Hola();
</SCRIPT>

DWEC-UT3 (E. Carballo)

 Funciones
4

 Invocación de funciones:
 Una vez definida la función es necesario llamarla
para que el navegador ejecute el grupo de
instrucciones.
 Se invoca usando su nombre seguido del
paréntesis.
 Si tiene argumentos, se deben especificar en el
mismo orden en el que se han definido en la
función.

DWEC-UT3 (E. Carballo)

 Funciones
5

 Argumentos a Funciones
 Los parámetros se pasan por valor. Eso significa que si
cambiamos el valor de un argumento dentro de una función,
este cambio no se verá fuera:
<SCRIPT type=“text/JavaScript”>
function cuadrado(n){
n = n * n;
window.alert(“ n en la funcion” + n);
}
var n = 4;
window.alert(“n antes de la llamada ” + n);
cuadrado(4);
window.alert(“n despues de la llamada ” + n);
</SCRIPT> DWEC-UT3 (E. Carballo)
 Funciones
6

 Devolviendo parámetros
 Una función puede devolver un valor a través de la
sentencia return.
<SCRIPT type=“text/JavaScript”>
function cuadrado(n){
return (n * n);
}
var n;
n=window.prompt(“Dame un numero”,””)
window.alert(“El cuadrado de ” + n + “ es” +
cuadrado(n));
</SCRIPT>
DWEC-UT3 (E. Carballo)
 Funciones
7

 Ejemplo – Función que calcula el importe de un

producto después de haberle aplicado el IVA:

function aplicar_IVA(valorProducto, IVA){

var productoConIVA = valorProducto * IVA;
window.alert(“El precio del producto,
aplicando el IVA del “ + IVA + “ es: “ +
productoConIVA);
}

DWEC-UT3 (E. Carballo)

 Funciones
8

 Ejemplo: aplicar_IVA(300, 1.18).

DWEC-UT3 (E. Carballo)

 Funciones
9

 Las funciones también pueden ser tipos de datos:

typeof function () {}; // 'function'
 Las funciones también se pueden crear mediante
expresiones (funciones anónimas):
var nombre = function(p1, p2...) { }
 Las funciones declaradas como expresiones sólo
estarán disponibles a partir de la inicialización de
la variable. Si «ejecutamos la variable» antes de
declararla obtendremos un error.
DWEC-UT3 (E. Carballo)
 Funciones
10

 Es habitual guardar funciones dentro de variables

para posteriormente ejecutar estas variables:
// El segundo "saludar" (nombre de la función)
// se suele omitir: es redundante
var saludo = function saludar() {
return "Hola";
};

window.alert(saludo()); // 'Hola'

DWEC-UT3 (E. Carballo)

 Funciones
11

 También llamadas funciones callback o retrollamadas.

 Un callback (llamada hacia atrás) es pasar una función B por parámetro a
una función A, de modo que la función A puede ejecutar esa función B de
forma genérica desde su código, y nosotros podemos definirlas desde fuera de
dicha función.
 Muy utilizado en esquemas de llamadas asíncronas.
// fB = Función B
var fB = function () {
console.log("Función B ejecutada.");
};

// fA = Función A
var fA = function (callback) {
callback();
};

fA(fB);

DWEC-UT3 (E. Carballo)

 Funciones
12

// fB = Función B (callback)
var fB = function () {
console.log("Función B ejecutada.");
};

// fError = Función Error (callback)

var fError = function () {
console.error("Error");
};

// fA = Función A
var fA = function (callback, callbackError) {
var n = ~~(Math.random() * 5);
if (n > 2) callback();
else callbackError();
};

fA(fB, fError); // Si ejecutamos varias veces, algunas darán error y otras no

DWEC-UT3 (E. Carballo)

 Funciones
13

 Funciones autoejecutables: se ejecutan sobre la marcha.

 Envolver entre paréntesis la función anónima y luego
ejecutarla.
// Función autoejecutable
(function () {
console.log("Hola");
})();

// Función autoejecutable con parámetros

(function (name) {
console.log(`¡Hola, ${name}!`);
})("Alumno");

DWEC-UT3 (E. Carballo)

 Funciones
14

 La clausura o cierre se define como una función que

«encierra» variables en su propio ámbito y que
continúan existiendo aún habiendo terminado la función.
 Tenemos una función anónima que es también una
función autoejecutable. La variable incr está
guardando lo que devuelve la función anónima
autoejecutable, que a su vez, es otra función diferente.
 En el interior de la función autoejecutable estamos
creando una variable num que se guardará en el
ámbito de dicha función, por lo tanto existirá con el
valor declarado 0.
 En la variable incr tenemos una función por expresión
que además conoce el valor de una variable num, que
sólo existe dentro de incr.
 La función que devolvemos incrementa el valor de num
y lo devuelve.
 Como la variable incr es una clausura y mantiene la
variable en su propio ámbito, a medida que ejecutamos
incr() los valores de num conservan su valor y se
van incrementando.

DWEC-UT3 (E. Carballo)

 Funciones
15

 Las funciones flecha (arrow functions) son una forma

corta de escribir funciones que aparece en Javascript
a partir de ECMAScript 2015 (ES6):
https://www.w3schools.com/js/js_arrow_function.asp
 Básicamente, se trata de reemplazar eliminar la
palabra function y añadir => antes de abrir las
llaves.

DWEC-UT3 (E. Carballo)

 Funciones
16

 Ventajas de la funciones flecha:

 Si el cuerpo de la función sólo tiene una línea, se puede omitir las llaves ({}).
 En ese caso automáticamente se hace un return de dicha línea, por lo que se puede omitir
también el return.
 En el caso de que la función no tenga parámetros se indica de la siguiente forma: () =>.
 En el caso de que la función tenga un solo parámetro, se puede indicar simplemente el
nombre del mismo: a =>.
 En el caso de que la función tenga 2 ó más parámetros, se indican entre paréntesis: (a, b)
=>.
 Si queremos devolver un objeto, que coincide con la sintaxis de las llaves, se puede
englobar con paréntesis: ({name: ‘Alumno'}).

DWEC-UT3 (E. Carballo)

 Funciones
17

 Funciones flecha y
operador this.
 El valor de la palabra
clave this no siempre es
el mismo.

DWEC-UT3 (E. Carballo)

 Funciones predefinidas del lenguaje
18

 JavaScript cuenta con una serie de funciones

integradas en el lenguaje.
 Dichas funciones se pueden utilizar sin conocer
todas las instrucciones que ejecuta.
 Simplemente se debe conocer el nombre de la
función y el resultado que se obtiene al utilizarla.
 Consulta recomendada:
http://www.w3schools.com/jsref/jsref_obj_global.asp

DWEC-UT3 (E. Carballo)

 Funciones predefinidas del lenguaje
19

 Las siguientes son algunas de las principales

funciones predefinidas de JavaScript:
Funciones Predefinidas
encodeURIComponent() Number()
decodeURIComponent()
eval() String()

isFinite() parseInt()

isNaN() parseFloat()

DWEC-UT3 (E. Carballo)

 Funciones predefinidas del lenguaje
20

 encodeURIComponent(): devuelve codificada

la cadena de caracteres pasada como parámetro
a dicha función.
var uri = "http://w3schools.com/my test.asp?name=ståle&car=sa";
var res = encodeURIComponent(uri);
res:
http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsa

 decodeURIComponent(): lleva a cabo la

acción inversa.

DWEC-UT3 (E. Carballo)

 Funciones predefinidas del lenguaje
21

 eval(): convierte una cadena que pasamos como

argumento en código JavaScript ejecutable.

<script type=“text/javascript”>
var input = “window.prompt(‘Introduce una operación
numérica’)”;
var resultado = eval(input);
window.alert (“El resultado de la operación es: “ +
resultado);
</script>

DWEC-UT3 (E. Carballo)

 Funciones predefinidas del lenguaje
22

 isFinite(): verifica si el número que pasamos

como argumento es o no un número finito.

if(isFinite(argumento)) {
//instrucciones si el argumento es un número finito
}else{
//instrucciones si el argumento no es un número finito
}

DWEC-UT3 (E. Carballo)

 Funciones predefinidas del lenguaje
23

 isNaN(): comprueba si el valor que pasamos

como argumento representa un valor numérico.

<script type=“text/javascript”>
var input = window.prompt(“Introduce un
valor numérico: “);
if (isNaN(input)){
window.alert(“El dato ingresado no es numérico.”);
}else{
window.alert(“El dato ingresado es numérico.”);
}
</script>

DWEC-UT3 (E. Carballo)

 Funciones predefinidas del lenguaje
24

 String(): convierte el objeto pasado como

argumento en una cadena que represente el valor de
dicho objeto.
<script type=“text/javascript”>
var fecha = new Date()
var fechaString = String(fecha)
window.alert(“La fecha actual es: “+fechaString);
</script>

 Number(): convierte el objeto pasado como

argumento en un número que represente el valor de
dicho objeto.

DWEC-UT3 (E. Carballo)

 Funciones predefinidas del lenguaje
25

 parseInt(cadena,[base]): convierte la
cadena que pasamos como argumento en un valor
numérico entero con la base indicada.
 Por defecto convierte en base 10.

 Si fracasa la conversión devuelve el valor NaN (no es

un número).
<script type=“text/javascript”>
var input = window.prompt(“Introduce un valor: “);
var inputParsed = parseInt(input);
window.alert(“parseInt(“+input+”): “+inputParsed);
</script>

DWEC-UT3 (E. Carballo)

 Funciones predefinidas del lenguaje
26

 parseFloat(): convierte la cadena que

pasamos como argumento en un valor numérico de
tipo flotante.
 Si fracasa la conversión devuelve el valor NaN (no
es un número).
<script type=“text/javascript”>
var input = window.prompt(“Introduce un valor: “);
var inputParsed = parseFloat(input);
window.alert(“parseFloat(“+input+”): “ + inputParsed);
</script>

DWEC-UT3 (E. Carballo)

 Objetos
27

 JavaScript proporciona una serie de objetos

predefinidos, sin embargo es posible crear nuevos
objetos definidos por el usuario.
 Cada uno de estos objetos puede tener sus propios
métodos y propiedades.
 La creación de nuevos objetos resulta útil en el
desarrollo de aplicaciones avanzadas en las que es
preciso manejar estructuras de datos dinámicas.

DWEC-UT3 (E. Carballo)

 Objetos
28

 Básicamente existen tres formas de crear objetos:

 Crear un objeto literal

 Crear un objeto utilizando el operador new

 Crear un objeto haciendo una función constructor

DWEC-UT3 (E. Carballo)

 Reloj
hora : int

Objetos minuto : int

segundo : int

29 setHora()
mostrarHora()
 Definición intuitiva: Reloj()

 Un objeto es un conjunto de datos (variables) definido por

el usuario junto con las operaciones que operan sobre ellos.

 En la programación estructurada ( tradicional ) no existe esta

asociación entre los datos y las operaciones que trabajan con
ellos.

 JavaScript no implementa todas las características de la

orientación a objetos. Se puede decir que JavaScript es un
lenguaje basado en objetos.

 Utilización del operador this: hace referencia al objeto actual.

DWEC-UT3 (E. Carballo)
 Objetos
30

Reloj
 Objetos: EJEMPLO “Reloj” hora : int
<SCRIPT type=”text/javascript"> minuto : int
segundo : int
/* Constructor */
function Reloj(h,m,s){ setHora()
/* Atributos */ mostrarHora()
Reloj()
this.hora=h;
this.minuto=m;
this.segundo=s;
/* Metodos */
this.setHora=fun1;
this.mostrarHora=fun2;
}
Continúa...
DWEC-UT3 (E. Carballo)
 Objetos
31

function fun1(h,m,s){ Reloj

if(arguments.length==3){ hora : int
this.hora=h; minuto : int
segundo : int
this.minuto=m;
this.segundo=s; setHora()
mostrarHora()
} Reloj()
else if(arguments.length==1){
this.hora=h;
}
}
function fun2(){
window.alert(this.hora + " : " + this.minuto + " :
" + this.segundo);
}
Continúa...
DWEC-UT3 (E. Carballo)
 Objetos
32

 Hemos definido una clase de objetos a través de su constructor

declarando sus atributos y métodos.

 Para trabajar con objetos reales, basados en dicha definición,

crearemos instancias.

 Para crear objetos en javaScript se utilizará el operador new

seguido de la invocación al método constructor del objeto:
Objetoreloj = new Reloj(10,10,10)

 Una vez creada la instancia del objeto podemos tener acceso a sus
métodos y propiedades:
Nombredelobjeto.propiedad ejemplo: Objetoreloj.hora
Nombredelobjeto[“propiedad”] ejemplo: Objetoreloj[“hora”]
Nombredelobjeto.nombremetodo(parámetros) ejemplo: Objetoreloj.mostrar()

DWEC-UT3 (E. Carballo)

 Objetos
33

Continúa ejemplo Reloj

/*Instanciación de objetos Reloj*/ (from Time)
hora : int
var r1 = new Reloj(10,0,0); minuto : int
var r2 = new Reloj(0,5,5); segundo : int
/* Llamada a un método sobrecargado */
Reloj()
r2.setHora(2); setHora()
r1.mostrarHora(); getHora()
r2.mostrarHora();
</SCRIPT>

DWEC-UT3 (E. Carballo)

 Objetos
34

 Ejercicio: implementar la clase Libro en JavaScript,

instanciar dos objetos Libro, y mostrarlos a partir del
método mostrarLibro().
Libro
titulo
autor
tema

mostrarLibro( )

DWEC-UT3 (E. Carballo)