ALCUNI ESEMPI DI DATI 6,28 numerico costante

Transcript

1 Scheda 21 JAVA SCRIPT I DATI DATI E TIPI DI DATI In una elaborazione i dati sono l elemento essenziale: senza dati non c è elaborazione. Si possono avere dati VARIABILI e dati COSTANTI oppure dati NUMERICI e dati ALFANUMERICI (o STRINGA). Un dato variabile è identificato dal suo NOME Un dato costante è rappresentato dal DATO STESSO Un dato costante numerico (in Java Script) viene indicato dallo stesso numero senza segni particolari. Un dato costante alfanumerico (in Java Script) viene racchiuso fra virgolette ALCUNI ESEMPI DI DATI 6,28 numerico costante UN DATO COSTANTE CAMBIA alfanumerico costante alfanumerico costante SOLAMENTE MODIFICANDO IL CODICE Trapani ECAP TRAPANI alfanumerico costante Prezzo CogNome LocNascita Qta numerico variabile alfanumerico variabile alfanumerico costante numerico variabile In Java Script i dati variabili possono essere di due tipi: UN DATO VARIABILE CAMBIA INDIPENDENTEMENTE DAL CODICE VARIABILI GLOBALI: vengono considerate da tutte le funzioni. In questo caso è necessario effettuare la dichiarazione nella parte HEAD utilizzando la seguente sintassi: TIPO NUMERICO var [nome variabile] = 0 (ES. var QTA = 0) TIPO ALFANUMERICO var [nome variabile] = "" (ES. var Localita = "") TIPO BOOLENANO var [nome variabile] = false (ES. var Esito = false) ATTENZIONE: Nella dichiarazione è possibile anche assegnare una valore diverso da nullo VARIABILI LOCALI: vengono utilizzate solo nella funzione in cui si trovano, In questo caso non è necessario effettuare alcuna dichiarazione. ATTENZIONE: due variabili locali aventi lo stesso nome e utilizzate in due funzioni diverse sono indipendenti l una dall altra. ATTENZIONE: il nome di una variabile java script deve rispettare le regole dei nomi degli oggetti e pertanto inizia sempre con una lettera dell alfabeto e non contiene ne spazi ne segni speciali.

2 Scheda 22 JAVA SCRIPT - FUNZIONI PARAMETRICHE PER FUNZIONE PARAMETRICA SI SINTENDE UNA FUNZIONE CHE NECESSITA,. CONTESTUALMENTE ALLA CHIAMATA, DELL'INVIO DI UNO O PIU VALORI TALI VALORI VANNO INDICATI ALL'INTERNO DELLA PARENTESI TONDA ED EVENTUALMENTE SEPARATI DA UN SEGNO DI VIRGOLA NELLA DEFINIZIONE DELLA FUNZIONE (PARTE HEAD DELLA PAGINA HTML) VANNO INDICATE LE VARIABILI (VEDI SCHEDA PRECEDENTE) CHE ACCETTANO I VALORI INVIATI (ANCH'ESSE EVENTUALMENTE SEPARATE DA SEGNI DI VIRGOLA) ESEMPIO function Moltiplica(A,B) { Prodotto.value = A * B <Input Type="Button" value="calcola 1" onclick="moltiplica(3,5)> <Input Type="Button" value="calcola 2" onclick="moltiplica(7,2)> <Input Type="Button" value="calcola 3" onclick="moltiplica(6,4)> Nell'esempio appena esposto la funzione parametrica Moltiplica richiede 2 parametri assegnati rispettivamente alle variabili A e B. Nelle tre chiamate di funzione sui pulsanti vengono assegnati rispettivamente i valori 3 e 5 per Calcola 1, 7 e 2 per Calcola 2 e 6 e 4 per Calcola 3. Il vantaggio sull'uso di funzioni parametriche risulta evidente. In questo caso, ad esempio si svolgono 3 moltiplicazioni simili utilizzando 3 gruppi di valori diversi. Se la funzione non fosse stata definita parametrica sarebbero state necessarie 3 funzioni diverse.

3 Scheda 23 JAVA SCRIPT - ISTRUZIONI DI DECISIONE DECISIONE SEMPLICE if ([condizione]) {. if ([condizione]) { else { SPIEGAZIONE Le istruzioni comprese fra le parentesi graffe verranno eseguite SOLAMENTE se la condizione espressa risulta VERA Le istruzioni comprese fra le parentesi graffe PRIMA DI ELSE verranno eseguite SOLAMENTE se la condizione espressa risulta VERA. Le istruzioni comprese fra le parentesi graffe DOPO DI ELSE verranno eseguite SOLAMENTE se la condizione espressa risulta FALSA. ESEMPI PRATICI function CalcolaSconto() { if (Qta > 5) { Sconto = Prezzo * 5/100 Totale = Prezzo - Sconto function CalcolaSconto() { if (Qta > 5) { Sconto = Prezzo * 5/100 Totale = Prezzo - Sconto - 50 else { Sconto = Prezzo * 3/100 Totale = Prezzo - Sconto Le istruzioni Sconto = Prezzo * 5/100 Totale = Prezzo - Sconto - 50 verranno eseguite solamente quando Qta ha un valore superiore a 5 Le istruzioni Sconto = Prezzo * 5/100 Totale = Prezzo - Sconto - 50 verranno eseguite solamente quando Qta ha un valore superiore a 5 se ciò non risulta vero verranno eseguite le istruzioni: Sconto = Prezzo * 3/100 Totale = Prezzo - Sconto

4 Scheda 24 JAVA SCRIPT - ALCUNE FUNZIONI PREDEFINITE (a) window.alert("[dato da Visualizz.]") Visualizza una piccola finestra con un bottone Ok e un messaggio definito dal webmaster. L elaborazione della pagina si interrompe finchè non viene eseguito click sul bottone Ok Per visualizzare questa finestra l istruzione da utilizzare è: window.alert( Questo sito viene aggiornato la Domenica ) window.print() Stampa la pagina HTML che contiene la funzione. Equivale all esecuzione di click sul pulsante STAMPA di Internet Explorer Trattandosi di funzione FISSA non occorre specificare alcun parametro history.back() Visualizza la pagina visualizzata in precedenza nel browser. Equivale all esecuzione di click sul pulsante INDIETRO di Internet Explorer history.foward() Visualizza la pagina visualizzata in successivamente nel browser. Equivale all esecuzione di click sul pulsante AVANTI di Internet Explorer

5 Scheda 25 JAVA SCRIPT - ALCUNE FUNZIONI PREDEFINITE (b) window.confirm("[dato da Visualizz.]") Visualizza una piccola finestra con un bottone Ok e un bottone Annulla oltre ad un messaggio definito dal webmaster. L elaborazione della pagina si interrompe finché non viene eseguito click su uno dei due bottoni. E' possibile verificare su quale dei due pulsanti è stato eseguito il click Per visualizzare questa finestra l istruzione da utilizzare è: window.confirm("confermi i dati Immessi?") window.prompt("[messaggio]","[valore predef]") Visualizza una piccola finestra con un messaggio definito dal webmaster, una casella di testo nella quale l'utente può digitare dati e 2 pulsanti rispettivamente OK e Annulla Per visualizzare questa finestra l istruzione da utilizzare è: window.prompt("inserisci il nome","nome utente") window.close() Chiude la finestra corrente. Non richiede parametri. Equivale a chiudere la finestra con il pulsante chiudi

6 Scheda 26 JAVA SCRIPT - ALTRI OGGETTI DI INPUT (CODICE) NOME - ASPETTO TEXTAREA RADIOBUTTON CHECKBOX SELECT CARATTERISTICHE DESCRIZIONE - CODICE Piccola finestra (con eventuale barra di scorrimento) nella quale l utente può digitare o leggere un testo. E possibile imporre la proprietà in sola lettura. <TextArea Name="XXX" rows="x" cols="x" readonly>xxxxxx XXXXX XXXXXX</TextArea> Rows e Cols definiscono il numero di righe e colonne ossia le dimensioni delle TextArea Bottoni circolari che consentono una sola scelta da un gruppo di 2 o più (la scelta effettuata esclude le altre). Un pallino nero indica la scelta effettuata (checked). <Input Type="radio" Name="XXX" checked>xxxx<br> <Input Type="radio" Name="XXX">XXXXXX Tutti i radiobutton del gruppo devono avere lo stesso nome. La proprietà checked definisce la scelta attiva all avvio. Bottoni quadrati che consentono una scelta indipendente da altre eventualmente presenti. La presenza di un segno di spunta indica la scelta effettuata <Input Type="checkbox" Name="XXX">XXXX<br> <Input Type="checkbox" Name="YYY" checked>xxxxxx<br> La proprietà checked definisce la scelta attiva all avvio. Elenco di scelte da cui è possibile effettuare una selezione tramite click. L elenco viene visualizzato dopo click sul pulsante a destra <Select Name="XXX"> <Option Value="AAA" selected> XXXXXXX</option> <Option Value="BBB"> XXXXXX</option> <Option Value="CCCC">XXXXXX</option> </Select> Ad ogni scelta viene assegnato un valore (prop. value). La proprietà SELECTED definisce la scelta attiva all avvio SELECT Elenco di scelte posto in una finestra a scorrimento da cui è possibile effettuare una selezione tramite click <Select Name="XXXXXX" size= X > <Option Value="AAA" selected> XXXXXXX</option> <Option Value="BBB"> XXXXXX</option> <Option Value="CCCC">XXXXXX</option> </Select> La proprietà SIZE definisce l altezza della finestra (in numero di righe). La proprietà SELECTED definisce la scelta attiva all avvio

7 Scheda 27 JAVA SCRIPT - ALTRI OGGETTI DI INPUT (ESEMPI) ASPETTO CODICE UTILIZZATO <TextArea Name="prova" rows="4" cols="18">nel mezzo del cammin di nostra vita mi ritrovai un dì per una selva oscura</textarea> <Input Type="radio" Name="Tipo" checked>contanti<br> <Input Type="radio" Name="Tipo" >Bollettino postale<br> <Input Type="radio" Name="Tipo" >Bonifico bancario <Input Type="checkbox" Name="Ingle" >Inglese<br> <Input Type="checkbox" Name="France" checked>francese<br> <Input Type="checkbox" Name="Tede" >Tedesco <Select Name="Monumenti"> <Option Value="Colosseo.jpg" selected>colosseo</option> <Option Value="TorrePisa.jpg">Torre di Pisa</option> <Option Value="DuomoMi.jpg">Duomo di Milano</option> <Option Value="CattedralePa.jpg">Catt. di Palermo</option> </Select> <Select Name="Monumenti" size= 3 > <Option Value="Colosseo.jpg" selected>colosseo</option> <Option Value="TorrePisa.jpg">Torre di Pisa</option> <Option Value="DuomoMi.jpg">Duomo di Milano</option> <Option Value="CattedralePa.jpg">Catt. di Palermo</option> </Select>

8 Scheda 28 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 visulizzare 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.

9 Scheda 29 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)

10 OGGETTO DOCUMENT rappresenta il contenuto di una finestra. Scheda 30 JAVA SCRIPT - OGGETTO DOCUMENT E OGGETTO DATE PER CAMBIARE IL CONTENUTO di una finestra basta utilizzare la seguente istruzione: document.location.href= [nome file] dove nome file è il percorso e il nome del file da visualizzare (di tipo HTM o altro tipo) PER RICARICARE nella finestra il file presente utilizzare: document.location.reload() PER SCRIVERE nel documento corrente utilizzare la seguente istruzione document.write([dati]) ES.: document.write("benvenuti nel nostro sito") Visualizza la frase Benvenuti nel nostro sito Con questo sistema combinando le istruzioni con delle istruzioni di decisione è possibile modificare la visualizzazione di una pagina in base a varie condizioni OGGETTO DATE() L'oggetto Date() viene dichiarato in una variabile di tipo [Variabile] = new Date(). A questa viene assegnata la data e l'ora di sistema. Una volta creata la variabile è poi possibile ricavare o assegnare giorno, mese, anno, ore, minuti, secondi. Ecco un elenco dei principali metodi dell'oggetto Date(): getdate()... metodo associato al numero del giorno del mese corrente getday()... metodo associato al numero del giorno della settimana corrente, ad, esempio 1=lunedì, 5=Venerdì... getmonth()... metodo associato al mese corrente, contati dall'interprete JavaScript da 0 a 11 getyear... metodo associato all'anno corrente gethours()... metodo associato all'orario corrente getminutes()... metodo associato al numero di minuti correnti getseconds()... metodo associato al numero di secondi correnti A ognuno di questi corrisponde l'equivalente col prefisso set che serve ad impostare il valore in questione. Ad esempio, mentre getminutes serve ad ottenere il numero di minuti, setminutes serve ad impostarli.