Gioco a programmare

lunedì 9 gennaio 2012

Modificare gli attributi di stile di un DIV mediante javaScript

<script>
function traccia()
{
 var altezza=600;
 document.write("<div style='background-color:blue;width:400px;height:"+altezza+"px'></div>");
}

traccia();

</script>

Ecco, così funziona.
Devo stare attento a fare in modo che il valore numerico venga al di fuori delle doppie virgolette: esso non c'entra niente con la stringa che viene scritta nel documento!

domenica 8 gennaio 2012

Una piccola prova di form direttamente sul blog

Forms e Inputs di vari tipi

Un documento ha anche degli insiemi. Uno di questi è forms[].
Che cosa è precisamente un form?

Vediamo...

Raccoglie elementi per l'input dell'utente.
Cerchiamo di farne uno.

<html>
<head>
<script>
function apri(){
 
 
}
</script>
</head>
<body onClick=apri()>
<form>
Nome: <input type="text" name="nome" /><br />
Cognome: <input type="text" name="cognome" />
</form>

</body>
</html>

(ho deciso di imparare a usare la notazione più corretta...)
Ecco:

E ora l'input password:

<html>
<head>
<script>
function apri(){
 
 
}
</script>
</head>
<body onClick=apri()>
<form>
Nome: <input type="text" name="nome" /><br />
Cognome: <input type="text" name="cognome" /><br />
Password: <input type="password" name="password">
</form>

</body>
</html>

Ecco il risultato:

La differenza è che ciò che viene digitato in un input di tipo password non viene visualizzato in lettere ma in pallini...

Ora vediamo gli input in forma di caselle da barrare.

Per prima cosa i radio buttons

<html>
<head>
<script>
function apri(){
 
 
}
</script>
</head>
<body onClick=apri()>
<form>
<input type="radio" name="sesso" value="m">Maschio<br />
<input type="radio" name="sesso" value="f">Femmina
</form>

</body>
</html>

Risultato:

Ora provo a mettere due "sistemi" di radio buttons. L'attributo name dev'essere quello che identifica il "sistema".

<html>
<head>
<script>
function apri(){
 
 
}
</script>
</head>
<body onClick=apri()>
<form>
<input type="radio" name="sesso" value="m">Maschio<br />
<input type="radio" name="sesso" value="f">Femmina
<br /><br />
<input type="radio" name="nazionalita" value="italiano">Italiano<br />
<input type="radio" name="nazionalita" value="francese">Francese<br />
<input type="radio" name="nazionalita" value="inglese">Inglese
</form>

</body>
</html>

Risultato:

...e le checkboxes

<html>
<head>
<script>
function apri(){
 
 
}
</script>
</head>
<body onClick=apri()>
<form>
<input type="checkbox" name="caratteri" value="bello">Bello<br />
<input type="checkbox" name="caratteri" value="buono">Buono<br />
<input type="checkbox" name="caratteri" value="alto">Alto
</form>

</body>
</html>

Ecco, queste, diversamente dai radio buttons, non si escludono a vicenda, permettendo risposte multiple. Risultato:

Altri metodi dell'oggetto document

Vediamo quali sono in genere i metodi dell'oggetto document.

Non sono poi molti.
A parte quelli che restituiscono elementi del documento, che ho già visto, vi sono:

open()
close
write
writeln

Cerchiamo di farci qualcosa...

Open apre un documento.
Se ho capito bene, in una finestra ci sta un solo documento, quindi o ce ne sta uno o ce ne sta un altro.
Aprire un documento significa quindi probabilmente crearlo...

Invece l'indirizzo, l'URL, rimane sempre quello perchè è una proprietà della finestra, non del documento!

<html>
<head>
<script>
function apri(){
 document.open();
 document.write("Nuovo documento");
 document.close();
 
}
</script>
</head>
<body onClick=apri()>


</body>
</html>

Ecco, mentre si apre il documento l'URL resta esattamente lo stesso.

Su write e writeln non c'è molto da dire...

Conclusioni con i metodi getElement(s) dell'oggetto document.

In conclusione con i metodi getElement(s) dell'oggetto document si può:

Selezionare un singolo elemento mediante getElementById el'uso dell'attributo id;
Selezionare un insieme di elementi dello stesso tipo mediante getElementsByTagName;
Selezionare un insieme di elementi anche di tipo diverso mediante getElementsByName e l'uso dell'attributo name

document.getElementsByName per fare un insieme di elementi di natura diversa

Provare ad accomunare sotto lo stesso attributo name elementi con tag diverso?

<html>
<head>
<script>
function funzione(){
  var insieme = document.getElementsByName("uno");
 for(n=0;n<=insieme.length;n++) 
 insieme[n].style.backgroundColor="blue";
 
}
</script>
</head>
<body onClick="funzione()">
<div name="uno">Ciao amico</div>
<div name="due">Ciao bestiolina</div>
<span name="uno">Ciao bello</span>
<div name="due">Ciao fesso</div>
<h name="uno">Ciao, grandissimo!</h>
</body>
</html>

Funziona anche questo.
Adesso ci faccio anche altre prove...

<html>
<head>
<script>
function funzione(){
  var insieme = document.getElementsByName("uno");
 for(n=0;n<=insieme.length;n++) 
 insieme[n].style.backgroundColor="blue";
 
}
</script>
</head>
<body onClick="funzione()">
<div name="uno">Ciao amico</div>
<div name="due">Ciao bestiolina</div>
<span name="uno">Ciao bello</span>
<div name="due">Ciao fesso</div>
<h name="uno">Ciao, grandissimo!</h>
<a name="uno">Ipertesto bello</a>
<a name="due">Ipertesto del cavolo</a>
<p name="uno">Paragrafo fantastico</p>
</body>
</html>

...funziona sempre.
Con il document.getElementsByName si possono accomunare in un insieme tutti gli elementi che hanno lo stesso nome, anche di natura diversa.

Passare in rassegna tutti gli elementi di un insieme con un ciclo FOR

Un esercizio che mi riporta ai cicli FOR: voglio colorare tutti gli elementi facenti parte di un insieme.

<html>
<head>
<script>
function funzione(){
  var insieme = document.getElementsByName("uno");
 for(n=0;n<=insieme.length;n++) {
  insieme[n].style.backgroundColor="blue";
 }
}
</script>
</head>
<body onClick="funzione()">
<div name="uno">Ciao amico</div>
<div name="due">Ciao bestiolina</div>
<div name="uno">Ciao bello</div>
<div name="due">Ciao fesso</div>
</body>
</html>

Questo dovrebbe colorarmi lo sfondo di tutti i DIV con il nome "uno" in blu.
Lo provo...

E funziona!

Quando il comando è uno, si possono omettere anche le parentesi graffe:

<html>
<head>
<script>
function funzione(){
  var insieme = document.getElementsByName("uno");
 for(n=0;n<=insieme.length;n++) 
 insieme[n].style.backgroundColor="blue";
 
}
</script>
</head>
<body onClick="funzione()">
<div name="uno">Ciao amico</div>
<div name="due">Ciao bestiolina</div>
<div name="uno">Ciao bello</div>
<div name="due">Ciao fesso</div>
</body>
</html>