graphic-img
 Portada | Servicios | Contactar

Web Design

 Planes y Precios

Cursos

 Office

 Web Design

 Internet

 Windows

 HTML

 Java

Glosarios

Desarrollo

 En área rural

 eLab

Buscar

Foros

Información?

Correo [Login]

 ProClave.com
 info@proclave.com
 425 -246 0452

 

 Inicio > Cursos > Introducción a JavaScript

Introducción a JavaScript

Comparativa 

Introducción al lenguaje

Ejemplos:

Estos ejemplos hacen parte de bibliotecas gratis como Dynamicdrive


El lenguaje JavaScript

JavaScript es un lenguaje de scripts compacto basado en objetos ( y no orientado a objetos). Originariamente era denominado LiveScript, y fue desarrollado por Netscape para su navegador Netscape Navigator 2.0. Fue éste el primer cliente en incorporarlo. Se ejecuta sobre 16 plataformas diferentes, incluyendo los entornos de Microsoft e incluso el MS Explorer lo incorpora en su versión 3.0 .

JavaScript permite la realización de aplicaciones de propósito general a través de la WWW y aunque no está diseñado para el dessarrollo de grandes aplicaciones es suficiente para la implementación de aplicaciones WWW completas o interfaces WWW hacia otras más complejas..

Por ejemplo, una aplicación escrita en JavaScript puede ser incrustada en un documento HTML proporcionando un mecanismo para la detección y tratamiento de eventos, como clicks del ratón o validación de entradas realizadas en forms.

Sin existir comunicación a través de la red una página HTML con JavaScript incrustado puede interpretar, y alertar al usuario con una ventana de diálogo, de que las entradas de los formularios no son válidas. O bien realizar algun tipo de acción como ejecutar un fichero de sonido, un applet de Java, etc.


JavaScript y Java

Las diferencias entre Java y JavaScript son notables pero tambien sus similitudes.

En primer lugar Java es un lenguaje de programación mientras que JavaScript es un lenguaje de scripts (como su nombre indica). Éste último es más sencillo de entender y usar que Java si no se tienen conocimientos previos de metodología de programación orientada a objetos. La mayor sencillez de JavaScript hacen que sea interesante aprender éste último lenguaje como paso previo a adentrarse en el mundo de Java.

JavaScript es mucho más modesto pero precisamente por ello es más sencillo. Se basa en un modelo de instanciación de objetos muy simple para el que no es necesario tener conocimiento de conceptos tales como herencia y jerarquías.

Soporta un sistema en tiempo de ejecución basado en un pequeño número de tipos de datos (numérico, Boolean, y string) en el que ni siquiera es necesario declarar el tipo de variables. Sin embargo Java exige una gran rigidez en el tipo de datos utilizados y dispone de una amplia variedad de tipos básicos predefinidos, operadores y estructuras de control.

En Java uno de los principales bloques de programación son las clases a las que se asocian funciones específicas. Para utilizarlas es necesario instanciarlas en objetos. Los requerimientos de Java para declarar dichas clases, diseñar sus funciones, y encapsular tipos hacen que la programación en este lenguaje sea mucho más compleja que la realizada con JavaScript.

Otra diferencia importante es que Java es un lenguaje lo bastante potente como para desarrollar aplicaciones en cualquier ámbito. No es un lenguaje para programar en Internet, sino que se trata de un lenguaje de propósito general, con el cual se puede escribir desde un applet para una página Web (ésto es es una pequeña aplicación escrita con un determinado formato que se ejecuta en un trozo de un documento HTML) hasta una aplicación que no tenga ninguna clase de conexión a Internet.

Los requerimientos tambien son diferentes; Para programar en JavaScript sólo es necesario un editor de texto mientras que para programar en Java se necesita un compilador específico.

La complejidad de Java es semejante a la de un programa en C++ mientras que la de JavaScript es cercana a la de uno en dBase, Clipper o sh.

Por otra parte, la sintaxis de ambos lenguajes es muy similar sobre todo en lo que a estructuras de control de flujo se refiere.

Existen además mecanismos de comunicación entre Java y JavaScript.

En definitiva, la principal ventaja de JavaScript es su simplicidad y su menor demanda de requisitos.

Relación entre JavaScript y Java:

JavaScriptJava
Interpretado (no compilado) en cliente.Compilado en servidor antes de la ejecución el el cliente.
Basado en objetos. Usan objectos, pero no clases ni herencia. Programación orientado a objetos. Los applets constan de clases objeto con herencia.
Codigo integrado en el código HTML.Applets diferenciados del código HTML (accesibles desde las páginas HTML).
No es necesario declarar el tipo de las variables. Necesario declarar los tipos.
Enlazado dinámico. Los objetos referenciados deben existir en tiempo de ejecución (lenguaje interpretado). Enlazados estáticos. Los objetos referenciados deben existir en tiempo de compilación (lenguaje compilado).


JavaScript y CGI

CGI (the Common Gateway Interface) es una interfaz entre programas de aplicación y servicios de información. Es decir, son un conjunto de reglas a cumplir tanto por parte del servidor como por parte del programa, pero se deja libertad al programador a la hora de escoger el lenguaje que considere mas adecuado para programar la aplicación. Un programa en CGI puede ser escrito en cualquier lenguaje como: C/C++ , Fortran, PERL ,TCL, etc.

En JavaScript no existen restricciones a cumplir en el Servidor hasta el punto que ni siquiera es necesario que éste exista.

Por otra parte y al contrario que CGI, JavaScript únicamente depende del cliente y no del sistema operativo, sólo necesita un browser capaz de interpretarlo. Cualquier persona puede desarrollar aplicaciones escritas en JavaScript del mismo modo que realiza páginas HTML. Esto no ocurre con aplicaciones CGI que necesitan la existencia de un servidor WWW para ser ejecutadas.

Con JavaScript todo el código es trasladado al cliente y no se necesita la comunicación a través de la red cada vez que se produce un evento, como se requería en CGI.

Por otro lado, JavaScript no es un lenguaje válido para desarrollar aplicaciones concurrentes y/o de acceso compartido.

Comparación entre JavaScript y CGI:

JavaScriptCGI
Es un lenguaje de programaciónEs una interfaz. Da libertad de elección del lenguaje
No requiere un servidor de WWWExige la presencia de un servidor WWW
No requiere una red, funciona en local.Requiere comunicación en red.

No funciona en local

La aplicación reside en el cliente La aplicación reside en el servidor
Requiere un cliente especialSirve cualquier cliente, por simple que sea
Pensado para aplicaciones monousuarioPermite desarrollo de aplicaciones distribuidas, acceso concurrente y/o compartido
Tiempo de desarrollo muy breveTiempo de desarrollo medio


JavaScript y HTML

Los programas en JavaSecript aparecen incrustados en los propios documentos HTML como si de HTML se tratara. Pueden integrarse de dos formas:

  • Como programas propiamente dichos, combinando funciones y sentencias, con el mismo aspecto que tendría el código de cualquier otro lenguaje.
  • Introduciendo manejadores de eventos JavaScript en etiquetas HTML.

Presentaremos los dos mecanismos:

La etiqueta script

La manera más convencional en que aparece JavaScript en un documento es en forma de programa. Podemos empezar por mostrar unos breves scripts y ver como son implementados dentro de documentos HTML. Empezaremos con un pequeño programa que muestra un texto en un documento HTML.

<html>

<head>

¡Mi primer JavaScript!

</head>

<body>

<br>

Este es un documento HTML normal

<br>

<script language="JavaScript">

document.write("Esto es JavaScript!")

</script>

<br>

En HTML otra vez.

</body>

</html>

Este primer programa se limita a escribir en pantalla un determinado texto para lo que se emplea el código document.write. En este código, document es un objeto creado por el sistema que hace referancia al propio documento y write es uno de los métodos que proporciona para interactuar con él. El resultado de cargar este documento en un browser que interprete JavaScript será la aparición de los dos textos, el escrito en JavaScript y el escrito en HTML, sin que el usuario sea consciente del proceso.

El resultado seria:

Este es un document HTML normal.

En HTML otra vez

Este script no es muy útil pero sirve para mostrar el uso de la etiqueta <SCRIPT>. Puedes usar estas etiquetas en cualquier lugar del documento, tanto en la cabecera como en el cuerpo, aunque si se declaran funciones es más aconsejable hacerlo en la cabecera.

La etiqueta <SCRIPT>es una extensión de HTML en la que se encierra el texto que compone el código del programa JavaScript correspondiente de la manera siguiente:

<SCRIPT>

Sentencias JavaScript...
</SCRIPT>

De esta manera el navegador que "entienda" JavaScript reconocerá el texto encerrado entre estas etiquetas como código JavaScript y no lo mostrará en la pantalla del cliente. Una cuestión importante a considerar es el mantenimiento de la compatibilidad con navegadores anteriores. Cualquier browser ignora las etiquetas desconocidas, por lo tanto, aquellos que no soporten JavaScript ignorarán el comienzo y el final del código del programa (encerrado entre las etiquetas <SCRIPT> y </SCRIPT>).Para que el resto del código tambien sea ignorado y no aparezca en la pantalla del cliente, lo encerraremos entre los símbolos de comentario HTML, <!-- y -->.

Los navegadores que, por el contrario si lo soporten, interpretarán el código encerrado entre las etiquetas SCRIPT e ignorará el principio de la linea en el script que comienza con la doble slash (//) o bien el encerrado entre "/*" y "*/", que son los símbolos de comentarios en este lenguaje.
Un documento puede tener varias etiquetas SCRIPT, y cada una de ellas incluir sentencias JavaScript diferentes.

Si queremos dar la posibilidad de ejecutar un código alternativo a los browsers que no interpretan JavaScript, debemos utilizar las etiquetas <NOSCRIPT></NOSCRIPT>
Por ejemplo:

<SCRIPT>

<!-- Ocultación a browsers antiguos

document.write("Si ves esto, tu browser interpreta JavaScript")

// Fin de la ocultación -->

</SCRIPT>

</HEAD>

<BODY>

<NOSCRIPT>

Si ves esto, tu browser no incorpora la etiqueta

</NOSCRIPT>

</BODY>

</HTML>

Con vistas a un uso futuro, esta etiqueta admite un parámetro opcional LANGUAGE que indica el lenguaje de script que se ha incrustado en el documento así como la versión de JavaScript.

<SCRIPT LANGUAGE="Versión de JavaScript";>

Sentencies JavaScript...
</SCRIPT;>

Versión de JavaScript especifica la versión de JavaScript en la que está escrito el código, y puede ser:

  • <SCRIPT LANGUAGE="JavaScript"> especifica JavaScript para Navigator 2.0.
  • <SCRIPT LANGUAGE="JavaScript1.1"> especifica JavaScript para Navigator 3.0.
Las sentencias encerradas entre las etiquetas son ignoradas si el browser que las lee no tiene el nivel de JavaScript especificado en el atributo LANGUAGE; por ejemplo:

  • Navigator 2.0 ejecuta el código escrito con la etiqueta <SCRIPT LANGUAGE="JavaScript">e ignora el código escrito en la etiqueta <SCRIPT LANGUAGE ="JavaScript1.1">.
  • Navigator 3.0 ejecuta el código escrito entre las etiquetas <SCRIPT LANGUAGE="JavaScript"> o <SCRIPT LANGUAGE="JavaScript1.1">.
Si el atributo LANGUAGE es omitido, Navigator 2.0 asume LANGUAGE="JavaScript" y Navigator 3.0 asume LANGUAGE="JavaScript1.1"

Puede usar el atributo LANGUAGE para escribir scripts que contengan código para Navigator 3.0 (con nuevas funciones que no existían en versiones anteriores) y que no provoquen un error ejecutándose bajo Navigator 2.0.

Ejemplo. Este ejemplo muestra como usar dos versiones diferentes de JavaScript una para JavaScript 1.0 y otro para JavaScript 1.1. El documento cargado por defecto es para JavaScript 1.0. Si el usuario utiliza Navigator 3.0, utilizará la función location.replace("..") implementada únicamente en esta versión de JavaScript.

<SCRIPT LANGUAGE="JavaScript1.1">

location.replace("mipagina.html") //Sustituye la página actual por "mipagina.html"

</SCRIPT>

[Definición del resto de funciones compatibles...]

En el Netscape 3.0 se añade un nuevo parámetro opcional a la etiqueta <SCRIPT>, SRC. El objeto del mismo es el de actuar como un include, incluyendo en el documento un código JavaScript que pueda ser compartido por diversos documentos, es decir, posibilitar el uso de librerias. Se recomienda que éstas tengan extensión ".js". La sintaxis asociada será:

El atributo SRC debe especificar una URL, relativa o absoluta. Por ejemplo:

<SCRIPT SRC="libreria.js"></SCRIPT>

<SCRIPT SRC="http://home.netscape.com/functions/libreria.js">

Esta libreria no puede contener código HTML, únicamente definiciones de funciones JavaScript.

Funciones en JavaScript

Las funciones son unos de los bloques fundamentales en JavaScript. Una función es un procedimiento escrito en JavaScript, es decir, un conjunto de sentencias que realizan una determinada tarea.

Una función consta de las siguientes partes básicas:

  • Un nombre de función.
  • Los parámetros pasados a la función separados por comas y entre paréntesis.
  • Marcar el inicio y el final de la función entre llaves ({})

Es importante entender la diferencia entre definir una función y llamarla.

Definir una función es simplemente especificar su nombre y definir que acciones realizará en el momento en que sea invocada. Para ello se emplea la palabra reservada function.

Function nombre_de _la_función([parámetro1, parámetro2,...])

{

.....

return <valor_retorno>

}

Llamando a esta función realizará las acciones especificadas con los parámetros indicados.

Nombre_de_la_función(a,b);

Las funciones pueden definirse en cualquier parte del documento pero es aconsejable declararlas en la cabecera; de esta forma se garantiza que todas las funciones se cargen antes se que el usuario tenga la oportunidad de realizar ninguna acción en la que llame a una de ellas.

El siguiente ejemplo define una función en la cabecera (HEAD) de un documento y la llama en el cuerpo (BODY).

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Oculto el código a los browsers que no entiendan "JavaScript"

function cuadrado(numero) {

return numero * numero

}

// Final de la ocultación-->

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT>

document.write("La función retorna ", cuadrado(5), ".")

</SCRIPT>

</BODY>
La función cuadrado tiene un argumento, llamado numero. La función consta de una sentencia

return numero * numero

que indica que ha de retornar el cuadrado del número pasado por parámetro.

En el cuerpo del documento hacemos una llamada a la función definida mediante la sentencia:

cuadrado(5)

La función ejecuta la sentencia numero * numero como 5 * 5 y retorna el valor 25, el script muestra el siguiente resultado en pantalla:

La función retorna 25.

Manejadores de eventos

La mayoria de las acciones de programa (al tratar con una aplicación de WWW) deben ser activadas por eventos. Los eventos son acciones que ocurren como resultado de alguna acción realizada por el usuario. Un click de ratón, la focalización de un campo en un formulario, modificar un campo de texto o mover el cursor son ejemplos de eventos (ver tabla).

La segunda forma de incrustación de JavaScript en documentos HTML consiste en la definición de manejadores de eventos en las etiquetas. La sintaxis general es:

<ETIQUETA

manejador_evento = "Código JavaScript">

Donde ETIQUETA es cualquier etiqueta HTML que pueda relacionarse con un evento y manejador_evento, el evento en sí.

Cada evento es es reconocido por ciertos objetos, etiquetas HTML, como son:

  • Focalización, desfocalización y edición: campos de texto, textareas y selections.
  • Clicks: buttons,radio buttons, checkboxes, submit buttons, reset buttons, y enlaces.
  • Selección: text fields, textareas.
  • Señalización: enlaces.

A partir de la versión 3.0 de Netscape, onBlur y onFocus se aplican tambien a ventanas y framesets.


El nombre de un manejador de eventos es el nombre del evento,precedido por "on.". Por ejemplo, el manejador de eventos para focus en onFocus.

La relación entre eventos y nombres de manejadores, así como su descripción , se puede observar en la tabla adjunta:

EventoManejador Descripción
clickonClick El usuario pulsa sobre un elemento de form o un enlace
señalizaciónonMouseOver El usuario coloca el ratón sobre una determinada area
cargaonLoadEl usuario carga la página
descargaonUnload Es usuario sale de la página
focalizaciónonFocus El usuario selecciona un elemento de un form como entrada
desfocalizaciónonBlur El usuario quita la selección de un elemento de un formulario como entrada
ediciónonChange El usuario cambia el valor de un elemento text, textarea o select de un formulario
selecciónonSelect El usuario selecciona el campo de entrada de un formulario
InterrupciónonAbort El usuario interrumpe la carga de una imagen
ErroronError La carga de un documento o imagen produce un error.
Des-señalizaciónonMouseOut El usuario saca el ratón de un área (imagemap) o enlace.
InicializaciónonReset El usuario pulsa el botón de reset en un form.

 

Ejemplo. En el siguiente ejemplo definimos un campo de texto en el que entraremos un número, x. Al hacer click sobre el botón obtendremos el resultado (x2) en el segundo campo de texto.

Al mismo tiempo, aparecerá un mensaje en la barra de status que indicará el número introducido así como el resultado obtenido tras aplicarle el cuadrado. Para realizar estas acciones utilizaremos la función definida más arriba como cuadrado.

Cada vez que el usuario haga un click sobre el botón Cuadrado (para determinarlo utilizaremos el manejador de eventos onClick) se llamará a la función del mismo nombre, pasándole como parámetro el valor introducido en el primer campo de texto (x)

Inmediatamente será mostrado en la zona de status un mensaje del tipo: "Has entrado el número x y el resultado es x2" mediante la sentencia window.status,donde window es un objeto creado por el sistema que hace referencia a la ventana actual y status no es más que una de sus propiedades que especifica el mensaje a mostrar en la barra de estado.

El resultado es el siguiente:

Entra un número:
Resultado:

Y el código asociado:

<FORM>
Entra un número:
<INPUT TYPE="text" NAME="entrada" SIZE=15>
<INPUT TYPE="button" VALUE="Cuadrado" onClick="cuadrado(entrada.value)">
<BR>
Resultado:
<INPUT TYPE="text" NAME="resultat" SIZE=15 VALUE = 0>
</FORM>

 

Las modificaciones realizadas en la función cuadrado son las siguientes:

function cuadrado(numero){

document.form1.resultat.value = numero * numero;
window.status='Has entrado el número ' + numero + ' y el resultado es ' +document.form1.resultat.value;
} Mediante los manejadores de eventos es posible dotar a los documentos HTML de una gran interactividad.

 

ProClave Inc. © 1997-2005 Copyright - Disclaimer