Linguaggi HTML e Java Script-Schede 31-39 - emmegiclick

REGIONE
SICILIANA
Progetto cofinanziato dal Piano straordinario per il lavoro in Sicilia: opportunità giovani - Priorità 3: Formazione giovani
Anno Formativo 2013-2014 - Progetto Occupazione - Corso Webdesigner - Sede Trapani
Scheda 31
JAVA SCRIPT - FINESTRE DI POPUP STATICHE
COSA SONO
Per finestre di PopUp si intendono
delle
finestre
ripristinate
visualizzate in sovraimpressione a
quella principale (vedi disegno a
lato)
COME SI VISUALIZZANO
Per visualizzare una finestra di PopUp occorre utilizzare la funzione predefinita window.open(….) di tipo parametrico.
La sintassi è la seguente:
window.open([url], [nome], [caratteristiche])
Le principali caratteristiche che possono essere indicate sono:
url
valore alfanumerico
indica indirizzo e nome del file da visualizzare nella finestra
nome
valore alfanumerico
indica il nome della finestra
caratteristiche
width
valore numerico
indica la larghezza della finestra in pixel
height
valore numerico
indica l’altezza della finestra in pixel
status
valori alfanumerico yes o no
indica la presenza o meno della barra di stato
toolbar
valori alfanumerico yes o no
indica la presenza o meno della barra dei pulsanti
location
valori alfanumerico yes o no
indica la presenza o meno della barra dell’indirizzo
menu
valori alfanumerico yes o no
indica la presenza o meno della barra dei menu
resizable
valori alfanumerico yes o no
indica la la possibilità di ridimensionare la finestra
ESEMPIO
window.open(“Foto.htm”, “Trapani”, "status=no,toolbar=no,location=no,menu=no,width=250,height=100,resizable=no")
Apre una finestra di nome Trapani contenente il file Foto.htm nella quale non saranno visualizzati la barra di stato, la
barra dei pulsanti, la barra degli indirizzi, la barra dei menu. La larghezza della finestra sarà 250 pixel e l’altezza 100
pixel. La finestra non potrà essere ridimensionata.
Modulo didattico: Linguaggio HTML e Java Script
Dispensa a cura del formatore: Dott. Mario Giurlanda - [email protected] - www.profmarioonline.altervista.org
REGIONE
SICILIANA
Progetto cofinanziato dal Piano straordinario per il lavoro in Sicilia: opportunità giovani - Priorità 3: Formazione giovani
Anno Formativo 2013-2014 - Progetto Occupazione - Corso Webdesigner - Sede Trapani
Scheda 32
JAVA SCRIPT - GESTIONE TIMEOUT
In JAVA SCRPT, quando si ha la necessità di eseguire una istruzione o una funzione
dopo un certo intervallo di tempo, è possibile impostare un TIME OUT.
Ciò torna utile, ad esempio, per l’aggiornamento periodico di una pagina o per
ritardare un messaggio o una funzione.
E’ consigliabile identificare un timeout tramite una variabile in modo da poterla
gestire successivamente oppure per gestire più timeout contemporaneamente
Si consiglia di utilizzare il timeout con la seguente sintassi:
[Variabile] = window.setTimeout(“[chiamata di funzione];”, [numero millisecondi])
ad esempio ID=window.setTimeout(“Cambia();”, 4000) consente di eseguire la funzione Cambia dopo 4000
millisecondi (4 secondi)
Per fermare un timeout utilizzare la seguente istruzione:
window.clearTimeout([variabile]). Naturalmente questa istruzione ha efficacia in caso di timeout abbastanza
lunghi (alcuni secondi)
Modulo didattico: Linguaggio HTML e Java Script
Dispensa a cura del formatore: Dott. Mario Giurlanda - [email protected] - www.profmarioonline.altervista.org
REGIONE
SICILIANA
Progetto cofinanziato dal Piano straordinario per il lavoro in Sicilia: opportunità giovani - Priorità 3: Formazione giovani
Anno Formativo 2013-2014 - Progetto Occupazione - Corso Webdesigner - Sede Trapani
Scheda 33
JAVA SCRIPT - FINESTRE DI POPUP DINAMICHE
SIGNIFICATO DI PAGINA DINAMICA
Una pagina web dinamica è una pagina web il cui contenuto
è, in tutto o in parte, al momento dal server e può essere
quindi diversa ogni volta che viene richiamata. Questo
significa che non si utilizza direttamente il linguaggio HTML,
ma che si ricorre a dei linguaggi di programmazione (i
linguaggi di scripting) come Java Script o PHP, che si
occupano della creazione della pagina nel momento in cui
questa viene visitata, anche interagendo con i visitatori, e
possono variare l'output HTML successivo dopo calcoli
eseguiti con apposite strutture messe a disposizione dal
linguaggio di scripting che si usa.
Tutti i motori di ricerca, come ad esempio Google, sono
costituiti interamente da pagine dinamiche. Inserendo una
ricerca (ad esempio "monumenti Trapani") verrà visualizzata
una pagina generata al momento.
Anche le pagine dei comuni social network come Facebook sono delle pagine dinamiche. La pagina HOME di ogni
utente risulta diversa e contiene solo le notizie riguardanti gli amici dell'utente stesso.
DOCUMENTO DINAMICO
Per creare una documento dinamico con Java Script occorre utilizzare queste istruzioni:
document.open()
document.write([dati])
document.close()
ESEMPIO:
A = window.open("","","width=550, height=350, menubar=no,tolbar=no")
A.document.open()
A.document.write("<html><head><title>Finestra di PopUp</title>")
A.document.write("</head>")
A.document.write("<body>")
A.document.write("<p align=’center’”>
A.document.write("Parte testuale da visualizzare nella nuova pagina</p>")
A.document.write("</body></html>")
A.document.close()
Modulo didattico: Linguaggio HTML e Java Script
Dispensa a cura del formatore: Dott. Mario Giurlanda - [email protected] - www.profmarioonline.altervista.org
REGIONE
SICILIANA
Progetto cofinanziato dal Piano straordinario per il lavoro in Sicilia: opportunità giovani - Priorità 3: Formazione giovani
Anno Formativo 2013-2014 - Progetto Occupazione - Corso Webdesigner - Sede Trapani
Scheda 34
JAVA SCRIPT - FUNZIONI NUMERICHE E STRINGA
PRINCIPALI FUNZIONI NUMERICHE
Math.floor()
arrotonda per difetto un
numero decimale
Math.ceil()
arrotonda per eccesso un
numero decimale
Math. round ()
arrotonda matematicamente
un numero decimale
Math.random()
sceglie casualmente un numero
decimale compreso fra 0 e 1
isNaN()
verifica che un valore non sia
numerico
ESEMPIO
A = 10/3
document.write(A)
document.write(Math.floor(A))
ESEMPIO
A = 10/3
document.write(A)
document.write(Math.ceil(A))
ESEMPIO
A = 10/3
document.write(A)
document.write(Math.round(A))
B = 10/6
document.write(B)
document.write(Math.round(B))
ESEMPIO
A = Math.floor(Math.random() * 10 + 1)
OUTPUT
ESEMPIO
A = "CASA";
if (isNaN(A)) document.write("0");
OUTPUT
3.333333333
3
OUTPUT
3.333333333
4
OUTPUT
3.333333333
3
1.666666666
2
OUTPUT
un numero compreso
fra 1 e 10
0
PRINCIPALI FUNZIONI STRINGA
.legth
calcola il numero di caratteri
che costituiscono una
stringa. Bisogna anteporre il
nome della stringa a .length
.indexOf(sottostringa)
calcola la posizione di una
sottostringa all'interno di
una stringa. iniziando da 0
.substr(inizio,num.caratteri)
estrae num.caratteri
partendo dalla posizione
inizio
ESEMPIO
A = "Bicicletta";
document.write(A.length)
B = "Trapani";
document.write(B.length)
ESEMPIO
A = "[email protected]"
document.write( A.indexOf("@libero"))
document.write( A.indexOf("cola"))
ESEMPIO
A = "Linguaggi HTML e Java Script"
document.write(A.substr(10,4))
document.write(A.substr(17,3))
OUTPUT
10
6
OUTPUT
6
2
OUTPUT
HTML
Jav
Modulo didattico: Linguaggio HTML e Java Script
Dispensa a cura del formatore: Dott. Mario Giurlanda - [email protected] - www.profmarioonline.altervista.org
REGIONE
SICILIANA
Progetto cofinanziato dal Piano straordinario per il lavoro in Sicilia: opportunità giovani - Priorità 3: Formazione giovani
Anno Formativo 2013-2014 - Progetto Occupazione - Corso Webdesigner - Sede Trapani
Scheda 35
JAVA SCRIPT - CICLI ITERATIVI
DEFINIZIONE
Per ciclo iterativo si intende la ripetizione di un certo gruppo
di istruzioni collegato ad una condizione inizialmente vera. La
ripetizione di tale gruppo di istruzioni avrà termine quando la
condizione diventerà falsa.
SINTASSI
La sintassi dei cicli iterativi è la seguente:
while([condizione]) {
istruzione .........
istruzione .........
istruzione .........
istruzione .........
}
il gruppo di istruzioni compreso fra le parentesi graffe verrà
ripetuto finché la condizione espressa dopo while risulta vera.
Attenzione: qualora la condizione risultasse falsa fin dall'inizio il gruppo di istruzioni non verrà eseguito neanche una
volta. Se viceversa la condizione espressa dopo while risultasse sempre vera (magari perché definita erroneamente dal
webmaster) il ciclo non si interromperà mai e la pagina web blocca il software che la utilizza.
UTILIZZAZIONE
L'utilizzazione di un ciclo iterativo risulta utile soprattutto nella gestione delle variabili array ad esempio nella
visualizzazione di un numero elevato di dati o, comunque, tutte le volte che dovrebbe ripetersi una certa quantità di
istruzioni.
UN ESEMPIO
Visualizzare i valori della variabile A[0], A[1], A[2], A[3], A[4], A[5], A[6], A[7], A[8], A[9]
SENZA CICLO ITERATIVO
document.write(A[0])
document.write(A[1])
document.write(A[2])
document.write(A[3])
document.write(A[4])
document.write(A[5])
document.write(A[6])
document.write(A[7])
document.write(A[8])
document.write(A[9])
CON CICLO ITERATIVO
Cnt = 0
while (Cnt !=9) {
document.write(A[Cnt])
Cnt = Cnt + 1
}
Modulo didattico: Linguaggio HTML e Java Script
Dispensa a cura del formatore: Dott. Mario Giurlanda - [email protected] - www.profmarioonline.altervista.org
REGIONE
SICILIANA
Progetto cofinanziato dal Piano straordinario per il lavoro in Sicilia: opportunità giovani - Priorità 3: Formazione giovani
Anno Formativo 2013-2014 - Progetto Occupazione - Corso Webdesigner - Sede Trapani
Scheda 36
JAVA SCRIPT - COOKIE
I cookie sono dei piccoli file di testo che vengono creati sul
computer client durante la navigazione di talune pagine web
al fine di memorizzare delle informazioni utili all'esperienza
di navigazione dell'utente. Mediante i cookie è possibile, ad
esempio, memorizzare delle preferenze di navigazione, dei
dati di accesso, informazioni sulle pagine visitate, ecc.
Gli elementi costitutivi di un cookie sono, quindi, tre:
1. ... la definizione del cookie stesso e cioè nome del
cookie = "valore del cookie";
2. ... la scadenza (facoltativa) in formato UTC;
3. ... il path (facoltativo) dato dal dominio più il
percorso;
Se non viene specificata una scadenza il cookie verrà
cancellato al termine della sessione di navigazione che lo ha
creato e, pertanto, la visualizzazione di pagine successive a
quella che ha generato il cookie potranno utilizzare le
informazioni memorizzate. Se non viene specificato il path il
browser dovrebbe impostarlo automaticamente per il
dominio ed il percorso corrente.
Per cerare o modificare un cookie basta utilizzare il
comando document.cookie = seguito dalla definizione del
cookie stesso. Ad esempio: document.cookie = "Luogo =
Trapani;" che assegna il valore Trapani al parametro Luogo.
Un successivo comando document.cookie = "Luogo = Erice;" sostituirà il valore Trapani con Erice al parametro Luogo.
Per esaminare il contenuto di un cookie generato in precedenza basta lavorare .document.cookie come una normale
variabile stringa utilizzando le funzioni stringa necessarie. In riferimento all'esempio precedente basterà utilizzare la
seguente funzione document.cookie.indexOf("Luogo = Erice") e verificare il valore ottenuto.
Modulo didattico: Linguaggio HTML e Java Script
Dispensa a cura del formatore: Dott. Mario Giurlanda - [email protected] - www.profmarioonline.altervista.org