15.1 Uso de operadores y eventos

En el tema anterior no se cubrió el uso que se hace de los operadores en Javascript; los operadores pueden dividirse en diferentes categorías:

Haz clic en cada clasificación para conocer más.

var count = 5;

Ahora bien, es momento de ver acerca de los eventos. ¿Recuerdas que usaste un evento onclick en uno de los últimos ejercicios? Veamos un poco más al respecto. Los eventos le avisan a Javascript que algo ha sucedido en la página, ya sea que un usuario presionó un botón o que la misma página termina de cargar su contenido, de manera que una nueva acción se ejecute en consecuencia.

Podría decirse que la secuencia de los eventos puede darse en el siguiente orden:

Cuando el usuario activa algún disparador de eventos (trigger) en una página HTML, el proceso para activar el Javascript se diseña de la siguiente forma:

A continuación desarrollarás un ejercicio en el que comprobarás que el usuario coloque en un sitio la cantidad de caracteres que quieres. Toma como base el siguiente código HTML.

<div>
 <h1 id="myName">Charlie Brown</h1>
 <a href="#" id="myButton" onclick=checkName();>Verifica tu nombre!</a>
</div>
<div id="error">Presiona el botón para verificar tu nombre.</div>

Luego, aplica este Javascript:

var foo = document.getElementById("myName");
function checkName(){
 if(foo.textContent.length > 10){
	document.getElementById("error").textContent = "Son muchas letras! Actualmente son: " + foo.textContent.length;    
 } else if(foo.textContent.length < 10){
	document.getElementById("error").textContent = "Te faltan letras! Actualmente son: " + foo.textContent.length;    
 }
}

¿Que hay de nuevo en este ejemplo? Aquí estamos usando el método length el cual se especializa en contar los caracteres de los objetos string que le indiquemos. Observa la manera en que está construido el programa:

• Primero declaramos una variable a la cual le asignamos como valor, un objeto del DOM, el cual identificamos por medio de su id.
• Como segundo paso se construye la función checkName(), dentro de la cual se coloca una serie de evaluaciones conifpreguntando acerca del número de caracteres que contiene el texto de la variable foo (foo.textContent.length). Si este número es mayor o menor a una cantidad especificada, entonces se avisa al usuario con un mensaje que se coloca dentro de un nodo identificado por su id = error.
• Al final simplemente se coloca el disparador en el botón mediante un evento onclick que llama a la función checkName() del documento Javascript que tienes ligado a tu HTML.

15.2 Uso de números avanzado y Math

Cuando se tienen valores numéricos en javascript, puedes usar las propiedades del objeto Number. Estos valores son útiles desde el cálculo matemático hasta la programación de animación. Por ejemplo, si construyes una calculadora financiera muchos de los valores que resulten los necesitarás redondear, o si estás trabajando con precios de artículos solamente se mostrarán un par de decimales para una mejor presentación. En caso de una animación requerirás de ángulos, segundos, grados o radianes para mover los objetos en la direccion y tiempo que necesites.

Algunos de los métodos más usados son:

Practica ahora con los números, enseguida convertirás un número complejo en algunas de las opciones que el objeto Number permite. Primero escribe la base de HTML:

<div  id="message">...</div>

Luego aplica el siguiente Javascript:

var oNumber = 52.5346;
var k = oNumber + " -> NUMERO ORIGINAL.";
k += "<br>" + oNumber.toFixed(3) + " -> con 3 decimales.";
k += "<br>" + oNumber.toFixed() + " -> redondeado.";
k += "<br>" + oNumber.toPrecision(4) + " -> cuantos numeros en total?";
k += "<br>" + oNumber.toString() + " -> convertido a string";
k += "<br>" + oNumber.valueOf() + " -> valor primitivo";
var foo = document.getElementById("message");
foo.innerHTML = k;

Algo interesante que puedes observar es la concatenación de los valores de la misma variable mediante el uso de += . Fíjate cómo usamos la misma variable k para crear varios renglones de información que al final se imprimen en el elemento del DOM message. Otro punto que puede ser nuevo para ti es el uso de innerHTML, que es una propiedad que establece o devuelve el contenido HTML de un elemento. En este caso lo estamos llenando con el valor de la variable k.

Uso de Math

Mathes la herramienta de Javascript que permite hacer operaciones matemáticas en el navegador, ésta tiene objetos y métodos que se pueden usar como constantes y funciones.

El objeto más usado en este instrumento es Math.PI() el cual devuelve el valor de PI (aprox. 3.14). Mientras que los métodos que usamos con mayor frecuencia son:

• Math.round(): redondea el número al íntegro más cercano.
• Math.sqrt(n): retorna la raíz cuadrada de un número positivo.
• Math.ceil(): redondea al íntegro más cercano hacia arriba.
• Math.floor(): redondea al íntegro más cercano hacia abajo.
• Math.random(): genera un número aleatorio entre 0 y 1.

¿Recuerdas el ejercicio pasado donde redondeaste algunos números? A continuación harás algo parecido, pero esta vez con los métodos de Math. Primero escribe este HTML simple que captura un número para redondearlo hacia arriba con Math.ceil():

<div id="form">
 <input id="input" type="text" placeholder="número con decimales">
 <button id="clic">Convierte!</button>
</div>
<!-- message -->
<div id="message">...</div>

En un nuevo documento Javascript escribe:

//button
document.getElementById('clic').onclick = function() {
 var q = document.getElementById("input").value;
//message
 var mssg = document.getElementById("message");
 mssg.innerHTML = Math.ceil(q) + " ...es el redondeo hacia arriba!";
} 

En este ejemplo podemos ver la aplicacion de eventos desde javascript. Observa el constructor:

document.getElementById('clic').onclick = function(){
 ...
} 

Primero se selecciona un objeto del DOM, en este caso es el botón que se identifica como clic y se asigna un evento onclick que dispara una función. De esta forma podemos asignar eventos a triggers en nuestro HTML desde Javascript. Siguiendo la secuencia la función llegamos a las variables, donde creamos una variable que guarda el valor del elemento input de nuestro DOM. Entonces pasamos ese valor a la variable mssg que tiene como blanco para imprimir el resultado al elemento del DOM message.

¿Bastante simple no lo crees?

Haz clic en el botón para acceder a la práctica.

Desarrolla el siguiente ejemplo, ahora genera números aleatorios entre 1 y 10. Los números aleatorios te pueden servir para crear juegos, contraseñas o animaciones entre otras aplicaciones posibles. Primero escribe este HTML básico:

<div id="content">
 <p>RANDOM</p>
 <div id="message">...</div>
</div>

Éste es el Javascript:

var rN = Math.floor(Math.random() * 10);
var foo = document.getElementById("message");
foo.innerHTML = rN;

Para encontrar un número del 1 al 10 de manera aleatoria se debe multiplicar Math.random() por 10. Recuerda que esta propiedad solo puede encontrar un número entre 0 y 1.  Usamos Math.floor para redondear el número al íntegro más cercano hacia abajo y así tener una mejor presentación de nuestra información, la cual finalmente presentamos al colocar el resultado en el interior de message al usar innerHTML para imprimir el valor.

Haz clic en el botón para acceder a la práctica.

Ahora es turno de hacer algo común en algunos juegos y en ejercicios de e-learning. Vas a revisar las respuestas del usuario y le darás una retroalimentación. En el siguiente ejercicio, el usuario debe elegir entre dos respuestas y revisarlas presionando un botón. Primero escribe  este HTML básico :

<div id="content">
 <div>
	<p>Que animal hace miau?</p>
	Gato <input id="cat" name="animal" type="radio" value="0" /> 
	Perro <input id="dog" name="animal" type="radio" value="0" />
	<hr>
	<input type="button" onclick=foo(); value="REVISA TU RESPUESTA" />
 </div>
 <div id="message" class="no-appear"></div>
</div>

Luego escribe este Javascript:

function foo() {
 var chat = document.getElementById("cat").checked;
 var doge = document.getElementById("dog").checked;
 if (chat == 1) {
	document.getElementById("message").className = "appear_OK";
	document.getElementById("message").innerHTML = "Correcto, es un gato!";
 } else if (doge == 1) {
	document.getElementById("message").className = "appear_NOK";
	document.getElementById("message").innerHTML = "Los perros hacen guau!";
 }
}

Observando el Javascript puedes ver que hay variables que tienen asignadas a un par de elementos en el DOM. La variable chat tiene asignado al elemento con id=cat, y este elemento, además está verificando que el radio esté activo mediante la propiedad checked.

En el enunciado if (){...}verificamos que las variables sean igual a 1. Recuerda que para los radio buttons, 1 es el equivalente a estar activado (TRUE) y 0 a estar desactivado (FALSE).
Si el botón está activo, se imprime un mensaje mediante innerHTML y ademas cambiamos la clase del elemento del DOM que seleccionamos por una nueva, mediante la propiedad className. className nos permite cambiar la clase que tiene el elemento por una nueva que ya exista en el CSS.

Ahora verás el uso de RegExp (Regular Expressions), en pocas palabras es un objeto u objetos que definen un patrón de caracteres y que se usan cuando queremos encontrar o reemplazar textos. Es bastante útil para encontrar palabras en textos, hacer validaciones de campos de texto, entre otras acciones. RegExp es soportado por javascript y por PHP.

Para aplicar esta técnica, las expresiones deben estar entre diagonales ( / ) y ciertos caracteres se convierten en metacaracteres, los cuales adquieren un significado especial al aplicarlos. Supón que quieres encontrar las palabras “Don Gato” en una oración como esta:

En el callejón Don     Gato tiene una pandilla.

Observa que entre “Don” y “Gato” hay varios espacios en blanco, así que debes buscar “DonGato” al igual que “Don Gato” separado por cualquier número de espacios. Esto se puede solucionar usando el asterisco (*) como se muestra a continuación:

/Don *Gato/

Al colocar las palabras entre los dos slashes activamos el regexp. Por otro lado, el asterisco que ves entre las palabras es un selector que implica que el texto que estás buscando puede tener algunos caracteres que lo preceden o ninguno y en este caso el caracter que lo precede es un espacio.

En el siguiente ejercicio, se evaluará y reemplazarán algunas palabras. En este caso no hay un HTML básico, solo coloca la liga hacia el documento Javascript que usarás:

//primero probamos si existe por lo menos un espacio entre Don y Gato
//La respuesta sera true o false dependiendo de la oracion
//Prueba quitando el espacio en la oracion para que experimentes
document.write(/Don +Gato/.test("En el callejón Don Gato tiene una pandilla."));
document.write("<hr>");
//En este caso reemplazamos la palabra gatos por perros
document.write("Los gatos son perezosos. Me encantaria ser un gato.".replace(/gatos/gi, "perros"));
document.write("<hr>");
//Aquí el test es verdadero si la palabra México o Méjico existe en la oracion
document.write(/Mé[jx]ico/.test("En Méjico tenemos palabra."));
document.write("<hr>");
//Aqui el test es verdadero si existe por lo menos un dígito
//Prueba cambiando por un número 4
document.write(/\d/.test("En cuatro"));
document.write("<hr>");

En el caso donde reemplazamos perros por gatos, puedes observar que hay una g y una i después del cierre de la expresión. Estos son modificadores generales.

En el enlace que se proporcionó previamente pudiste ver estos modificadores. Si no lo seguiste te recomendamos que lo hagas. En este último ejercicio con expresiones regulares buscaremos y seleccionaremos una palabra de algunos párrafos.

<button id="unmark">Ya no marques nada!</button>
<button id="mark">Marcar palabra!</button>
<input id="input" type="text">
<div id="content">
<hr>
 <p>En las lenguas romances los nombres actuales más generalizados derivan del latín vulgar catus, palabra que aludía especialmente a los gatos salvajes en contraposición a los gatos domésticos que, en latín, eran llamados felis.</p>
 <p>Hay docenas de razas, algunas sin pelo o incluso sin cola, como resultado de mutaciones genéticas, y existen en una amplia variedad de colores. Son depredadores por naturaleza, siendo sus posibles presas más de cien especies diferentes de animales para 	alimentarse. Son capaces de asimilar algunos conceptos, y ciertos ejemplares han sido entrenados para manipular mecanismos simples. </p>
</div>
<div id="message">Message</div>

Ahora viene el Javascript:

var foo = document.getElementById('content');
document.getElementById('unmark').onclick = function() {
 foo.innerHTML = foo.innerHTML.replace(/<\/?mark[^>]*>/g, "");

document.getElementById('message').textContent = "Message";
};
document.getElementById('mark').onclick = function() {
	text = foo.innerHTML;
	keyword = document.getElementById('input').value;
//creamos un nuevo objeto RegExp para colocar la variable y hacer búsqueda global de la palabra en todo el texto
var re = new RegExp(keyword,"gi");
	if (keyword != "") {
 	marked = text.replace(re, "<mark>" + keyword + "</mark>");
 	foo.innerHTML = marked;
 	document.getElementById('message').textContent = "Message";
	} else if (keyword != text){
   	document.getElementById('message').textContent = "No existe esa palabara";
 	}else if (keyword == "") {
   	document.getElementById('message').textContent = "No nada que buscar!";
 	}
};

Y finalmente el CSS:

body {
 font-family: helvetica, arial, sans;
}
p {
 margin-bottom: 1em;
}
#message {
 padding: 1em;
 border: 1px dashed #ccc;
 background-color: whitesmoke;
 color: #999;
 font-size: 80%;
}

En este ejercicio se hizo uso del tag <mark>...</mark> para subrayar la palabra que buscas en el texto. También se creó un nuevo objeto RegExp para hacer la búsqueda de manera global, eso se hace usando la sintaxis var re = new RegExp(keyword,"gi");  colocando la variable y luego los modificadores gi.

Uso de switch

Anteriormente usaste switch cuando practicaste con PHP, así que esto sera muy rápido. Se usa switch cuando tenemos varias posibles opciones de respuesta a una pregunta. Switch se procesa más rápido que un if-else que aun cuando obtiene una respuesta positiva sigue procesando todos los enunciados, mientras que switch detiene el proceso de evaluación al momento de encontrar una respuesta.

Practica con esto, usa el siguiente HTML base:

<p id="answer"></p>

Usa este código Javascript:

var msg;
var level = 4; //prueba cambiando el nivel
//Un mensaje se imprime de acuerdo al nivel del usuario
switch (level) {
 case 1:
	msg = 'Suerte principiante!';
	break;
 case 2:
	msg = 'Subiste a nivel 2!';
	break;
 case 3:
	msg = 'Tienes el maximo nivel';
	break;
 default:
	msg = 'Suerte!';
	break;
}
var el = document.getElementById('answer');
el.textContent = msg;

15.3 Uso de GreenSock

GreenSock es una librería de Javascript que te permite hacer animaciones complejas de manera relativamente sencilla. Para usarla tienes que ligar tu documento HTML a la librería, ya sea en línea o de manera local. Visita su website y explóralo para que veas algunos ejemplos. Para fines del curso verás solamente aspectos básicos, pero es bastante recomendable que aprendas a manejar esta poderosa herramienta.

Ahora bien, TweenLite es la base de animación de GSAP, es extremadamente ligera, flexible y rápida de procesar. Una instancia de TweenLite puede manejar el movimiento de varias propiedades de un objeto u objetos si es que usas arrays. Vamos a usar la técnica más básica que es to(). La sintaxis es muy simple.

TweenLite.to(target, tiempo_segundos, { propiedades_a_animar });
TweenLite.to(cuadrito, 3, { x:"30" });
//mueve cuadrito a la posición 30 en x en 3 segundos

Con simples comandos crea animación. Veamos cómo mover un elemento de un lado a otro. El HTML básico a usar es el siguiente:

<div  id="photo" class="pic" onclick=dance();></div>

Por otro lado, el CSS:

.pic {
 position: absolute;
 top: 10%;
 left: 25%;
 width: 300px;
 height: 295px;
 background: #ccc url("http://1.bp.blogspot.com/-rSbpqVR0EXM/TayfKMcazaI/AAAAAAAAAdA/kFNN8S52vEE/s1600/moose.jpg") no-repeat;
}

El Javascript:

var photo = document.getElementById("photo");
function dance() { TweenLite.to(photo, 2, { rotation: "+=360" }) };

Cada vez que haces clic sobre la imagen del alce se le ordena mediante TweenLite que gire 360º desde su posicion actual, así que si presionas 1 vez y dejas que termine la animación, la siguiente vez que presiones quedará igual. Pero si presionas rápidamente el botón verás que el cálculo cambia, así como la posicion de giro final ¡Todo esto con solo dos líneas de código!

Por otro lado, TweenMax extiende a TweenLite, permitiéndole tener funcionalidades extra. Con simples comandos crea animación. Observa cómo mover un elemento de un lado a otro. Su sintaxis es igual a la de TweenLite, solo que usamos TweenMax en su lugar.

El HTML básico:

<div id="alfa" class="square" onclick=moveAgain();></div>
<button onclick=restart();>RESTART</button>
<button onclick=start();>START</button>

El CSS:

.square {
 width: 2em;
 height: 2em;
 background-color: red;
}

El Javascript:

var obj = document.getElementById("alfa");
var myTween = new TweenMax(obj, 1, { x: 100,  y: 100, repeat:-1, yoyo:true });
function moveAgain() {TweenMax.to(obj, 1, { x: 400 });}
function start() { TweenMax.to(obj, 1, {	x: 100, y: 100, repeat:-1, yoyo:true });}
function restart() {TweenMax.to(obj, 1, { x: 0,	y: 0 });}

Con unas cuantas líneas de código puedes mover el cuadrito, con los botones puedes reiniciar la animación y activar un movimiento nuevo al presionar al objeto. Gracias a que se usa TweenMax tienes acceso a la propiedad yoyo() que permite crear un loop de animación de ida y vuelta. Esta propiedad está ligada con repeat(), que en este caso tiene un valor de -1 para que sea infinito. Si solo quieres que se repita tres veces, debes indicarlo en el valor en repeat.

No se creó alguna animación controlada en este ejercicio, por lo que al hacer alguna combinación de triggers, el movimiento será cambiante. ¿Entiendes ahora el poder de esta librería?

Haz clic en el botón para acceder a la práctica.

Tu trabajo final ya debe de estar tomando forma y con estos nuevos conocimientos ya puedes aplicar animaciones complejas o personalizar el website de tu proyecto final. Tus habilidades con CSS deben de poder crear un layout limpio y fácil de navegar. Revisa con el facilitador tu proyecto, busca áreas de oportunidad y resuélvelas antes de hacer la entrega final.

¡No olvides que la investigación y el autoaprendizaje tiene mucho que ver con tu proyecto final!

Asegúrate de poder:

• Usar operadores para asignar y evaluar expresiones.
• Crear interactividad y responder de acuerdo a las acciones de los usuarios.
• Utilizar GSAP de forma básica.

• Duckett, J. (2014). JavaScript and JQuery: Interactive Front-End Web Development. USA: Wiley.
• Niederst Robbins, J. (2012). Learning Web Design. A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics. USA: O'Reilly Media.