Quan dissenyem una pàgina, l'ideal seria que ocupés tota l'àrea disponible i mostrés els colors correctament. Com que, d'entrada, no sabem quina mida tindrà la pantalla, i a més, esperem tenir molts visitants amb monitors de tot tipus, procurem fer un disseny que s'adapti a la majoria de configuracions.

Amb JavaScript podem saber les mesures de la pantalla i la profunditat del color, és a dir, quants bits utilitza la targeta per representar cada píxel. A partir d'aquesta informació podem fer que la pàgina prengui decisions.

L'objecte window guarda aquestes informacions, i d'altres, a l'objecte screen. En aquest cas, però, no utilitzarem mai la sintaxi window.screen perquè, per a qualsevol finestra, la pantalla és sempre la mateixa. La sintaxi serà, doncs, només screen.propietat.

En aquesta pràctica aprendrem a detectar la configuració i a usar les dades de l'objecte screen. També aprendrem a treure la pàgina dels marcs, i estudiarem com fer pàgines que no deixin rastre i com camuflar l'adreça de correu.

  Conceptes JavaScript en aquest capítol
Objecte screen : Propietats de la pantalla (en realitat, de la targeta gràfica). No té mètodes.
Propietats width i height : amplada i altura total de la pantalla.
Propietats availWidth i availHeight : amplada i altura que pot ocupar una finestra.
Propietats colorDepth i pixelDepth : profunditat de la paleta i dels píxels, en bits.
Mètode Math.pow() : fa una potència (base elevada a un exponent).
Mètodes de window, moveTo() i sizeTo() : mouen i dimensionen la finestra.
Instàncies de window, parent i top : la finestra anterior i la més alta en la jerarquia.
Mètode location.replace() : reemplaça l'adreça actual per la que rep com a paràmetre.

  1.- Resolució i colors
L'objecte screen no té instàncies ni mètodes. No podem fer res amb la pantalla des d'una pàgina web. És més, seria perillós que es pogués fer perquè, aleshores, qualsevol pàgina d'Internet podria desconfigurar-nos l'ordinador i posar-nos en un bon embolic. Què passaria si, per exemple, es forcés una configuració que la màquina no pot admetre?

Les propietats de l'objecte screen només informen. Això sí, podem utilitzar les dades per crear finestres o modificar-ne la mida o posició. I, si hem d'usar condicionals, també ens podem plantejar pàgines senceres que s'adaptin als diferents entorns.

En aquest exemple mostrarem la resolució i els colors disponibles. Utilitzarem les propietats screen.width i screen.height que ens donen, respectivament, l'amplada i l'altura totals de la pantalla. Per als colors, utilitzarem screen.colorDepth que ens diu quants bits utilitza la paleta per definir cada color. Si, com és normal avui en dia, la targeta gràfica no es basa en una gamma de colors, es mostra la "profunditat" del píxel (pixelDepth) també en bits.

Aquestes són propietats que només podem llegir (read only). No es poden modificar.

Per saber quants colors mostra la tarja gràfica, fem una potència amb el número 2 com a base i colorDepth com a exponent. Per això, utilitzem la funció pow de l'objecte Math. Ho escriurem tot en una finestra nova que s'obrirà quan fem clic en un vincle.

<script language="javascript">
<!--

function pantalla() {
  window.focus();
  var fn = window.open( '', 'win1', 'width=360,height=100,top=260,left=200' );
  with( fn.document ) {
    writeln( 'Resolució de pantalla: <b>' + screen.width );
    writeln( 'x ' + screen.height + '</b><br>' );
    writeln( 'Profunditat de color: <b>' + screen.colorDepth + ' bits,' );
    writeln( Math.pow( 2, screen.colorDepth ) + ' colors</b><br>' );
    close();
  }
  fn.focus();
  return false;
}
// -->
</script>
</head>

<body ...>
<a href="" onClick="
return( pantalla() )">Propietats de la pantalla</a><br>
...
 
2.- Ocupar tot l'espai disponible
Des d'una pàgina no podem crear finestres maximitzades ni maximitzar la finestra, això ho ha de fer el sistema operatiu. Si utilitzem Internet Explorer podem fer que la pàgina ocupi tota la pantalla quan creem una finestra, escrivint fullscreen=1 a les seves propietats:

      var fnestra = window.open( 'arxiu.htm', 'nom', 'fullscreen=1' )

De vegades ens pot interessar aquest efecte tot i que, quan el trobem en una altra web, no ens fa massa gràcia. Maximitzar és una altra cosa: és tenir la finestra, amb tots els seus elements (menús, botons,...) ocupant tot l'espai disponible i sense "bordes".

No ho podem fer ... del tot. Es pot ocupar l'espai màxim, però no ens lliurarem dels "bordes". A més, haurem de seguir estratègies diferents per als dos navegadors.

Primer, movem la finestra a l'angle superior esquerre: window.moveTo(0,0). A continuació, declarem dues variables (x,y) que contindran l'amplada i alçada de l'àrea disponible per a finestres. En aquesta mesura ja s'ha descomptat l'espai ocupat pels elements fixos del sistema operatiu, p.ex. la barra de feines, del Windows.

var x = screen.availWidth
var y = screen.availHeight

A partir d'aquí, hem de detectar el navegador. Si és un navegador actual, només cal utilitzar el mètode resizeTo(x,y) de l'objecte window. Si provem el mateix amb Netscape 4.7, la finestra es farà més gran que la pantalla. Hem d'utilitzar un altre mètode.

Netscape 4.7 reconeix les propietats outerWidth i outerHeight de la finestra, que indiquen l'amplada i l'alçada (iExplorer no les accepta). Comparem si alguna de les dues és menor del que poden ser. Utilitzem l'operador "o lògic" ( || ):

    Si l'amplada de la finestra és menor que "x" o l'altura és menor que "y" ...

Aleshores assignem "x" a l'amplada i "y" a l'altura. El navegador redimensionarà la finestra i tornarà a "pintar" la pàgina. Probablement ens quedarà més clar si llegim el codi del script que no pas amb l'explicació. És molt senzill.

<script language="javascript">
window.moveTo(0,0)
var x = screen.availWidth
var y = screen.availHeight
if ( document.all ) {
  window.resizeTo( x,y )
}
else {
  if ( window.outerWidth<x || window.outerHeight<y ){
    window.outerWidth = x
    window.outerHeight = y
  }
}
document.writeln( '<h1>Tot l\'espai és meu!</h1>' )
</script>
 
3.- Sortir de la gàbia
Hem dissenyat una pàgina amb cura, ha quedat bé i algú l'enllaça des de la seva web. Com queden les mides i els elements? Si la nostra pàgina s'obre a la mateixa finestra, perfecte, tot i que no és habitual que algú convidi els visitants a abandonar el seu lloc per anar al nostre. El més probable és que ens l'obrin en una finestra o en un marc.

Si la pàgina s'obre en una nova finestra, en podem controlar, relativament, la mida, tal com hem vist a l'exemple anterior. Si s'obre en un marc ... però, com sabem que som en un marc?

Un marc (frame) és una finestra en una finestra. El marc, un objecte, és fill d'un altre objecte, i sap com es diu el seu pare (ja passa, això). El pare (parent) té una adreça i el marc-fill en té una altra. El pare pot ser, alhora, fill. De tota la saga, el primer es top. En aquest cas, i només en aquest, l'adreça és la mateixa que la de son pare, perquè no en té.

    Si l'adreça del pare no és la meva, aleshores, vull la del pare !!!

Això és exactament el que farem, comprovar que l'adreça de la finestra de la nostra pàgina és la mateixa que la del contenidor. Si no és així, segur que hem caigut en un frame. Aleshores assignem la nostra adreça a la del pare. Com que la pàgina es tornarà a carregar, es torna a fer la comprovació i, si encara no hem arribat al "top", repetim.

És clar que també podem anar directament a dalt: posem la nostra adreça a top.location.href i ja hi som. Aquí ho fem de les dues maneres. La segona compara les finestres, no pas les adreces. En tot cas, aquestes instruccions han d'anar al principi de la pàgina.

Mètode "pas a pas"
<script language="javascript">
<!--

if ( parent.location.href != window.location.href ) {
  parent.location.href = window.location.href;
}
// -->
</script>

Mètode directe
<script language="javascript">
<!--

if (window != window.top) {
  top.location.href = location.href;
}
// -->
</script>


Per veure l'efecte, cal fer una pàgina i provar-la amb l'inspector d'objectes.
Si aconseguim que l'inspector l'analitzi, és que no ho hem fet bé
 
4.-
La web invisible (pastilles anti-paranoia)
L'exemple anterior ens hauria de demostrar que, amb JavaScript i, en general, quan es programa, hi pot haver diverses estratègies que produeixin el mateix resultat. Trobar el millor algoritme no sempre és fàcil i, de vegades, coses que poden semblar complicades, es basen en idees extremadament senzilles. Per exemple, no deixar rastre.

Veurem dues funcions ben senzilles: uns enllaços que no permeten tornar a la pàgina que els ha fet, i unes adreces de correu invisibles per als robots publicitaris.

En el primer cas, fem els enllaços a través d'una funció que reemplaça l'adreça de la pàgina actual per la del vincle que s'ha obert, utilitzant el mètode location.replace(). La pàgina no es guarda a l'historial i no queda cap rastre de que s'ha visitat.

Si no volem rebre correu publicitari, apliquem la segona funció. Com l'anterior, utilitza el mètode "replace" i té, a més, l'adreça trossejada (mailto:elmeunom@xtec.net). No es mostra completa ni al codi, - que és el que analitzen els robots - ni a la barra d'estat. Però funciona.

<script language="javascript">
function noHist(url){
  location.replace(url)
}
function noSpam(){
  location.replace( 'mai' + 'lto:elmeun' + 'om@x' +'tec.es' )
}
</script>
</head>

<body ...>
<a href="javascript:
noHist( 'www.xtec.net' )">Web de la Xtec</a><br>
<a href="javascript:
noSpam()">Escriu-me un mail</a><br>
...