Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf ·...
Transcript of Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf ·...
![Page 1: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/1.jpg)
v1.1
![Page 2: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/2.jpg)
INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END
COM HTML, CSS E JAVASCRIPT
AULA 7 – CRIANDO INTERAÇÕES COM JAVASCRIPT (PARTE 2)
Eder Franco @ FPF Tech
___________________________
![Page 3: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/3.jpg)
The road so far...
• JavaScript – Desenvolvida para criar interações em páginas HTML;
• Facilidade para uso por pessoas que não são programadores;
• Javascript é:
• Linguagem de script, interpretada, fracamente tipada, orientada a objetos, baseada em protótipos, dirigida por eventos e independente de plataforma;
![Page 4: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/4.jpg)
The road so far...
• JavaScript está confinada ao ambiente do browser;
• Pode ser inserida em uma página HTML utilizando a tag script;
• Tipos de dados: string, number, boolean, object;
• Possui estruturas de controle e estruturas de dados mais complexas;
• Permite armazenar dados no browser;
• O console do navegador nos permite visualizar erros, programador diretamente ou enviar mensagens e logs;
![Page 5: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/5.jpg)
Agenda
1. Manipulação de elementos
1. DOM e BOM
2. Eventos
3. Criando elementos
2. Visão geral: jQuery
3. Referências
![Page 6: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/6.jpg)
DOM e BOM
![Page 7: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/7.jpg)
DOM e BOM
Document Object Tree
• Vimos nas aulas anteriores que toda tag HTML produz um elemento, e todo elemento HTML é um objeto;
• Quando abrimos uma página no navegador, automaticamente são criados objetos que representam os elementos (<h1>, <p>, <a>...);
• E sempre que modificamos as propriedades desses elementos, instantaneamente são exibidas essas mudanças no navegador.
![Page 8: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/8.jpg)
DOM e BOM
Document Object Model
• O DOM (Documento Object Model) é uma convenção utilizada para representar e interagir com os objetos no HTML;
• Segue uma estrutura semelhante a uma árvore, o que chamamos de DOM Tree;
• Podemos acessar e manipular nossos objetos usando métodos através do objeto document;
• Sempre que quisermos manipular um elemento no HTML, precisaremos passar pelo objeto document;
![Page 9: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/9.jpg)
DOM e BOM
Manipulando elementos
• Um dos métodos mais básicos em JS é o .write();
• Serve para adicionarmos conteúdos ao nosso documento (HTML):
![Page 10: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/10.jpg)
DOM e BOM
Manipulando elementos
• Se quisermos buscar todos os paragráfos na nossa página utilizamos o método .querySelectorAll(“p”);
• O retorno deste método é um array com todos os parágrafos existentes na página, mesmo que exista somente um.
![Page 11: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/11.jpg)
DOM e BOM
Manipulando elementos
• Note que no slide anterior selecionamos todos os paragrafos da nossa página;
• Para selecionarmos apenas um, utilizamos um outro método chamado .querySelector();
• Neste caso, podemos utilizar qualquer seletor css (classe, id ou elemento)para encontrarmos o elemento desejado.
![Page 12: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/12.jpg)
DOM e BOM
Manipulando elementos
• Já sabemos selecionar paragráfos e títulos, mas e se quisermos mudar seu conteúdo?
• Para fazermos isso, será necessário chegarmos até a propriedade textContent do nosso elemento;
![Page 13: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/13.jpg)
DOM e BOM
Manipulando elementos
• Após identificar o elemento, basta alterar o valor do chave textContent para exibir o novo texto desejado no seu conteúdo:
![Page 14: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/14.jpg)
DOM e BOM
Manipulando elementos
• Outros exemplos:
![Page 15: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/15.jpg)
DOM e BOM
Browser Object Model
• Vimos que o DOM se refere ao nosso HTML;
• O BOM (Browser Object Model) se refere ao nosso navegador;
• Para acessarmos o BOM utilizamos o objeto window;
• Assim como o DOM parte sempre do objeto document, o BOM parte sempre do objeto window.
![Page 16: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/16.jpg)
DOM e BOM
Browser Object Model
• Exemplo:
![Page 17: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/17.jpg)
Eventos
![Page 18: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/18.jpg)
Eventos
• Um evento permite executar um código a partir de uma ação do usuário;
• Alguns exemplos de eventos: clicar (.click), mudar o conteúdo de um input (.input), pressionar uma tecla (.keypress), redimensionar a tela (.resize), mover o mouse (.mousemove).
![Page 19: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/19.jpg)
Eventos
![Page 20: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/20.jpg)
Eventos
![Page 21: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/21.jpg)
Eventos
• A forma de manipulação de eventos que acabamos de utilizar é chamado de shorthand event;
• Sempre que adicionarmos um outro evento desta maneira, o navegador irá executar sempre a última função.
• Para contornarmos essa limitação utilizamos a função .addEventListener(), que nos permitirá adicionar quantas funções quisermos para um mesmo tipo de evento.
![Page 22: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/22.jpg)
Eventos
![Page 23: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/23.jpg)
Eventos
Alguns eventos no JS:
• blur - remove o foco do elemento;
• change - muda o valor do elemento;
• click - o elemento é clicado pelo usuário;
• focus - o elemento é focado;
• keypress - o usuário pressiona uma tecla sobre o elemento;
![Page 24: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/24.jpg)
Eventos
Alguns eventos no JS:
• load - carrega o elemento por completo.
• mouseover - define ação quando o usuário passa o mouse sobre o elemento;
• mouseout - define ação quando o usuário retira o mouse sobre o elemento;
• submit - define ação ao enviar um formulário.
![Page 25: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/25.jpg)
Eventos
![Page 26: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/26.jpg)
Eventos
![Page 27: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/27.jpg)
Eventos
![Page 28: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/28.jpg)
Eventos
![Page 29: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/29.jpg)
Posicionamento de elementos
Mãos à obra!
• 30 minutos:
• Utilizando o código abaixo, crie uma nova classe no css e a coloque no lugar da classe atual no parágrafo;
• Faça a classe atual retornar para o parágrafo.
![Page 30: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/30.jpg)
Criando elementos
![Page 31: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/31.jpg)
Criando elementos
• Até agora vimos como alterar elementos já existentes, mas e caso eu precise adicionar um novo elemento que não exista no DOM?
• Para isso utilizamos a função .createElement();
![Page 32: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/32.jpg)
Criando elementos
• O elemento foi criado, mas não adicionado no HTML;
• Há duas formas de adicioná-lo ao HTML: .appendChild() e .insertBefore();
• A .appendChild() adiciona o elemento como último filho de um elemento pai;
• A .insertBefore() permite adicionar o elemento antes de um dos filhos do elemento pai.
![Page 33: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/33.jpg)
Criando elementos
• Exemplo 1:
![Page 34: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/34.jpg)
Criando elementos
• Exemplo 2:
![Page 35: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/35.jpg)
Posicionamento de elementos
Mãos à obra!
• 30 minutos:
• Crie um link para o facebook e um botão dinamicamente;
• Faça com que:
• Ao clicar no link para o facebook o botão mude o seu plano de fundo;
• Ao clicar no botão o link para o facebook se torne um link para o google.
![Page 36: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/36.jpg)
Visão geral: jQuery
http://jquery.com
![Page 37: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/37.jpg)
Visão geral: jQuery
• jQuery é uma biblioteca de funções para JS que facilita a manipulação de eventos elementos e outras tarefas mais complexas;
• Foi criada com a proposta de permitir fazer mais e escrever menos código (ganho de produtividade);
• Garante a compatibilidade do código JS entre os navegadores.
![Page 38: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/38.jpg)
Visão geral: jQuery
Mãos à obra!
• 5 minutos:
• Baixar o jQuery em:
• https://jquery.com/download/
• (Se estiver tudo OK, é hora de um cafezinho);
![Page 39: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/39.jpg)
Visão geral: jQuery
• Tudo o que fizemos com JS puro, podemos fazer com jQuery:
![Page 40: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/40.jpg)
Visão geral: jQuery
• Com JS fazemos isso:
![Page 41: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/41.jpg)
Visão geral: jQuery
• A mesma funcionalidade, mas agora com jQuery:
![Page 42: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/42.jpg)
Visão geral: jQuery
• Ao utilizarmos jQuery devemos sempre colocá-lo dentro de uma função anônima:
![Page 43: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/43.jpg)
Visão geral: jQuery
• A forma que escrevemos na página anterior, é um atalho para a função .ready():
![Page 44: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/44.jpg)
Visão geral: jQuery
• Os eventos em jQuery funcionam de maneira muito similar ao JS puro:
![Page 45: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/45.jpg)
Visão geral: jQuery
• Os eventos em jQuery funcionam de maneira muito similar ao JS puro:
![Page 46: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/46.jpg)
Visão geral: jQuery
• A função .on() é muito versátil que permite receber mais de um evento ao mesmo tempo:
![Page 47: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/47.jpg)
Visão geral: jQuery
• O this com jQuery funciona um pouquinho diferente:
![Page 48: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/48.jpg)
Visão geral: jQuery
• O jQuery também possibilita o encadeamento de funções:
![Page 49: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/49.jpg)
Visão geral: jQuery
Principais funções:
• Mudar o estilo inline:
![Page 50: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/50.jpg)
Visão geral: jQuery
Principais funções:
• Mas sabemos que o certo é manipular o estilos no arquivo css:
![Page 51: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/51.jpg)
Visão geral: jQuery
Principais funções:
• Também podemos ocultar e exibir um elemento:
![Page 52: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/52.jpg)
Visão geral: jQuery
Principais funções:
• Criar um elemento, é muito mais simples com jQuery:
![Page 53: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/53.jpg)
Visão geral: jQuery
Principais funções:
• Podemos passar o atributo do link direto para a função $ em um objeto:
![Page 54: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/54.jpg)
Visão geral: jQuery
Principais funções:
• Criamos o elemento, mas falta incluí-lo:
![Page 55: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/55.jpg)
Visão geral: jQuery
Principais funções:
• Outra forma:
![Page 56: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/56.jpg)
Posicionamento de elementos
Mãos à obra!
• 30 minutos:
• Utilizando JS jQuery construa uma página HTML simples contendo pelo menos um título e três parágrafos.
• Não se esqueça de adicionar o DOCTYPE e as tags hmtl, head e body!
![Page 57: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/57.jpg)
Referências
1. ARAÚJO, Leandro. Programação Front-End com Javascript e jQuery. Aulas 3, 4, 5 e 6. Manaus: BuriTech, 2014.
2. MDN. JavaScript Básico. Disponível em <https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_básico> Acesso em: 07/04/2017.
3. SILVA, Maurício Sammy. jQuery – A Biblioteca do Programador JavaScript. 3ª edição. São Paulo: Novatec, 2013.
![Page 58: Apresentação do PowerPointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf · 2017-04-08 · • Utilizando o código abaixo, crie uma nova classe no css e a coloque](https://reader030.fdocumentos.tips/reader030/viewer/2022040520/5e79372f5afebb57ce792627/html5/thumbnails/58.jpg)
Eder Martins Franco
[email protected] [email protected]
facebook.com/edermartinsfrancolinkedin.com/in/efranco23/
moodle.franco.eti.br