Lezione mercoledì 18 aprile 2012


cenni su jquery

Sul sito jquery.com è possibile trovare la versione aggiornata di questa libreria (o framework). Si tratta di codice javascript che rende disponibili una funzione $ che permette di accedere in modo molto veloce al documento html e ai suoi componenti.

Questa libreria esiste in 2 versioni: una minified e zipped (cioè compressa il più possibile, senza spazi, con nomi di variabili molto corti, senza identazione, ecc.) e l’altra di sviluppo (scritta per i programmatori: quasi 10mila righe commentate,ecc)

Una delle genialità di questa libreria sta nel fatto che usa la stessa sintassi dei css per “puntare” ai singoli oggetti:

$("#titolo span")   //indica tutti gli span contenuti nel tag con id="titolo"

Questa funzione dispone di una vasta serie di metodi che permette di manipolare, modificare, spostare molte delle proprietà di questi oggetti

Ad esempio il metodo .css(n, p) permette di cambiare al volo qualsiasi proprietà degli elementi selezionati:

$("table#t1 td").css("border", "solid 1px blue" ) //borda tutte le celle della tabella #t1

Ogni metodo può avere diverse sintassi…ad esempio il metodo css nella forma più semplice ha 2 parametri di tipo stringa: il nome della proprietà e il valore. Da notare che come nome si può usare sia la versione css (background-color) che la versione javascript (backgroundColor)

Per leggere e/o modificare il contenuto del tag esiste il metodo .html(). Senza parametri restituisce il contenuto dell’oggetto (come se fosse innerHTML); con un parametro stringa modifica il contenuto dell’oggetto e restituisce l’oggetto stesso.

Anche la gestione degli eventi risulta molto semplificata: il metodo .click(fz) permette di definire una funzione che sarà attivata al click sull’oggetto.

$(“IMG”).click(function(){alert(‘percorso immagine: ‘ + this.src)}) //cliccando su qualsiasi immagine appare il percorso

Gli eventi onmouseover e onmouseout sono gestibili tramite il metodo .hover(fzOver, fzOut) che riceve 2 funzioni: una si attiva al passaggio del mouse, l’altra all’uscita dall’oggetto.

Normalmente i metodi ritornano sempre l’insieme di oggetti ai quali sono applicati, quindi è possibile concatenare vari comandi col punto.

$(“.menuVuoto “).hover(function(){$(this).css(“backgroundColor”,”yellow”)}, function(){$(this).css(“backgroundColor”,”white”)} ).click(function () {alert(‘Menu in allestimento’)})

Lascia un commento

Lezione mercoledì 4 aprile 2012


La Calcolatrice

Realizziamo una semplice calcolatrice con le 10 cifre, le 4 operioni, il punto decimale e l’uguale!

Il  click sulla cifra chiamera una funzione inserisciNumero(this), il click sull’operazione chiamerà inserisciOperazione(this).

Disponiamo un secondo display (che poi sarà nascosto). In questo secondo div facciamo in modo che venga “registrata” tutta l’operazione che l’utente vuole eseguire.

Quindi, come se simulasse una macchina da scrivere, ad ogni pressione di tasto (sia cifra che operazione) viene accodato nel secondo display.

In javascript esiste la funzione eval(x) che interpreta il contenuto di x come se fosse un qualsiasi omando in javascript. Ad  es: eval(“25*6”) eseguirà l’operazione e restituirà 150!

Quindi alla pressione del tasto “=” basterà scrivere sul display ufficiale il risultato di eval( contenuto secindo display).

Per completare l’interfaccia, simulando le vecchie calcolatrici.. bastaerà inserire una variabile globale che mi indichi se l’utente sta per scrivere un numero (in tal caso sul display dovrà apparire solo la cifra appena inserita), oppure sta scrivendo un numero (in tal caso le successive cifre saranno accodate: cioè se scrivo 1275, premo 1 e appare 1, premo 2 appare 12, premo 7 appare 127 e così via finchè non premo un qualsiasi operatore.

Controllo dell’errore

Esiste un costrutto try { … } catch (err) {} che riesce a gestire eventuali errori non previsti dal normale flusso del programma.

Ad esempio nella calcolatrice, la funzione eval risolve moltissimi problemi, ma se ad esempio l’utente preme più volte il segno di operatore, oppure vengono inserir vari pnti, ecc. potrebbe generarsi un errore.

Fermo restando che un buon programma ( eun buon programmatorre) solitamente prevede eventuli situazioni di errore, si può comunque ricorrere a questo costrutto, inserendo la o le istruzioni ce potenzialmente posssono generare errore all’interno dell’operatore try {/*istruzioni*/}

In coda al try (dopo la parentesi graffa chiusa, deve essee presente il metodo catch che riceve tra parentesi un oggetto “errore” che contiene varie proprietà (es: .message, .detail, ecc). Inserire all’interno del metodo eventuali istruzioni che si vuole eseguire in caso di errore.

Array associativi in javascript

Ci sono vari modi per definire un array.

mesi = new Array()
mesi = []
mesi = new Array("gen","feb","mar")
mesi = ["gen","feb","mar"]
mesi = "gen,feb,mar".split(",")

tutte queste scritture sono equivalenti.  Ogni elemento dell’array è associato ad un indice, a aprtire da 0 fino a nomeArray.length;

ogni elemento è accessibile in lettura e scrittura tramite la notazione nomeArray[indice]

Esite un altro tipo di array detto array associativo; in questo caso ogni elemento è associato ad un nome (una stringa) anzichè un numero.

Si usano le parentesi graffe, i due punti e lavirgola…

punteggio = {veronica: 27, marina:52, andrea:30,simone:26}

e si accede ad ogni elementoin lettura e scrittura  in due modi

punteggio.andrea
punteggio["andrea"]

Da notare che in javascript gli elementi di uno stesso array non devono necessariamente essere dello stesso tipo, quindi in un array (e in generale in un oggetto) possono convivere stringhe, numeri, funzioni, altri oggetti, ecc.

Le funzioni definite all’interno di un oggetto sono simili ai metodi dei linguaggi ad oggetti e vengono costruite con funioni anonime

schermo {
colora: function (col) {document.bgColor = col}
}

Lascia un commento

Lezione lunedì 26 marzo 2012


…finiamo il puzzle..

  • programmiamo la  funzione selezionaCella in modo che
    • al primo click si evidenzi la cella selezionata (ad esempio con un bordo)
    • al secondo click scambio lo sfondo delle due celle
  • è utile una  variabile globale per memorizzare la cella e per distinguere i due click
  • per scambiare le 2 celle si utilizzarà un codice molto simile a quello della funzione scambia..si può parametrizzare le funzioni in modo da riutilizzare più volte o stesso codice..

Memory

Un gioco abbastanza simile al puzzle  è memory:

  • si scelgono un certo numero di immagini (ad es 10);  si disporranno poi su una tabella (ad esempio 5×4) facendo in modo che ogni immagine appaia due volte (ogni cella contiene un tag IMG).
  • si “mescola” le carte (si può utilizzare una funzione scambia dell’esercizio precedente, al posto di .style.bavkgroundPosition
    utilizzare .innerHTML)
  • si nascondono tutte le carte e si programma l’evento onclick

(segue)

 

Lascia un commento

Lezione mercoledì 21 marzo 2012


  • creare una funzione scambia() che
    • estrae quattro numeri a caso: due per le righe, due per le colonne, in questo modo si individuano 2 celle
    • legge la proprietà background-position delle 2 celle
    • scambia i valori di questa proprietà
  • per miscgiare tutta la tabella è sufficiente richiamare tante volte (almeno righe x colonne /2) la funzione scambia.
  • programmare le celle della tabella in modo che quando ci si clicca sopra venga richiamata una funzione seleziona, che riceve come parametro la cella stessa…
    • scorrere la tabella e per ogi cella andare a impostare la proprietà onclick con una funzione (anonima)
      document.getElementById(idTabella).rows[r].cells[c].onclick = funtion () {seleziona(this)}
    • scrivere la funzione seleziona(cella).
      Es.: function seleziona(cella) {alert(cella.cellIndex + ‘,’ + cella.parentNode.rowIdex)}

Lascia un commento

Lezione lunedì 19 marzo 2012


  • realizzare una funzione javascript creaTabella che riceve 3 parametri: id, numero righe, numero colonne.
    Successivamente utilizzare i fogli di stile per personalizzare la tabella con bordi ecc.
  • studio dello sfondo: ci sono varie proprietà che riguardano lo sfondo:
    • background-image: url(‘percosoImmagine.png‘)  //l’immagine
    • background-repeat: repeat | repeat-x | repeat-y |no-repeat
    • background-position: xpos ypos
  • creare una funzione per scorrere una tabella di cui si conosce l’id.
    • document.getElementById(“idTabella“).rows.length   //numero di righe
    • document.getElementById(“idTabella”).rows[riga].cells.length //numero di celle per la riga
    • document.getElementById(“idTabella”).rows[riga].cells[colonna]  //oggetto cella
    • document.getElementById(“idTabella”).rows[riga].cells[colonna].innerHTML //contenuto cella
    • document.getElementById(“idTabella”).rows[riga].cells[colonna.style.backgroundPosition //accesso in lettura/scrittura per la proprietà posizione dello sfondo

Lascia un commento

Informatica e Ambiente


Un ottimo e ben documentato spunto di riflessione…

http://accademialibera.altervista.org/index.php?option=com_content&view=article&id=78%3Aincontro-13-marzo-&lang=it

Lascia un commento

Lezione giovedi 15 marzo 2012


Pseudoclasse :focus

La serve soprattutto per campi di testo e link: in particolare con i link rende possibile la navigazione con l’utilizzo della tastiera (tasto tab)

Annullare un evento

<a href=”logout.htm” onclick=”return confirm(‘sei sicuro di voler uscire?)”>Esci</a>
In pratica programmando l’evento con la sintassi return, in caso di valore ritornato false l’evento non viene propagato

Controllare un form

Nel tag <form> si può programmare l’evento onsubmit=”return funzione()“. Nella funzione si possono eseguire vari controlli sulla correttezza dei dati, prima che questi dati vengano inviati. In caso di return false questi dati non vengono inviati

Lascia un commento

Lezione mercoledì 14 marzo 2012


La proprietà float

E’ utilizzata per “affiancare” elementi che solitamente sono a blocco, quindi visualizzati uno sotto l’altro.
Un layout molto richiesto è quello che vede una foto sulla destra o sulla sinistra della pagina e tutto il testo che scorre lungo la foto.
Per ottenee questo effetto è sufficiente assegnare la proprietà float: left all’immagine e qualsiasi altro elemento (ad esempio paragrafi) saranno visualizzati lungo tutto il margine destro. In pratica float: left sull’immagine fa scorrere l’immagine a sinsitra.

Da notare che, nell’esempio di sopra l’uso di vertical-align al posto di float sposta soltanto una riga.

Una altro utilizzo di float è per disporre in orizzonatle elementi che normalmente sarebbero disposti in verticale (es: barra di navigazione con voci di menu)

Se si vuole utilizzare un layout a più colonne, di nuovo la proprietà float ci viene in aiuto. Solitamente si usa racchiudere i vari elementi dentro un contenitore con larghezza tale da contenere tutti gli elementi. Questo contenitore può venire facilmnete centrato in orizzontale con margin: auto

Se si vuole interromepre il flusso provocato dal float, si utilizza (o sull’ultimo elemento che devo scorrere o su un qualsiasi elemento  fittizio, come un <br>) la prorprietà clear: both

Pseudoclasse :first-letter

E’ usata per fare l’effetto capolettera, soprattutto con la proprietà float: left

Pseudoclassi :after e :before

Sono usate per inserire dei contenuti particolari tramite i fogli di stile, in aggiunta a quanto previsto dall’html.
Hanno un comportamento in linea (che può essere modificato); si può assegnare un bordo, uno sfondo, ecc.

La proprietà content specifica la stringa di contenuto (parti fisse tra virgolette accodate con uno  spazio; attr(attributo) counter(contatore)

Sono usate anche per i contatori

I contatori

E’ un capitolo particolare dei css. In pratica è possibile definire vari contatori che si incrementano in casi specifici.  I comandi per azzerare e incrementare i contatori sono usati come fossero normali prorpietà css, con la sintassi:

counter-reset: contatore1 valore1 contatore2  valore2;
counter-increment: contatore1 valore1 contatore2  valore2;

Il valore del contatore viene stampato con la prorprietà content nelle pseudoclassi :after e :before

Lascia un commento

Lezione 8 marzo 2012


Fogli di stile

  • in linea (attributo style)
  • incorporati (tag <style>)
  • estrni <link rel=”stylesheet” href=”file.css”></link> oppure <style>@import url(‘file.css’)</style>

Esempi di stile; colore della scritta (color); colore di sfondo (background-color); bordi (border-style border-width border-color); margin e padding, font-size, text-align

width, height, overflow

I selezionatori nei css:

  • #idElemento
  • .classe
  • tag

si può rendere la selezione molto più specifica combinando insieme questi tre tipi: ad esempio

#contenitore P {} /*specificherò lo stile per tutti i paragrafi contenuti in oggetto con id=contenitore

Le tabelle e i css: vertical-align, border-collapse, border-spacing, ecc..

pseudoclasse :hover

posizionamento statico, assoluto e relativo e fisso

colori: nome in inglese, codice esadecimale e cancelletto, funzione rgb(r,g,b)

1 Commento

SOSPENSIONE LEZIONI lunedì 5 marzo 2012


Lunedì 5 marzo le lezioni previste NON saranno svolte (saranno recuperate in altra data)

Parte del personale aderisce allo sciopero indetto dalle organizzazioni sindacali  con l’intento di sensibilizzare istituzioni e opinione pubblica sulla grave situazione dell’azienda.

Lascia un commento