set 28 2011

JavaScript : Mascherare i parametri passati con un link ad una pagina

Luca Bartoli

In alcuni casi, soprattutto nelle applicazioni web, e non tanto nei siti, si vorrebbe che i parametri aggiuntivi passati attraverso link, e quindi normalmente in get(cioè in chiaro nell’url) si possano nascondere.

Per fare questo alcuni utilizzano un metodo elegante è quello di utilizzare una funzione che invii un form predefinito, anche in questo caso però se i link sono molti e i parametri sono diversi si desiste perchè si dovrebbero creare troppi form noiosi da mantenere.

Quindi una soluzione potrebbe essere quella di utilizzare lo stesso form vuoto senza method, ne action ne tantomeno input type=hidden, e crearli di volta in volta utilizzando una unica funzione.

In questo caso però i link risulterebbero puntare ad una funzione JavaScript del tipo javascript:miaFunzione(……); e quindi potrebbero risultare brutti da vedere per quegli utenti che controllano ancora queste cose, ma anche a questo si può rimedire.

Utilizzeremo JavaScript e DOM attraverso l’uso delle funzioni getElementById, createElement e appendChild.

Leggi tutto...

set 24 2011

HTML 5 : Canavas creare il gioco arkanoid in HTML 5 e JavaScript

Luca Bartoli

Per testare quello che abbiamo visto negli altri post:

HTML 5 : I Canvas, Creare forme base
HTML 5 : I Canvas, Creare forme complesse.
HTML 5 : I Canvas, Creare forme complesse con cerchi ed archi.

Andremo a sviluppare il nostro primo gioco in HTML 5 e JavaScript senza l’ausilio di librerie esterne utilizzando il Context 2D (getContext('2d')) e i vari metodi di disegno fillRect, arc ecc..

Leggi tutto...

set 20 2011

JavaScript Esempio – Function e i due metodi CALL e APPLY

Luca Bartoli

Due metodi interessanti dell’oggetto Function sono call e apply, con questi due metodi è possibile invocare una funzione a run-time attraverso il suo riferimento passando alla funzione il contesto di eseguzione (cioè l’oggetto dentro il quale
sarà eseguita) e i parametri necessari.

Leggi tutto...

set 18 2011

JavaScript : prototype modificare il comportamento di un’oggetto standard aggiungendo function e attributi

Luca Bartoli

In JavaScript esiste da sempre il costrutto prototype, con questo è possibile modificare il comportamento di un’oggetto JavaScript standard o di uno creato da zero.

Con pochi passaggi vedremo un esempio di come aggiungere una function all’oggetto Date per farci tornare una data formattata a nostro piacimento.

Leggi tutto...

set 1 2011

JavaScript : Muovere, Ridimensionare e Aprire a schermo intero una pagina

Luca Bartoli

Bastano poche funzioni Javascript per poter fare questo:

// Muovere la finestra dove gira la nostra pagina
window.moveTo(100,120);
// Ridimensiona la finestra dove gira la nostra pagina
window.resizeTo(100,120);;

//Apro una nuova finestra
var myWindow=window.open('finestraMia.html','nome','proprietà',);
// La metto a schermo intero
myWindow.moveTo(0,0);
myWindow.resizeTo(screen.width,screen.height);

Per windows.open:

finestraMia.html - Percorso della mia pagina
nome - il nome o il targhet della nuova pagina (es. _blank, _parent, _self, _top o un nome)
proprietà - le proprietà separate da virgola (es. height=100px, width=100px, left=100px, location=yes|no|1|0, menubar=yes|no|1|0, resizable=yes|no|1|0, scrollbars=yes|no|1|0, status=yes|no|1|0, titlebar=yes|no|1|0, toolbar=yes|no|1|0)
Leggi tutto...

ago 28 2011

JavaScript: Aggiungere un link ai preferiti ( Bookmark ) per Firefox, Internet Explorer e creare un avviso per Opera e Chrome

Luca Bartoli

Per essere sicuri che il nostro sito sia aggiunto tra i preferiti ( Bookmark ) di un browser possiamo creare un link per facilitare il compito agli utenti.

Purtroppo questo è possibile solo per Firefox e Internet Explorer, per gli altri possiamo solo spiegare come farlo con una scorciatoia di tastiera.

Per prima cosa all’interno del tag head della nostra pagina inseriamo la nostra funzione

Ora inseriamo il nostro link all’interno della pagina

Aggiungi ai faroviti!
Leggi tutto...

ago 26 2011

C# e JQuery : Form Autocomplete (Like Google Suggest) attraverso REGEXP e JavaScriptSerializer con MySql DB

Luca Bartoli

Tra le possibilità di JQuery è da un po di tempo che è comparso il modulo per l’autocompletamento ( Autocomplete ). Nell’articolo cercheremo di analizzarie le varie possibilità che offre il modulo, integrandolo con il framework .NET confezionando una stringa custom e utilizzando JavaScriptSerializer.

Per prima cosa dovremmo scaricare JQuery, andiamo quindi su http://jqueryui.com/download e selezioniamo l’UI Core, l’Interactions e almeno l’Autocomplete.

A questo punto una volta scaricato, attraverso il tasto download, il pacchetto, nominato all’incirca così jquery-ui-1.x.xx.custom.zip, lo scompatteremo e importeremo nel nostro progetto .NET i due .js presenti nella cartella js, il file .css e la cartella images presenti nella cartella css.

Leggi tutto...

mar 10 2010

JavaScript: cattuare la posizione del mouse per Internet Explorer e Mozilla

Luca Bartoli

Questo script permette di catturare la posizione del mouse per tutti i browser più famosi:

var pos = {x: 0, y: 0}; ;

function getMousePosition(e)
{
	var IE = document.all?true:false;		;

	if ( IE )
	{ // cattura la posizione di x e di y per Internet Explore
		pos.x = event.clientX + document.body.scrollLeft;
		pos.y = event.clientY + document.body.scrollTop;
	}
	else
	{  // Cattura la posizione di x e di y per tutti gli altri browser
		pos.x = e.pageX;
		pos.y = e.pageY;
	}
}
// mi ero dimenticato di postare il codice per fare in modo che la posizione venga catturata continuamente
document.onmousemove = getMousePosition;


Leggi tutto...

mar 9 2010

Javascript: Sapere le coordinate di un componente html nella pagina

Luca Bartoli

Per sapere la posizione di un componente all’interno di una pagina html anche se questo non utilizza il posizionamento assoluto si dovrà utilizzare lo script riportato di seguito

function getPageCoords(element)
{// Le coordinate da ritornare
	var coords = {x: 0, y: 0};
	// se esiste un contenitore per il nostro elemento
	if( typeof( element.offsetParent ) != 'undefined' )
	{
		while (element)
		{
			coords.x += element.offsetLeft;
			coords.y += element.offsetTop;
			element = element.offsetParent;
		}
	}
	else
	{
		coords.x = element.x;
		coords.y = element.y;
	};

	return coords;
}

Leggi tutto...

mar 9 2010

Javascript: Sapere le dimensioni di tutti i componenti HTML in Javascript

Luca Bartoli

Per poter avere le dimensioni di un componente html è sufficiente assegnare un id univico al componente e utilizzare il seguente metodo:

function getElementSize(nomeComponente)
{
   // si riprende l'oggetto html di cui si vuole sapere le dimensioni
   var element = document.getElementById(nomeComponente);
   // si crea un oggetto attraverso la notazione json
   var size = {w: 0, h: 0};
   // si ricavano le coordinate
   size.w = element.offsetWidth;
   size.h = element.offsetHeight;
   // si ritornano le coordinate
   return size;
};

// per utilizzare l'oggetto si dovrà
var size = getElementSize('idHTML');
document.write('width=' + size.w);
document.write('height=' + size.h);
Leggi tutto...