DevHeroes

Ambiente de Desenvolvimento - JavaScript (S01E02)

Marcelo Dapper • 29 de novembro de 2016 • ☕️ 4 min de leitura

Neste post vamos ver como configurar um ambiente de desenvolvimento para podermos programar em JavaScript.

JavaScript Ambiente de Desenvolvimento

Se você vem de linguagens como C# ou Java deve já estar pensando que precisamos de uma avançada IDE (Ambiente de Desenvolvimento Integrado, em inglês). Mas este não é o caso para o JavaScript.

Ferramentas

Vamos precisar inicialmente apenas de duas ferramentas, que você já deve ter disponível em seu computador. Precisamos de um navegador de internet e de um editor de texto.

Para visualizar o resultado precisamos de um navegador, irei utilizar o Google Chrome nesta série. Outra boa opção é o Mozilla Firefox, ele também fornece os recursos que vamos precisar, se você já usa ele não tem necessidade de mudar para o Chrome apenas para acompanhar essa série.

Segue um link para vocês baixarem e instalarem ele, caso queiram:

Google Chrome

Editor de texto

Os documentos em HTML, CSS e JavaScript são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum, como o Bloco de Notas do Windows, ou o TextEdit do macOS.

Para facilitar a produção de documentos, existem editores JavaScript específicos, com recursos sofisticados, que facilitam a realização de tarefas repetitivas e possuem outros recursos que lhe auxiliam no desenvolvimento.

Se você agora está estudando JavaScript, provavelmente estudou primeiro HTML e CSS. Quando fez isso, provavelmente lhe indicaram instalar um editor de texto. Possivelmente você já usa um que gosta, não é preciso você trocar.

Segue uma lista com alguns dos mais usados:

Qualquer um deles vai atender perfeitamente suas necessidades para acompanhar esta série. Eu atualmente tenho usado o Atom como meu editor principal, mas recentemente resolvi testar o Visual Studio Code e estou gostando bastante dele, ele tem se mostrado mais leve que o Atom.

Notem que nenhum deles é uma IDE, mas possuem recursos avançados e podem ser estendidos pela instalação de pacotes.

A instalação deles é bastante simples, não vou passar orientações de como fazer isso, mas se tiverem qualquer problema deixam um comentário que vou tentar lhes ajudar.

Agora que temos o navegador e o editor instalados, vamos ao que interessa.

Como rodar nosso primeiro código JavaScript

Primeiro crie um arquivo chamado index.html e salve ele numa pasta de sua preferência.

Abra esse arquivo com seu editor de texto e insira nele a estrutura básica em HTML5 conforme segue:

Copy
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ambiente de Desenvolvimento – JavaScript (S01E02)</title>

  </head>
  <body>

  </body>
</html>

Conforme vemos abaixo, na linha 6 adicionamos a abertura e o fechamento da tag <script></script>. Dentro desse bloco, entre a abertura e o fechamento da tag, é onde iremos inserir nosso código JavaScript no próximo passo.

Copy
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ambiente de Desenvolvimento – JavaScript (S01E02)</title>
    <script></script>  </head>
  <body>

  </body>
</html>

Até agora criamos apenas a estrutura.

Vamos adicionar um método padrão da linguagem que exibe uma mensagem em uma janela de alerta. O nome dele é alert, para exibirmos essa mensagem precisamos passar algum texto que vai ser mostrado, fazemos isso da seguinte maneira alert("Mensagem para exibir");.

Nos próximos artigos vamos entender melhor como é o funcionamento disso, por enquanto queremos apenas testar se nosso ambiente de desenvolvimento está funcionando.

Na linha 7 adicionamos o método alert, com a mensagem “Olá mundo!”, conforme segue:

Copy
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ambiente de Desenvolvimento – JavaScript (S01E02)</title>
    <script>
      alert("Olá mundo!");    </script>
  </head>
  <body>

  </body>
</html>

Para vermos o resultado precisamos abrir o index.html no navegador. Ao fazermos isso irá aparecer uma caixa de mensagem parecida com a que segue:

Janela de Alerta do Chrome

Acredito que os passos aqui abordados são simples, mas se ficarem presos em algum ponto deixem suas dúvidas nos comentários que vou procurar ajudar.

Se desejarem podem baixar o código final no GitHub. Vou manter um repositório lá de toda a série.

Conclusão

Neste post vimos como configurar nosso ambiente de desenvolvimento para escrevermos e executarmos nosso código JavaScript. Aqui consideramos apenas uma maneira de usarmos a tag <script>.

No próximo post vamos ver de que outra forma podemos usar essa tag e quais as vantagens e desvantagens de cada um, além dos principais atributos dela e como usar eles.