sebastianoweb - javascript

Programmare in JAVASCRIPT

....................................................Forum informatica>> ........Contatta l'autore del sito>>........

Il JAVASCRIPT è un linguaggio aggiuntivo dinamico del web, esso permette di creare l'aspetto professionale detto (dinamico) del sito web, tipo finestre popup o simili, moduli, menu, ecc...

Qui di seguito, viene riportato l'esenziale dei codici JAVASCRIPT che vengono più usati per la gestione dinamica:

CREARE FINESTRE ALERT – CONFIRM – CONDIZIONI OK-ANNULLA
IF-ELSE (condizione)
CALCOLI IN PHP
CREARE UN MODULO
ONCLICK collegare un evento
MENU A DISCESA CON SELECT
SIMULARE IL LANCIO DI DADI
WINDOWS OPEN
FOCUS
MENU DOPDOWN
TASTO INDIETRO
DISATTIVARE IL TASTO DESTRO DEL MOUSE
TEXTBOX CON IF-THEN-ELSE
BOTTONE CHE ATTIVA UNA FINESTRA IF
LOCATION
FINESTRE POPUP
SCRITTA SCORREVOLE
SCELTA OPZIONI

FINESTRE ALERT-CONFIRM-CONDIZIONI

Il metodo più facile e conosciuto è quello di inserire all'interno della pagina il TAG <SCRIPT language="javascript"> qui dentro va inserito lo script </script>.

Vediamo ora il sorgente:

<SCRIPT language="javascript">

   document.write("questo è JavaScript !");

</script>

E' anche possibile aggiungere alla stringa di testo il valore di variabili ossia concatenare stringhe con variabili. Ad esempio:

<SCRIPT language="javascript">

   var x = "buon divertimento !";

   document.write("questo è JavaScript !" + x + "ciao !");

</script>

Ora il risultato dello script sarà simile al precedente solo che verranno aggiunti al testo il contenuto della variabile x:
var x="buon divertimento! ";document.write("questo è JavaScript! " + x + "ciao!") questo è JavaScript! buon divertimento! ciao!

Compreso bene questi punti possiamo passare alla seconda lezione.

PULSANTE PROMPT

Proviamo a fare un altro esempio.
Premi il bottone.

Come puoi notare in questo esempio ho inserito un bottone e il metodo prompt(). Vedremo nelle prossime lezioni come gestire i bottoni (generalmente i campi e i moduli), per il momento concentriamoci sul prompt().

a = prompt("inserisci per la seconda volta il tuo nome","Daniele")

Rispetto all'esempio precedente ho inserito il nome Daniele all'interno degli apici dopo la frase: inserisci per la seconda volta il tuo nome. Daniele è diventato il valore di default dell'entrata e quindi è apparso nella casella di testo.

FINESTRA ALERT - CONFIRM

Lo script che hai appena visto utilizza due metodi: alert() e confirm().

<SCRIPT language="JavaScript">

   alert("Questa finestra è stata generata con il metodo alert()");

   confirm("Questa invece con confirm()");

</SCRIPT>

Non mi sembra molto difficile da capire poichè è molto simile al metodo prompt() descitto ampiamente nella lezione 2.

Passiamo ora ad un'altro esempio riassuntivo dove sono presenti i metodi prompt(), alert() e confirm(). Clicca il bottone.

<SCRIPT language="JavaScript">

   var b = prompt("inserisci di nuovo il tuo nome","");

   var conferma = confirm("sei sicuro di chiamarti " + b + " ?");

   if(conferma)

        alert("Benvenuto " + b + " !!!");

   else

        alert("Non sai neanche come ti chiami?");

</SCRIPT>

Ho assegnato alla variabile b il nome e inserita negli altri metodi (se ti sei già dimenticato rivedi la lezione 1). Invece nella variabile conferma viene assegnato il valore che assume il metodo confirm(), ovvero se è stato premuto OK o annulla e assume come valore TRUE o FALSE.
Nella prossima lezione vedremo come utiliazzare l'istruzione di selezione IF ELSE.

IF - ELSE (condizione)

Vediamo subito un esempio:
inserisci nella casella di testo la parola casa, poi clicca all'esterno del campo. function valore(text1){ if(text1=="casa") alert("Hai scritto giusto!") else alert("Attento! non hai scritto casa!")}

Questo è un esempio molto semplice sull'utilizzo dell'istruzione IF.

if(text1 == "casa")

    alert("Hai scritto giusto!")

else

    alert("Attento! non hai scritto casa!")

L' istruzione IF è all'interno di una funzione (avremmo modo di trattare a lungo questo argomento nelle prossime lezioni); non preoccupatevi se non avete molto chiaro l'utilizzo dell' IF ma con un po' di esercizio riuscirete sicuramente a capire l'importanza di questa istruzione.
Ritornando all'esempio precedente vediamo come si interpreta il sorgente:
SE text1 (ovvero la casella di testo) è uguale alla parola casa, o più generalmente SE restituisce VERO, manda un messaggio "Hai scritto giusto" altrimenti manda un altro messaggio "Attento! non hai scritto casa".

Due ultime precisazioni prima di concludere con l'istruzione IF:
- se bisogna eseguire un blocco di istruzioni all'interno dell'IF occorre racchiuderle tra parentesi graffe. Esempio:
Quando si verifica la condizione tale che pippo sia maggiore di gigi voglio assegnare a pippo il valore di gigi e a gigi il valore 5 dovrò scrivere:

if(pippo > gigi) {

   pippo = gigi

   gigi = 5

Se non avessi inserito le parentesi quando la condizione risulta vera (ovvero quando pippo > gigi) viene esegiuta soltanto la pirma istruzione (pippo = gigi) e la seconda viene eseguita sempre indipendentemente dalla condizione.

- in certi casi è possibile utilizzare più istruzioni IF all'interno di altri IF, ovvero vengono annidate più istruzioni (generalmente viene chiamata ELSE IF). Questa tecnica non è molto usata dai programmatori poichè rende il codice molto pesante e difficile da capire, quindi io vi consiglio di usare questa tecnica solo dove è necessario e sostituirla in caso con l'istruzione switch (è un'altra istruzione di selezione che vedremo nella prossima lezione). Faccio subito un breve esempio:

if(a < 5)

   b = a

else

  if(c == b)

     c = 7

  else

    if(c > b)

       c = b

    else c = 0

Come ho già detto questa tecnica non è molto utilizzata per cui se non vi è chiara non preoccupatevi, la capirete più avanti quando diventeremo più bravi.

Analizziamo ora questo esempio:

a < b ? a = c : b = c

Questa è un'istruzione molto simile all' IF infatti prima del segno ? si deve inserire necessariamente una espressione che restituisca un valore booleano (VERO o FALSO); se l'espressione è vera viene eseguito l'istruzione tra il carattere ? e : se invece è falsa viene eseguita l'istruzione successiva (quella dopo :).
SE a = 4 e b = 7 allora verrà assegnato il valore della variabile c alla variabile a. Non mi sembra molto difficile, comunque sarà tutto più facile e più chiaro quando avremmo finito questa parte del corso.
La stessa istruzione utilizzando l' IF sarebbe:

if(a < b)

   a = c

else b = c

E' vidente che utilizzando l'istruzione ?: il programma diventa più leggibile.

Lo so che questa parte del corso è un po' noiosa ma fondamentale, ne avremmo ancora per 3/4 lezioni. Buon divertimento!!!

CALCOLI - FINESTRE DI CALCOLO

Codice JavaScript

<SCRIPT language="javascript1.2">

     var num1 = prompt("inserisci il primo numero","");

     var num2 = prompt("Inserisci il secondo numero","");

     var scelta = prompt("che cosa vuoi fare?","");

     switch(scelta) {

          case '+': ris = parseFloat(num1)+parseFloat(num2); break;

          case '-': ris = num1-num2; break;

          case '*': ris = num1*num2; break;

          case '/': ris = num1/num2; break;

          default: alert("scelta errata"); break;

     alert(num1 + " " + scelta + " " + num2 + " = " + ris);

MODULO

n questa introduzione ai form farò un breve ripasso di HTML descrivendo ogni campo con le sue caratteristiche e le sue proprietà:

[1] Text

[2] Password

[3] Select (menu)

[4] Select (list)

[5] Textarea

[6] Checkbox
Modem
Stampante
Scanner
[7] Radio
Nescape
Explorer
Opera
[8] Button

[1] Text
<input type="text" size="10" name="T1">

[2] Password
<input type="password" size="10" name="T1">

[3] Select (menu)
<select name="D1" size="1">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>

[4] Select (list)
<select name="D1" multiple size="1">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>

[5] Textarea
<textarea name="S1" rows="13" cols="10">
</textarea>

[6] Checkbox
<input type="checkbox" name="C1">Modem<br>
<input type="checkbox" name="C2">Stampante<br>
<input type="checkbox" name="C3">Scanner<br>

[7] Radio
<input type="radio" checked name="R1" value="V1">Nescape<br>
<input type="radio" name="R2" value="V2">Explorer<br>
<input type="radio" name="R3" value="V3">Opera<br>

[8] Button
<input type="button" name="B1" value="Pulsante">

ONCLICK

Ecco l'intera pagina html dell'esempio.

<html>

<form name="miaform">

<input type="text" size="10" name="casellatesto">

<input type="button" name="bottone" value="cliccami" onclick="clicca()">

<script language="javascript">

function clicca() {

    alert(document.miaform.casellatesto.value);

</script>

</form>

</html>

<html>

<form name="miaform">

<input type="text" size="10" name="casellatesto">

<input type="button" name="bottone" value="cliccami" onclick="clicca()">

<input type="checkbox" checked name="C1" value="ON"> Navigare<br>

<input type="checkbox" name="C2"> Trafficare con javascript<br>

<input type="checkbox" checked name="C3" value="ON"> Giocare a calcio<br>

<input type="checkbox" name="C4"> Niente

<script language="javascritp">

function clicca() {

    var nome = document.ciao.T2.value;

    var testo = "a " + nome + " piace: \n";

    if(document.ciao.C1.checked)

         testo += "\n- navigare";

    if(document.ciao.C2.checked)

         testo += "\n- trafficare con javascript";

    if(document.ciao.C3.checked)

         testo += "\n- giocare a calcio";

    if(document.ciao.C4.checked)

         testo += "\n- fare niente";

   alert(testo);

</script>

</form>

</html>

MENU A DISCESA CON SELECT

L'ultimo campo che analizzeremo è il campo SELECT.
Si vuole realizzare uno script che permetta all'utente di selezionare tramite un menu a discesa (SELECT) diverse opzioni. Si vuole infine che la descrizione della scelta effettuata venga visualizzata all'interno di campo TEXTAREA. function scriviform(){ var testo=""; var url=document.desc.D1.selectedIndex; switch(url){ case 1: testo="http://www.cruelhunter.f2s.com\n\nCruelHunter's page.\nMain page"; break; case 2: testo="http://www.cruelhunter.f2s.com/javascript\n\nThe guide of JavaScript 1.3 and DHML."; break; case 3: testo="http://www.cruelhunter.f2s.com/emu\n\nFree emulators and roms"; break; case 4: testo="http://www.cruelhunter.f2s.com/dcast\n\nRequest sites and software"; break; case 5: testo="http://web.tiscalinet.it/genero/hacking\n\nGuide and tutorial for hacker, phreacker and cracker"; break; case 6: testo="http://web.tiscalinet.it/genero/programmazione\n\nFree guide and tutorial for programmer"; break; }document.desc.S1.value=testo; }

Vi propongo la pagina HTML:

<html>

<body>

<script language="JavaScript">

  function scriviform() {

     var testo = "";

     var url = document.desc.D1.selectedIndex;

     switch(url) {

        case 1: testo = "http://www.cruelhunter.f2s.com"; break;

        case 2: testo = "http://www.cruelhunter.f2s.com/javascript"; break;

        case 3: testo = "http://web.tiscalinet.it/genero/emu"; break;

        case 4: testo = "http://web.tiscalinet.it/genero/hacking"; break;

        case 5: testo = "http://web.tiscalinet.it/genero/programmazione"; break;

     document.desc.S1.value = testo;

</script>

<form name="desc">

    Menu a discesa:<br>

    <select name="D1" size="1" onchange="scriviform()">

        <option>:: seleziona la voce ::</option>

        <option>CruelHunter</option>

        <option>EnomaScript</option>

        <option>Enoma Emu</option>

        <option>Enoma Hack</option>

        <option>Programming</option>

    </select>

    Descrizione:<br>

    <textarea name="S1" rows="6" cols="25"></textarea>

</form>

</body>

</html>

var url = document.desc.D1.selectedIndex;
Questa istruzione permette di salvare nella variabile url la scelta che l'utente ha effettuato. Se l'utente ha selezionato la prima opzione la variabile url conterrà il valore zero, altrimenti se ha selezionato l'opzione 2 la variabile conterrà il valore 1, e così via.

document.desc.S1.value = testo;
Scrive nel campo TEXTAREA il contenuto della variabile testo.

onChange = "scriviform()"
Avrete sicuramente notato questa istruzione anche negli esercizi precedenti. In poche parole quando l'opzione del menu viene cambiata (l'utente sceglie un'altra opzione) viene richiamata la funzione scriviform().
Gli esercizi precedenti contengono l'istruzione onClick che richiama una funzione quando un elemento viene cliccato. Esistono molte altre istruzioni di questo tipo che esamineremo nel prossimo caitolo (Gestione eventi).

...........................................................................................

NB: osservare che il codice si divide in 2 parti, una messa nel HEAD e una messa nell’BODY

</head>

<body>
<script language="javascript">
function controlla(){
    for (counter = 0; counter < myForm.scelta.length; counter++){
       if (myForm.scelta[counter].checked){
        myvar = myForm.scelta[counter].value;
        document.myForm.action = myvar;
       }
    }
}
</script>

<form name="myForm" action="" onSubmit="return controlla();">
<br><input type="radio" value="myPage1.php" name="scelta">Layout 1
<br><input type="radio" value="myPage2.php" name="scelta">Layout 2
<br><input type="radio" value="myPage3.php" name="scelta">Layout 3
<p><input type="submit" value="entra">
</form>

</body>

Aprire una finestra (popup) esterna di dimensioni personalizzate.
Incollare i codici nei relativi tag:

</head>
<script Language="JavaScript">
<!--
function popup(url, name, width, height)
{
settings=
"toolbar=yes,location=yes,directories=yes,"+
"status=no,menubar=no,scrollbars=yes,"+
"resizable=yes,width="+width+",height="+height;

MyNewWindow=window.open("http://"+url,name,settings);
}
//-->
</script>

<body>
<a href="#" onClick="popup('www.yahoo.com', 'Win1', 300, 300);">
Clicca Qui Per Andare Su Yahoo</a>
</body>

......SIMULAZIONE DADI

Vediamo ora di realizzare un semplice script che simuli il lancio di due dadi. L'utente può selezionare il numero di lanci; al termine di essi si deve comunicare il vincitore.

function lancia(){ document.dadi.T1.value=0; document.dadi.T3.value=0; var lanci=document.dadi.T2.value*1; for(i=0; idocument.dadi.T3.value*1) alert("Hai vinto!!!"); else if(document.dadi.T1.value*1

WINDOWS.OPEN

<A HREF="javascript:finestra()">Grazie!</A>

FOCUS
Per inserire un focus su ad esempio una casella di testo inserire il seguente tag:

function setfocus() {

        document.first.text1.focus();

        return;

Questo script imposta il focus sulla prima casella di testo della form dell'esempio illustrato prima. Occorre specificare il nome dell'intera form, nel nostro esempio first, e il nome del singolo elemento, text1. Se volete impostare il focus su questo elemento quando la pagina viene caricata, dovete aggiungere la proprietà onLoad al tag <body>; per esempio:

<body onLoad="setfocus()">

A volte può essere necessario bloccare i click del muose per i tasto destro o sinistro. Per fare questo sfutttiamo l'oggetto event definito nel Document Object Model di Javascript.
La seguente funzione individua la pressione del tasto destro o sinistro del mouse, inibendone le funzioni e mostrando un messaggio
function DisattivaMouse()
{
if (window.event.button == 1)
{
alert("Tasto sinistro del mouse disabilitato!");
}
else
{
alert("Tasto destro del mouse disabilitato!");
}
}
Perchè funzioni bisogna lanciare la funzione del body della pagina

MENU DOPDOWN

inserire nell ‘ head il seguente codice

.menuItem {
padding:4px 10px 4px 10px;
border-bottom:solid 1px #dddddd;
}

.menuItem:hover {
background-color:#f1f1f1;
}

.menuItem a {
color:#666666;
text-decoration:none;
}

#demo {
background-color:#eeeeee;
cursor:pointer;
padding:5px 20px 5px 20px;
margin: 30px 0;
width: 425px;
}

#demo span {
padding:3px 20px 0px 20px;
cursor:pointer;
}

#demo span:hover {
text-decoration:underline;
}

</style>

<script type="text/javascript" src="sclmenu.js"></script>
<script type="text/javascript">
(function(){

var menu1=new Scl.Menu(130);
menu1.addItem('Tutti i cellulari','pag_cellulari.php');
menu1.addItem('Apple','pag_cellulari_Apple.php');
menu1.addItem('Alcatel','pag_cellulari_Alcatel.php');
menu1.addItem('BlackBerry','pag_cellulari_BlackBerry.php');
menu1.addItem('Gsmart','pag_cellulari_Gsmasrt.php');
menu1.addItem('Huawei','pag_cellulari_Huawei.php');
menu1.addItem('Hitech','pag_cellulari_Hitech.php');
menu1.addItem('I-mate','pag_cellulari_I-mate.php');
menu1.addItem('Lg','pag_cellulari_Lg.php');
menu1.addItem('Motorola','pag_cellulari_Motorola.php');
menu1.addItem('Nokia','pag_cellulari_Nokia.php');
menu1.addItem('Onda','pag_cellulari_Onda.php');
menu1.addItem('Porsche','pag_cellulari_Porche.php');
menu1.addItem('Poketdevice','pag_cellulari_Poketdevice.php');
menu1.addItem('Samsung','pag_cellulari_Samsung.php');
menu1.addItem('Sonyericsson','pag_cellulari_Sonyericsson.php');
menu1.addItem('Sonin','pag_cellulari_Sonin.php');
menu1.addItem('Telit','pag_cellulari_Telit.php');
menu1.addItem('Toshiba','pag_cellulari_Toshiba.php');
menu1.addItem('SOFTWARE','pag_cellulari_software.php');
menu1.addItem('MEMORYSTICK','pag_cellulari_memorystick.php');
menu1.addItem('ADATTATORI','pag_cellulari_Adattatori.php');
menu1.dockTo('CELLULARI');
}
)();
</script>

inserire nel body il seguente codice ((la voce CELLULARI deve corrispondere alla stessa voce dell’head))

<div id="CELLULARI"><li class="Stile25">CELLULARI</li>
</div>
……..

TASTO INDIETRO

<SCRIPT>

history.back()

</SCRIPT>

DISATTIVARE IL TASTO DESTRO

TEXTBOX IF ELSE

Questo è un esempio molto semplice sull'utilizzo dell'istruzione IF.

if(text1 == "casa")

    alert("Hai scritto giusto!")

else

    alert("Attento! non hai scritto casa!")

if(pippo > gigi) {

   pippo = gigi

   gigi = 5

if(a < 5)

   b = a

else

  if(c == b)

     c = 7

  else

    if(c > b)

       c = b

    else c = 0

Come ho già detto questa tecnica non è molto utilizzata per cui se non vi è chiara non preoccupatevi, la capirete più avanti quando diventeremo più bravi.

Analizziamo ora questo esempio:

a < b ? a = c : b = c

if(a < b)

   a = c

else b = c

BOTTONE CHE ATTIVI UNA FINESTRA IF

CREARE UN BUTTON CHE ATTIVI UNA FINESTRA IF <input type="button" name="bottone" value="cliccami" onclick="clicca()"> <SCRIPT language="JavaScript"> function clicca() { var b = prompt("inserisci di nuovo il tuo nome",""); if(b == "casa") alert("Hai scritto giusto!") else alert("Attento! non hai scritto casa!") } </SCRIPT>

LOCATION COME COLLEGARE UN LINK AD UNA PAGINA WEB

REPLACE ->carica la pagina url indicata tra le parentesi

Location.replace (“pag_sito.htm”)

RELOAD Ricarica la pagina attuale come se cliccassimo sulla voce aggiorna del browser

Location.replace

FINESTRA POPUP

Aprire una finestra (popup) esterna di dimensioni personalizzate.
Incollare i codici nei relativi tag:

MyNewWindow=window.open("http://"+url,name,settings);
}
//-->
</script>

<body>
<a href="#" onClick="popup('www.yahoo.com', 'Win1', 300, 300);">
Clicca Qui Per Andare Su Yahoo</a>
</body>

SCRITTA SCORREVOLE

</script>

SCELTA OPZIONI

NB: osservare che il codice si divide in 2 parti, una messa nel HEAD e una messa nell’BODY

</head>

</body>


Player 1	lanci	CPU