Guide e Tutorial

tScroll (tabella con scroll) – Plugin jQuery  

realizzato da , il 06 ago. 2013, categoria Javascript

Javascript
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

In questo articolo realizzeremo un plugin jQuery che ci permetta di implementare una tabella HTML con scrollbar incorporata.
In altre parole la nostra tabella avrà fissa l’intestazione (thead) e il fondo (tfoot) mentre la parte centrale (tbody) sarà scrollabile in un box con altezza da noi definita.

Iniziamo subito lo sviluppo del plugin, che chiameremo “tScroll“, determinando l’unico parametro da passare alla funzione:

  • h_box: altezza scroll della tabella

Una volta terminato il lavoro vorremmo poter invocare su una tabella con id=myTable il plugin con questa sintassi:

$('#myTable').tScroll({
      h_box: '300px'
});

Ottenendo ad esempio il seguente risultato:

Introduciamo il codice del plugin che successivamente commenteremo:

(function($){  
    $.fn.tScroll = function(options) {    
    return this.each(function() {
        // Recupero info tabella
        options.id_table = $(this).attr('id');
        var border = $('#'+options.id_table).attr('border');
        var cellspacing = $('#'+options.id_table).attr('cellspacing');
        var cellpadding = $('#'+options.id_table).attr('cellpadding');
        var classe = $('#'+options.id_table).attr('class');
        
        // Fisso thead
        var colonne = $('#'+options.id_table+' thead th').length;
        for(var i=0; i<colonne; i++){
            var w_th=$('#'+options.id_table+' thead th').eq(i).css('width').replace('px','');
            $('#'+options.id_table+' thead th').eq(i).css('width',w_th+'px');    
        }
        
        // Fisso tbody
        var colonne = $('#'+options.id_table+' tbody tr:eq(0) td').length;
        for(var i=0; i<colonne; i++){
            var w_th=$('#'+options.id_table+' tbody tr:eq(0) td').eq(i).width();
            $('#'+options.id_table+' tbody tr:eq(0) td').eq(i).width(w_th);    
        }
        
		var table2 = "";
        // Verifico se presente un tfoot
        if($('#'+options.id_table+' tfoot').length>0){
            // Fisso tfoot
            var colonne = $('#'+options.id_table+' tfoot td').length;
            for(var i=0; i<colonne; i++){
                var w_th=$('#'+options.id_table+' tfoot td').eq(i).css('width');
                $('#'+options.id_table+' tfoot td').eq(i).css('width',w_th);    
            }
			
			table2 = "<table id='tScroll_t2_"+options.id_table+"' border='"+border+"' cellspacing='"+cellspacing+"' cellpadding='"+cellpadding+"' class='"+classe+"'><tfoot>"+$('#'+options.id_table+' tfoot').html()+"</tfoot></table>";
        }
        
		var tbox = "<div id='tScroll_box_"+options.id_table+"'></div>";
        var table1 = "<table id='tScroll_t1_"+options.id_table+"' border='"+border+"' cellspacing='"+cellspacing+"' cellpadding='"+cellpadding+"' class='"+classe+"'><thead>"+$('#'+options.id_table+' thead').html()+"</thead></table>";
        var div = "<div id='tScroll_body_"+options.id_table+"'></div>";
		
        // Compongo le tre tabella in sequenza
        $(tbox).insertBefore('#'+options.id_table);
        $('#tScroll_box_'+options.id_table).append(table1);
        $('#tScroll_box_'+options.id_table).append(div);
        $('#tScroll_box_'+options.id_table).append(table2);
        
        $('#tScroll_body_'+options.id_table).append($('#'+options.id_table));
        
        $('#'+options.id_table).css('marginTop',0);
        $('#'+options.id_table).css('marginBottom',0);
        $('#'+options.id_table+" thead").remove();
        $('#'+options.id_table+" tfoot").remove();
        
        var w = $('#'+options.id_table).width() + 18;
        // Applico al box centrale l'altezza prefissata
        $('#tScroll_body_'+options.id_table).css('width',w)
                          .css('height',options.h_box)
                          .css('padding','0px')
                          .css('margin','0px')
                          .css('overflow-y','scroll')
                          .css('text-align','left');
		
		$('#tScroll_box_'+options.id_table).css('width',w)
										   .css('padding','0px')
										   .css('margin','0px')
										   .css('text-align','left');
    });
    
    return false;
    
    };  
})(jQuery);

Analizziamo il codice focalizzando l’attenzione innanzitutto sulla sequenza di operazioni che vengono compiute:

  1. Recuperiamo alcune info dalla tabella, ad esempio l’eventuale bordo la classe e attributi come cellspacing e cellpadding
  2. Intercettiamo il THEAD della tabella e fissiamo la larghezza delle celle
  3. Intercettiamo il TBODY della tabella e fissiamo la largehzza delle celle
  4. Intercettiamo (se presente) il TFOOT della tabella e fissiamo la larghezza delle celle
  5. Estraiamo i tre blocchi che compongono la tabella e inseriamoli in 3 tabelle diverse, mantenendo la giusta sequenza (una tabella con il solo THEAD, una tabella con il solo TBODY e una tabella con il solo TFOOT)
  6. Alla tabella centrale (la tabella del TBODY) applichiamo l’altezza definita in h_box e impostiamo lo scroll dell’asse y

In altre parole il concetto di base racchiuso nel nostro plugin è così riassumibile:

dopo aver bloccato la larghezza delle cella che compongono la tabella, creiamo 3 tabelle in sequenza ognuna contenente una parte della tabella originale (thead, tbody, tfoot) e quindi solo alla tabella centrale fissiamo l’altezza in pixel e il conseguente scroll.

Più precisamente la tabella centrale contenente il body viene prima racchiuso -per comodità- in un DIV al quale poi tramite il metodo .css di jQuery viene fissata l’altezza (righe da 55 a 62):

var w = $('#'+options.id_table).width() + 18;

$('#tScroll_body_'+options.id_table).css('width',w)
                          .css('height',options.h_box)
                          .css('padding','0px')
                          .css('margin','0px')
                          .css('overflow-y','scroll')
                          .css('text-align','left');

Da notare che ogni tabella/blocco creato avrà un suo ID composto.
Inoltre la larghezza del box terrà conto dello spazio occupato dallo scroll aggiungendo 18px mentre l’altezza sarà il valore del parametro in option.h_box.

Chiaramente, come sempre, tengo a sottolineare che questa è solo una possibile soluzione dello spinoso problema riguardante le tabelle con scroll. Chi sviluppa quotidianamente per il web si sarà almeno una volta trovato dinnanzi questa richiesta da parte del committente e fortunatamente in rete sono proposte molte soluzioni, alcune ottime altre invece “poco funzionanti”.
La strada che abbiamo percorso è forse la più semplice e ovvia ma sicuramente è anche ottimizzabile e migliorabile.

Infine, qualora ce ne fosse bisogno, tengo a precisare che per il corretto funzionamento del plugin tScroll è necessario che la nostra tabella di partenza sia strutturata tenendo conto della presenza del tag thead, del tag tbody ed eventualmente del tag tfoot. Inoltre le celle che compongono l’intestazione (thead) devono essere definite utilizzando il tag TH; ciò comunque non toglie che il codice può essere facilmente modificato per essere adattato alle nostre tabelle esistenti.

Cliccando qui è possibile vedere in azione il plugin tScroll.

Cliccando qui è possibile scaricare il codice del plugin tScroll.


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:, , , , ,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑


Spazio Pubblicitario

Esercizio 30 – Semplice gioco del TRIS  

realizzato da , il 11 feb. 2013, categoria Java

Java
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

Implementare una semplice versione del gioco del tris.
Realizzare quindi una matrice (3×3) come struttura dati di base e fornire i seguenti metodi:

  • set(riga, colonna, simbolo) [inserisce una giocata]
  • toString() [stampa lo stato della matrice]
  • getWinner() [stampa l'eventuale vincitore]

Lanciare un’eccezione di tipo IllegalArgument qualora la posizione scelta per l’inserimento di una giocata sia già occupata.
Realizzare una classe di test denominata Gioca.java.

[In un prossimo esercizio riprenderemo il Tris fornendo un'interfaccia grafica  e ulteriori metodi]

La classe Tris.java:

public class Tris
{

  // Metodo Costruttore
  // Creo una matrice 3*3 vuota
  public Tris()
  {
    board = new String[rows][columns];
    for(int i=0; i<rows; i++)
      for(int j =0; j<columns; j++)
      {
          board[i][j] = " ";
      }
  }

  // Metodo che restituisce lo stato della matrice
  public String tostring()
  {
    String r = "";
    for(int i=0; i<rows; i++)
    {
        r = r + "|";
        for (int j=0; j<columns ; j++)
          r=r + board[i][j];
        r = r + "|\n";
    }
    return r;
  }

  // Metodo che permette di inserire una giocata
  public void set(int i, int j, String player)
  {
      if(board[i][j] != " ")
      {
        throw new IllegalArgumentException("Posizione occupata");
      }
      board[i][j] = player;
  }

  // Metodo che restituisce il nome del giocatore vincitore
  public String getWinner()
  {
    int k = 0;
    int h = 0;
    // Verifico se il tris è presente in una riga
    for(int i=0; i<rows; i++)
    {
        for (int j=0; j<columns ; j++)
        {
          if(board[i][j]== "x")
          {
            k++;
            if(k==3){ return " VINCE IL GIOCATORE X "; }
          }
          else
          {
             if(board[i][j] == "o")
             {
                h++;
                if(h==3){ return " VINCE IL GIOCATORE O "; }
             }
          }
        }
        k=0;
        h=0;
    }
    // Verifico se il tris è presente in una colonna
    for(int i=0; i<columns; i++)
    {
        for (int j=0; j<rows ; j++)
        {
          if(board[j][i]== "x")
          {
            k++;
            if(k==3){ return " VINCE IL GIOCATORE X "; }
          }
          else
          {
             if(board[j][i] == "o")
             {
                h++;
                if(h==3){ return " VINCE IL GIOCATORE O "; }
             }
          }
        }
        k=0;
        h=0;
    }

    // Verifico se il tris è presente in una diagonale
    for(int i=0; i<rows; i++)
    {
        int j = i;
        if(board[i][j]== "x")
        {
            k++;
            if(k==3){ return " VINCE IL GIOCATORE X "; }
        }
        else
        {
           if(board[i][j] == "o")
           {
              h++;
              if(h==3){ return " VINCE IL GIOCATORE O "; }
           }
        }
    }
    k=0;
    h=0;
    int j = 2;
    for(int i=0; i<rows; i++)
    {
        if(board[i][j] == "x")
        {
            k++;
            if(k==3){ return " VINCE IL GIOCATORE X "; }
        }
        else
        {
           if(board[i][j] == "o")
           {
              h++;
              if(h==3){ return " VINCE IL GIOCATORE O "; }
           }
        }
        j--;
    }
    return "" ;
  }

  private String[][] board;
  private static final int rows = 3;
  private static final int columns = 3;
}

La classe di test, Gioca.java:

import java.util.Scanner;
public class Gioca
{

  public static void main(String[] args)
  {
      int numGiocate = 0;
      String player = "x";

      // Costruisco un nuovo oggetto Tris
      Tris game = new Tris();
      Scanner in = new Scanner(System.in);

      // Procedo con il gioco
      while(true)
      {
          // Giocata del giocatore
          System.out.println(game.toString());
          System.out.print("inserisci riga per " + player);
          System.out.println(" (-1 per uscire): ");

          int riga = in.nextInt();

          if (riga < 0) return;

          System.out.print("Inserisci colonna per " +player);
          System.out.println(" : ");

          int colonna = in.nextInt();

          // Inserimento giocata
          game.set(riga,colonna,player);

          // Visualizzo lo stato del tris
          System.out.println(game.tostring());

          // Verifico se è presente un vincitore
          String verifica = game.getWinner();
          if(verifica.equalsIgnoreCase(" VINCE IL GIOCATORE X ") || verifica.equalsIgnoreCase(" VINCE IL GIOCATORE O "))
          {
              // Il gioco termina se un giocatore vince la partita
              System.out.println(verifica);
              return;
          }

          numGiocate++;
          if(numGiocate==9)
          {
            // Se il tris è pieno e non c'è vincitore, la partita termina
            System.out.println("NESSUN VINCITORE");
            return;
          }

          // Se ha giocato X allora dopo gioca O, altrimenti viceversa
          if(player=="x") player = "o";
          else player = "x";
      }

  }
}

Cliccando qui è possibile scaricare il codice completo.


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:, ,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑

CSS: pseudo-classi e pseudo-elementi  

realizzato da , il 31 gen. 2013, categoria Html/Css

Html/Css
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

Pseudo-classi

Una pseudo-classe non definisce un elemento ma un particolare stato di quest’ultimo.
In buona sostanza imposta uno stile per un elemento al verificarsi di certe condizioni.

A livello sintattico, una pseudo-classe non può essere mai dichiarata da sola, bensì deve appoggiarsi ad un elemento. La sintassi è la seguente:

elemento:pseudo_classe { … }

Il segno di due punti (:) divide, senza ulteriori spazi, l’elemento dal nome della pseudo-classe ad esso associato.

a:link {
	color : green;
}
a:visited {
	color : yellow;
}

Traduciamo così le regole appena definite:
i collegamenti ipertestuali (<a>) che non siano stati ancora visitati (:link) avranno il colore verde; i collegamenti che invece risultato già visitati (:visited) avranno il colore giallo.
Da qui risulta più chiaro il concetto espresso in precedenza: la pseudo-classe link definisce lo stile (colore verde) solo in una determinata situazione, ovvero quando il link non è stato attivato (cliccato). Appena ciò dovesse avvenire, il testo non sarà più verde, perchè la condizione originaria è venuta meno e di conseguenza diventerà valida la condizione visited e le regole della relativa pseudo-classe (colore giallo).

Pseudo-classi CSS

Una pseudo-classe può anche essere associata a selettori di tipo classe.
In questo caso la pseudo-classe deve seguire la dichiarazione della classe e le regole di stile definite saranno applicate esclusivamente all’elemento con attributo class dichiarato.

a.collegamento:link {
	color : green;
}
a.collegamento:visited {
	color : yellow;
}

La regola verrà così letta:
Avranno il testo verde solo i link non ancora visitati che abbiano come attributo class=‘collegamento’, di conseguenza il testo sarà giallo se il link è visitato e il class è uguale a ‘collegamento’.

First-Child

La pseudo classe first-child permette di selezionare e formattare un elemento che si trovi ad essere il primo elemento figlio di un altro elemento.

elemento:first-child { … }

Vediamo un esempio concreto a chiarimento:

p:first-child {
	color : green;
}

A tutti i paragrafi viene assegnato il colore verde solo se il singolo paragrafo è il primo elemento figlio di qualsiasi altro elemento.
Esaminiamo questa porzione di codice html:

<div>
	<p>Questo paragrafo è il primo figlio</p>
	<p>Questo paragrafo è il secondo figlio</p>
</div>
<div>
	<p>Questo paragrafo è il primo figlio</p>
	<p>Questo paragrafo è il secondo figlio</p>
	<p>Questo paragrafo è il terzo figlio</p>
</div>

Solo i primi paragrafi dei due div presenti saranno di colore verde:

First-child CSS

Pseudo-elementi

Vi sono parti in un documento HTML che non sono rappresentate da nessun tag in particolare, ma che è possibile comunque modificare e formattare secondo i propri desideri con i CSS grazie ai cosiddetti pseudo-elementi.

Nel momento in cui in un foglio di stile si costruisce una regola che ad essi fa riferimento è come se nel documento venissero inseriti nuovi elementi che hanno la caratteristica di essere appunto fittizi, presenti nel CSS ma non nel codice che definisce la struttura della pagina.

Il supporto di questo tipo speciale di selettore è garantito solo dai browser più recenti.

Ad esempio con il selettore :first-letter è possibile formattare la prima lettera di qualunque elemento contenente testo. Le proprietà modificabili sono ovviamente tutte quelle relative al carattere e al testo, ma anche quelle legate al colore, allo sfondo, ai margini e al padding.

La sintassi è la seguente:

elemento:first-letter { … }

In pratica scrivendo la seguente regola CSS:

p:first-letter {
	color : red;
	font-size : 20px;
}

definiamo che la prima lettera di ogni paragrafo sarà di colore rosso e con un font di 20px.

First-letter CSS

Un altro pseudo-elemento di uso comune è :first-line la cui sintassi è uguale a first-letter con l’unica differenza che le regole CSS verranno applicate alla prima riga di un elemento contenente testo.

Ad esempio, riprendendo il codice precedente:

p:first-line {
	color : red;
	font-size : 20px;
}

otterremo il seguente risultato:

First-line CSS


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:, , , ,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑

CSS: selettori speciali  

realizzato da , il 31 gen. 2013, categoria Html/Css

Html/Css
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

Gli attributi CLASS e ID

Dall’HTML 4 sono stati introdotti due importanti attributi applicabili a qualsivoglia elemento html. Gli attributi sono: class e id.
ID assume un valore arbitrario, scelto dallo sviluppatore, purché esso sia univoco in tutto il documento. In altre parole l’id è un valore, alfanumerico, che permette di identificare un elemento all’interno del codice html. Un esempio è:

<p id='paragrafo'>
...
</p>

CLASS può assumere un valore stringa qualunque e differisce dall’id perché più elementi possono condividere lo stesso valore.
E’ quindi permesso definire:

<p class='blocco'> ... </p>
<div class='blocco'> ... </div>

Applicare questi attributi ai tag di una pagina html non muta il loro aspetto, ma ci permette innanzitutto di identificare gli elementi, classificarli e distinguerli tra loro.
In questo modo class e id diventano una delle chiavi principali per sfruttare al meglio le potenzialità dei fogli di stile.
Sarà possibile applicare una definizione di stile ad un singolo elemento grazie all’id, oppure a più elementi di tipo diverso grazie all’attributo class.
Negli esempi visti nella lezione precedente, non eravamo sufficientemente in grado di applicare uno stile solo ad un determinato elemento, bensì eravamo in grado di applicare un regola CSS a tutti gli elementi di uno stesso tipo o al massimo in relazione alla loro gerarchia (elemento discendente o figlio).

Selettore classe

Per identificare una classe si usa far precedere il nome da un semplice punto (.):

. nome_della_classe

Questa è la sintassi base.
Un selettore classe così definito può essere applicato a tutti gli elementi di un documento HTML. Vediamo quindi un esempio concreto del selettore classe:

.testo_rosso {
	color : red;
}
.testo_verde {
	color : green;
}

Analizziamo ora la seguente porzione di codice html, nel quale verranno definiti alcuni elementi che utilizzano le classi definite sopra:

<div>Questo è un div che non appartiene ad alcuna classe.</div>
<div class='testo_rosso'>Questo div appartiene alla classe testo_rosso.</div>
<div class='testo_verde'>Questo div appartiene alla classe testo_verde.</div>
<span class='testo_verde'>Anche questo span appartiene alla classe testo_verde!</span>

Il risultato finale è il seguente:

Selettore classe

Nell’esempio, la classe testo_verde è stata applicata ad elementi di natura diversa come un div e uno span. Questo modo di operare ci fornisce un grado di personalizzazione e flessibilità molto alto al cospetto dei semplici selettori di elementi.

Esiste un secondo tipo di sintassi per il selettore di classe:

elemento.nome_della_classe

E’ una regola più restrittiva rispetto alla sintassi generica. Se infatti definiamo le seguenti regole CSS:

p.testo_rosso {
	color : red;
}
div.testo_verde {
	color : green;
}

Lo stile verrà applicato esclusivamente ai paragrafi che presentino attributo class=‘testo_rosso’ e ai div con class=‘testo_verde’.
In pratica se definiamo all’interno del codice html un paragrafo con classe ‘testo_verde’ questo non acquisirà lo stile definito nel CSS perché ‘testo_verde’ è riferito esclusivamente ad elementi div.

Questo secondo tipo di sintassi va usata solo se si pensa di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece si ritiene di doverla applicare a tipi diversi è necessaria la sintassi generica.

Selettore ID

La sintassi di un selettore ID risulta essere ancor più semplice di quella del selettore classe.

#nome_id

In questo caso è necessaria esclusivamente questa sintassi essendo per natura l’ID univoco all’interno del codice html,  specificare l’elemento al quale è associato l’id sarebbe superfluo.

Vediamo un esempio pratico, riprendendo il codice descritto per il selettore classe:

#testo_rosso {
	color : red;
}
#testo_verde {
	color : green;
}

Riscriviamo la porzione di codice html, utilizzando al posto dell’attributo class l’attributo id:

<div>Questo è un div che non appartiene ad alcuna classe.</div>
<div id='testo_rosso'>Questo div ha come ID testo_rosso.</div>
<div id='testo_verde'>Questo div ha come ID testo_verde.</div>

Il primo div non ha un id settato, mentre il secondo e il terzo hanno come id rispettivamente ‘testo_rosso’ e ‘testo_verde’. Il risultato nella finestra del browser è il seguente:

Selettore ID


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑

CSS: i selettori (parte II)  

realizzato da , il 31 gen. 2013, categoria Html/Css

Html/Css
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

[... se non hai letto ancora la prima parte ...]

Raggruppamento di selettori

È possibile nei CSS raggruppare diversi elementi al fine di semplificare il codice. Gli elementi raggruppati vanno separati da una virgola.

Il raggruppamento è un’operazione molto conveniente. Pensiamo a questo scenario:

h1 { color : red; }
h2 { color : red; }
h3 { color : red; }
h4 { color : red; }

Con un raggruppamento di selettori potremo riscrivere le dichiarazioni precedenti così:

h1, h2, h3, h4 {
	color : red;
}

Questa tecnica ci permette di evitare inutili ripetizioni di regole all’interno del foglio di stile ed inoltre mantenere ordine e leggibilità. E’ inoltre possibile raggruppare anche elementi diversi tra loro, ad esempio titoli con paragrafi oppure div con link etc.

Selettore del discendente

Questi tipo di selettore serve a selezionare tutti gli elementi che nella struttura ad albero di un documento siano discendenti di un altro elemento specificato nella regola.
Ricordiamo che un elemento è discendente di un altro se è contenuto al suo interno, a qualsiasi livello.
Un selettore discendente nella forma “A B” è applicato quando un elemento B è un arbitrario discendente di un elemento antenato A. Inoltre l’elemento B non deve necessariamente essere figlio di A.
Di seguito un esempio:

div p {
	color : yellow;
	background-color : gray;
}

Innanzitutto il selettore, per correttezza, va letto da destra verso sinistra. Nell’esempio verranno selezionati tutti i paragrafi discendenti di elementi ed applicate le regole definite.

La seguente porzione di codice html:
</pre>
<div>Questo div contiene al suo interno un paragrafo.

 Al paragrafo è associato uno stile in relazione alla discendenza.</div>
<pre>
	Questo paragrafo invece non è discendente del div, quindi ha stile diverso.

produce il seguente risultato all’interno della finestra del browser:

Selettore del discendente

Da notare infine come il paragrafo che non è discendente del div, non rientrando nella regola CSS, avrà come stile quello di default.

Selettore del figlio

Con questo selettore è possibile selezionare un elemento che è figlio diretto di un altro.
Il selettore figlio è all’apparenza simile al selettore del discendente visto in precedenza.
La differenza sta nella relazione di discendenza degli elementi, che in questo caso deve essere di primo livello.

Chiariamo con un esempio html utile anche per comprendere meglio il significato di selettore del discendente:

<body>
	<p>
		Questo è il primo paragrafo.
	</p>
	<div>
		<p>
			Questo è il secondo paragrafo.
		</p>
	</div>
	<p>
		Questo è il terzo paragrafo.
	</p>
</body>

Dei tre paragrafi solo il primo e il terzo sono figli diretti di body.
Il secondo è invece figlio diretto di un elemento div. Tutti e tre, però, sono discendenti di body.
L’immagine chiarisce ulteriormente il concetto:

Discendenza elementi

La sintassi per definire un selettore figlio è la seguente:

body > p {
	color : green;
}

Come si vede, un’ulteriore differenza risiede nella sintassi.
Per il selettore figlio i due elementi devono essere separati dall’operatore “maggiore>. Anche in questo caso la lettura logica va fatta da destra a sinistra. Nell’esempio si selezionano tutti i paragrafi figli diretti dell’elemento body.

Selettore CSS figlio

E’ importante aggiungere che il selettore figlio al momento non è supportato dal browser Explorer fino alla versione 7.


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:, ,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑

CSS: i selettori (parte I)  

realizzato da , il 31 gen. 2013, categoria Html/Css

Html/Css
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

Un concetto importante da tenere in considerazione prima di analizzare i vari tipi di selettori css è l’ereditarietà delle regole di stile.

Se difatti si applica uno stile ad un elemento questo sarà ereditato anche dagli elementi contenuti al suo interno, a condizione che l’elemento interno non abbia anch’esso una dichiarazione di stile.
Definire ad esempio un paragrafo con un particolare stile ed annidare al suo interno uno span senza regole, fa si che lo span acquisisca le regole di stile del suo padre.

p {
	font-size : 20px;
	color : red;
}

Scrivere poi nel codice html:

<p>
	Questo paragrafo ha uno stile ad esso applicato. Gli elementi interni ereditano 	lo stesso stile.
	<span>Come questo span!</span>
</p>

Produrrà il seguente risultato:

Introduzione ai selettori CSS

Quindi in definitiva è importante sapere che le proprietà di uno stile di un livello figlio sono ereditate dallo stile del livello genitore.

Ereditarietà dello stile CSS

Il selettore

Fondamentalmente una regola CSS viene applicata ad un selettore.
La parola parla da sé: si tratta di una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola.

Vedremo come sarà possibile identificare un selettore, raggrupparli e gestire la loro nidificazione. Inoltre applicare stili differenti ai selettori in base alla loro parentela nell’albero strutturale di un documento html.

Il selettore generale

Il selettore generale, indicato con asterisco (*), corrisponde a qualsiasi elemento nella pagina html.

Scrivere ad esempio:

* {
	font-size : 20px;
	color : red;
}

Tutti gli elementi della pagina, sia che si tratti di titoli, paragrafi, div o altri contenitori, avranno come colore del testo rosso e grandezza di 20px.

Selettore generale CSS

Il selettore di elementi

E’ il tipo di selettore più utilizzato, ed è quello già visto più volte all’inizio di questa lezione.
E’ anche il più semplice dei selettori, infatti è costituito da uno qualsiasi degli elementi HTML.

Un esempio di foglio di stile che utilizzi i selettori di elementi è il seguente:

body {
	font-size : 12px;
	background-color : grey;
}

h1 {
	color: red;
}

p {
	border : 1px solid white;
	padding : 5px;
}

Lo sviluppatore di CSS utilizzando questi tipi di selettori può definire regole di stile per ciascun tag html che compone le proprie pagine.
Nell’esempio, vengono definite le dichiarazioni per il body, i titoli h1 e i paragrafi. Il vantaggio nell’uso di questi selettori è la velocità con la quale è possibile definire lo stile di di intere pagine html con poche linee di codice.
Uno degli svantaggi però nasce con la nidificazione degli elementi. Infatti maggiore sarà il livello di nidificazione e maggiore sarà la probabilità che le diverse regole si sovrascrivano tra loro.

[... vai alla seconda parte ...]


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:, ,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑

CSS: sintassi di una regola CSS  

realizzato da , il 31 gen. 2013, categoria Html/Css

Html/Css
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

Scrivere una regola CSS vuol dire applicare un particolare stile grafico ad un elemento che compone la pagina html.
Una regola si può comporre di una o più dichiarazioni, dove ciascuna dichiarazione influisce su una specifica proprietà dell’elemento.

Una regola è composta da:

  • un selettore;
  • il blocco delle dichiarazioni.

Il selettore serve a definire la parte del documento a cui verrà applicata la regola, il blocco delle dichiarazioni invece sarà un elenco di proprietà.

Vediamo in pratica, la nostra prima regola CSS:

h1 {
	color : red;
	background-color : black;
}

Traduciamo così la regola appena vista:

tutti gli elementi <h1> presenti nella pagina a cui è associata questo foglio di stile, visualizzeranno il contenuto di tale tag con un font di colore rosso e uno sfondo di colore nero.

Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni.
Esse sono sempre composte da una coppia:

  • proprietà;
  • valore.

La proprietà definisce un aspetto dell’elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti.

Una limitazione fondamentale da rispettare è che per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori.

Pertanto la seguente regola è errata:

body {color background: black;}

Mentre questa è perfettamente valida:

div {font: 12px Verdana, arial;}

Inoltre se in un blocco si definiscono più dichiarazioni, come nell’esempio del tag <h1>, esse vanno separate dal punto e virgola.
Il linguaggio non impone che si metta il punto e virgola dopo l’ultima dichiarazione, ma alcuni browser più datati lo richiedono, quindi è buona norma aggiungerlo sempre per sicurezza e per una maggiore compatibilità.
Gli spazi bianchi lasciati all’interno di una regola non influiscono sul risultato. Il consiglio, anzi, è di lasciare sempre uno spazio tra le varie parti per una migliore leggibilità.

Applicare un foglio di stile ad una pagina

Riprendiamo la regola CSS vista nel paragrafo precedente:

h1 {
	color : red;
	background-color : black;
}

Per applicare questa dichiarazione ad una pagina html è necessario procedere in uno dei modi analizzati in precedenza. Dobbiamo quindi scegliere in che modo incorporare il CSS in un codice html. Per rientrare negli standard di corretta programmazione, realizziamo un file di stile esterno.

Salviamo quindi la nostra regola in un file di testo con estensione .css, che chiameremo ad esempio stile.css.

Il passo successivo sarà quello di associare ad una pagina html il foglio di stile:

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

Vediamo quindi il codice completo di una pagina html:

<html>
<head>
	<title>STILE CSS</title>
	<link href="stile.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<h1>I Promessi Sposi</h1>
	<p align='justify'>
        Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti...
	</p>
</body>
</html>

Il risultato nella finestra del browser è il seguente:

La prima regola CSS

Inserire commenti

Così come per l’html anche il CSS permette l’inserimento di commenti da parte dello sviluppatore.
Per inserire un commento la sintassi è la seguente:

/*
   questo è un commento per fogli di stile…
*/

I commenti posso essere posizionati sia fuori che dentro le singole regole. E’ buona norma utilizzarli soprattutto per chi leggerà e modificherà successivamente il file css.

/* Regola di stile per i titoli di livello h1 */
h1 {
	/* Imposto colore del testo a rosso e sfondo a nero */
	color : red;
	background-color : black;
}

Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑

CSS: introduzione ai fogli di stile  

realizzato da , il 31 gen. 2013, categoria Html/Css

Html/Css
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

Dietro il semplice acronimo CSS (Cascading Style Sheets – Fogli di stile a cascata) si nasconde uno dei fondamentali linguaggi standard del W3C.
La sua storia cammina su binari paralleli rispetto a quelli di HTML, di cui vuole essere l’ideale complemento. Da sempre infatti, nelle intenzioni degli uomini del Consortium, HTML, il CSS dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento.

L’obiettivo del CSS è quello di arricchire l’aspetto visuale ed estetico di una pagina e l’idea alla base dell’evoluzione di questo linguaggio è essenzialmente quello di separare il contenuto dalla presentazione.

Il W3C ha pubblicato due raccomandazioni (una sorta di standard) principali per il CSS:

  • CSS1 (1996)
  • CSS2 (1998)

Al momento è in fase di ultimazione la raccomandazione CSS3. Ciascuna di esse definisce le regole e la sintassi a cui deve attenersi uno sviluppatore di fogli di stile.

Perchè utilizzare il CSS

Nelle lezioni precedenti abbiamo appreso le basi per un buon sviluppo di pagine HTML, ed inoltre ci si sarà pienamente resi conto dei limiti di questo linguaggio sul lato della pura presentazione.

Quasi tutto quello che con HTML non è possibile realizzare, riusciremo a farlo con i fogli di stile.
Finalmente, ad esempio, potremo dare al testo delle nostre pagine un aspetto da word-processor: non solo con il colore o i font che si preferisce, ma con un sistema di interlinea pratico e funzionale, con le decorazioni desiderate, riuscendo a spaziare lettere e parole, impostando stili diversi per titoli e paragrafi, sfruttando i benefici dell’indentatura o della giustificazione.
Si potranno distanziare gli elementi che compongono la pagina, incastrarli e sovrapporli tra loro. Giocare con i colori, le sfumature e i bordi ed utilizzare immagini come sfondi.

Un altro vantaggio non di poco conto nell’uso dei fogli di stile è la separazione che esiste tra questi e le pagine html. In altre parole qualora si desideri cambiare un’immagine di sfondo da centinaia di pagine html, sarà necessario modificare esclusivamente poche righe del file CSS legato alle pagine. Il vantaggio inoltre è quello di avere pagine più leggere, facilmente modificabili e mantenibili.

Fogli di stile a cascata

Il termine cascading (presente nell’acronimo CSS) si riferisce all’ordine di applicazioni delle definizioni di stile.
In altre parole il browser interpreta le regole di stile dall’alto verso il basso e le compone insieme per realizzare la presentazione della pagina html a cui è associato.

Se ad esempio, una regola css definisce alcune proprietà di un elemento ed una successiva ne definisce di diverse per lo stesso elemento, queste vanno a sommarsi alle regole precedenti. Di conseguenza se una regola css ri-definisce una regola precedentemente definita, quest’ultima (essendo letta in cascata) sovrascrive la prima.

Inoltre è da sottolineare che le definizioni di stile in un file esterno hanno minore priorità di quelle definite all’interno dei tag html (con l’attributo style visto nella lezione precedente).
Di conseguenza una regola definita all’interno del tag sovrascrive quella definita all’interno del foglio di stile esterno.

CSS esterni ed interni

Esistono vari modi per inserire i fogli di stile in un documento html.
Innanzitutto è necessaria una prima distinzione:

  • CSS esterni
  • CSS interni

È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo editabili anche con il Blocco Note ai quali si assegna l’estensione .css.

Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento html.

A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.
Per caricare un foglio di stile esterno è possibile utilizzare due sintassi differenti: link o import. Nel primo caso scriveremo:

<link rel=”stylesheet” type=”text/css” href=”stile.css”>

Con import invece:

@import url(stile.css);

Entrambe le dichiarazioni di inclusione vanno inserite all’interno dell’head delle pagine html. La import inoltre va preceduta dal tag <style> e seguita dal rispettivo tag di chiusura </style>.

Questi tag sono essenziali anche per definire le regole di stile incorporati. In questo caso all’interno del tag <style> verranno elencate in cascata le varie dichiarazioni:

<style type=‘text/css’>
…..
</style>

E’ essenziale specificare il tipo di linguaggio di stile utilizzato con l’attributo type che nel nostro caso varrà sempre text/css.

Infine lo stile in linea prevede l’uso dell’attributo style per ogni elemento che compone la pagina web. Come visto nella lezione precedente, tale attributo è utile per acquisire familiarità con le diverse proprietà degli elementi html, ma da punto di vista stilistico non è un buon modo di implementare il CSS perché non rispetta la regola enunciata all’inizio di questa lezione, che vuole la netta separazione tra struttura e presentazione.

In definitiva possiamo utilizzare una regola generale per scegliere il tipo di inclusione del nostro codice CSS.

Il CSS interno direttamente sul codice in genere viene usato:

  1. per casi isolati e che non necessitano di cambiamenti
  2. per formattazioni che riguardano tutta la pagina HTML

Il CSS esterno invece:

  1. viene usato per formattazioni che riguardano anche più pagine HTML

Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:, , ,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑

Html: bordi, margini e spaziatura  

realizzato da , il 29 gen. 2013, categoria Html/Css

Html/Css
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

Spaziatura degli elementi

Esistono, come abbiamo già in parte visto, numerose proprietà legate agli elementi html. Alcune sono ad esempio necessarie per creare una spaziatura tra gli elementi o il loro contenuto (MARGIN e PADDING).

Scrivere:

<div style=‘margin:5px; padding:3px’>… Contenuto del blocco … </div>

ci permette di visualizzare un div che è distanziato di 5px su ogni lato dagli elementi che lo circondano e che inoltre ha una spaziatura interna di 3px rispetto al suo contenuto. E’ possibile in alternativa specificare il margine e il padding per ciascun lato dell’oggetto html, utilizzando le parole chiave top, right, left e bottom:

  • margin-top / padding-top
  • margin-left / padding-left
  • margin-right / padding-right
  • margin-bottom / padding-bottom

Vediamo un esempio che possa chiarire il loro utilizzo:

<body>
	<div style='margin:15px; padding:10px; background-color:#FF0000'>
		Questo div ha un margine di 15px e un padding di 10px...
	</div>
	<div style='margin-top:15px; padding:5px; background-color:#CCCCCC'>
		Questo div ha un margine di 15px e un padding di 10px...
	</div>
</body>

Nel codice html abbiamo definito due div:

  • il primo ha un margine di 15px e un padding di 10px;
  • il secondo ha un margine solo superiore di 15px e un padding di 5px.

Quando non viene specificato un margine, come nel secondo div, o un padding, ogni browser applica di default alcune regole di visualizzazione.
Ad esempio, per un div, Internet Explorer applica un margine di 2px e un padding di 1px su ogni lato.
Vediamo infine come il codice viene visualizzato nella finestra del browser.

Margini Html

Bordi degli elementi

Oltre che impostare colori, dimensioni e margini per gli elementi html, è possibile definire un bordo specificando lo spessore, il colore e il tipo di linea.
La proprietà in questione è BORDER e la sintassi è:

<div style=“border:2px  solid #FF0000”> … Contenuto del blocco … </div>

Il div in questione avrà un bordo si 2px con una linea di tipo solid e di colore rosso. Anche per border è possibile specificare un bordo diverso per ciascun lato utilizzando le parole chiave top, left, right e bottom.
E’ importante prestare attenzione alla sintassi utilizzata, infatti la proprietà border accetta tre parametri (dimensione, tipo linea e colore) separati da uno spazio. In alternativa però è possibile utilizzare la proprietà anche in maniera più semplice, scrivendo:

<div style=“border:2px ”> … Contenuto del blocco … </div>

In questo caso stiamo impostando esclusivamente la dimensione del bordo (2px), lasciando al browser e alle sue regole di defaul, la scelta del colore (solitamente nero) e del tipo di linea (solitamente solida).

Vediamo quindi un esempio che possa chiarire l’uso della proprietà border:

<body>
	<div style='background-color:#FF0000; border 2px solid #000000'>
		 Questo div ha un bordo solido di 2px e di colore nero
	</div>
        <div style='background-color:#CCCCCC; border 5px solid #FF0000'>
		Questo div ha un bordo solido di 5px e di colore rosso
	</div>
</body>

Il risultato è il seguente:

Bordi Html

Come annunciato in precedenza, esistono diverse tipologie di linea per i border:

  • Solid (linea solida)
  • Dotter (linea punteggiata)
  • Dashed (linea tratteggiata)
  • Double (linea doppia)
  • Ridge (linea in rilievo)

La sintassi resta invariata, per una bordo di tipo dotter scriveremo:

<div style=“border:2px  dotter #FF0000”> … Contenuto del blocco … </div>

Tipi di bordi Html


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:, , ,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑

Html: dimensione degli elementi  

realizzato da , il 29 gen. 2013, categoria Html/Css

Html/Css
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

Larghezza di un elemento

Grazie alla proprietà width (larghezza), è possibile specificare in pixel o in percentuale la larghezza che un elemento dovrà occupare all’interno della finestra del browser.

La sintassi è molto semplice:

<div style=‘width:200px’>…Contenuto…</div>

Questa proprietà è molto utile quando si desidera realizzare menu, finestre o elementi che richiedano dimensioni ben precise.

Vediamo un esempio di codice html:

</pre>
<div style="‘width: 200px;">Questo div è largo 200px</div>
<div style="‘width: 300px;">Questo div è largo 300px</div>
<div style="‘width: 400px;">Questo div è largo 400px</div>
<pre>

In questo esempio abbiamo definito 3 div in sequenza, ognuno con un semplice testo all’interno; abbiamo assegnato larghezze diverse e un colore di sfondo.
Da notare che l’altezza del div, in questo esempio, è dipeso dal contenuto; un div con più righe di testo risulterà più alto di un div con una sola riga.

Dimensione: width

In alternativa avremmo potuto utilizzare un valore percentuale per la proprietà width.

In questo caso è essenziale conoscere le dimensioni dell’elemento che conterrà l’elemento al quale applicare una dimensione in percentuale.
Difatti con il seguente codice:

<div style=‘width:50%’>…Contenuto…</div>

definiamo un div che occuperà il 50% in larghezza rispetto all’elemento che lo contiene.
Riprendendo il codice html precedente, apportiamo alcune modifiche:


</pre>
<div style="‘width: 20%;">Questo div è largo il 20%</div>
<div style="‘width: 30%;">Questo div è largo il 30%</div>
<div style="‘width: 50%;">Questo div è largo il 50%</div>
<pre>

I tre div definiti si adatteranno alle dimensioni del body e quindi della finestra del browser. In altre parole se rimpiccioliamo la finestra, anche i div assumeranno dimensioni diverse rispettando le percentuali assegnategli.

Style: width in percentuale Style: width in percentuale

Altezza di un elemento

Grazie alla proprietà height possiamo definire l’altezza massima che un elemento deve assumere.
La sintassi è del tutto simile alla proprietà width:

<div style=‘height:200px’>…Contenuto…</div>

Combinando insieme width e height è possibile realizzare dei box e della finestre a larghezza fissa. Vediamo il seguente esempio:


</pre>
<div style="width: 200px; height: 200px; background-color: red;">DIV</div>
<div style="width: 300px; height: 300px; background-color: red;">DIV</div>
<div style="width: 400px; height: 400px; background-color: red;">DIV</div>
<pre>

I tre box definiti hanno larghezza e altezza fissa e un colore di sfondo per essere evidenziati. Di seguito il risultato nella finestra del browser:

Style: height

Così come per la proprietà width, anche height permette di utilizzare un valore espresso in percentuale. Inoltre è possibile utilizzare simultaneamente percentuali e pixel, ad esempio definendo un’altezza in pixel e una larghezza in percentuale o viceversa.

Questo modo di operare è utile quando si vuol realizzare una pagina web che si estenda esclusivamente in larghezza o altezza.

Vediamo il seguente codice html:

<div style="width: 300px; height: 100%; background-color: red;">DIV</div>

Il div ha una larghezza fissa di 300px e un’altezza flessibile che si adatta alle dimensioni della finestra.

Dimensione: height in percentuale


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑

Archivio

aprile: 2014
L M M G V S D
« ago    
 123456
78910111213
14151617181920
21222324252627
282930  
Fabio Donatantonio - Salerno - Città di Castello (PG) - fabio@donatantonio.net



About me

Fabio Donatantonio Fabio Donatantonio nasce a Salerno il 17 Settembre 1983.
Cresce coltivando due grandi passioni: la musica e l'informatica.
... [continua]

Bing

Tutti gli articoli per categoria

Html/Css [35]

· CSS: pseudo-classi e pseudo-elementi
· CSS: selettori speciali
· CSS: i selettori (parte II)
· CSS: i selettori (parte I)
· CSS: sintassi di una regola CSS
· CSS: introduzione ai fogli di stile
· Html: bordi, margini e spaziatura
· Html: dimensione degli elementi
· Html: i colori e gli sfondi
· Html: altri campi di input
· Html: checkbox e radio button
· Html: le select
· Html: ulteriori campi di testo
· Html: i bottoni
· Html: i form
· Html: unione di celle
· Html: le tabelle
· Html: immagini come link e mappe
· Html: allineamento delle immagini e altri attributi
· Html: le immagini
· Html: realizzare un menu (esercizio guidato)
· Html: i segnalibri
· Html: i collegamenti ipertestuali
· Html: annidamento, indentazione e commenti
· Html: le entità
· Html: separatori ed elenchi
· Html: stile per il testo
· Html: i tag di uso frequente
· Validazione del codice HTML
· Il tag HTML, HEAD e META
· I documenti HTML
· Html: concetti preliminari
· Regole di progettazione ipertestuale
· Tipologie di Ipertesto
· Ipertesti, ipermedia e multimedialità

Java [30]

· Esercizio 30 – Semplice gioco del TRIS
· Esercizio 29 – Simulazione banca (ArrayList)
· Esercizio 28 – Implementazione di un portafoglio
· Esercizio 27 – Simulazione Casinò
· Esercizio 26 – Ricerca e conteggio di parole
· Esercizio 25 – Generatore numeri primi
· Esercizio 24 – Generatore numeri di Fibonacci
· Esercizio 23 – Triangolo con asterischi
· Esercizio 22 – Tasso di cambio
· Esercizio 21 – Serratura
· Esercizio 20 – Simple Calendario
· Esercizio 19 – Ordine lessicografico
· Esercizio 18 – Stampa stringa in base ad input
· Esercizio 17 – Numeri in virgola mobile (ordinamento)
· Esercizio 16 – Nomi dei mesi
· Esercizio 15 – Stampa al contrario
· Esercizio 14 – Erogazione del resto
· Esercizio 13 – Calcola quadrato
· Esercizio 12 – Simulatore lancio dado
· Esercizio 11 – Contatore di monete
· Esercizio 10 – Cartoline con testo fisso
· Esercizio 9 – Popolazione scarafaggi
· Esercizio 8 – Voto medio studente
· Esercizio 7 – Distributore di bibite (simple version)
· Esercizio 6 – Gestione conto bancario (con interessi)
· Esercizio 5 – Classe Rectangle
· Esercizio 4 – Cliente e gestione Conto Bancario
· Esercizio 3 – Realizzazione di Classi (Punto – Rettangolo)
· Esercizio 2 – Menu di scelta (istruzione if)
· Esercizio 1 – Modifica di stringhe

JavaScript [33]

· tScroll (tabella con scroll) – Plugin jQuery
· Finestra news con effetto fade (news ticker) – v 2.0 news da file esterno
· toolTitle (simple toolTip) – Plugin jQuery
· Number_format Javascript
· Testo animato: macchina da scrivere
· Str_replace Javascript
· Maxlength textarea
· tZebra (tabella zebrata) – Plugin jQuery
· JQuery, il metodo .remove()
· JQuery, il metodo .text()
· JQuery, il metodo .html()
· JQuery, il metodo .val()
· Ricerca in tabella html
· News a scorrimento (news ticker)
· Finestra news con effetto fade (news ticker)
· Div al centro che segue lo scrolling
· Aggiungere righe a tabella in maniera dinamica
· Presentazione di diapositive con JQuery
· Presentazione di diapositive temporizzata
· Costruire un orologio con cicli di temporizzazione
· Gestione dei link con Javascript
· Form dinamico – Aggiunta elementi di input
· Controllo importo in Javascript e messaggio di errore
· Div con bordo lampeggiante
· Controllo data in Javascript e messaggio di errrore
· Formattare una data in Javascript
· Finestra popup sempre in primo paino
· Barra di caricamento in Javascript
· Stampare contenuto di un div con Javascript
· Attesa caricamento pagina in Javascript
· Div al centro della finestra del browser
· Ultimo giorno del mese
· Funzione Trim

Chat