Draw using nested loop and increment

Question

I’m studying Javascript for a book (from Casa do Código) and has a challenge involving nested loops, in which I have to draw this:

for(var Linha=0;Linha<10;Linha=Linha+1){
  for(var Coluna=0;Coluna<10;Coluna=Coluna+1){
    document.write("*")
  }
  document.write("<br>")
}

Answer 1

Analyzing the drawing:
It’s 10 lines and 19 columns. With each new line, the left asterisk advances a house, the right asterisk moves back a house, and where there is no asterisk there is an asterisk underscore ("_").

So the script to make this drawing could be written this way:

var posAstEsq = 1;   // Posição inicial do asterisco esquerdo.
var posAstDir = 19;  // Posição inicial do asterisco direito.

for (var linha=1; linha<=10; linha++){
  for (var coluna=1; coluna<=19; coluna++){
    if (coluna==posAstEsq || coluna==posAstDir)
      document.write("*")
    else
      document.write("_");
  }
  document.write("<br>");
  posAstEsq++;  // A cada linha o asterisco esquerdo avança uma coluna.
  posAstDir--;  // A cada linha o asterisco direito retrocede uma coluna.
}

Or, one can think of distance from the asterisk, instead of position of the asterisk, in which case only one variable would be used:

// Distância inicial do asterisco, tanto em relação ao lado
// esquerdo quanto ao lado direito.
// A posição do asterisco esquerdo será sempre 1 + distância.
// A posição do asterisco direito será sempre 19 - distância.
var distAst = 0;

for (var linha=1; linha<=10; linha++){
  for (var coluna=1; coluna<=19; coluna++){
    if (coluna==(1+distAst) || coluna==(19-distAst))
      document.write("*")
    else
      document.write("_");
  }
  document.write("<br>");
  // A cada linha o asterisco se distancia uma coluna do seu ponto de referência.
  distAst++;
}