INICIO | QUIENES SOMOS | TECNOLOGIA | 3D/ANIMACION
Tecnología: Creación de páginas web: JavaScript
Enlaces de interés:

http://www.w3.org/, Home page de CSS en W3C.
http://www.dannyg.com El apostol del JavaScript nos ofrece todos sus secretos, muy recomendable el mapa de objetos de JavaScript.
http://developer.netscape.com página oficial de JavaScript (Netscape)
Tutoriales hay muuuchos en Internet, ya sabes, vete a un buscador, por ejemplo el Google o Altavista y te saldrán cientos de ellos. Y en los enlaces recomendados en la página principal de tecnología encontrarás más.
JavaScript es un lenguage de programación orientado a objetos. Sobre este concepto hay voces puristas que se alzan en contra de de esta definición de JavaScript. Estas voces aseguran que no se le puede considerar estrictamente Lenguage de Programación porque no cumple todos los requisitos para ser considerado como tal. No queremos meternos en este tema ya que lo único que nos interesa es dar una pequeña introducción a lo que es, como funciona y que conocimeintos mínimos necesitamos para utilizarlo-programarlo. Otra cosa importatne a tener en cuenta es que JavaScript NO es JAVA. Son diferentes lenguages y sirven y se utilizan para cosas diferentes.
Lo primero es aclarar que JavaScript no es un lenguaje de programación al uso, por ejemplo, no se compila y se genera un ficherito que luego se ejecuta, sino que está "embebido" dentro del código HTML. De hecho, nació con la idea de dar interactividad a HTML. Esto es, antes de su existencia las páginas HTML eran muy estáticas. Podias leer la página e incluso rellenar algún formulario y poco más.
Actualmente JavaScript se utiliza mayoritariamente para validar formularios y para dar un poco de alegría a una página HTML (cambio de imágenes al pasar por encima el ratón, y DHTML y lo más importatne, realizar validaciones de formularios en cliente, es decir, en tu propia máquina, sin tener que realizarlas en el servidor, con el consiguiente tiempo requerido y ocupación innecesaria de tu línea) Lo que nos permite es el concepto de "capturar eventos" es decir, enterarse de que está pasando en la página (el ratón se mueve, pulsa sobre algo, ha cambiado un valor del formulario, etc) y realizar alguna acción en consecuencia (abrir una nueva ventana, darle alguna información mediante una ventana modal, validar que en un campo teléfono ha introducido solo números, etc)
Actualmente estamos en la versión 1.3 que se supone soportan el Internet Explorer 5.0 y superior y el Netscape Communicator 4.5 y superior. Pero el el mundo de Internet los desarrolladores ya sabemos que la gran lucha y el gran handicap que tenemos son las diferentes versiones de los navegadores (incluso del mismo distribuidor) y las diferentes interpretaciones del JavaScript en cada uno de ellos.
Aún así, para cosas sencillitas como validación de un formulario e incluso el cambio de imagen al pasar por encima "parece" que si funcionan en todos los navegadores. No obstante, no aseguramos que funcionen en las futuras versiones (de hecho, el código de ejemplo que explicamos más adelante no lo hemos probado en las versiones 6 de los navegadores más usados, IE y Netscape)
Y después de esta breve introducción, comenzamos a programar:
Lo primero es indicar al navegador que vamos a escribir código JavaScript y que tiene que interpretarlo. Para ello se utiliza la directiva <SCRIPT>, normalmente dentro del <HEAD>, es decir,
<head>
<script language="JavaScript">
function mostrarAlert()
{
  alert("Esto es un aviso");
}
</script>
</head>

Aquí hemos utilizado una función que se ejecutará cada vez que la "llamamos". Para hacerlo, simplemente tenemos que capturar un evento dentro de la página y llamara a esa función cuando el evento ocurra. El ejemplo más sencillo y entendible; cuando se pulsa un botón.
El código lo puedes ver en el fuente de esta página y es:

<form>
<input type="button" value="Pulsa aquí" onClick="mostrarAlert()">
</form>

El evento capturado en el click del ratón sobre el botón. Esto se hace con el evento onClick soportado por el objeto input tipo texto.
Cada objeto HTML soporta sus propios eventos, así el ratón soporta onClick pero no soporta un onChange. Recomendamos la utilización de la Referencia Rápida de Objetos JavaScript de Danny Goodman. En esta guía podrás ver el árbol de objetos con sus métodos, eventos y propiedades de cada uno.
Hay otra manera de introducir código JavaScript y es en un fichero con extensión js (da igual la extensión pero es recomendable) Un vez creado un fichero con la función o el código que se requiera, se utiliza lo siguiente:

<head>
<script language="JavaScript" src="nombre_fichero.js"></script>
</head>

Visto esto solo queda saber que se puede hacer con JavaScript y con la guía de objetos de Danny Goodman, ponerse a trabajar.

Vamos a incluir algunos ejemplos de JavaScript que solo con copiar y pegar, os funcionen.
Ejemplos:
- Cambio de imagen al pasar por encima:

El código fuente es: Primero hay que definir los objetos imágenes que vamos a utilizar desde JavaScript.

var ejemplo= new Image();
ejemplo.src = "images/ejemplo.jpg";
var ejemplo_on = new Image();
ejemplo_on.src = "images/ejemplo_on.jpg";
function mostrar(imagen)
{
   var imagen_cambiada = eval(imagen + "_on.src")
   eval("document." + imagen + ".src=imagen_cambiada")
}
function ocultar(imagen)
{
   var imagen_cambiada = eval(imagen + ".src")
   eval("document." + imagen + ".src=imagen_cambiada")
}

Estas dos funciones son versatiles, es decir, sirven para todas las imagenes que necesiteis cambiar. El único requisito es que los nombres de las imágenes, es decir, el atributo name del img sean los mismos que el nombre del fichero imagen ejemplo.jpg, siendo el fichero imagen a cambiar ejemplo_on.jpg.
Además, teneis que definir cada imagen en JavaScript junto con su propiedad src tal y como aparece en el ejemplo.
Ahora queda la llamada a las imágenes cuando el ratón pasa por encima. Para eso se utiliza un truco que consiste en que la imagen sea un enlace HTML que es quien soporta el evento onMouseOver y onMouseOut.

<a href="javascript:alert('Efecto de iluminar una imagen al pasar por encima')" onMouseOver="mostrar('ejemplo')" onMouseOut="ocultar('ejemplo')"> <img src="images/ejemplo.jpg" border="0" name="ejemplo"></a>

Así, hemos visto como llamar a una función JavaScript desde un a href, que es utilizando javascript:nombreFuncion.

- Validación de un formulario. Para aquellos campos obligatorios, simplemente cuando se pulse el botón de Submit (enviar formulario), se utiliza el evento onSubmit tal y como sigue.


<script language="JavaScript">
function validarFormulario(()
{
   if (document.formulario.nombre.value == "")
   {
     alert("El campo Nombre es obligatorio");
     return false;
   }
   else
   {
     return true;
   }
}
</script>
</head>
<body>
<form name="formulario" onSubmit="return validarFormulario()" action="javascript.php">
Nombre: <input type="text" name="nombre">
<input type="submit" value="Enviar">
</form>


Nombre:

Así, se pueden validar correos (que contengan el caracter @ y un punto después .com, .net) que contengan solo números (número de teléfono, edad, fechas, ...)

Hay multitud de páginas con ejemplos gratuitos para utilizar, buscad por free javascript code o, en español, codigo javascript gratuito.