Javascript: non riesco a far funzionare questo script

**alb** · 28/03/2009, 11:33

Ho iniziato a studiare Javascript da 5/6 giorni e sto facendo un esercizio.

In pratica dovrei creare degli oggetti che si occupano di controllare i campi di una semplice form.

L'oggetto TextField si occupa di controllare se la dimensione del nome inserito in una label è corretta
L'oggetto NumericField si occupa di controllare se le 2 età da inserire nella form sono entro un certo range
L'oggetto LessThan si occupa di controllare che l'età attuale sia minore dell'età al momento del conseguimento della patente di guida

Ciascuno di questi oggetti ha un metodo isValid e un metodo explain che si occupano, rispettivamente, di effettuare il controllo vero e proprio e di generare un messaggio da inserire poi in un alert.

Questi oggetti vengono crati all'interno della funzione controlla che ho definito nella <head> del file .html (gli oggetti invece sono in un file .js)

Ecco il codice del file html:

Codice:

<html>

<head>
    <title>Esercizio j03</title>
    <script type="text/JavaScript" src="esj03.js"></script>
    <script type="text/JavaScript">
    function controlla() {
        var n = document.forms[0].elements[0].value;
        var e =document.forms[0].elements[1].value;
        var p = document.forms[0].elements[2].value;
        var msg = "";

        var control_n = new TextField(n, 1, 25);
        var control_e = new NumericField(e, p, 1, 99);
        var control_rel =  new LessThan(e, p);

            if (!control_n.flag_n()) {
                msg += control_n.msg_n();
                document.forms[0].elements[0].reset();
            }

            if (!control_e.flag_e()) {
                msg += control_e.msg_e();
                document.forms[0].elements[1].reset();
                document.forms[0].elements[2].reset();
            }

            if (!control_rel.flag_rel()) {
                msg += control_rel.msg_rel();
                document.forms[0].elements[1].reset();
                document.forms[0].elements[2].reset();
            }

        if (msg != "") {
            alert(msg);
        }
    }
    </script>
</head>

<body>
    <form method="post" action="#">
        <p>Nome:</p><input type="text" name="nome" size="30" /><br />
        <p>Et&agrave:</p><input type="text" name="eta" size="3" /><br />
        <p>Et&agrave al conseguimento della patente di guida:</p><input type="text" name="patente" size="3" /><br /><br />
        <input type="button" value="Invia" onclick="controlla();" />
        <input type="reset" value ="Reset" />
    </form>
</body>

</html>

E quello del file js:

Codice:

//classe TextField
function TextField(nome, minString, maxString) {
    this.nome = nome;
    this.minString = minString;
    this.maxString = maxString;
    this.flag_n = isValid_n;
    this.msg_n = explain_n;
}

function isValid_n() {
    if ((this.nome.length < this.minString) || (this.nome.length > this.maxString)) {
        return false;
    } else {
        return true;    
    }  
}

function explain_n() {
    if ((this.nome.length < this.minString) || (this.nome.length > this.maxString)) {
        return "\nAttenzione! Errore nel campo 'nome'";
    } else {
        return "";
    }
}




//classe NumericField
function NumericField(eta, patente, min_num, max_num) {
    this.eta = eta;
    this.patente = patente;
    this.min_num = min_num;
    this.max_num = max_num;
    this.flag_e = isValid_e;
    this.msg_e = explain_e;
}

function isValid_e() {
    if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente)) {
        return false;
    } else {
         if ((this.eta < this.min_num) || (this.eta > this.max_num)) || ((this.patente < this.patente) || (this.patente > this.patente))) {
            return false;
        } else {
             if (this.patente < 16) {
                return false;
            } else {
                return true;
            }
        }
    }
}

function explain_e() {
    if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente)) {
        return "\nAttenzione! Errore nei campi 'eta'";
    } else {
         if ((this.eta < this.min_num) || (this.eta > this.max_num)) || ((this.patente < this.patente) || (this.patente > this.patente))) {
            return "\nAttenzione! Errore nei campi 'eta'";
        } else {
             if (this.patente < 16) {
                return "\nAttenzione! Errore nei campi 'eta'";
            } else {
                return "";
            }
        }
    }
}




//classe LessThan
function LessThan(eta, patente) {
    this.eta = eta;
    this.patente = patente;
    this.flag_rel = isValid_rel;
    this.msg_rel = explain_rel;
}

function isValid_rel() {
    if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente)) {
        return false;
    } else {
        if (this.eta < this.patente) {
            return false;
        } else {
            return true;
        }
    }
}

function explain_rel() {
    if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente)) {
        return "\nAttenzione! L'eta' al conseguimento della patente è minore di quella attuale";
    } else {
        if (this.eta < this.patente) {
            return "\nAttenzione! L'eta' al conseguimento della patente è minore di quella attuale";
        } else {
            return "";
        }
    }
}

E' tutto ok fino a quando c'è la prima seguenza di if della funzione controlla. Gli oggetti vengono istanziati correttamente solo che sembra che non si riescano a richiamare i metodi isValid e explain all'interno della funzione calcola.
Altra cosa: non so se è corretto usare Object.Undefined per verificare che il campo della form sia inserito o no.

E' probabile che ci siano molti errori sintattici e non solo, insomma è probabile che abbia fatto molto cagate

, ma d'altronde sono a digiuno di javascript

**Lucas** · 28/03/2009, 13:32

anzitutto hai dato lo stesso nome "eta" a due campi input diversi....

**alb** · 28/03/2009, 13:39

Originariamente Scritto da Lucas

anzitutto hai dato lo stesso nome "eta" a due campi input diversi....

Vero, avevo fatto un copia-incolla e mi ero dimenticato di nominarlo diversamente.

**alb** · 29/03/2009, 13:29

Non ho ancora trovato l'errore

Sono sicuro che sia una cazzata, ma non riesco a trovarlo

**Geoh** · 31/03/2009, 21:42

Non sono un espertone di Javascript, ma gli ho dato un occhio e corretto...

Questo è il .js:

Codice:

//classe TextField
function TextField(nome, minString, maxString) {
    this.nome = nome;
    this.minString = minString;
    this.maxString = maxString;
    this.flag_n = isValid_n;
    this.msg_n = explain_n;
}

function isValid_n() {
    if ((this.nome.length < this.minString) || (this.nome.length > this.maxString)) {
        return false;
    } else {
        return true;    
    }  
}

function explain_n() {
    if ((this.nome.length < this.minString) || (this.nome.length > this.maxString)) {
        return "\nAttenzione! Errore nel campo 'nome'";
    } else {
        return "";
    }
}




//classe NumericField
function NumericField(eta, patente, min_num, max_num) {
    this.eta = eta;
    this.patente = patente;
    this.min_num = min_num;
    this.max_num = max_num;
    this.flag_e = isValid_e;
    this.msg_e = explain_e;
}

function isValid_e() {
    //if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente))) {
	if ((typeof this.eta=='undefined' || typeof this.patente=='undefined')) {
        return false;
    } else {
         if ((this.eta < this.min_num) || (this.eta > this.max_num) || ((this.patente < this.patente) || (this.patente > this.patente))) {
            return false;
        } else {
             if (this.patente < 16) {
                return false;
            } else {
                return true;
            }
        }
    }
}

function explain_e() {
    //if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente))) {
	if ((typeof this.eta=='undefined' || typeof this.patente=='undefined')) {
        return "\nAttenzione! Errore nei campi 'eta'";
    } else {
         if ((this.eta < this.min_num) || (this.eta > this.max_num) || ((this.patente < this.patente) || (this.patente > this.patente))) {
            return "\nAttenzione! Errore nei campi 'eta'";
        } else {
             if (this.patente < 16) {
                return "\nAttenzione! Errore nei campi 'eta'";
            } else {
                return "";
            }
        }
    }
}




//classe LessThan
function LessThan(eta, patente) {
    this.eta = eta;
    this.patente = patente;
    this.flag_rel = isValid_rel;
    this.msg_rel = explain_rel;
}

function isValid_rel() {
    //if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente))) {
	if ((typeof this.eta=='undefined' || typeof this.patente=='undefined')) {
        return false;
    } else {
        if (this.eta < this.patente) {
            return false;
        } else {
            return true;
        }
    }
}

function explain_rel() {
    //if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente))) {
    if ((typeof this.eta=='undefined' || typeof this.patente=='undefined')) {
    return "\nAttenzione! L'eta' al conseguimento della patente è minore di quella attuale";
    } else {
        if (this.eta < this.patente) {
            return "\nAttenzione! L'eta' al conseguimento della patente è minore di quella attuale";
        } else {
            return "";
        }
    }
}

Innanzi tutto c'erano problemi in diversi if per alcune parentesi non chiuse ed altri problemi sempre di parentesi nelle condizioni if con gli OR (del tipo che chiudevi la parentesi dell'if poi continuavi con altre condizioni...)
Le altre correzioni riguardano Object.isUndefined() che non risultava come funzione javascript: l'ho sostituita con

Codice:

typeof <nome_variabile>=='undefined'

ma credo che per il controllo di campo vuoto possa essere sufficiente anche:

Codice:

<nome_variabile>==' '

Non so dirti quale sia meglio però...

Nell'html ho fatto queste correzioni:

Codice:

    <script type="text/JavaScript">
    function controlla() {
        var n = document.forms[0].elements[0].value;
        var e =document.forms[0].elements[1].value;
        var p = document.forms[0].elements[2].value;
        var msg = "";

        var control_n = new TextField(n, 1, 25);
        var control_e = new NumericField(e, p, 1, 99);
        var control_rel =  new LessThan(e, p);

            if (!control_n.flag_n()) {
                msg += control_n.msg_n();
		document.forms[0].elements[0].value="";
                //document.forms[0].elements[0].reset();
            }

            if (!control_e.flag_e()) {
                msg += control_e.msg_e();
		document.forms[0].elements[1].value="";
                document.forms[0].elements[2].value="";
                //document.forms[0].elements[1].reset();
                //document.forms[0].elements[2].reset();
            }

            if (!control_rel.flag_rel()) {
                msg += control_rel.msg_rel();
		document.forms[0].elements[1].value="";
                document.forms[0].elements[2].value="";
                //document.forms[0].elements[1].reset();
                //document.forms[0].elements[2].reset();
            }

        if (msg != "") {
            alert(msg);
        }
    }
    </script>

Anche in questo caso, la funzione .reset() non risultava una funzione valida, quindi per svuotare i campi gli ho impostato direttamente stringa vuota.

Dovrebbe funzionare.

A parte che per le parentesi, dove ho fatto correzioni ho lasciato in commento il codice "errato" così lo individui subito.

Per la correzione degli errori ho usato la console degli errori di Firefox (la stessa console ce l'ha pure Chrome, IE non mi pare..).

**alb** · 31/03/2009, 22:01

Originariamente Scritto da matteo1982.RN

Non sono un espertone di Javascript, ma gli ho dato un occhio e corretto...

Questo è il .js:

Codice:

//classe TextField
function TextField(nome, minString, maxString) {
    this.nome = nome;
    this.minString = minString;
    this.maxString = maxString;
    this.flag_n = isValid_n;
    this.msg_n = explain_n;
}

function isValid_n() {
    if ((this.nome.length < this.minString) || (this.nome.length > this.maxString)) {
        return false;
    } else {
        return true;    
    }  
}

function explain_n() {
    if ((this.nome.length < this.minString) || (this.nome.length > this.maxString)) {
        return "\nAttenzione! Errore nel campo 'nome'";
    } else {
        return "";
    }
}




//classe NumericField
function NumericField(eta, patente, min_num, max_num) {
    this.eta = eta;
    this.patente = patente;
    this.min_num = min_num;
    this.max_num = max_num;
    this.flag_e = isValid_e;
    this.msg_e = explain_e;
}

function isValid_e() {
    //if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente))) {
    if ((typeof this.eta=='undefined' || typeof this.patente=='undefined')) {
        return false;
    } else {
         if ((this.eta < this.min_num) || (this.eta > this.max_num) || ((this.patente < this.patente) || (this.patente > this.patente))) {
            return false;
        } else {
             if (this.patente < 16) {
                return false;
            } else {
                return true;
            }
        }
    }
}

function explain_e() {
    //if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente))) {
    if ((typeof this.eta=='undefined' || typeof this.patente=='undefined')) {
        return "\nAttenzione! Errore nei campi 'eta'";
    } else {
         if ((this.eta < this.min_num) || (this.eta > this.max_num) || ((this.patente < this.patente) || (this.patente > this.patente))) {
            return "\nAttenzione! Errore nei campi 'eta'";
        } else {
             if (this.patente < 16) {
                return "\nAttenzione! Errore nei campi 'eta'";
            } else {
                return "";
            }
        }
    }
}




//classe LessThan
function LessThan(eta, patente) {
    this.eta = eta;
    this.patente = patente;
    this.flag_rel = isValid_rel;
    this.msg_rel = explain_rel;
}

function isValid_rel() {
    //if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente))) {
    if ((typeof this.eta=='undefined' || typeof this.patente=='undefined')) {
        return false;
    } else {
        if (this.eta < this.patente) {
            return false;
        } else {
            return true;
        }
    }
}

function explain_rel() {
    //if ((Object.isUndefined(this.eta) || Object.isUndefined(this.patente))) {
    if ((typeof this.eta=='undefined' || typeof this.patente=='undefined')) {
    return "\nAttenzione! L'eta' al conseguimento della patente è minore di quella attuale";
    } else {
        if (this.eta < this.patente) {
            return "\nAttenzione! L'eta' al conseguimento della patente è minore di quella attuale";
        } else {
            return "";
        }
    }
}

Innanzi tutto c'erano problemi in diversi if per alcune parentesi non chiuse ed altri problemi sempre di parentesi nelle condizioni if con gli OR (del tipo che chiudevi la parentesi dell'if poi continuavi con altre condizioni...)
Le altre correzioni riguardano Object.isUndefined() che non risultava come funzione javascript: l'ho sostituita con

Codice:

typeof <nome_variabile>=='undefined'

ma credo che per il controllo di campo vuoto possa essere sufficiente anche:

Codice:

<nome_variabile>==' '

Non so dirti quale sia meglio però...

Nell'html ho fatto queste correzioni:

Codice:

    <script type="text/JavaScript">
    function controlla() {
        var n = document.forms[0].elements[0].value;
        var e =document.forms[0].elements[1].value;
        var p = document.forms[0].elements[2].value;
        var msg = "";

        var control_n = new TextField(n, 1, 25);
        var control_e = new NumericField(e, p, 1, 99);
        var control_rel =  new LessThan(e, p);

            if (!control_n.flag_n()) {
                msg += control_n.msg_n();
        document.forms[0].elements[0].value="";
                //document.forms[0].elements[0].reset();
            }

            if (!control_e.flag_e()) {
                msg += control_e.msg_e();
        document.forms[0].elements[1].value="";
                document.forms[0].elements[2].value="";
                //document.forms[0].elements[1].reset();
                //document.forms[0].elements[2].reset();
            }

            if (!control_rel.flag_rel()) {
                msg += control_rel.msg_rel();
        document.forms[0].elements[1].value="";
                document.forms[0].elements[2].value="";
                //document.forms[0].elements[1].reset();
                //document.forms[0].elements[2].reset();
            }

        if (msg != "") {
            alert(msg);
        }
    }
    </script>

Anche in questo caso, la funzione .reset() non risultava una funzione valida, quindi per svuotare i campi gli ho impostato direttamente stringa vuota.

Dovrebbe funzionare.

A parte che per le parentesi, dove ho fatto correzioni ho lasciato in commento il codice "errato" così lo individui subito.

Per la correzione degli errori ho usato la console degli errori di Firefox (la stessa console ce l'ha pure Chrome, IE non mi pare..).

Wow!

Non so davvero come ringraziarti

Adesso me lo studio per bene. L'estensione di firefox che hai usato è firebug? L'ho appena installata ma devo ancora capire come si usa

**Geoh** · 01/04/2009, 17:11

Originariamente Scritto da alb

Wow!

Non so davvero come ringraziarti

De nada! Ogni tanto mi piace fare il debugger!

Originariamente Scritto da alb

Adesso me lo studio per bene. L'estensione di firefox che hai usato è firebug? L'ho appena installata ma devo ancora capire come si usa

Io non ho usato firebug ma semplicemente la Console degli Errori (in Firefox 3 è nel menù 'Strumenti').
Non facendo praticamente mai programmazione web non avevo firebug ma ho deciso di installarlo: mi sembra molto più completo e permette di interrompere lo script nel punto esatto in cui c'è l'errore agendo, mi pare, come un vero e proprio debugger.