Introduzione a JavaScript
Part 1
Introduzione a JavaScript
Part 1
JavaScript é un nuovo linguaggio di scripting. Gli scripts scritti in JavaScript possono essere incapsulati nelle pagine HTML. Con JavaScript é possibile rispondere alle azioni dell'utente ( ad esempio un inserimento in un form). Questo accade senza una trasazione sulla rete. In genere quando un utente inserisce un dato in una form é necessario trasmetterlo al server che lo elabora e restituisce una risposta. L'inserimento é controllato dal client e puó essere trasmesso dopo che sia stato controllato. In pratica é il browser che si occupa dell'elaborazione dei JavaScripts e non piú il Server.
Attenzione! JavaScript non é Java. Java é un linguaggio di programmazione molto piú complesso di JavaScript.
Si possono eseguire con Netscape Navigator 2.0 e versioni successive e con Internet Esplorer 3.0 e con tutti gli altri browser che li supportano.
Per capire come si possono implementare all'interno delle pagine HTML ecco un esempio:
Questo script scrive una riga di testo in un documento HTML.
<html>
<head>
My first JavaScript!
</head>
<body>
<br>
This is a normal HTML document.
<br>
<script language="JavaScript">
document.write("This is JavaScript!")
</script>
<br>
Back in HTML again.
</body>
</html>
... produce:
This is a normal HTML document.
Back in HTML again.
Le Functions sono dichiarate tra i tags <head> dell' HTML. Le Functions sono chiamate dagli eventi generati dall'utente. É per questo che é ragionevole inserirle tra i tags <head> visto che sono caricati dal browser prima che l'utente possa fare qualcosa che provochi la chiamata ad una funzione. Gli Scripts possono essere inseriti tra i tags di commento <!-- --> in questo modo i vecchi browsers non visualizzeranno il sorgente.
<html>
<head>
<script language="JavaScript">
function pushbutton() {
alert("Hello!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="pushbutton()">
</form>
</body>
</html>
Se vuoi testare lo Script premi il bottone ...
Questo scripts crea un bottone che se premuto apre un finestra messaggio 'Hello!'
La function é caricata e trattenuta in memoria. Il bottone é stato creato con i tags (HTML) standard dei form. É stato inserito un nuovo elemento nel tag <input> , 'onclick'. Questo indica al browser quale funzione deve essere richiamata quando il bottone viene premuto. La function 'pushbutton()' é dichiarata nell' header. Quando il bottone viene premuto questa function viene eseguita. C'é un altro nuovo elemento in questo script- il metodo 'alert'. Anche questo metodo é dichiarato in JavaScript - occorre solamente richiamarlo. Esistono diversi metodi che si possono richiamare, noi ne mostreremo alcuni, é presente una lista completa nel sito Netscape.
Come leggere gli input inseriti dall'utente
nelle forms...
<html>
<head>
<script language="JavaScript">
<!-- hide script from old browsers
function getname(str) {
alert("Hi, "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
Ora si puó testare lo scipt ..
Please enter your name:
I commenti cominciano subito dopo il tag
<script> e terminano subito prima del tag </script>.
I vecchi browser ignorano i due tags <script> e
</script> perché non li conoscono e naturalmente il
commento in quanto tale. In questo documento quanto l'utente
inserisce il nome nel form, il metodo 'onBlur' inserito nel tag
<input> indica al client quale funzione richiamare. La
function 'getname(str)' sará chiamata quando si 'lascia' il
campo della form o quando si preme enter dopo aver inserito
qualche cosa. La function riceve la stringa inserita tramite il
comando 'getname(this.value)'. 'This.value' indica il valore
inserito nel campo della form.
Implementiamo ora la function data nel nostro script. É possibile fare visualizzare dal client le ultime modifiche al documento. In questo modo non sará necessario cambiare la data nel sorgente del documento HTML ogni volta che lo si modifica.
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="JavaScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
Con la versione beta2 di Netscape 2.0 occorreva scrivere lastmodified. Ora con le nuove versioni il metodo é cambiato in lastModified. É bene quindi fare attenzione a come si scrive il codice JavaScript che é case sensitive.
Ultimo aggiornamento: