Introdução à Programação Java para Web

Prévia do material em texto

Programação Java para Web 
 
 
Prof. Monteiro 
2014/2 
Parte 1 
 
1 06/10/2014 
Introdução 
 
• Plano de aula 
• Apresentação do Plano de Ensino 
• Metodologia do curso 
 
2 06/10/2014 
O início da Internet 
• Desenvolvida pela empresa ARPA (Advanced 
Research and Projects Agency) em 1969, com o 
objetivo de conectar os departamentos de pesquisa, 
esta rede foi batizada com o nome de ARPANET. 
• Antes da ARPANET, já existia outra rede que ligava 
estes departamentos de pesquisa e as bases 
militares, mas como os EUA estavam em plena 
guerra fria, e toda a comunicação desta rede passava 
por um computador central que se encontrava no 
Pentágono, sua comunicação era extremamente 
vulnerável. 
 3 06/10/2014 
O que é a Internet 
 Em síntese, a Internet é um conjunto de redes 
de computadores interligadas que tem em 
comum um conjunto de protocolos e serviços, 
de uma forma que os usuários conectados 
possam usufruir de serviços de informação e 
comunicação de alcance mundial. 
 
4 06/10/2014 
Protocolo TCP/IP 
 Depois de algumas pesquisas, a ARPANET 
mudou para um novo protocolo chamado 
TCP/IP (Transfer Control Protocol/Internet 
Protocol) desenvolvido no UNIX. A maior 
vantagem do TCP/IP era que ele permitia (o 
que parecia ser na época) o crescimento 
praticamente ilimitado da rede, além de ser 
fácil de implementar em uma variedade de 
plataformas diferentes de hardware de 
computador. 
 5 06/10/2014 
Endereço IP 
• Endereço IP (Internet Protocol) 
• O que é um endereço IP? 
• Cada máquina na Internet tem um número de identificação 
exclusivo chamado endereço IP. Um endereço IP comum se 
parece com este: 
 216.27.61.137 
• Para que fique mais fácil para lembrarmos estes números, 
os endereços IP normalmente são expressos no formato 
decimal com um "número decimal pontilhado" como o 
descrito acima. No entanto, os computadores se 
comunicam na forma binária. Veja o mesmo endereço IP no 
sistema binário: 
 11011000.00011011.00111101.10001001 
 
6 06/10/2014 
Endereço IP 
• Obtendo o seu endereço IP: 
• http://www.ip-adress.com/ 
• IP- address.com - What is my IP address? 
 IP address tracer, Broadband Speedtest and DNS 
Tools. 
My IP address Free IP Address tracer and IP address lookup.htm 
• My IP address: 189.71.201.92 
 IP Address Location: Aracaju in Brazil 
ISP of this IP: Tele Norte Leste Participações S.A. 
• Apresenta um mapa do Google com a localização 
da cidade de Aracaju. 
 
 
7 06/10/2014 
URI e URL 
• URI 
– Uniform Resource Identifier (Identificador Unificado de Recurso) 
É, basicamente, uma string (conjunto de caracteres) que segue 
uma certa sintaxe e é usado para definir e identificar um recurso 
na web. O tipo mais comum de URI é a URL. 
• URL 
– Uniform Resource Locator (Localizador Unificado de Recurso) 
Um tipo específico de URI, usado para definir a localização de 
um recurso na web. Geralmente dizemos que a URL é o 
endereço de uma página web. Um exemplo de URL: 
http://www.exemplo.com/pagina/ 
8 06/10/2014 
URI 
• Qualquer recurso disponível na Web - documento 
HTML, imagem, vídeo, programa, etc. - tem que ter 
um endereço único para que seja possível encontrá-
lo de qualquer lugar do mundo. Este endereço é 
denominado URI (Universal Resource Identifier - 
Identificador Universal de Recurso). Para fazer uma 
ligação para uma outra página HTML será preciso 
referenciar o endereço URI desta outra página. 
(NCE – UFRJ) 
 
 
9 06/10/2014 
URI 
• Observe este exemplo de endereço URI: 
 
 
 
 
 
• Este endereço URI deve ser compreendido como: O 
documento "home.html" (que é um arquivo HTML) encontra-
se disponível através do protocolo HTTP, residente no domínio 
"www.nce.ufrj.br", acessível através do diretório 
"/cursos/htmlbasico/". (NCE – UFRJ) 
 
10 06/10/2014 
Endereço relativo x endereço absoluto 
• O endereço absoluto é a informação para a localização do 
recurso de forma independente da página atual (protocolo + 
domínio + caminho). 
• O endereço relativo é a informação para a localização do 
recurso a partir da página atual. 
• Exemplos: 
• absoluto: 
 <a href="http://www.nce.ufrj.br/cursos/inscricao.htm">Inscrição</a> 
• relativo: 
 <a href="inscricao.htm">Inscrição</a> 
 (NCE – UFRJ) 
 
11 06/10/2014 
Localizando um computador 
• Localizando um computador na rede 
– URL (Uniform Resource Locator) 
• Localizador de Recursos Uniforme 
– Servidores de Nomes 
• Se o primeiro servidor não contiver o endereço, 
ele encaminha a um servidor que esteja mais 
acima na hierarquia 
– http://meuServidor/meuCaminho/meuArquivo.jsp 
12 06/10/2014 
Browser 
• Browser é um programa criado para permitir a 
navegação pela web, sendo capaz de processar 
diversas linguagens, como HTML, ASP, PHP. Sua 
interface vai variar de acordo com a marca, onde 
quem escolhe é o usuário. 
• O browser é responsável pela comunicação com os 
servidores, é ele que processa os dados recebidos 
pelos servidores da Internet e processa as respostas 
para o usuário. 
• O primeiro browser foi lançado em 25 de dezembro 
de 1990 . 
06/10/2014 13 
Navegadores Web 
• Navegadores (browsers): 
– Internet Explorer 
– Mozzila Firefox 
– Netscape 
– Safari (Apple) 
– Google Chrome 
– Opera (Opera Software) 
– HotJava 
– Outros 
 
14 06/10/2014 
Comunicação na Internet 
• Protocolos de Comunicação 
– Protocolo TCP/IP 
– Protocolos HTTP, FTP, SMTP 
• Construindo Páginas (HTML) 
• Remessa de Conteúdo Estático 
• Transferindo Conteúdo Dinâmico 
 
15 06/10/2014 
Protocolos de Comunicação 
• HTTP (HyperText Transfer Protocol) 
– Transfere imagens, sons e texto 
 
• FTP (File Transfer Protocol) 
– Faz download de arquivos 
 
• SMTP (Simple Mail Transfer Protocol) 
– Envia mensagens de correio na internet 
 
16 06/10/2014 
Página Web 
• Abra uma página Web 
• Clique com o botão direito sobre a página 
• Selecione Exibir Código-Fonte 
• O código HTML que descreve a página será 
exibido. 
• Um arquivo com o código HTML tem 
geralmente uma terminação .htm ou .html. 
• Outros arquivos contendo código HTML 
podem ter terminação .asp, .jsp e outras. 
17 06/10/2014 
Linguagem HTML 
• Essa linguagem foi desenvolvida em 1992 por Tim 
Berners Lee e Robert Caillau no CERN, que é o Centro 
Europeu de Pesquisas de Física de Partículas. O 
HTML é um exemplo do SGML (Standard Generalized 
Markup Language). Originalmente o HTML definia 
estritamente a estrutura lógica de um documento, e 
não a sua aparência física. Mas, com a pressão dos 
usuários (principalmente da indústria), as versões 
posteriores do HTML foram forçadas a prover cada 
vez mais e mais controle da aparência do 
documento. 
18 06/10/2014 
Linguagem HTML 
• Tags básicas do HTML 
• Formatação de caracteres 
• World Wide Web Consortium (W3C) 
• CSS (Cascading Style Sheet) 
• Definindo fontes com o CSS 
• Manipulando imagens (pag040.htm) 
19 06/10/2014 
HTML 
• HTML 
– Hypertext Markup Language (Linguagem de marcação de 
hipertexto) 
– Linguagem de marcação (que contém elementos que 
delimitam um determinado conteúdo para definir o seu 
papel ou significado dentro do texto) usada para estruturar 
páginas web. 
– Os documentos HTML são simples arquivos de texto que 
contêm “tags de marcação” . Essas etiquetas definem os 
elementos da linguagem HTML e os seus conteúdos. 
 
20 06/10/2014 
Tags básicas do HTML 
• Exercícios com HTML: 
– Primeira página 
– Inserindo títulos 
– Definindo parágrafos 
– Alinhando textos 
– Comentários 
 
21 06/10/2014 
Definindo fontescom o CSS 
• Exercícios com HTML: 
– Definindo a fonte para o documento 
– Cores e tamanhos do fonte 
 
22 06/10/2014 
Tags HTML 
• Uma tag é uma marca que será interpretada 
pelo navegador (browser). 
• Exemplo: 
Início: <html> 
Fim: </html> 
Se o navegador não identificar uma tag, ele ignora 
sem dar nenhuma mensagem de erro. 
Pode-se usar o Bloco de Notas para digitar os 
comandos em HTML. 
OBS.: O HTML não é sensível ao contexto. 
23 06/10/2014 
Estrutura básica de uma página 
<html> 
<!-- início do código HTML --> 
<head> 
<!– definição do cabeçalho --> 
</head> 
<body> 
<!– definição do corpo da página --> 
</body> 
</html> 
 24 06/10/2014 
Elementos 
• Elemento 
– Um elemento é uma estrutura semântica, 
composta de: tag de abertura, conteúdo e tag de 
fechamento. 
Um parágrafo, por exemplo, é um elemento. Da 
seguinte forma: 
<p>Os estudantes representam uma parcela 
importante de uma sociedade.</p> 
Ao encontrar essa estrutura, um user-agent vai 
entendê-la como sendo um parágrafo. 
25 06/10/2014 
Tags 
• Tag é um código usado para marcar o início e, onde 
for requerido, o fim de um elemento HTML. Há, 
como exposto acima, tags de abertura e de 
fechamento. Uma tag de abertura é representada 
por um sinal de menor (<), um nome de elemento 
HTML, e um sinal de maior (>) (ex. <p>) e deve ser 
colocada imediatamente antes do início do conteúdo 
do elemento. Uma tag de fechamento se diferencia 
de uma de abertura apenas por uma barra (/) antes 
do nome do elemento (ex. </p>) e deve ser colocada 
imediatamente após o fim do conteúdo do elemento. 
26 06/10/2014 
Atributos 
• Atributos servem para definir uma propriedade de um elemento HTML. Os 
atributos HTML devem ser colocados sempre na tag de abertura, logo 
após o nome do elemento, precedido de um espaço e é composto de um 
nome de atributo, um sinal de igual (=) e um valor de atributo, cercado por 
aspas duplas (") ou simples (‘) 
Um bom exemplo de atributo é o id, que serve para identificar, de maneira 
única, um elemento dentro de um documento HTML. Exemplo: 
<p id="nome"> 
Outro bom exemplo é o atributo href, usado para definir uma referência 
de hipertexto (link) em um elemento A ou LINK. Exemplo: 
<a href="http://brunotorres.net/"> 
A “tag alt” referida no início do texto é, na verdade, um atributo, usado 
para definir um texto, que deve substituir uma imagem, caso a mesma não 
esteja disponível ou não seja suportada pelo user-agent (alt é abreviatura 
de “alternate”, que significa “substituto” e não “alternativo”, como se 
pensa em geral). Exemplo: 
<img src="/img/bruno_um_milhao.jpg" alt="Foto do Bruno Torres com um 
milhão de dólares">. 27 06/10/2014 
User-agent 
• User-agent: 
– Uma aplicação que age como cliente em uma 
transação cliente-servidor feita sobre um 
determinado protocolo de rede. Na web esse 
protocolo é o HTTP e os user-agents são os 
browsers, crawlers, dispositivos móveis, leitores 
de tela, painéis em braile e qualquer outra 
aplicação usada por um usuário para navegar por 
páginas web. 
28 06/10/2014 
Crawler (rastreador) 
• Crawler (ou spider, ou robot) 
– Qualquer aplicação cuja função principal seja 
navegar automaticamente por páginas na web, 
seguindo hiperlinks (e usando os conteúdos 
dessas páginas para algum fim, como salvar seu 
conteúdo, ou retirar dele alguma informação 
específica). O exemplo clássico de crawler são os 
programas usados por sistemas de busca (como o 
Google) para indexar páginas na web. 
29 06/10/2014 
Exemplo de uma página 
<html> 
<!-- pag001.htm (comentário) --> 
<head> 
<title>Minha primeira página</title> 
</head> 
<body> 
Esta é uma página web. Oi, tudo bem? 
</body> 
</html> 
30 06/10/2014 
Exemplo 2 
<html> 
 <!-- pag002.htm --> 
 <head> 
 <title>Minha primeira página</title> 
 </head> 
 <body> 
 
 <b>Esta é uma página web</b> 
 
 </body> 
</html> 
31 06/10/2014 
Exemplo 3 
<html> 
 <!-- pag003.htm --> 
 <head> 
 <title>Como definir a cor de fundo da página</title> 
 </head> 
 <body bgcolor="yellow"> 
 
 <b>Esta é uma página web</b> 
 
 </body> 
</html> 
32 06/10/2014 
Exemplo 4 
<html> 
 <!-- pag004.htm --> 
 <head> 
 <title>Como definir a cor do texto da página</title> 
 </head> 
 <body bgcolor="blue" text="yellow"> 
 
 <b>Esta é uma página web</b> 
 
 </body> 
</html> 
33 06/10/2014 
Exemplo 5 
<html> 
 <!-- pag005.htm --> 
 <head> 
 <title>Como definir a cor do texto da página usando o CSS</title> 
 <style type="text/css"> 
 
 body {background-color:red; color:white} 
 
 </style> 
 </head> 
 <body> 
 Esta é uma página web que tem um fundo vermelho e texto em branco. 
 </body> 
</html> 
34 06/10/2014 
Conteúdo do arquivo pag007.htm: 
 
<html> 
<!-- pag007.htm --> 
<head> 
<title>Como usar um arquivo CSS externo</title> 
 
 <link href="estilos/estilo01.css" rel="stylesheet" type="text/css"> 
 
</head> 
<body> 
 
<h1>Esta página usa um arquivo CSS externo.</h1> 
 
</body> 
</html> 
 
Conteúdo do arquivo estilo01.css: 
 
body {background-color:red; color:white;} 
 
h1,h2 {color: yellow} 
35 06/10/2014 
Conteúdo do arquivo pag008.htm: 
 
<html> 
<!-- pag008.htm --> 
<head> 
<title>Como inserir títulos e cabeçalhos em uma página web</title> 
 
</head> 
<body> 
 
<h1>Este é o cabeçalho 01</h1> 
<h2>Este é o cabeçalho 02</h2> 
<h3>Este é o cabeçalho 03</h3> 
<h4>Este é o cabeçalho 04</h4> 
<h5>Este é o cabeçalho 05</h5> 
<h6>Este é o cabeçalho 06</h6> 
<h7>Este é o cabeçalho 07</h7> 
 
</body> 
</html> 
36 06/10/2014 
Conteúdo do arquivo pag010.htm: 
 
<html> 
<!-- pag010.htm --> 
<head> 
<title>Como alinhar o texto de um título</title> 
 
</head> 
 
<style type="text/css"> 
 
 h2 {text-align: center} 
 h3 {text-align: right} 
 
</style> 
<body> 
 <h2>Este é um título</h2> 
 <h2>Este é outro título</h2> 
 <h3>Este é um novo título</h3> 
 <h3>Mais um título</h3> 
 
</body> 
</html> 37 06/10/2014 
Formulários 
• Utilizados para envio de informações do 
cliente para o servidor. 
• Um formulário deve ser definido dentro da 
página HTML entre as tags <body> e </body> 
 
38 06/10/2014 
Formulário básico 
• Definindo um formulário: 
 <form> 
 Digite seu nome:<br/> 
 <input type=“text” name=“nome” /><br/> 
 <input type=“submit” value=“Enviar” /> 
 </form> 
 
• Exemplo: exemplo08.htm 
39 06/10/2014 
<html> 
<!-- exemplo8.htm --> 
<head> 
<title>Como definir um formulário</title> 
 <style type="text/css"> 
 body {background-color:red; color:white} 
 </style> 
</head> 
<body> 
 Esta é uma página web com um formulário. 
 <form> 
 Digite seu nome:<br/> 
 <input type=“text” name=“nome” /><br/> 
 <input type="submit" value="Enviar!" /> 
 </form> 
</body> 
</html> 
40 06/10/2014 
<html> 
<!-- pag012.htm --> 
<head> 
<title>Como criar parágrafos numa página</title> 
</head> 
<style type="text/css"> 
 body {background-color:beige; color:black} 
 p {text-align: justify} 
 h2 {text-align: center} 
</style> 
<body> 
<h2>A dificuldade de aprender</h2> 
<p>Sempre que quisermos aprender alguma coisa teremos que nos esforçar 
para que isso seja possível. Devemos sempre lembrar que muitas vezes não 
poderemos dispor de um professor para tal finalidade.</p> 
<h2>Os professores fundadores do curso de Computação da UFS</h2> 
<p>Quando o curso de Bacharelado em Ciência da Computaçãofoi criado só existiam quatro professores para ministrarem as disciplinas:<b><i> 
<br/>Raimundo Machado Costa,<br/>Antônio Monteiro Freire,<br/>Ângela Maria 
Carvalho Souza e<br/>Ana Rosimere Soares.</i></b> 
</p> 
</body> 
</html> 
41 06/10/2014 
Formatando Fontes com o CSS 
<html> 
<!-- Exemplo9.htm --> 
<head> 
 <title>Definindo o tamanho da fonte com o CSS</title> 
 <style type="text/css"> 
 body {font-family: verdana; color:black; font-size:150%} 
 h1{color:green} 
 p{font-size:40} 
 </style> 
 </head> 
<body> 
 <h1>Cabeçalho colorido</h1><br/> 
 Este é um parágrafo normal com fonte 150% do tamanho normal<br/> 
 <p>Este é um parágrafo especial com fonte 40</p> 
</body> 
</html> 
42 06/10/2014 
Links 
• Link 
– Um link (ou hyperlink, ou web link) é a conexão 
entre um documento e outro. 
– Os links são representados pelo elemento <a>. 
– Esse elemento <a> tem uma propriedade href. 
• Propriedade href 
– Exemplo: 
 <a href=“http://www.meusite.com/pagina.htm”> 
clique aqui:</a> 
43 06/10/2014 
Hiperlink 
• Hiperlink (ou simplesmente link) 
– Elemento básico do hipertexto, um link caracteriza 
uma referência a um documento externo. Em 
HTML, os links são definidos usando o elemento 
“a” que contém uma referência, no caso uma URI, 
em seu atributo href. 
 <a href="exemplo4.htm">Página Um</a> 
• Exemplos: pag035.htm, pag033.htm 
44 06/10/2014 
Links 
• Referência relativa 
– <a href=“../pagina.htm”>Pagina em um nivel 
acima</a> 
– <a href=“../../pagina.htm”>Pagina em dois niveis 
acima</a> 
– Cada nível acima é representado por “../” 
• Referência absoluta 
– <a href=“http://www.meusite.com/pagina.htm”> 
clique aqui:</a> 
 Especifica o caminho completo. 
 
45 06/10/2014 
Links 
• Efeitos visuais 
– A propriedade hover produz efeitos visuais em um 
link. 
– Exemplo: 
 <style type=“text/css”> 
 a: hover {color:red} 
 </style> 
 
Exemplo: pag036.htm 
 
46 06/10/2014 
JavaScript 
• JavaScript é uma linguagem de programação 
interpretada. Foi originalmente implementada como 
parte dos navegadores web para que scripts pudessem 
ser executados do lado do cliente e interagissem com o 
usuário sem a necessidade deste script passar pelo 
servidor. (Wikipédia) 
• É atualmente a principal linguagem para programação 
client-side em navegadores web. Foi concebida para ser 
uma linguagem script com orientação a objetos baseada 
em protótipos, tipagem fraca e dinâmica, e funções de 
primeira classe. (Wikipédia) 
47 06/10/2014 
Usando JavaScript 
• O JavaScript é uma linguagem interpretada 
utilizada para enviar código ao navegador. 
• O browser é quem deverá interpretar e 
executar o código. 
• Os navegadores normalmente bloqueiam o 
conteúdo em script. 
• O JavaScript é sensível ao contexto. 
 
48 06/10/2014 
Usando JavaScript 
• O JavaScript utiliza uma sintaxe igual à de 
C/C++ e do Java. 
• Para um script poder ser executado em um 
browser é necessário que o usuário dê a sua 
permissão. 
• Serviços de validação de dados podem ser 
efetuados no cliente com script. 
• As variáveis em JavaScript não têm tipo. 
 
49 06/10/2014 
Usando JavaScript 
• Um código script pode ser colocado dentro do 
código HTML de uma página a ser enviada 
para um cliente, usando as seguintes tags: 
 
 <SCRIPT LANGUAGE=“JavaScript”> 
 
 Código JavaScript 
 
 </SCRIPT> 
 
50 06/10/2014 
<html> 
<!-- JScript001.htm --> 
<head><title>Trabalhando com JavaScript</title> 
</head> 
<body> 
<SCRIPT LANGUAGE="JavaScript"> 
 document.write(“Este é o meu primeiro 
 JavaScript”); 
</SCRIPT> 
</body> 
</html> 
51 06/10/2014 
<html> 
<!-- JScript002.htm --> 
<head><title>Trabalhando com JavaScript</title> 
</head> 
<body> 
<SCRIPT LANGUAGE="JavaScript"> 
 document.write(“<b>Este é o meu primeiro 
 JavaScript. Agora em negrito</b>”); 
</SCRIPT> 
</body> 
</html> 
52 06/10/2014 
<html> 
<!-- JScript003.htm --> 
<head><title>Trabalhando com JavaScript</title> 
</head> 
<body> 
<SCRIPT LANGUAGE="JavaScript"> 
 var Um = 20; var Dois = 30; 
 alert(Um+Dois); 
</SCRIPT> 
</body> 
</html> 
53 06/10/2014 
<html> 
<!-- JScript007.htm --> 
<head><title>Trabalhando com JavaScript</title> 
</head> 
<body> 
<SCRIPT LANGUAGE="JavaScript"> 
 // Este é um comentário de linha 
 var Num = 10; 
 if (Num == 10){ 
 alert(“O valor de Num = “+Num); 
 /* Este é um comentário 
 de várias linhas */ 
 document.write(“O valor de Num = “, Num);} 
</SCRIPT> 
</body> 
</html> 
54 06/10/2014 
<html> 
<!-- JScript009.htm: Soma de dois números --> 
<head><title>Trabalhando com JavaScript</title> 
<style type="text/css"> 
 body {background-color:beige; font-family: verdana; color:black; 
 font-size: 80%} 
</style> 
<!-- O local correto para escrever uma função é na área de cabeçalho 
--> 
<SCRIPT LANGUAGE="JavaScript"> 
 function Calcular(){ 
 /* eval() -> função que transforma uma string em número */ 
 var primeiroNum = eval(document.form1.text1.value); 
 var segundoNum = eval(document.form1.text2.value); 
 var resultado = primeiroNum+segundoNum; 
 alert(“Soma = “+resultado); 
} 
</SCRIPT> 
55 06/10/2014 
</head> 
<body> 
<form name="form1"> 
 Primeiro número: 
 <input type="text" name="text1"><br> 
 Segundo número: 
 <input type="text" name="text2"><br> 
 Clique aqui para calcular a soma: 
 <input type="button" value="Calcular“ 
 onClick="Calcular()"> 
</form> 
</body> 
</html> 
56 06/10/2014 
Usando caixa de escolha: 
Página 1 
<html> 
<!-- JScript014.htm --> 
<head><title>Trabalhando com JavaScript</title> 
</head> 
<body> 
 
<form name="form1"> 
Escolha um Estado e veja sua capital:<br /> 
<select name="estados" onChange="Ver_capital()"> 
 <option>Selecione um Estado</option> 
 <option value="Sergipe">Sergipe</option> 
 <option value="Alagoas">Alagoas</option> 
 <option value="Bahia">Bahia</option> 
 <option value="Pernambuco">Pernambuco</option> 
 <option value="Paraíba">Paraíba</option> 
</select><br /><br /> 
Esta é a Capital do Estado escolhido:<br /> 
<input type="text" name="capital"> 
</form> 
57 06/10/2014 
Página 2 
 
<SCRIPT LANGUAGE="JavaScript"> 
 function Ver_capital(){ 
 var Estado= document.form1.estados.value; 
 switch(Estado){ 
 case 'Sergipe': { 
 document.form1.capital.value = 'Aracaju'; 
 break; 
 } 
 case 'Alagoas': { 
 document.form1.capital.value = 'Maceió'; 
 break; 
 } 
 case 'Bahia': { 
 document.form1.capital.value = 'Salvador'; 
 break; 
 } 
 
58 06/10/2014 
Página 3 
 
 case 'Pernambuco': { 
 document.form1.capital.value = 'Recife'; 
 break; 
 } 
 case 'Paraíba': { 
 document.form1.capital.value = 'Joao Pessoa'; 
 break; 
 } 
 } // fim do switch 
 } // fim da função 
</SCRIPT> 
 
</body> 
</html> 
59 06/10/2014 
Usando o comando while: 
 
<html> 
<!-- Script015.htm --> 
<head><title>Trabalhando com JavaScript</title> 
</head> 
<body> 
<!-- Comando while --> 
<SCRIPT LANGUAGE="JavaScript"> 
 var x = 1 
 document.write(“<b>Impressão de linhas numeradas usando o 
 comando while</b><hr>”); 
 while (x<=10) {document.write(“Esta é a linha de texto nº ”+ x + “<br>”); 
 x++; 
 } 
 document.write(“<hr>”); 
</SCRIPT> 
</body> 
</html> 
60 06/10/2014 
Usando o comando for: 
 
<html> 
<!-- Script016.htm --> 
<head><title>Trabalhando com JavaScript</title> 
</head> 
<body> 
<!-- Comando while --> 
<SCRIPT LANGUAGE="JavaScript"> 
 var x; 
 document.write(“<b>Impressão de linhas numeradas usando o 
 comando for</b><hr>”); 
 for (x=1; x<11; x++) 
 document.write('Esta é a linha de texto nº '+x+'<br />'); 
 document.write('<hr>'); 
</SCRIPT> 
</body> 
</html> 
61 06/10/2014 
Usando função com argumentos: 
 
Página 1 
<html> 
<!-- JScript018.htm: Soma de dois números --> 
<head><title>Trabalhando com JavaScript</title> 
<style type="text/css"> 
 body {background-color:beige; font-family: verdana; color:black; 
 font-size: 80%} 
</style> 
<!-- O local correto para escrever uma função é na área de cabeçalho --> 
<SCRIPT LANGUAGE="JavaScript"> 
 function Soma(x, y){ 
 var Resultado = x + y; 
 return Resultado; 
} 
</SCRIPT> 
62 06/10/2014 
Página 2 
<SCRIPT LANGUAGE="JavaScript"> 
 function Exibir(){ 
 var Um = eval(document.form1.text1.value); 
 var Dois = eval(document.form1.text2.value) 
 alert('Soma = '+Soma(Um, Dois)); // Chama a função 
} 
</SCRIPT> 
</head> 
<body> 
<form name="form1"> 
<h2>Chamando a função com argumentos</h2><br /><hr /> 
<h4>Soma de dois números:</h4><br /> 
Primeiro número: 
<input type="text" name="text1"><br /><br /> 
Segundo número: 
<input type="text" name="text2"><br /><br /> 
<!--JavaScrit:Exibir() ->o link deverá executar um código JavaScript --> 
<a href="JavaScript:Exibir()">Clique aqui para calcular a soma!</a> 
</form></body> 
</html> 
63 06/10/2014 
Manipulando elementos com JavaScript 
• Nós podemos manipular qualquer elemento da 
página HTML através do JavaScript. 
Exemplo: 
<html> 
<!-- JScript019.htm: Altera um botão --> 
<head><title>Trabalhando com JavaScript</title> 
<style type="text/css"> 
 body {background-color:beige; font-family: verdana; 
 color:black; font-size: 80%} 
</style> 
 
64 06/10/2014 
<SCRIPT LANGUAGE="JavaScript"> 
 function Alterar(){ 
 document.meuForm.meuBotao.value="Você me clicou!"; 
} 
</SCRIPT> 
</head> 
<body> 
 
<form name="meuForm"> 
 
<h2>Alterando a mensagem de um botão</h2><br /><hr /> 
<input type="button" name="meuBotao" value="Clique aqui" 
onClick="Alterar()"/><br /><br /> 
 
</form> 
 
</body> 
</html> 
65 06/10/2014 
XML 
• O que é XML? 
– XML (eXtensible Markup Language) 
– XML é uma linguagem de marcação semelhante 
ao HTML. 
– XML foi projetada para transportar e armazenar 
dados. 
– As tags XML não são predefinidas. O programador 
deve definir as suas próprias tags. 
– XML foi projetada para ser auto-descritiva. 
– XML tem o seu uso recomendado pelo W3C. 
66 06/10/2014 
XML 
• Qual a diferença entre XML e HTML? 
– XML não substitui o HTML. 
– XML e HTML têm objetivos diferentes: 
• XML foi projetada para transportar e armazenar dados 
com o foco nos dados em si. 
• HTML foi projetada para exibir dados com o foco na 
maneira de visualizar os dados. 
– XML não produz uma ação direta. Foi criada para 
estruturar, armazenar e transportar informações. 
67 06/10/2014 
Comparações entre HTML e XML 
• HTML e XML são primos. Eles derivam da mesma 
inspiração, o SGML (Standard Generalized Markup 
Language). Ambos identificam elementos em uma 
página e ambos utilizam sintaxes similares. Se você é 
familiar com HTML, também o será com o XML. A 
grande diferença entre HTML e XML é que o HTML 
descreve a aparência e ações para apresentação de 
uma página na rede enquanto o XML não descreve 
nem aparência e nem ações, mas sim o que cada 
trecho de dados é ou representa! Em outras 
palavras, o XML descreve o conteúdo do documento! 
 68 06/10/2014 
Comparações entre HTML e XML 
• As regras de formatação para documentos XML são 
muito mais rígidas do que para documentos HTML. 
Uma tag esquecida ou um atributo sem aspas torna 
o documento inutilizável, enquanto que no HTML 
isso é tolerado. As especificações oficiais do XML 
determinam que as aplicações não podem tentar 
adivinhar o que está errado em um arquivo (no 
HTML isso acontece), mas sim devem parar de 
interpretá-lo e reportar o erro. 
69 06/10/2014 
Comparações entre HTML e XML 
• O XML provê uma representação estruturada dos dados 
que mostrou ser amplamente implementável e fácil de 
ser desenvolvida. 
• Implementações industriais na linguagem SGML 
(Standard Generalized Markup Language) mostraram a 
qualidade intrínseca e a força industrial do formato 
estruturado em árvore dos documentos XML. 
• O XML é um subconjunto do SGML, o qual é otimizado 
para distribuição através da web, e é definido pelo Word 
Wide Web Consortium(W3C), assegurando que os dados 
estruturados serão uniformes e independentes de 
aplicações e fornecedores. 
 
70 06/10/2014 
Comparações entre HTML e XML 
• O XML provê um padrão que pode codificar o 
conteúdo, as semânticas e as esquematizações para 
uma grande variedade de aplicações desde as mais 
simples até as mais complexas. 
• O XML é sensível ao contexto. 
• O XML é muito usado em: 
– Transferência de dados na Web 
– Configuração de aplicativos 
– Armazenamento de informações 
 
71 06/10/2014 
XML 
• Exemplo de como guardar um recado para 
Pedro mandado por Maria: 
<recado> 
<para>Pedro</para> 
<de>Maria</de> 
<titulo>Lembrete</titulo> 
<conteudo>Não se esqueça do combinado para o 
fim de semana</conteudo> 
</recado> 
72 06/10/2014 
Regras para nomes XML 
• Regras para criar nomes usados em XML: 
– Podem conter letras, números e outros caracteres; 
– Não podem começar com dígitos ou caracteres de 
pontuação; 
– Não podem começar com as letras xml (ou XML 
ou Xml, etc). 
– Não podem conter espaços. 
73 06/10/2014 
Elementos e Atributos XML 
• Elementos XML podem conter atributos na tag 
de início a exemplo do HTML; 
• Tanto em HTML como em XML, os atributos 
provêm informações adicionais sobre os 
elementos. 
• Exemplos: 
<file type=“gif”>computer.gif</file> 
<pessoa sexo=“feminino”> 
74 06/10/2014 
Elementos versus Atributos 
• Atributo sexo: 
• <pessoa sexo=“feminino”> 
 <firstname>Ana</firstname> 
 <lastname>Santos</lastname> 
</pessoa> 
 
• Elemento sexo: 
• <pessoa> 
 <sexo>feminino</sexo> 
 <firstname>Ana</firstname> 
 <lastname>Santos</lastname> 
</pessoa> 
 
 
75 06/10/2014 
Expandindo um elemento em XML 
 <recado> 
 <data> 
 <dia>10</dia> 
 <mes>03</mes> 
 <ano>2009</ano> 
 </data> 
 <para>Maria</para> 
 <de>Pedro</de> 
 <titulo>Recado</titulo> 
 <conteudo>Não esqueça do combinado!</conteudo> 
</recado> 
76 06/10/2014 
Parser XML 
• Todos os navegadores (browsers) modernos 
têm um parser que pode ser usado para ler e 
manipular um arquivo XML. 
• Todos os parsers lêm o arquivo XML e o 
convertem para um objeto XML DOM 
(Document Object Model). 
• O DOM enxerga o documento XML como uma 
estrutura em árvore. 
77 06/10/2014 
O Que é XML? 
<?xml version="1.0" > 
<livros> 
 <livro> 
 <ISBN>1234</ISBN> 
 <titulo>Inside XML</titulo> 
 <editora>New Riders</editora> 
 <edição>3ª</edição> 
 <autor> 
 <nome>Steven</nome> 
 <endereco>NY</endereco> 
 </autor> 
 <autor> 
 <nome>Holzner</nome> 
 <endereco>Miami</endereco></autor> 
 </livro> 
 <livro> ... </livro> 
</livros> 
ISBN 
 
titulo 
 
editora 
 
edição 
 
autor 
 
Steven 
 
Holzner 
 
endereco 
 
NY 
 
 Miami 
 
nome 
 
livro 
autor 
 
endereco 
 
nome 
 
livro 
livros 
 1234 
 
 Inside 
 XML 
 
 New 
 Riders 
 
 3ª 
 
Elemento Raiz 
Exemplo Documento XML 
78 06/10/2014 
O Que é XML? 
• Linguagem de Marcação-Descreve o conteúdo de um 
documento através de marcas . 
Horário Aula XML 
Wed, Jan 29, 2003 4:18 PM 
vvidal@lia.ufc.br 
eti-l@lia.ufc.b 
 
A aula começará as 19:45 
Documento sem Marcas 
<e-mail> 
 <head> 
 <subject> Horário Aula XML </subject> 
 <data> Wed, Jan 29, 2003 4:18 PM</data> 
 <from> vvidal@lia.ufc.br </from> 
 <to> eti-l@lia.ufc.br </to> 
 </head> 
 <body> A aula começará as 19:45 </body> 
</e-mail> 
Documento com Marcas 
79 06/10/2014 
XML DOM 
• O conteúdo do documento XML pode ser 
modificado ou deletado e novos elementos 
podem ser criados. 
• No exemplo que se segue, usaremos a 
referência DOM para acessar o texto do 
elemento <para>: 
• xmlDoc.getElementsByTagName(“para”)[0].childNodes[0].nodeValue 
80 06/10/2014 
XML DOM 
• Onde: 
– xmlDoc -> documento XML criado pelo parser 
– xmlDoc.getElementsByTagName(“para”)[0] -> 
primeiro elemento <para> 
– childNodes[0] -> primeiro nó filho do elemento 
<para> (o nó texto) 
– nodeValue -> o valor do nó (o texto existente) 
 
81 06/10/2014 
HTML DOM 
• O HTML DOM define uma maneira padrão 
para acessar e manipular documentos HTML 
usando JavaScript. 
• No exemplo seguinte é mostrado uma 
referência DOM que permite a troca do texto 
de um elemento HTML onde id=“para”: 
• Exemplo: 
 document.getElementById(“para”).innerHTML= 
82 06/10/2014 
HTML DOM 
• Onde: 
– Document -> documento HTML 
– getElementById(“para”) -> elemento HTML onde 
id=“para” 
– innerHTML -> o texto contido no elemento HTML 
83 06/10/2014 
XML 
• Exemplo do uso de um arquivo XML numa página HTML: 
– Definindo e exibindo um catálogo de CDs: 
• Título do CD 
• Cantor 
• País de origem 
• Gravadora 
• Preço 
• Ano da gravação 
• Vamos usar 3 arquivos: 
– Arquivo XML (define elementos e atributos e o uso do CSS) 
– Arquivo CSS (define como formatar os elementos) 
– Arquivo HTML (manipula o arquivo XML) 
84 06/10/2014 
XML DOM 
• O objeto DOM é o modelo dos objetos que 
formam a hierarquia de toda a estrutura de 
uma página Web. 
• Exemplo: 
• cursoXML: Exemp01 
– cd_catalog.xml 
– cd_catalog.css 
 
85 06/10/2014 
Arquivo XML: 
Página 1 
 
<?xml version="1.0" encoding="ISO-8859-1"?> 
<?xml-stylesheet type="text/css" href="cd_catalog.css"?> 
 
<CATALOG> 
 <CD> 
 <TITLE>Empire Burlesque</TITLE> 
 <ARTIST>Bob Dylan</ARTIST> 
 <COUNTRY>USA</COUNTRY> 
 <COMPANY>Columbia</COMPANY> 
 <PRICE>10.90</PRICE> 
 <YEAR>1985</YEAR> 
 </CD> 
 <CD> 
 <TITLE>Hide your heart</TITLE> 
 <ARTIST>Bonnie Tyler</ARTIST> 
 <COUNTRY>UK</COUNTRY> 
 <COMPANY>CBS Records</COMPANY> 
 <PRICE>9.90</PRICE> 
 <YEAR>1988</YEAR> 
 </CD> 
86 06/10/2014 
Página 2 
 
 <CD> 
 <TITLE>Asa Branca</TITLE> 
 <ARTIST>Luis Gonzaga</ARTIST> 
 <COUNTRY>Brasil</COUNTRY> 
 <COMPANY>Som Brasil</COMPANY> 
 <PRICE>15.00</PRICE> 
 <YEAR>1950</YEAR> 
 </CD> 
</CATALOG> 
87 06/10/2014 
Arquivo CSS -> cd_catalog.css 
 
CATALOG {background-color: #ffffff; 
 width: 100%;} 
 
CD {display: block;margin-bottom: 30pt;margin-left: 0;} 
 
TITLE {color: #FF0000;font-size: 20pt;} 
 
ARTIST {color: #0000FF;font-size: 20pt;} 
 
COUNTRY,PRICE,YEAR,COMPANY {display: 
 block;color: #000000;margin-left:20pt;} 
88 06/10/2014 
Página 1 
<html> 
<body> 
<b>Catalogo de CDs</b><br/><br/> 
<script type="text/javascript"> 
var xmlDoc=null; 
if (window.ActiveXObject) 
{// code for IE 
 xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
} 
else if (document.implementation.createDocument) 
{// code for Mozilla, Firefox, Opera, etc. 
 xmlDoc=document.implementation.createDocument("","",null); 
} 
else 
{ 
 alert('Your browser cannot handle this script'); 
} 
if (xmlDoc!=null) 
{ 
 xmlDoc.async=false; 
 xmlDoc.load("cd_catalog.xml"); 
 document.write("<table border='1'>"); 89 06/10/2014 
Página 2 
 
 var x=xmlDoc.getElementsByTagName("CD"); 
 for (i=0;i<x.length;i++) 
 { 
 document.write("<tr>"); 
 document.write("<td>"); 
 document.write( 
 x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); 
 document.write("</td>"); 
 document.write("<td>"); 
 document.write( 
 x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); 
 document.write("</td>"); 
 document.write("</tr>"); 
 } 
 document.write("</table>"); 
} 
</script> 
<br/><br/> 
Fim do catalogo. 
</body> 
</html> 90 06/10/2014 
Manipulando arquivos XML 
• JavaScript não manipula arquivos de Texto. 
• O máximo que se pode fazer é ler um arquivo 
XML utilizando elementos do DOM W3C. 
• Para gravar um arquivo XML que é do tipo 
texto teremos de recorrer ao Java. 
91 06/10/2014 
XSL 
• XSL (eXtensible Stylesheet Language) é usada 
na definição das regras para transformar XML 
em HTML. 
• A XSL pode ser usada para: 
– Transformar XML em HTML 
– Ordenar dados em documentos XML 
– Formatar dados XML 
 
92 06/10/2014 
XSL e XSLT 
• XSLT (eXtensible Stylesheet Language Transformations) é 
uma linguagem para transformação de documentos XML 
em documentos XHTML ou para outros documentos 
XML. 
• Quando a World Wide Web Consortium (W3C) produziu 
seu primeiro trabalho sobre XSL, a linguagem continha a 
sintaxe para transformação e para formatação em 
documentos XML. 
• Mais tarde, o Grupo de Trabalho da W3C dividiu o 
documento original em Recomendações separadas: XSLT 
e XSL-FO (eXtensible Stylesheet Language Formatting 
Objects) 
• Veja o exemplo com XSL: 
 
93 06/10/2014 
Exemplo XML/XSL 
• Exemplo: arqxml 
– cdcatalog.xml 
– cdcatalog.xsl 
 
06/10/2014 94 
<?xml version="1.0" encoding="ISO-8859-1"?> 
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?> 
<!-- Edited by XMLSpy® --> 
<catalog> 
 <cd> 
 <title>Empire Burlesque</title> 
 <artist>Bob Dylan</artist> 
 <country>USA</country> 
 <company>Columbia</company> 
 <price>10.90</price> 
 <year>1985</year> 
 </cd> 
 <cd> 
 <title>Hide your heart</title> 
 <artist>Bonnie Tyler</artist> 
 <country>UK</country> 
 <company>CBS Records</company> 
 <price>9.90</price> 
 <year>1988</year> 
 </cd> 
</catalog> 
95 06/10/2014 
<?xml version="1.0" encoding="ISO-8859-1"?> 
<!-- Edited by XMLSpy® --> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
 
<xsl:template match="/"> 
 <html> 
 <body> 
 <h2>My CD Collection</h2> 
 <table border="1"> 
 <tr bgcolor="#9acd32"> 
 <th>Title</th> 
 <th>Artist</th> 
 </tr> 
 <xsl:for-each select="catalog/cd"> 
 <tr> 
 <td><xsl:value-of select="title"/></td> 
 <td><xsl:value-of select="artist"/></td> 
 </tr> 
 </xsl:for-each> 
 </table> 
 </body> 
 </html> 
</xsl:template> 
</xsl:stylesheet> 
96 06/10/2014 
Servidores Web 
• Apache Tomcat 
• GlassFish• Internet Information Server – IIS 
• JBoss 
• Sun Web Server (J2EE) 
• Java 2 Plataform, Enterprise Edition - J2EE 
• Outros 
97 06/10/2014 
Servidor GlassFish 
• GlassFish é um servidor de aplicação open source liderado 
pela Sun Microsystems para a plataforma Java EE. Sua versão 
proprietária é chamada Sun GlassFish Enterprise Server. 
GlassFish é software livre. 
• GlassFish suporta todas as especificações da API Java EE, tais 
como JDBC, RMI, JavaMail, JMS, JMX etc, e define como 
coordená-las. GlassFish também suporta algumas 
especificações específicas para componentes Java EE, como 
Enterprise JavaBeans, conectores, servlets, portlets, JSF e 
diversas tecnologias de web services. Isto permite que 
desenvolvedores criem aplicações corporativas portáveis, 
escaláveis e fáceis de integrar com código legado. (Wikipédia) 
98 06/10/2014 
Servidor GlassFish 
• Sun GlassFish Enterprise Server, previamente denominado Sun 
Java System Application Server é um servidor de aplicações 
rápido e fácil de usar, baseado na Plataforma Java e tecnologia 
Enterprise Edition (Java EE) para o desenvolvimento e entrega de 
aplicações e serviços web. 
• O Sun GlassFish Enterprise Server, a implementação de 
referência Java EE, é um servidor de aplicações de código aberto 
de nível corporativo que oferece desempenho, confiabilidade, 
produtividade e facilidade de uso superiores a uma fração do 
custo de servidores de aplicações proprietários. 
• Como a implementação de referência Java EE é construída em 
código aberto, o GlassFish elimina a dependência de 
fornecedores, e permite que clientes aproveitem os mais 
recentes padrões e inovações do setor. 
 99 06/10/2014 
O servidor Tomcat 
• O Tomcat é um container WEB da Apache, mas por não suportar 
tecnologias como o EJB, faz alguns desenvolvedores desistirem de 
utilizá-lo. Os seus defensores alegam que justamente por não 
necessitar implementar funções para suportar EJB, o Tomcat é mais 
rápido de ser iniciado, o que gera um ganho de produtividade em 
tempo de desenvolvimento. 
• Processa requisições de clientes usando as tecnologias JSP e 
Servlets. 
• Apache é o mais utilizado servidor web no mundo desde 1996. Ele 
pode ser instalado nos sistemas operacionais mais usados como: 
Unix e Windows. 
• O objetivo do Apache é fornecer um servidor seguro, eficiente e 
extensível que fornece serviços HTTP em sincronia com os padrões 
atuais de HTTP. 
100 06/10/2014 
Servidor JBoss 
• O JBoss é um servidor de aplicação e servidor WEB, este é 
mais completo e robusto. É utilizado por grandes empresas 
por possibilitar uma boa distribuição de uma aplicação e um 
bom balanceamento de carga. Este servidor começou a ser 
desenvolvido por uma rede de colaboradores, porém, em 
2006, a RedHat anunciou a sua aquisição. Atualmente, a 
maior crítica sobre o JBoss é o tempo gasto para este ser 
iniciado, devido a sua gama de funcionalidades, além de seus 
milhares de XML de configuração. Este tempo de start e de 
configuração tem um grande reflexo no tempo de 
desenvolvimento. 
101 06/10/2014 
Servidor MS-IIS 
• MS- IIS (Internet Information Server) é um servidor 
web criado pele Microsoft, ele só pode ser instalado nos 
sistemas operacionais do tipo Windows. 
• A função de Servidor Web (IIS) no Windows Server 2012 
oferece uma plataforma segura, fácil de gerenciar, 
modular e extensível para hospedagem confiável de 
sites, serviços e aplicativos. Com o IIS 8, você pode 
compartilhar informações com usuários pela Internet, 
por uma intranet ou por uma extranet. O IIS 8 é uma 
plataforma Web unificada que integra o IIS, o ASP.NET, os 
serviços FTP, o PHP e o WCF (Windows Communication 
Foundation). 
 
102 06/10/2014 
Netscape Enterprise Server 
• Netscape Enterprise Server foi um servidor 
web desenvolvido originalmente pela 
Netscape Communications Corporation. O 
produto já foi renomeado para Sun Java 
System Web Server, quando o produto foi 
adquirido pela Sun Microsystems. A Sun 
liberou o código do Netscape Enterprise 
Server sob a licença BSD (Berkeley Software 
Distribution) em janeiro de 2009. 
06/10/2014 103 
J2EE 
• O nome J2EE era usado nas versões mais antigas, até a 1.4. 
Hoje, o nome correto é Java EE, por uma questão de 
marketing, mas você ainda vai encontrar muitas referências 
ao antigo termo J2EE. 
• O Java EE (Java Enterprise Edition) consiste de uma série de 
especificações bem detalhadas, dando uma receita de como 
deve ser implementado um software que faz cada um desses 
serviços de infraestrutura. (Caelum) 
• A última versão disponível da especificação do Java EE é a 
versão 7, lançada em 12 de junho de 2013. É uma versão 
ainda muito recente, com poucas ferramentas e servidores 
disponíveis. A versão mais usada no mercado é a versão 6, de 
2009. (Caelum) 
 
104 06/10/2014 
Servidor Local 
• Para saber se o servidor Tomcat ou GlassFish 
está rodando, abra o navegador e vá ao 
endereço: 
 http://localhost:8080/ 
 ou 
 http://127.0.0.1:8080/ 
 
• Esses servidores usam a porta 8080 como 
default. 
 
 
105 06/10/2014 
Servidor web 
• Um servidor web rodando num computador 
permite que haja uma transação 
cliente/servidor. 
• A máquina local possui a identificação http: 
localhost ou 127.0.0.1 
06/10/2014 106 
Servidor Local 
• Para acessar uma página que está localizada 
no computador do usuário: 
 http://localhost:8080/página.jsp 
 ou 
 http://127.0.0.1:8080/página.jsp 
 A porta 8080 é usada pelo servidor Tomcat. 
107 06/10/2014 
O servidor Tomcat 
• Obtendo o Tomcat 
– Desenvolvido pela fundação Apache, no projeto 
Jakarta, tendo código aberto e é gratuito. Pode ser 
obtido em 
 http://jakarta.apache.org 
Obs.: O Tomcat já está contido no NetBeans 
 
108 06/10/2014 
O servidor Tomcat 
• Após a sua instalação, deve-se definir as 
seguintes varáveis de ambiente: 
– JAVA_HOME 
• c:\Arquivos de programas\Java 
– CATALINA_HOME 
• c:\Tomcat 
• OBS.: Quando instalado dentro do 
NetBeans essas definições são feitas pelo 
instalador. 
109 06/10/2014 
O servidor Tomcat 
• Para usar o Tomcat sem o Netbeans, cria-se o 
código da aplicação e copia a pasta da mesma 
para o diretório do Tomcat, colocando na 
pasta webapps, que é a pasta default para o 
Tomcat criar o contêiner com a aplicação. 
 
110 06/10/2014 
Servidor Web 
• Diretório raiz do servidor. 
• Todo servidor tem uma pasta default onde são 
colocados os aplicativos a serem utilizados. 
• Todo servidor tem nesta pasta uma página 
default chamada: 
– index.tipo ou default.tipo, onde tipo pode ser: 
htm, jsp, asp, etc. 
• Quando um cliente acessa o servidor Web, 
esse acesso é desviado para esta pasta 
default. 
 
111 06/10/2014 
O servidor Tomcat 
• O Tomcat porém não implementa um 
container EJB (aplicações em 3 camadas). 
• Para aplicações que utilizam Enterprise 
JavaBeans (EJB), você deve procurar um 
servidor de aplicações completo, como o 
GlassFish ou JBoss, entre outros. 
 
112 06/10/2014 
Solicitações e respostas 
• Solicitação (request) – cliente 
– Encapsula as informações enviadas pelo 
navegador em cada solicitação. 
• Resposta (response) – servidor web 
– Responsável pelo envio de informações ao 
navegador, na forma de uma página HTML. 
 
113 06/10/2014 
Tecnologias Web 
• Aplicativos CGI (Common Gateway Interface) - 
exe 
• Aplicativos ISAPI (NSAPI) - (Internet Server 
Application Programming Interface) – dll 
– ISAPI é usada no Internet Explorer 
– NSAPI é usada no Netscape 
• Tecnologia ASP (Active Server Pages) 
• Tecnologia JSP (Java Server Pages) 
 
114 06/10/2014 
CGI x ISAPI 
• Características:CGI ISAPI 
Programa .EXE .DLL 
Web Server IIS, Apache, Sun, ... IIS 
Processo Cada requisição, é 
um processo diferente 
Todas as requisições 
ficam no mesmo 
processo do servidor 
115 06/10/2014 
CGI x ISAPI 
 
 
CGI ISAPI 
Vantagens -facilidade de 
implementação 
- portabilidade do 
aplicativo 
- vários servidores web 
- mais rápido 
- menos overhead 
- usa menos hardware 
Desvantagens - usa mais hardware 
- mais lento 
- problema na DLL pode 
gerar problema no servidor 
- Específico para Windows 
IIS 
116 06/10/2014 
Tecnologias Web 
• Aplicações distribuídas e multicamada: 
– Camada do cliente 
– Camada da Web 
– Camada de negócios 
– Camada de dados persistentes 
• Tecnologia DotNet (IIS e C#) 
• Tecnologia J2EE (Java) 
 
117 06/10/2014 
Usando o NetBeans 
• The NetBeans IDE is a free, open-source 
Integrated Development Environment for 
software developers. The IDE runs on many 
platforms including Windows, Linux, Solaris, 
and the MacOS. It is easy to install and use 
straight out of the box. The NetBeans IDE 
provides developers with all the tools they 
need to create professional cross-platform 
desktop, enterprise, web and mobile 
applications. 
 
118 06/10/2014 
Usando o NetBeans 
• O NetBeans IDE é um software livre de código 
aberto voltado para desenvolvedores de 
softwares. O IDE roda em muitas plataformas 
incluindo Windows, Linux, Solaris e MacOS. É 
muito fácil de instalar e de uso direto. O 
NetBeans IDE provê o desenvolvedor com 
todas as ferramentas necessárias para criar de 
modo profissional aplicações normais, 
aplicações enterprise, web e móveis. 
 
119 06/10/2014 
Aplicações desktop no NetBeans 
• Criando uma aplicação desktop simples para 
imprimir uma mensagem na console 
(HelloWordApp). 
 
• Criando uma aplicação desktop simples para 
calcular uma soma (Exemplo1). 
 
120 06/10/2014 
Aplicação Desktop 
• Diretórios de uma aplicação desktop: 
– Web Pages 
– Source Packages 
– Test Packages 
– Libraries 
– Test Libraries 
121 06/10/2014 
HelloWordApp 
• public class HelloWorldApp { 
• 
• /** Creates a new instance of HelloWorldApp */ 
• public HelloWorldApp() { 
• } 
• public static void main(String[] args){ 
• System.out.println("Olá todos vocês! Bem-vindos à 
Programação Web!"); 
• } 
• } 
 
122 06/10/2014 
Exemplo1 
• public class Main { 
• public static void main(String[] args) { 
• int n, c=0, s=0; 
• /* Soma os números de 1 até n */ 
• String str = JOptionPane.showInputDialog 
• ("Digite o valor de N:"); 
• n = Integer.parseInt(str); 
• while (c<n){ 
• c++; 
• s+=c; 
• } 
• JOptionPane.showMessageDialog(null,"Soma = " + s, 
• "Resultado", JOptionPane.INFORMATION_MESSAGE); 
• } 
• } 
123 06/10/2014 
Usando o NetBeans 
• Na IDE do NetBeans temos: 
– Projetos 
– Arquivos 
– Serviços 
• Em serviços temos: 
– Databases 
– Web Services 
– Enterprises Beans 
– Servers 
– Web Servers 
124 06/10/2014 
Tecnologia JSP 
• Java Server Pages é uma tecnologia da Sun 
que se utiliza de páginas HTML com código 
script dentro da página: 
 <body>Página JSP 
 <% código Java %> 
 </body> 
125 06/10/2014 
Tecnologia Servlet 
• Os servlets são programas Java que rodam no 
servidor, sendo carregados apenas uma vez e 
executados de forma multi-thread. 
• Os servlets processam requisições Get e Post 
de páginas de clientes. 
• Essa tecnologia deverá ser mostrada mais 
adiante. 
 
126 06/10/2014 
Scriptlets 
• São blocos de código Java colocados nas 
páginas HTML que ficam limitados entre as 
tags <% e %>. 
• Exemplo: 
<% int p = 0; 
 p++; %> 
• O código Java dos Scriptlets roda no lado do 
servidor. 
 
127 06/10/2014 
Usando Scriptlets 
• Um scriptlet é criado anexando código java à 
página JSP, com o auxílio das tags <% e %>; 
• Exemplo 1: <% String s1 = “resposta”; 
 s1 = s1 + “ certa”; %> 
 <p> Dados obtidos: <br /> 
• Exemplo 2: 
• <h1> Alô <%= name %>, <br /> </h1> 
• Exemplo 3: 
 <% out.println("<b>S A I D A</b>"); %> 
128 06/10/2014 
Usando Scriptlets 
• Criando uma aplicação web utilizando o 
arquivo index.jsp com um scriptlet contendo 
um comando for para imprimir 10 linhas: 
 <% String saida = “”; 
 for (int i = 1; i <= 10; i++) 
 saida = saida + “linha “ + i; %> 
 
129 06/10/2014 
Métodos get e post 
• No formulário podemos usar o método get 
(default) ou o método post. 
• No método get as informações do formulário 
são colocadas na URL: 
• Exemplo: 
 http://endereço/página.jsp?nome=José 
 
130 06/10/2014 
Métodos get e post 
• No método post as informações são enviadas 
de forma encapsulada para o servidor. 
• Exemplo: 
http://endereço/página.jsp 
131 06/10/2014 
Métodos Get e Post 
• Quando usar o Get: 
– Envio de pouca informação (até 2 K) 
– Não haver necessidade de sigilo 
• Quando usar o Post: 
– Envio de muita informação 
– Houver necessidade de sigilo 
 
132 06/10/2014 
Aplicação Web 
• Diretórios de uma aplicação Web: 
– Páginas Web 
– Arquivos de Configuração 
– Recursos do Servidor 
– Pacotes de Fontes 
– Pacotes de Teste 
– Bibliotecas 
– Bibliotecas de Testes 
 
133 06/10/2014 
Aplicações Web no NetBeans 
• Criando uma aplicação web utilizando a 
página default index.jsp para exibir uma 
mensagem (ExemploWeb). 
 
• Criando uma aplicação web utilizando a 
página default index.jsp com um Form e uma 
página Resposta (Bemvindo). 
 
 
134 06/10/2014 
ExemploWeb 
• <html> 
• <!- - index.jsp - -> 
• <head> 
• <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
• <title>JSP Page</title> 
• </head> 
• <body> 
• <h2>Olá vocês! Bem-vindos à Programação Web!</h2> 
• </body> 
• </html> 
 
135 06/10/2014 
Criando uma página JSP 
• No NetBeans: 
– Crie uma aplicação Web “Bemvindo” 
– Abra o arquivo index.jsp e defina um form 
– Crie um arquivo resposta.jsp 
– Capturando a informação em resposta.jsp: 
• request.getParameter(“campo”) 
– Respondendo para o cliente: 
• <%= conteudo %> OU 
• <% out.println(conteudo); %> 
 
136 06/10/2014 
Chamando uma página JSP 
• Definindo um formulário: 
 <form method=“get” action=“solicita.jsp”> 
 Digite seu nome:<br/> 
 <input type=“text” name=“nome” /><br/> 
 <input type=“submit” value=“Enviar” /> 
 </form> 
 
137 06/10/2014 
Bemvindo (página 1) 
• Arquivo index.jsp 
• <html> 
• <head> 
• <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
• <title>Processando uma solicitação "get" com 
dados</title> 
• </head> 
• <body> 
• 
• <form action = "resposta.jsp" method = "get"> 
• <p>Digite o seu primeiro nome e pressione Enviar</p> 
138 06/10/2014 
Bemvindo (página 2) 
• <p><input type = "text" name = "firstName" /> 
• <input type = "submit" value = "Enviar" /> 
• </p> 
• </form> 
• </body> 
• </html> 
139 06/10/2014 
Bemvindo (página 3) 
• Arquivo Resposta.jsp 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>JSP Page</title> 
 </head> 
 <body> 
 <h1>Página de Resposta</h1> 
 <% // início de scriplet 
 String name = request.getParameter("firstName"); 
 if (name != null) 
 { 
 %> 
14006/10/2014 
Bemvindo (página 4) 
 <h1>Alô <%= name %>, <br /> 
 Bem-vindo ao Jave Server Pages!</h1> 
 <% // continuação do scriptlet 
 } // fim do if true 
 else { } 
 %> // fim do scriptlet 
 </body> 
</html> 
 
141 06/10/2014 
Utilizando o método Post 
• Extraindo campos de um formulário 
– Exemplo: ExtrairCampos 
• Extraindo um array de um Form 
– Exemplo: ExtrairArray 
• Utilizando um objeto Session 
– Exemplo: UsandoSessao1 
• Usando scriptles 
– Exemplo: UsandoFor 
 
142 06/10/2014 
Extraindo campos de uma página 
• Neste exemplo uma solicitação será feita ao 
servidor com o uso de um formulário. 
 
• Em index.jsp acrescente o seguinte código no 
início: 
<%@ page import="java.util.*" %> 
Seguido do seguinte corpo de página: 
143 06/10/2014 
<html> 
<body> 
 <h1>Extraindo campos</h1> 
 <% 
 Enumeration campos = request.getParameterNames(); 
 while (campos.hasMoreElements()){ 
 String campo = (String)campos.nextElement(); 
 String valor = request.getParameter(campo); 
 %> 
 <li><%= campo %> = <%= valor %></li> 
 <% } %> 
 <form method="Post" action="index.jsp"> 
 Nome: <input type="text" size="20" name="nome" /><br /> 
 Telefone: <input type="text" size="20" name="Telefone" /> 
 <input type="submit" name="submit" value="Enviar" /> 
 </form> 
</body> 
</html> 
144 06/10/2014 
Extraindo um array 
• Neste exemplo uma solicitação será feita ao 
servidor com o uso de um formulário. 
 
• Em index.jsp acrescente o seguinte código no 
início: 
<%@ page import="java.util.*" %> 
Seguido do seguinte corpo de página: 
 
145 06/10/2014 
 Página 1 
<html> 
<body> 
 <h1>Capturando um array</h1> 
 <% 
 Enumeration campos = request.getParameterNames(); 
 int i = 0; 
 int[]x = new int[10]; 
 while(campos.hasMoreElements()){ 
 String paramName = (String)campos.nextElement(); 
 String paramValue = request.getParameter(paramName); 
 %> 
 <li>Campo <%=paramName%> &nbsp; &nbsp; Valor = 
 <%=paramValue%></li> 
 <% 
 x[i]= Integer.parseInt(paramValue); 
 i++; 
 } 
146 06/10/2014 
 Página 2 
 
 String valores = new String(); 
 valores=""; 
 for (int k = i-1; k >= 0; k--) 
 valores = valores + x[k] + ' '; 
 %> 
<h3>Valores digitados</h3> 
 <%=valores%><br/> 
 <form method="Post" action="index.jsp"> 
 Digite os valores inteiros:<br/> 
 Valor 1: <input type="text" size="10" name="1" /><br /> 
 Valor 2: <input type="text" size="10" name="2" /><br /> 
 Valor 3: <input type="text" size="10" name="3" /><br /> 
 Valor 4: <input type="text" size="10" name="4" /><br /> 
 <input type="submit" value="Enviar" /> 
 </form> 
 </body> 
</html> 
147 06/10/2014 
Identificando um cliente 
• Cada vez que um usuário se conecta à uma aplicação 
web, o servidor cria uma sessão para ele. 
• Para que o servidor reconheça cada usuário que se 
conecta. Ele cria na memória Ram da máquina do 
cliente pequenos arquivos texto chamados Cookies. 
Esses Cookies guardam um número de identificação 
que é gerado pelo servidor web e enviado à máquina 
cliente. 
• O usuário pode programar seu navegador para 
impedir a gravação de Cookies. 
148 06/10/2014 
Cookies 
• Um cookie é uma parte de um texto que um servidor da web 
armazena no disco rígido do usuário. Os cookies permitem 
que um site armazene informações no computador do usuário 
e depois as recupere. As informações são armazenadas como 
pares de nome-valor. 
• A grande maioria dos sites armazena apenas uma informação, 
uma ID de usuário. Mas o site pode armazenar muitos pares 
de nome-valor, se quiser. 
• Exemplo: UserID A9A3BECE0563982D www.goto.com/ 
• Os cookies são “persistências temporárias” feitas no lado do 
usuário, e sessões são persistências dependentes de cookies, 
mas realizadas no lado do servidor. 
149 06/10/2014 
Session 
• O protocolo HTTP é stateless, ou seja, ele não 
mantém um estado/conexão. Toda a interação que o 
seu cliente fizer com um servidor Web acarretará em 
uma nova requisição e resposta. 
• As requisições são independentes e possuem um 
tempo de vida (conexão, envio de mensagem, 
resposta, encerramento da conexão). O servidor Web 
não é capaz de identificar se duas requisições vieram 
de um mesmo navegador, e o mesmo não faz 
nenhum gerenciamento em memória para que 
mensagens sejam compartilhadas entre requisições. 
 150 06/10/2014 
Cookies e Sessions 
• Através de cookies o servidor Web é capaz de trocar 
informações de estado com o navegador do usuário. 
Desse modo, somos capazes de adicionar produtos a um 
carrinho de compras, sem perder estas informações ao 
mudar de página, sair do website ou até mesmo fechar o 
navegador. 
• Tecnicamente falando, um cookie é uma pequena 
quantidade de informação persistida temporariamente 
pelo navegador. Os navegadores normalmente limitam o 
tamanho dos cookies em até 4KB, e apagam cookies com 
a data de “validade vencida”. 
 
151 06/10/2014 
Objeto Session 
• Uma sessão é o intervalo de tempo em que 
um usuário fica conectado com um site. 
• Quando uma sessão começa o servidor web 
gera um identificador da sessão. 
• Variáveis de sessão: 
Session(“nome”) = “Maria” 
Session(“fone”) = “3423-2145” 
152 06/10/2014 
Atributos de uma sessão 
• Neste exemplo (UsandoSessao1) uma 
solicitação será feita ao servidor com o uso de 
um formulário. 
• Neste exemplo precisamos criar outra página: 
sessao1.jsp 
• Em index.jsp acrescente o seguinte código no 
início: 
<%@ page import="java.util.*" %> 
Seguido do seguinte corpo de página: 
 153 06/10/2014 
<body> 
 <h1>Formulário</h1> 
 <h1>Id da sessão: <%=session.getId() %></h1> 
 <h3><li>Essa sessão foi criada em 
 <%= new Date(session.getCreationTime()) %></li></h3> 
 <% 
 Enumeration atribs = session.getAttributeNames(); 
 while(atribs.hasMoreElements()){ 
 String atrib = (String)atribs.nextElement(); 
 String valor = (String)session.getAttribute(atrib); %> 
 <li><%= atrib %> = <%= valor %></li> 
 <% 
 } 
 %> 
 <form method="Post" action="sessao1.jsp"> 
 Nome: <input type="text" size="20" name="nome" /><br /> 
 Fone: <input type="text" size="20" name="fone" /><br /> 
 <input type="submit" name="submit" value="Enviar" /> 
 </form> 
 </body> 
154 06/10/2014 
Página sessao1.jsp 
 
<body> 
 <h1>Id da sessão: <%= session.getId() %></h1> 
 <% 
 String nome = request.getParameter("nome"); 
 String fone = request.getParameter("fone"); 
 
 if (nome != null && nome.length() > 0) 
 session.setAttribute("nome", nome); 
 
 if (fone != null && fone.length() > 0) 
 session.setAttribute("fone", fone); 
 %> 
 <form type="Post" action="index.jsp" > 
 <input type="submit" name="submit" value="Retornar" /> 
 </form> 
</body> 
155 06/10/2014 
Scriptlets 
• Exemplo UsandoFor 
<html> 
 <body> 
 <h1>Utilizando o For numa JSP</h1><br /> 
 <p><% 
 String resp = ""; 
 for (int i=1; i <= 10; i++) 
 resp = resp + "Linha n. " + i + "<br />"; 
 %></p> 
 <%= resp %> 
 </body> 
</html> 
156 06/10/2014 
Diretório raiz da aplicação 
• Todo servidor tem uma pasta default onde são 
colocados os aplicativos a serem utilizados. 
• Como já foi dito, todo servidor tem nesta 
pasta uma página default chamada: 
– index.tipo ou default.tipo, onde tipo pode ser: 
htm, jsp, asp, etc. 
• Quando um cliente acessa o servidor Web, 
esse acesso é desviado para esta pasta 
default. 
 
157 06/10/2014 
Diretório raiz 
• No IIS (Microsoft), a pasta está localizada em: 
– c:\inetpub\wwwroot 
• No Tomcat: 
– c:\tomcat\webapps 
• No J2EE: 
– c:\sun\appserver\domain\domain1 
• Pode-se também definir outra pasta de 
acesso. No IIS esta pasta seria um diretório 
virtual. Esta técnica ajuda a melhorar a 
segurança do site. 
158 06/10/2014 
Estrutura de uma aplicação 
• Para rodar no Tomcat, uma aplicação web 
precisa ser organizada num diretório com uma 
estrutura organizada da seguinte maneira: 
 
• Temos como exemplo uma aplicação Web 
chamada app1: 
 
159 06/10/2014 
Diretório de uma aplicação 
 App1/ 
 src/ (diretório de fontes) 
 fontes Java 
 web/ (arquivos do módulo web) 
 WEB-INF/ (diretório obrigatório) 
 classes/ (arquivos .class) 
 lib/ (pacotes .jar de bibliotecas) 
 web.xml (arquivo de configuração de contexto) 
 index.jsp 
 outros arquivos .jsp 
160 06/10/2014 
Estrutura de uma aplicação 
• No NetBeans a estrutura de uma aplicação 
tem um esquema de sub-diretórios diferentes. 
 
• Instalado junto com o NetBeans, o Tomcat vai 
ficar na pasta: 
c:\apache-tomcat-versão 
161 06/10/2014 
Diretório raiz no NetBeans 
• A aplicação vai ficar na sub-pasta: (não usa 
webapps) 
work 
Catalina 
 localhost 
 ExemploWeb (sua aplicação) 
 org 
 apache 
 jsp 
 arquivo_jsp.java (seu arquivo jsp) 
162 06/10/2014 
Criando um contexto (Tomcat) 
• O Tomcat quando inicia, cria um contexto para 
cada sub-diretório do diretório webapps 
• O requisito para criar um contexto é que 
exista um sub-diretório WEB-INF no diretório 
da aplicação. Caso não exista um arquivo 
web.xml, vai usar o default do Catalina. 
 
163 06/10/2014 
Contexto de uma aplicação 
• No Tomcat para cada aplicação precisa ser 
criado um contexto. 
• Cada contexto é uma unidade de aplicação 
web Java que possui suas próprias 
configurações. 
• A configuração de um contexto é feita através 
de um arquivo web.xml, descritor de contexto, 
colocado no sub-diretório WEB-INF da 
aplicação. 
164 06/10/2014 
Criando um contexto no Tomcat 
• Como já foi citado, existem dois tipos básicos 
de aplicações com a tecnologia Java: 
– Servlets 
– JSP 
• Cada aplicação deverá ser um sub-diretório no 
Tomcat, assim na sua inicialização, o servidor 
criará um contexto para cada aplicação. 
 
165 06/10/2014 
Diretórios do NetBeans 
• O NetBeans disponibiliza três estruturas 
básicas de recursos: 
– Projetos 
• contém as pastas dos projetos abertos 
– Arquivos 
• contém os arquivos dos projetos abertos 
– Serviços 
• Contém os recursos disponíveis como databases, 
servidores web, e outros. 
166 06/10/2014 
Usando o NetBeans 
• Em Servidores temos: 
– GlassFish V2 
– Tomcat 6.0 
• Em Tomcat 6.0, com o botão direito, podemos 
acessar as propriedades: 
– Diretórios do Tomcat 
– Usuário administrador (admin) -> default 
– Senha administrador (adminadmin) -> default 
167 06/10/2014 
Aplicações fora do NetBeans 
• Quando tivermos de colocar nossas aplicações 
fora do ambiente de desenvolvimento, NetBeans, 
Eclipse ou outros, deveremos colocar a aplicação 
no diretório raiz do servidor Web. 
• Quando estamos no ambiente de 
desenvolvimento, o framework faz isso de 
maneira automática. 
168 06/10/2014 
 
 
 
Fim da parte 1 
169 06/10/2014