Como executar seu primeiro código JavaScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 07 Min 44 Seg Tempo restante da oferta: 14 07 44 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Como executar seu primeiro código JavaScript [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/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. [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/EXECUTAR-PRIMEIRO-CÓDIGO-JAVASCRIPT.png) 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](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript/ "O que é e como começar com JS")” e também sobre “[O que se pode fazer com JS hoje em dia](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia/ "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 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos) ## 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: ```html Começando com JavaScript Começando com JavaScript ``` 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). ![Console do navegador](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/tela-console-navegador-1024x669.png) 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: ![Executando função JavaScript](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/tela-console-navegador2-1024x673.png) Legal! Acabamos de executar nossa primeira função em **JavaScript**, agora vamos estruturar um arquivo em **JavaScript** para entender o seu funcionamento. [ ![C Básico](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/c.svg) Curso C Básico Conhecer o curso ](https://www.treinaweb.com.br/curso/c-basico) ## 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: ![Estrutura de arquivos](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/estrutura-js.png) 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: ```html Começando com JavaScript Começando com JavaScript ``` [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) 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: ![Executando JavaScript](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/script-executado-1024x554.png) 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: ![Testando código javascript online](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/jsfiddle-1024x571.png) Existem outras ferramentas similares como o [JSEditor.io](http://jseditor.io) e [playcode.io](http://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 JavaScript](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Formação Desenvolvedor JavaScript Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-javascript) Por fim, caso queira aprender mais sobre [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript) saiba que aqui na [TreinaWeb](https://treinaweb.com.br/) temos o curso [JavaScript - Fundamentos](https://www.treinaweb.com.br/curso/javascript-fundamentos) que possui **07h13 de vídeos** e um total de **93 exercícios**. Conheça também nossos outros cursos de [JavaScript](https://www.treinaweb.com.br/cursos?q=javascript). Veja quais são os tópicos abordados durante o curso de JavaScript - Fundamentos: - Como os computadores funcionam; - O primeiro código no navegador e no Node.js; - Declaração de variáveis e operadores; - Tomadas de decisão e laços de repetição; - Trabalhando com Numbers, Strings, Arrays, Objects e Functions; - Vários exercícios; - Vários desafios de programação direto no navegador; - Projeto prático para fixar o que foi aprendido. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Desenvolvimento ](https://www.treinaweb.com.br/blog/tag/desenvolvimento) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) Autor ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm) ## 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](https://www.treinaweb.com.br/blog/autor/wesley-gado) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/CONHECENDO-VÁRIAVEIS-CONSTANTES-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Conhecendo variáveis e constantes no JavaScript ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-javascript) Neste artigo vamos aprender a declarar e a utilizar constantes e variáveis no JavaScript, entendendo quando definir var, let e const. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/TYPESCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Como instalar o TypeScript ](https://www.treinaweb.com.br/blog/como-instalar-o-typescript) Neste artigo veremos como instalar o TypeScript, conhecer o arquivo tsconfig, executar nosso primeiro código no Node.js e no navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/ESTRUTURAS-CONDICIONAIS-REPETICAO-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Estruturas condicionais e estruturas de repetição em JavaScript ](https://www.treinaweb.com.br/blog/estruturas-condicionais-e-estruturas-de-repeticao-em-javascript) Neste artigo veremos como utilizar as estruturas condicionais (if, else) e as estruturas de repetição (while, for) no JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01133925/javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que se pode fazer com JavaScript hoje em dia? ](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia) Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/18163744/BABEL-1-1-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é Babel? ](https://www.treinaweb.com.br/blog/o-que-e-babel) Veja neste artigo o que é Babel. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/conhecendo-o-mean-stack-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Conhecendo o MEAN Stack ](https://www.treinaweb.com.br/blog/conhecendo-o-mean-stack) Conheça neste artigo o que é o MEAN Stack. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/asp-net-conhecendo-as-minimal-api-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 4 anos atrás ## [ ASP.NET - Conhecendo a Minimal API ](https://www.treinaweb.com.br/blog/asp-net-conhecendo-as-minimal-api) Neste artigo vamos conhecer um dos recursos que foram adicionados no .NET 6/ASP.NET 6, que é um novo template de aplicações Web, a Minimal API. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/MONGO-DB-400x280.png) [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 6 anos atrás ## [ O que é MongoDB? ](https://www.treinaweb.com.br/blog/o-que-e-mongodb) Certamente você já ouviu falar sobre o uso do MongoDB em projetos. Por isso, veremos neste artigo o que vem a ser o MongoDB e as vantagens que temos ao utilizá-lo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/como-instalar-o-dart-e-executar-seu-primeiro-exemplo-400x280.png) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 6 anos atrás ## [ Como instalar o Dart e executar seu primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-o-dart-e-executar-seu-primeiro-exemplo) Neste artigo veremos como instalar o Dart nos sistemas Windows, Linux e MacOS e executar nosso primeiro programa com a linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Trabalhando com data no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-data-no-javascript) Neste artigo veremos como manipular datas no JavaScript, utilizando a classe Date, como pegar a data atual e utilizar os métodos da classe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/teste-de-performance-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Testes de Performance JavaScript ](https://www.treinaweb.com.br/blog/testes-de-performance-javascript) Conheça as várias maneiras para se fazer testes de performance em seus códigos JavaScript para melhorar a experiência de seus usuários. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 07min 44s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58