Tema 4 - JavaScript Aplicaciones Web

Tema 4 - JavaScript
1. Funciones
1.1. Concepto
- Una función es un conjunto de instrucciones agrupadas que realizan una funcionalidad determinada.
- En ocasiones, un conjunto de instrucciones se repite varias veces en nuestro programa.
- Permiten agrupar ese conjunto de instrucciones, escribirlo una vez y reutilizarlo cuantas veces se necesite.
- Las funciones facilitan la lectura del código.
- Para utilizar funciones necesitamos:
1. Definir la función, darle un nombre e indicar las instrucciones que la componen.
2. Cuando necesitamos hacer uso de la función, solicitaremos que se ejecute usando el nombre de la función.
1.2. Definición de una función
- Para crear una función utilizaremos la palabra clave “function” seguida del nombre de la función y los paréntesis ().
- Entre los paréntesis podremos indicar parámetros de entrada.
- Las instrucciones que la componen se incluyen entre llaves {}
- Es una buena práctica de programación incluir las funciones en el <head> o en un fichero aparte.
- Ejemplo:
1.3. Uso de una función

- Para utilizar una función (“llamar una función” o “invocar una función”) debemos utilizar el nombre de la misma.
- Una función puede ser utilizada si antes ha sido definida.
- Deberemos incluir los paréntesis cuando queramos utilizar la función.
- Podemos utilizar una función cuantas veces lo necesitemos.
- Ejemplo:
1.4. Parámetro de salida
- Las variables que definamos dentro de una función se eliminan cuando termina la función.
- En ocasiones necesitamos almacenar una variable que contenga información disponible fuera de una función.
- Para ello, debemos declarar la variable fuera de la función, y hacer uso de ella siempre que lo necesitemos.
- Ejemplo:
- En ocasiones, las funciones necesitan datos adicionales para ejecutar su funcionalidad.
- A los datos que necesitan las funciones se les denomina “argumentos” o “parámetros”.
- Si los datos adicionales se necesitan para realizar la funcionalidad, se les denomina “parámetros de entrada”.
- Si los datos adicionales se necesitan para que el programa que ha llamado a la función continúe la ejecución, se les
denomina “parámetros de salida”.
- Ejemplo:
1.5. Parámetros de entrada
- Si una función necesita parámetros de entrada, se debe:
- Indicar los parámetros necesarios entre los paréntesis de la definición de una función.
- Incluir los datos en la llamada a la función.
- Ejemplo de definición con parámetros:
- Para realizar una calculadora, se necesitan dos operandos (numero1 y numero2).
- Ejemplo de uso de una función con parámetros:
- La función realiza una funcionalidad cuyo resultado debe ser conocido por el código que lo ha llamado.
- En este caso, se debe pasar un dato desde la función, al código que ha llamado a la función.
- La palabra clave “return” permite devolver un dato al código que ha llamado a la función.
2. Eventos
2.1. Concepto
- Las aplicaciones web creadas con el lenguaje utilizar el modelo de programación basada en eventos.
- En este tipo de programación, los scripts se dedican a esperar que el usuario “haga algo” (que pulse una tecla...). A
continuación, el script responde a la acción del usuario procesando esa información y generando un resultado.
- Los eventos hacen posible que los usuarios transmitan información a los programas. JavaScript define numerosos
eventos que permiten una interacción completa entre el usuarios y las páginas/aplicaciones web.
- JavaScript permite asignar una función a cada uno de los eventos.
- De esta forma, cuando se produce cualquier evento, JavaScript ejecuta su función asociada.
- Este tipo de funciones se denominan “event handlers” en inglés (manejadores de eventos).

2.2. Tipos de eventos
- El nombre del evento se construye del prefijo “on” seguido del nombre en inglés de la acción asociada al evento.
2.3. Manejadores de eventos

- Un evento de JavaScript por sí mismo carece de utilidad. 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.
- Las funciones o código JavaScript que se definen para cada evento se denominan “manejador de eventos” y como
Javascript es un lenguaje muy flexible, existen varias formas diferentes de indicador los manejadores:
- Manejadores como atributos
- Manejadores como funciones
- Manejadores semánticos
2.3.1. Manejadores de eventos – Manejadores como atributos
- El código que se debe ejecutar se incluye en un atributo del propio elemento HTML.
- Se trata del método más sencillo pero menos profesional.
2.3.2. Manejadores de eventos – Manejadores como funciones JavaScript

- Consiste en agrupar las instrucciones en una función.
- En el atributo del documento HTML se incluye el nombre de la función, para indicar que es la función que se debe
ejecutar cuando se produzca el evento.
3. DOM
3.1. Árbol y tipos de nodos
- La creación del Document Object Model o DOM es una de las innovaciones que más ha influido en el desarrollo de
las páginas web dinámicas y de las aplicaciones web más complejas.
- DOM permite a los programadores web acceder y manipular las páginas HTML como si fueran documentos XML.
- Una de las tareas más habituales en la programación de aplicaciones web con JavaScript consiste en la
manipulación de las páginas web.
- Con la manipulación de una web con JavaScript se puede:
- Obtener el valor almacenado en algunos elementos (los elementos de un formulario).
- Crear un elemento (párrafos, capas) de forma dinámica y añadirlo a una página.
- Aplicar la animación de un elemento (que aparezca/desaparezca, que se desplace).
- Todas estas tareas son habituales y sencillas de realizar gracias a DOM.
- Para poder utilizar las utilidades de DOM, es necesario “transformar” la página original:
- Las páginas HTML normales son una sucesión de caracteres, por lo que son difíciles de manipular.
- Los navegadores web transforman las páginas web en una estructura más eficiente de manipular.
- La transformación la realizan los navegadores de forma automática e interna.
- DOM transforma los documentos en un conjunto de nodos interconectados, que representan los contenidos de las
páginas web y sus relaciones.
- Por su aspecto, la unión de todos los nodos se llama “árbol de nodos”.
- Ejemplo:
- La raíz del árbol DOM siempre es la misma y se le llama “Documento” (document).
- A partir de ese nodo raíz, cada etiqueta HTML se transforma en un nodo de tipo “Elemento”.
- La conversión es jerárquica: del nodo raíz sólo se obtienen los nodos HEAD y BODY.
- A partir de allí, cada nodo depende de su nodo anterior, al que se le llama “etiqueta padre”.
- La transformación de las etiquetas habituales genera dos nodos: uno de tipo “etiqueta” (la etiqueta HTML) y otro
de tipo texto (el texto encerrado en la etiqueta HTML).
3.2. Acceso directo a nodos
- DOM proporciona dos métodos para acceder a un nodo: acceso directo o acceso a través de sus nodos padre.
- Las funciones que proporciona DOM para acceder a un nodo a través de sus nodos padre consisten en acceder al
nodo raíz de la página y después a sus nodos hijos y así sucesivamente hasta el nodo buscado.
- Estudiaremos algunas funciones para acceder directamente a los nodos.
3.2.1. getElementsByTagName()
- Permite obtener los elementos cuya etiqueta sea la pasada como parámetro.
- El valor “document” indica el elemento a partir del cual se realiza la búsqueda (toda la página).
- El valor que devuelve la función es un vector de todos los nodos DOM que cumplen la condición.
3.2.2. getElementByld()
- Permite obtener el elemento HTML cuyo atributo “id” coincide con el parámetro indicado en la función.
- Como el atributo id debe ser único para cada elemento, la función devuelve sólo el elemento buscado.
3.3. Creación y eliminación de nodos

- Crear y añadir a la página un nuevo elemento HTML sencillo consta de cuatro pasos:
1. Crear un nodo de tipo Element con la etiqueta deseada (función createElement).
2. Crear un nodo de tipo Text con el contenido (función createTextNode).
3. Añadir el elemento Text como hijo de Element (función appendChild).
4. Añadir el nodo Element como hijo del elemento al que queramos añadirlo (función appendChild).
- Para eliminar un nodo se deben realizar los siguientes pasos:
1. Obtener el nodo que se desea eliminar (función getElementById).
2. Obtener el padre del nodo que se desea eliminar (propiedad parentNode).
3. Eliminar el nodo (función removeChild).
3.4. Acceso directo a atributos HTML

- Los atributos HTML de los elementos de la página se transforman en propiedades de los nodos.
- Para acceder a su valor, se indica el nombre del atributo HTML detrás del nombre del nodo:
Los valores de los atributos se pueden cambiar accediendo al atributo.
- El valor del texto HTML se puede obtener/cambiar con el atributo “innerHTML”.
3.4.1. Acceso directo a propiedades CSS

- Para obtener el valor de cualquier propiedad CSS de un nodo se debe utilizar el atributo style.
- Se puede modificar el valor de cualquier propiedad CSS, indicando el nombre de la propiedad después de style.
- Si una propiedad tiene nombre compuesto, se eliminan los guiones y se juntan las letras escribiendo en
mayúscula la primera letra de cada palabra (salvo la primera).
4. Formularios
4.1. Acceso a un formulario
- Accedemos a los datos de un formulario mediante su nombre (atributo “name”) o su identificador (atributo “id”):
4.2. Propiedades básicas de los formularios

- Destacamos las siguientes propiedades de los elementos de un formulario:
- type: Indica tipo de elemento (text, button, checkbox, textarea). Para listas desplegables, el valor es “select-one”.
- value: Permite obtener y modificar el valor del atributo value.
- Para los campos de texto (<input type=”text” y <textarea>) obtiene el texto que ha escrito el usuario.
- Para los botones obtiene el texto que se muestra en el botón.
- Para los elementos checkbox y radiobutton no es muy útil.
- Los eventos más utilizados en los formularios son onclick, onchange, onfocurs y onblur.
4.3. Valores en campos de formularios

- Cuadros de texto: La propiedad “value” permite obtener el valor almacenado en un cuadro de texto y modificarlo.
- Ejemplo: (se muestra la etiqueta HTML y la instrucción JavaScript que obtiene el valor):
- Radiobutton: En este caso se desea saber cuál de los radio buttons ha sido seleccionado.
- Se debe acceder a los botones radio utilizando su nombre, e iterar hasta encontrar el seleccionado:
- Checkbox:
- Los elementos de este tipo son similares a radiobutton, salvo que se debe comprobar cada checkbox por separado.
- Select
- Lo que quiere es obtener el valor del atributo value de la opción (<option>) seleccionada por el usuario. Obtener
este valor no es sencillo, ya que se deben realizar una serie de pasos.
- Para obtener el valor seleccionado, deben utilizarse las siguientes propiedades:
- options, es un array creado automáticamente por el navegador para cada lista desplegable y que contiene la
referencia a todas las opciones de esa lista. La primera opción de una lista se puede obtener mediante
document.getElementById(“id_de_la_lista”).options[0]
- selectedIndex, cuando el usuario selecciona una opción, el navegador actualiza su valor guardando el índice de la
opción seleccionada. El índice hace referencia al array options creado por el navegador para cada lista.
4.4. Validación
- La principal utilidad de JavaScript reside en validar los formularios antes de enviarlos al servidor.
- De esta forma se evitan peticiones indeseadas, que contienen errores.
- Se debe implementar una función que realiza la validación.
- El código que se utiliza para incluir en el formulario es:
- El código de validación tiene el siguiente esquema:

- Ejemplo:

Tema 4 - JavaScript Aplicaciones Web

Cargado por

Copyright:

Formatos disponibles

Tema 4 - JavaScript Aplicaciones Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 4 - JavaScript Aplicaciones Web

Cargado por

Copyright:

Formatos disponibles

Tema 4 - JavaScript

- En ocasiones, un conjunto de instrucciones se repite varias veces en nuestro programa.

- Las funciones facilitan la lectura del código.

- Para utilizar funciones necesitamos:

1. Definir la función, darle un nombre e indicar las instrucciones que la componen.

1.2. Definición de una función

- Entre los paréntesis podremos indicar parámetros de entrada.

- Las instrucciones que la componen se incluyen entre llaves {}

1.3. Uso de una función

- Una función puede ser utilizada si antes ha sido definida.

- Deberemos incluir los paréntesis cuando queramos utilizar la función.

- Podemos utilizar una función cuantas veces lo necesitemos.

- En ocasiones, las funciones necesitan datos adicionales para ejecutar su funcionalidad.

- Incluir los datos en la llamada a la función.

- Ejemplo de definición con parámetros:

- Para realizar una calculadora, se necesitan dos operandos (numero1 y numero2).

- Ejemplo de uso de una función con parámetros:

- JavaScript permite asignar una función a cada uno de los eventos.

- Este tipo de funciones se denominan “event handlers” en inglés (manejadores de eventos).

2.3. Manejadores de eventos

- De esta forma, cuando se produce un evento se ejecuta el código indicado.

- Manejadores como atributos

- Manejadores como funciones

2.3.1. Manejadores de eventos – Manejadores como atributos

- Se trata del método más sencillo pero menos profesional.

2.3.2. Manejadores de eventos – Manejadores como funciones JavaScript

- Con la manipulación de una web con JavaScript se puede:

- Obtener el valor almacenado en algunos elementos (los elementos de un formulario).

- Crear un elemento (párrafos, capas) de forma dinámica y añadirlo a una página.

- Aplicar la animación de un elemento (que aparezca/desaparezca, que se desplace).

- Todas estas tareas son habituales y sencillas de realizar gracias a DOM.

- La transformación la realizan los navegadores de forma automática e interna.

- Por su aspecto, la unión de todos los nodos se llama “árbol de nodos”.

- La raíz del árbol DOM siempre es la misma y se le llama “Documento” (document).

- Estudiaremos algunas funciones para acceder directamente a los nodos.

3.3. Creación y eliminación de nodos

1. Crear un nodo de tipo Element con la etiqueta deseada (función createElement).

2. Crear un nodo de tipo Text con el contenido (función createTextNode).

3. Añadir el elemento Text como hijo de Element (función appendChild).

1. Obtener el nodo que se desea eliminar (función getElementById).

2. Obtener el padre del nodo que se desea eliminar (propiedad parentNode).

3. Eliminar el nodo (función removeChild).

3.4. Acceso directo a atributos HTML

Los valores de los atributos se pueden cambiar accediendo al atributo.

- El valor del texto HTML se puede obtener/cambiar con el atributo “innerHTML”.

3.4.1. Acceso directo a propiedades CSS

4.2. Propiedades básicas de los formularios

- value: Permite obtener y modificar el valor del atributo value.

- Para los botones obtiene el texto que se muestra en el botón.

- Para los elementos checkbox y radiobutton no es muy útil.

4.3. Valores en campos de formularios

- Para obtener el valor seleccionado, deben utilizarse las siguientes propiedades:

- De esta forma se evitan peticiones indeseadas, que contienen errores.

- Se debe implementar una función que realiza la validación.

- El código que se utiliza para incluir en el formulario es:

- El código de validación tiene el siguiente esquema:

También podría gustarte