apresentação do powerpointacademy.franco.eti.br/material/aula7_academy_html_css_js.pdf ·...
TRANSCRIPT
v1.1
INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END
COM HTML, CSS E JAVASCRIPT
AULA 7 – CRIANDO INTERAÇÕES COM JAVASCRIPT (PARTE 2)
Eder Franco @ FPF Tech
___________________________
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;
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;
Agenda
1. Manipulação de elementos
1. DOM e BOM
2. Eventos
3. Criando elementos
2. Visão geral: jQuery
3. Referências
DOM e BOM
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.
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;
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):
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.
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.
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;
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:
DOM e BOM
Manipulando elementos
• Outros exemplos:
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.
DOM e BOM
Browser Object Model
• Exemplo:
Eventos
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).
Eventos
Eventos
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.
Eventos
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;
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.
Eventos
Eventos
Eventos
Eventos
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.
Criando elementos
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();
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.
Criando elementos
• Exemplo 1:
Criando elementos
• Exemplo 2:
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.
Visão geral: jQuery
http://jquery.com
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.
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);
Visão geral: jQuery
• Tudo o que fizemos com JS puro, podemos fazer com jQuery:
Visão geral: jQuery
• Com JS fazemos isso:
Visão geral: jQuery
• A mesma funcionalidade, mas agora com jQuery:
Visão geral: jQuery
• Ao utilizarmos jQuery devemos sempre colocá-lo dentro de uma função anônima:
Visão geral: jQuery
• A forma que escrevemos na página anterior, é um atalho para a função .ready():
Visão geral: jQuery
• Os eventos em jQuery funcionam de maneira muito similar ao JS puro:
Visão geral: jQuery
• Os eventos em jQuery funcionam de maneira muito similar ao JS puro:
Visão geral: jQuery
• A função .on() é muito versátil que permite receber mais de um evento ao mesmo tempo:
Visão geral: jQuery
• O this com jQuery funciona um pouquinho diferente:
Visão geral: jQuery
• O jQuery também possibilita o encadeamento de funções:
Visão geral: jQuery
Principais funções:
• Mudar o estilo inline:
Visão geral: jQuery
Principais funções:
• Mas sabemos que o certo é manipular o estilos no arquivo css:
Visão geral: jQuery
Principais funções:
• Também podemos ocultar e exibir um elemento:
Visão geral: jQuery
Principais funções:
• Criar um elemento, é muito mais simples com jQuery:
Visão geral: jQuery
Principais funções:
• Podemos passar o atributo do link direto para a função $ em um objeto:
Visão geral: jQuery
Principais funções:
• Criamos o elemento, mas falta incluí-lo:
Visão geral: jQuery
Principais funções:
• Outra forma:
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!
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.
Eder Martins Franco
[email protected] [email protected]
facebook.com/edermartinsfrancolinkedin.com/in/efranco23/
moodle.franco.eti.br