JavaScript

Ícaro Prado
 Funções

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)

 Por Que Usar Funções?

Você pode reutilizar o código: defina o código uma vez e use-o várias
vezes

Você pode usar o mesmo código muitas vezes com argumentos

diferentes, para produzir resultados diferentes
 Funções

function name(parameter1, parameter2, parameter3, …) {

} Lista de parâmetros – funções podem receber parâmetros

Nome ou não receber

function func1(p1, p2) {

return p1 * p2;
}

Retorno Variáveis locais

 Retorno de Funções

Quando o JS atinge uma instrução return, a função para de ser

executada

Se a função foi invocada a partir de uma instrução, o JavaScript

"retornará" para executar o código após a instrução invocada

O valor de retorno é "retornado" de volta ao "chamador"

Funções podem ter ou não retorno

 Chamada de Funções

O código dentro da função será executado quando "algo" invocar

(chamar) a função:

• Quando ocorre um evento (quando um usuário clica em um botão)

• Quando é invocado (chamado) do código JavaScript

 Retorno de Funções

Exemplo

function prod(a, b) {
return a * b;
}

let x = prod(4, 3); Chamada de função

alert(x)
 Retorno de Funções

Exemplos

1) Função sem retorno e sem parâmetro.

2) Função para somar e multiplicar 2 números.

3) Quatro funções: somar, multiplicar, dividir e subtrair.

 Eventos

Eventos são "coisas" que acontecem com elementos HTML

Quando o JS é usado em páginas HTML, ele pode "reagir" a esses eventos

Pode ser algo que o navegador faz ou algo que um usuário faz:

• Um campo de entrada HTML foi alterado

• Um botão HTML foi clicado etc
Eventos

Eventos em Clique
 Onclick

Um elemento é clicado

HTML:
<button onclick = "func1()">Clique aqui</button>

JS:
function func1(){
alert("Bem vindo ao JavaScript"); }
 Ondbclick

Um elemento é clicado 2 vezes

HTML:
<p ondbclick = "func1()">Clique aqui</p>

JS:
function func1(){
document.write("Bem vindo ao JavaScript"); }
Eventos

Eventos do Mouse
 Onmouseover e Onmouseout

Quando o mouse passa sobre um elemento

<h1
onmouseover="style.color='red'" onmouseout="style.color='black'">
Passe o mouse aqui!
</h1>
 Onmouseover e Onmouseout

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)"

src="smiley.gif" alt="Smiley" width="32" height="32">

function bigImg(x) { function normalImg(x) {

x.style.height = "64px"; x.style.height = "32px";
x.style.width = "64px"; x.style.width = "32px";
} }
 Onmousedown e Onmouseup

Ao pressionar / soltar o botão do mouse

<h1
onmousedown="style.color='red'" onmouseup="style.color='black'">
Passe o mouse aqui!
</h1>
 Onmousedown e Onmouseup

HTML:
<button onmousedown = "func1()">Clique aqui</button>

JS:
function func1(){
alert("Bem vindo ao JavaScript"); }
 Exercício

Faça um script onde ao clicar em um botão, muda a cor de um título.