INTRODUCCIÓN A
JAVASCRIPT
INTRODUCCIÓN A JAVASCRIPT
¿Qué es JavaScript?
• JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas
web dinámicas, orientado a entornos web.
• Fue diseñado para darle interactividad a las páginas HTML (estáticas).
• Una página web dinámica es aquella que incorpora efectos como texto que aparece y
desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes
de aviso al usuario.
• JavaScript ofrece a los diseñadores HTML una herramienta de programación con una sintaxis
simple para generar interacciones con estas páginas estáticas.
INTRODUCCIÓN A JAVASCRIPT
Historia y motivaciones
• A principios de los años 90, los usuarios se conectaban a Internet con módems a una
velocidad reducida. En esa época las páginas web comenzaban a incluir formularios
complejos.
• Con una velocidad de navegación tan lenta, surgió la necesidad de un lenguaje de
programación que se ejecutara en el navegador del usuario.
• Se estandariza como ECMAScript en 1997.
INTRODUCCIÓN A JAVASCRIPT
Como funciona
• Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es
necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos
con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de
procesos intermedios.
• JavaScript es un lenguaje de scripting como PHP, por ejemplo, solo que JavaScript se ejecuta
en la parte del cliente (navegador Web) y PHP en la parte servidora (servidor Web).
• JavaScript no es JAVA. Se le puso ese nombre por estar de moda JAVA en ese momento. Son
lenguajes conceptualmente diferentes y diseñados para resolver diferentes tipos de
problemas.
• Es un lenguaje simple pero complicado de depurar, de encontrar errores.
¿QUE SE PUEDE HACER?
• JavaScript puede leer y escribir elementos HTML
- Una sentencia [Link](“<h1>” + nombre + “</h1”) escribe un título en la página web.
• JavaScript permite reaccionar cuando ocurre un evento.
- Permite ejecutar código cuando algo ocurre, como por ejemplo, que alguien haga clic en un
botón o termine de cargar la página web, aplicando esa interactividad.
DONDE AÑADIR CÓDIGO JAVASCRIPT
En el propio archivo HTML
• Se puede colocar entre las etiquetas <head> y </head>.
• También se puede incluir sentencias JavaScript en otras partes del documento:
▪ Entre las etiquetas <script> y </script>.
▪ En funciones como onClick, onChange, etc., que invocan un script.
EJEMPLO HOLA MUNDO
<html>
<head>
<title>Ejemplo de código JavaScript en el propio documento
</title>
<script type="text/javascript">
alert(“Hola mundo");
</script>
</head>
<body>
<p>Un párrafo de texto</p>
</body>
</html>
DONDE AÑADIR CÓDIGO JAVASCRIPT
Opción recomendada
• La opción que se recomienda es escribir todo el código JavaScript en archivos externos. La
forma de realizarlo es la siguiente:
▪ Guardar el código JavaScript en un archivo con extensión .js (el archivo externo js no
puede contener la etiqueta <script>).
▪ Para utilizarlo se procede de esta forma:
<head>
<script type=“text/javascript” src=“[Link]”></script>
</head>
<body>…</body>
OTRAS CARACTERÍSTICAS
• JavaScript es case sensitive, es decir, es sensible a mayúsculas/minúsculas. Por ejemplo, var
variable es diferente a var Variable.
Ejemplo:
var variable1 = 1;
var Variable1 = 2;
// variable1 != Variable1
• Está basado en objetos pero no es un lenguaje de POO.
• No es un lenguaje de programación completo, es decir, no se puede hacer programas solo con
JavaScript.
OTRAS CARACTERÍSTICAS
• Incluye comentarios: //una sola línea de comentario. /**/ para varias líneas de comentario.
• Incluye variables que no son tipadas. Las variables deben empezar por una letra o guión bajo.
Se pueden declarar con la palabra reservada var o simplemente asignándole un valor. Además,
se pueden redeclarar.
Por ejemplo
variable1 = 5;
var variable1;
alert(‘El valor de la variable1 = ‘+variable1); //El valor de la variable1 es 5
• Solo habrá errores en operaciones de variables de tipos diferentes.
OTRAS CARACTERÍSTICAS
• Operadores aritméticos: como en C.
• + se utiliza también para concatenar cadenas (en PHP es con el “.”).
Var1 = “que linda “;
Var2 = “flor”;
Var3 = Var1 + Var2; //Var3 tiene el valor “que linda flor”
• Comparadores (operadores lógicos): como en C.
• Se utilizan funciones para agrupar el código y ser llamado desde eventos y llamadas a
funciones. Incluyen parámetros. Return para especificar el valor devuelto.
• Sentencias de control habituales: if – else, switch, for, while, for in
EVENTOS
Los eventos son acciones que pueden ser detectados por JavaScript
• Eventos de teclado:
▪ Onkeydown. Tecla presionada
▪ Onkeypress. Tecla presionada y soltada.
▪ Onkeyup. Tecla soltada.
• Eventos de ratón.
▪ Onclick. Clic con el ratón.
▪ Ondblclick. Doble clic con el ratón.
▪ Onmousemove. Cuando el puntero del ratón se mueve.
▪ Onmouseout. Cuando el puntero sale del área del elemento.
• Eventos en <form>
▪ Onsubmit. Cuando se pulsa el botón submit del formulario.
• Eventos de <body>
▪ Onload. Cuando la página es cargada
DOM (Document Object Model)
¿Para que se utiliza DOM?
• Con lo visto hasta ahora podemos añadir interactividad al contenido o el estilo de una página
HTML mostrando ventanas con texto, reaccionando a eventos, cambiando colores, etc.
• Pero el verdadero dinamismo se consigue cambiando elementos de la propia web o incluso
añadiendo elementos nuevos como un párrafo, enlaces, etc.
• HTML DOM es el acrónimo modelo de objetos de documento y JavaScript puede acceder y
cambiar todos los elementos de un documento HTML. Es un estándar.
• Según el W3C el Modelo de Objetos del Documento es una interfaz de programación de
aplicaciones (API) para documentos válidos HTML y bien construidos XML. Define la estructura
lógica de los documentos y el modo en que se accede y manipula.
DOM (Document Object Model)
¿Qué podemos hacer?
• Con el modelo de objetos, JavaScript obtiene toda la potencia que necesita para crear HTML
dinámico. Se puede hacer todo lo siguiente:
▪ Cambiar todos los elementos HTML de la página.
▪ Cambiar todos los atributos HTML de la página.
▪ Cambiar todos los estilos CSS de la página.
▪ Eliminar todos los elementos y atributos HTML.
▪ Añadir nuevos elementos y atributos HMTML.
▪ Reaccionar a todos los eventos HTML de la página.
▪ Crear nuevos eventos HTML en la página.
DOM (Document Object Model)
Árbol de objetos
• Cuando se carga la página web el navegador automáticamente crea el Modelo de Objetos del
Documento de la página.
• El HTML DOM se construye como un árbol de objetos con estructura jerárquica.
DOM (Document Object Model)
Árbol de objetos
• Cada uno de los recuadros es un nodo. Los nodos son elementos básicos de la estructura del DOM.
• Cada nodo tiene un padre y puede tener 1 o varios hijos, o ninguno, siendo nodo terminal.
• Todos los nodos cuelgan del nodo principal, el nodo Document. De este salen head y body.
• Existen 12 tipos de nodos aunque en HTML solo se usan 5 (el resto en XML).
▪ Document: nodo raíz del que derivan todos los demás.
▪ Element: cada una de las etiquetas HTML. Es el único
nodo que puede contener atributos y del que pueden
derivar otros nodos.
▪ Attr: cada atributo de una etiqueta genera un nodo Attr,
el cual contiene también su valor. Es hijo del nodo
element que lo contiene.
▪ Text: contiene el texto encerrado por una etiqueta HTML
(hijo del nodo Element).
▪ Comment: los comentarios también generan sus nodos
DOM (Document Object Model)
Utilización de DOM en una página Web
• El DOM es un estándar y por tanto se deben cumplir las reglas establecidas de forma estricta.
• Por ejemplo, el DOCTYPE, es decir, la versión de XHTML que se usará para validar el
documento. Es un componente clave de las páginas web que siguen los estándares.
• Además, es importante utilizar correctamente las etiquetas de cierre, la anidación de
elementos, etc.
• En caso contrario se pueden generar errores inesperados en el navegador.
DOM (Document Object Model)
Acceso a los elementos
Se puede acceder a todos los elementos de una página de forma sencilla con algunos métodos y
propiedades.
• getElementById – permite un acceso directo a cualquier elemento tan solo conociendo el
valor de su atributo id:
<p> <a id="contacto" href="[Link]">Contáctenos</a> </p>
var elementoContacto = [Link](“contacto”);
Ahora el valor de la variable elementoContacto está referida al elemento a y cualquier operación
sobre la misma afectará al hiperenlace.
DOM (Document Object Model)
Acceso a los elementos
Con getElementById accedemos a un elemento específico pero en ocasiones queremos trabajar
sobre un grupo de elementos.
• getElementsByTagName – retorna todos los elementos de un mismo tipo en un array.
<ul>
<li><a href="[Link]">Editorial</a></li>
<li><a href="[Link]">Autores</a></li>
<li><a href="[Link]">Noticias</a></li>
<li><a href="[Link]">Contátenos</a></li>
</ul>
Var hipervínculos = [Link](“a”);
Hipervinculos[0]
DOM (Document Object Model)
Otras formas de acceder a elementos
• Al body de un documento se puede acceder con [Link]
• Al conjunto de todos los formularios de un documento se puede acceder con
[Link], y las imágenes con [Link]
• Aunque la mayoría de navegadores soportan estos métodos es recomendable usar
getElementsByTagName:
var body = [Link](“body”)[0];
DOM (Document Object Model)
Creación de elementos y textos
• Para crear nodos con elementos y textos utilizamos los siguientes métodos:
• createElement(Tipo cadena): crea un nuevo elemento del tipo especificado y devuelve una
referencia a dicho elemento.
var nuevoEnlace = [Link](“a”);
• El texto que va dentro del elemento [a] es un nodo de texto hijo, por lo que se debe crear por
separado.
var nodoTexto = [Link](“Ejemplo”);
Se puede insertar un elemento o texto (un nodo) como último hijo de un nodo ya existente con
appendChild. De esa manera coloca el nuevo nodo después de todos los nodos del hijo.
[Link](nodoTexto);
DOM (Document Object Model)
Creación de elementos y textos
• Siguiendo con el ejemplo anterior para poner un elemento en el body de la página:
var cuerpoRef = [Link]("body")[0];
[Link](nuevoEnlace);
• Otras formas de añadir nodos es insertar el nodo antes de otro nodo, con insertBefore (de su
elemento padre), y el reemplazo de nodo se ejecuta con el método replaceChild de su
elemento padre.
DOM (Document Object Model)
Ejemplo insertBefore y replaceChild
<p id="mwEnlaces">
<a id="editor" href="[Link]">Editorial</a>
</p>
Luego el nuevo enlace será insertado antes de enlace ya existente llamando el método
insertBefore desde el nodo padre (párrafo):
var anclaTexto = [Link]("Actualidad");
var nuevoAncla = [Link]("a");
[Link](anclaTexto);
var anclaExistente = [Link]("editor");
var padre = [Link];
var nuevoHijo = [Link](nuevoAncla, anclaExistente);
DOM (Document Object Model)
Ejemplo insertBefore y replaceChild
El HTML resultante quedaría así:
<p id="mwEnlaces">
<a> Actualidad </a>
<a id="editor" href="[Link]">Editorial</a>
</p>
Si usáramos replaceChild:
Var nuevoHijo = [Link](nuevoAncla, anclaExistente);
<p id="mwEnlaces">
<a> Actualidad </a>
</p>
DOM (Document Object Model)
Usando innerHTML
• En aplicaciones complejas donde es necesario crear varios elementos a la vez, el código
JavaScript generado puede ser añadido recurriendo a la propiedad innerHTML.
• Por ejemplo, puede crearse fácilmente una tabla con múltiples celdas e insertarla luego en la
página con innerHTML:
var tabla = '<table border="0">’;
tabla += '<tr><td>Celda 1</td><td>Celda 2</td><td> Celda 3</td></tr>'; tabla +=
'</table>’;
[Link]("datos").innerHTML = tabla;
RemoveChild
El método removeChild permite eliminar nodos hijos a cualquier nodo con tan sólo pasarle las
referencias del nodo hijo a eliminar y su correspondiente padre: [Link](refHijo);
DOM (Document Object Model)
Lectura y escritura de los atributos de un elemento
• Los atributos de una etiqueta son traducidos por el navegador en propiedades de un objeto.
Dos métodos existen para leer y escribir los atributos de un elemento, getAttribute permite
leer el valor de un atributo mientras que setAttribute permite su escritura.
• Cada atributo posee una propiedad del DOM equivalente formándose con el mismo nombre
del atributo pero sin los guiones y con la primera letra de las palabras en mayúscula.
font-size → fontSize, Font-family → fontFamily → [Link] = ‘sans-serif’;
• En muchos casos es necesario aparecer y desaparecer un determinado elemento, para ello se
utiliza el atributo CSS display, por ejemplo, para desaparecer:
[Link] = 'none’;
• Luego para volverlo a mostrar se le asigna otro valor:
[Link] = 'inline';
EVENTOS
Programación basada en eventos
• Las aplicaciones web creadas con el lenguaje JavaScript pueden utilizar el modelo de
programación basada en eventos.
• Los scripts esperan a que el usuario haga algo (que pulse una tecla, que mueva el ratón, que
cierre la ventana del navegador), o que suceda algo como terminar de cargar la página.
• A continuación, el script responde a la acción del usuario normalmente procesando esa
información y generando un resultado.
• JavaScript define numerosos eventos que permiten una interacción completa entre el usuario
y las páginas/aplicaciones web. La pulsación de una tecla constituye un evento, así como
pinchar o mover el ratón, seleccionar un elemento de un formulario, redimensionar la
ventana del navegador, etc.
• JavaScript permite asignar una función a cada uno de los eventos y así ejecutar su función
asociada. Este tipo de funciones se denominan "event handlers" en inglés.
EVENTOS
Modelo básico de eventos
• Crear páginas y aplicaciones web siempre ha sido mucho más complejo de lo que debería
serlo debido a las incompatibilidades entre navegadores.
• Las principales incompatibilidades se producen en el lenguaje XHTML, en el soporte de hojas
de estilos CSS y sobre todo, en la implementación de JavaScript.
• La incompatibilidad más importante se da precisamente en el modelo de eventos del
navegador. Así, existen hasta tres modelos diferentes para manejar los eventos dependiendo
del navegador en el que se ejecute la aplicación.
▪ Modelo básico de eventos.
▪ Modelo de eventos estándar.
▪ Modelo de eventos de Internet Explorer.
EVENTOS
Modelo básico de eventos
Modelo básico de eventos: Este modelo simple de eventos se introdujo para la versión 4 del
estándar HTML y se considera parte del nivel más básico de DOM. Aunque sus características son
limitadas, es el único modelo que es compatible en todos los navegadores y por tanto, el único
que permite crear aplicaciones que funcionan de la misma manera en todos los navegadores.
Modelo de eventos estándar: Las versiones más avanzadas del estándar DOM (DOM nivel 2)
definen un modelo de eventos completamente nuevo y mucho más poderoso que el original.
Todos los navegadores modernos lo incluyen, salvo Internet Explorer.
Modelo de eventos de Internet Explorer: Internet Explorer utiliza su propio modelo de eventos,
que es similar pero incompatible con el modelo estándar. Se utilizó por primera vez en Internet
Explorer 4 y Microsoft decidió seguir utilizándolo en el resto de versiones, a pesar de que la
empresa había participado en la creación del estándar de DOM que define el modelo de eventos
estándar.
EVENTOS
Modelo básico de eventos
• En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles eventos
que se le pueden asignar.
• Un mismo tipo de evento (por ejemplo, pinchar el botón izquierdo del ratón) puede estar
definido para varios elementos XHTML diferentes y un mismo elemento XHTML puede tener
asociados varios eventos diferentes.
• El nombre de cada evento se construye mediante el prefijo on seguido del nombre en inglés
de la acción asociada al evento. Así, el evento de pinchar un elemento con el ratón se
denomina onclick y mover el ratón onmousemove. Tabla eventos.
• Los eventos más utilizados en las aplicaciones web tradicionales son onload (esperar que
cargue la página), onclick, onmouseover, onmouseout para controlar el ratón, u onsubmit para
controlar el envío de formularios.
EVENTOS
Modelo básico de eventos
• Algunos eventos de la tabla anterior permiten evitar la acción por defecto de ese evento. Más
adelante se muestra en detalle este comportamiento, que puede resultar muy útil en algunas
técnicas de programación.
• Las acciones típicas que realiza un usuario en una página web pueden dar lugar a una sucesión
de eventos. Al pulsar, por ejemplo, sobre un botón de tipo <input type=submit> se
desencadenan los eventos onmousedown, onclick, onmouseup, y onsubmit consecutivamente.
Manejadores de eventos
• Para que los eventos resulten útiles, se deben asociar funciones o código JavaScript a cada
evento.
• De esta forma, cuando se produce un evento se ejecuta el código indicado, por lo que la
aplicación puede responder ante cualquier evento que se produzca durante su ejecución.
EVENTOS
Manejadores de eventos
• Como JavaScript es un lenguaje muy flexible, existen varias formas diferentes de indicar los
manejadores:
▪ Manejadores como atributos de los elementos XHTML: este es un método poco
recomendado. Se incluye el código JavaScript en un atributo del elemento XHTML:
<input type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />
▪ Manejadores como funciones JavaScript externas: en este caso, el código se agrupa en
una función que se llama desde el atributo:
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />
▪ Manejadores "semánticos“: los dos métodos anteriores tienen el inconveniente de
mezclar el código JavaScript con el XHTML de la página. Las buenas prácticas
recomiendan separar este código en un archivo diferenciado.
EVENTOS
Manejadores de eventos semánticos
• Afortunadamente, existe un método alternativo para definir los manejadores de eventos de
JavaScript. Esta técnica es una evolución del método de las funciones externas, ya que se basa
en utilizar las propiedades DOM de los elementos XHTML para asignar todas las funciones
externas que actúan de manejadores de eventos. Así, el ejemplo anterior:
// Función externa
function muestraMensaje() { alert('Gracias por pinchar'); }
// Asignar la función externa al elemento
[Link]("pinchable").onclick = muestraMensaje;
// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y verás" />
➢ Solo hay que tener en cuenta que debemos esperar a que se cargue totalmente la página
para utilizar las funciones DOM.
EVENTOS
Obteniendo información del evento (objeto event)
• Normalmente, los manejadores de eventos requieren información adicional para procesar sus
tareas. Si una función por ejemplo se encarga de procesar el evento onclick, quizás necesite
saber en que posición estaba el ratón en el momento de pinchar el botón.
• No obstante, el caso más habitual en el que es necesario conocer información adicional sobre
el evento es el de los eventos asociados al teclado. Normalmente, es muy importante conocer
la tecla que se ha pulsado, por ejemplo para diferenciar las teclas normales de las teclas
especiales (ENTER, tabulador, Alt, Ctrl., etc.).
• JavaScript permite obtener información sobre el ratón y el teclado mediante un objeto
especial llamado event. Desafortunadamente, los diferentes navegadores presentan
diferencias muy notables en el tratamiento de la información sobre los eventos.
[Link]
objeto-event
FORMULARIOS
• La programación de aplicaciones que contienen formularios web siempre ha sido una de las
tareas fundamentales de JavaScript y a pesar de los avances, sigue siendo un requerimiento
imprescindible de cualquier programador de JavaScript.
• JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de
aplicaciones que manejan formularios.
• En primer lugar, cuando se carga una página web, el navegador crea automáticamente un
array llamado forms y que contiene la referencia a todos los formularios de la página.
• Para acceder al array forms, se utiliza el objeto document, por lo que [Link] es el
array que contiene todos los formularios de la página. Como se trata de un array, el acceso a
cada formulario se realiza con la misma sintaxis de los arrays. La siguiente instrucción accede
al primer formulario de la página:
[Link][0]; [Link][0].elements[0];
FORMULARIOS
Acceso a formularios
• En un entorno tan cambiante como el diseño web, es muy difícil confiar en que el orden de los
formularios se mantenga estable en una página web. Por este motivo, siempre debería
evitarse el acceso a los formularios de una página mediante el array [Link].
• Lo más eficiente es acceder a los formularios con el atributo name:
var formularioPrincipal = [Link];
var formularioSecundario = document.otro_formulario;
<form name="formulario" >
...
</form>
<form name="otro_formulario" >
...
</form>
FORMULARIOS
Acceso a formularios
• Los elementos de los formularios también se pueden acceder directamente usando su
atributo name:
var formularioPrincipal = [Link];
var primerElemento = [Link];
<form name="formulario">
<input type="text" name="elemento" />
</form>
• También podemos acceder a los formularios y a sus elementos utilizando las funciones DOM
de acceso a los nodos.
var formularioPrincipal = [Link]("formulario");
var primerElemento = [Link]("elemento");
FORMULARIOS
Propiedades de los elementos de los formularios
• Cada elemento dispone de las siguientes propiedades útiles para el desarrollo de las
aplicaciones:
▪ type: indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text,
button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas
desplegables normales (elemento <select>) su valor es select-one, lo que permite
diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo
es select-multiple. Por último, en los elementos de tipo <textarea>, el valor de type es
textarea.
▪ form: es una referencia directa al formulario al que pertenece el elemento. Así, para
acceder al formulario de un elemento, se puede utilizar
[Link]("id_del_elemento").form
FORMULARIOS
Propiedades de los elementos de los formularios
• Cada elemento dispone de las siguientes propiedades útiles para el desarrollo de las
aplicaciones:
▪ name: obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor,
por lo que no se puede modificar.
▪ value: permite leer y modificar el valor del atributo value de XHTML. Para los campos de
texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario.
FORMULARIOS
Eventos más utilizados en los formularios
• Por último, los eventos más utilizados en el manejo de los formularios son los siguientes:
▪ onclick: evento que se produce cuando se pincha con el ratón sobre un elemento.
Normalmente se utiliza con cualquiera de los tipos de botones que permite definir XHTML
(<input type="button">, <input type="submit">, <input type="image">).
▪ onchange: evento que se produce cuando el usuario cambia el valor de un elemento de
texto (<input type="text"> o <textarea>). También se produce cuando el usuario
selecciona una opción en una lista desplegable (<select>). Sin embargo, el evento sólo se
produce si después de realizar el cambio, el usuario pasa al siguiente campo del
formulario, lo que técnicamente se conoce como que "el otro campo de formulario ha
perdido el foco".
FORMULARIOS
Eventos más utilizados en los formularios
• Por último, los eventos más utilizados en el manejo de los formularios son los siguientes:
▪ onfocus: evento que se produce cuando el usuario selecciona un elemento del
formulario.
▪ onblur: evento complementario de onfocus, ya que se produce cuando el usuario ha
deseleccionado un elemento por haber seleccionado otro elemento del formulario.
Técnicamente, se dice que el elemento anterior "ha perdido el foco".
FORMULARIOS
Utilidades
• La mayoría de técnicas JavaScript relacionadas con los formularios (validación) requieren leer
y/o modificar el valor de los campos del formulario.
• En el siguiente enlace se muestra cómo obtener el valor de los campos de formulario más
utilizados:
ENLACE
FORMULARIOS
Validación
• Antes de enviar un formulario al servidor, se recomienda validar mediante JavaScript los datos
insertados por el usuario. De esta forma, si el usuario ha cometido algún error al rellenar el
formulario, se le puede notificar de forma instantánea, sin necesidad de esperar la respuesta
del servidor.
• Notificar los errores de forma inmediata mediante JavaScript mejora la satisfacción del
usuario con la aplicación y ayuda a reducir la carga de procesamiento en el servidor.
• Normalmente, la validación de un formulario consiste en llamar a una función de validación
cuando el usuario pulsa sobre el botón de envío del formulario. En esta función, se
comprueban si los valores que ha introducido el usuario cumplen las restricciones impuestas
por la aplicación.
FORMULARIOS
Validación
• Aunque existen tantas posibles comprobaciones como elementos de formulario diferentes,
algunas comprobaciones son muy habituales: que se rellene un campo obligatorio, que se
seleccione el valor de una lista desplegable, que la dirección de email indicada sea correcta,
que la fecha introducida sea lógica, que se haya introducido un número donde así se requiere,
etc.
ENLACE
UTILIDADES
Introducción
• Además de los formularios y de todas las funciones y utilidades de JavaScript que se han visto,
existen muchas otras utilidades que es necesario conocer para desarrollar aplicaciones
completas.
• Como no es posible estudiar todas las herramientas que se pueden crear con JavaScript, a
continuación se muestran algunas de las utilidades básicas más comunes.
[Link]
[Link]
[Link]
[Link]
[Link]
UTILIDADES
Varios ejemplos
• Relojes, contadores e intervalos de tiempo
• Calendario
• Tooltip
• Menú desplegable
• Galerías de imágenes