Existen una gran cantidad de objetos que han sido predefinidos en JavaScript y de los cuales podemos crear nuevas instancias y usar sus propiedades y métodos. Se dice que se generan instancias porque a diferencia de Java no se pueden derivar clases.
Estos objetos predefinidos son los que se conoce como Modelo de Objetos de Documento o DOM (Document Object Model). El DOM es una jerarquía de objetos que permiten controlar tanto la ventana del navegador como los objetos incluidos en una página HTML.
Veamos ahora algunos de los objetos más útiles al momento de realizar la programación con JavaScript.
El Objeto navigator
El objeto navigator nos da información relativa al browser que esté utilizando el visitante. Sus propiedades y métodos sólo dan información, esto es, no es posible modificarlas.
|
Propiedades |
|
| appCodeName |
Cadena que contiene el nombre del código del cliente. |
| appName |
Cadena que contiene el nombre del cliente. |
| appVersion |
Cadena que contiene información sobre la versión del cliente |
| language |
Cadena de dos caracteres que contiene información sobre el idioma de la versión del cliente. |
| mimeTypes |
Array que contiene todos los tipos MIME soportados por el cliente. |
| platform |
Cadena con la plataforma sobre la que se está ejecutando el programa cliente. |
| plugins |
Array que contiene todos los plug-ins soportados por el cliente. |
| userAgent |
Cadena que contiene la cabecera completa del agente enviada en una petición HTTP |
| cpuClass |
Tipo de micro |
|
Métodos |
|
| javaEnabled() |
Devuelve true si el cliente permite la utilización de Java, o false en caso contrario. |
Ejemplo:
<html>
<head>
<title>Ejemplo manejo objeto navigator</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<script language=»JavaScript»>
<!–
window.alert(«Hola!!, veo que usas el » +
navigator.appName +
» y se que es la versión » +
navigator.appVersion);
//–>
</script>
</body>
</html>
Este ejemplo muestra el nombre del navegador del cliente y la versión del mismo por medio de un cuadro de mensaje
El Objeto window
Sin duda uno de los objetos más importantes de JavaScript, ya que permite la comunicación con la ventana del navegador, manejar la creación de nuevas ventanas, manejo de frames, etc.
|
Propiedades |
|
|
closed |
Es un booleano que nos dice si la ventana está cerrada ( closed = true ) o no ( closed = false ) |
|
defaultStatus |
Cadena que contiene el texto por defecto que aparece en la barra de estado (status bar) del navegador. |
|
frames |
Es un array que contiene cada uno de los frames que contiene la ventana |
|
history |
Se trata de un array que representa las URLS almacenadas en su historial |
|
length |
Variable que nos indica cuántos frames tiene la ventana actual. |
|
location |
Cadena con la URL de la barra de dirección. |
|
name |
Contiene el nombre de la ventana, o del frame actual. |
|
opener |
Es una referencia al objeto window que lo abrió, si la ventana fue abierta con el método open(). |
|
parent |
Referencia al objeto window que contiene el frameset |
|
self |
Es un nombre alternativo del window actual. |
|
status |
String con el mensaje que tiene la barra de estado |
|
top |
Nombre alternativo de la ventana del nivel superior. |
|
window |
Igual que self: nombre alternativo del objeto window actual. |
|
Métodos |
|
|
alert(mensaje) |
Muestra un mensaje en un cuadro de diálogo que contiene un botón Aceptar |
|
blur() |
Elimina el foco del objeto window actual. |
|
clearInterval(id) |
Elimina el intervalo referenciado por ‘id’ (ver el método setInterval()). |
|
clearTimeout(nombre) |
Cancela el intervalo referenciado por ‘nombre’ (ver el método setTimeout()). |
|
close() |
Cierra el objeto window actual. |
|
confirm(mensaje) |
Muestra un mensaje en un cuadro de diálogo, contiene dos botones Aceptar y Cancelar. |
|
focus() |
Captura el foco del ratón sobre el objeto window actual. |
|
moveBy(x,y) |
Mueve el objeto window actual el número de pixels especificados por (x,y) |
|
moveTo(x,y) |
Mueve el objeto window actual a las coordenadas (x,y). |
|
open(URL,nombre,opciones) |
Abre la URL que le pasemos como primer parámetro en una ventana de nombre nombre. Si la URL no existe, abrirá una ventana nueva. Las características para la ventana que queramos abrir son: |
|
Detalle de opciones al abrir una nueva Ventana
|
|
|
prompt(mensaje,valor por defecto) |
Muestra un cuadro de diálogo que contiene una caja de texto en la que el usuario puede introducir datos como respuesta al mensaje. El parámetro ‘valor por defecto’ es opcional, y mostrará la caja de texto con la respuesta por defecto indicada. |
|
scroll(x,y) |
Desplaza el objeto window actual a las coordenadas especificadas por (x,y). |
|
scrollBy(x,y) |
Desplaza el objeto window actual el número de pixeles especificado por (x,y). |
|
scrollTo(x,y) |
Desplaza el objeto window actual a las coordenadas especificadas por (x,y). |
|
setInterval(expresion,tiempo) |
Evalúa la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearInterval(). |
|
setTimeout(expresion,tiempo) |
Evalúa la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearTimeout(). |
|
|
Imprime el documento |
|
Eventos |
|
|
onLoad |
Revisaremos cada uno en detalle en la sección siguiente, ya que constan principalmente en lo mismo con la salvedad que ocurren en objetos diferentes. |
|
onUnload |
|
|
onBlur |
|
|
onError |
|
|
onFocus |
|
Ejemplo:
<html>
<head>
<title>Uso de objeto window</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<script language=»JavaScript»>
<!–
valor=window.prompt(«Ingrese una expresión cualquiera»,»la que desee»);
window.alert(«El mensaje ingresado fue: » + valor);
//–>
</script>
</body>
</html>
Este ejemplo pide una expresión, cualquier cadena, y luego la muestra por medio de un cuadro de mensaje por la pantalla.
El Objeto document
A través de este objeto se pueden acceder todos los objetos de la página. Imágenes, formularios, enlaces, etc.
|
Propiedades |
|
| alinkColor |
Esta propiedad tiene almacenado el color de los enlaces activos. |
| anchors |
Se trata de un array con los enlaces internos existentes en el documento. |
| applets |
Es un array con los applets existentes en el documento. |
| bgColor |
Propiedad que almacena el color de fondo del documento. |
| cookie |
Es una cadena con los valores de las cookies del documento actual. |
| domain |
Guarda el nombre del servidor que ha servido el documento. |
| embeds |
Es un array con todos los EMBED del documento. |
| fgColor |
En esta propiedad tenemos el color del primer plano. |
| forms |
Array con todos los formularios del documento. Los formularios tienen a su vez elementos (cajas de texto, botones, etc) con sus propias propiedades y métodos. |
| images |
Array con todas las imágenes del documento. |
| lastModified |
Cadena con la fecha de la última modificación del documento |
| linkColor |
Propiedad que almacena el color de los enlaces |
| links |
Es un Array con los enlaces externos |
| location |
Cadena con la URL del documento actual |
| referrer |
Cadena con la URL del documento que llamó al actual, en caso de usar un enlace |
| title |
Cadena con el título del documento actual |
| vlinkColor |
Propiedad en la que se guarda el color de los enlaces visitados |
|
Métodos |
|
| clear() |
Limpia la ventana del documento |
| close() |
Cierra la escritura sobre el documento actual |
| open(mime,»replace») |
Abre la escritura sobre un tipo (mime) de documento soportado por el navegador. Con replace, se rehusa el documento anterior en el historial. |
| write() |
Escribe texto en el documento. |
| writeln() | Escribe una o mas expresiones de HTML en el documento contenido en la ventana indicada, seguidas de un caracter de nueva linea. document.writeln(exp1[,exp2]…[,expN]) |
|
Eventos Soportados |
|
| onClick |
Revisaremos cada uno en detalle en la sección siguiente, ya que constan principalmente en lo mismo con la salvedad que ocurren en objetos diferentes. |
| onDblClick | |
| onKeyDown | |
| onKeyPress | |
| onKeyUp | |
| onMouseDown | |
| onMouseUp | |
Ejemplo:
<html>
<head>
<title>Uso de objeto window</title>
<script language=»JavaScript»>
<!–
function ColorPagina(color)
{
if(color!=»)
{
document.bgColor=color;
}
else
{
document.bgColor= «#» +
Math.round(Math.random()*98) +
Math.round(Math.random()*98) +
Math.round(Math.random()*98);
}
};
//–>
</script>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<h1>Pasa el Mouse por encima del color que desees de fondo</h1>
<a href=»#» onMouseOver=»ColorPagina(‘#ff0000’);»>Rojo</a><br>
<a href=»#» onMouseOver=»ColorPagina(‘#00ff00’);»>Verde</a><br>
<a href=»#» onMouseOver=»ColorPagina(‘#0000FF’);»>Azul</a><br>
<a href=»#» onMouseOver=»ColorPagina(‘#ff00FF’);»>Púrpura</a><br>
<a href=»#» onMouseOver=»ColorPagina(‘#ffffff’);»>Blanco</a><br>
<a href=»#» onMouseOver=»ColorPagina(‘#000000’);»>Negro</a><br>
<a href=»#» onMouseOver=»ColorPagina(‘#00ffff’);»>Celeste</a><br>
<a href=»#» onMouseOver=»ColorPagina(‘#cccccc’);»>Plomo</a><br>
<a href=»#» onMouseOver=»ColorPagina(‘#125412’);»>Verde Obscuro</a><br>
<a href=»#» onMouseOver=»ColorPagina(»);»><b>Aleatorio</b></a><br>
</body>
</html>
Con este ejemplo podemos cambiar el color del fondo de la página. Puedes probarlo buscando el ejemplo obj_document.html en los archivos adjuntos.
El Objeto String
Este objeto entrega una serie de propiedades y métodos para la manipulación de cadenas de caracteres.
|
Propiedades |
|
|
length |
Valor numérico que nos indica la longitud en caracteres de la cadena dada |
|
prototype |
permite asignar nuevas propiedades al objeto String. |
|
Métodos |
|
|
anchor(nombre) |
Crea un enlace y asigna al atributo name el valor de ‘nombre’, debe ir entre comillas. |
|
big() |
Muestra la cadena de caracteres con una fuente grande. |
|
blink() |
Muestra la cadena de texto con un efecto intermitente. |
|
charAt(indice) |
Devuelve el carácter situado en la posición especificada por ‘índice’ |
|
fixed() |
Muestra la cadena de caracteres con una fuente proporcional. |
|
fontcolor(color) |
Cambia el color de la fuente. El color se especifica en hexadecimal o con su nombre en inglés. |
|
fontsize(tamaño) |
Cambia el tamaño con el que se muestra la cadena. Los tamaños válidos son de 1 a 7 |
|
indexOf(cadena_buscada,indice) |
Devuelve la primera ocurrencia de ‘cadena_buscada’ dentro de la cadena, a partir de la posición dada por indice. Este último es opcional, si se omite, la búsqueda se hace desde el principio de la cadena. |
|
italics() |
Muestra la cadena en cursiva. |
|
lastIndexOf(cadena_buscada,indice) |
Devuelve la última ocurrencia de ‘cadena_buscada’ dentro de la cadena, a partir de la posición dada por indice, y buscando hacia atrás, si se omite, la búsqueda se hace desde el final de la cadena. |
|
link(URL) |
Convierte la cadena en un vínculo asignando al atributo HREF el valor de URL |
|
small() |
Muestra la cadena con una fuente pequeña. |
|
split(separador) |
Parte la cadena en un Array de caracteres. Si no se indica separador, el Array tiene un sólo elemento con la cadena original. |
|
strike() |
Muestra la cadena de caracteres tachada. |
|
sub() |
Muestra la cadena con formato de subíndice. |
|
substring(inicio,fin) |
Devuelve la subcadena comprendida entre los índices. |
|
sup() |
Muestra la cadena con formato de superíndice. |
|
toLowerCase() |
Devuelve (transforma) la cadena en minúsculas |
|
toUpperCase() |
Devuelve (transforma) la cadena en mayúsculas |
|
replace(letr1,letr2) |
Reemplaza letr1 por letr2. |
Ejemplo:
<html>
<head>
<title>Uso de objeto string</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<script language=»JavaScript»>
<!–
var cadena = new String();
cadena = window.prompt(«Ingrese un texto cualquiera», «El que desee»);
document.write(«Método toLowerCase: » + cadena.toLowerCase());
document.write(«<br>»);
document.write(«Método toUpperCase: » + cadena.toUpperCase());
document.write(«<br>»);
document.write(«Método strike: » + cadena.strike());
document.write(«<br>»);
document.write(«Método sup: » + cadena.sup());
document.write(«<br>»);
document.write(«Método sub: » + cadena.sub());
document.write(«<br>»);
document.write(«Método link: » + cadena.link(‘http://informatica.comunalia.net’));
document.write(«<br>»);
document.write(«Método fotsize: » + cadena.fontsize(10));
document.write(«<br>»);
document.write(«Método fontcolor: » + cadena.fontcolor(«red»));
document.write(«<br>»);
document.write(«Método italics: » + cadena.italics());
//–>
</script>
</body>
</html>
Como podemos observar, hemos utilizado varios métodos del objeto String y puede probarlo visualizando el ejemplo obj_string.html que se anexa junto a este tutorial.
El Objeto Array
Este objeto permite trabajar con arreglos de acuerdo al tamaño que se le indique inicialmente.
|
Propiedades |
|
| length |
Nos dice la longitud del Array, es decir, cuántos elementos tiene |
| prototype |
Permite asignar nuevas propiedades al objeto Array |
|
Métodos |
|
| join(separador) |
Une los elementos de texto de cada elemento de un Array en un string |
| reverse() |
Invierte el orden de los elementos del Array. |
| sort() |
Ordena los elementos del Array siguiendo el orden lexicográfico |
Ejemplo:
En el siguiente ejemplo se utilizan varias de las opciones del objeto Array.
<html>
<head>
<title>Uso objeto Array</title>
<script language=»JavaScript»>
<!–
function Arreglo()
{
var arreglo = new Array();
indice=0;
lee=window.prompt(«Ingrese una expresion o valor.\r\n
Termine ingresando un 0.», «0»);
while(lee!=0)
{
arreglo[indice]=lee;
indice++;
lee=window.prompt(«Ingrese una expresion o valor.\r\n
Termine ingresando un 0.», «0»);
};
document.forms[‘termina’].elements[‘valores’].value = «»;
for(i=0;i<(indice-1);i++)
{
document.forms[‘termina’].elements[‘valores’].value += arreglo[i] + » – «;
}
if(i<indice)
document.forms[‘termina’].elements[‘valores’].value += arreglo[i];
document.forms[‘termina’].elements[‘valores_join’].value = arreglo.join(«,»);
document.forms[‘termina’].elements[‘valores_sort’].value = arreglo.sort();
};
//–>
</script>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<center><h1>Ejemplo de Array</h1>
<form name=»empieza»>
<input type=»button» onClick=»Arreglo();» value=»Comenzar Ejemplo»>
</form></center>
<center>
<form name=»termina»>
<b>Los valores ingresados separados por guiones fueron:</b><br>
<input type=»text» name=»valores» size=»30″><br><br>
<b>Los valores ingresados en join:</b><br>
<input type=»text» name=»valores_join» size=»30″><br><br>
<b>Los valores ingresados ordenados lexicográficamente:</b><br>
<input type=»text» name=»valores_sort» size=»30″><br>
</form>
</center>
</body>
</html>
Puedes ver el ejemplo en los archivos anexos con el nombre de obj_Array.html.
El Objeto Math
Este objeto presenta una serie de propiedades y métodos útiles para el manejo de cosas matemáticas.
|
Propiedades |
|
| e | Número e, base de los logaritmos naturales (neperianos) |
| ln2 | Logaritmo neperiano de 2. |
| ln10 | Logaritmo neperiano de 10. |
| log2e | Logaritmo en base 2 de e. |
| log10e | Logaritmo en base 10 de e |
| pi | Número PI. |
| sqrt2 | Raíz cuadrada de un número 2 |
|
Métodos |
|
| abs() | Valor absoluto |
| max(v1,..,vn) min(v1,..,vn) | Devuelven el máximo y mínimo de los valores introducidos. |
| round() | Redondea un valor con decimales al número entero mas cercano |
| exp() | Exponencial |
| log() | Devuelve el logaritmo. |
| pow(base,exp) | Potencia |
| sqrt() | Raíz cuadrada |
| sin(), cos(), tan() | Devuelve el seno, coseno, tangente de un numero (que debe estar en radianes) |
| asin(),acos(),atan() | Devuelve Arcoseno, arcocoseno, arcotangente |
| ceil(numero) | Devuelve el entero obtenido de redondear numero por arriba. |
| floor(numero) | Devuelve el entero obtenido de redondear numero por abajo. |
| random() | Devuelve un número pseudoaleatorio entre 0 y 1 |
Ejemplo:
<html>
<head>
<title>Uso objeto Math</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<center><h1>Ejemplo de Math</h1></center>
<center>
<form name=»calcula»>
<b>Ingrese un valor:</b><br>
<input type=»text» name=»valor» size=»30″><br>
<b>Seleccione la operación sobre ese valor:</b><br>
<input type=»button» value=»Raiz Cuadrada» onClick=»JavaScript:this.form.elements[‘resultado’].value=Math.sqrt(this.form.elements[‘valor’].value);»>
<input type=»button» value=»Valor Absoluto» onClick=»JavaScript:this.form.elements[‘resultado’].value=Math.abs(this.form.elements[‘valor’].value);»>
<input type=»button» value=»Seno» onClick=»JavaScript:this.form.elements[‘resultado’].value=Math.sin(this.form.elements[‘valor’].value);»>
<input type=»button» value=»Redondeo» onClick=»JavaScript:this.form.elements[‘resultado’].value=Math.round(this.form.elements[‘valor’].value);»>
<input type=»button» value=»Aleatorio entre 0 y el número» onClick=»JavaScript:this.form.elements[‘resultado’].value=Math.random()*this.form.elements[‘valor’].value;»>
<br>
<br>
<b>Resultado:</b><input type=»text» name=»resultado»>
</form>
</center>
</body>
</html>
Como se puede apreciar, se utilizan los métodos más comunes del objeto Math. Puedes ver el ejemplo en los archivos adjuntos con el nombre de obj_Math.html.
El Objeto Date
Objeto que entrega una serie de métodos que permiten trabajar con la fecha y hora del sistema.
|
Métodos |
|
| getDate() | Devuelve el día del mes actual como un entero entre 1 y 31. |
| getDay() |
Devuelve el día de la semana actual como un entero entre 0 y 6. |
| getHours() | Devuelve la hora del día actual como un entero entre 0 y 23. |
| getMinutes() |
Devuelve los minutos de la hora actual como un entero entre 0 y 59 |
| getMonth() |
Devuelve el mes del año actual como un entero entre 0 y 11 |
| getSeconds() |
Devuelve los segundos del minuto actual como un entero entre 0 y 59. |
| getTime() |
Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta el momento actual. |
| getYear() |
Devuelve el año actual como un entero con dos dígitos. esta función no está preparada para el año 2000. |
| getFullYear() |
A partir de la versión 1.3 de JavaScript, devuelve el año actual como un valor de 4 dígitos. |
|
setDate |
Establece el día del mes (1 a 31) |
|
setMonth |
Establece el mes del año (1 a 11) |
|
setYear |
Establece el año a partir de 1900 |
|
setHours |
Establece la hora del día (0 a 23) |
|
setMinutes |
Establece los minutos (0 a 59) |
|
setSeconds |
Establece los segundos (0 a 59) |
|
setTime |
Establece el valor del objeto Date, en milisegundos a partir de las 0:00:00 del 1º de enero de 1970 |
|
toGMTString |
Convierte un objeto Date a una cadena usando un formato GMT para Internet |
|
toLocaleString |
Convierte un objeto Date a una cadena usando el formato local |
|
parse |
Convierte una cadena representando una fecha al tiempo en milisegundos a partir de 0:00:00 del 1º de enero de 1970 |
|
UTC |
Convierte una fecha al tiempo en milisegundos a partir de las 0:00:00 del 1º de enero de 1970 |
Ejemplo:
Este simple ejemplo muestra la fecha de hoy.
<html>
<head>
<title>Uso objeto Date</title>
<script language=»JavaScript»>
<!–
function Fecha()
{
var fecha_hoy = new String();
var fecha_actual = new Date();
var meses = new Array(«enero», «febrero», «marzo», «abril», «mayo», «junio», «julio», «agosto», «septiembre», «octubre», «noviembre», «diciembre»);
fecha_hoy = «Hoy es: «;
fecha_hoy += fecha_actual.getDate() + » de «;
fecha_hoy += meses[fecha_actual.getMonth()] + » de «;
fecha_hoy += fecha_actual.getFullYear();
document.write(fecha_hoy);
};
//–>
</script>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<center><h1>Ejemplo de Fecha muestra la Fecha de hoy</h1></center>
<center>
<script language=»JavaScript»>
<!–
Fecha();
//–>
</script>
</center>
</body>
</html>
El Objeto location
Este objeto es muy útil, ya que permite controlar la página que se mostrará en la ventana o frame.
|
Propiedades |
|
| hash | Cadena que contiene el nombre del enlace, dentro de la URL |
| host | Cadena que contiene el nombre del servidor y el número del puerto, dentro de la URL. |
| hostname | Cadena que contiene el nombre de dominio del servidor (o dirección IP), dentro de la URL |
| href | Cadena que contiene la URL completa. |
| pathname | Cadena que contiene el camino al recurso, dentro de la URL. |
| port | Cadena que contiene el número de puerto del servidor, dentro de la URL. |
| protocol | Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la URL |
| search | Cadena que contiene la información pasada en una llamada a un script CGI, dentro de la URL |
|
Métodos |
|
| reload() | Vuelve a cargar la URL especificada en la propiedad href del objeto location. |
| replace(cadenaURL) |
Reemplaza el historial actual mientras carga la URL especificada en cadenaURL |
Ejemplo:
<html>
<head>
<title>Uso objeto location</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<center><h1>Ejemplo de uso del objeto location</h1></center>
<p align=»center»>
<a href=»#» onClick=»JavaScript:location.reload();»>Recargar Página</a>
</p>
<p align=»center»>
<form><input type=»button» value=»Cargar Segunda Página» onClick=»JavaScript:location.replace(‘obj_location_dos.html’);»></form>
</p>
</body>
</html>
