4.3 Manipulación de objetos

Manipulación de Objetos

El Modelo de Objetos del Documento (DOM) permite ver el mismo documento de otra manera, describiendo el contenido del documento como un conjunto de objetos que un programa Javascript puede actuar sobre ellos.

¿Qué es el Modelo de Objetos del Documento?

Acorde al W3C el Modelo de Objetos del Documento es una interfaz de programación de aplicaciones (API) para documentos validos HTML y bien construidos XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula.

El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y cada porción de texto en un nodo de texto. Para comprender más fácilmente véase el siguiente ejemplo:

<body>

<p>Esto es un párrafo que contiene <a href="#">un enlace</a> en el medio. </p>

<ul>

<li>Primer punto en la lista</li>

<li>Otro punto en la lista</li>

</ul>

</body>

Como puede verse un elemento [a] se encuentra localizado dentro de un elemento [p] del HTML, convirtiéndose en un nodo hijo, o simplemente hijo del nodo [p], de manera similar [p] es el nodo padre. Los dos nodos li son hijos del mismo padre, llamándose nodos hermanos o simplemente hermanos.

Es importante comprender la diferencia entre elementos y nodos de textos. Los elementos comúnmente son asociados a las etiquetas. En HTML todas las etiquetas son elementos, tales como <p>, <img> y <div> por lo que tienen atributos y contienes nodos hijos. Sin embargo, los nodos de textos no poseen atributos e hijos.

Objetos predefinidos por Javascript

Javascript maneja los siguientes objetos predefinidos para ayudar en la construcción de rutinas complejas: Array, Date, String y Math, si bien en las implementaciones actuales de navegadores, se consideran y se tratan como objetos, además, los siguientes: Boolean, Function, Global, Number, Object, RegExp, y Error. No obstante, los cuatro primeros, junto a Number se consideran objetos intrínsecos del lenguaje

Objeto array

El objeto array se encarga de almacenar en memoria una serie de datos del mismo tipo, que más adelante podremos recuperar. Los datos que contiene el array se referencia por un número de índice, de forma que el primer elemento será array [0], el siguiente será array [1] y así sucesivamente. El array, al ser un objeto, requiere de una construcción del mismo, antes de ser utilizado. La creación del objeto se hace utilizando su constructor, de la forma siguiente:

nombre_objeto = new array(10);

nombre_objeto = new array(elemento1,elemento2) ;

Una vez se ha creado el objeto y dado un nombre, se puede empezar a utilizar, asignando o tomando

datos del mismo.

amigos = new array(10);

amigos[0] = "David";

amigos[1] = "Roberto";

amigos[2] = "Ángel";

Objeto date

Es el objeto que nos permite trabajar con fechas y horas. Al ser un objeto, requiere de un constructor, semejante al utilizado por todos los objetos.( similar al objeto array, por ejemplo). Podemos crear un objeto de tipo fecha, sin especificar parámetros, y que serviré para especificar su contenido en un punto posterior del código. También podemos crear el mismo objeto, con una fecha como parámetro. Esto es, un objeto tipo fecha inicializado con un valor de fecha. El parámetro puede recibir una fecha, o bien una fecha y una hora.

En el Código fuente se muestra una construcción sin parámetros, otra con un parámetro de tipo fecha, y por último, otra más con parámetros de tipo fecha y hora. Aparecen en el ejemplo los datos que tomaría el objeto creado.

Dia = new Date();

Cumpleaños = new Date(74,9,25);

alert(Cumpleaños);<script>

function conFecha() { var CUMP; CUMP = new Date(74,8,25); alert(CUMP); }

function conFecha2() { var AVIS; AVIS = new Date(99,2,14,11,55,26); alert(AVIS); }

</script>

En el Código fuente , vemos cómo configurar un objeto tipo Fecha incluyéndole la hora, pues

hemos visto en el ejemplo anterior cómo JavaScript pone por defecto la hora a 00:00:00

var AVIS;

AVIS = new Date(99,2,15,11,25,0);

alert(AVIS);

Métodos del objeto Date

En la Tabla listamos el cuadro con los métodos definidos para el objeto Date.

En el Código fuente se muestra un ejemplo práctico, en el que declaramos una fecha, y posteriormente rectificamos uno de sus parámetros (en este caso el día).

{

FEC=new Date(74,9,25);

alert(FEC);

} </script>

Objeto Math

El objeto Math, contiene propiedades y métodos para el uso de funciones y constantes matemáticas así

como sus valores (en el caso de las constantes).

Propiedades de Math

Las propiedades del objeto Math contienen las constantes matemáticas de uso más frecuente:

Métodos de Math

Los métodos del objeto Math se corresponden con funciones matemáticas de uso frecuente.

Ejercicio práctico de math

Con este ejercicio, se calculará el seno, coseno y tangente de 30º, y se ubicarán las respuestas en tres cajas de texto correspondientes. Veamos el Código fuente 76.

<HTML>

<BODY>

</FORM>

Formulario2.CajaSeno.value=Math.sin(30);

Formulario2.CajaCoseno.value=Nath.cos(30);

Formulario2.CajaTangente.value=Math.tan(30);

</SCRIPT>

</BODY>

</HTML>

Objeto string

Las cadenas de texto, en Java Script, son realmente objetos, que contienen una cadena de caracteres. Estos objetos disponen también de propiedades y métodos aplicables a la propia cadena de texto como estructura, como pueden ser su propiedad longitud (length), o su método convertir a cursiva (italics()). El objeto String ha de ser construido previamente a su utilización. En el Código fuente se muestra cómo.

miCadena=new String("Bienvenido a mi página web")

Los objetos String se utilizan para permitir una forma directa de manipulación dinámica de textos, sin tener que recurrir directamente a las hojas de estilo. Una vez definido el objeto String, y la cadena que contiene, el objeto es plenamente operativo.

Propiedades de String

Solo posee una propiedad: la longitud de la cadena (length):

y=cadena.length

Métodos string

Bibliografía

http://www.maestrosdelweb.com/dom/

https://programacionwebisc.wordpress.com/4-2-objetos-lenguaje-script-inter-construidos/