Diseo de Pginas Web

JAVASCRIPT
UCSG Ing. Roberto Garca Snchez

Programacin cliente-servidor
La programacin del lado del cliente tiene como
principal ventaja que la ejecucin de la aplicacin
se delega al cliente, con lo cual se evita recargar al
servidor de trabajo.

El servidor solo enva el cdigo, y es tarea del

browser interpretarlo.
Programacin cliente-servidor
La gran desventaja de esta opcin de
programacin es que el cdigo que el server enva
es "sensible" a que cosas puede o no hacer el
browser.

El mismo cdigo no va ser muy bien interpretado

por algunos browser usados ya que ellos utilizaran
diversas tecnologas por el lado del cliente.

Programacin cliente-servidor
Programar por el lado del servidor tiene como gran
ventaja que cualquier cosa puede hacerse sin tener en
cuenta el tipo de cliente, ya que la aplicacin se
ejecuta en el servidor que es un ambiente controlado,
una vez ejecutada la aplicacin, el resultado que se
enva al cliente puede estar en un formato normalizado
que cualquier cliente puede mostrar.
La desventaja es que el server se sobrecarga de
trabajo ya que adems de servir pginas es
responsable de ejecutar aplicaciones.
Introduccin al Javascript
Javascript es un lenguaje interpretado

Desarrollo en web

Ejecucin de los programas en el navegador cliente:

Es el navegador el que interpreta las instrucciones

No hay intervencin por parte del servidor

Introduccin al Javascript
JavaScript es un lenguaje de programacin que
permite el script de eventos, clases y acciones para el
desarrollo de aplicaciones Internet entre el cliente y
el usuario. JavaScript permite con nuevos elementos
dinmicos ir ms all de clicar y esperar en una
pgina Web. Los usuarios no leern nicamente las
pginas sino que adems las pginas ahora
adquieren un carcter interactivo.
Introduccin al Javascript
Los programas se ejecutan en el navegador (cliente):

Qu no es Javascript?
Javascript no es un lenguaje de propsito general.
Pequeos trozos de programa de unas pocas lneas de
cdigo.

No da control a todos los recursos del ordenador

No podemos leer o escribir en disco, slo acceder al

documento HTML en el que va inmerso

Javascript NO es Java
Propiedades de Javascript
Se interpreta por el ordenador que recibe el
programa, no se compila.
Tiene una programacin orientada a objetos. El cdigo
de los objetos est predefinido y es expandible. No
usa clases ni herencia.
El cdigo est integrado (incluido) en los documentos
HTML.
Trabaja con los elementos del HTML.
No se declaran los tipos de variables.
Ejecucin dinmica: los programas y funciones no se
chequean hasta que se ejecutan.

Javascript
Los comandos de un programa en JavaScript se
dividen en 5 categoras:
Variables y sus valores.
Expresiones, que manipulan los valores de las
variables.
Estructuras de control, que modifican cmo las
sentencias son ejecutadas.
Funciones, que ejecutan un bloque de sentencias
Clases y arrays (vectores), que son maneras de
agrupar datos.
Javascript
Variables y valores
En JavaScript no se debe especificar el tipo de datos.

Todas las variables se declaran usando el comando var.

Ejemplo 1:
var variable1= "coche;
var cuaderno;
var mi_variable = 123456, decimal =2342.89;
var n_casas, n_habitaciones, n_cuadros, nombre = "Franklin;

Javascript
Sentencias, Expresiones y Operadores
La unidad bsica de trabajo en JavaScript es la
Sentencia.
Los programas de JavaScript son un grupo de
sentencias, normalmente organizadas en funciones que
manipulan las variables y el entorno HTML en el cual
el script trabaja.
Los operadores hacen que en una sentencia las
variables sean evaluadas y se les asigne un valor o
un resultado.
Javascript
Estructuras de Control
Existen varios mtodos para controlar el modo de
ejecucin de sentencias que se vern ms adelante.

Funciones y Objetos
Las sentencias, expresiones y operadores bsicos se
agrupan en bloques ms complejos dentro de un
mismo programa llamadas funciones.

Javascript
Funciones
Una funcin es un bloque de cdigo con un nombre.
Cada vez que se usa el nombre, se llama a la
funcin y el cdigo de la funcin es ejecutado. Las
funciones pueden llamarse con valores, conocidos
como parmetros, que se usan en la funcin.

Las funciones tienen dos objetivos: organizacin del

programa (archivo o documento) y ejecucin del
cdigo de la funcin.
Javascript
Funciones
Ejemplo:

function valor_abs (num){

if (num >= 0)
return num
else
return -num
}

Javascript
Objetos
Los objetos tienen el mismo propsito que las
funciones pero con datos.
Los tipos de datos conocidos hasta ahora son
variables declaradas o inicializadas con var. Cada
uno de estos tipos puede tener un solo valor. Los
objetos permiten la capacidad de tener varios
valores, de tal manera que un grupo de datos
pueda estar relacionado con otro.
Javascript
Objetos
Lo que en JavaScript se llama objeto en otros
lenguajes se llama estructura de datos o clase. Como
las funciones, los objetos tienen 2 aspectos: cmo se
crean y cmo se usan.

Javascript
La etiqueta script
La seccin head de un documento HTML es la que
debe contener el cdigo de JavaScript para los
gestores de eventos. Aunque no es necesario que
todo el cdigo de JavaScript vaya en el head, es
importante que vaya en l para asegurar que todo
el cdigo de JavaScript haya sido definido antes del
body del documento.
Sntaxis bsica
Toma su sintaxis de lenguajes de programacin ms
conocidos C++ y Pascal
Definicin de variables:
Se ha definido dos
variables, una de tipo
numrico y otra de tipo
<html> cadena
<script>
numero = 73;
cadena = contenido de la cadena;
</script>

Sntaxis bsica
Operaciones con cadenas y numeros:
cad1=las cosas;
cad2=van mejorando; Concatenacin de cadenas

cad3=cad1 + cad2;

num1=8; Operaciones con nmeros

num2=1;
num3=num1 + num2;
Sntaxis bsica
Cmo introducir un programa javascript?

En el cdigo html insertaremos

<html> el cdigo entre las etiquetas:
<head>
<script> </script>
<script>
variable = 45 * 3 ;
cadena = un contenido;
</script>
</head>

Sntaxis bsica
Sentencias en los programas

La sentencia alert muestra una

<html> venta con el mensaje
<head>
<script>
alert(MENSAJE EN UNA VENTANA);
</script>
</head>
Sntaxis bsica
Sentencias en los programas

<html>
<head>
<script>
variable = 1;
alert(Mensaje en la ventana + variable);
</script>
</head>

Sntaxis bsica
Otro ejemplo:

<html>
<body>
<h1>Contenido escrito directamente en la pgina</h1>
<script>
variable = 1;
document.writeln(Este es mi primer script);
</script>
</body>
</html> Lo que escribamos con WRITELN
aparece en el documento.
Sntaxis bsica
Definicin de funciones
Podemos agrupar trozos de cdigo que se vayan a usar
repetidas veces en una funcin, para usarlo posteriormente:

<html>
<script>
function suma(){ Usamos una variable global
numero= numero + 3;
}
suma();
</script>

Sntaxis bsica
Definicin de funciones
Variables locales:

<html>
<script> Usamos una variable local
function suma(){
var numero= numero + 3;
}
suma();
</script>
Sntaxis bsica
Definicin de clases
<html>
<script>
function casa(habs, estil, fecha, garaje){
this.habitaciones=habs;
this.estilo=estil;
this.fecha_cosntruccin=fecha;
this.tiene_garaje=garaje;
}

var micasa= new casa(6, clasica, 2001, verdadero);

alert(Mi casa tiene: + micasa.habitaciones + habitaciones);

</script>

Sntaxis bsica
Arrays (vectores)
<html>
<script>
var vector = new Array();

vector[0]=primer valor;
vector[1]=segundo valor;
.

</script>
Sntaxis bsica
Entrada de datos
La entrada de datos se suele hacer con formularios
o tambin podemos usar:
La sentencia PROMPT pide un
<html> dato por teclado.
La sentencia ALERT lo muestra en
<script> una ventana.
dato = prompt(Dame el dato:);
alert( has tecleado: + dato );

</script>

Sntaxis bsica
Estructuras de control condicionales:

switch (variable) {
if (condicion) { case valor: {
sentencias_true sentencias;
} break; }

case otrovalor: {
else{
sentencias;
sentencias-else break; }
}
default: sentencias;
}
Sntaxis bsica
Estructuras de control condicionales:

while (condicion) { for(inic ; condic ; increm ){

sentencias; sentencias;
} }
do {
sentencias;
}while ( condicion );

Sntaxis bsica
Crear una tabla
<script type=text/javascript>
filas = 7;
colum = 7;
document.writeln("<table>");
for (i=0; i<filas; i++ ) {
document.writeln("<tr>");
for (j=0; j<colum; j++ ) {
document.writeln( "<td>["+i+","+j+"]</td>" );
}
document.writeln( "</tr>" );
}
document.writeln(</table>");
</script>
Comentarios

LoscomentariosenJavascript seespecificandelasiguiente
manera:

//Uncomentariodeunasolalnea.

/*Variaslneasdecomentarios

quepuedetenerlaextensinquequeramos*/

Propiedades
Clase String
Los objetos string tienen una propiedad, length (nmero de
carcteres de la cadena), y varios mtodos que manipulan la
apariencia de la cadena (color, tamao, etc.).
Mtodos sobre el contenido: (recordar que las string tienen como
base de ndices el cero.)
charAt ( indice ), muestra el carcter que ocupa la posicin indice en la
cadena.
indexOf ( caracter ), muestra el primer ndice del carcter.
lastIndexOf (caracter ), muestra el ltimo carcter del ndice.
subString ( primerindice, ultimoindice ), muestra la cadena que hay que hay
entre el primer ndice(primerindice) y el ltimo ndice (ultimoindice) includos.
toLowerCase( ), muestra todos los carcteres de la cadena en minsculas.
toUpperCase( ), muestra todos los carcteres de la cadena en maysculas.
Propiedades
Mtodos sobre la apariencia:
big ( ), muestra las letras ms grandes.
blink ( ), muestra texto intermitente (parpadeando).
bold ( ), muestra las letras en negrita.
fixed ( ), muestra el texto en paso fijo (letra Courier New).
fontcolor ( color ), cambia el color de las letras.
fontsize ( size ), cambia el tamao de las letras.
italics ( ), muestra en letra itlica.
small ( ), muestra las letras ms pequeas.
strike ( ), muestra las letras tachadas por una ralla.
sub ( ), muestra la letra en subndice.
sup ( ), muestra la letra en superndice.

Propiedades
Clase Math
La clase Math se usa para efectuar clculos matemticos. Contiene
propiedades generales como pi =3.14159, y varios mtodos que
representan funciones trigonomtricas y algebraicas.
La clase Math es el primer ejemplo de clase esttica (que no cambia).
Todos sus argumentos son valores. Esta clase no permite crear objetos, por
lo que hay que referirse directamente a la clase para usar los mtodos.

Propiedades (se usan del modo Math.propiedad):

E, nmero "e". Es un nmero tal que su logaritmo neperiano es 1, ln(e) = 1
LN10, logaritmo neperiano del nmero 10.
LN2, logaritmo neperiano del nmero 2.
PI, nmero pi = 3.14159
SQRT1_2, raz cuadradada de .
SQRT2, raz cuadrada de 2.
Propiedades
Clase Math
Mtodos:
abs (numero), calcula el nmero absoluto de numero.
acos (numero), calcula el ngulo cuyo coseno es numero.
asin (numero), calcula el ngulo cuyo seno es numero.
atan (numero), calcula el ngulo cuya tangente es
numero.
ceil (numero), calcula el entero mayor o igual que
numero.
cos ( angulo ), calcula el coseno de angulo.
exp (numero), calcula el nmero e elevado a la potencia
numero.

Propiedades
Mtodos:
floor (numero), calcula el entero menor o igual que numero.
log (numero), calcula el logaritmo natural de numero.
max (numero1, numero2 ), calcula el mximo entre numero1y
numero2.
min (numero1, numero2 ), calcula el mnimo entre numero1y
numero2.
pow (numero1, numero2 ), calcula numero1 exponentado a
numero2.
random ( ), calcula un nmero decimal aleatorio entre 0 y 1,
SLO PARA UNIX.
round (numero), devuelve el entero ms cercano a numero.
sin (angulo), calcula el seno de angulo.
sqrt (numero), calcula la raz cuadrada de numero.
tan (angulo), calcula la tangente de angulo.
Propiedades
Clase Date
La clase date simplifica y automatiza la conversin entre las
representaciones horarias del ordenador y la humana.
La clase date de JavaScript sigue el estndar de UNIX para
almacenar los datos horarios como el nmero de milisegundos
desde el da 1 de enero de 1970 a las 0:00. Esta fecha se
denomina "la poca".
Aunque la clase date no tiene propiedades, tiene varios
mtodos. Para usar la clase date hay que entender cmo
construir un objeto de esta clase.

Propiedades
Clase Date
new Date( ), inicializa un objeto con la hora y fecha actual.

new Date(string_dato), inicializa un objeto con el argumento string_dato. El

argumento debe ser de la forma "Mes da, ao" como "Noviembre 29,
1990".

new Date( ao, mes, da), iniciliaza un objeto tomando 3 enteros que
representan el ao, mes y da. NOTA: los meses tienen como base el 0, lo
que significa que 2 corresponde con el mes de marzo y 10 con el mes de
noviembre.
Propiedades
Clase Date
Mtodos:
getDate ( ), devuelve el nmero de da del mes (1-31).
getDay ( ), devuelve el nmero de da de la semana (0-6).
getHours ( ), devuelve el nmero de horas del da (0-23).
getMinutes ( ), devuelve el nmero de minutos de la hora (0-59)
getMonth ( ), devuelve el nmero de mes del ao (0-11).
getSeconds ( ), devuelve el nmero de segundos del minuto (0-59)
getTime ( ), devuelve la hora.
getYear ( ), devuelve el ao.
setDate ( ), fija la fecha.
setHours ( ), fija el nmero de horas del da.
setMinutes ( ), fija el nmero de segundos del minuto.
setMonth ( ), fija el nmero de mes.
setSecond ( ), fija el nmero de los segundos del minuto.
setTime ( ), fija la hora.
setYear ( ), fija el ao.

Propiedades
Clases predefinidas
eval(string) - Esta funcin intenta evaluar su argumento de tipo

string como una expresin y devuelve su valor.

Esta funcin es muy potente porque evala cualquier expresin de
JavaScript.

parseFloat(string) - Esta funcin intenta convertir su argumento

de tipo string como un nmero decimal (de coma flotante).

parseInt(string, base) - Esta funcin se comporta de forma muy

similar a la anterior. Intenta convertir su argumento de tipo
string como un entero en la base elegida.
Propiedades
Clase window
Es el nivel ms alto de la jerarqua de objetos de JavaScript.

Cada ventana de un browser que est abierta tiene su

correspondiente objeto window. Todo el resto de objetos
desciende del objeto window.
Cada ventana se asocia a una pgina Web y la estructura

HTML de esa pgina se refleja en el objeto document de la

ventana. Cada ventana se corresponde con algn URL que se
refleja en el objeto location. Cada ventana tiene una lista de
documentos visitados que se han mostrado en esa ventana
(history list ), las cuales se representan por varias propiedades
del objeto history.

Propiedades
Clase window
Los mtodos de un objeto window son:

alert(string_mensaje)
confirm(string_mensaje)
open(URL_string, nombre_ventana)
close( )
prompt(string_mensaje)
Propiedades
Clase document
Cada ventana se asocia con un objeto document. El objeto

document contiene propiedades para cada ancla, link, y

formulario en la pgina. Tambin contiene propiedades para
su ttulo, color de fondo, colores de los links y otros atributos
de la pgina.
El objeto document tiene los siguientes mtodos:

clear()
close()
open()
write(string)
writeln(string)

Propiedades
Clase location
El objeto location describe el URL del documento. Este tiene

propiedades representando varios componentes del URL,

incluyendo su parte de protocolo, de hostname, de pathname,
de nmero de puerto, entre otras propiedades. Tambin tiene
el mtodo toString el cual se usa para convertir el URL a una
cadena de caracteres. Para mostrar el URL actual podemos
usar el siguiente cdigo:

var lugar = document.location

document.write("<br/>El URL actual es " + lugar.toString())
Propiedades
Clase history
El objeto history se usa para referirse a la lista de URLs

visitados (history list) anteriormente. Tiene una propiedad

conocida como length, la cual indica cuntos URLs estn
presentes en la history list actualmente. Tiene los siguientes
mtodos:

back()
forward()
go(donde)

DOM
Document Object Model - interfaz de programacin
de aplicaciones (API) que proporciona un conjunto
estndar de objetos para representar documentos
HTML y XML.
Se trata de un modelo sobre cmo se combinan los
objetos, y una interfaz estndar para acceder a
ellos y manipularlos. A travs del DOM, los
programas pueden acceder y modificar el
contenido, estructura y estilo de los documentos
HTML y XML.
DOM
Document Object Model - Los navegadores al
cargar el cdigo XHTML crea un rbol de nodos
donde almacena cada una de las etiquetas de la
pgina.
Documento
XHTML

head body

tittle script p form

texto link

DOM
Tipos de nodos:
Document, nodo raz del que derivan todos los dems
nodos del rbol.
Element, representa cada una de las etiquetas XHTML.
Puede contener atributos y derivar otros nodos.
Attr, representa cada uno de los atributos de las
etiquetas XHTML.
Text, nodo que contiene el texto encerrado por una
etiqueta XHTML.
Comment, representa los comentarios incluidos en la
pgina XHTML.
DOM
Acceso a los nodos
Para acceder a los nodos debe estar construido todo el
rbol, es decir, la pgina debe cargar completamente.

Las funciones para accerder a los nodos son:

getElementsByTagName()
getElementsByName()
getElementById()

El valor que se indica delante del nombre de la funcin (en este caso,
document) es el nodo a partir del cual se realiza la bsqueda de los
elementos.

DOM
Creacin de elementos XHTML
El proceso de creacin de nuevos nodos puede llegar a
ser tedioso, ya que implica la utilizacin de tres funciones
DOM:
createElement(etiqueta): crea un nodo de tipo Element que
representa al elemento XHTML cuya etiqueta se pasa como
parmetro.
createTextNode(contenido): crea un nodo de tipo Text que
almacena el contenido textual de los elementos XHTML.
nodoPadre.appendChild(nodoHijo): aade un nodo como
hijo de otro nodo. Se debe utilizar al menos dos veces con
los nodos habituales: en primer lugar se aade el nodo Text
como hijo del nodo Element y a continuacin se aade el
nodo Element como hijo de algn nodo de la pgina.
DOM
Eliminacin de elementos XHTML
La funcin removeChild(elemento) requiere como parmetro
el nodo que se va a eliminar. Esta funcin debe ser invocada
desde el elemento padre de ese nodo que se quiere eliminar.
La forma ms segura y rpida de acceder al nodo padre de
un elemento es mediante la propiedad nodoHijo.parentNode.

var nodo_a_borrar = document.getElementById(etiqueta");

nodo_a_borrar.parentNode.removeChild(nodo_a_borrar);

DOM
Acceso a atributos XHTML
var enlace = document.getElementById(idenlace");
alert(enlace.href);

<a id=idenlace" href="http://www...com">Enlace</a>

Los atributos XHTML de los elementos de la pgina se

transforman automticamente en propiedades de los nodos.
Para acceder a su valor, simplemente se indica el nombre del
atributo XHTML detrs del nombre del nodo.
DOM
Acceso a atributos CSS
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />

Para obtener el valor de cualquier propiedad CSS del nodo,

se debe utilizar el atributo style.

DOM
Acceso a atributos CSS
var parrafo = document.getElementById("parrafo");
alert(parrafo.style.fontWeight);

<p id="parrafo" style="font-weight: bold;">...</p>

La transformacin del nombre de las propiedades CSS

compuestas consiste en eliminar todos los guiones medios (-) y
escribir en mayscula la letra siguiente a cada guin medio.
DOM
Acceso a atributos CSS
El nico atributo XHTML que no tiene el mismo nombre en
XHTML y en las propiedades DOM es el atributo class.

Como la palabra class est reservada por JavaScript, no es

posible utilizarla para acceder al atributo class del elemento
XHTML. En su lugar, DOM utiliza el nombre className para
acceder al atributo class de XHTML.

Propiedades CSS
El nico inconveniente es que esto solo permite
acceder a las propiedades directamente definidas
en la etiqueta de HTML, algo que no va a ocurrir
habitualmente, sino que las propiedades estarn
definidas en un archivo externo.

Para poder acceder a stas debemos recurrir a

otras propiedades como currentStyle para Internet
Explorer o la funcin getComputedStyle() para
otros navegadores.
 Propiedades CSS
Como no se puede preveer desde que navegador
va a cargar el cliente, debemos intentar hacer
compatible nuestra aplicacin para cualquier
navegador.

Una posible solucin a esto es una funcin creada

por Robert Nyman, quien publica en su web la
siguiente funcin:

Propiedades CSS
function getStyle (elemento, propiedadCss) {
var valor = "";
if(document.defaultView && document.defaultView.getComputedStyle){
valor = document.defaultView.getComputedStyle
(elemento,'').getPropertyValue(propiedadCss);
}
else if(elemento.currentStyle) {
propiedadCss = propiedadCss.replace(/\-(\w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
valor = elemento.currentStyle[propiedadCss];
}
return valor;
}
window.onload
Para asegurarse que un cdigo JavaScript va a ejecutarse
despus de que la pgina se haya cargado completamente,
slo es necesario incluir las instrucciones que deseamos en la
siguiente sentencia:

window.onload = function() { ... }

Eventos
Eventos
Un evento es algo que ocurre mientras se ejecuta un
programa.
Acciones de navegacin:
Seleccionar enlaces
Mover hacia delante o atrs en la lista de webs visitadas

Abrir otro fichero

Cerrar el browser
 Eventos

Evento Descripcin Elementos para los que est definido

<button>, <input>, <label>, <select>,
onblur Deseleccionar el elemento
<textarea>, <body>
Deseleccionar un elemento que se ha
onchange <input>, <select>, <textarea>
modificado
onclick Pinchar y soltar el ratn Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratn Todos los elementos
<button>, <input>, <label>, <select>,
onfocus Seleccionar un elemento
<textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La pgina se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botn del ratn Todos los elementos
onmousemove Mover el ratn Todos los elementos

Eventos

Evento Descripcin Elementos para los que est definido

El ratn "sale" del elemento (pasa por
onmouseout Todos los elementos
encima de otro elemento)
El ratn "entra" en el elemento (pasa por
onmouseover Todos los elementos
encima del elemento)
Soltar el botn que estaba pulsado en el
onmouseup Todos los elementos
ratn
Inicializar el formulario (borrar todos sus
onreset <form>
datos)
Se ha modificado el tamao de la ventana
onresize <body>
del navegador
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
Se abandona la pgina (por ejemplo al
onunload <body>
cerrar el navegador)
Eventos
Existen varias formas diferentes de indicar los
manejadores:
Manejadores como atributos de los elementos
XHTML

Manejadores como funciones JavaScript externas

Manejadores "semnticos"

Eventos

Manejadores como atributos de los elementos XHTML

Es el mtodo ms sencillo y el menos profesional de indicar
el cdigo JavaScript que se debe ejecutar cuando se
produzca un evento.

<input type="button" value=Pulsar" onclick=Cdigo Javascript" />

Eventos

Manejadores como funciones JavaScript externas

Consiste en extraer todas las instrucciones de JavaScript y
agruparlas en una funcin externa. Una vez definida la
funcin, en el atributo del elemento XHTML se incluye el
nombre de la funcin, para indicar que es la funcin que se
ejecuta cuando se produce el evento.

<input type="button" value=Pulsar" onclick=nombre_funcion ()" />

Eventos

Manejadores "semnticos"
Se basa en utilizar las propiedades DOM de los elementos
XHTML para asignar todas las funciones externas que
actan de manejadores de eventos.

Funcinexterna
function mensaje(){alert(Hapulsadoelbotn);}

Asignarlafuncinexternaalelemento
document.getElementById(boton").onclick =mensaje;

ElementoXHTML
<inputid=boton"type="button"value=Prueba"/>
Eventos
Para asegurarse que un cdigo JavaScript va a ejecutarse
despus de que la pgina se haya cargado completamente,
slo es necesario incluir las instrucciones que deseamos en la
siguiente sentencia:

window.onload = function() { ... }

Eventos

this
JavaScript define una variable especial llamada this
que se crea automticamente.

En los eventos, se puede utilizar la variable this para

referirse al elemento XHTML que ha provocado el
evento.
Eventos

Teniendoencuentalastresformasdemanejarloseventos
podremosutilizarthis:
Manejadores como atributos de los elementos XHTML
Directamente en el cdigo

Manejadores como funciones JavaScript externas

Debemos pasar this como parmetro de la funcion:
nombre_funcion (this)

Manejadores "semnticos
Directamente

Formularios
UnadelasactividadescomunesdeJavaScript eslade
validarformularios.

JavaScript dispone de numerosas propiedades y funciones que

facilitan la programacin de aplicaciones que manejan
formularios.
Cuando se carga una pgina web, el navegador crea
automticamente un array llamado forms y que contiene la
referencia a todos los formularios de la pgina.
Formularios
Para acceder al array forms, se utiliza el objeto document, por
lo que document.forms es el array que contiene todos los
formularios de la pgina.
document.forms[0];

Adems el navegador crea automticamente un array

llamado elements por cada uno de los formularios de la
pgina que contiene la referencia a todos los elementos
(cuadros de texto, botones, listas desplegables, etc.) de ese
formulario.
document.forms[0].elements[0];

Formularios

Sinembargosicambiaeldiseodelapginayse
alteraelordendelosformularios,seranecesario
cambiarelaccesoalarray deformularios.

Unasolucinaesteinconvenienteesutilizarlos
atributosname oiddelformulario.
 Formularios
Siutilizamoselatributoname,podemosacceder
directamentealformulario:

var formularioPrincipal = document.formulario;

var formularioSecundario = document.otro_formulario;

<form name="formulario" > ... </form>

<form name="otro_formulario" > ... </form>

Formularios
PodemostambinaccederhaciendousodelasfuncionesDOM.

var formularioPrincipal = document.getElementById("formulario");

var primerElemento = document.getElementById("elemento");

<form name="formulario" id="formulario" >

<input type="text" name="elemento" id="elemento" />
</form>
Formularios
Independientementedelmtodoqueelijamoscada
elementodisponedelassiguientepropiedades:

type: indica el tipo de elemento que se trata.

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.

form: es una referencia directa al formulario al que pertenece

el elemento.
document.getElementById("id_del_elemento").form
name: obtiene el valor del atributo name de XHTML.
value: permite leer y modificar el valor del atributo value de
XHTML.

Formularios
Loseventosmscomunesson:
onclick: evento que se produce cuando se pincha con el ratn sobre
un elemento.
onchange: evento que se produce cuando el usuario cambia el
valor de un elemento de texto (<input type="text"> o <textarea>).
Tambin se produce cuando el usuario selecciona una opcin en una
lista desplegable (<select>). El evento se produce si despus de
realizar el cambio, el usuario pasa al siguiente campo del formulario.
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.
 Formularios
Obtenerelvalordeloscamposdeunformulario
Cuadro de texto y textarea
El valor del texto mostrado por estos elementos se obtiene y se establece
directamente mediante la propiedad value.

<input type="text" id="texto" />

var valor = document.getElementById("texto").value;

<textarea id="parrafo"></textarea>
var valor = document.getElementById("parrafo").value;

Formularios
Obtenerelvalordeloscamposdeunformulario
Radiobutton
Cuando se dispone de un grupo de radiobuttons, generalmente no se quiere
obtener el valor del atributo value de alguno de ellos, sino que lo
importante es conocer cul de todos los radiobuttons se ha seleccionado. La
propiedad checked devuelve true para el radiobutton seleccionado y false
en cualquier otro caso.

<input type="radio" value="si" name="pregunta" id="pregunta_si"/> SI

<input type="radio" value="no" name="pregunta" id="pregunta_no"/> NO
<input type="radio" value="nsnc" name="pregunta" id="pregunta_nsnc"/> NS/NC
 Formularios
Obtenerelvalordeloscamposdeunformulario
Radiobutton
El siguiente cdigo permite determinar si cada radiobutton ha sido
seleccionado o no:

var elementos = document.getElementsByName("pregunta");

for(var i=0; i<elementos.length; i++) {
alert(" Elemento: " + elementos[i].value + "\n
Seleccionado: " + elementos[i].checked);
}

Formularios
Obtenerelvalordeloscamposdeunformulario
Checkbox
Son muy similares a los radiobutton, salvo que en este caso se debe
comprobar cada checkbox de forma independiente del resto.

<input type="checkbox" value="condiciones" name="condiciones" id="condiciones"/>

He ledo y acepto las condiciones
<input type="checkbox" value="privacidad" name="privacidad" id="privacidad"/> He
ledo la poltica de privacidad

var elemento = document.getElementById("condiciones");

alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked);
elemento = document.getElementById("privacidad");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked);
 Formularios
Obtenerelvalordeloscamposdeunformulario
Select
Se quiere obtener el valor del atributo value de la opcin (<option>)
seleccionada por el usuario. Obtener este valor no es simple, se deben
utilizar las siguientes propiedades:
options, es un array creado automticamente por cada lista
desplegable y que contiene la referencia a todas las opciones de esa
lista. La primera opcin de una lista se puede obtener mediante:
document.getElementById("id_de_la_lista").options[0]
selectedIndex, cuando el usuario selecciona una opcin, el navegador
actualiza automticamente el valor de esta propiedad, que guarda el
ndice de la opcin seleccionada. El ndice hace referencia al array
options.

Formularios
Obtenerelvalordeloscamposdeunformulario
Select

var lista = document.getElementById("opciones");

// Obtener el valor de la opcin seleccionada

var valorSeleccionado = lista.options[lista.selectedIndex].value;

// Obtener el texto que muestra la opcin seleccionada

var valorSeleccionado = lista.options[lista.selectedIndex].text;
 Formularios
Los eventos ms utilizados en el manejo de los formularios son
los siguientes:
onclick: evento que se produce cuando se pincha con el ratn

sobre un elemento.
onchange: evento que se produce cuando el usuario cambia el

valor de un elemento de texto. Sin embargo, el evento slo se

produce si despus de realizar el cambio, el usuario pasa al
siguiente campo del formulario.
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.

Formularios
Restringirloscaracterespermitidos:

function permite(elEvento, permitidos) {

// Variables que definen los caracteres permitidos

var numeros = "0123456789";

var caracteres = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var numeros_caracteres = numeros + caracteres;
var teclas_especiales = [8, 37, 39, 46];
// 8 = BackSpace, 46 = Supr, 37 = flecha izquierda, 39 = flecha derecha
 Formularios
Restringirloscaracterespermitidos:

// Seleccionar los caracteres a partir del parmetro de la funcin

switch(permitidos) {
case 'num': permitidos = numeros;
break;
case 'car': permitidos = caracteres;
break;
case 'num_car': permitidos = numeros_caracteres;
break;
}

Formularios
Restringirloscaracterespermitidos:
// Obtener la tecla pulsada
var evento = elEvento || window.event;
var codigoCaracter = evento.charCode || evento.keyCode;
var caracter = String.fromCharCode(codigoCaracter);
// Comprobar si la tecla pulsada es alguna de las teclas especiales
// (teclas de borrado y flechas horizontales)
var tecla_especial = false;
for(var i in teclas_especiales) {
if(codigoCaracter == teclas_especiales[i]) {
tecla_especial = true; break; }
}
 Formularios
Restringirloscaracterespermitidos:
// Comprobar si la tecla pulsada se encuentra en los caracteres permitidos
// o si es una tecla especial
return permitidos.indexOf(caracter) != -1 || tecla_especial;
}
// Slo nmeros
<input type="text" id="texto" onkeypress="return permite(event, 'num')" />
// Slo letras
<input type="text" id="texto" onkeypress="return permite(event, 'car')" />
// Slo letras o nmeros
<input type="text" id="texto" onkeypress="return permite(event, 'num_car')" />

Formularios
Validacin
Notificar los errores de forma inmediata mediante JavaScript
mejora la experiencia del usuario con la aplicacin) y ayuda a
reducir la carga de procesamiento en el servidor.