Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Pedido de demonstração

Sou 100% iniciante e usei a aba do "app.js" da pasta de treinamentos para aplicar o desafio, porém não consigo rodar para testar. 2 pedidos: 1o) Alguém poderia gravar/demonstrar como testar e como sei se escrevi corretamente o código? 2o) como eu abro, no Visual Studio Code, uma nova aba do "app.js" para escrever o código "limpo"?

9 respostas
solução!

Oi Ibrahim! Tudo ok contigo?

Posso lhe ajudar com isso sim!

Bom vamos lá.

Respondendo seu primeiro pedido, vou ensinar como testar o seu código. Como pré-requisito você já deve ter o Visual Studio Code instalado, se não tiver instale por aqui.

Depois vamos ir no gerenciador de arquivos e criar uma pasta para abrigar seu projeto (Deixe em um lugar fácil de achar, pois ela será de suma importância). Após isso você vai abrir o seu Visual Studio Code e ele provavelmente irá abrir uma tela de boas-vindas ou uma tela mostrando o arquivo que você estava trabalhando antes de fechar ele. Se qualquer forma o caminho para seguir agora é praticamente o mesmo, mas vamos pelo mais simples no momento:

  1. No canto superior da tela do App você vai ver uma seção com alguns botões:
    • Se tiver em inglês provavelmente seria: "File Edit Selection View Go Run ...";
    • Se tiver em português seria algo tipo: "Arquivo Editar Seleção Ver Acessar Executar ...".

      Aqui você deve clicar no primeiro botão deles, no caso "File" ou "Arquivo" e então vai abrir uma lista de opções, procure pela opção "Add Folder to Workspace..." ou "Adicionar Pasta à Area de Trabalho" ou uma opção nesse sentido.

  2. Quando encontrar essa opção clique nela. Então uma aba de arquivos será aberta. Agora procure pelo arquivo que você criou para colocar o projeto. E selecione ele e clique em "Selecionar Pasta", ou "Abrir", ou o botão que estiver aparecendo para você.
  3. Feito isso você irá perceber que a aba se fechou e voltou para a tela do VS Code(Visual Studio Code), lá você só precisa clicar no botão de novo arquivo, ou nova pasta que aparece ao lado do nome da pasta adicionada ao App.
  4. Agora é só criar o arquivo que deseja e adicionar a extensão dele, no nosso caso seria o app.js Escreva o código ali e salve com o atalho do teclado "Ctrl + S".
  5. Assim, se você voltar para o Gerenciador de Tarefas e abrir a pasta que você tinha antes, vai ver o arquivo criado no VS Code ali.
  6. Vou deixar um GIF resumindo esses passos abaixo: Gif de execução dos passos descritos acima

Bom o próximo passo é executar o arquivo e abrir ele. Para isso depende muito da linguagem que você está usando, nesse caso acredito que o que você quer é executar ele no navegador, para isso precisamos de um arquivo com a extensão HTML, onde o projeto pode ser carregado.

Para isso você deve criar um arquivo com o nome index.html ele quando aberto leva para uma página no seu navegador padrão, seja Edge, Chrome, Firefox, Opera, entre outros. Nesse arquivo você deve adicionar uma tag de script que levará você ao arquivo JavaScript. No nosso caso seria algo assim <script src="app.js"></script>, depois você salva o arquivo com o "Ctrl + S" e vai no gerenciador de tarefas e abre ele clicando duas vezes nele. E sempre que você fizer alguma mudança nele você pode só apertar a tecla "F5" que você irá recarregar a página e as mudanças que você adicionar ao código serão aplicadas no navegador.

Um resuminho disso bem aqui:

Gif mostrando como criar um arquivo index.html e abrir no navegador

Sobre o segundo pedido, tem uma maneira bem fácil para isso. Você já sabe como criar um arquivo novo no VS Code e já sabe como funciona a mágica do index.html, então digamos que você quer criar uma pasta de testes onde você vai fazer testes no seu código, então você pode só criar um arquivo com a extensão .html com o nome que quiser, como, por exemplo, criandoUmAlert.html e colocar uma tag de <script> e dentro dela você escrever seu código e salvar depois abrir no navegador, você consegue fazer quantos testes quiser.

Exemplo abaixo:

Gif criando uma pasta html e abrindo no navegador

Ali eu criei uma pasta chamada "Pasta para teste de códigos" e dentro dela criei 2 arquivos com extensões HTML e coloquei neles a tag <script></script> e depois coloquei dentro das tags os códigos JavaScript e abri os arquivos no navegador.

Sempre antes de mudar de arquivo ou App eu usava o atalho "Ctrl + S" para salvar o arquivo.

E você pode fazer isso com códigos mais simples, tudo depende de você.

Esperto ter explicado bem.

Se tiver mais alguma dúvida é só falar, e se não entender algo ou tiver problemas com algo relacionado ao que foi passado acima é só falar.

Espero ter ajudado, abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓

Renan, muitíssimo obrigado pelo cuidado com minha dúvida! Sua explicação foi sensacional!

Magina, precisando é só falar, tá?!

Abraços e bons estudos.

Que excelente explicação!

Ótima explicação! Estava em duvida em como começar um projeto do zero

minha pagina incia esta dando erro e não estou conseguindo fazer minha primeira frase olá mundo

Opa Meyreane! Tudo ok?

Você pode explicar com mais detalhes o que aconteceu?

Qual página era essa? Como você salvou ela, qual extensão (.html, .css, .js, etc)? Qual o conteúdo desse aquivo? Pode compartilhar ele? E por fim, qual é o erro que está sendo retornado? Você pode compartilhar ele conosco por favor?

Aguardo sua resposta para que eu possa te auxiliar da melhor forma possível! Abraços e bons estudos.

Oi Renata estou fazendo o curso de lógica de programação, a primeira parte e fazer a mensagem "HELLO MUNDO" utilizando o arquivo da aula no Visual Studio Code, executei todos os passos de baixar o programa, inserir a pasta no Visual Studio Code, mas quando abrir a pagina do jogo de adivinha o número, consta a página com erro, deste imagem que enviei.

Oi, bom aqui não aparece nenhuma imagem para mim, mas pelo que entendi você não está conseguindo fazer os testes propostos na aula, correto?

Bom nesse caso eu iria pedir para você me mostrar imagens da sua tela do VS Code, e se possível do navegador, quando você abre o navegador e inspeciona a página com o DevTools na aba de console, provavelmente, se tem algum erro ele vai estar lá, uma imagem dele também ajuda.

E se possível eu peço que você abra um novo tópico aqui para facilitar o atendimento, pois esse tópico já foi resolvido, em um tópico novo eu posso focar só no seu problema e lhe ajudar melhor:

Era isso.