Brincando para aprender

Fala, Rodrigo! Tudo bem contigo? Espero que sim!!!

Seu código está perfeito! Parabéns!!! É isso aí!

Está bem estruturado e é bom quando batemos o olho em um código e conseguimos distinguir onde está cada variável e onde estão chamando cada qual.

Mais para frente você verá como podemos otimizar através de funções.

Por exemplo: imagina você ter que escrever todos da sua família incluindo da parte de pai e mãe. Quantos document.write seriam precisos?

Em uma função poderemos colocar o document.write e pular linha com o <br> chamando somente um comando. Veja um exemplo abaixo:

<meta charset="UTF-8">

<h1>Programar é muito legal</h1>
<br>
<script>

  function pulaLinha() {

    document.write("<br>");
  }

  function mostra (texto){

    document.write(texto);
    pulaLinha();

  }

  function mostra2 (texto){

    document.write(texto);
    pulaLinha();
    pulaLinha();

  }

  alert("Veja a idade da família");
  //Variável recebendo texto numérico
  var ano = 2020;
  mostra("Rodirgo tem " + (ano - 1985) + " anos");
  mostra("Patrícia tem " + (ano - 1981) + " anos");
  mostra("Gabriela tem " + (ano - 2013) + " anos");
  mostra2("Arthur tem " + (ano - 2016) + " anos");

  var idadeRodrigo = (ano - 1985);
  var idadePatricia = (ano - 1980);
  var idadeGabriela = (ano - 2013);
  var idadeArthur = (ano - 2016);
  var media = (idadeRodrigo + idadePatricia + idadeGabriela + idadeArthur) / 4;
  mostra2("A média das idades desta família é " + Math.round(media));

  //Variável recebendo texto ou string
  var nome = "Rodrigo";
  mostra("A Idade de " + nome + " é " + idadeRodrigo + " anos de idade");
</script>

Mas vamos com calma! ;-)

Você está no caminho certo!!!

Bons estudos e vamos em frente!!!

Muito obrigado amigo. Achei muito top essa tal de função e quanto mais eu aprendo, mais eu chego a conclusão que desenvolvimento não tem limite, tudo é possível rsrsrsrs... Estou feliz e empolgado por estar aprendendo. Quando entrei na faculdade corria do tal do desenvolvimento, sempre disse que não era minha praia rsrsrsr, mas agora estou vendo que tudo faz sentido e gostando demias.

Obrigado pelo retorno.

rsrsrsr.... na faculdade nós corremos de algumas matérias sim, Rodrigo!

Que bom que está gostando!!! E, realmente, não existe limite na programação. É até viciante! ;-)

Só para complementar seus estudos, existe uma outra forma muito usada no mundo Javascript que vai tornar ainda mais prático sua escrita, porém, vou pedir para não se apegar a ela no momento para que você entenda como funciona e o que ocorre por trás de tudo. O bom é que você está aprendendo as montar a base e, saiba, vai ser fundamental para você lá na frente. Vamos lá!!!

Veja como posso estruturar a impressão, mas não dispensando as funções e variáveis:

  mostra(`
  Rodirgo tem ${ano - 1985} anos
  <br>
  Patrícia tem ${ano - 1981} anos
  <br>
  Gabriela tem ${ano - 2013} anos
  <br>
  Arthur tem ${ano - 2016} anos 
  `);

Muito melhor, não é?

Perceba que chamamos a function mostra(texto), abrimos os parênteses e depois o símbolo de crase é quem vai dizer que "tudo dentro das crases será texto com alguns detalhes".

mostra(`

E quais são esses detalhes?

Quando nós queremos chamar uma variável, realizar o calculo ou concatenação, como no exercício aplicado na aula, colocamos o símbolo de cifrão mais as chaves${} e o argumento dentro das chaves

 ${ano - 1985} 

O código completo ficará dessa forma:

<meta charset="UTF-8">

<h1>Programar é muito legal</h1>
<br>
<script>

  function pulaLinha() {

    document.write("<br>");
  }

  function mostra (texto){

    document.write(texto);
    pulaLinha();

  }

  function mostra2 (texto){

    document.write(texto);
    pulaLinha();
    pulaLinha();

  }

  alert("Veja a idade da família");
  //Variável recebendo texto numérico
  var ano = 2020;
  mostra(`
  Rodirgo tem ${ano - 1985} anos
  <br>
  Patrícia tem ${ano - 1981} anos
  <br>
  Gabriela tem ${ano - 2013} anos
  <br>
  Arthur tem ${ano - 2016} anos 
  `);

  var idadeRodrigo = (ano - 1985);
  var idadePatricia = (ano - 1980);
  var idadeGabriela = (ano - 2013);
  var idadeArthur = (ano - 2016);
  var media = (idadeRodrigo + idadePatricia + idadeGabriela + idadeArthur) / 4;
  mostra2(`
  A média das idades desta família é ${Math.round(media)};
  `);

  //Variável recebendo texto ou string
  var nome = "Rodrigo";
  mostra(`
  A Idade de ${nome} é ${idadeRodrigo} anos de idade
  `)

</script>

É isso, Rodrigo!!!

Mas repito, não se apegue a essa escrita no momento, você verá muito quando aprofundar seus conhecimentos em Javascript. Se quiser ir transformando suas escritas dessa forma é bacana, mas o importante é saber o que está por trás de tudo isso.

Saiba que estamos aqui p/ qualquer dúvida que tiver.

Bons estudos e vamos em frente!!!

Legal demais. Seguirei seu conselho, um passo de cada vez. Qualquer coisa vamos nos falando. Até!