Exercício do livro da Casa do Código

Alterando o FOR interno você consegue um quadrado:

for(var linha=1; linha <= 10; linha++){

    for(var coluna=1; coluna<=20; coluna++){
        document.write("*");

    }    

    pulaLinha();
}

Olá José,

Seu exercício está certo. Você fez um quadrado (base e altura com mesmo tamanho) 10 x 10. No entanto o espaçamento dos caracteres que fez com que ele parecesse um retângulo. Fiz uma alteração aqui do lado do seu * eu inseri um caractere "espaço sem quebra" através da sequência &nbsp, isso se faz necessário, porque o HTML (puro) só coloca um espaço, independente de quantos você digitasse.

Agora vai ficar visualmente mais bonito. Mas continue estudando, porque o exercício está certo.

<script>
function pulaLinha(){
    document.write("<br>");
}
function mostra(frase){
    document.write(frase);
    pulaLinha();
}

for(var linha=1; linha <= 10; linha++){

    for(var coluna=1; coluna<=10; coluna++){
    document.write("* &nbsp&nbsp");

    }    

    pulaLinha();
}

</script>

Obrigado Gabriel e Jonathan, gostei bastante das duas soluções! Apesar de ter sido boa, acho que a solução do Gabriel ficou diferente do que foi pedido no exercício, que seria um quadrado de 10 linhas por 10 colunas, não 10 por 20. Mas enfim, achei uma boa também, muito obrigado pela ajuda. E a do Jonathan gostei bastante ai pela dica do código do espaçamento, não teria descoberto isso. E também pelo apoio moral em geral. Muito obrigado também pela ajuda. Mas sem querer soar chato, exigente e tudo mais, acho que ele ainda parece um retângulo. Eu retirei uma sequência desse código do espaçamento, e ele ainda perece um retângulo. Não sei, ou é algo diferente disso tudo, ou é um erro do livro, talvez o certo seja retângulo? Mas de qualquer maneira, obrigado de novo pela ajuda de vocês, foram boas dicas.

Realmente, o Jonathan tem razão em relação ao que foi pedido. Se consideramos somente a lógica, o código que você construiu, José, está correto. Apesar da aparência não ser exatamente um "quadrado", mas do ponto de vista lógico matemático é um "quadrado" porque possui o mesmo número de linhas e colunas.

Experimento no lugar do * colocar a letra "A" ou outro símbolo. O efeito será bem legal.

Sim, é engraçado, parece uma pegadinha. Tenho uma outra pergunta agora. Na mesma página desse livro tem o seguinte exercício.

DICA DO LIVRO: O segredo é pensar assim: na primeira linha queremos apenas uma coluna; na segunda linha queremos duas colunas etc... até a décima linha, que possuirá dez colunas. Você também precisará de dois loops aninhados. Há duas formas de fazer: uma usando o break para parar de imprimir os asteriscos em cada linha em uma determinada condição, ou colocando essa condição direto dentro do for.

*
**
***
****
*****
******
*******
********
*********
**********

Consegui imprimir os asteriscos na ordem pedida, porém fiz repetindo o código:

<meta charset="UTF-8">
<script>
function pulaLinha(){
    document.write("<br>");
}
function mostra(frase){
    document.write(frase);
    pulaLinha();
}

for(var linha=1; linha <= 10; linha++){

    for(var coluna=1; coluna <= 1; coluna++){
    document.write("*");

    }

    pulaLinha();

    for(var coluna=1; coluna <= 2; coluna++){
    document.write("*");

    }    
    pulaLinha();

    for(var coluna=1; coluna <= 3; coluna++){
    document.write("*");

    }    
    pulaLinha();

    //ETC...

    break;
}


</script>

Acho que deve haver um jeito mais elegante e fácil de fazer isso, colocando alguma condição dentro do for, mas não sei qual. Alguém faz alguma ideia da solução??

Código Otimizado

<meta charset="UTF-8">
<script>

function pulaLinha(){
    document.write("<br>");
}

function mostra(frase){
    document.write(frase);
    pulaLinha();
}

for(var linha=1; linha <= 10; linha++){
    for(var coluna=1; coluna <= linha ; coluna++){
        document.write("*");
    }
    pulaLinha();
}

</script>

O segredo está nesta linha:

for(var coluna=1; coluna <= linha ; coluna++){

<meta charset="utf-8">
<script> 

    //Functions
    function pularLinha() {
        document.write("<br>");
    }

    function escrever(texto) {
        document.write(texto);
    }


   var qtdLinhas = 10;
   var triangulo = "";
  for (var linha = 1; linha <= qtdLinhas; linha++)
  {
    for (var coluna = 1; coluna <= linha; coluna++)
    {
      escrever(" * ");
    }
    pularLinha();
  }

  escrever(triangulo);


</script>

Se você está na linha 1 vai escrever apenas um *; se você estiver na linha 2 vai escrever dois; E assim por diante;

for (var coluna = 1; coluna <= linha; coluna++)

Muito Obrigado aos dois novamente, queria ter marcado os dois como solução mas não deu. De qualquer maneira, obrigado Jonathan e Gabriel.