Capacitacin de Herramientas para el Desarrollo WEB

Modulo VI- JavascriptSesin #3

Mara Paz Coloma M.mcoloma@inacap.cl

JavascriptContenidoQu 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 clienteEste 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 LenguajeEs 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 JavascriptDeclaracin de Variable:Var strnombre;

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

Sintaxis de JavascriptComentarios:/*... * / Bloque de comentarios.// comentarios lnea a lnea.

Sentencias de Control, iteracin y salto:IfSelect caseWhileForDo WhileReturn, break y continue

Manejo de ObjetosJavascript reside en el HTML, dentro de los tags script o un archivo aparte.Ejemplo:Archivo saludo.htm

Manejo de ObjetosPara 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 ObjetosDentro 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 ObjetosTodo 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 FuncionesLas 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 FuncionesEl 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 FormulariosRecuerde 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 Formulario1. Vaya a notepad y abra el archivo contactenos.htm2. Guarde el archivo como contactenos1.htm3. Vaya al encabezado del documento, a la seccin .4. Dentro de esta seccin escriba:function validar(){ }

Ejemplo de validacin de un Formulario5. 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 Formulario6. 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 Formulario7. 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. 8. Agregaremos al botn cmd_envio el manejador de eventos onclick quien ejecutar la funcin ya definda.

Ejemplo de validacin de un Formulario9.En la funcin validar, despus del ltimo if, escribimos lo siguiente:document.frm_contactenos.action=http://www.aldea.cldocument.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 FormularioSin 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 windowWindow: es el nivel ms alto de la jerarqu de objetos de javascript.Atributos:MenuBarLocationStatusbarToolbar

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

Ejemplo Objeto Window1. Abra el archivo ejemplo.htm en Notepad2. Guarde el archivo como window.htm3. En el body cree un botn del tipo button que se llame cmd_abrir y como etiqueta Abrir4. 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 Window5. Guarde los cambios.6. Agregue al botn el manejador de eventos onClick que llame a la funcin que se acaba de crear.

7. Guarde los cambios y visualice en el browser.

Objeto DocumentEl objeto document es el que tiene el contenido de toda la pgina que se est visualizando. Esto incluye el texto, imgenes, enlaces, formularios.Atributos:BgcolorFormsTitleMtodos:Open()Close()Write()Writeln()

Objeto LocationEste 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 Location1. Vaya al notepad.2. Abra el archivo ejemplo.htm3. Guarde el archivo como location.htm4. En el body inserte el manejador onLoad y escriba los siguiente: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 HistoryEste objeto se encarga de almacenar una lista con los sitios por los que se ha estado navegando.Atributos:Current.NextLengthPreviousMtodos:Back().Forward()Go(posicin)

Objeto History1. Vaya a notepad.2. Abra el archivo ejemplo.htm3. Guarde el archivo como history.htm4. 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 NavigatorEste objeto simplemente nos da informacin relativa al navegador que est utilizando el usuario. Atributos:appNameappVersionMtodos:Javaenbled()

Ejemplo de objeto Navigator1. Vaya a Notepad.2. Abra ejemplo.htm3. Guarde como Navigator.htm4. En la seccin script escriba la siguiente funcin:function ValidarNav() { document.write('Su navegador es:' + navigator.appName); }

Ejemplo de objeto Navigator5. 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.phtmlhttp://www.devguru.com/Technologies/ecmascript/quickref/js_objects.html