Olá desenvolvedores, nestes últimos tutoriais temos nos concentrado em corrigir bugs do nosso sistema. Assim sendo, já corrigimos bugs na tela de cadastro de usuário, de telefone e principalmente implementamos melhorias em algumas das telas. E agora, ainda trabalhando com o cadastro de produtos iremos implementar ainda mais melhorias, porém, especificamente no campo de valor.

MASK MONEY | BIBLIOTECA JQUERY

A primeira melhoria de hoje é a implementação de uma máscara para valores monetários com jQuery. O jQuery é uma biblioteca de funções JavaScript que interage com o HTML, o objetivo é a simplificação dos scripts que serão interpretados pelo navegador. Clique aqui para importar a biblioteca JQuery e ainda poder visualizar os diversos exemplos de maskMoney.

Na página jquery-maskMoney copie a linha de código que irá importar a biblioteca jQuery e a cole dentro da tag head da página cadastroProduto.jsp.

O próximo passo é criar dentro da pasta resource uma pasta javascript. Depois de criada a pasta clique sobre ela com o botão direito do mouse >> new >> other >> pesquise por JavaScript e escolha >> JavaScript Source File. O File name do arquivo deverá ser “jquery.maskMoney.min.js”. Dentro deste arquivo JavaScript copie e cole todo o conteúdo deste link.

E para não depender somente de um servidor externo copie o endereço src da biblioteca jQuery que acabamos de importar e cole no navegador. E crie um novo arquivo JS dentro da pasta javascript, botão direito do mouse sobre a pasta >> new >> other >> JavaScript Source File. E atribua o nome “jquery.min.js” ao arquivo. Dentro deste arquivo JavaScript copie e cole todo o conteúdo deste link. Assim podemos excluir a linha de importação da biblioteca jQuery, e então informar o caminho dos dois arquivos. A primeira forma também está correta, mas do modo como implementamos agora deixamos de depender de um servidor externo.

MASK MONEY | FUNÇÃO JAVASCRIPT

O próximo passo antes da implementação da função JavaScript que irá chamar a maskMoney é adicionar os atributos da máscara no input HTML do campo valor. Note que limitamos a quantidade de caracteres a 12, mas podemos aumentar para 20.

A função JavaScript deve referenciar o campo correspondente pelo id, isto é, #valor.

Testando agora a função em nossa aplicação perceba que está funcionando corretamente. Assim, ajudamos o usuário a não cometer erros no momento de preencher os campos, e como programadores é o que precisamos fazer.

EM POUCAS PALAVRAS

Então concluímos a implementação de melhorias no cadastro de produtos, adicionando uma máscara para valores monetários e corrigindo bugs. Espero que tenha gostado e eu fico por aqui, nos vemos no próximo tutorial.