Um pouco de objetos e programação funcional com Javascript

janeiro 4, 2011 às 12:08 am | Publicado em JavaScript | 1 Comentário

Assim como em Java, quase tudo em javascript são objetos.  Portanto, seria interessante que fosse possível criar novos tipos de objetos, assim como fazemos em java, ruby, c#, etc.

O objetivo deste breve post é demonstrar um pouco de como criar e utilizar seus próprios objetos em javascript.

A forma mais simples de declarar um objeto em javascript é utilizando a forma literal

O código abaixo mostra exemplos de como utilizar este objeto.

Na leitura de uma propriedade, caso ela não exista, o retorno será undefined.

Objetos podem ser compostos de outros objetos, ex:

Objetos podem ter métodos.

Diferente da linguagem Java, é obrigatório o uso do operador this para acessar a variável valor. O uso do this em javascript vale mais um artigo, portanto, não entrarei em detalhes aqui.

A notação literal se parece e muito com o Json. O Json é uma forma simples e enxuta de representarmos um recurso. Por este motivo, vem ganhando muito espaço quando o assunto é integração de sistemas. Mais um assunto para outro post, rs.

Function Objects

Funções são objetos em javascript. Isto é responsável pela grande mágica que envolve a linguagem. Por exemplo, podemos criar uma função e atribuí-la a uma variável.

É possível criar um função sem nome e neste caso ela é considerada uma função anônima. Por exemplo, como uma função é um objeto, podemos ter um função que espera como parâmetro outra função. Confuso?

O código acima pode ser considerado um pouco de programação funcional com javascript.

Conclusão

Vejo muita gente dizendo que javascript é uma linguagem ruim e difícil de programar. Concordo que a linguagem peca em alguns detalhes, porém, quando utilizada de forma correta, nos possibilita fazer coisas sensacionais.

Para tirar o máximo da linguagem é preciso aprender a encapsular as lógicas em objetos, utilizar programação funcional, entender closures, etc… Tentarei explicar estes itens com mais detalhes nos próximos posts.

Linguagem fortemente tipada (Strong typing)

fevereiro 28, 2008 às 2:19 am | Publicado em Desenvolvimento, Java, JavaScript, ruby | 28 Comentários

Em uma conversa com uma professora da faculdade, surgiu uma pequena discussão.
O que é uma linguagem fortemente tipada?

Segundo a professora, linguagem fortemente tipada é aquela onde você precisa declarar o tipo da variável, por exemplo:

// código java
private String nome;

Na minha opinião, ela está enganada.
A principal característica de uma linguagem fortemente tipada (Strong typing), é que cada variável do programa representa um objeto de um tipo bem definido.

// codigo java
int x = 12.1; // erro, tipos incompatíveis
int j = (int) 12.1 // funciona, mas você perde as casas decimais 🙂

Java é uma linguagem formente tipada. Não é possível atribuir um double para um int.
Para executar tal operação, você terá que forçar a tranformação para o tipo definido pela variável. Chamamos isso de cast. Java também é uma linguagem com tipagem estática, ou seja, você precisa declarar qual o tipo de objeto a variável irá referenciar.

Vejamos um exemplo em Ruby.

x = ‘Marcelo’
y = 12
puts x + y

A principal diferença que podemos notar é a ausência do tipo da variável. Mas isso não torna ruby uma linguagem fracamente tipada. O que acontecerá se você tentar somar (+) um Fixnum (int) com uma String? Um belo erro no console:
can’t convert Fixnum into String (TypeError)

Ou seja, ruby também é fortemente tipada, porém de forma dinâmica. O interpretador “descobre” em tempo de execução o tipo da variável. Devido a essa característica, em ruby não existe cast. Caso os tipos envolvidos na operação sejam incompatíveis, você terá um belo erro pra se preocupar.

Veja um exemplo em javascript:

var x = “Marcelo”;
var y = 12;
alert(x + y);

JavaScript é fracamente tipada (weak typing), ou seja, este código será executado sem problemas. Você não precisa informar o tipo da variável e o intepretador do javascript sabe realizar algumas operações sobre os objetos dependendo do contexto.

Espero que a professora leia este POST. 🙂

Internacionalização de Mensagens no JavaScript

novembro 5, 2007 às 8:14 am | Publicado em Desenvolvimento, Java, JavaScript | 11 Comentários

O java fornece um excelente suporte para internacionalização de aplicações. Para conhecer mais sobre internacionalização e como implementá-la em Java, indico este excelente artigo da Caelum.

Porém, em aplicações web, o uso de javascript é inevitável, seja para deixar a aplicação mais dinâmica ou para validar o preenchimento de um formulário. Portanto é necessário que as mensagens mostradas pelo javascript também estejam internacionalizadas. Neste artigo vamos demostrar uma forma bem simples e funcional de internacionalizar o javascript.

Veja o exemplo de uma função que faz a validação de um formulário:

valida1.jpg

Este exemplo tem um grande problema: a mensagem de erro está amarrada no código de validação. O legal seria que estas mensagens estivessem internacionalizadas, ou seja, fossem recuperadas de algum arquivo de mensagens, e este é nosso objetivo. 🙂

Depois de analisarmos o problema, vamos para a solução, que basicamente pode ser divida em 3 etapas:

  • ao carregar a pagina, uma requisição AJAX é feita para um servlet.
  • o serlvet recupera as mensagens de acordo com o locale do usuário.
  • as mensagens são retornadas para o cliente e armazenadas em memória pelo javascript.

Veja a implementação do serlvet. Basicamente ele recupera as mensagens de acordo com o locale do usuário, as transformam em um JSON que é retornado como resposta da requisição. (clique na imagem para ampliar).

servlet.jpg

Este servlet foi mapeado para a url “i18n”.

Caso tenha problemas com a acentuação das mensagens, basta alterar o content-type do response: pRes.setContentType(“text/html; charset=ISO-8859-1”);

Agora é preciso implementar o javascript que irá fazer a requisição AJAX para o servlet e tratar sua resposta.

js1.jpg

js2.jpg

Quando este script for carregado pelo browser, a requisição ajax será feita utilizando a função $.get(…) da biblioteca jQuery.

Quando a requisição retornar, o método initialize do bundle é invocado, recebendo como parâmetro o JSON retornado pelo servlet. Seu papel é simples, interpretar o JSON e inserir as mensagens em um array interno do objeto ResouceBundle.

Para recuperar uma mensagem do bundle, basta chamar o método get(key) .

Simples não???

Agora com a solução implementada, vamos modificar o script de validação para que ele pegue a mensagem de erro do bundle.

valida2.jpg

Podemos melhorar a nossa pequena API de internacionalização adicionando métodos para trabalhar com mensagens que esperam parâmetros, por exemplo:

invalidProtocol = O número de procolo {0} é inválido.

Veja o método get() melhorado, agora é possível passar os valores para substituir os parâmetros da mensagem.

getmelhorado.jpg

Após esta modificação, vamos ver como fica a função que valida o formulário:

valida3.jpg

Esta foi uma solução para implementar internacionalização de mensagens no javascript. E você, como é a sua solução???

Slides da Apresentação sobre Desenvolvimento WEB

setembro 5, 2007 às 11:33 am | Publicado em apresentações, JavaScript | 1 Comentário

Dia 31 de agosto eu fiz uma apresentação sobre desenvolvimento WEB (client-side) em Mococa. Foi bem interessante porque grande parte do público eram alunos de webDesigner da escola técnica Eletrô.

Foram abordados os seguintes tópicos:

  • HTML
  • Css
  • JavaScript
  • AJAX
  • jQuery

Você pode baixar o slide da apresentação aqui.

Na apresentação desenvolvemos vários exemplos. Você pode baixar alguns deles aqui.

Gostaria de agradecer o pessoal que compareceu na apresentação.

Espero ter ajudado no crescimento profissional de vocês.

Submetendo 02 forms… Parte 2

fevereiro 5, 2007 às 10:01 pm | Publicado em Java, JavaScript | 1 Comentário

Na primeira parte do post vimos como criar a queryString com os dados dos dois formulários. Agora iremos submeter esta query para o servidor através de uma requisição POST com AJAX.

Vamos adicionar agora o código AJAX que irá submeter o formulário.

—————-

function submeterForm(){
var query = recuperarQuery();

var xmlHttp = getXMLRequest();
xmlHttp.open(‘POST’, ‘ServletForm’, true);
xmlHttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlHttp.setRequestHeader(“Content-length”, query.length);

xmlHttp.onreadystatechange = function(){
//função para tratar a resposta do servidor
}

xmlHttp.send(query);
}

function recuperarQuery(){
var query = ”;
query += ‘input1=’ + document.form1.input1.value;
query += ‘&input2=’ + document.form2.input2.value;
return query;
}

————————–

A função recuperarQuery() não sofreu alterações. A grande mudança está na função submeterForm().

Primeiro recuperamos a queryString com os dados que queremos submeter. Em seguida recuperamos um objeto XmlHttpRequest, responsável por fazer a requisição assíncrona (AJAX). Definimos que o tipo de requisição será POST o que torna necessário alterarmos dois cabeçalhos da requisição, o Content-type e o Content-length. O primeiro informa que o conteúdo da requisição são dados de um formulário e o segundo o tamanho do conteúdo. Informamos também a url ServletForm, que é um servlet configurado no servidor.

A propriedade onreadystatechange armazena a função que “atenderá” aos eventos da requisição ajax. Neste exemplo simplesmente não implementamos nenhuma lógica de retorno porque não é nosso intuito.

Por fim, enviamos os dados para o servidor chamando ‘send(parametros)’.

Simples não???

No servidor é só recuperar os dados da requisição e executar sua lógica de negócio.

—————–

public class ServletForm extends HttpServlet {

@Override
protected void doPost(HttpServletRequest pReq, HttpServletResponse pRes) throws ServletException, IOException {

String parametroForm1 = pReq.getParameter(“input1”);
String parametroForm2 = pReq.getParameter(“input2”);

getServletContext().log(“Parâmetro do form 1: ” + parametroForm1);
getServletContext().log(“Parâmetro do form 2: ” + parametroForm2);

// mais lógica
}
}

——————-

O código acima é simples, recupera os dois parâmetros e imprime no log do servidor.

Bem pessoal… espero que tenham gostado do primeiro tutorial. Seu comentário será muito bem vindo e sugestões de melhoras mais ainda. Gostaria também de ouvir opiniões para próximos artigos e tutoriais.

Abraços…

Marcelo Madeira

Próxima Página »

Crie um website ou blog gratuito no WordPress.com.
Entries e comentários feeds.