Funções são conjuntos de instruções que podem ser executadas como um único comando. Permitem reuso de código, o que poupa linhas de código no script. Podem receber parâmetros e retornar valores, ou executar uma tarefa.
Para uma função ser utilizada, primeiro precisamos definir ela. Para criar uma função usamos o comando function, a função tem que se chamada para funcionar, como podem ver:
function aviso() {
alert("Mensagem chamada em função!");
}
aviso();
Veja outro exemplo:
function saudacao(nome) {
alert("Bom dia, " + nome);
}
var cham = prompt("Digite seu nome na caixa abaixo!");
saudacao(cham);
Uma função também pode retornar um valor ao script, usamos a palavra-chave return para isso, como no exemplo:
var tens = parseInt(prompt("Entre com o valor da tensão!", "0"));
var resis = parseInt(prompt("Entre com o valor da resistência!", "0"));
function calcula(t, r) {
let res = t / r;
return res;
}
var corr = calcula(tens, resis);
document.write("O valor da corrente é " + corr + " A.");
Invocações de funções em Javascript costumam ser muito utilizadas em eventos como o onclick.
Uma função pode se comunicar com o programa onde ela é executada por meio de argumentos passados a ela, assim com o valor retornado pela função.
Argumentos são passados a uma função usando parâmetros, que são nomes declarados no cabecalho da função.
Parâmetros de tipos primitivos, como strings, numéricos ou booleanos, são passados por valor, o que significa que se o argumento for dentro da função, essa alteração não se reflete na variável do programa original (fora da função).
Objetos já são passados por referência, assim sendo, se a alteração for realizada no objeto dentro da função, a alteração irá se propagar para o objeto fora da função, no programa chamado.
Veja um exemplo de passagem de parâmetros:
function saudacao(nome) {
alert("Bom dia, " + nome);
}
var cham = prompt("Digite seu nome na caixa abaixo!");
saudacao(cham);
Na invocação pode ser usado qualquer tipo de dado, mesmo não sendo variável, por exemplo:
function soma(x, y) {
let res = x + y;
alert("A soma é " + res);
}
soma(15, 10);
PS: As funções também podem ser inicializadas dessa forma, que serão substituidas pelos dados passados pela invocação:
function soma(x = 0, y = 0) {
let res = x + y;
alert("A soma é " + res);
}
soma(15, 10);
soma(20);
soma();
As funções também podem ser chamadas mais de uma vez no mesmo script, com parâmetros diferentes ou mesmo sem eles.
Nesse exemplo, a função recebe dois argumentos, uma string (tipo primitivo) e um array (objeto). Os valores são modificados dentro da função, e então verificamos se as variáveis originais também são modificadas ou não.
function valorRef(strVar, arrVar) {
strVar = "String Modificada";
arrVar[0] = "Array Modificado";
}
var tex = "Valor Original";
var vet = ["Valor Original"];
document.write("String antes de chamar a função: " + tex + ".<br/>");
document.write("Array antes de chamar a função: " + vet[0] + ".<br/>");
// Chamando a função!
valorRef(tex, vet);
document.write("String após chamar a função: " + tex + ".<br/>");
document.write("Array após chamar a função: " + vet[0] + ".<br/>");
No código acima, apenas o array é alterado.
Nesse exemplo, podemos ver que é possível passar múltiplos parâmetros:
function saudacao(nome, sobrenome) {
alert("Bom dia, " + nome + " " + sobrenome);
}
var cham1 = prompt("Digite seu nome na caixa abaixo!");
var cham2 = prompt("Digite seu sobrenome na caixa abaixo!");
saudacao(cham1, cham2);
PS: Nos parâmetros também podemos passar arrays, simplesmente passando a variável, algo tipo funcao(vetorpassado).
Uma função pode ou não retornar um valor ao programa chamador da invocação. Caso seja retornado um valor, usamos a instrução return em um ponto apropriado do script.
Quando a instrução return é encontrada, o processamento do código da função para neste ponto, e retorna o valor (e o controle) para o chamador. Podemos ter mais de uma instrução return em uma função.
Veja esse exemplo, que usamos pra calcular o quadrado de um número:
function quadr(num) {
let q = num * num;
return q;
}
var n = parseInt(prompt("Entre com um número pra definir o quadrado dele!", "0"));
document.write("O quadrado de " + n + " é " + quadr(n));
Podemos usar também mais de uma declaração return, veja o exemplo acima com um if:
function quadr(num) {
if(isNaN(num)) {
return "O valor digitado não é válido!";
}
let q = num * num;
return q;
}
var n = parseInt(prompt("Entre com um número pra definir o quadrado dele!", "0"));
document.write(quadr(n));
Quando você cria uma variável em Javascript, ela pode ter um escopo global ou local. Escopo é o local dentro do código onde essa variável é reconhecida e utilizada.
Exemplo de variável global, que pode ser usada dentro ou fora de uma função, em qualquer ponto do script:
var dinheiro = "moeda";
function obterGrana() {
document.write(dinheiro + "<br/>");
}
obterGrana();
document.write("Eu preciso de uma " + dinheiro);
Esse é um exemplo de variável local, que só é válida dentro da função onde ela se encontra, o que estiver fora não está acessível:
function obterGrana() {
var dinheiro = "moeda";
document.write(dinheiro + "<br/>");
}
obterGrana();
document.write("Eu preciso de uma " + dinheiro);
Mas se a variável for declarada dentro da função sem a declaração var, ela é considerada global (é como se fosse declarada antes da função), como podem ver:
function obterGrana() {
dinheiro = "moeda";
document.write(dinheiro + "<br/>");
}
obterGrana();
document.write("Eu preciso de uma " + dinheiro);
Mas esse método anterior é bom ser evitado pra não criar erros.
Também existe a opção let para declarar variáveis locais (inclusive é o recomendado pra funções):
function obterGrana() {
let dinheiro = "moeda";
document.write(dinheiro + "<br/>");
}
obterGrana();
document.write("Eu preciso de uma " + dinheiro);
O objeto Math fornece propriedades e métodos matemáticos. Todas as suas propriedades e métodos são estáticos, significando que não criamos uma nova instânia de Math para utilizar sua funcionalidade, acessamos essas propriedades e métodos da próprio classe.
Veja algumas das propriedades do objeto Math:
| Propriedade | Significado |
|---|---|
| LN10 | Logaritmo natural de 10 |
| LN2 | Logaritmo natural de 2 |
| L0G10E | Logaritmo de base 10 de E |
| PI | Valor de Pi |
| SQRT2 | Raiz quadrada de 2 |
| SQRT1_2 | Raiz quadrada de ½ |
Veja um exemplo de aplicação:
document.write("Logaritmo natural de 10: " + Math.LN10 + "<br/>");
document.write("Valor de PI: " + Math.PI + "<br/>");
document.write("Raiz quadrada de 2: " + Math.SQRT2 + "<br/>");
PS: O logaritmo de um número é o expoente a que outro valor fixo, a base, deve ser elevado para produzir este número.
Todos os argumentos passados para os métodos (funções) do objeto Math são convertidos para números, primeiro (automaticamente, portanto, não é necessário efetuar conversões via código). Diversos métodos estão disponíveis no objeto Math, incluindo funções trigonométricas, geração de números aleatórios e exponenciação, entre outros.
Veja uma pequena lista dos métodos do objeto Math:
| Método | Significado |
|---|---|
| abs(x) | Retorna o valor absoluto de x |
| sqrt(x) | Retorna a raiz quadrada de x |
| cbrt(x) | Retorna a raiz cúbica de x |
| sin(x) | Seno de um ângulo específico x, em radianos |
| cos(x) | Cosseno de um ângulo específico x, em radianos |
| tan(x) | Tangente de um ângulo específico x, em radianos |
| ceil(x) | Arredonda x para o inteiro acima |
| floor(x) | Arredonda x para o inteiro abaixo |
| round(x) | Arredonda x para o inteiro mais próximo. |
| pow(x, y) | Retorna x elevado a y |
| min(x1, x2, x3, ...) | Compara os números e retorna o menor valor dos argumentos |
| max(x1, x2, x3, ...) | Compara os números e retorna o maior valor dos argumentos |
| random() | Gera um número entre 0 e 1, aleatoriamente |
Veja um exemplo de alguns desses métodos:
var a = 4.89;
var x = 7;
var y = 6;
document.write("Arredondando A para cima: " + Math.ceil(a) + "<br/>");
document.write("X elevado a Y: " + Math.pow(x, y) + "<br/>");
document.write("Menor valor dos três: " + Math.min(a, x, y) + "<br/>");
document.write("Gera valor aleatório: " + Math.round(Math.random() * 10) + "<br/>");
PS: Se quiser obter um valor maior, como entre 0 e 10, você pode simplesmente multiplicar o random, como no exemplo acima. Esse caso acima geraria números de 0 a 10.
Veja um exemplo de um script que gera números aleatórios pra loterias, nesse caso, usamos apenas números arredondados pra inteiros e com um limite:
do {
var num1 = Math.round(Math.random() * (80 - 1) + 1);
var num2 = Math.round(Math.random() * (80 - 1) + 1);
var num3 = Math.round(Math.random() * (80 - 1) + 1);
var num4 = Math.round(Math.random() * (80 - 1) + 1);
var num5 = Math.round(Math.random() * (80 - 1) + 1);
}
while(num1 == num2 || num1 == num3 || num1 == num4 || num1 == num5 ||
num2 == num3 || num2 == num4 || num2 == num5 ||
num3 == num4 || num3 == num5 ||
num4 == num5);
// No caso, o 80 é o número máximo, e 1, a contagem do qual se inicia.
var quina = [num1, num2, num3, num4, num5];
function ordenar(a, b) {
return a - b;
}
quina.sort(ordenar);
document.write(quina + "<br/>");
Como visto no exemplo acima, no caso de querer pegar valores entre um número mínimo e máximo, faça algo do tipo:
var mini = 12;
var maxi = 14;
document.write(Math.round(Math.random() * (maxi - mini) + mini));
Eventos são conjunto de ações que são realizadas em determinado elemento da web, principalmente em HTML (podem ser com textos, imagens, etc.). Muitas das interações do usuário no seu site podem ser consideradas eventos.
Esses são alguns dos eventos mais utilizados:
| Evento | Significado |
|---|---|
| onblur | Remove o foco do elemento |
| onchange | Muda o valor do elemento |
| onclick | O elemento é clicado pelo usuário |
| onfocus | O elemento é focado |
| oninput | Define ação quando o usuário digita algo no input |
| onkeypress | O usuário pressiona uma tecla sobre o elemento |
| onload | Carrega o elemento por completo (só pode ter um evento load por página) |
| onmouseover | Define ação quando o usuário passa o mouse sobre o elemento |
| onmouseout | Define ação quando o usuário retira o mouse sobre o elemento |
| onresize | Define ação ao redimensionar a página |
| onsubmit | Define ação ao enviar um formulário |
PS: Caso queira obter a tecla pressionada, use o evento onKeyDown e o código String.fromCharCode(event.keyCode)) para pegar a tecla.