Programacin WebUnidad 4. Procesamiento del lado del cliente.Programacin en Javascript.

JavascriptSe utilizar Javascript pues es el lenguaje estndar que interpretan los diferentes navegadores Web.

JavaScript es un lenguaje de programacin interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C.

Javascript

Fue desarrollado por Netscape y Sun Microsystems, y se puede usar en los clientes Web de Netscape (a partir de la versin 2.0) y Microsoft (a partir de la versin 3.0); hay ligeras diferencias en los intrpretes JavaScript de cada plataforma.

Ejemplo de programa Javascript.

Qu podemos hacer con JavaScript?

Pginas dinmicas (DHTML) Comprobacin de datos (Formularios) Uso de los elementos de la pgina web Intercambiar informacin entre pginas web en distintas ventanas Manipulacin de grficos, texto, etc... Comunicacin con plug-ins: Flash, Java, Shockwave, etc...

4.1 Lenguaje Script del cliente (Javascript).Se puede consultar entre otros, el manual en lnea de Javascript (Wikipedia libros), incluye ejemplos con cdigo:

http://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript

Variables.Se tienen cuatro tipos bsicos:Nmeros (enteros, decimales, etc...) Letras y nmeros (cadenas de caracteres) Valores lgicos (True y False) Objetos (una ventana, un texto, un formulario, el navegador, el historial, etc...)

VariablesDefinicin de variables en JavaScriptLa forma general para declarar una variable es la siguiente:

var nombre_variable

nombre_variable = "valor"

VariablesEjemplos de definicin de variables:

var miVar = 1234; var miVar2 = 12.34; var miCadena = 'Hola, mundo'; var matriz = new Array(); var matriz2 = new Array(15);

Variables locales y globalesvar variableGlobal=0;

function nuevaFuncion() { var variableLocal=1; variableGlobal =0;}

VariablesNo se declara el tipo de dato de la variable, el tipo se asigna en ejecucin y puede cambiar de tipo durante su vida, por ejemplo:

MiVariable=4;

MiVariable="Una_Cadena";

Operadores.

Operadores aritmticos:

Operador

Significado

Ejemplo

+

suma

nmeros y cadenas

-

resta

*

producto

/

divisin

%

mdulo (resto)

20% 10 (= 0)

++

suma tipogrfica

variable++; ++variable;(variable = variable + 1)

-- (dos guiones)

resta tipogrfica

variable--; --variable;(variable = variable - 1)

Operadores de asignacin:

Operadores

Operadores de asignacin:

Operador

Significado

Ejemplo

Es igual a

=

Asignacin de datos

x = 1;

+=

Asignacin y suma

x += 1;

x = x + 1;

-=

Asignacin y resta

x -= 1;

x = x - 1;

*=

Asignacin y producto

x *= 1;

x = x * 1;

/=

Asignacin y divisin

x /= 1;

x = x / 1;

%=

Asignacin y mdulo

x%= 1;

x = x% 1;

Operadores

Operadores condicionales (comparativos):

Operador

Significado

Ejemplo

==

es igual a

5 == 8 es falso

!=

no es igual a

5!= 1 es verdad

>

es mayor que

5 > 1 es verdad

=

es mayor o igual que

5 >= 8 es falso

Operadores

Operadores lgicos:

Operador

Significado

Ejemplo

&&

Y

1 == 1 && 2 < 1 es falso

||

O

1 == 2 || 15 > 2 es verdad

!

NO

!(1 > 2) es verdad

Operadores.

ExpresionesJavascript posee los siguientes tipos de expresiones:

- Aritmticas: tienen valor numrico.- Cadenas: tienen valor de cadena.- Lgicas: tienen valor booleano.

Expresiones.Ejemplos:

x = y / m + 2;y = x >= m + 2;if ( x + 5 >= 25 && peso < 30 ) direccion = Pino # 100 + Col. Granjas

Estructuras condicionales.if (condicin) {//instrucciones } else {//instrucciones }

Estructuras condicionales.switch ( expresin ) {case Valor_1: Instruccin o bloque de instrucciones;[break;]case Valor_2: Instruccin o bloque de instrucciones;[break;]case Valor_3: Instruccin o bloque de instrucciones;[break;]...case Valor_N: Instruccin o bloque de instrucciones;[break;][default:]Instruccin o bloque de instrucciones;}

Estructuras de repeticin.Ejemplo:for (var i=1 ; i 5) { alert(Mayor de 5);}}

Estructuras de repeticin.Ejemplo:cont = 0while( cont

Estructuras de repeticin.Ejemplo:do {i+=1;document.write(i);} while (i

Estructuras de datos.Arreglos (Array)

Arreglos// Arreglo de textos var mensajes = new Array(6); mensajes[0] = "Javascript permite usar arreglos"; mensajes[1] = "Javascript permite usar cadenas"; mensajes[2] = "Javascript permite usar funciones"; mensajes[3] = "Javascript permite usar fechas"; mensajes[4] = "Javascript permite usar funciones matemticas"; mensajes[5] = "Javascript permite usar objetos"; // Arreglo de imgenes var imagenes = new Array(2); imagenes[0] = "../imagenes/tractor1.jpg"; imagenes[1] = "../imagenes/tractor2.jpg";

Funciones.Las funciones son uno de los pilares sobre los que se apoya JavaScript.

Una funcin es un conjunto de sentencias o procedimientos que realizarn unas operaciones adecuadas, haciendo uso de determinadas variables y propiedades.

Sintaxis de funcionesfunction nombreFuncion(parametro1, parametro2, ... ) {sentencia1;sentencia2;...sentenciaN;}

Ejemplo de funcinfunction ImprimeNombre(nombre) {document.write("Tu nombre es ");document.write(nombre);document.write("");}

Ejemplo de funcin.function cubo(numero) {var cubo = numero * numero * numero;return cubo;}

4.2 Modelo de objetos con lenguaje Script.El modelo de objeto de documento (DOM) de Javascript:Representa una estructura jerrquica de los objetos de un documento HTML.Permite hacer una referencia adecuada al objeto que se requiere.

DOM de Javascript

4.3 Objetos del lenguaje script nter construidos y objetos del navegador.Son los objetos ya definidos previamente en el lenguaje de Javascript y los objetos ya definidos en el navegador.

Objetos incorporados de Javacript y del navegadorNombre Objeto, CaractersticasAnchor marca anchor de HTML Applet applet de JavaButton campo INPUT HTML de tipo "button"Checkbox campo INPUT HTML tipo "checkbox"Date permite trabajar con fechasDocument pgina HTMLForm formulario HTMLHistory lista de las pginas Web visitadasLink enlace de hipertextoLocation URLMath constante o funcin matemticaPassword campo INPUT tipo "password"RadioButton campo INPUT tipo "radiobutton"Reset campo INPUT tipo "reset"Selection texto en un campo TEXTAREA o INPUTString cadena de textoSubmit campo INPUT tipo "submit"Text campo INPUT tipo "text"TextArea campo INPUT tipo "textArea"Window ventana del navegador

4.4 Eventos con el lenguaje de script.Un evento es el resultado de la interaccin entre un usuario con algn elemento de la interfaz grfica que se le presenta.

Ejemplos:Hacer clic sobre un botn.Cambiar el contenido de un campo de texto.Mover el apuntador del ratn sobre un enlace.

EventosPara cada tipo de evento hay que tener en mente tres elementos: quin lo genera, cundo ocurre y cul es el manejador de eventos que se debe utilizar. La tabla que sigue resume la mayora los eventos definidos por JavaScript, junto con los elementos relacionados a ellos para su programacin.

Eventos

Eventos

EventosVer los eventos de cada objeto en VS.Qu tiene que hacerse para que una imagen sea tratada como un objeto, es decir, que pueda ser manipulada por el programa?

4.5 Validacin de entrada de datos del lado del cliente.Es conveniente validar los datos que el usuario introduce en los formularios, antes de que estos se enven al servidor.

Por ejemplo, verificar si el usuario proporcion el dato para un campo obligatorio o si el formato es correcto (por ejemplo para un e-mail).

Es ms eficiente validar los datos localmente en vez de enviarlos y que se validen en el servidor.

Para esto se puede usar Javascript.

Pasos para validar un formulario.Para validar un formulario se debe generar la funcin para el evento submit (manejador de evento onsubmit) del objeto Form (formulario).Se escribe el cdigo para la validacin en esta funcin.Si al menos un campo no cumple los requisitos para la validacin, la funcin debe regresar un valor false (cancela el envo del formulario). Si todos los campos cumplen la validacin, la funcin debe regresar un true (se permite el envo del formulario).

Ejemplo para validar formulario.Suponer el siguiente formulario donde se desea que sea obligatorio que el usuario introduzca su nombre:

Analizar el cdigo de la pgina:

Ejecucin de la pgina.Probar la pgina en varias situaciones, cuando falta el nombre:

4.6 Cookies.

CookiesEn la programacin para navegadores el trmino cookie (galleta) se interpreta como una cadena de no ms de 256 caracteres, que puede ser guardada en el cliente de forma explcita desde una pgina o servidor Web.Las cookies permiten entonces guardar una pequea cantidad de informacin en un archivo del lado del cliente. Desde un documento HTML se pueden crear, leer y actualizar las cookies, y en s, se pueden asociar distintas de ellas a un solo documento.

CookiesLa estructura general de una cookie se define de la siguiente forma:nombre=valor; [expira=fecha; [ruta=path; [dominio=domain; [secure;]]]]

donde,- nombre: es el nombre de la cookie.- valor: es el valor de la cookie.- expira y fecha: indican la fecha de expiracin de la misma. Cuando no se indica, expira con la sesin del usuario.- ruta y path: indican el URL de la pgina que gener la cookie.- dominio y domain: indican el dominio desde el cual se conect el cliente.- secure: indica que la cookie se transmitir nica y exclusivamente si la comunicacin entre cliente y servidor es segura.

CookiesEn JavaScript la cadena que se utiliza para la consulta y manipulacin de cookies es:

document.cookie.

Dicha cadena representa todas las cookies asociadas al documento. Al ser esta una variable de tipo cadena se recomiendan utilizar mtodos tales como substring, charAt, indexOf y lastIndexOf para determinar los valores guardados en la cookie.

CookiesUna forma bsica para escribir una cookie:document.cookie='ejemplo=cookie'

Forma bsica para leer una cookie:alert(document.cookie); document.write(document.cookie);

CookiesComo ejemplos de uso de cookies:

Nmero de veces que algn usuario ha visitado una pgina.Llevar una historia personalizada de los elementos que se llevan en un carrito electrnico.Guardar preferencias del usuario.

Ejemplo del uso de cookies.Ver el ejemplo funcionando.

Cdigo de la pgina que guarda (escribe) la cookie.

Cdigo de la pgina que lee la cookie.

4.7 Consideraciones del soporte del navegador.Existen unos organismos que definen cmo deben de ser lenguajes como HTML, CSS o Javascript.A veces las interpretaciones son distintas por parte de las empresas desarrolladoras de software, o incluso estas se permiten el lujo de crear nuevas etiquetas o funcionalidades, incluso decidir cules soportan.

4.7 Consideraciones del soporte del navegador.En las aplicaciones Web se deben considerar los diferentes navegadores que los usuarios usarn para acceder a la aplicacin.

La aplicacin se debe probar con los navegadores ms frecuentes, con el propsito de comprobar la correcta visualizacin y funcionamiento de las pginas.