segunda-feira, 13 de junho de 2016

Ensinando a Programar - Unidades 2 e 3 - Apostila Gratuita em Construção

Aqui seguimos com nossos capítulos 2 e 3 de nossa apostila de "Ensinando a Programar" (seria de "Lógica de Programação", se "Lógica de Programação" não fosse um nome tão ruim).

Você pode acompanhar a primeira unidade neste blog.

Todo este conteúdo começa do básico, assume que você não conhece programação, e busca ser muito diferente de apostilas tradicionais. Uma vez concluído, será disponibilizado gratuitamente. Para acompanhar novidades, você pode se inscrever no nosso informativo sobre desenvolvimento de jogos, que terá informações também sobre o andamento deste projeto gratuito.

Por favor, reiteramos, comece pela nossa Unidade 1.

Veja também as unidades seguintes:
Siga para unidades 4,5 e 6


2. Enfrentando Nossos Primeiros Desafios

2.1 Programando com um Editor de Texto

Até agora estivemos utilizando o console do Chrome. Vamos agora utilizar também um editor de textos, para facilitar nosso trabalho. Você pode utilizar um editor específico para programação, como o “Sublime”. Aqui, vamos falar apenas no uso do “bloco de notas”, ou “notepad”. Você provavelmente tem ele, ou algum equivalente em seu computador.

Dependendo do sistema operacional que você estiver utilizando, ele pode estar em diferentes locais. Em alguns sistemas, você pode digitar “bloco de notas” em alguma opção de pesquisa do sistema operacional, que ele vai aparecer.

Digite no editor o código abaixo.

-----------------------MINHA PRIMEIRA PÁGINA COM JAVASCRIPT-----------
<html>
<head>
<script>
alert(“ola mundo”);
</script>
</head>
</html>
--------------------------------------------------------------------------------------------------
Salve o arquivo, e abra no Chrome. Deve aparecer o alerta.

A partir de agora, simplesmente copie os códigos mostrados entre as tags “<script>” e “</script>”, e salve o arquivo com um novo nome. Com isso será mais fácil alterar e testar nossos códigos.

2.2 Método Exemplo-Desafio-Resposta


A partir desta unidade, vamos utilizar muito esta sequência. Vamos mostar um código de exemplo, e discutir questões que considerarmos novas nele. Nesta etapa, copiem o código para um editor, abram no Chrome, e estudem ele até terem certeza que entenderam todo o programa.

Na sequência daremos um desafio. Tentem criar um código que execute aquele desafio. Sempre será possível resolver o desafio utilizando apenas conteúdos previamente vistos.

Por fim, temos a resposta do desafio. Comparem com sua própria solução, vejam qual é a melhor. Se não conseguirem cumprir o desafio, analisem bem a resposta, tentem descobrir por que não conseguiram fazer sozinhos.


2.3 Vamos Fazer Operações Matemáticas

Observem o código abaixo. Tentem entender o que ele faz. Depois copiem para dentro de um editor de texto, salvem, e executem.

-----------------------UMA CALCULADORA SIMPLÓRIA------------------------
x = prompt(“entre com uma letra para escolher a operação matemática: (s)ubtração, (m)ultiplicação ou (d)ivisão.”);
n1 = prompt(“entre com o primeiro número”);
n2 = prompt(“entre com o segundo número”);
alert(“O resultado é...”);
if (x == “s”) alert(n1 - n2);
if (x == “m”) alert(n1 * n2);
if (x == “d”) alert(n1 / n2);
------------------------------------------------------------------------------------------

Há muitos problemas com este código, a começar pelo fato que esta calculadora não tem a operação de soma, e vamos tratá-los, um por um, mais adiante. Mas tudo a seu tempo. O importante é que este código faz o que se propõe, ou seja, fazer uma operação matemática entre dois números e mostrar para o usuário.

Vamos agora estudar quais as novidades deste código, em relação ao que já vimos anteriormente.
A variável ‘x’ recebeu uma letra

Lembrem-se, uma variável, para nós, é uma forma de guardar informações. Não confundam com as variáveis que vocês estudaram em matemática. Até agora, havíamos visto apenas as variáveis armazenarem números, mas elas podem guardar muitas outras coisas.

No caso, a variável x recebe uma letra, que deverá ser ‘s’, ‘m’ ou ‘d’. Para comparar o valor de x com estas letras, temos que lembrar de colocá-las entre aspas, diferente das comparações com números.

Podemos fazer outras operações matemáticas além da soma.

Vimos no exemplo, três outras operações matemáticas. O sinal de ‘-‘ obviamente é uma subtração. Estamos vendo que a multiplicação é feita utilizando o sinal ‘*’, enquanto que o sinal ‘/’ representa a divisão.

2.4 Nosso Primeiro Desafio

Neste primeiro desafio, faça um programa que receba como entrada do usuário um número inteiro entre 2 e 5. Depois, receba como entradas, 2, 3, 4 ou 5 números, conforme o primeiro número fornecido.

A seguir, exiba cada número, na ordem inversa da fornecida.

Por exemplo, se as entradas do usuário forem 3 (ou seja, é para recebermos 3 números), 1, 3 e 5, teremos como resposta três janelas que exibirão, em ordem, 5, 3 e 1.

Tente fazer o programa. Se você conhece outros comandos além dos mostrados até aqui, pode utilizá-los, mas nossa solução usa apenas o que já mostramos.

2.5 Resposta do Desafio

Não, não, não. Primeiro faça o desafio você. Abra o editor, escreva, teste, tenha certeza que entendeu bem e fez um programa que funciona corretamente. Só depois olhe a resposta do desafio.


2.6 Resposta Mesmo do Desafio

Ok, agora sim. Veja, a seguir, uma resposta do desafio. Obviamente, há como fazer soluções mais elegantes, em especial utilizando comandos que ainda não vimos, e tomando cuidados que ainda não ensinamos a tomar. Mas esta é uma solução aceitável dentro do que já foi ensinado:

-----------------------NOSSO PRIMEIRO DESAFIO CONCLUÍDO------------------------
x = prompt(“entre com um número de 2 a 5”);
n1 = prompt(“entre com o primeiro número”);
n2 = prompt(“entre com o segundo número”);
if (x > 2) n3 = prompt(“entre com o terceiro número”);
if (x > 3) n4 = prompt(“entre com o quarto número”);
if (x > 4) n5 = prompt(“entre com o quinto número”);
if (x > 4) alert(n5);
if (x > 3) alert(n4);
if (x > 2) alert(n3);
alert(n2);
alert(n1);
------------------------------------------------------------------------------------------

Você conseguiu realizar o desafio sozinho? Sim? Parabéns, você acabou de criar um programa sozinho. Você já pode se considerar um programador.

Não rolou? Bem, temos que trabalhar nisso, pois as coisas, depois, vão ficar mais difíceis. Não avance ainda para a próxima unidade. Você vai ter que trabalhar um pouco mais neste exercício.

Minha sugestão, estude o código acima, até ter certeza que entendeu ele bem, depois comece a modificá-lo. Aceite 6, 7 ou 8 números. Coloque uma primeira entrada pedindo para o usuário escolher se os números vão ser mostrados na ordem direta ou, como aqui, na ordem invertida. Ou seja, pratique até dominar bem este código, antes de avançar para nossa próxima unidade.

3. Vamos Melhorar Nossos Códigos

3.1 Há Algo que Precisamos Comentar

Nesta unidade, nós vamos trabalhar no código de nossa calculadora, endereçando uma série de problemas do mesmo.

A primeira questão é que o código não está comentado. Comentários são textos que programadores colocam em um código para que eles mesmos e outros programadores possam ler. Eles são mais importantes quanto maior e mais complexo é um código, mas vamos utilizá-los mesmo nestes pequenos códigos da apostila para que você comece a desenvolver bons hábitos. No futuro, a medida que você adquirir naturalidade na programação, vai perceber quando é importante colocar comentários. Por hora, basta pensar que pode haver poucos comentários em um código, mas nunca há comentários demais.

-----------------------UMA CALCULADORA SIMPLÓRIA------------------------
/* Neste código, x recebe um valor que vai ser utilizado para uma operação matemática. Dois valores são lidos e exibimos o resultado da operação */
x = prompt(“entre com uma letra para escolher a operação matemática: (s)ubtração, (m)ultiplicação ou (d)ivisão.”);
n1 = prompt(“entre com o primeiro número”);
n2 = prompt(“entre com o segundo número”);
alert(“O resultado é...”);
if (x == “s”) alert(n1 - n2); //exibimos a subtração
if (x == “m”) alert(n1 * n2); // exibimos a multiplicação
if (x == “d”) alert(n1 / n2); //exibimos a divisão
------------------------------------------------------------------------------------------

Alguém poderia argumentar que os comentários acima são relativamente inúteis, e não estaria de todo errado, mas estamos utilizando-os apenas para ilustrar o uso de comentários.

Em qualquer linguagem, precisamos indicar de alguma forma que determinado texto não faz parte do programa, está ali apenas para ser lido por programadores. Javascript adota dois formatos que são talvez os mais comuns e adotados pela maioria das linguagens:

“/*” e “*/” indicam que tudo que está entre estes dois comandos é um comentário.

“//” indica que, a partir deste comando, todo o restante da linha é um comentário.

É bom lembrar que outras linguagens podem adotar códigos diferentes. HTML, por exemplo, utiliza “<!—“ e “-->” para seus comentários.

3.2 Não Somos Matemáticos, Podemos Usar Nomes de Variáveis que Seres Humanos Entendem

Na primeira linguagem de programação que utilizei, variáveis eram constituídas de até duas letras. Assim, além de ‘x’, ‘y’, ‘z’, podíamos ter variáveis chamadas de ‘x1’, ‘AX’, etc. Nada que um bloco do lado de seu computador com a lista do que cada variável significava não resolvesse, quando você não lembrasse mais o que era o “YK”.

Felizmente, estes tempos já se perderam nos distantes primórdios da computação. Basicamente, você pode e deve utilizar nomes de variáveis tão claros e descritivos quanto possíveis. Eu diria que isso é até mais importante que comentar o código, e fundamental quando outras pessoas vão editar seu programa.

Vamos ver o código agora com este ajuste:

-----------------------UMA CALCULADORA SIMPLÓRIA------------------------
operacaoMatematica = prompt(“entre com uma letra para escolher a operação matemática: (s)ubtração, (m)ultiplicação ou (d)ivisão.”);
n1 = prompt(“entre com o primeiro número”);
n2 = prompt(“entre com o segundo número”);
alert(“O resultado é...”);
if (operacaoMatematica  == “s”) alert(n1 - n2); //exibimos a subtração
if (operacaoMatematica == “m”) alert(n1 * n2); // exibimos a multiplicação
if (operacaoMatematica == “d”) alert(n1 / n2); //exibimos a divisão
------------------------------------------------------------------------------------------

Observe que não alterei os nomes de variável ‘n1’ e ‘n2’. Poderia utilizar, por exemplo ‘numero1’, mas penso que não agregaria mais significado nem deixaria o código particularmente mais claro.

Porém, enquanto ‘x’ não têm nenhum significado no exemplo, ‘operacaoMatematica’ já nos dá uma boa ideia de qual a função da variável.

Aqui vale também comentarmos outra ‘melhor prática’, que é o uso de um único padrão para o nome de variáveis. Javascript e suas bibliotecas adotam, tipicamente, o formato denominado ‘camelCase’, no qual a primeira palavra que dá origem a variável é em minúscula, e as demais tem a primeira letra em maiúscula.

Existem outras convenções alternativas, que não trataremos aqui. O importante, como este é um assunto controverso, é que todos de uma equipe adotem uma mesma convenção. Neste curso, por exemplo, utilizaremos em todos os exemplos o ‘camelCase’ como padrão para nomes de variáveis.

3.3 Precisamos de Tantos Alertas?

Temos usado algumas estruturas sem pensar muito a respeito, e não há problema nenhum nisso, mas é importante, aos poucos, começar a entendê-las um pouco melhor.

Por exemplo, quando temos, em um código, o comando “alert(5)”, estamos mandando o programa exibir o número 5. Da mesma forma, quando fazemos “alert(x)”, estamos dizendo para ser exibido o conteúdo de “x”, seja este conteúdo um número ou outra informação. Por último, quando dizemos “alert(“ola mundo”)”, estamos dizendo para o programa exibir o texto “ola mundo”. Vamos chamar este texto de uma “string”. Uma string nada mais é que um conjunto de caracteres.

Existem várias coisas que podemos fazer com strings. Em algumas linguagens, estas operações podem ser feitas de formas um pouco diferentes, mas as operações em si são praticamente iguais. Agora, vamos tratar de apenas uma, que é a concatenação.

Concatenar duas strings significa juntá-las. Em javascript, podemos utilizar o sinal ‘+’. Quando temos dois números, sabemos que o ‘+’ significa uma soma. Pois bem, quando temos duas strings, como “ola” e “mundo”, “ola” + “mundo” significa concatenar, ou seja, juntar, as duas strings, resultando em “olamundo”.

E o que acontece se temos uma string e um número, como, por exemplo, “ola” + 5? Neste caso, o resultado será uma string, a string “ola5”. Mais adiante, quando entendermos bem como um programa trata números e strings, isso vai ficar mais claro, mas pense apenas que concatenar um número e uma string resulta em uma nova string.

Sabendo disso, observe uma nova versão de nosso programa:

-----------------------UMA CALCULADORA SIMPLÓRIA------------------------
operacaoMatematica = prompt(“entre com uma letra para escolher a operação matemática: (s)ubtração, (m)ultiplicação ou (d)ivisão.”);
n1 = prompt(“entre com o primeiro número”);
n2 = prompt(“entre com o segundo número”);
// colocaremos na variável resultado o valor da operação definida.
if (operacaoMatematica  == “s”) resultado = n1 - n2;
if (operacaoMatematica == “m”) resultado = n1 * n2;
if (operacaoMatematica == “d”) resultado = n1 / n2;
alert(“O resultado é “ + resultado);
------------------------------------------------------------------------------------------

Observem que “resultado” é uma variável que contém o número resultante das operações. Dentro do “alert” estamos concatenando a string com este número que, como mencionamos, resulta em uma nova string, que é então exibida na janela.

3.4 Novo Pega-Ratão: Soma ou Concatenação?

Agora você vai descobrir por que nossa primeira calculadora não somava. Era para evitar um problema que agora vamos enfrentar. Veja o código abaixo. Tente adivinhar qual o resultado que vai aparecer no alert.

------------------------------------------------------------------------------------------
primeiroNumero = “1”;
segundoNumero = “2”;
alert(primeiroNumero + segundoNumero);
------------------------------------------------------------------------------------------

Surpreso com o resultado que apareceu? Vamos ver o que fizemos. Atribuímos a primeiroNumero uma string (strings são sequências de caracteres entre aspas), e fizemos o mesmo com segundoNumero, depois enviamos um alerta da concatenação entre primeiroNumero e segundoNumero, resultando na string composta por dois caracteres “12”.

Vamos ver o que acontece quando não colocamos as aspas:

------------------------------------------------------------------------------------------
primeiroNumero = 1;
segundoNumero = 2;
alert(primeiroNumero + segundoNumero);
------------------------------------------------------------------------------------------

Agora sim temos o resultado esperado. Então, agora sabemos que uma variável tanto pode conter o número 2, quanto a string “2”.

Isso costuma ser verdade nas diferentes linguagens imperativas. A diferença entre elas é que, em muitas, uma variável só aceita um tipo de dados, e você precisa no início declarar este tipo. Por exemplo “int primeiroNumero;” é um comando em algumas linguagens diferentes da que estamos trabalhando, que diz que primeiroNumero só vai aceitar numeros. Se você tentar colocar uma string, vai aparecer um erro.

Como esta é uma questão complexa, que envolve a diferença entre linguagens, voltaremos a tratar dela mais adiante.

Mas vamos ver o que acontece se tentamos subtrair duas strings que contém digitos. Quando tentamos somar, sabemos que é feita uma concatenação, mas o que acontece na subtração?

------------------------------------------------------------------------------------------
primeiroNumero = “2”;
segundoNumero = “1”;
alert(primeiroNumero - segundoNumero);
------------------------------------------------------------------------------------------

Talvez você esperasse um erro, e é o que acontece em muitas linguagens. Javascript, porém, optou por tentar fazer o que o programador aparentemente queria. Já que ele não tem como subtrair duas strings, ele assume que na verdade as strings queriam representar números, transformou elas automaticamente em números, e fez a operação.

Ou seja, você não precisou se preocupar. Isso tem um lado bom e um lado ruim. Por um lado, você não precisa se preocupar com o tipo da informação sempre que o javacript sabe o que fazer. Por outro lado, justamente quando o javascript faz algo diferente do que você esperava, ele pode gerar um erro que vai ser difícil de resolver. Esse é um dos motivos que muitos programadores preferem aquelas linguagens em que você diz exatamente as coisas, por exemplo, diz exatamente que “primeiroNumero” só vai receber inteiros.

Vamos, então, ver um último código para chegarmos a raiz de nosso problema de somas na calculadora, que talvez você já tenha advinhado:

------------------------------------------------------------------------------------------
primeiroNumero = prompt(“entre com o primeiro número”);
segundoNumero = prompt(“entre com o segundo número”);
alert(primeiroNumero + segundoNumero);
------------------------------------------------------------------------------------------

Como talvez imaginem, o alerta está concatenando os dois números. Isso se deve ao fato que primeiroNumero e segundoNumero recebem strings, mesmo se você digitar apenas números na entrada. Você pode experimentar digitando textos ou textos e números, para tornar mais claro. Este código acima concatena duas strings, independente delas terem letras ou números.

Vamos ver agora o código da nossa calculadora operando também com somas. Para tanto, faremos o que se chama de conversão de tipos. Se o usuário entrar com a string “12”, queremos colocar em uma variável o número 12.

-----------------------UMA CALCULADORA SIMPLÓRIA------------------------
operacaoMatematica = prompt(“entre com uma letra para escolher a operação matemática: a(dição), (s)ubtração, (m)ultiplicação ou (d)ivisão.”);
entradaString1 = prompt(“entre com o primeiro número”);
//convertemos entradaString1 (uma string) no número n1
n1 = parseInt(entradaString1);
entradaString2 = prompt(“entre com o segundo número”);
//convertemos entradaString2 (uma string) no número n2
n2 = parseInt(entradaString2);
if (operacaoMatematica  == “a”) resultado = n1 + n2;
if (operacaoMatematica  == “s”) resultado = n1 - n2;
if (operacaoMatematica == “m”) resultado = n1 * n2;
if (operacaoMatematica == “d”) resultado = n1 / n2;
alert(“O resultado é “ + resultado);
------------------------------------------------------------------------------------------

Nós continuaremos evoluindo nossa calculadora em aulas futuras, a medida que aprendermos novos conceitos e novas boas práticas, mas agora ela está armazenando números em n1 e n2, ao invés de strings. Para tanto utilizamos o comando “n1 = parseInt(entradaString1);”.

No futuro entenderemos que “parseInt”, e também “prompt” e “alert” são todos funções que fazem ações específicas, e ensinaremos você a criar suas próprias funções. Por enquanto, basta saber que você pode atribuir a uma variável um número que resulta da string que você escreve no comando “parseInt”.


Veja também as unidades seguintes:
Siga para unidades 4,5 e 6

Nenhum comentário:

Postar um comentário