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

Operadores

Operadores

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, Caractersticas

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
pgina HTML
Form formulario HTML
History
lista de las pginas Web visitadas
Link enlace de hipertexto
Location
URL
Math constante o funcin matemtica
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 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.