JavaScript 7 - Il sito di Yoda

Transcript

Loggetto navigator
Proprietà di navigator 1
Rappresenta
il browser in uso e
permette di ottenere informazioni su
nome, versione
Ogni browser può avere proprietà non
standard
Per accedere ad una proprietà si usa la
sintassi
JavaScript 7
Oggetti client-side
navigator.NomeProprietà
Tecnologie di Sviluppo per il WEB
userAgent
stringa inviata dal browser al server nelle richieste
HTTP nell'header di USER-AGENT
platform
cookieEnabled
Mozilla sia per IE che NN
appName
nome ufficiale del browser
Netscape per NN
Microsoft Internet Explorer per IE
appVersion
Versione del codice del browser ed altri dati
2
Codice
language
var
userLanguage
javaEnabled()
3
browser = Browser Information: \n;
(var propname in navigator) {
browser += propname +:+
navigator[propname] +\n
}
alert(browser);
for
Lingua preferita dallutente (solo IE4+) equivalente
di language
Verifica se Java è disponibile e supportato dal
browser
sistema operativo dove gira il browser
nome semplice del codice del browser
4.0 (compatible; MSIE 6.0; Windows NT 5.0) per IE6
5.0 (Windows; en-US) per NN7
lingua di default del browser (solo NN4+)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US;
rv:1.0.1) Gecko/20020823 Netscape/7.0 (BDP)
appCodeName
Valore booleano indicante se i cookie sono abilitati
4
5
6
Loggetto navigator di IE
Loggetto navigator di NN
7
Proprietà di screen 1
informazioni sulla risoluzione
dello schermo dellutente e sul numero
di colori che supporta
Si potrebbero usare le informazioni
contenute in screen per decidere la
grandezza o numero di colori delle
immagini da caricare nel documento
Per accedere ad una proprietà si usa la
sintassi
screen.NomeProprietà
8
9
12
Esempio
Proprietà di screen 2
colorDepth
availHeight
Specifica laltezza in pixel disponibile dello
schermo (esclude laltezza della barra delle
applicazioni se esiste)
Loggetto screen
Fornisce
Specifica il logaritmo in base due del
numero di colori allocati dal browser e
disponibili per la visualizzazione delle
immagini
height
Specifica laltezza in pixel dello schermo
availWidth
Specifica la larghezza in pixel disponibile
dello schermo (esclude la larghezza di
eventuali barre di applicazioni)
10
width
Specifica
schermo
la
larghezza
in
pixel
dello
11
var intervalID=window.setInterval("rimbalza()", interval);
Esempio di uso di screen - HTML
Esempio di uso di screen - Rimbalza
<head>
<script type="text/javascript">
var x = 0, y = 0, w=200, h=200;
//posiz. e grandezza della finestra
var dx = 5, dy = 5; // "spostamento" della finestra
var interval = 100; // velocità ms tra gliaggiornamenti
var win = window.open("doc.html", "",
"width=" + w + ",height=" + h);
win.moveTo(x,y);
function rimbalza() {
if (win.closed) { clearInterval(intervalID); return; }
if ((x+dx > (screen.availWidth - w)) || (x+dx < 0))
= -dx;
if ((y+dy > (screen.availHeight - h)) || (y+dy < 0))
= -dy;
x += dx; y += dy;
win.moveTo(x,y);
}
</script> </head>
13
Loggetto location
dx
dy
14
lURL del documento che
è correntemente mostrato nella finestra
È possibile accedere a singole parti
dellURL
Tutte
le proprietà sono accessibili in
lettura e scrittura
href
URL completo del documento attualmente
visualizzato
host
Altre
proprietà sono
protocol://hostname:port/pathname?search#hash
basta modificarle per caricare un nuovo
documento
16
esempio
15
http://www.abc.com:666/catalog/search.php?query=JS&match=2#result
hostname e numero di porta
dominio, host, ...
Esempio
Proprietà di location
Rappresenta
<body>
<form>
<input type="button" value="Ferma la finestra"
onclick="clearInterval(intervalID);
win.close();">
</form>
</body>
17
protocol http:
hostname www.abc.com
port 666
host www.abc.com:1234
pathname /catalog/search.php
search ?query=JS&match=2
hash #result
18
Metodi di location
Loggetto history
Loggetto frames[] 1
reload()
Tiene
Si
ricarica l'URL corrente dalla cache o dal
server
replace()
traccia della cronologia di
navigazione del browser
Possiede tre metodi
riferisce ad una array di oggetti
window ognuno dei quali rappresenta
un frame della finestra corrente
Se una finestra non ha frame loggetto
frames[ ] è vuoto e frames.length è
uguale a zero
Una finestra può riferirsi al primo frame
tramite frames[0], al secondo tramite
frames[1],
back()
carica una nuova pagina passata come
argomento
Va indietro nella cronologia
forward()
Per
caricare una nuova pagina nel
browser è sufficiente scrivere
Va avanti nella cronologia
go(±Numero)
Va ±Numero elementi avanti/indietro nella
cronologia
location.href = <URL>
19
20
Loggetto frames[] 2
Frame e nomi
Allinterno
Possiamo
22
far riferimento ad un frame
tramite il suo nome invece della sua
posizione (molto più comodo)
Ad esempio se abbiamo il seguente
frame
<frame name=indice href=indice.html>
Possiamo far riferimento ad esso da un
qualsiasi frame suo fratello con
parent.indice
Graficamente.
di un frame è possibile
accede alla finestra genitore tramite
parent ed alla finestra principale del
browser tramite top
Se una finestra è una finestra top-level
e non è un frame allora vale che
parent==self
21
23
24
Frame e variabili 1
Frame e variabili 2
Loggetto document
Per
Forse
Se in un frame (frames[0]) è definita una
variabile i, allora possiamo accedere ad i da
qualsiasi frame (i è una proprietà di
frames[0]).
Ad esempio, dal secondo frame possiamo
accedere nel seguente modo
parent.frames[0].i = 4;
Lo stesso vale per le funzioni
j = parent.frames[0].f(3,4);
25
Metodi principali di document
alinkColor, linkColor, vlinkColor
bgColor, fgColor
open()
Colori dei link attivi, non visitati e visitati
close()
Serve per chiudere il documento.
Inserire sempre una chiamata a questo metodo
dopo che abbiamo finito di scrivere nella finestra
del browser
In caso contrario il browser non fermerà il simbolo di
caricamento del documento (di solito in alto a destra).
domain
Dominio del documento. Usato per settare alcune
proprietà di sicurezza per lo stesso dominio in
finestre di un sito che vengono da web server
differenti dello stesso dominio
E.g., www.oreilly.com e search.oreilly.com
28
di
implementare
le
caratteristiche dinamiche di HTML
Alcune sue proprietà e metodi sono
dipendenti dal browser
close(), open(), write(), writeln()
27
Proprietà principali di document 2
lastModified
referrer
title
URL
URL del documento da cui si è provenuti
(contenente il link del corrente documento).
cookie
Proprietà che permette di leggere e scrivere
cookie associati al documento
permette
Contiene la data di ultima modifica del documento
Colore di sfondo e di primo piano
è loggetto più importante
responsabile di tutto quello che compare
sulla pagina
26
Apre il documento su cui andare a scrivere. Non è
necessario: la prima write apre automaticamente il
documento
semplificare le cose potremmo
scrivere
var f = parent.frames[0].f;
e poi usare f in frames[1]
Att.ne allo scoping. Se nel frame parent
sono definite vbl globali, quando f è
invocata nel frame 1, lo scoping è
quello del padre, 0.
Il testo tra <TITLE> e </TITLE>
Specifica lURL da cui il documento è stato
scaricato
location
Sinonimo deprecato di URL
29
30
Nota
applets[]
array delle applet contenute nel documento
forms[]
31
Array images[]
Uso: anchors.length e anchors[i].name
links[]
Array dei link di un documento
Codificati con <A HREF= >
Proprietà: le stesse di location
32
Proprietà di images[]
Come accedere agli elementi? 1
Array di oggetti Image rappresentanti le
immagini contenute nel documento
border, height e width
Per
La prima immagine è in images[0], la seconda in
images[1],
hspace e vspace
Possiamo assegnare ad una variabile un
oggetto immagine
src e lowsrc
var img = new Image();
var img = new Image(larghezza, altezza);
Per alcuni oggetti x esiste un costruttore X()
per crearli
Tutti gli array hanno la proprietà length che
indica il numero di elementi contenuti
anchors[]
Array delle ancore di un documento (testo o
immagine della pagina che è target di un link)
Codificati con <A NAME= >
Proprietà: length e name
Analizzeremo le proprietà solo di alcuni oggetti
(e.g., images[] e forms[]) per gli altri si rimanda al
libro di testo
Array dei moduli, maggiori dettagli in seguito
Tutti gli array x[] di document possono essere
considerati degli array di oggetti di tipo x,
quindi sono associate ad essi delle proprietà
far riferimento agli elementi di un
documento (quelli rappresentati in DOM
level 0 con degli array) possiamo
utilizzare il loro indice
spessore del bordo, altezza e larghezza dell'immagine
spaziatura orizzontale e verticale
La terza immagine del documento è
posizionata in images[2]
URL dell'immagine e immagine alternativa per bassa
risoluzione
Il
name
complete
indica se l'immagine è stata caricata
completamente
problema con questo tipo di
riferimento è che se il tag viene
spostato lo script può generare un
errore
Nome dellimmagine
Possiamo
creare
animazioni
settando
opportunamente alcune proprietà di Image
34
33
35
36
Come accedere agli elementi? 2
E con gli altri elementi?
Rollover Esempio 1 (HTML)
Se
Esistono
<BODY>
<img width="70" height="60" name="foto"
src="immagini/out.gif"
onmouseover="over()" onmouseout="out()"
onmousedown="giu()" onmouseup="su()"
>
<form name="info">
<input type="text" name="stato"> </form>
</BODY>
associamo a tali elementi un nome
(attributo NAME del relativo tag)
possiamo utilizzare direttamente il loro
nome
Se la terza immagine si chiama casa ci
possiamo riferire ad essa come
document.images[casa] oppure come
document.casa
tag HTML che non hanno
associato nessun array
Come possiamo accedere ai paragrafi
(<P>) o alle sezioni (<DIV>)?
Vedremo che con DOM level 1 potremo
far riferimento ad un qualsiasi elemento
HTML purché abbia un identificativo
(attributo ID)
elemento = document.getElementByID(id);
37
Rollover Esempio 1(JavaScript)
<SCRIPT TYPE="text/javascript">
function out() { document.info.stato.value = "out";
document.foto.src = "immagini/out.gif"; }
function giu() { document.info.stato.value = "giu";
document.foto.src = "immagini/giu.gif"; }
40
39
Rollover Esempio 2(JavaScript)
Rollover Esempio 2 (HTML)
function cambia(nome,stato) {
document.info.stato.value = stato;
img="immagini/"+nome+stato+".gif";
document.images[nome].src=img;
}
</SCRIPT>
Nota
document.images[...]
e
il
precedente
document.foto
È necessario che le immagini abbiano un nome
composto dal nome usato nellattributo NAME
seguito dal loro stato
Non cè pre-caricamento delle immagini. Quando si
scatena levento, le immagini vengono caricate
<form name="info">
<input type="text" name="stato" size="4">
</form></BODY>
function su() { document.info.stato.value = "su";
document.foto.src = "immagini/su.gif"; }
</SCRIPT>
esempio
38
<BODY>
<img width="70" height="60" name="foto"
src="immagini/fotoout.gif"
onmouseover="cambia('foto','over')"
onmouseout="cambia('foto','out')"
onmousedown="cambia('foto','giu')"
onmouseup="cambia('foto','su')">
function over() { document.info.stato.value = "over";
document.foto.src = "immagini/over.gif"; }
41
esempio
42
Rollover ulteriore esempio
function Immagini() { }
var ImgCaricate = new Immagini();
var directory = "immagini/";
function cambia(nome,stato) {
document.info.stato.value = stato;
document.images[nome].src=ImgCaricate[nome+stato];
}
Pre-caricamento immagini
function CaricaImmagini() {
for(var i=0; i< document.images.length; i++) {
nome = document.images[i].name;
su = directory + nome + "su.gif";
giu = directory + nome + "giu.gif";
out = directory + nome + "out.gif";
over = directory + nome + "over.gif";
ImgCaricate[nome+"su"] = su;
ImgCaricate[nome+"giu"] = giu;
ImgCaricate[nome+"over"] = over;
ImgCaricate[nome+"out"] = out; } }
Bisogna aggiungere
Per far pre-caricare al browser le immagini la
cosa da fare è dichiarare un array di oggetti di
tipo Image ed associare alla proprietà src il
nome dellimmagine da pre-caricare
var ImgCaricate = new Array();
nome = document.images[i].name;
su = directory + nome + "su.gif";
ImgCaricate [nome+"su"] = new Image();
ImgCaricate [nome+"su"] .src = su;
<BODY onload="CaricaImmagini()">
43
esempio
44
45

JavaScript 7 - Il sito di Yoda

Transcript

Documenti analoghi

Sistema Operativo

Attestato Konica Minolta Tecnico Sig. Marino Giuseppe

Info generali. Il sito è stato realizzato con Website X5 by

Istruzioni d`uso per i Test on-line

Document Camera KK

Le immagini digitali

Oggetti in Javascript

Applicazione del Codice dell`Amministrazione Digitale:

servizi smart

Nota Informativa Piattaforma per la formazione