Muito se falou (e se fala) por aí sobre Ajax. Há uns anos atrás isso era a sensação do momento. Programadores que trabalhavam com Ajax eram mais valorizados não pelas vantagens no uso do Ajax, mas pelo fato de ser “mais bonito”.
Depois de algum tempo começaram a aparecer algumas bibliotecas em Javascript que implementam Ajax de uma forma simples.
O primeiro nome que ouvi foi o do Prototype, mas só fui realmente trabalhar com uma biblioteca dessas algum tempo depois quando entrei pra Linux Solutions.
Meu primeiro encontro foi com o jQuery e tanto ele quanto eu ainda estavamos engatinhando no mundo do desenvolvimento. Nessa época eu era basicamente o desenvolvedor frontend da empresa. Eu só gostava de CSS, tinha medo do Javascript e estava cansado de escrever Html, e queria programar em Php.
Precisávamos trabalhar com um sistema sem recarregamento de páginas pelo fato de o mesmo fazer muitas requisições ao banco de dados em várias partes da interface, então seria bastante chato fazer no braço tendo em vista de todos os tutoriais da época só mostravam como fazer, mas não tinham uma descrição decente de como funcionava. Infelizmente, pra muitas empresas esse é o mercado hoje. Os gerentes só dizem “Faça! Deixe pra aprender depois!” e hoje temos vários profissionais que se você tirar o atalho do Internet Explorer do Desktop ele vai parar de trabalhar dizendo que a internet caiu. Assuntos polêmicos à parte, mas isso é bastante chato pois quem sabe como algo funciona pode questionar e adaptar a ferramenta ao trabalho.

Como funciona uma requisição Ajax?

O nome “Ajax” já não rola mais hoje em dia. Continuamos chamando de Ajax, mas pelo significado da sigla (Asynchronous Javascript and XML ou Javascript e Xml Assíncronos), não tem mais sentido. De qualquer modo, uma requisição Ajax funciona do seguinte modo:

Sua página inteira já foi carregada e, ao clicar num link ou fazer qualquer requisição, um usuário vê a página toda carregar novamente para a home do site sumir e aparecer um formulário de contato onde antes havia o texto inicial do site. Utilizando Ajax, você pode mandar o navegador carregar apenas o formulário de contato no lugar do texto inicial.
-Putz! Mas eu vou ter mais trabalho pra fazer isso!

Teoricamente sim, mas se a página tem uma ou mais partes do conteúdo que se repetem você pode trabalhar com os includes ou imports da sua linguagem de programação preferida e no fim ter menos trabalho. Em compensação à codificação extra, ao invés de o usuário carregar novamente a página inteira apenas a parte relevante. Com isso você ganha velocidade de carregamento na sua página e diminuição de carga na sua banda.
Web sites com Ajax se tornam mais fluidos e tem a sensação suave de carregamento de páginas. Imagine você utilizando seu sistema operacional e a cada janela que abrir, a tela ficar preta e só aparecer tudo de volta quando a janela se abrir? Seria medonho.
Mais informações:
http://www.w3schools.com/ajax/default.asp
http://en.wikipedia.org/wiki/Ajax_(programming)

Tentando voltar com o jejum de bastante tempo aqui no blog. Tentarei potar mais vezes, mas quanto mais o tempo passa, menos tempo me resta rs.

Hoje estava com um problema para fazer um relatório de um ERP que estou fazendo para a loja de material elétrico do meu pai. O problema é simples. Será feito um relatório de lançamentos financeiros com data inicial e data final, porém a data inicial não poderia ser maior que a data final. Óbvio.

O formulário é basicamente o seguinte:

<label for="data_inicial">Data Inicial</label>
	<input type="text" name="data_inicial" value="" id="data_inicial" readonly="readonly" />
<label for="data_final">Data Final</label>
	<input type="text" name="data_final" value="" id="data_final" readonly="readonly" />
<label>Tipo</label>
	<input type="radio" name="tipo" value="todos" />Todos
	<input type="radio" name="tipo" value="credito" />Crédito
	<input type="radio" name="tipo" value="debito" />Débito
<label for="descricao">Descrição</label>
	<input type="text" name="descricao" value="" id="descricao" />
<button name="" type="button" id="consultar_btn" >Consultar</button>

O necessário agora é pegar as datas e fazer a verificação. O Javascript tem um objeto chamado “Date” que nos permite fazer operações com datas. Ele é simples de se trabalhar, mas é preciso escrever um pouco de código.
O meu código abaixo é utilizando o JQuery, mas você pode fazer com Javascript puro se quiser.

$('#consultar_btn').click(function(){
	var dia_inicial = $('#data_inicial').val().slice(0, 2);
	var mes_inicial = $('#data_inicial').val().slice(3, 5);
	var ano_inicial = $('#data_inicial').val().slice(6, 10);
	var data_inicial = new Date(ano_inicial,mes_inicial,dia_inicial);
	var dia_final = $('#data_final').val().slice(0, 2);
	var mes_final = $('#data_final').val().slice(3, 5);
	var ano_final = $('#data_final').val().slice(6, 10);
	var data_final = new Date(ano_final,mes_final,dia_final);
	if(data_inicial > data_final){
		alert('A data inicial não pode ser superior à data final.');
	}
	else{
		//Faça aqui o que quiser =)
	}
});

O que fiz foi basicamente pegar todas as partes da data inicial e data final separados (dia, mês e ano).  Após isso, eu criei dois objetos do tipo Date. Como construtor, o objeto Date pode receber os parâmetros ano, mes e dia nessa mesma ordem. À partir desse momento eu pude fazer a comparação entre a data inicial e a data final. Simples assim.
Explicando o método slice:
O método “slice” literalmente corta uma string. Ele recebe dois parâmetros. O primeiro é onde você vai começar a cortar a string (sempre iniciando com zero) e o segundo é até onde vai cortar. O método vai retornar o pedaço da string que foi cortado. Faça alguns testes e se divirta =)

É isso aí pessoal. Até a próxima.

Fala galera, estou vendendo alguns livros. Não gosto muito da ideia, mas infelizmente o espaço ocupado por eles é bem grande e ainda existem outros pra colocar na lista.
A lista pode ser encontrada em www.mayckxavier.com/vendese , mas vou colocar aqui também pra adiantar. O frete fica por conta do comprador, mas se você morar em Paracambi ou estudar no IST Paracambi, posso entregar em mãos.

Bom… É isso. Caso haja interesse, basta entrar em contato.
Inté.

Olá pessoal. Essa é a última aula do nosso mini curso de Algoritmos com Javascript. Em adição a isso, estou colocando o pdf de todas as aulas para download para quem tem preguiça de ler direto do site ou, como eu, prefere ter tudo impresso pra ler em qualquer lugar.

O link para download é o seguinte: www.mayckxavier.com/public/Algoritmos_javascript.pdf

Estruturas de Controle

As estruturas de controles servem para, como o nome diz, controlar a execução do programa. Imagine que no sistema de uma loja virtual apenas maiores de 18 anos de idade podem realizar compras. Para isso é necessário checar se a idade do comprador é maior ou igual a 18 anos. Utilizaremos a estrutura de controle IF (Se) que serve para executar determinado código caso uma expressão retorne true.
Exemplo:

Nesse exemplo será testado se a idade do usuário é igual ou maior que 18 anos. Se o teste entre parêntesis retornar true, será executado o código entre as chaves. Esse exemplo é bastante limitado levando em consideração que nada acontecerá se o usuário tiver idade menor de 18 anos. Sempre que houver a necessidade de que um bloco de código seja executado se a expressão retornar false, basta adicionar a o bloco do ELSE (SENÃO) após os parêntesis do IF.

Se houver a necessidade de fazer mais de um teste, basta utilizar o ELSE IF.

Você pode perceber que utilizamos o operador lógico && para dizer ao ELSE IF que o valor do produto deve ser maior que 10 e menor ou igual a 20. Você pode utilizar quantos ELSE IF forem necessários.

Switch

O Switch é utilizado quando você precisa de comparações simples como, por exemplo, comparar se a letra digitada é uma vogal ou consoante.

Estruturas de Repetição

As estruturas de Repetição são utilizadas quando você precisa repetir um código várias vezes enquanto uma determinada condição não for satisfeita. Em Javascript existem 3 estruturas de repetição.

While

O while irá executar um bloco de código até que sua condição seja satisfeita. Veja o exemplo:

Acima temos um problema. O valor de num nunca será igual ou maior que 20, então o programa entrará no que chamamos de loop infinito. Ele entrará nesse bloco de código e executará infinitamente, geralmente travando a o seu navegador. Para que isso não aconteça, é necessário que você faça com que a variável num receba um valor que não satisfaça a condição do while. Um exemplo simples seria incrementar a variável a cada loop.

Pronto. Agora o while executará o código um número limitado de vezes e sairá logo assim que a condição não mais o satisfizer.

For

O for funciona do mesmo modo que o while, mas utilizando ele fica mais fácil não esquecer declarar uma variável ou incrementá-la. O For apresenta uma sintaxe mais definida.

Podemos ver que o for recebe 3 parâmetros. O primeiro é a variável com o seu valor inicial. O segundo é a condição que deve ser satisfeita e no terceiro parâmetro você pode incrementar a variável como eu fiz ou atualizar o valor dela.

Do/While

O Do/While é mais parecido com o while, porém ao invés de ele fazer o teste antes da execução do bloco, seu teste é feito apenas depois.

A grande diferença entre o While e o Do/While é que no do/while o código no bloco será executado pelo menos uma vez, mesmo se a condição não for satisfeita.

É isso aí pessoALL. Algumas pessoas pareceram interessadas quando eu disse que queria colocar algumas dicas de jQuery. Estou pensando também em falar um pouco mais sobre Code Igniter. O que acham?

Abraços

Continuando com nosso mini curso de algoritmos com Javascript, veremos hoje Incremento e Decremento, e funcções.

Incremento e Decremento

Para incrementar em 1 uma variável, basta utilizar duas vezes o sinal “+” após a variável. Para decrementar em um, faça o mesmo, porém utilizando o sinal de “-”.
Exemplo:

Comentários

Comentários são utilizados quando você precisa descrever parte de um código ou apenas para sinalizar algo importante como um lembrete. Em Javascript existem comentários de linha e de bloco. É importante sempre fazer comentários quando for necessário.

O interpretador do Javascript irá ignorar tudo o que estiver comentado. No comentário de linha, tudo o que estiver após as barras será ignorado. Já no comentário de bloco, tudo o que estiver entre o “/*” e o “*/” será ignorado.

Funções

Algumas vezes será necessário que você execute uma mesma rotina várias vezes. Para que você não precise reescrever o mesmo código várias vezes, existem as funções. Uma função permite que você passe parâmetros para ela. A função irá realizar o bloco de código definido dentro das chaves com ou sem os parâmetros passados.
Exemplo:

No exemplo anterior nós temos a função “soma” que recebe dois números. Ela soma esses dois números e retorna o resultado da soma.
O comando return utilizado no final da função retorna a soma das duas variáveis que pode ser utilizado do lado de fora da função como mostra o exemplo baixo.

É isso aí pessoal. Na próxima aula veremos Estruturas de Controle e Estruturas de Repetição, que são fundamentais para o desenvolvimento de uma aplicação.
Abraços

Continuando com o mini curso, hoje veremos como pegar dados dos usuários e operadores relacionais.

Pegando dados externos

Como já falamos anteriormente, para um programa funcionar ele deve ter uma entrada de dados para que eles sejam processados e serem enviados para uma saída. Utilizando o comando “window.prompt” do seguinte modo:

Ao executar o código acima, serão exibidas duas janelas no navegador, uma para cada comando “window.prompt” e o que for digitado será inserido na variável correspondente.

A opção “Impedir que esta página crie caixas de diálogo adicionais” foi adicionada pelo próprio navegador.
Agora que podemos pegar dados dos usuários, podemos utilizar esses dados para que nossos programas comecem a ter vida.

Exercício:
1 – Utilize as caixas de prompt (window.prompt) e faça um pequeno programa que peça alguns dados para o usuário e os imprima em tela, um por linha.

Operadores

Operador de Atribuição

Como já vimos anteriormente, para atribuir um valor a uma variável, é utilizado o sinal de “=”. Você pode atribuir valores numéricos, Strings e booleanos às suas variáveis.

Operadores Aritméticos

Operadores Aritméticos servem para calcular números e valores em variáveis. Em Javascript nós temos os seguintes Operadores Aritméticos:

Utilizaremos o sinal de % quando precisarmos ter o resto de uma divisão, diferente de / que retorna o resultado de um número dividido pelo outro.

Exemplo:

Operadores Relacionais

Os operadores relacionais são utilizados quando você precisa descobrir a relação entre um valor e outro. Os Operadores Relacionais são:

Os Operadores Relacionais retornam sempre um valor booleano, ou seja, true (verdadeiro) ou false (false). Podemos testar os operadores do seguinte modo:

Operadores Lógicos

Os operadores lógicos servem para se utilizar várias operações relacionais em uma mesma linha.

Os Operadores Lógicos “&&” e “||” seguem a lógica da tabela verdade, descrita abaixo:

A	B	A && B
Verdadeiro	Verdadeiro	Verdadeiro
Verdadeiro	Falso	Falso
Falso	Verdadeiro	Falso
Falso	Falso	Falso

A	B	A || B
Verdadeiro	Verdadeiro	Verdadeiro
Verdadeiro	Falso	Verdadeiro
Falso	Verdadeiro	Verdadeiro
Falso	Falso	Falso

Obrigado pelos comentários pessoal e até a próxima.

Nessa nossa segunda aula veremos como iniciar na programação com Javascript.

Programando

A partir de agora, utilizaremos uma linguagem de programação. Assim podemos ver melhor os resultados e realmente programar. Utilizaremos a linguagem Javascript por ser fácil e não ser necessário a instalação de nenhum programa na maioria dos sistemas operacionais atuais no mercado, entretanto é recomendado que você utilize um editor de textos que faça a coloração do seu código para que fique mais fácil o aprendizado. Nos exemplos da apostila será utilizado o GVim (http://www.vim.org/).

Antes de começarmos a escrever é necessário saber o que é o Javascript. Javascript foi inicialmente criada pela Netscape em 1995 para se desenvolver websites dinâmicos tendo em vista que no inicio da internet todos os sites eram estáticos, ou seja, não haviam mudanças em seu comportamento inicial. A linguagem tem total integração com o HTML por meio do DOM (Document Object Model), assim a mesma pode manipular qualquer elemento em uma página. Devido ao seu sucesso, o Javascript hoje é suportado pela maioria dos navegadores que seguem os padrões W3C () e outros no mercado.

O que é necessário para programar em Javascript?

Apenas um navegador, como o Mozilla Firefox, Internet Explorer, Google Chrome e Safari, e um editor de texto, como o Bloco de Notas (Microsoft Windows), GEdit (GNU/Linux com a interface Gnome) ou Vi (Utilizado em grande parte das distribuições GNU/Linux), pode ser utilizado para programar em Javascript. Recomendo que utilize um editor que tenha highlight (utiliza cores para mostrar diferentes elementos no programa), como o Notepad++ (http://notepad-plus.sourceforge.net/), para que a programação seja mais fácil e encontrar erros mais rapidamente. É necessário também salvar o arquivo com a extensão “.htm” ou “.html” para que o navegador execute o que está escrito no arquivo.

Variáveis

Variáveis são espaços em memória onde podemos alocar algum valor temporariamente. Como o nome diz, o valor de uma variável pode ser alterado.

Acabamos de inicializar uma variável, mas a mesma ainda não tem valor algum. A seguir, um exemplo de uma variável recebendo valores.

O código acima cria a variável “num”, atribui o número 10 como valor para ela e por fim imprime o valor da variável em tela com o comando “document.write”. Sempre que precisar imprimir um texto, um número ou o valor de uma variável utilize-o.

Após esses pequenos exemplos já podemos definir algumas regras para trabalhar com o Javascript com linguagem.

1 – Sempre que for definir criar uma variável, escreva “var” antes do nome da mesma. Isso será bastante útil e seu benefício será mostrado quando falarmos sobre escopo de variável mais à frente;

2 – Toda linha deve terminar com o sinal de “;” (Ponto e vírgula). Assim o interpretador saberá que aquela linha de código acabou.

3 – Um código em Javascript deve ser colocado entre as TAGS “<script>” e” </script>”. Isso é apenas para realizar nossos algoritmos. Caso você trabalhe com Html seguindo os padrões W3C, será necessário mais informações dentro da Tag “<script>”, mas esse não é o nosso foco no momento.

Tipos de Variáreis

O Javascript tem três tipos de variáveis: Numérico, Booleano e Cadeias de Caracteres.
As variáveis numéricas contem números, sejam eles inteiros ou de ponto flutuante e podem ser utilizadas para fazer cálculos de qualquer tipo.
Exemplo:

Os dois modos para criação de variáveis e atribuição de valores estão corretos. Podemos declarar uma variável e depois atribuir um valor à ela ou no ato da declaração da variável, definir um valor à ela.

As variáreis booleanas podem conter apenas dois valores: “verdadeiro” ou “falso”.
Exemplo:

As variáveis do tipo cadeia de caracteres podem receber qualquer tipo de texto. Para isso é necessário colocar aspas duplas (“) ou simples (‘) no início e no fim da cadeia de caracteres.

Exemplo:

Exercícios:

1 – Esse exercício é apenas para fixação de conceitos. Crie variáveis com nomes diferentes e atribua valores a elas. Imprima o valor das variáveis com o comando “document.write”.

Obs.: Para fazer uma impressão por linha, você pode utilizar a tag de HTML “<br>”. Para isso, basta escrever o código como no exemplo abaixo.

No exemplo acima, estamos utilizando o sinal “+” para concatenar as cadeias de caracteres, que agora chamaremos de String. Concatenar significa ligar, então utilizaremos a palavra “concatenar” para dizer que estamos ligando duas Strings.

Arrays

Traduzir “array” de um modo fácil seria dizer que ele é uma “variável que tem o valor de várias variáveis”. Dentro de um array é possível colocar vários valores diferentes.

Para utilizar um array é necessário que antes de atribuir valores aos seus índices (Um índice é um espaço dentro do array onde podemos armazenar dados), você o declare com o comando “new Array()”. Após isso basta atribuir valores aos seus índices, que podem ser numéricos ou associativos.

Índices Numéricos

São os índices de um array representados por números.

Do mesmo modo que você atribui valores aos índices, você pode acessar seus valores utilizando o nome do array e seu índice entre chaves como no exemplo acima. Se você atribuir dois valores a um mesmo índice, o mesmo será substituído.

Índices Associativos

Índices Associativos funcionam como os numéricos, mas ao invés de números, strings são utilizados para sinalizar um índice.

É isso aí pessoal. Na próxima aula vamos ver como pegar dados digitados pelo usuário.
T+

Fala galera. Há algumas semanas que criei um material de Algoritmos para a empresa onde eu estava trabalhando, mas como a linguagem escolhida por mim para o material foi Javascript eles pediram para eu refazer em Português Estruturado. Considero Javascript uma boa linguagem para começar por não precisar de nada instalado (geralmente o sistema operacional terá tudo o que você precisa) e por você já poder trabalhar com ela assim que aprender bem. Caso haja algum erro, por favor avise por comentário ou por e-mail.

Sem mais delongas. Vamos ao curso.

Algoritmos

Um algoritmo é uma seqüência de instruções definidas para serem executadas mecanicamente. Todos os dias realizamos algoritmos e não percebemos. Basicamente todas as manhãs nós nos levantamos da cama, tomamos o café da manhã, nos arrumamos e vamos ao trabalho. Entre cada uma dessas ações descritas, realizamos várias outras ações. Nosso próprio corpo realiza algoritmos o tempo inteiro realizando decisões. Se nos machucamos, sentimos dor. Se o ambiente externo tem temperatura baixa, o corpo treme para tentar aumentar a temperatura novamente.

Todo algoritmo segue uma seqüência lógica. Geralmente um algoritmo é lido de cima pra baixo e da esquerda pra direita. Cada linha de código é lida e, caso não haja nenhum erro, executada e logo depois é lida a próxima linha e assim sucessivamente até terminarem as linhas do algoritmo.

Como exemplo de algoritmo podemos pensar em um ser humano andando. Observe:

1. Levantar a perna direita

2. Inclinar o corpo para frente

3. Baixar a perna direita

4. Apoiar o pé direito no chão

5. Levantar a perna esquerda

6. Baixar a perna esquerda

7. Apoiar o pé esquerdo no chão

8. Levantar a perna direita…

Outro exemplo de algoritmo seria fazer um calculo simples como a soma ou multiplicação de dois números como no exemplo abaixo:

1. Ler primeiro número

2. Ler segundo número

3. Somar os dois números lidos

4. Exibir o resultado

O que é um programa?

Um programa é um ou mais algoritmos escritos numa linguagem de programação. Existem diversas linguagens de programação atualmente. A grosso modo as linguagens mais fáceis são chamadas de “linguagens de alto nível” e as mais difíceis são chamadas de “linguagens de baixo nível”. As Linguagens de Baixo nível são assim chamadas por que você precisa trabalhar mandando comandos e recebendo respostas direto para o hardware. As Linguagens de Alto nível são assim chamadas por que elas “escondem” as tarefas difíceis como trabalhar direto com hardware, o que facilita o desenvolvimento do código e aumenta a velocidade de programação.

Exercícios:

1. Escreva um algoritmo para pentear o cabelo. Tente ser bem especifico e detalhado em cada ação realizada.

Entrada e saída de dados

Muitas vezes não percebemos, mas para haver o processamento de informações, é necessário ter informações para que elas sejam processadas. Um programa precisa que dados sejam inseridos nele para que eles sejam processados e retorne algum resultado daquele processamento. Esses dados podem ser inseridos pelo usuário do programa e algumas vezes o usuário não sabe que está inserindo dados. Digitar texto em um formulário eletrônico ou o simples ato de copiar um arquivo para o seu computador é considerado entrada de dados.

Exercício: Escreva alguns modos de entrada e saída de dados. Ao lado de cada um, diga se é entrada ou saída.

Por enquanto é só pessoal. Aguardem a próxima aula até o fim da semana.