Tutorial Javascript

Operatori/Eventi

 

Io non ne so molto di Javascript, infatti questo tutorial è stato realizzato dal mio amico Gogeta Ssj3, che ringrazio moltissimo per l'aiuto fornito.

Visitate il suo ottimo sito !

 

[ Le funzioni] [ Selezione/Iterazione ] [ Oggetti ] [ Operatori/Eventi ]

 

Ecco qua una cosa indispensabile per realizzare JavaScript !!! Gli operatori per eseguire le operazioni : addizione, sottrazione, ecc. Sembra una cosa banale, ma è bene specificare i simboli da usare. Li trovate nella tabella qui sotto :


Operatore Operazione Esempio
+ addizione 4+2=6
- sottrazione 4-2=2
/ divisione 4/2=2
* moltiplicazione 4*2=8
% modulo (resto della divisione) 10%3=1
= assegnazione var a=2
== uguaglianza if (a==2)
!= disuguaglianza if (a!=2)
&& AND logico if (a==2 && b==3)
|| OR logico if (a==2 || b==3)
+ concatenazione alert("punti :"+a)


Con i primi 5 non credo (SPERO ^__^) non avete problemi, con l'= neanche (serve per dare i valori alle variabili). ==, !=, &&, || si usano solo nelle condizioni (IF, FOR, WHILE, DO-WHILE) e + invece si usa anche come operatore di concatenazione. Ad esempio :


alert("Sei a "+punti+" punti ! ") ;


visualizzerà un alert con la scritta "Sei a XXX punti !" dove XXX è il valore della variabile "punti".


Vediamo ora gli eventi. Anche questi sono indispensabili per realizzare script di qualsiasi genere. Infatti servono per richiamare le funzioni quando succede qualcosa (al caricamento di una pagina, al click di un tasto, al passaggio del mouse su un'immagine, ecc.) ecco ancora una tabella con i principali eventi :


evento descrizione dove usarlo
onclick Il più usato... si attiva al click su un bottone o su un qualsiasi collegamento ipertestuale. <input type="button">
<a href="...">
onload Si attiva al caricamento della pagina. <body>
onmouseover Si attiva quando si passa sopra un'immagine con collegamento o un testo con collegamento ipertestuale. <a href="...">
onmouseout Si attiva quando si toglie il mouse dall'immagine con collegamento o dal testo sempre con collegamento <a href="...">
onchange Si attiva quando si cambia opzione nei menu a tendina. <input type="select">


Ce ne sono molti altri... ma non credo che ve ne serviranno molti, di solito si usano questi . Dato che onclick l'abbiamo già usato parecchie volte finora, facciamo un esempio con onmouseover / onmouseout e uno con onchange :


<img name="titolo" src="directory/img0.jpg">
<a href="#" onmouseover=document.titolo.src="directory/img1.jpg" onmouseout=document.titolo.src="directory/img0.jpg"> Goku </a>
<a href="#" onmouseover=document.titolo.src="directory/img2.jpg" onmouseout=document.titolo.src="directory/img0.jpg"> Vegeta </a>



Prova 7



Goku
Vegeta


Visto ? Notate una cosa nel codice : questa volta non abbiamo richiamato una funzione con l'evento : gli abbiamo scritto un'istruzione. Questo si può fare quando abbiamo solo un'istruzione da eseguire. Comunque avremmo potuto usare ugualmente le funzioni : scivavamo onmouseover="cambia()" e nella funzione "cambia" mettavamo l'istruzione document.titolo.src="tutorial/vegeta.jpg" . Ora vediamo lo stesso script con l'evento onchange .

<script language="JavaScript">     
function cambia(saiyan) {             
if (saiyan=="goku") {                    
                    document.titolo.src="directory/img1.jpg" }
  else {                                                
                    document.titolo.src="directory/img2.jpg" }
}                                                     
 </script>                                          

....

<img name="titolo" src="directory/img0.jpg">
<select onchange="cambia(this.value)">
<option value="goku">Goku</option>
<option value="vegeta">Vegeta</option>
 </select>


Prova 8






Capito tutto ? Direi che di questo script ormai non dovrei spiegarvi niente : tutta roba che ormai sapete. L'unica cosa nuova è l'evento : lo trovate in <select onchange="cambia(this.value)"> . Significa che ogni volta che cambiamo l'opzione del menu a tendina viene eseguita la funzione "cambia" e gli passiamo il valore corrente.


Bene, ormai non ho più niente da dire : le basi del JavaScript le conoscete !!! Questo linguaggio a mio parere è veramente bellissimo perchè riunisce logica e gli elementi della programmazione normale agli elementi multimediali delle pagine web. Bene, se avete imparato e iniziate a fare script nel vostro sito, non dimenticate di ringraziare Gogeta Ssj3 e Dragon Ball Galaxy ^__- !!! Ciao e alla prossima !

-----------------------------

by Vegeth :

Non mi resta altro che ringraziare ancora Gogeta Ssj3, un vero esperto dello Javascript, che ha realizzato e ci ha gentilmente fornito questo splendido tutorial !

Visitate il suo ottimo sito !

 


[ Le funzioni] [ Selezione/Iterazione ] [ Oggetti ] [ Operatori/Eventi ]

 


 

Torna alla pagina Tutorials

 

Indietro - Home - Torna su