As saídas no JS servem para testarmos o código ou para mostrar uma saída na página para o usuário.
Há diferentes caminhos para isso.
- innerHTML: Escreve a saída em algum elemento HTML;
- document.write(): Escreve diretamente no documento HTML;
- alert(); Função que mostra uma caixa tipo popup de alerta;
- console.log(); Escreve no console do navegador ou no terminal se você estiver usando nodejs.
Esses são os principais, mas existem diversos outros, vamos vê-los aqui.
Usando innerHTML
Essa é uma propriedade que retorna ou seta um conteúdo HTML em um elemento qualquer do DOM.
Para acessar um elemento HTML, com JS, usamos o método document.getElementById(id_do_elemento). O atributo id define o elemento HTML. O innerHTML define o conteúdo desse elemento.
A variável content vai receber o código *HTML serializado descrevendo todos os descendentes do elemento.
<!-- CÓDIGO NO JAVASCRIPT -->
element.innerHTML = content;
Agora ele vai remover todos os filhos, interpretar o código na variável content e atribuir os nós resultantes como filhos do elemento.
NOTA Essa propriedade fornece uma forma simples de trocar completamente o conteúdo de um elemento. Por exemplo, o conteúdo inteiro do elemento body pode ser excluído ao fazer: document.body.innerHTML = “”;
<!-- CÓDIGO NO HTML -->
<!DOCTYPE html>
<html>
<head>
<title>Título de seu site</title>
</head>
<body>
<h1>Conteúdo do site</h1>
<h2>Minha página</h2>
<p>Primeiro paragráfo</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Resultado
Minha página
Primeiro paragráfo
A propriedade innerHTML é de vários tipos de elementos — incluindo <body> ou <html> — pode ser retornada ou trocada. Essa também pode ser usada para ver o código fonte de uma página que foi modificada dinamicamente:
Na barra de endereço do navegador, copie e cole esse código.
javascript:”<pre>“+document.documentElement.innerHTML.replace(/</g,”<”) + “</pre>“;
Falando de segurança
Muitos desenvolvedores fazem uso da propriedade innerHTML para inserir textos em uma página. <ISSO VEM COM RISCO DE SEGURANÇA.
<!-- CÓDIGO NO JAVASCRIPT -->
name = "John";
// presumindo que el é um elemento DOM HTML
el.innerHTML = name; // inofensivo, nesse caso
// ...
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // inofensivo, nesse caso
Embora isso talvez pareça como um ataque cross-site scripting, o resultado é inofensivo. O HTML5 especifica que uma tag <script>, inserida via innerHTML, não deve ser executada.
No entanto, há formas de se executar JavaScript sem usar elementos <script>, por isso ainda há um risco de segurança sempre que você usa innerHTML para definir uma string sobre a qual você não tem controle. Por exemplo:
<!-- CÓDIGO NO JAVASCRIPT -->
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // exibe uma caixa de alerta
Se você testou isso viu o potencial perigoso dessa função se for mal usada. Por essa razão, eu recomendo que você não use o innerHTML quando estiver inserindo apenas texto; como alternativa, utilize (node).textContent. Isso não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro.
A propriedade textContent da interface Node representa o conteúdo de texto de um nó e dos seus descendentes.
Sintaxe:
<!-- CÓDIGO NO JAVASCRIPT -->
var text = (Node).textContent;
(Node).textContent = string;
Outra alternativa é o é o element.innerText. Porque eu não falei dele primeiro? Porque ele não vai retornar o texto puro exatamente. O que faz é retornar, de maneira aproximada, o conteúdo como se o usuário estivesse selecionando e copiando o conteúdo para área de transferência. Ou seja, ele vai acabar renderizando o conteúdo do elemento.
<!-- CÓDIGO NO JAVASCRIPT -->
var text = element.innerText;
element.innerText = text;
Então lembre-se:
- innerHTML: pega todo conteúdo, incluindo o HTML que estiver no nó do elemento.
- innerText: Pega o conteúdo texto sem HTML e também não pega conteúdos escondidos por CSS, mas com as TAGs
<script>e<style>por isso vem renderizados. - textContent: Retorna o texto puro, inclusive conteúdo escondido por CSS.
E não se esqueça, todos eles vão substituir o conteúdo por outro.
Mas eu quero acrescentar conteúdo, como eu faço isso?
Você pode usar uma técnica de mesclagem, onde você guarda um conteúdo em uma variável e usa o += para acrescentar mais conteúdo nesta variável e depois devolve o conteúdo mesclado ao elemento:
<!-- CÓDIGO NO JAVASCRIPT -->
var content = element.innerHTML;
content += " <i>Mais conteúdo</i>";
element.innerHTML = content;
Vou mostrar algumas funções que fazem isso. Compare cada uma delas e escolha a melhor para seu algorítmo.
insertAdjacentElement()
Esse método insere um elemento específico em uma posição específica de outro elemento.
As opções de posição são:
- afterbegin
- afterend
- beforebegin
- beforeend
<!-- CÓDIGO NO JAVASCRIPT -->
(node).insertAdjacentElement(position, element);
| position: texto (obrigatório) | |
| Propriedade | Descrição |
|---|---|
| afterbegin | Após o inicio do elemento (como primeiro filho); |
| afterend | Após o elemento; |
| beforebegin | Antes do elemento; |
| beforeend | Antes do final do elemento (como último filho); |
| element: Elemento HTML – Elemento que você quer inserir. | |
<!-- CÓDIGO NO JAVASCRIPT -->
var s = document.getElementById("mySpan");
var h = document.getElementById("myH2");
h.insertAdjacentElement("afterbegin", s);
insertAdjacentHTML()
Insere textos como HTML em uma posição específica do nó.
<!-- CÓDIGO NO JAVASCRIPT -->
(node).insertAdjacentHTML(position, text);
| position: texto (obrigatório) | |
| Propriedade | Descrição |
|---|---|
| afterbegin | Após o inicio do elemento (como primeiro filho); |
| afterend | Após o elemento; |
| beforebegin | Antes do elemento; |
| beforeend | Antes do final do elemento (como último filho); |
| text: String – Texto (que pode ser HTML) que você quer inserir. | |
<!-- CÓDIGO NO JAVASCRIPT -->
h.insertAdjacentHTML("afterbegin", "<span style='color:red'>My span</span>");
insertAdjacentText()
Insere um texto puro em uma posição específica de um elemento ou nó.
<!-- CÓDIGO NO JAVASCRIPT -->
(node).insertAdjacentText(position, text);
| position: texto (obrigatório) | |
| Propriedade | Descrição |
|---|---|
| afterbegin | Após o inicio do elemento (como primeiro filho); |
| afterend | Após o elemento; |
| beforebegin | Antes do elemento; |
| beforeend | Antes do final do elemento (como último filho); |
| text: String – Texto puro que você quer inserir. | |
<!-- CÓDIGO NO JAVASCRIPT -->
var h = document.getElementById("myH2");
h.insertAdjacentText("afterbegin", "My inserted text");
Usando o document.write()
O método document.write() grava expressões HTML ou código JavaScript em um documento.
O método write() é usado principalmente para teste: se for usado depois que um documento *HTML for totalmente carregado, ele excluirá todo o HTML existente.×
NOTA: Quando este método não é usado para teste, ele geralmente é usado para gravar algum texto em um fluxo de saída aberto pelo método document.open() . Consulte “Mais exemplos” abaixo.×
DICA: O método document.writeln () é semelhante a write(), mas adiciona um caractere de nova linha após cada instrução.
<!-- CÓDIGO NO JAVASCRIPT -->
document.write(exp1, exp2, exp3, …);
exp1, exp2, exp3, … : É opcional. É o conteúdo que você quer gravar no documento. Múltiplos valores são permitidos e serão inseridos na ordem em que ocorrerem. document.write(“<h1>Hello World!</h1><p>Have a nice day!</p>”);
Usando o window.alert()
Exibe uma caixa de alerta com uma mensagem e um botão “OK” que trava o navegador até que você clique em “OK” para fechar o janela de alerta.
Geralmente usado quando queremos a atenção total do usuário, justamente porque ela trava o navegador, logo o usuário não terá outra opção senão ver a mensagem trazida pela janela de alerta.
Não abuse do alert(), o fato dele tirar o foco da janela atual e forçar o navegador a ler a mensagem evita que o usuário acesse outras partes do site. Os usuários podem não gostar disso. Use com moderação.
<!-- CÓDIGO NO JAVASCRIPT -->
alert(mensagem);
window.alert("Hello World!");
| Propriedade | Tipo | Descrição |
|---|---|---|
| mensagem | String (texto) | Opcional. Especifica o texto que será mostrado na janela de alerta, ou um objeto convertido em texto. |
Observe que você não precisa usar <window.alert(). O objeto window é de escopo global, ou seja, variáveis, propriedades e métodos, por padrão pertencem ao objeto window, logo usar window é opcional.
Usando console.log()
O método console.log() grava uma mensagem no console do navegador, se você estiver usando nodejs e estiver em qualquer terminal vai funcionar do mesmo jeito.
É muito útil para fins de teste. Para usar esse método, certifique-se de ter a visualização do console visível. Pressione F12 para visualizar o console do navegador.
<!-- CÓDIGO NO JAVASCRIPT -->
.log(mensagem);
| Propriedade | Tipo | Descrição |
|---|---|---|
| mensagem | String (texto) | Obrigatório. É a mensagem que você quer gravar no console. |
<!-- CÓDIGO NO JAVASCRIPT -->
var myObj = { firstname : "John", lastname : "Doe" };
console.log(myObj);
Usando o window.print()
O método print() imprime o conteúdo da janela atual. O método print() abre a caixa de diálogo Imprimir, que permite ao usuário selecionar as opções de impressão preferidas.
Assim como alert(), window é opcional.×
Você Sabia??? Sabia que você pode ter uma folha de estilo CSS específica para impressões? Pois é, veja nossa série sobre CSS que lá nós abordamos isso. Você pode criar um estilo especial para impressões em folha de papel para que aquilo que é desnecessário na página não apareça ou apareça de forma diferente. Vale a pena conferir.
<!-- CÓDIGO NO JAVASCRIPT -->
window.print(); //ou
print();
<!-- EXEMPLO EM UM BOTÃO NO HTML -->
<button onclick="window.print()">Print this page</button>
Por hoje é só, acompanhe a série que vem muito mais por aí.
