JavaScript Generalità Cos'è JavaScript? JavaScript è un linguaggio per le pagine Web. Gli script in JavaScript possono essere inclusi nelle pagine HTML. Con JavaScript si possono migliorare le pagine HTML con elementi veramente interessanti (ad esempio rispondere agli eventi attivati dagli utenti) In Internet è possibile trovare numerosi esempi di script Javascript e vedere pagine potenziate con questo linguaggio.
JavaScript Generalità Qual è la differenza tra Java e JavaScript? Java non è la stessa cosa di JavaScript. Si tratta di due diverse tecniche per la programmazione: Java è un linguaggio di programmazione; Javascript è un linguaggio per realizzare script (scripting language). Con Java si possono realizzare veri e propri programmi, con Javascript si possono creare degli effetti nelle pagine Html evitando di avere a che fare con la programmazione pura. Quindi l'obiettivo principale di Javascript è quello di essere facile da comprendere e da usare, senza preoccuparsi troppo della programmazione.
JavaScript Generalità Il primo browser a supportare Javascript è stato Netscape Navigator 2.0. Naturalmente anche le versioni successive lo supportano. Anche Microsoft Internet Explorer (a partire dalla versione 3.0) supporta Javascript. Realizzare script con Javascript è veramente semplice; tutto ciò che occorre conoscere sono alcune tecniche di base e qualche trucco per superare i problemi che si possono presentare. Naturalmente occorre conoscere anche HTML!!!
JavaScript Generalità Inserimento degli script Dove possono essere inseriti gli script: Nell’intestazione della pagina tra i tag <HEAD>, nel tag <SCRIPT>. Si usa spesso per le funzioni Nel corpo della pagina tra i tag <Body>, nel tag <SCRIPT>. All’interno di un tag HTML. È il caso dei gestori degli eventi e consente di lavorare con gli elementi HTML. In questo caso non è necessario utilizzare il tag <SCRIPT> In un file a sé stante. Questi file hanno estensione .JS ed è possibili inserirli specificando un file nel tag <SCRIPT>.
La sintassi del linguaggio JavaScript La sintassi del linguaggio Le variabili Un identificatore deve cominciare con una lettera o con il simbolo _ (underscore). Ricordare che Javascript è case sensitive. Le variabili possono essere: · globali · locali (solo all'interno di una pagina: non esistono variabili che mantengano il proprio valore se la pagina nella quale sono dichiarate viene chiusa).
La sintassi del linguaggio JavaScript La sintassi del linguaggio Le variabili Le variabili globali devono essere dichiarate (quelle locali no) e possono essere non tipizzate (non è obbligatorio dichiararne il tipo). Per la dichiarazione di una variabile si usa la keyword var, ad esempio: var x; var i = 2;
La sintassi del linguaggio JavaScript La sintassi del linguaggio Le variabili Una variabile può assumere come valori: · numeri · stringhe · boolean (true e false) (ed inoltre i valori undefined e null) Per l'assegnazione si usa l’operatore = Es: X = 2 Notare le forme: X+= 3 (incrementa x di 3) X-= 3 (decrementa di 3) X++ (incrementa x di 1) X-- (decrementare x di 1)
La sintassi del linguaggio JavaScript La sintassi del linguaggio Operatori aritmetici Quelli standard per le quattro operazioni e poi: ++ (incremento), - - (decremento), % (modulo). Operazioni di I/O Il modo normale di realizzare operazioni di I/O nelle pagine HTML è attraverso le forms. E' però possibile utilizzare altre tecniche. Per l'Output si può usare la finestra di alert: alert() (dentro la parentesi si scrverà la stringa, la variabile, ecc. che si vole visualizzare)
La sintassi del linguaggio JavaScript La sintassi del linguaggio Operazioni di I/O Per scrivere sulla pagina si usa document.write() (metodo dell’oggetto document); es.: document.write(x+”<BR>”); scrive il valore di x e va a capo Per assegnare ad una variabile un valore in input si può usare la finestra predefinita prompt: x = prompt(“x = “); ed immettere il valore nella finestra che viene aperta.
La sintassi del linguaggio JavaScript La sintassi del linguaggio Le stringhe Esempi: s= “questa è la stringa S”; s1 = s + “nuova”; s1 += “aggiornata”; Alcune funzioni per operare sulle stringhe: s.lenght per avere la lunghezza di una stringa s.charAt(index) s.toLowerCase() s.toUpperCase()
La sintassi del linguaggio JavaScript La sintassi del linguaggio Operatori e espressioni condizionali == < > != (diverso) <= >= && (and) || (or) ! (not)
La sintassi del linguaggio JavaScript La sintassi del linguaggio Strutture La sequenza si realizza separando gli statement con il punto e virgola. Una sequenza di statement va racchiusa fra le parentesi { } (che corrispondono al begin…..end) La selezione può essere realizzata con lo statement if … else if (condition){statements1} else {statements2} (n.b.: la parte else è facoltativa e può essere omessa; le parentesi graffe sono necessarie solo se c'è più di un'istruzione) es.: if (a== true && b == false ) window.alert(“a e b non sono uguali”);
La sintassi del linguaggio JavaScript La sintassi del linguaggio Strutture Esiste anche uno statement switch (analogo alla CASE del Pascal): switch (expression){ case label : statements; break; ... default : statements; }
La sintassi del linguaggio JavaScript La sintassi del linguaggio Strutture I cicli Lo statement for for (initial-expression; condition; increment-expression){ statements } es.: for (x = 1 ; x<10 ; x++) { document.write(x + “ “);
La sintassi del linguaggio JavaScript La sintassi del linguaggio Strutture I cicli Lo statement do …..while (sostituisce la repeat del Pascal ma la condizione del while è una condizione di permanenza nel ciclo): do statements while (condition); Lo statement while: while (condition){ }
La sintassi del linguaggio JavaScript La sintassi del linguaggio Gli Array Definizione di un array: A = new Array(arrayLength); (gli elementi vanno da 0 ad arrayLength ); es: A = new Array(4); per un array di cinque elementi Per selezionare l’elemento di posto i dell’array A si scrive A[i] Una proprietà degli array: A.length
La sintassi del linguaggio JavaScript La sintassi del linguaggio Gli Array Un Array bidimensionale: myVar="Multidimensional array test; " a = new Array(4) for (i=0;i <4;i++) { a[i] = new Array(4) for (j=0;j <4;j++) { a[i][j] = "" }
La sintassi del linguaggio JavaScript La sintassi del linguaggio Alcuni oggetti predefiniti di Javascript Gli oggetti di javascript si dividono in · Oggetti predefiniti (del linguaggio) es.: Date, Math · Oggetti del browser es.: Window, Navigator, Frame, Button. etc. · Oggetti personalizzati (costruiti dall’utente)
La sintassi del linguaggio JavaScript La sintassi del linguaggio Alcuni oggetti predefiniti di Javascript Math Permette di utilizzare proprietà e funzioni matematiche Alcune funzioni: Math.sin(x),Math.ceil(x), Math.floor(x), Math.round(x) Math.abs(x)
La sintassi del linguaggio JavaScript La sintassi del linguaggio Alcuni oggetti predefiniti di Javascript Date Permette di lavorare con data e ora. A = new Date() costruisce un oggetto A di tipo Date che ha come valore la data di oggi e l’ora attuale Es.: B= new Date(6,20,2001); Metodi: getDate(), getTime(), GetMonth(), setDate() ecc. Es.: A.getDate() Date.parse(dateString) converte da stringa a data (numero di millisecondi dal 1 gen 1970). Es.: Date.parse(“June,20,1999”) toString() restituisce una stringa a partire da una data. Es.: x.toString()
La sintassi del linguaggio JavaScript La sintassi del linguaggio Eventi Sono associati agli oggetti, e gli script che li gestiscono sono chiamati gestori degli eventi (event handlers). Ricordiamo fra gli eventi: eventi del mouse: onMouseOver, onMouseOut, onClick…. event della tastiera: onKeyPress, onKeyDown, onKeyUp….. L’evento onLoad che indica il termine del caricamento di un oggetto document.
La sintassi del linguaggio JavaScript La sintassi del linguaggio Esempio di handler (gestore di eventi) <INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!" onclick="window.open('mydoc.html', 'newWin')"> E' utile ricordare in questo contesto l’uso della speciale keyword this che indica l’oggetto corrente; ad esempio: <INPUT TYPE="button" NAME="Button1" VALUE="cliccami" onClick="window.alert(‘hai cliccato ‘+this.name)>
La sintassi del linguaggio JavaScript La sintassi del linguaggio L’oggetto window Per aprire una finestra si usa il metodo window.open() con vari parametri: WinObj = window.open(“URL”, “nome” ,”lista di attributi”) La variabile WinObj serve per memorizzare il nuovo oggetto window ed ad essa si deve fare riferimento per accedere ai metodi ed alle proprietà dell’oggetto. URL è l’URL del documento da caricare. nome è il nome della finestra (da usare ad es. come target nel tag frame).
La sintassi del linguaggio JavaScript La sintassi del linguaggio L’oggetto window Es.: finestrella = window.open(“mydoc.html”, “fin1” , “width = 100 , heigth = 120, toolbar = 0, status =0”); msgWindow=window.open("sesame.html") Per chiudere la finestra: finestrella.close(); nb: si può anche usare per la finestra corrente window.close() o self.close()
La sintassi del linguaggio JavaScript La sintassi del linguaggio L'oggetto frame Dopo aver costruito tre frame all’interno di una stessa finestra, come ad esempio: <FRAMESET ROWS="90%,10%"> <FRAME SRC="titolo.htm" NAME="titolo"> <FRAMESET COLS="30%,70%"> <FRAME SRC="menu.htm" NAME="menu"> <FRAME SRC="main.htm" NAME="main"> </FRAMESET> Ci si può riferire al frame con il suo nome o, in alternativa, o all’array frames dove sono memorizzati nell’ordine in cui sono creati.
La sintassi del linguaggio JavaScript La sintassi del linguaggio L'oggetto frame Qundi: top.frames[0] o parent.frames[0] corrisponde a titolo top.frames[1] o parent.frames[1] corrisponde a menu top.frames[2] o parent.frames[2] corrisponde a main Ad esempio: <INPUT TYPE="button" VALUE="solo titolo" onClick="top.frames[0].location='altrapagina.html'">
Esempi ed esercizi in JavaScript (file doc)