… continua da

Prima di addentrarmi nel tutorial vero e proprio e nel primo esempio (paginazione latoclient) vorrei definire alcune buone pratiche che ricadono sotto la definizione di javascript non intrusivo (unobtrusive javascript).

Per approfondimenti consiglio la lettura della serie di articoli scritti da Christian Heilmann:

le 7 regole di javascript non intrusivo

tradotto in italiano da html.it

Wikipedia nella sua definizione di javascript non intrusivo riassume il paradigma in 3 punti

• Separazione strati
• Graceful degradation
• Best practices

Separazione strati (XHTML - CSS - JAVASCRIPT)

E’ sicuramente il primo passo da attuare se si vuole programmare in maniera moderna javascript (vorrei dire decente).

Javascript si posiziona sullo strato che solitamente viene chiamato “front-end” (la presentazione).
In questo strato abbiamo oggi 3 fondamentali tecnologie che si occupano di 3 aspetti diversi della presentazione.

XHTML : informazione

CSS : estetica

JAVASCRIPT : comportamenti.

Nei documenti xhtml è possibile usare lo stile (CSS) inline nei tag.

Cattiva pratica:

<div style="border:1px solid red;">Informazione</div>

E’ possibile inserire gli stili all’interno di un tag style.

Cattiva pratica:

<style type="text/css">
div{border:1px solid red;}
</style>

Sicuramente la via migliore è quella di separare lo stile in file esterni.

<link type="text/css" href="style.css" rel="stylesheet" />

Esattamente come per il css anche per il javascript ci sono buone e cattive pratiche.
Maggiore è la separazione migliore è la qualità del nostro risultato.
E’ possibile agganciare per rapidità il javascript nei tag all’interno degli attributi “handlers” o all’interno dell’attributo href (javascript:).

Cattiva pratica:

<a href="#" onclick="alert('Hello World');">click</a>

o

<a href="javascript:alert('Hello World');">click</a>

è possibile inserire snippets di codice all’interno del tag script.

<script type="text/javascript"><!--
alert("Hello World!");
--></script>

Sicuramente a meno che non sia un piccolo esercizio il codice javascript va messo in file esterni.

<script src="lib.js" type="text/javascript"></script>

La posizione dei js merita giusto una piccola parentesi. La posizione migliore per chiarezza è all’interno del tag head.
Alcuni tipi di js esterni è meglio metterli al fondo (prima della chiusura del tag body). Questo perchè lo scarico del documento viene bloccato se ci sono problemi nel caricare la risorsa esterna. Se ad esempio il server di google analytics rispondesse per qualche ragione con tempi di attesa molto lunghi questo ritarda lo scaricamento dell’intera pagina web. Se non lo interrompe (mi è giusto capitato di recente con il plugin chili per wordpress che originalmente prendeva la libreria jquery da jquery.com che giorni fa sembrava avere problemi). Quindi in generale copiare gli script in locale (se il server non è google…) e se sono esterni valutare bene il loro scopo.

Lo stile di programmazione cambia a seconda della posizione. O per lo meno la chiamata (l’invocazione) di ciò che ho programmato dovra aspettare che il documento sia stato scaricato.

Separando il comportamento aggiunto da javascript dal documento io non userò mai e poi mai gli attributi onfocus, onchange, onmouseover, onmouseout, onload, onunload, onclick, ondblclick etc….
Eliminiamo questi attributi con un bel search&replace

Trova on.=”.” e cancella tutto.

All’interno del tag a e il suo attributo href non bisognerebbe mai usare la parola chiave javascript:.

L’html serve per portare le informazioni, possibilmente all’interno di tag che semanticamente abbiano un nesso con le informazioni stesse.

E poi perchè si da per scontato che il client abbia un engine javascript.
Questo può non essere vero ad esempio nel caso di spider e bot di motori di ricerca.

Come dice Christian Heilmann, non dare mai niente per scontato. Non dare per scontato che il client abbia javascript. Dai l’informazione pulita.

Ora che abbiamo separato il nostro codice “front-end” in 3 grandi fette vediamo come raggiungere e cambiare il comportamento del nostro documento.

Innanzitutto con javascript possiamo aggiungere parte di quella che noi consideriamo interfaccia.
Se la nostra informazione è

<div>
Slider scripts are one of the common objects of newspaper & portal websites.
</div>

La nostra interfaccia potrebbe avere bisogno di ulteriori tag e ulteriori “stringhe”.
Ad esempio qui:

http://www.maxb.net/scripts/ycodaslider-2.0/include/demo/

la toolbar di quello slider, e per toolbar intendo i tasti in alto, la posso aggiungere dinamicamente con javascript.
Anche perchè quella toolbar è legata al funzionamento javascript:

<ul>
<li><a class="current" href="#1">YCodaSlider 2.0</a></li>
<li><a href="#2">Panels</a></li>
<li><a href="#3">Examples</a></li>
<li><a href="#12">Credits</a></li>
</ul>

quindi tutto questo codice html io lo potrò aggiungere dinamicamente lasciando la pagina html letta dagli spider con il documento puro.

Anche il css della parte relativa all’interfaccia javascript a mio giudizio dovrebbe essere caricata da javascript stesso.
Voi direte “ehh ma quanto lavoro!”.
Io direi di no. Nessun lavoro extra.
Lasciate un foglio di stile minimo linkato sull’head (reset di yahoo).
E lasciate che javascript carichi gli stili delle interfacce.

Vedrete che il vostro contenuto senza javascript sarà leggibilissimo anche da lynx. E google & soci vi premieranno.

[...continua]