Juan Garcés

Personal Blog

El Lenguaje JavaScript

julio 17th, 2013

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

  • fullscreen = [yes|no] Maximizar ventana
  • toolbar = [yes|no|1|0] si la ventana tendrá barra de herramientas (yes,1) o no (no, 0).
  • location
    = [yes|no|1|0] si la ventana tendrá campo de localización o no.
  • directories = [yes|no|1|0] si la nueva ventana tendrá botones de dirección o no.
  • status
    = [yes|no|1|0] si la nueva ventana tendrá barra de estado o no.
  • menubar = [yes|no|1|0] si la nueva ventana tendrá barra de menús o no.
  • scrollbars = [yes|no|1|0] si la nueva ventana tendrá barras de desplazamiento o no.
  • resizable
    = [yes|no|1|0] si la nueva ventana podrá ser cambiada de tamaño o se mantendrá con el tamaño fijo.
  • width
    = px el ancho de la ventana en pixeles. Puede ser de 800 por 600, de 1024 por 768 y varios más.
  • height = px alto de la ventana en pixeles.
  • outerWidth = px el ancho total de la ventana en pixeles.
  • outerHeight = px el alto total de la ventana el pixeles.
  • left
    = px la distancia en pixeles desde el lado izquierdo de la pantalla a la que se debe colocar la ventana.
  • top = px la distancia en pixeles desde el lado superior de la pantalla a la que se debe colocar la 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().

print

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>

Juan Garcés

Personal Blog