09 – Javascript – Funções e Eventos (Functions e Events)

Javascript – Funções e Eventos (Functions e Events)

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.

Ficamos por aqui e nos vemos na próxima aula, até mais. 🙂

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

Novamente deixo meus link de afiliados:

Hostinger

Digital Ocean

One.com

Obrigado, até a próxima e bons estudos. 😉

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>