Objectes predefinits i nadius del llenguatge
Contingut
Introducció
A Javascript tenim objectes predefinits relacionats amb la finestra i l'entorn del navegador, que has de conèixer i utilitzar.
Referències
- JS Window: http://www.w3schools.com/js/js_window.asp
- JS Screen: http://www.w3schools.com/js/js_screen.asp
- JS Location: http://www.w3schools.com/js/js_location.asp
- JS History: http://www.w3schools.com/js/js_history.asp
- JS Navigator: http://www.w3schools.com/js/js_navigator.asp
- JS PopupAlert: http://www.w3schools.com/js/js_popupalert.asp
- JS Timing: http://www.w3schools.com/js/js_timing.asp
- JS Cookies: http://www.w3schools.com/js/js_cookies.asp
- Frames: http://www.w3schools.com/jsref/prop_win_frames.asp
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.
- http://www.w3schools.com/jsref/prop_win_frames.asp
- http://www.w3schools.com/html/html_iframe.asp
- http://www.w3schools.com/jsref/dom_obj_frame.asp
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