Primeiras aulas do curso Lógica de programação I: Os primeiros programas com Javascript e HTML

Lógica de programação I: Os primeiros programas com Javascript e HTML

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:

imagem do código ilustrando as instruções que compõem a página

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.

Salvando o arquivo

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:

Recarregando a página

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:

visualização da página com o código HTML onde vemos a frase 'meu primeiro teste!' em negrito e com tamanho de fonte maior que o outro texto exibido

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:

Apresentação do link no navegador

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:

Resultado do primeiro código JavaScript

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:

Alert do JavaScript com a mensagem_isso sim é um programa

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

alerta "Isso sim é um programa"

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".

Console

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 Lógica de programação I: Os primeiros programas com Javascript e HTML

O curso Lógica de programação I: Os primeiros programas com Javascript e HTML possui 289 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:

Aprenda Lógica acessando integralmente esse e outros cursos, comece hoje!

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana