Técnicas Avançadas em Desenvolvimento Web

RONNEESLEY MOURA TELES

´ TECNICAS AVANC ¸ ADAS EM DESENVOLVIMENTO WEB

´ SUMARIO 1

2

O CURSO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

1.1 Ementa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

1.2 Introdu¸c˜ ao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

1.3 Ferramentas utilizadas . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

1.4 Exerc´ıcios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

2.1 Caracter´ısticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

2.2 Onde o XML ´ e usado? . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

2.3 Diferen¸ca entre XML e HTML . . . . . . . . . . . . . . . . . . . . . .

8

2.4 Como fazer um simples documento XML? . . . . . . . . . . . . . . .

8

2.5 Um primeiro exemplo de XML . . . . . . . . . . . . . . . . . . . . . .

8

2.5.1

Como ´e exibido? . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

2.5.2

O que mais pode ser feito? . . . . . . . . . . . . . . . . . . . . . . 10

2.6 XML Bem-Formatado . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 2.7 Se¸c˜ oes CDATA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.8 Exerc´ıcios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3

LEITURA E ESCRITA DE XML . . . . . . . . . . . . . . . . . . . . . . . . 14 3.1 Modelagem Orientada a Objetos . . . . . . . . . . . . . . . . . . . . . 14 3.2 Codifica¸c˜ ao das classes Produto e Fabricante . . . . . . . . . . . . . . 15 3.3 Leitura e grava¸c˜ ao do XML com a classe Armazenamento . . . . . . 19 3.4 Testando os m´ etodos de leitura . . . . . . . . . . . . . . . . . . . . . . 25 3.5 Testando os m´ etodos de escrita . . . . . . . . . . . . . . . . . . . . . . 27 3.6 Aplicando as t´ ecnicas na Web . . . . . . . . . . . . . . . . . . . . . . . 28 3.7 Exerc´ıcios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

4

JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 4.1 Inclus˜ ao de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 4.2 Conhecendo o JavaScript

. . . . . . . . . . . . . . . . . . . . . . . . . 33

4.3 Vari´ aveis, constantes e o comando de atribui¸c˜ ao . . . . . . . . . . . . 34 4.4 Fun¸c˜ oes, operadores aritm´ eticos, retorno e DOM . . . . . . . . . . . 35 4.5 Controle de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 4.5.1

Estrutura condicional . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.5.2

Estrutura de repetic¸˜ao . . . . . . . . . . . . . . . . . . . . . . . . . 41 4.5.2.1

Estrutura para (for) . . . . . . . . . . . . . . . . . . . . . . 41

4.5.2.2

Estrutura fac¸a-enquanto (do-while)

4.5.2.3

Estrutura enquanto (while) . . . . . . . . . . . . . . . . . . 45

. . . . . . . . . . . . . 43

4.6 Exerc´ıcios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 5

JQUERY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 5.1 Obtendo elementos e alterando conte´ udos de tags

. . . . . . . . . . 50

5.2 Capturando eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 5.3 Efeitos gr´ aficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 5.4 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 5.5 Exerc´ıcios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 ˆ REFERENCIAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

1

O CURSO A disciplina Linguagem de Programac¸˜ao II e T´ecnicas Avanc¸adas em Desenvolvimento

Web s˜ao disciplinas que tratam de recursos avanc¸ados de programac¸˜ao Web que permitem uma interac¸˜ao mais dinˆamica com o internauta. Os pr´e-requisitos desta disciplina s˜ao: conhecimentos sobre HTML e linguagens de programac¸˜ao para Web. 1.1

Ementa T´ecnicas avanc¸adas de programac¸˜ao Web. Extensible Markup Language (XML). Bibli-

oteca JavaScript: jQuery. Linguagem orientada a objetos. Interfaces. Conex˜ao com banco de dados. Gerador de relat´orios: FPDF. 1.2

Introdu¸c˜ ao Neste curso, ser˜ao apresentadas as tecnologias: XML (Extensible Markup Language),

Linguagem de programac¸˜ao Java e JavaScript, a metodologia de desenvolvimento AJAX (Asynchronous JavaScript and XML) e conceitos de interfaces ricas (RIA - Rich Internet Application).

1.3

Ferramentas utilizadas • NetBeans: trata-se de um Ambiente de Desenvolvimento Integrado (IDE1 ) de c´odigos ´ um para v´arias linguagens como: Java, JavaScript, PHP, C, C++, Groovy, HTML. E ambiente gratuito que pode ser adquirido em hhttps://netbeans.orgi.

• MySQL: Sistema Gerenciador de Banco de Dados (SGBD) respons´avel pela criac¸˜ao dos bancos de dados e armazenamento dos dados de uma aplicac¸˜ao2 . Tamb´em ´e uma ferramenta gratuita que pode ser adquirida em hhttps://www.mysql.comi.

• Navegador Web: permite a visualizac¸˜ao das p´aginas Web. Os navegadores mais comuns s˜ao: Chrome hhttps://www.google.com/chromei, Mozilla Firefox hhttps://www. mozilla.org/pt-BR/firefox/newi, Opera hhttp://www.opera.com/pt-br/downloadi e Internet Explorer3 .

1 2

3

A sigla refere-se ao termo Integrated Development Environment.

Deve-se ficar claro que a ferramenta MySQL Workbench ´e apenas um ambiente gr´afico para o MySQL, assim como o cliente console e a ferramenta phpMyAdmin que pode ser obtida em hhttps://www.phpmyadmin. neti.

Presente em ambientes Windows. Seu sucessor ´e o Microsoft Edge presente no Windows 10.

3

• Jaspersoft Studio: possibilita a criac¸˜ao de relat´orios complexos utilizando a linguagem Java. Seus relat´orios podem ser personalizados atrav´es de um ambiente gr´afico e preenchidos pela linguagem de programac¸˜ao ou atrav´es de acesso direto ao banco de ´ uma ferramenta gratuita e pode ser obtida em hhttp://community.jaspersoft. dados. E com/project/jaspersoft-studioi.

1.4

Exerc´ıcios

1. Pesquise mais IDEs de programac¸˜ao em Java.

2. Cite caracter´ısticas da ferramenta Eclipse e o enderec¸o onde pode ser obtida.

3. Cite pelo menos trˆes outros SGBDs al´em do MySQL. 4. Diferencie MySQL de MySQL Workbench. Qual o comando necess´ario para conex˜ao com o MySQL pelo cliente console, supondo que o usu´ario seja root e a senha seja 123 ?

5. Quais os trˆes navegadores Web mais utilizados no mundo? Busque estat´ısticas na Internet sobre o assunto. Qual a importˆancia de saber quais os navegadores Web mais utilizados?

6. Dado que Jaspersoft Studio ´e uma ferramenta de elaborac¸˜ao de relat´orios para Java. O que ´e o FPDF? 7. Java ´e igual a JavaScript? Justifique.

8. Diferencie SGBD e banco de dados.

9. Qual a vers˜ao atual de cada uma das ferramentas: NetBeans, MySQL, Chrome, Mozilla Firefox e Jaspersoft Studio?

10. Groovy? O que ´e isto? Cite pelo menos trˆes caracter´ısticas.

11. AJAX ´e uma linguagem de programac¸˜ao? Justifique.

4

2

XML O XML (Extensible Markup Language) ´e um formato simples e flex´ıvel derivado

do SGML (Standard Generalized Markup Language) (W3C, 2012). Criado para enfrentar os desafios de publica¸c˜ ao em larga escala, ele desempenha um papel fundamental na troca de dados entre aplica¸c˜ oes Web. Lima e Carvalho (2005) define XML como “ uma linguagem que permite a construc¸˜ao de documentos leg´ıveis para seres humanos e que podem ser facilmente tratados por m´ aquinas.”

2.1

Caracter´ısticas O XML possui um conjunto mais expressivo e flex´ıvel de marcac¸o˜es do que o HTML

(HyperText Markup Language). Seus marcadores, tamb´em chamados de tags (etiquetas), podem ser definidos pelo usu´ario.

XML ´e uma meta-linguagem. Isso quer dizer que: “ela oferece recursos para definic¸˜ao de gram´aticas que caracterizam linguagens para classes de documentos espec´ıficos, com um conjunto de elementos, atributos e regras de composic¸˜ao bem determinados.”.

Duas linguagens permitem impor regras para as estruturas em XML, s˜ao elas: DTD (Document Type Definition) e XML Schema. Pode-se criar um documento XML com qualquer editor de textos (LIMA; CARVALHO, 2005).

2.2

Onde o XML ´ e usado?

O XML pode ser usado para: armazenamento de dados em arquivos de configurac¸˜ao,

intercˆambio de dados entre aplicac¸o˜es Web e Formato de dados (linguagens).

Os formatos de dados mais conhecidos s˜ao: MathML (Mathematical Markup Language) usado para descrever express˜oes matem´aticas em p´aginas Web (Figura 1 e C´odigo 2.1); MusicXML usado para descrever partituras musicais; RSS (originalmente RDF Site Summary, atualmente Really Simple Syndication) permite agregar conte´udo de p´aginas, Leitores de RSS podem ler not´ıcias de varios sites em apenas alguns segundos. Acesse o RSS da Globo em hhttp://g1.globo.com/dynamo/tecnologia/rss2.xmli.

5

Figura 1 – Resultado do arquivo MathML visualizado no Mozilla Firefox.

C´odigo 2.1 – Exemplo de arquivo MathML. 1

<!DOCTYPE html>

2

<html l a n g=” en ”>

3

<head>

4

< t i t l e >Example o f MathML embedded i n an HTML5 f i l e </ t i t l e >

5

<meta c h a r s e t=” u t f −8” />

6

</ head>

7

<body>

8

<h1>Example o f MathML embedded i n an HTML5 f i l e </ h1>

9

<p>

10 11 12

Given the q u a d r a t i c equation <math> <mrow>

13

<mi>a</ mi>

14

<mo>&I n v i s i b l e T i m e s ;</mo>

15

<msup>

16

<mi>x</ mi>

17

<mn>2</mn>

18

</msup>

19

<mo>+</mo>

20

<mi>b</ mi>

21

<mo>&I n v i s i b l e T i m e s ;</mo>

22

<mi>x</ mi>

23

<mo>+</mo>

24

<mi>c</ mi>

25

<mo>=</mo>

26

<mi>0</ mi>

27

</mrow>

6

28 29 30

</math> , t h e r o o t s a r e g i v e n by <math> <mrow>

31 32

<mi>x</ mi>

33

<mo>=</mo>

34

<m f r a c> <mrow>

35 36

<mo form=â&#x20AC;? p r e f i x â&#x20AC;?>&minus ;</mo>

37

<mi>b</ mi>

38

<mo>&P l u s M i n u s ;</mo>

39

<m s q r t> <msup>

40 41

<mi>b</ mi>

42

<mn>2</mn>

43

</msup>

44

<mo>&minus ;</mo>

45

<mn>4</mn>

46

<mo>&I n v i s i b l e T i m e s ;</mo>

47

<mi>a</ mi>

48

<mo>&I n v i s i b l e T i m e s ;</mo>

49

<mi>c</ mi> </ m s q r t>

50 51

</mrow>

52

<mrow>

53

<mn>2</mn>

54

<mo>&I n v i s i b l e T i m e s ;</mo>

55

<mi>a</ mi> </mrow>

56

</ m f r a c>

57

</mrow>

58 59 60 61

</math> . </p>

7

</ body>

62 63

</ html>

2.3

Diferen¸ca entre XML e HTML As duas linguagens diferem em: XML (Extensible Markup Language) serve para des-

cri¸c˜ ao de dados estruturados enquanto que o HTML (HyperText Markup Language) ´e uma linguagem para apresenta¸c˜ ao. Ou seja, XML d´a um significado ao conte´udo que est´a dentro das etiquetas, enquanto que o HTML especifica a forma como este conte´udo ser´a apresentado.

No XML usa-se a linguagem XSL (Extensible Stylesheet Language) para especificar como o conte´udo ser´a apresentado, j´a que o XML armazena somente os dados e a estrutura.

2.4

Como fazer um simples documento XML? Primeiramente deve-se definir o que deseja-se armazenar, por exemplo guardar dados

de produtos. Em seguida, define-se o nome da tag (etiqueta) para guardar estes dados (ex.: <produto>...</produto>). Posteriormente define-se em qual outra tag esta estar´a dentro (ex.: <produtos></produtos>), uma vez que todo documento deve ter uma tag raiz. Finalmente cria-se um arquivo com o conte´udo seguindo a estrutura definida.

2.5

Um primeiro exemplo de XML

C´odigo 2.2 – Exemplo de arquivo XML para guardar dados de produtos.

1

<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=” ISO −8859−1” ?>

2

<p r o d u t o s>

3

<p r o d u t o>A r r o z</ p r o d u t o>

4

<p r o d u t o>F e i j ˜a o</ p r o d u t o>

5

<p r o d u t o>Tomate</ p r o d u t o>

6

<p r o d u t o> R e f r i g e r a n t e</ p r o d u t o>

7

</ p r o d u t o s>

A linha 1 especifica dois atributos importantes de qualquer XML, s˜ao eles: version que representa a vers˜ao do XML e encoding que determina a forma com que os caracteres foram

8

salvos. Os tipos de codificac¸˜ao mais comuns s˜ao UTF-8 e ISO-8859-1. Isto varia em cada pa´ıs ou regi˜ao.

O C´odigo 2.2 apresenta o XML para armazenar 4 produtos utilizando duas tags produtos e produto. A tag produtos ´e a raiz, e a tag produto ´e utilizada quatro vezes, sendo uma para cada produto armazenado. O autor do XML pode definir quantas tags quiser, seguindo o padr˜ao <nome> para iniciar e </nome> para terminar.

2.5.1 Como ´e exibido?

Por n˜ao terem uma definic¸˜ao de aparˆencia, os documentos em XML s˜ao apresentados em forma de ´arvore. A aparˆencia de um XML varia em cada navegador, pois o importante ´e o conte´udo1 .

Figura 2 – Modo como o Firefox exibe um documento XML.

A maioria dos navegadores permitem navegar em um documento XML atrav´es dos s´ımbolos de + e − posicionados do lado esquerdo das tags. Estes s´ımbolos significam, respectivamente, expandir e contrair. Quando as tags est˜ao contra´ıdas, elas ficam como apresentadas na Figura 3.

Figura 3 – XML com a tag produtos contra´ıda.

1

Deve-se notar que o XML n˜ao tem aparˆencia, apenas o navegador que determina uma forma de apresent´a-lo.

9

2.5.2 O que mais pode ser feito?

O conte´udo de uma tag est´a entre seu in´ıcio e fim. Ex.: <nome > conte´ udo </nome>.

Este conte´udo pode ser um texto ou outra tag. Lembre-se que a tag produto estava dentro da produtos.

As vezes o marcador de in´ıcio pode conter algumas informac¸˜oes, elas s˜ao chamadas de atributos. O C´odigo 2.3 apresenta um atributo chamado preco na tag produto.

C´odigo 2.3 – Atributo preco na tag produto.

1

<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=” ISO −8859−1” ?>

2

<p r o d u t o s>

3

<p r o d u t o p r e c o=” 1 0 , 3 0 ”>A r r o z</ p r o d u t o>

4

<p r o d u t o p r e c o=” 2 , 5 0 ”>F e i j ˜a o</ p r o d u t o>

5

<p r o d u t o p r e c o=” 0 , 7 0 ”>Tomate</ p r o d u t o>

6

<p r o d u t o p r e c o=” 4 , 9 9 ”> R e f r i g e r a n t e</ p r o d u t o>

7

</ p r o d u t o s>

Deste modo pode-se melhorar o XML utilizando novos atributos e tags para armazenar mais informac¸˜oes. O C´odigo 2.4 apresenta um XML com v´arios dados.

C´odigo 2.4 – Formato de documento completo.

1

<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=” ISO −8859−1” ?>

2

<p r o d u t o s>

3 4 5

<p r o d u t o p r e c o=” 1 0 , 3 0 ” u n i d a d e=”Un” nome=” A r r o z ” v a l i d a d e=” 13/02/2014 ”> < f a b r i c a n t e r a z a o S o c i a l=”CDA A l i m e n t o s ”

6

f a n t a s i a=” Tio J o r g e ”

7

t e l e f o n e=” ( 6 2 ) 4015 −3526 ”></ f a b r i c a n t e>

8

</ p r o d u t o>

9

<p r o d u t o p r e c o=” 2 , 5 0 ” u n i d a d e=”Un” nome=” F e i j ˜a o ” />

10

<p r o d u t o p r e c o=” 0 , 7 0 ” u n i d a d e=”Kg” nome=” Tomate ”>

11

< f a b r i c a n t e r a z a o S o c i a l=” T i a Ana LTDA . ”

12

f a n t a s i a=” A l i m e n t o s da T i a ” />

13

</ p r o d u t o>

14

<p r o d u t o p r e c o=” 4 , 9 9 ” u n i d a d e=”Un”

15

nome=” R e f r i g e r a n t e Guaran´a A n t a r c t i c a ”>

10

< f a b r i c a n t e f a n t a s i a=” Companhia A n t a r c t i c a

16

P a u l i s t a ” />

17

</ p r o d u t o>

18 19

</ p r o d u t o s>

2.6

XML Bem-Formatado Um XML est´a bem formatado quando segue todas as regras b´asicas de criac¸˜ao: toda

tag que abre tem que fechar (ex.: <produto></produto> ou <fabricante />); as tags n˜ao podem se sobrepor.

N˜ao pode ocorrer: <produto><fabricante></produto></fabricante>. Isto representa uma sobreposic¸˜ao de tags. Quando o XML n˜ao segue estas regras ele est´a mal-formatado.

Quando o documento est´a bem-formatado o Mozilla Firefox exibe ele como na Figura 4. J´a quando o documento est´a mal-formatado, ele ´e exibido como na Figura 5.

Figura 4 – XML bem-formatado

Figura 5 – XML mal-formatado

11

2.7

Se¸c˜ oes CDATA Estas sec¸o˜es podem conter textos, caracteres reservados e caracteres de espac¸o em

branco. Tudo que estiver na sec¸˜ao CDATA n˜ao ser´a pocessado pelo analisador sint´atico XML. Assim pode quebrar as regras sint´aticas descritas na sec¸˜ao 2.6.

C´odigo 2.5 – XML com sec¸˜ao CDATA. 1

<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=” ISO −8859−1” ?>

2

<c o d i g o s> <c o d i g o l i n g u a g e m=” J a v a ” d e s c r i c a o=” Ol´a ”>

3

<! [CDATA[

4

c l a s s Ola {

5

p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) {

6

i n t horas = 13;

7 8

i f ( horas < 12)

9

System . o u t . p r i n t l n ( ”Bom d i a ” ) ;

10

else

11

System . o u t . p r i n t l n ( ” Boa N o i t e ” ) ;

12

}

13 14

}

15

] ]> </ c o d i g o>

16 17

</ c o d i g o s>

2.8

Exerc´ıcios

1. Busque na Internet um exemplo de DTD e XML Schema.

2. Encontre o RSS de pelo menos 5 sites diferentes na Internet.

3. Busque, baixe e instale um leitor de RSS e inclua nele os 5 enderec¸os de RSS encontrados na quest˜ao anterior. Anote o nome do leitor e o enderec¸o do site.

4. Encontre as tags que n˜ao pertecem ao HTML no C´odigo 2.1.

5. Para que serve a tag raiz?

12

6. Cite pelo menos trˆes outros tipos de codificac¸˜ao de caracteres al´em do UTF-8 e ISO8859-1. Qual a codificac¸˜ao utilizada no Jap˜ao?

7. Determine o formato de um documento XML para armazenar os dados de todos os alunos da turma. Lembre-se de especificar atributos e tags para armazenar dados pessoais como RG, CPF, nome, idade, etc. No final, compare com a definic¸˜ao de seus colegas. Anote as diferenc¸as observadas.

8. Usando o formato criado no exerc´ıcio anterior. Entre em consenso com a turma e defina um formato a ser utilizado por todos. Crie um documento contendo os dados de todos os alunos, preenchendo o XML. Anote as experiˆencias aprendidas no processo, principalmente as falhas.

9. Fac¸a uma tabela relacionando as tags que foram usadas no documento XML e a quantidade de atributos em cada tag.

10. Reescreva o c´odigo do Exemplo 2.5 sem usar a sec¸˜ao CDATA. Descreva o problema que ocorreu ao abr´ı-lo no navegador Web.

13

3

LEITURA E ESCRITA DE XML A partir de linguagens de programac¸˜ao ´e poss´ıvel gerar e ler os conte´udos de arquivos

XML. Os exemplos deste cap´ıtulo tˆeem como miss˜ao a leitura e escrita de um arquivo XML como o apresentado no C´odigo 2.4.

3.1

Modelagem Orientada a Objetos A Figura 6 apresenta o diagrama de classe da modelagem orientada a objetos utilizada

no problema. Neste diagrama existem trˆes classes: Produto, Fabricante e Armazenamento. A classe Produto e Fabricante servem apenas para memorizar os dados destas duas entidades, deste modo cada uma possui v´arios atributos. A classe Produto possui cinco atributos, sendo quatro de tipos primitivos e um apresentado atrav´es de uma associac¸˜ao entre a classe Produto e a classe Fabricante. De outro lado a classe Fabricante possui apenas trˆes atributos do tipo String.

Figura 6 – Diagrama de classe para a modelagem orientada a objetos.

A classe Armazenamento permite realizar a leitura e gravac¸˜ao de um XML como o apresentado no C´odigo 2.4. Para leitura ela disp˜oe de trˆes m´etodos: lerTodosProdutos(), lerProduto() e lerFabricante(). J´a para escrita possui mais trˆes m´etodos: gravarProdutos(), preencherProduto() e preencherFabricante().

14

O m´etodo lerTodosProdutos() busca todas as tags cujo nome ´e produto e ao encontrar uma, solicita ao m´etodo lerProduto() a leitura dos dados do produto encontrado. Se o produto em quest˜ao tiver fabricante solicita-se ao m´etodo lerFabricante() a criac¸˜ao de um objeto da classe Fabricante e seu preenchimento com os dados do XML. 3.2

Codifica¸c˜ ao das classes Produto e Fabricante O C´odigo 3.1 apresenta a implementac¸˜ao da classe de Produto. Nota-se que ela possui

cinco atributos (nome, unidade, prec¸o, validade e fabricante), quatro construtores, m´etodos que encapsulam cada atributo permitindo o controle de acesso de cada um e a sobrescrita do m´etodo toString() que permite retornar um texto que representa o objeto, neste caso escolheu-se o nome para represent´a-lo.

Observa-se que cada atributo possui um tipo de dado espec´ıfico. O atributo prec¸o ´e Double, unidade e nome s˜ao String, validade ´e um objeto da classe Date 1 e fabricante pertence a uma classe espec´ıfica chamada Fabricante que ser´a definida mais adiante.

C´odigo 3.1 – Representa a classe de produtos.

1

package p r o f r o n n e e s l e y ;

2 3

i m p o r t j a v a . u t i l . Date ;

4 5

/∗ ∗

6

∗ C l a s s e que r e p r e s e n t a o p r o d u t o

7

∗ @ a u t h o r R o n n e e s l e y Moura T e l e s

8

∗ @ s i n c e 06/02/2017

9

∗/

10

p u b l i c c l a s s Produto {

11

// A t r i b u t o s que determina m a s c a r a c t e r´ı s t i c a s d o s p r o d u t o s

12

p r i v a t e S t r i n g nome ;

13 14

p r i v a t e String unidade ;

15 16

p r i v a t e Double p r e c o ;

17 18

p r i v a t e Date v a l i d a d e ;

19 20

private Fabricante fabricante ;

21 22 1

// C o n s t r u t o r v a z i o

Nota-se a importac¸˜ao desta classe na linha 1 do c´odigo. Esta informa para a linguagem Java a localizac¸˜ao/pacote da classe desejada.

15

23

p u b l i c Produto ( ) {

24

}

25 26

// C o n s t r u t o r com 3 d a d o s

27

p u b l i c P r o d u t o ( S t r i n g nome , S t r i n g u n i d a d e , Double p r e c o ) {

28

t h i s . nome = nome ;

29

t h i s . unidade = unidade ;

30

t h i s . preco = preco ;

31

}

32 33

p u b l i c P r o d u t o ( S t r i n g nome , S t r i n g u n i d a d e , Double p r e c o , Date v a l i d a d e ) {

34

t h i s . nome = nome ;

35

t h i s . unidade = unidade ;

36

t h i s . preco = preco ;

37

this . validade = validade ;

38

}

39 40

p u b l i c P r o d u t o ( S t r i n g nome , S t r i n g u n i d a d e , Double p r e c o , Date v a l i d a d e , Fabricante fabricante ) {

41

t h i s . nome = nome ;

42

t h i s . unidade = unidade ;

43

t h i s . preco = preco ;

44

this . validade = validade ; this . fabricante = fabricante ;

45 46

}

47 48

// M´e todos g e t e s e t , que permitem a l e i t u r a e e s c r i t a d o s a t r i b u t o s

49

p u b l i c Double g e t P r e c o ( ) { return preco ;

50 51

}

52 53

p u b l i c v o i d s e t P r e c o ( Double p r e c o ) { t h i s . preco = preco ;

54 55

}

56 57

p u b l i c S t r i n g getUnidade () { return unidade ;

58 59

}

60 61

p u b l i c void setUnidade ( String unidade ) { t h i s . unidade = unidade ;

62 63

}

64 65

p u b l i c S t r i n g getNome ( ) { r e t u r n nome ;

66 67

}

68

16

p u b l i c v o i d setNome ( S t r i n g nome ) {

69

t h i s . nome = nome ;

70

}

71 72

p u b l i c Date g e t V a l i d a d e ( ) {

73

return validade ;

74

}

75 76

p u b l i c v o i d s e t V a l i d a d e ( Date v a l i d a d e ) {

77

this . validade = validade ;

78

}

79 80

public Fabricante getFabricante () {

81

return fabricante ;

82

}

83 84

public void setFabricante ( Fabricante fabricante ) {

85

this . fabricante = fabricante ;

86

}

87 88

/∗ ∗

89 90

∗ Quando s o l i c i t a d o a l g o que r e p r e s e n t a o o b j e t o

91

∗ r e t o r n a −s e e n t ˜ a o o nome

92

∗ @ r e t u r n nome do p r o d u t o

93

∗/

94

@Override

95

public String toString () { r e t u r n getNome ( ) ;

96

}

97 98

}

O C´odigo 3.2 apresenta a implementac¸˜ao da classe Fabricante. Esta classe ´e mais simples, pois possui apenas trˆes atributos (raz˜ao social, fantasia e telefone) e todos eles s˜ao do tipo String. Adicionalmente, tem-se um construtor vazio, m´etodos de acesso aos atributos (getters e setters) e o m´etodo toString().

C´odigo 3.2 – Representa a classe de fabricantes.

1

package p r o f r o n n e e s l e y ;

2 3

/∗ ∗

4

∗ C l a s s e que r e p r e s e n t a o f a b r i c a n t e

5

∗ @ a u t h o r R o n n e e s l e y Moura T e l e s

6

∗ @ s i n c e 06/02/2017

7

∗/

8

public class Fabricante {

17

9 10

// A t r i b u t o s do f a b r i c a n t e private String razaoSocial ;

11 12

private String fantasia ;

13 14

private String telefone ;

15 16

// C o n s t r u t o r v a z i o

17

public Fabricante () {

18

}

19 20

public Fabricante ( String razaoSocial , String fantasia , String telefone ) {

21

this . razaoSocial = razaoSocial ;

22

this . fantasia = fantasia ;

23

this . telefone = telefone ;

24

}

25 26

// M´e todos de e n c a p s u l a m e n t o g e t e s e t

27

public String getRazaoSocial () { return razaoSocial ;

28 29

}

30 31

public void setRazaoSocial ( String razaoSocial ) { this . razaoSocial = razaoSocial ;

32 33

}

34 35

public String getFantasia () { return fantasia ;

36 37

}

38 39

public void setFantasia ( String fantasia ) { this . fantasia = fantasia ;

40 41

}

42 43

public String getTelefone () { return telefone ;

44 45

}

46 47

public void setTelefone ( String telefone ) { this . telefone = telefone ;

48 49

}

50 51

/∗ ∗

52

∗ R e p r e s e n t a c¸ ˜ a o t e x t u a l do o b j e t o

53

∗ @ r e t u r n nome f a n t a s i a

54

∗/

55

@Override

18

public String toString () {

56

return getFantasia () ;

57

}

58 59

}

3.3

Leitura e grava¸c˜ ao do XML com a classe Armazenamento A classe Armazenamento finalmente codifica as funcionalidades descritas de leitura e

escrita. No m´etodo lerTodosProdutos() cria-se um objeto da classe Document, nas linhas 36 a 38, e o atribui a uma vari´avel chamada documento. Tanto para leitura quanto para gravac¸˜ao o passo de criac¸˜ao deste objeto ´e necess´ario. Para isto deve-se obter um objeto da classe DocumentBuilderFactory e outro da classe DocumentBuilder.

Na linha 40 utiliza-se o m´etodo getElementsByTagName() para obter todas as tags chamadas produto, esta lista ´e atribu´ıda a uma vari´avel do tipo NodeList. Na linha 42 cria-se uma lista de produtos vazia. Esta ´e preenchida nas linhas 43 a 48 e ap´os o preenchimento ´e retornada na linha 47. Deve-se notar o m´etodo lerProduto() na linha 46, ele ´e respons´avel pela criac¸˜ao e preenchimento de cada produto.

C´odigo 3.3 – Representa a classe respons´avel pelo armazenamento dos dados em XML, tanto leitura quanto escrita.

1

package p r o f r o n n e e s l e y ;

2 3

import java . io . F i l e ;

4

import java . io . InputStream ;

5

import java . io . Writer ;

6

import java . text . ParseException ;

7

import j a v a . t e x t . SimpleDateFormat ;

8

import java . u t i l . A r r a y L i s t ;

9

import java . u t i l . L i s t ;

10

i m p o r t j a v a x . xml . p a r s e r s . D o c u m e n t B u i l d e r ;

11

i m p o r t j a v a x . xml . p a r s e r s . D o c u m e n t B u i l d e r F a c t o r y ;

12

i m p o r t j a v a x . xml . t r a n s f o r m . OutputKeys ;

13

i m p o r t j a v a x . xml . t r a n s f o r m . T r a n s f o r m e r ;

14

i m p o r t j a v a x . xml . t r a n s f o r m . T r a n s f o r m e r F a c t o r y ;

15

i m p o r t j a v a x . xml . t r a n s f o r m . dom . DOMSource ;

16

i m p o r t j a v a x . xml . t r a n s f o r m . s t r e a m . S t r e a m R e s u l t ;

17

i m p o r t o r g . w3c . dom . Document ;

18

i m p o r t o r g . w3c . dom . E l e m e n t ;

19

i m p o r t o r g . w3c . dom . N o d e L i s t ;

20 21

/∗ ∗

19

22

∗ Armazenamento de a r q u i v o XML p a r a p r o d u t o s

23

∗ @ a u t h o r R o n n e e s l e y Moura T e l e s

24

∗ @ s i n c e 06/02/2017

25

∗/

26 27

p u b l i c c l a s s Armazenamento { /∗ ∗

28

∗ R e a l i z a a l e i t u r a de t o d o s o s p r o d u t o s e o s c o l o c a em uma l i s t a

29

∗ de p r o d u t o s

30

∗ @ r e t u r n l i s t a de p r o d u t o s

31

∗ @throws E x c e p t i o n

32

∗/

33

p u b l i c L i s t <Produto> l e r T o d o s P r o d u t o s ( ) t h r o w s E x c e p t i o n { I n p u t S t r e a m arquivoXML = t h i s . g e t C l a s s ( ) . g e t R e s o u r c e A s S t r e a m ( ” p r o d u t o s .

34

xml ” ) ; 35

DocumentBuilderFactory f a b r i c a = DocumentBuilderFactory . newInstance () ;

36 37

DocumentBuilder c o n s t r u t o r = f a b r i c a . newDocumentBuilder ( ) ;

38

Document documento = c o n s t r u t o r . p a r s e ( arquivoXML ) ;

39

N o d e L i s t l i s t a = documento . getElementsByTagName ( ” p r o d u t o ” ) ;

40 41 42

L i s t <Produto> p r o d u t o s = new A r r a y L i s t <>() ;

43

f o r ( i n t i = 0 ; i < l i s t a . g e t L e n g t h ( ) ; i ++){ Element tag = ( Element ) l i s t a . item ( i ) ;

44 45 46

Produto produto = l e r P r o d u t o ( tag ) ;

47

p r o d u t o s . add ( p r o d u t o ) ; }

48 49

return produtos ;

50 51

}

52 53

/∗ ∗

54

∗ R e a l i z a a l e i t u r a de um p r o d u t o , s e t i v e r um f a b r i c a n t e

55

∗ e l e tamb´em ´e l i d o

56

∗ @param t a g t a g do p r o d u t o

57

∗ @ r e t u r n o b j e t o p r o d u t o da c l a s s e { @ l i n k P r o d u t o } com o s

58

∗ dados p r e e n c h i d o s

59

∗ @throws P a r s e E x c e p t i o n

60

∗/

61 62

p r i v a t e Produto l e r P r o d u t o ( Element tag ) throws P a r s e E x c e p t i o n { P r o d u t o p = new P r o d u t o ( ) ; // I n s t a n c i a um p r o d u t o

63 64

// R e a l i z a a l e i t u r a do nome e u n i d a d e

65

p . setNome ( t a g . g e t A t t r i b u t e ( ”nome” ) ) ;

66

p . setUnidade ( tag . g e t A t t r i b u t e ( ” unidade ” ) ) ;

67

20

68

// Troca a v´ı r g u l a p o r um p o n t o e r e a l i z a a c o n v e r s ˜ ao para double

69

p . s e t P r e c o ( Double . p a r s e D o u b l e ( t a g . g e t A t t r i b u t e ( ” p r e c o ” ) . r e p l a c e ( ’ , ’ , ’ . ’)) );

70 71

// I n s t a n c i a a c l a s s e r e s p o n s ´ a v e l p e l a l e i t u r a de d a t a s f o r m a t a d a s

72

i f ( tag . h a s A t t r i b u t e ( ” v a l i d a d e ” ) ) {

73

S i m p l e D a t e F o r m a t s d f = new S i m p l e D a t e F o r m a t ( ” dd /MM/ y y y y ” ) ;

74

p . s e t V a l i d a d e ( sdf . parse ( tag . g e t A t t r i b u t e ( ” v a l i d a d e ” ) ) ) ; }

75 76 77

// S o l i c i t a a s t a g s f a b r i c a n t e

78

N o d e L i s t f i l h o s = t a g . getElementsByTagName ( ” f a b r i c a n t e ” ) ;

79 80

// Se t i v e r uma t a g f a b r i c a n t e

81

i f ( f i l h o s . getLength ( ) > 0) {

82

//Obt´em o i −´e s i m o f i l h o

83

Element f i l h o = ( Element ) f i l h o s . item ( 0 ) ;

84 85

// V e r i f i c a s e e l a ´e uma t a g f a b r i c a n t e

86

i f ( f i l h o . getTagName ( ) . e q u a l s ( ” f a b r i c a n t e ” ) ) {

87

// P r e e n c h e o s d a d o s do f a b r i c a n t e

88

p. setFabricante ( lerFabricante ( filho ) ) ; }

89

}

90 91

return p ;

92 93

}

94 95

/∗ ∗

96

∗ R e a l i z a a l e i t u r a de um f a b r i c a n t e

97

∗ @param t a g t a g com o s d a d o s do f a b r i c a n t e < f a b r i c a n t e />

98

∗ @ r e t u r n d a d o s do f a b r i c a n t e em um novo o b j e t o da

99

∗ classe { @link Fabricante }

100 101 102

∗/ p r i v a t e F a b r i c a n t e l e r F a b r i c a n t e ( Element tag ) { F a b r i c a n t e f = new F a b r i c a n t e ( ) ; // I n s t a n c i a o f a b r i c a n t e

103 104

// P r e e n c h e t o d o s o s a t r i b u t o s do f a b r i c a n t e

105

i f ( tag . h a s A t t r i b u t e ( ” r a z a o S o c i a l ” ) )

106

f . setRazaoSocial ( tag . g e t A t t r i b u t e ( ” r a z a o S o c i a l ” ) ) ;

107 108

f . s e t F a n t a s i a ( tag . g e t A t t r i b u t e ( ” f a n t a s i a ” ) ) ;

109 110 111

i f ( tag . h a s A t t r i b u t e ( ” t e l e f o n e ” ) ) f . s e t T e l e f o n e ( tag . g e t A t t r i b u t e ( ” t e l e f o n e ” ) ) ;

112 113

// R e t o r n a o o b j e t o p r e e n c h i d o

21

return f ;

114 115

}

116 117

/∗ ∗

118

∗ Grava v ´ a r i o s p r o d u t o s em um a r q u i v o

119

∗ @param p r o d u t o s l i s t a de p r o d u t o s a s e r g r a v a d a

120

∗ @throws E x c e p t i o n

121

∗/

122

p u b l i c v o i d g r a v a r P r o d u t o s ( L i s t <Produto> p r o d u t o s , W r i t e r e s c r i t o r ) t h r o w s Exception {

123

DocumentBuilderFactory f a b r i c a = DocumentBuilderFactory . newInstance () ;

124

DocumentBuilder c o n s t r u t o r = f a b r i c a . newDocumentBuilder ( ) ;

125

Document documento = c o n s t r u t o r . newDocument ( ) ;

126 127

E l e m e n t r a i z = documento . c r e a t e E l e m e n t ( ” p r o d u t o s ” ) ;

128

documento . a p p e n d C h i l d ( r a i z ) ;

129

f o r ( Produto p : produtos ) {

130

p r e e n c h e r P r o d u t o ( documento , r a i z , p ) ;

131

}

132 133 134

// T r a n s f o r m a o s d a d o s em mem´ o ria p a r a XML e g r a v a em um a r q u i v o

135

TransformerFactory fabricaTransformacao = TransformerFactory .

136

Transformer transformador = fabricaTransformacao . newTransformer ( ) ;

137

// H a b i l i t a i n d e n t a ¸c ˜ a o , e s t e p a s s o ´e e s s e n c i a l p a r a f o r m a t a ¸c ˜ ao f i n a l

138

t r a n s f o r m a d o r . s e t O u t p u t P r o p e r t y ( OutputKeys . INDENT , ” y e s ” ) ;

139

// E s p e c i f i c a a t a b u l a ¸c ˜ ao

140

t r a n s f o r m a d o r . s e t O u t p u t P r o p e r t y ( ” { h t t p : / / xml . a p a c h e . o r g / x s l t } i n d e n t −

newInstance () ;

amount ” , ” 2 ” ) ; 141 142

DOMSource c o d i g o = new DOMSource ( documento ) ;

143

StreamResult saida ;

144

// V e r i f i c a o d e s t i n o da s a´ıd a

145

i f ( e s c r i t o r == n u l l ) s a i d a = new S t r e a m R e s u l t ( new F i l e ( ” c : / tmp/ p r o d u t o s g r a v a d o . xml ” ) ) ;

146

else

147

s a i d a = new S t r e a m R e s u l t ( e s c r i t o r ) ;

148 149

transformador . transform ( codigo , s a i d a ) ;

150 151

}

152 153

/∗ ∗

154

∗ P r e e n c h e o s d a d o s de um u ´nico produto

155

∗ @param documento documento XML

156

∗ @param r a i z t a g r a i z do documento XML, n e s t e c a s o a t a g p r o d u t o s

157

∗ @param p r o d u t o d a d o s do p r o d u t o a s e r p r e e n c h i d o

22

∗/

158 159

p r i v a t e v o i d p r e e n c h e r P r o d u t o ( Document documento , E l e m e n t r a i z , P r o d u t o produto ) {

160

// C r i a a t a g do p r o d u t o em mem´ o ria

161

E l e m e n t t a g P r o d u t o = documento . c r e a t e E l e m e n t ( ” p r o d u t o ” ) ;

162 163

t a g P r o d u t o . s e t A t t r i b u t e ( ”nome” , p r o d u t o . getNome ( ) ) ;

164

tagProduto . s e t A t t r i b u t e ( ” preco ” , produto . getPreco () . t o S t r i n g () . r e p l a c e (

165

tagProduto . s e t A t t r i b u t e ( ” unidade ” , produto . getUnidade () ) ;

” . ” , ” ,”)) ;

166

i f ( p r o d u t o . g e t V a l i d a d e ( ) != n u l l ) {

167 168

S i m p l e D a t e F o r m a t s d f = new S i m p l e D a t e F o r m a t ( ” dd /MM/ y y y y ” ) ;

169

tagProduto . s e t A t t r i b u t e ( ” v a l i d a d e ” , sdf . format ( produto . getValidade () ) ) ; }

170 171 172

// V e r i f i c a s e tem f a b r i c a n t e , c a s o t e n h a p r e e n c h e s e u s d a d o s

173

Fabricante f = produto . getFabricante () ;

174

i f ( f != n u l l ) { p r e e n c h e r F a b r i c a n t e ( documento , t a g P r o d u t o , f ) ;

175

}

176 177 178

// A d i c i o n a a t a g do p r o d u t o c r i a d a ` a tag r a i z

179

r a i z . appendChild ( tagProduto ) ;

180

}

181 182

/∗ ∗

183

∗ P r e e n c h e o s d a d o s do f a b r i c a n t e em uma t a g p r o d u t o

184

∗ @param documento documento XML

185

∗ @param t a g P r o d u t o t a g do p r o d u t o

186

∗ @param f a b r i c a n t e d a d o s do f a b r i c a n t e

187

∗/

188

p r i v a t e v o i d p r e e n c h e r F a b r i c a n t e ( Document documento , E l e m e n t t a g P r o d u t o , Fabricante fabricante ){

189

E l e m e n t t a g F a b r i c a n t e = documento . c r e a t e E l e m e n t ( ” f a b r i c a n t e ” ) ;

190 191 192

i f ( f a b r i c a n t e . g e t R a z a o S o c i a l ( ) != n u l l ) tagFabricante . setAttribute (” razaoSocial ” , fabricante . getRazaoSocial () ) ;

193 194

tagFabricante . setAttribute (” fantasia ” , fabricante . getFantasia () ) ;

195 196 197

i f ( f a b r i c a n t e . g e t T e l e f o n e ( ) != n u l l ) tagFabricante . setAttribute (” telefone ” , fabricante . getTelefone () ) ;

198 199

// A d i c i o n a a t a g f a b r i c a n t e c r i a d a ` a t a g do p r o d u t o

23

tagProduto . appendChild ( tagFabricante ) ;

200

}

201 202

}

O m´etodo lerProduto() se assemelha bastante ao m´etodo lerFabricante(). Nele instanciase uma novo produto (linha 62) e seus dados s˜ao preenchidos nas linhas 65 a 75. Nas linhas entre 78 e 90, verifica-se a tag produto que est´a sendo lida possui internamente uma tag fabricante. Caso possua, chama o m´etodo lerFabricante() para criar o fabricante e preenchˆe-lo.

Ao final da func¸˜ao, um novo produto p ´e retornado na linha 92.

O m´etodo lerFabricante() simplesmente preenche os trˆes atributos da classe Fabricante para o objeto criado na linha 102. Deve-se notar que os atributos que n˜ao s˜ao obrigat´orios, primeiramente verificou-se a existˆencia com o m´etodo hasAttribute() antes de realizar a leitura com o m´etodo getAttribute(). Isto evita que os valores da raz˜ao social e do telefone do fabricante sejam preenchidos com textos vazios2 . Ao final do m´etodo, o fabricante ´e retornado com todos seus dados preenchidos na linha 111.

Para gravac¸˜ao de dados contidos na mem´oria RAM em um arquivo XML, utiliza-se o m´etodo gravarProdutos(), declarado nas linhas 122 a 151. Basicamente ele cria um objeto da classe Document da mesma forma que aconteceu na leitura de XML. Em seguida, cria-se a tag raiz, neste caso chamada produtos e a adiciona ao documento XML atrav´es do m´etodo appendChild() na linha 128. Nas linhas 130 a 132 percorre-se ent˜ao todos os produtos na lista e os preenche utilizando o m´etodo preencherProduto().

O u´ltimo passo da gravac¸˜ao consiste em converter os dados da mem´oria do objeto da classe Document atrav´es da classe Transformer (linha 136). Por fim, usa-se o m´etodo transform() para armazenar os dados em um arquivo.

O m´etodo preencherProduto() cria uma tag produto e preenche seus atributos conforme os valores do produto em quest˜ao (linhas 159 a 165). Nas linhas 167 a 170, verifica-se a validade est´a preenchida, caso esteja, ela ´e convertida para o formato adequado usando a classe SimpleDateFormat.

Nas linhas 173 a 176, ´e verificada o preenchimento do fabricante do objeto produto.

Se o produto possuir um fabricante, ent˜ao utiliza-se o m´etodo preencherFabricante() para adicionar a tag necess´aria. Por fim, na linha 179 a tag produto ´e adicionada na tag raiz.

2

Deve-se notar que “” ´e diferente de nulo. O primeiro indica que existe valor e que ele ´e vazio, enquanto que o segundo indica que n˜ao existe valor.

24

O m´etodo preencherFabricante() (linhas 188 a 201) cria a tag fabricante e preenche seus atributos. No final, a tag criada ´e adicionada `a tag do produto (linha 200).

3.4

Testando os m´ etodos de leitura O C´odigo 3.4 apresenta os comandos necess´arios para verificar se a implementac¸˜ao da

sec¸˜ao anterior est´a correta. Na linha 19, obt´em-se a lista de produtos de um XML, como o apresentado no C´odigo 2.4.

C´odigo 3.4 – Teste de leitura do XML apresentado no C´odigo 2.4.

1

package p r o f r o n n e e s l e y ;

2 3

import j a v a . t e x t . SimpleDateFormat ;

4

import java . u t i l . L i s t ;

5 6

/∗ ∗

7

∗ C l a s s e p r i n c i p a l do p r o j e t o

8

∗ @ a u t h o r R o n n e e s l e y Moura T e l e s

9

∗ @ s i n c e 06/02/2017

10 11 12

∗/ public class Leitura { /∗ ∗

13

∗ M´e todo p r i n c i p a l , e s t e ´e e x e c u t a d o quando a c l a s s e L e i t u r a ´e e x e c u t a d a

14

∗ @param a r g s p a r ˆ a m e t r o s do s i s t e m a o p e r a c i o n a l

15

∗ @throws E x c e p t i o n e x c e ¸c ˜ o e s n˜ ao t r a t a d a s

16

∗/

17

p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) t h r o w s E x c e p t i o n {

18

Armazenamento armazenamento = new Armazenamento ( ) ;

19

L i s t <Produto> l i s t a = armazenamento . l e r T o d o s P r o d u t o s ( ) ;

20 21

S i m p l e D a t e F o r m a t s d f = new S i m p l e D a t e F o r m a t ( ” dd /MM/ y y y y ” ) ;

22

f o r ( Produto p :

l i s t a ){

23

System . o u t . p r i n t l n ( ” P r o d u t o : ” + p . getNome ( ) ) ;

24

System . o u t . p r i n t l n ( ” U n i d a d e : ” + p . g e t U n i d a d e ( ) ) ;

25

System . o u t . p r i n t l n ( ” P r e ¸c o : ” + p . g e t P r e c o ( ) ) ;

26 27 28

i f ( p . g e t V a l i d a d e ( ) != n u l l ) System . o u t . p r i n t l n ( ” V a l i d a d e : ” + s d f . f o r m a t ( p . g e t V a l i d a d e ( ) ) ) ;

29 30 31

i f ( p . g e t F a b r i c a n t e ( ) != n u l l ) { Fabricante f = p . getFabricante () ;

32 33

System . o u t . p r i n t l n ( ” F a b r i c a n t e : ” + f . g e t F a n t a s i a ( ) ) ;

34

25

i f ( f . g e t R a z a o S o c i a l ( ) != n u l l )

35

System . o u t . p r i n t l n ( ”− Raz˜ ao s o c i a l : ” + f . g e t R a z a o S o c i a l ( ) )

36

; 37

i f ( f . g e t T e l e f o n e ( ) != n u l l )

38

System . o u t . p r i n t l n ( ”− T e l e f o n e : ” + f . g e t T e l e f o n e ( ) ) ;

39

}

40 41

System . o u t . p r i n t l n ( ”−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−” ) ;

42

}

43

}

44 45

}

Nas linhas 21 a 43, esta lista ´e impressa na sa´ıda padr˜ao permitindo verificar se os dados foram realmente lidos.

Resultado 3.5 – Sa´ıda do C´odigo 3.4.

1

Produto : Arroz

2

U n i d a d e : Un

3

P r e ¸c o : 1 0 . 3

4

V a l i d a d e : 13/02/2014

5

F a b r i c a n t e : Tio J o r g e

6 − Raz˜ a o s o c i a l : CDA A l i m e n t o s 7 − Telefone :

( 6 2 ) 4015 −3526

8 −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− 9

ao Produto : F e i j ˜

10

U n i d a d e : Un

11

P r e ¸c o : 2 . 5

12 −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− 13

P r o d u t o : Tomate

14

U n i d a d e : Kg

15

P r e ¸c o : 0 . 7

16

F a b r i c a n t e : A l i m e n t o s da T i a

17 − Raz˜ a o s o c i a l : T i a Ana LTDA .

18 −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− 19

P r o d u t o : R e f r i g e r a n t e Guaran´ a Antarctica

20

U n i d a d e : Un

21

P r e ¸c o : 4 . 9 9

22

F a b r i c a n t e : Companhia A n t a r c t i c a

Paulista

23 −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

26

3.5

Testando os m´ etodos de escrita Nas linhas 15 a 25, do c´odigo 3.6, os produtos s˜ao criados em mem´oria RAM atrav´es de

objetos. Nas linhas 27 a 32, cria-se uma lista de produtos e cada produto criado ´e adicionado a ela. Na linha 34 cria-se um objeto da classe Armazenamento e na linha 35 solicita-se a gravac¸˜ao desta lista em um arquivo.

C´odigo 3.6 – Teste de escrita de um XML para dados de produtos.

1

package p r o f r o n n e e s l e y ;

2 3

import java . u t i l . A r r a y L i s t ;

4

import java . u t i l . Calendar ;

5

i m p o r t j a v a . u t i l . Date ;

6

import java . u t i l . L i s t ;

7 8 9

/∗ ∗ ∗ G r a v a c¸ ˜ a o de um XML

10

∗ @ a u t h o r R o n n e e s l e y Moura T e l e s

11

∗ @ s i n c e 06/02/2017

12 13 14

∗/ p u b l i c c l a s s Gravacao { p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) t h r o w s E x c e p t i o n {

15

P r o d u t o p r o d u t o 1 = new P r o d u t o ( ” C e l u l a r ABC” , ”Un” , 1 5 0 0 . 0 0 ) ;

16

P r o d u t o p r o d u t o 2 = new P r o d u t o ( ”TV Sony X” , ”Un” , 2 7 0 0 . 0 0 ) ;

17

P r o d u t o p r o d u t o 3 = new P r o d u t o ( ” A b a c a x i ” , ”Un” , 1 . 5 0 , new Date ( ) ) ;

18 19

Calendar cal = Calendar . getInstance () ;

20

c a l . s e t (2017 , 3 , 20) ;

21

P r o d u t o p r o d u t o 4 = new P r o d u t o ( ”Manga” , ”Un” , 1 . 7 0 , c a l . getTime ( ) ) ;

22 23

c a l . s e t (2017 , 11 , 31) ;

24

F a b r i c a n t e f = new F a b r i c a n t e ( ” C u t r a l e LTDA” , ” C u t r a l e ” , ” ( 1 1 ) 9999 −1234 ” ) ;

25

P r o d u t o p r o d u t o 5 = new P r o d u t o ( ” Suco de l a r a n j a ” , ”Un” , 5 . 0 0 , c a l . getTime ( ) , f ) ;

26 27

L i s t <Produto> l i s t a = new A r r a y L i s t <>() ;

28

l i s t a . add ( p r o d u t o 1 ) ;

29

l i s t a . add ( p r o d u t o 2 ) ;

30

l i s t a . add ( p r o d u t o 3 ) ;

31

l i s t a . add ( p r o d u t o 4 ) ;

32

l i s t a . add ( p r o d u t o 5 ) ;

33 34

Armazenamento a = new Armazenamento ( ) ;

35

a . gravarProdutos ( l i s t a , n u l l ) ;

27

36

System . o u t . p r i n t l n ( ” P r o d u t o s s a l v o s ! ” ) ;

37

}

38 39

}

O C´odigo 3.7 apresenta a sa´ıda do C´odigo 3.6. Deve-se atendar que o arquivo foi salvo no diret´orio “c:\tmp\produtos gravado.xml” e caso este diret´orio n˜ao exista deve ser criado antes da execuc¸˜ao.

C´odigo 3.7 – Sa´ıda do C´odigo 3.6.

1 <? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=”UTF−8” s t a n d a l o n e=” no ” ?> 2 <p r o d u t o s> 3

<p r o d u t o nome=” C e l u l a r ABC” p r e c o=” 1 5 0 0 , 0 ” u n i d a d e=”Un” />

4

<p r o d u t o nome=”TV Sony X” p r e c o=” 2 7 0 0 , 0 ” u n i d a d e=”Un” />

5

<p r o d u t o nome=” A b a c a x i ” p r e c o=” 1 , 5 ” u n i d a d e=”Un” v a l i d a d e=” 06/02/2017 ” />

6

<p r o d u t o nome=”Manga” p r e c o=” 1 , 7 ” u n i d a d e=”Un” v a l i d a d e=” 20/04/2017 ” />

7

<p r o d u t o nome=” Suco de l a r a n j a ” p r e c o=” 5 , 0 ” u n i d a d e=”Un” v a l i d a d e=” 31/12/2017 ”> < f a b r i c a n t e f a n t a s i a=” C u t r a l e ” r a z a o S o c i a l=” C u t r a l e LTDA” t e l e f o n e=” ( 1 1 )

8

9999 −1234 ” /> </ p r o d u t o>

9

10 </ p r o d u t o s>

3.6

Aplicando as t´ ecnicas na Web O C´odigo 3.8 apresenta um arquivo JSP que gera o XML de modo dinˆamico. A u´nica

modificac¸˜ao em relac¸˜ao ao C´odigo 3.6 ocorreu na linha 31, onde o parˆametro escritor do m´etodo gravarProdutos() foi especificado. Isto permite que a classe Armazenamento escreva diretamente na sa´ıda Web o XML desejado. Adicionalmente deve-se notar a diretiva na linha 8 que muda o tipo de conte´udo de sa´ıda do JSP para um arquivo XML. As linhas 1 a 7 realizam a importac¸˜ao das classes utilizadas.

C´odigo 3.8 – C´odigo Web para gerac¸˜ao de XML. 1 <%@page i m p o r t=” p r o f r o n n e e s l e y . Armazenamento ”%> 2 <%@page i m p o r t=” p r o f r o n n e e s l e y . F a b r i c a n t e ”%> 3 <%@page i m p o r t=” p r o f r o n n e e s l e y . P r o d u t o ”%> 4 <%@page i m p o r t=” j a v a . u t i l . A r r a y L i s t ”%> 5 <%@page i m p o r t=” j a v a . u t i l . L i s t ”%> 6 <%@page i m p o r t=” j a v a . u t i l . Date ”%> 7 <%@page i m p o r t=” j a v a . u t i l . C a l e n d a r ”%> 8 <%@ page c o n t e n t T y p e=” t e x t / xml ” %>

28

9 10 <% 11

P r o d u t o p r o d u t o 1 = new P r o d u t o ( ” C e l u l a r ABC” , ”Un” , 1 5 0 0 . 0 0 ) ;

12

P r o d u t o p r o d u t o 2 = new P r o d u t o ( ”TV Sony X” , ”Un” , 2 7 0 0 . 0 0 ) ;

13

P r o d u t o p r o d u t o 3 = new P r o d u t o ( ” A b a c a x i ” , ”Un” , 1 . 5 0 , new Date ( ) ) ;

14 15

Calendar cal = Calendar . getInstance () ;

16

c a l . s e t (2017 , 3 , 20) ;

17

P r o d u t o p r o d u t o 4 = new P r o d u t o ( ”Manga” , ”Un” , 1 . 7 0 , c a l . getTime ( ) ) ;

18 19

c a l . s e t (2017 , 11 , 31) ;

20

F a b r i c a n t e f = new F a b r i c a n t e ( ” C u t r a l e LTDA” , ” C u t r a l e ” , ” ( 1 1 ) 9999 −1234 ” ) ;

21

P r o d u t o p r o d u t o 5 = new P r o d u t o ( ” Suco de l a r a n j a ” , ”Un” , 5 . 0 0 , c a l . getTime ( ) , f);

22 23

L i s t <Produto> l i s t a = new A r r a y L i s t <Produto >() ;

24

l i s t a . add ( p r o d u t o 1 ) ;

25

l i s t a . add ( p r o d u t o 2 ) ;

26

l i s t a . add ( p r o d u t o 3 ) ;

27

l i s t a . add ( p r o d u t o 4 ) ;

28

l i s t a . add ( p r o d u t o 5 ) ;

29

Armazenamento a = new Armazenamento ( ) ;

30

a . gravarProdutos ( l i s t a , response . getWriter () ) ;

31 32

%>

A Figura 7 apresenta a sa´ıda do C´odigo 3.8. Pode-se notar que o XML ´e bem formatado e cont´em os valores especificados.

Figura 7 – Sa´ıda do C´odigo 3.8.

3.7

Exerc´ıcios

1. O que ´e uma tag?

2. O que ´e um pacote Java?

29

3. O que ´e uma classe?

4. Diferencie classe e objeto.

5. O que s˜ao atributos? Para que servem?

6. Descreva o encapsulamento de dados realizado atrav´es dos m´etodos getters e setters.

Qual a sua vantagem?

7. Para que serve um construtor?

8. Para que serve o m´etodo toString()?

9. O que fazem os m´etodos getElementsByTagName(), getAttribute(), setAttribute() e appendChild()?

10. Quantos m´etodos tˆeem as classes: Armazenamento, Fabricante e Produto?

11. Para que serve o m´etodo main()?

12. Altere o C´odigo 3.6 e crie uma lista de produtos com dados reais com pelo menos 10 produtos. Gere o arquivo XML destes produtos.

13. Altere o C´odigo 3.8 colocando os mesmos produtos da quest˜ao anterior.

30

4

JAVASCRIPT A W3C (2017a) define um script como um c´odigo que n˜ao precisa de compilac¸˜ao para

rodar. Quando se tratar de Web um script geralmente ´e um c´odigo JavaScript que executa no navegador quando a p´agina ´e baixada ou quando um evento ´e acionado. Estes scripts permitem que as p´aginas sejam mais dinˆamicas.

Quando c´alculos s˜ao efetuados e a p´agina ´e modificada chama-se de DHTML (Dynamic HTML) e quando novos dados s˜ao carregados de um servidor ou enviados a um chama-se de AJAX (Asynchronous JavaScript and XML) (W3C, 2017a).

Para o JavaScript est´a dispon´ıvel a interface Document Object Model (DOM). Esta interface pemite acesso ao conte´udo da p´agina possibilitando modificac¸o˜es. A especificac¸˜ao DOM ´e o n´ucleo do DHTML. Assim com o DOM ´e poss´ıvel criar interfaces mais agrad´aveis chamadas de Rich Internet Application (RIA) (W3C, 2017a).

Existem duas naturezas de scripts, aqueles que s˜ao executados do lado do cliente (client-side) como o JavaScript (W3C, 2017b), neste caso considera-se cliente o navegador, e aqueles executados no lado do servidor (server-side) como o PHP. A Figura 8 apresenta o conceito de script do lado do cliente. Assim pode-se visualizar que o JavaScript, assim como as outras linguagens scripts client-side, ´e executado na m´aquina do cliente. J´a os scripts server-side s˜ao executados no servidor.

Figura 8 – Lado do cliente (client-side).

Existem duas formas de execuc¸˜ao dos scripts Web. Eles podem iniciar no computador

31

do internauta quando a p´agina ´e carregada ou quando um evento ´e acionado. O HTML tem suporte a scripts independentemente da linguagem, isto quer dizer que JavaScript n˜ao ´e a u´nica linguagem script client-side (W3C, 2017b).

4.1

Inclus˜ ao de scripts Os scripts s˜ao inclu´ıdos de modo geral pela tag script ou em um evento espec´ıfico.

Esta tag possui dois atributos b´asicos: src e type. O atributo src especifica o local do script caso ele seja escrito em um arquivo externo, e o atributo type especifica o tipo de conte´udo do script, consequentemente define a linguagem usada para programar (W3C, 2017b).

A tag script pode aparecer v´arias vezes nas tags head ou body. Dos dois atributos b´asicos (src e type), apenas o type ´e obrigat´orio. Se o atributo src n˜ao estiver especificado o navegador ir´a assumir que o script est´a escrito no conte´udo da tag script (W3C, 2017b).

O C´odigo 4.1 apresenta um exemplo de inclus˜ao de um script codificado em um arquivo externo. J´a o C´odigo 4.2 apresenta um exemplo de script codificado na pr´opria tag script.

Ambos os casos funcionam igualmente, no entanto diferem do ponto de vista organizacional.

C´odigo 4.1 – Inclus˜ao de JavaScript com arquivo externo.

1

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” a r q u i v o . j s ”> Este conteu ´ d o s e r ´a i g n o r a d o

2 3

</ s c r i p t>

C´odigo 4.2 – Inclus˜ao de JavaScript codificado na pr´opria tag.

1

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ”>

2

C´ odigo o s c r i p t

3

</ s c r i p t>

Adicionamente os scripts podem ser codificados em eventos determinados no HTML. A Tabela 1 apresenta os poss´ıveis eventos e a descric¸˜ao de quando eles ocorrem, sendo que a maioria deles s˜ao aplic´aveis a quase todas as tags.

32

Tabela 1 – Eventos que podem ser usados no HTML. Evento onload onunload onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onfocus onblur onkeypress onkeydown onkeyup onsubmit onreset onselect onchange

4.2

Acionado quando ...

O navegador termina o carregamento da p´agina. Pode ser utilizado nas tags body e frameset.

O navegador remove a p´agina, ´e o oposto do evento onload e pode ser usado nas mesmas tags.

H´a um clique com o bot˜ao do mouse.

H´a um duplo clique com o bot˜ao do mouse.

O bot˜ao do mouse est´a apertado, ´e o oposto de onmouseup.

O bot˜ao do mouse ´e solto, ´e o oposto de onmousedown.

O cursor passa sobre a tag, se j´a estiver sobre n˜ao ´e acionado novamente.

O cursor move sobre uma tag, se o cursor mover ´e acionado novamente.

O cursor sai de cima da tag, ´e o oposto de onmouseover.

Uma tag recebe foco seja pelo clique ou por tabulac¸˜ao (TAB). Pode ser usado nas tags: a, area, label, input, select, textarea e button.

Uma tag perde o foco, ´e o oposto do evento onfocus.

Uma tecla ´e pressionada e solta sobre uma tag.

Uma tecla ´e pressionada.

Uma tecla ´e solta, ´e o complemento da ac¸˜ao do evento onkeydown.

Ocorre o envio de um formul´ario, aplic´avel somente `a tag form.

Ocorre ao limpar um formul´ario, aplic´avel somente a formul´arios (form).

O usu´ario seleciona parte de um texto em um campo de texto. Aplic´avel `as tags input e textarea.

Um campo de entrada perde o foco se seu valor tiver sido modificado.

Aplic´avel somente `as tags input, select e textarea.

Conhecendo o JavaScript Uma das primeiras coisas ao conhecer uma segunda linguagem de programac¸˜ao ´e des-

cobrir suas palavras reservadas. A Tabela 2 apresenta as palavras-chave do JavaScript (FUNDATION, 2017b).

Tabela 2 – Palavras chave da linguagem JavaScript. abstract byte double catch delete for new try yield

float int native class do function return typeof

short throws volatile const else if super var

boolean char final continue export import switch void

goto long break debugger extends in this while

synchronized transient case default finally instanceof throw with

33

4.3

Vari´ aveis, constantes e o comando de atribui¸c˜ ao A declarac¸˜ao de vari´aveis e constantes s˜ao feitas com duas palavras-chave diferentes:

var e const, respectivamente. Vari´aveis e constantes podem ser declaradas com dois escopos: local ou global. Vari´aveis globais existem em todo o c´odigo e durante toda a execuc¸˜ao da p´agina, j´a as vari´aveis locais s˜ao declaradas dentro de func¸o˜es, assim quando a respectiva func¸˜ao termina, a vari´avel deixa de existir, liberando mem´oria.

O C´odigo 4.3 apresenta um arquivo chamado declaracao variaveis.js que foi codificado em JavaScript e declara trˆes vari´aveis. O C´odigo 4.4 apresenta um exemplo de HTML que inclui o C´odigo 4.3. Nota-se que ele n˜ao possui nenhum conte´udo em seu corpo (body ), portanto nada aparecer´a na p´agina.

Como o C´odigo 4.3 utiliza uma vari´avel global do navegador chamada console para exibir o n´umero, nome e sobrenome. O m´etodo log() da vari´avel exibe mensagens no console do navegador. Geralmente a tecla de acesso do console do navegador ´e a F12. Nas linhas 1 e 2 do C´odigo 4.3 utilizou-se o operador de atribuic¸˜ao (=) para colocar valor em cada uma das vari´aveis.

C´odigo 4.3 – Declarac¸˜ao de trˆes vari´aveis.

1

v a r numero = 1 0 ;

2

v a r nome = ” R o n n e e s l e y ” , sobrenome = ” Moura T e l e s ” ;

3 4 5

c o n s o l e . l o g ( numero ) ; c o n s o l e . l o g ( nome , sobrenome ) ;

C´odigo 4.4 – Arquivo HTML para inclus˜ao do c´odigo JavaScript.

1

<!DOCTYPE html>

2

<html>

3 4

<head> < t i t l e >D e c l a r a& c c e d i l ;& a t i l d e ; o de v a r i&a a c u t e ; v e i s</ t i t l e >

5 6

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” d e c l a r a c a o v a r i a v e i s . j s ”>

7

</ s c r i p t>

8

</ head>

9

34

<body><body>

10 11

</ html>

O C´odigo 4.5 apresenta a declarac¸˜ao de constantes, nota-se o uso da palavra-chave const. Constantes, assim como na Matem´atica, s˜ao valores que n˜ao se modificam ao longo do script. Uma vez atribu´ıdo um valor a uma constante, ele n˜ao poder´a mais mudar. Para test´a-lo deve-se criar um arquivo HTML como o apresentado no C´odigo 4.4 e verificar o log do navegador.

C´odigo 4.5 – Declarac¸˜ao de trˆes constantes.

1

const pi = 3.14;

2

const salarioMinimo = 880.00 , e = 2.72;

3 4 5

console . log ( pi ) ; console . log ( salarioMinimo , e ) ;

4.4

Fun¸c˜ oes, operadores aritm´ eticos, retorno e DOM O C´odigo 4.6 apresenta a declarac¸˜ao de trˆes func¸˜oes: calcularICMS(), calcularPrecoCo-

mImposto() e calcular() relacionadas ao c´alculo do Imposto sobre Circulac¸˜ao de Mercadorias e Servic¸os (ICMS). Nota-se que as func¸o˜es s˜ao declaradas com a palavra-chave function, seguidas pelo seu nome e os parˆametros necess´arios para o c´alculo.

Al´em disso, uma vez declarada a func¸˜ao poder´a ser usada em v´arios outros lugares como no caso da func¸˜ao calcularICMS() que ´e usada nas linhas 6 e 13, ou seja, houve um reaproveitamento de c´odigo. ´ na func¸˜ao calcular() onde grande parte da funcionalidade acontece. Na linha 10 o E valor do campo que cont´em o prec¸o ´e obtido pelo id do HTML atrav´es da func¸˜ao getElementById() presente na vari´avel global document. O valor ´e obtido pelo atributo value e convertido para n´umero atrav´es da func¸˜ao parseFloat(). Deve-se notar que este tipo de convers˜ao utiliza como separador decimal o sinal de ponto (.), assim os valores 200,50 e 148,35 devem ser digitados como 200.50 e 148.35.

Nas linhas 13 e 14 acontece o inverso, ou seja, um valor calculado respectivamente pelas func¸˜oes calcularICMS() e calcularPrecoComImposto() com al´ıquotas de 18% s˜ao atribu´ıdos a campos cujos ids s˜ao respectivamente icms e total atrav´es do atributo value.

35

C´odigo 4.6 – Declarac¸˜ao de trˆes func¸˜oes relacionadas ao ICMS. 1

f u n c t i o n calcularICMS ( preco , a l i q u o t a ) { return preco ∗ a l i q u o t a ;

2 3

}

4 5

f u n c t i o n calcularPrecoComImposto ( preco , a l i c o t a ) { r e t u r n preco + calcularICMS ( preco , a l i c o t a ) ;

6 7

}

8 9

function calcular () { v a r p r e c o = p a r s e F l o a t ( document . g e t E l e m e n t B y I d ( ” p r e c o ” ) . v a l u e ) ;

10 11 12

// A l i q u o t a de ICMS f i c t´ı c i a de 18%

13

document . g e t E l e m e n t B y I d ( ” i c m s ” ) . v a l u e = c a l c u l a r I C M S ( p r e c o , 0.18) ; document . g e t E l e m e n t B y I d ( ” t o t a l ” ) . v a l u e = c a l c u l a r P r e c o C o m I m p o s t o

14

( preco , 0.18) ; 15

}

Em relac¸˜ao ao C´odigo 4.7 deve-se notar apenas a captura do evento onclick na linha 15 e os ids atribu´ıdos aos campos nas linhas 12, 19 e 23.

C´odigo 4.7 – HTML para c´alculo do ICMS. 1

<!DOCTYPE html>

2

<html>

3 4

<head> < t i t l e >ICMS</ t i t l e >

5 6

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” c a l c u l a r i c m s . j s ”>

7

</ s c r i p t>

8

</ head>

9 10 11 12

<body> P r e c¸ o do p r o d u t o comprado :<b r /> <i n p u t t y p e=” t e x t ” i d=” p r e c o ”

/>

36

<b r /><b r />

13 14 15

<i n p u t t y p e=” b u t t o n ” v a l u e=” C a l c u l a r ” o n c l i c k=” c a l c u l a r ( ) ” />

16

<b r /><b r />

17 18

ICMS :<b r />

19

<i n p u t t y p e=” t e x t ” i d=” i c m s ”

20

<b r /><b r />

/>

21

T o t a l :<b r />

22

<i n p u t t y p e=” t e x t ” i d=” t o t a l ”

23

<body>

24 25

/>

</ html>

O JavaScript possui v´arios operadores aritm´eticos como: soma (+), subtrac¸˜ao (-), multiplicac¸˜ao (*) e divis˜ao (/) (FUNDATION, 2017a). Pode-se observar o uso destes operadores nas linhas 2 e 6 do C´odigo 4.6 que foram utilizados, respectivamente, para calcular o valor da al´ıquota e acumular o valor do ICMS ao prec¸o do produto. Al´em destes operadores aritm´eticos cl´assicos existem os operadores de: m´odulo (%), incremento (++) e decremento (–).

No C´odigo 4.6 utilizou-se a palavra-chave return nas linhas 2 e 6 para retornar um valor em uma func¸˜ao. Existem m´etodos que retornam valor e outros que n˜ao retornam como o m´etodo calcular(). Em programac¸˜ao chama-se os que retornam valor de func¸˜ao e os que n˜ao retornam de procedimento.

Por fim, no C´odigo 4.6 utilizou-se comandos DOM nas linhas 10, 13 e 14 atrav´es da vari´avel global document. Este objeto permite obter dados da p´agina ou modific´a-los. A Figura 9 apresenta o resultado final da p´agina de c´alculo do ICMS.

37

Figura 9 – Resultado da p´agina de c´alculo do ICMS

4.5

Controle de fluxo O controle de fluxo pode ser realizado de duas formas: pela escolha do c´odigo que ser´a

executado ou pela sua repetic¸˜ao. Quando se faz uma escolha do que ´e executado tem-se uma estrutura condicional, j´a quando um c´odigo ´e repetido tem-se uma estrutura de repetic¸˜ao.

4.5.1 Estrutura condicional O C´odigo 4.8 apresenta uma func¸˜ao que verifica se um n´umero ´e par ou impar. Nota-se na linha 4 a presenc¸a da palavra-chave if, esta ´e respons´avel pela decis˜ao. Caso o resultado da express˜ao l´ogica seja verdadeira o bloco de c´odigo da linha 5 ser´a executado, caso contr´ario o bloco de c´odigo da linha 7 ´e executado, em virtude da palavra-chave else na linha 6.

C´odigo 4.8 – Verifica se um n´umero ´e par ou impar.

1

function verificarParImpar () { v a r v a l o r = p a r s e F l o a t ( document . g e t E l e m e n t B y I d ( ” numero ” ) . v a l u e ) ;

2 3

i f ( v a l o r % 2 == 0 ) {

4

document . g e t E l e m e n t B y I d ( ” r e s u l t a d o ” ) . innerHTML = ” Par ” ;

5

} else {

6

document . g e t E l e m e n t B y I d ( ” r e s u l t a d o ” ) . innerHTML = ” Impar ” ;

7

}

8 9

}

38

Em relac¸˜ao ao C´odigo 4.9 deve-se notar a captura do evento onclick na linha 15 e a chamada da func¸˜ao verificarParImpar().

C´odigo 4.9 – Formul´ario HTML para verificac¸˜ao se um n´umero ´e par ou impar.

1

<!DOCTYPE html>

2

<html> <head>

3

< t i t l e >Condi& c c e d i l ;& a t i l d e ; o</ t i t l e >

4 5 6

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” c o n d i c a o . j s ”>

7

</ s c r i p t> </ head>

8 9

<body>

10

D i g i t e um n&u a c u t e ; mero

11

<i n p u t t y p e=” t e x t ” i d=” numero ” />

12 13

<i n p u t t y p e=” b u t t o n ” v a l u e=” C a l c u l a r ”

14

o n c l i c k=” v e r i f i c a r P a r I m p a r ( ) ” />

15 16

<d i v i d=” r e s u l t a d o ”></ d i v>

17

<body>

18 19

</ html>

Em algumas situac¸o˜es ´e necess´ario o uso de uma estrutura condicional composta aninhada como apresentado no C´odigo 4.10. Na func¸˜ao calcularAliquotaIR() ´e necess´ario verificar diferentes faixas salariais para decidir qual a aliquota a ser aplicada.

C´odigo 4.10 – C´alculo do Imposto de Renda de Pessoas F´ısicas (IRPF).

1 2 3 4 5 6 7

function calcularAliquotaIR ( salario ){ i f ( s a l a r i o <= 1 9 0 3 . 9 8 ) { return 0; } e l s e i f ( s a l a r i o <= 2 8 2 6 . 6 5 ) { return 7.5; } e l s e i f ( s a l a r i o <= 3 7 5 1 . 0 5 ) { return 15;

39

} e l s e i f ( s a l a r i o <= 4 6 6 4 6 8 ) {

8

return 22.5;

9

} else {

10

return 27.5;

11

}

12 13

}

14 15

function calcularIR ( salario ){

16

var aliquota = calcularAliquotaIR ( s a l a r i o ) ;

17

return s a l a r i o ∗ a l i q u o t a / 100;

18

}

19 20

function calcularSalarioLiquido ( salario ){ var imposto = c a l c u l a r I R ( s a l a r i o ) ;

21 22

r e t u r n s a l a r i o − imposto ;

23 24

}

25 26

function calcular () { v a r s a l a r i o = p a r s e F l o a t ( document . g e t E l e m e n t B y I d ( ” s a l a r i o ” ) .

27

value ) ; 28

var imposto = c a l c u l a r I R ( s a l a r i o ) ;

29

var s a l a r i o L i q u i d o = c a l c u l a r S a l a r i o L i q u i d o ( s a l a r i o ) ;

30 31

document . w r i t e ( ” S a l&a a c u t e ; r i o : ” + s a l a r i o + ”<b r />” ) ;

32

document . w r i t e ( ” I m p o s t o : ” + i m p o s t o + ”<b r />” ) ;

33

document . w r i t e ( ” S a l&a a c u t e ; r i o l &i a c u t e ; q u i d o : ” + s a l a r i o L i q u i d o + ”<b r />” ) ;

34

}

O C´odigo 4.11 apresenta a p´agina para c´alculo do IRPF, nota-se novamente a captura do evento onclick na linha 14. Quando acionado o bot˜ao calcular a p´agina ´e reescrita atrav´es da func¸˜ao write() da vari´avel global document. A Figura 10 apresenta as p´aginas de c´alculo resultantes do c´odigo.

40

C´odigo 4.11 – Formul´ario para o c´alculo do IRPF. 1

<!DOCTYPE html>

2

<html> <head>

3

< t i t l e >D e c l a r a& c c e d i l ;& a t i l d e ; o de c o n s t a n t e s</ t i t l e >

4 5 6

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” i r . j s ”>

7

</ s c r i p t> </ head>

8 9

<body>

10

D i g i t e o s a l&a a c u t e ; r i o

11

<i n p u t t y p e=” t e x t ” i d=” s a l a r i o ” />

12 13

<i n p u t t y p e=” b u t t o n ” v a l u e=” C a l c u l a r ” o n c l i c k=” c a l c u l a r ( )

14

” /> <body>

15 16

</ html>

Figura 10 – C´alculo do IRPF. (b) Resultado da p´agina de c´alculo do IRPF (a) Formul´ario da p´agina de c´alculo do IRPF

4.5.2 Estrutura de repetic¸˜ao Estruturas de repetic¸˜ao s˜ao aquelas que permitem repetir um conjunto de comandos, entre elas est˜ao as palavras-chave for, while e do ... while.

4.5.2.1 Estrutura para (for) O C´odigo 4.12 apresenta uma func¸˜ao JavaScript que escreve os n´umeros pares, separandoos por v´ıgula, entre um in´ıcio e fim determinados. Na linha 2 verifica-se o n´umero de in´ıcio ´e par, caso n˜ao seja, move-se para o pr´oximo n´umero, uma vez que o pr´oximo ser´a par neste 41

caso. Entre as linhas 4 e 8, tem-se a estrutura de repetic¸˜ao, declarada pela palavra-chave for, que inicia do primeiro par at´e o u´ltimo n´umero par delimitado pelo parˆametro fim, o incremento acontece de duas em duas unidades visto que se trata de n´umeros pares. Toda estrutura de repetic¸˜ao for determina um in´ıcio, condic¸˜ao de t´ermino e um incremento.

C´odigo 4.12 – Func¸˜ao para escrever n´umeros pares.

1

f u n c t i o n escreverNumerosPares ( i n i c i o , fim ) { i f ( i n i c i o % 2 == 1 ) i n i c i o ++;

2 3

f o r ( v a r i = i n i c i o ; i <= f i m ; i += 2 ) {

4

i f ( i != i n i c i o ) document . w r i t e ( ” , ” ) ;

5 6

document . w r i t e ( i ) ;

7

}

8 9

}

O C´odigo 4.13 apresenta a p´agina HTML que usa a func¸˜ao escreverNumerosPares().

Deve-se notar as linhas 6 e 7 que incluem o arquivo JavaScript com a func¸˜ao e as linhas 11 a 13 e 15 a 17 que utilizam a func¸˜ao duas vezes.

C´odigo 4.13 – P´agina HTML que usa a func¸˜ao JavaScript.

1

<!DOCTYPE html>

2

<html>

3 4

<head> < t i t l e >E s t r u t u r a de r e p e t i& c c e d i l ;& a t i l d e ; o</ t i t l e >

5 6

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” r e p e t i c a o f o r . j s ”>

7

</ s c r i p t>

8

</ head>

9 10 11 12

<body> < s c r i p t t y p e=” t e x t / j a v a s c r i p t ”> escreverNumerosPares (10 , 30) ;

13

</ s c r i p t>

14

<b r />

15

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ”>

42

escreverNumerosPares (57 , 76) ;

16

</ s c r i p t>

17

<body>

18 19

</ html>

A Figura 11 apresenta o resultado da p´agina HTML. Deve-se notar que estes foram impressos em duas linhas devido a tag br utilizada na linha 14 do C´odigo 4.13. Al´em disso, pode-se visualizar que na segunda impress˜ao o n´umero de in´ıcio foi 58, uma vez que o argumento 57 n˜ao ´e um n´umero par, informado na linha 16.

Figura 11 – Resultado da p´agina HTML que escreve os n´umeros pares.

4.5.2.2 Estrutura fac¸a-enquanto (do-while) O C´odigo 4.14 apresenta um script que sorteia um n´umero de 0 a 10 e uma func¸˜ao que exibe mensagens para que o usu´ario tente adivinhar at´e acertar.

Na linha 1 ocorre a definc¸˜ao da vari´avel numeroSorteado est´a ´e uma vari´avel global, pois n˜ao est´a dentro de uma func¸˜ao. Para o sorteio utiliza-se a func¸˜ao Math.random() esta func¸˜ao sorteia um n´umero de 0 a 0,999...9 (quase 1). Este valor ´e multiplicado por 11 para que o intervalo se torne de 0 a quase 11. Em seguida este intervalo ´e arredondado para baixo com a func¸˜ao Math.floor(), isto resulta no intervalo de 0 a 10.

A func¸˜ao adivinhar() declara duas vari´aveis locais numero e mensagem, nas linhas 4 e 5. Nas linhas 7 a 12 utiliza-se o lac¸o do-while, esta estrutura garante a execuc¸˜ao de pelo menos uma vez o conjunto de comandos. Esta ´e uma estrutura adequada porque o internauta deve tentar no m´ınimo uma vez acertar o n´umero sorteado.

Na linha 8 acontece a pergunta para o internauta de qual seu palpite atrav´es da func¸˜ao prompt(). Nota-se que a vari´avel mensagem ´e utilizada para exibir se o internauta acertou ou n˜ao o n´umero. Nesta mesma linha utiliza-se a func¸˜ao parseInt() para converter o valor digitado para um n´umero inteiro.

Somente a partir desta convers˜ao, o palpite do internauta ´e verificado na linha 10 e caso n˜ao seja o n´umero sorteado, atribui a mensagem de erro na linha 11. Finalmente, se o usu´ario acertar, na linha 14 exibe uma mensagem de comemorac¸˜ao.

43

C´odigo 4.14 – Func¸˜ao para sortear n´umeros.

1

v a r n u m e r o S o r t e a d o = Math . f l o o r ( Math . random ( ) ∗ 1 1 ) ;

2 3

function adivinhar () {

4

v a r numero ;

5

v a r mensagem = ” ” ;

6

do {

7

numero = p a r s e I n t ( prompt ( mensagem + ” Tente a d i v i n h a r o n´ u mero

8

de 0 a 10 s o r t e a d o : ” ) ) ; 9

i f ( numero != n u m e r o S o r t e a d o )

10

mensagem = ”Que pena v o cˆe e r r o u ! ” ;

11

} w h i l e ( numero != n u m e r o S o r t e a d o ) ;

12 13

a l e r t ( ” P a r a b´e n s ! Vocˆe a c e r t o u , o n´ u mero e r a ” + n u m e r o S o r t e a d o ) ;

14 15

}

O C´odigo 4.15 apresenta o HTML que inclui o arquivo JavaScript na linha 8 a 9 e nas linhas 13 a 15 a func¸˜ao adivinhar() ´e chamada.

C´odigo 4.15 – P´agina HTML que usa a func¸˜ao JavaScript de sorteio de n´umeros.

1

<!DOCTYPE html>

2

<html>

3 4

<head> <meta c h a r s e t=” ISO −8859−1” />

5 6

< t i t l e >E s t r u t u r a de r e p e t i& c c e d i l ;& a t i l d e ; o</ t i t l e >

7 8

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” r e p e t i c a o d o w h i l e . j s ”>

9

</ s c r i p t>

10

</ head>

11 12 13

<body> < s c r i p t t y p e=” t e x t / j a v a s c r i p t ”>

44

adivinhar () ;

14

</ s c r i p t>

15

<body>

16 17

</ html>

A Figura 12 apresenta o resultado da interface gr´afica da p´agina. A Figura 12a mostra a caixa de di´alogo exibida pelo comando prompt() que solicita o palpite do internauta. Ap´os acertar o n´umero, a func¸˜ao alert() exibe a caixa de di´alogo apresentada na Figura 12b.

Figura 12 – Resultado da p´agina HTML que sorteia um n´umero (a) Caixa de entrada do palpite. (b) Mensagem exibida ao acertar o n´ umero.

4.5.2.3 Estrutura enquanto (while) O C´odigo 4.16 apresenta a func¸˜ao escreverLetras() esta exibe os caracteres da tabela de codificac¸˜ao de caracteres. Na linha 2 definiu-se uma vari´avel chamada qtdeRepeticoesColunas que controla a quantidade de pares c´odigo/valor de colunas que a tabela ter´a atrav´es do lac¸o das linhas 6 a 8.

Na linha 11 define-se uma vari´avel chamada i que comec¸a com o valor zero. O lac¸o while se repete enquanto i for menor ou igual a 255, nas linhas 12 a 21. Nas linhas 13 e 14 e 19 e 20 h´a o controle de quebra de linhas conforme a vari´avel qtdeRepeticoesColunas.

Na linha 16 ocorre a impress˜ao do c´odigo e da representac¸˜ao do caractere daquele c´odigo atrav´es da func¸˜ao fromCharCode() do objeto global String.

C´odigo 4.16 – Func¸˜ao escrever a tabela de codificac¸˜ao de caracteres.

1

function escreverLetras () {

2

var qtdeRepeticoesColunas = 8;

3

document . w r i t e ( ” T a b e l a de ISO −8859−1” ) ;

4

document . w r i t e ( ”< t a b l e b o r d e r =’1’> ” ) ;

5

document . w r i t e ( ”<t r >” ) ;

45

f o r ( v a r i = 0 ; i < q t d e R e p e t i c o e s C o l u n a s ; i ++){

6

document . w r i t e ( ”<td>C&o a c u t e ; d i g o </td><td>V a l o r </td>” ) ;

7 8

}

9

document . w r i t e ( ”</ t r >” ) ;

10 11

var i = 0;

12

w h i l e ( i <= 2 5 5 ) { i f ( i % q t d e R e p e t i c o e s C o l u n a s == 0 )

13

document . w r i t e ( ”<t r >” ) ;

14 15

document . w r i t e ( ”<td><b>” + i + ”</b></td><td>” + S t r i n g .

16

fromCharCode ( i ) + ”</td>” ) ; 17 18

i ++;

19

i f ( i % q t d e R e p e t i c o e s C o l u n a s == 0 ) document . w r i t e ( ”</ t r >” ) ;

20

}

21 22

document . w r i t e ( ”<t a b l e >” ) ;

23 24

}

O C´odigo 4.17 apresenta o HTML que inclui o arquivo externo nas linhas 8 e 9 e posteriormente utiliza a func¸˜ao escreverLetras() na linha 14.

C´odigo 4.17 – P´agina HTML exibe a tabela de codificac¸˜ao.

1

<!DOCTYPE html>

2

<html>

3 4

<head> <meta c h a r s e t=” ISO −8859−1” />

5 6

< t i t l e >E s t r u t u r a de r e p e t i& c c e d i l ;& a t i l d e ; o</ t i t l e >

7 8

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” r e p e t i c a o w h i l e . j s ”>

9

</ s c r i p t>

10

</ head>

46

11

<body>

12

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ”>

13

escreverLetras () ;

14

</ s c r i p t>

15

<body>

16 17

</ html>

A Figura 13 apresenta o resultado do func¸˜ao. Nota-se que alguns caracteres que n˜ao possuem representac¸o˜es gr´aficas aparecem em forma de retˆangulos.

Figura 13 – Tabela de codificac¸˜ao de caracteres impressa pela func¸˜ao JavaScript.

47

4.6

Exerc´ıcios

1. O que ´e DHTML? 2. AJAX ´e uma linguagem de programac¸˜ao? Justifique.

3. O que ´e RIA? 4. Diferencie client-side de server-side.

5. Quais as trˆes formas de inclus˜ao de scripts? Descreva a diferenc¸a entre elas.

6. Cite pelo menos trˆes eventos do JavaScript.

7. Cite pelo menos duas linguagens que podem ser usadas na tag script.

8. Descreva sucintamente a funcionalidade para cada uma das palavras-chave apresentadas na Tabela 2.

9. Busque e apresente a tabela completa de ICMS de 2017.

10. O que faz a func¸˜ao parseInt()?

11. O que faz os operadores m´odulo, incremento e decremento?

12. Descreva pelo menos trˆes func˜oes do objeto document. Busque informac¸o˜es em hhttps: //developer.mozilla.org/en-US/docs/Web/API/Documenti.

13. Descreva pelo menos trˆes func¸˜oes do objeto console. Busque informac¸˜oes em: hhttps: //developer.mozilla.org/pt-BR/docs/Web/API/Consolei.

14. Qual a diferenc¸a entre func¸˜ao e procedimento?

15. Para que servem os c´odigos no HTML &aacute;, &ccedil;, &atilde;? Como s˜ao chamados?

16. Qual a diferenc¸a entre estrutura condicional simples e composta?

17. O que faz a func¸˜ao Math.ceil()?

18. Cite pelo menos dois objetos globais al´em de Math. Descreva suas func¸˜oes. Pesquise em hhttps://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global Objectsi.

48

19. O que faz a func¸˜ao confirm()?

20. Mesmo sabendo que todas as estruturas de repetic¸˜ao s˜ao equivalentes, pois resolvem os mesmos problemas. Qual o momento mais apropriado de cada uma delas (for, while e do-while)?

49

5

JQUERY A jQuery ´e uma biblioteca JavaScript compat´ıvel com a maioria dos navegadores Web

que permite manipular todo o documento HTML, capturar eventos, realizar animac¸˜oes e func¸˜oes AJAX de modo mais simples (THE JQUERY FOUNDATION, 2017).

Essencialmente a jQuery disponibiliza um objeto global chamado $ (dolar) e apartir deste objeto s˜ao realizadas as chamadas de func¸˜ao disponibilizadas pela biblioteca. O primeiro passo para a utilizac¸˜ao da jQuery ´e baixar o arquivo .js dispon´ıvel em hhttps://jquery.comi.

Este arquivo deve estar presente e ser inclu´ıdo atrav´es da tag script para que assim seja utilizado. O C´odigo 5.1 apresenta um exemplo de inclus˜ao da biblioteca. A partir desta inclus˜ao ´e poss´ıvel utilizar o objeto $ que provˆe as facilidades da jQuery.

C´odigo 5.1 – Inclus˜ao da biblioteca jquery.js.

1

<!DOCTYPE html>

2

<html> <head>

3

< t i t l e > I n c l u s& a t i l d e ; o j Q u e r y</ t i t l e >

4 5

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” j q u e r y . j s ”></ s c r i p t>

6

</ head>

7 8

<body></ body>

9 10

</ html>

5.1

Obtendo elementos e alterando conte´ udos de tags O C´odigo 5.2 apresenta a func¸˜ao validar(). Esta func¸˜ao verifica se um campo cuja o id ´e

email foi preenchido na linha 2. Para isto utiliza a func¸˜ao val() a o objeto global $. Esta func¸˜ao retorna a propriedade value de um input. A func¸˜ao trim() utilizada logo em seguida remove os poss´ıveis espac¸os `a direita e `a esquerda do que o usu´ario escreveu, por exemplo “ Ana ” se tornaria “Ana”. Isto ´e u´til porque se o usu´ario digitar “

” ou “ ”, independentemente da

quantidade de espac¸os que ele digitar, o resultado sempre ser´a “”. Deste modo, se o resultado for “” que ´e a comparac¸˜ao realizada na linha 2, significa que ele n˜ao digitou nada no campo ou que ele digitou espac¸os.

50

Ao analisar a linha 2 pode-se perceber que a func¸˜ao $(”#email”) ´e equivalente a document.getElementById(”email”). A jQuery possui v´arios seletores sendo que o s´ımbolo # indica que deseja-se selecionar pelo id. Outro seletor muito utilizado ´e o . (ponto), este indica que a selec¸˜ao ser´a realizada pelo atributo class.

Al´em disto, ´e poss´ıvel notar a func¸˜ao html() na linha 3 do C´odigo 5.2. Esta func¸˜ao equivale a alterac¸˜ao da propriedade innerHTML de uma tag qualquer.

C´odigo 5.2 – JavaScript de validac¸˜ao de um formul´ario.

1

function validar () { i f ( $ ( ”#e m a i l ” ) . v a l ( ) . t r i m ( ) == ” ” ) {

2 3

$ ( ”#v a l i d a c a o e m a i l ” ) . html ( ” P r e e n c h a o campo e−m a i l ! ” ) ;

4

return false ; }

5 6

return true ;

7 8

}

O C´odigo 5.3 apresenta o c´odigo HTML que utiliza a func¸˜ao validar() na linha 11 atrav´es da captura do vento onsubmit. Nota-se que a func¸˜ao validar retorna verdadeiro se o campo e-mail foi preenchido e falso caso contr´ario, assim se o resultado do evento onsubmit for falso o envio do formul´ario ´e abortado.

Adicionalmente deve-se notar as linhas 6 e 7 que respectivamente incluem o jQuery e o arquivo com a func¸˜ao validar(). Neste caso a n˜ao inclus˜ao do jQuery resulta em mal funcionamento da func¸˜ao validar(), uma vez que ela utiliza o objeto global $ disponibilizado pela jQuery.

C´odigo 5.3 – Formul´ario de cadastro de newsletter.

1

<!DOCTYPE html>

2

<html>

3 4

<head> < t i t l e >V a l i d a& c c e d i l ;& a t i l d e ; o</ t i t l e >

5 6

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” j q u e r y . j s ”></ s c r i p t>

7

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” v a l i d a c a o . j s ”></ s c r i p t>

8

</ head>

51

9

<body>

10

<form a c t i o n=” i n s e r i r . j s p ” o n s u b m i t=” r e t u r n v a l i d a r ( ) ; ”>

11

D i g i t e s e u e−m a i l :

12 13

<i n p u t t y p e=” t e x t ” i d=” e m a i l ” />

14

<d i v i d=” v a l i d a c a o e m a i l ”></ d i v>

15 16

<b r />

17

<i n p u t t y p e=” s u b m i t ” v a l u e=” S a l v a r ” /> </ form>

18

</ body>

19 20

</ html>

A Figura 14 apresenta o formul´ario ao ser aberto (Figura 15a) e ap´os a tentativa de submiss˜ao sem preenchimento do campo e-mail (Figura 15b). Nota-se a presenc¸a da mensagem ´ importante observar que ao preencher o e-mail e clicar no bot˜ao “Preencha o campo e-mail!”. E salvar os dados ser˜ao enviados para o arquivo inserir.jsp especificado no atributo action do C´odigo 5.3. Se este arquivo n˜ao existir o resultado ser´a uma p´agina n˜ao encontrada.

Figura 14 – P´agina HTML de formul´ario de newsletter. (b) Formul´ario validado. (a) Formul´ario em branco.

5.2

Capturando eventos O C´odigo 5.4 apresenta a captura de eventos com a jQuery. Na linha 1 utilizou-se

o objeto global $ para obter um objeto jQuery do objeto global document j´a estudado anteriormente. A func¸˜ao ready() recebeu a func¸˜ao que ser´a chamada assim que a p´agina ser´a carregada. Esta func¸˜ao que foi colocada n˜ao possui nome por isso ´e chamada de func¸˜ao anˆonima. A captura de eventos com jQuery e algumas outras caracter´ısticas s˜ao baseadas em func¸˜oes anˆonimas. A atribuic¸˜ao de uma func¸˜ao anˆonima ao evento ready() ´e equivalente ao evento HTML onload.

52

Neste c´odigo dois eventos foram capturados um relacionado ao bot˜ao com id botao, nas linhas 2 a 5, e outro evento do pr´oprio documento, nas linhas 7 a 9. Nota-se que ap´os obter o objeto jQuery de uma tag utiliza-se a func¸˜ao click() para modificar o evento onclick e mousemove() para o evento onmousemove.

Todos os eventos HTML podem ser obtidos desta forma. Conforme a Tabela 1 com os eventos HTML, as func¸˜oes equivalentes da jQuery s˜ao: load(), unload(), click(), dblclick(), mousedown(), mouseup(), mouseover(), mousemove(), mouseout(), focus(), blur(), keypress(), keydown(), keyup(), submit(), select() e change().

Nas linhas 7 a 9 tem-se a captura do evento mousemove() para o objeto global document. Nota-se que a func¸˜ao anˆonima possui um parˆametro chamado event enquanto que a func¸˜ao anˆonima da captura do clique n˜ao possuia parˆametros na linha 2. Este parˆametro permite obter a posic¸˜ao x e y do cursor atrav´es dos atributos pageX e pageY. C´odigo 5.4 – JavaScript de captura de eventos.

1

$ ( document ) . r e a d y ( f u n c t i o n ( ) { $ ( ”#b o t a o ” ) . c l i c k ( f u n c t i o n ( ) {

2

a l e r t ( ” Ol´a c a r o i n t e r n a u t a \ n S e j a bem v i n d o ao s i t e . ” +

3

”\ nAproveite o conteu ´ d o de q u a l i d a d e que temos a o f e r e c e r

4

. ”) ; }) ;

5 6

$ ( document ) . mousemove ( f u n c t i o n ( e v e n t ) {

7

$ ( ”#c u r s o r ” ) . html ( ”X : ” + e v e n t . pageX + ” px Y : ” + e v e n t .

8

pageY + ” px ” ) ; }) ;

9 10

}) ;

O C´odigo 5.5 apresenta a p´agina HTML de onde os eventos s˜ao capturados. Pode-se notar que n˜ao h´a itens importantes a serem observados, pois a captura dos eventos ´e feita totalmente no arquivo JavaScript.

C´odigo 5.5 – HTML onde os eventos s˜ao capturados.

1

<!DOCTYPE html>

2

<html>

3

<head>

53

<meta c h a r s e t=” ISO −8859−1” />

4 5

< t i t l e >E v e n t o s</ t i t l e >

6 7 8

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” j q u e r y . j s ”></ s c r i p t>

9

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” c a p t u r a e v e n t o s . j s ”></ s c r i p t> </ head>

10 11

<body>

12

<i n p u t t y p e=” b u t t o n ” i d=” b o t a o ” v a l u e=” E x i b i r mensagem ” />

13 14

<d i v i d=” c u r s o r ”></ d i v>

15

</ body>

16 17

</ html>

A Figura 15 apresenta a p´agina Web resultante (Figura 15a) mostrando as coordenadas do cursor e a caixa de di´alogo com informac¸o˜es para o internauta (Figura 15b).

Figura 15 – P´agina com eventos capturados via jQuery. (b) Caixa de alerta acionada atrav´es do clique do bot˜ao.

(a) P´agina indicando a coordenada (x, y) do cursor.

5.3

Efeitos gr´ aficos Uma das funcionalidades mais marcantes na jQuery s˜ao as func¸˜oes relacionadas a efeitos

gr´aficos, sendo os mais utilizados a func¸˜ao fadeIn(), fadeOut(), fadeToggle(), slideDown(), slideUp() e slideToggle().

O C´odigo 5.6 apresenta uma JavaScript utilizando as func¸o˜es fadeToggle(), na linha 7, e slideToggle(), na linha 15. Nas linhas 2 e 3 definiu-se dois vetores para armazenarem os 54

textos dos bot˜oes nas diferentes situac¸˜oes. Na linha 4 definiu-se duas vari´aveis para armazenar a situac¸˜ao de cada bot˜ao, considerando que inicialmente os mascotes das linguagens Java e PHP estejam exib´ıdos conforme a Figura 16.

Nas linhas 9 e 17 atualiza-se a situac¸˜ao de cada um dos bot˜oes, calcula-se o m´odulo de 2 pois cada bot˜ao possui apenas duas situac¸˜oes poss´ıveis: permitir esconder o mascote ou permite mostr´a-lo. Nas linhas 11 e 19 utiliza-se estas vari´aveis para colocar o texto correto nos bot˜oes. Nota-se tamb´em a captura dos eventos de clique conforme a sec¸˜ao anterior.

C´odigo 5.6 – JavaScript criac¸˜ao de efeitos gr´aficos com tags.

1

$ ( document ) . r e a d y ( f u n c t i o n ( ) {

2

v a r t e x t o s J a v a = [ ” E s c o n d e r Duke ” , ” M o s t r a r Duke ” ] ;

3

v a r textosPHP = [ ” E s c o n h d e r PHP” , ” M o s t r a r PHP” ] ;

4

v a r p o s i c a o J a v a = 0 , posicaoPHP = 0 ;

5

$ ( ”#b o t a o J a v a ” ) . c l i c k ( f u n c t i o n ( ) {

6

$ ( ”#imagemJava ” ) . f a d e T o g g l e ( ) ;

7 8

p o s i c a o J a v a = ++p o s i c a o J a v a % 2 ;

9 10

$ ( ”#b o t a o J a v a ” ) . v a l ( t e x t o s J a v a [ p o s i c a o J a v a ] ) ;

11

}) ;

12 13 14

$ ( ”#botaoPHP ” ) . c l i c k ( f u n c t i o n ( ) {

15

$ ( ”#imagemPHP” ) . s l i d e T o g g l e ( ) ;

16

posicaoPHP = ++posicaoPHP % 2 ;

17 18

$ ( ”#botaoPHP ” ) . v a l ( textosPHP [ posicaoPHP ] ) ;

19

}) ;

20 21

}) ;

O C´odigo 5.7 apresenta a p´agina HTML com os dois bot˜oes e as duas imagens dos mascotes de cada linguagem.

C´odigo 5.7 – HTML no qual os efeitos s˜ao aplicados.

55

1

<!DOCTYPE html>

2

<html> <head>

3

<meta c h a r s e t=” ISO −8859−1” />

4 5

< t i t l e > E f e i t o s</ t i t l e >

6 7 8

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” j q u e r y . j s ”></ s c r i p t>

9

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” e f e i t o s . j s ”></ s c r i p t> </ head>

10 11

<body>

12 13

<i n p u t t y p e=” b u t t o n ” i d=” b o t a o J a v a ” v a l u e=” E s c o n d e r Duke ” />

14

<i n p u t t y p e=” b u t t o n ” i d=” botaoPHP ” v a l u e=” E s c o n d e r PHP” />

15

<b r /><b r />

16 17

<img i d=” imagemJava ” s r c=” duke . png ” />

18

<img i d=”imagemPHP” s r c=” php . g i f ” /> </ body>

19 20

</ html>

A Figura 16 apresenta o resultado da p´agina Web implementada. Como n˜ao ´e poss´ıvel representar o efeito gr´afico no texto, deve-se visualiz´a-lo no navegador Web. Figura 16 – P´agina na qual os efeitos gr´aficos foram aplicados.

56

5.4

Seletores O C´odigo 5.8 apresenta o JavaScript que busca as informac¸˜oes nas p´aginas. Na linha

3 busca-se todas as tags de imagem (img), o atributo length retorna o tamanho do vetor. Na linha 4 busca-se todas as tags que pertecem `a classe “imagem”. Finalmente, nas linhas 6 e 7 os resultados s˜ao exib´ıdos.

C´odigo 5.8 – JavaScript com o c´odigo de selec¸˜ao de elementos.

1

$ ( document ) . r e a d y ( f u n c t i o n ( ) { $ ( ”#i n f o r m a c o e s ” ) . c l i c k ( f u n c t i o n ( ) {

2 3

v a r q t d e = $ ( ” img ” ) . l e n g t h ;

4

v a r q t d e C o m C l a s s e = $ ( ” . imagem ” ) . l e n g t h ;

5

a l e r t ( ” E x i s t e m ” + q t d e + ” imagens , mas a p e n a s ” +

6

q t d e C o m C l a s s e + ” possuem a c l a s s e ’ imagem ’ ” ) ;

7

}) ;

8 9

}) ;

´ O C´odigo 5.9 apresenta a p´agina HTML no qual as informac¸˜oes s˜ao buscadas. E importante notar que existem trˆes imagens, mas somente duas delas possuem o atributo class equivalente a “imagem”.

C´odigo 5.9 – HTML no qual seleciona-se informac¸o˜es.

1

<!DOCTYPE html>

2

<html>

3 4

<head> < t i t l e > S e l e t o r e s</ t i t l e >

5 6

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” j q u e r y . j s ”></ s c r i p t>

7

< s c r i p t t y p e=” t e x t / j a v a s c r i p t ” s r c=” s e l e t o r e s . j s ”></ s c r i p t>

8

</ head>

9 10 11

<body> <i n p u t t y p e=” b u t t o n ” i d=” i n f o r m a c o e s ” v a l u e=” E x i b i r i n f o r m a& c c e d i l ;& o t i l d e ; e s ” />

12 13

<b r />

57

14 15

<img s r c=” computador . j p g ” c l a s s=” imagem ” />

16

<img s r c=” maca . j p g ” c l a s s=” imagem ” />

17

<img s r c=” t v . png ” /> </ body>

18 19

</ html>

A Figura 17 apresenta a p´agina na qual as informac¸o˜es s˜ao buscadas e os resultados da extrac¸˜ao de informac¸˜ao via seletores.

Figura 17 – P´agina os dados capturados via jQuery. (a) P´agina na qual os dados s˜ao selecionados.

5.5

(b) Resultado da selec¸˜ao.

Exerc´ıcios A respeito da jQuery responda:

1. Qual a vers˜ao atual da jQuery?

2. A jQuery ´e uma linguagem de programac¸˜ao? Justifique.

3. Qual a diferenc¸a entre os seletores # e . da jQuery?

4. O que fazem as func¸˜oes val() e trim()?

5. O que faz a func¸˜ao html() do jQuery?

6. Descreva o sistema de coordenadas de uma p´agina Web comparando-o com o plano cartesiano. Em que local fica a origem (0, 0)? Em que local fica a coordenada com a resoluc¸˜ao m´axima (largura, altura)?

7. Descreva os efeitos gr´aficos das func¸o˜es slideToggle() e fadeToggle().

58

8. Descreva o efeito das func¸o˜es hide() e show(). Busque informac¸˜oes em hhttp://api. jquery.com/category/effectsi.

9. O que ´e uma func¸˜ao anˆonima?

10. O que s˜ao vetores? Como eles s˜ao definidos em JavaScript?

11. Cite pelo menos trˆes eventos da jQuery. Por exemplo: focus().

12. O que fazem as func¸o˜es getElementsByTagName() e getElementsByClassName() do objeto global document do JavaScript? Qual suas relac¸˜oes com os seletores estudados?

59

ˆ REFERENCIAS

FUNDATION, M. Guia JavaScript. 2017. Dispon´ıvel em: hhttps://developer.mozilla.org/ pt-BR/docs/Web/JavaScript/Guidei. Acesso em: 12 fev. 2017.

FUNDATION, M. Lexical grammar. 2017. Dispon´ıvel em: hhttps://developer.mozilla.org/ pt-BR/docs/Web/JavaScript/Reference/Lexical grammari.

LIMA, J. C. de; CARVALHO, C. L. de. Extensible markup language (XML). UFG Relat´ orios T´ ecnicos, p. 34, 2005.

THE JQUERY FOUNDATION. jQuery: write less, do more. 2017. Dispon´ıvel em: hhttps://jquery.comi. Acesso em: 13 fev. 2017.

W3C. Extensible Markup Language (XML). 2012. Dispon´ıvel em: hhttp://www.w3.org/ XMLi. Acesso em: 10 fev. 2012.

W3C. JavaScript Web APIs. 2017. Dispon´ıvel em: hhttps://www.w3.org/standards/ webdesign/scripti. Acesso em: 11 fev. 2017.

W3C. Scripts. 2017. Dispon´ıvel em: hhttps://www.w3.org/TR/html4/interact/scripts.htmli.

Acesso em: 11 fev. 2017.

60