Um bloco Javascript é definido no HTML assim:
<script>
// Todo código Javascript é escrito aqui dentro
document.write("Olá, Mundo!"); // Comando de saída, escrito no documento
</script>
Os principais dados usados em Javascript são esses:
10.12.5."Desenhar".true (verdadeiro) e false (falso), em alguns casos true é 1 e false é 0 ou vazio.Veja um exemplo de uso:
var num = 50;
var real = 9.85;
var frase = "Isso é uma String";
var logico = true;
Nas versões mais atuais, o ponto e vírgula no final das instruções não é mais obrigatório em Javascript, mas ele continua sendo obrigatório em linguagens semelhantes como o C ou mesmo o Java.
As concatenações em Javascript são feitas com o símbolo de +, e as atribuições são feitas com o símbolo de =, por exemplo:
var carro = "Fusca";
var combustivel = "gasolina";
document.write("O seu " + carro + " é movido com " + combustivel + "!");
Toda variável deve ser declarada com var na frente. Se utiliza também o let, que é para variáveis locais de blocos (como funções, condicionais e loops).
Todo código Javascript é colocado dentro de tags script, em arquivos JS separados, chamados pela tag script no HTML (do modo <script src="js/arquivo.js"></script>), ou em eventos.
Os comentários de uma linha se colocam ao lado de //, e de várias linhas entre /* */, por exemplo:
// Comentário de uma linha
/*
Comentário
de
várias
linhas
*/
PS: Javascript não é Java, são linguagens distintas, apesar de terem uma origem em comum que é o C.
O objeto pai dos objetos DOM é o window, que é dispensável usar a declaração. Os métodos alert, confirm, etc., e os objetos location, document, history, etc., são todos filhos de window.
Ao colocar URL Javascript no atributo href no HTML, colocar junto com o : e o operador void (vazio), tanto faz colocar com ou sem parênteses (preferível colocar com parênteses, alguns colocam um 0 dentro deles e/ou completam com ponto e vírgula no final, mas não é obrigatório), por exemplo:
javascript:void()
Isso chamará o Javascript "vazio".
URLs Javascript se colocam no href como se fossem um link, seguido do evento (por exemplo, onclick), que deverá ter o nome da função, exemplo:
<a href="javascript:void()" onclick="funcTeste()">Texto do Link</a>
No Script da linha acima seria algo tipo:
function funcTeste() {
alert("Esse é um Alerta!");
}
O Operador func no lugar de void também funciona (ou até mesmo sem nenhum operador, apenas com o : depois da inscrição), com ou sem ponto e vírgula no final, mas se colocar sem um deles, terá um erro de redirecionamento pra uma página inexistente. É mais aceitável usar mesmo javascript:void(). Não colocar outra palavra no lugar do javascript que dará erro de aplicação (pode até funcionar, mas redirecionará pra outra página exigindo instalação de aplicativo que não existe).
Podemos também fazer injeções diretamente na barra de endereço do navegador, para fazer alguns testes, isso não altera nada no site, só você pode ver as mudanças. Para isso, basta colocar no navegador os comandos em JS seguidos de javascript:
Um teste em Injeção é usar uma página sem fundo CSS e colocar na barra javascript:void(document.bgColor="blue") (obviamente, podemos usar outras cores). Isso também pode ser usado em botões. Por exemplo:
javascript:alert("A URL atual é: " + location.protocol + "//" + location.hostname + "/" + "\nA URL do endereço é: " + location.href + "\n" + "\nSe os nomes dos servidores não coincidirem, isso pode ser uma falsificação.")
No caso acima, esses são os significados:
location.protocol; // Retorna o protocolo (http ou https, por exemplo.)
location.hostname; // Retorna o nome do site.
location.href; // O link no qual você está atualmente.
Para "editar" uma página com Javascript, colocamos na injeção isso:
javascript:document.body.contentEditable = "true"; document.designMode = "on"; void0
Você pode usar na URL "javascript:history.go(-1)" para que o clique volte pra página anterior (ao colocar -1 entre os parênteses) ou vá pra seguinte (ao colocar 1 entre os parênteses), assim:
<a href="javascript:history.go(-1)">Voltar</a>
PS: O history.go pode ser trabalhado normalmente dentro de códigos script, com variáveis, condicionais, repetições, funções, etc., por exemplo:
function volta() {
history.go(-1);
}
Como o history.go, é possível inserir qualquer script com clique diretamente na chamada Javascript:
<a href="javascript:alert('Teste')">Link</a>
<a href="javascript:num1 = 6; num2 = 4; res = num1 + num2; alert(res)">Link</a>
<a href="javascript:funcaoTeste()">Link</a>
Ao chamar função com evento, sempre colocar parênteses (até porque a função no script obrigatoriamente terá parênteses para funcionar), exemplo:
onmouseover="funcao1()"
Ponto e vírgula pode colocar só pra separar duas ou mais comandos JS em HTML, exemplo:
<a href="index.html" onclick="alert('Você já está na Página Inicial'); return false">Teste</a>
Para impedir redirecionamento, só é obrigatório return false quando for inserido num evento no HTML. Dentro do JS e tags script, não é necessário colocar, mas coloque por prevenção caso não existam outros comandos.
PS: Quando quisermos pegar um valor de uma tag HTML, usamos o this (que significa auto-referência do objeto), seguido do parâmetro do qual ele pegará, por exemplo:
<input type="number" value="0" onclick="alert('O dobro de ' + this.value + ' é ' + (this.value * 2))"/>
O this.value pega o valor do input, qualquer valor modificado será pego.
Além do value, também podemos pegar outros elementos. Para trabalhar com manipulação de imagens por eventos, se usa o this.src e o caminho da foto entre aspas simples, assim:
<img src="imagens/sao-paulo.jpg" alt="Teste" onmouseover="this.src = 'imagens/bahia.jpg'"
onmouseout="this.src = 'imagens/sao-paulo.jpg'"/>
Se quisermos pegar o título da Guia em JS, usamos simplesmente o document.title, assim:
document.write("Título da Janela aberta: " + document.title + ".");
Outro exemplo com o name:
function obrigatorio(x) {
if(x.value == "") {
alert("O campo " + x.name + " não pode ficar vazio!");
}
}
Input do código acima:
<input type="text" name="nome" onblur="obrigatorio(this)"/>
Veja que nesse código acima, o argumento this é passado num evento JS (seria o mesmo que this.name).
E se quiser remover espaços desnecessário de uma string, use o método trim() na variável.
Variáveis são elementos que retém e representam um valor ou expressão, as constantes agem do mesmo modo, só que estas devem sempre ter valores atribuídos a si que não podem ser alterados em nenhum momento do script, as variáveis nem sempre precisam ter um valor atribuído (que pode ser alterado), exemplo:
var nome;
const LUGAR = 10;
Mesmo se alterarem valores das constantes em outras linhas do código, a constante não muda e não é reconhecida pelo script, exemplo:
var nome;
const LUGAR = 10;
nome = prompt("Digite aqui");
LUGAR = 15; // Não funciona em constante (retirar pra funcionar), se fosse variável modificaria para esse valor.
document.write(nome + ", o número é " + LUGAR);
PS: Variáveis podem ser modificadas nesse método. E não é necessário declarar ou inicializar variáveis em Javascript, e o tipo delas são identificadas automaticamente ao inserir os valores.
Constantes são mais seguras para valores que não irão se alterar. Mas no geral, variáveis são mais usadas.
Os operadores aritméticos em Javascript são esses:
| Operador Aritmético | Significado |
|---|---|
| + | Soma |
| - | Subtração |
| * | Multiplicação |
| / | Divisão |
| % | Módulo |
| ++ | Pré ou pós incremento |
| -- | Pré ou pós decremento |
Veja alguns exemplos de usos de valores:
var a = 50;
var b = 20;
document.write("Valor de a: " + a + "<br/>");
document.write("Valor de b: " + b + "<br/>");
document.write("Soma: " + (a + b) + "<br/>");
document.write("Subtração: " + (a - b) + "<br/>");
document.write("Multiplicação: " + (a * b) + "<br/>");
document.write("Divisão: " + (a / b) + "<br/>");
document.write("Módulo: " + (a % b) + "<br/>");
document.write("Incremento de " + a + ": " + (++a) + "<br/>");
document.write("Decremento de " + b + ": " + (--b) + "<br/>");
Observe também que o ++ e o -- vem antes da variável, isso se chama pré-incremento/decremento (fazendo a conta antes da variável), quando vem depois da variável é pós-incremento/decremento (fazendo a conta depois da variável), a posição faz toda a diferença.
Numa expressão única, pré e pós incremento/decremento não faz muita diferença, mas num comando de exibição ou expressão faz.
Lembre-se sempre da ordem de precedência da matemática, que na ordem é parênteses (), multiplicação *, divisão / (incluindo módulo %), adição + e subtração -.
Cuidado que o + também é usado pra concatenar valores. Para que os valores com + não sejam concatenados como strings, coloque as variáveis entre outros parênteses (por hábito, use em outras operações aritméticas), normalmente com a concatenação, por exemplo:
var num1 = 3;
var num2 = 5;
alert("A soma de " + num1 + " mais " + num2 + " é " + (num1 + num2) + "!");
Lembre-se também que = é atribuição. Para valores iguais se usa ==.
PS: Podemos também colocar atribuição com algum valor, como por exemplo num += 2 ou num -= 3, que faça a atribuição e a operação juntos no mesmo comando. Concatenação com atribuição também pode ser colocada com o +=.
O método alert, como visto, é usado para exibir uma caixa de alerta no navegador com a mensagem. O document.write faz o mesmo, mas em vez do alerta, escreve no documento (esse método aceita tags HTML), por exemplo:
alert("Algo será escrito no documento!");
document.write("Isso foi escrito com Javascript!<br/>");
O método confirm é usado junto com o if e else (que pode ter outros códigos entre eles). Ele é como um alert, mas com duas opções, a de OK e a de Cancelar, por exemplo:
var acesso = confirm("Esse site é para maiores de 18 anos, você realmente quer acessá-lo?");
if(acesso == true) {
alert("Acesso permitido ao site! Bem-vindo!");
location = "index.html";
}
else {
alert("Você é de menor e não pode acessar o site! Desculpe!");
history.go(-1);
}
O método prompt age como um confirm, com uma caixa de texto pra digitar valores, que podem ser trabalhados em variáveis, por exemplo:
alert("Vamos fazer uma divisão!");
var numerador = prompt("Digite o numerador", "0");
var denominador = prompt("Digite o denominador", "0");
var resultado = eval(numerador) / eval(denominador);
alert("O resultado da divisão de " + numerador + " e "+ denominador + " é de " + resultado + "!");
PS: Podemos concatenar dessa forma também, usando ${}, dessa forma:
alert(`O resultado da divisão de ${numerador} e ${denominador} é de ${resultado}!`); // Nesse caso só dá certo com crases