Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html
Conoscere l'uso appropriato di questi attributi può semplificare il codice HTML, CSS e JAVASCRIPT e ritengo agevoli la manutenzione.
Attributo "id"
Quando il browser carica una pagina, verifica l'esistenza di questo attributo. Se l'attributo "id" viene specificato su un tag, il browser aggiunge il riferimento al relativo elemento in una mappa. Così in javascript è possibile accedere velocemente all'elemento con questa istruzione:
var el = document.getElementById("myId");
Questa istruzione restituisce un solo elemento HTML.
Se il valore dell'attributo "id" fosse duplicato, l'istruzione javascript non lavorerebbe adeguatamente.
Quindi il valore di un "id" non deve essere duplicato come in questo esempio:
<html>
<body>
<div id="container">...</div>
<div id="container">...</div>
</body>
</html>
Alcuni grafici css utilizzano l'attributo "id" per definire uno stile CSS:
#container {
padding: 10px;
}
ma come spiegato precedentemente, lo scopo dell'attributo "id" è quello di accedere in maniera veloce ad un determinato elemento tramite javascript.
Per Definire le proprietà grafiche consiglio di far riferimento all'attributo "class".
Attributo "class"
Questo attributo viene utilizzato per assegnare ad un certo elemento HTML uno stile grafico definito tramite foglio di stile CSS.
Molti utilizzano l'attributo "id" perché danno per scontato che quell'elemento sarà unico. Tuttavia, dato che spesso e volentieri le strutture grafiche di una pagina HTML subiscono cambiamenti nel tempo, è sempre meglio utilizzare riferimenti all'attributo "class":
<html>
<body>
<div class="mainContainer">...</div>
</body>
</html>
perché cambiando il valore della classe, e quindi l'aspetto grafico, non sarà necessario modificare per quanto possibile il codice javascript che probabilmente utilizzerà gli attributi "id" per accedere agli elementi html.
In realtà con alcune librerie javascript (es.jquery) è possible utilizzare uno dei valori di "class" per accedere ad uno o più elementi (vedere la sezione "Selettori jQuery").
Attributo "name"
In questa sezione parleremo dell'attributo "name" in riferimento agli elementi (input,select) usati nel form (questo attributo può essere utilizzato anche sul tag "<iframe>", <a> o <img>, per esempio).
Quindi, nel contesto di un form, questo attributo viene utilizzato per specificare i parametri da inviare al server con il metodo "GET" o "POST".
A differenza dell'attributo "id", può aver senso duplicare il valore di questo attributo su piu tag in due casi:
1.Attributo name duplicato su diversi form:
<html>
<body>
<form id="form1" method="POST" action="url1">
indirizzo casa:<input name="address" type="text"/>
<button type="submit" >invia</button>
</form>
<form id="form2" method="post" action="url2">
indirizzo ufficio<input name="address" type="text"/>
<button type="submit" >invia</button>
</form>
</body>
</html>
Come potete constatare, esistono due campi "input" che hanno lo stesso valore dell'attributo "name", ma sono inseriti in due form diversi. Quindi il submit in un form non crea conflitto con l'altro input inserito nell'altro form.
2. Attributo duplicato su un elemento "submit":
<form id="form1" method="POST" action="url1">
indirizzo casa:<input name="address" type="text"/>
<input type="submit" name="azione" value="aggiungi"/>
<input type="submit" name="azione" value="cancella"/>
</form>
In questo caso il valore che arriverà al server dipende dal bottone premuto. Se infatti viene premuto il tasto con name="aggiungi", al server verranno invitati in POST i valori "address" (che dipende da ciò che è inserito nella textbox) e azione="aggiungi". Se invece viene premuto il tasto "cancella", verrà inviato sempre "address" e azione ="cancella". Quindi a seconda del valore "azione", il codice lato server sa cosa deve fare con il valore di "address". Se in form prevede un solo tasto, potrebbe non esser necessario specificare l'attributo name per il tasto "submit".
Alcuni usano mettere il valore dell'attributo "id" uguale al valore dell'attributo "name":
<input id="address" name="address" type="text"/>
Questo non è necessario perché come è stato spiegato l'attributo "id" viene utilizzato lato client (codice javascript) mentre l'attributo "name" definisce il parametro da inviare al server.
Tuttavia è possibile via javascript utilizzare "name" per accedere direttamente ad un elemento:
var addressEl = document.getElementById("form1").address;
anche se consiglio sempre l'attributo "id". Uno dei motivi è spiegato in seguito.
Un errore comune che può capitare è assegnare all'attributo "name" un valore che in javascript potrebbe
scatenare un errore in quanto il suo valore corrisponde ad una parola riservata javascript.
Per esempio:
<input type="submit" name="submit" value="invia" />
se vogliamo avviare il "submit" di un form tramite javascript si genera un errore.
document.getElementById("form1").submit();
per il semplice motivo che la proprietà "submit" non fa più riferimento ad una funzione ma ad un elemento del form. Dato che chi scrive HTML non deve necessariamente conoscere javascript, per il programmatore javascript, onde evitare questi imprevisti è sconsigliabile accedere agli elementi tramite l'attributo name.
Selettore jQuery
jQuery fornisce una potente e semplice funzionalità per selezionare uno o più elementi sulla nostra pagina HTML tramite il nome di classi e nomi di attributi (nei browser di ultima generazione questo tipo di selezione si può effettuare anche in javascript nativo):
var list = jQuery("input[name=address] .lighted");
Tuttavia questo potente strumento deve essere usato in maniera adeguata se non vogliamo compromettere le prestazioni di esecuzione del codice.
Per esempio:
$(".myButtonDiv").click(function(event){
alert("clicked");
});
Questo selettore può essere molto pesante su certi browser e su certe tipologie di computer (es.netbook) in quanto richiede una lunga scansione di tutti gli elementi della pagina HTML.
In questo caso, per migliorare le prestazioni, può aver senso aggiungere un attributo "id" al contenitore degli elementi che vogliamo selezionare:
$("#menuContainer .myButtonDiv").click(function(event){
alert("clicked");
});
Questo è sicuramente più veloce perché identifichiamo prima di tutto un elemento contenitore tramite l'attributo "id" che come già spiegato avviene in maniera veloce, e successivamente vengono cercati tutti i suoi elementi figli con la classe "myButtonDiv". Quindi la ricerca è limitata solo agli elementi figli del contenitore e non a tutto il documento HTML.
Conoscere l'uso appropriato di questi attributi può semplificare il codice HTML, CSS e JAVASCRIPT e ritengo agevoli la manutenzione.
Attributo "id"
Quando il browser carica una pagina, verifica l'esistenza di questo attributo. Se l'attributo "id" viene specificato su un tag, il browser aggiunge il riferimento al relativo elemento in una mappa. Così in javascript è possibile accedere velocemente all'elemento con questa istruzione:
var el = document.getElementById("myId");
Questa istruzione restituisce un solo elemento HTML.
Se il valore dell'attributo "id" fosse duplicato, l'istruzione javascript non lavorerebbe adeguatamente.
Quindi il valore di un "id" non deve essere duplicato come in questo esempio:
<html>
<body>
<div id="container">...</div>
<div id="container">...</div>
</body>
</html>
Alcuni grafici css utilizzano l'attributo "id" per definire uno stile CSS:
#container {
padding: 10px;
}
ma come spiegato precedentemente, lo scopo dell'attributo "id" è quello di accedere in maniera veloce ad un determinato elemento tramite javascript.
Per Definire le proprietà grafiche consiglio di far riferimento all'attributo "class".
Attributo "class"
Questo attributo viene utilizzato per assegnare ad un certo elemento HTML uno stile grafico definito tramite foglio di stile CSS.
Molti utilizzano l'attributo "id" perché danno per scontato che quell'elemento sarà unico. Tuttavia, dato che spesso e volentieri le strutture grafiche di una pagina HTML subiscono cambiamenti nel tempo, è sempre meglio utilizzare riferimenti all'attributo "class":
<html>
<body>
<div class="mainContainer">...</div>
</body>
</html>
perché cambiando il valore della classe, e quindi l'aspetto grafico, non sarà necessario modificare per quanto possibile il codice javascript che probabilmente utilizzerà gli attributi "id" per accedere agli elementi html.
In realtà con alcune librerie javascript (es.jquery) è possible utilizzare uno dei valori di "class" per accedere ad uno o più elementi (vedere la sezione "Selettori jQuery").
Attributo "name"
In questa sezione parleremo dell'attributo "name" in riferimento agli elementi (input,select) usati nel form (questo attributo può essere utilizzato anche sul tag "<iframe>", <a> o <img>, per esempio).
Quindi, nel contesto di un form, questo attributo viene utilizzato per specificare i parametri da inviare al server con il metodo "GET" o "POST".
A differenza dell'attributo "id", può aver senso duplicare il valore di questo attributo su piu tag in due casi:
1.Attributo name duplicato su diversi form:
<html>
<body>
<form id="form1" method="POST" action="url1">
indirizzo casa:<input name="address" type="text"/>
<button type="submit" >invia</button>
</form>
<form id="form2" method="post" action="url2">
indirizzo ufficio<input name="address" type="text"/>
<button type="submit" >invia</button>
</form>
</body>
</html>
Come potete constatare, esistono due campi "input" che hanno lo stesso valore dell'attributo "name", ma sono inseriti in due form diversi. Quindi il submit in un form non crea conflitto con l'altro input inserito nell'altro form.
2. Attributo duplicato su un elemento "submit":
<form id="form1" method="POST" action="url1">
indirizzo casa:<input name="address" type="text"/>
<input type="submit" name="azione" value="aggiungi"/>
<input type="submit" name="azione" value="cancella"/>
</form>
In questo caso il valore che arriverà al server dipende dal bottone premuto. Se infatti viene premuto il tasto con name="aggiungi", al server verranno invitati in POST i valori "address" (che dipende da ciò che è inserito nella textbox) e azione="aggiungi". Se invece viene premuto il tasto "cancella", verrà inviato sempre "address" e azione ="cancella". Quindi a seconda del valore "azione", il codice lato server sa cosa deve fare con il valore di "address". Se in form prevede un solo tasto, potrebbe non esser necessario specificare l'attributo name per il tasto "submit".
Alcuni usano mettere il valore dell'attributo "id" uguale al valore dell'attributo "name":
<input id="address" name="address" type="text"/>
Questo non è necessario perché come è stato spiegato l'attributo "id" viene utilizzato lato client (codice javascript) mentre l'attributo "name" definisce il parametro da inviare al server.
Tuttavia è possibile via javascript utilizzare "name" per accedere direttamente ad un elemento:
var addressEl = document.getElementById("form1").address;
anche se consiglio sempre l'attributo "id". Uno dei motivi è spiegato in seguito.
Un errore comune che può capitare è assegnare all'attributo "name" un valore che in javascript potrebbe
scatenare un errore in quanto il suo valore corrisponde ad una parola riservata javascript.
Per esempio:
<input type="submit" name="submit" value="invia" />
se vogliamo avviare il "submit" di un form tramite javascript si genera un errore.
document.getElementById("form1").submit();
per il semplice motivo che la proprietà "submit" non fa più riferimento ad una funzione ma ad un elemento del form. Dato che chi scrive HTML non deve necessariamente conoscere javascript, per il programmatore javascript, onde evitare questi imprevisti è sconsigliabile accedere agli elementi tramite l'attributo name.
Selettore jQuery
jQuery fornisce una potente e semplice funzionalità per selezionare uno o più elementi sulla nostra pagina HTML tramite il nome di classi e nomi di attributi (nei browser di ultima generazione questo tipo di selezione si può effettuare anche in javascript nativo):
var list = jQuery("input[name=address] .lighted");
Tuttavia questo potente strumento deve essere usato in maniera adeguata se non vogliamo compromettere le prestazioni di esecuzione del codice.
Per esempio:
$(".myButtonDiv").click(function(event){
alert("clicked");
});
Questo selettore può essere molto pesante su certi browser e su certe tipologie di computer (es.netbook) in quanto richiede una lunga scansione di tutti gli elementi della pagina HTML.
In questo caso, per migliorare le prestazioni, può aver senso aggiungere un attributo "id" al contenitore degli elementi che vogliamo selezionare:
$("#menuContainer .myButtonDiv").click(function(event){
alert("clicked");
});
Questo è sicuramente più veloce perché identifichiamo prima di tutto un elemento contenitore tramite l'attributo "id" che come già spiegato avviene in maniera veloce, e successivamente vengono cercati tutti i suoi elementi figli con la classe "myButtonDiv". Quindi la ricerca è limitata solo agli elementi figli del contenitore e non a tutto il documento HTML.
Nessun commento:
Posta un commento