Blupixel IT Blog – Articoli e Tutorial Informatica e Programmazione

Blog ufficiale di Blupixel IT Srl

Conteggio alla rovescia con Javascript

Per eseguire una qualche operazione in javascript dopo un certo periodo di tempo, magari visualizzando a schermo un contatore che segnala tra quanti secondi avverrà l’evento, creare un elemento HTML come segue:

<div>
La finestra si chiuderà tra
<span id=”conteggio_chiusura”>10</span>
secondi
</div>

 

quindi aggiungere nella pagina questo script

<script type=”text/javascript”>
    // Seleziono l’elemento nella pagina con attributo id = “conteggio_chiusura”
    var element=document.getElementById(‘conteggio_chiusura’);

    // traduco il contenuto dell’elemento selezionato in un intero equivalente in secondi
    var time = parseInt(element.innerHTML);

    // eseguo la funzione che procede alla riduzione del conteggio
    var timer = setInterval(function(){
        if( time ){
            element.innerHTML = –time;
        } else {
            clearInterval(timer);
            window.close();
        }
    }, 1000);
</script>

 

Le prime due istruzioni sono abbastanza intuitive.
Per quanto riguarda, invece l’ultimo comando la funzione non fa altro che eseguire ogni 1000 msec, ovvero 1 secondo, la funzione definita. La funziona esegue quanto segue:
- controlla se il valore dei secondi segnati nel blocco di codice html è diverso da 0
- se è diverso da zero lo riduce di 1 (—time) e lo stampa all’interno dell’html al posto del numero precedente (element.innerHTML = …)
- se è uguale a 0 (quindi è falso) elimina l’istanza del setInterval impostato in modo che non venga più eseguito (clearInterval(timer)) e chiude la finestra corrente (window.close())

Naturalmente il numero di secondi da cui iniziare si setta direttamente nel codice HTML mettendolo al posto del 10 e al posto della chiusura della finestra si può decidere di impostare un qualsiasi comando.

A presto

AJAX con jQuery

AJAX è l’acronimo di Asynchronous JavaScript and XML, ovvero esecuzione di javascript e XML per l’esecuzione asincrona di alcune operazioni.

Il funzionamento di AJAX è semplice:
- un javascript spedisce dei dati ad una pagina, interrogandola direttamente
- la pagina riceve i dati e crea la sua normale struttura in XML o HTML
- il javascript legge le parti della pagina che gli interessano ed alabora un risultato in base al loro contenuto

Costruire delle operazioni in AJAX diventa molto semplice usando jQuery.

Sarà sufficiente inserire nel file .js solitamente incluso una funzione circa come questa:

jQuery.getSomeValue=function(var1, var2, …){
    $.ajax({

    // metodo di invio dati
    type: “POST”,

    // pagina da interrogare e a cui spedire i dati
    url: “/ajax”,

    // Tipo di pagina restituita (html o xml)
    dataType: “html”,

    // Dati da spedire
    data: “action=getValue&param=”+var1,

    // cosa eseguire in caso di successo
    success: function(xml) {
        var app=$(xml).find(‘#res’);
        if (app){
            alert($(app).html());
        }
        }
    });
    return false;
}

Il codice crea in pratica una funzione chiamata in questo caso getSomeValue che accetta 1 o più variabili.
Il metodo di invio dati può essere POST o GET. Lo script spedisce i dati segnati in “data:” (nel nostro caso una variabile con nome “action” e valore “getValue” e una di nome “param” con valore “var1″), che sono separati dal simbolo &, alla pagina segnata nel parametro “url:”. In questo caso supponiamo che sullo stesso sito sia presente una pagina con indirizzo /ajax che possa ricevere i dati e restituire il risultato.

Una volta spediti i dati all’url, nè verrà costruita una pagina (in questo caso per comodità in html) da cui potremmo estrarre dei dati.
In questo caso, ad esempio, cerchiamo l’elemento nella pagina ritornata che ha id=”res”, e se viene trovato facciamo un alert dell’html che contiene.

Nella funzione success potrete estendere il funzionamento a seconda delle esigenze appendendo l’html ritornato all’interno della pagina o eseguendo operazioni complesse sulla base del risultato.

A presto

Sincronizzare lo scroll di due div con Javascript

Supponiamo di avere due diverse aree di testo come possono essere due div affiancati:

 <div id=”first_file” style=”float:left; height: 400px; width: 400px; overflow:scroll; white-space:nowrap; padding: 10px;”>
TESTO 1 ..
</div>
<div id=”second_file” style=”float:left; height: 400px; width: 400px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; padding: 10px; margin-left: 10px;”>
TESTO 2
</div>

Che sarebbero più o meno così:

Testo 1..

..1 – 1..

..2 – 1..

..3 – 1..

..4 – 1..

..5 – 1 ..

..6 – 1 ..

..7 – 1 ..

..8 – 1 ..

..9 – 1 ..

..10 – 1 ..

..11 – 1 ..

.. fine 1 ..

Testo 2..

..1 – 2..

..2 – 2..

..3 – 2..

..4 – 2..

..5 – 2 ..

..6 – 2 ..

..7 – 2 ..

..8 – 2 ..

..9 – 2 ..

..10 – 2 ..

..11 – 2 ..

.. fine 2 ..

Visualizziamo dei due scroll delle aree di testo, solo il primo, che risulterà, così, centrale tra i due.

Adesso aggiungiamo sotto uno script:

<script type=”text/javascript”>
setInterval(function(){
var actual_pos = document.getElementById('first_file').scrollTop;
document.getElementById('second_file').scrollTop = actual_pos;
}, 100);
</script>

Questo script provvede ogni 100 millisecondi ad aggiornare lo scroll del secondo riquadro in base alla posizione del primo.