PDA

View Full Version : Corso Javascript


Bran Tyrewood
15-12-2002, 23:16
Prima di tutto direi di spiegare brevemente cosa è il Javascript ed a cosa può servire impararlo.

Innanzitutto partiamo col dire che il Javascript è un linguaggio di scripting client-side ed è anche un linguaggio interpretato. Cosa significa ciò?

Linguaggio di scripting “interpretato” significa che gli script in js vengono interpretati ed eseguiti riga per riga da un motore di scripting che nel nostro caso non è altro che un interprete presente nel nostro Browser (Netscape, Internet Explorer, Opera…). Quindi non vi è bisogno di alcun compilatore, invece necessario in tutti i linguaggi “compilati” (come nel caso del C++, Pascal…).
Inoltre è definito client-side perché viene eseguito direttamente dal nostro browser, mentre i linguaggi server-side (PhP, Asp…) vengono eseguiti dal web server.

A questo punto urge sfatare una credenza abbastanza diffusa e cioè il rapporto tra javascript e java. Molte persone ho notato pensano che il primo sia una versione semplificata del secondo. Niente di più sbagliato :)
In realtà sono dei linguaggi che hanno ben poco in comune l’uno con l’altro. Il Java è un linguaggio di programmazione compilato (di proprietà della Sun Microsystems) , orientato agli oggetti. Mentre il Javascript, creato originariamente da Netscape come abbiamo già detto è un linguaggio di scripting interpretato.

Un’altra caratteristica molto importante del Javascript è che è un linguaggio “HTML Embedded”.
Questo sta a significare che i nostri script potranno tranquillamente essere inseriti all’interno del codice HTML (come nelle prossime lezioni vedremmo).

Ma a cosa ci può servire il Javascript in un sito?
Beh se realizzate una pagina in html vi rendete facilmente conto che il sito da voi realizzato è "statico" nel senso che non permette una vera interazione con gli utenti.
Quindi l'utilità principale del js, oltre che abbellire e rendere più interessanti le vostre pagine, è proprio questa: dotarle di una maggiore interattività con l'utente.
Quindi con l'ausilio di Javascript potremmo realizzare delle pagine che si ricordino delle precedenti visite degli utenti, dei carrelli per l'acquisto di vari prodotti, di form per il passaggio di dati, di finestre popup che si aprono dopo una determinata azione dell'utente, di menu dinamici ecc ecc
...il principale limite quando acquisirete padronanza con il linguaggio sarà la vostra creatività :p

Ora dopo tutta questa teoria direi di passare subito al primo vostro script, per non appesantire troppo la prima lezione.


<html>
<head>
<title>Il mio primo script Js</title>
</head>

<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>


Ora copiate il precedente codice in un nuovo documento di testo (per esempio un file con estensione .txt) e rinominatelo in prova.htm.
Ora se avete fatto tutto correttamente dovreste leggere nella vostra pagina la scritta “Hello World!”

Ed ora passiamo a spiegare il precedente script.
Innanzitutto premetto che in questo corso dò per scontata la conoscenza del HTML e qindi non spiegherò il significato delle varie Tag HTML se non in rari casi.
Quindi la parte che ci interessa è quella racchiusa tra le tag <script></script>.
Analizziamo riga per riga…

<script type="text/javascript">….</script>
Questa riga di codice dice al browser che ci troviamo di fronte ad uno script realizzato in Js e quindi i comandi successivi andranno interpretati dal motore di scripting.
In realtà potreste trovare altri tipi di dichiarazioni, una molto frequente è la seguente:
<script language=”JavaScript1.3”>....</script>
In questo caso come potete vedere viene anche indicata la versione di javascipt con cui avete realizzato lo script (l’ultima versione di Js è la 1.5).
Io sinceramente ho sempre usato la prima dichiarazione, ma nulla vi vieta di usare la seconda.

<!--
....
//-->
Se conoscete un pò di HTML avrete sicuramente riconosciuto i tipici simboli che caratterizzano i commenti in HTML. Infatti questi simboli vanno messi proprio per nascondere il codice javascript.
Questo viene fatto per vari motivi, uno fra questi è che i vari motori di ricerca non riecono a leggere/interpretare i linguaggi di scripting e quindi gli nascondiamo la parte di codice che cmq non riuscirebbero ad interpretare.

document.write("Hello World!");
Ed eccoci qua alla parte principale del nostro script di oggi...
Questa riga ci permette di stampare a video la stringa riportata entro le “”.
Il javascript è un linguaggio orientato agli oggetti. In questo caso document è un oggetto, mentre write() è un metodo.
Un “oggetto” è costituito da codice di programmazione e dati che possono essere trattati come una singola unità o un singolo componente.
Le singole righe di linguaggio di programmazione sono definite “istruzioni”. Ed i gruppi di istruzioni correlate ed associate ad un oggetto possono essere definite “metodi”.

Come vedete la riga di codice si conclude con un ;
Anche se ommettendolo non dovreste ricevere alcun errore è consuetudine fare finire ogni istruzione con il punto e virgola.


Spero che questa prima lezione sia risultata abbastanza chiara.Ad ogni modo se avete dubbi/problemi non esitate a chiedere.

Vi lascio con una variante al precedente script…


<html>
<head>
<title>Il mio primo script Js</title>
</head>

<body>
<script type="text/javascript">
<!--
alert("Hello World!");
//-->
</script>
</body>
</html>

Bran Tyrewood
21-12-2002, 12:15
Oggi tratteremo vari argomenti fra i quali l'inserimento di uno script Js all'interno di un documento html.

So che questa fase teorica introduttiva e' un pò noiosa, ma purtroppo e' anche necessaria :)

Vi sono 2 modi per inserire uno script js all'interno di un documento html:

1. Inserimento tramite un file esterno:
In questo caso scriveremo il nostro script in un file esterno alla pagina html in cui dovrà essere inserito e salveremo tale file con estensione .js
Poi all'interno della pagina html andremo a richiamare il file esterno tramite l'attributo SRC.
Facciamo un esempio pratico...
Vogliamo fare apparire sullo schermo la scritta "tutorial js".
Per prima cosa creiamo il file che conterrà il codice javascript:
Creiamo un nuovo file prova.txt apritelo e scriveteci all'interno
document.write("tutorial js")
Rinominate il file prova.txt in prova.js

Come avete visto nel file che conterrà il vostro codice javascript non va inserita alcuna tag html (come ad esempio la tag <script ... >), altrimenti riceverete un errore.

Ora che abbiamo creato il file prova.js creiamo il documento html.
Create un nuovo file pagina.txt

<html>
<head>
<title>Esperimento javascript</title>
<script type="text/javascript" src="prova.js"> //Richiamo del file esterno
</script>
</head>
<body>
</body>
</html>

Salvate il tutto e rinominatela in pagina.htm

Come vedete nell'attributo src viene specificato il file in cui e' contenuto il codice js.
In questo caso non vi e' indicazione del percorso per raggiungere il file perche' i 2 file stavano all'interno della stessa dir.
Ma nel caso in cui il file prova.js stia in una dir diversa da quella della pagina.html e' necessario specificare il percorso all'interno dell'attributo src
(es: src="c:\javascript\prova.js")

Questo metodo ha vari pregi:
- Rendono il documento HTML più chiaro
- Permettono di utilizzare tale script per più documenti HTML. Mettiamo che nel vostro sito dobbiate utilizzare uno script in ogni pagina del sito. Invece di ricopiarlo in ogni pagina, basta che lo richiamiate in ogni pagina. Questo rende molto più semplici le modifiche allo script in quanto non dovrete modificare lo script in ogni pagina, ma solo quello nel file esterno.
- Permette di nascondere il vostro codice in modo che altre persone non possano copiarlo

2. Inserimento diretto all'interno della pagina HTML:
In questo caso abbiamo 2 possibilita'. Possiamo inserire lo script js all'interno delle tag <head></head> oppure all'interno delle tag <body></body>
Io vi consiglio, quando possibile, di utilizzare la prima soluzione in quanto permette di tenere separato il codice js dal codice html e quindi rende il tutto più comprensibile

Inoltre vi e' una terza possibilita' utile solamente a testare singole istruzioni.
Per fare ciò basta usare lo pseudo-protocollo javascript: all'interno dell'URL del browser seguito dal codice javascript da testare.
Ecco alcuni esempi:

javascript:5+2
javascript:document.write("Hello World!")
javascript:document.write(document.lastModified)


NB:Sembra che al forum non piaccia la parola javascript ed a volte me la scrive staccata (java staccato da script). In realtà va scritta sempre unita :look:

Per testarli basta che li copiate nella barra degli URL del vostro browser e refreshate la pagina



I Commenti:
Per coloro che hanno già programmato in altri linguaggi non dovrebbero esserci problemi.
I commenti servono a spiegare determinate porzioni di codice. Sono molto importanti (maggiormente negli script/programmi più complessi) sia per rendere possibile l'interpretazione dello script ad un soggetto esterno, ma anche per consentire a chi ha fatto lo script di capirlo senza difficolta' anche dopo mesi che non ci lavora sopra.

Ovviamente quello che viene scritto dopo un commento non viene condiderato dall'interprete js.

Javascript accetta due tipi di commenti:
// Commento mono riga
/*
Commento multi riga
*/

Ecco un esempio:

<script type="text/javascript">
/* Il seguente estratto serve solo
* a mostrare il funzionamento dei
* commenti mono e multi riga
* Questo e' un commento multi riga
*/
rand=(Math.floor(Math.random()*subject.length)); // randomizza Domanda
document.modulo.materia.value=(materia[randMateria]); //Materia
document.modulo.domanda.value=(subject[rand][0]); //Domanda
document.modulo.risp1.value=(subject[rand][1]); // Risposta 1
document.modulo.risp2.value=(subject[rand][2]); // Risposta 2
document.modulo.risp3.value=(subject[rand][3]); // Risposta 3
document.modulo.risp4.value=(subject[rand][4]); // Risposta 4
</script>


Dire che per questa lezione può essere sufficiente...preparatevi che dalla prossima inizieremo a fare qualche piccolo scriptino :)