Revisão

Linguagem de
programação
 Conteúdos abordados
Eventos JS
01 Uso dos Eventos de DOM para
execução de funções JS

Funções JS
02 Uso de funções para
manipulação de paginas HTML
e CSS

03 Metodos para utilização de

script em paginas
0
 Eventos DOM e JS

O que são Eventos?

Eventos são ações ou ocorrências que acontecem no sistema que estamos

desenvolvendo, no qual este te alerta sobre essas ações para que você possa
responder de alguma forma, se desejado. Por exemplo, se o usuário clica em um
botão numa pagina web, você pode querer responder a esta ação mostrando na tela
uma caixa de informações. Nesse artigo, nós iremos discutir sobre alguns conceitos
importantes envolvendo eventos, e veremos como eles funcionam nos browsers. Isto
não será algo cansativo para estudar; somente o que você precisar saber até agora.
 Eventos DOM e JS

Quais são os Eventos?

onBlur remove o foco do elemento
onChange muda o valor do elemento
onClick o elemento é clicado pelo usuário
onFocus o elemento é focado

onKeyPress o usuário pressiona uma tecla sobre o elemento

onLoad carrega o elemento por completo

define ação quando o usuário passa o mouse sobre o
onMouseOver
elemento
define ação quando o usuário retira o mouse sobre o
onMouseOut
elemento
onSubmit define ação ao enviar um formulário
 Eventos DOM e JS
Analise o exemplo a seguir e avalie o seu resultado?
 Eventos DOM e JS
Analisando o exemplo anterior qual alteração devemos realizar
para que seja enviado o alert quando clicado no botão enviar?
 Eventos DOM e JS
Analisando o exemplo a baixo como podemos invocar a
nossa função para que ela tenha uma execução correta.
 Eventos DOM e JS
Analise o código a seguir e sugiram as alterações
necessárias para que tenha o funcionamento correto.
 Eventos DOM e JS
Primeiramente devemos criar nossa função para realizar a
alteração na nossa pagina
 Eventos DOM e JS

E por fim adicionar o evento no nosso elemento HTML

 Funções com JS

O que são Funções JS?

Funções são blocos de construção fundamentais em JavaScript. Uma função é um

procedimento de JavaScript - um conjunto de instruções que executa uma tarefa ou
calcula um valor. Para usar uma função, você deve defini-la em algum lugar no
escopo do qual você quiser chamá-la.
 Funções com JS

Quais são os tipos de funções?

Em JS as funções são definidas em 3 tipos básicos:

• Função declarativas.

• Funções de expressões.

• Arrow functions (Funções por seta =>).

 Funções com JS

Analise a estrutura a baixo e definam qual estrutura estamos utilizando?

 Funções com JS

Analise a estrutura a baixo e definam qual estrutura estamos utilizando?

 Funções com JS

Analise a estrutura a baixo e definam qual estrutura estamos utilizando?

 Funções com JS

Como podemos diferenciar cada uma delas?

 Funções com JS

Função declarativa.

• Inicia com a palavra reservada function.

• Nome da função.
• Seletor reservado para envio ou não de parâmetros ( ).
• Seletor que informa inicio e final de Bloco de código { }.
• Obrigatoriamente deve ter um retorno.
 Funções com JS

Função declarativa -- Vantagens.

• É criado antes de finalizar o carregamento da pagina.

• Padrão utilizado por sites legados.
• Segue modelos já utilizado em outras linguagens.
 Funções com JS

Função declarativa -- Exemplo.

 Funções com JS
Função por Expressão.

• Obrigatoriamente deve ser atribuída a uma variável.

• Inicia com a palavra reservada function.
• Nome da função.
• Seletor reservado para envio ou não de parâmetros ( ).
• Seletor que informa inicio e final de Bloco de código { }.
• Obrigatoriamente deve ter um retorno.
 Funções com JS

Função por Expressão -- Vantagens

• Permite que você atribua o retorno da função direto para uma variável.
• Padrão adotado por novos Framwork JS (vuejs, reactJS, nextJS).
 Funções com JS

Função por Expressão – Exemplo

 Funções com JS

Arrow function.

• Pode ou não ser atribuído a uma variável.

• Seletor reservado para envio ou não de parâmetros ( ).
• Indicador de Arrow function ‘=>’.
• Seletor que informa inicio e final de Bloco de código { }.
• Não tem obrigatoriedade de um retorno.
 Funções com JS

Função por Expressão -- Vantagens

• Pode ser utilizada diretamente dentro de um evento do HTML.

• Pode ser atribuída a uma variável.
• Tem a sintaxe mais básica entre as 3.
 Funções com JS

Função por Arrow function – Exemplo

 Funções com JS

Analise o código a seguir e verifique qual tipo de função

devemos utilizar?
 Funções com JS

Analise o código a seguir e verifique qual alteração devemos

fazer para que a função funcione?
 Funções com JS

Analise o código anterior o que devemos fazer para ela ser

executada por uma Arrow function de uma linha?
 Funções com JS
Parâmetros de funções.
Quando falamos em funções durante vários momentos precisamos passar algo do
ambiente externo para dentro da função.
Por isso devemos utilizar os parâmetros da função, eles no JavaScript são divididos
e 3 tipos principais sendo elas:

• Parâmetros convencionais.
• Parâmetros com valores default.
• Parâmetros RESET.
 Funções com JS

Parâmetros convencionais.

Parâmetros convencionais são a maneira onde atribuímos qualquer valor informado

na chamada de uma função, a uma variável que podemos usar dentro de nossa
função.
 Funções com JS

Parâmetros convencionais -- Exemplo.

 Funções com JS

Parâmetros com valores default.

Em alguns momentos para o funcionamento correto de uma função o parâmetro

precisa ter a opção de ser informado ou não no momento da chamada da função.
Para esses casos no JavaScript podemos criar parâmetros que podem ou não
receber valores.
 Funções com JS

Parâmetros com valores default

 Funções com JS
Parâmetros RESET.

Quando temos uma função quando não sabemos o número de parâmetros que
iremos receber, não conseguimos saber quais variáveis declarar nos parâmetros da
função.
Para esses casos podemos utilizar um REST parâmetro.
Essa técnica consistem em passarmos ...nome do parâmetro que queremos e tudo
que for passado como valor na chamada da função será atribuído a um array de
parâmetros.
 Funções com JS

Parâmetros RESET – Exemplo

 Métodos para utilização de script em paginas

Dentro do JavaScript temos 2 maneiras de executar um script sendo eles:

Inline – ou seja direto dentro da pagina HTML, para isso nos utilizaremos as tag
<script>, esse tipo de estrutura pode ser executada em qualquer parte do nosso
código HTML.
Arquivo externo – Nesse caso nos criamos um arquivo externo com nossos códigos
JS e o mesmo é importado para dentro do nosso HTML quando for necessario
Métodos para utilização de script em paginas
Usando JS com tag <script>
Métodos para utilização de script em paginas
Usando JS com arquivo externo
Para utilizarmos um arquivo externo nos precisamos utilizar o seguinte comando
dentro do nossa head