09 – Javascript – Funções e Eventos (Functions e Events)
Javascript – Funções e Eventos (Functions e Events)
Funções e Eventos (Functions e Events)
Voltar para página principal do blog
Todas as aulas desse curso
Aula 08
Aula 10
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Meus links de afiliados:
Hostinger
Digital Ocean
One.com
Funções em Javascript
Uma função JavaScript é um bloco de código que pode ser executado quando “chamado”.
Uma função pode ser chamada quando ocorre um evento, por exemplo, quando o usuário clica em um botão.
JavaScript em <head> ou <body>
Você pode colocar vários scripts em um documento HTML se for necessário.
Podem ser colocados no <body>, ou na seção <head> de uma página HTML ou em ambos os lugares.
JavaScript no <head>
Neste exemplo, uma função JavaScript é colocada na seção <head> de uma página HTML.
Crie o exemplo09/index09.html e coloque esse conteúdo abaixo. A função é chamada quando um botão é clicado.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 9: Fundamentos da Linguagem JavaScript - Código Fluente</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Depois do clique o parágrafo mudou!";
}
</script>
</head>
<body>
<h1 align="center">Aula 9: Fundamentos da Linguagem JavaScript - Código Fluente</h1>
<br>
<h1 align="center">Funções e Eventos</h1>
<br>
<h2 align="center">JavaScript no head do HTML</h2>
<p align="center" id="demo">Apenas um simples parágrafo.</p>
<div align="center">
<button type="button" onclick="myFunction()">Clique aqui</button>
</div>
</body>
</html>
JavaScript no <body>
Neste exemplo, uma função JavaScript é colocada na seção <body> de uma página HTML. A função é chamada quando um botão é clicado.
Modifique o exemplo09/index09.html colocando o código abaixo nele:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 9: Fundamentos da Linguagem JavaScript - Código Fluente</title>
</head>
<body>
<h1 align="center">Aula 9: Fundamentos da Linguagem JavaScript - Código Fluente</h1>
<br>
<h1 align="center">Funções e Eventos</h1>
<br>
<h2 align="center">JavaScript no body do HTML</h2>
<p align="center" id="demo">Apenas um simples parágrafo.</p>
<div align="center">
<button type="button" onclick="myFunction()">Clique aqui</button>
</div>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Depois do clique o parágrafo mudou!";
}
</script>
</body>
</html>
JavaScript em arquivo externo
Isso não é novidade para nós, já vimos isso nas aulas anteriores onde criamos scripts externos, mas, vamos reforçar esse conhecimento.
Os Scripts externos são práticos quando o mesmo código é usado em muitas páginas diferentes.
Colocar scripts na parte inferior do elemento <body> melhora a velocidade de exibição.
A interpretação do script deixa mais lenta a exibição, porque ele primeiro interpreta e depois exibe.
Colocando no fim, ele carrega a página com as partes estáticas sem esperar a finalização da interpretação do script.
Os arquivos JavaScript possuem a extensão .js.
Crie na mesma pasta do exemplo09/index09.html o arquivo externo:
exemplo09/myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Depois do clique o parágrafo muda!";
}
Para usar um script externo, coloque o nome do arquivo do script no atributo src(source) de uma tag <script> no html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 9: Fundamentos da Linguagem JavaScript - Código Fluente</title>
</head>
<body>
<h1 align="center">Aula 9: Fundamentos da Linguagem JavaScript - Código Fluente</h1>
<br>
<h1 align="center">Funções e Eventos</h1>
<br>
<h2 align="center">JavaScript no body do HTML</h2>
<p align="center">(myFunction está armazenado em um arquivo externo chamado "myScript.js")</p>
<p align="center" id="demo">Apenas um simples parágrafo.</p>
<div align="center">
<button type="button" onclick="myFunction()">Clique aqui</button>
</div>
<script src="myScript.js"></script>
</body>
</html>
Você pode colocar uma referência ao script externo no <head> ou no <body>.
O script se comportará como se estivesse localizado exatamente onde a tag <script> está localizada.
Scripts externos não podem conter tags <script>.
Vantagens do JavaScript externo
Colocar scripts em arquivos externos tem algumas vantagens:
- Ele separa HTML e código
- Torna o HTML e o JavaScript mais fáceis de ler e manter
- Arquivos JavaScript armazenados em cache podem acelerar os carregamentos de página
Para adicionar vários arquivos de script a uma página use várias tags script:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Referências Externas
Os scripts externos podem ser referenciados com uma URL completa ou com um caminho relativo de uma página.
Este exemplo usa uma URL completa para vincular a um script:
<script src="https://www.enderecoweb.com/js/myScript1.js"></script>
Este exemplo usa um script localizado em uma pasta especificada:
<script src="./js/myScript1.js"></script>
Este exemplo vincula a um script localizado na mesma pasta da página atual:
<script src="myScript1.js"></script>
Função
Uma função JavaScript é um bloco de código projetado para executar uma tarefa específica.
Uma função JavaScript é executada quando “algo” a invoca (chama).
function multiplication(n1, n2) {
return n1 * n2; // A função retorna o produto de n1 e n2
}
Sintaxe da Função JavaScript
Uma função JavaScript é definida com a palavra-chave function, seguida por um nome e por parênteses ().
Os nomes das funções podem conter letras, dígitos, sublinhados e cifrões (mesmas regras das variáveis).
Os parênteses podem incluir nomes de parâmetros separados por vírgulas:
(parâmetro1, parâmetro2, …)
O código a ser executado, pela função, é colocado dentro de chaves: {}
function name(parameter1, parameter2, parameter3) {
// código a ser executado
}
Os parâmetros da função são listados dentro dos parênteses () na definição da função.
Argumentos de função são os valores recebidos pela função quando ela é invocada.
Dentro da função, os argumentos (os parâmetros) se comportam como variáveis locais.
Uma função é praticamente igual a um procedimento ou uma sub-rotina, que existem em outras linguagens de programação.
Invocação de função
O código dentro da função será executado quando “algo” invocar (chamar) a função:
- Quando um evento ocorre (quando um usuário clica em um botão)
- Quando é invocado (chamado) do código JavaScript
- Automaticamente (auto invocado)
Retorno de função
Quando o script atinge uma declaração de retorno, a função irá parar de executar.
Se a função foi invocada a partir de uma instrução, o JavaScript “retornará” a execução do código após a instrução de chamada.
Funções freqüentemente calculam um valor de retorno e esse valor é retornado a quem chamou:
Exemplo
Calcule o produto de dois números e retorne o resultado:
var x = multiplication(4, 3); // A função é chamada e o valor de retorno é atribuído a x
function multiplication(a, b) {
return a * b; // A função retorna o produto de a e b
}
O valor em x será:
12
Por que funções?
Você pode reutilizar código: defina o código uma vez e use-o várias vezes.
Você pode usar o mesmo código várias vezes com argumentos diferentes para produzir resultados diferentes.
Exemplo
Crie outro HTML chamado conversor na mesma pasta exemplo09/conversor.html e coloque o código abaixo nele.
Ele será um conversor de temperatura que converte de Fahrenheit para Celsius:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 9: Fundamentos da Linguagem JavaScript - Código Fluente</title>
<link rel="stylesheet" type="text/css" href="temperature.css">
</head>
<body>
<h1 align="center">Aula 9: Fundamentos da Linguagem JavaScript - Código Fluente</h1>
<br>
<h1 align="center">Funções e Eventos</h1>
<br>
<h1 align="center">Digite uma temperatura em Fahrenheit para converter</h1>
<div align="center">
<div class="input-container">
<label class="label" for="name">Fahrenheit</label>
<input class="input" type="text" id="tempinput" placeholder="Temperatura em Fahrenheit">
<br>
<br>
<button type="button" onclick="toCelsius()">Converter</button>
<br>
<br>
<label class="label" for="name">Celsius</label>
<input class="input" type="text" id="result" placeholder="Resultado em Celsius">
<div>
</div>
<script src="fahrenheit_to_celsius.js"></script>
</body>
</html>Crie o exemplo09/fahrenheit_to_celsius.js:
exemplo09/fahrenheit_to_celsius.js
/* Quando o campo de input recebe uma entrada, converta o valor de fahrenheit para celsius */
function toCelsius() {
var f = document.getElementById("tempinput").value;
temperature = (f - 32) * 5 / 9;
document.getElementById("result").value = temperature;
}
Vamos deixar nosso conversor mais bonitinho, vamos dá uma estilizada nele usando o materialize.
Crie o exemplo09/temperature.css
/* Estrutura */
.input-container {
position: relative;
}
input {
border: 0;
border-radius: 10px;
border-bottom: 2px solid #9e9e9e;
outline: none;
transition: .2s ease-in-out;
box-sizing: border-box;
text-align: center;
}
label {
top: 0;
left: 0; right: 0;
color: #616161;
box-sizing: border-box;
}
input,
label {
width: 100%;
height: 3rem;
font-size: 1rem;
}
/* Interação*/
input:valid,
input:focus {
border-bottom: 2px solid #26a69a;
}
input:valid + label,
input:focus + label {
color: #26a69a;
font-size: .8rem;
top: -30px;
pointer-events: none;
}
/* Só pra deixar um pouco mais bonito */
* {
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: #e0f2f1;
}
h1 {
color: #616161;
text-align: center;
margin-bottom: 30px;
}
section {
margin: 15px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 20px;
border-radius: 0 0 2px 2px;
background-color: #FFF;
}
Funções usadas como valores variáveis
As funções podem ser usadas da mesma maneira que você usa variáveis, em todos os tipos de fórmulas, atribuições e cálculos.
Exemplo
Ao invés de usar uma variável para armazenar o valor de retorno de uma função:
function toCelsius(temp) {
temperature = (temp - 32) * 5 / 9;
return temperature;
}
Chamada da função
var x = toCelsius(77);
var text = "A temperatura é " + x + " Celsius";
Você pode usar a função diretamente, como um valor variável:
var text = "A temperatura é " + toCelsius(77) + " Celsius";
Variáveis Locais
Variáveis declaradas dentro de uma função JavaScript, tornam-se LOCAL para a função.
Variáveis locais só podem ser acessadas de dentro da função.
Exemplo
// O código aqui não pode usar a variável marca
function myFunction() {
var marca = "Volvo";
// O código aqui pode usar a variável marca
}
// O código aqui não pode usar a variável marca
Como as variáveis locais são reconhecidas somente dentro de suas funções, variáveis com o mesmo nome podem ser usadas em diferentes funções.
As variáveis locais são criadas quando uma função é iniciada e excluídas quando a função é concluída.
