Comandos do objeto console

Esta tabela mostra a sintaxe dos comandos de objeto do console que você pode usar na janela
do Console do JavaScript ou para enviar mensagens de seu código para o console. Esse objeto
oferece diversos formatos para que você possa distinguir entre mensagens informativas e
mensagens de erro, se desejar.

Você pode usar o formato de comando mais longo, window.console.[command], se precisar evitar
uma possível confusão com objetos locais chamados console.

Dica

Nas versões anteriores do Visual Studio não há suporte para o conjunto completo de comandos. Use o
IntelliSense no objeto de console para obter informações rápidas sobre comandos com suporte.

Comando Descrição Exemplo

assert(expression, message) Envia uma mensagem console.assert((x == 1),

"assert message: x != 1");
quando expression é avaliado
como falso.

clear() Limpa as mensagens da janela do console.clear();

console, incluindo mensagens de erro
de script, e limpa também o script
exibido na janela do console. Não
limpa o script inserido no prompt de
entrada do console.

count(title) Envia o número de vezes que o console.count();

comando count foi chamado para a
console.count("inner loop");
janela do console.Cada chamada do
comando count é identificada
exclusivamente pelo titleopcional.

A entrada existente na janela do

console é identificada pelo
parâmetro title(se presente) e
atualizada pelo comando count.Não é
criada uma nova entrada.

debug(message) Envia message para a janela do console. console.debug("logging

message");

Esse comando é idêntico a console.log.

Os objetos transmitidos usando o

comando são convertidos em um valor
de cadeia de caracteres.

dir(object) Envia o objeto especificado para a console.dir(obj);

Comando Descrição Exemplo

janela do console e o exibe em um

visualizador de objetos. Você pode usar
o visualizador para inspecionar
propriedades na janela do console.

dirxml(object) Envia o nó XML object especificado console.dirxaml(xmlNode);

para a janela do console e o exibe como
uma árvore de nós XML.

error(message) Envia message para a janela do console.error("error

message");
console.O texto da mensagem está em
vermelho e antecedido por um símbolo
de erro.

Os objetos transmitidos usando o

comando são convertidos em um valor
de cadeia de caracteres.

group(title) Inicia um agrupamento das mensagens console.group("Level 2

enviadas à janela do console e envia Header");
o title opcional como um rótulo de console.log("Level 2");
grupo. Os grupos podem ser aninhados console.group();
e aparecer em um modo de exibição de console.log("Level 3");
console.warn("More of level
árvore na janela do console.
3");
console.groupEnd();
Os comandos group* podem facilitar a console.log("Back to level
exibição da saída da janela do console 2");
em alguns cenários, como quando um console.groupEnd();
modelo de componente está em uso. console.debug("Back to the
outer level");

groupCollapsed(title) Inicia um agrupamento das mensagens O uso é o mesmo do

enviadas à janela do console e envia comando group.
o title opcional como um rótulo de
grupo. Os grupos enviados Consulte o exemplo do
usando groupCollapsedaparecem em comando group.
uma exibição recolhida por padrão. Os
grupos podem ser aninhados e aparecer
em um modo de exibição de árvore na
janela do console.

groupEnd() Encerra o grupo atual. Consulte o exemplo do

comando group.
Requisitos:

Visual Studio 2013

info(message) Envia message para a janela do console.info("info message");

console.A mensagem é prefaciada por
Comando Descrição Exemplo

um símbolo de informação. Para obter mais exemplos,

confira Formatando a saída do
console.log mais adiante neste
tópico.

log(message) Envia message para a janela do console. console.log("logging

message");

Se você transmitir um objeto, este

comando o enviará para a janela do
console e o exibirá num visualizador de
objeto. Você pode usar o visualizador
para inspecionar propriedades na janela
do console.

msIsIndependentlyComposed(element Usado em aplicativos da Web.Não tem Sem suporte.

)
suporte em aplicativos UWP usando
JavaScript.

profile(reportName) Usado em aplicativos da Web.Não tem Sem suporte.

suporte em aplicativos UWP usando
JavaScript.

profileEnd() Usado em aplicativos da Web.Não tem Sem suporte.

suporte em aplicativos UWP usando
JavaScript.

select(element) Seleciona o HTML console.select(element);

especificado element no Explorador do
DOM.

time (name) Inicia um temporizador que é console.time("app start");

app.start();
identificado pelo console.timeEnd("app start");
parâmetro nameopcional. Quando usado
com console.timeEnd, calcula o tempo
decorrido entre time e timeEnd e envia o
resultado (medido em ms) ao console
usando a cadeia de caracteres namecomo
prefixo.Usado para habilitar a
instrumentação de código do aplicativo
para medir o desempenho.

timeEnd(name) Interrompe um temporizador que é console.time("app start");

app.start();
identificado pelo console.timeEnd("app start");
parâmetro nameopcional. Consulte o
comando timedo console.

trace() Envia um rastreamento de pilha à console.trace();

janela do console. O rastreamento
Comando Descrição Exemplo

inclui a pilha de chamadas completa e

informações como o nome do arquivo,
o número da linha e o número da
coluna.

warn(message) Envia message para a janela do console, console.warn("warning

message");
prefaciada por um símbolo de aviso.

Os objetos transmitidos usando o

comando são convertidos em um valor
de cadeia de caracteres.

Comandos variados
Esses comandos também estão disponíveis na janela do Console do JavaScript (não estão disponíveis no
código).

Comando Descrição Exemplo

$0, $1, $2, $3, $4 Retorna o elemento especificado para $3

a janela do console. $0 retorna o
elemento selecionado atualmente no
Explorador do DOM, $1 retorna o
elemento selecionado anteriormente
no Explorador do DOM e assim por
diante, até o quarto elemento
selecionado anteriormente.

$(id) Retorna um elemento por ID.Este é $("contenthost")

um comando de atalho
para document.getElementById(id), em
que id é uma cadeia de caracteres que
representa a ID do elemento.

$$(selector) Retorna uma matriz de elementos que $$(".itemlist")

correspondem ao seletor especificado
usando a sintaxe do seletor de
CSS. Este é um comando de atalho
para document.querySelectorAll().

cd() Permite que você altere o contexto de cd();

avaliação da expressão, da janela de
cd(window) cd(myframe);
nível superior padrão da página para
a janela do quadro
especificado. Chamar cd()sem
parâmetros reverte o contexto para a
janela de nível superior.
Comando Descrição Exemplo

select(element) Seleciona o elemento especificado select(document.getElementById("element"));

no Explorador do DOM.
select($("element"));

select($1);

dir(object) Retorna um visualizador para o dir(obj);

objeto especificado. Você pode usar o
visualizador para inspecionar
propriedades na janela do console.

Verificando se um comando do console existe

Você pode verificar se um comando específico existe antes de tentar usá-lo. Este exemplo
verifica a existência do comando console.log. Se console.log existir, o código irá chamá-lo.

JavaScriptCopiar
if (console && console.log) {
console.log("msg");
}

Examinando objetos na janela Console do JavaScript

Você pode interagir com qualquer objeto que esteja no escopo usando a janela Console do
JavaScript. Para inspecionar um objeto fora do escopo na janela do console,
use console.log, console.dir ou outros comandos do seu código. Como alternativa, você pode
interagir com o objeto da janela do console enquanto está no escopo, definindo um ponto de
interrupção no seu código (ponto de interrupção > Inserir ponto de interrupção).

Formatando a saída do console.log

Se você transmitir diversos argumentos para console.log, o console os tratará como uma matriz
e concatenará a saída.

JavaScriptCopiar
var user = new Object();
user.first = "Fred";
user.last = "Smith";

console.log(user.first, user.last);
// Output:
// Fred Smith

console.log também oferece suporte a padrões de substituição "printf" para a formatação da

saída. Se você usar padrões de substituição no primeiro argumento, outros argumentos serão
usados para substituir os padrões especificados na ordem em que foram usados.
Há suporte para os seguintes padrões de substituição:

 %s – cadeia de caracteres %i – inteiro %d – inteiro %f – float %o – objeto %b – binário %x

– hexadecimal %e –exponente

Estes são alguns exemplos de como usar padrões de substituição no console.log:

var user = new Object();

user.first = "Fred";
user.last = "Smith";
user.age = 10.01;
console.log("Hi, %s %s!", user.first, user.last);
console.log("%s is %i years old!", user.first, user.age);
console.log("%s is %f years old!", user.first, user.age);

// Output:
// Hi, Fred Smith!
// Fred is 10 years old!
// Fred is 10.01 years old!

A história do JavaScript

JavaScript é uma linguagem de programação interpretada. Foi originalmente

implementada como parte dos navegadores web para que scripts pudessem ser executados do
lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo
servidor, controlando o navegador, realizando comunicação assíncrona e alterando o
conteúdo do documento exibido.

É atualmente a principal linguagem para programação client-side em navegadores web.

Começa também a ser bastante utilizada do lado do servidor através de ambientes como
o node.js. Foi concebida para ser uma linguagem com orientação a objetos baseada em
protótipos, tipagem fraca e dinâmica e funções de primeira classe. Possui suporte à
programação funcional e apresenta recursos como fechamentos e funções de alta ordem
comumente indisponíveis em linguagens populares como Java e C++. É a linguagem de
programação mais utilizada do mundo.

É baseada em ECMAScript padronizada pela Ecma international nas especificações ECMA-

262 e ISO/IEC 16262.

O JavaScript foi primeiramente desenvolvido por Brendan Eich quando trabalhou na

Netscape sob o nome de Moch, mas tarde teve seu nome alterado para LiveScript e por fim
JavaScript. LiveScript foi o nome oficial da linguagem quando foi lançada pela primeira vez
na versão beta do navegador Netscape 2.0 em setembro de 1995, mas teve seu nome mudado
em um anúncio conjunto com a Sun Microsystems em dezembro de 1995 quando foi
implementado no navegador Netscape versão 2.0B3.
A mudança de nome de LiveScript para JavaScript coincidiu com a época em que a Netscape
adicionou suporte à tecnologia Java em seu navegador (Applets). A escolha final do nome
causou confusão dando a impressão de que a linguagem foi baseada em java, sendo que tal
escolha foi caracterizada por muitos como apenas uma estratégia de marketing da Netscape
para aproveitar a fama do recém-lançado Java.

O JavaScript rapidamente ganhou ampla aceitação como linguagem de script client-side

de páginas web. Como consequência, a Microsoft desenvolveu um dialeto compatível com a
linguagem de nome JScript para evitar problemas de marca registrada. JScript adicionou
novos métodos para consertar métodos do JavaScript relacionados a data que apresentavam
problemas. JScript foi incorporado no Internet Explorer 3.0, lançado em Agosto de 1996.
JavaScript e Jscript são tão similares que os dois termos são comumente usados de forma
permutável. A Microsoft entretanto declara muitas características nas quais JScript não
conforma com a especificação ECMA.

O JavaScript tem se transformado na linguagem de programação mais popular da web.

Inicialmente, no entanto, muitos profissionais denegriram a linguagem pois ela tinha como
alvo principal o público leigo. Com o aproximação do Ajax, o JavaScript teve sua
popularidade de volta e recebeu mais atenção dos profissionais. O resultado foi a proliferação
de frameworks e bibliotecas, práticas de programação melhoradas e o aumento no uso do
JavaScript fora do ambiente de navegadores, bem como o uso de plataformas de
JavaScript server-side.

Em novembro de 1996 a Netscape anunciou que tinha submetido JavaScript para Ecma
internacional como candidato a padrão industrial e o trabalho subsequente resultou na versão
padronizada chamada ECMAScript.

Curso: Introdução ao JavaScript

Em janeiro de 2009 o projeto CommonJS foi fundado com o objetivo de especificar uma
biblioteca padrão para desenvolvimento JavaScript fora do navegador.

Inserindo o código JavaScript na página HTML

Os códigos JavaScript podem ser inseridos na página HTML de duas formas:

Interno no documento: para inserir o código direto na estrutura do HTML, utilizamos as

tags <script> e </script>, conforme mostra a Listagem 1.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//código JavaScript
</script>
 </head>
<body>
</body>
</html>

Listagem 1. Inserindo código JavaScript interno no HTML

Externo ao documento: o código JavaScript também pode ser mantido em um arquivo

separado do HTML. Para isso, deve-se referenciar tal arquivo na página, como vemos
na Listagem 2
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="meuArquivo.js"></script>
</head>
<body>
</body>
</html>

Listagem 2. Referenciando código JavaScript em arquivo externo

O arquivo deve ser salvo com a extensão .JS e sua estrutura é a mesma utilizada quando o
código é posto internamente no documento.

Cabe aqui uma observação importante: a tag <script> requer a tag de fechamento separada,
não podendo ser fechada em si própria como <script type=.. />.

Sintaxe da linguagem JavaScript

JavaScript foi criada com base na ECMAScript e sua sintaxe é bastante semelhante a
linguagens de alto nível muito utilizadas como C e Java, como veremos a seguir.

Usando variáveis no JavaScript

Essa linguagem possui tipagem dinâmica, ou seja, não é necessário definir o tipo das variáveis
ao declará-las, para isso basta usar a palavra reservada var. Na Listagem 3temos alguns
exemplos de utilização de variáveis.

var nome;
nome = “Fulano de Tal”;
var idade = 30;
idade = 30 + 20 - 10*5;

Listagem 3. Utilizando variáveis

Trabalhando com funções

JavaScript fornece também suporte a funções, aliado às facilidades da tipagem dinâmica, o

que torna a definição de métodos simples e prática. Para criar funções, utilizamos a palavra
reservada function.
As funções podem receber parâmetros e retornar valores, mas o tipo de retorno e o tipo dos
parâmetros não precisa ser previamente definido. Nas Listagens 4 e 5temos exemplos de funções
com e sem parâmetros e retorno.

function exibirMensagem()
{
alert(“Olá, seja bem vindo(a)!”);
}

Listagem 4. Função em JavaScript sem parâmetro e sem retorno

Observação: a função alert será apresentada posteriormente, mas serve para exibir uma mensagem popup
para o usuário.

function somar(A, B)
{
return A + B;
}

Listagem 5. Função em JavaScript com parâmetro e com retorno

Para definir o valor de retorno da função, deve-se utilizar a palavra reservada returnseguida do
valor ou expressão do resultado.

Estruturas de controle de fluxo

Assim como a maioria das linguagens de alto nível, JavaScript possui estruturas
condicionais e de repetição para controle de fluxo. Na Listagem 6 temos a sintaxe e um
exemplo de uso de tais estruturas.

if(condição 1)
{
//ação se condição 1 verdadeira
}
else if (condição 2)
{
//ação se condição 2 verdadeira
}
else
{
//ação se nenhuma das condições for verdadeira
}

Listagem 6. Sintaxe da estrutura if - else

O bloco else pode ser omitido, caso apenas uma condição precise ser avaliada. A Listagem
7 mostra um exemplo onde uma variável chamada idade é avaliada e, dependendo do seu valor, uma
mensagem é exibida na tela.

if(idade > 18)

{
alert(“É maior de idade”).
}
else
{
alert(“É menor de idade”);
}

Listagem 7. Exemplo de uso da estrutura if - else

switch(variável)
{
case valor1:
//ações caso valor1
break;
case valor2:
//ações caso valor2
break;
case valor3:
//ações caso valor3
break;
default:
//ações caso nenhum dos valores
break
}

Listagem 8. Sintaxe da estrutura switch

O comando switch verifica o valor de uma variável e, para cada uma das opções, executa um
conjunto de ações. Se nenhum dos valores for verificado, os comandos do bloco default são
executados.

O bloco default, porém, pode ser omitido caso não exista uma ação padrão a ser executada se nenhuma
das opções for observada.

switch(dia)
{
case 1:
alert(“Hoje é domingo”);
break;
case 2:
alert(“Hoje é segunda”);
break;
case 3:
alert(“Hoje é terça”);
break;
default:
alert(“Hoje não é nem domingo, nem segunda, nem terça”);
break
}

Listagem 9. Exemplo de uso da estrutura switch

while(condição)
{
//ações
}

Listagem 10. Sintaxe da estrutura while

A estrutura de repetição while é usada para executar um conjunto de ações enquanto uma condição for
verdadeira. Quando a condição se tornar falsa, o bloco é finalizado. A seguir temos um exemplo que exibe
uma mensagem para o usuário enquanto uma variável for menor que 5.

var contador = 0;
while(contador < 5)
{
alert(“Olá”);
contador = contador + 1;
}

Listagem 11. Sintaxe da estrutura while

Uma outra estrutura muito semelhante é a do - while, que executa um bloco de ações até que uma
condição seja falsa. Porém, essa condição é avaliada após a execução dos comandos, fazendo com que
estes sejam executados pelo menos uma vez.

do
{
//ações
}
while(condição)

Listagem 12. Sintaxe da estrutura do - while

O mesmo exemplo da Listagem 11, usando o do - while poderia ser representado como
na Listagem 13
var contador = 0;
do
{
alert(“Olá”);
contador = contador + 1;
}
while(contador < 5)

Listagem 13. Exemplo de uso da estrutura do - while

Por último, temos o comando for, que usa um contador para executar um bloco de ações uma
determinada quantidade de vezes.

for(inicialização; condição; complemento)

{
//ações
}

Listagem 14. Sintaxe da estrutura for

O entendimento dessa estrutura fica mais fácil se observarmos um exemplo prático.

Na Listagem 15, uma variável contador é inicializada com o valor zero, e enquanto for menor que
10, o laço for deve ser executado.

var contador;
for(contador = 0; contador < 10; contador++)
{
alert(contador);
}

Listagem 15. Exemplo da estrutura for

Exibindo mensagens para o usuário com
JavaScript: Alert

A linguagem JavaScript possui um número imenso de funções nativas que precisariam

de vários artigos para serem explicadas detalhadamente. Aqui, serão mostradas apenas
algumas das mais utilizadas por quem está iniciando os estudos.

A primeira função apresentada é a alert, que serve para exibir uma mensagem em uma janela
popup. Essa função recebe apenas um parâmetro, que é o texto a ser exibido.

Gostando? Compartilhe
Saiba mais sobre Alert Javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
alert("Olá, seja bem vindo ao Linha de Código.")
</script>
</head>
<body>
</body>
</html>

Listagem 16. Exemplo da função alert

Salvando o conteúdo da Listagem 16 como um arquivo de extensão HTML, ao abri-lo no

browser teríamos o como resultado uma mensagem como a mostrada na Figura 1.

Figura 1. Exemplo de uso da função alert

Em seguida, temos a função prompt, que também abre uma janela popup, mas com uma caixa de texto
para coletar informações do usuário. O retorno dessa função é o texto digitado.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
var nome;
nome = prompt("Qual é seu nome?");
alert("Olá, " + nome);
</script>
</head>
<body>
</body>
</html>
Listagem 17. Exemplo da função alert

Nesse caso, o valor retornado pela função prompt foi atribuído a uma variável chamada
“nome”, que é utilizada em seguida na função alert para saudar o usuário.

Figura 2. Exemplo de uso da função prompt

Manipulando eventos

A linguagem JavaScript também permite trabalhar com eventos dos elementos HTML
como botões e caixas de texto. Eventos são disparados quando alguma ação é executada,
como o clique e num botão ou a digitação de valores em um input.

No código JavaScript pode-se atribuir valores aos eventos como se fossem propriedades,
desde que o valor atribuído seja um código a ser executado. Por exemplo, a Listagem
18mostra o código de uma página com um botão que, ao ser clicado, exibe uma mensagem (alert).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button onclick="alert('Você clicou no botão');">clique aqui</button>
</body>
</html>

Listagem 18. Exemplo de tratamento de evento

Vale notar que nesse caso as tags <script> não foram necessárias, pois o código encontra-se
dentro do próprio button. Outro ponto a ser observado é que foram usadas aspas duplas para
definir o código e aspas simples no interior do mesmo, quando precisamos escrever um texto
dentro de um evento.

Caso o código a ser executado no evento seja muito extenso, é possível criar uma função para
isso e associá-la ao evento em questão. Basta informar, no lugar do código, o nome da função
(com parâmetros, caso existam). Na Listagem 19 temos um exemplo desse tipo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
function clique_botao()
{
 alert("Você clicou no botão");
}
</script>
</head>
<body>
<button onclick="clique_botao();">clique aqui</button>
</body></html>

Listagem 19. Exemplo de tratamento de evento usando função

Figura 3. Tratamento de evento onclick do botão

O código executado na função, para fins didáticos, é o mesmo que o da listagem anterior, mas
é fácil perceber que outras linhas poderiam ser inseridas para complementar o evento.

Agora foi preciso usar as tags <script> , pois o código encontra-se separado do elemento que
o utilizará.

Como vimos, o código JavaScript nos permite tornar uma página mais dinâmica, respondendo
a interações do usuário. A sintaxe, bastante parecida com outras linguagens e muito intuitiva,
facilita o aprendizado e utilização.

Antes de encerrar, cabe uma observação importante: alguns browsers bloqueiam a execução
de scripts JavaScript, pois estes podem ser utilizados de forma indevida para comprometer
informações do usuário. Portanto, caso você tenha dificuldade para testar algum dos exemplos
aqui apresentados ou outros códigos que venha a desenvolver, verifique as configurações do
seu browser.

Concluímos aqui este artigo, cujo objetivo foi fazer uma breve introdução à linguagem de
script do lado cliente mais utilizada atualmente: JavaScript. Para garantir domínio dessa
tecnologia, é preciso que o leitor busque outras fontes de informação como a documentação,
para isso acesse nossa Guia de JavaScript

Espero que essas informações possam ser úteis. Até a próxima.

Links Úteis sobre Javascript

 Curso completo de Javascript:
Em nosso curso de Javascript veremos todos os conceitos dessa linguagem de programação desde os conceitos
básicos até os mais avançados.
 DevCast: A jQuery substitui o JavaScript?:
Saber usar a jQuery é suficiente, ou ainda preciso conhecer a linguagem JavaScript? Para contribuir com essa
discussão, apresentamos nesse DevCast alguns exemplos e argumentos que lhe ajudarão a guiar seus estudos.
  Expressões regulares em JavaScript:
Neste artigo veremos como trabalhar com expressões regulares em JavaScript, facilitando a manipulação de
strings através de padrões que podem ser utilizados para validação e busca de dados.

Saiba mais sobre Javascript

 Gerando uma ação durante inatividade do usuário :

Nesta roda de código veremos como exibir notificações para o usuário após um tempo de inatividade na página usando a Page

Visibility API com JavaScript.

 Guia completo JavaScript:

Nesse guia conheceremos a linguagem de programação JavaScript, baseada em scripts client-side de páginas web e orientada a

objetos.

<HTML>
<HEAD>
<META CHARSET="UTF-8"/>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function addToTextArea(frm)
{
var val = frm.txt.value;
frm.txt.value = ' ';
frm.area.value += val +'\n';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=”myForm1”>
<INPUT TYPE='text' NAME = 'txt'>
<INPUT TYPE='button' VALUE = 'Adicionar' onClick='addToTextArea(this.form)'>
<TEXTAREA NAME='area' ROWS='5' COLS='65'>
</TEXTAREA><BR>
</FORM></BODY></HTML>