HTML PDF

75.43 Introduccin a los Sistemas Distribuidos 75.
33 Redes y Teleprocesamientos I
1 Cuatrimestre 2005 " Breve Introduccin a
HTML, PHP y JavaScript"
FIUBA
Gabriel Frymer y Mara 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 vnculos de hipertexto. Cada browser presenta la pgina escrita en HTML de acuerdo a su estructura de Markup. La forma exacta de interpretacin depende de cada browser, por ejemplo los browsers visuales tales como IE y NN presentan las pginas en pantalla, en cambio, los browsers para no videntes van a leer el contenido de acuerdo al Markup. Una pgina 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 versin 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 grfico, agregando al HTML soporte para imgenes, 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 organizacin con soporte industrial para la estandarizacin y desarrollo del Web. 1997: Se crea el primer estndar de HTML: HTML 3.2 1999: (Diciembre): HTML 4.01 es la recomendacin del W3C, que empieza a separar claramente la estructura del documento de los aspectos de la presentacin 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 estndar estricto enfatizando la estructura sobre la presentacin y usando elementos de presentacin y atributos que estn marcados como deprecated (cuyo uso se abandonar a corto plazo).
75.43 Introduccin a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I Breve Introduccin a HTML, PHP y JavaScript
Se pueden especificar estilos de presentacin para elementos individuales y agregar diferentes estilos de presentacin 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 pginas XHTML se pueden procesar fcilmente con herramientas de XML.
2000 (Enero): el W3C lanza XHTML 1.0 como una reformulacin 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 declaracin 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 recomendacin Modularization of XHTML agrupando elementos de XHTML relacionados en mdulos definidos por XML DTD Fragments. Esta organizacin modular hace que XHTML sea ms flexible y extensible. 2002 (Agosto): se lanza el XHTML 2.0 working draft que actualiza los mdulos, elimina el soporte para elementos deprecated y arma una base para la evolucin futura de XHTML. HTML
Una pgina Web contiene dos partes: etiquetas de identificacin del Markup, llamados tags y contenido. Los tags estn enmarcados entre los smbolos < 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 finalizacin. 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 pgina HTML sencilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="es"> <head>
FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)
<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 lnea nos indica el tipo de documento un documento HTML y que su versin es la 4.01. En la segunda lnea 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 espaol y no ingls que el standard por defecto. El documento se cierra mediante el tag </HTML> como ltima lnea del documento que tomar en cuenta el browser. Entre estos dos tags se encontrarn todos los dems de la pgina. En la tercera lnea aparece <HEAD>, debajo de este tag se ubicar la cabecera de la pgina y que contiene la informacin 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 ttulo de la pgina, que se cerrar mediante </TITLE>. El tag <body> marca el comienzo del contenido de la pgina que mostrar el browser.
No todos los usuarios pueden apreciar las pginas web de la misma manera, esto se debe a varios motivos:

Pequeas diferencias entre los browsers. No todos los usuarios tienen instaladas las mismas fuentes. Diferentes resoluciones de pantalla. Tamao de la ventana.
Comentarios En HTML los comentarios se debern encerrar entre . Informacin para los ndices de los buscadores (tag META) Mediante este tag, podemos brindar informacin sobre caractersticas 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 usarn los buscadores. 3. HTTP-EQUIV: mediante este atributo, podemos modificar las cabeceras HTTP que se envan al cliente. Por lo tanto, si el documento est escrito en japons, el browser podr interpretarlo correctamente.
<META http-equiv=Content-Type content=text/HTML; charset=EUC-JP />
Imgenes Para utilizar imgenes en nuestras pginas usamos el tag <IMG> y algunos de sus atributos son. 1. ALIGN: la alineacin de la imagen con respecto al texto. (LEFT, RIGHT, BOTTOM, TOP, MIDDLE, CENTER) 2. ALT: Ya que hay muchos browsers que no pueden mostrar imgenes, es importante poner la descripcin de cul es la imagen que viene aqu. Tambin, pensar que la pgina 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 opcin solo se usa si el archivo est fsicamente en otro servidor).
<IMG src=imgenes/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 alineacin. 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 mrgenes entre cada celda de la tabla. d. SUMMARY: cumple la misma funcin que el ALT. e. BORDER: define el tamao del borde de la tabla. La tabla contiene los siguientes tags: 2. <THEAD>: comienza las lneas que son los ttulos de las columnas, si tiene y termina con </THEAD> . Muchas pginas tienen ttulos pero se expresaron como lneas comunes, lo cual hace compleja su comprensin para una persona no vidente que usa un lector automtico. 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.
ii. VALIGN: especifica la alineacin 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 informacin 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 informacin 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: tamao 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érez</td> <td>5</td> </tr> <tr> <td>Julieta Díaz</td> <td>4</td> </tr> </tbody> </table>
Formularios Se usan los formularios para que el usuario pueda ingresar informacin que ser procesada en el servidor. El formulario es una seccin del documento que contiene, adems 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 enviarn los datos ingresados.
3. METHOD: define el comando HTTP a travs del cual sern enviados los datos. Las opciones son GET (se enviarn a travs de la URL) o POST (se enviarn en la parte de datos del pedido HTTP). 4. ENCTYPE: establece la forma en la cual se debern codificar la informacin ingresada por el usuario, por ejemplo: a. application/x-www-form-urlencoded: la forma tradicional en la cual, se enviarn los datos ingresados como: NOMBRE_DEL_CAMPO=VALOR_INGRESADO y separados por el signo &. Adems, se codificarn los espacios con el signo + y los caracteres no alfanumricos se codificarn como %HH, su cdigo 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 envo. Este tipo de codificacin 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 informacin de distintos tipos. No tiene tag de cierre. Algunos de sus atributos son: a) TYPE: el tipo de control que podra ser i) Text: textbox comn ii) Password: para ingresar un password, muestra **** cuando se escribe en este campo) iii) iv) Radio: botones de opcin Checkbox: botones de verificacin o chequeo
v) File: para enviar un archivo, el browser muestra un texto seguido de un botn 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 parmetro o informacin de control de una pgina a la siguiente. La aplicacin en el server recibe la informacin de este campo igual que los otros campos. vii) Button: para ejecutar acciones a travs de JavaScript
viii) Submit: botn especial para enviar los datos al server y a la aplicacin especificada en la URL de ACTION ix) Reset: restablece el formulario a sus valores por defecto x) Image: cumple la misma funcin que Submit, pero se muestra una imagen en vez del botn. Tambin enva 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 tamao del cuadro que dibuja en la pgina. e) MAXLENGTH: la cantidad mxima de caracteres permitidos para el ingreso. f) CHECKED: si el usuario no selecciona ninguna de las opciones, sta es la opcin por defecto. 2) <SELECT> ... </SELECT>: seleccin 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 pgina. Si el tamao es 1: se muestra un combobox, y si es mayor es un listbox. c) MULTIPLE: permite seleccionar ms de una opcin usando CTRL o SHIFT. d) Cada opcin del select se especifica entre los tags <OPTION> y </OPTION>, que es la que se muestra en la pgina. 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 sern visibles. c) COLS: cantidad de columnas visibles. StyleSheets
Para mantener una apariencia coherente y consistente ("look & feel") de todas las pginas pertenecientes a un mismo tema, se deben definir los estilos de tipos, colores, etc., a usar en los diferentes tags del HTML. El diseo de la apariencia de cada pgina y como se debe mostrar en el browser corresponde a personas con formacin en diseo grfico, publicidad y comunicacin social. En base al diseo de las pginas, los patrones comunes se pueden agrupar en hojas de estilo (StyleSheets). El lenguaje para la especificacin 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 especificacin separada. El browser obtiene la pgina, en la cual se especifica cual es la hoja de estilos que debe aplicar. El archivo CSS se relaciona con la pgina HTML a travs 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 pgina. Cada estilo se aplicar a un selector, que puede ser uno o ms 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 pgina 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>
PHP (Acrnimo recursivo para PHP: Hypertext Preprocessor)

Server-Side Scripting. El manual completo est en http://www.php.net/manual/es. PHP es un lenguaje de cdigo abierto interpretado, de alto nivel, empotrado en pginas HTML y ejecutado en el servidor. Es un lenguaje cuyas instrucciones son semejante al "C", empotradas entre tags HTML. Cuando se invoca una pgina PHP desde un browser, el servidor WEB pasa el archivo correspondiente al mdulo PHP. El preproceso de las instrucciones PHP genera la pgina que ser presentada por el browser. Para indicarle al preprocesador donde se encuentra el cdigo PHP hay distintas formas de enmarcarlo: 1) <? y el cdigo escrito en PHP, terminando con ?> se usa en general cuando hay poco procesamiento y es muy usada. 2) <?php y el cdigo escrito en PHP y terminando con ?> es mas claro que el cdigo es php. 3) <script languaje="php"> y el cdigo 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 marcarn esa lneas como errneas al validarlas. Tambin 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 exista un forma compatible con ASP: <% cdigo %>, actualmente fuera de uso. Variables Por ser un lenguaje con tipado dbil, las variables no deben ser declaradas, sino que toman el tipo del valor cuando son asignadas. Para definirlas, se preceden con el smbolo $ seguido del nombre de la variable. El tipo de dato se establecer segn el contenido de la misma en el momento de la asignacin. Si se asigna un nmero entonces ser un integer o double, si se le asigna una cadena de caracteres, ser un string. Las variables se adaptan dinmicamente. Tambin 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)
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 tamao 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 pseudocdigo. Todas las instrucciones terminan con ; (punto y coma). Las instrucciones son: Asignacin y operadores aritmticos, de strings, bitwise, boolean y de comparacin: tienen la misma estructura que en el lenguaje "C" if
Formato tipo "C" if (expresin_lgica) { instrucciones } elseif { instrucciones } else { instrucciones }; Formato PHP if (expresin_lgica) : instrucciones elseif : instrucciones else instrucciones endif; Formato PHP switch (expresin): case expresin: instrucciones break; case ... default: instrucciones endswitch; Formato PHP }; while (expresin_lgica) : instrucciones endwhile;
switch
Formato tipo "C" switch (expresin) { case expresin: instrucciones break; case ... default: instrucciones };
while
Formato tipo "C" while (expresin_lgica) { instrucciones
do/while
10
Formato nico do { instrucciones }while (expresin_lgica);
for
Formato tipo "C" for (expr_comienzo; condicin; expresin_iteracin) { instrucciones Formato PHP for (expr_comienzo; condicin; expresin_iteracin) : instrucciones endfor;
};
Funciones La funciones se declaran de una forma similar al PASCAL, su sintxis 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 parmetros a los argumentos es por valor o por referencia, en este ltimo caso se antepone el smbolo & al smbolo $ del nombre de la variable. Formularios y arreglos del sistema Si la pgina HTML contiene un formulario. Los datos ingresados por el usuario se reciben en arreglos globales. Los mismos son: $_POST[] y $_GET[], dependiendo del mtodo 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];
Tambin, existe un array $_SERVER que contiene informacin 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 direccin IP del usuario. $_SERVER[HTTP_ACCEPT_LANGUAGE]: devuelve el contenido de la cabecera ACCEPT_LANGUAGE del pedido HTTP.
11
Sesiones y cookies Si se necesita mantener informacin entre pginas sucesivas. La aplicacin que genera una pgina finaliza cuando termina de generar la pgina, por lo tanto se requiere de una forma de pasar informacin, del tipo parmetros, entre una ejecucin y la siguiente de una aplicacin. Para resolver este problema, existen las sesiones que permiten guardar el estado de un usuario particular, cuya informacin se puede recuperar cuando llegue el siguiente pedido. Se guarda en el disco del servidor un archivo temporal con los datos de la sesin de un usuario en particular y al mismo se le devuelve un identificador de la sesin. La prxima vez que se conecte, el usuario enviar el identificador y el sistema traer los datos que tena guardados. Para crear una sesin en PHP usamos la funcin: session_start( ). Una vez creada, se registran las variables que deseamos mantener a travs de la funcin session_register(nombrevariable). Finalmente para acceder al contenido de la variable, se utiliza otra array global: $_SESSION[ ]. Las sesiones tienen asociado un tiempo de expiracin. 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 pequeos 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, podramos guardar en una cookie el ltimo nombre de usuario conectado. Se accede a las cookies por medio del array: $_COOKIES[ ].
12
JavaScript
Client_Side Scripting. Hay mltiples manuales con diferentes instrucciones de acuerdo al browser, como se explica a continuacin. 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 versin 1.5. Los browsers actuales corren sobre mquinas poderosas, por lo tanto, ellos pueden hacer parte del trabajo, adems de la presentacin. Ejemplos: sitios WEB que tienen modelos en 3 dimensiones de protenas, etc. y que permite ver la estructura rotando en 3 dimensiones bajo control del usuario, en una ventana del browser. Para ello se usa cdigo 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 especificacin (standard) N 262, describe un lenguaje ECMAScript como un "lenguaje de programacin multiplataforma de propsitos generales". Este lenguaje fue desarrollado a partir de JavaScript 1.1, y hoy es el ncleo 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 implementacin de Microsoft de la recomendacin ECMAScript. Se agrega una tabla con las compatibilidades:
Netscape versin browser 2.0x 3.0x 4.0 - 4.05 4.06 - 4.61 5.0 6.0 versin JavaScript 1.0 1.1 1.2 1.3 1.4 1.5 Internet Explorer versin browser 3.0 4.0 5.0 6.0 versin JavaScript 1.1 (parcial) 1.2 1.3 - 1.4 (parcial) 1.5
JavaScript NO ES JAVA, est basado en objetos (propiedades, mtodos, eventos) pero no est orientado a objetos (no tiene herencia, polimorfismo, etc.). Lo nico que comparte
13
con Java es la sintaxis y que usa objetos (salvo tipos de datos fundamentales como int o boolean). JavaScript en las pginas HTML El objeto raz se llama window. Algunas de sus propiedades son location que es la URL document que es el padre del documento HTML.
Para incluir cdigo JavaScript, utilizamos el tag especial:

<SCRIPT LANGUAGE=JavaScript> cdigo JavaScript </SCRIPT>
Si hay funciones que se usan en varias pginas conviene agruparlas en un solo archivo y en las pginas 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 dbiles. El tipo de las variables se define segn su contenido. Las funciones se declaran: function nombre_funcin (Arg1, Arg2, ..., Argn) Un tag del formulario puede contener el atributo onsubmit cuyo valor identifica una funcin JavaScript que se debe correr. La funcin devuelve un valor boolean y el proceso de envo (Submit) solo se efecta 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 cdigo para una funcin JavaScript del tipo ConfirmaOrden se declara en el head de la pgina. A las funciones se les pueden pasar argumentos tales como forms . El cdigo JavaScript puede acceder a los datos ingresados en los campos seleccionados de la estructura. El siguiente fragmento ilustra parte del cdigo de verificacin:
<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;
14
} 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 > Tamao 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 botn Orden de compra, se produce el evento "Submit " para el formulario. El atributo onSubmit requiere que se ejecute la funcin ConfirmaOrden que recibe un argumento que es una referencia al formulario. La funcin le pasa una referencia al campo cliente a la funcin auxiliar emptyField, que verifica que el string no est vaco. Si est vaco, el browser muestra una alerta informando al usuario que faltan datos. As tambin se podran calcular precios, etc. El objeto window se antepone por defecto (tal cual el this en C++), es por ello que alert es un mtodo de window y acta como un messagebox con un botn 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=cdigo javascript />
Este cdigo 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.
15

HTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML PDF

Uploaded by

Copyright:

Available Formats

75.43 Introduccin a los Sistemas Distribuidos 75.

HTML, PHP y JavaScript"

Gabriel Frymer y Mara Feldgen

HTML (HyperText Markup Language)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

PHP (Acrnimo recursivo para PHP: Hypertext Preprocessor)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

Formato nico do { instrucciones }while (expresin_lgica);

Funciones La funciones se declaran de una forma similar al PASCAL, su sintxis es:

Como se procesa en PHP:

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

Para incluir cdigo JavaScript, utilizamos el tag especial:

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

FIUBA 75.43/75.33 (Gabriel Frymer y Mara Feldgen)

You might also like