In questa lezione spiegheremo alcuni esercizi svolti sulle liste in Python.
Esercizi svolti sulle liste in Python – primo esercizio
Popolare una lista di n elementi con i primi n multipli di 10. I numeri devono essere inseriti in coda alla lista. Dopo l’inserimento visualizzare in output i valori della lista e il relativo indice. Poi modificare solo gli elementi maggiori di 30 sottraendo la metà del numero. Visualizzare nuovamente la lista.
Una volta acquisito n occorre generare in automatico i multipli di 10 da inserire.
Ad esempio se n=5 allora la lista dovrà contenere questi valori:
0*10, 1*10, 2*10, 3*10, 4*10
Quindi posso assumere una costante che vale 10 e una variabile che cambia valore da 0 fino ad arrivare a 4.
Quest’ultima variabile può essere rappresentata direttamente dall’indice i del ciclo for.
Dopo aver popolato la lista e aver visualizzato gli elementi con l’indice (attenzione l’esercizio chiede di visualizzare la lista dopo aver inserito tutti gli elementi, quindi occorre usare un altro ciclo for che scorre la lista), modifichiamo gli elementi maggiori di 30 togliendo metà del numero.
Infine, dopo le modifiche, visualizziamo nuovamente la lista.
Ecco dunque una possibile soluzione:
n=int(input('Inserisci la quantità di numeri da inserire:'))
l=[]
c=10
for i in range(n):
l.append(i*c)
#visualizzo gli elementi e l'indice
for i in range(n):
print('Elemento in posizione ', i, 'ha valore', l[i])
#modifico gli elementi maggiori di 30
for i in range(n):
if l[i]>30:
l[i]//=2
#visualizzo gli elementi modificati e l'indice
for i in range(n):
print('Elemento in posizione ', i, 'ha valore', l[i])
Vi propongo adesso altri esercizi sulle liste in Python.
Esercizi svolti sulle liste in Python – secondo esercizio
Dati due numeri, a e b, costruire una lista con una sequenza ascendente dal primo al secondo numero compreso. I numeri devono essere inseriti in testa alla lista. Dopo l’inserimento visualizzare la lista con il relativo indice. Modificare poi ciascun elemento moltiplicandolo per 2. Infine visualizzare la lista modificata.
N.B. Se b è più piccolo di a si visualizzerà la lista vuota.
La difficoltà iniziale sta nell’utilizzo del metodo insert per inserire i numeri in testa alla lista.
Dunque per inserire una sequenza ascendente che va da a a b, utilizzando insert, devo prima inserire il numero più alto e cioè b.
Ecco perché conviene semplicemente invertire il range del for.
for i in range(b,a-1,-1):
numeri.insert(0,i)
Quindi se ad esempio a=5 e b=10 allora devo avere in output la lista numeri=[5,6,7,8,9,10].
Per fare ciò considero il range con i che va da 10 a 5 a step di -1.
Il primo numero inserito in testa alla lista sarà dunque 10, poi 9, poi 8 e così via.
Dopo modifico semplicemente la lista moltiplicando per 2 ciascun elemento.
Ecco dunque il codice completo:
numeri=[]
a=int(input('inserire un numero'))
b=int(input('inserire un numero'))
for i in range(b,a-1,-1):
numeri.insert(0,i)
for i in range(len(numeri2)):
print(i,numeri[i])
#lista modificata
for i in range(len(numeri)):
numeri[i]*=2
for i in range(len(numeri)):
print(i,numeri[i])
Conclusioni
In questa sezione abbiamo affrontato alcuni esercizi svolti sulle liste in Python, nella prossima lezione ne propongo degli altri.
In questa lezione parleremo di Bootstrap table e di come gestire le tabelle in una pagina web.
Come utilizzare Bootstrap table
Innanzitutto è necessario inserire il tag div che conterrà la nostra tabella a cui assoceremo la classe container come al solito.
Dopo utilizziamo il tag table a cui assegneremo la classe table.
Quindi costruiamo la nostra tabella utilizzando i tag tr per la riga e td per la cella. Utilizzeremo inoltre th per le intestazioni di colonna e di riga.
Al tag th si può aggiungere l’attributo scope dando il valore col o row, il quale specifica che l’intestazione fa riferimento alla colonna o alla riga, ma attenzione questo attributo non è supportato dall’HTML5.s
Nel costruire la nostra tabella useremo anche i tag semantici thead e tbody. Dell’importanza di questi tag ne abbiamo parlato in questo articolo: tabelle in html.
Tabelle personalizzate
Nel nostro esempio al tag thead assegniamo la classe thead-dark per creare l’intestazione della tabella di colore grigio scuro e testo bianco.
Inoltre alla tabella assegniamo la classe table-striped per colorare di grigio, in maniera alternata, le righe.
Chiaramente si possono utilizzare delle classi personalizzate per creare degli effetti nuovi.
Ecco un esempio di possibile tabella con Bootstrap:
Potete visualizzare un esempio d’uso delle tabelle in questo link: tabelle Bootstrap.
Sfondi tabella, righe e celle
Così come abbiamo visto per i pulsanti si possono assegnare delle classi predefinite alle tabelle, righe o celle.
table-primary crea uno sfondo con sfondo blu e testo bianco.
table-secondary crea uno sfondo con sfondo grigio e testo bianco.
table-success crea uno sfondo con sfondo verde e testo bianco.
table-info crea uno sfondo con sfondo azzurro e testo bianco.
table-warning crea uno sfondo con sfondo arancione e testo nero.
table-danger crea uno sfondo con sfondo rosso e testo bianco.
table-light crea uno sfondo con sfondo grigio chiaro e testo nero.
table-dark crea uno sfondo con sfondo nero e testo bianco.
Oppure è possibile utilizzare anche le classi bg-primary, bg-success, ecc…
Bordo della tabella
Utilizzando la classe table-bordered si imposta il bordo alla tabella, mentre con table-borderless si elimina il bordo della tabella.
Tabelle responsive
E’ possibile creare delle tabelle responsive utilizzando la classe table-responsive{-sm|-md|-lg|-xl} dove al solito sm, md, lg, ed xl (quest’ultimo introdotto con Bootstrap 4) sono i breakpoint.
In questa lezione parliamo di Bootstrap icons, cioè di come utilizzare le icone in Bootstrap con i Fontawesome e Glyphicons.
Bootstrap icons
Le icone si possono utilizzare nel testo, nei menù, nei form, nei pulsanti e in tanti altri elementi di una pagina web.
Ci sono tante piattaforme che mettono a disposizione queste icone in maniera gratuita, almeno per la versione base.
Glyphicons
Le prime Bootstrap icons, da poter utilizzare, che vi presento sono le Glyphicons.
Fino alla versione Bootstrap 3 trovavamo una cartella con le Glyphicons, ma nella nuova versione è stata tolta.
Si possono sempre utilizzare andando sul sito ufficiale glyphicons e andando a vedere le specifiche di utilizzo. Alcuni set di icone sono però a pagamento.
Quindi basta aggiungere il seguente codice tra il tag head:
E poi utilizzarle in un punto qualsiasi della pagina, inserendo la classe opportuna. Ad esempio per visualizzare la casetta della home posso utilizzare questo codice.
In questa lezione abbiamo visto come utilizzare le Bootstrap icons ed in particolare Fontawesome e Glyphicons per inserire delle icone nelle nostre pagine web.
Si possono utilizzare altri font per le icone in Bootstrap, come ad esempio Octicons.
In questa lezione parleremo dei Bootstrap buttons, e quindi di come aggiungere dei pulsanti nelle nostre pagine web.
Bootstrap ha differenti stili di buttons che visualizza tramite apposite classi.
Bootstrap buttons
Vediamo in dettaglio le varie classi:
btncrea un pulsante con uno stile di base.
btn-primary crea un pulsante con sfondo blu e testo bianco.
btn-secondary crea un pulsante con sfondo grigio e testo bianco.
btn-success crea un pulsante con sfondo verde e testo bianco.
btn-info crea un pulsante con sfondo azzurro e testo bianco.
btn-warning crea un pulsante con sfondo arancione e testo nero.
btn-danger crea un pulsante con sfondo rosso e testo bianco.
btn-light crea un pulsante con sfondo grigio chiaro e testo nero.
btn-dark crea un pulsante con sfondo nero e testo bianco.
btn-link crea un pulsante con sfondo trasparente e testo blu.
Come si utilizzano
Le classi dei Bootstrap buttons si utilizzano con il tag button ma possono essere utilizzate anche con il tag input oppure anche il tag a a cui però deve essere associato l’attributo role=”button” in modo da essere interpretati bene anche dagli screen reader.
Eliminare il riempimento
Se si vuole rimuovere il contorno dai pulsanti si possono utilizzare le classi btn-outline-dark, btn-outline-warning, ecc…
Dimensioni del pulsante
Se si desidera un pulsante di dimensione minore o maggiore si può usare btn-lg oppure btn-sm.
Pulsanti disabilitati
Un pulsante può essere reso inattivo con l’attributo disabled.
Pulsanti estesi
Per estendere la larghezza di un pulsante per tutto il livello che lo contiene si usa btn-block.
Active
La classe active rende l’aspetto del pulsante come quando si fa clic su di esso.
Esempi d’uso dei buttons
Realizziamo adesso degli esempi mettendo in pratica quanto spiegato finora.
Al seguente link potete vedere la pagina di esempio che vi mostra i pulsanti: Bootstrap buttons.
Di seguito la parte di codice inerenti i pulsanti che ho creato che potete inserire nel punto della pagina desiderato.
Commenti recenti