Tip:
Highlight text to annotate it
X
Durante esse curso, vocês utilizaram as funções Javascript
mas até agora, a gente ainda não teve uma aula específica
para tratar desse objeto Javascript
sim, as funções Javascripit são objetos
não são estruturas como "for" ou como 'hifen" que vocês estudaram anteriormente
criar uma função é muito simples
nós já vimos que para criar uma função
nós utilizamos a palavra reservada "function" e o nome da função
logo em seguida nós temos os parenteses
que recebem os parâmetros da função
e o bloco da função, entre as chaves
então aqui nós poderiamos ter um mensagem de alert
somando aqui "2 + 2"
e para chamar esse função, basta chamar a função pelo nome
abre e fecha parenteses ( ), isso aqui é suficiente pra chamar a função
vamos lá
está ai, o resultado da execução dessa função
é uma mensagem de alert com a soma de "2 + 2"
agora as funções elas também recebem parâmetros
então eu poderia passar esses números aqui
como parâmetros "x" e "y" da minha função
eu posso ter quantos parâmetros eu desejar aqui dentro da função
e de qualquer tipo, inclusive outras funções
poderia ter uma função aqui dentro
mais por enquanto vamos manter aqui a nossa função
com parâmetro simples
como é que eu faço para utilizar esses parâmetros aqui dentro da nossa função?
basta chamar pelo nome "x + y"
e para transferir para minha função, esses parâmetros "2,2"
então é assim que eu passo os parâmetros para minha função
e é assim que eu utilizo os parâmetros dentro da minha função
agora ao atualizar, ele traz para gente o mesmo resultado
mas a gente já tem agora a flexibilidade
de somar outros números, porque
o usuário aqui pode alterar os números
para os valores que ele quiser
então a gente pode chamar essa função várias vezes
inclusive essa é uma das grandes vantagens das funções
porque a função ela executa uma determinada operação
uma operação específica
e quando você tem um grande problema para resolver
um problema que envolve uma alta complexidade ali de processamento
você pode particionar cada uma das etapas
de processamento em métodos que executem uma determinada
atividade específica
então o método é exatamente
ou seja, a função é exatamente o que a gente tem a disposição
na liguagem Javascript e em outras linguagens
para simplificar os nossos programas
então uma vez que eu construi aqui o método somar
eu posso utilizar ele para somar esses dois números
em vários momentos do meu código
mas é só essa forma que eu tenho de criar funções?
não
agora antes de mostrar as outras formas de criar funções
as nossas funções também pode retornar valores
então nós temos uma estrutura para construir funções
nós podemos passar parâmetros para essa função
e nós também podemos retornar com a palavra chave "return"
um resultado de um processamento da minha função
então essa chamada da minha função
agora ela está retornando um resultado
mas como ela não está retornado
eu não estou fazendo nada com esse resultado
então ele não apresenta
então eu poderia apresentar uma mensagem de alert aqui
então está ai
e quais são as outras formas de construir funções?
então esse modelo de construção de função
e o que a gente chama de Função Declarativa
eu construo a minha Função Declarativa com esta palavra "function" aqui
e indicando o nome da minha função
mais eu tenho outras duas formas de criar funções
eu tenho a forma Anônima, então vamos ver como é que
eu faço para criar uma Função Anônima
então a Função Anônima seria da seguinte maneira
"new function" chamando aqui o construtor das funções
e aqui eu poderia passar quantos parâmetros eu quisesse
" x", "y" e no último parâmetro o corpo da minha função
poderia pegar isso daqui
e colocar no corpo da nossa função
essa aqui é a mesma função
que esta daqui
com uma pequena diferença, que ela não tem nome
para atribuir um nome a essa função
eu precisaria criar aqui uma variável
e dar um nome para ela "somar2 por exemplo
e para chamar essa função
da mesma forma que nós chamamos uma forma declarativa
então está ai
então essa forma de declarar a função é exatamente, equivale essa forma daqui
e eu tenho um terceira forma, que é o modelo aqui
que são as Função Literais
como é que eu construo uma Função Literal?
equivalente a essa
simplismente tirando o nome da função
então ao tirar o nome da função
estou criando uma Função Literal
vejam que ela também não tem nome
e como é que eu faço para atribuir o nome a essa função?
da mesma forma que nesse outro modelo "somar3"
e para chamar essa função "somar3"
então está são as três formas de se construir funções em Javascript
esse modelo de Função Declarativa
ele acompanha a linguagem de Javascript desde do início
existe uma centena de bibliotecas que utiliza massivamente
aqui essa forma de criação de funções
agora as bibliotecas mais recentes
elas tem utilizado muito essa forma literal de contrução de funções
principalmente para manipulações de eventos
o que eu quero dizer com isso?
vamos fazer o seguinte
nós queremos aqui criar ou chamar está função
dentro aqui de uma tag nossa
como é que a gente faria?
eu precisaria para isso poluir o meu código
então eu vou colocar aqui um código simples
***, vamos remover essa chamada dali
e vamos colcoar dentro do nosso Javascript
então aqui dentro dessa "" e vou colocar o "onclick"
que é o nosso manipulador de eventos
e vou chamar a nossa função ***
quando nós clicarmos sobre esse texto declarativo
ele executa a função Javascript
só que ai isso gera um problema
porque segundo as boas práticas de desenvolvimento web
você não deve juntar, você não deve colocar no mesmo código
"CSS", "Javascript" e "HTML" você deve ter cada uma dessas funcionalidades
separadas em arquivos diferentes
então você deve ter aqui o seu Javacript todo em um arquivo
as suas folhas de estilos em um outro arquivo
e o seu "HTML", ou seja, a sua marcação em um outro arquivo
então você deve ter essas três camadas bem distintas
e quando a gente utiliza as nossas chamadas Javascript
diretamente dentro do código HTML que é a forma "InLine" de aplicar
de fazer as nossas chamadas Javascript
isso aqui acaba dificultado a manutenção das nossas páginas Web
porque eu teria que abrir, imagine se nós tivesse aqui
muitas linhas de código e muitas páginas
a gente precisaria está varrendo página por página, linha a linha
para encontrar aonde é que nós fizemos uma determinada chamada ao código Javascript
então essa não tem sido uma boa prática de utilização de Javascript
para ser chamado quando um evento HTML acontece
e como é que nós poderiamos resolver esse problema?
eu vou colocar aqui um "id=a" na linha de baixo em anônima
quando nós carregarmos a página HTML
essa vai está disponível para gente acessar via Javascript
então eu quero, que quando eu carregar a página eu vou associar a essa
uma função Javascript, mais qual função?
uma Função Literal
como é que nós vamos fazer isso?
vou mostrar aqui primeiro o código simplificado
para recuperar o elemento "document.getElementById"
e ai vamos pegar aqui o modelo Literal
vamos colocar aqui um
então vou pegar o elemento "l" que tem esse
e vou associar ao evento "onclick" desse elemento
uma Função Literal
" function" abre e fecha parênteses e coloco aqui o nosso alert
se eu colocar este código aqui
ele ainda não vai funcionar
porque estou clicando em cima de "Literal" e nada está acontecendo
porque como vocês viram, o nosso Javascript foi adicionado
no cabeçalho do nosso documento, ou seja, ele está lendo o documento
e ele está tentando atribuir ao elemento "l"
ao evento "onclick" do elemento "l" essa função
antes que o elemento "l" tenha sido lido
então nós temos duas formas de resolver esse problema
a primeira maneira, é colocar esse script depois do nosso elemento
desse nosso com "id=l" aqui, essa é uma forma
ai nós conseguimos, o Javascript consegui encontrar esse elemento
para poder vincular ao envento "onclik" dele aquela função
uma outra maneira é esperar que o documento todo seja carregado
para ai sim fazer essa atribuição
como é que nós fazemos isso?
vocês já viram isso em outras aulas
vamos colocar aqui novamente o nosso script
e quando a nossa página for carregada
ou seja, "window.onload"
ou seja, quando a nossa janela toda for carregada
eu vou associar a essa janela uma outra Função Literal "funcion" sem nome
e nessa função literal, nós vamos colocar a inicialização
desses nossos eventos, dos demais elementos do nosso HTML
então várias bibliotecas Javascript
por exemplo a "jQuery" utiliza está técnica
para vincular a cada um dos elementos do seu "documento HTML"
as funções que vão tratar aqueles elementos
dessa maneira a gente não suja o nosso código HTML
com código Javascript misturados
então vamos atualizar e está aqui
então nesse modelo declarativo
a gente está chamando aquela função
direto no manipulador de evento
no atributo da nossa Tag HTML
e aqui em baixo, a gente não está fazendo está chamada direto HTML
mais sim tendo todo o controle via Javascript
então pessoal essas são as dicas que gostaria de passar aqui para vocês
de quais são as três formas de se contruir uma função Javascipt
que nós podemos ter vários parâmentros na nossa função
nós podemos ter retorno de função
então essa função ela pode retornar elementos que podem ser
tipos primitivos, podem ser booleanos
você pode retornar uma outra função
um objeto
você poderia retornar aqui uma array, contendo vários parâmentros
enfim tantos parâmentros como retorno
podem conter todos os tipos de elementos
e a partir desse momento a gente vai trabalhar muito
com essas Funções Literais
que a gente pode associar a eventos ai
dos nossos elementos HTML
tá bom!
espero que vocês tenham gostado dessa aula
e até a próxima pessoal