(UOC / PROGRAMACIÓ WEB) - PAC 3 - Rubén Mejias Alonso

PROGRAMACIÓ WEB
PAC 3 – DOM
Alumne: Rubén Mejias Alonso
1.- .Explica amb les teves paraules en que consisteix la jerarquia d’elements en una pàgina
HTML.
(1 punt)
Cuando el navegador carga el código HTML y construye el modelo de objetos del navegador, lo
hace mediante una estructura jerárquica parecida a un árbol, cuyos elementos podemos
representar como pequeñas cajas anidadas. Las etiquetas que definen un documento HTML
como por ejemplo <title>, <h1>, <p>…hacen las veces de nodos o cajitas, cada elemento del
árbol se distribuye jerárquicamente.
Cada cajita se convierte en un nodo al que podemos acceder y modificar, tanto a sus
propiedades como sus métodos. Así mismo, éstos nodos pueden tener a su vez otros nodos
hijos (child), pero siempre tendrán un solo padre (parent). Además, a los nodos que se
encuentran en el mismo nivel del árbol se les llama hermanos, (siblings).
Por ejemplo, en un documento HTML la etiqueta raíz <html> será el padre de todos los
elementos que contenga el documento, por ejemplo <head> y <body> que serán sus hijos. Esta
etiqueta <head>, será a su vez padre de <title>. Por otro lado, la etiqueta <body> será hija de
<html> y padre de <h1> y <p> y así sucesivamente. Y es posible que <h1> y <title> sean
hermanos, dependiendo de la disposición de los elementos que forman el árbol.
2.- .Explica amb un exemple els diferents tipus de nodes existents en el DOM estàndard.
(1 punt)
Como decíamos anteriormente, cada elemento del árbol o cajita es un nodo. Existen 12 tipos
de nodos útiles para documentos XML, mientras que para HTML son 6 los nodos útiles que
marca el estándar DOM:
A continuación podemos ver los tipos de nodos útiles en HTML, que son los que realmente nos
interesan:
Tipo 1. Elemento:
Cualquier etiqueta HTML representada por < >. Ejemplo: <title>

Tipo 2. Atributo:
Aquellos atributos de la etiqueta HTML. Ejemplo: margin =”left”
Tipo 3. Texto:
Cualquier texto incluido en una etiqueta HTML, por ejemplo “PAC 3 de programación web”
Tipo 8. Comentario:
Un comentario HTML representado por “ “, por ejemplo “cuidado aquí”
Tipo 9. Documento:
La etiqueta raíz del documento, es decir <html>
Tipo 10. Tipo de documento:
Declaración estándar que se corresponde con el tipo de documento. En el caso de ser un

documento HTML por ejemplo, utilizaríamos: <!DOCTYPE HTML PUBLIC “//W3C//DTD HTML
4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd>
3.- ¿Quina diferència hi ha entre el BOM i el DOM?
(1 punt)
Se trata de dos modelos de objeto diferentes, uno hace referencia a las características propias
de los navegadores y el otro se refiere al modo en cómo se acceden a los elementos que
forman la página HTML cuando ésta se carga en el navegador.
El BOM (browser objetc model), es el encargado de enlazar nuestro código JavaScript con las
funciones y características del navegador, como por ejemplo ventanas, pantalla o el historial
de usuario. Cabe destacar, que los objetos que caracterizan al BOM pueden ir cambiando
debido al avance de la tecnología, como por ejemplo las posibles nuevas versiones de los
navegadores. Entre los objetos destacados del BOM encontramos los objetos: window,
location, history, screen, navigation, mimeType y plugin, cada uno con sus respectivas
propiedades.
Para poner un ejemplo, el objeto Window es el objeto del BOM que ocupa el nivel más elevado
en la jerarquía de objetos y actua como contenedor de todos los elementos visibles en nuestro
navegador. Entre otras cosas nos permite abrir, cerrar, redimensionar, mover o, en definitiva,
manipular en general la ventana del navegador.
El DOM (document object model) del que hemos dado más detalles anteriormente, nos
permite acceder a los objetos que forman la página HTML del documento que carguemos en el
navegador y manipularlos si es preciso. Como decíamos en el apartado anterior, podemos
acceder a 6 tipos de nodos al explorar el código HTML con nuestro editor, de esta forma
podemos manipular todas las etiquetas que forman el código HTML, ya que cada etiqueta
corresponde a un nodo del árbol, interconectándose entre sí para formar toda la estructura
del documento. Cabe destacar, que para poder utilizar el DOM es necesario que la página web
se haya cargado por completo y haya finalizado la estructuración de todos los elementos del
árbol.
4.- El navegador que estiguem utilitzant pot fer que el nostre codi JavaScript no funcioni?
Justifica la teva resposta.
(1 punt)
Alguno de los métodos que podemos utilizar para manipular objetos en el DOM, pueden
ocasionar errores en el navegador. Existen métodos que necesitan activar o desactivar ciertas
funciones relacionadas con la seguridad del navegador, es posible que causen conflictos con
las restricciones de seguridad que tengamos activas.
Por otro lado, es posible que el estándar DOM2 cause problemas de compatibilidad con
Internet Explorer, ya que este navegador no cumple con la totalidad del estándar, pudiendo
por ejemplo presentar problemas con la gestión de eventos. Internet Explore 8 y versiones
inferiores no soportan métodos como “addEventListener()” o “removeEventListener()”,por lo
que no podremos manjar los eventos con estos métodos.
5.-Explica dues maneres diferents per detectar que s’ha clicat sobre un element concret de la
plana web. Afegeix un exemple utilitzant codi JavaScript per a casa cas.
(1 punt)
A las interacciones de los usuarios con los elementos de la página web, es decir, con los
elementos del código HTML, se las llaman eventos. Un evento ocurre cuando un usuario
realiza una acción en la página, es decir, es la manera que nos ofrece Javascript para controlar
las acciones que lleva a cabo el usuario al interactuar con la página. Un evento se asocia a un
objeto en concreto y se captura ese momento, en nuestro caso se trata de capturar el
momento cuando el usuario utiliza el ratón y hace clic en un elemento concreto.
Para detectar esta interacción, Javascript utiliza el modelo de eventos estándar que
proporciona el W3C, además, cada evento admite una serie de elementos que nos permiten
realizar nuestra tarea. Por un lado, con el controlador de evento onclick(), detectamos cuando
el usuario pulsa sobre un objeto concreto del código HTML. Por otro lado, el controlador de
evento ondblclick(), detecta una doble pulsación del usuario. Estos
Veamos un ejemplo para cada caso:

1. Controlador de evento onclick():
Este ejemplo sirve para saber si el usuario ha pulsado el botón “pulsa aquí”. Si el usuario ha
clicado en el botón se muestra un alert con el mensaje “Has pulsado el botón”. En este caso, lo
escribimos dentro de la etiqueta HTML: <INPUT>
<head>
//Creamos una función de alerta para cuando el usuario pulse el botón
<script type="text/javascript">
function alertar (){
alert("Has pulsado el botón");
</script>
</head>
<body>
<FORM NAME=form>
<INPUT type="button" name="miBoton" value=" Pulsa aquí " onclick="alertar( )">
</FORM>
</body>
</html>
2. Controlador de evento ondblclick():
Utilizaríamos exactamente el mismo mecanismo, solo que en lugar de incluir en la etiqueta

<input> como propiedad final el evento onclick, colocaríamos el evento ondblclick. La
diferencia es que el mensaje de alerta no aparece hasta que el usuario no hace doble click
encima del botón, si el usuario da un solo click no ocurre nada.
<INPUT type="button" name="miBoton" value=" Pulsa aquí " ondblclick ="alertar( )">
6.- Explica que fa exactament la sentencia que conté aquesta funció i quina utilitat real pot
tenir si la escrivim dins d’alguna de les nostres funcions:
function funcioX (e) {

e = (e) ? e : event;
}
(1 punt)
Control dinámico de eventos, fase de captura, fase de ascenso,
Ejemplo, tipo de evento “click”
7.- Moltes vegades quan estem treballant amb formularis volem realitzar una validació de
les dades en el moment que cliquem el botó de tipus submit, però això fa que la plana es
torni a carregar evitant que el nostre codi faci la seva funció correctament. Explica com
podem evitar que això passi i escriu un petit exemple utilitzant el codi pertinent.
(1 punt)
El estándar DOM2 define un conjunto de nuevos subconjuntos de eventos mediante los cuales
podemos controlar, entre otras cosas, la manipulación de la estructura del documento. El
objeto Event, nos proporciona un método para cancelar el comportamiento estándar de
algunos eventos, ya que no todos los eventos son cancelables, se trata del método
preventDefault ( ).
Mediante la librería JavaScript jQuery, utilizando el método event.preventDefault( ), podemos

evitar que se ejecute la función que controla el evento en cuestión. En nuestro ejemplo,
evitará que se envíe el formulario una vez el usuario ha activado el botón submit.
//Activamos primeramente jQery
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
$("submit").click (function (event) {
event.preventDefault();
};
</script>
8.-Quins sistemes hi ha explicats als materials que serveixen per passar variables entre
distintes pàgines web
(1 punt)
Uno de los objetos que proporciona el BOM es el objeto Location, el cual viene heredado a su
vez del objeto padre Window. Con el objeto Location podemos acceder a la URL de la página
HTML que necesitemos. La principal ventaja es que podemos acceder a porciones de la
dirección URL que deseamos y modificarla con el fin de asignar nuestros datos, pasándolos
como nuevos parámetros a la propia URL.
Ente las propiedades que ofrece el objeto Location encontramos href, la cual especifica la URL
completa. Por ejemplo, si tenemos la siguiente dirección de esta página web:
https://www.pac3.com/exercici8.html ,
Podemos añadirle nuestros parámetros a la URL modificando la cadena. Por ejemplo de esta
forma:
https://www.pac3.com/exercici8.html?nuevainfo=3
Cuando utilizamos la propiedad href del objeto Location, se crea un nuevo objeto Location
asignando el nuevo valor a la propiedad href:
window.location.href = https://www.pac3.com/exercici8.html ;
Únicamente nos quedaría implementar algún tipo de función que nos retornase el nuevo valor
del parámetro que necesitamos.
9.- En aquest exercici s’ha d’implementar el moviment en línia recta d’un objecte en la
pantalla. L’exercici constarà d’una pàgina HTML inicial on hi haurà un formulari que recollirà la
informació sobre la posició inicial de l’objecte (left i top), així com la velocitat (píxels per segon)
i la posició final de l’objecte. I a més el formulari contindrà un botó que executarà el moviment
anterior en la mateixa pàgina on està el formulari.
- S’ha de validar cadascun dels valors introduïts en els camps del formulari de forma que el
moviment estigui restringit a l’espai de la pantalla.
- L’estudiant ha aplicar un cert estil a la pàgina així com a l’objecte que s’ha de moure.
(2 punts)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<h2>PAC3. Rubén Mejias Alonso</h2>
<style>
/*Creamos los estilos CSS y definimos el recinto donde tendrá lugar la animación.
#container será el contenedor principal por donde circulará en línea recta nuestro objeto #box. Para
cada uno definiremos su altura, anchura, color de fondo y posición en la pantalla */
#container {
width: 200px;
height: 50px;
background: white;
position: relative;
#box {
width: 50px;
height: 50px;
background: blue;
position: absolute;
</style>
//Creamos los dos objetos, box (cuadrado rojo) dentro de container(rectangulo verde) y cada uno
identificado con su "id"
<div id="container">
<div id="box"> </div>
</div>
<br/>
//Creamos el elemento formulario con su evento de control
<form onsubmit="return validate()" method="post"> //Con el evento "onsubmit" podremos controlar la

validación de los datos introducidos
Posición Inicial Left: <input type="text" name="num1" id="num1" />
<br />
Posición Inicial Top: <input type="text" name="num2" id="num2" />
<br />
Velocidad: <input type="text" name="num2" id="num2" /> px/s
<br />
<input type="submit" value="Iniciar animación" onclick="” validarNumero()"/>
</form>
//Declaramos las variables y métodos necesarios para animar nuestro cubo azul
var pos = 0; //Iniciamos la variable de posición
var box = document.getElementById("box"); //seleccionamos el cubo azul
/*Con el método setInterval indicamos en milisegundos el tiempo que dura la animación, acepta dos
parámetros, por un lado la función "movimiento()" encargada de actualizar la posición del cubo a
medida que avanza el tiempo, el segundo parámetro es el tiempo en milisegundos*/
var tiempo = setInterval(movimiento, 20);
function movimiento() {
if(pos >= 200) { //Indicamos el límte de desplazamiento del cubo en px
clearInterval(tiempo); //con el método clearInterval podemos cancelar el timeout de la animación una

vez inciada
else {
pos += 1; // Mientras el cubo no llegue al final del recorrido, avanzamos la posición 1px dentro del
lapso de tiempo marcado con setInterval
box.style.left = pos+"px"; //Actualizamos posición
//Funcion para validar los campos del formulario
function validarNumero(numero){
if (!/^([0-9])*$/.test(numero))
alert("El valor " + numero + " no es un número. Introduzca un número entero");
</script>
</body>
</html>

(UOC / PROGRAMACIÓ WEB) - PAC 3 - Rubén Mejias Alonso

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

(UOC / PROGRAMACIÓ WEB) - PAC 3 - Rubén Mejias Alonso

Загружено:

Авторское право:

PROGRAMACIÓ WEB

Alumne: Rubén Mejias Alonso

Cualquier etiqueta HTML representada por < >. Ejemplo: <title>

Aquellos atributos de la etiqueta HTML. Ejemplo: margin =”left”

Un comentario HTML representado por “ “, por ejemplo “cuidado aquí”

La etiqueta raíz del documento, es decir <html>

Tipo 10. Tipo de documento:

Declaración estándar que se corresponde con el tipo de documento. En el caso de ser un

3.- ¿Quina diferència hi ha entre el BOM i el DOM?

Veamos un ejemplo para cada caso:

//Creamos una función de alerta para cuando el usuario pulse el botón

function alertar (){

alert("Has pulsado el botón");

<INPUT type="button" name="miBoton" value=" Pulsa aquí " onclick="alertar( )">

2. Controlador de evento ondblclick():

Utilizaríamos exactamente el mismo mecanismo, solo que en lugar de incluir en la etiqueta

function funcioX (e) {

Ejemplo, tipo de evento “click”

Mediante la librería JavaScript jQuery, utilizando el método event.preventDefault( ), podemos

//Activamos primeramente jQery

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

$("submit").click (function (event) {

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<h2>PAC3. Rubén Mejias Alonso</h2>

<div id="box"> </div>

//Creamos el elemento formulario con su evento de control

<form onsubmit="return validate()" method="post"> //Con el evento "onsubmit" podremos controlar la

Posición Inicial Left: <input type="text" name="num1" id="num1" />

Velocidad: <input type="text" name="num2" id="num2" /> px/s

<input type="submit" value="Iniciar animación" onclick="” validarNumero()"/>

var pos = 0; //Iniciamos la variable de posición

var box = document.getElementById("box"); //seleccionamos el cubo azul

var tiempo = setInterval(movimiento, 20);

if(pos >= 200) { //Indicamos el límte de desplazamiento del cubo en px

clearInterval(tiempo); //con el método clearInterval podemos cancelar el timeout de la animación una

box.style.left = pos+"px"; //Actualizamos posición

//Funcion para validar los campos del formulario

Вам также может понравиться