Programacin Web

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

Javascript
Se 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...)

Variables
Definicin de variables en JavaScript La forma general para declarar una variable es la siguiente:
var nombre_variable nombre_variable = "valor"

Variables
Ejemplos 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 globales

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

Variables
No 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 + * / % ++ -- (dos guiones) Operadores de asignacin: Significado suma resta producto divisin mdulo (resto) suma tipogrfica resta tipogrfica 20 % 10 (= 0) variable++; ++variable; (variable = variable + 1) variable--; --variable; (variable = variable - 1) Ejemplo nmeros y cadenas

Operadores
Operadores de asignacin: Operador = += -= *= /= %= Significado Asignacin de datos x = 1; Asignacin y suma Asignacin y resta Asignacin y producto x += 1; x -= 1; x *= 1; x = x + 1; x = x - 1; x = x * 1; x = x / 1; x = x % 1; Ejemplo Es igual a

Asignacin y divisin x /= 1; Asignacin y mdulo x %= 1;

Operadores
Operadores condicionales (comparativos): Operador == != > < >= <= Significado es igual a no es igual a es mayor que es menor que es mayor o igual que es menor o igual que Ejemplo 5 == 8 es falso 5 != 1 es verdad 5 > 1 es verdad 5 < 8 es verdad 5 >= 8 es falso 5 <= 1 es falso

Operadores
Operadores lgicos: Operador && || ! Significado Y O NO Ejemplo 1 == 1 && 2 < 1 es falso 1 == 2 || 15 > 2 es verdad !(1 > 2) es verdad

Operadores.

Expresiones
Javascript 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 <= 10 ; i++) { if ( i > 5) { alert(Mayor de 5); } }

Estructuras de repeticin.
Ejemplo: cont = 0 while( cont<10 ) { document.write(cont+"<br>"); cont++; }

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

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 funciones
function nombreFuncion(parametro1, parametro2, ... ) { sentencia1; sentencia2; ... sentenciaN; }

Ejemplo de funcin
function ImprimeNombre(nombre) {
document.write("<HR>Tu nombre es <B><I>");
document.write(nombre); document.write("</B></I><HR>");

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 navegador

Nombre Objeto, Anchor Applet Button Checkbox Date Document Form History Link Location Math Password RadioButton Reset Selection String Submit Text TextArea Window Caractersticas marca anchor de HTML <a > applet de Java campo INPUT HTML de tipo "button" campo INPUT HTML tipo "checkbox" permite trabajar con fechas pgina HTML formulario HTML lista de las pginas Web visitadas enlace de hipertexto URL constante o funcin matemtica campo INPUT tipo "password" campo INPUT tipo "radiobutton" campo INPUT tipo "reset" texto en un campo TEXTAREA o INPUT cadena de texto campo INPUT tipo "submit" campo INPUT tipo "text" campo INPUT tipo "textArea" 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.

Eventos
Para 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

Eventos
Ver 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.

Cookies
En 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.

Cookies
La 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.

Cookies
En 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.

Cookies
Una forma bsica para escribir una cookie: document.cookie='ejemplo=cookie' Forma bsica para leer una cookie: alert(document.cookie); document.write(document.cookie);

Cookies
Como 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.