Capacitacin de Herramientas para el Desarrollo WEB Modulo

Capacitación de Herramientas para el Desarrollo WEB Modulo VI- Javascript Sesión #3 María Paz Coloma M. mcoloma@inacap. cl

Javascript Contenido • • ¿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: – on. Click: cuando el usuario hace un click en un elemento. – on. Load: la página se carga en el browser. – on. Blur: el usuario sale del campo de un formulario. – on. Submit: cuando un formulario va a ser enviado. – on. Mouser. Over: cuando se mueve el mouse por sobre el elemento. – on. Mouse. Out: 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 contactenos 1. 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“ on. Click="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: – – Menu. Bar 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 Abrir. Ventana() { 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 on. Click que llame a la función que se acaba de crear. <input type="button" name="cmd_abrir" value="Abrir" on. Click="javascript: void(Abrir. Ventana()); "> • 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() 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(cadena. Url)

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 on. Load y escriba los siguiente: <body on. Load=javascript: void(Url. Info())> • 5. En la sección script escriba la siguiente función: function info. Url() { 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 on. Click. • 6. Escriba en el manejador lo sgte: on. Click=“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: – app. Name – app. Version • 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 Validar. Nav() { document. write('Su navegador es: ' + navigator. app. Name); }

Ejemplo de objeto Navigator • 5. Borre lo que tenga la sección body. • 6. Agregue el manejador de eventos on. Load 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/js 16. phtml http: //www. devguru. com/Technologies/ecmascript/quickref/js_objects. html