Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
2018217 705 Aula+003+ +Javascript+e+jQuery
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Programação para internet
Prof. Marcelo Sudo
Javascript e jQuery
Objetivos:
O aluno deverá criar páginas para
internet fazendo uso da linguagem de
programação Javascript e jQuery.
Introdução
O javascript é uma linguagem de programação que
permite maior interatividade do que aquela obtida
utilizando somente o HTML.
Ela foi criada pela Netscape em 1995 e é suportada
pela maioria dos navegadores.
Java x Javascript
Java Javascript (Navegador)
Linguagem de programação
completa
Linguagem de scripts com um menor
conjunto de comandos do que o Java
Compilada no servidor Interpretada no cliente
Orientada a objetos Baseada em objetos
Variáveis declaradas Variáveis não declaradas
Utilizado para aplicativos
complexos com interfaces mais
elaboradas
Mais adequado para aplicativos
simples e para adicionar recursos
interativos à página Web
Deve estar incorporada em páginas
web
Não grava em disco (exceto Cookies)
Utilização
O código Javascript pode ser inserido em três
locais no documento HTML
Entre as tag <script> e </script> no <head>. O atributo
type especifica a linguagem no script. Caso seja
omitido o navegador entende como javascript
Dentro de uma tag do
documento HTML
Em um arquivo separado
com a extensão .js
5
Constantes e variáveis
Javascript não tem constantes
O javascript é case-sensitive, seguindo as regras
do Java
O javascript não possui tipos de dados específicos
como outras linguagens de programação. Na
realidade a variável assume o tipo do valor
atribuído.
A palavra reservada var é utilizada para declarar
uma variável local
6
Comentários e
operadores aritméticos
Os comentários são // para uma linha e /* ... */ para
um bloco
O javascript possui todos os operadores das
linguagens tradicionais, tais como:
O operador + é usado para somar números e
também é usado na concatenação de strings
O operador % retorna o resto da divisão
7
Comentários e
operadores aritméticos
++ e -- podem ser usados tanto na forma sufixa
(++variavel) quanto na forma pós-fixa
(variavel++)
As operações com atribuição podem ser na forma
contraída, por exemplo, x = x + 2 pode ser escrita
como x += 2
(continuação)
8
Operadores lógicos
Os operadores lógicos (&& (e), || (ou) e !
(negação)) e os operadores relacionais (<, <=, >,
>=, ==, !=) funcionam como nas demais
linguagens de programação
No javascript os operadores == e != podem ser
utilizados para comparar strings, por exemplo,
“abc” == “ab”
9
Estruturas condicionais
e de repetição
while (condição) {
bloco
}
switch(expressão/variável)
{
case valor1: bloco1
break;
case valor2: bloco2
break;
default: bloco3
}
if (condição1) {
bloco1
}
else if (condição2) {
bloco2
}
else {
bloco3
}
do {
bloco
} while (condição);
for ( i = 0; i < 10; i++ ) {
bloco
}
(continuação)
10
Mensagem de alerta
O método alert é usado para exibir uma caixa de
diálogo com um texto e um botão ok
11
Caixa de confirmação
O método confirm exibe uma caixa de diálogo com
dois botões, um de ok e outro de cancel. O método
retorna true se o botão pressionado foi ok e false
caso contrário
12
Caixa de confirmação
(continuação)
13
Caixa de prompt
O método prompt exibe uma caixa de diálogo que
permite ao usuário entrar com os dados solicitados
pela mensagem. O método retorna o conteúdo do
campo de entrada
O método recebe como argumento dois valores, o
primeiro é o texto da mensagem e o segundo é o
valor default do campo de entrada, se quisermos
que o campo de entrada inicie vazio, basta
atribuirmos o texto “”
14
Caixa de prompt
Se pressionarmos cancel o texto de retorno será
null
(continuação)
15
Conversão entre tipos
de dados
Para converter de texto para número podemos
utilizar as funções parseInt e parseFloat
resultado = parseInt(“100011”, 2) // resultado = 35
resultado = parseInt(“FE”, 16) // resultado = 254
resultado = parseInt(“15”, 8) // resultado = 13
resultado = parseInt(“35”) // resultado = 35
resultado = parseInt(“50.22”) // resultado = 50
resultado = parseFloat(“50.22”) // resultado = 50.22
16
Array (vetor)
O objeto array é usado para armazenar um
conjunto de valores em uma única variável
Nos vetores vet1 e vet2 as
posições não preenchidas do vetor
ficarão com valor undefined
Apesar do vetor vet2 ter apenas 3
posições, ele será redimensionado
para receber “cc” na quarta
posição
Podemos inicializar o vetor na sua criação, como no vet3
17
Funções (continuação)
A palavra-reservada return determina o
valor retornado pelo método. Não existe
a necessidade de identificar o retorno no
cabeçalho da função
O código dentro de um método só é
executado quando o método é acionado
Uma variável declarada usando var dentro
de um método, só tem visibilidade dentro
deste método, portanto esta chamada não
irá funcionar se for utilizada a declaração
var z = x + y
18
Eventos
onLoad: ocorre quando o usuário termina de carregar
uma janela ou todos os frames dentro de um frameset.
Pode ser usado com as tags body e frameset
onUnload: ocorre quando o usuário remove ou
abandona um documento de uma janela ou frame.
Pode ser usado com os elementos body e frameset
F
o
n
te
:
W
3
s
c
h
o
o
ls
.c
o
m
19
onClick: ocorre quando o botão do mouse é
clicado sobre um elemento. Pode ser usado com a
maioria das tags
onDblClick: ocorre quando o botão do mouse é
clicado duas vezes sobre um elemento. Pode ser
usado com a maioria das tags
Eventos (continuação)
20
Para acessarmos o conteúdo de um campo de
entrada do formulário, no javascript, precisamos
invocar o objeto document, seguido do nome do
formulário (neste exemplo, principal), seguido do
nome do campo (neste exemplo, login) e seguido do
atributo que queremos acessar (neste exemplo, o
atributo value)
Eventos (continuação)
21
Eventos (continuação)
22
onMouseDown: ocorre quando o botão do mouse
é pressionado sobre um elemento. Pode ser
usado com a maioria das tags
onMouseUp: ocorre quando o botão do mouse é
liberado sobre um elemento. Pode ser usado com
a maioria das tags
Eventos (continuação)
23
onMouseOver: ocorre quando o botão do mouse é
movimentado para um elemento. Pode ser usado
com a maioria das tags
onMouseMove: ocorre quando o botão do mouse é
movimentado enquanto está sobre um elemento.
Pode ser usado com a maioria das tags
onMouseOut: ocorre quando o botão do mouse é
movido para fora de um elemento. Pode ser usado
com a maioria das tags
Eventos (continuação)
24
onFocus: ocorre quando um elemento recebe o
foco, seja pelo mouse ou pela navegação com
tabulação. Pode ser usado com input, select,
textarea e button
onBlur: ocorre quando um elemento perde o foco,
seja pelo mouse ou pela navegação com
tabulação. Pode ser usado com input, select,
textarea e button
Eventos (continuação)
25
onKeyPress: ocorre quando uma tecla é
pressionada e liberada sobre um elemento. Pode
ser usado com a maioria das tags
Eventos (continuação)
26
onKeyDown: ocorre quando uma tecla é
pressionada sobre um elemento. Pode ser usado
com a maioria das tags
O exemplo anterior pode ser executado
também utilizando o evento onKeyDown
onKeyUp: ocorre quando uma tecla é liberada
sobre um elemento. Pode ser usado com a maioria
das tags
Eventos (continuação)
27
onChange: ocorre quando um campo perde o foco
de entrada e seu valor foi modificado desde queele ganhou o foco. Esse atributo se aplica aos
seguintes elementos input, select e textarea
Eventos (continuação)
28
Esta função retira a lista de cidades e
cria uma nova de acordo com o estado
Eventos (continuação)
29
Neste exemplo, quando o usuário alterar o estado, a
lista de cidades será alterada
Eventos (continuação)
30
onSubmit: ocorre quando um formulário é enviado.
Somente se aplica a tag form
onReset: ocorre quando um formulário é
redefinido. Somente se aplica a tag form
onSelect: ocorre quando um usuário seleciona
algum texto em um campo de texto. Pode ser
usado com os elementos input e textarea
Eventos (continuação)
31
• Utilizar um projeto Web no Netbeans
• Crie um formulário com dois campos tipo texto (“número
1” e “número 2”) e um botão. Escreva uma função
Javascript que ao clicar no botão, ela leia os valores dos
dois valores numéricos digitados e faça a soma deles,
apresentando o resultado num alert.
32
jQuery
• jQuery é uma biblioteca que facilita o
desenvolvimento com JavaScript. Esta biblioteca
chama a atenção pelo tamanho e simplicidade no
desenvolvimento de aplicações AJAX
• Destacam-se as seguintes vantagens
– Compatibilidade entre os navegadores: ao utilizá-la
não precisamos nos preocupar com as
incompatibilidades de DOM nos navegadores
– Tamanho do código: um script com jQuery é menor
do que usando somente JavaScript
– Plugins: implementações podem ser mais rápidas
pois existe uma vasta quantidade de plugins
Fonte: http://docs.jquery.com/Main_Page
33
Download da jQuery
• No endereço http://jquery.com/download/ podemos
baixar o arquivo que contém a biblioteca.
• Existem duas versões disponíveis para download a
Uncompressed (development) e a Compressed
(production).
34
Uso da biblioteca jQuery
A chamada do arquivo ocorre usando a tag script,
neste caso o arquivo é local, mas podemos
referenciar um arquivo em um servidor remoto,
como no exemplo abaixo
(continuação)
35
A biblioteca jQuery (continuação)
36
A biblioteca jQuery
Neste exemplo o objeto jQuery manipula o objeto
document que contém o documento HTML. O método
ready é acionado assim que a árvore do documento
esteja pronta. Desta forma, a função anônima passada
como argumento para o método ready será invocada.
Uma função anônima é uma função sem nome
Observação: somente faça o uso do objeto jQuery
quando a árvore do documento estiver pronta
(continuação)
37
Fundamentos jQuery
• A finalidade do uso de jQuery é controlar o comportamento de
toda ou partes de uma página Web. Sabe-se que uma página
Web nada mais é do que marcações HTML
• Então é lícito concluir que o princípio de funcionamento da
jQuery fundamenta-se em sua capacidade de encontrar os
elementos HTML que constituem a página
• Para que isso ocorra ele utiliza o construtor $() ou jQuery()
envolvendo um seletor de elemento HTML. Os seletores
suportados são os mesmos da CSS
Neste exemplo todos os
elementos <p> do documento
serão formatados com cor
vermelha
38
Seletores simples jQuery
• $(elemento): seletor de elemento HTML, acessa
todos os elementos especificados no argumento
Fonte: http://api.jquery.com/category/selectors/
39
Seletores simples jQuery
$(id): seletor de id, acessa o elemento cujo valor do
atributo id tenha sido especificado no argumento
(continuação)
40
• $(classe): seletor de classe, acessa os elementos
cujo valor do atributo class tenha sido especificado
no argumento
Seletores simples jQuery
(continuação)
41
• $(ancestral descendente): acessa o elemento
descendente do ancestral especificado no
argumento
Seletores compostos jQuery
(continuação)
42
• $(pai > filho): acessa o elemento-filho do pai
especificado no argumento
Seletores compostos jQuery
(continuação)
43
• $(anterior + próximo): acessa o elemento próximo
que se segue imediatamente ao elemento anterior
Neste exemplo, apenas Terça-feira ficará com cor vermelha
Seletores compostos jQuery
(continuação)
44
• $(anterior ~ irmãos): este é um seletor previsto na
CSS3 que acessa todos os elementos irmãos e
que se seguem ao elemento anterior
Seletores compostos jQuery
(continuação)
45
Seletores compostos jQuery
(continuação)
46
Seletores de filtros básicos
• Denominam-se seletores filtros básicos os
seletores do tipo pseudosseletores que se
destinam a filtrar uma condição particular de um
seletor simples ou composto
• $(seletor:first): acessa a primeira ocorrência do
elemento selecionado pelo seletor
47
Seletores de filtros básicos
48
• $(seletor:last): acessa a última ocorrência do
elemento selecionado pelo seletor
Seletores de filtros básicos
(continuação)
49
• $(seletor1:not(seletor2)): este é um seletor previsto
na CSS3 que acessa o conjunto de seletores
seletor1, excluindo as instâncias definidas em
seletor2
Seletores de filtros básicos
(continuação)
50
Seletores de filtros básicos
(continuação)
51
• $(seletor:even) e $(seletor:odd): estes seletores não
existem nas CSS, são exclusivos da biblioteca. Eles
acessam as ocorrências de ordem par e ímpar,
respectivamente, do conjunto de elementos
selecionados pelo seletor
Seletores de filtros básicos
(continuação)
52
Seletores de filtros básicos
(continuação)
53
• $(seletor:eq(índice)): seletor não previsto nas CSS,
ele acessa a ocorrência de ordem índice no
conjunto de elementos selecionados
Seletores de filtros básicos
(continuação)
54
Seletores de filtros básicos
(continuação)
55
• $(seletor:gt(índice)) e $(seletor:lt(índice)): seletores não
previstos nas CSS, eles acessam as ocorrências de
ordem maior e menor, respectivamente, que índice
definido
Seletores de filtros básicos
(continuação)
56
Seletores de filtros básicos
(continuação)
57
Eventos
• A jQuery possui métodos para tratar a maioria dos
eventos JavaScript, a seguir alguns exemplos
58
Eventos
Neste exemplo existem
três eventos associados
ao elemento cujo
id=botao
Fonte: http://api.jquery.com/category/events/
59
• O evento hover é acionado quando o usuário coloca
ou tira o cursor sobre o elemento selecionado. Ele
executa duas funções, uma quando o usuário
coloca o mouse sobre a área e outra quando ele
retira, o código a seguir possui o mesmo significado
do exemplo anterior
Eventos (continuação)
60
Eventos (continuação)
61
• O evento toggle permite executar mais de uma
função de forma seguida e alternada. No exemplo a
seguir a cada clique será alterado a cor da fonte do
botão. Após a última função ser invocada, voltará a
primeira função
Eventos (continuação)
62
Eventos (continuação)
63
jQuery métodos
• O jQuery possui métodos usados para acessar os
atributos dos elementos. O método depende do
elemento envolvido em $(seletor). A seguir alguns
exemplos
– val(): usado para ler o atributo value de um elemento.
Exemplo: $(“#nome”).val() retorna o valor do atributo
value do elemento que possui o id=“nome”
– val(“José”): usado para setar o atributo value de um
elemento. Exemplo: $(“#nome”).val(“José”) seta o valor do
atributo value para José do elemento que possui o
id=“nome”
– text() e text(“exemplo”): usado para ler e escrever o texto
do elemento. Equivalente ao innerText do JavaScript
64
– html() e html(“<p>exemplo</p>”): usado para ler e
escrever o texto do elemento. Equivalente ao
innerHTML do JavaScript
– attr(“nomeDoAtributo”): usado para ler o valor de
umatributo
– attr(“nomeDoAtributo”, “valorDoAtributo”): usado
para criar/alterar um atributo
– attr(“listaDeAtributos”): usado para criar/alterar uma
lista de atributos do elemento. Exemplo:
$(“a”).attr( {
‘title’: ‘título’,
‘name’: ‘texto alternativo’
} );
jQuery métodos (continuação)
65
– css(“background-color”): usado para ler o valor da
propriedade no estilo
– css(“nomeDaPropriedade”, “valorDaPropriedade”):
usado para criar/alterar uma propriedade no estilo
– css(“listaDePropriedades”): usado para
criar/alterar uma lista de propriedades do estilo.
Exemplo:
jQuery métodos (continuação)
66
jQuery Métodos
• $(seletor).each(callback): este método executa a
função callback para cada um dos elementos que
pertencem ao conjunto procurado
jQuery Métodos (continuação)
Para cada elemento do tipo div, a função callback
será executada
O seletor this refere-se ao elemento atual apontado
pelo método each
jQuery Métodos (continuação)
Seletores de Conteúdo
• $(seletor:contains(texto)): este é um seletor não
previsto nas CSS, ele acessa todos os elementos
do documento, selecionados pelo seletor, que
contém o texto definido como parâmetro
O seletor é sensível ao case da letra
Seletores de Conteúdo (Continuação)
Seletores de Visibilidade
• $(seletor:hidden): acessa os elementos ocultos
selecionados pelo seletor
• $(seletor:visible): acessa os elementos não-
ocultos selecionados pelo seletor
Seletores de Visibilidade (continuação)
• A funções addClass, removeClass são usadas
para adicionar e retirar classes de um elemento,
e hasClass para verificar se uma classe existe
para o elemento
Manipulação de Atributos (continuação)
Manipulação de Atributos (continuação)
Manipulação de Conteúdos
• A função html é usada para ler o conteúdo html de um elemento.
O html (“conteúdo”) é usado para inserir o conteúdo em um
elemento
• A função $(seletor).append(“conteúdo”) é usada para adicionar o
conteúdo html ao final do elemento selecionado por seletor
Manipulação de Conteúdos (continuação)
• A função $(“conteúdo”).appendTo(seletor) é usada para
adicionar o conteúdo html ao final do elemento
selecionado por seletor. Faz o mesmo que a função
append a diferença é apenas a sintaxe
Manipulação de Conteúdos (continuação)
Manipulação de Conteúdos (continuação)
• As funções $(seletor).prepend(“conteúdo”) e
$(“conteúdo”).prependTo(seletor) são
equivalentes as funções append() e appendTo(),
com a diferença de que a inserção do conteúdo
se faz antes do conteúdo que receberá a
inserção
Manipulação de Conteúdos (continuação)
• As funções $(seletor).after(“conteúdo”) e
$(“conteúdo”).insertAfter(seletor) são
equivalentes as funções append() e appendTo(),
com a diferença de que a inserção do conteúdo
se faz depois do elemento (e não do conteúdo
do elemento) que receberá a inserção
• A mesma ideia para $(seletor).before(“conteúdo”)
e $(“conteúdo”).insertBefore(seletor), que
inserem antes.
Manipulação de Conteúdos (continuação)
• A função $(seletor).remove(filtro) remove todas
as ocorrências do elemento selecionado pelo
seletor. O parâmetro filtro é opcional
Manipulação de Conteúdos (continuação)
Manipulação de Conteúdos (continuação)
Manipulação de Textos
• A função text é usada ler o conteúdo texto de um
elemento e text(“conteúdo”) é usada para inserir
um conteúdo texto em um elemento
Manipulação de Textos
Manipulação de Valores
• A função val é usada ler o conteúdo do atributo
value de um elemento e val(“conteúdo”) é usada
para alterar o valor do atributo value de um
elemento.
Manipulação de ValoresMateriais relacionados
476 pág.
31 pág.
234 pág.
34 pág.
Perguntas relacionadas
Compartilhar