CONTENIDO

UNIDAD 2.

3. JAVASCRIP
3.1 Introducción - Javascript para aplicaciones cliente Javascript
3.2 Javascript para aplicaciones
Valores Javascript - Literales Javascript
3.3 Objetos Javascript - Métodos Javascript
3.4 Operadores Javascript - Condicionales Javascript –
3.5 Bucles Javascript - Funciones Javascript
 JAVASCRIPT[1]
DOM[2][3]
El Modelo de Objetos del Documento (DOM) es una interfaz de programación de
aplicaciones (API) para documentos validos HTML y bien construidos XML (XML, es un
lenguaje ampliamente utilizado en programación web, que optimiza los documentos utilizando las
normativas de la W3C. Gracias a esta normativa, los desarrolladores pueden crear sus propias
etiquetas, lo que facilita el proceso de programación orientada a web y a Internet, así como
también la interpretación, transmisión y organización de datos). Define la estructura lógica de
los documentos y el modo en que se accede y manipula. En la especificación DO M, el
término "documento" es utilizado en un sentido amplio - the term "document" is used
in the broad sense - cada vez más XML es utilizado como un medio de representar
muchas clases diferentes de información que puede ser almacenada en sistemas
diversos, y mucha de esta información se vería, en términos tradicionales, más como
datos que como documentos. Sin embargo, XML presenta estos datos como
documentos, y se puede utilizar DOM para manejar estos datos.
Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Si n
embargo, para poder utilizar las utilidades de DOM, es necesario "transformar" la
página original. Una página HTML normal no es más que una sucesión de caracteres,
por lo que es un formato muy difícil de manipular. Por ello, los navegadores web
transforman automáticamente todas las páginas web en una estructura más eficiente
de manipular.
Esta transformación la realizan todos los navegadores de forma automática y nos
permite utilizar las herramientas de DOM de forma muy sencilla. El motivo por el que
se muestra el funcionamiento de esta transformación interna es que condiciona el
comportamiento de DOM y por tanto, la forma en la que se manipulan las páginas.
Para entender mejor, todo lo relacionado a DOM y el árbol de nodo, observa el siguiente
ejemplo[4]:
Tenemos este código HTML.

Con el Modelo de Objetos del Documento, los programadores pueden construir

documentos, navegar por su estructura, y añadir, modificar, o eliminiar elementos y
contenido. Se puede acceder a cualquier cosa que se encuentre en un documento HTML
o XML, modificando, borrando o añadiendo utilizando el Modelo de Objetos del
Documento, con algunas excepciones - en particular, aún no se han especificado Su árbol de nodo y los tipos de nodos en el DOM, se ven reflejados en la siguiente
aplicaciones DOM para los subconjuntos interneto y externos de XML. imágen:

A pesar de sus orígenes, DOM se ha convertido en una utilidad disponible para la

mayoría de lenguajes de programación (Java, PHP, JavaScript) y cuyas únicas
diferencias se encuentran en la forma de implementarlo.

ÁRBOL DE NODOS

Una de las tareas habituales en la programación de aplicaciones web con JavaScript

consiste en la manipulación de las páginas web. De esta forma, es habitual obtener el
valor almacenado por algunos elementos (por ejemplo los elementos de un
formulario), crear un elemento (párrafos, <div>, etc.) de forma dinámica y añadirlo a
la página, aplicar una animación a un elemento (que aparezca/desaparezca, que se
desplace, etc.).
 De este modo, se puede obtener el primer párrafo de la página de la siguiente manera:
La especificación completa de DOM define 12 tipos de nodos, aunque las páginas HTML
habituales se pueden manipular manejando solamente cuatro o cinco tipos de nodos: var primerParrafo = parrafos[0].innerHTML;

 Document, nodo raíz del que derivan todos los demás nodos del árbol. Se utiliza innerHTML para recuperar el contenido actual de una etiqueta o un
 Element, representa cada una de las etiquetas HTML. Se trata del único nodo contenedor y también para insertar nuevo contenido en ese contenedor o etiqueta.
que puede contener atributos y el único del que pueden derivar otros nodos.
 Attr, se define un nodo de este tipo para representar cada uno de los atributos De la misma forma, se podrían recorrer todos los párrafos de la página con el siguiente
de las etiquetas XHTML, es decir, uno por cada par atributo=valor. código:
 Text, nodo que contiene el texto encerrado por una etiqueta HTML.
 Comment, representa los comentarios incluidos en la página HTML. for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i].innerHTML;
Los otros tipos de nodos existentes son DocumentType, CDataSection, }
DocumentFragment, Entity, EntityReference, ProcessingInstruction y Notation
(Temas de investigación) Ejemplo Práctico:

¿Cómo acceder a los nodos de un DOM?

DOM proporciona dos métodos alternativos para acceder a un nodo específico: acceso
a través de sus nodos padre y acceso directo.

 getElementsByTagName()
La función getElementsByTagName(nombreEtiqueta) obtiene todos los elementos de
la página XHTML cuya etiqueta sea igual que el parámetro que se le pasa a la función.

El siguiente ejemplo muestra cómo obtener todos los párrafos de una página HTML:

var parrafos = document.getElementsByTagName("p");

El valor que se indica delante del nombre de la función (en este caso, document) es el
nodo a partir del cual se realiza la búsqueda de los elementos. En este caso, como se
quieren obtener todos los párrafos de la página, se utiliza el valor document como
punto de partida de la búsqueda.

El valor que devuelve la función es un array con todos los nodos que cumplen la
condición de que su etiqueta coincide con el parámetro proporcionado. El valor
devuelto es un array de nodos DOM, no un array de cadenas de texto o un array de
objetos normales. Por lo tanto, se debe procesar cada valor del array de la siguiente
forma:
  getElementsByName()
La función getElementsByName() es similar a la anterior, pero en este caso se buscan
los elementos cuyo atributo name sea igual al parámetro proporcionado. En el
siguiente ejemplo, se obtiene directamente el único párrafo con el nombre indicado:

Normalmente el atributo name es único para los elementos HTML que lo definen, por
lo que es un método muy práctico para acceder directamente al nodo deseado. En el
caso de los elementos HTML radiobutton, el atributo name es común a todos los
radiobutton que están relacionados, por lo que la función devuelve una colección de
elementos.
Observa que el texto Ky_5, está en rojo, atributo modificado mediante JavaScript con
Ejemplo Práctico código CSS embebido. Prueba a modificar el color, tamaño, estilo de fuente o cualquier
otro atributo que desees.
Agregar al archivo html anterior, un nuevo párrafo con el atributo name = “especial”,
y luego modificar su color mediante código CSS. Existen algunas versiones que no soportan esta función por lo tanto, debes consultar
en https://caniuse.com/ , dependiendo de lo que desees hacer. Recuerda que de esto
depende que tu plataforma web sea interpretada de la misma forma,
independientemente del tipo de navegador que utilice el usuario y/o el cliente final. 

 getElementById()

La función getElementById() es la más utilizada cuando se desarrollan aplicaciones

web dinámicas. Se trata de la función preferida para acceder directamente a un nodo y
poder leer o modificar sus propiedades.

La función getElementById() devuelve el elemento HTML cuyo atributo id coincide con

Agrega el siguiente código JavaScrip para modificar el atributo color de ese nodo (p
el parámetro indicado en la función. Como el atributo id debe ser único para cada
name=“especial”)
elemento de una misma página, la función devuelve únicamente el nodo deseado.

Ejemplo práctico
Agregar un enlace a la página con el atributo id=“enlace”

Modificar el atributo href y target, mediante JavaScript

Al ejecutar la página html, debe aparecer de la siguiente manera:

Actividad en Clase
Descarga el archivo ActividadDOM.html, del siguiente enlace:
https://drive.google.com/open?id=1AKHLsBxycv17Fo4sOUzI1NjkiNAiV385
También lo puedes descargar del aula virtual o del blog de la asignatura.
Prueba dando clic en el botón genera y luego en el botón mayor, y verás cómo mediante
código JavaScript se escoge entre los dos números generados con random, el número
mayor.
Luego ábrelo en tu editor favorito y realiza una investigación exhaustiva de cada
una de las funciones que no hayas visto en clase y finaliza la actividad escogiendo
no el mayor número de los generados randómicamente, sino el menor de ellos.
Además realiza cambios de color, fuente, fondo de cada div, para que se vea
diferente, utilizando JavaScript y CSS embebido (como los ejemplos realizado
con anterioridad)
REFERENCIAS BIBLIOGRÁFICAS
[1] M. Contreras, Desarrollo de aplicaciones web móvil. 2018.
[2] Uniwebsidad, “Capítulo 5. DOM (Introducción a JavaScript),” 2019. [Online].
Available: https://uniwebsidad.com/libros /javascript/capitulo-5. [Accessed:
30-Oct-2019].
[3] W3C, “¿Qué es el Modelo de Objetos del Documento?,” 2019. [Online].
Available: https://www.w3.org/2005/03/DOM3Core-es/introduccion.html.
[Accessed: 30-Oct-2019].
[4] A. a Programar, “Tipos de nodos DOM: document, element, text, attribute,
comment. Arbol de nodos para JavaScript,” 2019. [Online]. Available:
https://www.aprenderaprogramar.com/index.php?option=com_content&vie
w=article&id=802:tipos-de-nodos-dom-document-element-text-attribute-
comment-arbol-de-nodos-para-jav ascript-cu01124e&catid=78&Itemid=206.