Básico de JavaScript com jQuery

Para um desenvolvedor web é essencial que se tenha uma noção básica sobre a linguagem JavaScript. O JavaScript é uma linguagem de script baseada em ECMAScript padronizada pela Ecma international sendo atualmente a principal linguagem para programação client-side em navegadores web. O jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client-side que interagem com o HTML, sendo também uma biblioteca essencial para seletores dos elementos.
Nesse tutorial iremos fazer um simples exemplo da utilização da linguagem JavaScript e sua biblioteca de extensão o jQuery.

1- Vamos ao exemplo:
Exemplo JavaScript com jQuery
Como podemos observar a imagem acima o exemplo é bem simples. O usuário escolhe o tipo de operação(somar, dividir, multiplicar ou subtrair), insere dois valores(valor1 e valor2) e faz o cálculo dos dois valores com o tipo de operação que foi escolhido. Simples né!?

2- Implementação HTML

1:  <h2>Exemplo - JavaScript com jQuery</h2>  
2:  <table border="1" cellpadding="10" cellspacing="0">    
3:    <tr>  
4:      <td>Operação: </td>      
5:      <td>        
6:        <input type="radio" name="operacao" value="somar" checked="checked"/> Somar   
7:        <input type="radio" name="operacao" value="dividir" /> Dividir   
8:        <input type="radio" name="operacao" value="multiplicar" /> Multiplicar   
9:        <input type="radio" name="operacao" value="subtrair" /> Subtrair   
10:      </td>      
11:    </tr>  
12:    <tr>  
13:      <td>Valor 1:</td>  
14:      <td>        
15:        <input type="text" name="valor1" value="0" />        
16:      </td>      
17:    </tr>  
18:    <tr>  
19:      <td>Valor 2:</td>  
20:      <td>        
21:        <input type="text" name="valor2" value="0" />        
22:        <input type="button" name="calcular" value="Calcular" />  
23:      </td>      
24:    </tr>    
25:    <tr>  
26:      <td>Resultado:</td>  
27:      <td>  
28:        <div class="resultado"></div>  
29:      </td>  
30:    </tr>    
31:  </table>  

3- Implementação Javascript e jQuery

1:  <script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>    
2:  <script type="text/javascript">  
3:     (function () {  
4:        // utilizaremos jQuery para facilitar nos seletores dos elementos  
5:        jQuery(function () {  
6:           $('input[name="calcular"]').click(function () {            
7:    
8:              // convertemos o valor1, valor2 para float  
9:              var n1 = parseFloat($('input[name="valor1"]').val()),       
10:                 n2 = parseFloat($('input[name="valor2"]').val());  
11:                   
12:              // obtemos o tipo da operação selecionado pelo usuário             
13:              var operacao = $('input[name="operacao"]:checked').val();  
14:    
15:              // chamamos o método calc, passando os valores de n1, n2 e o tipo de operação  
16:              // eval() é utilizado para que o valor do tipo 'string' seja reconhecido como um tipo de comando  
17:              var resultado = calc(n1, n2, eval(operacao));  
18:    
19:              // escrevemos o resultado na <div class="resultado"> com algumas estilizações  
20:              $('.resultado')  
21:                 .css({ 'font-weight': 'bold', 'font-size': '18pt' })  
22:                 .html(resultado);  
23:           });  
24:        });  
25:          
26:        function calc(n1, n2, method) {  
27:           return method(n1, n2);  
28:        }  
29:    
30:        function somar(n1, n2) {  
31:           return n1 + n2;  
32:        }  
33:    
34:        function subtrair(n1, n2) {  
35:           return n1 - n2;  
36:        }  
37:    
38:        function multiplicar(n1, n2) {  
39:           return n1 * n2;  
40:        }  
41:    
42:        function dividir(n1, n2) {  
43:           if (n2 === 0) {  
44:              return "Divisão não pode ser por Zero.";  
45:           }  
46:           return n1 / n2;  
47:        }   
48:     })();  
49:  </script>  

A implementação é bem simples:
Linha 1: Referência para o plugin da biblioteca jQuery.
Linha 5: Faz o uso da biblioteca do jQuery.
Linha 6: Com a ajuda do jQuery implementamos o evento de clique para o botão calcular.
Linha 9 e 10: Obtemos os valores 1 e 2 e convertemos para float.
Linha 13: Obtemos o tipo da operação selecionado pelo usuário.
Linha 17: Chamamos o método calc, passando os valores de n1, n2 e o tipo de operação e também eval() é utilizado para o valor do tipo 'string'(no caso a operação selecionada) seja executada como um tipo de comando, isso é nativo da linguagem.
Linha 20: Imprime o resultado, com algumas estilizações.
Linha 26 até 47: Implementação das operações de Somar, Dividir, Multiplicar, Subtrair.

Como podemos observar na codificação utilizamos o próprio valor do <input name="operacao"> para passar como parâmetro na function de calc(n1, n2, eval(operacao)){ ... } para retornar o resultado. É isso mesmo, passamos como parâmetro o tipo da função que será executada, com isso, evitamos de fazer condições (if) para conseguirmos o retorno. A definição para à função eval() é que conseguimos executar em tempo de execução comandos da linguagem que estejam escritos em uma string.

Bom pessoal, espero que com esse exemplo para quem está iniciando possa ter uma noção básica dos imensos recursos que essa linguagem (JavaScript) nos proporciona e claro também com a ajuda do jQuery.

Anúncios

Uma resposta em “Básico de JavaScript com jQuery

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s