Date post: | 02-May-2015 |
Category: |
Documents |
Upload: | antonietta-volpe |
View: | 234 times |
Download: | 3 times |
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>.
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:
globalilocali(solo all'interno di una pagina: non esistono variabili che mantengano il proprio valore se la pagina nella quale sono dichiarate viene chiusa).
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;
JavaScript
La sintassi del linguaggio
Le variabili
Una variabile può assumere come valori:
numeristringheboolean (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)
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)
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.
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()
JavaScript
La sintassi del linguaggio
Operatori e espressioni condizionali
== < >
!= (diverso) <= >=
&& (and) || (or) ! (not)
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”);
JavaScript
La sintassi del linguaggio
Strutture
Esiste anche uno statement switch (analogo alla CASE del Pascal):
switch (expression){
case label :
statements;
break;
case label :
statements;
break;
...
default : statements;
}
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 + “ “);
}
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){
statements
}
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
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] = ""
}
}
JavaScript
La sintassi del linguaggio
Alcuni oggetti predefiniti di Javascript
Gli oggetti di javascript si dividono in
Oggetti predefiniti (del linguaggio) es.: Date, MathOggetti del browser es.: Window, Navigator, Frame, Button. etc.Oggetti personalizzati (costruiti dall’utente)
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)
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()
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.
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)>
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).
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()
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>
</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.
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'">
JavaScript
Esempi ed esercizi
Esempi ed esercizi in JavaScript
(file doc)
JavaScript