Blog Informatica & Programmazione

[JavaScript] Creazione di una finestra Pop-up

Le finestre pop-up sono finestre che si aprono in contemporanea ad un'altra pagina, sicuramente a tutti voi sarà capitato (anche su Forumcommunity), che durante la navigazione vi si aprisse qualche finestrella (magari pure indesiderata!), oppure che il vostro browser (che giustamente ha il blocco pop-up), vi segnalasse che una "finestra pop-up" è stata bloccata.
Generalmente le finestre pop-up vengono utilizzate per la pubblicità, anche se molti la ritengono fastidiosa, è un ottimo modo per farsi pubblicità e per questo continua a rimanere in vita (infatti da quando qualcuno ha avuto l'idea, le vendite sono aumentate di poco, ma pur sempre aumentate).
Il punto forte delle finestre pop-up è che ti costringono a guardare il loro contenuto a differenza di una pubblicità che può, come nel caso di Forumcommunity, trovarsi in fondo alla pagina (ed è anche un modo per i webmaster di non intasare di pubblicità il loro sito web).

Oltre alle finestre Pop-up, sono state inventate anche le finestre Pop-under, che chi non ama queste finestre, le definisce come ancora più subdole di quelle Pop-up , infatti le finestre Pop-under si aprono allo stesso modo delle finestre Pop-up, ma si aprono di nascosto, e non si sovrappongono alla pagina, con la conseguenza che il metodo "chiudi prima che si carichi" che si può utilizzare sulle finestre Pop-up, non funziona sulla finestre Pop-under (però se ve ne accorgete, potete chiudere la pagina con il pulsante destro del mouse sulla barra delle applicazioni in corso prima di chiudere il vostro browser XD), inoltre se non state attenti potreste non accorgervi della pagina su cui vi è apparsa, così facendo il sito web che ospita la pubblicità ha la speranza che qualcuno non si ricordi del suo sito come un "sito in cui il browser ti apra delle finestre strane".

Read the whole post...

[JavaScript] Le finestre di dialogo

Salve a tutti, oggi voglio parlarvi delle finestre di dialogo in JavaScript, quelle finestre che servono ad avere interazioni con l'utente in una pagina web.
Partiamo immediatamente con la finestra più semplice, che chi ha già sentito parlare di JavaScript è difficile che non ne abbia sentito parlare!

Alert
L'alert è una finestra di dialogo che permette di mandare un messaggio ad un utente in una finestra, a cui l'utente non può rispondere ma è costretto a spingere il pulsante Ok .
Solitamente viene utilizzato per i messaggi di errore, oppure in alcuni forum mi è capitato di vedere questa finestra che cercava di mettere ben in vista una regola del loro regolamento (chissà se poi ha funzionato ).
Quindi in poche parole serve per messaggi di avvertimento all'utente.


nel codice si può utilizzare anche window.alert, ricordatevi che alert non deve assolutamente avere la lettera maiuscolo poiché JavaScript fa distinzioni tra maiuscole e minuscole.

Prompt
Il prompt è una finestra di dialogo che consente all'utente di inserire dei dati che poi possono essere memorizzati in una variabile, la finestra offre un'area di testo dove l'utente scriverà un valore (che può essere di tutti i tipi dalla stringa al numero).
Nel codice il primo testo tra apici indica ciò che apparirà nella finestra, mentre il secondo testo tra apici indica invece il testo che apparirà nell'area di testo, anche qui vale la regola del minuscolo.



...

Read the whole post...

Funzioni matematiche in JavaScript

In qualche articolo precedente ho parlato di Arrotondamento dei numeri in JavaScript , ebbene a questo articolo voglio completare con altri metodi che riguardano l'oggetto Math , ovvero funzioni matematiche da poter applicare ai linguaggi di programmazione:

abs(), restituisce il valore assoluto del numero fornito come argomento in cui tra parentesi va inserito il numero da portare a valore assoluto;
esempio:

Il risultato stamperà 5.

min() e max(), restituisce il numero massimo e il numero minimo dei valori passati come parametri tra parentesi;
esempio:

max avrà valore 5 mentre min avrà valore 3.

sqrt() e pow( , ) rappresentano rispettivamente la radice quadrata e l'elevamento a potenza;
per la radice quadrata basta solo far passare il valore desiderato come parametro tra parentesi come nell'esempio:

Il risultato darà 9;
Per quanto riguarda l'elevamento a potenza, devono essere passati due parametri come valori, il primo indica il numero da elevare a potenza, il secondo quante volte deve essere elevato, come nell'esempio:

il risultato darà 8 poiché 2^3 = 8.

Esistono altre funzioni dell'oggetto Math, come sin() che serve a calcolare il seno, cos() che serve a calcolare il coseno e tan() che serve a calcolare la tangente trigonometrica di un angolo espresso in radianti.

Per generare un numero casuale in JavaScript è possibile utilizzare il seguente comando:

al posto di numero dovrete inserire fino a che numero può randomizzare il comando.
Ad esempio se il numero è 10, i numeri che potranno ritornare dal comando saranno compresi tra 0 e 10 (estremi compresi)

Edited by giratina23 - 7/4/2012, 17:00

Arrotondare numero in JavaScript

In JavaScript è possibile arrotondare un numero decimale, utilizzando l'oggetto Math ed utilizzare uno dei seguenti metodi:

• floor() , indica un arrotondamento per difetto;


• ceil() , indica un arrotondamento per eccesso;


• round() , indica un arrotondamento per eccesso se il decimale è maggiore di 5 alla prima significativa dopo la virgola, altimenti per difetto;

Facciamo un esempio pratico:


Edited by giratina23 - 7/4/2012, 17:01

Guida agli eventi in JavaScript

Gli eventi sono utilizzati per richiamare delle istruzioni, ma solo se si verificano particolari situazioni, ad esempio al passaggio del mouse sopra un oggetto, o alla chiusura del documento.
In genere gli eventi richiamano istruzioni all'interno dei tag HTML, ma in qualche caso richiamano le istruzioni anche all'interno dello script.
Tutti gli eventi sono preceduti dal prefisso on

. Eventi attivabili dalla tastiera:
Gli eventi legati alla tastiera sono principalmente 3:
.onKeyDown, si attiva quando l'utente preme un tasto qualsiasi della tastiera;
.onKeyUp, si attiva quando l'utente rilascia un tasto qualsiasi della tastiera;
.onKeyPress, si attiva quando l'utente preme e rilascia un tasto qualsiasi della tastiera;
Oltre a questi 3, è presente anche onHelp, che però non funziona con alcune versioni vecchie di alcuni browser, e si attiva quando viene premuto il pulsante F1.

Eventi attivabili dai tasti e dai movimenti del mouse
.onClick, si attiva quando l'utente clicca su un oggetto;
.onDblClick, si attiva quando l'utente fa un doppio-click su un oggetto;
.onMouseDown, si attiva quando l'utente preme il tasto sinistro del mouse;
.onMouseUp, si attiva quando l'utente rilascia il tasto sinistro del mouse;
.onContextMenu, si attiva quando, cliccando con il pulsante destro si apre il Context Menu;
.onMouseOver, si attiva quando il puntatore del mouse si muove su un oggetto;
.onMouseOut, si attiva quando il puntatore del mouse si sposta da un oggetto;

Eventi attivabili dal trascinamento di un oggetto:
.onDrag, si attiva quando il mouse trascina un file o una selezione di testo sulla finestra dello stesso browser;
.onDrop, si attiva quando viene rilasciato rilasciato il tasto del mouse in seguito ad un trascinamento;
.onDragDrop, si attiva quando un utente rilascia un file sulla finestra del browser o trascina un oggetto sulla stessa;
.onDragStart, si attiva quando l'utente inizia a trascinare un oggetto;
.onDragEnter, si attiva quando l'utente trascina l'oggetto su un obbiettivo valido del browser;
.onDragOver, è uguale ad onDragEnter, ma si attiva dopo;
.onDragLeave, si attiva quando l'utente trascina l'oggetto su un obbiettivo valido, ma non lo rilascia;
.onDragEnd, si attiva quando l'utente rilascia l'oggetto al termine del trascinamento;
.onMove, si attiva quando l'utente muove una finestra o un frame;

Eventi legati al "fuoco":
.onFocus, si attiva quando l'utente entra in un campo;
.onBlur, si attiva quando l'utente esce da un campo;
.onSelect, si attiva quando l'utente seleziona del testo all'interno di una casella di testo;
.onSelectStart, si attiv...

Read the whole post...