JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Comece a programar hoje - Converse com seu navegador

Olá! Me chamo Flávio Almeida, bem-vindos ao curso de Lógica de Programação I: Os primeiros programas com JavaScript e HTML.

Se você iniciou este curso é porque deseja aprender a programar e dar os primeiros passos neste universo da programação. Se sua meta for criar uma aplicação web, um aplicativo para seu smartphone favorito, macros de Excel, ou automatizar tarefas do dia a dia, o seu ponto de partida será o mesmo - a lógica de programação.

Assim como em qualquer profissão, o programador precisa de ferramentas para que possa exercer esta função. Uma delas é o próprio navegador, o browser que você costuma utilizar para navegar na web. Podem ser utilizados o Edge, o Firefox, Chrome, no caso, utilizarei o Google Chrome. É recomendável ao aluno utilizar o mesmo navegador do instrutor para ter paridade visual com o que é feito ao longo do curso.

Se você tem dúvidas de que o browser é uma ferramenta de desenvolvimento, basta olharmos para qualquer página e percebermos que tudo que está ali é resultado do trabalho de programação de algum indivíduo. No caso, observaremos a página inicial da Alura. Alguém elaborou um conjunto de instruções, que ao serem interpretadas pelo navegador, exibiu uma página para nós.

Ao clicarmos na página e utilizarmos o atalho "Ctrl + U", veremos o conjunto de instruções, os códigos que foram escritos para gerar tudo que foi feito, que foi pensado por uma equipe de desenvolvedores:

Além do browser, será necessário utilizarmos algum editor de texto, pode ser um simples, que já vem no sistema operacional. Entretanto, caso seja usuário do OS Windows, é interessante utilizar algum outro, como o NotePad++, ou o Sublime.

Nos exercícios desta aula, você encontra os endereços para fazer o download destes editores, bem como instruções para suas instalações.

No caso, utilizo o Sublime, se você desejar adotá-lo para ter uma paridade visual com o instrutor ao longo do treinamento, o endereço para baixá-lo estará disponível nos exercícios.

Como já temos o editor de texto e o navegador, vamos dar início ao nosso primeiro programa?

Comece a programar hoje - Criando seu próprio arquivo HTML

Nesta aula, daremos início à criação de nosso primeiro programa.

Para melhor organização, criaremos uma pasta chamada logica, onde inseriremos todos os arquivos que vamos construir ao longo do treinamento.

Abriremos o editor de texto, que é o Sublime, e tem um arquivo em branco. Como padrão, temos o atalho "Ctrl + S" que serve para salvarmos o arquivo que será o programa.

Clicaremos na pasta logica e salvaremos o novo arquivo como primeiro_teste.html. Ainda não temos certeza que será um programa, por isto faremos primeiro um teste.

Tendo o arquivo, é importante a inserção do .html, por esta ser a linguagem que o navegador entende e, ao utilizarmos a extensão, estamos orientando-o sobre qual deve ser a interpretação do arquivo por parte do navegador e do sistema operacional.

Em nosso primeiro teste, no Sublime, digitaremos:

Meu primeiro teste!


Seria isso um programa?

Feito isso, salvaremos, escrevemos as mensagens e deixamos o espaço de duas linhas entre a primeira frase e a segunda.

Retornaremos ao navegador, no caso o Google Chrome. Solicitaremos que ele abra o nosso arquivo. Selecionaremos, na barra de menu superior, "Arquivo > Abrir arquivo...", ou com a tecla de atalho "CTRL + O" e no diretório selecionaremos o arquivo que acabamos de criar.

Ao abrirmos, é exibido o seguinte:

Meu primeiro teste! Seria isso um programa?

Notamos que há uma peculiaridade, será que isto é um programa?

Quando digitamos em nosso editor de texto, no código-fonte ou origem, pulamos duas linhas, entretanto, ao exibir no navegador, isto é ignorado completamente, e as frases são exibidas lado a lado.

Por que isso acontece?

A primeira coisa que precisamos entender é que o navegador está preparado para ler código HTML. Ele não sabe que, ao pularmos a linha com a tecla "Enter", ainda que sejam várias vezes, ele deve pular linhas. Tentaremos colocar quantas linhas quisermos entre as duas frases, e recarregar a página utilizando o botão "Recarregar", logo ao lado da barra onde se digita o endereço no navegador:

Com o uso do atalho "Ctrl + R", ou simplesmente pressionando-se a tecla "Enter" com o cursor sobre o endereço, o navegador nunca mostrará as linhas puladas. A ideia é que precisamos utilizar um comando especial, que o HTML tenha preparado, para pular linhas, no caso o <br>:

Meu primeiro teste!
<br>
Seria isso um programa?

Trata-se de uma tag HTML, e todas têm esta característica de começar com o símbolo de "menor" (<), o nome da tag - "br" é abreviação de break -, e fecha com o símbolo de "maior" (>). Isto indica ao navegador que ele deve pular uma linha.

Feitas estas alterações, atualizaremos a página e veremos que de fato foi pulada uma linha:

Meu primeiro teste!

Seria isso um programa?

Ou seja, foi passada uma instrução HTML de quebra, que o navegador está preparado para entender. Se quisermos pular mais duas linhas, basta acrescentarmos mais dois comandos <br>:

Meu primeiro teste!
<br>
<br>
<br>
Seria isso um programa?

Após salvarmos, retornaremos ao navegador, e recarregaremos a página. Temos o seguinte resultado:

Meu primeiro teste!


Seria isso um programa?

É esta a primeira tag HTML que aprendemos, para pular linhas. Como estamos criando o programa, geraremos uma área de destaque que exibe a mensagem "Meu primeiro teste!".

O HTML conta com a tag <h1>. O "h" se origina da palavra heading, ou seja, cabeçalho. Significa que este é o primeiro título, ou título principal é algo que precisa ser destacado em uma página.

Uma particularidade da tag <br> é que, no início, inserimos <> e pronto - já para a tag <h1> e a maioria das tags HTML, precisaremos da mesma tag com uma barra </h1> para fechá-la, conforme vemos abaixo:

<h1> Meu primeiro teste!</h1>

Isso indica que ela começou antes de "Meu" e terminou após "teste!". Ou seja, tudo que está entre <h1> e </h1> está marcado pela tag <h1>. É como se usássemos um marcador de texto e, depois, passássemos sobre a frase "Meu primeiro teste!" e, desta forma, marcaríamos o conteúdo.

Ao recarregarmos a página, veremos que foi dado destaque à frase:

Isto porque trata-se do primeiro título de uma página.

Agora ficamos com um questionamento: o que acabamos de criar é um programa?

Comece a programar hoje - Dê olá ao mundo

Dando continuidade às aulas anteriores, ficamos com o seguinte questionamento: seria isto um programa? Para verificarmos, faremos o seguinte:

<h1>Meu primeiro teste!</h1>
<br>
Seria isso um programa? Descubra visitando a Alura aqui!

Utilizaremos uma tag chamada âncora, representada pela letra "a". O conteúdo dela será a palavra "aqui":

<h1>Meu primeiro teste!</h1>
<br>
Seria isso um programa? Descubra visitando a Alura <a>aqui</a>!

Por meio do atributo href, indicaremos o endereço web da Alura:

<a href="http://www.alura.com.br">aqui</a>

Utilizamos uma tag HTML de âncora para criar links na web. Salvaremos e retornaremos ao navegador, feito isso, recarregaremos a página. Vemos que a palavra aqui está em destaque:

Ao clicar no texto somos direcionados para a página inicial da Alura.

O problema do código que escrevemos é que, apesar de interessante, o HTML é estático, isto é, não é dinâmico. E se quisermos que o HTML, em vez de pular poucas linhas, pule dez, quinze, ou vinte? Teremos que abrir o arquivo HTML e inserir diversas tags do tipo <br>, da seguinte forma:

<h1>Meu primeiro teste!</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Seria isso um programa? Descubra visitando a Alura <a href="http://www.alura.com.br">aqui</a>.

Assim, sempre que quisermos aumentar ou diminuir o número de quebras de linha teremos que remover ou adicionar as tags <br>, sempre modificando o documento. Como ele é estático, não é possível, por exemplo, exibir um contador na tela com a passagem das horas, tampouco será possível capturar as informações do usuário.

Para que possamos de fato programar, precisaremos utilizar uma outra linguagem. O navegador é poliglota, e "fala" algumas linguagens além de HTML, sendo capaz de trabalhar com uma linguagem verdadeiramente de programação, que é o JavaScript.

Neste treinamento, aprenderemos a lógica de programação utilizando a linguagem JavaScript.

Queremos exibir um alerta para o usuário, um pop-up que surja na tela e contenha a seguinte mensagem: "isso aqui é uma linguagem dinâmica" ou "isso aqui é uma linguagem de programação".

Como fazer isso? Primeiro, definiremos a mensagem em JavaScript. E para criarmos um texto no JavaScript, é necessário que ele esteja entre aspas:

<h1>Meu primeiro teste!</h1>
<br>
Seria isso um programa? Descubra visitando a Alura <a href="http://www.alura.com.br">aqui</a>!

"Isso sim é um programa"

O JavaScript nos permite exibir um pop-up na tela, que será de alerta. Precisaremos utilizar uma instrução da linguagem indicando que um alerta deverá ser exibido:

alert"Isso sim é um programa";

Há uma peculiaridade: o texto deve estar entre parênteses e aspas duplas " ", e com um ; (ponto e vírgula) no fim:

alert("Isso sim é um programa");

Uso do ponto e vírgula no final de uma instrução JavaScript é opcional e neste treinamento não teremos problemas com sua ausência. Contudo, ao avançar nesta linguagem você verá determinados processamentos de código podem resultar em algo não esperado na ausência do ponto e vírgula. Sendo assim, vamos criar desde já o hábito de terminar uma instrução com o ponto e vírgula.

Adiante veremos mais sobre isso. Em teoria, isto é suficiente para escrevermos nosso primeiro código em JavaScript. Salvaremos e atualizaremos a página. Ao abrirmos o arquivo, o resultado é o seguinte:

Porém, o pop up não aparece. O que temos é o texto que gostaríamos que fosse exibido na tela para o usuário aparecendo no corpo do HTML e, ainda, com um problema de acentuação - que resolveremos adiante.

Por que isto acontece? Como o navegador é poliglota, ou seja, entende mais de uma linguagem (por exemplo, HTML e JavaScript), temos que indicar que determinada linha é uma instrução.

Como faremos isto? Com uma tag <script>, que também abre e fecha:

<script>
alert("Isso sim é um programa");
</script>

Assim, o conteúdo do <h1> é: "Meu primeiro teste!"; e o da tag <script> é o alert:

<h1>Meu primeiro teste!</h1>
<br>
Seria isso um programa? Descubra visitando a Alura <a href="http://www.alura.com.br">aqui</a>!

<script>

    alert("Isso sim é um programa");

</script>

Quando o navegador for processar esta instrução, ele perceberá que ela está inserida em uma tag <script>, e deixará de olhá-la como HTML, passando a interpretá-la como JavaScript. Retornaremos ao navegador e recarregaremos a página, e teremos o seguinte alerta:

Podemos pressionar "Ok", e vemos que há um problema de acentuação:

Para resolvermos o problema da acentuação, ao salvarmos o arquivo em nosso disco, o faremos com um conjunto de caracteres, e o padrão é UTF-8. Sendo assim, utilizamos a tag desta maneira:

<meta charset="UTF-8">

Estamos indicando ao navegador como deve ser a interpretação das cadeias de caracteres, ou seja, do texto que está sendo exibido. Portanto, a simples adição desta tag resolverá o problema de acentuação:

<meta charset="UTF-8">

<h1>Meu primeiro teste!</h1>
<br>
Seria isso um programa? Descubra visitando a Alura <a href="http://www.alura.com.br">aqui</a>!

<script>

    alert("Isso sim é um programa");

</script>

Salvaremos e retornaremos ao navegador. Podemos utilizar o atalho "Ctrl + S" para salvar. Recarregaremos a página e veremos o pop up, bem como o texto em HTML, com o problema de acentuação resolvido. Será que é necessário todo este texto? O que aconteceria, por exemplo, se removêssemos os parênteses de "Isso sim é um programa"?

<meta charset="UTF-8">

<h1>Meu primeiro teste!</h1>
<br>
Seria isso um programa? Descubra visitando a Alura <a href="http://www.alura.com.br">aqui</a>!

<script>

    alert"Isso sim é um programa";

</script>

Salvaremos, retornaremos ao navegador e, ao recarregaremos a página, nenhum pop up será exibido. Com isto, entendemos que é interessante aprendermos que todo navegador conta com um plug-in, um depurador, que indica onde nosso código tem problemas. Ele pode ser acessado por meio da tecla "F12", ou por "Ctrl + Shift + C".

No depurador, há uma aba chamada "Console", localizada na barra de menu superior. É possível o abrirmos acessando o menu "Visualizar" também, na barra de menu superior, selecionando "Desenvolvedor > Console JavaScript".

Há uma mensagem indicando que em nosso teste, na linha 9, há um erro de sintaxe:

Uncaught SyntaxError: Unexpected string

String é um nome bastante comum para texto, dados do tipo "texto", em programação. Portanto, temos um texto não esperado. Retornaremos ao editor de texto no ponto indicado pelo console, isto é, a linha 9, onde se localiza o erro. Toda linguagem de programação de qualidade possui algum mecanismo capaz de indicar onde há erros de sintaxe em seu código.

Feito isso, retornaremos os parênteses de onde os tiramos:

<meta charset="UTF-8">

<h1>Meu primeiro teste!</h1>
<br>
Seria isso um programa? Descubra visitando a Alura <a href="http://www.alura.com.br">aqui</a>!

<script>

    alert("Isso sim é um programa");

</script>

Salvaremos, retornaremos ao navegador e recarregaremos a página. Vimos que sumiu a mensagem de erro e foi exibido uma alerta em pop up.

Os elementos que vimos agora - o browser, o editor de texto, o depurador - são usados para identificarmos os erros em nosso código e compõem as ferramentas que utilizaremos por todo nosso treinamento.

Sobre o curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

O curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação possui 292 minutos de vídeos, em um total de 136 atividades. Gostou? Conheça nossos outros cursos de Lógica em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Comece a programar hoje
• Comunique-se com o usuário
• Torne seu programa dinâmico com variáveis
• Crie suas próprias funcionalidades
• Pratique resolvendo problemas do dia-a-dia
• Execute códigos diferentes dependendo da condição
• Repita tarefas com laços
• Interaja de maneira diferente com o usuário
• Trabalhe com muitos dados