Conceptos básicos
JavaScript es un lenguaje interpretado en el cliente por el navegador al momento de cargarse la pagina, es multiplataforma,
orientado a eventos con manejo de objetos, cuyo codigo se incluye directamente en el mismo documento HTML.
Hasta entonces ya se usaba HTML y JAVA, pero la aparición del JavaScript produjo una importante revolución, ya que dio
al usuario la posibilidad de crear aplicaciones "on-line" osea modificar páginas web en tiempo real, sin usar CGI´s.
Caracteristicas
Es simple, no hace falta tener conocimientos de programación para poder hacer un programa en JavaScript.
Maneja objetos dentro de nuestra página Web y sobre ese objeto podemos definir diferentes eventos. Dichos objetos facilitan
la programacion de paginas interactivas, a la vez que se evita la posibilidad de ejecutar comandos que puedan ser peligrosos
para la maquina del usuario, tales como formateo de unidades, modificar archivos etc.
Es dinámico, responde a eventos en tiempo real. Eventos como presionar un botón, pasar el puntero del mouse sobre un determinado
texto o el simple hecho de cargar la página o caducar un tiempo. Con esto podemos cambiar totalmente el aspecto de nuestra
página al gusto del usuario, evitándonos tener en el servidor un página para cada gusto, hacer calculos en base a variables
cuyo valor es determinado por el usuario, etc.
Diferencia con JAVA
La principal diferencia es que JAVA es un lenguaje compilado, mientras que JavaScript es interpretado.
JAVA al compilar crea programas independientes, llamados APPLETS que se invocan desde una pagina Web, mientras que el codigo
de JavaScript va incluido en la pagina.
Esta orientado a objetos de forma limitada ya que no maneja los conceptos de clase ni herencia.
En JavaScript no es necesario declarar el tipo de variable, ni debe existir las referencias al objetos antes de ejecutarlo,
por lo que se habla de una ligazon dinamica a diferencia de la ligazon estatica del JAVA.
Principales aplicaciones
Si bien hoy en día, JavaScript, es un lenguaje muy usado, sus principales aplicaciones son:
Responder a eventos locales dentro de la página, como apretar un botón,
La realización de cálculos en tiempo real.
La validación de formularios dentro de una página.
La personalización de la página por el usuario, que le permitirá tener una página web a su medida.
La inclusión de datos del propio sistema, como son la hora y la fecha.
Aunque según pasa el tiempo sus aplicaciones se van incrementando.
Donde incluirlo
Antes siquiera de que conozcamos la sintaxis o una primera orden de JavaScript, debemos saber primero cómo se incluye un
script dentro de un documento HTML.
El codigo JavaScript se inserta directamente en nuestra pagina HTML. Hay cuatro (4) maneras de hacerlo:
1. En el cuerpo del documento
Es decir entre los comandos <BODY> y </BODY> usando el comando <SCRIPT>
|
<HTML>
<HEAD><TITLE>Titulo</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
escondemos el codigo>
document.write("Hola que tal");
// fin de esconder -->
</SCRIPT>
</BODY>
</HTML>
|
Este codigo se ejecuta inmediatamente al cargar la pagina y lo que produce es un texto sobre la pagina, para ello use el
metodo write del objeto document, que representa al documento actual.
Nota que use un comentario <!-- --> para ocultar el codigo a los navegadores que no soportan JavaScript.
2. En archivo aparte
En este caso todo el codigo del script esta situado en otro archivo y se hace una llamada.
|
<HTML>
<HEAD><TITLE>Titulo</TITLE></HEAD>
<BODY>
<SCRIPT SRC=codigo.js>
</SCRIPT>
</BODY>
</HTML>
|
Nota que aqui no fue neceario esconder ningun codigo y que los navegadores que no soporte el comando SCRIPT simplemente
lo ignoraran.
3. Usando manejadores de evento
Los comandos de JavaScript son evaluados inmediatamente al cargarse la pagina. Las funciones son almacenadas, pero no ejecutadas,
hasta cierto evento.
|
<HTML>
<HEAD><TITLE>Titulo</TITLE></HEAD>
<BODY>
<A HREF="" evento=metodo
o llamada a funcion interna>algo</A>
</BODY>
</HTML> |
Nota que aqui es un evento el que dispara.
4. Haciendo una llamada a función
Dentro de la cabecera, despues del titulo. Es decir, entre los comandos </TITLE> y </HEAD> y luego la llamada
a la funcion en el cuerpo.
|
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-- escondemos
el codigo>
function Ver() {
alert("Le dije que NO !");
}
// fin de esconder -->
</SCRIPT>
</HEAD>
<BODY>
No
haga Clic <A HREF="Ver()">AQUI</A>
</BODY>
</HTML> |
Observa que aqui se definio la funcion en la cabecera, pero recien se ejecuta al hacer clic en el enlace, que es el evento
que llama a la funcion a la cual se le para un parametro. NOTA: Excepto en texto encomillado, JavaScript es sensible a mayusculas
y misnusculas, por lo que tendras que tener el cuidado al usar por ejemplo document.write de escribirlo asi, en minusculas
o no se interpretara. Cualquier error simplemente es ignorado. Se puede usar la comilla simple para los valores de atributos.
1. Escribir algo en documento actual
Lo primero que aprenderemos a hacer sera escribir algo en el dcumento actual. Para esto usaremos el método write del objeto
document. Mas adelante hablare de algunos otros metodos de este mismo objetos como son: clear, close, open y writeln.
La sintaxis es la siguiente: document.write("Texto")
Además de un texto, tambien se pueden mostrar variables, resultados de funciones, etc. Recuerda que basta introducir el
codigo en el lugar que quieres que aparezca el texto sobre tu pagina.
|
<HTML>
<HEAD> <TITLE>Ejemplo 1</TITLE></HEAD>
<BODY>
... codigo HTML
<SCRIPT
LANGUAGE=JavaScript>
<!-- esconder codigo
document.write ("Hola que tal...")
// fin esconder-->
</SCRIPT>
...
mas codigo HTML
</BODY>
</HTML> |
Recuerda que tienes que añadir los comentarios para prevenir a los navegadores que no soportan JavaScript.
2. Escribir algo en un nuevo documento
Ahora usaremos el mismo ejemplo anterior pero lo mostraremos en un nuevo documento, que sera abrierto en una nueva ventana.
Para esto usaremos el metodo open del objeto window cuya sintaxis es: [ventana=]window.open('URL','nombre',['caracteristicas'])
ventana
Nombre de la nueva ventana (opcional)
URL
Pagina a cargar
nombre
Nombre para referirse a la ventana en los atributos
caracteristicas
son todos opcionales
width
Ancho en pixels de la ventana
height
Alto en pixels de la ventana
resizable
=yes o no, =1 o 0
scrollbars
=yes o no, =1 o 0
status
=yes o no, =1 o 0
menubar
=yes o no, =1 o 0
toolbar
=yes o no, =1 o 0
location
=yes o no, =1 o 0
directories
=yes o no, =1 o 0
Para disparar la apertura de esta ventana usamos el evento onClick del objeto link, como se ve en los siguientes ejemplos:
|
Pulsa para ver el efecto del
<A HREF="" onClick="window.open('js10a.htm','','width=300,height=80');return false">Ejemplo
1</A>
o del
<A HREF="" onClick="window.open('js10b.htm','','width=300,height=150,resizable=1');return false">Ejemplo
2</A> |
Pulsa para ver el efecto del Ejemplo 1 o del Ejemplo 2 Nota: Ademas en el ejemplo 2 active el resizable en la ventana resultante. Nota: La diferencia de hacer esto contra el hacer
un enlace simple usando HTML, es que el enlace se abrira en una nueva ventana, en la que podras controlar de tamaño, entre
otras cosas.
3. Mostrar el resultado de una funcion de usario
Primero creamos una función de usuario y le asignamos parametros y luego mostramos el resultado de dicha funcion usando
el metodo write del objeto document y añadiendo algunas de sus propiedades.
|
<HTML>
<HEAD> <TITLE>Ejemplo 3</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
esconder codigo
function Suma(a,b) {
return a+b
}
document.write("La suma de 4+7 es = ".fontcolor("red"),Suma(4,7))
//
fin esconder -->
</SCRIPT>
</BODY>
</HTML> |
Pulsa para ver el efecto del Ejemplo 3 Nota: Ademas en el ejemplo 3 active el scrollbars en la ventana resultante.
4. Escribir algo en pantalla
En este ejemplo usaremos la propiedad link del objetos document para hacer un enlace desde esta nueva ventana.
|
<HTML>
<HEAD> <TITLE>Ejemplo 3</TITLE></HEAD>
<SCRIPT LANGUAGE=JavaScript>
<!--
esconder codigo
document.write("Si estas interesado en aprender los comandos HTML consulta "+"mi manual".link("http://www.uap.edu.pe/samples/demo/demo.htm").big())
//
Fin esconder -->
</SCRIPT>
<BODY>
</BODY>
</HTML> |
Pulsa para ver el efecto del Ejemplo 4 Nota: Ademas en el ejemplo 4 active el status en la ventana resultante.
5. Funcion que convierte Decimal en Hexadecimal
Pulsa para ver el efecto del Ejemplo 5 Nota: Ademas en el ejemplo 5 active el toolbar en la ventana resultante.
6. Hora coordinada universal
|
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
<!-- esconder codigo
function Dime() {
var Hoy = new Date();
var
laHora = Hoy.getHours();
var Diferencia = (Hoy.getTimezoneOffset() / 60);
laHora -= Diferencia;
if (Hoy > 23)
{laHora -= 24 }
document.write(laHora + " horas, " + Hoy.getMinutes() + " minutos");
window.setTimeout("Dime();", 60000);
}
//
Fin esconder -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<!-- llama a la funcion
Dime();
</SCRIPT>
</BODY>
</HTML>
|
