Podemos usar os eventos diretamente no Javascript sem depender diretamente do HTML. Como um exemplo, crie uma div com id d1 no HTML (para identificação maior coloque um estilo CSS nela, e não esqueça do position como absolute.
Coloque esse código no Javascript:
function mensagem() {
alert("Exemplo de Mensagem!");
}
Normalmente, usaríamos o evento onclick do elemento HTML pra chamar a função (no caso na nossa div). Mas usando o addEventListener podemos fazer tudo via Javascript, por exemplo (coloque numa tag script abaixo dessa div):
document.getElementById("d1").addEventListener("click", mensagem); // Os parâmetros são o evento a ser capturado, e a função especificada.
Basicamente, os eventos são os mesmos conhecidos, mas sem o "on" na frente.
PS: A função pode ser colocada diretamente no método addEventListener, assim:
document.getElementById("d1").addEventListener("click", function(event) {
alert("Exemplo de Mensagem!");
});
Podemos também fazer assim:
function mensagem() {
alert("Exemplo de Mensagem!");
}
function adicEventos() {
document.getElementById("d1").addEventListener("click", mensagem);
}
E depois chamar o método adicEventos pelo evento onload do HTML.
Mas para também não misturar nem isso com HTML, podemos também chamar o evento via Javascript, assim:
addEventListener("load", adicEventos); // Chama através do window
Agora deixe o código assim:
function mensagem() {
alert("Exemplo de Mensagem!");
}
function mudarCor(obj, cor) {
obj.style.backgroundColor = cor;
}
function adicEventos() {
let obj = document.getElementById("d1");
obj.addEventListener("click", mensagem);
obj.addEventListener("mouseover", function(event) {
mudarCor(this, "white"); // this será substituído pelo objeto obj.
});
obj.addEventListener("mouseout", function(event) {
mudarCor(this, "red");
});
}
addEventListener("load", adicEventos);
Ele mudará a cor ao passar e tirar o mouse do elemento.
Para pegar dados do teclado, usamos o evento keydown, assim (não esqueça de colocar position: absolute no CSS da div):
var x = 0;
var y = 0; // Posições x e y
document.addEventListener("keydown", function(event) {
let obj = document.getElementById("d1");
let tecla = event.keyCode; // Isso pega a tecla pressionada.
switch(tecla) {
case 37: // Esquerda
x -= 10;
obj.style.left = x + "px";
break;
case 38: // Cima
y -= 10;
obj.style.top = y + "px";
break;
case 39: // Direita
x += 10;
obj.style.left = x + "px";
break;
case 40: // Baixo
y += 10;
obj.style.top = y + "px";
break;
}
});
/*
No caso usaremos os códigos das teclas direcionais que são:
37 - Esquerda.
38 - Cima.
39 - Direita.
40 - Baixo.
*/
Ou, simplificando:
var x = 0;
var y = 0; // Posições x e y
function mover() {
let obj = document.getElementById("d1");
let tecla = event.keyCode; // Isso pega a tecla pressionada.
switch(tecla) {
case 37: // Esquerda
x -= 10;
obj.style.left = x + "px";
break;
case 38: // Cima
y -= 10;
obj.style.top = y + "px";
break;
case 39: // Direita
x += 10;
obj.style.left = x + "px";
break;
case 40: // Baixo
y += 10;
obj.style.top = y + "px";
break;
}
}
document.addEventListener("keydown", mover);
PS: Para remover o evento da div, coloque uma das opções do switch para isso, como por exemplo ao clicar enter:
case 13: // Tecla Enter
alert("Evento keydown removido");
document.removeEventListener("keydown", mover);
O createElement cria um elemento HTML no documento ou de outro item já existente.
Veja um exemplo:
var novo = document.createElement("p"); // Cria o elemento HTML especificado.
novo.textContent = "Exemplo de frase adicionado no documento!"; // Coloca o texto dentro do elemento criado.
function inicia() {
document.body.appendChild(novo); // Adiciona no documento dentro da tag especificada, no caso, a body.
}
addEventListener("load", inicia);
Podendo ser assim também:
var novo = document.createElement("p");
var texto = document.createTextNode("Curso de Javascript!");
function inicia() {
novo.appendChild(texto);
document.body.appendChild(novo);
}
addEventListener("load", inicia);
Crie um formulário simples com um input e um botão, com uma lista, assim:
<form action="#">
<input type="text" id="novo" required autofocus/>
<input type="button" id="add" value="Adicionar"/>
<ul id="lista">
</ul>
</form>
E no Javascript, adicione isso:
function inicia() {
document.getElementById("add").addEventListener("click", function(event) {
let lista = document.getElementById("lista");
let texto = document.getElementById("novo");
let li = document.createElement("li");
li.textContent = texto.value.trim();
lista.appendChild(li);
texto.value = "";
texto.focus();
});
}
addEventListener("load", inicia);
JSON (Javascript Object Notation) é o formato usado para armazenamento e troca de informações em arquivos de texto. JSON foi baseado no Javascript, mas pode ser usado independentemente da linguagem de programação.
Arquivos JSON são compostos por objetos que apresentam um conjunto de chaves e valores separados por vírgula. Valores podem receber strings (escritas com aspas), numerais (escritos sem aspas), arrays, estruturas lógicas, objetos nulos (null) ou até mesmo outros objetos.
Sintaxe do JSON:
"objeto" = {
"chave": "valor",
[...]
}
Por exemplo:
let pessoa = {
nome: "José",
sobrenome: "da Silva",
idade: 34
};
Em geral, arquivos JSON são salvos em um arquivo separado na extensão .json
.
Exemplo: empresa.json
:
{
"funcionarios": [
{"nome": "José", "sobrenome": "da Silva", "idade": 23},
{"nome": "Ana", "sobrenome": "Gonzales", "idade": 33},
{"nome": "Sérgio", "sobrenome": "Parker", "idade": 18}
]
}
script.js
– declaração direta no código JS como uma string:
var obj = JSON.parse('{\
"funcionarios": [\
{"nome": "José", "sobrenome": "da Silva", "idade": 23},\
{"nome": "Ana", "sobrenome": "Gonzales", "idade": 33},\
{"nome": "Sérgio", "sobrenome": "Parker", "idade": 18}\
]\
}');
for(let f of obj.funcionarios) {
document.write(`Nome: ${f.nome} ${f.sobrenome}. Idade: ${f.idade}.<br/>`);
}
Geolocalização corresponde à detecção de sua posição geográfica com base no sistema global de linhas imaginárias horizontais e verticais que dividem a superfície da Terra. Latitude corresponde às linhas horizontais, e longitude, às verticais.
Nos dias de hoje tornou-se trivial a utilização de métodos de obtenção de localização do dispositivo de acesso, e tal posicionamento pode ser explorado por scripts construídos com Javascript. Navegadores modernos apresentam suporte à API da geolocalização. A obtenção do posicionamento pode ser feita através da propriedade global navigator e do objeto geolocation.
var lat;
var lon;
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
lat = pos.coords.latitude;
lon = pos.coords.longitude;
document.write(`Latitude: ${lat}. Longitude: ${lon}.`);
var acesso = confirm("Deseja ver o local no Google Maps?");
if(acesso) {
var maps = `https://www.google.com/maps?q=${lat},${lon}`;
open(maps, "_blank");
}
});
}
Ao abrir essa página no navegador, se houver suporte será exibida uma caixa de diálogo questionando se você autoriza a divulgação de sua geolocalização. Esse procedimento garante que sua localização seja utilizada apenas quando previamente autorizado.