Post

Archivio della categoria 'Javascript'

PHP+Ajax: tendina province e comuni

Per fare selezionare un comune dal database servirebbe una tendina di 8000 voci… una possibilità è fare due tendine, una per provincia e una per comune, facendo popolare la seconda in base alla scelta fatta nella prima. Serve:

Una funzione Javascript per il popolamento:

<script type="text/javascript">
function change(ref)
{
  var selid = ref.selectedIndex;
  var value = ref.options[selid].value;  var url = "popola.php";
  var pars="id_provincia="+value;

var myAjax = new Ajax.Request(  url,
  {
    method: 'get',
    parameters: pars,
    onComplete: function (data)
   {
      $('selectComune').innerHTML = data.responseText;
    }
  });
}
</script>

Uno script PHP che esegua la query per il popolamento:

<?
  if (isset($_GET["id_provincia"])){  $strSQL="SELECT * FROM comuni";
  if (is_numeric($_GET["id_provincia"]) AND $_GET["id_provincia"]>0) $strSQL.=" WHERE     id_provincia=".$_GET["id_provincia"];
  $strSQL.=" ORDER BY comune";

// connessione al db
  $connessione=mysql_connect("localhost", "utente", "password");
  $db=mysql_select_db("nomedb") OR DIE ("Impossibile connettersi al database");

$risultati=mysql_query($strSQL) OR DIE ("Impossibile eseguire la query");

  // scrivo la select per intero
  echo "<select class=\"testo_input\" style=\"width: 147px; float: left;\" title=\"selezionare il comune\"
        name=\"comune_mod\" id=\"comune_mod\"><option value=\"0\">Scegli un
        comune</option>";

  while ($rs=mysql_fetch_array($risultati)){
      if($rs["id_comune"] == $_POST[comune_mod]) $selected = "selected"; else $selected = "";
      echo "<option value=\"".$rs["id_comune"]."\">".htmlentities($rs["comune"])."</option>";
    }

    echo "</select>";
    $chiudi=mysql_close($connessione);
  }
?>

Il form:

<form action="index.php?page=lista&amp;sezione=turismo&amp;lang=<?=$lang?>" enctype="multipart/form-data" method="POST" target="_self">
<select style="width:147px; float:left;" class="testo_input" title="selezionare la provincia di appartenenza" name="comune_mod_p" id=
"comune_mod_p" onchange="change(this);">
<option value="">Prima scegli la provincia</option>
<?
$strProvince="SELECT id_provincia, nomeprovincia FROM province";
$risultati=mysql_query($strProvince) OR DIE ("Impossibile eseguire la query");
// scrivo la select per intero
while ($rs=mysql_fetch_array($risultati)){
  //    if($rs["id_provincia"] == $_POST[comune_mod_p]) $selected = "selected"; else $selected = "";
  echo "<option value=\"".$rs["id_provincia"]."\"".$selected.">".$rs["nomeprovincia"]."</option>";
}
?>
</select>
<br/>
<span id="selectComune">
<select class="testo_input" style="visibility: hidden;width:147px; float:left;"></select>
</span><input type="submit" value=<? echo $l_cerca["$lang"]?> class="tasto_cerca" name="cerca_comune">
</form>

Javascript: estrarre la parte intera e decimale di un numero

Non esiste una funzione predefinita per compiere questa operazione.
Per farlo bisogna usare uno stratagemma: utilizzare il metodo Math.floor:

// Numero di cui si vogliono estrarre parte intera e decimale
var dec = 12.3456;
var parteInt   = Math.floor(dec);
var parteDec = dec - parteInt;

Introduzione alla programmazione OO con Javascript

JavaScript è un linguaggio fortemente orientato agli oggetti.
Per scrivere codice OO con JS si utilizzano costrutti differenti rispetto agli altri linguaggi di programmazione.
C,C#, C++, Java, PHP, Ruby utilizzano infatti il costrutto “class” mentre JS utilizza “function”.
Anche il modo con il quale si definiscono il costruttore, i metodi e le variabili “di classe” differisce fortemente dagli altri linguaggi.

Terminologia di base:

  • Classe : definisce le caratteristiche di un oggetto
  • Oggetto : un’istanza di una classe
  • Costruttore : un metodo chiamato alla creazione di un oggetto
  • Proprietà : una oggetto che memorizza un’informazione
  • Metodo: una funzione di una classe

Creazione di una nuova classe

Javascript è un linguaggio orientato al “prototipo”. Qualsiasi oggetto JS possiede un “prototype” che supplisce alla mancanza dell’istruzione class e che rappresenta lo scheletro dell’oggetto. Si utilizza “prototype” per definire una classe e per estenderla.

esempio:

function rettangolo() {}

Definisce la classe rettangolo.

Creazione di un oggetto

Per utilizzare un oggetto è necessario crearne un’istanza.
Per fare questo si utilizza l’istruzione new.
L’esempio che segue crea due istanze della classe rettangolo.

function rettangolo() {}

var r1 = new rettangolo();
var r2 = new rettangolo();

Definizione del costruttore

Il costruttore è una particolare funzione che viene invocata automaticamente al momento della creazione di una istanza ed è usualmente utilizzato per inizializzare le proprietà di una classe (le sue variabili di stato) e per questo può possedere dei parametri.
Creando una nuova istanza della classe rettangolo e non avendo definito un costruttore personalizzati, viene invocato il costruttore di default che non fa nulla.

In Javascript non si definisce esplicitamente un costruttore ma viene considerato “costruttore” tutto il codice che è al
di fuori di un metodo all’interno di una “classe” (una funzione in JS).

Esempio:

function rettangolo()
{
alert('Sono un rettangolo!');
}

var r1 = new rettangolo();

Il codice precedente stamperà un codice di alert con il messaggio “Sono un rettangolo!” come conseguenza della creazione dell’oggetto r1.

Definizione delle proprietà

Le proprietà di un oggetto costituiscono le sue unità di memorizzazione.
Per definire una proprietà si usa il codice all’interno del costruttore.
Si utilizza il riferimento implicito “this” e si agisce in questo modo sul prototipo della funzione stessa.

Nell’esempio che segue aggiungeremo le proprietà larghezza e altezza al rettangolo e modificheremo il costruttore per
inizializzarne il valore:

function rettangolo(lun,alt)
{
this.larghezza = lun;  // creazione e inizializzazione della propietà larghezza
this.altezza   = alt;  // creazione e inizializzazione della propietà altezza
}

var r1 = new rettangolo(10,20);
var r2 = new rettangolo(30,40);

Creazione di metodi

Creare un metodo è analogo a creare una proprietà.
Bisogna definire un nome di funzione e assegnare ad essa un’istanza di una funzione con eventualmente i parametri.

L’esempio chiarisce meglio questo concetto.

function rettangolo(lun,alt)
{
this.larghezza = lun;  // creazione e inizializzazione della propietà larghezza
this.altezza   = alt;  // creazione e inizializzazione della propietà altezza

this.stampa = function()
{
alert("Sono un rettangolo "+this.larghezza+" X "+this.altezza);
}
}

var r1 = new rettangolo(10,20);
r1.stampa();   // Richiama il metodo stampa

Ereditarietà

Una delle caratteristiche comuni a tutti i linguaggi OO è l’ereditarietà.
L’ereditarietà viene implementata in JS assegnando ad una classe il prototipo di un’altra.
Facendo questo tutti i metodi della prima classe vengono ereditati dalla seconda.
Fatto questo è possibile definire o ridefinire altri metodi o proprietà.
L’esempio che crea una classe rettangolo_new che eredita dalla classe rettangolo e nella quale viene ridefinito il metodo stampa.

Da notare che per creare un metodo viene utilizzato il prototipo della funzione come riferimento alla struttura della classe analogamente a quanto accade all’interno della classe con “this”.

function rettangolo_new(lun,alt)
{
}

rettangolo_new.prototype = rettangolo.prototype;

rettangolo_new.prototype.stampa = function()
{
alert('Sono un nuovo rettangolo');
}

Polimorfismo

Una classe JS può definire più metodi con lo stesso nome caratterizzati da un numero differente di parametri.

Archivi e link