Scribd
Carregar
20 visualizações18 páginas

Js Funcoes

O documento discute funções em JavaScript, explicando que funções são blocos de código projetados para executar tarefas específicas e podem ser chamadas quando um evento ocorre. Também explica como funções podem receber parâmetros e retornar valores, e como eventos como cliques do mouse podem disparar chamadas de função.

Enviado por

Filipe Mendes
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
20 visualizações18 páginas

Js Funcoes

O documento discute funções em JavaScript, explicando que funções são blocos de código projetados para executar tarefas específicas e podem ser chamadas quando um evento ocorre. Também explica como funções podem receber parâmetros e retornar valores, e como eventos como cliques do mouse podem disparar chamadas de função.

Enviado por

Filipe Mendes
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 18

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.

Você também pode gostar