Capacitación de Herramientas para el Desarrollo WEB

Modulo VI- JavascriptSesión #3

María Paz Coloma M.mcoloma@inacap.cl

JavascriptContenido

• ¿Qué es Javascript?

• Programación del lado del cliente.

• Aspectos generales del lenguaje.

• Validaciones de Formulario.

¿Qué es Javascript?

• Javascript es un lenguaje liviano, cuya principal característica es que trabaja del lado cliente, ya que el navegador soporta la carga de procesamiento.

• Javascript puede ser insertado en páginas HTML o bien ser agregado como referencias, al igual que las hojas de estilos o CSS.

Programación del lado del cliente

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

Aspectos Generales del Lenguaje

• Es un lenguaje de programación.• No debe confundir Java con Javascript.• Javascript por si sólo no permite la creación

de aplicaciones independientes. Necesita estar inserto en un documento HTML para poder operar.

• Para programarlo sólo necesita de un editor de texto o de html que le permita editar sus documentos.

Sintaxis de Javascript

• Declaración de Variable:– Var strnombre;

• Operadores:

+: suma y/o concatenación

- : Resta.

/ : división.

* : multiplicación.

Sintaxis de Javascript

• Comentarios:– /*... * / Bloque de comentarios.– // comentarios línea a línea.

• Sentencias de Control, iteración 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 página 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 través de javascript.

• Los manejadores de eventos dependen de los objetos.

• Los objetos tienen métodos y atributos.

Definición de Funciones

• Las funciones se definen con la palabra reservada function y en minúsculas.

• Deben tener un return como norma.• La funcion puede recibir parámetros no importando

su tipo.• Cómo todo lenguaje maneja palabras reservadas.

Debe respetar esto si no tendrá problemas de debug nada gratos.

• Ejemplo:– function validar(variable)

Definición de Funciones

• El contenido de una función va entre llaves. { }• Cada sentencia Javascript debe terminar con punto y

coma (;)• Las mayúsculas y minúsculas deben ser respetadas.• Las comillas simples (‘) representan texto.• La función debe ir definda con un nombre e

independiente si recibe o no parámetros con paréntesis 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 través de algún editor.

• Recuerde que el envío de un formulario se realiza a través del método submit del mismo.

Ejemplo de validación 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

sección <script>.• 4. Dentro de esta sección escriba:

– function validar(){

}

Ejemplo de validación de un Formulario

• 5. Vamos a validar que ningún campo venga vacio. Para esto validamos el primer campo del formulario que se llama txt_nombre. De no traer ningún carácter mostraremos un cuadro de dialogo con la función alert y posicionaremos el cursor en la txt_nombre. Nuestra función debería 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 validación de un Formulario

• 6. Realizamos el mismo procedimiento anterior pero ahora con el email. La función quedaría:

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 validación 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 método action y el botón 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 botón cmd_envio el manejador de eventos onclick quien ejecutará la función ya definda.

<input type="button" name="cmd_envio" value="Envio“ onClick="javascript:void(validar());">

Ejemplo de validación de un Formulario

• 9.En la función validar, después 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 dinámica el action del formulario y su método de envío.

• 11. Si usted presiona enviar y se encuentra con datos las textbox, se mostrará la página aldea.

Ejemplo de validación de un Formulario

• Sin embargo este ejemplo presenta un Pero. Los espacios en blancos también son considerados caracteres válidos.

• Agregue el código necesario al formulario para que valide que las textfield no esten vacias.

Objeto window

• Window: es el nivel más alto de la jerarquí de objetos de javascript.

• Atributos:– MenuBar– Location– Statusbar– Toolbar

• Métodos:– 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 botón del tipo button que se

llame cmd_abrir y como etiqueta “Abrir”• 4. Vaya a la sección 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 botón el manejador de eventos onClick

que llame a la función 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 página que se está visualizando. Esto incluye el texto, imágenes, enlaces, formularios.

• Atributos:– Bgcolor

– Forms

– Title

• Métodos:– Open()

– Close()

– Write()

– Writeln()

Objeto Location

• Este objeto contiene la URL actual así como algunos datos de interés respecto a esta URL.

• Permite extraer información de una URL a través de sus atributos, como hostname, href, port, protocol entre otras cosas.

• Dentro de la jerarquía de objetos es la tercera.• Métodos:

– 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 sección script escriba la siguiente función: 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

• Métodos:– Back().– Forward()– Go(posición)

Objeto History

• 1. Vaya a notepad.• 2. Abra el archivo ejemplo.htm• 3. Guarde el archivo como history.htm• 4. Inserte un botón en la sección body del documento que sea

del tipo button, name igual cmd_volver, y value igual “Volver”.• 5. Agregue al botón 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 información relativa al navegador que esté utilizando el usuario.

• Atributos:– appName– appVersion

• Métodos:– Javaenbled()

Ejemplo de objeto Navigator

• 1. Vaya a Notepad.• 2. Abra ejemplo.htm• 3. Guarde como Navigator.htm• 4. En la sección script escriba la siguiente función:

function ValidarNav()

{

document.write('Su navegador es:' + navigator.appName);

}

Ejemplo de objeto Navigator

• 5. Borre lo que tenga la sección body.• 6. Agregue el manejador de eventos onLoad al body

y llame a la función 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