Mini curso de algoritmos com Javascript – Aula 2

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+

Mini curso de algoritmos com Javascript – Aula 1

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.

Warcraft 3: Cut Scenes que não aparecem

Recentemente eu comprei os games Warcraft 3, Diablo 2, Starcraft e suas respectivas expansões. Sempre fui muito fã dos games da Blizzard e sempre quis ter esses games originais pra poder jogar pelo Battle.net com meus amigos.

Comecei pelo Warcraft pois sempre quis jogar ele até o fim, mas nunca tive tempo. Uma coisa que percebi foi que as Cut Scenes não apareciam. Ficava tudo escuro e só escutava o som.
Depois de muito tempo mexendo em resolução de vídeo e revirando os fóruns da Blizzard eu me deparei com uma situação parecida com a minha, mas que o cara dizia que era necessário reinstalar o game por que o arquivo de nome “Blizzard.ax” poderia ter sido perdido. Eu não queria perder tempo de reinstalar o game, mas resolvi dar uma olhada. Foi aí que vi que o arquivo não tinha desaparecido. Ele estava lá, mas com o nome de “blizzard.ax”. Renomeei o arquivo para “Blizzard.ax” e tudo começou a funcionar. Simples assim =)

Entrevista com Edison Mackeenzy

Ano passado eu comecei a fazer um curso de Empreendedorismo no CEDERJ de Paracambi e um dos trabalhos foi entrevistar um empreendedor. A primeira pessoa que veio em minha cabeça foi o Mack do Videolog.tv, que me deu a entrevista que ele me deu no ano passado. Obrigado ao Mack pela entrevista e um feliz aniversário atrasado =)

Sobre o empreendedor e a empresa

A entrevista abaixo foi realizada com o empreendedor Edson Mackeenzy, CEO do portal Videolog.tv, que “é a principal comunidade de produtores de vídeos do Brasil. Criado em Maio de 2004, seu objetivo é promover a cultura nacional, incentivando o talento e a produção de conteúdos de qualidade. Sua comunidade de 400 mil usuários cadastrados, exibe mensalmente para mais de 4 milhões de brasileiros cerca de 12 milhões de vídeos. Uma empresa brasileira de capital próprio, pioneira no mercado de vídeos mundial. O portal Videolog.tv, está no ar desde maio de 2004 e foi o primeiro na américa latina a permitir compartilhamento de vídeos em alta definição (HD) para usuários a partir de 2MB de conexão. Isto só foi possível devido sua tecnologia proprietária que economiza até 96,7% do peso original do vídeo. Esta tecnologia lhe rendeu em 2009 o prêmio RioInfo de melhor ferramenta de distribuição de conteúdo com o projeto Tivi.tv.” (Release Institucional do Videolog.tv)

A entrevista

Mayck Xavier: O que o levou a criar a sua empresa?

Edson Mackeenzy: Tínhamos uma produtora e muitas dificuldades. Percebemos que, para entregar nossas produções, tinha um alto custo e uma logística complexa. Resolvemos criar um sistema para facilitar isso e liberamos para nossos amigos. Sem saber, criamos o primeiro portal de compartilhamento de vídeos do mundo.

MX: Quais foram os maiores desafios que você enfrentou?

EM: Os maiores desafios sempre ainda estão por vir, amigo. Nesses cinco anos de Videolog.tv, já passamos por quase tudo: tivemos momentos em que o mais dolorido foi administrar o dinheiro – ou a falta dele – em outros, administrar o ego das pessoas; em outros, sair da zona de conforto de uma empresa estável e com visibilidade na mídia; e, em outros, acreditar que estávamos na zona de conforto. Estava agora pensando que responder a esta pergunta foi um desafio gigante.

MX: Quem o apoiou na sua trajetória empreendedora?

EM: Na realidade, uma das principais características do empreender é não ter apoio. Nadar contra a maré ou, em outras palavras, fazer acontecer. Mas, claro, que não posso esquecer-me de todas as pessoas que me ajudaram com palavras amigas e com a compreensão de estávamos tentando. Se mesmo assim se você quiser que eu agradeça a alguém, quero agradecer a todas as pessoas que acreditaram que eu não conseguiria.

MX: O que a sua família acha de você ter escolhido abrir um negócio próprio em vez de procurar um emprego formal?

EM: Bom, quando eu resolvi empreender, eu já tinha uma vida estabilizada, emprego numa grande empresa e carteira assinada. Meus pais me chamaram de louco por largar um emprego daqueles, mas acredito que isso é da natureza da pessoa, pois minha mãe é assim e eu não poderia ser diferente.

MX: O que os seus amigos acham de você ter escolhido abrir um negócio em vez de procurar um emprego formal?

EM: Bom, quando eu pedi demissão para abrir minha empresa, eles foram muito educados comigo e me chamavam apenas de maluco na minha frente. Ninguém conseguia entender como eu poderia rejeitar um emprego que todos sonhavam em ter. Acho que hoje, eles pensam diferente, mesmo estando no mesmo lugar.

MX: Você se sente valorizado como empreendedor/empresário?

EM: Claro, quando eu estaria sendo entrevistado por você se não fosse empreendedor?

MX: Conte uma situação em que você ficou constrangido por ser empreendedor/empresário.

EM: Bem, não me lembro de ter sido constrangido por ser assim “diferente”, vivemos num mundo moderno e as pessoas aprenderam a respeitar as diferenças (risos). Talvez a pior parte de todas seja a de você sempre ter dificuldade para comprovar renda. Uma vez, no banco, o gerente não acreditou que eu era o dono da empresa, só porque eu andava de bicicleta.

MX: Conte uma situação em que você se sentiu valorizado por ser empreendedor/empresário.

EM: Uma vez, me fizeram esta pergunta referindo-se às palestras fora do país e entrevistas para a grande mídia, e eu disse que não me sentia especial por isso. Mas, agora que você perguntou de outra forma, me sinto valorizado quando acordo e sei que vou contribuir para os sonhos de muitas pessoas, para o sustento de famílias e, principalmente, para um mundo melhor.

Sugestões de Edson Mackeenzy

Assista a este vídeo com minha narração: <http://videolog.uol.com.br/mack/videos/467848>

Que venha 2010!

2009 foi um ano bem corrido pra mim. Saí do Centro do Rio de Janeiro no final de 2008 pra trabalhar em Copacabana, tive que fazer mais matérias na faculdade pra compensar o tempo perdido nos outros períodos por causa do trabalho e acreditem isso faz muita diferença quando você mora em Paracambi. Depois dos últimos 2 meses só fazendo freelas, tive um convite para trabalhar na NSI Trainning, o que é muito bom, pois quando era mais jovem e ainda estava dando meus primeiros passos em TI, pensava se algum dia iria poder fazer uma formação na NSI e me certificar. Hoje estou trabalhando lá e tendo a oportunidade de me certificar.

Aprendi bastante com desenvolvimento. Aprendi e adotei o Code Igniter como meu framework Php, aprendi C# e .NET na marra pra desenvolver um projeto de Freelancer que ainda estou trabalhando e decidi que que quero aprender mais de Java e aprender mesmo Ruby e Rails pra desenvolver um projeto pessoal.

Devido ao desgaste de morar e estudar em Paracambi e trabalhar no Rio, resolvi me mudar para o Rio pra poder economizar várias horas de viagem e aproveita-las melhor estudando ou dormindo, coisa que eu não fazia muito.
A parte da mudança não foi tão difícil por que tenho amigos já morando no Rio, mas a transferência está me deixando meio preocupado por que não consigo decidir para qual faculdade particular me transfiro. Minha preferência é por universidades perto do Largo da Carioca, o que me faz ter um leque de escolhas menor. Só espero resolver isso o mais rápido possível.

É isso aí galera. Tenham um ótimo 2010.

Convites para o Google Wave

Galera, estou com 24 convites para o Google Wave. Quem quiser, deixa um comentário.

A Nokia me decepcionou

É. É isso mesmo. Estou decepcionado com a Nokia. Há pouco menos de um ano, comprei um Nokia E51. Foi por uma bagatela de R$400 numa promoção relâmpago na FNAC. O Smartphone tem o SO Symbian e logo já tinha vários softwares instalados nele. Estava muito feliz com o telefone até que percebi que o botão central dele simplesmente tinha começado a oxidar. Peraí… Um telefone, que precisa ser manuseado por mãos, que suam, tem partes que podem oxidar? FAIL!
Até aí, tudo bem. Tirando a irritação que me deu na mão por causa da oxidação, eu ainda estava feliz. Nessa última semana a Nokia cismou de me obrigar a atualizar meu PC Suite por um tal de OVI Suite. Atualizei pensando que geralmente atualizações são para melhorar. Deveria ser. Atualizei o SO do telefone, perdi todos os meus softwares mesmo depois de ter feito o backup que o OVI Suite pede e um dos botões parou de funcionar. Pra piorar, a garantia do telefone termina no dia 4 dessa semana e eu estarei em Angra dos Reis dando um curso pra alguns desenvolvedores da Eletronuclear. Epic Fail!
Vou tentar reinstalar o SO no telefone. Se não funcionar, vou largar a Nokia e esperar poder comprar um iPhone baratinho. Só falta a Apple me decepcionar também.

Dropdowns + CodeIgniter + Ajax

Nos últimos meses eu tenho usado o Code Igniter pra refazer um sistema da empresa onde estava trabalhando. O que mais chamou a minha atenção no CodeIgniter foi o fato de ele ser simples. Ele não te prende como os outros frameworks em php.  Tudo bem. O foco aqui não é falar do CodeIgniter em si. Para mais detalhes, visite www.codeigniter.com.

O foco aqui é mostrar como a simplicidade pode melhorar muito o código. Por exemplo, várias vezes eu preciso preencher dropdowns (ou combobox, ou simplesmente selects) com resultados de requisições ajax.
Vamos para um exemplo:
Tenho um dropdown onde escolho um estado e assim que selecionar o estado, o dropdown de cidades será preenchido com as cidades daquele estado. Deixando o javascript de lado, vou direto ao código em php.
Assim que buscar no banco de dados as cidades daquele estado, eu preencho uma variável com os resultados  como options em html do seguinte modo usando o Code Igniter:

$sql = “select id,nome from cidades where estado = ?”;
$query = $this->db->query($sql,$estado);
$html = “<select name=’cidade’>”;
foreach($query->result() as $row){
$html .= “<option value=’” . $row['id'] . “‘>”. $row['nome'] . “</option>”;
}

$html .= “</select>”;

Esse pode ser o modo que a maioria dos programadores faz, mas o CodeIgniter pode tornar isso mais simples. Veja só:

$sql = “select id,nome from cidades where estado = ?”;
$query = $this->db->query($sql,$estado);

foreach($query->result() as $row){
$array[$row['id']] = $row['nome'];
}

$html = form_dropdown(‘cidade’,$array);

O que quero mostrar é que utilizando um helper do CodeIgniter, meu código ficou mais limpo e, consequentemente, melhor para dar manutenção.
Na minha opinião, o CodeIgniter é um ótimo framework para quem não quer perder tempo.

Para mais detalhes, http://www.codeigniter.com

Aptana no Ubuntu 8.10

Há uns dias atrás atualizei meu Ubuntu 8.04 LTS pelo novo 8.10 apenas pelo fato de ele ser mais novo e ter as versões mais novas dos programas e tal… Tudo estava bem. Wireless funcionando, placa de vídeo funcionando e atualizações feitas. Comecei a instalar os programas que frequentemente uso como o Thunderbird, VirtualBox, Apache, PHP, Komodo Edit e o Aptana que é uma IDE que tenho gostado bastante de usar. Conheci o Aptana há muito tempo quando ele ainda estava nascendo, mas como sempre fui de usar o VI pra tudo, acabei deixando ele de lado. Nesse ano eu conheci o Eclipse (que também ignorei por que achava que nunca ia programar em Java) e descobri que o Aptana é baseado no Eclipse. “Que legal! Agora posso usar o Aptana nos meus projetos web por que já conheci, é bonito, é legal e funciona!”.

O que acontece é que depois de tudo funcionando, o bendito não funcionava. Fechava no meio do caminho. Nem sequer abria a primeira janela. “Danou-se! Tenho que voltar pra 8.04.” Foi então que eu pensei em instalar o Fedora 10 que já tá aqui há um tempão pra eu testar, e como diz meu amigo Lonely Spooky a cada versão do Fedora: “Essa versão é a melhor de todas!”. Testei e foi o mesmo problema.

Foi aí que cheguei à conclusão que o problema não era com a distro, mas sim com qualquer outra coisa que não sei o que era, mas era.

Pesquisei algo no Oráculo e encontrei uma resposta. O grande problema é o Firefox. Sim! Nosso amado Firefox! Não sei o motivo, mas depois que as distros começaram a usar o Firefox 3, o Aptana parou de funcionar. Meu Eclipse também não funcionou no 8.10, mas aí não sei se é coincidência ou algum outro motivo.

Vamos aos passos pra resolver esse problema por que esse texto já tá grande demais e eu preciso dormir. =)

Passo 1 – Instalar o Java

Sempre me dizem que é preciso apenas instalar o JRE para funcionar, mas eu sempre instalo também o JDK pra não perder tempo e por que sou preguiçoso e não gosto de ficar voltando no terminar e instalando mais um pacote que voltou. Vou levar em consideração que você sabe usar o apt e sabe pelo menos procurar e instalar um pacote, então vamos instalar o pacote  sun-java6-jre e, caso necessário, o pacote sun-java6-jdk.

Passo 2 – Instalando o Firefox 2

“Peraí! Instalar o Firefox2? o.O”

Sim! Vamos instalar o Firefox 2. Uma das vantagens de se usar GNU/Linux é ter várias versões do mesmo programa no sistema. Nesse caso vamos utilizar os repositórios do Hardy. Não se preocupe. Não vai doer. =)

Para fins de segurança, mova seus repositórios atuais para um novo arquivo de nome diferente.

sudo mv /etc/apt/sources.list /etc/apt/sources.list.antigo

Depois disso crie um novo sources.list com o seguinte conteúdo:

deb http://archive.canonical.com/ubuntu hardy partner
deb http://br.archive.ubuntu.com/ubuntu/ hardy main universe restricted multiverse
deb http://security.ubuntu.com/ubuntu/ hardy-security universe main multiverse restricted
deb http://br.archive.ubuntu.com/ubuntu/ hardy-updates universe main multiverse restricted
deb http://packages.medibuntu.org/ hardy free non-free

Então basta fazer o apt-get update e o apt-get install firefox-2

Voltando com o sources original

Lembra do sources.list que você fez backup? Então… Pegue ele e volte com o nome original (sources.list). Você pode fazer isso via terminal ou interface gráfica.

Após isso, basta fazer um update com apt-get update que seus repositórios voltarão ao normal

Instalando e rodando o Aptana

Baixe o Aptana em http://aptana.com/studio/download e crie um script para rodar ele seguindo os passos.

1 – Crie um arquivo texto (Nada de .doc heim!) chamado startAptana ou com qualquer outro nome que ache melhor.

2 – Adicione o conteúdo no arquivo:

ATENÇÃO! No bloco abaixo, é levado em consideração que o Aptana está descompactado em /usr/local. Caso você prefira manter ele em outro local, substitua a linha referente.

#!/bin/bash

export MOZILLA_FIVE_HOME=/usr/lib/firefox

/usr/local/aptana/AptanaStudio

3 – Torne o arquivo executável com chmod a+x startAptana.

Depois disso, basta executar o startAptana e ir pra galera. =)

Troubleshooting (ou, o que eu faço se der merda?)

Se ocorrer algum erro de Java, substitua a linha /usr/local/aptana/AptanaStudio

por

/usr/local/aptana/AptanaStudio –vm /usr/lib/jvm/java-6-sun-1.6.0.10/jre/bin/java (ou pelo caminho de onde quer que esteja o seu Java) em seu arquivo startAptana.

Bom… É isso aí. Espero ter ajudado. Como já disse antes, meu Eclipse e Aptana estavam com problema no Fedora. Se isso funcionar no Fedorento, me avisem.

Original em http://andrewbleakley.com/blog/2008/11/01/installing-and-running-aptana-on-ubuntu-810/

fcD