HTML (HyperText Markup Language)
Anuncio
75.43 Introducción a los Sistemas Distribuidos
75.33 Redes y Teleprocesamientos I
1° Cuatrimestre 2005
" Breve Introducción a
HTML, PHP y JavaScript"
FIUBA
Gabriel Frymer y María Feldgen
HTML (HyperText Markup Language)
Manual completo: buscar en http://www.w3.org/ MarkUp/ y buscar HTML 4.01.
HTML es un lenguaje de Markup basado en el SGML (Standard Generalized Markup
Language), al cual se le agregaron vínculos de hipertexto. Cada browser presenta la
página escrita en HTML de acuerdo a su estructura de Markup. La forma exacta de
interpretación depende de cada browser, por ejemplo los browsers visuales tales como IE
y NN presentan las páginas en pantalla, en cambio, los browsers para no videntes van a
leer el contenido de acuerdo al Markup.
Una página escrita en HTML puede ser creado mediante cualquier editor de texto ya que
se trata de un simple archivo de texto.
Historia de HTML
•
1989: Tim Berners-Lee en el CERN (European Laboratory for Particle Physics)
define un versión muy simple de HTML basado en SGML (Standard Generalized
Markup Language), como parte de un sistema basado en red para compartir
documentos por medio de browsers de texto y que fuera simple de aprender y
mostrar.
•
1992-3: un grupo del NCSA (National Center for Supercomputing Applications,
USA) desarrolla el MOSAIC, un browser visual y gráfico, agregando al HTML
soporte para imágenes, listas anidadas y formularios. Fue el inicio del WEB.
•
1994: Varias personas del grupo de MOSAIC ayudan a empezar a Netscape.
•
1994: Se forma el W3 Consortium (W3C) con sede en el MIT, como una
organización con soporte industrial para la estandarización y desarrollo del Web.
•
1997: Se crea el primer estándar de HTML: HTML 3.2
•
1999: (Diciembre): HTML 4.01 es la recomendación del W3C, que empieza a separar
claramente la estructura del documento de los aspectos de la presentación y que
especifica claramente las relaciones entre HTML y los client-side scripts
(JavaScripts).
HTML 4 viene en 3 diferentes tipos: Strict, Transitional y Frameset. Los últimos
dos permiten a los autores pasar del estándar estricto enfatizando la estructura sobre la
presentación y usando elementos de presentación y atributos que están marcados
como deprecated (cuyo uso se abandonará a corto plazo).
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
Se pueden especificar estilos de presentación para elementos individuales y agregar
diferentes estilos de presentación para diferentes tipos de elementos con style sheets.
HTML 4.01 no está basado en XML. Agregarle a HTML la sintaxis estricta del XML
tiene las siguientes ventajas:
•
los elementos de XHTML se pueden usar con otros elementos definidos por XML
•
las páginas XHTML se pueden procesar fácilmente con herramientas de XML.
•
2000 (Enero): el W3C lanza XHTML 1.0 como una reformulación de HTML 4 .01
bajo la sintaxis estricta de XML. Para soportar los tres tipos de HTML 4,
XHTML 1.0 provee tres DTD's (Document Type Definitions) y que indican el tipo en
la declaración DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
En el primero no se aceptan elementos o atributos deprecated. Muchos browsers no
respetan estas disposiciones y los presentan igual.
•
2001 (Abril): el W3C lanza la recomendación Modularization of XHTML agrupando
elementos de XHTML relacionados en módulos definidos por XML DTD Fragments.
Esta organización modular hace que XHTML sea más flexible y extensible.
•
2002 (Agosto): se lanza el XHTML 2.0 working draft que actualiza los módulos,
elimina el soporte para elementos deprecated y arma una base para la evolución
futura de XHTML.
HTML
Una página Web contiene dos partes: etiquetas de identificación del Markup, llamados
tags y contenido. Los tags están enmarcados entre los símbolos < y > y pueden tener
atributos o modificadores.
Como los tags pueden contener a su vez a otros tags (en forma de un árbol), deberá
entonces existir un tag de inicio y otro de fin. La diferencia entre los mismos lo da la
barra “/” antes del nombre, en el caso del tag de finalización. Si el tag no tiene contenido,
entonces la barra estará antes del signo mayor.
Formato:
<TAG atributo1=”valor1” atributo2=”valor2”>CONTENIDO</TAG>
Los tags son case-insensitive.
Como ejemplo, veamos un documento o página HTML sencilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="es">
<head>
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
2
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
<title>Primer HTML</title>
</head>
<body bgcolor="white">
<font color=”blue”><i>Hola Mundo!<br />Este es un ejemplo.</i></font>
</body>
</HTML>
•
La primera línea nos indica el tipo de documento un documento HTML y que su
versión es la 4.01.
•
En la segunda línea se abre el tag <HTML> para indicar que comienza un
documento HTML y es en el cual se puede agregar un atributo indicando que el
idioma empleado es español y no inglés que el standard por defecto. El
documento se cierra mediante el tag </HTML> como última línea del documento
que tomará en cuenta el browser. Entre estos dos tags se encontrarán todos los
demás de la página.
•
En la tercera línea aparece <HEAD>, debajo de este tag se ubicará la cabecera de
la página y que contiene la información para los "spiders" y "scrawlers" la usen
para armar los índices para los "searchers" (de los tags META y TITLE).
•
Luego del tag <TITLE> se colocará el título de la página, que se cerrará
mediante </TITLE>.
•
El tag <body> marca el comienzo del contenido de la página que mostrará el
browser.
No todos los usuarios pueden apreciar las páginas web de la misma manera, esto se debe
a varios motivos:
•
Pequeñas diferencias entre los browsers.
•
No todos los usuarios tienen instaladas las mismas fuentes.
•
Diferentes resoluciones de pantalla.
•
Tamaño de la ventana.
Comentarios
En HTML los comentarios se deberán encerrar entre “<!--“ y “-->”.
Información para los índices de los buscadores (tag META)
Mediante este tag, podemos brindar información sobre características del documento,
como por ejemplo:
1. AUTHOR: quien escribió el documento.
2. KEYWORDS: los spiders y scrawlers obtienen de este tag las palabras clave que
identifican al documento para armar los índices que usarán los buscadores.
3. HTTP-EQUIV: mediante este atributo, podemos modificar las cabeceras HTTP
que se envían al cliente. Por lo tanto, si el documento está escrito en japonés, el
browser podrá interpretarlo correctamente.
<META http-equiv=”Content-Type” content=”text/HTML; charset=EUC-JP” />
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
3
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
Imágenes
Para utilizar imágenes en nuestras páginas usamos el tag <IMG> y algunos de sus
atributos son.
1. ALIGN: la alineación de la imagen con respecto al texto. (LEFT, RIGHT,
BOTTOM, TOP, MIDDLE, CENTER)
2. ALT: Ya que hay muchos browsers que no pueden mostrar imágenes, es
importante poner la descripción de cuál es la imagen que viene aquí. También,
pensar que la página puede ser accedida por no videntes, quienes usan un lector
para navegarla, entonces es fundamental completar este campo.
3. WIDTH: ancho de la imagen (si no se especifica se toma el que viene con el
archivo, y en ese caso el browser debe esperar a que se cargue todo el archivo que
contiene la imagen).
4. HEIGHT: alto de la imagen (por default: lo mismo que para width)
5. SRC: indica el path al archivo, puede ser relativo o una URL completa (esta
última opción solo se usa si el archivo está físicamente en otro servidor).
<IMG src=”imágenes/foto1.jpg” width=”20” height=”30” align=”center” />
Tablas
Las tablas se usan para ordenar y alinear el texto en filas y columnas.
Los tags que definen una tabla son:
<TABLE>: comienza una tabla y termina con </TABLE>.
1.
Algunos de los atributos del tag de comienzo son:
a. ALIGN: define la alineación.
b. WIDTH: el ancho de la tabla, puede ser un porcentaje con lo cual,
ocupará una cantidad relativa a donde estará insertada la tabla.
c. CELLSPACING, CELLPADDING: definen los márgenes entre cada
celda de la tabla.
d. SUMMARY: cumple la misma función que el ALT.
e. BORDER: define el tamaño del borde de la tabla.
La tabla contiene los siguientes tags:
2. <THEAD>: comienza las líneas que son los títulos de las columnas, si tiene y
termina con </THEAD> . Muchas páginas tienen títulos pero se expresaron como
líneas comunes, lo cual hace compleja su comprensión para una persona no
vidente que usa un lector automático. Este tag contiene los siguientes tags:
a. <TR> y termina con </TR>: define una nueva fila. Algunos de sus
atributos son:
i. BGCOLOR: define el color de fondo para esa fila.
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
4
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
ii. VALIGN: especifica la alineación vertical de las columnas de esa
fila.
b. <TH> y termina con </TH>: define el titulo de una columna tiene los
mismos atributos que <TD>
3. <TBODY> y termina con </TBODY>: indica la información que contienen la
tabla. Este tag contiene los siguientes tags:
a. <TR> y termina con </TR> ver 2. a)
b. <TD> y termina con </TD>: es la información de una celda de una
columna. Algunos de sus atributos son:
i. COLSPAN: dice que este dato ocupará N columnas en vez de 1.
ii. ROWSPAN: lo mismo que COLSPAN pero para filas.
iii. WIDTH, HEIGHT: tamaño de la celda (siempre se debe usar
relativo en porcentaje).
<TABLE border=”1” cellpadding=”5” cellspacing=”0” width=”100%”
summary=”Calificaciones de los alumnos para el primer parcial”>
<thead>
<tr>
<th colspan=”2”>PRIMER PARCIAL – NOTAS</th>
</tr>
<tr>
<th width=”60%”><b>Nombre</b></th>
<th width=”40%”><b>Nota</b></th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan P&eacute;rez</td>
<td>5</td>
</tr>
<tr>
<td>Julieta D&iacute;az</td>
<td>4</td>
</tr>
</tbody>
</table>
Formularios
Se usan los formularios para que el usuario pueda ingresar información que será
procesada en el servidor. El formulario es una sección del documento que contiene,
además de tags de HTML, controles como textboxes, radio buttons, comboboxes, etc.,
que son distintos tipos de campos de ingreso de datos.
Para definir un formulario se usa el tag <form> para su apertura y </form> para el cierre.
Algunos de los atributos mas frecuentemente usados del tag <form> son:
1. NAME: se debe dar un nombre único para identificarlo.
2. ACTION: especifica la URL a la cual se enviarán los datos ingresados.
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
5
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
3. METHOD: define el comando HTTP a través del cual serán enviados los datos.
Las opciones son “GET” (se enviarán a través de la URL) o “POST” (se enviarán
en la parte de datos del pedido HTTP).
4. ENCTYPE: establece la forma en la cual se deberán codificar la información
ingresada por el usuario, por ejemplo:
a. application/x-www-form-urlencoded: la forma tradicional en la cual, se
enviarán los datos ingresados como:
“NOMBRE_DEL_CAMPO=VALOR_INGRESADO”
y separados por el signo “&”. Además, se codificarán los espacios con el
signo “+” y los caracteres no alfanuméricos se codificarán como “%HH”,
su código ASCII en hexadecimal. (CR LF = “%0D%0A”)
b. multipart/form-data: cuando se necesita enviar datos en forma binaria (por
ejemplo: una imagen) es necesario utilizar otro esquema de envío. Este
tipo de codificación corresponde a los tipo MIME (Multipart Internet Mail
Excahnge). MIME tiene distintos tipos de codificaciones para distintos
tipos de contenidos. Por ejemplo:
Content-Type: multipart/form-data; boundary=CsD03x
--CsD03x
Content-Disposition: form-data; name=”dato_texto1”
Gabriel
--CsD03x
Content-Disposition: file; filename=”imagen_adjunta.gif”
Content-Type: image/gif
Content-Transfer-Encoding: binary
……archivo imagen_adjunta.gif…..
--CsD03x—
Los controles se definen con el tag <input>, <select> o <textarea>.
1) <INPUT>: se usa para que el usuario ingrese información de distintos tipos. No tiene
tag de cierre. Algunos de sus atributos son:
a) TYPE: el tipo de control que podría ser
i)
Text: textbox común
ii)
Password: para ingresar un password, muestra “****” cuando se escribe
en este campo)
iii)
Radio: botones de opción
iv)
Checkbox: botones de verificación o chequeo
v)
File: para enviar un archivo, el browser muestra un texto seguido de un
botón de Browse o Explorar, para que el usuario seleccione el archivo de entre los
archivos que tiene en sus carpetas locales
vi)
Hidden: el campo no se muestra al usuario, se usa como medio para pasar
un parámetro o información de control de una página a la siguiente. La aplicación en el
server recibe la información de este campo igual que los otros campos.
vii)
Button: para ejecutar acciones a través de JavaScript
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
6
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
viii) Submit: botón especial para enviar los datos al server y a la aplicación
especificada en la URL de ACTION
ix)
Reset: restablece el formulario a sus valores por defecto
x)
Image: cumple la misma función que Submit, pero se muestra una imagen
en vez del botón. También envía los datos de las coordenadas relativas dentro del cuadro
de la imagen en la cual el usuario hizo el "clic" con el Mouse
b) NAME: al igual que en el form, cada control debe tener un nombre único. Los
radio buttons y checkboxes que pertenecen a un mismo grupo deben tener el
mismo nombre.
c) VALUE: el valor por defecto (en el caso del textbox) o el valor que será enviado
al seleccionar ese radio button o checkbox. (NO SE PUEDE USAR PARA
PASSWORD!)
d) SIZE: define el tamaño del cuadro que dibuja en la página.
e) MAXLENGTH: la cantidad máxima de caracteres permitidos para el ingreso.
f) CHECKED: si el usuario no selecciona ninguna de las opciones, ésta es la opción
por defecto.
2) <SELECT> ... </SELECT>: selección de una o varias opciones, llamadas
comboboxes o listboxes. Algunos de sus atributos son:
a) NAME
b) SIZE: establece la cantidad de opciones visibles en un cuadro en la página. Si el
tamaño es 1: se muestra un combobox, y si es mayor es un listbox.
c) MULTIPLE: permite seleccionar más de una opción usando CTRL o SHIFT.
d) Cada opción del select se especifica entre los tags <OPTION> y </OPTION>, que
es la que se muestra en la página. Algunos de sus atributos son:
i)
value: establece el valor seleccionado,
ii)
Selected: valor seleccionado por defecto, si no se selecciona ninguno
expresamente.
e) Ejemplo:
<SELECT name=”pais” size=”1”>
<option value=”AR”>Argentina</option>
<option value=”UR”>Uruguay</option>
</SELECT>
3) <TEXTAREA>...</TEXTAREA>: se usa para ingresar textos largos. Algunos de sus
atributos son
a) NAME
b) ROWS: cantidad de filas que serán visibles.
c) COLS: cantidad de columnas visibles.
StyleSheets
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
7
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
Para mantener una apariencia coherente y consistente ("look & feel") de todas las páginas
pertenecientes a un mismo tema, se deben definir los estilos de tipos, colores, etc., a usar
en los diferentes tags del HTML. El diseño de la apariencia de cada página y como se
debe mostrar en el browser corresponde a personas con formación en diseño gráfico,
publicidad y comunicación social. En base al diseño de las páginas, los patrones comunes
se pueden agrupar en hojas de estilo (StyleSheets).
El lenguaje para la especificación de los estilos es el CSS (Cascading Style Sheets).
En cascada, significa que lo que se especifica para un tag será heredado por los tags
contenidos en el mismo, salvo que se especifique otro estilo para este tag.
Cada hoja de estilo es una especificación separada. El browser obtiene la página, en la
cual se especifica cual es la hoja de estilos que debe aplicar.
El archivo CSS se relaciona con la página HTML a través del tag LINK. Por ejemplo:
<LINK href=”estilos.css” rel=”stylesheet” type=”text/css” />
La ventaja es que se pueden cambiar estilos sin alterar la página.
Cada estilo se aplicará a un selector, que puede ser uno o más tags o clases. Por ejemplo:
BODY {
Font-family: “Times New Roman”;
Font-size: +1;
Color: #DD0000;
Text-Align: center;
}
.FONDO_GRIS {
Background-color: #999999;
}
Establece el tipo de letra para toda la página y una clase especial para definir un fondo
gris.
Cuando se especifica una clase para un tag, se usa el atributo “class”, por ejemplo:
<table class=”FONDO_GRIS”>
<tr><td>con fondo gris</td></tr>
</table>
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
8
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
PHP (Acrónimo recursivo para PHP: Hypertext Preprocessor)
Server-Side Scripting.
El manual completo está en http://www.php.net/manual/es.
PHP es un lenguaje de código abierto interpretado, de alto nivel, empotrado en páginas
HTML y ejecutado en el servidor.
Es un lenguaje cuyas instrucciones son semejante al "C", empotradas entre tags HTML.
Cuando se invoca una página PHP desde un browser, el servidor WEB pasa el archivo
correspondiente al módulo PHP. El preproceso de las instrucciones PHP genera la página
que será presentada por el browser.
Para indicarle al preprocesador donde se encuentra el código PHP hay distintas formas de
enmarcarlo:
1) <? y el código escrito en PHP, terminando con ?> se usa en general cuando hay
poco procesamiento y es muy usada.
2) <?php y el código escrito en PHP y terminando con ?> es mas claro que el código es
php.
3) <script languaje="php"> y el código escrito en PHP terminando con </script>, es
el mas elegante y obligatorio en los editores de HTML que no reconocen a los dos
anteriores como tags de PHP. Estos editores marcarán esa líneas como erróneas al
validarlas. También se recomienda su uso cuando se combina con JavaScript u otros,
para delimitar claramente las instrucciones de cada uno y así facilitar cambios futuros.
4) Para versiones anteriores a PHP 4 existía un forma compatible con ASP:
<% código %>, actualmente fuera de uso.
Variables
Por ser un lenguaje con tipado débil, las variables no deben ser declaradas, sino que
toman el tipo del valor cuando son asignadas.
Para definirlas, se preceden con el símbolo “$” seguido del nombre de la variable.
El tipo de dato se establecerá según el contenido de la misma en el momento de la
asignación. Si se asigna un número entonces será un integer o double, si se le asigna una
cadena de caracteres, será un string. Las variables se adaptan dinámicamente.
También pueden contener un arreglo, una instancia de una clase, etc.
Una variable puede tener el nombre de una variable como contenido y acceder al
contenido de la primera, usando como prefijo $$.
Por ejemplo:
$mivariable = 1;
$var = ‘mivariable’;
$$var == 1;
Arreglos (array)
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
9
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
Los arreglos son mapas ordenados, en los cuales a cada elemento del arreglo le
corresponde una clave y un valor. Es decir, que se puede acceder al elemento por su
orden en el arreglo o por su clave.
Como el arreglo es una variable, sus elementos pueden tener cualquier tipo de contenido.
De esta forma se pueden generar árboles, listas, diccionarios, etc., porque no está
preestablecido ni el tamaño ni el tipo de contenido de cada elemento.
Para asignar a una variable elementos que sean del tipo “array” :
$matriz = array(“listauno” => 1, “2” => array(3 => 1, 4 => “b”));
Instrucciones del lenguaje:
Tienen dos formatos posibles:
1) similar al "C"
2) propio de PHP, semejante a un pseudocódigo.
Todas las instrucciones terminan con ; (punto y coma).
Las instrucciones son:
Ø Asignación y operadores aritméticos, de strings, bitwise, boolean y de
comparación: tienen la misma estructura que en el lenguaje "C"
Ø if
Formato tipo "C"
Formato PHP
if (expresión_lógica) :
instrucciones
elseif :
instrucciones
else
instrucciones
endif;
if (expresión_lógica) {
instrucciones
}
elseif {
instrucciones }
else {
instrucciones };
Ø switch
Formato tipo "C"
Formato PHP
switch (expresión) {
case expresión:
instrucciones
break;
case ...
default:
instrucciones
};
switch (expresión):
case expresión:
instrucciones
break;
case ...
default:
instrucciones
endswitch;
Ø while
Formato tipo "C"
while (expresión_lógica) {
instrucciones
Formato PHP
};
while (expresión_lógica) :
instrucciones
endwhile;
Ø do/while
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
10
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
Formato único
do {
instrucciones
}while (expresión_lógica);
Ø for
Formato tipo "C"
for (expr_comienzo; condición;
expresión_iteración) {
instrucciones
Formato PHP
};
for (expr_comienzo; condición;
expresión_iteración) :
instrucciones
endfor;
Funciones
La funciones se declaran de una forma similar al PASCAL, su sintáxis es:
function
nombre_de_la_funcion ($arg1, $arg2, $arg3, ..., $argn) {
instrucciones de PHP;
return $valor_de_retorno;
}
Las funciones pueden devolver valores enteros simples y dobles, cadenas de caracteres,
arreglos u objetos.
El pasaje de parámetros a los argumentos es por valor o por referencia, en este último
caso se antepone el símbolo “&” al símbolo $ del nombre de la variable.
Formularios y arreglos del sistema
Si la página HTML contiene un formulario. Los datos ingresados por el usuario se
reciben en arreglos globales. Los mismos son: $_POST[] y $_GET[], dependiendo del
método indicado en el formulario.
Para acceder a un elemento del arreglo se puede usar la clave que lo identifica, en este
caso el nombre dado en NAME en el formulario. Todos los campos que se reciben son de
tipo string.
Tag HTML:
<input type=”text” name=”dato1” value=”valor1”>
Como se procesa en PHP:
echo $_POST[“dato1”] ;
$valordato1=$_GET[“dato1”];
También, existe un array $_SERVER que contiene información del server y variables de
ambiente.
Por ejemplo:
$_SERVER[“SERVER_PORT”]: devuelve el puerto en el cual escucha el servidor.
$_SERVER[“REMOTE_ADDR”]: devuelve la dirección IP del usuario.
$_SERVER[“HTTP_ACCEPT_LANGUAGE”]: devuelve el contenido de la cabecera
ACCEPT_LANGUAGE del pedido HTTP.
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
11
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
Sesiones y cookies
Si se necesita mantener información entre páginas sucesivas. La aplicación que genera
una página finaliza cuando termina de generar la página, por lo tanto se requiere de una
forma de pasar información, del tipo parámetros, entre una ejecución y la siguiente de
una aplicación.
Para resolver este problema, existen las sesiones que permiten guardar el estado de un
usuario particular, cuya información se puede recuperar cuando llegue el siguiente
pedido.
Se guarda en el disco del servidor un archivo temporal con los datos de la sesión de un
usuario en particular y al mismo se le devuelve un identificador de la sesión.
La próxima vez que se conecte, el usuario enviará el identificador y el sistema traerá los
datos que tenía guardados.
Para crear una sesión en PHP usamos la función: “session_start( )”. Una vez creada, se
registran las variables que deseamos mantener a través de la función
“session_register(nombrevariable)”.
Finalmente para acceder al contenido de la variable, se utiliza otra array global:
$_SESSION[ ].
Las sesiones tienen asociado un tiempo de expiración. Si se deben guardar en forma
permanente o por mucho tiempo, se deben usar archivos o bases de datos.
A diferencia de las sesiones, las cookies son pequeños archivos que se almacenan en el
cliente. Es por eso, que se deben adoptar solamente para ciertos casos ya que no siempre
el cliente está dispuesto a almacenarlas. Por ejemplo, podríamos guardar en una cookie el
último nombre de usuario conectado. Se accede a las cookies por medio del array:
$_COOKIES[ ].
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
12
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
JavaScript
Client_Side Scripting.
Hay múltiples manuales con diferentes instrucciones de acuerdo al browser, como se
explica a continuación. Se recomienda buscar un manual de JavaScript 1.5. El Quanta
Plus contiene un manual de JavaScript.
Otra referencia: http://www.programmershelp.co.uk/docs/javascript/contents.html
que tiene un manual de referencia versión 1.5.
Los browsers actuales corren sobre máquinas poderosas, por lo tanto, ellos pueden hacer
parte del trabajo, además de la presentación. Ejemplos: sitios WEB que tienen modelos
en 3 dimensiones de proteínas, etc. y que permite ver la estructura rotando en 3
dimensiones bajo control del usuario, en una ventana del browser. Para ello se usa código
que contiene controles tales como ActiveX y applets.
Las aplicaciones de e-commerce en general, no requieren de estos efectos, pero igual se
puede hacer trabajo en el cliente, por ejemplo, el tratamiento de errores (para verificarlos
antes de enviarlos al server) por medio de script-code, habitualmente.
El primero de estos, fue el LiveScript en 1995 (Netscape), luego fue renombrado como
JavaScript.
ECMA (European Computer Manufacturers Association) en su especificación (standard)
N° 262, describe un lenguaje ECMAScript como un "lenguaje de programación
multiplataforma de propósitos generales". Este lenguaje fue desarrollado a partir de
JavaScript 1.1, y hoy es el núcleo de los lenguajes llamados JavaScript y ECMAScript, o
dicho de otra forma, es la única semejanza entre ambos.
El Internet Explorer no soporta directamente JavaScript, intenta interpretarlo a partir del
lenguaje Jscript, que es la implementación de Microsoft de la recomendación
ECMAScript.
Se agrega una tabla con las compatibilidades:
Netscape
Internet Explorer
versión browser
versión JavaScript
versión browser
versión JavaScript
2.0x
1.0
3.0
1.1 (parcial)
3.0x
1.1
4.0
1.2
4.0 - 4.05
1.2
5.0
1.3 - 1.4 (parcial)
4.06 - 4.61
1.3
6.0
1.5
5.0
1.4
6.0
1.5
JavaScript NO ES JAVA, está basado en objetos (propiedades, métodos, eventos) pero
no está orientado a objetos (no tiene herencia, polimorfismo, etc.). Lo único que comparte
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
13
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
con Java es la sintaxis y que usa objetos (salvo tipos de datos fundamentales como int o
boolean).
JavaScript en las páginas HTML
El objeto raíz se llama “window”. Algunas de sus propiedades son
•
“location” que es la URL
•
“document” que es el padre del documento HTML.
Para incluir código JavaScript, utilizamos el tag especial:
<SCRIPT LANGUAGE=”JavaScript”>
… código JavaScript …
</SCRIPT>
Si hay funciones que se usan en varias páginas conviene agruparlas en un solo archivo y
en las páginas HTML que las usan se agrega:
<SCRIPT LANGUAGE=”JavaScript” SRC=”URL_del_archivo_javascrip” />
Por ejemplo:
<SCRIPT LANGUAGE=”JavaScript” SRC=”funciones.js” />
Variables, funciones y eventos
Al igual que PHP es un lenguaje con tipos débiles. El tipo de las variables se define según
su contenido.
Las funciones se declaran: function nombre_función (Arg1, Arg2, ..., Argn)
Un tag del formulario puede contener el atributo onsubmit cuyo valor identifica una
función JavaScript que se debe correr. La función devuelve un valor boolean y el
proceso de envío (Submit) solo se efectúa si el valor es true.
<form action = "http://www.xx.yy/orden.cgi name = pizzaform
onsubmit ="return confirmaOrden(pizzaform)
method = POST>
Regular <input type = radio name=p_size value=reg>
...
</form>
El código para una función JavaScript del tipo ConfirmaOrden se declara en el head de la
página. A las funciones se les pueden pasar argumentos tales como forms. El código
JavaScript puede acceder a los datos ingresados en los campos seleccionados de la
estructura.
El siguiente fragmento ilustra parte del código de verificación:
<HTML lang="es"><head><title>Pizza CyberMuzzarella </title>
<script languaje="javascript">
<!-function emptyField(textObj)
{
if (textObj.value.length == 0) return true;
for(var i = 0; i<textObj.value.length; i++) {
ch = textObj.value.charAt(i);
if (ch != ' ' && ch != '\t') return false;
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
14
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
}
return true;
}
function confirmaOrden(formObj)
{
if (emptyField(formObj.cliente) ) {
alert("Ud. se olvidó de ingresar su nombre");
return false;
}
// verificaciones similares para los otros campos
...
return true
}
// -->
</script>
</head>
<body><h1> Formulario para Ordenar una Pizza</h1>
<p> <form action = http://www.xx.yy/orden.cgi" name=pizzaform
onSubmit= "return confirmaOrden(pizzaform)" method=POST >
Tamaño de la pizza<p>
Regular <input type = radio name=p_size value=reg>
...
<p>Su nombre
<input type=text size=20 maxlenght=50 name=cliente>
...
<hr>
<input type=submit value="Orden de compra">
</form>
<hr>
Muchas gracias
</body></HTML>
Cuando el usuario activa el botón Orden de compra, se produce el evento "Submit" para
el formulario. El atributo onSubmit requiere que se ejecute la función ConfirmaOrden
que recibe un argumento que es una referencia al formulario. La función le pasa una
referencia al campo cliente a la función auxiliar emptyField, que verifica que el string no
esté vacío. Si está vacío, el browser muestra una alerta informando al usuario que faltan
datos. Así también se podrían calcular precios, etc.
El objeto window se antepone por defecto (tal cual el this en C++), es por ello que alert
es un método de window y actúa como un messagebox con un botón de ok.
Los handlers que manejen los eventos posibles de capturar para cada objeto, pueden
definirse directamente dentro de los tags HTML de la siguiente forma:
<TAG ATRIBUTOX=”VALORX” …. ONEVENTO=”código javascript” />
Este código será ejecutado cuando ocurra el evento deseado. Los eventos pueden ser:
onclick, onmouseover, onchange, onsubmit, etc., dependiendo del tipo de objeto (o tipo
de tag) al cual se asocian.
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
15
