Considere a seguinte página:
1<html>
2 <head></head>
3 <body>
4 <input id="clickMe" type="button" value="Clique aqui">
5 </body>
6</html>
Que quando aberta no navegador tem a seguinte aparência:
Para obter o elemento do botão poderiamos fazer o seguinte:
1var btn = document.getElementById( 'clickMe' );
Agora que temos o objeto botão armazenado em uma variável chamada btn podemos obter mais informações.
Ao enviar a variável btn para a função console.log veremos a seguinte representação:
1console.log( btn )
2<input id="clickMe" type="button" value="Clique aqui">
Ao enviar a variável btn para a função console.dir teremos acesso a todas as propriedades internas do objeto.
1console.dir( btn )
A lista de propriedades é muito longa, abaixo vemos um trecho com as funções que tratam eventos (cliques, drag, change, …)
Adicionado um evento de clique
1// Definindo uma função de tratamento
2meuClique = function() { alert('Fui clicado'); }
3// Vinculando a função ao evento de clique do botão
4// Não usar `on`. Em vez de `onclick` use `click`
5btn.addEventListener("click", meuClique);
6
7// Clicar no botão ou executar `btn.click()`
Ao clicar no botão uma janela é exibida:
Ao usar novamente o comando console.dir( btn ) esperava ver no onclick
alguma informação sobre a função de tratamento, mas estava null.
Usando a função getEventListeners consegui localizar a função meuClique
$_ retorna o valor da última expressão avaliada
$0, $1,$2, $3 e $4 referenciam os últimos 5 elementos inspecionados
$(selector, [startNode]) referencia o primeiro elemento no DOM especificado pelo seletor CSS.
1$('input')
2<input id="clickMe" type="button" value="Clique aqui">
$$(selector, [startNode]) retorna um array de objetos
1var images = $$('img');
2for (each in images) {
3 console.log(images[each].src);
4}
$x(path, [startNode]) retorna um array de elementos que batem com uma expressão XPath
1$x("//p")
copy copia um objeto para a área de transferência
1copy($0);
monitor(function) monitor a execução de uma função
1function sum(x, y) {
2 return x + y;
3}
4monitor(sum);
5
6sum(1,2)
7// function sum called with arguments: 1, 2
monitorEvents(object[, events]) monitora eventos
1monitorEvents(window, "resize");
2// resize Event {isTrusted: true, type: "resize", target: Window, currentTarget: Window, eventPhase: 2, …}
3// resize Event {isTrusted: true, type: "resize", target: Window, currentTarget: Window, eventPhase: 2, …}
unmonitorEvents(object[, events])
Mais opções do console
1const label = 'Adolescent Irradiated Espionage Tortoises';
2console.group(label);
3console.info('Leo');
4console.info('Mike');
5console.info('Don');
6console.info('Raph');
7console.groupEnd(label);
1console.count();
2console.count('coffee');
3console.count();
4console.count();
5console.countReset();
6console.countReset('coffee');
1console.table([
2 {
3 first: 'René',
4 last: 'Magritte',
5 },
6 {
7 first: 'Chaim',
8 last: 'Soutine',
9 birthday: '18930113',
10 },
11 {
12 first: 'Henri',
13 last: 'Matisse',
14 }
15]);
1console.time();
2for (var i = 0; i < 100000; i++) {
3 let square = i ** 2;
4}
5console.timeEnd();
1const first = () => { second(); };
2const second = () => { third(); };
3const third = () => { fourth(); };
4const fourth = () => { console.trace(); };
5first();
1console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');
