Desarrollo de aplicaciones
web
Javascript
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Eventos
Temas a Tratar
• Introducción a JavaScript
• ¿Qué es JavaScript?
• Cómo incluir JavaScript en documentos
XHTML
• Programación Básica
• Tipos de Ventanas
• DOM
• Eventos
¿Qué es JavaScript?
• JavaScript es un lenguaje de programación
interpretado, por lo que no es necesario
compilar los programas para ejecutarlos.
• JavaScript no guarda ninguna relación directa
con el lenguaje de programación Java.
• JavaScript se utiliza principalmente para crear
páginas Web dinámicas.
• Este lenguaje se ejecuta del lado del cliente, no
del lado del servidor.(*)
Temas a Tratar
• Introducción a JavaScript
• ¿Qué es JavaScript?
• Cómo incluir JavaScript en documentos
XHTML
• Programación Básica
• Tipos de Ventanas
• DOM
• Eventos
Incluir JavaScript (1/3)
• En el mismo documento
• El código JavaScript se encierra entre las etiquetas
<script> y </script> que se incluyen dentro de la
cabecera del documento.
<html>
<head>
<script >
/* código javascript aquí */
</script>
</head>
<body>
</body>
</html>
Incluir JavaScript (2/3)
• En un archivo externo
• Las instrucciones JavaScript se pueden incluir en un
archivo externo (.JS) que los documentos XHTML
enlazan mediante las etiquetas <script> y </script> .
<html>
<head>
<script src=“Funciones/[Link]” >
</script>
</head>
<body>
</body>
</html>
Incluir JavaScript (3/3)
• En los elementos del documento
• Este último método es el menos utilizado, ya que
consiste en incluir porciones de código JavaScript
dentro del código XHTML de la página.
<html>
<head>
</head>
<body>
<p onclick=“alert(‘mensaje’)” >
Texto en el párrafo
</p>
</body>
</html>
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Sintaxis
• Variables, Tipos y Ámbito
• Funciones y propiedades de JavaScript
• Funciones propias en JavaScript
• Tipos de Ventanas
• DOM
• Eventos
Sintaxis
• La sintaxis de JavaScript es muy similar a la de
Java y C.
• Las normas básicas son las siguientes:
• No se tienen en cuenta los espacios en blanco y las
nuevas líneas.
• Se distinguen las mayúsculas y minúsculas.
• No se define el tipo de las variables.
• Cada sentencia termina con el carácter de punto y
coma (;)
• Se pueden incluir comentarios (son los mismos que
en C).
• Utiliza los mismos operadores y estructuras
(selectivas e iterativas) que en C.
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Sintaxis
• Variables, Tipos y Ámbito
• Funciones y propiedades de JavaScript
• Funciones propias en JavaScript
• Tipos de Ventanas
• DOM
• Eventos
Variables, Tipos y Ámbitos
• Las variables en JavaScript se crean mediante la
palabra reservada var.
• El nombre de una variable debe cumplir las
siguientes normas:
• Sólo puede estar formado por letras, números y los
símbolos $ (dólar) y _ (guión bajo).
• El primer carácter no puede ser un número.
• En JavaScript no se declara el tipo de variable.
• El ámbito de una variable (scope) es la zona del
programa en la que se define la variable.
• JavaScript define dos ámbitos para las variables:
global y local.
Arrays en JavaScript (1/2)
• Para declarar un array se invoca a su
constructor.
var vec = new Array();
• En JavaScritp no hace falta conocer el número
de elementos que tendrá el array, pero si lo
conocemos de antemano...
var vec = new Array(10); //10 elementos
Arrays en JavaScript (2/2)
• Inicializar un array utilizando el constructor...
var vec = new Array(‘valor1’, ’vaor2’, ’valorN’);
• Crear el array y luego asignar valores...
var vec = new Array();
vec[0] = ‘valor1’;
vec[1] = ‘valor2’;
• Crear una variable y asignarle valores...
var vec = [‘valor1’, ‘valor2’, ‘valorN’];
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Sintaxis
• Variables, Tipos y Ámbito
• Funciones y propiedades de JavaScript
• Cadena de Texto, Arrays y Numéricas
• Funciones propias en JavaScript
• Tipos de Ventanas
• DOM
• Eventos
Funciones para Cadenas
Función / Propiedad Descripción
.substring(com [, fin]) Secciona caracteres de una cadena entre dos
índices especificados y retorna la sub-cadena.
.length Calcula la longitud de una cadena de texto.
+ ó .concat() Concatena varias cadenas de texto.
.toUpperCase() Transforma todos los caracteres de la cadena a
sus correspondientes caracteres en
mayúsculas
.toLowerCase() Transforma todos los caracteres de la cadena a
sus correspondientes caracteres en
minúsculas.
.charAt(posicion) Obtiene el carácter que se encuentra en la
posición indicada.
.indexOf(caracter) Calcula la posición en la que se encuentra el
carácter indicado dentro de la cadena de texto.
.split(separador) Convierte una cadena de texto en un Array de
Funciones para Arrays
Función / Descripción
Propiedad
.length Muestra el número de elementos del Array.
.concat() Concatena los elementos de varios Arrays.
.join(separador) Es la función opuesta al split(). Transforma los
elementos de un Array en una cadena de texto.
.pop() Elimina el último elemento del Array y lo
devuelve.
.push() Añade un elemento al final del Array.
.reverse() Modifica un Array colocando sus elementos en el
orden inverso a su posición original.
Funciones para Números
Función / Descripción
Propiedad
isNaN() Permite proteger a la aplicación de posibles
valores numéricos no definidos.
.toFixed(dígitos) Devuelve el número original con tantos decimales
como los indicados por el parámetro dígitos y
realiza los redondeos necesarios.
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Sintaxis
• Variables, Tipos y Ámbito
• Funciones y propiedades de JavaScript
• Funciones propias en JavaScript
• Sintaxis
• Tipos de Ventanas
• DOM
• Eventos
Sintaxis
• Las funciones en JavaScritp se definen
mediante la palabra reservada function, seguida
del nombre de la función.
• Opcionalmente se podrán colocar parámetros.
function NombreFuncion([param1, param2, paramN])
{
// Código
// [return valor;]
}
• Las funciones se podrán definir dentro del tag
script o en un archivo externo al documento
XHTML.
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• Ventana alert
• Ventana prompt
• Ventana confirm
• Abrir Ventanas Nuevas
• DOM
• Eventos
Ventana alert
• Es la ventana más utilizada. Sirve para mostrar
mensajes literales y/o valores de variables al
cliente de una aplicación Web.
var mensaje = “Hola mundo!!”;
alert(“hola mundo!!”);
alert(mensaje);
alert(mensaje + “ otra vez”);
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• Ventana alert
• Ventana prompt
• Ventana confirm
• Abrir Ventanas Nuevas
• DOM
• Eventos
Ventana prompt
• Presentan una ventana con un mensaje y un
cuadro de texto donde el usuario introduce
aquello que se le pide.
• La cadena tecleada por el usuario puede
almacenarse en una variable para su futuro uso.
var nombre;
nombre = prompt(“Ingrese su nombre”,”Usuario”);
alert(“Su nombre es: ” + nombre);
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• Ventana alert
• Ventana prompt
• Ventana confirm
• Abrir Ventanas Nuevas
• DOM
• Eventos
Ventana confirm
• Presenta una ventana con un mensaje y dos
botones, Aceptar y Cancelar, que el usuario
pulsará en función del contenido del mensaje.
• Si el usuario pulsa Aceptar, confirm devuelve un
valor Verdadero (true), mientras que si pulsa
Cancelar, devuelve un valor Falso (false).
if(confirm(“Desea continuar?”))
// Se ejecuta una acción
else
// Se ejecuta otra acción
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• Ventana alert
• Ventana prompt
• Ventana confirm
• Abrir Ventanas Nuevas
• DOM
• Eventos
Abrir Ventanas Nuevas
• También es posible abrir nuevas ventanas del
navegador con el método open del objeto
window:
var ventanaNueva = [Link](“[Link]”, “miVentana”);
• Dónde ventanaNueva es el identificador de un
nuevo objeto window donde se abrirá la página
[Link]
• Para cerrar las ventanas se pueden utilizar:
[Link]();
[Link]();
close(); (*)
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Generalidades
• Árbol de Nodos
• Acceso Directo a los Nodos
• Acceso Directo a los Atributos
• Eventos
DOM - Generalidades
• La creación de 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 XHTML (*) como si
fueran documentos XML.
• De hecho, DOM se diseñó originalmente para
manipular de forma sencilla los documentos
XML.
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Generalidades
• Árbol de Nodos
• Acceso Directo a los Nodos
• Acceso Directo a los Atributos
• Eventos
Árbol de Nodos
• DOM transforma todos los documentos XHTML
en un conjunto de nodos, que están
interconectados y que representan los
contenidos de las páginas Web y las relaciones
entre ellos.
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Generalidades
• Árbol de Nodos
• Acceso Directo a los Nodos
• Acceso Directo a los Atributos
• Eventos
Acceso Directo a Nodos (1/2)
• DOM proporciona dos métodos alternativos
para acceder a un nodo específico:
• acceso a través de sus nodos padre.
• acceso directo.
• Funciones de Acceso Directo
• .getElementsByTagName()
• Obtiene todos los elementos de la página XHTML
cuya etiqueta sea igual que el parámetro que se le
pasa a la función.
Acceso Directo a Nodos (2/2)
• .getElementsByName()
• Es similar a la anterior, pero en este caso se buscan
los elementos cuyo atributo name sea igual al
parámetro proporcionado.
• .getElementById()
• Es la más utilizada cuando se desarrollan
aplicaciones Web dinámicas. Se trata de la función
preferida para acceder directamente a un nodo y
poder leer o modificar sus propiedades.
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Generalidades
• Árbol de Nodos
• Acceso Directo a los Nodos
• Acceso Directo a los Atributos
• Eventos
Acceso Directo a Atributos
(1/3)
• Mediante DOM, es posible acceder de forma
sencilla a todos los atributos XHTML y todas las
propiedades CSS de cualquier elemento de la
página.
• Los atributos XHTML de los elementos de la
página se transforman automáticamente en
propiedades de los nodos.
var enlace = [Link](“miLink”);
alert([Link]); // Muestra el atributo href
<a id=“miLink” href=“[Link]” > link </a>
Acceso Directo a Atributos
(2/3)
• Las propiedades CSS no son tan fáciles de
obtener como los atributos XHTML.
• Para obtener el valor de cualquier propiedad
CSS del nodo, se debe utilizar el atributo style.
var imagen = [Link](“miImagen”);
alert([Link]); // Muestra el márgen
<img id=“miImagen” style=“margin:0;” src=“[Link]” />
Acceso Directo a Atributos
(3/3)
• La transformación del nombre de las
propiedades CSS compuestas consiste en
eliminar todos los guiones medios (-) y escribir
en mayúscula la letra siguiente a cada guión
medio.
• DOM utiliza el nombre className para acceder
al atributo class de XHTML.
var parrafo = [Link](“parrafo”);
alert([Link]); // Muestra undefined
alert([Link]); // Muestra ‘normal’
<p id=“parrafo” class=“normal” > . . . </p>
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Eventos
• Generalidades
• Tipos de Eventos
• Manejadores de Eventos
Eventos - Generalidades
• 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
usuario 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" ("manejadores de eventos").
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Eventos
• Generalidades
• Tipos de Eventos
• Manejadores de Eventos
Tipos de Eventos (1/2)
Evento Descripción Elementos
onblur Deseleccionar el elemento. button, input, label,
select, textarea,
body
onchange Deseleccionar el elemento que se ha input, select,
modificado. textarea
onclick Clickear y soltar el mouse. Todos los
elementos
ondblclick Clickear dos veces seguidas. Todos los
elementos
onfocus Seleccionar un elemento. button, input, label,
select, textarea,
body
onkeydown Pulsar una tecla (sin soltarla). Eventos de
formulario y body
onkeypress Pulsar una tecla. Eventos de
formulario y body
onkeyup Soltar una tecla pulsada. Eventos de
Tipos de Eventos (2/2)
Evento Descripción Elementos
onmousedow Pulsar, sin soltar, un botón del Todos los
n mouse. elementos
onmousemov Mover el mouse. Todos los
e elementos
onmouseout El mouse sale del elemento. Todos los
elementos
onmouseover El mouse entra en el elemento. Todos los
elementos
onmouseup Soltar el botón que estaba pulsado. Todos los
elementos
onreset Borrar los datos de un formulario. form
onresize Se ha modificado el tamaño de la body
ventana del navegador.
onsubmit Enviar el formulario. form
onunload Se abandona la página. body
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Eventos
• Generalidades
• Tipos de Eventos
• Manejadores de Eventos
• Manejadores como Atributos
• Manejadores como Funciones Externas
• Manejadores Semánticos
Manejadores como
Atributos
• Se trata del método más sencillo de indicar el
código JavaScript que se debe ejecutar cuando
se produzca un evento determinado.
• En este caso, el código se incluye en un atributo
del propio elemento XHTML.
<input type=“button” value=“Click Aquí”
onclick=“alert(‘hola mundo!!’);” />
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Eventos
• Generalidades
• Tipos de Eventos
• Manejadores de Eventos
• Manejadores como Atributos
• Manejadores como Funciones Externas
• Manejadores Semánticos
Manejadores como
Funciones
• Esta técnica consiste en extraer todas las
instrucciones de JavaScript y agruparlas en una
función externa.
• En el atributo del elemento XHTML se incluye el
nombre de la función.
• La llamada a la función se realiza de la forma
habitual, indicando su nombre seguido de los
paréntesis y de forma opcional, incluyendo
todos los parámetros que se necesiten.
<input type=“button” value=“Click Aquí”
onclick=“MostrarMensaje();” />
Temas a Tratar
• Introducción a JavaScript
• Programación Básica
• Tipos de Ventanas
• DOM
• Eventos
• Generalidades
• Tipos de Eventos
• Manejadores de Eventos
• Manejadores como Atributos
• Manejadores como Funciones Externas
• Manejadores Semánticos
Manejadores Semánticos (1/2)
• 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.
• Dicha técnica consiste en:
• Asignar un identificador único al elemento XHTML
mediante el atributo id.
• Crear una función de JavaScript encargada de
manejar el evento.
• Asignar la función externa al evento
correspondiente en el elemento deseado.
Manejadores Semánticos (2/2)
...
<script type=“text/javascript” >
[Link] = function()
{
var boton = [Link](‘btn’);
[Link] = MostrarMensaje;
}
function MostrarMensaje()
{
alert(“Hola mundo!!”);
}
</script>
...
<input id=“btn” type=“button” value=“Click Aquí” />
...
