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.

HTML5 Estrutura Semântica

Nesse tutorial, iremos ver a “nova” estrutura semântica do HTML5. Irei colocar algumas referências no final desse post e passar um pouco mais sobre essas novidades (não tão novas), mas que já está sendo bastante utilizada.

Para começarmos a entender irei apresentar um breve detalhe de cada tópico que será de suma importância, para podermos entender e consequentemente termos uma visão do que será empregado nesse novo conceito.

Qual propósito da Estrutura?
Uma estrutura de informação, como documentos escritos em HTML, deve conter apenas marcações com devido significado.

O que é Semântica?
Semântica refere-se ao estudo do significado. Quando utilizamos cada marcação para o que ele realmente foi criada, estamos construindo um “Código Semântico”, é uma abordagem de criar “Marcação com Significado”.

Semântica com atributos

Figura 1: Semântica via atributos

Semântica HTML5

Figura 2: Semântica HTML5

Como podemos observar, a semântica que está representada na Figura 1: Semântica via atributos é feita por via de atributos, já com a semântica do HTML5 apresentado na Figura 2: Semântica HTML5 podemos notar uma grande diferença, onde o uso não é mais feito via por via de atributos já estando definido com o próprio elemento, exemplo é o bloco header. Sendo assim, podemos informar diretamente os elementos e não se preocuparmos mais em criar divs e definindo-os pelos atributos. Lembrando sempre como já citado nesse post: “Semântica refere-se ao estudo do significado.”.
Com a “nova” semântica você e sua equipe irão ter facilidade de lidar com seus blocos ou contextos ou como queriam ser chamados. Se você ainda não usa HTML5 nos seus projetos, comece agora mesmo! E comece pela semântica.

Alguns dos novos Elementos

Alguns dos novos elementos para identificação melhor dos conteúdos como <header> e <footer> para cabeçalho e rodapé, <section> para sessões de uma página ou <article> para identificar um artigo ou um post.

DOCTYPE html5
O Doctype já é bem mais simples e possível de decorar, do que do xhtml que estamos acostumados.
Ex: <!DOCTYPE html>

<header>
Para definir onde será o cabeçalho da página, na semântica do HTML5 podemos ter vários <header> no mesmo documento.

<footer>
Para definir onde será o rodapé da página ou da sessão.

<aside>
Informações relativas ao conteúdo principal, como um menu ou campo de busca.

<dialog>
Será usada para descrever dialogos, usando tags de termos de definição.

<figure>
Para inserção de imagens com legenda.

 <figure>  
  <img src="imagem.jpg" alt="descrição">  
  <legend>Legenda da Imagem</legend>  
 </figure>  

<audio>
Exibe qualquer elemento de streaming de áudio, com atributos para exibição de controles ou execução automática.

<video>
Exibe vídeos na página, com exibição de controles e de uma imagem enquanto o vídeo é carregado.

<nav>
Sessão de navegação, para links ‘lado a lado.’

 <nav>  
  <a href="#">Home</a>  
  <a href="#">Próxima</a>  
  <a href="#">Anterior</a>  
 </nav>  

<menu>
Serve para gerar um menu, com auxílio da marcação <li>

 <menu>  
   <li><input type="checkbox" />Vermelho</li>  
   <li><input type="checkbox" />Azul</li>  
 </menu>  

Bom pessoal é isso, espero que possa ter ajudado. Irei colocar mais post sobre essa linguagem extraordinária que nos tem surpreendido a cada dia. Abraços.

Referências:
A Semântica do HTML5
Semântica HTML5: comece agora a usá-la!
Vídeos: HTML5 Semantic Structure

Entendo yield com C#

A expressão yield é utilizado como um iterador de bloco fornecendo um valor para o objeto enumerador ou para sinalizar o final da iteração, também para realização de uma iteração sobre uma coleção personalizada. Para mais informações sobre o conteúdo acesse o link http://msdn.microsoft.com/en-us/library/vstudio/9k7k7cf0.aspx.

Nesse tutorial iremos elaborar uma implementação básica, onde o retorno será composta por uma coleção de valores do tipo int. Para implementação irei utilizar o VS2012, criando assim um novo projeto do tipo ConsoleApplication, somente para fins didáticos.

Veja a implementação abaixo:

using System;
using System.Collections.Generic;

namespace SampleReturnYield
{
    class Program
    {
        static void Main(string[] args)
        {
            var numeros = ObterNumeros();

            foreach (var n in numeros)
            {
                Console.WriteLine("Sequência: {0}", n);
            }
        }

        static IEnumerable<int> ObterNumeros()
        {
            for (int i = 0; i < 10; i++)
            {
                yield return i;
            }
        }
    }    
}

Como podemos observar a implementação é bem simples, foi criado um método chamado de ObterNumeros() e tem como retorno uma coleção de IEnumerable<int>. Como já citamos acima, o retorno para yield é utilizado para um bloco do tipo IEnumerable<T>(considere o T como qualquer tipo de objeto), você também tem a liberdade de fazer iterações em cima de objetos que venha a ser criado em seus projetos.
Apesar de não mais precisarmos de uma classe auxiliar para criar o enumerador, quando utilizamos a keyword yield, automaticamente o compilador gera a classe que implementa a Interface IEnumerator, implementando todos os métodos necessários para a iteração entre os elementos da coleção. A keyword yield que determina a criação do enumerador, ainda permite uma outra forma de passar os itens para o mesmo, mantendo o mesmo resultado final.

Bom pessoal espero ter ajudado, obrigado…

Removendo Acentos utilizando Métodos de extensão com C#

Métodos de extensão permitem que você “adicione” métodos para tipos existentes sem criar um novo tipo derivado, recompilar, ou modificar o tipo original. Os métodos de extensão são um tipo especial de método estático, mas eles são chamados como se fossem métodos de instância no tipo estendido. Para o código de cliente escrito em C # ou Visual Basic, não há diferença aparente entre chamar um método de extensão e os métodos que são realmente definidos em um tipo.
Mais informações acesse http://msdn.microsoft.com/en-us/library/vstudio/bb383977.aspx

Nesse tutorial iremos implementar um novo método de extensão, onde nesse método de extensão irá remover os acentos de uma determinada variável do tipo “string”. Como exemplo irei criar um novo projeto no VS2012 do tipo “Console Application”, logo abaixo segue a implementação.

Implementação e Codificação

public class Program
{
    static void Main(string[] args)
    {
        string palavra = "áéíóú";

        Console.WriteLine(palavra.RemoverAcentos());    
    }        
}

public static class StringExtensions
{
    public static string RemoverAcentos(this string valor)
    {
        byte[] bytes = Encoding.GetEncoding("Cyrillic").GetBytes(valor);

        return Encoding.ASCII.GetString(bytes);
    }
}

Como podemos observar a implementação é bem simples, criamos uma nova classe chamada StringExtensions e nela adicionamos o método de extensão chamado de RemoverAcentos(this string valor).
Com ajuda do .NET Framework, utilizaremos a classe abstract de Encoding chamando o método GetEnconding passando como parâmetro o valor Cyrillic do tipo string. Mais sobre a classe Encoding e o valor Cyrillic acesse o link http://msdn.microsoft.com/en-us/library/system.text.encoding.aspx

Conclusão

Com implementações de métodos extensão conseguimos ganhar produtividade e organização nas funções que viram a ser implementadas.

Referências:

Bom pessoal é isso e até a próxima…

ASP .NET – Web API

Introdução

ASP.NET Web API é um framework para a construção de aplicações Web desenvolvida sobre a plataforma .NET. Mais informações acessem o site http://www.asp.net/web-api.

Neste tutorial, iremos usar o ASP.NET Web API para criar uma API que retorna uma listagem de produtos. A página web (front-end) usa o jQuery para exibir os resultados.

1- Criar Projeto Web API

Primeiro iremos criar um novo projeto, utilizaremos como desenvolvimento o Visual Studio 2012:

Criando novo projeto

Observando a imagem acima, nota-se que é necessário à utilização do framework 4.5, visto que o ASP. NET Web API está disponível somente na versão 4.5 do .NET Framework.

Selecione o projeto Web API:

Selecionando projeto Web API

2- Adicionando classe e o repositório

Após ter criado o projeto, iremos criar nossa classe de “Produto” e o repositório. Sendo que o repositório ficará responsável de criar instância e retornar os valores.

Classe:

namespace SampleWebApi.Models
{
    public class Produto
    {
        public int Id { get; set; }

        public string Nome { get; set; }

        public decimal Preco { get; set; }
    }
}

Repositório:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SampleWebApi.Models
{
    public class ProdutosRepositorio
    {
        private static IList<Produto> _produtos;

        public ProdutosRepositorio()
        {
            if (_produtos == null)
            {
                _produtos = new List<Produto>();
                _produtos.Add(new Produto { Id = 1, Nome = "Camiseta", Preco = 19.90M });
                _produtos.Add(new Produto { Id = 2, Nome = "Sapato", Preco = 59.90M });
                _produtos.Add(new Produto { Id = 3, Nome = "Meia", Preco = 9.90M });
            }
        }

        public IList<Produto> ObterTodos()
        {
            return _produtos;
        }

        public Produto ObterPorId(int id)
        {
            return _produtos.FirstOrDefault(x => x.Id == id);
        }
    }
}

3- Adicionando o Controller

Criaremos o controller de Produtos, ficará responsável por atender as requisições HTTP e consequentemente retornando os valores que precisaremos. Note que ao criar o projeto existe por Default um controller de exemplo (ValuesController.cs), você pode deletá-lo se quiser.

Coloque o nome do controller de ProdutosController e selecione a opção API controller with empty read/write actions

Controller de Produtos

Abaixo segue a classe de ProdutosController que acabamos de criar e aproveitando também já fiz algumas codificações.

using System.Collections.Generic;
using System.Web.Http;
using SampleWebApi.Models;

namespace SampleWebApi.Controllers
{
    public class ProdutosController : ApiController
    {
        ProdutosRepositorio _repositorio;

        public ProdutosController()
        {
            _repositorio = new ProdutosRepositorio();            
        }

        public IEnumerable<Produto> Get()
        {
            return _repositorio.ObterTodos();            
        }

        public Produto Get(int id)
        {
            return _repositorio.ObterPorId(id);            
        }
    }
}

4- Chamando a API com JavaScript utilizando jQuery

Para apresentação dos valores iremos utilizar a biblioteca do jQuery. Na View (Index.cshtml) que se encontra dentro da pasta Home iremos fazer algumas modificações para apresentação dos valores. A figura abaixo está apresentando como irá ficar a implementação.

1:  <div>    
2:    <h1>Exemplo: ASP.NET Web API</h1>  
3:    <ul>  
4:      <li>  
5:        <h3>Produtos</h3>  
6:        <ol id="produtos"></ol>  
7:      </li>      
8:    </ul>    
9:    <p>  
10:      Id: <input type="text" placeholder="Busca produto" name="id" />   
11:        <input type="button" name="busca" value="Buscar" />  
12:    </p>  
13:    <p>  
14:      <pre class="retorno"></pre>    
15:    </p>    
16:  </div>  

Código JavaScript com auxílio do jQuery ajuda na apresentação dos valores, tanto para a listagem dos produtos quando para a busca de um único produto. Abaixo segue a codificação de como foi implementado:

Código JavaScript – Listagem e busca

1:   <script type="text/javascript">  
2:      var App = {  
3:        Init: function () {  
4:          try {  
5:            this.ObterProdutos();  
6:            this.ConfigBusca();  
7:          } catch (e) {  
8:            console.log("Contains error scripts");  
9:          }  
10:        },  
11:        ObterProdutos: function () {  
12:          // Send an AJAX request          
13:          $.get("api/produtos/",  
14:          function (data) {  
15:            // On success, 'data' contains a list of products.  
16:            $.each(data, function (key, val) {  
17:              // Add a list item for the product.  
18:              var html = JSON.stringify(val, null, 2);  
19:              $('<li>', { text: html }).appendTo($('#produtos'));  
20:            });            
21:          });  
22:        },  
23:        ConfigBusca: function () {          
24:          $('input[name="busca"]').click(function () {  
25:            // Select Id for search  
26:            var $id = $('input[name="id"]').val();            
27:            // On success, 'data' contains the product  
28:            $.get('/api/produtos', { id: $id }, function (data) {  
29:              var html = JSON.stringify(data, null, 2);  
30:              $('.retorno').html(html);  
31:            });  
32:          });  
33:        }  
34:      };  
35:      jQuery(function () {  
36:        App.Init();        
37:      });  
38:    </script>  

5- Apresentação dos valores

Após ter feito todo esse procedimento executaremos o projeto. A página inicial deverá estar apresentado os valores conforme a figura abaixo:

Apresentação dos valores

Observe que os valores apresentados foram feitas através da chamada $.get(“api/produtos/”…, sendo assim, a chamada irá resultar em uma lista de produtos. Com a ajuda do JSON.stringify conseguimos apresentar o objeto em formato JSON. Vale ressaltar que o retorno dos valores quando são executados via HTTP podem ter o retorno em vários formatos os mais utilizados são JSON e XML, isso irá depender da necessidade de cada aplicação que irá fazer o uso.

Para a busca de um único produto, temos que informar o Id no campo de busca e fazer o envio. A figura abaixo está apresentando o retorno da busca:

Retorno da busca

Conclusão

Como podemos observar requisições via HTTP não é apenas para servir páginas HTML é também uma poderosa plataforma para a construção de API’s expondo serviços e dados, ficando mais simples e flexível. Praticamente qualquer plataforma que atenda protocolos HTTP poderão fazer o uso dessa API. Podendo atingir uma ampla gama de clientes, incluindo navegadores, dispositivos móveis e aplicativos de desktop tradicionais.

Referência: Your First ASP.NET Web API (C#)

Bom pessoal é isso, obrigado…