Codice Per incorporare un javascript in un documento html :
CODICE
<SCRIPT Language="Javascript"><!-JavaScript Da inserire-></SCRIPT>
I commenti :
CODICE
<script type="text/javascript">
// questo è un commento su una sola riga
/*
questo è un commento che sta su più righe,
serve nel caso in cui ci siano commenti
paricolarmente lunghi
ad esempio di un codice:
alert("ciao");
*/
</script>
Scrivere in un documento con il javascript :
CODICE
document.write("scritta");
Le finestre di dialogo
CODICE
<SCRIPT Language="Javascript">alert("messaggio")</SCRIPT>
Esempi di alert()
CODICE
<SCRIPT Language="Javascript">alert("Ecco il messaggio") // messaggio inserito direttamente
var messaggio = "Ecco il messaggio";
alert(messaggio); // messaggio inserito tramite variabile</SCRIPT>
Testo con sequenze di escape
CODICE
<SCRIPT Language="Javascript">alert("Marco disse \"Ciao Mondo!\"");</SCRIPT>
Bene , Ora che sapete come si apre e chiude uno script mettero' solo piu' il codice
Le finestre personalizzabili
CODICE
window.open('percorso','nome finestra','caratteristiche separate da virgola');
In Dettaglio :
Percorso :
CODICE
indica un percorso (relativo o assoluto) di un file html da inserire all'interno della finestra
Nome Finestra :
CODICE
indica il nome della finestra che abbiamo creato (opzionale)
Caratteristiche Separate da una virgola ( , )
CODICE
specifica la forma, la dimensione e la posizione della finestra, possiamo anche far sì che la finestra non sia ridimensionale, o che non ci siano le barre degli strumenti e le barre di scorrimento.
Aprire una finestra vuota :
CODICE
window.open('','','');
Esempio Di una Finestra :
CODICE
<script type="text/javascript">
window.open('http://hacking120.blogfree.net/','miaFinestra','');
</script>
Caratteristiche Per una finestra :
Esempio:
CODICE
window.open('http://hacking120.blogfree.net/','miaFinestra','width=300,height=300 ,toolbar=yes, location=no,status=yes,menubar=yes,scrollbars=no,resizable=no');
Vediamo nel dettaglio quali sono le principali caratteristiche che possono essere attribuite alla finestra:
| caratteristica | valore | spiegazione | esempio |
|---|
| width | numerico | la larghezza della finestra in pixel | width=400 | | height | numerico | l'altezza della finestra in pixel | height=200 | | left | numerico | la distanza dalla sinistra del monitor | left=300 | | top | numerico | la distanza dal lato superiore del monitor | top=350 | | resizable | yes / no | indica se la finestra puo essere ridimensionata o no | resizable=no | | fullscreen | yes / no | indica se la finestra va aperta a tutto schermo | fullscreen=no | | channelmode | yes / no | indica se la finestra deve essere aperta in modalita canale (solo per ie) | channelmode=no | | menubar | yes / no | la barra del menu (quella con scritto file ,modifica, ecc.) | menubar=no | | toolbar | yes / no | la barra degli strumenti del browser (con i pulsanti indietro,avanti) | toolbar=no | | location | yes / no | la barra degli indirizzi del browser | location=no | | scrollbars | yes / no | le barre di scorrimento laterali | scrollbars=no | | status | yes / no | la barra di stato (quella in basso) | status=no |
|
Conviene immaginare le variabili come delle "scatole" all'interno delle quali immagazzinare dati. In JavaScript per creare delle variabili è sufficiente assegnare un contenuto. Così:
Come si vede dall'esempio, l'espressione che crea una variabile è composta da tre parti:
-nome della variabile (mioNome)
-operatore di assegnamento (=)
-contenuto ("HackTak")
Volendo è anche possibile esplicitare la creazione della variabile, al fine di rendere più chiara la sintassi. Così:
CODICE
// creo una variabile che si chiama "mioNome"
var mioNome;
//assegno a mioNome il contenuto "HackTak"
mioNome="HackTak";
Una variabile potrà contenere qualsiasi tipo di dati valido e cioè:
| Tipo di dati | Spiegazione | Esempio | | Numero | Qualsiasi valore numerico | miaVariabile=300; | | Numero a virgola mobile | Numeri con virgola | miaVariabile=12.5; | | Stringa | Qualsiasi valore letterale.E una sequenza di caratteri, racchiusa tra virgolette. | miaVariabile="HackTak"; | | null | uno speciale tipo di dato che indica assenza di alcun valore (e grave il nulla). Non e grave lo zero. | miaVariabile=null; | | booleano | uno tipo di dato che indica uno stato. Di fatto un valore booleano puo assumere solo due valori: acceso (vero), spento (falso). E il classico interruttore della luce. |
//Vero:
miaVariabile=true;
miaVariabile=1;
//Falso:
miaVariabile=false;
miaVariabile=0;
|
|
Bene, Le variabili non le spieghero tutte dato che e una guida base quindi passiamo al prossimo argomento
Le Funzioni
Le funzioni sono un comodo contenitore in cui racchiudere il codice. Anziché "sporcare la pagina" mischiando codice HTML e linguaggio JavaScript, è sufficiente inserire il codice in una funzione e richiamare la funzione quando occorre.
La sintassi necessaria per creare una funzione è questa:
CODICE
function nomeFunzione() {
// qui il nostro codice
}
Insomma tutto il codice da noi elaborato deve essere contenuto all'interno delle parentesi graffe, che delimitano l'inizio e la chiusura della funzione (Con Windows per digitare le parentesi graffe comporre la combinazione di tasti: AltGr+Shift+parentesi quadre. Lo "Shift" è il tasto con la freccia necessario per scrivere le maiuscole, da non confondere con il "Caps Lock").
La funzione che abbiamo appena creato si richiama poi con:
da inserire nell'elemento <script>, all'interno dell'head, nel corpo della pagina, oppure all'interno di un elemento, da richiamare tramite un evento. Con questo codice non facciamo che richiamare il gruppo di istruzioni contenuti all'interno della funzione.
Per mantenere poi ordine all'interno della pagina, dobbiamo inserire tutte le nostre funzioni all'interno della HEAD del documento, e richiamarle nella stessa HEAD o nel BODY (come detto - facendovi riferimento tramite un evento oppure inserendole nel punto esatto in cui ci serve richiamarle).
Vediamo un semplice esempio, per afferrare subito il concetto. Da inserire nel tag <script>:
CODICE
function saluta() {
alert ("ciao");
}
saluta();
C'è una particolarità da notare che finora non abbiamo ancora espresso con chiarezza, ma che dovrebbe essere emersa dai numerosi esempi presentati: ogni istruzione JavaScript deve essere conclusa con un punto e virgola.
Se rielaboriamo alcuni degli esempi, esaminati nelle pagine precedenti, tramite l'utilizzo delle funzioni otteniamo una sintassi molto più "pulita":
CODICE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Corso JavaScript ad esempi</title>
<script type="text/javascript">
/* prima funzione */
function saluta() {
alert("ciao");
}
/* seconda funzione */
function apriFinestra() {
/* creo una variabile contenente la larghezza della finestra */
larghFinestra=500;
/* creo una variabile contenente l'altezza della finestra */
altezFinestra=500;
/* creo una variabile e mi ricavo il valore della
* posizione della finestra a sinistra dello schermo */
sinistra=screen.width-larghFinestra+20;
/* creo una variabile e mi ricavo il valore della
* posizione della finestra dall'alto dello schermo */
alto=(screen.height-larghFinestra)/2;
window.open("http://hacking120.blogfree.net/","", "left="+sinistra+",top="+alto+", width="+larghFinestra+", height="+altezFinestra+", menubar, toolbar");
}
/* terza funzione */
function scriviRisoluzione(){
document.write("Stai navigando a una risoluzione di "+screen.width+" x "+screen.height);
}
</script>
</head>
<body onLoad="apriFinestra();">
<a href="#" onClick="saluta();">clicca per ricevere un saluto</a> <br/><br/>
<script type="text/javascript">
scriviRisoluzione();
</script>
</body>
</html>
Nell'esempio che abbiamo esaminato or ora sono presenti tre funzioni, due delle quali vengono richiamate attraverso l'utilizzo di eventi, mentre la terza viene richiamata all'interno della pagina.
Da notare inoltre che l'evento "onLoad" viene eseguito subito dopo il completamento della pagina, dunque una funzione richiamata all'interno del BODY della pagina verrà "lanciata" prima della funzione richiamata dall'evento onLoad. Nel nostro esempio la funzione "scriviRisoluzione()" viene lanciata prima della funzione "aprifinestra()".
È evidente che tramite un utilizzo oculato di funzioni ed eventi è possibile creare delle pagine molto ordinate, con il codice JavaScript suddiviso in molteplici parti, "azionato" soltanto quando richiamato.
##############
# In Aggiornamento#
##############
