Javascript Desenvolvimento

Como executar seu primeiro código JavaScript

Vamos aprender e executar nosso primeiro código em JavaScript, entendendo sobre a utilização do console do navegador e ferramentas on-line.

6 meses atrás

Antes de tudo, caso você não saiba o que é JavaScript, aconselho a leitura de nosso artigo “O que é e como começar com JS” e também sobre “O que se pode fazer com JS hoje em dia”. Com esses artigos você terá uma dimensão maior do que é a linguagem e das possibilidades que ela pode proporcionar.

JavaScript Básico
Curso JavaScript Básico
Conhecer o curso

JavaScript no console do navegador

Dito isto, vamos começar a colocar a mão na massa e rodar algo básico utilizando JavaScript. Primeiramente, vamos utilizar o console do navegador, para isto crie um arquivo index.html simples, pode ser como abaixo:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
  	<meta charset="utf-8">
  	<title>Começando com JavaScript</title>
  </head>
  <body>
  	<h2>Começando com JavaScript</h2>
  </body>
</html>

Logo em seguida abra o arquivo em seu navegador de preferência e entre no console pelo inspecionar (normalmente pode ser aberto apertando Ctrl+Shift+i no Windows/linux, cmd+option+c no MacOS ou botão direito → Inspecionar/Inspecionar elemento).

Será aberto um painel com inúmeras ferramentas de desenvolvimento, clique em console. Neste local podemos fazer alguns testes e entender o comportamento de nosso código direto no navegador (além de inúmeras outras funções).

Neste exemplo vamos criar uma caixa de diálogo usando a função alert(), portanto, basta digitar alert("hello world"). Ao executar a função esperamos que seja exibida a seguinte caixa de diálogo:

Legal! Acabamos de executar nossa primeira função em JavaScript, agora vamos estruturar um arquivo em JavaScript para entender o seu funcionamento.

JavaScript Intermediário
Curso JavaScript Intermediário
Conhecer o curso

Criando e executando um arquivo JavaScript

Crie um arquivo chamado script.js na mesma pasta que criamos o arquivo index.html, com a função que acabamos de utilizar no exemplo anterior:

alert("hello world")

Desta forma, nossa pasta com os arquivos html e js terá a seguinte estrutura:

Agora precisamos alterar o nosso arquivo index.html. Lembrando que nós podemos colocar um código JavaScript em qualquer lugar de nosso arquivo html utilizando a tag script. Mas não é recomendado, pois irá gerar certa desorganização e futuras complicações na manutenção de seu projeto.

O ideal é criarmos o arquivo .js e então chamar este arquivo dentro de nosso index.html, para isto também vamos usar a tag script, da seguinte forma:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
  	<meta charset="utf-8">
  	<title>Começando com JavaScript</title>
  </head>
  <body>
  	<h2>Começando com JavaScript</h2>
	<script src="./scripts.js"></script>
  </body>
</html>

Desta forma, o arquivo scripts.js será executado logo na abertura de nosso index.html, exibindo a caixa de diálogo referente ao código de alerta que criamos, como abaixo:

Além das formas citadas acima, para fins de teste e aprendizado, nós também podemos executar nosso código JavaScript em ferramentas online, como o JSFiddle.

Utilizando a ferramenta JSFiddle

Ao entrar no JSFillde logo percebemos que o layout é dividido em quatro seções, sendo: HTML, CSS, JavaScript e a última conta com a preview gerada.

Como podemos ver abaixo, perceba que está implementado o mesmo código que utilizamos no exemplo acima, com a única diferença no CSS, onde podemos ver exatamente o resultado esperado na última seção:

Existem outras ferramentas similares como o JSEditor.io e playcode.io.

Conclusão

Neste artigo demos os primeiros passos em JavaScript. Aprendemos como utilizar o console do próprio navegador, como estruturar os arquivos .js de forma ideal e por último como podemos utilizar ferramentas online que vão nos auxiliar em testes e no aprendizado da linguagem.

Aguarde para mais artigos sobre JavaScript logo em breve :)

Desenvolvedor Front-end
Formação Desenvolvedor Front-end
Conhecer a formação

Autor(a) do artigo

Wesley Gado
Wesley Gado

Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão.

Todos os artigos

Artigos relacionados Ver todos