<Argumentos Opcionais e Exceptions em Javascript ⁄ >

9551

2008-04-05

mySnippets javascript

Download

Bookmark This

Em Javascript também é possivel recorrer a argumentos opcionais, porém não será exactamente igual a por ex. no PHP. No PHP podemos usar parametros opcionais de duas maneiras, ou na assinatura da função atribuir logo o valor, ou então podemos recorrer ao func_get_args. Aqui iremos ter uma abordagem semelhante ao func_get_args.

O javascript tem um objecto chamado arguments no qual ficam armazenados todos os valores passados para a função e é nesse objecto que vamos obter os valores opcionais. Porém existirá uma pequena nuance na assinatura da função.

Por ex. no PHP podemos declarar assim a função: my_function(arg1,$arg2="",$arg3="",$arg4="") e o $arg2, $arg3, $arg4 serão opcionais visto que ficam logo com um valor atribuido, em Javascript tal não é possivel pois vai originar um erro de sintaxe. Podemos fazer isto em Javascript my_function(arg1,$arg2,$arg3,$arg4) e não atribuir valores a todos os argumentos, porém se depois quisermos aceder a esses valores irá dar erro, undefined, teremos sempre que fazer uma verificação para ver se o valor realmente existe ou não.

Como o objecto arguments armazena todos os valores, nem era precisa ter qualquer parametro na assinatura da função, mas tal iria gerar confusão para quem a fosse usar, pois não iria saber qual a ordem dos argumentos, para ultrapassar isso, vamos usar o /** comment */, isto é, os argumentos supostamente opcionais vamos colocá-los como comentário, por ex:

my_function(arg1/*, $arg2*/ /*,$arg3*/ /*,$arg4*/)

Estes argumentos opcionais poderão por ex. dar jeito se tentarmos implementar um getter/ setter, se passarmos um valor para a função é porque queremos atribuir um valor, caso contrário, a função devolve o valor esperado.

A 2ª parte do snippet vai ser baseado nas Exceptions, quem programa em OOP de certeza que já usou. Vamos criar o nosso próprio sistema de excepções.

Basicamente o que este snippet vai fazer é preencher os valores de determinados objectos html.

MyJSException.js, class responsável pelas Exceptions, esta class vai fazer um overload ao toString():

/**
 * @author pedrocorreia.net
 */
 
/**
 * Class responsável pelas Exceptions
 * 
 * @param String - Mensagem de erro a mostrar
 * @param Optional String - Nome da Exception
 * @param Optional String - ID
 */
MyJSException = function (msg /*, name*/ /*, id */){
    var _msg=msg;
    var _name="";
    var _id="";
 
    if(arguments[1]){ _name=arguments[1]; }
    if(arguments[2]){ _id=arguments[2]; }
 
    /**
     * Devolver a Descrição da Exception
     * @return String
     */
    this.Message = function(){return _msg;}
 
    /**
     * Devolver o Nome da Exception
     * @return String
     */
    this.Name = function () {return _name; }
 
    /**
     * Overload. Gerar mensagem de erro, com descrição completa da Exception
     * 
     * @return String
     */
    this.toString = function(){
        var str="";
        str="Exception Details:\n";
        if(_name) str+="\nName=\""+_name+"\"";
        if(_msg) str+="\nMessage=\""+_msg+"\"";
        if(_id) str+="\nID=\""+_id+"\"";
 
        return str;
    }
 }

DOM.js, será o responsável por interagir com o DOM, se por ex. fornecermos um campo que não exista será gerada uma excepção do tipo MyJSException:

/**
 * @author pedrocorreia.net
 */
 
/**
 * Class que vai interagir com o DOM
 */
DOM = function(){}
 
/**
 * Obter ou atribuir valores a um objecto html
 * 
 * @param String - ID do objecto Html
 * @param Optional String - Valor a atribuir ao objecto Html
 */
$ = function(id /*,value*/){
 
    //só implementei o suporte para o getElementByID :)
    if(!document.getElementById)
        throw new MyJSException("getElementById não suportado neste browser","getElementByIdNotSupported", id);
 
    if(!id) throw new MyJSException("Nao foi especificado o ID do objecto","ExMissingID", id);
 
    var _ref=document.getElementById(id);
    if(!_ref) throw new MyJSException("Objecto em falta ou ID inválido","ExInvalidIDReferenceOrFieldMissing", id);
 
    //existe um 2º argumento, vamos atribuir o valor
    //nota: só alguns objectos html estão suportados!
    if(arguments[1]){
        var value=arguments[1];
        var tag=_ref.tagName.toLowerCase();
 
       //campos input e textarea (checkbox e radiobutton não está implementado)
        if(tag=="input" || tag=="textarea") {
            var is_checkbox=(_ref.getAttribute("type")=="checkbox");
            var is_radio=(_ref.getAttribute("type")=="radio");
 
            if(!is_checkbox && !is_radio){_ref.value=value;}
            else {throw new MyJSException("RadioButton e Checkbox não implementados","ExRadioCheckBoxNotImpl")}
        }
 
        //span e div
        else if(tag=="span" || tag=="div") _ref.innerHTML=value;
 
        //dropdown
        else if(tag=="select") {
            var count=_ref.length;
            //percorrer dropdown e selecionar item respectivo
            for(var i=0;i<count;i++){
                //procuramos pelo value e pelo text
                if (_ref.options[i].value==value || _ref.options[i].text==value){
                    _ref.options[i].selected=true; break;
                }
            }
        }
    }
 
    //c.c, retornamos a referência para o objecto
    else{return _ref;}
}

Ficheiro html de teste:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Javascript - Optional Arguments e Exceptions</title>
		<script type="text/javascript" src="DOM.js" ></script>
		<script type="text/javascript" src="MyJSException.js" ></script>
		<script type="text/javascript" src="JSTesting.js" ></script>
	</head>
	<body>
		<div id="my_div"></div><br>
 
		<span id="my_span"></span><br>
 
		<input type="text" id="my_textbox" size="20" ><br>
 
		<textarea id="my_textarea" rows="3" cols="10"></textarea><br>
 
		<select id="my_dropdown">
			<optgroup label='Escolha uma Opção'>
				<option value="1" selected="selected">Opção 1</option>
				<option value="2">Opção 2</option>
				<option value="3">Opção 3</option>
			</optgroup>
		</select><br>
 
		<select id="my_dropdown2">
			<optgroup label='Escolha outra Opção'>
				<option value="4" selected="selected">Opção 4</option>
				<option value="5">Opção 5</option>
				<option value="6">Opção 6</option>
			</optgroup>
		</select><br>
 
		<br><br>
		<input type="button" onclick="JSTesting();" value="Preencher Valores">
	</body>
</html>

JSTesting.js, o script em funcionamento:

/**
 * @author pedrocorreia.net
 */
 
 
 JSTesting = function(){
 
    try{
       $("my_div","Preencher Div");
    }
    catch (e){
        alert(e.toString());
    }
 
    try{
       $("my_span","Preencher Span");
    }
    catch (e){
        alert(e.toString());
    }
 
    try{
       $("my_textbox","Preencher Textbox");
    }
    catch (e){
        alert(e.toString());
    }
 
    try{
       $("my_textarea","Preencher Textarea");
    }
    catch (e){
        alert(e.toString());
    }
 
    try{
       $("my_dropdown",2);
    }
    catch (e){
        alert(e.toString());
    }
    try{
       $("my_dropdown2","Opção 5");
    }
    catch (e){
        alert(e.toString());
    }
 }

O formulário de inicio terá este aspecto:

Depois de pressionado o botão respectivo ficará desta maneira:

Se por ex. fornecermos um id inválido, será gerada uma excepção

try{
$("my_div_error","Preencher Div");
}
catch (e){
alert(e.toString());
}

Este objecto ("my_div_error") não se encontra definido no html, logo será gerada esta Exception:

Qualquer erro/ dúvida é só dizer!

9551

2008-04-05

mySnippets javascript

Download

Bookmark This