quinta-feira, 9 de junho de 2016

Lógica de Programação - Aprendendo a Programar

Na Alfamídia, disponibilizamos dezenas de apostilas gratuitas em diversas áreas, como Design, Programação, 3D, etc. São apostilas que desenvolvemos para nossos cursos ao longo dos últimos anos.

Link: Apostilas Gratuitas

Entretanto, não temos uma única apostila disponível de "lógica de programação". Na verdade, eu nem gosto desta expressão, que acho confusa. Mas o fato é que não temos nenhuma apostila que ensine os primeiros passos para quem nunca programou.

Provavelmente, nenhuma apostila que já desenvolvemos me agradou o suficiente. Pode ser um preconceito meu, de não gostar de ver toneladas de conceitos complexos, lógica booleana, e coisas inúteis como fluxogramas, sendo despejados em alunos que nunca programaram. É que minha sensação é tipo se passassem um semestre ensinando as regras do futebol antes de deixar o aluno sequer ver uma bola:

Educação Física
- semestre 1: as regras do futebol
- semestre 2: futebol de botão (a coisa mais parecida que encontrei para fluxogramas e pseudocódigo)
- semestre 3: os diferentes tipos de bola na história do mundo
- semestre 4: exercícios com bola
- semestre 5: nossa primeira partida de futebol (para quem ainda não desistiu).

Assim, estou produzindo uma apostila de lógica. Ainda está em seu início, mas segue a Unidade I. Quando pronta, estaremos disponibilizando gratuitamente.

Obs (20/06/2016): A apostila já está disponível:

Aprendendo a programar, ou Estes Programadores Magníficos e suas Fantásticas Linguagens de Programação, ou Como ir de x=1 a arrays e funções em 25 horas e 11 minutos

Siga para unidade 2 e 3.
Siga para unidades 4,5 e 6
Ir para unidades 7 e 8


Vamos começar programando

1.1 Vamos fazer um primeiro programa

Talvez você já tenha lido uma (ou muitas) apostilas de programação. Talvez mesmo já tenha feito cursos da – assim chamada – lógica de programação.

Imagino que você acredite que ainda não sabe programar, ou pior, que programar não é para você. (De outro modo, por que está lendo esta apostila?)

Vamos resolver isso fazendo um primeiro programa. Não deve levar mais de alguns minutos...

--------------------CRIANDO SEU PRIMEIRO PROGRAMA------------------
1. Abra o Chrome (se você não sabe o que é o Chrome, eu admito, estamos com problemas).
2. Digite “about:blank” na entrada de endereços, como se estivesse digitando o endereço de um site. (cuidado para não colocar espaços depois do ':').
3. Aperte a tecla F12
4. Vai abrir uma janela ocupando uma parte da área em que um site normalmente é exibido. Nela tem uma aba escrita “console”. Selecione esta aba.
5. Na área abaixo, escreva o seguinte: “alert('ola mundo')”.
6. Tecle Enter.
------------------------------------------------------------------------------------------

Há duas possibilidades: funcionou; não funcionou.

Se apareceu uma janela com a mensagem “ola mundo”, então funcionou. Parabéns, você acabou de criar seu primeiro programa.

Caso contrário, alguma coisa deu errado. Você vai ter que descobrir o que aconteceu. Parabéns, você está lidando com seu primeiro bug. Nós vamos tratar de bugs mais adiante, então neste momento o que posso dizer é para olhar cada um dos passos e ver onde você pode ter errado. Para ajudar, observe a imagem a seguir:


1.2 Vamos fazer um segundo programa


Vamos agora parar e estudar um pouco de teoria, para entendermos exatamente o que é um programa, o que é lógica de programação, criarmos fluxogramas, pseudocódigos, etc?

Não, não vamos.

Se alguém tivesse ensinado a você a teoria do movimento antes de você dar o seu primeiro passo, você talvez ainda estivesse engatinhando, e dizendo que caminhar é muito difícil.

O que nós vamos fazer, é criar seu segundo programa.

--------------------------CRIANDO SEU SEGUNDO PROGRAMA------------------
1. Faça os mesmos passos 1 a 4 de antes (a partir de agora não vou mais repetir isso, ok?)
2. Digite “alert('ola');”
3. Digite SHIFT ENTER (isso significa apertar a tecla SHIFT e AO MESMO TEMPO apertar a tecla ENTER).
4. Digite “alert('mundo');”
5. Tecle ENTER
------------------------------------------------------------------------------------------

Se não deu certo agora, provavelmente você apertou ENTER sem o SHIFT, e o Chrome achou que seu programa tinha terminado no primeiro alert.

Se tudo deu certo, apareceu uma primeira janela de alerta, e depois uma segunda.

Vamos agora ver um pouquinho de teoria, mas muito pouco, muito pouco mesmo, e já vamos continuar programando.

1.3 Programas Seguem um Fluxo, Passo a Passo


O programa anterior nos apresentou um conceito que não é tão óbvio quanto pode parecer à primeira vista. Um programa executa um comando de cada vez, passo a passo. Em uma linha tínhamos um comando “alert('ola');”, e na linha de baixo tínhamos o comando “alert('mundo')”, e o programa executou a primeira linha, e depois executou a segunda.

Vamos chamar isso de um fluxo de execução, um 'caminho' que o programa segue, de executar uma linha após a outra. Em termos do que nos interessa nesta apostila, que são linguagens de programação imperativas, todo programa segue sempre um fluxo, executando as linhas de código em sequência. No futuro veremos como controlar este fluxo de execução.

Obs: nem tudo no mundo são linguagens de programação imperativas. Existem outros tipos de linguagens de programação e outras formas de criar programas, apenas não nos preocuparemos com elas nesta apostila.

1.4 Precisamos falar sobre variáveis


Vamos fazer nosso terceiro programa. Já somos programadores experientes, certo? Então não vou passar todo o passo a passo, apenas colocar o programa que quero que você escreva. Apenas nunca esqueça de dar SHIFT ENTER no console entre cada linha, para ir para a próxima:

--------------------------SEU TERCEIRO PROGRAMA------------------
x = 1;
alert(x);
x = 2;
alert(x);
x = x + 1;
alert(x);
------------------------------------------------------------------------------------------

Observe que, desta vez, o texto entre parenteses não está entra aspas. O resultado deverá ser três janelas, mostrando os números 1, 2 e 3.

 Muito mais coisa está acontecendo aqui do que parece à primeira vista, e precisamos mesmo falar sobre isso, e especialmente sobre nossa variável chamada 'x'.

O fluxo de execução: temos aqui nosso fluxo de execução novamente em ação. Cada comando foi executado em sequência.

A variável: temos uma variável chamada 'x', e temos o sinal de igualdade '='. Parece simples, mas é tudo mais complicado que parece, pois nem nossa variável é igual as variáveis que aprendemos nas equações do colégio, nem o sinal de igualdade é o mesmo que conhecíamos.

Se fosse diferente, se fosse igual a tudo que já aprendemos, o que dizer da expressão “x = x + 1”. A primeira vez que a vi, lembro bem de pensar “como pode? 'x' não é igual a 'x + 1', 'x' é menor que 'x + 1'.

Ocorre que o sinal de '=' não é uma igualdade, é uma atribuição. Veremos mais adiante a representação de igualdade (que utiliza em algumas linguagens de programação o sinal '==').
“x = 2” não está dizendo que x é igual a dois, está dizendo que, a partir de agora, no fluxo de execução, x passa a receber o valor 2. “x = x + 1” significa que, a partir de agora no fluxo de execução, 'x' passa a receber o valor que 'x' tinha, acrescido de 1.

O que é uma variável: Então, agora começamos a entender o que é uma variável. Uma variável, para nós, é apenas uma forma de guardar uma informação. Imagine que você tem uma folha de papel, um lápis e uma borracha. Nesta folha você pode ter alguma informação, que você pode apagar a qualquer momento, para escrever outra no lugar.

Foi o que fizemos. Nessa folha de papel, que chamamos de 'x', primeiro escrevemos o número '1', depois utilizamos no nosso alert ('alert(x)'), depois apagamos e escrevemos o número '2' por cima.  Fizemos nosso alert novamente. Depois, vimos qual era o número no papel (era '2'), somamos com 1 (ficou '3'), e escrevemos novamente no papel.

Ficou fácil até aqui? Não se preocupe, já vamos começar a complicar.


1.5 Vamos fazer escolhas?

Vamos ver o que sabemos até agora, e o que mais nos faz falta, para poder criar um programa....
Sabemos trabalhar com variáveis para colocar e alterar números, e sabemos exibir uma mensagem na tela. Ainda é pouco, precisamos dominar pelo menos mais dois ou três conteúdos para poder criar programas que façam algo um pouco mais útil.

Vamos começar com escolhas. Nós queremos que o programa tome decisões. Por exemplo, podemos querer que ele exiba “ola mundo” em determinados momentos, mas exiba “tchau mundo” em outros.
Para isso, vamos olhar dois programas abaixo. Para adivinharem o que eles fazem, já dou uma dica: pensem em “if” como a palavra “se”, e “else” como a palavra “senão”.

-----------------AGORA DOIS PROGRAMAS DE UMA SÓ VEZ--------------------
x = 5;
if (x > 10) {
   alert('ola mundo');
} else {
   alert('tchau mundo');
}
------------------------------AQUI VAI O SEGUNDO------------------------------------
x = 15;
if (x > 10) {
   alert('ola mundo');
} else {
   alert('tchau mundo');
}
--------------------------------------------------------------------------------------------------

Você adivinhou o que apareceria em cada programa? Se tudo deu certo, o primeiro exibiu “tchau mundo”, e o segundo exibiu “ola mundo”.

Por quê? Obviamente, porque no primeiro 'x' não era maior que 10, enquanto no segundo ele era.
E assim chegamos em nosso primeiro “comando de controle de fluxo”. Até marquei em negrito pela importância!

Por que se chamam comandos de fluxo? Por que eles alteram o fluxo de execução. Até agora havíamos visto os programas executarem uma linha de cada vez, mas agora vimos uma 'bifurcação' na nossa estrada, um desvio no nosso fluxo. Conforme a condição, entravamos em uma linha, ou na outra.

Nós não vamos perder tempo aqui em algumas questões que penso serem avançadas (e chatas) como 'lógica booleana' e outras palavras exóticas. Iremos vê-las mais adiante.

Mas vamos falar nas seções seguintes de duas coisas realmente importantes sobre o uso do comando “if”, que vocês precisam saber desde o primeiro momento, para poder utilizá-lo com segurança.

1.6 Blocos de Comando

Mexendo com o fluxo de execução, precisamos ser capazes de agrupar nossos comandos em blocos. Por quê? Vamos ver os dois comandos abaixo para entender isso.

-------------------------ESTE PROGRAMA ESTÁ CERTO-----------------------------
x = 5;
if (x > 10)
   alert('ola mundo');
alert('e aqui terminamos');
------------------ESTE PROGRAMA TAMBÉM ESTÁ CERTO----------------------
x = 5;
if (x > 10) {
   alert('ola mundo');
   alert('e aqui terminamos');
}
--------------------------------------------------------------------------------------------------

Os dois programas estão corretos, mas eles fazem coisas diferentes. As chaves definem um bloco, e precisamos definir blocos quando queremos fazer o fluxo de execução executar em um conjunto de comandos.

No primeiro caso, estamos dizendo para o primeiro 'alert' só ser executado em determinada condição. No segundo caso, estamos dizendo para todo o bloco entre as chaves, só ser executado se entrarmos na condição.

E chegamos em um bom momento para falarmos pela primeira vez em indentação e boas práticas:

------------ESTE PROGRAMA ESTÁ CERTO MAS PARECE ERRADO----------
x = 5;
if (x > 10)
   alert('ola mundo');
   alert('e aqui terminamos');
--------------------------------------------------------------------------------------------------

Este programa está certo, na verdade, para o computador ele é exatamente igual ao primeiro que mostramos no início da seção. O problema é que para um ser humano, ele parece com o segundo.
Na maioria das linguagens, a indentação, os espaços em brancos, a posição dos comandos na linha, não fazem diferença. Mas nós, humanos, automaticamente pensamos que coisas alinhadas são semelhantes.

Em resumo, sempre que entrar em um desvio de fluxo ou no início de um bloco, passe a escrever os comandos um pouco mais a direita. Quando sair do comando, volte. Assim, ao final do programa você estará exatamente na mesma coluna que quando iniciou. Isso vai ser fundamental quando você estiver fazendo programas maiores e mais complexos.


1.7 Nosso primeiro pega-ratão

Agora vamos ver a segunda coisa realmente importante do 'if'. Se você realmente nunca leu nada sobre programação, você provavelmente vai errar em adivinhar o que faz este programa:

-----------------------ESTE PROGRAMA VAI ENGANAR VOCÊ--------------------
x = 5;
if (x = 10)  {
   alert('ola mundo');
}
--------------------------------------------------------------------------------------------------

Ei, ei ei, é isso mesmo? O programa exibiu o alerta? Sim. Vamos acrescentar um novo alerta, após o 'if', para ajudar a desvendar este mistério:

-----------------------SERÁ QUE FICOU ÓBVIO AGORA--------------------
x = 5;
if (x = 10)  {
   alert('ola mundo');
}
alert(x);
--------------------------------------------------------------------------------------------------

Não só o alerta foi exibido, como 'x' mudou para o valor '10'. Ficou claro agora? Nós repetimos o mesmo comando de atribuição dentro do 'if'. Primeiro fizemos 'x=5', depois fizemos 'x=10'.

Para fazermos comparações, o comando de igualdade (na maioria das linguagens), não é igual ao da matemática, não é '=', mas sim '=='. Vamos então corrigir nosso programa:

-------------------------------------AGORA SIM--------------------------------------
x = 5;
if (x == 10)  {
   alert('ola mundo');
}
alert(x);
--------------------------------------------------------------------------------------------------

Pode parecer simplório falar de '==' e de blocos, mas são duas das questões que mais atrapalham programadores iniciantes, e às vezes até profissionais, na hora de desenvolver um programa. Revisem estes dois itens para ter certeza que nunca vão esquecer de abrir e fechar as chaves, e nunca vão confundir comparação '==' com atribuição '='.

Obs: alguns programadores preferem inverter as comparações, escrevendo 'if (5 == x)', para garantir que não vão ter problemas mesmo que um dia esqueçam o '==', pois neste caso o programa vai exibir um erro.


1.8 Vamos ouvir o usuário?


Calma, sem pânico. Este não é um curso avançado de programação, muito menos de psicologia. Ninguém vai obrigá-lo a falar com usuários ou outros seres humanos. Por enquanto queremos apenas que o usuário passe algum tipo de informação para nosso programa.

Vamos utilizar um novo comando, o comando 'prompt'.

Obs: agora parece uma boa hora para mencionar que estamos há um tempinho programando em javascript, uma linguagem bastante poderosa e complexa. 'alert' e 'prompt' são específicos desta linguagem, mas não vamos nos preocupar muito com isso, pois praticamente qualquer linguagem vai ter algo parecido, ou seja, alguma forma de exibir informações e alguma forma de receber dados do usuário. As demais instruções que vimos são praticamente iguais em todas as linguagens imperativas.

---------------------VOCÊ DECIDE SE O ALERTA SERÁ EXIBIDO----------------
x = prompt('digite um número');
if (x > 10)  {
   alert('ola mundo');
}
alert(x);
--------------------------------------------------------------------------------------------------

Quero crer que você já sabe o suficiente de programação para entender o que o 'prompt' fez, apenas executando o programa.

Senão, lá vai: o prompt recebeu a entrada do usuário e colocou na variável 'x'. Se foi um número maior que 10, portanto, o programa exibiu 'ola mundo'.


1.9 Agora estamos prontos para programar

Verdade?

Verdade.

Com o que vimos, já temos o suficiente para começar a praticar a programação. Na próxima unidade, começaremos a criar programas usando apenas o conteúdo visto nesta unidade.

Vamos então a algumas explicações de por que estamos ensinando programação assim. Veja, o grande problema de muitos cursos de programação é que tentam ensinar a teoria antes da prática. Imagine passar um semestre de educação física ouvindo sobre regras e técnicas de futebol, ou aulas inteiras ouvindo sobre como se anda de bicicleta.

Isso quer dizer que teorias não são importantes, ou que nunca vamos precisar saber o porquê das coisas? Não, longe disso. Eu sou 100% a favor de crianças estudarem gramática, por exemplo, só que faz muito mais sentido elas estudarem a gramática de uma lingua que elas já adquiram alguma prática de uso.

É o que faremos neste curso. Minha preocupação é que vocês pratiquem a programação, e desenvolvam a habilidade de criar programas que resolvam questões reais. Para tanto, vamos praticar e praticar, com exemplos cada vez mais complexos, para então, quando estiverem prontos e dominando as técnicas, vamos entender melhor os conceitos teóricos que embasam as linguagens de programação.



Siga para unidade 2 e 3.
Siga para unidades 4,5 e 6
Ir para unidades 7 e 8


8 comentários:

  1. Respostas
    1. Obrigado. Estou trabalhando para concluir a apostila o quanto antes e disponibilizar.

      Excluir
    2. Apenas continue, você já está disponibilizando e está muito bom!!!
      Parabéns pela iniciativa!

      Excluir
    3. Ola. Decidi disponibilizar os conteúdos no blog, a medida que forem sendo produzidos. Já coloquei agora as unidades 2 e 3.

      Excluir
  2. Essa metodologia de ensino é muito boa! Aprendeu o conceito já parte pra prática sem nem pensar duas vezes. Parabéns!

    ResponderExcluir
    Respostas
    1. Obrigado, Dário. Eu acredito que você só começa a ter um domínio melhor dos conceitos quando começa a aplicá-los na prática, e penso que este é um dos problemas do ensino tradicional de programação.

      Excluir