Introdução à Programação em JavaScript: Exercícios Práticos, Manuais, Projetos, Pesquisas de Lógica

Baixe Introdução à Programação em JavaScript: Exercícios Práticos e outras Manuais, Projetos, Pesquisas em PDF para Lógica, somente na Docsity!

Casa do Código

“Aos meus pais, sempre caminhantes”

• Paulo Silveira

“Aos meus pais, irmão e irmã que sempre me mostraram o caminho”

• Adriano Almeida

i

Casa do Código

Agradecimentos

Esperamos que você aproveite o livro. Foi feito com muita atenção, para que o nível de dificuldade sempre suba, sem desanimar o iniciante. Ao término, você será capaz de criar suas próprias estruturas gráficas e até mesmo um simples jogo de computa- dor. Muitas decisões não foram fáceis. Preterir o console.log em favor do desengon- çado document.write, explicar funções antes de ifs e fors, definir funções através de atribuição em vez da sintaxe mais comum. Esses são apenas algumas das questões que apresentavam vantagens e desvantagens para uma melhor abordagem didática. Realizamos nossas escolhas depois de alguns testes com pessoas leigas em computa- ção. Um agradecimento especial ao Leonardo Wolter e Francisco Sokol pela base dos exercícios com animações. Outro ao Erich Egert, pelo teste do livro com alunos e diversas sugestões para novos desafios.

iii

• 1 Comece a programar hoje Sumário
  • 1.1 Converse com seu navegador
  • 1.2 Criando seu próprio arquivo HTML
  • 1.3 Um pouco mais de HTML
  • 1.4 Dê olá ao mundo
  • 1.5 Revise o código: seu primeiro programa
  • 1.6 Utilize o Chrome e o Notepad++
    • Chrome 1.7 Socorro! Meu programa não funciona. Conheça e use o console do
  • 1.8 Socorro! A acentuação não está funcionando corretamente
• 2 Comunique-se com o usuário
  • 2.1 Dê olá ao mundo de outras formas
  • 2.2 Trabalhe com números
  • 2.3 Revisando o seu código: trabalhando com números
  • 2.4 Organize seus dados em variáveis
  • 2.5 Reescrevendo a média de idade dos seus amigos
  • 2.6 Revisando o seu código: organize-se com variáveis
  • 2.7 Pare de escrever BR tantas vezes!
  • 2.8 Revise o código: crie sua primeira função
  • 2.9 Funções passando informações e chamando outras funções
  • 2.10 Revise o código: usando a função mostra
  • 2.11 Mostrando mensagens secretas, apenas para o programador
  • 2.12 Para saber mais: comentários
  • 2.13 Compartilhe seu código com seus amigos!
• 3 Pratique resolvendo problemas do seu dia a dia Sumário Casa do Código
  • 3.1 Como está seu peso? Saudável?
  • 3.2 Utilize uma função para calcular o IMC de cada amigo
  • 3.3 Revise o código: calculando o IMC
  • 3.4 Trabalhe com dados capturados: pergunte a altura e peso do usuário
  • 3.5 Exercícios: pergunte os dados do usuário para calcular o IMC
  • 3.6 Descubra quantos dias seus amigos já viveram
  • 3.7 Você já entendeu a ordem das chamadas das funções?
  • 3.8 Utilize o console do Chrome para fazer testes!
  • 3.9 Uma forma mais comum de declarar funções
• 4 Execute códigos diferentes dependendo da condição
  • 4.1 Quantos pontos tem seu time de futebol?
  • 4.2 Verifique a situação do seu time de futebol
  • 4.3 Revisando nosso código: pontos do campeonato
  • 4.4 O seu IMC está ideal?
  • 4.5 Jogo: adivinhe o número que estou pensando
  • 4.6 Revisando seu código: o jogo da adivinhação
• 5 Como repetir tarefas do programa?
  • 5.1 Quando serão as próximas copas do mundo?
  • 5.2 Realize o loop somente em determinadas condições
  • 5.3 Revise seu código: mostre os anos de copas até cansar
  • 5.4 Caracteres e números, qual é a diferença afinal?
  • 5.5 Revise seu código: transforme texto em números
  • 5.6 Praticando mais um pouco: Faça tabuadas
  • 5.7 Aprenda uma forma diferente de mostrar a tabuada: o comando for
  • 5.8 Reescrevendo a tabuada com o for
  • 5.9 A média de idades, mas de uma forma mais interessante
  • 5.10 Jogo: Mais chances para adivinhar o número que estou pensando
  • 5.11 Revisando nosso código: O jogo da adivinhação dos números
  • 5.12 Exercícios: trabalhando com um loop dentro do outro
• 6 Arrays: trabalhe com muitos dados Casa do Código Sumário
  • 6.1 Integre o JavaScript com HTML
  • 6.2 Revisando uso de HTML e criando o jogo
  • 6.3 Facilite o jogo da adivinhação colocando mais números!
  • 6.4 Evite os número repetidos no Bingo
• 7 Gráficos para deixar tudo mais interessante
  • 7.1 Desenhe linhas e figuras
  • 7.2 Criando todo tipo de imagem
  • 7.3 Não vou conseguir lembrar de tudo isso! APIs e bibliotecas
  • 7.4 Revise seus primeiros passos com o canvas
  • 7.5 Cansei de repetir código! Funções novamente
  • 7.6 Loops e funções para nos ajudar
• 8 Apêndice - Animações e pequenos jogos
  • 8.1 Crie uma lousa capturando o movimento do mouse
  • 8.2 Exercícios para nossa tela de desenho
  • 8.3 Crie animações
  • 8.4 Revise e faça novas animações
  • 8.5 Desafio: o jogo do tiro ao alvo
• 9 Últimas palavras - Além da lógica de programação
  • 9.1 Objetos
  • 9.2 Boas práticas que foram violadas durante o aprendizado
  • 9.3 Pratique muito!
  • 9.4 Continue seus estudos

Capítulo 1

Comece a programar hoje

Não importa sua idade, profissão e objetivo: programar é mais do que divertido, é um constante desafio. Queremos tornar o programa mais rápido, mais legível, mais elegante e mais útil. Prepare-se para encontrar problemas, quebra-cabeças e questões o tempo todo. Seu aprendizado aqui será útil não apenas para começar a criar uma página web. Você estará preparado a enfrentar as fórmulas do Excel, desenvolver suas próprias pequenas ferramentas, entender o funcionamento das aplicações que utiliza na in- ternet e quem sabe criar um programa para seu próprio celular e dos seus amigos. O segredo, sem dúvida, é praticar. Não se limite apenas com os exemplos e exer- cícios do livro. Vá além, deixe sua curiosidade guiar a criação de novos programas.

Siga os capítulos passo a passo. Assim que começar a aprender mais, oferecere- mos exercícios e desafios oficiais. Não fique apenas na leitura! A prática é o segredo. Faça todas as sugestões e veja você mesmo o resultado. Caso fique curioso, troque os dados, modifique as rotinas, experimente, invente. A programação nos dá esse poder de criação. Crie!

1.1. Converse com seu navegador Casa do Código

Está com dúvidas? Tem dois locais para resolver seu problema. Um é uma lista de discussão via email, criada especialmente para este livro: https://groups.google. com/group/comece-a-programar/

O outro é usar o maior portal de programação do país, o GUJ: http://www.guj. com.br/ Em ambos os casos, lembre-se de ser bem específico na sua pergunta, dando detalhes dos problemas e a lista organizada do seu código.

1.1 Converse com seu navegador

Há muito o que aprender. O mais importante é que você possa rapidamente escrever seus próprios programas e depois executá-los para ver o resultado. Existem muitas linguagens de programação, e todas são alternativas viáveis para um primeiro con- tato. Escolhemos uma linguagem para você: o JavaScript , que possui vantagens e desvantagens como todas as outras, mas para o aprendizado ela é muito adequada: não haverá necessidade de instalar nada para começar a programar.

Abra uma página qualquer. Pode ser o site da casa do código, http://www. casadocodigo.com.br, pode ser o site da Caelum, http://www.caelum.com.br ou do seu portal preferido. Para fazer isto, você utilizou algum navegador (browser), como o Internet Explorer, o Firefox e o Chrome, mas como ele fez toda essa mágica de mostrar essa página bonita para nós?

Na realidade, não há mágica nenhuma envolvida nisso. O navegador apenas obedece à instruções que alguém deu para ele. Alguém disse para ele que aquelas imagens deveriam aparecer, que determinados textos precisavam ser exibidos, que a cor de fundo da página é algum tom de cinza, que quando você clica em um botão, uma mensagem surge para você e assim por diante. Quem fez isso? O programador, muitas vezes também chamado de desenvol- vedor. Que é justamente quem sabe dar as instruções para o navegador realizar. Todos esses navegadores vão pegar essas instruções, na forma de um código e vai apresentá-lo na tela de uma forma agradável. O que viria a ser um código?

Nesse mesmo site que você entrou, vamos ver qual foi o código utilizado. Para isso, você deve seguir passos diferentes de acordo com o navegador.

No Chrome, clique no ícone da ferramenta, depois Ferramentas e Exibir código fonte. CTRL+U é o atalho para isso.

1.1. Converse com seu navegador Casa do Código

Figura 1.2: Menu para exibir código fonte no Firefox

No Internet Explorer 9, dê um clique com o botão direito no fundo da página e escolha Visualizar código fonte.

Casa do Código Capítulo 1. Comece a programar hoje

Figura 1.3: Menu para exibir código fonte no Explorer

Parece complicado? O navegador (browser), pegou todo esse código e gerou aquela representação, agradável aos nossos olhos. Podemos nós mesmos criar algo assim para apresentar os dados que desejarmos. Isto é, podemos criar nossa própria página , que vai interagir com quem a estiver acessando, o usuário.

1.2 Criando seu próprio arquivo HTML

Para criar nosso primeiro código, abra um editor de texto comum, como o Bloco de Notas (Notepad) do Windows ou o gedit do Linux. Editores de texto como o Word não ajudam muito neste caso, pois eles gravam o arquivo de uma forma diferente da qual o seu navegador está preparado. Digite o seguinte texto:

Meu primeiro teste! Seria isso um programa?

Casa do Código Capítulo 1. Comece a programar hoje

Esse é o resultado usando o Google Chrome. Caso você tenha mais de um nave- gador instalado, pode utilizar o clique da direita no arquivo e selecionar o abrir com para escolher um outro navegador

Um arquivo HTML nos permite não apenas apresentar informações que foi co- locada dentro dele. Podemos realizar operações, pedir informações e executar co- mandos. Veremos isso em breve.

1.3 Um pouco mais de HTML

Nossa página, por enquanto, só exibe textos fixos (chamado de conteúdo estático). Podemos alterá-la para exibir informações diferentes, usando tags para mudar a forma com que os dados são representados. Abra novamente seu arquivo html. Você pode até deixar o editor aberto o tempo inteiro, pois modificaremos o arquivo com frequência. Vamos alterá-lo:

Meu primeiro teste! Seria isso um programa?

Não consigo fazer nada além de mostrar conteúdo fixo?

Salve o arquivo e abra novamente a página (se ela já estiver aberta, basta clicar em atualizar no seu navegador). O resultado é previsível:

Figura 1.6: Resultado das nossas mudanças

Não se preocupe com os nomes das diferentes tags (tags são, por exemplo, , , etc). O importante nesse momento é ver como funciona um HTML no geral: através das tags realizamos marcas (markups) no texto para enriquecê-lo.

1.3. Um pouco mais de HTML Casa do Código

Esse tipo de texto é conhecido como hipertexto, por permitir navegar entre dife- rentes páginas e sites. Podemos, por exemplo, adicionar um link (ponteiro) para um site, como o da Casa do Código:

Meu primeiro teste! Seria isso um programa?

Não consigo fazer nada além de mostrar conteúdo fixo?

Conheça o site da nossa editora: Clique aqui!

Salve o arquivo com essas duas novas linhas e abra a página no seu navegador. Lembrando que para abri-la, dê dois cliques no arquivo, ou se ele já estiver aberto, atualize a página clicando no ícone de recarregamento (reload).

Figura 1.7: Criando um link para outra página

A forma de escrever HTML, com aqueles sinais de < e >, também conhecido como a sintaxe do HTML, pode assustar a primeira vez. Assim como o uso do , a tag envolve um pedaço do nosso texto. Mais ainda, ela pos- sui um atributo, nesse caso o tal do href, indicando para onde o navegador deve ir se alguém clicar neste link. É comum que tags html possuam diversas proprie- dades diferentes, modificando a visualização e o comportamento de determinados trechos do documento. Uma tag mais o seu conteúdo forma um elemento HTML , por exemplo o Não. Há muitas tags. Não se preocupe em decorá-las. Você perceberá que com o pas- sar do tempo e a prática, decidir qual tag deverá ser utilizada se tornará um processo natural.

1.4. Dê olá ao mundo Casa do Código

Figura 1.8: Começando a interagir mais

Vai ser muito frequente repetir o processo de alteração do nosso código. Esse processo é: adicionar novas linhas no arquivo html, salvá-lo, abri-lo novamente no navegador. Como vimos, em vez de dar dois cliques na página, há também o botão de atualizar (Reload), que puxará as novas informações do nosso arquivo, executando tudo de novo. Sim, você já está programando! Parabéns, esse foi seu primeiro código usando a linguagem JavaScript. Passos pequenos e muita prática durante a leitura deste livro o levará mais longe do que imagina. Algo deu errado? No final dessa lição aprenderemos a usar algumas ferramentas do navegador para nos auxiliar na descoberta dos problemas que podem acontecer. Além disso, todas as lições possuem seções de revisão de código, onde você poderá comparar o código que você fez com o que era esperado. Repare que nosso código possui uma série de caracteres não usuais, como pa- rênteses e ponto-e-vírgula. Será que não funcionaria fazer um simples alert "olá mundo"? Cada linguagem tem seu conjunto de regras, sua sintaxe , e que devem ser respeitadas para que o código possa ser executado. No caso do JavaScript, há toda uma especificação que os navegadores seguem (ou deveriam seguir). Caso você esteja estudando através de uma versão digital do livro, pode ter fi- cado tentado a copiar e colar o código desse alert. Não faça isso. Uma parte muito importante do aprendizado é errar a sintaxe de uma linguagem, além de praticá-la mesmo quando óbvia. Caso você tenha errado algo, o navegador emitirá uma men-

Casa do Código Capítulo 1. Comece a programar hoje

sagem de erro. Às vezes ela pode ajudar bastante, mas dependendo do navegador, pode levá-lo ao desespero.

1.5 Revise o código: seu primeiro programa

Vimos como escrever nosso primeiro código. Durante todas as lições, sempre tere- mos seções de revisão. É através dela que você pode verificar o que fez até agora, e também seguir novamente os passos, de maneira mais sucinta, para consolidar seus novos conhecimentos. Vamos fazer novamente? Abra o editor de texto e digite o seguinte código, que já conhecemos:

Meu primeiro teste! Seria isso um programa?

Não consigo fazer nada além de mostrar conteúdo fixo?

Conheça o site da nossa editora: Clique aqui!

Agora, salve-o. Como é um arquivo novo, o editor vai perguntar para você onde e com que nome quer gravá-lo. Escolha uma pasta de fácil acesso e um nome sig- nificativo. No nosso caso, usamos como minha_pagina.html. Para não perder o que fez até aqui, pode gravar essa nova versão com outro nome, como por exemplo meu_primeiro_programa.html. Agora encontre o arquivo e dê dois cliques nele. O navegador deve abrir, interpretando as tags HTML e executando nosso código Ja- vaScript! Vamos fazer alguns exercícios, baseado no que já aprendemos:

1. Edite o seu arquivo e adicione mais um alert. Além da mensagem podemos fazer mais com JavaScript!, coloque um outro alert escrevendo a data que você começou a programar. Lembre-se de salvar o arquivo e abri-lo no navegador. Caso seu navegador já esteja aberto com a sua página, basta atualizá-la.

2. Realize outros testes. Você pode ter mais de uma seção com a tag , colocando outros alert lá? É importante ser curioso com seu pró-