Ultima modifica da un moderatore:
Siccome ho visto che nessuno ha fatto una guida dove si trattava l'argomento Javascript .. allora mi sà che lo faccio io 
Browser non compatibili
Potrebbero essere utilizzati anche browser non compatibili con Javascript oppure quelli in cui Javascript è disabilitato (è possibile con Netscape). In questo caso ci viene in aiuto il tag <NOSCRIPT></NOSCRIPT> che può contenere testo e grafica alternativi oppure un reindirizzamento in pagine statiche, che non adoperano Javascript, mediante la sequenza:
SCRIPT ESTERNI
In quest'ultimo caso (è anche quello più semplice a spiegarsi) lo script è salvato in un file con estensione .js. Viene richiamato con l'attributo src del tag script:
dove la specificazione di Language è facoltativa, poiché la stessa estensione del file basta a dimostrare il linguaggio adoperato, ma si consiglia proprio per identificare la versione. Il nome del file può essere indicato con un URL relativo o assoluto.
Tale file esterno viene eseguito all'interno della pagina HTML, per cui lo script viene solo letto come file di testo, trasferito nell'HTML nella posizione di richiamo e qui eseguito. Per tale motivo il file va salvato come testo ASCII, senza caratteri di controllo e senza tag HTML o elementi di altri linguaggi per non generare errori, e si può adoperare un qualsiasi editor molto semplice (in Windows è consigliato NotePad o Blocco Note).
Il vantaggio di usare file esterni è immenso soprattutto perché apporta la caratteristica della modularità per cui uno script che ricorre di frequente (ad esempio il rollover) può essere scritto una sola volta e richiamato in qualsiasi pagina HTML quando serve, ma tutto ciò ha un prezzo: funziona solo con Netscape 3.0 ed Explorer 4.0 e nelle versioni successive.
Scrivere con Blocco Note il seguente comando: alert('Sono un file esterno'), e salvarlo con il nome prova.js;
Scrivere in un altro file il seguente codice HTML:
e salvarlo nella stessa directory del file Javascript;
Caricare la pagina HTML in un browser.
SCRIPT INTERNI
Se lo script è all'interno del documento, può essere immesso sia nella sezione di intestazione (tra i tag <HEAD></HEAD>) sia in quella del corpo del documento (tra i tag <BODY></BODY>). Occorre tener presente che la pagina HTML viene eseguita in ordine sequenziale: dall'alto in basso, per cui la differenza tra le due alternative esiste: lo script dell'intestazione viene caricato prima degli altri, quello nella sezione body, invece, viene eseguito secondo l'ordine di caricamento.
Cosa cambia tutto ciò? Bisogna considerare che una variabile o qualsiasi altro elemento di Javascript può essere richiamato solo se caricato in memoria: tutto ciò che si trova nell'intestazione è quindi visibile agli altri script, quello che si trova nella sezione BODY è visibile agli script che lo seguono. La scelta dipende anche da altri fattori (come la creazione della pagina HTML in maniera dinamica), ma sarà poi l'esperienza a suggerirli.
Esempio:
Scrivere il seguente codice HTML:
Provare il codice e verificare la sequenza di esecuzione degli script.
COMMENTI
I commenti sono parti del programma che non vengono lette dall'interprete e che, quindi, servono a spiegare e a chiarire. Questi sono racchiusi tra barre e asterischi come nell'esempio sotto riportato:
Il commento può essere posto su più righe o su una riga singola, mentre non è accettato dall'interprete il commento annidato.
Un altro tipo di commento è la doppia barra, presa a prestito dal linguaggio C++, ma è valida solo per commenti posti su una singola riga, anche se non la occupano per intero:
I commenti Javascript non possono essere inseriti al di fuori dei tag che individuano lo script, altrimenti HTML li considererà come parte del testo, e viceversa non si possono utilizzare i tag di commenti HTML all'interno dello script. L'unico commento ammissibile è quello che consente di racchiudere tutti gli script nei tag di commento di HTML, facendoli aprire dopo il tag discript e chiudere prima della chiusura del tag:
in tal modo si maschera il codice javascript ai vecchi browser che non lo leggono e si evita che l'HTML lo possa considerare come testo e, quindi, visualizzare. Tuttavia occorre tenere presente due accortezze:
alcuni browser non riconoscono il commento e visualizzano lo script;
alcuni browser, soprattutto Netscape nelle versioni più vecchie, hanno difficoltà a gestire il segno --> di fine commento, per cui conviene posizionare anche un commento Javascript (//) alla sequenza -->.
SPAZI BIANCHI
Javascript non bada agli spazi bianchi, tranne che per quelli che si trovano nelle stringhe, per cui si possono omettere o anche aumentare. Il loro uso, tuttavia, con l'identazione aumenta la leggibilità del programma per cui sono vivamente consigliati.
APICI[/CODE]
Importanti sono gli apici, sia singoli (' ') che doppi (" ").
I doppi apici si adoperano per racchiudere parti di codice Javascript, e, insieme a quelli singoli, a racchiudere anche le stringhe (sequenze di caratteri), per cui occorre fare attenzione ad annidare due stringhe racchiuse da apici simili, come ad utilizzare i doppi apici per le stringhe se questi già servono a racchiudere codice Javascript.
Se si desidera che in una stringa appaiano apici doppi o singoli come parte integrante della stringa stessa, si fanno precedere da una barra rovesciata (\).
Uno degli errori che si commette di frequente, è proprio quello di non utilizzare correttamente gli apici. Ad esempio il comando:
sembra essere scritto correttamente, ma se eseguito, il browser ne bloccherà l'esecuzione. Netscape mostrerà questo errore:
più laconico Explorer, che indica solo: Previsto')'. Si proseguirà oltre, ma l'errore non sarà corretto finché non si scriverà
MODALITA' DI ESECUZIONE
Dopo aver visto le forme tradizionali di interfacciamento del codice Javascript con il codice HTML, effettuiamo un riassunto dei concetti sparsi qua e là nelle lezioni precedenti rispetto a questo argomento. La lezione potrebbe apparire un poco fumosa perché andrà molto per voli pindarici, in quanto la teoria farà la parte da leone, ma a chi interessano, questi concetti possono essere ripresi in seguito e certamente appariranno più chiari.
Le istruzioni in Javascript possono essere eseguite in diverso modo:
all'interno degli script, individuati dai tag <SCRIPT>, in maniera sequenziale, per cui l'esecuzione è automatica;
caricandoli da file esterni;
in seguito all'attivazione di un evento (handler) come un click del mouse o la pressione di un tasto (si vedranno in seguito gli eventi);
in luogo di un link (a partire da Netscape 3.0) nella forma: <A href="Javascript:comando">
valori Javascript possono essere richiamati dinamicamente dall'HTML includendoli tra i caratteri &{ e };% ad esempio la larghezza di una tabella può essere ricavata in rapporto ad un valore javascript nella forma width="&{barWidth};%"
logicamente l'utilizzo delle quattro opzioni varia secondo l'obiettivo da raggiungere. Così se il codice Javascript va eseguito in maniera sequenziale basta inserire uno script, mentre se va eseguito in seguito al realizzarsi di uno evento, occorre operare con un handler combinato ad una funzione.
Esempio :
Scrivere il seguente codice e notare come gli script vengano eseguiti e in seguito a quali eventi:
_______________________________________________
Spero che questa guida sia comprensibile , se non avete capito qualcosa .. Inviatemi un mp con l'argomento o il concetto che volete approfondire ..
+1 non vietato
Propongo rilievo siccome non vedo altre guide su javascript ..
Browser non compatibili
Potrebbero essere utilizzati anche browser non compatibili con Javascript oppure quelli in cui Javascript è disabilitato (è possibile con Netscape). In questo caso ci viene in aiuto il tag <NOSCRIPT></NOSCRIPT> che può contenere testo e grafica alternativi oppure un reindirizzamento in pagine statiche, che non adoperano Javascript, mediante la sequenza:
Codice:
<noscript>
<meta http-equiv refresh content="0; url=altrapagina.htm">
</noscript>In quest'ultimo caso (è anche quello più semplice a spiegarsi) lo script è salvato in un file con estensione .js. Viene richiamato con l'attributo src del tag script:
Codice:
<SCRIPT Language=Javascript src="nomefile.js"><!--
//--></SCRIPT>Tale file esterno viene eseguito all'interno della pagina HTML, per cui lo script viene solo letto come file di testo, trasferito nell'HTML nella posizione di richiamo e qui eseguito. Per tale motivo il file va salvato come testo ASCII, senza caratteri di controllo e senza tag HTML o elementi di altri linguaggi per non generare errori, e si può adoperare un qualsiasi editor molto semplice (in Windows è consigliato NotePad o Blocco Note).
Il vantaggio di usare file esterni è immenso soprattutto perché apporta la caratteristica della modularità per cui uno script che ricorre di frequente (ad esempio il rollover) può essere scritto una sola volta e richiamato in qualsiasi pagina HTML quando serve, ma tutto ciò ha un prezzo: funziona solo con Netscape 3.0 ed Explorer 4.0 e nelle versioni successive.
Scrivere con Blocco Note il seguente comando: alert('Sono un file esterno'), e salvarlo con il nome prova.js;
Scrivere in un altro file il seguente codice HTML:
Codice:
<html>
<head>
<script src="prova.js"></script>
</head>
<body>
</body>Caricare la pagina HTML in un browser.
SCRIPT INTERNI
Se lo script è all'interno del documento, può essere immesso sia nella sezione di intestazione (tra i tag <HEAD></HEAD>) sia in quella del corpo del documento (tra i tag <BODY></BODY>). Occorre tener presente che la pagina HTML viene eseguita in ordine sequenziale: dall'alto in basso, per cui la differenza tra le due alternative esiste: lo script dell'intestazione viene caricato prima degli altri, quello nella sezione body, invece, viene eseguito secondo l'ordine di caricamento.
Cosa cambia tutto ciò? Bisogna considerare che una variabile o qualsiasi altro elemento di Javascript può essere richiamato solo se caricato in memoria: tutto ciò che si trova nell'intestazione è quindi visibile agli altri script, quello che si trova nella sezione BODY è visibile agli script che lo seguono. La scelta dipende anche da altri fattori (come la creazione della pagina HTML in maniera dinamica), ma sarà poi l'esperienza a suggerirli.
Esempio:
Scrivere il seguente codice HTML:
Codice:
<html>
<head>
<script language="Javascript">
x=1;
alert('TESTA='+x);
</script>
</head>
<body>
<script language="Javascript">
x++;
alert('CORPO='+x);
</script>
<script language="Javascript">
x++;
alert('CORPO='+x);
</script>
</body>COMMENTI
I commenti sono parti del programma che non vengono lette dall'interprete e che, quindi, servono a spiegare e a chiarire. Questi sono racchiusi tra barre e asterischi come nell'esempio sotto riportato:
Codice:
/*commento*/Un altro tipo di commento è la doppia barra, presa a prestito dal linguaggio C++, ma è valida solo per commenti posti su una singola riga, anche se non la occupano per intero:
Codice:
int x: //commento
Codice:
<script language="JavaScript">
<!--
alert("Welcome!");
//-->
</script>alcuni browser non riconoscono il commento e visualizzano lo script;
alcuni browser, soprattutto Netscape nelle versioni più vecchie, hanno difficoltà a gestire il segno --> di fine commento, per cui conviene posizionare anche un commento Javascript (//) alla sequenza -->.
SPAZI BIANCHI
Javascript non bada agli spazi bianchi, tranne che per quelli che si trovano nelle stringhe, per cui si possono omettere o anche aumentare. Il loro uso, tuttavia, con l'identazione aumenta la leggibilità del programma per cui sono vivamente consigliati.
APICI[/CODE]
Importanti sono gli apici, sia singoli (' ') che doppi (" ").
I doppi apici si adoperano per racchiudere parti di codice Javascript, e, insieme a quelli singoli, a racchiudere anche le stringhe (sequenze di caratteri), per cui occorre fare attenzione ad annidare due stringhe racchiuse da apici simili, come ad utilizzare i doppi apici per le stringhe se questi già servono a racchiudere codice Javascript.
Se si desidera che in una stringa appaiano apici doppi o singoli come parte integrante della stringa stessa, si fanno precedere da una barra rovesciata (\).
Uno degli errori che si commette di frequente, è proprio quello di non utilizzare correttamente gli apici. Ad esempio il comando:
Codice:
alert('Questo sito e' in costruzione')
Codice:
missing ')' after argument list.
alert('Questo sito e ' in costruzione')
Codice:
alert('Questo sito e \' in costruzione')Dopo aver visto le forme tradizionali di interfacciamento del codice Javascript con il codice HTML, effettuiamo un riassunto dei concetti sparsi qua e là nelle lezioni precedenti rispetto a questo argomento. La lezione potrebbe apparire un poco fumosa perché andrà molto per voli pindarici, in quanto la teoria farà la parte da leone, ma a chi interessano, questi concetti possono essere ripresi in seguito e certamente appariranno più chiari.
Le istruzioni in Javascript possono essere eseguite in diverso modo:
all'interno degli script, individuati dai tag <SCRIPT>, in maniera sequenziale, per cui l'esecuzione è automatica;
caricandoli da file esterni;
in seguito all'attivazione di un evento (handler) come un click del mouse o la pressione di un tasto (si vedranno in seguito gli eventi);
in luogo di un link (a partire da Netscape 3.0) nella forma: <A href="Javascript:comando">
valori Javascript possono essere richiamati dinamicamente dall'HTML includendoli tra i caratteri &{ e };% ad esempio la larghezza di una tabella può essere ricavata in rapporto ad un valore javascript nella forma width="&{barWidth};%"
logicamente l'utilizzo delle quattro opzioni varia secondo l'obiettivo da raggiungere. Così se il codice Javascript va eseguito in maniera sequenziale basta inserire uno script, mentre se va eseguito in seguito al realizzarsi di uno evento, occorre operare con un handler combinato ad una funzione.
Esempio :
Scrivere il seguente codice e notare come gli script vengano eseguiti e in seguito a quali eventi:
Codice:
<html><head></head>
<body>
<script language="javascript"><!--
alert('script');
//--></script>
<a href="#" onmouseover="alert('hai passato il mouse')">passa il mouse</a>
<a href="javascript:alert('hai cliccato')">clicca qui</a>
</body></html>Spero che questa guida sia comprensibile , se non avete capito qualcosa .. Inviatemi un mp con l'argomento o il concetto che volete approfondire ..
+1 non vietato
By D4n13l_
Propongo rilievo
siccome non vedo altre guide su javascript ..