Gheryd

javascript ES6 ES2015

2019-07-14T15:35:00.004+02:00

const

const myVar = 'value';
myVar = 'value2'; // error

let

var myVar = 'value';

if( myVar ){

let myVar = 'value2';

console.log(myVar); // 'value2'

}

console.log(myVar); // 'value'

String Template

let myHtml = `<div>${myVar}</div>`; // ` -> back tick character

let myTemplate = `

<div>

</div>

Default values

function myFunction(par='some value'){

// code

}

var defaultValue = 'value';

function MyFunction2(par=defaultValue){

// code

}

Arrow function

let add5 = par1 => par1+5;

let sum = (par1, par2) => par1 + par2;

let myFunc = (par1, par2) => {

if(par1<=0){

par1 = 1;

}

return par1*par2;

}

let myObj = {

myMeth: function(){

// code

}

myMeth2: function(){

setTimeout(function(){

this.myMeth(); // ERROR! function not preserve scope

}, 1000);

}

myMeth2: function(){

setTimeout( ()=>{

this.myMeth(); // scope is myObj

},1000);

}

Destructuring

let obj = {k1:v1, k2: v2};

let {k1, k2} = obj;

console.log(k1, k2);

let myFunc = ({k1}) => console.log(k1);

let arr = ['first', 'second', 'third'];

let [firstItem] = arr;

let [,, thirdItem] = arr;

Object Literal Ehancement

let var1 = value1;

let var2 = value2;//rest is array without first item

let obj = {var1, var2}; //obj= {var1:value1, var2:value2}

let myFunc = function(){

return this.var1;

};

let obj2 = {var1, var2, myFunc};

let obj3 = {

prop1,

prop2,

myMeth(){

//code

}

Spread Operator

let arr1 = [v1, v2, v3];

let arr2 = [v4, v5, v6];

let arr3 = [...arr1, ...arr2]; //arr3 = [v1, v2, v3, v4, v5, v6];

let [last] = arr.reverse(); //array altered

let [last] = [...arr].reverse();

let [first, ...rest] = arr; //rest is array without first item

let obj = {k1:v1, k2:v2};

let prop = value;

let obj2 = {...obj, prop};

Promise

const getUsers = count => new Promise(

(resolves, rejects) => {

const url = `http://myapi/user/?limit:${count}`;

const req = new XMLHttpRequest/(;

req.open('GET', url);

req.onload = () => req,status == 200 ?

resolves(JSON.parse(req.response)).results :

reject(Error(req.statusText));

req.onerror = (err) => reject(err);

req.send();

}

);

getUsers(10).then(

users=>console.log(users),

err => console.error(err)

);

getUsers(10)

.then(users=>console.log(users))

.catch(err=>console.log(err));

Class

class MyClass {

constructor(par1, par2){

// code

}

myMeth(){

// code

}

class MyClass2 extends MyClass{

constructor(par1, par2, par3){

super(par1, par2);

// code

}

myMeth2(){

// code

}

Module

Module -> file

file1.js

export const myFunc = (par1) => par1+5;

export const myFunc2 = (par2) => par2^2;

file2,js

export const default myVar = 5;

file3.js

import {myFunc, myFunct2} from "./file1";

import {myVar} from "./file2";

alias

import {myFunc as f1, myFunct2 as f2} from "./file1";

all

import * as f from "./file1"

NodeJS (Common js)

file1.js

module.exports = {myFunc, myFunct2};

file3.js

const {myFunc, MyFunc2} = require("./file1");

React prefill input/form

2018-08-03T13:58:00.000+02:00

In these example form components are react uncontrolled components.

It's best practice using controlled input (value+onChange. https://reactjs.org/docs/forms.html)

Example 1: implement componentDidUpdate method



class Form extends Component {

    submit = (e) => {
        e.preventDefault();
        var user = Object.keys(this.refs).reduce( (obj, k) =>{
            obj[k] = this.refs[k].value;
            this.refs[k].value = '';
            return obj;
        }, {} );
        this.props.onSubmit(user);
    }

    onChange = ({target:el}) => el.value = el.value.toUpperCase();

    render() {
        return (
        <form onSubmit={this.submit}>
            <div className="form-group">
                <input type="text" 
                       ref="name"
                       className="form-control" 
                       placeholder = "name"/>
            </div>
            <div className="form-group">
                <input type="text" 
                       ref="surname" 
                       onChange={this.onChange} 
                       className="form-control" 
                       placeholder="surname" />
            </div>
            <button type="submit" className="btn btn-primary">add</button>
        </form>
        );
    }

    componentDidUpdate(){
        const {user} = this.props; 
        this.refs.name.value = user.name;
        this.refs.surname.value = user.surname; 
    }
}

Example 2: use defaultValue



class Content6 extends Component {
    state = { 
        formCfg: {name:'', cities:[]},
        submittedData: {}
     }

    dataList = [
        {name:'Pippo', cities:['Milan', 'Rome', 'Palermo'], isMale:true, defaultCity:'Rome' },
        {name:'Tina', cities:['Torino', 'Genova', 'Pavia'], isMale:false},
        {name:'Pino', cities:['Venice', 'Padova', 'Firenze'], isMale:true}
    ]

    onClick = (formCfg) => this.setState({formCfg}); 
    onSave = (submittedData) => this.setState({submittedData});
    render() {
        const {formCfg, submittedData} = this.state; 
        return ( <div>
            <p>click item to fill form:</p>
            {this.dataList.map( (cfg, i)=>(
            <div key={i} onClick={(ev)=>this.onClick(cfg)} 
                style={{cursor:'pointer', backgroundColor:'#CCC', margin:2}}>
                {JSON.stringify(cfg)}
            </div>))}
            <div>
                <p>Submitted data: {JSON.stringify(submittedData)}</p>
            </div>
            <div><FormSL {...formCfg} save={this.onSave}/></div>

        </div> );
    }
}

//stateless component
class FormSL extends Component {

    onSubmit = ({name: {value:name}, city:{value:city},isMale:{checked:isMale}}) => 
                   this.props.save({name, city, isMale});

    render() { 
        const {name, cities,isMale, defaultCity} = this.props;
        return ( <form>
            <input ref='name' defaultValue={name} type="text" className="form-control" /><br/>
            <select ref='city' name="" id="" className="form-control" size={cities.length+1}>
                <option value=''>[select city]</option>
                {cities.map((city)=><option 
                    key={city} 
                    value={city.toUpperCase()} 
                    selected={defaultCity===city}>
                    {city}
                </option> ) }
            </select><br/>
            <input ref="isMale" type="checkbox" defaultChecked={isMale} /> isMale<br/>
            <button type="button" onClick={() => this.onSubmit(this.refs)} >submit</button>
        </form> );
    }
}

PHP | JS: convert date format to sql timestamp

2015-02-03T10:33:00.001+01:00

HTML
<input id="myinput" type="text" value="20/09/1973" /> 

Javascript
var mydate = document.getElementById("myinput").value;
var t = mydate.replace(/^(\d{2})\/(\d{2})\/(\d{4})$/, "$3-$2-$1 00:00:00");

//t= "1973-09-20 00:00:00"

PHP
echo preg_replace("/^(\d{2})\/(\d{2})\/(\d{4})$/", "$3-$2-$1 00:00:00", "20/09/1973");

angular js: set input focus

2014-12-03T13:16:00.000+01:00

AngularJs: creare una tabella con riodinamenti crescenti e decrescenti via template

2014-05-17T19:45:00.000+02:00

Nel template html seguente, viene creata una tabella tramite AngularJs in cui le colonne sono riordinabli con un click sull'header della colonna.
Questo viene fatto tramite una semplice condizione

ng-click = "colOrd= colOrd=='fieldname' && '-fieldame' || 'fieldname'"

che assegna al parametro "colOrd" utilizzato per il filtro "orderBy", il nome del campo preceduto dal segno meno (ordinamento decrescente) se gia è attivo l'ordinamento crescente su questa colonna.

<span>ordinamento attuale: {{colOrd}}</span>
<table border=1 cellpadding=5>
<tr>
<td ng-click="colOrd= colOrd=='id' && '-id' || 'id'">Id:</td>
<td ng-click="colOrd= colOrd=='nome' && '-nome' || 'nome'">Nome:</td>
<td ng-click="colOrd= colOrd=='cognome' && '-cognome' || 'cognome'">Cognome:</td>
<td ng-click="colOrd= colOrd=='cell' && '-cell' || 'cell' ">Cellulare:</td>
</tr>
<tr ng-repeat="item in mylist | orderBy:colOrd">
<td>{{item.id}}</td>
<td>{{item.nome}}</td>
<td>{{item.cognome}}</td>
<td>{{item.cell}}</td>
</tr>
</table>

dojo autocomplete (suggest box)

2013-11-09T20:43:00.004+01:00

CLIENT

(html)

<input id="mySuggestBox" />

(javascript dojo v.1.9):

require([
"dojo/_base/declare",
  "dojox/data/QueryReadStore",
  "dijit/form/ComboBox",
  "dojo/domReady!",

], function(declare, QueryReadStore, ComboBox) {

var AutocompleteStore = declare(QueryReadStore, {
fetch: function(request){
request.serverQuery = {q:request.query.name};
return this.inherited("fetch", arguments);
},
wrapItem: function(rawItem, callback){
this._xhrFetchHandler({
identifier:'id',
items: [rawItem],
label: 'label'
},
{},
function(items){
callback(items[0]);
}
);

}
});
var store = new AutocompleteStore({url:'services/myservice.php'});
var cb = new ComboBox({
store: store,
searchAttr: "name",
labelAttr: "label",
autoComplete: true,
onChange: function(){ if(!this.item) this.set("displayedValue", ""); }
}, "mySuggestBox");

//set default value
store.wrapItem({id:111, name:"lorem", label: "ipsum"}, function(item){
cb.set("item", item);
});

});

SERVER

(myservice.php):

<?php
$q = $_GET["q"];
$sql = "SELECT field_id AS id, field_xxx AS name, CONCACT('<b>',field_xxx,'</b')" AS label FROM myTable WHERE field_xxx LIKE "%{$q}% ORDER BY field_xxx LIMIT 10";
//fetch query... :
/*
$fields = array(
array (id=>1, name=>"lorem", label=> "<span>lorem</span>",
array (id=>2, name=>"ipsum", label=>"<span>impsum</span>",
....
);
*/
header("Content-Type", "text/json");
echo json_encode(array('numRows'=>count($fields), 'items'=>$fields, 'identity'=>'id'));

GWT: SplitLayoutPanel, double(or single) click to show/hide panel

2012-02-11T17:27:00.002+01:00

La classe seguente consente di chiudere o mostrare i pannelli di uno SplitLayoutPanel tramite un doppio click sugli "splitters" (le barre per ridimensionare i pannelli).
Il doppio click viene riconosciuto se l'intervallo tra un click e quello successivo non supera un secondo (primo valore evidenziato in giallo espresso in millisecondi).
L'animazione che mostra o nasconde il pannello dura 500 millisecondi (secondo valore evidenziato in giallo).

public class SplitLayoutPanelExt extends SplitLayoutPanel {

private class ClickSplitter {
private Widget widget;
private Widget splitter;
private long t = 0;
public ClickSplitter(Widget w, Widget splitter){
this.widget = w;
   this.splitter = splitter;
   }
public void onAttach(){
DOM.setEventListener(splitter.getElement(), new EventListener() {
    @Override
   public void onBrowserEvent(Event event) {
   if(Event.ONMOUSEDOWN==event.getTypeInt()){
   long t2 = (new Date()).getTime();
   if(t2-t>1000) { t = t2; splitter.onBrowserEvent(event); return; }
   LayoutData layout = (LayoutData)widget.getLayoutData();
   if(layout.size>0){
layout.oldSize = layout.size;
   layout.size = 0;
   }else {
layout.size = layout.oldSize;
   layout.oldSize = 0;
   }
t=0;
   animate(500);
event.preventDefault();
}else {
splitter.onBrowserEvent(event);
}
}
});
}
}

private List<ClickSplitter> clickSplitterList = new ArrayList< ClickSplitter >();

public void addWestClosable( Widget widget, double size) {
super.addWest(widget, size);
addClickSplitter(widget);
}

public void addEastClosable( Widget widget, double size){
super.addEast(widget, size);
addClickSplitter(widget);
}

public void addNorthClosable(Widget widget, double size){
super.addNorth(widget, size);
addClickSplitter(widget);
}

public void addSouthClosable(Widget widget, double size){
super.addSouth(widget, size);
addClickSplitter(widget);
}

private void addClickSplitter(Widget widget){
int idx = super.getWidgetIndex(widget);
   if(idx>-1 && idx < getWidgetCount()-1){
Widget splitter = super.getWidget(idx+1);
   clickSplitterList.add(new ClickSplitter(widget, splitter));
}
}

@Override
protected void onAttach() {
   super.onAttach();
for(ClickSplitter clickSplitter: clickSplitterList){
clickSplitter.onAttach();
}
}
}

Example:

/**
* This is the entry point method.
*/
public void onModuleLoad() {

SplitLayoutPanelExt splitLayoutPanelExt = new SplitLayoutPanelExt();

splitLayoutPanelExt.addWestClosable(new Label("west panel"), 200);
splitLayoutPanelExt.addWestClosable(new Label("west2 panel"), 200);
splitLayoutPanelExt.addEastClosable(new Label("east panel"), 200);
splitLayoutPanelExt.addEastClosable(new Label("east2 panel"), 200);
splitLayoutPanelExt.addNorthClosable(new Label("north panel"), 100);
splitLayoutPanelExt.addSouthClosable(new Label("south panel"), 100);
splitLayoutPanelExt.add(new Label("center panel"));

RootLayoutPanel.get().add(splitLayoutPanelExt);

}

Variante single click
Per mostrare/nascondere i pannelli con un click singolo, sostituire il metodo "onBrowserEvent" con il seguente codice:

    @Override
   public void onBrowserEvent(Event event) {
   if(Event.ONMOUSEDOWN==event.getTypeInt()){
t = (new Date()).getTime();
}else if(Event.ONMOUSEUP==event.getTypeInt()) {
long t2 = (new Date()).getTime();
   if(t2-t>200) { t = 0; splitter.onBrowserEvent(event); return; }
   LayoutData layout = (LayoutData)widget.getLayoutData();
   if(layout.size>0){
layout.oldSize = layout.size;
   layout.size = 0;
   }else {
layout.size = layout.oldSize;
   layout.oldSize = 0;
   }
t=0;
   animate(500);
}
splitter.onBrowserEvent(event);
}

GWT: eventi righe per FlexTable

2012-01-29T13:31:00.000+01:00

La classe GWT seguente consente di aggiungere un handler per gli eventi di onclick, onmouseover e onmouseout per le righe di una flextable.

import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.EventListener;

public class FlexTableExt extends FlexTable {

    public static interface RowEventsHandler {
public void onClick(FlexTableExt source, int row);
  public void onMouseOver(FlexTableExt source, int row);
  public void onMouseOut(FlexTableExt source, int row);
}

public void setRowEventsHandler(final int row, final RowEventsHandler  handler){
Element rowEl = this.getRowFormatter().getElement(row);
DOM.setEventListener(rowEl, new EventListener(){
@Override
public void onBrowserEvent(Event event) {
switch(event.getTypeInt()){
case Event.ONCLICK:
handler.onClick(FlexTableExt.this, row); break;
case Event.ONMOUSEOVER:
  handler.onMouseOver(FlexTableExt.this, row); break;
case Event.ONMOUSEOUT:
  handler.onMouseOut(FlexTableExt.this, row); break;
}
}
});
  DOM.sinkEvents(rowEl, Event.ONCLICK | Event.ONMOUSEOUT | Event.ONMOUSEOVER);
}

}

Example:

FlexTableExt ft = new FlextTableExt();
FlexTableExt.RowEventsHandler rowHandler = new FlexTableExt.RowEventsHandler(){
  @Override
public void onClick(FlexTableExt  ft, int row){
Window.alert("click row: "+row);
}
  @Override
  public void onMouseOver(FlexTableExt  ft, int row){
ft.getRowFormatter().getElement(row).getStyle().setBackgroundColor("yellow");
}
  @Override
  public void onMouseOut(FlexTableExt  ft, int row){
ft.getRowFormatter().getElement(row).getStyle().setBackgroundColor("");
}

};
for( int r=0; r<10; r++){
for(int c=0; c<5; c++){
ft.setText(r,c, "cell " + r + "," + c );
}
ft.setRowEventsHandler(r, rowHandler );
}

Come far funzionare la scheda wireless Broadcom 4303 su ubuntu

2011-10-01T14:11:00.002+02:00

Per far funzionare la scheda wireless Broadcom 4303 occorre il driver b43. Per installarlo aprite un terminale e scrivete:

sudo apt-get install b43-fwcutter
una volta installato, riavviate il sistema e dal network manager (l'icona vicino all'orologio) selezionate "Abilita rete senza fili".

GWT tutorial: GWT with PHP

2011-09-29T19:04:00.050+02:00

Typically, web applications developed in GWT imply the use of a Java application server (eg. Tomcat, Jetty, Glashfish, etc).
You can use a normal HTTP server like Apache or IIS to develop web services with server-side language of your choice.

Let us first of all how to create an ajax request into GWT client:


String url = "http://localhost/myservice.php";
RequestBuilder builder = new RequestBuilder(RequestBuilder.POST, url);
String postString = "par1=val1&par2=val2&par3=val3";
builder.setHeader("Content-Type", "application/x-www-form-urlencoded");
try {
    builder.sendRequest(postString, new RequestCallback(){
        @Override
        public void onResponseReceived(Request request, Response response) {
           if( 200==response.getStatusCode() ) {
               
               String jsonString = response.getText();
               MyObject myObj = parseJson(jsonString);
           }   
        }

        @Override
         public void onError(Request request, Throwable exception) {}
    });
}catch(RequestException e) {}

The "jsonString" string must then be deserialized into an object.
If we use the json format is sufficient to create a JSNI method to execute the "eval" javascript statement; if the format is in XML you can use a XMLparser.

native final MyObject parseJson(String json) /*-{
   return eval("("+ json +")");
}-*/;

where MyObject is a class which must extend "JavaScriptObject" and with methods needed to read the properties.

class MyObject extends JavaScriptObject {
    protected MyObject(){}
    public final native String getMyProperty1()/*-{ return this.myProperty1 }-*/;
    public final native int getMyProperty2()/*-{ return this.myProperty2 }-*/;
}

json string returned from server should be something like this:

{ 'myProperty1':'hello', 'myProperty2':2534 }

You can create in php like this:

<?php
$response = array('myProperty1'=>'hello', 'myProperty2'=>2534);
echo json_encode($response);
?>

It's good practise to handle js error:
try {
MyObject myObj = parseJson(jsonString);
}catch(JavaScriptException ex) {
// handle parsing error
}

Said this, It remains, therefore, the problem of running service in "debug mode" on Eclipse (this modality uses a java application server listening on port 8888).
The problem is due to "cross domain" browser restrictions .
On the client side, you are at "127.0.0.1:8888" (ip address debug mode) and you need to call a service at "127.0.0.1:80" (apache http server). The browser will not permit this.
To solve this problem, I created a GWT service (RemoteServiceServlet) called DebugService .
This service acts like a proxy and then simly submit your request by sending cookies (eg. php session id) and all HTTP POST parameters .

Obviously you have to implement a code that checks when to use the debugging service, or contact the service php. For example, in this way:
if( GWT.getHostPageBaseURL().indexOf("http://127.0.0.1:8888") >= 0 ){
//call debug service (RemoteService)
DebugServiceAsync debugService = GWT.create(DebugService.class);
debugService.callJsonService("par1=val1&par2=val2","http://localhost/myService.php", new AsyncCallback<String>(){
public void onSuccess(String jsonString){
//TODO handle json string
}
public void onError(Throwable caught) {
// TODO handle error
}
});
}else {
//call php service (RequestBuilder)
RequestBuilder builder = new RequestBuilder( RequestBuilder.POST, "http://localhost/myService.php");
// ....
}

DebugServiceImpl.java (pkg server)

package it.gheryd.testgwtphp.server;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.net.URL;
import java.net.URLConnection;

import javax.servlet.http.Cookie;

import it.gheryd.testgwtphp.client.jsonServices.DebugService;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

public class DebugServiceImpl extends RemoteServiceServlet implements DebugService {

 @Override
 public String callJsonService(String postParams, String url) {
   HttpURLConnection  conn = null;
   InputStream is = null;
   try {
     URL phpService = new URL( url );
     conn = (HttpURLConnection )phpService.openConnection();
     conn.addRequestProperty("Content-Type", "application/x-www-form-urlencoded");
     boolean useCookies = false;
     if(this.getThreadLocalRequest().getHeader("Cookie")!=null) {
       conn.addRequestProperty("Cookie", this.getThreadLocalRequest().getHeader("Cookie"));
       useCookies = true;
     }
     if(postParams!=null && postParams.length()>0 ) {
       conn.setDoOutput(true);
       OutputStreamWriter out = new OutputStreamWriter(conn.getOutputStream());
       out.write(postParams);
       out.close();
     }
     if (conn.getResponseCode() >= 400) {
       is = conn.getInputStream();
     } else {
       is = conn.getErrorStream();
     }
     is = conn.getInputStream();
     BufferedReader in = new BufferedReader( new InputStreamReader(is) );
     String jsonResponse = "";
     String inputLine;
     while ((inputLine = in.readLine()) != null) jsonResponse += inputLine;
     in.close();
     if(useCookies){
        String headerName=null;
        for (int i=1; (headerName = conn.getHeaderFieldKey(i))!=null; i++) {
          if (headerName.equals("Set-Cookie")) {
              String cookie = conn.getHeaderField(i);
              cookie = cookie.substring(0, cookie.indexOf(";"));
              String cookieName = cookie.substring(0, cookie.indexOf("="));
              String cookieValue = cookie.substring(cookie.indexOf("=") + 1, cookie.length());
              this.getThreadLocalResponse().addCookie(new Cookie(cookieName, cookieValue));
          }
        }
     }
         
     return jsonResponse;
   } catch(Exception ex) {
      this.log("errore in debug\n"+"url: "+url+"\nconn:"+conn+" \nis:"+is, ex);
      return "{type:\"error\",value:{message:\""+ex.getClass().getSimpleName()+" - "+ex.getMessage()+"\"}}";
   }
 }

}

DebugService.java (pkg client)

package it.gheryd.testgwtphp.client.jsonServices;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;


@RemoteServiceRelativePath("debugService")
public interface DebugService extends RemoteService {

 public String callJsonService( String postParams, String url );
 
}

DebugServiceAsync .java

package it.gheryd.testgwtphp.client.jsonServices;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface DebugServiceAsync {

 void callJsonService(String postParams, String url, AsyncCallback callback);

}

The service JAVA must be declared in the file / WEB-INF/web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
              http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         version="2.5"
         xmlns="http://java.sun.com/xml/ns/javaee">

  <!-- Servlets -->
  
  <!-- Default page to serve -->
  <welcome-file-list>
    <welcome-file>TestGwtPhp.html</welcome-file>
  </welcome-file-list>
  
  <servlet>
    <servlet-name>debugService</servlet-name>
    <servlet-class>it.gheryd.testgwtphp.server.DebugServiceImpl</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>debugService</servlet-name>
    <url-pattern>/testgwtphp/debugService</url-pattern>
  </servlet-mapping>
</web-app>

At this point you know what you need to make an application with which you can make debugging of Eclipse (or NetBeans).

If you want to see a practical example, after you find a project that I hope will be clarified.
In this project I created a series of classes under the package "jsonService" that automate the ajax request process.

The Eclipse project has this structure:

As you can see, the files ". php" are in the "war" folder of the project.

In my example I added in the configuration file httpd.conf Apache alias:
httpd.conf

Alias /testgwtphp "C:/Users/gheryd/workspace/TestGwtPhp/war/" 
<Directory "C:/Users/gheryd/workspace/TestGwtPhp/war/">
    Options Indexes FollowSymLinks MultiViews
    AllowOverride all
        Order Deny,Allow
 Deny from all
 Allow from 127.0.0.1
</Directory>

for which the services in PHP HTTP Server can be accessed at "http://localhost/testgwtphp/".

In the package it.gheryd.testgwtphp.client.jsonServices find the classes that use it for calls to PHP services.
The class JsonService is used to create a ajax request .
This class automatically decides whether to make the request directly to the service or whether to call the PHP DebugService (RemoteServiceServlet). It also takes care to deserialize the JSON string bean object.
The code below is highlighted in yellow the url used in debug mode.

JsonService.java

package it.gheryd.testgwtphp.client.jsonServices;

import java.util.Map;

import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.JavaScriptException;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.http.client.Request;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.http.client.RequestCallback;
import com.google.gwt.http.client.RequestException;
import com.google.gwt.http.client.Response;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class JsonService {

 private static final String TYPE_ERROR = "error";
 private static final String BASE_SERVICE_URL =  GWT.getHostPageBaseURL();
private static final String BASE_DEBUG_SERVICEURL = "http://127.0.1.1/testgwtphp/";
 
 public static boolean DEBUG = false;
 private DebugServiceAsync debugService =null;
 
 private String serviceUrl = null;
 
 
 public JsonService(String serviceUrl) {
  this.serviceUrl = serviceUrl;
 }
 
 public <T extends JavaScriptObject> void request(String jsonParams, JsonServiceCallback<T> callback) {
  try {
   String postString = createPostString(jsonParams);
   if(DEBUG) 
    startDebugRequest(postString, callback );
   else
    startRequest(postString, callback );
  }catch(JavaScriptException ex) {
   callback.onError("javascript exception: "+ex.getMessage()+" jsonParams: "+jsonParams);
  }
 }
 
 
 public <T extends JavaScriptObject> void request(Map<String,String> paramsMap, JsonServiceCallback<T> callback) {
  String postString = createPostString(paramsMap);
  if(DEBUG)
   startDebugRequest(postString, callback );
  else 
   startRequest(postString, callback);
 }
 
 
 private <T extends JavaScriptObject> void startDebugRequest(String postString, final JsonServiceCallback<T> callback) {
  if(debugService==null) {
   debugService = GWT.create(DebugService.class);
  }
  String url = BASE_DEBUG_SERVICEURL+serviceUrl;
  debugService.callJsonService(postString, url, new AsyncCallback<String>() {
   
   @Override
   public void onSuccess(String result) {
    handleSuccess(result, callback);
   }
   
   @Override
   public void onFailure(Throwable caught) {
    callback.onError(caught.getMessage());
   }
  });
 }
 
 
 private <T extends JavaScriptObject> void startRequest(String postString,  final JsonServiceCallback<T> callback) {
  String url = BASE_SERVICE_URL+serviceUrl;
  
  RequestBuilder builder = new RequestBuilder(RequestBuilder.POST, url);
  builder.setHeader("Content-Type", "application/x-www-form-urlencoded");
  
  try{
   builder.sendRequest(postString, new RequestCallback(){
    @Override
    public void onResponseReceived(Request request, Response response) {
     if( 200==response.getStatusCode() ) {
      handleSuccess(response.getText(), callback);
     }else {
      callback.onError( "error status:"+response.getStatusCode() );
     }    
    }

    @Override
    public void onError(Request request, Throwable exception) {
     callback.onError(exception.getMessage()); 
    }
    
   });
  }catch(RequestException e){
   callback.onError(e.getMessage());
  }
 }
 
 private <T extends JavaScriptObject> void handleSuccess(String json, JsonServiceCallback<T> callback) {
  ResponseBean responseBean = null;
  try {
   responseBean = deserializeResponse( json );
  }catch(JavaScriptException exception) {
   callback.onError("javascript exception: "+exception.getMessage()+" json->"+json);
   return;
  }
  
  if( TYPE_ERROR.equals(responseBean.getType()) ) {
   try {
    ErrorBean errorBean = (ErrorBean)responseBean.getValue();
    callback.onError( errorBean.getMessage() );
   }catch(JavaScriptException exception){
    callback.onError("error object deserialization:"+exception.getMessage()+" json: "+json );
   }
   
   return;
  }
  callback.onSuccess( (T)responseBean.getValue() );
 }
 
 private final native ResponseBean deserializeResponse(String json) /*-{
  var response = eval( "("+json+")" );
  if( !response.type ) throw "type is undefined";
  if( response.value===undefined ) throw "value is undefined";
  if( typeof(response.value) == "string" ) {
   response.value = {"str":response.value};
  }
  return response;
 }-*/;
 
 private final native String createPostString(String json)/*-{
  if(!json) return null;
  var obj = eval( "("+json+")" );
  var s = "";
  for(var k in obj) {
   s += (s.length==0?"":"&") + k + "=" + obj[k];
  }
  return s;
 }-*/;

 private String createPostString(Map<String,String> paramsMap) {
  if(paramsMap==null || paramsMap.size()==0 ) return null;
  String s = "";
  for(String k: paramsMap.keySet()) {
   s += (s.length()==0?"":"&") + k + "=" + paramsMap.get(k);
  }
  return s;
 }
}

The interface JsonServiceCallback is similar to that of GWT AsyncCallback ; in a similar manner should implement this interface to manage the response in case of success or failure.

JsonServiceCallback.java

package it.gheryd.testgwtphp.client.jsonServices;

import com.google.gwt.core.client.JavaScriptObject;

public interface JsonServiceCallback <T extends JavaScriptObject> {
 
 public void onSuccess(T result);
 public void onError(String error);
 
}

The classes ResponseBean and ErrorBean are used internally to JsonService , and define the formats of the data that the service must return PHP (explained in more detail below)

ResponseBean.java

package it.gheryd.testgwtphp.client.jsonServices;

import com.google.gwt.core.client.JavaScriptObject;

class ResponseBean  extends JavaScriptObject { 
 protected ResponseBean(){}
 
 public final native String getType() /*-{
  return this.type;
 }-*/;
 
 public final native JavaScriptObject getValue() /*-{
  return this.value;
 }-*/;
}

ErrorBean.java

package it.gheryd.testgwtphp.client.jsonServices;

import com.google.gwt.core.client.JavaScriptObject;

public class ErrorBean extends JavaScriptObject {

 protected ErrorBean() {}
  
 public final native String getMessage() /*-{
  return this.message;
 }-*/;  
}

The class JsString is used if the data value returned by the service PHP is a simple string.
JsString.java

package it.gheryd.testgwtphp.client.jsonServices;

import com.google.gwt.core.client.JavaScriptObject;

public class JsString extends JavaScriptObject{

 protected JsString() {}
  
 public final native String getString()/*-{
  return this.str;
 }-*/;
}

For completeness also follows the content of the GWT module configuration file:
TestGwtPhp.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='testgwtphp'>
<!-- module rename-to='testgwtphp' -->
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.clean.Clean'/>
  <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

  <!-- Other module inherits                                      -->

  <!-- Specify the app entry point class.                         -->
  <entry-point class='it.gheryd.testgwtphp.client.TestGwtPhp'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>

Now that we have defined the basic classes for asynchronous communication client / server, including debug mode, we explain how to use this system.
To make an ajax call is sufficient to instantiate the class and pass the url on JsonService of our service:

JsonService myService = new JsonService("MyService.php");

so the request will be made by calling the "request":

myService.request(null, new JsonServiceCallback<MyBean>(){
    public void onSuccess(MyBean result) {
        //TODO response ok
    }
    public void onError(String error) {
       //TODO error
    }
});

The bean that will return me the service is to extend the class "com.google.gwt.core.client.JavaScriptObject"

public class MyBean extends JavaScriptObject {
    protected MyBean() {}
    public final native String getMyProperty()/*-{
        return this.myPropery;
    }-*/;
}

PHP side of the service will return a JSON string in this format:

{
   type: "MyBean",
   value: {myProperty: "Hello World!" }
}

or in case of error

{
   type: "error",
   value: {message: "This is a error"}
}

To pass the POST data in PHP Service must create a hash map:

Map<String,String> postParams = new HashMap<String,String>();
postParams.put("myparam", "myvalue");
myService.request(postParams, new JsonServiceCallback<MyBean>(){
    public void onSuccess(MyBean result) {
        //TODO response ok
    }
    public void onError(String error) {
       //TODO error
    }
});

or alternatively you can pass a json string:

String postParams = "{'myparam':'myvalue'}";

The service php must be something like this:

<?php
if( !isset($_POST["myparam"]) ) {
    echo json_encode( array("type"=>"error", "value"=>array("message"=>"missing post param") ));
    return;
}
echo json_encode( array("type"=>"MyBean", "value"=>array("myProperty"=>" gwt-php test ") ));
?>

As already explained, the service can return a simple string. In this case you must use the class JsString :

myService.request(postParams, new JsonServiceCallback<JsString>(){
    public void onSuccess(JsString result) {
        String s = result.getStr();
        //TODO response ok
    }
    public void onError(String error) {
       //TODO error
    }
});

The json response will then simply:

{
   type: "MyBean",
   value: "Hello World!"
}

Sample implementation
In applying the test that I developed using the PHP session to store the names entered by the user via the GUI.
The look and feel of this page:

In the class JsonService was configured as the base url for use in debugging PHP services:

private static final String BASE_DEBUG_SERVICEURL = "http://127.0.1.1/testgwtphp/";

To enable debug mode should lead to true the static variable class JsonService , you can set it to automatically:

JsonService.DEBUG = GWT.getHostPageBaseURL().indexOf("http://127.0.0.1:8888") >= 0;

At this point we see the GWT module of the test.
TestGwtPhp.java

package it.gheryd.testgwtphp.client;

import java.util.HashMap;
import java.util.Map;

import it.gheryd.testgwtphp.client.jsonServices.JsString;
import it.gheryd.testgwtphp.client.jsonServices.JsonService;
import it.gheryd.testgwtphp.client.jsonServices.JsonServiceCallback;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;


/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class TestGwtPhp implements EntryPoint {

 private JsonService addUserService = new JsonService("AddUserService.php");
 private JsonService getUsersService = new JsonService("GetUsersService.php");
 private JsonService deleteUsersService = new JsonService("DeleteUsers.php");
 
 public void onModuleLoad() {
  
  final SimplePanel resultPanel = new SimplePanel();
  resultPanel.getElement().getStyle().setBackgroundColor("#EEE");
  resultPanel.getElement().getStyle().setProperty("border", "1px solid black");
  resultPanel.getElement().getStyle().setProperty("padding", "10px");
  
  VerticalPanel vp = new VerticalPanel();
  vp.setSpacing(10);
  
  final TextBox nameTB = new TextBox();
  final TextBox surnameTB = new TextBox();
  final CheckBox debugCB = new CheckBox("debug");
  
  HorizontalPanel hp = new HorizontalPanel();
  hp.add( new HTML("name: ") );
  hp.add( nameTB );
  hp.add( new HTML("surname: ") );
  hp.add( surnameTB );
  vp.add(hp);
  
  Button addUserBtn = new Button("add user");
  Button getUsersBtn = new Button("get users");
  Button deleteUsersBtn = new Button("delete users");
  
  hp = new HorizontalPanel();
  hp.add(addUserBtn);
  hp.add(getUsersBtn);
  hp.add(deleteUsersBtn);
  hp.add(debugCB);
  
  vp.add(hp);
  vp.add(resultPanel);
  final VerticalPanel usersPanel = new VerticalPanel();
  vp.add(usersPanel);
  
  debugCB.addClickHandler(new ClickHandler() {
   @Override
   public void onClick(ClickEvent event) {
    JsonService.DEBUG = debugCB.getValue();
    resultPanel.setWidget( new HTML("debug mode: "+JsonService.DEBUG) );
   }
  });
  
  debugCB.setValue( GWT.getHostPageBaseURL().indexOf("http://127.0.0.1:8888") >= 0 , true );
  
  JsonService.DEBUG = debugCB.getValue();
  
  addUserBtn.addClickHandler(new ClickHandler() {
   @Override
   public void onClick(ClickEvent event) {
    
    Map<String,String> params = new HashMap<String,String>();
    params.put("name", nameTB.getText());
    params.put("surname", surnameTB.getText());
    addUserService.request(params, new JsonServiceCallback<JsString>(){

     @Override
     public void onSuccess(JsString result) {
      resultPanel.setWidget( new HTML("Result: "+result.getString()) );
     }

     @Override
     public void onError(String error) {
      resultPanel.setWidget( new HTML("<span style=\"color:red;\">ERROR!</span> "+error) );
     }
     
    });
   }
  });
  
  getUsersBtn.addClickHandler(new ClickHandler() {
   @Override
   public void onClick(ClickEvent event) {
    usersPanel.clear();
    String params = null;
    getUsersService.request(params,  new JsonServiceCallback<JsArray<UserBean>>(){

     @Override
     public void onSuccess(JsArray<UserBean> result) {
      resultPanel.setWidget( new HTML("users: "+result.length()) );
      for(int i=0; i<result.length(); i++) {
       UserBean ub = result.get(i);
       usersPanel.add( new HTML( ub.getName()+" "+ub.getSurname() ) );
      }
     }

     @Override
     public void onError(String error) {
      resultPanel.setWidget( new HTML("<span style=\"color:red;\">ERROR!</span> "+error) );
     }
     
    });
    
   }
  });
  
  deleteUsersBtn.addClickHandler(new ClickHandler(){
   @Override
   public void onClick(ClickEvent event) {
    String params = null;
    deleteUsersService.request(params, new JsonServiceCallback<JsString>() {
     @Override
     public void onSuccess(JsString result) {
      resultPanel.setWidget( new HTML("Result: "+result.getString()) );
     }

     @Override
     public void onError(String error) {
      resultPanel.setWidget( new HTML("<span style=\"color:red;\">ERROR!</span> "+error) );
     }
     
    });
    
   }
  });
  
  RootPanel.get().add(vp);
  
 }
 
}

It 's interesting use of the class JsArray (see gwt api) used to switch the list of objects UserBean . Not necessarily have to use a bean object that you define, you can pass any object that extends JavaScriptObject .

The bean that I used is as follows:
UserBean.java

package it.gheryd.testgwtphp.client;

import com.google.gwt.core.client.JavaScriptObject;

public class UserBean extends JavaScriptObject {
 protected UserBean() {}

 public final native String getName()/*-{
  return this.name;
 }-*/;
  
 public final native String getSurname()/*-{
  return this.surname;
 }-*/; 
}

And finally the PHP services used:
AddUserService.php

<?php 

if( !isset($_POST) ) {
 echo json_encode( array("type"=>"error", "value"=>array("message"=>"missing post params"))  );
 return;
}else if( empty($_POST["name"]) ) {
 echo json_encode( array("type"=>"error", "value"=>array("message"=>"missing post param 'name'"))  );
 return;
}else if( empty($_POST["surname"])  ) {
 echo json_encode( array("type"=>"error", "value"=>array("message"=>"missing post param 'surname'"))  );
 return;
}

$name = $_POST["name"];
$surname = $_POST["surname"];

session_start();

$response = array();

if( !isset($_SESSION["list"]) ) $_SESSION["list"] = array();
 
$_SESSION["list"][] = array("name"=>$name, "surname"=>$surname);

$response["type"] = "result";
$response["value"] = "ok";

echo json_encode($response);

?>

DeleteUsers.php

<?php 

session_start();

unset($_SESSION["list"]);

echo json_encode( array("type"=>"result", "value"=>"ok") );

?>

GetUsersService.php

<?php 

session_start();

if( !isset($_SESSION["list"]) )  {
 echo json_encode( array("type"=>"error", "value"=>array("message"=>"no list in session"))  );
 return;
};

$response = array("type"=>"userList" );
$response["value"] = $_SESSION["list"];

echo json_encode($response);
?>

We can now run our application from Eclipse:

while to run the application directly from Apache, you must first compile it:

Once completed you can access the url "127.0.0.1/testgwtphp/TestGwtPhp.html".
Remember to start Apache!

Deepening
I have not focused on the operation of the class JsonService but if the look is not very complex. It's definitely improved in several respects.
Error Handling
For example, error handling is dealt with very easily if not trivial, but in a real application would be more practical to treat the error as if it were an exception. In this case the interface ErrorBean could be enriched by other properties such as the name of an exception report to the client.
For example, if the session expired the service may respond with an error like this:

{
    type: "error",
    value: {message:"session expired", exception:"SessionExpiredException"} 
}

Then create a class exception on the client package:

public class SessionExpiredException extends Exception {
    public SessionExpiredException (String message) {  
       super(message);
    }
}

In this case the method onError interface JsonServiceCallback this will be the exception rather than the message string.

package it.gheryd.testgwtphp.client.jsonServices;

import com.google.gwt.core.client.JavaScriptObject;

public interface JsonServiceCallback  {
 
 public void onSuccess(T result);
 public void onError(Exception Ex);
 
}

To verify the type of exception would be enough to control implementation JsonServiceCallback:

myService.request(null, new JsonServiceCallback<MyBean>(){
    public void onSuccess(MyBean result) {
        //TODO response ok
    }
    public void onError(Exception ex) {
       if(ex instanceof SessionExpired) {
           //TODO session expired
       }else {
           //Window.alert(ex.getMessage());
       }
    }
});

In the class JsonService must be passed the instance of an exception:

if( "SessionExpiredException".equals(errorBean.getException()) )
   callback.onError( new SessionExpiredException(errorBean.getMessage()) );

Obviously you must add the property "exception" in the class ErrorBean :

package it.gheryd.testgwtphp.client.jsonServices;

import com.google.gwt.core.client.JavaScriptObject;

public class ErrorBean extends JavaScriptObject {

 protected ErrorBean() {}
  
 public final native String getMessage() /*-{
  return this.message;
 }-*/; 
 
 public final native String getException() /*-{
  return this.exception;
 }-*/; 
}

The methods JSNI
When you create a class that extends JavascriptObject, care must be taken to the return type in JSNI methods. In the following sample code is provided, for example, the type of return value:


public  class MyObject extends JavaScriptObject{
    protected MyObject(){}
    public final native int getIntNumber()/*-{
        return isNaN(this.intNumber)?0:this.intNumber;
    }-*/;
    public final native String getSomeString()/*-{
        return typeof(this.someString)=="string"? this.someString : "";
    }-*/;
}

This avoids errors in the code difficult to detect. Within JSNI methods you can put a notification to identify the causes of the error:


public  class MyObject extends JavaScriptObject{
    protected MyObject(){}
    public final native int getIntNumber()/*-{
        if(isNaN(this.intNumber)){
            console.log("***error***");
            console.log(this);
            this.intNumber = 0;
        }
        return this.intNumber;
    }-*/;
}

Hash Map
If a service needs to return a map of objects (an associative array in PHP), client-side GWT we can implement a class for the purpose:


public class JHashMap <V extends JavaScriptObject> extends JavaScriptObject{
     protected JHashMap(){}
     public final native JsArrayString keys()/*-{
         return this.keys;
     }-*/;
     public final native V get(String key)/*-{
         return this.values[key];
     }-*/;
}

PHP side of the map should be created as:

<?php
    $objectList = array(
        "obj1" => array("property1"=>"value1","property2"=>"value2"),
        "obj2" => array("property1"=>"value1","property2"=>"value2"),
        "obj3" => array("property1"=>"value1","property2"=>"value2")
    );
    $map = array(
         "keys" => array_keys($objectList),
         "values" => $objectList
    );
    echo json_encode( array("type"=>"JHashMap", "value"=>$map ) );

?>

From GWT client we manage well the answer:


myservice.request(null, new JsonServiceCallback<JHashMap<MyBean> >(){

     @Override
     public void onSuccess(JHashMap<MyBean> result) {

         JsArrayString keys = result.keys();

         for(int i=0; i<keys.length(); i++ ){
             MyBean myBean = result.get(keys.get(i));
             // ....
         }
     }

     @Override
     public void onError(String error) {
        //handle error
     }
});

HTML: Utilizzo corretto degli attributi

2011-09-17T15:43:00.004+02:00

Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html

Conoscere l'uso appropriato di questi attributi può semplificare il codice HTML, CSS e JAVASCRIPT e ritengo agevoli la manutenzione.

Attributo "id"
Quando il browser carica una pagina, verifica l'esistenza di questo attributo. Se l'attributo "id" viene specificato su un tag, il browser aggiunge il riferimento al relativo elemento in una mappa. Così in javascript è possibile accedere velocemente all'elemento con questa istruzione:
var el = document.getElementById("myId");
Questa istruzione restituisce un solo elemento HTML.
Se il valore dell'attributo "id" fosse duplicato, l'istruzione javascript non lavorerebbe adeguatamente.
Quindi il valore di un "id" non deve essere duplicato come in questo esempio:
<html>
<body>
<div id="container">...</div>
<div id="container">...</div>
</body>
</html>
Alcuni grafici css utilizzano l'attributo "id" per definire uno stile CSS:
#container {
padding: 10px;
}
ma come spiegato precedentemente, lo scopo dell'attributo "id" è quello di accedere in maniera veloce ad un determinato elemento tramite javascript.
Per Definire le proprietà grafiche consiglio di far riferimento all'attributo "class".

Attributo "class"
Questo attributo viene utilizzato per assegnare ad un certo elemento HTML uno stile grafico definito tramite foglio di stile CSS.
Molti utilizzano l'attributo "id" perché danno per scontato che quell'elemento sarà unico. Tuttavia, dato che spesso e volentieri le strutture grafiche di una pagina HTML subiscono cambiamenti nel tempo, è sempre meglio utilizzare riferimenti all'attributo "class":
<html>
<body>
<div class="mainContainer">...</div>
</body>
</html>
perché cambiando il valore della classe, e quindi l'aspetto grafico, non sarà necessario modificare per quanto possibile il codice javascript che probabilmente utilizzerà gli attributi "id" per accedere agli elementi html.
In realtà con alcune librerie javascript (es.jquery) è possible utilizzare uno dei valori di "class" per accedere ad uno o più elementi (vedere la sezione "Selettori jQuery").

Attributo "name"
In questa sezione parleremo dell'attributo "name" in riferimento agli elementi (input,select) usati nel form (questo attributo può essere utilizzato anche sul tag "<iframe>", <a> o <img>, per esempio).
Quindi, nel contesto di un form, questo attributo viene utilizzato per specificare i parametri da inviare al server con il metodo "GET" o "POST".
A differenza dell'attributo "id", può aver senso duplicare il valore di questo attributo su piu tag in due casi:
1.Attributo name duplicato su diversi form:
<html>
<body>
<form id="form1" method="POST" action="url1">
indirizzo casa:<input name="address" type="text"/>
<button type="submit" >invia</button>
</form>
<form id="form2" method="post" action="url2">
indirizzo ufficio<input name="address" type="text"/>
<button type="submit" >invia</button>
</form>
</body>
</html>
Come potete constatare, esistono due campi "input" che hanno lo stesso valore dell'attributo "name", ma sono inseriti in due form diversi. Quindi il submit in un form non crea conflitto con l'altro input inserito nell'altro form.

2. Attributo duplicato su un elemento "submit":

<form id="form1" method="POST" action="url1">
indirizzo casa:<input name="address" type="text"/>
<input type="submit" name="azione" value="aggiungi"/>
<input type="submit" name="azione" value="cancella"/>
</form>

In questo caso il valore che arriverà al server dipende dal bottone premuto. Se infatti viene premuto il tasto con name="aggiungi", al server verranno invitati in POST i valori "address" (che dipende da ciò che è inserito nella textbox) e azione="aggiungi". Se invece viene premuto il tasto "cancella", verrà inviato sempre "address" e azione ="cancella". Quindi a seconda del valore "azione", il codice lato server sa cosa deve fare con il valore di "address". Se in form prevede un solo tasto, potrebbe non esser necessario specificare l'attributo name per il tasto "submit".

Alcuni usano mettere il valore dell'attributo "id" uguale al valore dell'attributo "name":
<input id="address" name="address" type="text"/>
Questo non è necessario perché come è stato spiegato l'attributo "id" viene utilizzato lato client (codice javascript) mentre l'attributo "name" definisce il parametro da inviare al server.
Tuttavia è possibile via javascript utilizzare "name" per accedere direttamente ad un elemento:
var addressEl = document.getElementById("form1").address;
anche se consiglio sempre l'attributo "id". Uno dei motivi è spiegato in seguito.
Un errore comune che può capitare è assegnare all'attributo "name" un valore che in javascript potrebbe
scatenare un errore in quanto il suo valore corrisponde ad una parola riservata javascript.
Per esempio:
<input type="submit" name="submit" value="invia" />
se vogliamo avviare il "submit" di un form tramite javascript si genera un errore.
document.getElementById("form1").submit();
per il semplice motivo che la proprietà "submit" non fa più riferimento ad una funzione ma ad un elemento del form. Dato che chi scrive HTML non deve necessariamente conoscere javascript, per il programmatore javascript, onde evitare questi imprevisti è sconsigliabile accedere agli elementi tramite l'attributo name.

Selettore jQuery
jQuery fornisce una potente e semplice funzionalità per selezionare uno o più elementi sulla nostra pagina HTML tramite il nome di classi e nomi di attributi (nei browser di ultima generazione questo tipo di selezione si può effettuare anche in javascript nativo):
var list = jQuery("input[name=address] .lighted");
Tuttavia questo potente strumento deve essere usato in maniera adeguata se non vogliamo compromettere le prestazioni di esecuzione del codice.
Per esempio:
$(".myButtonDiv").click(function(event){
alert("clicked");
});
Questo selettore può essere molto pesante su certi browser e su certe tipologie di computer (es.netbook) in quanto richiede una lunga scansione di tutti gli elementi della pagina HTML.
In questo caso, per migliorare le prestazioni, può aver senso aggiungere un attributo "id" al contenitore degli elementi che vogliamo selezionare:
$("#menuContainer .myButtonDiv").click(function(event){
alert("clicked");
});
Questo è sicuramente più veloce perché identifichiamo prima di tutto un elemento contenitore tramite l'attributo "id" che come già spiegato avviene in maniera veloce, e successivamente vengono cercati tutti i suoi elementi figli con la classe "myButtonDiv". Quindi la ricerca è limitata solo agli elementi figli del contenitore e non a tutto il documento HTML.

javascript numeri primi

2011-08-07T20:49:00.015+02:00

Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html

Utilizzando un semplice script ho implementato qualcosa di simile al Crivello di Eratostene per determinare i numeri primi fino ad un certo numero.
Questo semplice esempio ci consentirà poi di fare qualche analisi su come ottimizzare le performance di esecuzione.

Per eseguirlo basta copiare il contenuto del box in un file .html e aprirlo con il browser.

Eccovi quello che dovrebbe comparire:


<html>
<head>
<script type="text/javascript">

var primes;
function onClickHandler() {

    var startTime = (new Date()).getTime();

    primes = [2];
    var n = parseInt( document.getElementById("endN").value );
    if(isNaN(n)) {
       alert("Is not a number!");
       return;
    }
    var tbody = document.createElement("tbody");
    var tr = document.createElement("tr");
    tbody.appendChild(tr);
    for(var i=1; i<=n; i++) {
       if( i%10==1 ){
          tr = document.createElement("tr");
          tbody.appendChild(tr);
       }
       var td = document.createElement("td");
       td.appendChild( document.createTextNode(i) );
       td.style.border = "1px solid gray";
       if( isPrimeNumber(i) )
           td.style.backgroundColor = "magenta";
       tr.appendChild(td);
    }
    var table = document.createElement("table");
    table.setAttribute("cellPadding", "5");
    table.appendChild(tbody);
    var container = document.getElementById("container");
    container.innerHTML = "";
    container.appendChild(document.createTextNode("trovati: "+primes.length));

    container.appendChild(document.createTextNode(" tempo [s]: "+((new Date()).getTime()-startTime)/1000  ) );
    container.appendChild(table);
}

function isPrimeNumber(n) {
    if(n==2) return true;
    else if(n==1 || n%2==0) return false;
    for(var j=0; j<primes.length; j++)
        if( n%primes[j]==0 ) return false;
    primes.push(n);
    return true;
}

</script>
</head>
<body>
   <input id="endN" name="endN"  type="text" type="text" />
   <br/>
   <button onclick="onClickHandler()">search</button>
   <div id="container"></div>
</body>
</html>

Spiegazione.
Sulla funzione "onClickHandler" viene creata una tabella. Successivamente la tabella viene popolata con i numeri interi positivi fino alla cifra indicata nella textbox.
Con la funzione "isPrimeNumber" viene verificato se il numero è primo, in tal caso alla cella che viene aggiunto uno sfondo viola per evidenziare questa caratteristica.
Nella funzione "isPrimeNumber", man mano che viene richiamata, viene aggiunto nella variabile array "primes" l'eventuale numero primo.

Ottimizzazione.
Se si esegue lo script per numeri molto alti (per esempio un milione), i tempi di esecuzione potrebbe essere piuttosto lunghi.
E' possibile ottimizzare i tempi di esecuzione dello script con un controllo all'interno del ciclo che crea le celle della tabella. Infatti si potrebbe aggiungere una variabile contatore che viene azzerata quando raggiunge il valore 10. Quando la variabile assume i valori 2,4,5,6,8,10 sicuramente il numero non è primo, quindi è inutile chiamare la funzione isPrimeNumber che esegue ogni volta un ciclo su tutti i numeri primi.
Chiaramente questo controllo non deve essere fatto al primo giro. Ecco un esempio:


var c = 1;
for(var i=1; i<=n; i++) {
    ...
    var isPrime = (c!=i && (c%2==0 || c==5)) || isPrimeNumber(i);
    if(c==10) c = 1; else c++;
    if( isPrime )
           td.style.backgroundColor = "magenta";
    tr.appendChild(td);
}

UBUNTU 11.04 wireless disabled

2011-08-01T00:24:00.007+02:00

english version

Recentemente mi è capitato di avere disattivata la scheda wireless.
Ho provato con il comando:

gheryd@gheryd:~$ sudo ifconfig wlan0 up

e mi è comparso un messaggio di errore che indicava un blocco rfkill.
Cercando su web ho trovato informazioni su questo pagina:
http://linuxwireless.org/en/users/Documentation/rfkill

Quindi ho verificato che esisteva un blocco software tramite il seguente comando

gheryd@gheryd:~$ rfkill list

Questo comando vi elenca lo stato dei blocchi su vari dispositivi (wireless, bluetooth, etc).
Per esempio se avete disabilitato la scheda wireless tramite l'apposito tasto sul vostro computer vi verrà segnalato un "hard blocked: yes", se invece è stata disabilitata via software vi verrà segnalato "soft blocked: yes".
Nel mio caso la wireless avevo un blocco software, per ripristinare ho effettuato il comando

gheryd@gheryd:~$ rfkill unblock all

Poi ho riavviato la scheda wireless

gheryd@gheryd:~$ sudo ifconfig wlan0 up

Ubuntu 11.04 installazioni per developer

2011-07-31T12:27:00.021+02:00

english version

Per chi lavora in ambito web, è necessario avere un'installazione LAMP (Linux Apache MySql Php) e in generale di tutti i tools di sviluppo.

LAMP

gheryd@gheryd:~$ sudo apt-get install apache2

gheryd@gheryd:~$ sudo apt-get install php5 libapache2-mod-php5

gheryd@gheryd:~$ sudo apt-get install mysql-server mysql-client

gheryd@gheryd:~$ sudo apt-get install libapache2-mod-auth-mysql php5-mysql phpmyadmin

gheryd@gheryd:~$ sudo /etc/init.d/apache2 restart

Per maggiori dettagli vedere la pagina:
http://www.howtoforge.com/ubuntu_lamp_for_newbies

Test
Provate sul browser "http:/localhost/", dovreste vedere la pagina "It works!".
Create nella directory "/var/www" il file phpinfo.php con i seguente contenuto
<?php phpinfo(); ?>
All'indirizzo "http:/localhost/phpinfo.php" dovreste vedere le informazioni di php.
Infine all'indirizzo "http:/localhost/phpmyadmin/" dovreste accedere alla pagina di "PhpMyAdmin".

Su seguente link trovate informazioni sulla configurazione del logging di php:
http://gheryd.blogspot.com/2011/05/ubuntu-php-configurare-log-error.html

Tools di sviluppo web.

JAVA Sun/Oracle
Installare java sun/oracle (istruzioni dal sito http://www.chimerarevo.com/2011/05/25/installare-java-6-update-25-su-ubuntu-11-04-natty-ppa/):

gheryd@gheryd:~$sudo add-apt-repository ppa:chimerarevo/java
gheryd@gheryd:~$sudo apt-get update
gheryd@gheryd:~$sudo apt-get install sun-java6-jre sun-java6-jdk sun-java6-plugin sun-java6-fonts

Guake
Una console sempre pronta ed elegante che scende dall'altro premendo F12

gheryd@gheryd:~$ sudo apt-get install guake

Meld
Programma per verificare differenze tra file e fare il merge.

gheryd@gheryd:~$ sudo apt-get install meld

Aptana
E' un potente editor basato su eclipse. Potete così lavorare su html, css, javascript, php, etc. E' scaricabile dal sito: http://www.aptana.com/
nota: per utilizzare aptana è necessario java sun.
In alternativa si può installare Eclipse e aggiungere aptana come plugin.

Geany
E un editor più semplice di aptana, molto leggero ma funzionale.
Per installarlo è sufficiente eseguire il comando da console:

gheryd@gheryd:~$ sudo apt-get install geany

Una volta installato consiglio di attivare tutti i plugin (da menu: Strumenti->gestione plugin)

Filezilla
Per poter caricare o scaricare files su server via FTP è molto comodo utilizzare filezilla, per installarlo digitare sul console:

gheryd@gheryd:~$ sudo apt-get install filezilla

Gimp
Per elaborare immagini e fotografie. Anche i programmatori talvolta si devono cimentare con queste operazioni grafiche

gheryd@gheryd:~$ sudo apt-get install gimp

Inkscape
A differenza di Gimp, questo strumento serve per elaborare immagini di tipo vettoriale (Es.SVG), nel caso si è rivelato potente per vettorializzare una immagine bitmap.

gheryd@gheryd:~$ sudo apt-get install inkscape

Virtual Box
Per testare le vostre pagine web su Internet Explorer occorre avere una macchina virtuale
Windows che potete creare con Virtual Box.
Potete scaricare il pacchetto deb dal link:
http://www.oracle.com/technetwork/server-storage/virtualbox/downloads/index.html
Dopo aver installato Virtual Box (lo potete aprire dal menu sotto la voce System Tools), installatevi "Extension Pack" sempre dal link indicato sopra.
Per creare una macchina virtuale dovete avere un file .iso con il sistema operativo oppure il cd. Create una macchina virtuale (il file ha estensione .vdi). La dimensione che io ho scelto per il disco virtuale è di 10GB. Una volta creato la macchina, avviatela, vi verrà chiesto la posizione del file .iso o del cd con il sistema operativo da installare.

Strumenti Browser
Se siete dei grafici o degli sviluppatori javascript "spinti", beh dotatevi di un web console come si deve!
Su firefox installatevi l'estensione "firebug".
Su chrome avete gia lo strumento accessibile dal menù "strumenti->strumenti per sviluppatori". La versione di google chrome ora è disponibile per linux: http://www.google.com/chrome?hl=it
Altre informazioni le trovate nel post
http://gheryd.blogspot.com/2011/07/javascript-tutorial-di-base.html

Ottimizzare Ubuntu
Per chi lavora con Ubuntu, è importante avere un sistema veloce ed affidabile.
Attualmente sto provando XFCE e lo trovo estremamente più veloce rispetto a Unity o Gnome.
E' semplice, non vi aspettate effetti grafici avanzati. Ma quando si lavora non credo che siano così importanti ;)
Per installare XFCE è sufficiente eseguire il seguente comando:

gheryd@gheryd-sm:~$ sudo apt-get install xfce4

Il desktop viene attivato dalla finestra di login: selezionate la vostra utenza e poi sul pannello in basso selezionate XFCE.
Provate ad usarlo, vi renderete conto subito delle notevoli prestazioni. Potete personalizzarlo come meglio credete usato i soliti comandi.
Ecco la mia personalizzazione:

Una caratteristica che ho apprezzato oltre alla velocità, è la stabilita dei pannelli, nessun problema con icone di notifica, skype, etc.
Oltre all'utilizzo di xfce, ho migliorato le performance seguendo questo tutorial:
http://www.chimerarevo.com/2011/07/26/6-consigli-utili-per-velocizzare-ubuntu-11-04/
Ricordo che si può ritornare al desktop GNOME o UNITY dalla finestra di login.

Javascript le basi (2a parte)

2011-07-17T10:19:00.023+02:00

english version

Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html

Indice:

operazioni matematiche
string
array
date
funzione void
funzioni timer
funzioni globali di javascript

Operazioni matematiche

Oltre alle operazioni aritmentiche, in javascript è possibile effettuare operazioni trigonometriche, logaritmiche, etc utilizzando l'oggetto Math:

Math.abs(a) // the absolute value of a

Math.acos(a) // arc cosine of a

Math.asin(a) // arc sine of a

Math.atan(a) // arc tangent of a

Math.atan2(a,b) // arc tangent of a/b

Math.ceil(a) // integer closest to a and not less than a

Math.cos(a) // cosine of a

Math.exp(a) // exponent of a

Math.floor(a) // integer closest to a, not greater than a

Math.log(a) // log of a base e

Math.max(a,b) // the maximum of a and b

Math.min(a,b) // the minimum of a and b

Math.pow(a,b) // a to the power b

Math.random() // pseudorandom number 0 to 1

Math.round(a) // integer closest to a

Math.sin(a) // sine of a

Math.sqrt(a) // square root of a

Math.tan(a) // tangent of a

String
Come abbiamo visto nella prima parte, possiamo creare una stringa in questa maniera:
var s = "Hello world";
in alternativa è possible creare una stringa istanziando un oggetto String:
var s = new String("Hello world");
Questo ci ricorda che una stringa è un oggetto che possiede metodi e proprietà.
Ad esempio, per sapere quanti caratteri ci sono in una stringa:
var l = s.length;
Per verificare se una stringa è vuota si può verificare in questo modo:
if( s.length==0 ) {
alert("String is void");
}
equivalente a:
if( s=="" ) {
alert("String is void");
}
ma il primo modo dovrebbe essere più veloce perchè viene verificato un numero, il secondo richiede un confronto tra stringhe che è un pochino più lento.
L'oggetto String offre diversi utili metodi che spiego in seguito.

Dato un carattere separatore, è possibile ottenere un array di stringhe:
var words = "Hello world!".split(" "); // words = ["Hello", "world"];
Posso limitare i valori della lista specificando nel secondo argomento il numero massimo di stringhe da restituire:
var s = "uno,due, tre,quattro,cinque";
var list = s.split(",", 3); // list = ["uno", "due", "tre"];

Per ottenere una porzione di una string si possono utilizzare due metodi:
- substr(startpos, length)
- slice(startpos, endpos)

Ecco degli esempi:
var s = "Javascript is good!";
var s2 = s.substr(11, 2); //s2 = "is";
le posizioni partono da 0.
Passando solo il primo parametro viene estratta una stringa fino alla fine:
var s2 = s.substr(11); //s2 = "is good!";
Il metodo splice è simile a substr, ma come secondo argomento non si specifica la lunghezza, ma la posizione finale:
var s2 = s.slice(11, 13); //s2 = "is";
Senza il secondo argomento, si comporta come substr
var s2 = s.slice(11); //s2 = "is good!";
Se viene specificato un valore negativo, la posizione si intende relativa rispetto la fine della stringa:
var s2 = s.slice(-6); //s2 = "good!";
cioè sono estratti gli ultimi 5 caratteri.

Conversione lettere maiuscole, minuscole:
var s = "HelloWorld!";
var s1 = s.toUpperCase(); // s1 = "HELLO WORLD!"
var s2 = s.toLowerCase(); // s2 = "hello world!"

Ricercare una porzione di stringa
- indexOf(String)
- lastIndexOf(String)
- search(regular expression)
- march(regular expression)
Esempi:

var s = "Javascript is good!";

var pos = s.search("is"); //pos = 11

var s = "uno due tre"

Sostituzione:

var s = "Javascript is good!";

var s2 = s.replace("Javascript", "Java"); // s2 = "Java is good!"

Sostituzione multipla:
var s = "ABABABAB";
var s2 = s.replace(/A/g, "C"); // s2 = "CBCBCBCB"
per la sostituzione multipla è stato utilizzata un'espressione regolare, il termine "g" alla fine dell'espressione effettua la selezione multipla. In generale è possibile utilizzare questa semplice espressione in questo modo
var newString = s.replace(/oldString/g, "newString");
in cui al posto di "oldString" verrà inserito il termine da rimpiazzare.
Segue un altro esempio in cui sono sostituiti gli spazi con i trattini:
var s = "Questo è un test";
var s2 = s.replace(/\s+/g, "-"); // s2 = "Questo-è-un-test";
Il termine "\s+" indica uno o più spazi nelle regular expression.
In alternativa si sarebbe potuto scrivere:
var s2 = s.split(" ").join("-"); // s2 = "Questo-è-un-test";
"join" è un metodo dell'oggetto array e serve a unire in una stringa tutti i suoi elementi(vedi sezione array).

Trim:
l'oggetto String non prevede la funzione "trim" (la rimozione di spazi all'inizio e alla fine di una stringa); con la seguente istruzione risolvete il problema:
var s = " Hello! ";
s = s.replace(/^\s+|\s+$/g, ""); // s = "Hello!"

Informazioni sui caratteri
var s = "Javascript is good!";
var c = s.charAt(11); // c = "i";
var unicode = s.charCodeAt(11) // unicode = 105, codice unicode per il carattere "i"
var c = String.fromCharCode(105); // c = "i"

Array
Definire un array:
var arr = [10, "test", false];
oppure
var arr = new Array(10, "test", false);
Valore di un elemento:
var item = arr[2];
Lunghezza dell'array:
var len = arr.length;
Ciclare un array;
for(var i=0; i<arr.length; i++) {
var v = arr[i];
...
}
Unire due array:
var arr = [10, "test", false];
var arr2 = [2, true, "test2"];
arr.concat( arr2 ); // arr = [10, "test", false, 2, true, "test2"]
Trasformare un array in una stringa:
var s = arr.join(","); // s = "10,test,false";
Rimuovere l'ultimo elemento:
arr.pop(); // arr = [10,"test"]
Aggiungere un nuovo elemento:
arr.push("new item");
Invertire l'ordine degli elementi
arr.reverse(); // arr = [true, "test", 10]
Rimuovere il primo elemento:
arr.shift() ; // arr = ["test", 10]

Per aggiungere un elemento all'inizio:

var a = ["a", "b", "c", "d"]

a.unshift("new item"); // a = ["new item", "a", "b", "c", "d"]

Ottenere una parte di array:
var arr2 = arr.slice(0,1); // arr2 = [10, "test"]
Ordinare un array:
var a = ["b", "c", "d", "a"]
a.sort(); // a = ["a", "b", "c", "d"]
Ordimento personalizzato:
var a = ["b", "c", "d", "a"]
a.sort(function(val1, val2) {
if( myCondition ) {
return true;
}else {
return false;
}
});
Inserire un nuovo elemento:
var a = ["b", "c", "d", "a"];
a.splice(1,0, "new Item") ; // a = ["b", "new Item", "c", "d", "a"]
il primo argomento indica la posizione, il secondo indica quanti evetuali elementi sostituire, il terzo indica il valore dell'elemento da inserire/sostituire.
Si possono specificare più valori:
var a = ["a", "b", "c", "d"];
a.splice( 1,0 "1","2","3"); // a = ["a", "1", "2", "3", "b", "c", "d"]
Sostituire un elemento:
var a = ["a", "b", "c", "d"]
a.splice(1,1, "new Item") ; // a = ["a", "new Item", "c", "d"]
Questa funzione è utile anche per rimuovere un valore in una data posizione, è sufficiente non specificare il terzo argomento:

var a = ["a", "b", "c", "d"]
a.splice(1,1) ; // a = ["a", "c", "d"]

Per rimuovere un elemento in base al suo valore occorre ciclare l'array:
var itemToRemove = "b";
var a = ["a", "b", "c", "d"]
for(var i=0;i<a.length;i++){
if( a[i]==itemToRemove )
a.splice(i,1);
}

Date
L'oggetto "date" viene così creato:
var d = new Date();
l'oggetto che abbiamo creato si riferisce alla data corrente.
Per creare un oggetto che si riferisca ad una determinata data passiamo anno, mese e giorno nel costruttore:
var d = new Date(1973,8,20);
la data si riferisce al giorno 20 settembre 1973 (il mese può essere un valore compreso tra 0, gennaio, e 11, dicembre).
Ovviamente possiamo specificare anche ora e minuti.
Se nel costruttore specifichiamo un solo argomento, viene interpretato come millisencondi a partire dal 1 gennaio 1970.
Gli oggetti "date" possono essere confrontati per esempio per determinare se una data è maggiore di un'altra:
var d1 = new Date(); // now
var d2 = new Date(2011,0,20); // 20 gennaio 2011
if(d2>d1){
//...
}
Tuttavia non possiamo verificare direttamente se due date sono uguali:
var d1 = new Date(2011,0,20);
var d2 = new Date(2011,0,20);
if(d1==d2){ ... }else{ ...} // NON FUNZIONA!
Occorre utilizzare il metodo "getTime()" (restituisce la data in millisecondi):
if( d1.getTime()==d2.getTime() )...
E' possibile effettuare operazioni come per esempio la differenza tra due date:
var diff = d1-d2;
il risultato è un numero che rappresenta la differenza in millisecondi da cui possiamo ricavarci l'equivalente in altre unità di misura:
var seconds = diff / 1000; // differenza in secondi
var minutes = seconds / 60; //differenza in minuti
var hours = minutes / 60; //differenza in ore

L'oggetto date è fornito di diversi metodi per ottenere (metodi get) o assegnare (metodi set) elementi della data:
giorno del mese (1-31): getDate() setDate()
giorno della settimana (0-6): getDay()
mese (0-11): getMonth(), setMonth()
anno (4 cifre): getFullYear(), setFullYear();
ore (0-23): getHours(), setHours()
minuti(0-59): getMinutes(), setMinutes();
secondi (0-59): getSeconds(), setSeconds();
millisecondi (0-999): getMilliseconds(), setMilliseconds();
data in millisecondi (a partire da 1/1/1970): getTime(), setTime()
Se assegniamo a più variabili lo stesso oggetto data:
var d1 = new Date(2011,8,20); // 20 settembre 2011
var d2 = d1; // 20 settembre 2011
var d3 = d1; // 20 settembre 2011
stiamo passando il riferimento di uno stesso oggetto data, quindi se modifichiamo uno dei valori, come risultato otterremo una modifica su tutte le variabili:
d3.setFullYear(1973); //20 settembre 1973
//d2 -> 20 settembre 1973
//d1 -> 20 settembre 1973
Per duplicare (clonare) una data occorre istanziare un nuovo oggetto date:
var d1 = new Date(2011,8,20); // 20 settembre 2011
var d2 = new Date( d1.getTime() );
var d3 = new Date( d1.getTime() );

Esempio: calcolo dell'età in anni in base alla sua data di nascita
var birthDate = new Date(1973, 8, 20); // 20 settembre 1973
var today = new Date();
var age = today.getFullYear() - birthDate.getFullYear();
if( birthDate.getMonth()>today.getMonth() || (birthDate.getMonth()==today.getMonth() && birthDate.getDate()>today. getDate () )){
age--;
}

Esempio: fare il parsing di una stringa e creare il relativo oggetto date:
var regExp = /^(\d{2})\/(\d{2})\/(\d{4})$/ ;
var s = prompt("inserisci la tua data di nascita (dd/mm/yyyy)");
var parsedDate = s.match(regExp);
if(parsedDate) {
var day = parsedDate[1], month=parsedDate[2], year=parsedDate[3]
var birthDate = new Date(year,month,day);
}else {
alert("formato data invalido");
}

Funzione void

La funzione void è una funzione che restituisce undefined.

Se per esempio definiamo una funzione:

function doFoo() {

alert("foo");

return false;

}

var a = void( doFoo() );

il valore di "a" sarà undefined.

Tipicamente si utilizza questa funzione sul tag HTML <a>.

Questo tag normalmente viene utilizzato per caricare una pagina o andare su un determinato punto della pagina.

Per evitare il ricaricamento della pagina si utilizzata la funzione void nell'attributo "href":

<a href="javascript:void(0)" onclick="alert('clicked')" >click me</a>

equivalente a :

<a href="#" onclick="alert('clicked');return false;" >click me</a>

Funzioni Timer
Javascript consente di eseguire delle instruzioni in maniera "temporizzata" tramite delle funzioni dell'oggetto "window".
Le funzioni che permettono di fare questo sono:
setTimeout (esegue una funzione dopo un tempo specificato e restituisce un id di riferimento)
setInterval (esegue una funzione a intervalli di tempo regolari e restituisce un id di riferimento)
(nota: sono metodi dell'oggetto window: window.setTimeout e window.setInterval)
e i rispettivi metodi che ne bloccano l'esecuzione:
clearTimeout()
cleartInterval()
Nel esempio seguente viene mostrato un un messaggio dopo un secondo (l'intervallo specificando è un millisecondi):
setTimeout(function(){
alert("Hello");
}, 1000);
oppure:
function alertHello(){
  alert("Hello");
}
setTimeout(alertHello, 1000);
In questo altro esempio invece visualizziamo un semplice cronometro (si presuppone l'esistenza nella pagina di un div con id = "cron" e di pulsanti "button" start, stop, reset):
<div id="cron"></div>
<button onclick="startCron()">start</button>
<button onclick="stopCron()">stop</button>
<button onclick="resetCron()">reset</button>
<script>
var cron = 0, t = null, cronEl = document.getElementById("cron");
function startCron(){
if(t!=null) stopCron();
t = setInterval( function(){
   cronEl .innerHTML = ++cron;
}, 100); //0.1 sec
}
function stopCron(){
if(t) {
clearInterval(t);
t = null;
}
}
function resetCron(){
cron = 0;
cronEl  .innerHTML = cron;
}
</script>

Funzioni globali di javascript
In questo e nel precedente tutorial sono stati già utilizzate alcune funzioni come "alert", "isNaN", "setTimout".
Alcune di queste appartengono all'oggetto window (es."alert" che può essere invocando scrivendo "window.alert"), altre invece sono funzioni globali.
Seguono le altre funzioni globali:

parteInt, parseFloat
La funzione "parseInt" cerca di estrarre da una stringa un numero intero. Prevede due argomenti: la stringa da parsare e la base numerica (opzionale, ma consiglio sempre di specificarla, normalmente si specifica 10).
esempio:
var n = parseInt("09",10); //n=9
Se dalla stringa non è possibile estrarre un numero, viene restituito NaN (Not a number).
var n = parseInt("sdfsdfs"); //n=NaN
Una stringa può anche contenere solo nella parte iniziale un numero:
var n = parseInt(" 10 oggetti "); //n = 10
La funzione "parseFloat" rispetto a "parseInt" cerca di estrarre un numero con virgola (il punto viene riconosciuto come separatore decimale).

escape, unescape
Queste funzioni rispettivamente codificano e decodificano i caratteri speciali:
Esempio:
var escaped = escape("test*?&"); //escaped="test*%3F%26"
var unescaped = unescape(escaped); //unescaped="test*?&"

eval

Questa funzione legge il contenuto di una stringa e li interpreta come codice javascript:

Per esempio:

eval("alert('test')");

l'effetto di questa istruzione quindi sarà quello di mostrare una finestra di alert.

L'uso di questa funzione è sconsigliato, in quanto esegue codice a runtime, cioè senza precompilazione da parte del browser. Quindi il risultato sarebbe un peggioramento delle prestazioni di esecuzione ed eventualmente una maggiore difficoltà di individuare errori in fase di debugging.

Normalmente viene utilizzata per "parsare" il contenuto json di una risposta ajax:

var json = "{'prop1':44,'prop2' : 'test'}";

var obj = eval( "(" + json + ")" );

alert( obj.prop1 );

alert( obj.prop2 );

Javascript le basi (1a parte)

2011-07-03T14:52:00.090+02:00

english version

Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html

Prima di iniziare
Negli esempi che seguono, verrà spesso utilizzata l'istruzione "alert()". Questa funzione mostra una finestra con un messaggio.

Dove scrivere codice javascript.
Come gia probabilmente saprete la struttura base di una pagina HTML è la seguente:
<html>
<head>
</head>
<body>
</body>
</html>
Ci sono diversi posti dove inserire codice javascript:

1. all'interno del tag <script>:

...

</script>

Normalmente si inseririsce il tag <script> all'interno del <head>, ma è possibile inserirlo anche all'interno del <body>.
Nella fase di caricamento della pagina, il browser interpreta ed ed esegue immediatamente il codice javascript all'interno del tag <script> appena caricato.

2. all'interno di un attributo evento:
<button onclick="alert("hello world");" >click me</button>
Il codice in questo caso viene eseguito sul click del pulsante.

3. in un file dedicato con estensione .js; in questo file non occorre racchiudere il codice nel tag <script>; per caricare il file nella pagina html aggiungere il seguente codice (preferibilmente all'interno del tag <head>:
<script src="myscript.js" type="text/javascript"></script>
nell'attributo src si specifica il nome del file con eventuale percorso (es: /js/myscript.js)

4. all'interno dell'attributo href del tag <a>:
<a href="javascript:alert(\"hell world\")">my link</a>
aggiungendo quindi il prefisso "javascript:". Il codice viene eseguito sul click del link.

Nota
Nella barra degli indirizzi è possibile scrivere codice javascript (per esempio per fare un debug), basta aggiungere il prefisso "javascript:" come per l'attributo href.

Sintassi di base
Le istruzioni javascript sono separatate dal punto e virgola ";". E' possible inserire più istruzioni su una riga, purchè separate da ";":
istruzione1; istruzione2;
Con le parentesi graffe si definiscono un gruppo di istruzioni (usate per cicli funzioni):
{

istruzione1;

istruzione2;

}
Le parentesi graffe si utilizzano anche per definire proprietà e metodi di un oggetto:
{
prop1: 10,
prop2: 20,
method1: function() { istruzioni }
}

Per inserire commenti su una sola riga si usa il il doppio slash (//)

// my comment

E' possibile inserire un commento sulla stessa riga dopo un istruzione:
istruzione1; //comment
I commenti su più righe si riacchiudono tra i caratteri di apertura /* e di chiusura */:

my comment

...

Variabili e assegnazione
In javascript le variabili si dichiarano con "var":
var a;
Per assegnare un valore si usa "=";
a = 5;
finché non assegniamo un valore alla nostra variabile, essa è undefined.
Questo non significa che la variabile non è definita, ma che il suo valore non è definito.
Per chiarire questo concetto pensiamo ad una variabile come ad una scatola.
Quando dichiariamo una variabile, predisponiamo una scatola vuota con su stampato il suo nome (es.'a').
Se non la dichiariamo e la usiamo nel codice, questo genera un errore perché il browser non trova la scatola nel magazzino delle variabili (tecnicamente nella memoria del computer).
Assegnando un valore alla variabile, la "scatola" viene riempita con qualcosa. Con l'istruzione a = 5 abbiamo riempito la scatola con un numero intero. Possiamo successivamente riempirla con qualcos'altro, per esempio con una stringa (sequenza di caratteri): a = "ciao";
Questo ci fa capire che la stessa scatola può contenere qualsiasi cosa sia definibile in javascript come numeri, stringhe, funzioni e oggetti. L'oggetto è una specie di set di scatole, quindi la nostra variabile "scatola" può contenere a sua volta altre scatole.
Con la parola chiave "undefined", il browser ci comunica che la scatola è vuota, non contiene niente. Però occupa spazio nel nostro magazzino. Sarà bene riempirla per non sprecare spazio e quindi rendere più efficiente il notro codice.
Possiamo svuotare la "scatola" in questo modo:
a = undefined;

Possiamo dichiarare una variabile e assegnargli un valore in un'unica istruzione:
var a = 5;
possiamo dichiarare più variabili separandole con la virgola:
var a,b;
e pure inizializzarle:
var a = 5, b = "ciao", c;

Non viene sollevato errore javascript se dichiariamo più volte la stessa variabile:

var a = 5;

var a = "Hello world";

Se una variabile viene dichiarata una seconda volta senza assegnarne un valore, non perde il suo valore precedente:

var a = 5;

var a; // a = 5

Anche se può sembrare senza senso, in certi casi dichiarare una seconda volta la variabile ha lo scopo di assicurarci l'esistenza della "scatola" nel magazzino delle variabili. Sarà più chiaro più avanti.

Con "var" non possiamo definirne il tipo (javascript non è un linguaggio tipizzato); il tipo dipende dal valore che le è stato assegnato (la scatola può essere riempita con vari tipi di cose):
var myString = "Hello world"; // string
var myString2 = new String("Hello world 2"); / / string
var n = 0; //number
var status = true //boolean
var arr = [1, 4, 4]; //array
var myDate = new Date(); //object

Stringhe
Una sequenza di caratteri che definisce una stringa, può essere delimitata da doppie virgolette o singoli apici:

var s = "Hello World";

var s2 = 'Hello world 2';

Possiamo inserire apici delimitati da doppie virgolette o viceversa:
var s1 = " Hello ' World ' ";
var s2 = ' Hello " World " ';
Esistono caratteri speciali che possono essere inseriti tramite il carattere backslash:
var s = " doppie virgolette: \" backslash: \\ ritorno a capo \n tabulazione: \t";

Array
Gli array sono una lista di cose come numeri,stringhe,etc.
Un array è come una scatola che contiene al suo interno varie scatole numerate a partire da zero "'0".
Per definire un array si usano le parentesi quadre:
var a = [];
Questo è un array vuoto. Si riempe con questa sintassi:
a[0] = "ciao";
a[1] = 10;
a[2] = 21.43;
Oppure:
var a = ["ciao", 10, 21.43];

Come potete constatare, i vari elementi dell'array sono eterogenei, cioè non devono essere necessariamente dello stesso tipo. Nell'esempio ll primo elemento è una stringa (elemento 0), il secondo un numero (elemento 1).

Si può accendere quindi al valore di uno degli elementi tramite l'indice numerico:
var b = a[1];
Attenzione, se usate un indice superiore alla dimensione dell'array, viene generato un errore javascript.
Per sapere quanti elementi ha un array, si usa la proprietà "length":
var lunghezzaArray = a.length;
Avendo il primo elemento indice 0, per accedere all'ultimo elemento:
var b = a[a.length-1];
L'array che abbiamo creato in linguaggio matematico sarebbe definito "vettore", cioè è un array monodimensionale. Ogni elemento è uno scalare.
E' possibile creare array multidimensionali (matrici):
var m = [ ];
m[0] = [255,"hello"]; // prima riga
m[1] = ["ciao", 10.23]; // seconda riga
Questa è una matrice bidimensionale 2x2, ogni riga è un vettore.
Per accedere ad uno degli elementi di questa matrice:
var b = m[1,0]; //seconda riga, prima colonna "ciao"
Per saperne di più, date un'occhiata al tutorial: http://gheryd.blogspot.com/2011/07/javascript-le-basi-2a-parte.html

Oggetti
Nella nostra analogia con le scatole, abbiamo descritto gli oggetti come un set di scatole che a loro volta possono contenere altre cose tipo numeri, stringhe, funzioni, array e altri oggetti.
Quindi è molto simile ad un array, ma con la differenza che le scatole che contiene, non sono numerate, ma etichettate con dei nomi come negli array associativi di certi linguaggi.
Un oggetto può essere creato in questa maniera:
var a = {saluto: "ciao", numero:10 };
Per accedere alle variabili dell'oggetto (il nome tecnico è proprietà), si usa il carattere punto ".":
alert( a.saluto );
Alternativamente si può accedere alla proprietà di un oggetto tramite le parentesi quadre:
alert( a["saluto"] );
Per saperne di più date un occhiata al seguente tutorial:
http://gheryd.blogspot.com/2011/06/javascript-programmazione-ad-oggetti.html
vi consiglio però di finire di leggere questo tutorial.

Typeof

E' possible verificare il tipo di un valore di una variabile tramite la funzione typeof:

var type = typeof(a);

i valori possibili restituiti sono le seguenti stringhe:

"number"

"string"

"boolean"

"object"

"function"

"undefined"

Una sintassi alternativa di typeof è:

var type = typeof myVar;

Quindi questa istruzione non dice cosa contiene la nostra scatola, ma di che tipo è (un numero, una stringa, etc).
Notate che il tipo "number" indica sia numeri interi (integer) che numeri con la virgola (float).

Operazioni
Abbiamo visto in precedenza l'operatore di assegnamento "=". Ne esistono altri:
+= concatena/somma al valore attuale
-= sottrai al valore attuale
/= dividi al valore attuale
*= moltiplica al valore attuale
Esempi:
var c = 10
c += 5; // c = 15
c -= 2; // c = 13

I simboli degli operatori aritmetici sono:
+ addizione
- sottrazione
* moltiplicazione
% modulo
Quindi possiamo assegnare ad una variabile il risultato di un'operazione matematica:
var a = 5;
var b = 10;
var c = a * b;
Le parentesi tonde sono utilizzate per raggruppare operazioni da eseguire in ordine prioritario:
var c = a * b * (a + b);
Il simbolo % calcola il resto di una divisione tra due numeri. Esempio:
var c = 10 % 5; // c =0
var c = 10 % 3; // c = 1

Per concatenare più stringhe si utilizza sempre il simbolo "+":
var s = "Hello"
var s2 = s+" world!";
Usando l'operatore "+" tra stringhe e numeri, otteniamo sempre una stringa, il numero viene convertito in stringa e poi concatenato:
var n = 10;
var s = "il numero è ";
var message = s+n; // = "il numero è 10"

In javascript i tipi sono automaticamente convertiti nel tipo più adatto:
var s = "10"; // string
var n = s * 5; // n = 50
la variabile stringa "s" viene convertita in un numero, perché in una moltiplicazione il simbolo di moltiplicazione può essere usato solo tra numeri.

La stringa vuota viene convertita in 0:

var s = "";

var n = 10 *s; // n = 0;

Anche i valori null (un parola chiave spiegata più avanti) e undefined sono convertiti nel valore numerico zero.

Se la stringa non rappresenta un numero, il risultato aritmetico è "NaN" (è una parola chiave che significa Not a Number, non è un numero):
var s = "text";
var n = 10 * s; // n = NaN
il valore di "s", non essendo convertibile in numero, moltiplicato per un numero genera un valore di tipo numero non rappresentabile. Sulla scatola c'è stampato oltre al nome "n", anche il tipo "number", ma la scatola è vuota. Un modo javascript di comunicare che c'è stato un errore dell'operazione, senza sollevare errori.

Come già visto, il simbolo "+" può concatenare stringhe o sommare numeri. Se uno dei valori è una stringa, l'operazione effettuata è quella di concatenazione, anche se simbolicamente la variabile di tipo stringa contiene un numero:
var s = "10";
var n = s + 5; // s = 105

Come nel linguaggio "c" o "java", è possibile utilizzare gli operatori di incremento:
++ incrementa di 1
-- decrementa di 1
Esempi:
var a = 10;
a += 3; // a = 13
a -= 5; // a = 8;
var s = "Hello";
s += " World"; // s = "Hello World"
var m = 5;
var n = m++; // n = 5, m = 6
m = 5;
var n = ++m // n = 6, m = 6

Funzioni matematiche
Oltre alle operazioni aritmentiche, in javascript è possibile effettuare operazioni trigonometriche, logaritmiche, etc utilizzando l'oggetto Math. L'elenco dell'operazioni è elencato nella seconda parte di questo tutorial:
http://gheryd.blogspot.com/2011/07/javascript-le-basi-2a-parte.html

Infinito
Come si è gia accennato in precedenza, javascript gestisce certe anomalie usando parole chiavi.
Abbiamo visto "NaN" (Not a Number).
Un altro valore particolare è Infinity (infinito). Javascript è in grado di riempire una scatola di "infinito", cioè un valore così grande da non poter essere rappresentato.
Questo ci suggerisce che Infinity per javascript viene considerato un numero a tutti gli effetti che può essere utilizzato nelle normali operazioni matematiche.

Questo valore viene assegnato quando il valore numerico oltrepassa i seguenti limiti:
Infinity > 1.7976931348623157E+10308
-Infinity < -1.7976931348623157E+10308
quindi, la differenza con il concetto matematico a cui si attribuisce il numero infinito come un numero maggiore di qualsiasi numero finito, sta proprio nel limite massimo fisico previsto per i valori numerici finiti in javascript oltre il quale appunto i numeri non sono rappresentabili.

Quindi, se dividiamo un numero per zero, javascript non solleva un errore come in altri linguaggi, ma restituisce il valore di tipo numero "Infinity":
var n = 10 / 0; // n = Infinity
Ecco cosa succede operando con questo valore:
var n = Infinity - Infinity; // n = NaN
var n = 19 / Infinity; // n = 0
Incrementando, dividendo, moltiplicando o dividendo Infinity per qualsiasi numero otteniamo sempre un valore Infinity:
var n = 23 + Infinity; // n = Infinity

Valori speciali
Esistono tre valori particolari da tenere in considerazione:
- undefined
- NaN (Not a Number)
- null

Precedentemente abbiamo visto il valore "undefined", che come è stato gia detto, è il valore di default assegnato ad una variabile:
var a;
alert( typeof(a) ); // show "undefined"
Ma se ci riferiamo ad una variabile mai dichiarata, otteniamo un errore javascript:
alert( typeof(b) ); // questo genera un errore javascript perchè la variabile non è mai stata dichiarata
In sostanza se dichiariamo una variabile senza inizializzarla, il suo valore di default è "undefined", quindi l'istruzione:
var a;
è equivalente alla seguente assegnazione :
var a = undefined;

Il valore di una variabile può essere NaN (Not a Number) se il tipo della variabile è "number". Abbiamo già accennato precedentemente ad alcuni casi in cui si ottiene NaN.
Ecco altri casi in cui una variabile può essere NaN:
var a;
a++;
alert( typeof(a) ); //show "number"
alert( a ); //show NaN
qualsiasi operazione matematica con un NaN restituisce sempre un NaN.
var a;
var b = 0;
var c = a + b // c = NaN
Esistono delle funzione javascript che restituiscono NaN, per esempio la funzione parseInt:
var n1 = parseInt("22"); // n1 = 22;
var n2 = parseInt("Hello world"); // n2 = NaN;
nota: parseInt è una funzione javascript che 'tenta' di convertire una valore in un un intero (vedi la seconda parte del tutorial).

Per verificare se un valore non è numero si utilizza la funzione isNaN:
var checkNumber = isNaN(n1); // checkNumber = false, è un numero
checkNumber = isNaN(n2); // checkNumber = true, non è un numero
La funzione isNaN restituisce true anche se la variabile non è un numero:
var checkNumber = isNaN("testo qualsiasi"); // =true
Ma se la stringa contiene un numero:
var checkNumber = isNaN("10"); // =false
Quindi la funzione isNaN() verifica che il valore, anche se non di tipo numero, sia "usabile" come numero nelle operazioni aritmetiche.
La funzione isNaN è equivalente alla seguente operazione:
var checkNumber = (v*1)===NaN;
la moltiplicazione ci assicura un valore numerico., se, per esempio, v contenesse la stringa "10", il valore verrebbe correttamente convertito nel numero 10, altrimenti verrebbe restituito NaN.

Infine il valore "null" è un possibile valore per variabili di tipo oggetto:
var a = null;
alert( typeof(a) ); // show "object"
alert( a ); // show "null"
Questo valore può essere restituito da una funzione che dovrebbe restituire un oggetto. Per es:
var el = document.getElementById("myElement");
se non esiste nella pagina un elemento con id="myElement", il valore di 'el' sarà 'null' (vedi il tutorial sul DOM per interagire con la pagina HTML tramite javascript)

Espressioni condizionali

Le espressioni condizionali come in tutti i linguaggi più diffusi si verificano con l'operatore if:

if(condition) {

istruzioni

}

If(condition) {

...

}else {

istruzioni

}

if(condition) {

istruzioni

}else if(condition2) {

istruzioni

}else {

istruzioni

}
In javascript un espressione condizionale non restituisce solo true o false, ma anche un valore che può essere null, undefined o NaN (Not a Number).
La condizione è quindi verificata se non restituisce i seguenti valori:
- false
- undefined
- null
- NaN
Ecco un esempio:
var a = "ciao";
if( a=="ciao" ) {
alert("è un saluto");
}
L'espressione a=="ciao" restituisce true (cioè è vera), per cui viene eseguita l'istruzione alert che visualizza il messaggio "è un saluto".

Operatori di confronto e operatori logici
Gli operatori di confronto restituiscono sempre un valore booleano true (vero) o false (falso), mentre, come vedremo in seguito, gli operatori logici in javascript hanno un comportamento differente nel senso che se applicati a valori booleani, restituiscono valori booleani, altrimenti possono restituire valori di altro tipo come stringhe, numeri, undefined, null, eccetera.
Segue la lista di questi operatori:

!= not equals: (confronto)

|| or (logico)

&& and (logico)

! not (logico)

== equals (confronto)

> greater (confronto)

>= greater or equals (confronto)

< less (confronto)

<= less or equals (confronto)

Esempio:

if( a<10 || a>20 ) {

istruzioni

}else if( b>10 && b<=20 ) {

//istruzioni

}
E' possibile assegnare il risultato di un'espressione di questo tipo ad una variabile:
var result = a<10;
Il valore della variabile result sarà quindi true o false.

Assegnazioni condizionali (operatore condizionale ternario)
E' possibile scrivere una condizione direttamente su un'assegnazione:

a = b ==1 ? "text1" : "text2";

quindi se "b" è uguale a 1, viene assegnato ad "a" la stringa "text1" altrimenti "text2".

nota: l'espressione precedente è equivalente a: a = b ==1 && "text1" || "text2";
La condizione è il termine prima del punto di domanda e i due valori in caso rispettivamente di true e false sono separati dal caratteri due punti .

expr ? value1 : value2

Possiamo inserire questo tipo di condizioni all'interno di una operazione:
a = b + (c==2 || c==4 ? 4 : 8);
quindi alla variabile "b" verrà sommato il valore 4 se "c" è uguale a 2 o 4, altrimenti verrà sommato il valore 8.
Possiamo utilizzare l'espressione condizionale concatenando stringhe:
var s = "sesso: "+(gender=="m"?"maschio":"femmina");

Verificare undefined, NaN, null, false
In javascript una condizione non è verificata se il valore di una variabile è null, undefined, NaN o false. Per esempio:
if(b) {
alert("good value");
}else {
alert("b is null, false, undefined or false");
}
Se b=infinity, l'espressione è verificata.

Nota
ho sperimentato che nel caso "b" = undefined come nell'esempio seguente:
var b = undefined;
if(b!=null){
alert("b is not null");
}else {
alert("b is null");
}
la condizione non viene comunque verificata, come se null fosse equivalente al valore undefined.
Per verificare correttamente il valore null dovremmo anche controllare il tipo della variabile:

if(b!==null){

alert("b is not null");

}else {

alert("b is null");
}

Il simboli "===" e "!==" verificano anche il type della variabile. Nel nostro caso viene verificato anche che b sia di tipo "object".
Senza un confronto del tipo, undefined è equivalente a null come a NaN.
Ecco un altro esempio:
var a = "10";
if( a==10 ) alert("equals 10");
La condizione è verificata perchè javascript converte la variabile "a" nel tipo "number".
Per verificare anche che il tipo:
var a = "10";
if( a===10 ) alert("equals 10");
la condizione non è quindi verificata.

Con l'operatore OR, oltre ai valori "speciali", possiamo assicurarci se una variabile ha una valore "valido:
var a = a || 0;
Normalmente si utilizza questo tipo di verifica in due casi:
1. variabile dichiarata in un altro file script; è sempre buona abitudine in questi casi effettuare una verifica perchè per qualche motivo il caricamento dello script è saltato; possiamo verificare l'esistenza di una variaibile con questo controllo:
try {a;}catch(ex){ alert("a not exists") }
2. variabile è un argomento in una funzione:
function(a) {
a = a ||0;
....
}
Attenzione: se non dichiariamo la variabile "a" e la utilizziamo come nella seguente espressione, viene sollevato un errore:
var b = (a||0) +1; // javascript error!

Ora vediamo il caso con l'operatore AND:
var c = a && b;
se solo una della due variabili non è mai stata dichiarata, si genera un errore javacript.
Se una delle due variabili "a" o "b" è null (o undefined, false, NaN), c sarà null (o undefined, false, NaN).
Esempio:
var c = null && false; // c=null
Se invece valori verificati sono"validi", allora "c" avrà il valore dell'ultima variabile, come nel seguente esempio;

var c = 5 && 16; // c = 16

Concludiamo con l'operatore NOT.
Questo operatore restituisce true se il valore è null, undefined, NaN o false:
var a = null;
var b = !a; // b = true
var a; // oppure a = undefined
var b = !a; // b = true
a = NaN;
var b = !a; // b = true
a = true;
var b = !a; // b = true
Negando due volte "a" viene restituito true se il valore è "valido":
var b = !!a;
equivalente a:
var b = a ? true : false;

Switch

Al posto di una serie di if/else, può essere più comodo (e forse più chiaro) usare switch per eseguire una serie di istruzioni in base al valore di una certa variabile:

switch(param){

case a:

istruzioni

break;

case b: case c;

istruzioni

break;

default:

istruzioni

}

Come è noto, senza il break, verrebbero eseguire le istruzioni del blocco "case" successivo.

Loop (cicli)

Ciclo for:

for(var i=0; i<10; i++) {

istruzioni

}

all'interno delle parentesi del for, vengono specificati tre argomenti separati da ";", il primo inizializza la variabile contatore, il secondo specifica la condizione che deve essere verificata per eseguire il blocco di istruzioni, il terzo modifica il valore del contatore ad ogni ciclo (es. i++, i--, i+5, i*2, etc).
Si utilizza "break" per interrompere l'esecuzione del ciclo for e "continue" per passare al ciclo successivo senza quindi eseguire le istruzioni successive nel blocco.
Ecco un esempio che cerca i primi 10 numeri pari in un array:
var arr = [5,8,10,20,23,37,93,102,243,332,372, 423, 444, 523, 593, 700];
var evenNumbers = "";
var sep = "";
for(var i=0; i<arr.length; i++) {
if( i==10 ) break; //esce dal loop se abbiamo ciclato gia 10 numeri
var v = arr[i];
if( v%2!=0 ) continue; // se è un numero dispari, passo al ciclo successivo
eventNumbers += sep + v;
sep = ",";
}
alert(eventNumbers);

Ciclo for per oggetti:

for(var property in obj) {
var value = obj[property];

...

}

Ciclo while (a condizione iniziale):

while(condition) {

istruzioni

}

Ciclo do/while (a condizione finale, il blocco di istruzione viene eseguito almeno una volta):

do{

istruzioni

}while(condition);

Funzioni
Le funzioni si definiscono nella seguente maniera:
function doSomething(param1, param2){
istruzioni
}
La funzione si chiama doSomething e accetta due parametri in ingresso. Tra parentesi graffe si inserisce quindi il codice da eseguire quando la funzione viene invocata.
Per invocare la funzione precedentemente definita basta scrivere:
doSomething("helloworld",5);
I parametri di una funzione non sono obbligatori, infatti la funzione può essere invocata senza passare argomenti:
doSomething();
spetta alle istruzioni della funzione verificare se un certo parametro è stato passato o meno.
function doSomething(param1, param2) {
if( !param1 ) {
param1 = 0;
}
...
}
oppure, come abbiamo visto in precedenza:

function doSomething(param1, param2) {

param1 = param1 || 0;

...

}

E buona abitudine assegnare dei valori dei default ai parametri in ingresso ad una funzione.

Per maggiori dettagli sulle funzioni vedere il tutorial:

http://gheryd.blogspot.com/2011/06/javascript-programmazione-ad-oggetti.html

Ora proviamo un esempio completo:
<html>
<head>
<script type="text/javascript">
var clickCount = 0;
function showClickCount(){
clickCount++;
alert(clickCount);
}
</script>
</head>
<body>
<button onclick="showClickCount();">click me</button>
</body>
</html>
La funzione showClickCount incrementa di 1 la variabile clickCount (inizializzata a 0) e la mostra in una finestra tramite l'istruzione alert.
Ogni volta che viene premuto il pulsante "click me", viene quindi invocata la funzione.

Strumenti

Ormai ogni moderno browser è dotato di uno strumento per effettuare debugging su codice javascript.

- Firefox: installare il plugin Firebug

- Internet Explorer (IE8/IE9): cercare nel menu strumenti per developer, da questo strumento è possibile verificare la compatibilità fino alla versione IE7

- Chrome: cercare nel menu strumenti per sviluppatori

- Opera: se non ricordo male il tool si chiama "drangonfly"

Safari: cito le indicazioni dal sito ufficiale "enable the Develop menu in Safari's Advanced preferences.", il tool sembra lo stesso di Chrome.

Questi strumenti oltre ad una console javascript, consentono di analizzare il contenuto html e gli stili applicati. Consentono anche di editare i contenuti.

Alcuni permettono anche di accedere alle nuove funzionalità HTML5 come il local db sqlite su cui si possono effettuare query sql (chrome e safari).

E interessante la funzionalità "profiler" che consente di misurare i tempi di esecuzione del nostro codice javascript.

Imparare ad utilizzare questi strumenti è importante per creare codice javascript solido e performante. Inoltre ci consente di individuare gli errori più velocemente.

Ogni nuovo browser supporta l'oggetto "console" che consente di loggare nel nostro codice javascript:

console.log("a="+a);

il messaggio viene stampato sulla console javascript.

Javascript & gwt tutorials

2011-06-25T12:27:00.015+02:00

HTML

Utilizzo corretto di alcuni attributi (utile per i programmatori e per grafici css)
http://gheryd.blogspot.com/2011/09/html-utilizzo-corretto-degli-attributi.html

Javascript (ES6)

Aggiornamento javascript ES6
http://gheryd.blogspot.com/2019/07/javascript-es6-es2015.html

Javascript (ES5)

Tutorial di base (1a parte, sintassi e basi del linguaggio)
http://gheryd.blogspot.com/2011/07/javascript-tutorial-di-base.html

Tutorial di base (2a parte, operazioni matematiche, su string, array etc)
http://gheryd.blogspot.com/2011/07/javascript-le-basi-2a-parte.html

Manipolare il DOM (Document object model)
http://gheryd.blogspot.com/2011/06/javascript-manipolare-dom-codice.html

Programmazione ad oggetti
http://gheryd.blogspot.com/2011/06/javascript-programmazione-ad-oggetti.html

Programmazione eventi browser compatibili (esempi completi: currency text box, editable table)
http://gheryd.blogspot.com/2011/05/javascript-funzioni-compatibili-per-gli.html

Funzione parseint (caso specifico per i valori "08" e 09)
http://gheryd.blogspot.com/2011/05/javascript-parseint-per-valori-08-e-09.html

Regular expression targa italiana
http://gheryd.blogspot.com/2011/05/javascript-regular-expression-targa.html

Controllare se jquery è caricato (o qualsiasi altro script)
http://gheryd.blogspot.com/2011/07/javascript-check-jquery-loaded.html

Ricerca dei numeri primi (crivello di Eratostene)
http://gheryd.blogspot.com/2011/08/javascript-numeri-primi.html

Grepolis tools
http://gheryd.blogspot.com/2011/05/da-ex-giocatore-di-grepolis-mi-ero.html

GWT

Widget Currency Text Box
http://gheryd.blogspot.com/2011/04/gwt-currency-generic-number-text-box.html

Detect popup blocker
http://gheryd.blogspot.com/2011/03/gwt-detect-popup-blocker-rilevazione.html

Widget Tree (impedire da tastiera la selezione degli item nascosti)
http://gheryd.blogspot.com/2011/03/se-si-nasconde-un-item-di-un-tree.html

Developer plugin
http://gheryd.blogspot.com/2010/08/plugins-gwt-developer-plugin-per-chrome.html

Suggest box (forzare la visualizzazione della lista sul campo vuoto)
http://gheryd.blogspot.com/2010/02/gwt-forzare-la-visualizzazione-per-il.html

gwt & gears (fixing del plugin)
http://gheryd.blogspot.com/2010/02/utilizzando-gwt-2.html

gwt & php (utilizzare i servizi creati con php su gwt e lavorare in debug su ecplise)
http://gheryd.blogspot.com/2011/09/gwt-tutorial-utilizzare-gwt-con-php.html

Gestire Eventi riga per FlexTable
http://gheryd.blogspot.com/2012/01/gwt-eventi-righe-per-flextable.html

Mostrare/nascondere pannelli con un doppio click sugli splitters dellp SplitLayoutPanel
http://gheryd.blogspot.com/2012/02/public-class-splitlayoutpanelext.html

Questi tutorials sono nati dai miei appunti che ho raccolto nel tempo durante la mia esperienza lavorativa come programmatore web.
Nel tempo li ho riordinati e li ho inseriti in questo blog in modo che fossero sempre disponibili.
Li ho poi resi pubblici sperando che possano essere di utilità non solo per nuovi programmatori ma anche per i più esperti. ;)
Consigli, proposte, segnalazioni di errore sono ben accetti :)
Quindi aggiungete pure commenti.
Beh, buona lettura, anzi, buona programmazione!

Ubuntu 11.04 DELL VOSTRO 3750 CRASH

2011-06-18T17:17:00.046+02:00

english version

In maggio 2011 La mia esperienza con Ubuntu 11.04 sulla mia nuova macchina DELL Vostro 3750 è stato un completo disastro.
Dopo una settimana il sistema è andato in crash e non era possibile reinstallare neanche da cd.
La macchina è stata acquistata a maggio 2011. Le caratteristiche tecniche sono in questa pagina: specifiche tecniche Dell Vostro 3750

Inizialmente per risolvere i problema ho reinstallato Windows Seven, e poi in una seconda partizione ho installato Ubuntu 10.04 LTS con un kernel 2.6.38. Ma non funzionavano gli effetti visivi.
Poi ultimamente (fine luglio 2011) mi sono deciso a riprovare la versione 11.04. Ho cercato in mezzo web, ho installato diversi pacchetti .deb per far funzionare la scheda NVIdia, ho cambiato impostazioni di avvio. Man mano che procedevo non vedevo alcun miglioramento, anzi, gli errori crescevano finchè il sistema è andato in crash definitivo, senza la possibilità di avvio da cdrom. Non riuscivo a far partire neanche il cd della versione 10.04 con le impostazioni "nomodeset" o "acpi=off".
Poi quando stavo per mollare, ho voluto fare un ultimo tentativo con un installatore testuale. Ho provato la versione 11.04 alternate e sembrava funzionare senza la necessità di "smanettare".
Poi dopo due giorni, mentre stavo scaricando dei file con filezilla è andato in completo crash.
Per cui devo ritornare alla versione 10.04 LTS.

Ubuntu 10.04 LTS con kernel 2.6.38
Se sul vostro Dell Vostro 3750 non riuscite proprio ad utilizzare Ubuntu versine 11.04, provate la versione Ubuntu 10.04 LTD (Long Term Support) e poi aggiornate il kernel per il riconoscimento dei componenti harware (altrimenti non potete utilizzare la wireless e la grafica è a 1024)

- ho reinstallato Windows Seven da cd fornito da Dell con tutti i drivers.
- da Seven ho ridotto lo spazio della partizione primaria tramite pannello di controllo->strumenti di amministrazione->gestione disco; da 500 gb sono riuscito a liberare solo 250 gb.
- ho scaricato il file .iso UBUNTU 10.04 LTS 64 bit (dalla pagina ufficiale di ubuntu in alternativa alla 11.04) e l'ho masterizzato su cd (tasto destro sul file, masterizza immagine su cd).
- ho fatto il boot dal cd (riavviando il computer tenere premuto F12); durante l'installazione di Ubuntu 10.04 ho creato due partizioni nello spazio libero, uno per root "/" (50gb) e una per "/home" (150gb) per preservare dati e configurazioni in caso di reinstallazione
- con il kernel fornito su cd non mi veniva riconosciuta la scheda grafica e la wireless, così ho installato il nuovo kernel 2.6.38-1-generic. (vedi comandi sotto)

gheryd@gheryd-laptop:~$ sudo add-apt-repository ppa:kernel-ppa/ppa
gheryd@gheryd-laptop:~$ sudo apt-get update
gheryd@gheryd-laptop:~$ sudo apt-get install linux-headers-2.6.38-1-generic linux-image-2.6.38-1-generic

javascript manipolare DOM, codice browser compatibile

2011-06-08T23:15:00.074+02:00

Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html

Indice

Manipolazione di base
Ottimizzare le performances
Operazione con gli attributi
Aggiungere html
Gestire eventi
Gestire le classi e le proprietà di stile
Mostrare/nascondere un elemento
Select
CheckBox
Caricare uno script
Caricare un css
Templates

Introduzione
In javascript, ogni elemento grafico inserito nella pagina HTML è rappresentato da un oggetto accessibile tramite l'oggetto "document".
L'oggetto "document" è una proprietà dell'oggetto "window" e viene popolato con una struttura ad albero durante il caricamento della pagina.
La struttura che viene così creata è il DOM, document object model, cioè una rappresentazione a oggetti di tutti i componenti della pagina HTML.
Se conoscete XML, vi saranno familiari i comandi in questo tutorial per manipolare questi oggetti che di base sono chiamati nodi (node). Ogni nodo può contenere dei nodi figli (child nodes).
L'oggetto "element" è un particolare tipo di nodo che rappresenta un tag html.
Esistono altri tipi di nodi, come per esempio gli attributi dell'elemento, oppure i commenti.
Anche il testo inserito all'interno di una tag sarà rappresentato nel DOM come nodo figlio.
Esistono delle "scorciatoie" che consentono di cercare elementi esistenti nella pagina, il più usato è sicuramente:
var el = document.getElementById("myId");
Il metodo restituisce un oggetto element che ha come attributo id = "myId".
Con javascript possiamo modificare gli elementi esistenti cambiandone l'aspetto grafico per esempio, oppure crearne di nuovi e farli apparire dove ci è necessario come per esempio aggiungere una riga ad una tabella o un elemento in una lista.

Manipolazione di base
Creare un elemento:
var el = document.createElement("div");

Creare un elemento di testo:

var txt = document.createTextNode("Hello world!");

Ottenere un elemento dal suo id:
var el = document.getElementById("myId");
se l'elemento non è nella pagina el sarà nullo, verificare prima di accedere alle proprietà dell'elemento:
if( el ) {
alert(" element exists" );
}

Nota: per accedere ad elementi gia esistenti, dovrete attendere la fine del caricamento della pagina come nell'esempio seguente:
<html>
<head>
<script type="text/javascript">
function init() {
var el = document.getElementById("myDiv");
....
}
</script>
</head>
<body onload="init()">
<div id="myDiv">....</div>
</body>
</html>

Ottenere elementi in base al tag:
var els = document.getElementsByTagName("input");
for(var i=0; i<els.length; i++) {
var el = els[i];
...
}
Ottenere il nome del tag
var tagname = el.tagName;
Aggiungere un elemento alla fine:
elParent.appendChild(elChild);
Inserire un elemento:
elParent.insertBefore(newEl, elChild);
Rimuovere un elemento:
elParent.removeChild(elChild);

Sostituire un elemento:
elParent.replaceChild(newChild, oldChild);
Inserire un elemento all'inizio:

elParent.insertBefore(elChild, elParent.childNodes[0]);

Ottenere la lista (array) degli elementi figli:
var nodes= elParent.childNodes;
Ottenere il primo figlio:
var node = elParent.firstChild;
Ottenere l'ultimo figlio:
var node = elParent.lastChild;
Ottenere il fratello successivo:
var node = el.nextSibling;
Ottenere il fratello precendente:
var node = el.previousSibling;
Sapere il tipo di nodo:
var type = node.nodeType;
il valore restituito è un numero, di solito interessa verificare se il tipo è relativo ad un element node o un text node come nell'esempio seguente:
if( type == 1) {
alert("is element");
// node.nodeName = "DIV" //=tagName
var el = node;
}else if(type ==3) {
alert("is text");
// node.nodeName = "#text"
var text = node.nodeValue;
}
Cercare il primo elemento:
var firstEl = null;
var children = parentEl.childNodes;
for(var i=0; i<children.length; i++) {
var node = children[i];
if(node.nodeType==1) {
firstEl = node;
break;
}
}
in modo analogo per cercare l'ultimo elemento:

var lastEl = null;

var children = parentEl.childNodes;

for(var i=children.length; i>=0; i--) {

var node = children[i];

if(node.nodeType==1) {

lastEl = node;

break;

}

Ottenere l'elemento padre:
var parentEl = el.parentNode

Ottimizzare le performances
Se dobbiamo aggiungere molti elementi figli come dell'esempio seguente:
var container = document.getElementById("idContainer");
for(var i=0; i<100; i++) {
var child = document.createElement("p");
child.appendChild( document.createTextNode("paragraph "+i) );
container.appendChild(child);
}
per migliorare le performances in alternativa è possibile creare un frammento:
var docFrag= document.createDocumentFragment();
for(var i=0; i<100; i++){
var child = document.createElement("p");

child.appendChild( document.createTextNode("paragraph "+i) );

docFrag.appendChild(child);

}
container.appendChild(docFrag);
è equivalente all'esempio precedente, ma molto più veloce perchè tutti gli elementi sono aggiunti alla pagina alla fine con un'unica istruzione.

In generale, è sempre meglio aggiungere elementi alla pagine verso la fine.
Per esempio, nel caso di creazione di una tabella:
var table = document.createElement("table");
container.appendChild(table);
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for(var r=0;r<100; r++) {
var tr = document.createElement("tr");
tbody.appendChild(tr);
for(var c=0;c<10;c++){
var td = document.createElement("td");
tr.appendChild(td);
td.appendChild(document.createTextNode("cell "+r+","+c));
}
}
aggiungendo la tabella subito nella pagina prima di popolarla di righe e colonne, rallenta parecchio l'esecuzione perchè costringe il browser a renderizzare all'istante la cella ad ogni ciclo del loop di popolamento.

Invece spostando alla fine l'istruzione evidenziata miglioriamo le prestazioni perchè la tabella è gia completa del suo contenuto, e la renderizzazione avviene in una sola volta.
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for(var r=0;r<100; r++) {
var tr = document.createElement("tr");
tbody.appendChild(tr);
for(var c=0;c<10;c++){
var td = document.createElement("td");
tr.appendChild(td);
td.appendChild(document.createTextNode("cell "+r+","+c));
}
}

container.appendChild(table);

Operazione con gli attributi

Settare il valore di un attributo di un elemento:

el.setAttribute("id", "myId");

oppure

el.id = "myId";

Ottenere il valore di un attributo

var id = el.getAttribute("id");

oppure

var id = el.id;

Rimuovere un attributo

el.removeAttribute("id");

oppure

el.id = null;

Ottenere la lista degli attributi:

var attrs = el.attributes,

var s = "";

for(var i=0; i<attrs.length; i++) {

var attr = attrs[i];

var name = attr.nodeName;

var value = attr.nodeValue;

....

}

Può essere interessante aggiungere un attributo "custom" come nell'esempio seguente:
var textbox = document.getElementById("myInput");
textbox.valueDefault = textbox.value;
in questa istruzione ho aggiunto la proprietà "valueDefault" che non esiste normalmente; questa istruzione potrebbe essere eseguita sull'onload della pagina; sull'onclick di un bottone per ripristinare il valore iniziale della textbox basta utilizzare la seguente istruzione:
textbox.value = textbox.valueDefault;

Aggiungere html
Settare html:
el.innerHTML = "<a href='#'>my link</a>"
tutti gli eventuali figli verranno rimossi.
Aggiungere html:
el.innerHTML += "<a href='#'>my link</a>"
Inserire html all'inizio:
el.innerHTML = "<a href='#'>my link</a>"+el.innerHTML;
A mio giudizio è meglio evitare di utilizzare innerHTML se non per aggiungere un semplice testo formattato:
el.innerHTML = "<b>title</b><br/><i>italic</i><br/>etc....";
Per i casi come quello dell'esempio precedente del link preferisco operare nel modo seguente:
var link = document.createElement("a");
link.href = "#";
link.appendChild( document.createTextNode("my link") );
el.appendChild(link);
La proprietà innerHTML è utile per svuotare in maniera semplice un elemento:
el,innerHTML = "";
Importante: non aggiungete nel innerHTML attributi di eventi perchè non funzionano su ie:
el.innerHTML = "<a href='#' onclick='alert(clicked);'>my link</a>";
occorre crearsi l'elemento come dell'esempio precedente a aggiungere l'handler così:
link.onclick = function(event){ alert("clicked") }

Gestire eventi
Registrare un handler di un evento:
div.onclick = function(event){ alert("clicked") }

E' possibile specificare delle istruzioni direttamente dentro il codice HTML:
<input type="checkbox" name="myCheck" onClick="alert('checked: '+this.checked)" />
Il termine this si riferisce all'elemento.

Per maggiori dettagli sulla gestione degli eventi vedere il seguente post:
http://gheryd.blogspot.com/2011/05/javascript-funzioni-compatibili-per-gli.html

Gestire le classi e le proprietà di stile
Settare una classe di stile:
el.className = "myClass";
Aggiungere una classe di stile:
el.className += " "+"myClass2";
Sostituire una classe di stile con un'altra:
el.className = el.className.replace("oldClass", "newClass");
Rimuovere una classe di stile:
el.className = el.className.replace("myClass", "");
Verificare se ha una classe di stile:
var hasMyClass = el.className.indexOf("myClass")>-1;
if( hasMyClass ) {
alert("has class");
}
Ottenere un'array di classi di stile
var classes = el.className.split(" ");
for(var i=0; i<classes.length; i++) {
var class = classes[i];
...
}
Settare proprietà di stile:
el.style.borderColor = "red";
el.style.fontSize = "10px";
el.style.textAlign = "right";
el.style.backgroundColor = "#faa";
el.style.border = "1px solid #000";
in generale la proprietà in javascript è uguale alla proprietà css senza trattini:
border-color -> el.style.borderColor
font-size -> el.style.fontSize
text-align -> el.style.textAlign
background-color -> el.style.backgroundColor

Cercare tutti gli elementi con una certa classe di stile

function getElementsByClass(classname, elContainer) {

if(!classname) return null;

elContainer = elContainer || document.body;

var els = [];

var findElClass = function(el) {

var nodes = el.childNodes;

for(var i=0; i<nodes.length; i++) {

var node = nodes[i];

if(node.nodeType!=1) continue;

if(node.className.indexOf(classname)>-1) els.push(node);

findElClass(node);

}

findElClass(elContainer);

return els;

}

Mostrare/nascondere un elemento
Mostrare:
document.getElementById("myElement").style.display="";
Nascondere:
document.getElementById("myElement").style.display="none";

Select
var sel = document.getElementById("mySelect");
Ripuliamo la select dalle option esistenti:
sel.options.length = 0;
Popoliamo la select con un option
var opt = new Option("", "value");
try {
sel.add(opt, null);
}catch(ex){
sel.add(opt);
}
opt.innerHTML = "text";
l'ultima istuzione ci consente di usare html entities come per esempio "è" E' importante che l'assegnazione della proprietà innerHTML sia successiva all'instruzione di inserimento della option all'interno della select.

CheckBox
Recuperarne il riferimento DOM:
var cb = document.getElementById("myCheckbox");
Se è in un form si può ottenere in base al suo attributo name:
var cb = document.getElementById("myForm").myCheckbox;
<form id="myForm">
<input id="myCheckbox" name="myCheckbox" />
</form>
Modificarne lo stato:
cb.checked = true;
Verificare lo stato:
if(cb.checked) {
alert("is checked");
}
Intercettarne il cambio di stato:
cb.onclick = function() {
//TODO handle event
}

Caricare uno script
var script= document.createElement('script');
script.src = '/js/myscript.js';
script.type = 'text/javascript';
script.async = 'true'
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);

Caricare un css

var css= document.createElement('link');

css.href = '/css/mycss.css';

css.rel= 'stylesheet';

css.type = 'text/css'

css.media = 'all';

document.getElementsByTagName("head")[0].appendChild(css);

Templates
Possiamo utilizzare una porzione di HTML adibita a template per creare altri elementi.
<div style="display:none">
<div id="template1">
<div id="#id#">
<span>#text#<span>
<div>
</div>
<div id="template2">
<div style="border:1px solid #CCC;background-color:#AAA">#block#</div>
</div>
</div>
<div id="container"></div>
Il codice HTML che utilizzeremo come template non sarà visibile in quanto è inserito in un div nascosto.
Con il seguente codice javascript di esempio aggiungiamo ad un div contenitore nuovi elementi basati sui nostri template:
var tpl1 = document.getElementById("template1").innerHTML;
var tpl2 = document.getElementById("template2").innerHTML;
var container = document.getElementById("container");
for(var i=0; i<10;i++) {
var block = block.replace("#text#", "item text "+i).replace("#id#", "item"+i);
var block2 = tpl2.replace("#block#", block);
container.innerHTML += block2;
}
La tecnica quindi consiste nel prendere il contenuto html di un template. Si sostituiscono le eventuali "chiavi" che abbiamo definito all'interno dei template con il testo che si vuole visualizzare e infine si aggiunge il codice html che si è preparato all'interno del div contenitore.
Il vantaggio di usare questo sistema è il fatto di non dover creare elementi grafici all'interno di codice javascript. La porzione di html che utilizziamo come template può essere modificata successivamente senza dover metter mano al codice javascript.

ubuntu installare headers kernel for virtual box

2011-06-07T10:19:00.007+02:00

Verifichiamo la versione del kernel

gheryd@gheryd-laptop:~$ uname -a
Linux gheryd-laptop 2.6.38-10-generic-pae #44-Ubuntu SMP Thu Jun 2 21:50:56 UTC 2011 i686 i686 i386 GNU/Linux

Istalliamo gli headers:

gheryd@gheryd-laptop:~$ sudo apt-get install linux-headers-lbm-2.6.38-10-generic-pae

oppure

gheryd@gheryd-laptop:~$ sudo apt-get install linux-headers-lbm-$(uname -r)

Riaggiorniamo virtual box con il nuovo kernel

gheryd@gheryd-laptop:~$ sudo /etc/init.d/vboxdrv setup

javascript programmazione ad oggetti

2011-06-02T21:09:00.091+02:00

Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html

Indice

Indroducendo
Function
Singleton
Classe
Visibilità e scope delle variabili
Variabili static
Prototype
Ereditarietà
Estendere una classe
Cenni sull'oggetto window
Approfondimento

Introducendo.
Per chi è abituato alla classica programmazione ad oggetti in C o in Java, il primo impatto con javascript risulta poco familiare, e richiede un po' di elasticità sia per quanto concerne la sintassi sia per la definizione di classe.
Javascript in quanto script e non linguaggio di programmazione puro tipizzato, permette molte libertà sugli oggetti,
Negli esempi utilizzerò analogie con la programmazione ad oggetti JAVA che spero possano aiutare nella comprensione dal punto di vista pratico.
Insomma quando parlo di classe in javascript, in realtà è un qualcosa che si comporta come una classe. Ma non lo è.
Prima di iniziare a parlare di classi e oggetti, verrà introdotto il concetto di funzione attraverso una serie di esempi. Ritengo che aver ben chiaro cosa siano le funzioni sia fondamentale nella programmazione avanzata in javascript e credo possa essere propedeutico per gli argomenti affrontati nelle sezioni successive.

Function
Come gia saprete è possibile definire una funzione in questa maniera:
function show(message) {
alert(message);
}
ma le funzioni in javascript sono oggetti il cui riferimento si può assegnare ad una variabile:
var show = function(message) {
alert(message);
}
la funzione può essere così invocata:
show("hello!");
oppure:
show.call(this, "hello!");
o ancora
(show)("hello!");
in cui il termine this definisce lo scope (spiegato in seguito) della funzione, invocata al di fuori di qualsiasi oggetto si riferisce all'oggetto contenitore window.
Una funzione, in quanto oggetto, può essere passata come parametro in ingresso ad un'altra funzione:
var myLogger = function(message) {
alert(message);
}
function show(message, logger) {
logger(message);
}
show("hello", myLogger);
Possiamo definirla in maniera anonima e invocarla al volo:
(function(message){
alert(message);
})("hello");
Possiamo definire una funzione all'interno di un altra:
function show(message) {
function log() {
alert(message);
}
log();
}
show("hello");
Ad una funzione possiamo far restituire un'altro oggetto funzione:
function createLogger() {
return function(message){
alert(message);
}
}
createLogger()("hello");
var logger = createLogger();
logger("hello2");
Il riferimento dell'oggetto funzione può essere passato su più variabili:
var show = function(message) {
alert(message);
}
var show2 = show;
show2("hello");
In quanto oggetti, le funzioni possono essere create tramite new:
var show = new Function("message", "alert(message);");
show("hello");
perchè sono oggetti, la sintassi tipica di javascript ci nasconde questa loro vera natura!
Possiamo sapere i valori dei parametri passati all'invocazione della funzione:
function test() {
var s = "";
for(var i=0;i<arguments.length;i++) {
var arg = arguments[i];
s += arg+" "+typeof(arg)+"\n";
}
alert(s);
}
test("text", 2, function(){alert("hello")}, 2.5);
E infine, come vedremo nelle sezioni successive, possiamo instanziare un oggetto usando una funzione
come costruttore:
function Test() {
//code
return 5;
}
var a = new Test();
var b = Test();
Ma attenzione, la variabile a conterrà un riferimento all'instanza di un oggetto che avrà eventuali proprietà e metodi definiti secondo quanto spiegato nelle sezioni successive, mentre b conterrà il valore numerico "5".
Verificate con un alert(a) e un alert(b) ;)
In entrambi i casi la funzione Test verrà eseguita.
Inoltre anticipo che lo scope della funzione cambia, cioè il riferimento this usato all'interno si riferirà all'oggetto che stiamo instanziando a, altrimenti all'oggetto contenitore (per esempio window per b)

Singleton
Incominciamo con la creazione di un instanza al volo:
var obj = {}
oppure
var obj = new Object();
Abbiamo assegnato alla variabile obj un'instanza di un oggetto senza definire proprietà e metodi.
Certo, così non ci serve a niente. aggiungiamogli una proprietà:
obj.prop1 = "property 1";
oppure potevamo definirla direttamente dentro l'instanza con la sintassi propertyName:value (per più proprieta utilizzare la virgola come separatore)
var obj = { prop1:"property 1" };
Proviamo a visualizzarla su un alert:
alert( obj.prop1 );
Creiamo ora un metodo alla nostra istanza che visualizza sull'alert il valore prop1:
obj.alertProp1 = function() {
alert( this.prop1 );
}
o in alternativa:
var obj = {
prop1:"property 1",
alertProp1: function() {

alert( this.prop1 );

}

};
Per eseguire il metodo appena creato:
obj.alertProp1();
C'è ancora un'altra alternativa per accedere a tutte le proprietà e metodi del nostro oggetto:
alert( obj['prop1'] );
cioè il nome della proprietà è la chiave per accedere al suo valore con la stessa sintassi di un array.
Possiamo così anche ciclare tutte le proprietà di un oggetto:
var s = "";
for(var p in obj) {
s += p + "=" + obj[p] + " (" + typeof(obj[p]) + ")\n";
}
alert(s);
Creare in questa maniera un singleton, può essere interessante se vogliamo definire, per esempio, una serie di proprietà da passare ad una funzione:
var mySetup = {
color: "yellow",
backcolor: "black",
text: "hello",
border: 1,
click: function(event) {
alert("clicked");
}
}
function createLabel(setup) {
setup = setup || {}; //se non mi viene passato il parametro ne creo uno nuovo
var e = document.createElement("div");
e.appendChild( document.createTextNode(setup.text || "" ) );
e.style.color = setup.color || "black";
e.onclick = setup.click;
// etc...
return e;
}
var label = createLabel(mySetup),
Notate che se non aggiungete metodi al vostro singleton, abbiamo l'equivalente di una hashmap o array associativo.
A proposito di array, dimenticavo che potete aggiungere alle proprietà del vostro oggetto:
var obj = {
prop1: "property 1",
alertProp1: function(){ alert(this.prop1); },
arr: [1, "2", 3 ]
}
alert( obj.arr[1] );
La proprietà arr è quindi un riferimento ad un oggetto di tipo array che ha quindi proprietà tipo length.
for(var i=0; i<obj.arr.length; i++) {
var item = obj.arr[i];
alert(item);
}
Un modo alternativo per definire un singleton, e che io personalmente preferisco è questo:
var obj = function() {
var me = {};
me.myPublicProperty = "hello";
me.myPublicMethod = function(myparam) {
//.....
}
var myPrivateMethod = function(){
//....
}
var myPrivateProperty = "world":
return me;
}();
Notate che mettendo le parentesi tonde alla fine la funzione viene subito eseguita. La funzione restituisce un'instanza di un oggetto con metodi e proprietà.

Classe
Passiamo ora a come definire una classe.
Proviamo a creare una semplice classe che conta il numero di click su un elemento:
var ClickCounter = function(id) {
var el = document.getElementById(id);
this.counter = 0;
var me = this;
el.onclick = function(){
me.counter++;
};
this.show = function() {
alert( this.counter );
}
}
In questa classe abbiamo definito una proprietà count e un metodo show.
Si rimanda alla sezione successiva per un chiarimento sullo scope (contesto) e la visibilità delle variabili.
Possiamo definire una classe anche con questa forma:

function ClickCounter(id) {

var el = document.getElementById(id);

this.count = 0;

var me = this;

el.onclick = function(){

me.count++;

};

this.show = function() {

alert( this.counter );

}

Come in altri linguaggi l'oggetto si instanzia con "new":
var cc = new ClickCounter("myButton1");
Ma allora vi chiederete a cosa si riferisce this se ci limitiamo a chiamare i costruttore senza new.
Si riferisce all'oggetto contenitore.
Proviamo a fare un test;
function ShowCiao() {
this.alert("ciao");
}
Se chiamamo la funzione:
ShowCiao();
ci viene mostrato un alert perchè this si riferisce all'oggetto window che è il contenitore di tutti gli oggetti creati nell'ambito di una pagina web.
Mentre con
new ShowCiao();
non viene mostrato l'alert perchè this si riferisce all'istanza di ShowCiao che non ha il metodo alert. Questo genererebbe un errore javascript.
Un'altro modo per creare un istanza di un oggetto è questo:
var myObjFactory = function(msg) {
var me = {};
me.myPublicProperty = msg;
me.myPublicMethod = function(myparam) {
//.....
}
var myPrivateMethod = function(){
//....
}
var myPrivateMethod = "world":
return me;
}
Praticamente è la stessa funzione che abbiamo visto nella sezione "Singleton", ma senza le parentesi tonde.
Per creare un'istanza è quindi sufficiente eseguire la funzione:
var myObj1 = myObjFactory("hello");
var myObj2 = myObjFactory("ciao");

Visibilità e scope della variabili

Riferiamoci sempre all'esempio precedente, la classe ClickCounter.

All'interno del costruttore abbiamo dichiarato due variabili:

this.count = 0

var el = document.getElementBy(id);

La differenza è che anteponendo this alla variabile questa è accessibile all'esterno, mentre con var è visibile solo all'interno del contenitore comprese sotto classi/funzioni. Praticamente è come dichiararla private.

Inoltre abbiamo creato una terza variabile private:

var me = this;

A questo punto vi chiederete perchè nella funzione di onclick ho usato me mentre per la funzione show ho potuto utilizzare this per riferirmi all'instanza della classe ClickCounter.
Nell'assegnazione

el.onclick = function(){

me.counter++;

};

se avessimo usato this ci saremmo riferiti all'oggetto contenitore el che possiede appunto la proprietà onclick. Lo scope della funzione quando invocata dal bowser è el, non il mio oggetto ClickCounter. Quindi this all'interno della funzione handler di onclick si riferisce ad el.
Mentre show è una proprietà di ClickCounter, quindi this si riferisce ad una sua istanza.

Possiamo utilizzare me all'interno della funzione di onclick perchè ogni variabile dichiarata con var a livello superiore è visibile a livello più interno.
Per esempio:
var a = 1;
alert( a ); //show "1"
function TestClass() {
var b = 2;
alert( a ); //show "1"
alert( b ); //show "2"
function innerFunc() {
var c = 3;
  alert( a ); //show "1"
  alert( b ); //show "2"
  alert( c ); //show "3"
}
  alert( c ); //show "undefined"
}
alert( b ); //show "undefined"
alert( c ); //show "undefined"
Inoltre in ogni sotto funzione sono visibili anche i parametri passati come argomento al costruttore di ClickCounter.

Per esempio aggiungiamo un alert che mostra il parametro id passato al costruttore:

function ClickCounter(id) {

var el = document.getElementById(id);

this.count = 0;

var me = this;

el.onclick = function(){

me.count++;
alert(id);

};

this.show = function() {

alert( this.counter );

}

Questo ci permette un trucco per passare parametri ad una funzione che per esempio non ne prevede.
Mi spiego meglio con un esempio pratico.
Assegno un handler all'evento onclick di un elemento DOM:
var el = document.getElementById("id);
el.onclick = function(event){
document.getElementById("showContainer").innerHTML = "clicked";
}
La mia funzione verrà chiamata dal browser sul click del mio elemento el e mostrerà il messaggio all'interno di un div con id="showContainer";
Ma se usassi la stessa funzione come handler da assegnare a più elementi, potrei avere la necessita di passare altri parametri da visualizzare nel div mentre l'unico parametro che il browser mi passerà è solo l'oggetto event.
Dunque è possibile risolvere la questione creando un factory createClickHandler e sfruttando la visibilità dei parametri passati.
var createClickHandler = function(message) {
return function(event) {
document.getElementById("showContainer").innerHTML = message;
}
}
document.getElementById("id1").onclick = createClickHandler("clicked on element 1");
document.getElementById("id2").onclick = createClickHandler("clicked on element 2");

Variabili static

Utilizzo il termine static in analogia con la programmazione JAVA intendendo variabili accessibili senza utilizzare un instanza.

var MyClass = function(prop) {

this.prop = prop;

};

Definisco così una proprietà static:

MyClass.staticProp = "static proprerty";

Attenzione però, questa proprietà non è accessibile da una instanza (per un chiarimento vedere la sezione "approfondimento" alla fine di questo tutorial):

var o = new MyClass(prop);

alert( o.staticProp ); //show undefined

Mentre è accessibile in questo modo:

alert( MyClass.staticProp );

Prototype
Precedentemente per aggiungere proprietà e motodi alla nostre classi, abbiamo usato il riferimento this all'interno del nostro costruttore.
In alternativa avremmo potuto usare il metaoggetto prototype che contiene tutti i riferimenti a proprietà e metodi precedentemente definiti e consente di aggiungerne di nuovi.
var MyClass = functon(prop) {
this.prop = prop;
var privateProp = prop;
}
MyClass.prototype.showProp = function(){
alert(this.prop);
alert(privateProp);

}
Notate che nel metodo showProp possiamo accedere alla proprietà prop tramite this ma non possiamo accedere a privateProp. (Neanche con this.privateProp).
Con prototype possiamo anche sovrascrivere un metodo esistente.

Ereditarietà
Infine concludiamo il discorso prototype per ereditare proprietà e metodi da un'altra classe:
var BaseClass = function() {
this.counter = 0;
this.incr10 = function() {
this.counter +=10
}
}
var ExtClass = function() {
this.incr20 = function() {
this.counter += 20;
}
}
ExtClass.prototype = new BaseClass(); //eredita metodi e proprietà di BaseClass
Se vi sembra un po' strano passare una nuova istanza piuttosto che il nome della classe, riguardate la sezione approfondimenti. Almeno intuitivamente dovrebbe esser chiaro che non ha senso passare solo ExtClass che è un riferimento ad un oggetto di tipo function. Significherebbe ereditare proprietà e metodi di un oggetto Function.
Se al posto della classe BaseExt avessimo definito un singleton:
var baseObj = {
count: 0,
incr10: function() { this.count +=10; }
}
avremmo potuto scrivere:
ExtClass.prototype = baseObj;

Se vogliamo utilizzare il costruttore di ExtClass al posto di quello di BaseClass.
ExtClass.prototype.constructor = ExtClass;
In questo caso ha senso passare come costruttore il riferimento ad una instanza di una funzione.

Estendere una classe
Abbiamo gia visto con "prototype" come far ereditare metodi e proprietà di un'altra classe.
E' possibile farlo anche in questo modo:
var Class1 = function() {
this.method1 = function() { alert("method class 1") }
this.prop1 = "p1";
}
var Class2 = function() {
Class1.call(this); //extends class1
this.method2 = function () {
//....
}
}
var obj = new Class2();
obj.method1(); //utilizziamo il metodo ereditato dal Class1.

Cenni sull'oggetto window
E' un oggetto che viene instanziato automaticamente dal browser quando viene caricata una nuova pagina.
E' l'oggetto contenitore di tutti i nostri oggetti, infatti se create una nuova proprietà di window:
window.myprop = "property";
Questa sarà visibile in ogni sottofunzione e oggetto da noi creato.

Per questo se creiamo una funzione:

function show(message){

this.alert(message);

}

show("hello");

this si riferisce all'oggetto window, in quanto lo scope della funzione show.

L'oggetto window ci consente di accedere al DOM (document object model) per poter interagire con la nostra pagina via javascript:
window.document.getElementById("id");
ma possiamo accedervi direttamente senza utilizzare il riferimento window:
document.getElementById("id");
perchè esiste una variabile implicita
var document = window.document;
Anche la funzione alert è un metodo di window
window.alert("hello");
con il riferimento diretto implicito:
var alert = window.alert;
Ci sono tanti altri oggetti importanti che sono proprietà di window come per esempio history e location.

Approfondimento

Il concetto di classe non è propriamente lo stesso dei linguaggi come Java, perchè non possiamo definire una classe, ma semmai un oggetto costruttore che esegue istruzioni che vanno ad arricchire di proprietà e metodi un oggetto vuoto, quello che stiamo istanziando.

Possiamo comunque testare se una certo oggetto è stato generato tramite una cerca funzione mediante l'operatore instanceof:

function Test(){

}

var t = new Test();

alert( t instanceof Test );

Dato che Object è la classe di base di ogni oggetto, verrà visualizzato true anche per :

alert( t instanceof Object );

Se avessimo usato la funzione typeof, avremmo ottenuto sempre "object":

alert( typeof(t) );

Ma per chiarire il concetto di classe in javascript, mi riferirò all'esempio della sezione variabili static.

La proprietà staticProp non è una variabile statica di una classe MyClass ma è una proprietà dell'oggetto MyClass.

infatti con l'istruzione:

alert( typeof(MyClass) );

vi verrà mostrato "function".

Se vi ricordate quanto visto nella sezione function, la variabile MyClass è un riferimento ad un istanza di function, quindi è un oggetto di tipo function.

A questo oggetto ho aggiunto una proprietà che ho chiamato staticProp .

Per questo non esiste la proprietà o.staticProp perche è la proprietà di un altro oggetto appunto.

In altre parole tramite il termine "new" viene creato un oggetto invocando l'esecuzione di un oggetto function. Ma questi due oggetti non condividono proprietà e metodi.

Quindi ricapitolando la creazione di un oggetto può avvenire in due maniere.

Tramite sintassi

var obj = { pro1:val1, prop2:val2, .... }

oppure

var obj = new ( new Function(params, body)).call(this=refNewObj,myParams);

La seconda versione ci consente di utilizzare lo stesso oggetto function per creare più oggetti con uguali proprietà e metodi tramite l'invocazione implicita del suo metodo call. Il riferimento this si riferisce all'oggetto contenitore, in questo caso all'oggetto che stiamo creando.

La sintassi

var obj = new MyObj();

potremmo interpretarla come se il termine new instanziasse un oggetto vuoto {} e come se il termine MyObj() eseguisse la funzione che arricchisce di metodi e proprietà il nostro oggetto {} il cui riferimento viene assegnato alla variabile obj.

Infatti è equivalente a:

var obj = {};

MyObj.call(obj);

nell'argomento del metodo call abbiamo passato il riferimento all'oggetto obj come contesto(scope) per il riferimento this.

Questo ci fa capire anche che una funzione può essere il costruttore/inizializzatore di diversi oggetti, basta passargli lo scope (il riferimento all'istanza) diverso:

var f = function(){ this.prop3 = "p3"; }

var obj1 = {prop1:"p1"};

f.call(obj1);

var obj2 = {prop2:"p2"}

f.call(obj2);

UBUNTU 11.04 skype crashes, non parte più, non funziona

2011-05-27T09:45:00.011+02:00

english version
Il 27 maggio 2011 skype non si avviava più
Ho risolto rimuovendo il file shared.xml di skype. (nell'esempio sotto l'ho rinominato)

gheryd@gheryd-laptop:~$ mv .Skype/shared.xml .Skype/shared.xml.bkp
gheryd@gheryd-laptop:~$ skype &

(La tilde sta per cartella home).

Quando poi riavviate skype, compare la pagina di licenza. Date l'ok e skype ritornerà in vita. :)

Se non vi compare l'icona sulla tray bar date un'occhiata al seguente post:
http://gheryd.blogspot.com/2011/05/ubuntu-skype-icon-nascosta-hidden.html

javascript funzioni browser compatibili (cross browser) per gli eventi

2011-05-22T14:30:00.077+02:00

Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html

Indice:

Funzioni per la compatibilità
Registrare una funzione handler dll'evento
Lista eventi
Registrare lo stesso handler per più eventi
Eventi da tastiera
Tasti speciali
Esempio completo: currency text box
Handler in html
Passare parametri all'handler
Esempio completo: editable table
Eventi onload e onerror immagini
Gestire il submit del form

Introducendo
In questo tutorial mi propongo di spiegare come utilizzare gli eventi DOM con particolare attenzione su casi critici i cui mi sono imbattuto nel mio lavoro di sviluppo e che ho risolto cercando in giro per il web.
Non mi soffermo troppo sulle spiegazioni ma credo che gli esempi siano sufficientemente chiari. Se avete dubbi, correzioni o suggerimenti commentate!
Questo post verrà continuamente aggiornato con altri interessanti spunti e esempi.

Funzioni per la compatibilità
Prima di iniziare introduco tre funzioni che ci garantiranno negli esempi js che seguono la compatibilità con i vari browser:

function ensureEvent(e) { return !e ? e = window.event : e; }

function getElementByEvent(e) { return (e.target) ? e.target : e.srcElement }

function getKeyByEvent(e) { return e.keyCode ? e.keyCode : e.charCode; }

Registrare una funzione handler dell'evento
Per settare un handler che tratti uno specifico evento è sufficiente procedere nella maniera seguente
var el = document.getElementById("idEl");
el.onclick = function(event) {
  alert("clicked!");
}
Ogni volta che si clicca sull'elemento che ha l'attributo id="idEL" verrà visualizzato un alert.
Da html sarebbe analogo a:
<button onclick="alert('clicked')">click me</button>
<div onclick="alert('clicked')">...</div>
<a href="#" onclick="alert('clicked');return false">click me</a>
Il return false annulla l'eventuale azione su href (il browser non apre la pagina sull'url specificato). In caso contrario mettere un return true.
Comunque negli esempi successivi agganceremo gli handlers via javascript, che è utile soprattutto se si creano elementi dinamicamente:
var button = document.createElement("button");
button.setAttribute("id", "mybutton");
button.className = "buttonClass"; //la classe di stile non si può settare tramite setAttribute
button.appendChild( document.createTextNode("click me") );
button.onclick = fuction() { alert("clicked"); };
document.getElementById("container").appendChild(button);
la funzione handler dell'evento si può dichiarare anche a parte:
function onClickHandler(event) {
alert("clicked");
}
quindi assegnamo la funzione dichiarata in questo modo:
button.onclick = onClickHandler;

Lista eventi
E' possibile registrare funzioni handler su svariati eventi. Alcuni tag html supportano solo alcuni degli eventi di seguito elencati.
element.onclick
element.ondblclick
element.onkeyup
element.onkeypress
element.onkeydown
element.onblur
element.onfocus
element.onmouseover
element.onmousedown
element.onmouseup
element.onmouseout
element.onmousemove
element.onchange
element.onselect
element.onresize
element.onload
element.onload
element.onerror
Potrebbe mancare qualche evento, comunque quelli più usati ci sono.

Registrare lo stesso handler per più elementi
Nell'esempio seguente registriamo lo stesso handler su più elementi.
Questo potrebbe essere interessante se avete una funzione di validazione che potete utilizzare su più campi text, per esempio. Oppure a cambiare colore di sfondo sul mouseout o il mouseover.
Qui mi limito a mostrare un alert con informazioni relative all'elemento alla perdita del focus:
function onBlurHandler(event) {
event = ensureEvent(event);
vat el = getElementByEvent(event);
var tagname = el.tagName;
var id = el.getAttribute("id");
var value = el.value;
alert("tagname: "+tagname+"\n"+"id: "+id+"\n"+"value: "+value);
}
document.getElementById("input1").onblur = onBlurHandler;
document.getElementById("input2").onblur = onBlurHandler;
document.getElementById("input3").onblur = onBlurHandler;

Eventi da tastiera
Proviamo ora la gestione degli eventi da tastiera.
var ctrl = "";
function onKeyDownHandler(event) {
event = ensureEvent(event);
var unicode = getKeyByEvent(event);
var msg = "";
if( unicode == 17 ) {
ctrl = "ctrl + ";
}else {
msg = ctrl + unicode;
}
document.getElementById("messageContainer").innerHTML = msg;
}
function onKeyUpHandler(event) {
  event = ensureEvent(event);
  var unicode = getKeyByEvent(event);
if( unicode == 17 ) {
ctrl = "";
}
}
document.getElementById("idInput").onkeydown = onKeyDownHandler;
document.getElementById("idInput").onkeyup = onKeyUpHandler;
L'html da inserire per l'esempio precedente è:
input: <input id="idInput" type="text" />
<div id="messageContainer" ></div>
Con l'esempio sopra viene visualizzato nel div il codice unicode del tasto premuto. Indica inoltre l'eventuale combinazione con il tasto control (ctrl).

Tasti speciali
Di particolare interesse sono i codici unicode di alcuni tasti speciali (senza corrispondente carattere):
var specialKey = {
"DEL" : 8,
"TAB" : 9,
"ENTER" : 13,
"SHIFT" : 16,
"CTRL" : 17,
"ALT" : 18,
"ESC" : 27,
"SPACE" : 32,
"PAGEUP" : 33,
"PAGEDOWN": 34,

"END": 35,

"HOME", 36,

"LEFT" : 37,
"UP": 38,
"RIGHT": 39,
"DOWN": 40,
"INS": 45,
"CANC": 46,
"WINDOWS": 91,
"F1": 112,
"F2": 113
}
Ecco un esempio di utilizzo di questa mappa dei tasti speciali all'interno di un key handler:
e.onkeydown = function(event) {
event = ensureEvent(event);

var unicode = getKeyByEvent(event);

if( unicode==specialKey.TAB ) {
if(event.preventDefault) event.preventDefault();
return false;
}
}
L'input text non perde così il focus premendo il tasto TAB.

Possiamo anche utilizzare la mappa dei caratteri speciali per sapere se il tasto premuto è un carattere speciale:

function getSpecialKeyLabel(unicode) {

var label = null;

for(var k in specialKey) {

if( unicode==specialKey[k] ){ label = k; break; }

}

return label;

}

e.onkeydown = function(event) {

event = ensureEvent(event);

var unicode = getKeyByEvent(event);

var k = getSpecialKeyLabel(unicode);

if(!k) k = String.fromCharCode(unicode);

alert("hai premuto il tasto "+k);

}

Esempio completo: Currency Textbox
In questo esempio lavoriamo su un input text in maniera tale che gestica l'inserimento di un dato numerico sul focus e visualizzi il valore formattato come valuta sul blur.
L'unico carattere speciale che intercettiamo sul keypress è l'enter (invio) corrispondente al unicode 13. Sempre su questo evento viene verificato l'inserimento solo di numeri e separatore decimale (solo una volta).
Inoltre ho aggiunto un accorgimento per il form. Ho inserito un campo nascosto con name="price". La text box non ha l'attribute name perchè non voglio "submittare" sul server un valore formattato, ma solo il puro valore numerico che viene settato sul campo nascosto prima del submit.(vedi funzione onSubmitHandler)

<html>
<head>
<script type="text/javascript">
function ensureEvent(e) { return !e ? e = window.event : e; }
function getElementByEvent(e) { return (e.target) ? e.target : e.srcElement }
function getKeyByEvent(e) { return e.keyCode ? e.keyCode : e.charCode; }
function CurrencyTextBox(textBoxId) {
var me = this;
var number = 0.0;
this.el = document.getElementById( textBoxId );
this.currencySymbol = "E ";
this.getNumber = function() { return number; }
this.setNumber = function(n) {
n = parseFloat(n);
number = isNaN(n) ? 0.0 : n;
showFormatted();
}
if( !this.el || this.el.tagName!="INPUT") throw "element is not input";
this.el.onkeypress = function(event) {
event = ensureEvent(event);
var unicode = getKeyByEvent(event);
if(unicode==13){
me.el.blur();
if(event.preventDefault) event.preventDefault();
return false;
}
var c = String.fromCharCode(unicode);
if("1234567890.".indexOf(c)==-1) {
if(event.preventDefault) event.preventDefault();
return false;
}else if(c=="." && me.el.value.indexOf(".")>-1) {
if(event.preventDefault) event.preventDefault();
return false;
}
}
this.el.onblur = function(event) {
me.setNumber( me.el.value );
}
this.el.onfocus = function(event) {
showNumber();
}
var showFormatted = function() {
var v = "";
var nn = number.toString().split(".", 2);
var intn = parseInt(nn[0],10);
if( isNaN(intn) ) intn = 0;
var intv = intn+"";
for(var i=intv.length-1;i>=0;i--) {
var j = intv.length-i-1;
if(j>0 && j%3==0) v = "."+v;
v = intv[i]+v;
}
v += ",";
if( !nn[1] || nn[1].length==0 ) v += "00";
else if( nn[1].length==1 ) v += nn[1]+"0";
else if( nn[1].length>2 ) v += nn[1].substring(0,2);
else v += nn[1];
me.el.value = me.currencySymbol+v;
}
var showNumber = function() {
me.el.value = number;
}
}
function onSubmitHandler(){
document.getElementById("price").value = currencyTB.getNumber();
document.getElementById("myForm").submit();
}
var currencyTB = null;
function onLoadBodyHandler(){
currencyTB = new CurrencyTextBox("currencyTB");
currencyTB.setNumber(100);
}
</script>
</head>
<body onLoad = "onLoadBodyHandler()">
<form id="myForm">
price: <input id="currencyTB" type="text" style="text-align:right"/>
<input type="hidden" name="price" id="price" />
<br/>
<button onClick="onSubmitHandler();">submit</button>
</form>
</body>
</html>

Handler in innerHTML
E' bene sapere che creare un tag con l'attributo onclick (o qualsiasi altro evento) inserito via innerHMTL non fuziona per internet explorer (ie):
var divEl = document.getElementById("container");
divEl.innerHTML = "<a href='#' class='linkClass' onClick='onClickHandler();return false;'>click me!</a>";

Non funziona su IE! la funzione onClickHandler non viene chiamata. Questo vale per qualsiasi altro evento (es. mouseOver, mouseMove, mouseDown, etc).

Il codice corretto è:
var linkEl = document.createElement("a");
linkEl.setAttribute("href", "#");
linkEl.className = "linkClass";
linkEl.onclick = onClickHandler;
linkEl.appendChild( document.createTextNode("click me!") );
divEl.appendChild( linkEl );

Passare parametri all'handler
Se occorresse passare uno o più parametri all'handler:
function createClickHandler(par1, par2) {
return function(event) {
alert("par1:"+par1+" par2:"+par2);
};
}
el1.onClick = createClickHandler("gheryd", 12345);
el2.onClick = createClickHandler("pippo", 67890);

Esempio completo: Editable Table
Segue un esempio più complesso che sfrutta il trucco sopra esposto.
Viene creata dinamicamente una tabella. Vari handlers vengono agganciati a eventi onclick, onmouseover e onmouseout.
Sugli eventi del mouse cambia il colore della riga in cui si trova la cella mentre sull'onclick appare un prompt per modificarne il contenuto.
<html>
<head>
<script type="text/javascript">

function createTable() {

var createClickHandler = function(td, row, col) {
return function(event){
var v = prompt("inserire un nuovo valore per la cella "+row+","+col, td.innerHTML);
if(v) {
td.innerHTML = "";
td.appendChild( document.createTextNode(v) );
}
}
}

var createMouseOver = function(tr) {

return function(event) { tr.style.backgroundColor = "yellow"; }

}

var createMouseOut = function(tr) {

return function(event) { tr.style.backgroundColor = "white"; }

}

var table = document.createElement("table");

table.setAttribute("cellpadding", "5px");

table.setAttribute("border", "1px");

table.setAttribute("cellspacing", "0");

table.setAttribute("width", "500px");

var tbody = document.createElement("tbody");

table.appendChild(tbody);

for(var r=0;r<10;r++) {

var tr = document.createElement("tr");

for(var c=0;c<5;c++) {

var td = document.createElement("td");

td.setAttribute("align", "center");

td.appendChild(document.createTextNode(r+","+c));

td.onclick = createClickHandler(td, r,c);

td.onmouseover = createMouseOver(tr);

td.onmouseout = createMouseOut(tr);

tr.appendChild(td);

}

tbody.appendChild(tr);

}

document.body.appendChild(table);

}

</script>
</head>
<body onload="createTable();"></body>
</html>
Migliorie: come esercizio potrebbe essere interessante sul click della cella inserire un input text al posto di far comparire il prompt. Sulla perdita del focus dell'input, questo scomparirebbe e la cella verrebbe compilata con il nuovo valore.

Eventi onload e onerror immagini
Nell'esempio seguente viene creato dinamicamente un elemento <image> e viene inserito all'interno del contenitore div.
Se l'immagine non esiste viene chiamato l'handler per l'evento onerror, altrimenti verrà richiamato l'handler per l'evento onload quando l'immagine è stata caricata correttamente.

<html>

<head>

function onLoadHandler(event) {
alert("caricata");
}
function onErrorHandler(event) {
document.getElementById("cont").innerHTML = "immagine non caricata";
}
function onLoadBodyHandler() {
var img = new Image();
img.onload = onLoadHandler;
img.onerror = onErrorHandler;
document.getElementById("cont").appendChild(img);
img.src = "img1.jpg";
}

</script>

</head>

</body>

</html>

In questo esempio potrebbe essere interessante inserire un messaggio tipo "loading..." all'interno del div finchè l'immagine non è stata caricata (onload). Utile per immagini molto pesanti.

Gestire il submit del form
Tipicamente si vuole impedire o meno il submit del form in seguito alla validazione dei campi.
Negli esempi che seguono ci riferiremo alla seguente funzione che restituisce un valore booleano true se i campi del form sono validi, false in caso contrario:
function validateForm() {
var v = document.getElementById("myTextBox").value;
return v.length>0;
}
I tre seguenti esempi illustrano vari modi di gestire l'evento di onsubmit del form.

Esempio 1: implementare l'attributo onsubmit del tag form:
<form onsubmit="return validateForm()">
<input type="text" name="fieldName" id="myTextBox" />
<button type="submit" >submit</button>
</form>
oppure si può registrare un handler via codice:
document.getElementById("myForm").onsubmit = function(event){
if( validateForm() ) {
return true;
}else {
alert("field is void");
return false;
}
}

Esempio 2: implementare l'evento onclick di un pulsante di tipo "submit".

<button type="submit" onclick="return onClickHandler()">submit</button>

</form>

function onClickHandler() {

if( validateForm() ) {

return true;

}else {

alert("field is void");

return false;

}

Esempio 3: implementare l'evento onclick di un pulsante di tipo "button".

<button type="button" onclick="onClickHandler()">submit</button>

</form>

function onClickHandler() {

if( validateForm() ) {

document.getElementById("myForm").submit();

}else {

alert("field is void");

}

}
In questo esempio il pulsante di tipo "button" potrebbe essere sostituito da un "div" o da un link, cioè da qualsiasi oggetto html che può gestire l'evento "onclick".
Conclusione

Anche se apparentemente i tre sistemi sopra illustrati possono sembrare equivalenti, in realtà c'è una certa differenza.
Nell'esempio 1 e 2 restituiamo un valore false per impedire il submit. Ma nel caso di errore javascript non viene impedito il submit del form.
Invece nell'esempio 3 avviamo via codice il submit del form. In caso di errore javascript non viene eseguita l'istruzione che effettua il submit.
Inoltre il metodo utilizzato nel terzo esempio può essere applicato per altri eventi al posto dell'onclick.
Per esempio se volessimo avviare un timer che ritarda il submit del form, non potemmo applicare i metodi dell'esempio 1 e 2:
function onClickHandler() {
var count = 3;
var t = setInterval(function(){
count--;
if(count==0) {
document.getElementById("myForm").submit();
}
}, 1000);
}

UBUNTU LINUX PHP configurare display log error

2011-05-21T19:36:00.009+02:00

Per chi sviluppa con php e necessita della visualizzazione degli errori sulle proprie pagine .php, è utile attivare sul file di configurazione php.ini le opportune direttive che di default dovrebbero essere disattivate.

gheryd@gheryd-laptop:~$ cd /etc/php5/apache2/
gheryd@gheryd-laptop:/etc/php5/apache2$ ll
totale 76
drwxr-xr-x 2 root root  4096 2011-05-17 12:37 ./
drwxr-xr-x 5 root root  4096 2010-10-31 10:32 ../
lrwxrwxrwx 1 root root     9 2010-05-08 20:07 conf.d -> ../conf.d/
-rw-r--r-- 1 root root 67631 2011-05-17 12:37 php.ini

gheryd@gheryd-laptop:/etc/php5/apache2$  sudo nano php.ini

o se preferite l'editor grafico

gheryd@gheryd-laptop:/etc/php5/apache2$ sudo gedit php.ini &

In evidenza le direttive con i valori da impostare.

; error_reporting = E_ALL & ~E_DEPRECATED
error_reporting = E_ALL & ~E_NOTICE

; This directive controls whether or not and where PHP will output errors,
; notices and warnings too. Error output is very useful during development, but
; it could be very dangerous in production environments. Depending on the code
; which is triggering the error, sensitive information could potentially leak
; out of your application such as database usernames and passwords or worse.
; It's recommended that errors be logged on production servers rather than
; having the errors sent to STDOUT.
; Possible Values:
;   Off = Do not display any errors
;   stderr = Display errors to STDERR (affects only CGI/CLI binaries!)
;   On or stdout = Display errors to STDOUT
; Default Value: On
; Development Value: On
; Production Value: Off
; http://php.net/display-errors
display_errors = On

Ricordarsi di riavviare il server apache2:

gheryd@gheryd-laptop:/etc/php5/apache2$ sudo /etc/init.d/apache2 restart

browser firefox pagine tab affiancate

2011-05-18T11:51:00.003+02:00

Il mio collega ha trovato un utile plugin per affiancare le pagine web:

https://addons.mozilla.org/it/firefox/addon/split-pannel/

Utile per i developer ma anche non ;)