Function | Blog Patrick Espake

Posts Tagged ‘function’

Ruby como verificar se uma variável existe similar ao isset do PHP

Postado em 17 jun 2009
Categoria(s) Ruby

No PHP existe a função isset ela é muito interessante para testar se uma variável existe, ela retorna true caso exista e false caso contrário.

Por exemplo:

public function cleanAttributes($params)
{
  if (isset($params['title'])) {
    $params['title'] = strip_tags($params['title']);
  }
 
  return $params;
}

No Ruby você pode fazer o mesmo usando o operador defined?.

Por exemplo:

def clean_attributes(params)
  if defined?(params['title'])
    if !params['title'].nil?
      params['title'] = params['title'].strip_tags
    end
  end
 
  return params
end

Se você gostou desse texto e acha que ajudou você, me recomende: .

Tags: cleanAttributes, clean_attributes, def, defined?, end, exemplo, existe, false, função, function, if, isset, nil, params, PHP, public, return, Ruby, similar, strip_tags, true, variável, verificar

Populando um combobox através de um resultado em JSON usando o framework javascript Prototype

2 Comments

Postado em 04 dez 2008
Categoria(s) JavaScript, Prototype

Vou mostrar como popular um combobox de cidades através de um resultado em JSON, usando o framework javascript Prototype.

Eu tenho um formulário com dois comboboxs um de estado e outro de cidade, quando o usuário selecionar o estado é buscada as cidades através de um webservice que retorna um JSON.

Meu formulário:

<form name="exemplo" id="exemplo" method="post">
  <table>
    <tbody>
      <tr>
        <th><label for="state">Estado</label></th>
        <td>
          <select id="state" name="state">
            <option value="0"/>
            <option value="1">AC</option>
            <option value="2">AL</option>
            <option value="3">AM</option>
            <option value="4">AP</option>
            <option value="5">BA</option>
            <option value="6">CE</option>
            <option value="7">DF</option>
            <option value="8">ES</option>
            <option value="9">GO</option>
            <option value="10">MA</option>
            <option value="11">MG</option>
            <option value="12">MS</option>
            <option value="13">MT</option>
            <option value="14">PA</option>
            <option value="15">PB</option>
            <option value="16">PE</option>
            <option value="17">PI</option>
            <option value="18">PR</option>
            <option value="19">RJ</option>
            <option value="20">RN</option>
            <option value="21">RO</option>
            <option value="22">RR</option>
            <option value="23">RS</option>
            <option value="24">SC</option>
            <option value="25">SE</option>
            <option value="26">SP</option>
            <option value="27">TO</option>
          </select>
        </td>
      </tr>
      <tr>
        <th><label for="city">Cidade</label></th>
        <td>
          <select id="city" name="city"></select>
        </td>
      </tr>
    </tbody>
  </table>
</form>

Para todo o código javascript abaixo funcionar, é necessário ter as bibliotecas javascripts do Prototype incluídas na página.

<script language="JavaScript">
// Quando ocorrer o evento onchange no combobox chama a função getCitiesByStateId
$('state').observe('change', function() { getCitiesByStateId() });
 
/**
 * Busca todas cidades de um estado
 * @param object obj
 *  Informações do elemento
 */
function getCitiesByStateId()
{
  var state = $('state');
 
  if (state.value > 0)
  {
    var url = '/url_do_seu_webservice_que_vai_retornar_o_json/state_id/' + state.value;
    makeRequest(url, 'city');
  }
}
 
/**
 * Realiza a requisição ajax para o webservice
 * obtém os resultados e preenche o combobox
 * @param strung url
 *  Url da requisição
 * @param string combobox_fill_id
 *  Combobox para ser preenchida
 */
function makeRequest(url, combobox_fill_id)
{
  new Ajax.Request(url,
  {
    method: 'get',
    onLoading: function() { loadingComboBox(combobox_fill_id) },
    onSuccess: function(transport)
    {
      if (200 == transport.status)
      {
        var response = eval('(' + transport.responseText + ')');
        fillComboBox(combobox_fill_id, response);
      }
    }
  });
}
 
/**
 * Preenche a combobox com os valores de retorno
 * @param string name
 *  Combobox a ser preenchida
 * @param object response
 *  Objeto de resposta
 */
function fillComboBox(name, response)
{
  cleanComboBox(name);
 
  $(name).insert(new Element('option', {value: ''}).insert(''));
  response.each
  (
    function(pair)
    {
      $(name).insert(new Element('option', {value: pair.id}).insert(pair.name));
    }
  );
}
 
/**
 * Remove todos os elementos da combobox
 * @param string name
 *  Id da combobox para limpar
 */
function cleanComboBox(name)
{
  $(name).descendants().invoke('remove');
}
 
/**
 * Exibe a mensagem de aguarde... na combobox enquanto os dados estão sendo requisitados
 */
function loadingComboBox(name)
{
  cleanComboBox(name);
  $(name).insert(new Element('option', {value: ''}).insert('Aguarde...'));
}
</script>

O código acima não precisa de muitas explicações, já está bem dividido em funções e comentado.

O meu webservice retorna um JSON no seguinte formato:

1
2

[[3037,"Abati\u00e1"],[3038,"Adrian\u00f3polis"],[3039,"Agudos do Sul"],[160,"Almirante Tamandar\u00e9"],[3040,"Altamira do Paran\u00e1"],[3043,"Alt\u00f4nia"],[3041,"Alto Paran\u00e1"],[3042,"Alto Piquiri"],[3044,"Alvorada do Sul"],[3045,"Amapor\u00e3"],[3046,"Amp\u00e9re"],[3047,"Anahy"],[3048,"Andir\u00e1"],[3049,"\u00c2ngulo"],[3050,"Antonina"],[3051,"Ant\u00f4nio Olinto"],[174,"Apucarana"],[163,"Arapongas"],[3052,"Arapoti"],[3053,"Arapu\u00e3"],[3054,"Araruna"],[173,"Arauc\u00e1ria"],[3055,"Ariranha do Iva\u00ed"],[3056,"Assa\u00ed"],[3057,"Assis Chateaubriand"],[3058,"Astorga"],[3059,"Atalaia"],[3060,"Balsa Nova"],[3061,"Bandeirantes"],[3062,"Barbosa Ferraz"],[3064,"Barrac\u00e3o"],[3063,"Barra do Jacar\u00e9"],[3065,"Bela Vista da Caroba"],[3066,"Bela Vista do Para\u00edso"],[3067,"Bituruna"],[3068,"Boa Esperan\u00e7a"],[3069,"Boa Esperan\u00e7a do Igua\u00e7u"],[3070,"Boa Ventura de S\u00e3o Roque"],[3071,"Boa Vista da Aparecida"],[3072,"Bocai\u00fava do Sul"],[3073,"Bom Jesus do Sul"],[3074,"Bom Sucesso"],[3075,"Bom Sucesso do Sul"],[3076,"Borraz\u00f3polis"],[3077,"Braganey"],[3078,"Brasil\u00e2ndia do Sul"],[3079,"Cafeara"],[3080,"Cafel\u00e2ndia"],[3081,"Cafezal do Sul"],[3082,"Calif\u00f3rnia"],[3083,"Cambar\u00e1"],[170,"Camb\u00e9"],[3084,"Cambira"],[3085,"Campina da Lagoa"],[3086,"Campina do Sim\u00e3o"],[3087,"Campina Grande do Sul"],[3088,"Campo Bonito"],[3089,"Campo do Tenente"],[159,"Campo Largo"],[3090,"Campo Magro"],[162,"Campo Mour\u00e3o"],[3091,"C\u00e2ndido de Abreu"],[3092,"Cand\u00f3i"],[3093,"Cantagalo"],[3094,"Capanema"],[3095,"Capit\u00e3o Le\u00f4nidas Marques"],[3096,"Carambe\u00ed"],[3097,"Carl\u00f3polis"],[166,"Cascavel"],[161,"Castro"],[3098,"Catanduvas"],[3099,"Centen\u00e1rio do Sul"],[3100,"Cerro Azul"],[3101,"C\u00e9u Azul"],[3102,"Chopinzinho"],[3103,"Cianorte"],[3104,"Cidade Ga\u00facha"],[3105,"Clevel\u00e2ndia"],[171,"Colombo"],[3106,"Colorado"],[3107,"Congonhinhas"],[3108,"Conselheiro Mairinck"],[3109,"Contenda"],[3110,"Corb\u00e9lia"],[3111,"Corn\u00e9lio Proc\u00f3pio"],[3112,"Coronel Domingos Soares"],[3113,"Coronel Vivida"],[3114,"Corumbata\u00ed do Sul"],[3116,"Cruzeiro do Igua\u00e7u"],[3117,"Cruzeiro do Oeste"],[3118,"Cruzeiro do Sul"],[3115,"Cruz Machado"],[3119,"Cruzmaltina"],[164,"Curitiba"],[3120,"Curi\u00fava"],[3121,"Diamante d'Oeste"],[3122,"Diamante do Norte"],[3123,"Diamante do Sul"],[3124,"Dois Vizinhos"],[3125,"Douradina"],[3126,"Doutor Camargo"],[3127,"Doutor Ulysses"],[3128,"En\u00e9as Marques"],[3129,"Engenheiro Beltr\u00e3o"],[3130,"Entre Rios do Oeste"],[3131,"Esperan\u00e7a Nova"],[3132,"Espig\u00e3o Alto do Igua\u00e7u"],[3133,"Farol"],[3134,"Faxinal"],[3135,"Fazenda Rio Grande"],[3136,"F\u00eanix"],[3137,"Fernandes Pinheiro"],[3138,"Figueira"],[3140,"Flora\u00ed"],[3139,"Flor da Serra do Sul"],[3141,"Floresta"],[3142,"Florest\u00f3polis"],[3143,"Fl\u00f3rida"],[3144,"Formosa do Oeste"],[152,"Foz do Igua\u00e7u"],[3145,"Foz do Jord\u00e3o"],[3146,"Francisco Alves"],[153,"Francisco Beltr\u00e3o"],[3147,"General Carneiro"],[3148,"Godoy Moreira"],[3149,"Goioer\u00ea"],[3150,"Goioxim"],[3151,"Grandes Rios"],[3152,"Gua\u00edra"],[3153,"Guaira\u00e7\u00e1"],[3154,"Guamiranga"],[3155,"Guapirama"],[3156,"Guaporema"],[3157,"Guaraci"],[3158,"Guarania\u00e7u"],[168,"Guarapuava"],[3159,"Guaraque\u00e7aba"],[3160,"Guaratuba"],[3161,"Hon\u00f3rio Serpa"],[3162,"Ibaiti"],[3163,"Ibema"],[3164,"Ibipor\u00e3"],[3165,"Icara\u00edma"],[3166,"Iguara\u00e7u"],[3167,"Iguatu"],[3168,"Imba\u00fa"],[3169,"Imbituva"],[3170,"In\u00e1cio Martins"],[3171,"Inaj\u00e1"],[3172,"Indian\u00f3polis"],[3173,"Ipiranga"],[3174,"Ipor\u00e3"],[3175,"Iracema do Oeste"],[3176,"Irati"],[3177,"Iretama"],[3178,"Itaguaj\u00e9"],[3179,"Itaipul\u00e2ndia"],[3180,"Itambarac\u00e1"],[3181,"Itamb\u00e9"],[3182,"Itapejara d'Oeste"],[3183,"Itaperu\u00e7u"],[3184,"Ita\u00fana do Sul"],[3185,"Iva\u00ed"],[3186,"Ivaipor\u00e3"],[3187,"Ivat\u00e9"],[3188,"Ivatuba"],[3189,"Jaboti"],[3190,"Jacarezinho"],[3191,"Jaguapit\u00e3"],[3192,"Jaguaria\u00edva"],[3193,"Jandaia do Sul"],[3194,"Jani\u00f3polis"],[3195,"Japira"],[3196,"Japur\u00e1"],[3197,"Jardim Alegre"],[3198,"Jardim Olinda"],[3199,"Jataizinho"],[3200,"Jesu\u00edtas"],[3201,"Joaquim T\u00e1vora"],[3202,"Jundia\u00ed do Sul"],[3203,"Juranda"],[3204,"Jussara"],[3205,"Kalor\u00e9"],[3206,"Lapa"],[3207,"Laranjal"],[177,"Laranjeiras do Sul"],[3208,"Le\u00f3polis"],[3209,"Lidian\u00f3polis"],[3210,"Lindoeste"],[3211,"Loanda"],[3212,"Lobato"],[165,"Londrina"],[3213,"Luiziana"],[3214,"Lunardelli"],[3215,"Lupion\u00f3polis"],[3216,"Mallet"],[3217,"Mambor\u00ea"],[3218,"Mandagua\u00e7u"],[3219,"Mandaguari"],[3220,"Mandirituba"],[3221,"Manfrin\u00f3polis"],[3222,"Mangueirinha"],[3223,"Manoel Ribas"],[3224,"Marechal C\u00e2ndido Rondon"],[3225,"Maria Helena"],[3226,"Marialva"],[3227,"Maril\u00e2ndia do Sul"],[3228,"Marilena"],[3229,"Mariluz"],[151,"Maring\u00e1"],[3230,"Mari\u00f3polis"],[3231,"Marip\u00e1"],[3232,"Marmeleiro"],[3233,"Marquinho"],[3234,"Marumbi"],[3235,"Matel\u00e2ndia"],[3236,"Matinhos"],[3237,"Mato Rico"],[3238,"Mau\u00e1 da Serra"],[3239,"Medianeira"],[3240,"Mercedes"],[3241,"Mirador"],[3242,"Miraselva"],[3243,"Missal"],[3244,"Moreira Sales"],[3245,"Morretes"],[3246,"Munhoz de Melo"],[3247,"Nossa Senhora das Gra\u00e7as"],[3248,"Nova Alian\u00e7a do Iva\u00ed"],[3249,"Nova Am\u00e9rica da Colina"],[3250,"Nova Aurora"],[3251,"Nova Cantu"],[3252,"Nova Esperan\u00e7a"],[3253,"Nova Esperan\u00e7a do Sudoeste"],[3254,"Nova F\u00e1tima"],[3255,"Nova Laranjeiras"],[3256,"Nova Londrina"],[3257,"Nova Ol\u00edmpia"],[3258,"Nova Prata do Igua\u00e7u"],[3259,"Nova Santa B\u00e1rbara"],[3260,"Nova Santa Rosa"],[3261,"Nova Tebas"],[3262,"Novo Itacolomi"],[3263,"Ortigueira"],[3264,"Ourizona"],[3265,"Ouro Verde do Oeste"],[3266,"Pai\u00e7andu"],[3267,"Palmas"],[3268,"Palmeira"],[3269,"Palmital"],[3270,"Palotina"],[3271,"Para\u00edso do Norte"],[3272,"Paranacity"],[167,"Paranagu\u00e1"],[3273,"Paranapoema"],[155,"Paranava\u00ed"],[3274,"Pato Bragado"],[169,"Pato Branco"],[3275,"Paula Freitas"],[3276,"Paulo Frontin"],[3277,"Peabiru"],[3278,"Perobal"],[3279,"P\u00e9rola"],[3280,"P\u00e9rola d'Oeste"],[3281,"Pi\u00ean"],[176,"Pinhais"],[3283,"Pinhal\u00e3o"],[3282,"Pinhal de S\u00e3o Bento"],[3284,"Pinh\u00e3o"],[3285,"Pira\u00ed do Sul"],[156,"Piraquara"],[3286,"Pitanga"],[3287,"Pitangueiras"],[3288,"Planaltina do Paran\u00e1"],[3289,"Planalto"],[154,"Ponta Grossa"],[3290,"Pontal do Paran\u00e1"],[3291,"Porecatu"],[3292,"Porto Amazonas"],[3293,"Porto Barreiro"],[3294,"Porto Rico"],[3295,"Porto Vit\u00f3ria"],[3296,"Prado Ferreira"],[3297,"Pranchita"],[3298,"Presidente Castelo Branco"],[3299,"Primeiro de Maio"],[3300,"Prudent\u00f3polis"],[3301,"Quarto Centen\u00e1rio"],[3302,"Quatigu\u00e1"],[3303,"Quatro Barras"],[3304,"Quatro Pontes"],[3305,"Quedas do Igua\u00e7u"],[3306,"Quer\u00eancia do Norte"],[3307,"Quinta do Sol"],[3308,"Quitandinha"],[3309,"Ramil\u00e2ndia"],[3310,"Rancho Alegre"],[3311,"Rancho Alegre d'Oeste"],[3312,"Realeza"],[3313,"Rebou\u00e7as"],[3314,"Renascen\u00e7a"],[3315,"Reserva"],[3316,"Reserva do Igua\u00e7u"],[3317,"Ribeir\u00e3o Claro"],[3318,"Ribeir\u00e3o do Pinhal"],[3319,"Rio Azul"],[3320,"Rio Bom"],[3321,"Rio Bonito do Igua\u00e7u"],[3322,"Rio Branco do Iva\u00ed"],[3323,"Rio Branco do Sul"],[3324,"Rio Negro"],[3325,"Rol\u00e2ndia"],[3326,"Roncador"],[3327,"Rondon"],[3328,"Ros\u00e1rio do Iva\u00ed"],[3329,"Sab\u00e1udia"],[3330,"Salgado Filho"],[3331,"Salto do Itarar\u00e9"],[3332,"Salto do Lontra"],[3333,"Santa Am\u00e9lia"],[3334,"Santa Cec\u00edlia do Pav\u00e3o"],[3335,"Santa Cruz de Monte Castelo"],[3336,"Santa F\u00e9"],[3337,"Santa Helena"],[3338,"Santa In\u00eas"],[3339,"Santa Isabel do Iva\u00ed"],[3340,"Santa Izabel do Oeste"],[3341,"Santa L\u00facia"],[3342,"Santa Maria do Oeste"],[3343,"Santa Mariana"],[3344,"Santa M\u00f4nica"],[3347,"Santana do Itarar\u00e9"],[3345,"Santa Tereza do Oeste"],[3346,"Santa Terezinha de Itaipu"],[3348,"Santo Ant\u00f4nio da Platina"],[3349,"Santo Ant\u00f4nio do Caiu\u00e1"],[3350,"Santo Ant\u00f4nio do Para\u00edso"],[3351,"Santo Ant\u00f4nio do Sudoeste"],[3352,"Santo In\u00e1cio"],[3353,"S\u00e3o Carlos d
o Iva\u00ed"],[3354,"S\u00e3o Jer\u00f4nimo da Serra"],[3355,"S\u00e3o Jo\u00e3o"],[3356,"S\u00e3o Jo\u00e3o do Caiu\u00e1"],[3357,"S\u00e3o Jo\u00e3o do Iva\u00ed"],[3358,"S\u00e3o Jo\u00e3o do Triunfo"],[3359,"S\u00e3o Jorge d'Oeste"],[3360,"S\u00e3o Jorge do Iva\u00ed"],[3361,"S\u00e3o Jorge do Patroc\u00ednio"],[3362,"S\u00e3o Jos\u00e9 da Boa Vista"],[3363,"S\u00e3o Jos\u00e9 das Palmeiras"],[175,"S\u00e3o Jos\u00e9 dos Pinhais"],[3364,"S\u00e3o Manoel do Paran\u00e1"],[3365,"S\u00e3o Mateus do Sul"],[3366,"S\u00e3o Miguel do Igua\u00e7u"],[3367,"S\u00e3o Pedro do Igua\u00e7u"],[3368,"S\u00e3o Pedro do Iva\u00ed"],[3369,"S\u00e3o Pedro do Paran\u00e1"],[3370,"S\u00e3o Sebasti\u00e3o da Amoreira"],[3371,"S\u00e3o Tom\u00e9"],[3372,"Sapopema"],[150,"Sarandi"],[3373,"Saudade do Igua\u00e7u"],[3374,"Seng\u00e9s"],[3375,"Serran\u00f3polis do Igua\u00e7u"],[3376,"Sertaneja"],[3377,"Sertan\u00f3polis"],[3378,"Siqueira Campos"],[3379,"Sulina"],[3380,"Tamarana"],[3381,"Tamboara"],[3382,"Tapejara"],[3383,"Tapira"],[3384,"Teixeira Soares"],[158,"Tel\u00eamaco Borba"],[3385,"Terra Boa"],[3386,"Terra Rica"],[3387,"Terra Roxa"],[3388,"Tibagi"],[3389,"Tijucas do Sul"],[172,"Toledo"],[3390,"Tomazina"],[3391,"Tr\u00eas Barras do Paran\u00e1"],[3392,"Tunas do Paran\u00e1"],[3393,"Tuneiras do Oeste"],[3394,"Tup\u00e3ssi"],[3395,"Turvo"],[3396,"Ubirat\u00e3"],[157,"Umuarama"],[3397,"Uni\u00e3o da Vit\u00f3ria"],[3398,"Uniflor"],[3399,"Ura\u00ed"],[3400,"Ventania"],[3401,"Vera Cruz do Oeste"],[3402,"Ver\u00ea"],[3403,"Vila Alta"],[3404,"Virmond"],[3405,"Vitorino"],[3406,"Wenceslau Braz"],[3407,"Xambr\u00ea"]]

Tags: Ajax.Request, change, cidade, cleancombobox, combobox, descendants, estado, exemplo, fillcombobox, form, framework, function, id, if, insert, invoke, JavaScript, js, json, makeRequest, method, name, new, new Element, observe, onLonding, onSuccess, pair, populado, post, Prototype, remove, response, table, tbody, transport, url, webservice

Usando Event.observe no Framework Javascript Prototype

No Comments

Postado em 07 out 2008
Categoria(s) JavaScript, Prototype

No Prototype existe a função Event.observe, essa função serve para adicionar uma função a uma determinada ação, por exemplo você deseja que sempre que a tela seja carregada uma função javascript seja disparada você pode fazer algo assim:

Event.observe(window, 'load', init, false);
 
function init()
{
  alert('Olá');
}

Essa função Event.observe associa a página/janela (window) com o evento onload (load), e chama a função javascript init quando esse evento ocorre, desta forma sempre quando a página for carregada a função init() será chamada.

Tags: alert, event, false, framework, function, init, JavaScript, js, load, observe, Prototype, window

JavaScript criando elementos HTML dinamicamente

No Comments

Postado em 17 abr 2008
Categoria(s) JavaScript

Hoje vamos ver como criar elementos HTML dinamicamente em JavaScript.

Vamos começar!

Nós precisamos criar uma estrutura básica de um documento HTML. Digite o segundo código:

<html>
<head>
</head>
 
<body>
 
  <form method="post" name="my_form" id="my_form" action="">
 
    <input type="button" value="Criar campo texto" name="add_input" id="add_input" />
 
    <br />
    <br />
 
    <div id="add_input_div"></div>
 
  </form>
 
</body>
</html>

Com esse código nós criamos a estrutura básica de um documento HTML, criamos um formulário chamado “my_form”. Dentro do formulário nós criamos um botão com o texto “Criar campo texto”. Foi criado também um div com o id “add_input_div”, nesse div que nós iremos inserir os elementos gerando dinamicamente via JavaScript.

É a idéia é a seguinte quando o usuário clicar no botão “Criar campo texto” será adicionado um novo campo de texto dentro do div “add_input_div”.

Bom chega de papo e vamos fazer a mágica acontecer.

Dentro das tags:

1 2	<head> </head>

Digite o seguinte código:

<script language="JavaScript">
var input_cont = 0;
 
function addInput()
{
  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('name', 'new_input_'+input_cont);
  input.setAttribute('id', 'new_input_'+input_cont);
  input.setAttribute('value', '');
 
  var add_input_div = document.getElementById('add_input_div');
  add_input_div.appendChild(input);
 
  input_cont++;
}
 
</script>

Esse é o código JavaScript responsável por criar os campos de texto dinamicamente, daqui a pouco vamos entender como ele funciona.

Agora vamos fazer o nosso botão chamar esse código JavaScript, para isso temos que inserir o evento “onclick” no nosso botão, para que quando o botão seja clicado um novo campo texto seja gerado.

Adicione na tag do botão o seguinte código para ficar dessa forma:

1	<input type="button" value="Criar campo texto" name="add_input" id="add_input" onclick="addInput()" />

Você percebeu que foi adicionado:

1	onclick="addInput()"

Esse cara que irá chamar a função JavaScript addInput() que criamos no cabeçalho da página.

Pronto! Fazendo isso você já irá conseguir gerar campos texto dinamicamente e obter esse resultado:

Agora vamos entender o JavaScript que faz isso.

No inicio é criado a variável input_cont, o objetivo dela é armazenar o número de inputs gerado e usar o seu valor para dar nome para o novo input criado.

1	var input_cont = 0;

No final da função addInput() existe a linha:

1	input_cont++;

Essa linha incrementa o contador.

Vamos ver o que as seguintes linhas fazem:

  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('name', 'new_input_'+input_cont);
  input.setAttribute('id', 'new_input_'+input_cont);
  input.setAttribute('value', '');

Na primeira linha de código acima usando o document.createElement nós dizemos que queremos criar um novo elemento do tipo input e atribuímos essa criação a uma variável chamada input.

Com essa variável input nós podemos definir as propriedades do input, para fazer isso é usado o método setAttribute onde o primeiro argumento é o nome da propriedade e segundo argumento é o seu valor.

Você ira perceber que é muito usado isso no código:

1	'new_input_'+input_cont

Esse código faz apenas uma concatenação de string para obter o nome do novo input criado.

Fazendo isso nós criamos todas as propriedades que tem um input, mas ele ainda não será visível na tela. Por isso precisamos do div “add_input_div”, nós precisamos dizer para o JavaScript que queremos inserir o input criado dentro desse div.

O código abaixo faz isso:

1 2	var add_input_div = document.getElementById('add_input_div'); add_input_div.appendChild(input);

O método getElementById obtém um elemento HTML passando o seu id. Depois nós dizemos que queremos incluir o input criado dentro do div usando:

1	add_input_div.appendChild(input);

O método appendChild adiciona um novo nó filho dentro do div, no caso o input criado via JavaScript.

Tags: appendChild, button, createElement, criação dinâmica, div, document, form, function, getElementById, html, input, JavaScript, script, setAttribute

Blog Patrick Espake

Posts Tagged ‘function’

Ruby como verificar se uma variável existe similar ao isset do PHP

Populando um combobox através de um resultado em JSON usando o framework javascript Prototype

Usando Event.observe no Framework Javascript Prototype

JavaScript criando elementos HTML dinamicamente

Twitter

Categorias

Arquivos