INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT

Tamanho: px

Começar a partir da página:

Download "INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT"

Maria de Fátima Arruda Dreer
6 Há anos
Visualizações:

1 v1.1

2 INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT AULA 7 CRIANDO INTERAÇÕES COM JAVASCRIPT (PARTE 2) Eder FPF Tech

3 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;

4 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;

5 Agenda 1. Manipulação de elementos 1. DOM e BOM 2. Eventos 3. Criando elementos 2. Visão geral: jquery 3. Referências

6 DOM e BOM

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

8 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;

9 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):

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

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

12 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;

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

14 DOM e BOM Manipulando elementos Outros exemplos:

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

16 DOM e BOM Browser Object Model Exemplo:

17 Eventos

18 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).

19 Eventos

20 Eventos

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

22 Eventos

23 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;

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

25 Eventos

26 Eventos

27 Eventos

28 Eventos

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

30 Criando elementos

31 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();

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

33 Exemplo 1: Criando elementos

34 Exemplo 2: Criando elementos

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

36 Visão geral: jquery

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

38 Visão geral: jquery Mãos à obra! 5 minutos: Baixar o jquery em: (Se estiver tudo OK, é hora de um cafezinho);

39 Visão geral: jquery Tudo o que fizemos com JS puro, podemos fazer com jquery:

40 Com JS fazemos isso: Visão geral: jquery

41 A mesma funcionalidade, mas agora com jquery: Visão geral: jquery

42 Visão geral: jquery Ao utilizarmos jquery devemos sempre colocá-lo dentro de uma função anônima:

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

44 Visão geral: jquery Os eventos em jquery funcionam de maneira muito similar ao JS puro:

45 Visão geral: jquery Os eventos em jquery funcionam de maneira muito similar ao JS puro:

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

47 Visão geral: jquery O this com jquery funciona um pouquinho diferente:

48 Visão geral: jquery O jquery também possibilita o encadeamento de funções:

49 Visão geral: jquery Principais funções: Mudar o estilo inline:

50 Visão geral: jquery Principais funções: Mas sabemos que o certo é manipular o estilos no arquivo css:

51 Visão geral: jquery Principais funções: Também podemos ocultar e exibir um elemento:

52 Visão geral: jquery Principais funções: Criar um elemento, é muito mais simples com jquery:

53 Visão geral: jquery Principais funções: Podemos passar o atributo do link direto para a função $ em um objeto:

54 Visão geral: jquery Principais funções: Criamos o elemento, mas falta incluí-lo:

55 Visão geral: jquery Principais funções: Outra forma:

56 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!

57 Referências 1. ARAÚJO, Leandro. Programação Front-End com Javascript e jquery. Aulas 3, 4, 5 e 6. Manaus: BuriTech, MDN. JavaScript Básico. Disponível em < BR/docs/Aprender/Getting_started_with_the_web/JavaScript_básico> Acesso em: 07/04/ SILVA, Maurício Sammy. jquery A Biblioteca do Programador JavaScript. 3ª edição. São Paulo: Novatec, 2013.

Eder Martins Franco eder.franco@fpf.br efranco23@gmail.com facebook.

58 Eder Martins Franco facebook.com/edermartinsfranco linkedin.com/in/efranco23/ moodle.franco.eti.br

Documentos relacionados

Programação WEB. Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br www3.ifrn.edu.br/~andrealmeida. Aula II jquery UI

Programação WEB. Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br www3.ifrn.edu.br/~andrealmeida. Aula II jquery UI Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br www3.ifrn.edu.br/~andrealmeida Aula II jquery UI Introdução O que é jquery UI? Biblioteca que fornece maior nível de abstração para interação