UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLÓGICOS

COMPUTACIÓN
GUIA DE LABORATORIO #4
Nombre de la Practica: Funciones en JavaScript
Lugar de Ejecución: Centro de Cómputo
CICLO: 02/2014
Tiempo Estimado: 2 horas con 30 minutos
MATERIA: Lenguajes Interpretados en el Cliente
DOCENTES: Inga. Karens Lorena Medrano / Ing. Ricardo Ernesto Elías

I. OBJETIVOS

Que el estudiante:
1. Adquiera dominio en la construcción de funciones con JavaScript
2. Haga uso de parámetros o argumentos en las funciones que realiza.
3. Utilicen los valores devueltos por las funciones desde cualquier punto de los scripts
4. Creen funciones utilizando declaración de funciones como objetos y literales de funciones
5. Comience a conocer el manejo de eventos usando funciones como controladores de eventos asociados
a elementos del documento web.

II. INTRODUCCION TEORICA

¿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:
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;

1 / 32
 Guía # 4: Funciones en JavaScript

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.

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

Lenguajes Interpretados en el Cliente 2

 Guía # 4: Funciones en JavaScript

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 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]);">

Manejadores o controladores de eventos en JavaScipt

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. 

Lenguajes Interpretados en el Cliente 3

 Guía # 4: Funciones en JavaScript

La selección de un elemento SELECT u otro elemento de formulario ha perdido el 
onchange 
enfoque y su valor ha cambiado desde que obtuvo el enfoque. 

Indica que el elemento ha recibido el foco; concretamente que se ha 
onfocus 
seleccionado para operar con él o para ingresar datos. 

Indica el evento de que una ventana o conjunto de marcos se han terminado de 
onload 
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. 

Indica que el formulario va a ser enviado como producto de un clic sobre un 
onsubmit 
botón de envío. 

Indica que el formulario ha sido restablecido a sus valores iniciales como 
onreset 
producto de la pulsación sobre un botón reset. 

III. MATERIALES Y EQUIPO

Para la realización de la guía de práctica se requerirá lo siguiente:

No. Requerimiento Cantidad
1 Guía #4: Funciones en JavaScript 1
2 Computadora con editor HTML, servidor web y navegadores instalados 1
3 Memoria USB 1

IV. 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, si no haciéndolo directamente en el script.
Guión 1: eventos.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Eventos con JavaScript</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/eventos.css" />
<script type="text/javascript" src="js/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>

Lenguajes Interpretados en el Cliente 4

 Guía # 4: Funciones en JavaScript

<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>
<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>
</body>
</html>

Guión 2: eventos.js
//Iniciar los manejadores de eventos al cargar la página
window.onload = iniciar;

function iniciar(){
//Definir objetos sobre los que se escucharán eventos
//y asociar los eventos correspondientes
//Primera caja de texto
var textFieldFocus = document.frmEjemplo.txtfoco;
textFieldFocus.onfocus = foco;
//Segunda caja de texto
var textFieldKey = document.frmEjemplo.txttecla;
textFieldKey.onkeypress = tecla;

Lenguajes Interpretados en el Cliente 5

 Guía # 4: Funciones en JavaScript

//Campo select
var selectField = document.frmEjemplo.selopciones;
selectField.onchange = function(){
cambioOpcion(this.options[this.selectedIndex].value);
};
//Primer campo checkbox
var chkbox1 = document.getElementById("chkbox1");
chkbox1.addEventListener("click", function(){
activarCasilla(chkbox1, chkbox1.value);
}, false);
//Segundo campo checkbox
var chkbox2 = document.getElementById("chkbox2");
chkbox2.addEventListener("click", function(){
activarCasilla(chkbox2, chkbox2.value);
}, false);
//Tercer campo checkbox
var chkbox3 = document.getElementById("chkbox3");
chkbox3.addEventListener("click", function(){
activarCasilla(chkbox3, chkbox3.value);
}, false);

//Botón de envío del formulario

var submitButton = document.getElementById("submitbutton");
submitButton.addEventListener("click", function(){
alert(pulsa());
return false;
}, false);
}

function foco(){
alert("Foco en la primera Caja");
}

function tecla(){
alert("Pulsaste una tecla");
this.focus();
}

function cambioOpcion(nuevaOpcion){
alert("Has cambiado a la opción " + nuevaOpcion);
}

function activarCasilla(casilla, valorCasilla){

var accion;
//alert(casilla.checked);
(casilla.checked) ? accion = " activado " : accion = " desactivado ";
alert("Se ha" + accion + " la casilla con la opción " + valorCasilla);
}

function pulsa(){
return "Materia: Lenguajes Interpretados en el Cliente";
}

Guión 3: eventos.css
h1 {
background-color:YellowGreen;
border:outset 6px Indigo;
color:Indigo;
font-family:"Bodoni MT Black",Modern;
font-style:normal;
font-weight:Bold;
font-size:1.8em;

Lenguajes Interpretados en el Cliente 6

 Guía # 4: Funciones en JavaScript

margin: 16px auto;

padding: 9px 12px;
text-align:center;
text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
width:35%;
}

ul#frmfechas {
list-style: none;
}

ul#frmfechas li {
display: inline-block;
float: left;
vertical-align: top;
width: auto;
}

ul#frmfechas li.buttons {
clear: both;
}

fieldset {
background-color:YellowGreen;
border:solid 1px Green;
color:DarkGreen;
font:800 0.8em "Helvetica Neue";
margin:12px auto;
padding:3px;
width:35%;
}

legend {
background-color:Plum;
color:Indigo;
font-weight:bold;
font-variant:small-caps;
margin-bottom:8px;
padding:2px 5px;
}

label {
display:block;
float:left;
font-weight:800;
line-height:normal;
margin-right:10px;
position:relative;
text-align:right;
}

input[type="text"] {
display: block;
float: right;
right: 0;
}

input.formInputText {
background-color:Plum;
border:solid 1px Indigo;
color:DarkGreen;
font-size:0.8em;
height:15px;

Lenguajes Interpretados en el Cliente 7

 Guía # 4: Funciones en JavaScript

padding:2px;
margin-right:5px;
margin-bottom:5px;
}

input.formInputText:hover {
background-color:rgb(160,225,60);
border:groove 2px OrangeRed;
color:BlueViolet;
}

input.formInputText:focus {
background-color:PaleGoldenrod;
border:solid 2px Indigo;
color:DarkGreen;
}

#labelcheckboxes, #checkboxes {
display: inline-block;
vertical-align: top;
}

input.formInputCheck {
background-color:Plum;
border:solid 1px Indigo;
height:15px;
}

select {
display: block;
float: right;
right: 0;
}

select.seloptions {
background-color:Plum;
font-size:0.8em;
color:DarkGreen;
cursor:pointer;
padding:2px;
border:solid 1px Indigo;
margin-right:5px;
margin-bottom:5px;
}

select.seloptions:hover {
background-color:rgb(160,225,60);
border:groove 2px OrangeRed;
color:BlueViolet;
}

select.seloptions:focus {
color:DarkGreen;
background-color:PaleGoldenrod;
border:solid 2px Indigo;
}

input.formInputButton {
background: rgba(33,24,102,1);
background: -moz-linear-gradient(left, rgba(33,24,102,1) 0%, rgba(59,36,171,0.97) 51%,
rgba(23,18,168,0.95) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(33,24,102,1)),
color-stop(51%, rgba(59,36,171,0.97)), color-stop(100%, rgba(23,18,168,0.95)));

Lenguajes Interpretados en el Cliente 8

 Guía # 4: Funciones en JavaScript

background: -webkit-linear-gradient(left, rgba(33,24,102,1) 0%, rgba(59,36,171,0.97)

51%, rgba(23,18,168,0.95) 100%);
background: -o-linear-gradient(left, rgba(33,24,102,1) 0%, rgba(59,36,171,0.97) 51%,
rgba(23,18,168,0.95) 100%);
background: -ms-linear-gradient(left, rgba(33,24,102,1) 0%, rgba(59,36,171,0.97) 51%,
rgba(23,18,168,0.95) 100%);
background: linear-gradient(to right, rgba(33,24,102,1) 0%, rgba(59,36,171,0.97) 51%,
rgba(23,18,168,0.95) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#211866',
endColorstr='#1712a8', GradientType=1 );
border:solid 1px DarkGreen;
color:Orange;
cursor:pointer;
float:right;
font-size:1.2em;
font-weight:800;
padding:3px 5px;
text-align:center;
vertical-align:middle;
width: 100%;
}

input.formInputButton:hover {
background: rgba(240,131,48,1);
background: -moz-linear-gradient(left, rgba(240,131,48,1) 0%, rgba(255,153,0,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,131,48,1)),
color-stop(100%, rgba(255,153,0,1)));
background: -webkit-linear-gradient(left, rgba(240,131,48,1) 0%, rgba(255,153,0,1)
100%);
background: -o-linear-gradient(left, rgba(240,131,48,1) 0%, rgba(255,153,0,1) 100%);
background: -ms-linear-gradient(left, rgba(240,131,48,1) 0%, rgba(255,153,0,1) 100%);
background: linear-gradient(to right, rgba(240,131,48,1) 0%, rgba(255,153,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f08330',
endColorstr='#ff9900', GradientType=1 );
color:Indigo;
}

input.formInputButton:active{
background: rgba(180,201,62,1);
background: -moz-linear-gradient(left, rgba(180,201,62,1) 0%, rgba(133,181,0,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(180,201,62,1)),
color-stop(100%, rgba(133,181,0,1)));
background: -webkit-linear-gradient(left, rgba(180,201,62,1) 0%, rgba(133,181,0,1)
100%);
background: -o-linear-gradient(left, rgba(180,201,62,1) 0%, rgba(133,181,0,1) 100%);
background: -ms-linear-gradient(left, rgba(180,201,62,1) 0%, rgba(133,181,0,1) 100%);
background: linear-gradient(to right, rgba(180,201,62,1) 0%, rgba(133,181,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4c93e',
endColorstr='#85b500', GradientType=1 );
color:Indigo;
}

Resultado en el navegador:

Lenguajes Interpretados en el Cliente 9

 Guía # 4: Funciones en JavaScript

Ejemplo 2: Confirmación de visita a enlaces que permite cancelar la visita de un sitio web al hacer clic en su
enlace o confirma que si quiere abrir en una pestaña nueva el sitio.
Guión 1: enlaces.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Lista de enlaces</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/links.css" />
<script type="text/javascript" src="js/confirmlinks.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<header id="vintage">
<h1>Sitios web para aprender JavaScript</h1>
</header>
<section>
<article class="color-5">
<h2>Sitios en español</h2>
<nav id="cl-effect-19 a" class="cl-effect-19 a">
<a href="http://librosweb.es/javascript/" target="_blank">
<span data-hover="Libros.es">Libros.es</span>
</a>
<a href="http://www.cristalab.com/tutoriales/4-html-css-y-javascript/" target="_blank">
<span data-hover="Cristalab">Cristalab</span>
</a>
<a href="http://www.manualdejavascript.com/section/manualdejavascript/" target="_blank">
<span data-hover="Manual de JavaScript">Manual de JavaScript</span>
</a>
<a href="http://javascriptya.com.ar" target="_blank">
<span data-hover="JavaScript Ya">JavaScript Ya</span>
</a>
<a href="http://desarrolloweb.com/manuales/20/" target="_blank">
<span data-hover="Desarrollo Web">Desarrollo Web</span>
</a>
</nav>
</article>
<article class="color-1">
<h2>Sitios en inglés</h2>
<nav id="cl-effect-20 a" class="cl-effect-20 a">
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Getting_Started"
target="_blank">
<span data-hover="JavaScript MDN">JavaScript MDN</span>
</a>
<a href="http://www.jslab.dk/projects.php" target="_blank">
<span data-hover="JavaScript Lab">JavaScript Lab</span>
</a>
</nav>

Lenguajes Interpretados en el Cliente 10

 Guía # 4: Funciones en JavaScript

</article>
</section>
</div>
</body>
</html>

Guión 2: fonts.css
@import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700);
@font-face {
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-
opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
font-weight: normal;
font-style: normal;
}

Guión 3: links.css
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: rgba(49,48,51,1);
background: -moz-linear-gradient(left, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%,
rgba(43,41,39,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(49,48,51,1)),
color-stop(50%, rgba(75,70,77,1)), color-stop(100%, rgba(43,41,39,1)));
background: -webkit-linear-gradient(left, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%,
rgba(43,41,39,1) 100%);
background: -o-linear-gradient(left, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%,
rgba(43,41,39,1) 100%);
background: -ms-linear-gradient(left, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%,
rgba(43,41,39,1) 100%);
background: linear-gradient(to right, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%,
rgba(43,41,39,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#313033',
endColorstr='#2b2927', GradientType=1 );
font-family: 'Raleway', sans-serif;
}

h1 {
color: hsl(163, 70%, 55%);
text-align: center;
font-family: 'codropsicons', Arial, Helvetica, "Liberation Sans";
font-size: 3.4em;
text-transform: uppercase;
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
}

h2 {
text-shadow: -1px -1px 0px rgba(255,255,255,0.3),

Lenguajes Interpretados en el Cliente 11

 Guía # 4: Funciones en JavaScript

1px 1px 0px rgba(0,0,0,0.8);

color: #333;
opacity: 0.4;
font: Bold 3em 'Bitter';
}

.color-1 {
background: #0e83cd;
}

.color-5 {
background: #cd4436;
}

.container > section {

margin: 0 auto;
padding: 1em 1em;
text-align: center;
}

nav a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}

nav a:hover,
nav a:focus {
outline: none;
}

/* Effect 19: 3D side */

.cl-effect-19 a {
line-height: 2em;
margin: 15px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
text-align: center;
vertical-align: middle;
width: 210px;
}

.cl-effect-19 a span {
background: #e35041;
display: inline-block;
position: relative;
height: 88px;
padding: 0 14px;
-webkit-transition: -webkit-transform 0.4s, background 0.4s;
-moz-transition: -moz-transform 0.4s, background 0.4s;
-o-transition: transform 0.4s, background 0.4s;
-ms-transition: transform 0.4s, background 0.4s;

Lenguajes Interpretados en el Cliente 12

 Guía # 4: Funciones en JavaScript

transition: transform 0.4s, background 0.4s;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50% -100px;
-moz-transform-origin: 50% 50% -100px;
-o-transform-origin: 50% 50% -100px;
-ms-transform-origin: 50% 50% -100px;
transform-origin: 50% 50% -100px;
width: 100%;
}

.csstransforms3d .cl-effect-19 a span::before {

position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
background: #b53a2d;
content: attr(data-hover);
-webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
-ms-transition: background 0.4s;
transition: background 0.4s;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
}

.cl-effect-19 a:hover span,

.cl-effect-19 a:focus span {
background: #b53a2d;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}

.csstransforms3d .cl-effect-19 a:hover span::before,

.csstransforms3d .cl-effect-19 a:focus span::before {
background: #ef5e50;
}

/* Effect 20: 3D side */

.cl-effect-20 a {
line-height: 2em;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;

Lenguajes Interpretados en el Cliente 13

 Guía # 4: Funciones en JavaScript

.cl-effect-20 a span {
position: relative;
display: inline-block;
padding: 3px 15px 0;
background: #587285;
box-shadow: inset 0 3px #2f4351;
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
-o-transition: background 0.6s;
-ms-transition: background 0.6s;
transition: background 0.6s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}

.cl-effect-20 a span::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: #2f4351;
content: attr(data-hover);
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
-o-transform: rotateX(270deg);
-ms-transform: rotateX(270deg);
transform: rotateX(270deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: transform 0.6s;
-ms-transition: transform 0.6s;
transition: transform 0.6s;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none;
}

.cl-effect-20 a:hover span,

.cl-effect-20 a:focus span {
background: #2f4351;
}

.cl-effect-20 a:hover span::before,

Lenguajes Interpretados en el Cliente 14

 Guía # 4: Funciones en JavaScript

.cl-effect-20 a:focus span::before {

-webkit-transform: rotateX(10deg);
-moz-transform: rotateX(10deg);
-o-transform: rotateX(10deg);
-ms-transform: rotateX(10deg);
transform: rotateX(10deg);
}

Guión 4: confirmlinks.js
//Iniciando el manejador para los enlaces de la página.
window.onload = confirmAllLinks;

//Controlador de eventos para elementos de enlace y area en mapas.

//Utiliza la palabra clave this para hacer referencia al elemento
//del documento y puede devolver false para evitar que
//el navegador vaya al vínculo.
function confirmLink(){
return confirm("¿Está seguro que quiere visitar el sitio: " + this.href + "?");
}

//Recorrer todos los enlaces (hipervínculos) del documento y asignar

//la función confirmLink a cada uno como controlador controlador de evento.
function confirmAllLinks(){
for(var i=0; i<document.links.length; i++){
document.links[i].onclick = confirmLink;
}
}

Resultado:

Ejemplo 3: 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.
Guión 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 tyep="text/javascript" src="js/focusblur.js"></script>

Lenguajes Interpretados en el Cliente 15

 Guía # 4: Funciones en JavaScript

</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 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"
tabindex="9" value="Registrar">
<br style="clear:both;">
</section>
</form>
</article>
</section>
</body>
</html>

Lenguajes Interpretados en el Cliente 16

 Guía # 4: Funciones en JavaScript

Guión 2: form.css
#container h2 {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
color: #3C42E0;
font-family: "Droid Serif", Georgia, serif;
font-size: 2em;
font-weight: 500;
line-height: 1.8em;
margin-top: 10px;
margin-bottom: 12px;
padding: 12px 0;
text-align: center;
}

#container h3 {
letter-spacing: -0.04em;
font-weight: bold;
font-size: 1.4em;
margin-bottom: 10px;
margin-top: 0;
}

#container p {
color: #a42;
}

span.chyron {
font-size: 1.2em;
padding-top: 10px;
}

/** main blocks **/

#container {
display: block;
max-width: 940px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 10px;
padding: 20px 15px;
background: #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/** the form elements **/

#hongkiat-form {
box-sizing: border-box;
}

#hongkiat-form .txtinput {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 14px;
font-size: 1.2em;

Lenguajes Interpretados en el Cliente 17

 Guía # 4: Funciones en JavaScript

padding: 9px 25px;

padding-left: 55px;
width: 84%;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s
linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear
0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear
0s;
-ms-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear
0s;
}

#hongkiat-form .txtinput:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none;
}

#hongkiat-form .requested:focus {
font-weight: Bold;
}

#hongkiat-form .selmenu:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none;
}

#hongkiat-form input#firstname {
background: #fff url('../images/user.png') 5px 4px no-repeat;
display: inline-block;
float: left;
width: 36%;
}

#hongkiat-form input#secondname {
background: #fff url('../images/user2.png') 5px 4px no-repeat;
display: inline-block;
float: right;
width: 31.2%;
}

#hongkiat-form input#lastname {
background: url('../images/user3.png') 5px 4px no-repeat;
display: inline-block;

Lenguajes Interpretados en el Cliente 18

 Guía # 4: Funciones en JavaScript

float: left;
width: 31.2%;
}

#hongkiat-form input#email {
background: url('../images/email.png') 5px 4px no-repeat;
}

#hongkiat-form input#phone {
background: url('../images/phone.png') 5px 4px no-repeat;
}

#hongkiat-form input#position {
background: #fff url('../images/chiefstaff.png') 5px 4px no-repeat;
}

#hongkiat-form input#firstname:focus {
background: rgba(250,245,120,0.5) url('../images/user.png') 5px 4px no-repeat;
}

#hongkiat-form input#lastname:focus{
background: rgba(250,245,120,0.5) url('../images/user3.png') 5px 4px no-repeat;
}

#hongkiat-form input#email:focus{
background: rgba(250,245,120,0.5) url('../images/email.png') 5px 4px no-repeat;
}

#hongkiat-form textarea.txtblock {
background: #fff url('../images/speech.png') 5px 4px no-repeat;
}

#hongkiat-form textarea {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 15px;
font-size: 1.2em;
padding: 11px 25px;
padding-left: 55px;
width: 85%;
height: 180px;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s
linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear
0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear
0s;
-ms-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear
0s;
}

#hongkiat-form textarea:focus {
border-color: rgba(41, 92, 161, 0.4);

Lenguajes Interpretados en el Cliente 19

 Guía # 4: Funciones en JavaScript

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
color: #333;
outline: 0 none;
}

#hongkiat-form select#profesion {
background: #fff url('../images/chiefstaff.png') 5px 4px no-repeat;
width: 100%;
}

#hongkiat-form select#profesion option#optmenu {

background: #fff url('../images/chiefstaff.png') 5px 4px no-repeat;
}

#hongkiat-form select#selpais {
background: #fff url('../images/mundi.png') 5px 4px no-repeat;
width: 100%;
}

#hongkiat-form select#selpais option#optmenu {

background: #fff url('../images/mundi.png') 5px 4px no-repeat;
}

#hongkiat-form #slider {
width: 60%;
}

#hongkiat-form #aligned {
box-sizing: border-box;
float: left;
margin-right: 60px;
width: 500px;
}

#hongkiat-form #aside {
box-sizing: border-box;
float: left;
padding: 0;
width: 310px;
}

#wrapping {
box-sizing: border-box;
width: 100%;
}

span.radiobadge {
display: block; margin-bottom: 8px;
}

span.radiobadge label {
font-size: 1.2em; padding-bottom: 4px;
}

select.selmenu {
border: 1px solid #aaa;
color: #676767;
font-size: 17px;
padding: 11px 25px 11px 66px;

Lenguajes Interpretados en el Cliente 20

 Guía # 4: Funciones en JavaScript

/** Estilo para elementos buttons personalizados **/

#buttons {
display: block;
padding-top: 4px;
}

#buttons #resetbtn {
color: #515151;
display: block;
float: left;
text-shadow: -1px 1px 0px #fff;
margin-right: 20px;
height: 2.2em;
padding: 0 1em;
outline: 0;
font-weight: bold;
font-size: 1.2em;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
background-color: #fff;
background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(240,240,240) 2%,
rgb(222,222,222) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-
stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-
stop(100%,rgb(222,222,222)));
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240)
2%,rgb(222,222,222) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240)
2%,rgb(222,222,222) 100%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240)
2%,rgb(222,222,222) 100%);
background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240)
2%,rgb(222,222,222) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
endColorstr='#dedede',GradientType=0 );
border: 1px solid #969696;
-moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-o-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-ms-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
white-space: nowrap;
word-wrap: normal;
}

#buttons #resetbtn:hover {
color: #818181;
background-color: #fff;
background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(244,244,244) 2%,
rgb(229,229,229) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-
stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-
stop(100%,rgb(229,229,229)));

Lenguajes Interpretados en el Cliente 21

 Guía # 4: Funciones en JavaScript

background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244)

2%,rgb(229,229,229) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244)
2%,rgb(229,229,229) 100%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244)
2%,rgb(229,229,229) 100%);
background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244)
2%,rgb(229,229,229) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
endColorstr='#e5e5e5',GradientType=0 );
border-color: #aeaeae;
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-o-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

#buttons #submitbtn {
display: block;
float: left;
height: 2.2em;
padding: 0 1em;
border: 1px solid;
outline: 0;
font-weight: bold;
font-size: 1.2em;
color: #fff;
text-shadow: 0px 1px 0px #222;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
border-color: #26adeb #2093ca #111;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256,.35);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,.35);
-o-box-shadow: inset 0 1px 0 rgba(256,256,256,.35);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256,.35);
box-shadow: inset 0 1px 0 rgba(256,256,256,.35);
background: rgba(75,182,232,1);
background: -moz-linear-gradient(top, rgba(75,182,232,1) 0%, rgba(25,111,204,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(75,182,232,1)),
color-stop(100%, rgba(25,111,204,1)));
background: -webkit-linear-gradient(top, rgba(75,182,232,1) 0%, rgba(25,111,204,1)
100%);
background: -o-linear-gradient(top, rgba(75,182,232,1) 0%, rgba(25,111,204,1) 100%);
background: -ms-linear-gradient(top, rgba(75,182,232,1) 0%, rgba(25,111,204,1) 100%);
background: linear-gradient(to bottom, rgba(75,182,232,1) 0%, rgba(25,111,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bb6e8',
endColorstr='#196fcc', GradientType=0 );
}

#buttons #submitbtn:hover,
#buttons #submitbtn:active {
border-color: #32b9fc #3090af #000;
color: #fff;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

Lenguajes Interpretados en el Cliente 22

 Guía # 4: Funciones en JavaScript

-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

-o-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
background: rgba(9,171,230,1);
background: -moz-linear-gradient(top, rgba(9,171,230,1) 0%, rgba(41,184,229,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(9,171,230,1)),
color-stop(100%, rgba(41,184,229,1)));
background: -webkit-linear-gradient(top, rgba(9,171,230,1) 0%, rgba(41,184,229,1)
100%);
background: -o-linear-gradient(top, rgba(9,171,230,1) 0%, rgba(41,184,229,1) 100%);
background: -ms-linear-gradient(top, rgba(9,171,230,1) 0%, rgba(41,184,229,1) 100%);
background: linear-gradient(to bottom, rgba(9,171,230,1) 0%, rgba(41,184,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#09abe6',
endColorstr='#29b8e5', GradientType=0 );
}

/** @group clearfix **/

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

p#textoAyuda {
background: rgba(209,92,107,1);
background: -moz-linear-gradient(left, rgba(209,92,107,1) 0%, rgba(250,113,129,1)
100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(209,92,107,1)),
color-stop(100%, rgba(250,113,129,1)));
background: -webkit-linear-gradient(left, rgba(209,92,107,1) 0%, rgba(250,113,129,1)
100%);
background: -o-linear-gradient(left, rgba(209,92,107,1) 0%, rgba(250,113,129,1) 100%);
background: -ms-linear-gradient(left, rgba(209,92,107,1) 0%, rgba(250,113,129,1) 100%);
background: linear-gradient(to right, rgba(209,92,107,1) 0%, rgba(250,113,129,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d15c6b',
endColorstr='#fa7181', GradientType=1 );
border-radius: 3px;
color: rgb(240,240,240);
font: Normal 1em Arial,Helvetica,"Liberation Sans";
margin-bottom: 20px;
padding: 10px 12px;
top:0;
right:0;
text-shadow: 2px 2px 0px rgba(225,225,225,0.2);
visibility: hidden;
width: 30%;
}

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

Guión 3: basic.css
* {
margin: 0;

Lenguajes Interpretados en el Cliente 23

 Guía # 4: Funciones en JavaScript

padding: 0;
}

body {
font-size: 14px;
}

header h1 {
font: Bold 3.6em Arial,Helvetica,"Liberation Sans";
color: rgb(75,182,232);
text-align: center;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #a9c9e9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

Guión 4: focusblur.js
//Elemento con la capa de ayuda a mostrar en los campos de formulario
var textoAyuda;
//Matriz con los mensajes de ayuda asociados a cada control de formulario
var arregloAyuda = [
"Ingrese su nombre en este campo de texto",
"Ingrese su apellido en este campo de texto",
"Ingrese su dirección de correo en el formato usuario@dominio.com",
"Ingrese su número de teléfono en el formato 9999-0000",
"Ingrese una descripción breve en el campo área de texto",
"Seleccione su profesión en este campo select",
"Díganos cuál es su país de origen en este campo select",
"Restablezca el formulario con este botón",
"Envíe el formulario con este botón",
""
];

//Inicializar el elemento textoAyudaDiv y registrar los manejadores de eventos

//para los distintos controles de formulario
function inic(){
textoAyuda = document.getElementById("textoAyuda");
//Registrar los escuchadores de eventos
registrarEscuchas(document.getElementById("firstname"), 0);
registrarEscuchas(document.getElementById("lastname"), 1);
registrarEscuchas(document.getElementById("email"), 2);
registrarEscuchas(document.getElementById("phone"), 3);
registrarEscuchas(document.getElementById("describe"), 4);
registrarEscuchas(document.getElementById("profesion"), 5);
registrarEscuchas(document.getElementById("selpais"), 6);
registrarEscuchas(document.getElementById("resetbtn"), 7);
registrarEscuchas(document.getElementById("submitbtn"), 8);
}

//Función que determina qué mensaje de ayuda habilitar

//con base en el numeroMensaje enviado como segundo argumento
function registrarEscuchas(objeto, numeroMensaje){
//Asociar el manejador de eventos onfocus dependiendo

Lenguajes Interpretados en el Cliente 24

 Guía # 4: Funciones en JavaScript

//del objeto y numeroMensaje recibidos como argumentos

objeto.addEventListener("focus", function(){
textoAyuda.style.visibility = "visible";
textoAyuda.innerHTML = arregloAyuda[numeroMensaje];
}, false);
objeto.addEventListener("blur", function(){
textoAyuda.style.visibility = "hidden";
textoAyuda.innerHTML = arregloAyuda[9];
}, false);
}

//Desencadenando la función inic al cargar el documento

window.addEventListener("load", inic, false);

Ejemplo 4: Ejemplo que muestra cómo validar un campo de texto en un formulario para que solamente
acepte números utilizando el evento keypress, definido como atributo del elemento INPUT usando el
modelo de eventos Nivel 0 del DOM. Este modelo es el único admitido al 100% en todos los navegadores,
pero a la vez, es el más limitado.
Guión 1: solonumeros.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Máscaras del teclado</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/numbers.css">
<script type="text/javascript" src="js/filternumbers.js"></script>
</head>
<body>
<h1>El campo solo acepta números</h1><hr>
<form name="frmmask">
<label for="serialnumber">Número de serie: </label>
<input type="number" name="serialnumber" id="txtserial" maxlength="10"
onkeypress="return numbersOnly(this, event)" title="El número de serie contiene únicamente
dígitos" />
</form>
</body>
</html>

Guión 2: numbers.css
h1 {
background-color:Lavender;
border:double 5px rgb(55,33,99);
font-family:"Bookman Old Style";
font-weight:800;
font-size:20pt;
text-align:center;
}

label {
color:SaddleBrown;
font-family:"Century Gothic";
font-weight:500;
font-size:10pt;
}

input {
background-color:Wheat;
font-family:"Franklin Gothic Demi";
font-weight:400;
font-size:10pt;
color:Maroon;

Lenguajes Interpretados en el Cliente 25

 Guía # 4: Funciones en JavaScript

Guión 3: filternumbers.js
// Mostrar la tecla presionada. En una aplicación real no debería hacerlo.
// Probablemente sería buena idea mostrar únicamente en el caso que
// se ingresen teclas que no sean números.
function showChar(e){
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode; //Todos los navegadores menos Netscape 4.0 o inferior
else if (e.which) code = e.which; //Netscape 4.0 o inferior
var character = String.fromCharCode(code);
//alert('La tecla presionada fue: ' + character);
}

// Dejar pasar únicamente números enteros y bloquear cualquier otra caracter

function numbersOnly(field, event){
/*alert(field.value);*/
var key, keychar;
showChar(event); //Mostrar la tecla presionada
if(window.event) //Todos los navegadores menos Netscape 4.0 o inferior
key = window.event.keyCode;
else if(event) //Netscape 4.0 o inferior
key = event.which;
else
return true;
keychar = String.fromCharCode(key);
// Comprobar caracteres especiales como espacio en blanco
// luego comprobar números
if((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key ==
27))
return true;
else if((("0123456789").indexOf(keychar) > -1)){
window.status = "";
return true;
}
else{
window.status = "Este campo solo acepta números";
return false;
}
}

Ejemplo 5: 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.
Guión 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 href="css/button.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/tirodados.js"></script>
</head>
<body>
<!-- <form action="javascript:void(0);">

Lenguajes Interpretados en el Cliente 26

 Guía # 4: Funciones en JavaScript

<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>
<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>

Guión 2: dados.css
* {
margin: 0;
padding: 0;
}

body {
font-size: 16px;
}

#buttonarea {
margin: 24px auto;
width: 56%;
}

ol {
background: rgba(118,187,204,1);
background: -moz-linear-gradient(left, rgba(118,187,204,1) 0%,
rgba(78,197,230,1) 52%, rgba(34,155,189,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%,
rgba(118,187,204,1)), color-stop(52%, rgba(78,197,230,1)), color-stop(100%,
rgba(34,155,189,1)));
background: -webkit-linear-gradient(left, rgba(118,187,204,1) 0%,
rgba(78,197,230,1) 52%, rgba(34,155,189,1) 100%);
background: -o-linear-gradient(left, rgba(118,187,204,1) 0%,
rgba(78,197,230,1) 52%, rgba(34,155,189,1) 100%);

Lenguajes Interpretados en el Cliente 27

 Guía # 4: Funciones en JavaScript

background: -ms-linear-gradient(left, rgba(118,187,204,1) 0%,

rgba(78,197,230,1) 52%, rgba(34,155,189,1) 100%);
background: linear-gradient(to right, rgba(118,187,204,1) 0%,
rgba(78,197,230,1) 52%, rgba(34,155,189,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76bbcc',
endColorstr='#229bbd', GradientType=1 );
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px;
list-style: none;
height: auto;
margin: 0 auto;
padding: 24px 48px;
width: 56%;
}

ol li {
display: inline-block;
margin-right: 16px;
}

Guión 3: dados.css
.randombutton {
background-color:#3bb3e0;
font-family: 'Open Sans', sans-serif;
font-size:13px;
font-weight:Bold;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
margin-bottom: 30px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229)
100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%,
rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%,
rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%,
rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%,
rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)), color-stop(1,
rgb(62,184,229)));
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;

Lenguajes Interpretados en el Cliente 28

 Guía # 4: Funciones en JavaScript

-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px
10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px
5px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px
5px #999;
-ms-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px
5px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px
#999;
color:#fff;
}

.randombutton:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202)
100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%,
rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%,
rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%,
rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%,
rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px
5px 3px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px
3px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px
#999;
-ms-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px
3px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px
#999;
}

.randombutton::before {
background-color:#2591b4;
background-image:url(../img/arrowright.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
-webkit-border-radius: 50%;

Lenguajes Interpretados en el Cliente 29

 Guía # 4: Funciones en JavaScript

-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-ms-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.randombutton:active::before {
top:50%;
margin-top:-12px;
-webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px
3px #1a80a6;
-moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px
#1a80a6;
-o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px
#1a80a6;
-ms-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px
#1a80a6;
box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}

Guión 4: tirodados.js
//Variables utilizadas para interactuar con los elementos img presentes en la
página
var imagenDado1;
var imagenDado2;
var imagenDado3;
var imagenDado4;
var imagenDado5;
var imagenDado6;

//Registrar componentes de escucha del evento clic al presionar el botón denominado

botonTirar
//y obtener todos los elementos img presentes en el documento
function iniciar(){
var boton = document.getElementById("botonTirar");
if(boton.addEventListener){
boton.addEventListener("click", tirarDados, false);
}
else{
boton.attachEvent("onclick", tirarDados);
}
imagenDado1 = document.getElementById("dado1");
imagenDado2 = document.getElementById("dado2");
imagenDado3 = document.getElementById("dado3");
imagenDado4 = document.getElementById("dado4");
imagenDado5 = document.getElementById("dado5");
imagenDado6 = document.getElementById("dado6");
}

function tirarDados(){
establecerImagen(imagenDado1);

Lenguajes Interpretados en el Cliente 30

 Guía # 4: Funciones en JavaScript

establecerImagen(imagenDado2);
establecerImagen(imagenDado3);
establecerImagen(imagenDado4);
establecerImagen(imagenDado5);
establecerImagen(imagenDado6);
}

function establecerImagen(imgDado){
var valorDado = Math.floor(1+Math.random()*6);
//Estableciendo el atributo src de la imagen
imgDado.setAttribute("src", "img/dice" + valorDado + ".png");
//Estableciendo el atributo alt de la imagen
imgDado.setAttribute("alt", "Imagen del dato con el valor " + valorDado);
}

if(window.addEventListener){
window.addEventListener("load", iniciar, false);
}
else{
window.attachEvent("onload", iniciar);
}

Resultado:

Después de lanzarlos presionando el botón Tirar los dados

V. DISCUSION DE RESULTADOS

Nota: Cree una carpeta para guardar cada uno de los scripts de esta parte y nómbrela analisisguia5aps1. Deberá
entregar el análisis de resultados y la investigación complementaria en la siguiente práctica mediante correo
electrónico.

1. Cree una calculadora relativamente básica que permita realizar cálculos utilizando funciones. Las
operaciones que debe permitir la calculadora son: suma, resta, multiplicación, división, residuo, inversa de
un número, porcentaje, cuadrado de un número y raíz cuadrada. Utilice la llamada la función con
parámetros y una interfaz como la mostrada a continuación:

Lenguajes Interpretados en el Cliente 31

 Guía # 4: Funciones en JavaScript

NOTA: Utilice para todos los problemas formularios y JavaScript no invasivo (unobstrusive JavaScript).
No vale usar prompt para capturar los datos del usuario.

VII. BIBLIOGRAFIA

 Flanagan, David. JavaScript La Guía Definitiva. 1ra Edición. Editorial ANAYA Multimedia. 2007. Madrid,
España.
 Deitel, Paul / Deitel, Harvey / Deitel, Abbey. Internet & World Wide Web. Cómo programar. 5ta Edición.
Editorial Pearson. 2014. México D.F..
 McFedries, Paul. JavaScript Edición Especial. 1ra Edición. Editorial Prentice Hall. 2002. Madrid, España.
 Powell, Thomas / Schneider, Fritz. JavaScript Manual de Referencia. 1ra Edición. Editorial McGraw-Hill.
2002. Madrid, España.

Lenguajes Interpretados en el Cliente 32