Grazie a Dio adesso anche il nostro blog ha l'immaginina external link vicino ai link esterni :)
Ma come ho fatto a cambiarli tutti? Sbatti o magia?
Nessuno dei due, solo qualche riga di javascript e, udite udite, ora vi spiego come funziona.

Premetto, se volete un corso completo di javascript fatemi un fiskio, qui si parla solo dello script per i link esterni.

Se aprite il sorgente html del blog troverete verso il fondo della pagina queste righe:

<script>
      var linkz = document.getElementsByTagName("a");
 for (var i = 0; i < linkz.length; i++) {      
  if (linkz[i].href.indexOf("http://") == 0 && linkz[i].href.indexOf("http://tpatpc.blogspot.com") <= -1 && linkz[i].href.indexOf("http://www2.blogger.com") <= -1) {
   if (linkz[i].getElementsByTagName("img").length <= 0) {
     linkz[i].className = "external";           
        }   
  }  
 }
</script>


Allora, partiamo dall'inizio, vedete che il tutto è racchiuso in un tag script ( <script></script> ) questo indica al browser che non deve mostrare le righe racchiuse, ma che le deve eseguire.

Sappiate che tutti i tag presenti su una pagina sono arrangiati in un albero di oggetti. Via javascript è facile modificare a piacimento un documento html.

Nella prima riga andremo a prendere tutti i tag <a> che sono presenti sulla pagina. I tag a sono i link. Per farlo invochiamo il metodo getElementsByTagName sull'oggetto document; document è infatti la radice del documento html, tutti i tag presenti sulla pagina sono figli o nipoti (pronipoti propronipoti ecc. ecc.) di document. I tag <a> ci vengono restituiti sotto forma di Array. Amichevolmente possiamo dire sotto forma di lista. Ora linkz è la nostra lista.

Per accedere ai valori contenuti in una lista simile si utilizzano le parentesi quadre racchiudenti l'indice dell'elemento a cui vogliamo accedere. Attenzione: gli indici iniziano da 0, quindi il primo elemento della lista è linkz[0], il secondo è linkz[1] e così via. Lo so vi sembra strano, ma per noi programmatori è la cosa + naturale del mondo... Ma quanti oggetti ci sono in questa lista? Semplice ce ne sono linkz.length! Quindi l'ultimo elemento della lista sarà linkz[linkz.length]! <- ahah! Ci siete cascati? Sempre per la questione dello 0 come primo elemento ecco che l'ultimo è linkz[linkz.length-1]

La seconda riga è un ciclo for. Finchè questo ciclo for è valido tutto ciò che è racchiuso tra le parentesi graffe che lo seguono verrà eseguito ciclicamente. Come si vede questo ciclo for racchiude 3 parametri separati da ; questi parametri decidono finchè è valido il ciclo for. Nel dettaglio, il primo parametro (nel nostro caso var i = 0) viene eseguito solo all'ingresso nel ciclo for, viene di solito sfruttato per inizializzare un contatore, ecco infatti che noi inizializziamo i con valore 0. Il secondo parametro è la condizione che deve essere soddisfatta perchè il ciclo venga eseguito per l'ennesima volta. Quando questa condizione, che è testata ad ogni "inizio giro" non è soddisfatta si uscirà dal ciclo invece d'eseguire un altro giro. Il terzo ed ultimo parametro è una istruzione che viene eseguita alla fine di ogni ciclo, viene di solito usato per incrementare il contatore inizializzato prima. Traiamo le conclusioni, questo ciclo verrà eseguito linkz.length volte e ad ogni ciclo i varrà un valore diverso, da 0 a linkz.length-1.

La terza riga è un if. Se la condizione presente tra parentesi tonde sarà soddisfatta allora ciò che c'è tra le successive graffe verrà eseguito, altimenti no. Nel nostro caso tra parentesi tonde troviamo 3 condizioni unite da degli &&. Gli && stanno per AND, devono quindi essere soddisfatte tutte e tre le condizioni per far si che la condizione totale sia soddisfatta. Le nostre 3 condizioni sono simili. Dunque linkz[i].href non è nientaltro che il valore href del tag a relativo a linkz[i]. indexOf è un metodo che si applica alle stringhe, lui torna la posizione di una sottostringa all'interno della stringa su cui è chiamato. Ad esempio "ciao pirla".indexOf("pirla") tornerebbe 5 (vale la stessa storia degli indici degli Array). Se la sottostringa non è presente torna semplicemente -1. Come si nota noi cerchiamo 3 sottostringhe: cerchiamo "http://" che abbia indice 0 ovvero che sia la prima cosa presente nella stringa, infatti un collegamento esterno deve per forza iniziare con http:// o https:// (Non credo metteremo mai link a pagine https, quindi mi limito a testare http). Poi testiamo che il nostro collegamento non contenga tpatpc.blogspot.com altrimenti sarebbe un collegamento interno (infatti vogliamo che indexOf sia <= -1, ricordate?) e lo stesso facciamo per www2.blogger.com, anche questi non sono proprio collegamenti esterni, sono infatti i collegamenti di gestione di blogger.

Quarta riga...ancora un if... vogliamo che length della lista estrapolata tramite getElementsByTagName("img") da linkz[i] sia 0. Ovvero? Che non ci siano immagini all'interno del tag a! La nostra immagininia per i link esterni vogliamo sia presente solo sui link testuali

Infine l'ultimo è un semplice assegnamento di stile css. Il tag a che arriva fin lì cambierà il proprio css in external, l'equivalente in html di aggiungere a tale tag a una proprietà class="external".


Ho cercato di essere semplice e di spiegare quasi tutto di un pezzettino di codice che con un po' di pratica leggereste come fosse nulla. Spero d'aver conquistato qualcuno con la magica arte della programmazione, come dico sempre, sono pronto a farvi da tutor :-D