15 enero 2010

Objetos Predefinidos


ESTÁNDARES WEB
Tema 2.Presentación de datos en la Web
Objetos predefinidos


JavaScript es un lenguaje orientado a objetos. Un objeto es una colección de datos auto-contenidos. Cada objeto tiene acceso a un conjunto de propiedades y de métodos. Las propiedades son valores asociados a un objeto. Por ejemplo:
   <script type="text/javascript">
   var txt="Hola!"
   document.write(txt.length)
   </script>
el objeto txt de tipo String almacena en la propiedad length el valor 5, es decir el número de caracteres almacenados en la variable txt
Los métodos son las acciones que se pueden realizar sobre los objetos. En el ejemplo anterior se ha utilizado el método write sobre el objeto document. El objeto documentrepresenta a todo el documento HTML sobre el que se encuentra el código JavaScript, y el método write permite escribir texto sobre el de manera dinámica
A continuación se presentan los objetos predefinidos en JavaScript organizados en dos grupos. Para cada uno de ellos se incluye un enlace donde se puede encontrar un listado detallado de sus propiedades y métodos.

Objetos del Lenguaje

 String. El objeto String se utiliza para manipular texto. Para crear un objeto basta con inicializar una variable con una cadena de caracteres.
   var text=" ";
Ejemplo: string

Un listado detallado de sus propiedades y métodos se puede encontrar enhttp://www.w3schools.com/jsref/jsref_obj_string.asp
 Array. El objeto Array es utilizado para almacenar un conjunto de valores en una única variable.

La creación de un array se lleva a cabo con la sentencia:
    mi_array = new Array(); //vacío
    otro_array = new Array (10); //con espacio para 10 valores

Para añadir valores:
    mi_array [0]="Hola"
    mi_array [1]=3 //pueden ser de diferente tipo

o durante la creación del objeto
    var mi_array = new Array("Hola", 3);

Ejemplo: array

Un listado detallado de sus propiedades y métodos se puede encontrar enhttp://www.w3schools.com/jsref/jsref_obj_array.asp 
 Date: para trabajar con fechas y horas
Para crear objetos Date:
VarFecha=new Date();//inicializa con la fecha y la hora actual
VarFecha=new Date(2007,10,3); //año, mes, dia
VarFecha=new Date(2007,10,3,22,30,30);//año,mes,dia,hora,min,sg

Ejemplo: date

Un listado detallado de sus propiedades y métodos se puede encontrar enhttp://www.w3schools.com/jsref/jsref_obj_date.asp 

Otros objetos predefinidos del lenguaje son

Objetos del Navegador

Esta jerarquía tiene un nombre: Modelo de Objeto de Documento (DOM).
En la figura se muestra la jerarquía de objetos de JavaScript para Netscape Navigator 4.x. (figura de la izquierda) y IE 4.x/5.x (figura de la derecha) relacionados con el navegador y el documento que lo contiene. La parte que está sombreada en la figura de la derecha es lo que tienen en común ambas jerarquías.
La jerarquía hay que interpretarla de izquierda a derecha y de arriba hacia abajo. Así el objeto que está en lo más alto es window (la ventana del navegador) que tiene como propiedades Frame, Document, Location, History, que a su vez son objetos con sus propias propiedades y métodos.
A continuación presentamos aquellos más relevantes.
 Window. representa a la ventana o a un marco

Propiedades
defaultStatus: Contiene el mensaje para la barra de estado

frame: Es un array que contiene todos los frames de la ventana

length: Contiene el número de frames que tiene la ventana

name: Contiene el nombre que se le ha asiganado a la ventana al definirla o crearla

parent: Es el nombre de la ventana principal

self: El nombre de la ventana
top: Contiene el nombre de la ventana principal en el navegador

window: Nombre de la ventana actual
Métodos
alert(texto):Muestra en una ventana popup un texto

confirm(texto): Devuelve un valor true si se pulsa el botón OK, y un valor false si se pulsa el botón Cancel.

close(): Cierra una ventana referenciada, sino cierra la que ha invocado el método

open("Url","Nom_Ventana","Grup_Elements");: Abre una nueva ventana en el navegador

prompt (mensaje, [CampoEntrada]): La cadena de caracteres se visualizará en negrita

setTimeout: Sirve para evaluar una expresión al cabo de un número de milésimas de segundos. Se ejecuta una vez
clearTimeout: Cancela el Timeout especificado en el método anterior.
Ejemplo: window

Ejemplo de código:
<HTML>
<HEAD><TITLE>Pruebas JavaScript. Ventanas</TITLE>
<SCRIPT>
<!--
function crear_ventana()
{
nueva_ventana=window.open("","Hola"
,"toolbar=1,status=1,heigh=100,width=400");
nueva_ventana.document.write("<HTML>");
nueva_ventana.document.write("<TITLE>
Mi ventana</TITLE>")
nueva_ventana.document.write("<BODY>")
nueva_ventana.document.write("Una nueva ventana");
nueva_ventana.document.write("<FORM>");
nueva_ventana.document.write("<INPUT TYPE='button' NAME='Cerrar' VALUE='Cerrar'
onClick='window.close()'>")
nueva_ventana.document.write("</FORM>");
nueva_ventana.document.write("</BODY>");
nueva_ventana.document.write("</HTML>");
nueva_ventana.document.close();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="F1">
<INPUT TYPE="button" NAME="Botón" VALUE="Crear Ventana"
onClick="crear_ventana()">
</FORM>
</BODY>
</HTML>




Ejemplo de ejecución:
Más información sobre este objeto se puede encontrar enhttp://www.w3schools.com/htmldom/dom_obj_window.asp .
 document. contiene información sobre el actual documento y proporciona métodos para mostrar HTML

Propiedades
alinkColor: Color para el link activado

anchors: Array de anclas del documento

bgColor: Color de fondo

cookie: Especifica una cookie

fgColor: Especifica el color del texto

forms: Array que contiene los formularios

images: Array que contiene las imagenes. lastModified: Fecha de la última modificación del documento

linkColor: Color de los links

links: Array que contiene todos los links del documento

location: Contiene el URL del documento

referrer: Contiene el URL del documento desde donde ha sido llamado

title: Contiene el título del documento

vlinkColor: Color de los links visitados
Métodos
clear(): Borra el contenido del documento

close(): Cierra el documento

open(mimetype): Abre un documento para escritura

write(cadena): Inserta texto

writeln(cadena): Inserta texto y salta de línea
Ejemplo: document

Ejemplo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script LANGUAGE="JavaScript">
<!--//
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) {
roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) {
roll = 'true'; }
else { roll = 'false'; }
function msover(img,ref)
{
if (roll == 'true')
{ document.images[img].src= ref; }
}
function msout(img,ref)
{
if (roll == 'true')
{ document.images[img].src=ref; } }
//-->
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<a href="aqui ponemos un link si queremos"
onMouseOver="msover('image1','imagen_02.gif');"
onMouseOut="msout('image1','imagen_01.gif');"><img name="image1"
src="imagen_01.gif" border="0" width="88" height="32"></a>
</BODY>
</HTML>



Ejemplo de ejecución:
Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_document.asp 
 navigator. Permite recuperar información sobre el navegador, para poder determinar durante la ejecución lo que admite o no el navegador y así poder tomar ciertas decisiones

Propiedades
appName: Proporciona el nombre del navegador

appVersion: Número de versión del navegador

appCodeName: Nombre de código de la aplicación

userAgent: Agente de usuario que se envía a través de HTTP como encabezado

cookieEnabled: Proporciona si se admiten o no cookies

javaEnabled: Proporciona si esta disponible la Java Virtual Machine

Métodos
No tiene.
Ejemplo: navigator
Ejemplo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Nombre:"+navigator.appName+"<br>");
document.write("versión:"+navigator.appVersion+"<br>");
document.write("Código:"+navigator.appCodeName+"<br>");
document.write("Agente de Usuario:"+navigator.userAgent+"<br>");
//-->
</SCRIPT>
</BODY>
</HTML>



Ejemplo de ejecución:

Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_navigator.asp 
 location. contiene información referente al URL de la página actual.

Propiedades
hash:Incluye la sección de la URL que prosigue al carácter # si existe.

host: Contiene el nombre del host (ordenador).

hostname: especifica el nombre, el nombre de dominio o dirección IP del host dentro de la red

href: especifica el URL entero

pathname: Contiene la ruta o camino del recurso (página web, archivo, etc.) dentro del URL

port: Especifica el puerto de comunicaciones que utiliza el server para comunicarse

top: Contiene el nombre de la ventana principal en el navegador

protocol: especifica el tipo de protocolo (http:, ftp:, mailto: )
Métodos
reload(): La página actual se recargue

replace(URL): Sustituir el documento actual por el especificado en URL
Ejemplo: location
Ejemplo de código:
<HTML>
<HEAD>
<TITLE> Prueba de JavaScript </TITLE>
<SCRIPT>
<!--
function IrA(destino)
{
window.location.hash=destino;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Página de Prueba</h1>
<BR>
<BR>
<A NAME="primero">Primero</A>
<FORM NAME="F1">
<INPUT TYPE="button" VALUE="Segundo" onClick="IrA('segundo')">
<INPUT TYPE="button" VALUE="Tercero" onClick="IrA('tercero')">
</FORM>
<p><BR><p><BR><p><BR>
<p><BR><p><BR><p><BR><p><BR><p><BR><p><BR><p><BR><p><BR>
<A NAME="segundo">Segundo</A>
<FORM NAME="F2">
<INPUT TYPE="button" VALUE="Primero" onClick="IrA('primero')">
<INPUT TYPE="button" VALUE="Tercero" onClick="IrA('tercero')">
</FORM>
<BR><BR><BR><BR><BR><BR><p><BR><p><BR><p><BR><p><BR>
<A NAME="tercero">Tercero</A>
<FORM NAME="F3">
<INPUT TYPE="button" VALUE="Primero" onClick="IrA('primero')">
<INPUT TYPE="button" VALUE="Segundo" onClick="IrA('segundo')">
</FORM>
</BODY>
</HTML>



Ejemplo de ejecución:

Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_location.asp 
 history: contiene todas las URL que haya visitado el usuario durante una sesión

Propiedades
length: Número de elementos en la lista de URLs
Métodos
back(): Retrocede un elemento de la lista de páginas visitadas

fordward(): Adelanta un elemento de las páginas visitadas

go(numero): va al número especificado a partir de la actual
Ejemplo: history

Ejemplo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<FORM>
<INPUT TYPE="button" VALUE="Atras" onClick="history.go(-1)">
<INPUT TYPE="button" VALUE="Avanzar" onCLick="history.go(1)">
</FORM>
</BODY>
</HTML>



Ejemplo de ejecución:

Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_history.asp 
 screen: permite recuperar información sobre las capacidades de la pantalla

Propiedades
height: Altura en pixels

width: Anchura en pixels

colorDepth: Número de bits de color por pixel

updateInterval: Frecuencia con la que se refresca la pantalla
Métodos
No tiene.
Ejemplo: screen

Ejemplo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Altura:"+screen.height+"<br>");
document.write("Anchura:"+screen.width+"<br>");
document.write("Color:"+screen.colorDepth+"<br>");
document.write("Buffer:"+screen.bufferDepth+"<br>");
document.write("Refresco:"+screen.updateInterval+"<br>");
//-->
</SCRIPT>
</BODY>
</HTML>



Ver ejemplo de ejecución 

Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_screen.asp


Etiquetas:

entrada de RICHARD JORGE MIRANDA ABARCA @ enero 15, 2010