PAC 3. Javascript i el DOM

En aquesta PAC es realitzen per primera vegada tasques que són 100% típiques del que es programa habitualment en Javascript: modificacions al DOM. Explicat en paraules senzilles, voldria a dir alguna cosa semblant a “llegir i modificar amb codi el que visualitza el navegador”. Així podem fer petites animacions, controlar el que ha de passar i executar codi de forma arbitrària en determinades situacions, etc.

A més de les preguntes de teòrica, va ser interessant programar els exercicis 5 i 6, que podeu executar en aquests enllaços:

http://graumultimedia.com/treballs/pw/PAC3/ex5.html

http://graumultimedia.com/treballs/pw/PAC3/ex6.html

 

Aquesta és la PAC que vaig presentar. A nivell d’anècdota, destacar que el consultor em va dir que li haia agradat molt la meva PAC i que, de fet, havia fet servir algunes parts per la solució oficial presentada a la resta de la classe!

🙂

 

PAC3
1.- .Explica amb les teves paraules en que consisteix la gestió d’esdeveniments. Utilitzant Javascript explica dos sistemes diferents per detectar esdeveniments.

(1’5 punt)

 

La gestió d’esdeveniments consisteix en assignar codi que s’executa quan ocorre algun esdeveniment tal com clicar sobre un botó (onclick:), quan una pàgina o una imatge s’han acaba de carregar (onload:) passar o deixar de passar per damunt un enllaç (onmouseover: i onmouseout:), etc… La gestió d’events ens permet convertir els documents en entitats dinàmiques.

 

Les dues maneres tradicionals d’assignar els gestors d’esdeveniments són:

  • Events inline:
    a) per HTML, fent servir atributs directament dins l’etiqueta i assignant-lis un fragment de codi que indica al navegador l’acció a realitzar quan ocorre l’esdeveniment.
    Per exemple:

 

<p onmouseover=”alert(‘Hola, com va!’)”>Passa per sobre</p>

  1. b) per scripting, que permet assignar els gestors d’events de forma dinàmica, sense haver de modificar el codi HTML de la pàgina. El codi a executar s’ha de definir dins una funció

Per exemple:

 

document.getElementById(“salutacio”).onmouseover = function () {

alert(‘Hola, com va!’);

}

 

 

2) Events de nivell 2 del DOM, ens permeten un nombre teòricament il·limitat d’esdeveniments a un únic element:

var saludar = function () {

alert(‘Hola, com va!’);

}

 

document.getElementById(“salutacio”).addEventListener(‘mouseover’, saludar, false);

 

2.- Explica amb les teves paraules quina diferència hi ha entre el BOM i el DOM?

(1 punt)

 

El BOM és una representació més amplia de tota la estructura d’objectes que proporciona el navegador, incloent els objectes navigator, history, screen, location i document, que són fills de window. Fent servir el BOM podem modificar i moure la finestra, canviar el text de la barra d’estat, llegir el URL actual, avançar i retrocedir pàgina… en definitiva, qualsevol funcionalitat que el navegador pugui exposar a Javascript i ens permeti accés i manipulació de la finestra del navegador. El BOM no està estandarditzat i pot canviar segons la API del navegador que s’estigui fent servir encara que, en la pràctica, gairebé tots els navegadors comparteixen els mateixos objectes.

 

El DOM està estandarditzat, i és específic del document HTML actual. Presenta diversos nivells (1, 2,3). És exposat per el BOM, és a dir, el DOM és un subconjunt del BOM i representa una interfície que permet als programes i als scripts d’accedir dinàmicament i actualitzar el contingut i estructura dels documents HTML. El DOM exposa la totalitat d’una pàgina com un document composat d’una jerarquia de nodes semblants a una estructura d’arbre, permetent eliminar-los, afegir-los i reemplaçar-los.

3.-Quins sistemes hi ha explicats als materials que serveixen per passar variables entre distintes pàgines web?

(1 punt)

  1. Les galetes són petits fitxers de text emmagatzemats pel navegador i que contenen les següents dades: un parell nom-valor que conté dels dades pròpiament dites, una data de caducitat, el domini i el path del servidor a que s’haurien d’enviar. Per assegurar l’accés a les dades, s’ha de dur a terme una combinació entre les funcions de maneig de galetes (“cookies”) i els esdeveniments onunload i onload de l’objecte document: la pàgina que ha de guardar les dades ha d’assegurarse d’assignar els valors a les cookies quan es tanca fent servir l’esdeveniment onunload i la pàgina que ha de llegir les dades, s’ha d’assegurar d’obtenir els valors fent servir l’esdeveniment
  2. Utilització de les característiques de l’estructura de marcs, emmagatzemant en la finestra superior les dades en forma de variables globals fent servir la propietat top de l’objecte window que fa referència a la finestra de nivell superior. El problema és que si no es manté carregada la pàgina superior que manté la estructura de marcs, el valor de les variables es perd.
    nomVariable = valorQueVullGuardar;
  3. Pas de les variables mitjançant la URL que obre la pàgina nova. Aquesta és la opció més recomanada. Afegim a l’URL el caràcter “?” i després les dades. Encara que es pot fer concatenant directament els parells nom-valor és recomanable fer servir encodeURIComponent(uri) per assegurar-se que els espais i caràcters especials quedaran codificats. Per obtenir les dades fem servir l’objecte location i extraiem la subcadena que conté les dades convenientment decodificada.

4.- Explica 5 accions que podem realitzar sobre les finestres mitjançant el BOM.

(1 punt)

 

  1. Obrir una finestra especificant l’adreça URL, el nom, les mides, els botons, així com altres atributs que defineixen el seu aspecte.

window.open(“http://www.google.com”, “Nom”, “width=200, height=100”);

 

 

  1. Tancar una finestra ja oberta.close();
  2. Moure la posició d’una finestra.moveBy(25, 25);

 

  1. Fa aparèixer el diàleg d’impressió;print();
  2. Canviar les mides d’una finestra.resizeTo(800,640);

 

5.- En aquest exercici tindrem que aplicar un moviment a un objecte que es trobarà dins d’un contenidor, aquest objecte anirà modificant la seva direcció a mesura que vagi impactant amb els extrems d’aquest. El contenidor tindrà unes mesures de 300 píxel d’amplada i d’alçada. En el mateix document HTML hi tindrem un formulari amb dos camps per introduir la velocitat horitzontal i vertical a la que es desplaçarà l’objecte (píxels/segon) juntament amb tres botons:

  1. Iniciar: Aquest botó s’encarregarà d’iniciar el moviment de l’objecte amb la velocitat introduïda en el formulari.
  2. Parar: Aquest botó pararà el desplaçament de l’objecte.
  3. Aplicar: Aquest botó simplement modificarà la velocitat de desplaçament de l’objecte quan aquest es troba en desplaçament.

Inicialment l’objecte es trobarà immòbil i centrat horitzontal i verticalment dins del contenidor. El botó Aplicar i Parar estaran desactivats, en el moment que es cliqui sobre el botó Iniciar activarem els dos botons anteriors i desactivarem aquest últim. Serà necessari validar per a les dues velocitats que s’ha introduït algun valor i que el valor introduït és numèric.

(4 punts)

 

 

6.- Seguint amb l’exercici anterior afegirem un formulari que ens permetrà modificar les mesures del contenidor, aquest formulari estarà compost per dos camps de text un per introduir l’alçada i a l’altre l’amplada, també hi podrem trobar un botó amb el text Aplicar, al clicar sobre aquest botó aplicarem els canvis al contenidor i centrarem de nou l’objecte dins el contenidor, si aquest es troba en moviment el pararem (serà necessari assegurar-se que activarem i desactivarem els botons necessaris). Tindrem que validar que en els dos camps s’ha introduït un valor, que aquest valor és numèric i com a mínim el doble de gran que el valor de l’objecte que conté i com a màxim 800px.

(1’5 punts)

 

Leave a Reply