4

Problema:

Crie uma função fontes() que receba como entrada uma frase qualquer. Em seguida, escreva no corpo da página esta frase usando fontes de tamanhos diferentes (do 1 ao 7). Para isto, você deve fazer um laço que irá repetir a seguinte TAG, alterando apenas o atributo "size":

Alguém pode me ajudar a entender a lógica?

5
  • 2
    O que você já tentou? Qual parte não funcionou? Em que característica está com problemas (fazer um laço? criar tags? setar o tamanho da fonte? criar a função?)? Commented 30/05/2014 às 12:58
  • 1
    Qual a sua dúvida? Commented 30/05/2014 às 13:06
  • 1
    Já tentou algo? Se sim coloque o código, se não tente que é só irá conseguir algo tentando e errando! Commented 30/05/2014 às 13:08
  • 1
    Olá @user8919, bem vindo ao [so.pt]. Recomendo uma leitura na central de ajuda em especial no tópico Como perguntar.
    – Caputo
    Commented 30/05/2014 às 13:12
  • 1
    Esta pergunta parece ser descontextualizada porque é sobre um exercício de lógica o qual, aparentemente, o usuário não tem sequer um código-base para ser auxiliado. Quer apenas o "peixe pronto". Commented 30/05/2014 às 17:02

2 Respostas 2

6

A lógica é:

  • crie uma função chamada fontes que receba como entrada uma frase qualquer

Aqui fica um exemplo minimalista de função

function fontes(frase){
    alert(frase); // só para verificar
};
  • escreva no corpo da página esta frase usando fontes de tamanhos diferentes (do 1 ao 7)

Aqui precisa de "ir buscar" o corpo da página e guardar numa variável:

var corpo = document.querySelector('body'); // ou outro elemento que queira
  • Para isto, você deve fazer um laço que irá repetir a seguinte TAG, alterando apenas o atributo "size"

Ora um for loop típico é

for (var i = 1; i < 8; i++) {
   // fazer qq coisa
}

Neste caso, dentro do loop tem de mudar o css/style do texto. Aqui surge um passo que não está defenido na pergunta: como empacotar a frase? com uma div, <p> ou <span>? ecolha.

Se usar um <p> o código dentro do loop poderia ser:

corpo.innerHTML += '<p style="font-size: '+i+'em;">'+frase+'</p>';

Exemplo: http://jsfiddle.net/r6VY4/

Código final:

function fontes(frase) {
    var corpo = document.querySelector('body');
    for (var i = 1; i < 8; i++) {
        corpo.innerHTML += '<p style="font-size: ' + i + 'em;">' + frase + '</p>';
    }
};
fontes('Olá mundo!');
2
  • 2
    Muito obrigado Sergio <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <script> function fontes(frase) { var corpo = document.querySelector('body'); var frase = prompt("Digite uma frase",""); for (var i = 1; i < 7; i++) { corpo.innerHTML += '<p style="font-size: ' + i + 'em;">' + frase + '</p>'; } }; fontes(); </script> </body> </html> Me faltou material e exemplo pra fazer por isso não tinha nem um ponto de partida . Consegui entender e o que mais precisava era a fórmula do for !
    – user8919
    Commented 31/05/2014 às 0:08
  • 1
    @user8919, se resolveu o problema pode escolher uma das respostas como correta. Note que no código que colocou no comentário o seu for faz um loop a menos. Ou começa em 1 e faz <8 ou então <=7, como você tem (var i = 1; i < 7; i++) ele vai fazer somente 6 loops.
    – Sergio
    Commented 31/05/2014 às 7:17
4

Você pode criar N elementos, mas como não especificou, vou deixar em exemplo com o elemento font:

function fontes(frase){
    for(var i = 1; i <= 7; i++){ // laço para criar os elementos
      var e = document.createElement('font'); // cria um elemento font
      e.setAttribute("size",i); // altera o atributo size
      e.innerHTML = frase; // adiciona a frase no elemento
      document.body.appendChild(e); // adiciona no body
    }
}
fontes('Stackoverflow '); // chama a função

Exemplo JSFiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .