|
Inicio | Artículos
| Java
Script
Manual de
introducción al JavaScript
Introducción
Netscape introdujo
al JavaScript con el nombre de LiveScript en su versión beta
del Netscape Navigator 2.0. Cuando hizo el definitivo 2.0
cambió el nombre a JavaScript.
JavaScript es un
lenguaje diseñado para crear aplicaciones dinámicas "on-line".
Estas aplicaciones unen objetos y recursos en el cliente y en
el servidor.
Características
de JavaScript
Simple
Como es un lenguaje
simple, el desarrollador web puede crear páginas dinámicas sin
necesidad de convertirse en un programador experto
Dinámico
Una página web se
convierte en dinámica cuando responde a eventos
generados por el usuario u otro objeto. Con documentos HTML
tradicionales, las aplicaciones del extremo del servidor
tenían la responsabilidad de manejar los eventos pero
JavaScript transfiere esa responsabilidad al extremo del
cliente, lo que hace el diseño de las páginas web más
flexible, dinámico y con una respuesta más rápida.
JavaScript está
basado en objetos
No es un lenguaje
orientado a objetos como Java o C++ pero interacciona con los
objetos. Un lenguaje de programación tiene clases, herencia y
tipos de variables, cosas de las que JavaScript
carece.
Sin embargo,
interacciona con los objetos a los que expone al entorno.
JavaScript puede acceder a objetos en el navegador. Esta
capacidad de interactuar con diferentes objetos le da una
flexibilidad mucho mayor que muchos programas
complejos.
Utilidades de
JavaScript
- Lleva al cliente
bastante parte de laacción del servidor con lo que éste se
descarga.
- Permite validar
los campos de formularios antes de enviarlos al
servidor.
- Posibilita que
los documentos HTML respondan a eventos locales.
- Posibilita al
programador comunicar información hacia y desde applets y
plugins.
- Con JavaScript
del lado del servidor, cada usuario puede tener un perfil
único y personalizado que le permita configurar páginas web
a medida.
- Permite accedes
a bases de datos vía SQL u ODBC.
Inclusión de
JavaScript en HTML
<SCRIPT
LANGUAJE="JavaScript">
....código
</SCRIPT>
Mi Primer
Script
<HTML>
<HEAD>
<SCRIPT
LANGUAJE="JavaScript">
document.write("Hola
Mundo!")
</SCRIPT>
</HEAD>
<BODY>
Este
es mi primer
script.
</BODY>
</HTML>
Manejo de
eventos
Los eventos
convierten una página estática en una página dinámica
interactiva. Los eventos se producen por acciones del
usuario, como pulsar un botón del mouse, o enviar un
formulario o salir de una página.
Variables
En JavaScript no se
asigna en la declaración el tipo de variable sino que el
intérprete se encarga de esta tarea.
var
miVariable;
miVariable = 2;
Alcance de las
Variables
JavaScript permite
dos alcances distintos para las variables:
Variables
Locales
Sólo se aplican dentro de una
función
Variables
Globales
Se declaran fuera de una
función
Operadores
Aritméticos
El propósito de lo
operadores aritméticos es calcular un valor numérico sencillo
a parte de los valores numéricos de literales o
variables.
JavaScript soporta
los operadores matemáticos estándar de Suma(+), Resta(-),
Multiplicación(*) y División(/).
También tiene los
de Módulo(%), Incremento(++), Decremento(--) y
Negación(-).
Operadores
Lógicos
Necesitan que los
operandos sean booleanos (verdadero o falso) y devuelven un
valor lógico.
AND Lógico
(&&)
OR Lógico (||)
NOT Lógico (!)
Operadores de
comparación
Estos operadores se
aplican a comparaciones entre valores numéricos o de
caracteres y no sobre boolenos.
Igual (=
=)
Distinto (!=)
Mayor (>)
Menor
(<)
Mayor o igual (> =)
Menor o igual (<
=)
Operadores
Strings
El operador de
strings (+) concatena dos valores de strings y devuelve otro
que es la unión de los dos primeros;
"Java" +
"Script"
devuelve
"JavaScript"
Orden de
precedencia
En expresiones
complejas, con más de un operador, la precedencia de los
operadores determina el orden de cálculo.
Tabla de
Prcedencia de menor a mayor de los operadores de
JavaScript
| Descripción |
Operadores |
| Asignación |
=
+= -= *= /= %=
<<= >>= >>>=
&= |= |
| Condicional |
?: |
| OR
Lógico |
|| |
| AND
Lógico |
&& |
| OR |
| |
| XOR |
^ |
| AND |
& |
| Igualdad |
== |= |
| Relacional |
< <=
> >= |
| Desplazamiento |
<< >>
>>> |
| Suma/Resta |
+
- |
| Multiplicación/Div |
*
/ % |
| Negación/Incremento |
!
- ++ -- |
| Llamada,
Miembro |
()
[] |
Sentencias de
control y funciones
Para hacer una
página dinámica e interactiva, el diseñador de páginas Web
necesita sentencias que controles el flujo de
información.
IF
ELSE
if (condición)
{
sentencias 1 }
[ else
{
sentencias 2 } ]
Ejemplo:
if (numero==1)
{
numero++;
numero+=2; }
else
numero--;
Bucles
JavaScript soporta
2 estructuras de bucles; la sentencia for y la
while. Para el control de esas estructuras se tienen
las sentencias break y continue.
FOR
La sentencia FOR de
JavaScript es la misma que en Java y C.
Repite un bucle
hasta que una condición sea cierta o hasta que salga del bucle
con una sentencia break.
for
([expresión_inicial ;] [condición;]
[expresión_incremental]) {sentencias
}
- El intérprete
ejecuta la expresión_inicial que inicia todos los valores
necesarios para el control del bucle.
- Después, el
intérprete comprueba la condición. Si es cierta, pasa el
control al siguiente paso y si no, va a la siguiente
sentencia tras el bucle.
- El intérprete
ejecuta la expresión_incremental que actualiza las variables
utilizads en el control del bucle.
- Se ejecutan las
sentencias y -a menos que se encuentre una sentencia break o
continue- el control se devuelve al paso 2.
Ejemplo
<HTML>
<HEAD>
<SCRIPT
LANGUAJE="JavaScript">
for (i=1; i<=10; i++)
{
sq=i*i
document.write("número: " + i +
"cuadrado: " + sq + "br");
i++;
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
La sentencia
Break
Esta sentencia termina un bucle for o
while y devuelve el control a la sentencia que sigue al
bucle terminado. El siguiente ejemplo ilustra cómo se
usa:
i=0
while
(i < 10) {
if
(i==3)
break
i++
}
La sentencia
continue
Como la sentencia
break, esta sentencia termina la iteración actual de un
bucle for o while, pero no sale del bucle.
Que pase o no a la siguiente iteración depende del tipo de
bucle:
En un bucle
while el control pasa a la condición.
En un
bucle for el control pasa a la
expresión_incremental.
Ejemplo:
i=0
while (i
< 10) {
if
(i==3)
continue
i++
}
La sentencia
function
Una función es un
grupo de sentencias JavaScript que realizan una tarea
determinada. Se le puede llamar desde cualquier punto del
documento y juega un importante papel en la escritura de
gestores de eventos:
function
Nombre (lista de argumentos)
}
sentencias
}
Ejemplo:
<HTML>
<HEAD>
<SCRIPT
LANGUAJE="JavaScript">
function Mostrar(MostrarLinea +
"<BR>")
document.write(MostrarLinea +
"<BR>")
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT
LANGUAJE="JavaScript">
MostrarLinea("Hola
Mundo")
</SCRIPT>
</BODY>
</HTML>
Comentarios
JavaScript permite
dos tipos de comentarios:
//este es un
comentario
if (a==2) //comentarios desde aca
Introducción a
los Objetos
JavaScript es un
lenguaje basado en objetos y no un lenguaje orientado a
objetos (OOP). Los diseñadores de JavaScript no intentaron
crear otro OOP, sino que intentaron crear un lenguaje Script
que proporcionara una herramienta para integrar objetos
creados con un lenguaje OOP en documentos HTML.
Los objetos y
sus propiedades
Sistema de
notación utilizado para representar un objeto y sus
propiedades:
ObjectName.PropertyName
Ejemplo
miperro.raza="callejero"
miperro.edad=5
miperro.peso=25
Definir
métodos
Una función
asociada a un objeto se denomina método.
Objeto.Método=nombre_de_función
Objetos
predefinidos
Es uno de los
onjetos más importantes. Define la ventana sobre la que
estamos trabajando y tiene como descendientes los objetos
referentes a la barra de tareas, el documento o la secuencia
de direcciones de la última sesión.
Propiedades:
open
[Variable=][windows.]open("URL","Nombre",""Propiedades");
El método
open sirve para crear y abrir una ventana.
El parámetro
URL, contiene la dirección de la ventana que estamos
abriendo
El nombre será el que queramos que se
utilize como parámetro de un TARGET y las Propiedades
son una lista separada por comas de algunos de los
siguientes elementos:
- toolbar[=yes|no]
- location[=yes|no]
- directories[=yes|no]
- status[=yes|no]
- menubar[yes|no]
- scrollbars[=yes|no]
- resizable[=yes|no]
- width=pixels
- height=pixels
Close
Variable.close()
Cierra la ventana
Variable
alert
Variable.alert("Mensaje");
Muestra una ventana
de diálogo en la ventana Variable con el mensaje
especificado.
status
Define la cadena de
caracteres que saldrá en la barra de estado en un momento
dado
defaultStatus
Define la cadena de
caracteres que saldrá por defecto en la barra de
estado.
El objeto
document
Es un objeto
derivado de windows que identifica a un documento
HTML
write
document.write("Cadena");
Escribe el
script
lastModified
Contiene la fecha y
la hora en que se modificó el documento por última
vez.
El objeto
history
Este objeto se
deriva de document y contiene todas las direcciones que se han
visitado en la sesión actual. Tiene tres métodos:
- document.history.back(): Volver a la página
anterior.
- document.history.forward(): Ir a la página
siguiente.
- document.history.go(donde): Ir a donde se indique,
siendo donde un número tal que go(I)=forward() y
go(-I)=back
El objeto
form
Este objeto
derivado de document se refiere a un formulario.
submit
Nombre.submit() // Envía el formulario llamado
Nombre.
text
Contiene el texto
contenido en un campo de edición de un formulario.
El objeto
Date
Este objeto sirve
para trabajar con fechas y horas:
Métodos del
objeto Date
| Método |
Valor
devuelto |
| get Date (
) |
Día del
mes |
| get Day (
) |
Día de la
semana |
| get Hours (
) |
Hora del
día |
| get Minutes (
) |
Minutos de la
hora |
| get Month (
) |
Mes |
| get Seconds (
) |
Segundos del
minuto |
| get Time (
) |
Milisegundos
desde 1/1/70 |
| get
TimezoneOffret ( ) |
Derivación
desde la hora local y el GTM |
| get Year (
) |
Año |
Además de ser capaz
de dar información, los método del objeto Date, la tabla
siguiente muestra como cambiar la información de las
fechas:
| Método |
Valores
válidos |
| setDate
(dia) |
1 -
31 |
| setHours
(hora) |
0 -
23 |
| setMinutes
(minuto) |
0 -
59 |
| setMonth
(mes) |
0 -
11 |
| setSeconds
(segundo) |
0 -
59 |
| setTime
(valor) |
> =
0 |
| setYear
(año) |
> =
1970 |
El objeto
navigator
A través de este
objeto podremos averiguar varias características del navegador
que usamos:
navigator.appName: Nombre del
navegador
navigator.appVer: Número principal
de versión
navigator.languaje: Idioma del
mismo
navigator.platform: Plataforma donde
esta ejecutandose
El objeto
screen
Con este objeto
podremos averiguar la configurar de la pantalla:
screen.height:
Altura
screen.width:
Anchura
screen.pixelDepth: Número de bits
por pixel
Eventos
Un evento es algo
que sucede. Para que una rutina nuestra se ejecute sólo cuando
suceda algo deberemos llamarla desde un controlador de
eventos. Estos controladores se asocian a un elemento HTML y
se incluyen así:
<A HREF="http://www.lavariable.com/"
onMouseOver="MiFuncion()">
Lista de
eventos
| Evento |
Descripción |
Elementos que lo admiten |
| onLoad |
Terminar de cargarse una página |
<body><frameset><layer> |
| onUnLoad |
Salir de una página |
<body><frameset><layer> |
| onMouseOver |
Pasar el mouse por encima |
<a
href><area><layer> |
| onMouseOut |
Que
el mouse deje de estar encima |
<a
href><area><layer> |
| onSubmit |
Enviar un formulario |
<form> |
| onClick |
Pulsar un elemento |
<input type="button, checkbox, link,
radio"> |
| onBlur |
Perder el cursor |
<input type="text"> |
| onChange |
Cambiar el contenido o perder el cursor |
<input
type="text">
<textarea> |
| onFocus |
Conseguir el cursor |
<input
type="text">
<textarea>
<layer> |
| onSelect |
Seleccionar texto |
<input
type="text">
<textarea> |
Sumario
JavaScript es más que un simple
languaje script y menos que un completo lenguaje de
programación orientado a objetos. Muy importante a la hora de
realizar tareas del lado del cliente debido a su
compatibilidad con todos los navegadores
Ejemplos
1) Este script abre una
ventana, después que la página fué cerrada:
<!-- DOS PASOS PARA INSTALAR
EL SCRIPT:
1. Copiar este código dentro del HEAD de tu
documento HTML
2. Sumar en el eventoe onLoad dentro del tag
BODY -->
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
<!-- Comienzo
closetime = 0; // Cerrar la ventana después de __ segundos?
function Start(URL, WIDTH, HEIGHT)
{
windowprops = "left=50,top=50,width=" + WIDTH +
",height=" + HEIGHT;
preview = window.open(URL, "preview",
windowprops);
if (closetime)
setTimeout("preview.close();",
closetime*1000);
}
function doPopup() {
url =
"http://miVentana.htm";
width = 267; // ancho de la ventana en pixels
height = 103; // alto de la ventana en pixels
delay = 2; // time in seconds before popup
opens
timer = setTimeout("Start(url, width, height)",
delay*1000);
}
// Fin
-->
</script>
<BODY
OnLoad="doPopup();">
<p><center>
<a
href="http://www.lavariable.com">El Sitio de los programadores </a></font>
</center><p>
2) En este ejemplo, vamos a
comprobar los datos de tres formularios:
- Nombre Completo
- Dirección de Email
- Una Puntuación sobre el
Sitio
<SCRIPT
LANGUAGE="JavaScript">
// Espacios en
Blanco
var espacio ="\t\n\r";
//Chequear cuando
la entrada esté vacía
function EstaVacio(s)
{ return ((s
= = null) || (s.lenght = = 0 )) }
function
HayEspacio(s)
{
var
i;
if (EstaVacio(s)) return true;
// buscar a traves
de lo caracteres hasta encontrar un no espacio en
blanco.
for (i = 0; i <
s.length; i++)
{
var c =
s.charAt(i);
if (espacio.indexOf(c) = = -1)
return false;
}
return
true;
}
function
Entrada(val, str) {
var strInput = new
String(val.value);
if
(HayEspacio(strInput)) {
alert(str);
return
false;
} else
return
true;
}
function Ranking()
{
if (parseInt(document.forms[0].nRanking.value) >=
1 && parseInt(document.forms[0].nRanking.value)
<=10
return true;
else
return
false;
}
function
ValidarDatos() {
var EnviarDatos = false;
// Chequear si el
campo nombre no está vacío
EnviarDatos =
Entrar(document.forms[0].txtNombre, "Ingresá tu nombre
completo.");
//Chequear que el ranking sea entre 1 y
10
EnviarDatos = Ranking();
Return
EnviarDatos;
}
</SCRIPT>
Finalmente sólo nos falta crear
el formulario.
<form
name="Formulario" method="get"
action="EntradaDeFormulario.asp" onsubmit="return
ValidarDatos();">
Para consultas
técnicas utilizar los foros o la lista de
correo | 
