Objectes predefinits i nadius del llenguatge

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

A Javascript tenim objectes predefinits relacionats amb la finestra i l'entorn del navegador, que has de conèixer i utilitzar.

Referències

Desenvolupament

Els alumnes provaran amb l'ordre proposat algun dels exemples que s'han explicat a classe, i es faran provatures per tal de consolidar els coneixements.

iFrames

Un iframe s'utilitza per visualitzar una pàgina web dins d'una altra.

Exemple pràctica de iframe, amb la problemàtica de l'atribut seamless, fitxer iframe.htm: 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>HTML5 iframe</title>
	<style>
		iframe[seamless]{
			 background-color: transparent;
			 border: 0px none transparent;
			 padding: 0px;
			 overflow: hidden;
		}
	</style>
</head>
<body>

<h1>Prova iFrame</h1>

<p>Prova de l'atribut <em>seamless</em> del tag iframe del HTML5.</p>
<p>
L'atribut <em>seamless</em> encara no funciona correctament en la majoria dels navegadors. És per això que en aquest <a href="http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute">link</a> es proposa utilitzar CSS per tal d'eliminar els contorns i els scroll bars i fer un <em>iframe</em> sense costures.
</p>

<iframe title="w3schools" width="600" height="300" src="http://www.w3schools.com/" seamless="seamless"></iframe>

</body>
</html>

nota: sembla ser que www.google.com no es deixa obrir dins d'un iframe.

Obrir finestra nova

Per defecte per obrir una finestra nova (en una pestanya nova) no cal Javascript, n'hi ha prou amb l'opció target="_blank": 

<a href="http://www.google.com/" target="_blank">kkk</a>

Ara bé, si utilitzem Javascript tenim moltes d'altres opcions, tal com s'explica a 

window.open(URL,nom_de_la_finestra,forma_de_la_finestra)

Concretament podem controlar les mides, la posició, si té scrollbars, barra de direccions, menú,... És la manera correcta de fer els pop-ups:

Comunicació entre finestres amb Javascript

Està ben explicat en aquest enllaç:

Cookies

La manera més fàcil de veure les cookies és des del mateix Firefox:

  • Editar > Preferencias > Privacitat > Suprimir les galetes individualment

Però les cookies es es guarden en el disc dur. Des de la versió Firefox 3 les cookies no es guarden en un fitxer de text sinó en una petita base de dades sqlite. A la carpeta ~/.mozilla/firefox/ veiem que hi ha diferents perfils (fitxer perfils.ini), i cada perfil té una carpeta on es guarden les cookies. Dins de cada perfil, la cookie es guarda en el fitxer cookies.sqlite

Com es pot veure directament la informació de les cookies? Doncs necessitem Sqlite: 

$ sudo apt-get install sqlite

NOTA. La informació que es troba a la xarxa per accedir a les cookies des d'un client de sqlite és molt equívoca, doncs és molt dependent de la versió del Firefox i del Sqlite. A continuació es documenta com ho ha fet el professor, però no és objectiu de la pràctica accedir a les cookies des de sqlite.

Disposem de la versió del Mozilla Firefox 11. Primer de tot mirem la versió del sqlite que tenim instal.lada: 

$ sqlite3
SQLite version 3.6.22

Es llegeix en un fòrum de què s'ha de disposar de la versió 3.7, i aquesta versió no està disponible en els repositoris, o sigui que s'haurà de compilar des de les fonts.

Descarrego el fitxer sqlite-autoconf-3071401.tar.gz, i compilem: 

./configure
make

El binari sqlite3 s'ha creat en el directori ~/Baixades/sqlite-autoconf-3071401/ 

$ cd ~/Baixades/sqlite-autoconf-3071401/
$ ./sqlite3 
SQLite version 3.7.14.1 2012-10-04 19:37:12

Ara anem al directori on estan les cookies: 

$ cd ~/.mozilla/firefox/mevel791.default

Veiem que existeix el fitxer cookies.sqlite. Aquest és el fitxer que conté les cookies, en format de base de dades de sqlite. Des d'aquest directori, executem la versió del sqlite que hem compilat: 

$ ~/Baixades/sqlite-autoconf-3071401/sqlite3 cookies.sqlite
SQLite version 3.7.14.1 2012-10-04 19:37:12
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>

sqlite> .databases
seq  name             file                                                      
---  ---------------  ----------------------------------------------------------
0    main             /home/joan/.mozilla/firefox/mevel791.default/cookies.sqlite

sqlite> .tables
moz_cookies

sqlite> select * from moz_cookies;
...
1332582384604528|az|44966168997d45eca38607f90f07e56e|engine.adzerk.net|/|1382997774|1351461774433171|0|0|adzerk.net|1348816654853624
1332582384604529|GMAIL_IMP|v*2%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Fpf-s*8090%2Fbc-se5*1%2Fbc-se6*1%2Fbc-se12*1%2Fcl-rld*3998|mail.google.com|/mail/u/0|1351548946|1351462546083422|0|0|google.com|1351460441549654
...

sqlite> .schema moz_cookies
CREATE TABLE moz_cookies (id INTEGER PRIMARY KEY, name TEXT, value TEXT, host TEXT, path TEXT,expiry INTEGER, lastAccessed INTEGER, isSecure INTEGER, isHttpOnly INTEGER, baseDomain TEXT, creationTime INTEGER);
CREATE INDEX moz_basedomain ON moz_cookies (baseDomain);
CREATE UNIQUE INDEX moz_uniqueid ON moz_cookies (name, host, path);


sqlite> .mode column
sqlite> .headers on
sqlite> select name,value from moz_cookies where host like '%arthropoda.joanillo.org%';
name        value     
----------  ----------
num_fotos   totes     
tam_fotos   800       
language    ca

Detecció de smartphone i redirecció

Es tracta de detectar que el navegador que estem utilitzant és un smartphone, PDA o similar, i redirigir a una pàgina amb un contingut i disseny adequats. S'ha de pensar en la usabilitat que li donarem a l'aplicació quan accedim des del mòbil (normalment no volem veure el mateix contingut i detall que quan accedim des de l'ordinador). A més, hem de pensar que els mòbils tenen un ample de banda limitat i que els usuaris no volen superar el seu límit contractat, per la qual cosa tindrem cura amb les imatges,... Típicament, s'utilitzarà un full d'estils CSS específic per a aquest format.

La detecció del navegador pot ser simple com l'exemple que es proposa, però es pot complicar si el disseny depèn exactament del tamany de la pantalla (diferents smartphones tenen diferents tamanys). A més, hem de pensar en nous formats de pantalla com ara els iPad i tablets.

En l'exemple que es proposa pots accedir directament a http://arthropoda.joanillo.org/last.php. Si ho fas des d'un mòbil la funcionalitat, el contingut i les imatges queden reduïdes a la mínima expressió. 

<script type="text/javascript">
	var navegador = navigator.userAgent.toLowerCase();
	//alert(navegador);	
	if( navegador.search(/iphone|ipod|android/) > -1 ){
	document.location = 'pda_last.php';
	}
</script>

Mira les diferències entre accedir a la pàgina des del portàtil o des del mòbil.

De totes maneres, aquestes tècniques ara ja estan en desús. La idea actual és que el dissenyador ja no s'hagi de preocupar dels navegadors, del tamany de pantalles, etc. El concepte responsive design fa referència a les tècniques i frameworks per tal de què un mateix contingut es visualitzi de manera correcta en els diferents formats: des d'un ordinador de sobretaula, portàtil, smartphones,... passant per tauletes de diferent tamany.

Per ex, un dels frameworks que s'utilitza és bootstrap, el mateix que utilitza Twitter:

Exercicis aclaridors

Rellotge Javascript

Hem vist un exemple de rellotge analògic fet amb Javascript a:

A classe hem extret la part que ens interessa, i hem comentat el codi. Un dels objectius terminals del mòdul és poder implementar en el nostre projecte codi que hem vist per aquí o per allà, ser capaços d'entendre'l, i adaptar-lo a les nostres necessitats. A vegades fins i tot podrem fer adaptacions de codi que no entenguem al 100%.

Concretament, en aquest codi podem identificar diverses funcions i tècniques que hem vist a classe: funcions de cadena, matemàtiques, de timing,...

Entrega

Els alumnes entregaran al Google Classroom tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Moodle dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Google Classroom: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Google_Classroom

creat per Joan Quintana Compte, Octubre 2018

Obtingut de «http://wiki.joanillo.org/index.php?title=Objectes_predefinits_i_nadius_del_llenguatge&oldid=257739»