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.

Anúncios

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.