Guida Javascript

« Older Newer »

Trad™

Posted on 22/2/2011, 17:37

.:Divinità:.

Group: Precursore

Posts: 26,519

Status: Anonymous

JavaScript è un linguaggio di scripting orientato agli oggetti comunemente usato nei siti web. Fu originariamente sviluppato da Brendan Eich della Netscape Communications con il nome di Mocha e successivamente di LiveScript, ma in seguito è stato rinominato "JavaScript" ed è stato formalizzato con una sintassi più vicina a quella del linguaggio Java di Sun Microsystems. JavaScript è stato standardizzato per la prima volta tra il 1997 e il 1999 dalla ECMA con il nome ECMAScript. L'ultimo standard, del dicembre 1999, è ECMA-262 Edition 3, e corrisponde a JavaScript 1.5. È anche uno standard ISO. La caratteristica principale di JavaScript è quella di essere un linguaggio interpretato. Il codice quindi non viene compilato bensì c'è un interprete (in JavaScript lato client esso è incluso nel browser che si sta utilizzando) che esegue riga per riga, a tempo di esecuzione, quanto trascritto nello script. JavaScript presenta quindi tutte le caratteristiche di un normale linguaggio interpretato (e di conseguenza i suoi vantaggi e svantaggi) con una sintassi analoga a quella di un linguaggio compilato (essa è relativamente simile a quella del C, del C++ e del Java), quindi con la possibilità di utilizzare funzionalità tipiche dei linguaggi di programmazione ad alto livello (strutture di controllo, cicli, etc.) e con in più anche la potenzialità di definire strutture più complesse, vicine a quelle adottate nei normali linguaggi object oriented (creazione di prototipi, istanziazione di oggetti, costruttori). Il principale tag del linguaggio di script Javascript è il tag script. Un documento può presentare in più parti la definizione del tag SCRIPT. Dopo aver parlato in generale degli script, occorre passare alla pratica e vedere come inserirli nella pagina HTML. La spiegazione risulta abbastanza complessa soprattutto perché Javascript ormai si integra così bene in HTML da non avere più spazi definiti, ma è possibile trovarlo ovunque.

L'HTML prevede un tag apposito per gli script, e tale tag é:

SPOILER (click to view)

Tali tag, possono essere in numero variabile, l'unica attenzione sta nel chiuderli ogni volta che vengono aperti.
I browser ricevono le pagine HTML con tutto il contenuto, quando si incontra il tag <script> questo viene eseguito come tutti gli altri tag, dall'alto in basso, ma il suo contenuto è interpretato secondo un codice diverso: in tal modo se il browser comprende il codice, questo viene eseguito, e se si incontra un errore nell'esecuzione dello stesso i casi sono due:
1. la pagina viene visualizzata, ma il codice errato non viene eseguito;
2. se il codice genera un loop (cioé un ciclo infinito) la pagina resta bianca o è visualizzata parzialmente perché l'esecuzione dall'alto in basso del codice HTML è momentaneamente interrotta.
Così come scritto, però, il tag <script> non è completo perché i linguaggi di scripting sono diversi, allora occorre mettere anche la specificazione del linguaggio ed è:

SPOILER (click to view)

Ciò potrebbe bastare, ma negli ultimi riferimenti, soprattutto da parte di Netscape, si consiglia vivamente di indicare anche la versione di Javascript che si adopera, soprattutto perché l'evoluzione del linguaggio è continua e non sempre assicura la compatibilità con i vecchi browser. In tal modo si occulta il codice ai browser che non possono gestire gli aggiornamenti del linguaggio (per le versioni di Javascript si faccia riferimento alla tabella nella lezione sulle versioni JavaScript). Alla luce di quanto detto, il precedente script può essere considerato valido per la versione 1.0 di Javascript, e quindi per tutti i browser, mentre uno script del genere:

SPOILER (click to view)

diventa leggibile solo da Explorer 4.0 o da versioni piu recenti. Vi chiederete anche come fare a conoscere tutte le compatibilità: ebbene non c'è nessun programma che aiuti in ciò, occorre conoscerle a fondo oppure usare un metodo empirico: testare le pagine su diversi browser e segnalare le incompatibilità, se queste dipendono dalla versione di Javascript, mascherarle con l'indicazione della versione.

Ecco alcuni codici per voi

Accettare le condizioni di un form cliccando sulla casellina:

CODICE

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function submitit(){
var accetto = document.profilo.casella.checked;
if (accetto!=true){
alert("Non hai accettato le condizioni.");
return false;
}
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER><H1>Modulo di registrazione</H1>
</CENTER>
<FORM NAME="profilo" ACTION="altra.htm" method="post" ONSUBMIT="return submitit()">
Accetta le condizioni: <INPUT TYPE="checkbox" NAME="casella">
<BR>
<INPUT TYPE="submit" VALUE="Invia" NAME="submit">
<INPUT TYPE="reset" VALUE="Cancella" NAME="reset">
</FORM>
</BODY>
</HTML>

Album Fotografico:

CODICE

Aprire una finestra all'uscita:

CODICE

Aprire una finestra al centro dello schermo:

CODICE

Avvertimento al passaggio del mouse:

CODICE

<a href="http://www.indirizzo.com" onMouseOver="window.alert('Quello che vuoi nella finestra','')">Testo qualunque</a>

Inserire un calendario nel proprio sito:

CODICE

<SCRIPT LANGUAGE="JavaScript">





</SCRIPT>

Caricare una pagina una nuova finestra:

CODICE

<SCRIPT language=JavaScript>
window.name = 'salve';
window.open('salve.html','nuova','toolbar=no,location=no,directories=no, status=no,menubar=no,title=no,scrollbars=no,resizable=no,copyhistory=no,width=300,height=200');
</SCRIPT>

Casella con testo scorrevole:

CODICE

script language="javascript">

</script>
<script>

</script>

In questo codice dove sta scritto:

SPOILER (click to view)

msg = "Qui scrivete il testo che volete che scorra mentre i visitatori guardano"
ctrlwidth = "75" // Modificate questo numero se volete che la finestra di visualizzazione sia piu grande(msg,ctrlwidth);

Contatore delle visite:

CODICE

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Far suonare il Pc quando il mouse si sposta su un'oggetto:

CODICE

<html>
<head>
<script language="JavaScript">


</script>
</head>
<body>
<A HREF="#" onMouseOver="playSound(0)" onMouseOut="stopSound(0)">Move mouse over to play sound</A>
</body>
</html>

Pulsante che chiude la finestra sulla quale si Trova:

CODICE

Salutate l'utente in base all'orario:

CODICE

<SCRIPT LANGUAGE=JavaScript>

var today = new Date();

var ora=today.getHours();
document.write ("<FONT face=verdana size=3>")
if (ora>00 && ora<12){
document.write ("Buon giorno!")
}
if (ora>=12 && ora<=19){
document.write ("Buon pomeriggio!")
}

if (ora>19 && ora<24){
document.write ("Buona sera!")
}
document.write ("</FONT>")
</SCRIPT>

Scrivi con Javascript:

CODICE

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language=Javascript>
function scrivi(){
document.write("ciao!");
return false;
}
</SCRIPT>
</HEAD>
<BODY>
<script>scrivi qui()</script>
</BODY>
</HTML>

Agggiunere hai preferiti:

CODICE

<a href="javascript:window.external.AddFavorite('http://www.tuolink.com/', 'My Site Title');">Aggiungi ai preferiti!</a>

Un'orologio in JavaScript sempre ben aggiornato:

CODICE

Visualizzare un testo scorrevole:

CODICE

<SCRIPT language=JavaScript1.2>

var marqueewidth=350
var marqueeheight=54
var speed=6

var marqueecontents='<IMG SRC="immagine.gif"align=middle hspace=10><B><font face="Arial"> Benvenuto in Pcarena</font></B>'

if (document.all)
document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}

window.onload=regenerate2
</SCRIPT>

Web

0 replies since 22/2/2011, 17:37 5 views