ManualJavaScript

JavaScript 1

| Geovanni Figueroa M.| Revista Digital Matemática, Educación e Internet |

1 2 3 4 5

Creación de guiones con JavaScript

Primera parte

Introducción a JavaScript

Geovanni. Figueroa M.
Escuela de Matemática
Instituto Tecnológico de Costa Rica

¿Qué es JavaScript ?

JavaScript, al igual que Java, JScript u otros tantos, es una de las múltiples maneras que han surgido para extender las capacidades del lenguaje HTML (Lenguaje de Marcado de Hipertexto). El permitir añadir propiedades interactivas a las páginas Web de una forma rápida y sencilla lo ha convertido en uno de los lenguajes de guiones más populares.

Propiamente dicho, JavaScript no es un lenguaje de programación, más bien es un lenguaje de guiones al estilo de los lenguajes de macros que tienen muchos procesadores de texto. Este fue desarrollado por Netscape para incrementar las funcionalidades del lenguaje HTML. Dentro de sus características más importantes tenemos que:

JavaScript es un lenguaje interpretado, es decir, no require compilación. El navegador del usuario se encarga de interpretar las sentencias JavaScript contenidas en una página HTML y las ejecuta adecuadamente.

JavaScript es un lenguaje orientado a eventos. Cuando un usuario pulsa sobre un enlace o mueve el puntero sobre una imagen se produce un evento. Mediante JavaScript se pueden desarrollar guiones que ejecuten acciones en respuesta a estos eventos.

JavaScript es un lenguaje orientado a objetos. Aunque el modelo de objetos de JavaScript está reducido y simplificado, incluye los elementos necesarios para que los guiones puedan acceder a la información de una página y puedan actuar sobre la interfaz del navegador.

JavaScript tiene un nombre similar a Java; esté último sí es un verdadero lenguaje de programación, autentíicamente orientado a objetos que fue desarrolado por Sun Microsystem . Por otro lado, JavaScript fue desarrollado por Netscape Communications, creadores del navegador Web Navigator. Después de que Sun anunciara Java, Netscape introdujo JavaScript con la versión 2.0 de Navigator.

Realmente, los dos lenguajes son muy diferentes. Java es un lenguaje de programación orientado a objetos (POO) similar a C++.Tiene un fuerte tipado (deben declararse los tipos de datos de las variables) y es compilado. Por el contrario, JavaScript está basado en objetos, tiene un tipado débil y es interpretado por el navegador del cliente, aunque el término compilador de JavaScript se utiliza con frecuencia para hacer referencia al mecanismo incorporado en el explorador que lee el código y lo ejecuta.

Si JavaScript y Java comparten una cosa, es que tanto JavaScript como las aplicaciones Java basadas en el web se ejecutan en el explorador del cliente. Aunque algunos guiones están pensados para ejecutarse en el servidor.

Netscape desarrolló JavaScript bajo el nombre de Mocha; cuando apareció por primera vez en las primeras versiones de Navigator 2.0, se llamo LiveScript. Finalmente, se le puso el nombre de JavaScript para llamar la atención de los medios y de la industria informática sobre el hecho de que giraba alrededor de Java.

Netscape pretendía que LiveScript/JavaScript fuera un lenguaje de guiones fácil de usar, en el que cualquiera con ganas de programar pudiera escribir. Con el pasar de los años, JavaScript se ha convertido en una de las herramientas más usadas por los desarrolladores Web.

JavaScript ofrece a los creadores de páginas Web y los programadores de Internet e Intranet la capacidad de escribir guiones que dentro de la página web interactúan con objetos como formularios, marcos, color de fondo y muchos más. Una de sus aplicaciones más útiles es la validació de fórmularios antes de su envío al guión CGI en el servidor.

JavaScript es el complemento ideal de HTML, al permitir a la página realizar algunas tareas por si misma, sin necesidad de estar sobrecargando el servidor del cual depende.

Limitaciones de JavaScript

JavaScript tiene algunas limitaciones, las cuales derivan de su objetivo principal, que es adicionar interactividad a las páginas web.

JavaScript no puede interactuar con el servidor:

Una de sus principales desventajas es su principal fortaleza: JavaScript trabaja enteramente dentro del navegador del cliente y no se comunica con el servidor ni con otras máquinas..

JavaScript no puede crear gráficos:

JavaScript no pueden crear sus propios gráficos, sólamente puede manipular gráficos hechos en otros programas.

JavaScript trabaja de forma diferente en diferentes navegadores:

Este es el principal problema de JavaScript, su comportamiento depende del navegador. Esta problemática se debe a que las empresas que han introducido JavaScript lo han hecho de forma independiente, sin considerar los problemas que esto trae al programador. Programar usando una versión simple de JavaScript es relativamente fácil, pero escribir código que funcione de forma notable para dos versiones dispares de navegadores es uno de los mayores desafíos para un desarrollador de páginas web.

Microsoft intentó dar soporte a la primera versión de JavaScript en el Internet Explorer 3.0 (con el nombre de Jscript). Sin embargo, Jscript resultó poco fiable y estaba plagado de errores.

ECMA impulsó un estándar para JavaScript, que Microsoft introdujo en el Internet Explorer 4.0. Este estándar comparte la mayoría de las características con JavaScript 1.2, la nueva versión que apareció con el Netscape Navigator 4.0. Sin embargo, no son totalmente equivalentes, lo que dificulta la creación de guiones que funcionen correctamente en los dos navegadores.

Las últimas versiones del Navigator (a partir de la 4.06) implementan JavaScript 1.3, que es totalmente compatible con ECMA-262.

¿ Dónde va JavaScript ?

Básicamente existen dos formas de introducir un guión de JavaScript en una página HTML:

Incrustado en el código HTML, dentro de las etiquetas <script> y </script> o <head> y </head>. En la plantilla se muestra el código JavaScript incrustado en una página HTML. Como se observa, el código figura entre las marcas de comentario , para que no aparezca en la página. Además, delante de la marca de cierre de comentario se insertan los caracteres //, de comentario en JavaScript, para que el intérprete JavaScript no dé error por la línea -->.

Guión: Pantilla básica de JavaScript

Como archivo .js que se carga con la página HTML. Para ello, debe indicarse entre las etiquetas <script> y </script> el nombre y ubicación del archivo .js que contiene el guión JavaScript, como se muestra en la siguiente plantilla.

Tratando con navegadores viejos

Aún existen en el Web navegadores que no soportan JavaScript, recuerde que Netscape introdujó las etiqueta <script> y </script> hasta la versión 2.0 de Navigator, por lo que cualquier navegador anterior a esta versión anterior no reconoce dicha etiqueta. Cuando un navegador se encuentra con una etiqueta que no entiende la ignora, lo cual es bueno. Sin embargo, los navegadores que son compatibles con JavaScript escribirán las líneas de código de JavaScript en la página web como texto. Para evitar ésto se acostumbra escribir el código de JavaScript entre las etiquetas de comentatrios de HTML, como se muestra en la siguiente plantilla

Guión: Ocultando código JavaScript

Recuerde que las etiquetas < !-- y -- > son de HTML y se usan para insertar comentarios; el doble slashes ( // ) es una etiqueta de JavaScript y se usa para indicar que el resto de la línea es un comentarios.

Un primer guión

El siguiente ejemplo implementa el clásico Hola mundo. Cuando el navegador lee las instrucciones de JavaScript abre una pequeña ventana de alerta con el mensaje Hola mundo !!! .

Guión: Hola Mundo

<html>

<!-- Copie el codigo y salvelo como un
archivo .html y abralo con su navegador -->

<head>
<title>
Hola mundo
</title>
</head>
<body>
<h1> Mi primer programa JavaScript </h1> 
<br>
< script languaje="JavaScript" >
<!-- Ocultando el codigo JavaScript

// se define la funcion holamundo() que se llamara 
// desde el boton para asi crear la ventana de alerta 
// con el mensaje "Hola Mundo !!!"

function holamundo()
{

// se llama al metodo alert del objeto windows

alert("Hola Mundo !!!")

}

//  de viejos navegadores -->
< /script >

<!-- Se crea el formulario que contiene al boton 
que activara a nuestra funcion holamundo()-->

< form name="form5" >
  <p>
  Para probar el efecto del código haga click sobre el botón:
  </p>
  <p> 
    <input type="button" value="Hola Mundo" onClick="holamundo()">
  </p>
 
</form>
</body>
</html>

Ahora veamos que significa cada uno de las instrucciones de la plantilla anterior

La primera línea del guión

<script languaje="JavaScript">
es una etiqueta HTML que le indica al navegador que lo que sigue es un guión escrito en JavaScript. Puesto que no hay ningún número después de JavaScript, el navegador asume que se trata de la versión 1.0. Es necesario especificar el tipo de lenguaje en: languaje="JavaScript", pues existen otros tipos de guiones: como VBScript.

El fragmento de código

funtion holamundo()
{
alert("Hola Mundo !!!");
}

define una función llamada holamundo() la cual iinvoca al método alert (que pertenece al objeto window) que es el que se encarga de mostrar el mensaje en pantalla.

Observe que el guión finaliza con la etiqueta </script>.

Luego el fragmento de código HTML

< form name="form5" >
<p>
Para probar el efecto del código haga click sobre el botón:
</p>
<p>
<input type="button" value="Hola Mundo" onClick="holamundo()" >
</p>
</form>

construye el formulario que contiene al botón que activará la función holamundo() al ser pulsado.

Dentro de la instrucción HTML que usamos para mostrar el botón vemos un elemento nueva: onClick. Es un controlador de evento. Cuando el usuario pulsa el botón, el evento click se dispara y ejecuta el código que tenga entre comillas el controlador de evento onClick, en este caso la llamada a la función holamundo(), que tendremos que haber definido con anterioridad. Existen más controladores de eventos que iremos descubriendo según avancemos.

1 2 3 4 5

Cidse - Revista virtual Matemática, Educación e Internet - ITCR
Derechos Reservados