Transcript Capitulo 06 - Javascript

Capacitación de Herramientas para
el Desarrollo WEB
Modulo VI- Javascript
Sesión #3
María Paz Coloma M.
[email protected]
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:
– 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