Programación Orientada a Objetos - PAC 3

PAC 3 – PROGRAMACIÓ WEB

Núria Espinoza

PAC 3 – Programació web

PAC3 1.- Explica amb les teves paraules en que consisteix la jerarquia d’elements en una pàgina HTML. Analitza l’estructura jeràrquica de la sentencia següent indicant el tipus de cada node: <div>Aquesta plana parla de <span style=”color: #666”>noticies</span> de tot el món. <div> (1 punt) Javascript organiza los elementos de una pàgina (ventana, documento, formularios, etc) en una jerarquía. Cada elemento es un objeto, que puede tener sus propiedades y métodos. Javascript permite controlar cualquier elemento de la pàgina accediento a esa jerarquía.

Por ejemplo, una forma de acceder al bg de un documento sería: window.document.bgcolor = “white”; Todos los accesos a elementos de la jerarquia DOM se inician con “window”.

En la frase propuesta, <div> sería un elemento HTML (Element) y <span> un atributo del mismo (Attr)

2.- Explica quina utilitat tenen el BOM i el DOM en la creació d’un lloc web mitjançant dos exemples per a cada un d’ells.

(1 punt)

El BOM o Browser Object Model, que permite controlar los elementos ajenos al documento en sí, como history, location, navigator, screen (y otros elementos que dependent del navegador) El DOM o Document Object Model, se encarga de controlar y los elementos del documento en sí, como los eventos y el estilo.

Dependiendo de lo que queramos realizar en la pàgina web (mover pantallas, cambiar tamaño, cambiar estilos, eventos relacionados al cursor...) deberemos utilizar tanto BOM como DOM para controlar estos elementos.

3.- Explica les principals característiques del model d’esdeveniments del DOM estàndard. Compara aquest últim amb els primers models d’Internet Explorer 4.X i Netscape 4.X. (1 punt) Los eventos DOM permiten utilizar diferentes controladores de eventos de elementos en un documento. Se utilizan normalment en combinación con funciones, y se activan dependiendo de una u otra acción realizada (evento).

Los eventos en este modelo se inician en la parte superior de la jerarquia y descienden hasta llegar al objeto de destino. Este proceso se conoce como fase de captura. Por otro lado, también existe la opción que puedan realizar el proceso inverso (fase de ascenso), dependiendo del evento utilizado.

1

PAC 3 – Programació web

Decimos que este modelo de eventos es una mezcla de los de IE4x y Netscape4x debido a que une tanto el recorrido descendente del evento de Netscape como el ascendente de IE.

4.- En aquest exercici haurem de crear una galeria d'imatges i ho farem en dues parts.

La primera part consisteix en la creació del contingut de la galeria serà dinàmica, és a dir, el nombre d'elements que formaran part d'aquesta serà variable i la seva creació es realitzarà un cop s'hagi carregat tot el contingut de la plana. Cada element de la galeria contindrà una mostra de la imatge (thumbnail) i la seva descripció.

El nombre d'elements que haurà de mostra la galeria, vindrà determinat per una variable que estarà definida al començament del Script. Igualment, la informació de les imatges (ruta del thumbnail, ruta de la imatge gran i descripció) estarà emmagatzemada en un array que també haureu de posar al començament del Script. Aquest array l'haureu de crear vosaltres amb les dades que vulgueu.

La segona part consistirà en fer que, quan cliquem sobre una de les imatges, aparegui un fons negre que ocupi tota la pantalla i la imatge seleccionada al mig, mostrant en la part inferior la descripció.

També serà necessari afegir un element que, al clicar-lo, ens oculti aquests elements i ens torni a mostrar la galeria.

Per a la realització d'aquest exercici trobareu, juntament amb l'enunciat, el fitxer "PAC3-Ex5.html" que conté un codi HTML i CSS bàsic que podeu fer servir com a mostra per crear la galeria. El format aplicat a la visualització de la imatge ampliada i la millora visual de la galeria valdrà 0.5 punts de la nota.

Nota: Tot i que no ho valorarem a aquest exercici, és una bona pràctica que les imatges tinguin sempre la mida amb la que es presenten. No acostuma a ser bo (tot i que es fa servir molt perquè no sempre és fàcil fer-ho bé) utilitzar imatges grans que desprès, amb CSS o atributs HTML, fem més petites.

(4 punts) Veure adjunt PAC3-Ex4.html

5.- 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. 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.

(3 punts) Veure adjunt PAC3-Ex5.html

2