Capacitacin de Herramientas para

el Desarrollo WEB
Modulo VI- Javascript
Sesin #3
Mara Paz Coloma M.
mcoloma@inacap.cl

Javascript
Contenido

Qu es Javascript?
Programacin del lado del cliente.
Aspectos generales del lenguaje.
Validaciones de Formulario.

Qu es Javascript?
Javascript es un lenguaje liviano, cuya principal
caracterstica es que trabaja del lado cliente, ya que
el navegador soporta la carga de procesamiento.
Javascript puede ser insertado en pginas HTML o
bien ser agregado como referencias, al igual que las
hojas de estilos o CSS.

Programacin del lado del cliente

Este lenguaje trabaja a travs de lo que se conoce
como DOM( document object model), lo que le
otorga facilidades de acceder de forma inmediata o
bien a travs de eventos, a los objetos que
componen un HTML, permitiendo dar efectos
grficos, escribir en documentos y validaciones entre
otras cosas, sin ocupar recursos del servidor.

Aspectos Generales del Lenguaje

Es un lenguaje de programacin.
No debe confundir Java con Javascript.
Javascript por si slo no permite la creacin
de aplicaciones independientes. Necesita
estar inserto en un documento HTML para
poder operar.
Para programarlo slo necesita de un editor
de texto o de html que le permita editar sus
documentos.

Sintaxis de Javascript
Declaracin de Variable:
Var strnombre;

Operadores:
+: suma y/o concatenacin
- : Resta.
/ : divisin.
* : multiplicacin.

Sintaxis de Javascript
Comentarios:
/*... * / Bloque de comentarios.
// comentarios lnea a lnea.

Sentencias de Control, iteracin y salto:

If
Select case
While
For
Do While
Return, break y continue

Manejo de Objetos
Javascript reside en el HTML, dentro de los
tags script o un archivo aparte.

Ejemplo:
Archivo saludo.htm

Manejo de Objetos
Para acceder a un objeto dentro del DOM
siempre debe utilizar un document.
Las aplicaciones javascript son manejadas
por eventos.
No todos los eventos son compatibles con
todos los browser.

Manejo de Objetos
Dentro de los eventos podemos destacar:
onClick: cuando el usuario hace un click en un
elemento.
onLoad:la pgina se carga en el browser.
onBlur:el usuario sale del campo de un formulario.
onSubmit: cuando un formulario va a ser enviado.
onMouserOver: cuando se mueve el mouse por
sobre el elemento.
onMouseOut: cuando se mueve el mouse por
fuera del elemento.

Manejo de Objetos
Todo objeto tiene un id o bien un name , y
debe ser definido si se quiere acceder a
travs de javascript.
Los manejadores de eventos dependen de
los objetos.
Los objetos tienen mtodos y atributos.

Definicin de Funciones
Las funciones se definen con la palabra reservada
function y en minsculas.
Deben tener un return como norma.
La funcion puede recibir parmetros no importando
su tipo.
Cmo todo lenguaje maneja palabras reservadas.
Debe respetar esto si no tendr problemas de debug
nada gratos.
Ejemplo:
function validar(variable)

Definicin de Funciones
El contenido de una funcin va entre llaves. { }
Cada sentencia Javascript debe terminar con punto y
coma (;)
Las maysculas y minsculas deben ser respetadas.
Las comillas simples () representan texto.
La funcin debe ir definda con un nombre e
independiente si recibe o no parmetros con
parntesis redondos.

Validaciones de Formularios
Recuerde que mientras menos sean las conexiones
que tenga que efectuar al servidor mejor.
Uno de los principales errores es cuando se valida el
formulario en el servidor.
Para validar formularios debe ocupar Javascript,
independiente sea a mano o automatizable a travs
de algn editor.
Recuerde que el envo de un formulario se realiza a
travs del mtodo submit del mismo.

Ejemplo de validacin de un Formulario

1. Vaya a notepad y abra el archivo
contactenos.htm
2. Guarde el archivo como contactenos1.htm
3. Vaya al encabezado del documento, a la
seccin <script>.
4. Dentro de esta seccin escriba:
function validar(){

Ejemplo de validacin de un Formulario

5. Vamos a validar que ningn campo venga vacio. Para
esto validamos el primer campo del formulario que se llama
txt_nombre. De no traer ningn carcter mostraremos un
cuadro de dialogo con la funcin alert y posicionaremos el
cursor en la txt_nombre. Nuestra funcin debera quedar as:
function validar()
{
if(document.frm_contactenos.txt_nombre.value.length==0)
{
alert('Debe ingresar el nombre');
document.frm_contactenos.txt_nombre.focus();
return false;
}
}

Ejemplo de validacin de un Formulario

6. Realizamos el mismo procedimiento anterior pero ahora con el
email. La funcin quedara:
function validar()
{
if(document.frm_contactenos.txt_nombre.value.length==0)
{
alert('Debe ingresar el nombre');
document.frm_contactenos.txt_nombre.focus();
return false;
}
if(document.frm_contactenos.txt_email.value.length==0)
{
alert('Debe ingresar un email');
document.frm_contactenos.txt_email.focus();
return false;
}
}

Ejemplo de validacin de un Formulario

7. Una vez que se han validado los campos,
mediante javascript se proceder a enviar el
formulario. Para esto borraremos el contenido del
mtodo action y el botn submit lo cambiaremos por
el tipo button.
<form name="frm_contactenos" action="#" method="Post">
<input type="button" name="cmd_envio" value="Envio">

8. Agregaremos al botn cmd_envio el manejador de

eventos onclick quien ejecutar la funcin ya definda.
<input type="button" name="cmd_envio" value="Envio
onClick="javascript:void(validar());">

Ejemplo de validacin de un Formulario

9.En la funcin validar, despus del ltimo if,
escribimos lo siguiente:
document.frm_contactenos.action=http://www.aldea.cl
document.frm_contactenos.submit();
return true;

10.Lo que hizo fue configurar en forma dinmica el

action del formulario y su mtodo de envo.
11. Si usted presiona enviar y se encuentra con datos
las textbox, se mostrar la pgina aldea.

Ejemplo de validacin de un Formulario

Sin embargo este ejemplo presenta un Pero. Los
espacios en blancos tambin son considerados
caracteres vlidos.
Agregue el cdigo necesario al formulario para que
valide que las textfield no esten vacias.

Objeto window
Window: es el nivel ms alto de la jerarqu de objetos
de javascript.
Atributos:

MenuBar
Location
Statusbar
Toolbar

Mtodos:
Open(Url, nombre, atributos)
Close()

Ejemplo Objeto Window

1. Abra el archivo ejemplo.htm en Notepad
2. Guarde el archivo como window.htm
3. En el body cree un botn del tipo button que se
llame cmd_abrir y como etiqueta Abrir
4. Vaya a la seccin script y escriba lo siguiente:
function AbrirVentana()
{
var opciones="left=100,top=100,width=250,height=150,toolbar=no,menubar=no";
window.open('http://www.aldea.cl','Aldea',opciones);
}

Ejemplo Objeto Window

5. Guarde los cambios.
6. Agregue al botn el manejador de eventos onClick
que llame a la funcin que se acaba de crear.
<input type="button" name="cmd_abrir" value="Abrir"
onClick="javascript:void(AbrirVentana());">

7. Guarde los cambios y visualice en el browser.

Objeto Document
El objeto document es el que tiene el contenido de toda la
pgina que se est visualizando. Esto incluye el texto,
imgenes, enlaces, formularios.
Atributos:
Bgcolor
Forms
Title

Mtodos:

Open()
Close()
Write()
Writeln()

Objeto Location
Este objeto contiene la URL actual as como algunos
datos de inters respecto a esta URL.
Permite extraer informacin de una URL a travs de
sus atributos, como hostname, href, port, protocol
entre otras cosas.
Dentro de la jerarqua de objetos es la tercera.
Mtodos:
Reload()
Replace(cadenaUrl)

Ejemplo del Objeto Location

1. Vaya al notepad.
2. Abra el archivo ejemplo.htm
3. Guarde el archivo como location.htm
4. En el body inserte el manejador onLoad y escriba los siguiente:
<body onLoad=javascript:void(UrlInfo())>

5. En la seccin script escriba la siguiente funcin:

function infoUrl()
{
document.write('Location href:' + location.href);
}
6. Guarde el archivo y visualice los cambios.

Objeto History
Este objeto se encarga de almacenar una lista con
los sitios por los que se ha estado navegando.
Atributos:

Current.
Next
Length
Previous

Mtodos:
Back().
Forward()
Go(posicin)

Objeto History

1. Vaya a notepad.
2. Abra el archivo ejemplo.htm
3. Guarde el archivo como history.htm
4. Inserte un botn en la seccin body del documento que sea
del tipo button, name igual cmd_volver, y value igual Volver.
5. Agregue al botn el manejador de eventos onClick.
6. Escriba en el manejador lo sgte:
onClick=Javascript:void(History.back());

7. Guarde los cambios y visualice en el browser.

Objeto Navigator
Este objeto simplemente nos da informacin relativa
al navegador que est utilizando el usuario.
Atributos:
appName
appVersion

Mtodos:
Javaenbled()

Ejemplo de objeto Navigator

1. Vaya a Notepad.
2. Abra ejemplo.htm
3. Guarde como Navigator.htm
4. En la seccin script escriba la siguiente funcin:
function ValidarNav()
{
document.write('Su navegador es:' + navigator.appName);
}

Ejemplo de objeto Navigator

5. Borre lo que tenga la seccin body.
6. Agregue el manejador de eventos onLoad al body
y llame a la funcin Javascript.
7. Guarde los cambios y Visualice en el browser.

Links
Varios:
-

http://www.webestilo.com/javascript/js16.phtml
http://www.devguru.com/Technologies/ecmascript/quickref/js_objects.html