Interactividad en una pagina web: JavaScript y HTML.
En esta ultima unidad de Desarrollo de Paginas Web exploraremos un nuevo lenguaje de programación y pilar fundamental de esta rama: JavaScript
Javascript se convirtió en el lenguaje mas popular en el desarrollo web, con una curva de aprendizaje sencilla, se volverá parte de tus herramientas recurrentes en los proyectos. Este lenguaje se encargara de agregarle interactividad a tu pagina web y también nos permite manipular su contenido, estructura y estilo de la pagina en tiempo real. ¿Listo para explorar este lenguaje?
CREACION DE DOCUMENTO JAVASCRIPT.
Antes que nada, creemos otro documento HTML de ejemplo sin estilos. Iremos complementando esta plantilla en el proceso.
Volviendo al tema repetiremos los mismos pasos que hicimos con HTML y CSS. La forma que nos favorece es creando el documento individual en Sublime Text, seleccionando Javascript en la seccion de PlainText.
 |
| Selecciona esta version, las variantes se utilizan en temas más avanzados. |
Escribimos este código de ejemplo y guardamos el archivo en su respectiva carpeta js, en este caso el archivo fue nombrado como 'codigo1.js'.
Integrar JavaScript en una página web.
Volvemos al documento HTML y escribimos la etiqueta <script> con su apertura y cierre. Con el atributo src especificamos la ruta del archivo. Recuerda que los nombres deben ser en minúsculas.
La integración de JavaScript a tu pagina debe ser cuidadosa, se recomienda poner esta línea al final de todo el contenido del documento, ya que el navegador se encarga primero de cargar el contenido visual y después pasara a ejecutar la parte interactiva, de otra forma el código pasaría desapercibido y por ende no se ejecutará nada. Tras guardar los cambios obtenemos lo siguiente:
Es el código escrito en el documento JavaScript. Después de dar aceptar, el contenido esta cargado, de hecho cada vez que refresques la pagina, esta ventana aparecerá de nuevo. Este es nuestro primer paso con JavaScript.
COMPLICACIONES.
Antes de continuar es posible que se presenten errores al programar con este lenguaje, para ubicar estos errores es necesario abrir las herramientas de desarrollador del navegador. En Microsoft Edge, esta es la ruta más común.
Elige consola y dependiendo de la situación, aquí te dirá lo que sucede en tu archivo .js esta sección será nuestro sitio recurrente para hacer pruebas con JavaScript. La forma mas rápida de ir a esta ventana es Click Derecho > Inspeccionar.
MENSAJES CON JAVASCRIPT EN UNA PAGINA WEB.
Por ahora programamos una interacción desplegando una ventana de mensaje con window.alert(mensaje) o solamente alert(mensaje) como lo has visto.
window es un objeto del navegador.
OBJETO WINDOW.
Aprovechemos este objeto para explorar la sintaxis de JavaScript, si recuerdas las sintaxis de Java o C#, entonces ya debes estar familiarizado con las llaves{}, parentesis() y punto y coma ';' pues este lenguaje posee también estas particularidades, como todo lenguaje, tiene unas ligeras diferencias que se ejecutan desde el navegador como el alert.
Prompt
Funciona similar a un Console.Readline() de C# o un input de Python, básicamente es una ventana en la que puedes introducir datos. Hagamos unas instrucciones básicas de lógica. No olvides guardar los cambios.
 |
| Utilizamos las condicionales if. En JavaScript, las llaves son obligatorias a pesar de tener una sola línea de código. |
Tras introducir dos números, se realiza la comparación.
A veces JavaScript resulta ser un lenguaje 'delicado' en el que algunas líneas de código pueden pasar desapercibido sin mostrarte cual fue el error. Ya que el punto y coma es opcional en este lenguaje pero con tal de evitar este tipo de situaciones, se recomienda encarecidamente poner ';' al final de cada instrucción.
Objeto Location
location es una propiedad en el que podemos obtener datos sobre la URL de la pagina y redirigirnos a otra.
Cada una de estas propiedades se pueden invocar como location.[propiedad] por ejemplo, una de las propiedades mas recurrentes es la ruta del documento 'href'.
En la consola del navegador.
OBJETO DOCUMENT.
Document es una de las funciones mas importantes de JavaScript, del cual es uno de los componentes que conforma el DOM (Document Object Manipulation) en el que podremos manipular el documento en conjunto con HTML ya sea agregando, eliminando o aplicando cambios a nuestra pagina.
Encontrando elementos con DOCUMENT
document.getElementById() Buscamos un elemento por medio de su id. En la siguiente imagen, vamos a la pagina de ejemplo y agregamos un párrafo vacío con id = "abc".
Volviendo a nuestro código JS y declaramos una variable de texto. Nótese que al invocar la función especificamos el id en comillas dobles, y para poder modificar este párrafo añadimos la propiedad .innerHTML cuyo valor es el texto de la variable.
En el navegador, el párrafo que estaba vacío, ya fue modificado.
document.getElementsByClassName() La manera en hacer referencia a los objetos por su atributo 'class' es similar a lo visto en CSS, con esta función a diferencia del ID podemos extraer mas de un elemento según su clase especificada. Hagamos unos cambios en la pagina de ejemplo.
Los párrafos de texto les asignamos la clase lorem.
 |
| Como veras, los textos de los párrafos anteriores se juntaron en uno solo. |
document.getElementsByTagName() Funciona similar a ClassName, pero aqui, sencillamente podemos especificar un elemento HTML, por ejemplo, los parrafos <p>. Retiremos el atributo class y volvemos a nuestro código. Esta vez utilizando la función especificando el nombre de las etiqueta a modificar
 |
| También podemos aplicar estilos atraves del DOM, cambiamos la fuente y su color. |
Tal como en CSS hemos cambiado el estilo desde JavaScript.
OBJETO HISTORY.
El objeto history da acceso a métodos y propiedades que permiten avanzar y retroceder a través del historial del usuario, así como manipular el contenido del historial. Si escribimos en consola 'history', consultaremos las propiedades y funciones de este objeto.
EVENTOS DE JAVASCRIPT
Cuando JavaScript es utilizado en la pagina HTML el lenguaje puede 'activarse' en ciertos eventos. Algunos de ellos son:
- La pagina termino de cargar.
- El texto de entrada ha cambiado.
- Al darle click a un boton.
Algunos elementos HTML permiten el uso de JavaScript en ciertas circunstancias vamos a explorarlas.
EVENTO ONCLICK
Podemos desencadenar un evento solo dando click al elemento al que fue asignado este atributo, la etiqueta indicada a este evento es <button> o cualquier otra donde queramos. En los eventos podemos aprovechar la declaración de funciones, una practica recurrente con este lenguaje.
 |
| Declarando una función sin parámetros en JavaScript. |
En nuestro documento HTML escribimos un botón, cuyo evento onclick asignamos la funcion declarada tal como esta escrito en el archivo js.
Cada vez que demos click al botón la función JS se ejecutara.
EVENTO ONMOUSEOVER Y ONMOUSEOUT
Este evento se desencadena cuando el puntero del mouse esta sobre y fuera del elemento respectivamente. De esta manera también podemos aprovechar la declaración de funciones con parámetro con el siguiente ejemplo.
 |
Tomemos una imagen cualquiera y adjuntémosla a nuestra pagina, con la altura y anchura especificadas. |
 |
| En el HTML Complementamos los atributos de <img> con los eventos ya mencionados y escribimos las funciones con la palabra reservada this. Esto significa la imagen tomara el rol de x en los parametros de las funciones. Guardamos los cambios y como resultado obtenemos lo siguiente: |
 |
| En funcion onmouseout. |
 |
| En funcion onmouseover |
Al pasar el mouse sobre la imagen, esta aumenta su tamaño y una vez que salgamos del área, volverá a su forma original.
EVENTO ONCHANGE.
Este evento se desencadena cuando el valor de un elemento ha cambiado, es aplicado en todos los tipos de <input> incluyendo <select> y <textarea> por mencionar algunos. El siguiente ejemplo nos ayudará a comprender el uso de este evento.
 |
| Realizaremos un pequeño formulario en el que usaremos <input> en modo de texto, con el atributo onchange en el que escribiremos la función mensaje; value corresponde al contenido que lleva este input. |
 |
| En el código, mensaje recibe el texto como parámetro y nos mostrara lo escrito por medio de una ventana, Nota que en JavaScript existe el comparador lógico de igualdad estricta (===). |
Por cada vez que presionemos enter tras escribir en el input, recibiremos este mensaje, en caso de que el espacio cambie a vacio, nos dará otro aviso.
EVENTO ONFOCUS Y ONBLUR
onFocus se desencadena cuando el usuario interactúe con un elemento, comunmente es utilizado en <input> haciendo referencia a 'indroducir dato aqui'.
En el caso de onBlur es lo contrario, si interactúas con otro elemento que no sea dicho <input> el evento se desencadena como 'dejo de tener atención' y el código correspondiente se ejecutara. Realicemos el siguiente ejemplo.
 |
| Vamos a complementar el formulario hecho anteriormente, con un apartado dedicado a estos eventos colocaremos dos areas de texto input seguido de un texto lateral <span> que estará vacío. Los span tendrán el id aviso1 y aviso2. |
En la imagen veras que nos hemos adelantado en especificar los eventos onfocus y onblur, cuya funciones son ad1 y ad2 respectivamente, recibiendo el id de los span realizados.
 |
| En el codigo JS, las funciones reciben el parametro x que sera el id asignado previamente. Los textos escritos se colocara en el span. |
 |
| Tras guardar los cambios, en el primer campo de texto comenzamos a escribir y se ejecuta el evento onfocus en el '#aviso1' |
 |
| Cuando terminamos este campo se ejecuta el evento onblur y la informacion del span '#aviso1' cambia mientras ponemos atencion al campo '#aviso2' |
EVENTOS ONMOUSEMOVE, ONMOUSEUP Y ONMOUSEDOWN
Estos eventos son especiales en la parte interactiva de la pagina y pueden usarse dependiendo de las circunstancias en tu proyecto. Como ejemplo, realizaremos una lista no numerada con el siguiente contenido:
 |
En el código, nuestra intención es aplicarle estilos a los elementos de la lista cada vez que pasemos sobre ellos.    |
EVENTO ONRESIZE
Se desencadena cuando cambias el tamaño de un elemento, es aplicado en aquellos elementos en los que puedes modificar su tamaño por defecto, como Textarea o el mismo objeto window. Un ejemplo popular que se usa este evento es cambiando el tamaño de la ventana.
 |
| Para llevar a cabo este evento, colocamos el atributo onresize al body del documento y definimos un parrafo vacio con id tamaño. |
 |
| En el codigo, aprovechamos los atributos del objeto window para mostrar los valores del tamaño actual de la ventana. |
 |
| Si empezamos a reducir el tamaño de la ventana del navegador, se muestran los valores cambiantes de su ancho y alto, esto es por que el tamaño del propio <body> esta siendo alterado. |
VALIDACION DE FORMULARIOS
Llegamos a la ultima parte de la unidad 3 de JavaScript y el ultimo tema que cubre esta asignatura Desarrollo de paginas web. La validación de formularios conlleva a realizar acciones más avanzadas e importantes como hemos mencionado en la unidad 1.
Vamos a realizar un nuevo formulario de ejemplo que pida los siguientes datos:
Evento ONSUBMIT
OnSubmit es un evento especial aplicado en los formularios bajo la orden de un <input type="submit"> que es el boton de enviar del formulario.
En la cabecera de la etiqueta form colocamos el atributo name = 'form1' el cual tiene un significado auxiliar para el DOM de JavaScript. En el evento onsubmit especificamos la funcion a realizar, el return significa que esta funcion devolvera un valor.
Es importante que asignes el nombre en los demas campos antes de realizar lo siguiente en el codigo JavaScript.
La función validar toma los valores de cada campo del formulario, una actividad recurrente en la validación es asegurarse de que los campos importantes no estén vacíos por ejemplo, el nombre y la matricula, curiosamente, utilizamos el valor de la carrera para que el sitio te redirija a la pagina de la universidad en la sección de la carrera elegida.
Esta función retornara el valor false en caso de no introducir los datos correctos y por ende, no te redigira a la pagina indicada.
 |
| Los únicos datos a considerar serán el nombre y la matricula, mientras no estén vacíos, asumimos que los datos son procesados en una base de datos de la Universidad y si te identifican, te redirigirá a la pagina de tu carrera. |
 |
| Conociendo la URL de la sección de esta pagina, nos ha redirigido correctamente. |
Con este tema, hemos terminado la Unidad 3 y has logrado completar el temario de Desarrollo de Paginas Web ¡Felicidades!