Não sei como inicar as práticas. Tenho que criar uma pasta nova? Não sei vincular o arquivo JS que estou criando a algo que apareça na html. Como posso testar o que estou criando?
Não sei como inicar as práticas. Tenho que criar uma pasta nova? Não sei vincular o arquivo JS que estou criando a algo que apareça na html. Como posso testar o que estou criando?
Olá, Bruno!
Crie uma nova pasta para manter seu aprendizado organizado. Ao criar a pasta, o básico que você vai precisar é de um arquivo com extensão .html e outro com extensão .js. Não se esqueça das extensões, elas são muito importantes. Aqui está o básico que você precisa no seu arquivo HTML e JS para iniciar suas práticas e evoluir muito seu aprendizado:
index.html
<!DOCTYPE html>
<html lang="pt-bt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Praticas</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
app.js
alert("Olá, mundo!");
Bons estudos e sucesso na sua carreira! ;)
Olá,
Não sei se compreendi muito bem suas dúvidas, mas valos lá!
Sim, a cada novo projeto você tem que criar uma nova pasta para ele, é onde ficará os arquivos do seu projeto.
Para vincular o arquivo JS com o seu HTML você deve adicional um scrip no body, dessa forma:
<script src="exemplo.js"></script>
Você pode baixar uma extensão no seu VS Code chamada Live Server. Com ela é possivel abrir no navegador o seu projeto, e ele será atualizado em tempo real, conforme você altera seu projeto.
Tenho uma dúvida, pois, não consigo acessar o site pelo meu notebook, então não sei se os códigos que estou aprendendo na aula realmente esta funcionando.
No Visual Studio, faça essa sequência:
1 - Clique em "File", depois em "Open Folder".
2 - Na janela que vai abrir, crie uma nova pasta com o nome do exercício em um local de fácil acesso.
Por exemplo, na pasta Área de Trabalho, clique em "Nova Pasta", nomeie a pasta como "Desafio 1" e digite ENTER. Pasta criada.
3 - Agora, clique 1 vez na pasta recém-criada e depois clique em "Selecionar Pasta" que o Visual Studio abrirá a nova pasta para você.
4 - No canto superior esquerdo, onde está o nome da pasta "DESAFIO 1", procure um ícone escrito "New File".
Clique neste ícone que abrirá um campo para escrever o nome do arquivo. Escreva exatamente assim "index.html", com letras minúsculas, e digite ENTER. Pronto. Você criou agora o primeiro arquivo do exercício, uma página html.
5 - Agora, na linha de código número 1 do arquivo html recém-criado, digite "html" que vai aparecer uma lista com 3 opções.
Selecione a opção "html:5". Agora você criou a estrutura básica da sua página html.
Agora, pelo Windows Explorer, vá na pasta "Desafio 1", a pasta que você criou para este projeto.
Entre na pasta e clique no arquivo "index" que aparece lá. Pronto, esse é o arquivo da página de internet que você vai trabalhar.
Ela ainda está em branco porque você vai começar a inserir os primeiros códigos no outro arquivo que vai criar agora.
6 - Volte no Visual Studio, na pasta "DESAFIO 1", clique de novo em "New File".
No campo que abriu, agora você vai escrever "index.js". Pronto, agora você criou o arquivo para escrever o código JavaScript para a sua página html.
7 - Agora sim, a gente precisa vincular o arquivo index.html com o arquivo index.js, usando um script, para que as instruções do código JavaScript apareçam na página html.
Na linha de código número 9 do arquivo index.html, digite este código de script:
<script src="index.js"></script>
Você vai perceber que o próprio Visual Studio (VS) autocompleta o código à medida que você vai escrevendo.
8 - Salve o arquivo com o comando CTRL + B. Agora vá na página html no navegador e atualize a página. Você perceberá que o título da página ficou "Document".
Podemos alterar o título. É só voltar no VS no arquivo index.html, procure pela linha .
Apague o "Document" e escreva o nome do projeto "Desafio 1" ou o nome que você achar melhor.
9 - Volte na página do navegador e atualize. Agora o título da página foi atualizada.
Agora está tudo pronto para você começar a exercitar as Práticas do Curso no arquivo index.js.
OBS: Não esqueça da dica de usar a extensão Live Server, como mostrado nas aulas. Assim você verá as alterações do código em tempo real na página da internet.
Espero ter ajudado!
Eu particularmente gostaria que os comandos funcionassem no console (parece que tem uma forma de fazer mas e meio trabalhoso).
O que eu recomendo e criar um arquivo atividadexx.html com a estrutura:
<!DOCTYPE html>
<html lang="pt-bt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Praticas</title>
</head>
<body>
<script>
<!-- AQUI DENTRO VOCÊ FAZ O CÓDIGO DO EXERCÍCIO -->
</script>
</body>
</html>
Acho que essa e a maneira mais simples de executar os códigos para que não tem muito conhecimento, porque você trabalha com um arquivo só.