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

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


• 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


• 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


• 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


• 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


• 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:


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


• 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.


Mãos à obra!

• 5 minutos:

• Baixar o jQuery em:

• https://jquery.com/download/

• (Se estiver tudo OK, é hora de um cafezinho);

https://jquery.com/download/


• Tudo o que fizemos com JS puro, podemos fazer com jQuery:


• Com JS fazemos isso:


• A mesma funcionalidade, mas agora com jQuery:


• Ao utilizarmos jQuery devemos sempre colocá-lo dentro de uma função anônima:


• A forma que escrevemos na página anterior, é um atalho para a função .ready():


• Os eventos em jQuery funcionam de maneira muito similar ao JS puro:


• Os eventos em jQuery funcionam de maneira muito similar ao JS puro:


• A função .on() é muito versátil que permite receber mais de um evento ao mesmo tempo:


• O this com jQuery funciona um pouquinho diferente:


• O jQuery também possibilita o encadeamento de funções:


Principais funções:

• Mudar o estilo inline:



• Mas sabemos que o certo é manipular o estilos no arquivo css:



• Também podemos ocultar e exibir um elemento:



• Criar um elemento, é muito mais simples com jQuery:



• Podemos passar o atributo do link direto para a função $ em um objeto:



• Criamos o elemento, mas falta incluí-lo:



• Outra forma:


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

Documents

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