1

PRG3, CICLO 01-2020 1

UNIVERSIDAD FRANCISCO GAVIDIA

Facultad: Ingeniería y Sistemas
Programación III

GUIA 9:
JavaScript (funciones)

Objetivo
• Adquirir dominio en la construcción de funciones con JavaScript.
• Hacer uso de parámetros o argumentos en las funciones que realiza.
• Utilizar los valores devueltos por las funciones desde cualquier punto de los scripts.
• Crear funciones utilizando declaración de funciones como objetos y literales de funciones.
• Conocer el manejo de eventos usando funciones como controladores de eventos asociados
a elementos del documento web.

Introducción Teórica
¿Qué son las funciones?

Una función es un bloque de código independiente cuyo propósito es resolver una tarea muy
específica y que se define una sola vez pero que puede ser invocado varias veces dentro de un
mismo script.
Las funciones pueden recibir argumentos o parámetros, que pueden considerarse como variables
locales cuyo valor se determina en el momento de la llamada a la función. Estos argumentos se
utilizan en el cuerpo de la función para calcular un valor que luego es devuelto por la función al
punto del script desde donde se invocó.
Las funciones se suelen colocar al inicio del script y se definen con la palabra reservada function.
Esta palabra indica al intérprete que lo que viene es una función.

Sintaxis de una función

La forma tradicional de implementar una función requiere del uso de la palabra reservada function
seguida de un identificador único que representa el nombre de la función y, a continuación, entre
paréntesis, la lista de parámetros o argumentos separados por coma, en caso de que hubiere más
de uno. Esta lista puede estar vacía, lo que significa que los argumentos de la función son
opcionales.
La sintaxis para una función en JavaScript de la forma tradicional es la siguiente:
 2
PRG3, CICLO 01-2020 2
function nombrefuncion([parametro1, parametro2, … , parametron]){
//Bloque de instrucciones;
[return variable;]
}

Ejemplo:
function espar(numero){
var resp;
numero % 2 == 0 ? resp = true : resp = false;
return resp;
}

El segmento de código JavaScript que realiza la llamada a la función se muestra a continuación:

var num;
do{
num = prompt("Ingrese un número entero","");
}while(isNaN(num));
if(espar(num)){
document.write("El número " + num + " es par.");
}
else{
document.write("El número " + num + "e s impar.");
}
Note que la llamada se realiza en la condición de la sentencia if. Observe que en la condición de
paro del ciclo while se está llamando a una función proporcionada por JavaScript, la función
isNaN(), que devuelve un valor lógico que indica si el valor proporcionado como argumento no es
un número.

Paso de argumentos a las funciones

La mayor parte de veces será necesario enviar argumentos o parámetros a la función para que
pueda resolver la tarea para la que fue creada. Estos argumentos son valores que se envían a la
función en el momento de la llamada. Técnicamente, actúan como variables locales dentro de la
función, cuyo valor es determinado hasta que se realiza la llamada.
Con respecto a los argumentos de una función, cabe mencionar que como JavaScript es un
lenguaje con tipología débil de datos no se requiere que los argumentos o parámetros se definan
como de un tipo específico.
 3
PRG3, CICLO 01-2020 3
Otra consideración importante es el hecho que si una función tiene más argumentos de los que se
utilizan al momento de invocarla, aquellos argumentos que no son utilizados adquieren
automáticamente el valor undefined. Por tal razón, debe tener cuidado de no realizar ninguna
operación o cálculo haciendo un uso incorrecto de este valor especial. La recomendación es
verificar el valor de todos los argumentos si se pudiera dar esta posibilidad.

Devolver valores en una función

El propósito de una función debería ser devolver algún tipo de valor al punto del script desde
donde fue invocada. Sin embargo, JavaScript permite la creación de funciones que no devuelven
ningún valor, aunque en realidad, lo que hace JavaScript es asignar un valor undifined al valor
devuelto por esta función.
Para realizar una función que devuelva un valor debe utilizar una sentencia return dentro del
código de la función. Casi siempre se incluirá al final, como última instrucción, aunque si utiliza
sentencias condicionales o sentencias selectivas, como un switch, es muy probable que tenga que
incluir más de una sentencia return.
A continuación, se presenta un ejemplo de función que recibe cuatro argumentos:
function distance(x1, y1, x2, y2){
var dx = x2 – x1;
var dy = y2 – y1;
return Math.sqrt(dx*dx + dy*dy);
}

La siguiente función ilustra cómo se puede crear una función que devuelve valor. Observe que hay
dos sentencias return, debido al hecho de que se está dependiendo de una sentencia condicional
para determinar qué devolver, y al hecho de que se trata de una función recursiva:
//Función que calcula el factorial de un número
function factorial(x){
if (x <= 1)
return 1;
return x * factoria(x-1);
}

Funciones como objetos

Una de las características más importantes de JavaScript es que casi todas las construcciones del
lenguaje son objetos, incluso las funciones. Por esta razón, JavaScript ofrece una forma
 4
PRG3, CICLO 01-2020 4
alternativa de declarar las funciones utilizando sintaxis de objetos, como se muestra a
continuación:
var nombre_funcion = new Function("arg1", "arg2", "instrucciones");
Donde, new, es una palabra clave utilizada para crear un nuevo objeto.
Function(), es el constructor que permite crear objetos de tipo función.
Para realizar la llamada a una función declarada de esta forma, debe tener en cuenta que deberá
utilizar el nombre de la variable de instancia (nombre_funcion) a la función para poder hacer una
llamada a la función desde cualquier punto del script.

Funciones como literales de función

Cuando se declaran funciones en forma de literal de función se crea un valor, del mismo modo
que un literal
numérico o de cadena y por tanto, se pueden utilizar como tales.
Las funciones literales poseen cuatro partes:
La palabra clave function.
Un nombre opcional que, si se utiliza, debe ser un identificador válido de JavaScript.
Una lista separada por comas, con los identificadores de los argumentos encerrados entre
paréntesis. La lista puede perfectamente, estar vacía.
El cuerpo de la función como una serie de instrucciones JavaScript, entre paréntesis. También
puede estar vacío.

Para crear un objeto debería digitar una instrucción como la siguiente:

var saludar = new saludos("María");
Para llamar a los métodos anteriores debería realizar instrucciones como las siguientes:
saludar.hola();
saludar.adios();
saludar.consejo("Al que madruga, Dios le ayuda");

Funciones como manejadores de eventos

Las llamadas a las funciones se realizan con frecuencia desde un manejador de eventos.
Un manejador de eventos es un mecanismo por el cual se pueden detectar las acciones que
realiza el usuario sobre la página web.
Sintaxis de una llamada a función a través de un manejador de eventos:
<etiqueta_html nombre_manejador_evento="nombre_funcion([parametros]);">
 5
PRG3, CICLO 01-2020 5

Manejadores o controladores de eventos en JavaScript

Atributo de evento Descripción
onblur El elemento pierde el enfoque de la entrada.

onclick Indica que se ha hecho clic con el ratón en un elemento.

onchange La selección de un elemento SELECT u otro elemento de formulario ha

perdido el enfoque y su valor ha cambiado desde que obtuvo el enfoque.
onfocus Indica que el elemento ha recibido el foco; concretamente que se ha
seleccionado para operar con él o para ingresar datos.
onload Indica el evento de que una ventana o conjunto de marcos se han
terminado de cargar.
onkeyrpress Se ha producido una pulsación de tecla en algún elemento del
documento.
onmouseover Indica que el ratón se ha posicionado sobre el elemento.
onmouseout Indica que el ratón se ha posicionado fuera del elemento.
onsubmit Indica que el formulario va a ser enviado como producto de un clic sobre
un botón de envío.
onreset Indica que el formulario ha sido restablecido a sus valores iniciales como
producto de la pulsación sobre un botón reset.

Materiales

N° Materiales Cantidad
1 Guía #9. Javascript (funciones) 1
2 Computadora con editor HTML y navegadores 1

Procedimiento

EJEMPLO 1. Formulario de prueba que muestra cómo se maneja el control de eventos con el
modelo del DOM Nivel 2, sin usar atributos HTML como manejadores de eventos, sino haciéndolo
directamente en el script.
 6
PRG3, CICLO 01-2020 6

Archivo 1: eventos.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Eventos con JavaScript</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="eventos.css" />
<script type="text/javascript" src="eventos.js"></script>
</head>
<body>
<header>
<h1>Uso de controles de formulario</h1>
</header>
<section>
<article>
<form action="javascript:void(0);" name="frmEjemplo">
<fieldset>
<legend>Uso de controles de formulario</legend>
<ul id="frmfechas">
<li>
<label for="txtfoco" class="fieldLabel">Haga clic en la caja de texto:</label>
<input type="text" name="txtfoco" id="txtclick" placeholder="Haga clic aquí"
class="formInputText" />
</li>
<li>
<label for="txttecla" class="fieldLabel">Ingrese datos con el teclado:</label>
<input type="text" name="txttecla" id="txtkey" placeholder="Ingrese un caracter"
class="formInputText" />
</li>
<li>
<label for="selopciones" class="fieldLabel">Seleccione una de las opciones: </label>
<select name="selopciones" id="seloptions" class="seloptions">
<option value="Primera opción">Primera opción</option>
<option value="Segunda opción">Segunda opción</option>
<option value="Tercera opción">Tercera opción</option>
</select>
</li>
 7
PRG3, CICLO 01-2020 7
<li>
<div id="labelcheckboxes">
<label for="chkcasillas" class="fieldLabel">Marque una o varias casillas:</label>
</div>
<div id="checkboxes">
<input type="checkbox" name="chkcasillas" id="chkbox1" value="Primera casilla"
class="formInputCheck" />
<span>Primera casilla</span><br />
<input type="checkbox" name="chkcasillas" id="chkbox2" value="Segunda casilla"
class="formInputCheck" />
<span>Segunda casilla</span><br />
<input type="checkbox" name="chkcasillas" id="chkbox3" value="Tercera casilla"
class="formInputCheck" />
<span>Tercera casilla</span>
</div>
</li>
<li class="buttons">
<input type="button" name="submit" id="submitbutton" value="Materia"
class="formInputButton" />
</li>
</ul>
</fieldset>
</form>
</article>
</section>
</body>
</html>

Archivo 2: eventos.js
 8
PRG3, CICLO 01-2020 8
 9
PRG3, CICLO 01-2020 9

Archivo 3: eventos.css
*** Ver documento en recursos guía 9.

RESULTADOS EN NAVEGADOR:
 10
PRG3, CICLO 01-2020 10

EJEMPLO 2. Formulario de captura de datos que indica al usuario con un elemento p oculto una
breve ayuda para llenar el campo apropiadamente. El elemento p se hace visible al activarse
alguno de los campos del formulario con un evento 'focus'. Al perder dicho campo el foco se
oculta la pequeña capa de ayuda.

Archivo 1: datos.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Captura de datos</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/form.css" />
<script src="js/focusblur.js"></script>
</head>
<body>
<header>
<h1>Datos personales</h1>
</header>
<section>
<article id="container">
<p id="textoAyuda"></p>
<form name="registro" id="hongkiat-form" method="post"
action="javascript:void(0);">
<div id="wrapping" class="clearfix">
<section id="aligned">
<input type="text" name="nombre" id="firstname" placeholder="(Su
nombre)" autocomplete="off" tabindex="1" maxlength="25" class="txtinput requested" />
<input type="text" name="apellido" id="lastname" placeholder="(Su
apellido)" autocomplete="off" tabindex="2" maxlength="25" class="txtinput requested" />
<input type="email" name="email" id="email" placeholder="(Su
 11
PRG3, CICLO 01-2020 11
correo electrónico)" autocomplete="off" tabindex="3" maxlength="50" class="txtinput
requested" />
<input type="tel" name="telephone" id="phone" placeholder="(Su
número de teléfono)" tabindex="4" class="txtinput" pattern="\d{7,9}" />
<textarea id="describe" class="txtblock"
placeholder="(Descríbete)" tabindex="5"></textarea>
</section>
<section id="aside" class="clearfix">
<section id="recipientcase">
<h3>Profesión:</h3>
<select id="profesion" name="profesion" tabindex="6" required
class="selmenu">
<option value="med">Médico</option>
<option value="ing">Ingeniero</option>
<option value="lic">Licenciado</option>
<option value="abo">Abogado</option>
<option value="doc">Docente</option>
<option value="tec">Técnico</option>
</select>
<!-- Campo SELECT para indicar la mesa de trabajo -->
<h3>País:</h3>
<select id="selpais" name="mesa" tabindex="7" required
class="selmenu">
<option value="es">El Salvador</option>
<option value="gt">Guatemala</option>
<option value="ho">Honduras</option>
<option value="cr">Costa Rica</option>
<option value="ni">Nicaragua</option>
<option value="pa">Panamá</option>
</select>
<!-- Fin del campo select para la mesa de trabajo -->
</section>
</section>
</div>
<section id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn"
tabindex="8" value="Cancelar">
<input type="submit" name="submit" id="submitbtn" class="submitbtn"
 12
PRG3, CICLO 01-2020 12
tabindex="9" value="Registrar">
<br style="clear:both;">
</section>
</form>
</article>
</section>
</body>
</html>

Archivo 2: form.css
*** Ver documento en recursos guía 9.

Archivo 3: basic.css
*** Ver documento en recursos guía 9.

Archivo 4: focusblur.js
 13
PRG3, CICLO 01-2020 13

RESULTADOS EN NAVEGADOR:
 14
PRG3, CICLO 01-2020 14

EJEMPLO 3. Ejemplo que muestra cómo generar imágenes aleatorias simulando un juego de
tirar 6 dados. Se utilizar JavaScript no invasivo para hacer que dando clic en un botón se simule
cada lanzamiento que muestra en la posición de cada imagen el dado seleccionado aleatoriamente
mediante la función random(), limitada para obtener únicamente valores entre 1 y 6

Archivo 1: tirardados.html
<!DOCTYPE html>
<html lang="es">

<head>
<title>Tiro de dados</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/dados.css" />
<link rel="stylesheet" href="css/button.css" />
<script src="js/tirodados.js"></script>
</head>

<body>
<!-- <form action="javascript:void(0);">
<input id="botonTirar" type="button" value="Tirar los dados"
class="randombutton" />
</form> -->
<div id="buttonarea">
<a href="javascript:void(0);" id="botonTirar" class="randombutton">
Tirar los dados
</a>
</div>
<ol>
<li>
<img src="img/dice1.png" id="dado1" alt="Imagen del dado" />
</li>
<li>
<img src="img/dice2.png" id="dado2" alt="Imagen del dado" />
</li>
<li>
<img src="img/dice3.png" id="dado3" alt="Imagen del dado" />
</li>
 15
PRG3, CICLO 01-2020 15
<li>
<img src="img/dice4.png" id="dado4" alt="Imagen del dado" />
</li>
<li>
<img src="img/dice5.png" id="dado5" alt="Imagen del dado" />
</li>
<li>
<img src="img/dice6.png" id="dado6" alt="Imagen del dado" />
</li>
</ol>
</body>
</html>

Archivo 2: dados.css
*** Ver documento en recursos guía 9.

Archivo 3: button.css
*** Ver documento en recursos guía 9.

Archivo 4: tirodados.js
 16
PRG3, CICLO 01-2020 16

RESULTADOS EN NAVEGADOR:
 17
PRG3, CICLO 01-2020 17

EJEMPLO 4. El siguiente ejemplo muestra la utilización de la recursividad para generar una lista
de números aleatorios que se generan al hacer clic al botón presente en la página. Los números
generados pueden repetirse. Además, la solución del problema permite indicar un valor inicial y
final a partir del cual serán generados los números aleatorios y hasta qué valor máximo puede
generarse. Para ello se utiliza una fórmula presente en la función aleatorio() que es recursiva.
Para agregar los números aleatorios generados a la matriz o arreglo que los almacena se utiliza el
método push() para matrices o arreglos de JavaScript.

Archivo 1: aleatorios.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Números aleatorios</title>
<meta charset="utf-8" />
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />
<link rel="stylesheet" href="css/random.css" />
<script src="js/aleatorio.js"></script>
</head>
<body>
<header id="insetBgd">
<h1>Generación de números aleatorios</h1>
</header>
<section>
<article>
<div class="button-wrapper">
<a href="#" id="generador" class="a-btn">
<span class="a-btn-text">Generar</span>
<span class="a-btn-slide-text">números</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div>
<div id="listanumeros"></div>
</article>
</section>
</body>
</html>
 18
PRG3, CICLO 01-2020 18

Archivo 2: random.css
*** Ver documento en recursos guía 9.

Archivo 3: aleatorio.js

RESULTADOS EN NAVEGADOR:
 19
PRG3, CICLO 01-2020 19

Desarrollo de habilidades

1. Calcular el factorial de un número positivo y muestre los resultados en la página Web.

2. Un empleado de la tienda “Tiki Taka” realiza N ventas durante el día, se requiere saber
cuántas de ellas fueron mayores a $200, cuántas fueron mayores a $70 pero menores o
iguales a $200, y cuántas fueron menores o iguales a $70.

Además, se requiere saber el monto de lo vendido en cada categoría y de forma global.

Mostrar como salida:

Cuantas ventas hay en cada rango o categoría

Mostrar la suma de las ventas de cada categoría

Mostrar el total de todas las ventas

Mostrar el promedio de las ventas

Recuerde no puede haber ventas negativas o mayores a 200, si no se cumple esta

condición, deberá pedir la venta de nuevo se acepta hasta que sea la venta correcta o
cumpla la condición

Para cada ejercicio implemente funciones y en para la presentación de la página hojas de estilo.