Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Bom dia. Referente ao "Mãos na massa: O primeiro Javascript" e com relação ao arquivo principal.js fiz os códigos e a pagina nao atualiza o titulo (Trocar o nome de Aparecida Nutrição para Aparecida Nutricionista. Segue o codigo que fiz (copiei)
document.querySelector(".titulo");
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista"
O que está errado?
Oi, Ivair, tudo bem?
Você chamou o arquivo principal.js no seu arquivo index.html? Dessa forma:
<script src="js/principal.js"></script>
</body>Antes do fechamento da tag body. Sem isso o arquivo js não é chamado e o código Javascript não é lido.
Testa e me fala se deu certo :}
Lais bom dia. Obrigado, mas desculpe nao consegui entender a sua explicação. Poderia dizer claramente aonde e o que eu preciso fazer. Desculpe de novo mas nao entendi. Aguardo
Lais abaixo a forma que esta no material do curso: // Restante do código HTML
Por favor nao sonsegui ver o meu erro. Obrigado
Lais. Bom dia. Gostaria de dar continuidade no curso. Com relação à minha dúvida. você poderia me ajudar? Então fiz exatamente o que você sugeriu e continua a mesma coisa
"Você chamou o arquivo principal.js no seu arquivo index.html? Dessa forma:
Antes do fechamento da tag body. Sem isso o arquivo js não é chamado e o código Javascript não é lido.Testa e me fala se deu certo :}"
A página Aparecida Nutrição abre normalmente no abre normalmente no Google Chrome.
Segue abaixo cópia do principal.js
document.querySelector(".titulo");
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista"
Gostaria de continuar no curso. Por isso solicito a ajuda.
Obrigado
Ivair
OI, Ivair, tudo bem?
Quando falo que o arquivo Javascript precisa ser chamado no arquivo html é como nesse exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<script src="principal.js"></script>
</body>
</html>Dentor da tag script usamos o src para dar o caminho do arquivo, depois fechamos a tag, assim, o arquivo pode ser lido.
Se preferir coloque aqui o seu html completo para vermos :}
Lais bom dia. Obrigado. Olha o que esta no texto do Curso:
Olha o que voc me passou:
Tentei com as duas formas e nada. Provavelmente estou fazendo alguma besteira grande mas enfim estou aprendendo. Conforme sua sugestão vou passar meu html completo e o js, OK?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<h1>Aparecida Nutrição</h1>
</div>
</header>
<main>
<section class="container">
<h2>Meus pacientes</h2>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>Gordura Corporal(%)</th>
<th>IMC</th>
</tr>
</thead>
<tbody id="tabela-pacientes">
<tr class="paciente" >
<td class="info-nome">Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">João</td>
<td class="info-peso">80</td>
<td class="info-altura">1.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Erica</td>
<td class="info-peso">54</td>
<td class="info-altura">1.64</td>
<td class="info-gordura">14</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nome">Douglas</td>
<td class="info-peso">85</td>
<td class="info-altura">1.73</td>
<td class="info-gordura">24</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Tatiana</td>
<td class="info-peso">46</td>
<td class="info-altura">1.55</td>
<td class="info-gordura">19</td>
<td class="info-imc">0</td>
</tr>
</tbody>
</table>
</section>
</main>
<script src="principal.js"></script>
</body>
</html>
E agora o js
<h1>Aparecida Nutrição</h1>
<h1 class="titulo">Aparecida Nutrição</h1>
document.querySelector(".titulo");
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista"
Lais por favor veja onde está o erro e obrigado. Aguardo o seu retorno
Ivair
Oi, Ivair, tudo bem?
Faltou um detalhe importante para que a mudança do título fosse feita, essa aqui:
<h1 class="titulo">Aparecida Nutrição</h1>Precisamos declarar a classe titulo dentro da tag h1 onde está o nosso título.
No código Javascript a variável titulo na linha var titulo = document.querySelector(".titulo"); vai no arquivo html em busca da classe class="titulo", e lá ela encontra a classe declarada dentro da tag h1, como está aqui: <h1 class="titulo">Aparecida Nutrição</h1>quando é achado a classe, a variável titulo junto da propriedade textContent muda o texto contido na tag h1. Ficou um pouco mais claro? Por isso é essencial declarar a classe, pois sem ela, não temos como fazer a mudança do titulo.
Se ficou alguma dúvida é só falar :}
Laís bom dia. Enfim o que você me mandou é exatamente o que eu te mandei nos códigos. Desculpe não entendo nada. Vamos simplificar de maneira definitiva, por favor. Deixando bem claro por favor o que eu preciso: Por favor mande para mim a maneira correta dos arquivos: index.html e principal.js Então de novo eu náo preciso mais de explicações quero copiar e colar e seguir adiante. Eu não consigo entender qual é a solução. Então me mande POR FAVOR os arquivos feitos por você e da maneira correta OK? Desculpe Lais mas, prefiro seguir adiante com o curso. Está claro do que preciso certo? Obrigado
Laís com relação à mensagem acima, não entenda como uma falta de educação minha. Tem situações em que é melhor seguir em frente e esse é o caso. Para deixar bem claro do que preciso agora: Quero copiar e colar os dois arquivos feitos por vocês e que me permitam seguir adiante. O tempo com esse assunto já passou da conta, foram mais de 3 dias e eu não saio do lugar. O problema de não entender é meu! Portanto de novo, quero a receita pronta! Depois em outro dia vou voltar e estudar melhor. Mas agora quero ter os códigos do html e js CERTOS! Obrigado
Oi, Ivair, tudo bem?
Sem problema, segue o index. html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<h1 class="titulo">Aparecida Nutrição</h1>
</div>
</header>
<main>
<section class="container">
<h2>Meus pacientes</h2>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>Gordura Corporal(%)</th>
<th>IMC</th>
</tr>
</thead>
<tbody id="tabela-pacientes">
<tr class="paciente" >
<td class="info-nome">Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">João</td>
<td class="info-peso">80</td>
<td class="info-altura">1.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Erica</td>
<td class="info-peso">54</td>
<td class="info-altura">1.64</td>
<td class="info-gordura">14</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nome">Douglas</td>
<td class="info-peso">85</td>
<td class="info-altura">1.73</td>
<td class="info-gordura">24</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Tatiana</td>
<td class="info-peso">46</td>
<td class="info-altura">1.55</td>
<td class="info-gordura">19</td>
<td class="info-imc">0</td>
</tr>
</tbody>
</table>
</section>
</main>
<script src="principal.js"></script>
</body>
</html>e o principal js:
document.querySelector(".titulo");
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista"Espero ter te ajudado!
Lais bom dia. Sim copiei literalmente os códigos que você me passou e consegui; Obrigado pela sua ajuda.