-
<TAG>Texto afectado</TAG>.
A pesar de que casi cualquier documento de texto puede ser cargado y visualizado a través de un browser, no todos los documentos son tratados como documentos HTML. Los siguientes son los tags mínimos que debería tener un documento HTML:
- <HTML> Le informa al browser que lo que sigue es un documento HTML.
- <HEAD> Le dice al browser que lo que sigue es información de encabezado (básicamente el título del documento).
- <TITLE> Le dice al browser que lo que sigue es el título del documento.
- <BODY> Le dice al browser que lo que sigue es el texto del documento.
<html>
<head>
<title>Título del documento</title>
</head>
<body>
Texto del documento HTML
</body>
</html>
1.2 Encabezados
Los encabezados son tags que resaltan el texto. HTML ofrece 6 diferentes tamaños de texto:
<h1>Texto</h1>
·
·
·
El texto con <h1> es el más grande, y va disminyendo de tamaño, hasta llegar al <h6>, el más pequeño.
1.3 Centrar texto
Para centrar texto, se usa el tag <center> de la siguiente manera:
<center>Este texto aparece en el centro</center>
1.4 Links
Los links son punteros a otros documentos en Internet.. Estos documentos son, por lo general, archivos HTML, aunque pueden tener distintos formatos:
- Un documento HTML: http://URL/archivo
- Un newsgroup: news://server/newsgroup
Ejemplo: news://usenet.ufl.edu/rec.arts.disney - Un sitio FTP: ftp://URL/path/archivo
Estos ejemplos pueden ser invocados directamente desde un browser copiando esas dirección en el área de Location. Sin embargo, pueden ser invocados desde otro documento HTML usando el siguiente tag:
<a href="objeto">Nombre del link</a>
donde "objeto" es un link válido como los ejemplos de arriba.
Ejemplo:
<a href="http://dcc.ing.puc.cl/~group>Taller de Groupware</a>
1.5 Imágenes
Los formatos típicos de imágenes que se pueden incluir en documentos HTML son: GIF y JPEG.
El tag para incluir una imagen en un documento HTML es el siguiente:
<IMG SRC="archivo">
Ejemplo: <IMG SRC="home.gif">
1.6 Backgrounds
El background es un atributo del tag BODY. Se puede escoger como background un color o una imagen. Para color hay cinco atributos en el tag BODY:
BGCOLOR: Color del background de la página.
TEXT: Color del texto de la página.
LINK: Color de los links NO visitados.
VLINK: Color de los links visitados.
ALINK: Color de los links activados. Es el color que aparece cuando se hace click en el link.
Ejemplo:
<body bgcolor="#CCFFCC" text="#0033FF" link="#9900FF" vlink="#AAAAAA" alink="#33FFFF">
Algunas veces se desea poner como background una imagen. El browser rellenará el background con copias de la imagen. El tag para hacer esto es el siguiente:
<body background="archivo">
Ejemplo:
<body background="bricks.gif" text="#FFFFFF" link="#00FFFF" vlink="#00AAAA">
1.7 Más información
Hay muchos sitios en Intener con tutoriales sobre HTML y sobre cómo hacer páginas Web. Algunos links recomendados son:
http://www.ramapo.edu/CCIS/htmltut.html
http://grove.ufl.edu/~u3063bnk/html.html
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
http://vobo.com.mx/Tutorial/cont/intro.html
http://www.iponet.es/~jspinte/internet.html
2. Introducción a JavaScript
JavaScript es un lenguaje de programación interpretado con características rudimentarias de orientación a objetos. El intérprete del lenguaje ha sido incorporado dentro del Netscape Navigator y otros Web browsers. Permite que un "contenido ejecutable" sea incluido dentro de una hoja HTML, lo cual hace que la hoja deje de ser estática, ya que se pueden incluir programas dinámicos que interactúan con el usuario, controlan el browser y dinámicamente crear contenidos HTML.
Sintácticamente el lenguaje JavaScript es similar a C, C++ y Java, con condicionales como if, ciclos while, etc. Sin embargo, JavaScript es un lenguaje sin tipos, es decir, las variables no tienen un tipo específico.
Ejemplo 2.1. Un programa JavaScript simple.
<HTML>
<BODY>
<SCRIPT LANGUAJE="JavaScript">
document.write("<h2>Tabla de factoriales</h2>");
for (i = 1, fact = 1; i < 10; i++, fact *= i) {
document.write(i + "! = " + fact);
document.write("<br>");
}
</SCRIPT>
</BODY>
</HTML>Como se puede ver en el ejemplo anterior, las marcas <SCRIPT> y </SCRIPT> son usadas para definir código JavaScript dentro de un archivo HTML. El método document.write() es usado para crear texto dinámicamente en una hoja HTML.
La siguiente figura muestra la hoja HTML del ejemplo anterior en el Netscape Navigator.
Figura 2.1. Página Web generada por el ejemplo 1. Ejemplo 2.2. Un formulario (form) HTML con un manejador de eventos JavaScript.
<HTML>
<FORM>
<INPUT TYPE="button"
VALUE="Haga Click"
onClick="alert('Usted presionó el botón')">
</FORM>
</HTML>En este caso hay un llamado a la rutina alert() de JavaScript cuando se produce el evento onClick, es decir, cuando se hace click en el botón.
La siguiente figura muestra lo que se visualiza en el browser al cargar la página del ejemplo anterior y presionar el botón.
Figura 2.2. Página Web generada por el ejemplo 2.
2.1 Qué puede hacer JavaScriptJavaScript es un lenguaje de programación de uso general. Algunas de las principales funciones de JavaScript se mencionan a continuación.
2.1.1 Control de la apariencia y contenido de documentos.
El objeto JavaScript Document, a través de su método write() permite escribir de forma arbitraria un documento HTML dentro de un documento previamente cargado. Se pueden generar documentos completos usando este método, sin que las hojas HTML existan previamente en disco. Esto puede reemplazar el uso tradicional de llamados a scripts CGI.
2.1.2 Control del browser.
Algunos objetos JavaScript permiten controlar el comportamiento del browser. El objeto Window contiene métodos para crear ventanas de diálogo para desplegar mensajes y obtener ciertos datos del usuario. Este objeto tiene métodos para crear nuevas ventanas en el browser, en las que se puede especificar el tamaño, la apariencia y los controles que se desean. El objeto Location permite cargar y desplegar el contenido de una dirección URL en cualquier ventana o "frame" del browser. El objeto History permite movernos hacia delante y hacia atrás en la historia de navegación del browser, simulando la acción de los botones "forward" y "back" del browser.
2.1.3. Interactuar con el contenido del documento.
El objeto Document y los objetos que éste contiene, permiten a los programas leer, y algunas veces interactuar con algunas partes del documento. Este objeto permite crear otros elementos como buttons, checkbox, hidden, password, radio, reset, select, submit, text y textarea. JavaScript permite leer estos elementos, procesar su contenido y generar código "en el aire" para crear nuevos documentos HTML según la información procesada.
2.1.4 Interactuar con el usuario.
JavaScript permite definir manejadores de eventos (event-handlers), es decir, piezas arbitrarias de código que se ejecutan cuando un evento particular se genera, por ejemplo, cuando se mueve el mouse por cierta área, cuando se ingresa un valor en un campo, cuando se presiona un botón, etc.
2.1.5 Leer y escribir "cookies".
Las "cookies" son un término Netscape para definir pequeños grupos de datos que pueden ser almacenados en la máquina del cliente de forma temporal o permanente. De esta forma, una página HTML puede "recordar" ciertos datos acerca de los clientes, por ejemplo cuando fue la última vez que ese cliente visitó ese sitio, o que ese cliente ya se ha registrado y obtenido su password, o que ese cliente tiene ciertas preferencias acerca de los colores o el diseño de las páginas Web.
2.1.6 Interacción con Applets.
A partir del Navigator 3.0, JavaScript puede interactuar con applets de Java que están corriendo en el browser. Esto se hace a través de "LiveConnect", una capa de comunicación que permite a los applets de Java, los plug-ins de Netscape y los scripts de JavaScript "hablar" entre ellos e invocar sus métodos.
2.1.7 Manipular imágenes
A pertir de Netscape 3.0, y a través del tag <IMG>, JavaScript puede cambiar el despliegue de las imágenes. Esto permite crear sofisticados efectos, como permitir que una imagen cambie cuando el mouse pasa sobre ella, o cuando el usuario presiona un botón.
2.1.8 Muchas más facilidades.
- Ejecutar cálculos arbitrarios (como el primer ejemplo que vimos) y muchas funciones matemáticas.
- El objeto Date simplifica el proceso de interactuar con fechas y horas.
- El método window.setTimeout() permite a un bloque de código JavaScript ser ejecutado algún número de milisegundos en el futuro.
- El objeto Navigator contiene variables que especifican el nombre y versión del browser que está corriendo, así como la plataforma sobre la que está corriendo.
- A partir del Navigator 3.0, el vector navigator.plugins[] especifica cuáles plug-ins están instalados en el browser.
3. Qué cosas no puede hacer JavaScript- No tiene capacidades gráficas, excepto la habilidad de desplegar y configurar imágenes.
- No se permite leer ni escribir archivos.
- No tiene capacidades de red, excepto las de cargar hojas desde URLs.
- No tiene capacidades multithreads.
4. Explorando JavaScript
En el ejemplo 2.1 se mostró cómo hacer un documento HTML con un script de JavaScript que calculaba el factorial desde 1 a 10. Es posible en Navigator omitir ciertas partes propias de documentos HTML, como los tags <HTML>, <HEAD> y <BODY>. El siguiente documento hace lo mismo que el ejemplo 2.1:
<SCRIPT>
document.write("<h2>Tabla de factoriales</h2>");
for (i = 1, fact = 1; i < 10; i++, fact *= i) {
document.write(i + "! = " + fact);
document.write("<br>");
}
</SCRIPT>
También es posible usar el área Location del Navigator browser para ejecutar comandos JavaScript "en línea". Intente ejecutar los siguientes comandos desde el campo Location del browser:
- javascript:5%2
- javascript: x = 3; (x < 5)? "x es menor": "x es mayor"
- javascript:d = new Date(); typeof d;
- javascript:for (i=0, j=1, k=0, fib=1; i<10; i++, fib=j+k, k=j, j=fib) alert(fib);
El último ejemplo calcula la serie de Fibonacci desde 1 hasta 10. Este mismo ejmplo puede hacerse de la siguiente manera en un documento HTML:
<SCRIPT>
document.write("<h2>Tabla de Números de Fibonacci</h2>");
for (i=0,j=1,k=0,fib=1; i<10; i++, fib=j+k, k=j, j=fib) {
document.write("Fibonacci(" + i + ") = " + fib);
document.write("<br>");
}
</SCRIPT>
4.1 Comentarios
En el código JavaScript se pueden hacer comentarios al estilo C y C++. Cualquier cosa entre // y el final de la línea, se toma como comentario, así como el texto entre /* y */
4.2 Strings
Algunas de las principales funciones de strings se muestran en los siguientes ejemplos:
s = "Hello," + " world" // Produce el string "Hello, world"
saludo = s + "!!!" // Produce el string "Hello, world!!!"
saludo.length // 15
car = s.charAt(s.length - 1) // car = "d"
sub = saludos.substring(1,4) // sub = "alu"
i = saludos.indexOf("o") // 4
4.3 Otros ejemplos
- Booleanos y cláusula if:
b = b + 1; // o b++
else
a = a + 1;- Funciones:
return x*x;
}
- While:
while (cont < 10) {
document.write(cont + "<br>");
cont++;
}- For y Break:
if (a[i] == clave)
break;
}- Continue:
if (a[i] == null)
continue;
total += a[i];
}- Más información
http://www.webreference.com/javascript/
http://dezines.com/dezines/javalinks.html
- Último ejemplo:
var atributos = 'toolbar=no,location=no,directories=no,'; atributos += 'status=no,menubar=no,scrollbars=no,';
atributos += 'resizable=yes,copyhistory=no,width=300,';
atributos += 'height=150';function fnOpcion(op) {
if (op == 1) {
ventana = window.open('','',atributos)
var doc = "<html><title>Título de la ventana</title><br>"
doc += "<br><center><h3>" + self.document.frm.texto.value
doc += "</h3><br><form><input type=button value=Cerrar"
doc += " onclick=self.close()></center></html>"
ventana.document.write(doc)
ventana.document.close()
}
if (op == 2) {
self.close();
}
}
</script>
<br><br>
<form name="frm">
<center>Mensaje: <input type=text name="texto" size=30>
<br><br><br>
<input type=button value="Crear ventana" onclick="fnOpcion(1)">
<input type=button value="Cerrar el browser" onclick="fnOpcion(2)">
</center>
</form>
Figura 4.1. Resultado del último ejemplo Problemas son cada vez de mayor tamaño - Problemas cada vez más especializados
- Soluciones requieren aptitudes diferentes
