Instituto de Educación Superior “Juan Jeuzel”

Practica Profesionalizante 2
Proff: Suarez, David H.

Trabajo Práctico N° 11
Establecimiento: Instituto de Educación Superior “Juan Jeuzel”.
Carrera: Técnico Superior en Soporte de Infraestructura de Tecnología
de la Información.

Materia: Práctica Profesionalizante.

Tema: Condicionales.

Integrante:
 TOLEDO, Camila Aldana.

Profesor: Suarez, David Hernán.

Año: 2019.
 Instituto de Educación Superior “Juan Jeuzel”
Practica Profesionalizante 2
Proff: Suarez, David H.

Trabajo Práctico Nº 11: Condicionales

1) Diseñe un ejemplo utilizando variables locales y globales.

2) Diseñe un ejemplo utilizando las propiedades o métodos de los textos.
3) Basado en el video 13, explique cómo acceder al DOM por párrafo y por ID.
Dom: Permite acceder y poder manipular los elementos de nuestro documento, es decir, de
nuestro sitio web. El dom son las abreviaturas del document object model que es la estructura de
nuestro sitio web pero conformada por elementos que se llaman NODOS. Entonces, el dom consta
primero de dos elementos que es el head y el body; dentro de cada uno tenemos más elementos,
Por ejemplo, dentro del head tenemos meta, title; y dentro del body tenemos h1, p y así sería con
los elementos de nuestro sitio web. Cada uno de estos elementos son nodos que podemos
acceder en el dom. El objetivo del dom básicamente es poder acceder a los elementos con
javascript de una manera muy fácil.
Si queremos acceder a un elemento del DOM, tenemos dos métodos para hacerlo:

1. getElementById selecciona un elemento según su atributo «id» especificado en el HTML.

Por ejemplo: document.getElementById('id_del_elemento');
2. getElementsByTagName selecciona una lista de nodos cuyo elemento es el especificado
como parámetro, y a cada uno se le asigna un índice. Por ejemplo, el siguiente código nos
devolvería el tercer párrafo (el índice comienza en 0):
document.getElementsByTagName('p')[2];

Por ello, para acceder a un elemento podemos hacer lo de muchas formas diferentes. Por
ejemplo, si queremos acceder a un campo con id «myField» que es parte del primer form (llamado
«formulario») de la página, podemos hacerlo de varias formas, tales como:

1 document.getElementById("myField").value;

2 document.forms.formulario.elements.myField.value;

3 document.forms[0].myField.value;

4 document.formulario.myField.value;

4) Basado en el video 14, explique cómo crear nodos. Defina nodos.

Nodos: Permite acceder a los nodos y sus propiedades que es parte de las manipulaciones
habituales en las páginas web, otras operaciones habituales son las de crear y eliminar nodos del
DOM. Por ejemplo, un párrafo genera dos nodos: el primer nodo es de tipo Element que
representa la etiqueta <p> y el segundo nodo es de tipo Text que representa el contenido textual
de la etiqueta <p>.

Por ello, crear y añadir a la página un nuevo elemento html sencillo consta de cinco pasos
diferentes:

1. Creación de un nodo de tipo Element que represente al elemento.

2. Creación de un nodo de tipo Text que represente el contenido del elemento.
 Instituto de Educación Superior “Juan Jeuzel”
Practica Profesionalizante 2
Proff: Suarez, David H.

3. Añadir el nodo Text como nodo hijo del nodo Element.

4. Añadir el atributo que se quiere agregar al elemento.
5. Añadir el nodo Element a la página, en forma de nodo hijo del nodo correspondiente al
lugar en el que se quiere insertar el elemento.

De esta manera, si se quiere añadir un párrafo simple al final de una página html, es necesario
incluir el siguiente código JavaScript:

// Crear nodo de tipo Element

var parrafo = document.createElement("p");

// Crear nodo de tipo Text

var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element

parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina

document.body.appendChild(parrafo);

El proceso de creación de nuevos nodos implica utilizar tres funciones DOM:

 createElement(etiqueta): crea un nodo de tipo Element que representa al elemento

XHTML cuya etiqueta se pasa como parámetro.
 createTextNode(contenido): crea un nodo de tipo Text que almacena el contenido textual
de los elementos HTML.
 nodoPadre.appendChild(nodoHijo): añade un nodo como hijo de otro nodo. Se debe
utilizar al menos dos veces con los nodos habituales: en primer lugar, se añade el
nodo Text como hijo del nodo Element y a continuación se añade el nodo Element como
hijo de algún nodo de la página.
5) Basado en el video 15, explique cómo posicionar los nodos.

Posición de los Nodos: Permite crear y añadir a la página un elemento html consta de:
1. Creación de un documento con una lista ordenada (ol) y dos elementos. Por ejemplo,
podemos agregar el nodo de nuestro elemento “li” antes o después de la lista.
2. Creación de una var elemento = document.createElement (“li”) porque queremos poner
en una lista y después se le va agregando el contenido y los atributos.
3. Creación nodo de texto con una var contenido = “NuevoTexto”; aquí estoy asignando un
texto a una variable, pero lo que tenemos que hacer es un nodo de texto añadiendo
contenido= document.createTextNode(“NuevoTexto”). Una vez, que tenemos el
elemento, el nodo de texto hay que juntar ambos y lo hacemos con
elemento.appendChild(contenido). Entonces, tenemos el contenido y lo estamos
agregando dentro de un elemento; y lo siguiente que debemos hacer es agregar este
 Instituto de Educación Superior “Juan Jeuzel”
Practica Profesionalizante 2
Proff: Suarez, David H.

elemento al body o donde nosotros necesitemos y lo hacemos con

document.body.appendChild(elemento).

De esta manera, podemos traer los elementos padres de los elementos hijos utilizando las
siguientes propiedades:

 var padre = document. getElementByTagName(“li”) [0]. parentNode;

 //padre.appendChild(elemento);
 var padre = document.getElementById(“lista”);

Por lo tanto, estas son las formas que podemos utilizar para traer los elementos padres de los
elementos hijos cuando no conocemos.

El proceso de agregar elementos en la lista implica utilizar:

 appendChild: Permite agregar el contenido dentro de la lista, ya que esta es una forma
que podemos usar para agregar el contenido al final de la lista.
 padre.insertBefore(elemento): Permite agregar el contenido al inicio de la lista y
podemos recibir dos elementos, primero el parámetro nuevo que queremos agregar y
después el nodo de referencia, es decir, un elemento hijo. Por ejemplo, si queremos
agregar antes de que elemento “li”. Por lo tanto, debemos crear una var hijo =
document.getElementByTagName(“li”)[0]; y con el accedemos al primer elemento “li”, y lo
hacemos con padre.insertBefore(elemento, hijo), es decir, que el Nuevo Texto aparece
arriba en la posición 1 y lo hacemos con insertBefore.

6) Adjunte el html con los conceptos desarrollados.