Programación Web

Unidad 4. Procesamiento del lado del cliente.

Programación en Javascript.

Javascript

• Se utilizará Javascript pues es el lenguaje estándar que interpretan los diferentes navegadores Web.

• JavaScript es un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas 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 versión 2.0) y Microsoft (a partir de la versión 3.0); hay ligeras diferencias en los intérpretes JavaScript de cada plataforma.

Ejemplo de programa Javascript.

¿Qué podemos hacer con JavaScript?

• Páginas dinámicas (DHTML) • Comprobación de datos (Formularios) • Uso de los elementos de la página web • Intercambiar información entre páginas

web en distintas ventanas • Manipulación de gráficos, texto, etc... • Comunicación con plug-ins: Flash, Java,

Shockwave, etc...

4.1 Lenguaje Script del cliente (Javascript).

• Se puede consultar entre otros, el manual en línea de Javascript (Wikipedia libros), incluye ejemplos con código:

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

Variables.

Se tienen cuatro tipos básicos:– Números (enteros, decimales, etc...) – Letras y números (cadenas de caracteres) – Valores lógicos (True y False) – Objetos (una ventana, un texto, un formulario,

el navegador, el historial, etc...)

Variables

• Definición de variables en JavaScript

• La forma general para declarar una variable es la siguiente:

var nombre_variable

nombre_variable = "valor"

Variables

• Ejemplos de definición 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 ejecución y puede cambiar de tipo durante su vida, por ejemplo:

MiVariable=4;

MiVariable="Una_Cadena";

Operadores.Operadores aritméticos:

Operador Significado Ejemplo

+ suma números y cadenas

- resta

* producto

/ división

% módulo (resto) 20 % 10 (= 0)

++ suma tipográfica variable++; ++variable; (variable = variable + 1)

-- (dos guiones) resta tipográfica variable--; --variable; (variable = variable - 1)

Operadores de asignación:

Operadores

Operadores de asignación:

Operador Significado Ejemplo Es igual a

= Asignación de datos x = 1;

+= Asignación y suma x += 1; x = x + 1;

-= Asignación y resta x -= 1; x = x - 1;

*= Asignación y

producto x *= 1; x = x * 1;

/= Asignación y división x /= 1; x = x / 1;

%= Asignación y módulo 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 menor que 5 < 8 es verdad

>= es mayor o igual que 5 >= 8 es falso

<= es menor o igual que 5 <= 1 es falso

Operadores

Operadores lógicos:

Operador Significado Ejemplo

&& Y 1 == 1 && 2 < 1 es falso

|| O 1 == 2 || 15 > 2 es verdad

! NO !(1 > 2) es verdad

Operadores.

Expresiones

• Javascript posee los siguientes tipos de expresiones:

- Aritméticas: tienen valor numérico.

- Cadenas: tienen valor de cadena.

- Lógicas: 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 (condición) {

//instrucciones

}

else

{

//instrucciones

}

Estructuras condicionales.

switch ( expresión ) {case Valor_1: Instrucción o bloque de instrucciones;

[break;]case Valor_2: Instrucción o bloque de instrucciones;

[break;]case Valor_3: Instrucción o bloque de instrucciones;

[break;]...case Valor_N: Instrucción o bloque de instrucciones;

[break;][default:]Instrucción o bloque de instrucciones;

}

Estructuras de repetición.

Ejemplo:

• for (var i=1 ; i <= 10 ; i++) {

if ( i > 5) {

alert(“Mayor de 5”);

}

}

Estructuras de repetición.

Ejemplo:

cont = 0

while( cont<10 ) {

document.write(cont+"<br>");

cont++;

}

Estructuras de repetición.

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 matemáticas";• mensajes[5] = "Javascript permite usar objetos";• • • // Arreglo de imágenes• 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 función es un conjunto de sentencias o procedimientos que realizarán unas operaciones adecuadas, haciendo uso de determinadas variables y propiedades.

Sintaxis de funciones

function nombreFuncion(parametro1, parametro2, ... ) {

sentencia1;

sentencia2;

...

sentenciaN;

}

Ejemplo de función

• function ImprimeNombre(nombre) {document.write("<HR>Tu nombre es <B><I>");

document.write(nombre);

document.write("</B></I><HR>");

}

Ejemplo de función.

• 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 jerárquica 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, Características• Anchor marca anchor de HTML <a >• Applet applet de Java• Button campo INPUT HTML de tipo "button"• Checkbox campo INPUT HTML tipo "checkbox"• Date permite trabajar con fechas• Document página HTML• Form formulario HTML• History lista de las páginas Web visitadas• Link enlace de hipertexto• Location URL• Math constante o función matemática• Password campo INPUT tipo "password"• RadioButton campo INPUT tipo "radiobutton"• Reset campo INPUT tipo "reset"• Selection texto en un campo TEXTAREA o INPUT• String cadena de texto• Submit 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 interacción entre un usuario con algún elemento de la interfaz gráfica que se le presenta.

• Ejemplos:– Hacer clic sobre un botón.– Cambiar el contenido de un campo de texto.– Mover el apuntador del ratón sobre un enlace.

Eventos

• Para cada tipo de evento hay que tener en mente tres elementos: quién lo genera, cuándo ocurre y cuál es el manejador de eventos que se debe utilizar.

• La tabla que sigue resume la mayoría los eventos definidos por JavaScript, junto con los elementos relacionados a ellos para su programación.

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 Validación 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 envíen 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 más 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 función para el evento “submit” (manejador de evento “onsubmit”) del objeto “Form” (formulario).

• Se escribe el código para la validación en esta función.

• Si al menos un campo no cumple los requisitos para la validación, la función debe regresar un valor “false” (cancela el envío del formulario).

• Si todos los campos cumplen la validación, la función debe regresar un “true” (se permite el envío del formulario).

Ejemplo para validar formulario.• Suponer el siguiente formulario donde se

desea que sea obligatorio que el usuario introduzca su nombre:

• Analizar el código de la página:

Ejecución de la página.

• Probar la página en varias situaciones, cuando falta el nombre:

4.6 Cookies.

Cookies

• En la programación para navegadores el término cookie (galleta) se interpreta como una cadena de no más de 256 caracteres, que puede ser guardada en el cliente de forma explícita desde una página o servidor Web.

• Las cookies permiten entonces guardar una pequeña cantidad de información 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 expiración de la misma.

Cuando no se indica, expira con la sesión del usuario.• - ruta y path: indican el URL de la página 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 comunicación entre cliente y servidor es segura.

Cookies

• En JavaScript la cadena que se utiliza para la consulta y manipulación 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 métodos tales como substring, charAt, indexOf y lastIndexOf para determinar los valores guardados en la cookie.

Cookies

• Una forma básica para escribir una cookie:

document.cookie='ejemplo=cookie'

• Forma básica para leer una cookie:

alert(document.cookie);

document.write(document.cookie);

Cookies

Como ejemplos de uso de cookies:

• Número de veces que algún usuario ha visitado una página.

• Llevar una historia personalizada de los elementos que se llevan en un carrito electrónico.

• Guardar preferencias del usuario.

Ejemplo del uso de cookies.

• Ver el ejemplo funcionando.

Código de la página que guarda (escribe) la cookie.

Código de la página que lee la cookie.

4.7 Consideraciones del soporte del navegador.

• Existen unos organismos que definen cómo 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 cuáles soportan.

4.7 Consideraciones del soporte del navegador.

• En las aplicaciones Web se deben considerar los diferentes navegadores que los usuarios usarán para acceder a la aplicación.

• La aplicación se debe probar con los navegadores más frecuentes, con el propósito de comprobar la correcta visualización y funcionamiento de las páginas.