Técnicas Avançadas em Desenvolvimento Web by Ronneesley Moura Teles

RONNEESLEY MOURA TELES

´ TECNICAS AVANC ¸ ADAS EM DESENVOLVIMENTO WEB

´ SUMARIO 1

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

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

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

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

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

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

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

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

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

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

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

2.5.1

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

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

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

O CURSO A disciplina Linguagem de Programação II e Técnicas Avançadas em Desenvolvimento

Web são disciplinas que tratam de recursos avançados de programação Web que permitem uma interação mais dinâmica com o internauta. Os pré-requisitos desta disciplina são: conhecimentos sobre HTML e linguagens de programação para Web. 1.1

Ementa Técnicas avançadas de programação 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ódigos ´ um para várias 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ável pela criação dos bancos de dados e armazenamento dos dados de uma aplicação2 . Também é uma ferramenta gratuita que pode ser adquirida em hhttps://www.mysql.comi. • Navegador Web: permite a visualização das páginas Web. Os navegadores mais comuns são: 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

A sigla refere-se ao termo Integrated Development Environment. Deve-se ficar claro que a ferramenta MySQL Workbench é apenas um ambiente gráfico 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 é o Microsoft Edge presente no Windows 10.

• Jaspersoft Studio: possibilita a criação de relatórios complexos utilizando a linguagem Java. Seus relatórios podem ser personalizados através de um ambiente gráfico e preenchidos pela linguagem de programação ou através 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 programação em Java. 2. Cite caracter´ısticas da ferramenta Eclipse e o endereço onde pode ser obtida. 3. Cite pelo menos três outros SGBDs além do MySQL. 4. Diferencie MySQL de MySQL Workbench. Qual o comando necessário para conexão com o MySQL pelo cliente console, supondo que o usuário seja root e a senha seja 123 ? 5. Quais os três navegadores Web mais utilizados no mundo? Busque estat´ısticas na Internet sobre o assunto. Qual a importância de saber quais os navegadores Web mais utilizados? 6. Dado que Jaspersoft Studio é uma ferramenta de elaboração de relatórios para Java. O que é o FPDF? 7. Java é igual a JavaScript? Justifique. 8. Diferencie SGBD e banco de dados. 9. Qual a versão atual de cada uma das ferramentas: NetBeans, MySQL, Chrome, Mozilla Firefox e Jaspersoft Studio? 10. Groovy? O que é isto? Cite pelo menos três caracter´ısticas. 11. AJAX é uma linguagem de programação? Justifique.

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ém chamados de tags (etiquetas), podem ser definidos pelo usuário. XML é uma meta-linguagem. Isso quer dizer que: “ela oferece recursos para definição de gramáticas que caracterizam linguagens para classes de documentos espec´ıficos, com um conjunto de elementos, atributos e regras de composição bem determinados.”. Duas linguagens permitem impor regras para as estruturas em XML, são 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âmbio de dados entre aplicaço˜es Web e Formato de dados (linguagens). Os formatos de dados mais conhecidos são: MathML (Mathematical Markup Language) usado para descrever expressões matemáticas em páginas Web (Figura 1 e Código 2.1); MusicXML usado para descrever partituras musicais; RSS (originalmente RDF Site Summary, atualmente Really Simple Syndication) permite agregar conteúdo de páginas, 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.

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

C´odigo 2.1 – Exemplo de arquivo MathML. 1

<!DOCTYPE html>

<head>

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

</ head>

<body>

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

10 11 12

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

<msup>

</msup>

</mrow>

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

35 36

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

40 41

</msup>

<mo>&minus ;</mo>

50 51

</mrow>

<mrow>

</ m f r a c>

</mrow>

58 59 60 61

</math> .

</ 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) é uma linguagem para apresenta¸c˜ ao. Ou seja, XML dá um significado ao conteúdo que está dentro das etiquetas, enquanto que o HTML especifica a forma como este conteúdo será apresentado. No XML usa-se a linguagem XSL (Extensible Stylesheet Language) para especificar como o conteúdo será apresentado, já 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” ?>

A r r o z

F e i j ˜a o

Tomate

R e f r i g e r a n t e

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

salvos. Os tipos de codificação mais comuns são UTF-8 e ISO-8859-1. Isto varia em cada pa´ıs ou região. O Código 2.2 apresenta o XML para armazenar 4 produtos utilizando duas tags produtos e produto. A tag produtos é a raiz, e a tag produto é utilizada quatro vezes, sendo uma para cada produto armazenado. O autor do XML pode definir quantas tags quiser, seguindo o padrão <nome> para iniciar e </nome> para terminar. 2.5.1 Como é exibido? Por não terem uma definição de aparência, os documentos em XML são apresentados em forma de árvore. A aparência de um XML varia em cada navegador, pois o importante é o conteúdo1 . 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.

Deve-se notar que o XML não tem aparência, apenas o navegador que determina uma forma de apresentá-lo.

2.5.2 O que mais pode ser feito? O conteúdo de uma tag está entre seu in´ıcio e fim. Ex.: <nome > conte´ udo </nome>. Este conteúdo 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 informações, elas são chamadas de atributos. O Código 2.3 apresenta um atributo chamado preco na tag produto. Código 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” ?>

A r r o z

F e i j ˜a o

Tomate

R e f r i g e r a n t e

Deste modo pode-se melhorar o XML utilizando novos atributos e tags para armazenar mais informações. O Código 2.4 apresenta um XML com vários dados. Código 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” ?>

3 4 5

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

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

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

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

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

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

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

< 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

P a u l i s t a ” />

18 19

2.6

XML Bem-Formatado Um XML está bem formatado quando segue todas as regras básicas de criação: toda

tag que abre tem que fechar (ex.: <produto></produto> ou <fabricante />); as tags não podem se sobrepor. Não pode ocorrer: <produto><fabricante></produto></fabricante>. Isto representa uma sobreposição de tags. Quando o XML não segue estas regras ele está mal-formatado. Quando o documento está bem-formatado o Mozilla Firefox exibe ele como na Figura 4. Já quando o documento está mal-formatado, ele é exibido como na Figura 5. Figura 4 – XML bem-formatado

Figura 5 – XML mal-formatado

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 seção CDATA não será pocessado pelo analisador sintático XML. Assim pode quebrar as regras sintáticas descritas na seção 2.6. Código 2.5 – XML com seção CDATA. 1

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

<! [CDATA[

c l a s s Ola {

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 ) {

i n t horas = 13;

7 8

i f ( horas < 12)

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

else

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

}

13 14

}

] ]> </ 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 endereços de RSS encontrados na questão anterior. Anote o nome do leitor e o endereço do site. 4. Encontre as tags que não pertecem ao HTML no Código 2.1. 5. Para que serve a tag raiz? 12

6. Cite pelo menos três outros tipos de codificação de caracteres além do UTF-8 e ISO8859-1. Qual a codificação utilizada no Japão? 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 definição de seus colegas. Anote as diferenç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ências aprendidas no processo, principalmente as falhas. 9. Faça uma tabela relacionando as tags que foram usadas no documento XML e a quantidade de atributos em cada tag. 10. Reescreva o código do Exemplo 2.5 sem usar a seção CDATA. Descreva o problema que ocorreu ao abr´ı-lo no navegador Web.

LEITURA E ESCRITA DE XML A partir de linguagens de programação é poss´ıvel gerar e ler os conteúdos de arquivos

XML. Os exemplos deste cap´ıtulo têem como missão a leitura e escrita de um arquivo XML como o apresentado no Código 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ês 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ários atributos. A classe Produto possui cinco atributos, sendo quatro de tipos primitivos e um apresentado através de uma associação entre a classe Produto e a classe Fabricante. De outro lado a classe Fabricante possui apenas três atributos do tipo String. Figura 6 – Diagrama de classe para a modelagem orientada a objetos.

A classe Armazenamento permite realizar a leitura e gravação de um XML como o apresentado no Código 2.4. Para leitura ela dispõe de três métodos: lerTodosProdutos(), lerProduto() e lerFabricante(). Já para escrita possui mais três métodos: gravarProdutos(), preencherProduto() e preencherFabricante().

O método lerTodosProdutos() busca todas as tags cujo nome é produto e ao encontrar uma, solicita ao método lerProduto() a leitura dos dados do produto encontrado. Se o produto em questão tiver fabricante solicita-se ao método lerFabricante() a criação 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ódigo 3.1 apresenta a implementação da classe de Produto. Nota-se que ela possui

cinco atributos (nome, unidade, preço, validade e fabricante), quatro construtores, métodos que encapsulam cada atributo permitindo o controle de acesso de cada um e a sobrescrita do método toString() que permite retornar um texto que representa o objeto, neste caso escolheu-se o nome para representá-lo. Observa-se que cada atributo possui um tipo de dado espec´ıfico. O atributo preço é Double, unidade e nome são String, validade é um objeto da classe Date 1 e fabricante pertence a uma classe espec´ıfica chamada Fabricante que será definida mais adiante. Código 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

/∗ ∗

∗ 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

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

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

∗/

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

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

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 importação desta classe na linha 1 do código. Esta informa para a linguagem Java a localização/pacote da classe desejada.

p u b l i c Produto ( ) {

}

25 26

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

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 ) {

t h i s . nome = nome ;

t h i s . unidade = unidade ;

t h i s . preco = preco ;

}

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 ) {

t h i s . nome = nome ;

t h i s . unidade = unidade ;

t h i s . preco = preco ;

this . validade = validade ;

}

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 ) {

t h i s . nome = nome ;

t h i s . unidade = unidade ;

t h i s . preco = preco ;

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

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

}

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

t h i s . nome = nome ;

}

71 72

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

return validade ;

}

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 ) {

this . validade = validade ;

}

79 80

public Fabricante getFabricante () {

return fabricante ;

}

83 84

public void setFabricante ( Fabricante fabricante ) {

this . fabricante = fabricante ;

}

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

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

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

∗/

@Override

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

}

97 98

}

O Código 3.2 apresenta a implementação da classe Fabricante. Esta classe é mais simples, pois possui apenas três atributos (razão social, fantasia e telefone) e todos eles são do tipo String. Adicionalmente, tem-se um construtor vazio, métodos de acesso aos atributos (getters e setters) e o método toString(). Código 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

/∗ ∗

∗ 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

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

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

∗/

public class Fabricante {

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

public Fabricante () {

}

19 20

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

this . razaoSocial = razaoSocial ;

this . fantasia = fantasia ;

this . telefone = telefone ;

}

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

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

/∗ ∗

∗ 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

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

∗/

@Override

public String toString () {

return getFantasia () ;

}

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étodo lerTodosProdutos() cria-se um objeto da classe Document, nas linhas 36 a 38, e o atribui a uma variável chamada documento. Tanto para leitura quanto para gravação o passo de criação deste objeto é necessário. Para isto deve-se obter um objeto da classe DocumentBuilderFactory e outro da classe DocumentBuilder. Na linha 40 utiliza-se o método getElementsByTagName() para obter todas as tags chamadas produto, esta lista é atribu´ıda a uma variável do tipo NodeList. Na linha 42 cria-se uma lista de produtos vazia. Esta é preenchida nas linhas 43 a 48 e após o preenchimento é retornada na linha 47. Deve-se notar o método lerProduto() na linha 46, ele é responsável pela criação e preenchimento de cada produto. Código 3.3 – Representa a classe responsável 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 ;

import java . io . InputStream ;

import java . io . Writer ;

import java . text . ParseException ;

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

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

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

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 ;

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 ;

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

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 ;

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 ;

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

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 ;

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

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

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

20 21

/∗ ∗

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

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

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

∗/

26 27

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

∗ 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

∗ de p r o d u t o s

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

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

∗/

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 .

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

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

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

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

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

48 49

return produtos ;

50 51

}

52 53

/∗ ∗

∗ 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

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

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

∗ @ 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

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

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

∗/

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

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

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

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

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

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

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 ” ) ;

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

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

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

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

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

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

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

p. setFabricante ( lerFabricante ( filho ) ) ; }

}

90 91

return p ;

92 93

}

94 95

/∗ ∗

∗ 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

∗ @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 />

∗ @ 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

∗ 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

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

∗/

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

tagProduto . appendChild ( tagFabricante ) ;

200

}

201 202

}

O método lerProduto() se assemelha bastante ao método lerFabricante(). Nele instanciase uma novo produto (linha 62) e seus dados são preenchidos nas linhas 65 a 75. Nas linhas entre 78 e 90, verifica-se a tag produto que está sendo lida possui internamente uma tag fabricante. Caso possua, chama o método lerFabricante() para criar o fabricante e preenchê-lo. Ao final da função, um novo produto p é retornado na linha 92. O método lerFabricante() simplesmente preenche os três atributos da classe Fabricante para o objeto criado na linha 102. Deve-se notar que os atributos que não são obrigatórios, primeiramente verificou-se a existência com o método hasAttribute() antes de realizar a leitura com o método getAttribute(). Isto evita que os valores da razão social e do telefone do fabricante sejam preenchidos com textos vazios2 . Ao final do método, o fabricante é retornado com todos seus dados preenchidos na linha 111. Para gravação de dados contidos na memória RAM em um arquivo XML, utiliza-se o método 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és do método appendChild() na linha 128. Nas linhas 130 a 132 percorre-se então todos os produtos na lista e os preenche utilizando o método preencherProduto(). O u´ltimo passo da gravação consiste em converter os dados da memória do objeto da classe Document através da classe Transformer (linha 136). Por fim, usa-se o método transform() para armazenar os dados em um arquivo. O método preencherProduto() cria uma tag produto e preenche seus atributos conforme os valores do produto em questão (linhas 159 a 165). Nas linhas 167 a 170, verifica-se a validade está preenchida, caso esteja, ela é convertida para o formato adequado usando a classe SimpleDateFormat. Nas linhas 173 a 176, é verificada o preenchimento do fabricante do objeto produto. Se o produto possuir um fabricante, então utiliza-se o método preencherFabricante() para adicionar a tag necessária. Por fim, na linha 179 a tag produto é adicionada na tag raiz. 2

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

O método preencherFabricante() (linhas 188 a 201) cria a tag fabricante e preenche seus atributos. No final, a tag criada é adicionada à tag do produto (linha 200). 3.4

Testando os m´ etodos de leitura O Código 3.4 apresenta os comandos necessários para verificar se a implementação da

seção anterior está correta. Na linha 19, obtém-se a lista de produtos de um XML, como o apresentado no Código 2.4. Código 3.4 – Teste de leitura do XML apresentado no Código 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 ;

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

5 6

/∗ ∗

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

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

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

10 11 12

∗/ public class Leitura { /∗ ∗

∗ Mé todo p r i n c i p a l , e s t 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 x e c u t a d a

∗ @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

∗ @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

∗/

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 {

Armazenamento armazenamento = new Armazenamento ( ) ;

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 ” ) ;

f o r ( Produto p :

l i s t a ){

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

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

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

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

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

; 37

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

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

}

40 41

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

}

44 45

}

Nas linhas 21 a 43, esta lista é impressa na sa´ıda padrão permitindo verificar se os dados foram realmente lidos. Resultado 3.5 – Sa´ıda do Código 3.4. 1

Produto : Arroz

U n i d a d e : Un

P r e ¸c o : 1 0 . 3

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

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 ˜

U n i d a d e : Un

P r e ¸c o : 2 . 5

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

P r o d u t o : Tomate

U n i d a d e : Kg

P r e ¸c o : 0 . 7

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

U n i d a d e : Un

P r e ¸c o : 4 . 9 9

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

Paulista

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

3.5

Testando os m´ etodos de escrita Nas linhas 15 a 25, do código 3.6, os produtos são criados em memória RAM através de

objetos. Nas linhas 27 a 32, cria-se uma lista de produtos e cada produto criado é adicionado a ela. Na linha 34 cria-se um objeto da classe Armazenamento e na linha 35 solicita-se a gravação desta lista em um arquivo. Código 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 ;

import java . u t i l . Calendar ;

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

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

7 8 9

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

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

∗ @ 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 {

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

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

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

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

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

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 ” ) ;

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

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

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

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

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

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

33 34

Armazenamento a = new Armazenamento ( ) ;

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

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 ! ” ) ;

}

38 39

}

O Código 3.7 apresenta a sa´ıda do Código 3.6. Deve-se atendar que o arquivo foi salvo no diretório “c:\tmp\produtos gravado.xml” e caso este diretório não exista deve ser criado antes da execução. Código 3.7 – Sa´ıda do Código 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 3

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

9999 −1234 ” />

10

3.6

Aplicando as t´ ecnicas na Web O Código 3.8 apresenta um arquivo JSP que gera o XML de modo dinâmico. A uńica

modificação em relação ao Código 3.6 ocorreu na linha 31, onde o parâmetro escritor do método 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údo de sa´ıda do JSP para um arquivo XML. As linhas 1 a 7 realizam a importação das classes utilizadas. Código 3.8 – Código Web para geração 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 ” %>

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

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

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

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

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

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 ” ) ;

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

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

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

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

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

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

Armazenamento a = new Armazenamento ( ) ;

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

31 32

A Figura 7 apresenta a sa´ıda do Código 3.8. Pode-se notar que o XML é bem formatado e contém os valores especificados. Figura 7 – Sa´ıda do Código 3.8.

3.7

Exerc´ıcios

1. O que ´e uma tag? 2. O que ´e um pacote Java?

3. O que é uma classe? 4. Diferencie classe e objeto. 5. O que são atributos? Para que servem? 6. Descreva o encapsulamento de dados realizado através dos métodos getters e setters. Qual a sua vantagem? 7. Para que serve um construtor? 8. Para que serve o método toString()? 9. O que fazem os métodos getElementsByTagName(), getAttribute(), setAttribute() e appendChild()? 10. Quantos métodos têem as classes: Armazenamento, Fabricante e Produto? 11. Para que serve o método main()? 12. Altere o Código 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ódigo 3.8 colocando os mesmos produtos da questão anterior.

JAVASCRIPT A W3C (2017a) define um script como um código que não precisa de compilação para

rodar. Quando se tratar de Web um script geralmente é um código JavaScript que executa no navegador quando a página é baixada ou quando um evento é acionado. Estes scripts permitem que as páginas sejam mais dinâmicas. Quando cálculos são efetuados e a página é modificada chama-se de DHTML (Dynamic HTML) e quando novos dados são carregados de um servidor ou enviados a um chama-se de AJAX (Asynchronous JavaScript and XML) (W3C, 2017a). Para o JavaScript está dispon´ıvel a interface Document Object Model (DOM). Esta interface pemite acesso ao conteúdo da página possibilitando modificaço˜es. A especificação DOM é o núcleo do DHTML. Assim com o DOM é poss´ıvel criar interfaces mais agradáveis chamadas de Rich Internet Application (RIA) (W3C, 2017a). Existem duas naturezas de scripts, aqueles que são 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, é executado na máquina do cliente. Já os scripts server-side são executados no servidor. Figura 8 – Lado do cliente (client-side).

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

do internauta quando a página é carregada ou quando um evento é acionado. O HTML tem suporte a scripts independentemente da linguagem, isto quer dizer que JavaScript não é a uńica 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ásicos: 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údo do script, consequentemente define a linguagem usada para programar (W3C, 2017b). A tag script pode aparecer várias vezes nas tags head ou body. Dos dois atributos básicos (src e type), apenas o type é obrigatório. Se o atributo src não estiver especificado o navegador irá assumir que o script está escrito no conteúdo da tag script (W3C, 2017b). O Código 4.1 apresenta um exemplo de inclusão de um script codificado em um arquivo externo. Já o Código 4.2 apresenta um exemplo de script codificado na própria tag script. Ambos os casos funcionam igualmente, no entanto diferem do ponto de vista organizacional. Código 4.1 – Inclusão 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ódigo 4.2 – Inclusão de JavaScript codificado na própria 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 ”>

C´ odigo o s c r i p t

</ 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 descrição de quando eles ocorrem, sendo que a maioria deles são aplicáveis a quase todas as tags.

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ágina. Pode ser utilizado nas tags body e frameset. O navegador remove a página, é o oposto do evento onload e pode ser usado nas mesmas tags. Há um clique com o botão do mouse. Há um duplo clique com o botão do mouse. O botão do mouse está apertado, é o oposto de onmouseup. O botão do mouse é solto, é o oposto de onmousedown. O cursor passa sobre a tag, se já estiver sobre não é acionado novamente. O cursor move sobre uma tag, se o cursor mover é acionado novamente. O cursor sai de cima da tag, é o oposto de onmouseover. Uma tag recebe foco seja pelo clique ou por tabulação (TAB). Pode ser usado nas tags: a, area, label, input, select, textarea e button. Uma tag perde o foco, é o oposto do evento onfocus. Uma tecla é pressionada e solta sobre uma tag. Uma tecla é pressionada. Uma tecla é solta, é o complemento da ação do evento onkeydown. Ocorre o envio de um formulário, aplicável somente à tag form. Ocorre ao limpar um formulário, aplicável somente a formulários (form). O usuário seleciona parte de um texto em um campo de texto. Aplicável às tags input e textarea. Um campo de entrada perde o foco se seu valor tiver sido modificado. Aplicável somente às tags input, select e textarea.

Conhecendo o JavaScript Uma das primeiras coisas ao conhecer uma segunda linguagem de programação é 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

4.3

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

var e const, respectivamente. Variáveis e constantes podem ser declaradas com dois escopos: local ou global. Variáveis globais existem em todo o código e durante toda a execução da página, já as variáveis locais são declaradas dentro de funço˜es, assim quando a respectiva função termina, a variável deixa de existir, liberando memória. O Código 4.3 apresenta um arquivo chamado declaracao variaveis.js que foi codificado em JavaScript e declara três variáveis. O Código 4.4 apresenta um exemplo de HTML que inclui o Código 4.3. Nota-se que ele não possui nenhum conteúdo em seu corpo (body ), portanto nada aparecerá na página. Como o Código 4.3 utiliza uma variável global do navegador chamada console para exibir o número, nome e sobrenome. O método log() da variável exibe mensagens no console do navegador. Geralmente a tecla de acesso do console do navegador é a F12. Nas linhas 1 e 2 do Código 4.3 utilizou-se o operador de atribuição (=) para colocar valor em cada uma das variáveis. Código 4.3 – Declaração de três variáveis. 1

v a r numero = 1 0 ;

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ódigo 4.4 – Arquivo HTML para inclusão do código JavaScript. 1

<!DOCTYPE html>

<html>

3 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=” d e c l a r a c a o v a r i a v e i s . j s ”>

</ s c r i p t>

</ head>

10 11

</ html>

O Código 4.5 apresenta a declaração de constantes, nota-se o uso da palavra-chave const. Constantes, assim como na Matemática, são valores que não se modificam ao longo do script. Uma vez atribu´ıdo um valor a uma constante, ele não poderá mais mudar. Para testá-lo deve-se criar um arquivo HTML como o apresentado no Código 4.4 e verificar o log do navegador. Código 4.5 – Declaração de três constantes. 1

const pi = 3.14;

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ódigo 4.6 apresenta a declaração de três funções: calcularICMS(), calcularPrecoCo-

mImposto() e calcular() relacionadas ao cálculo do Imposto sobre Circulação de Mercadorias e Serviços (ICMS). Nota-se que as funço˜es são declaradas com a palavra-chave function, seguidas pelo seu nome e os parâmetros necessários para o cálculo. Além disso, uma vez declarada a função poderá ser usada em vários outros lugares como no caso da função calcularICMS() que é usada nas linhas 6 e 13, ou seja, houve um reaproveitamento de código. ´ na função calcular() onde grande parte da funcionalidade acontece. Na linha 10 o E valor do campo que contém o preço é obtido pelo id do HTML através da função getElementById() presente na variável global document. O valor é obtido pelo atributo value e convertido para número através da função parseFloat(). Deve-se notar que este tipo de conversão 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 funções calcularICMS() e calcularPrecoComImposto() com al´ıquotas de 18% são atribu´ıdos a campos cujos ids são respectivamente icms e total através do atributo value. 35

Código 4.6 – Declaração de três funções 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%

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

( preco , 0.18) ; 15

}

Em relação ao Código 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ódigo 4.7 – HTML para cálculo do ICMS. 1

<!DOCTYPE html>

<html>

3 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 a l c u l a r i c m s . j s ”>

</ s c r i p t>

</ head>

9 10 11 12

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

13 14 15

17 18

ICMS :

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

T o t a l :

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

<body>

24 25

</ html>

O JavaScript possui vários operadores aritméticos como: soma (+), subtração (-), multiplicação (*) e divisão (/) (FUNDATION, 2017a). Pode-se observar o uso destes operadores nas linhas 2 e 6 do Código 4.6 que foram utilizados, respectivamente, para calcular o valor da al´ıquota e acumular o valor do ICMS ao preço do produto. Além destes operadores aritméticos clássicos existem os operadores de: módulo (%), incremento (++) e decremento (–). No Código 4.6 utilizou-se a palavra-chave return nas linhas 2 e 6 para retornar um valor em uma função. Existem métodos que retornam valor e outros que não retornam como o método calcular(). Em programação chama-se os que retornam valor de função e os que não retornam de procedimento. Por fim, no Código 4.6 utilizou-se comandos DOM nas linhas 10, 13 e 14 através da variável global document. Este objeto permite obter dados da página ou modificá-los. A Figura 9 apresenta o resultado final da página de cálculo do ICMS.

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 repetição. Quando se faz uma escolha do que é executado tem-se uma estrutura condicional, já quando um código é repetido tem-se uma estrutura de repetição. 4.5.1 Estrutura condicional O Código 4.8 apresenta uma função que verifica se um número é par ou impar. Nota-se na linha 4 a presença da palavra-chave if, esta é responsável pela decisão. Caso o resultado da expressão lógica seja verdadeira o bloco de código da linha 5 será executado, caso contrário o bloco de código da linha 7 é executado, em virtude da palavra-chave else na linha 6. Código 4.8 – Verifica se um número é 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 ) {

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

} else {

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

}

8 9

}

Em relação ao Código 4.9 deve-se notar a captura do evento onclick na linha 15 e a chamada da função verificarParImpar(). Código 4.9 – Formulário HTML para verificação se um número é par ou impar. 1

<!DOCTYPE html>

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

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

8 9

<body>

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

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=” v e r i f i c a r P a r I m p a r ( ) ” />

15 16

<body>

18 19

</ html>

Em algumas situaço˜es é necessário o uso de uma estrutura condicional composta aninhada como apresentado no Código 4.10. Na função calcularAliquotaIR() é necessário verificar diferentes faixas salariais para decidir qual a aliquota a ser aplicada. Código 4.10 – Cálculo 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;

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

return 22.5;

} else {

return 27.5;

}

12 13

}

14 15

function calcularIR ( salario ){

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

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

}

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

value ) ; 28

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

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 + ”” ) ;

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

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 + ”” ) ;

}

O Código 4.11 apresenta a página para cálculo do IRPF, nota-se novamente a captura do evento onclick na linha 14. Quando acionado o botão calcular a página é reescrita através da função write() da variável global document. A Figura 10 apresenta as páginas de cálculo resultantes do código.

Código 4.11 – Formulário para o cálculo do IRPF. 1

<!DOCTYPE html>

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

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

8 9

<body>

D i g i t e o s a l&a a c u t e ; 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 ( )

” /> <body>

15 16

</ html>

Figura 10 – Cálculo do IRPF. (b) Resultado da página de cálculo do IRPF (a) Formulário da página de cálculo do IRPF

4.5.2 Estrutura de repetição Estruturas de repetição são aquelas que permitem repetir um conjunto de comandos, entre elas estão as palavras-chave for, while e do ... while. 4.5.2.1 Estrutura para (for) O Código 4.12 apresenta uma função JavaScript que escreve os números pares, separandoos por v´ıgula, entre um in´ıcio e fim determinados. Na linha 2 verifica-se o número de in´ıcio é par, caso não seja, move-se para o próximo número, uma vez que o próximo será par neste 41

caso. Entre as linhas 4 e 8, tem-se a estrutura de repetição, declarada pela palavra-chave for, que inicia do primeiro par até o u´ltimo número par delimitado pelo parâmetro fim, o incremento acontece de duas em duas unidades visto que se trata de números pares. Toda estrutura de repetição for determina um in´ıcio, condição de término e um incremento. Código 4.12 – Função para escrever números 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 ) {

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

5 6

document . w r i t e ( i ) ;

}

8 9

}

O Código 4.13 apresenta a página HTML que usa a função escreverNumerosPares(). Deve-se notar as linhas 6 e 7 que incluem o arquivo JavaScript com a função e as linhas 11 a 13 e 15 a 17 que utilizam a função duas vezes. Código 4.13 – Página HTML que usa a função JavaScript. 1

<!DOCTYPE html>

<html>

3 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=” r e p e t i c a o f o r . j s ”>

</ s c r i p t>

</ 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) ;

</ s c r i p t>

< 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 (57 , 76) ;

</ s c r i p t>

<body>

18 19

</ html>

A Figura 11 apresenta o resultado da página HTML. Deve-se notar que estes foram impressos em duas linhas devido a tag br utilizada na linha 14 do Código 4.13. Além disso, pode-se visualizar que na segunda impressão o número de in´ıcio foi 58, uma vez que o argumento 57 não é um número par, informado na linha 16. Figura 11 – Resultado da página HTML que escreve os números pares.

4.5.2.2 Estrutura faça-enquanto (do-while) O Código 4.14 apresenta um script que sorteia um número de 0 a 10 e uma função que exibe mensagens para que o usuário tente adivinhar até acertar. Na linha 1 ocorre a definção da variável numeroSorteado está é uma variável global, pois não está dentro de uma função. Para o sorteio utiliza-se a função Math.random() esta função sorteia um número de 0 a 0,999...9 (quase 1). Este valor é multiplicado por 11 para que o intervalo se torne de 0 a quase 11. Em seguida este intervalo é arredondado para baixo com a função Math.floor(), isto resulta no intervalo de 0 a 10. A função adivinhar() declara duas variáveis locais numero e mensagem, nas linhas 4 e 5. Nas linhas 7 a 12 utiliza-se o laço do-while, esta estrutura garante a execução de pelo menos uma vez o conjunto de comandos. Esta é uma estrutura adequada porque o internauta deve tentar no m´ınimo uma vez acertar o número sorteado. Na linha 8 acontece a pergunta para o internauta de qual seu palpite através da função prompt(). Nota-se que a variável mensagem é utilizada para exibir se o internauta acertou ou não o número. Nesta mesma linha utiliza-se a função parseInt() para converter o valor digitado para um número inteiro. Somente a partir desta conversão, o palpite do internauta é verificado na linha 10 e caso não seja o número sorteado, atribui a mensagem de erro na linha 11. Finalmente, se o usuário acertar, na linha 14 exibe uma mensagem de comemoração. 43

Código 4.14 – Função para sortear números. 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 () {

v a r numero ;

v a r mensagem = ” ” ;

do {

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

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 )

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

} 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ódigo 4.15 apresenta o HTML que inclui o arquivo JavaScript na linha 8 a 9 e nas linhas 13 a 15 a função adivinhar() é chamada. Código 4.15 – Página HTML que usa a função JavaScript de sorteio de números. 1

<!DOCTYPE html>

<html>

3 4

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

</ s c r i p t>

</ head>

11 12 13

adivinhar () ;

</ s c r i p t>

<body>

16 17

</ html>

A Figura 12 apresenta o resultado da interface gráfica da página. A Figura 12a mostra a caixa de diálogo exibida pelo comando prompt() que solicita o palpite do internauta. Após acertar o número, a função alert() exibe a caixa de diálogo apresentada na Figura 12b. Figura 12 – Resultado da página HTML que sorteia um número (a) Caixa de entrada do palpite. (b) Mensagem exibida ao acertar o n´ umero.

4.5.2.3 Estrutura enquanto (while) O Código 4.16 apresenta a função escreverLetras() esta exibe os caracteres da tabela de codificação de caracteres. Na linha 2 definiu-se uma variável chamada qtdeRepeticoesColunas que controla a quantidade de pares código/valor de colunas que a tabela terá através do laço das linhas 6 a 8. Na linha 11 define-se uma variável chamada i que começa com o valor zero. O laç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á o controle de quebra de linhas conforme a variável qtdeRepeticoesColunas. Na linha 16 ocorre a impressão do código e da representação do caractere daquele código através da função fromCharCode() do objeto global String. Código 4.16 – Função escrever a tabela de codificação de caracteres. 1

function escreverLetras () {

var qtdeRepeticoesColunas = 8;

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

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

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

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 ++){

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

}

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

10 11

var i = 0;

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 )

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

14 15

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

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

i ++;

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 >” ) ;

}

21 22

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

23 24

}

O Código 4.17 apresenta o HTML que inclui o arquivo externo nas linhas 8 e 9 e posteriormente utiliza a função escreverLetras() na linha 14. Código 4.17 – Página HTML exibe a tabela de codificação. 1

<!DOCTYPE html>

<html>

3 4

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

</ s c r i p t>

</ head>

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

escreverLetras () ;

</ s c r i p t>

<body>

16 17

</ html>

A Figura 13 apresenta o resultado do função. Nota-se que alguns caracteres que não possuem representaço˜es gráficas aparecem em forma de retângulos. Figura 13 – Tabela de codificação de caracteres impressa pela função JavaScript.

4.6

Exerc´ıcios

1. O que é DHTML? 2. AJAX é uma linguagem de programação? Justifique. 3. O que é RIA? 4. Diferencie client-side de server-side. 5. Quais as três formas de inclusão de scripts? Descreva a diferença entre elas. 6. Cite pelo menos três 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 função parseInt()? 11. O que faz os operadores módulo, incremento e decremento? 12. Descreva pelo menos três funcões do objeto document. Busque informaço˜es em hhttps: //developer.mozilla.org/en-US/docs/Web/API/Documenti. 13. Descreva pelo menos três funções do objeto console. Busque informações em: hhttps: //developer.mozilla.org/pt-BR/docs/Web/API/Consolei. 14. Qual a diferença entre função e procedimento? 15. Para que servem os códigos no HTML &aacute;, &ccedil;, &atilde;? Como são chamados? 16. Qual a diferença entre estrutura condicional simples e composta? 17. O que faz a função Math.ceil()? 18. Cite pelo menos dois objetos globais além de Math. Descreva suas funções. Pesquise em hhttps://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global Objectsi.

19. O que faz a função confirm()? 20. Mesmo sabendo que todas as estruturas de repetição são equivalentes, pois resolvem os mesmos problemas. Qual o momento mais apropriado de cada uma delas (for, while e do-while)?

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 animações e funções AJAX de modo mais simples (THE JQUERY FOUNDATION, 2017). Essencialmente a jQuery disponibiliza um objeto global chamado $ (dolar) e apartir deste objeto são realizadas as chamadas de função disponibilizadas pela biblioteca. O primeiro passo para a utilização da jQuery é baixar o arquivo .js dispon´ıvel em hhttps://jquery.comi. Este arquivo deve estar presente e ser inclu´ıdo através da tag script para que assim seja utilizado. O Código 5.1 apresenta um exemplo de inclusão da biblioteca. A partir desta inclusão é poss´ıvel utilizar o objeto $ que provê as facilidades da jQuery. Código 5.1 – Inclusão da biblioteca jquery.js. 1

<!DOCTYPE html>

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

</ head>

7 8

9 10

</ html>

5.1

Obtendo elementos e alterando conte´ udos de tags O Código 5.2 apresenta a função validar(). Esta função verifica se um campo cuja o id é

email foi preenchido na linha 2. Para isto utiliza a função val() a o objeto global $. Esta função retorna a propriedade value de um input. A função trim() utilizada logo em seguida remove os poss´ıveis espaços à direita e à esquerda do que o usuário escreveu, por exemplo “ Ana ” se tornaria “Ana”. Isto é u´til porque se o usuário digitar “

” ou “ ”, independentemente da

quantidade de espaços que ele digitar, o resultado sempre será “”. Deste modo, se o resultado for “” que é a comparação realizada na linha 2, significa que ele não digitou nada no campo ou que ele digitou espaços. 50

Ao analisar a linha 2 pode-se perceber que a função $(”#email”) é equivalente a document.getElementById(”email”). A jQuery possui vários seletores sendo que o s´ımbolo # indica que deseja-se selecionar pelo id. Outro seletor muito utilizado é o . (ponto), este indica que a seleção será realizada pelo atributo class. Além disto, é poss´ıvel notar a função html() na linha 3 do Código 5.2. Esta função equivale a alteração da propriedade innerHTML de uma tag qualquer. Código 5.2 – JavaScript de validação de um formulário. 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 ! ” ) ;

return false ; }

5 6

return true ;

7 8

}

O Código 5.3 apresenta o código HTML que utiliza a função validar() na linha 11 através da captura do vento onsubmit. Nota-se que a função validar retorna verdadeiro se o campo e-mail foi preenchido e falso caso contrário, assim se o resultado do evento onsubmit for falso o envio do formulário é abortado. Adicionalmente deve-se notar as linhas 6 e 7 que respectivamente incluem o jQuery e o arquivo com a função validar(). Neste caso a não inclusão do jQuery resulta em mal funcionamento da função validar(), uma vez que ela utiliza o objeto global $ disponibilizado pela jQuery. Código 5.3 – Formulário de cadastro de newsletter. 1

<!DOCTYPE html>

<html>

3 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=” j q u e r y . j s ”></ s c r i p t>

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

</ head>

<body>

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

12 13

15 16

</ form>

</ body>

19 20

</ html>

A Figura 14 apresenta o formulário ao ser aberto (Figura 15a) e após a tentativa de submissão sem preenchimento do campo e-mail (Figura 15b). Nota-se a presença da mensagem ´ importante observar que ao preencher o e-mail e clicar no botão “Preencha o campo e-mail!”. E salvar os dados serão enviados para o arquivo inserir.jsp especificado no atributo action do Código 5.3. Se este arquivo não existir o resultado será uma página não encontrada. Figura 14 – Página HTML de formulário de newsletter. (b) Formulário validado. (a) Formulário 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á estudado anteriormente. A função ready() recebeu a função que será chamada assim que a página será carregada. Esta função que foi colocada não possui nome por isso é chamada de função anônima. A captura de eventos com jQuery e algumas outras caracter´ısticas são baseadas em funções anônimas. A atribuição de uma função anônima ao evento ready() é equivalente ao evento HTML onload.

Neste código dois eventos foram capturados um relacionado ao botão com id botao, nas linhas 2 a 5, e outro evento do próprio documento, nas linhas 7 a 9. Nota-se que após obter o objeto jQuery de uma tag utiliza-se a função 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 funções equivalentes da jQuery são: 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 função anônima possui um parâmetro chamado event enquanto que a função anônima da captura do clique não possuia parâmetros na linha 2. Este parâmetro permite obter a posição x e y do cursor através dos atributos pageX e pageY. Código 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 ( ) {

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

”\ 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

. ”) ; }) ;

5 6

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

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

pageY + ” px ” ) ; }) ;

9 10

}) ;

O Código 5.5 apresenta a página HTML de onde os eventos são capturados. Pode-se notar que não há itens importantes a serem observados, pois a captura dos eventos é feita totalmente no arquivo JavaScript. Código 5.5 – HTML onde os eventos são capturados. 1

<!DOCTYPE html>

<html>

<head>

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>

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

13 14

</ body>

16 17

</ html>

A Figura 15 apresenta a página Web resultante (Figura 15a) mostrando as coordenadas do cursor e a caixa de diálogo com informaço˜es para o internauta (Figura 15b). Figura 15 – Página com eventos capturados via jQuery. (b) Caixa de alerta acionada através do clique do botão.

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

5.3

Efeitos gr´ aficos Uma das funcionalidades mais marcantes na jQuery são as funções relacionadas a efeitos

gráficos, sendo os mais utilizados a função fadeIn(), fadeOut(), fadeToggle(), slideDown(), slideUp() e slideToggle(). O Código 5.6 apresenta uma JavaScript utilizando as funç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ões nas diferentes situações. Na linha 4 definiu-se duas variáveis para armazenar a situação de cada botão, 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 situação de cada um dos botões, calcula-se o módulo de 2 pois cada botão possui apenas duas situações poss´ıveis: permitir esconder o mascote ou permite mostrá-lo. Nas linhas 11 e 19 utiliza-se estas variáveis para colocar o texto correto nos botões. Nota-se também a captura dos eventos de clique conforme a seção anterior. Código 5.6 – JavaScript criação de efeitos gráficos com tags. 1

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

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 ” ] ;

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

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

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

$ ( ”#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 ] ) ;

}) ;

12 13 14

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

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

posicaoPHP = ++posicaoPHP % 2 ;

17 18

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

}) ;

20 21

}) ;

O Código 5.7 apresenta a página HTML com os dois botões e as duas imagens dos mascotes de cada linguagem. Código 5.7 – HTML no qual os efeitos são aplicados.

<!DOCTYPE html>

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>

< 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

16 17

19 20

</ html>

A Figura 16 apresenta o resultado da página Web implementada. Como não é poss´ıvel representar o efeito gráfico no texto, deve-se visualizá-lo no navegador Web. Figura 16 – Página na qual os efeitos gráficos foram aplicados.

5.4

Seletores O Código 5.8 apresenta o JavaScript que busca as informações nas páginas. 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 à classe “imagem”. Finalmente, nas linhas 6 e 7 os resultados são exib´ıdos. Código 5.8 – JavaScript com o código de seleção 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 ;

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

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

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

}) ;

8 9

}) ;

´ O Código 5.9 apresenta a página HTML no qual as informações são buscadas. E importante notar que existem três imagens, mas somente duas delas possuem o atributo class equivalente a “imagem”. Código 5.9 – HTML no qual seleciona-se informaço˜es. 1

<!DOCTYPE html>

<html>

3 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=” j q u e r y . j s ”></ s c r i p t>

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

</ head>

9 10 11

<body>

12 13

14 15

18 19

</ html>

A Figura 17 apresenta a página na qual as informaço˜es são buscadas e os resultados da extração de informação via seletores. Figura 17 – Página os dados capturados via jQuery. (a) Página na qual os dados são selecionados.

5.5

(b) Resultado da selec¸˜ao.

Exerc´ıcios A respeito da jQuery responda:

1. Qual a versão atual da jQuery? 2. A jQuery é uma linguagem de programação? Justifique. 3. Qual a diferença entre os seletores # e . da jQuery? 4. O que fazem as funções val() e trim()? 5. O que faz a função html() do jQuery? 6. Descreva o sistema de coordenadas de uma página Web comparando-o com o plano cartesiano. Em que local fica a origem (0, 0)? Em que local fica a coordenada com a resolução máxima (largura, altura)? 7. Descreva os efeitos gráficos das funço˜es slideToggle() e fadeToggle().

8. Descreva o efeito das funço˜es hide() e show(). Busque informações em hhttp://api. jquery.com/category/effectsi. 9. O que é uma função anônima? 10. O que são vetores? Como eles são definidos em JavaScript? 11. Cite pelo menos três eventos da jQuery. Por exemplo: focus(). 12. O que fazem as funço˜es getElementsByTagName() e getElementsByClassName() do objeto global document do JavaScript? Qual suas relações com os seletores estudados?

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