Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
3/24/2011
1
Programação para Internet
Flávio de Oliveira Silva, [email protected]
Programação para InternetFlávio de Oliveira Silva, M.Sc.
1
Objetivos Fornecer uma visão geral do funcionamento de sistemas na Web e os
protocolos envolvidos
Introduzir o paradigma da programação para a Internet
Conceituar as arquiteturas de 2, 3 e n camadas, apresentando as diferenças e, principalmente, as vantagens que elas oferecem;
Qualificar profissionais para o desenvolvimento de aplicações voltadas para a Internet/Intranet e que sejam disponibilizadas através de um browser
Apresentar padrões de projeto para melhor estruturação dos sistemas na web;
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Apresentar as tecnologias mais empregadas no desenvolvimento de sistemas para web, inclusive com o uso de frameworks;
Introduzir conceitos de segurança associados ao uso de sistemas na web.
2
3/24/2011
2
Ementa Aspectos históricos da Internet.
Sistemas Multimídia.
Análise de tendências.
O desenvolvimento de projetos em WEB. Linguagens e ambientes de Concepção de projeto de sistemas multimídia interativos na WEB.
Projeto gráfico avançado para WEB.
Inovações de projeto e utilização de ferramentas.
Famílias de linguagens para produção em WEB.
Animação gráfica para WEB. Principais conceitos de programação dinâmica para a Web
Programação para InternetFlávio de Oliveira Silva, M.Sc.
dinâmica para a Web.
Desenvolvimento de aplicação dinâmica.
Aplicações multi-camadas.
Aplicações WEB server side e client side.
3
Programa Introdução aos sistemas Web
Internet: um resumo histórico
O ambiente web: o protocolo HTTP
Aplicações WEB Aplicações WEB Sistemas Estáticos x Dinâmicos
Tecnologias para desenvolvimento de sistemas dinâmicos na Web: CGI,ASP, Servlets, JSP, PHP, outras
Plataforma Java Java EE
Camadas em Aplicações Distribuídas
Arquitetura JAVA EE
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Web Contêiner
4
3/24/2011
3
Programa Servlets
Aplicações Web Utilizando Servlets
Apache Tomcat
Arquitetura MVC para WEB Arquitetura MVC para WEB
Operações e API Java
Estrutura Aplicação Web
Armazenamento e Recuperação de Informações
Cookies, Filtros e Listeners
JavaServer Pages Scripts e Expressões
Objetos Implícitos
Programação para InternetFlávio de Oliveira Silva, M.Sc.
JSP Expression Language
Diretivas, Ações Padrão e Java Beans
JSP Standard Tag Library
5
Programa Struts
Principais Componentes (Struts2)
Setup Aplicação
Actions Actions
Validacao
Interceptors
JavaScript e AJAX
Realização e apresentação de um projeto para Web
Programação para InternetFlávio de Oliveira Silva, M.Sc.
6
3/24/2011
4
Bibliografia Básica Básica
Marty Hall e Larry Brown; Core Servlets e JavaServer Pages - Vol. 1 – Tecnologias Core, ISBN 8573934328, 632 p, 1a ed, Ciência Moderna, 2005
Mark Szolkowski e Nick Todd. Javaserver Pages - O Guia do Desenvolvedor, 648 p, g pISBN 85-352-1324-4, Campus
Programação para InternetFlávio de Oliveira Silva, M.Sc.
7
Bibliografia Complementar DEITEL, H. M.; DEITEL P. Ajax, Rich Internet applications e desenvolvimento Web para
programadores. São Paulo : Prentice Hall, 2008.
GONÇALVES, E. Desenvolvendo aplicações Web com JSP, Servlets, JavaServer Faces, Hibernate, EJB 3 Persistence e AJAX. Rio de Janeiro : Ciência Moderna, 2007.
HORSTMANN, C.; CONELL, G. Core Java 2: Advanced Features. 7. ed. Prentice Hall, 2006. v. 2. HORSTMANN, C.; CONELL, G. Core Java 2: Advanced Features. 7. ed. Prentice Hall, 2006. v. 2.
ALUR, DEEPAK;CRUPI, JOHN;MALKS, DAN. Core J2EE Patterns. Campus-Elsevier. 2004.
ARNOLD, K.; GOSLING, J. The java programming language. 4. ed. Addison-Wesley, 2006.
BAUER , CHRISTIAN; KING, GAVIN. Hibernate em Ação. Ciência Moderna, 2005. ISBN: 8573934042.
BAUER , CHRISTIAN; KING, GAVIN. Java Persistance com Hibernate. Ciência Moderna, 2007. ISBN: 9788573936148.
DEITEL, H. M.; DEITEL P. J. Java: como programar. 6. ed. Pearson, 2005.
FALKNER, J.; JONES, K. W. Servlets and JavaServer Pages: The J2EE Technology Web Tier. Pearson Education, 2004.
Programação para InternetFlávio de Oliveira Silva, M.Sc.
GALBRAITH, B.; HAAN, P.; LAVANDOWSKA, L.; PANDURANGA, S. N; PERRUMAL, K; SGARBI, E.K. Beginning Jsp 2.0: Build Web Applications Using Jsp, Java, and Struts. Wrox Press, 2003
HUSTED, T.; DUMOULIN, C.; FRANCISCUS, G. Struts em Ação. Ciência Moderna, 2004.
METSKER , S. J. Padrões de Projeto em Java. Bookman.2004. ISBN: 8536304111
WELLING, Luke & THOMSON, Laura. PHP e MySQL: desenvolvimento web. Rio de Janeiro: Campus, 2005.
8
3/24/2011
5
Avaliação Provas – Teóricas
Primeira Prova – 25 Pontos
Segunda Prova – 25 Pontos
Ob õ Observações Avaliações sem consulta
Trabalho Interdisciplinar Laboratório – 10 pontos
Final – 40 pontos
Programação para InternetFlávio de Oliveira Silva, M.Sc.
9
Grande conjunto de redes de computadores interligadas pelo mundo.
Começou como uma rede interligando Universidades no E.U.A
INTERNET
A partir de 1993 a Internet começou a ser explorada comercialmente.
Não existem nenhum gerenciamento centralizado, cada usuário ou empresa administra sua rede e esta se conectada à INTERNET.
Comunicação entre as várias redes segue um protocolo padrão(TCP/IP)
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Backbones dão suporte principal à INTERNET.
Backbones são linhas alta capacidade de tráfego de informação. Sustentados por governos e grandes empresas
10
3/24/2011
6
INTERNET – COMO FUNCIONA
Cada servidor (Host) possui um endereço único na Internet. Este endereço é conhecido como IP. Ex: 200.17.210.65
Os IP’s são distribuídos pelo Network Information Center (NIC) e no Brasil são repassados pela FAPESPsão repassados pela FAPESP
Cada endereço acima pode ser escrito com letras da seguinte forma: www.ufu.br; www.fagen.ufu.br; www.uol.com.br; ftp.microsoft.com.br; www.facic.ufu.br
Ao solicitar alguma informação o endereço de destino deve ser informado
Programação para InternetFlávio de Oliveira Silva, M.Sc.
11
200.17.210.65
INTERNET – SERVIÇOS Servidores de INTERNET podem oferecer vários tipos de
serviços (Mais utilizados - WEB; E-MAIL; FTP)
WEB (WWW – World Wide Web)P i i l i P i lti ídi (T t I S Principal serviço. Possui recursos multimídia (Texto; Imagem; Som e Vídeo)
Informações estão contidas em sites
Em um site é possível saltar de um ponto para outro utilizando "hiperlinks"
Cada site possui seu URL (Uniform Resource Locator, localizador uniforme de recursos) Ex.: http://www.ufu.br; http://www.fagen.ufu.br; http://ww.uol.com.br; http://facic.ufu.br
Programação para InternetFlávio de Oliveira Silva, M.Sc.
12
g
Endereços (domínios) são criados de acordo com o tipo de utlização: .com (comércio); .gov (governo); .edu (universidades –normalmente as brasileiras não utilizam); .mil (militar); .org(organizações sem fins lucrativos)
Endereços terminam com nacionalidade: brasil (br); japão (jp); portugal (pt); E.U.A (não possuem);
3/24/2011
7
Internet A Internet não é uma rede
Conjunto de diferentes redes interligadas que utilizam um mesmo conjunto de protocolos a fim de oferecer serviços comuns
Serviços FTP
WEB
Programação para InternetFlávio de Oliveira Silva, M.Sc.
13
Protocolo HTTP Protocolo utilizando na Web
Realiza o transporte de conteudo entre o navegador e o servidor Web
Protocolo descreve o pedido (request) e a resposta (response)
Seu entendimento é um requisito na programação para a Internet
Programação para InternetFlávio de Oliveira Silva, M.Sc.
14
3/24/2011
8
HTTP RequestsEstrutura Geral Um pedido Http contém a estrutura abaixo
ESTRUTURA EXEMPLO
Metodo URI Versao POST / HTTP/1.1Header Geral Connection: Keep-Alive
Método – Indica comando a ser enviado para o servidor. Valores possíveis (HTTP 1.1): GET, POST, HEAD, PUT, LINK, UNLINK, DELETE,
OPTIONS
Nem todos os comandos podem ser respondidos por um servidor web
URI (Uniform Resource Indication) Descrição única do conteúdo na Web
Header Pedido Host: www.site.com.brHeader Conteudo Content-type: txt/htmlConteudo query=book
Programação para InternetFlávio de Oliveira Silva, M.Sc.
URI (Uniform Resource Indication) – Descrição única do conteúdo na Web
Versão – Versão do protocolo utilizada HTTT/1.1 ou HTTP/1.0
Headers – Informações adicionais que são enviadas após o comando
Conteudo – Informação que pode ser enviada pelo cliente e é recebida pelo servidor
15
HTTP ResponseEstrutura Geral A resposta contém a estrutura abaixo
ESTRUTURA EXEMPLO
Versao Status Resposta HTTP/1.1 200 OK
H d G lHeader Geral Date: Mon, 06 Feb 2010 20:54:26 GMTHeader Resposta Server: Apache/1.3.6 (Unix)
Header Conteúdo Content-length: 327Content-type: text/html
Conteúdo
<html><head><title>Página Hello</title></head><body><h1>Hello Web World!</h1>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Headers – Informações adicionais enviadas juntamente com a resposta
Conteúdo – Informação enviada pelo servidor
16
<h1>Hello Web World!</h1></body></html>
3/24/2011
9
HTTP Request e ResponseExemplos Request
GET / HTTP/1.1
Host: www.ufu.br
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
ResponseHTTP/1.1 200 OK
Date: Wed, 01 Sep 2010 10:48:25 GMT
Server: Apache/2.2.10 (Linux/SUSE)
X-Powered-By: PHP/5.2.9
Expires: Sun, 19 Nov 1978 05:00:00 GMT
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Last-Modified: Wed, 01 Sep 2010 10:48:25 GMT
Cache-Control: store, no-cache, must-revalidate, post-check=0, pre-check=0
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=utf-8
<html>
</html>
17
TELNETTerminal Remoto O protocolo TELNET permite realiza uma conexão baseada em caracteres
entre dois computadores
Através do TELNET é possível enviar comandos para o servidor e desta forma o protocolo implementa um terminal remotoforma o protocolo implementa um terminal remoto
Utilizando o TELNET é possível enviar comandos HTTP para um servidor WEB
Para um servidor WEB geralmente é utilizada a porta 80
Exemplo de uso: telnet [HOST] [PORT]
HOST - Hostname ou IP do servidor
PORT Nú d t P id WEB l t é tili d t 80
Programação para InternetFlávio de Oliveira Silva, M.Sc.
PORT – Número da porta. Para um servidor WEB geralmente é utilizada a porta 80flavio@flavio-ubuntu:~$ telnet www.facom.ufu.br 80
Trying 192.168.3.2...
Connected to facom.ufu.br.
Escape character is '^]'.
18
3/24/2011
10
Utilizando protocolo HTTPExemplo
flavio@flavio-ubuntu:~$ telnet 192.168.3.2 80
Trying 192.168.3.2...
Connected to 192.168.3.2.
Escape character is '^]'.p
GET /~flavio/ HTTP/1.1
Host: www.facom.ufu.br (pressionando enter para troca de linha e encerramento do comando)
HTTP/1.1 200 OK
Date: Thu, 03 Mar 2011 17:31:58 GMT
Server: Apache/1.3.37 (Unix) mod_ssl/2.8.28 OpenSSL/0.9.8b PHP/4.4.4
Last-Modified: Fri, 13 Aug 2010 01:21:19 GMT
Programação para InternetFlávio de Oliveira Silva, M.Sc.
g
ETag: "2a403f9-1614-4c649e0f"
Accept-Ranges: bytes
Content-Length: 5652
Content-Type: text/html
<html>
</html>
19
HTTP RequestMétodos Principais métodos utilizado no protocolo HTTP
MÉTODO DESCRIÇÃO
GETPermite obter um conteúdo em um servidor. O conteúdo pode ser
GETPermite obter um conteúdo em um servidor. O conteúdo pode ser um arquivo estático ou um resultado produzido de forma dinâmica
HEADObtém apenas informações (cabeçalho) associada ao conteúdo, sem no entanto, devolver este conteúdo
POSTPermite o envio de informações para o servidor, por exemplo, ao preencher um formulário na Web.
PUT Permite inserir ou alterar um conteúdo existente em um servidorDELETE Utilizado para remover um conteúdo no servidor
Programação para InternetFlávio de Oliveira Silva, M.Sc.
20
3/24/2011
11
HTTP ResponseServer Codes Linha inicial da resposta do servidor contém um código de status com
três digitos
Alguns códigos são tratados diretamente pelo browser enquanto outros são mostrados no clientesão mostrados no cliente
FAIXA DO CÓDIGO
SIGNIFICADO
100‐199 Informação200‐299 Pedido atendido com sucesso300‐399 Pedido redirecionado400‐499 Pedido incompleto500‐599 Erros no servidor
Programação para InternetFlávio de Oliveira Silva, M.Sc.
21
500 599 Erros no servidor
HTTP Headers O headers (cabeçalhos) HTTP permitem a troca de informações entre o
cliente e o servidor
Possuem o seguinte formato:h d h d l [ th h d l ] header-name: header-value[; other-header-value]
Os headers podem ser classificados da seguinte forma: General Headers – Podem ser utilizados tanto em mensagens de pedido
(request) ou resposta (response)
Request Headers – São específicos para pedidos e consistem de informações que o cliente deseja enviar ao servidor
Response Headers – São específicos para respostas e consistem de informações que o servidor deseja comunicar ao cliente
Programação para InternetFlávio de Oliveira Silva, M.Sc.
informações que o servidor deseja comunicar ao cliente
Entity Headers – Estão relacionados especificamente com o conteúdo sendo transportado pelo protocolo
22
3/24/2011
12
HTTP Tipos de Conteúdo Como na Web podem existir diferentes tipo de conteúdo é necessário
que o protocolo HTTP identifique o tipo do conteúdo sendo transportado
Isto é feito utilizando um rótulo chamado MIME (Multipurpose Internet Mail Extensions)Mail Extensions)
Este rótulo é incluído como um header de conteúdo (Content-type)
Exemplos:TIPO DOCUMENTO HEADER CONTEÚDODocumento HTML Content-type: text/htmlArquivo texto Content-type: text/plainImagem JPEG Content-type: image/jpegImagem GIF Content-type: image/gif
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Para uma lista completa consulte o w3schools
23
Arquivo PDF Content-type: application/pdfArquivo Microsoft EXCEL Content-type: application/vnd.ms-excel
Video no formato QuickTime da Apple Content-type: video/quicktimeArquivo de aúdio no formato midi Content-type: audio/midi
HTML Hypertext Markup Language
Draft – 1991; 1.1 – 1992; 2.0 – 1993; 3.0 – 1995; 4.0 – 1997; 4.01 – 1999; 5.0 (2011?)
Linguagem de marcação básica utilizada na WEB, que consiste de elementos g g ç , qenvolvidos pelos sinais de < e >.
O conjunto <elementName> é conhecido como tag
O navegador é capaz de ler páginas HMTL e exibir seu conteúdo. O conteúdo é aquele existente entre a tag inicial e a final
As tags não são exibidas pelo navegador, mas são utilizadas para interpretar o conteúdo das mesmas
Cada elemento possui atributos que o qualificam e cada tag aberta deve ser de idamente fechada
Programação para InternetFlávio de Oliveira Silva, M.Sc.
devidamente fechada.
Exemplo <elementName atributename1="attributeValue1" ... />
<elementName atributename1="attributeValue1" ... >
contentAppearAtBrowser
</elementName>
24
3/24/2011
13
HTMLTags A linguagem apresenta um conjunto de tags
Uma tag não reconhecida pelo navegador é exibida como texto
Categorias de Tags Tags básicas de uma página
<html>, <head>, <body>
Headings (Cabeçalhos) <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Parágrafos <p>, <br>
Links (Âncoras) <a>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
<a>
Imagens <img>
Comentários <!– This a comment -->
25
HTMLTags Categorias de Tags
Formatação de Texto <b>, <big>, <em>, <i>, <small>, <strong>, <sub>, <sup>,...
Listas (Numeradas) Listas (Numeradas) <ul>, <ol>
Listas (Marcadores) <ul>, <ol>, <li>
Tabelas <table>, <tbody>, <thead>, <th>, <tr>, td
Programação para InternetFlávio de Oliveira Silva, M.Sc.
26
3/24/2011
14
HTMLTags Categorias de Tags
<ul>, <ol>, <li>
<t bl > <tb d > <th d> <th> <t > td <table>, <tbody>, <thead>, <th>, <tr>, td
<!– This a comment -->
Programação para InternetFlávio de Oliveira Silva, M.Sc.
27
HTMLTags A linguagem apresenta um conjunto de tags
Uma tag não reconhecida pelo navegador é exibida como texto
Exemplos de tags <html>, <head>, <body>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<p>, <br>
<a>
<b>, <big>, <em>, <i>, <small>, <strong>, <sub>, <sup>,...
<img>
<ul>, <ol>, <li>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
<table>, <tbody>, <thead>, <th>, <tr>, td
<!– This a comment -->
28
3/24/2011
15
Documento HTML <html>
<head><title>Title of the document</title></head></head>
<body>Este é o conteudo visível da página</body>
</html>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
29
CSS (Cascade Style Sheets) Permite a definição de estilos que definem como os elementos HTML
serão mostrados
Desta forma é possível aplicar um determinado estilo a vários elementos, simplificando o processo de formatação dos mesmossimplificando o processo de formatação dos mesmos
Originalmente a linguagem HTML não continha atributos para diferentes fontes e cores. A introdução na versão 3.2 trouxe ônus a dificuldade para formatar os elementos. Os estilos foram adicionados na versão 4.0
Normalmente os estilos são definidos em um arquivo à parte (.css) e o mesmo é incluído em um conjunto de páginas
Para uma referência na linguagem consulte o endereço abaixo
Programação para InternetFlávio de Oliveira Silva, M.Sc.
http://www.w3schools.com/css/css_reference.asp
30
3/24/2011
16
CSS (Cascade Style Sheets)Sintaxe Cada estilo é visto como uma regra de formatação
A regra contém duas partes: Seletor
U i d l õ Uma ou mais declarações A declaração consiste de um par (propriedade:valor) finalizado por “;”
O conjunto de declarações deve estar entre chaves
É possível quebrar a declaração em várias linhas a fim de facilitar a leitura
Exemplo Selector {propertyName1:value1; ...; propertyNameN:valueN;}
Programação para InternetFlávio de Oliveira Silva, M.Sc.
31
CSS (Cascade Style Sheets)Sintaxe - Seletor O seletor pode ser utilizado de diferentes formas
HtmlTag
Neste caso o seletor é igual a alguma tag HTML e neste caso todos os elementos com aquela tag conterão a mesma formatação
#selectorName Neste caso o nome do seletor inicia-se pelo caractere “#”. O objetivo é aplicar este
estilo a um único elemento.
Para selecionar o elemento é é utilizado o atributo id (id="selectorName") em uma tag
<p id="selectorName">
.className Neste caso o nome do seletor inicia-se pelo caractere “.”
Programação para InternetFlávio de Oliveira Silva, M.Sc.
p
A classe é aplicada a um grupo de elementos
É possível indicar uma classe somente para determinados elementos. Desta forma somente aquelas tags serão afetas pelo estilo. Neste caso o seletor possuirá o seguinte formato: tagname.selectorName
Para selecionar o elemento é utilizado o atributo class (class="selectorName")<p class="selectorName">
32
3/24/2011
17
CSS (Cascade Style Sheets)Aplicar Estilo Existem três formas de aplicar os estilos
Arquivo externo com estilos<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" /><link rel stylesheet type text/css href mystyle.css />
</head>
Declaração interna dos estilos<head>
<style type="text/css">hr {color:green;}p {margin-left:20px;}body {background-image:url("img/logo.gif");}
</style>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
</head>
Declaração no atributo “style”<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
A primeira forma é a mais eficiente e utilizada pois os estilos poderão ser compartilhados por um grande número de páginas, facilitando manutenções no web site
33
CSS (Cascade Style Sheets)Aplicar Estilo Existem três formas de aplicar os estilos
Arquivo externo com estilos<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" /><link rel stylesheet type text/css href mystyle.css />
</head>
Declaração interna dos estilos<head>
<style type="text/css">hr {color:green;}p {margin-left:20px;}body {background-image:url("img/logo.gif");}
</style>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
</head>
Declaração no atributo “style”<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
A primeira forma é a mais eficiente e utilizada pois os estilos poderão ser compartilhados por um grande número de páginas, facilitando manutenções no web site
34
3/24/2011
18
CSS (Cascade Style Sheets)Uso dos Estilos Os estilos são aplicados em cascata do mais externo para o mais interno
A ordem de aplicação dos estilos é a seguinte:1. Padrão do Navegador
2. Estilo definido em um arquivo externo
3. Estilo definido na seção <head>
4. Estilo definido dentro do elemento com o atributo "style”
Os valores mais internos possuem prioridade, logo o atributo “style” fará a sobreposição nos outros estilos
Programação para InternetFlávio de Oliveira Silva, M.Sc.
35
CSSExemplo Básico <html>
<head>
<style type="text/css">
p {color:red;text-align:center;}p g
h1
{
color:blue;
text-align:center;
}
</style>
</head>
<body>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
<body>
<p>Hello World! - Style p</p>
<p>This paragraph is styled with CSS - Style p.</p>
<h1>Heading - htyle h1 </h1>
</body>
</html>
36
3/24/2011
19
CSSComposição de Estilos O termo classe para o seletor pode provocar a visão de que conceitos de
programação orientada a objetos estão disponíveis, o que não é fato
A linguagem oferece algumas formas de composição de estilos
Composição na hieraquia dos elementos Neste caso as propriedades aplicadas a elementos mais externos sejam propagadas
para elementos mais internos
Desta forma é possível que elementos mais internos (filhos) herdem as propriedades de elementos mais externos (pai)
Composição no atributo “class” É possível compor o conteúdo de várias classes e aplicá-las simultaneamente a um
elemento. Neste caso as declarações de ambas serão adicionadas
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Composição na definição da classe Mais de um seletor tipo do class é escolhido para um conjunto de declarações
Neste caso todos compartilharão as mesmas propriedades
37
CSSComposição na Hierarquia No exemplo abaixo a composição utilizou a hierarquia entre os elementos <div> e
<p> no documento
O valor "inherit" para a propriedade color não é obrigatório. Sendo que para a maioria das propriedades este é o padrão utilizado, logo não é necessário repetirmaioria das propriedades este é o padrão utilizado, logo não é necessário repetir a propriedade na declaração da classe<html>
<head>
<style type="text/css">
.foo {background-color: white; color: blue;}
.bar {background-color: yellow; color: inherit; font-weight: bold;}
</style>
</head>
<body>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
<body>
<div class="foo">
<p> Paragraph only with .foo class</p>
<p class="bar">Paragraph only with .foo + .bar class</p>
<p>Paragraph again only with .foo class<!p>
</div>
</body>
</html>38
3/24/2011
20
CSSComposição no atributo “class” No exemplo a composição no elemento <p> a composição de estilos utilizando
mais de uma classe no valor do atributo “class”. <html>
<head>
<style type="text/css">
.foo {background-color:white; color:blue;}
.bar {background-color:yellow;font-weight:bold;}
</style>
</head>
<body>
<div>
<p > Paragraph wiht no css class</p>
<p class="foo bar">Paragraph only with .foo + .bar class</p>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
<p class="foo">Paragraph again only with .foo class<!p>
</div>
</body>
</html>
39
CSSComposição na definição da classe No exemplo a composição é feita na definição onde mais de uma classe
compartilha as mesmas declarações. <html>
<head>
<style type="text/css">
.foo, .bar {color:blue;}
.bar {background-color:yellow;font-weight:bold;}
</style>
</head>
<body>
<div>
<p > Paragraph wiht no css class</p>
<p class="bar">Paragraph with .foo + .bar class</p>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
<p class="foo">Paragraph again only with .foo class<!p>
</div>
</body>
</html>
40
3/24/2011
21
JavaScript JavaScript é uma linguagem de programação suportada pelos navegadores.
A versão inicial surgiu em 1996 (Netscape) e a última versão é a 1.8.1 (2009)
A linguagem é interpretada e o código é embutido diretamente em páginas HTML sendo executado pelo navegador (cliente) O navegador possui uma aplicaçãosendo executado pelo navegador (cliente). O navegador possui uma aplicação (javascript engine) responsável pela interpretação e execução do código
Permite melhorar a experiência do usuário e incorporar interatividade do lado cliente
Utilizada por Webmasters e Web designers
Linguagem suporta: Leitura e Escrita de texto em uma página HTML
Criar respostas a eventos ocorridos em uma página HTML
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Validar dados informados em uma página HTML
Suporte a cookies
Javascript não possui nenhuma relação com a linguagem Java
41
JavaScriptUso Para inserir um código HTML é necessário utilizar a tag <script>
Código interno à página<script type="text/javascript">
Códi i t à á i f ilit d Código em arquivo externo à página, facilitando seu reuso<script type="text/javascript" src="xxx.js"></script>
O código pode estar presente tanto no elemento <body> quanto no elemento <head> No elemento <body> o código é executado assim que a página é carregada.
O código pode estar em qualquer ponto da página, mas o ideal é que o mesmo fique no final da página
No elemento <head> o código é executado no momento em que um evento
Programação para InternetFlávio de Oliveira Silva, M.Sc.
No elemento <head> o código é executado no momento em que um evento ocorre. Neste elemento normalmente são colocadas todas as funções
42
3/24/2011
22
JavaScriptConceitos Gerais Um código Javascript consiste de uma sequencia de comandos executados pelo
navegador
A linguagem é “case sensitive”
Comando Comando Um comando pode ser finalizado por um caractere “;” e por uma quebra de linha
Blocos Uma sequencia de comandos pode ser agrupadas em blocos que neste caso iniciam-
se pelo caractere “{“ e finalizado pelo caractere “}”
O bloco é utilizado em funções ou em estrutura de controle da linguagem
Comentários// Comentário em uma linha simples
/* á i
Programação para InternetFlávio de Oliveira Silva, M.Sc.
/* Comentário
Em várias linhas */
43
JavaScriptVariáveis Variáveis
A linguagem é fracamente tipada e portando uma varíavel pode conter qualquer tipo de dado
O nome de variável de começar com uma letra com um um caractere “_”ç _
Caso a variável seja declarada mais de uma vez seu valor não é alterado. Inicialmente a variável não possui conteúdo
Variáveis declaradas dentro de uma função são locais (escopo função) e fora são globais (escopo página)
É possível atribuir valor a uma variável ainda não declarada
Exemplovar x; //declaração
var itemName="Produto"; //declaração e atribuição
Programação para InternetFlávio de Oliveira Silva, M.Sc.
globalvar; //variável global sem o uso da keyword "var”
44
3/24/2011
23
JavaScriptOperadores Aritméticos
Operador Descrição Exemplo Resultado Contexto+ Adição x=y+2 x=7 y=5- Subtração x=y-2 x=3 y=5
* Multiplicação x=y*2 x=10 y=5
Atribuição
/ Divisão x=y/2 x=2.5 y=5
% Módulo (resto da divisão inteira) x=y%2 x=1 y=5
++ Incremento x=++yx=y++
x=6x=5 y=6
-- Decremento x=--yx=y--
x=4x=5 y=4
Operador Exemplo Equivalente Resultado= x=y x=5
+= x+=y x=x+y x=15
Programação para InternetFlávio de Oliveira Silva, M.Sc.
45
y y
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
JavaScriptOperadores Relacionais
É possível concatenar strings
Se um número for
Operador Descrição Exemplo== igualdade x==8 is false
=== exatamente igual (valor e tipo)x===5 is true
x==="5" is false
!= Diferente x!=8 is trueadicionado a uma string o resultado será uma string
Lógicos
!= Diferente x!=8 is true
> Maior x>8 is false
< Menor x<8 is true
>= Menor ou igual x>=8 is false
<= Maior ou igual x<=8 is true
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Lógicos
46
Operador Descrição Exemplo
&& and lógico (x < 10 && y > 1) is true
|| or lógico (x==5 || y==5) is false
! not lógico !(x==y) is true? Operador condicional varivalue=(condicao)?value1:value2
3/24/2011
24
JavaScriptObjetos A linguagem Javascript é orientada a objetos e a linguagem possui um conjunto
de classes pré-definidas com seus métodos
Os objetos possuem propriedades é métodos
Acesso a uma propriedadep p
objectInstance.property
Acesso a um método
objectInstance.methodName();
Todos os elementos de uma página podem ser modelados como objetos
Objeto document Representa uma página carregada no navegador
Outras classes
Programação para InternetFlávio de Oliveira Silva, M.Sc.
String
Date
Array
Boolean
Math
RegExp
47
JavascriptFunções Possui a seguinte sintaxefunction nomeFuncao(var1,var2,...,varX){//codigo da funcao//codigo da funcao
return returnValue;}
Uma função pode ou não retornar valores
As funções são utilizadas normalmente para responder a eventos
Programação para InternetFlávio de Oliveira Silva, M.Sc.
48
3/24/2011
25
JavascriptEventos Os eventos permitem criar páginas ou comportamentos dinâmicos
Os eventos são detectados pela linguagem e são disparados pelos elementos de uma página HTML
Exemplos de eventos Exemplos de eventos Produzidos pelo mouse (click, movimento, etc) e teclado (pressionar)
Carregamento de uma página ou imagem
Seleção de um campo em um formulario (<form>)
Submissão de uma página (request)
Eventos dos elementos onLoad e onUnload
onFocus, onBlur e onChange
Programação para InternetFlávio de Oliveira Silva, M.Sc.
onSubmit
onMouseOver
49
JavascriptFunções - Exemplo <html>
<head>
<script type="text/javascript">
function displaymessage(){ function displaymessage(){
alert("Hello World!"); //mostra mensagem alerta
}
</script>
</head>
<body>
<form>
<i t t "b tt " l "Cli k i!"
Programação para InternetFlávio de Oliveira Silva, M.Sc.
<input type="button" value="Click aqui!" onclick="displaymessage()" />
</form>
<p>Ao pressionar o botao a funcao sera invocada</p>
</body>
</html>
50
3/24/2011
26
JavascriptFunções - Exemplo <html>
<head>
<script type="text/javascript">
function displaymessage(){ function displaymessage(){
alert("Hello World!"); //mostra mensagem alerta
}
</script>
</head>
<body>
<form>
<i t t "b tt " l "Cli k i!"
Programação para InternetFlávio de Oliveira Silva, M.Sc.
<input type="button" value="Click aqui!" onclick="displaymessage()" />
</form>
<p>Ao pressionar o botao a funcao sera invocada</p>
</body>
</html>
51
JavascriptClasses e Objetos Javascript é uma linguagem orientada a objetos, porém a abordagem para definir
é essencialmente diferente de linguagens como C++ e Java
Um objeto em Javascript é visto como um dicionário ou seja, uma coleção de propriedades e métodos onde a chave para acesso é o nome do método oupropriedades e métodos onde a chave para acesso é o nome do método ou método
A título de comparação um objeto seria semelhante a uma struct da linguagem C, porém é possível associar métodos nesta estrutura
Desta forma não existe um sintaxe para definição de uma classe, mas sim a definição de funções e um relacionamento entre as mesmas
Na linguagem não existe definição entre funções e objetos. Uma função é um objeto com o código associado ao mesmo
E J i t d fi i ã d bj t l
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Em Javascript a definição de objetos envolve: Definição do Construtor
Definição de Métodos
Criação de objetos
52
3/24/2011
27
JavascriptClasses e Objetos - Construtor A definição do construtor consiste na definção de uma função, onde o nome da
função equivale ao nome da “classe” que será definida
A palavra reservada this é responsável por associar a propriedade ou método à classeclasse
É possível realizar a sobrecarga de construtores, porém isto não é realizado de forma direta como em C++ ou Java
Exemplo de Construtorfunction person(name,surname,age,ecolor){
this.firstname=firstname;this.lastname=lastname; this.eyecolor=ecolor;
Programação para InternetFlávio de Oliveira Silva, M.Sc.
}
53
JavascriptClasses e Objetos - Métodos Um método é uma função que é associada a uma classe
Para adicionar o método a uma classe a propriedade recebe o nome da função
A função que define o método pode realizar o acesso às propriedades da classe utilizando a palavra reservada thisutilizando a palavra reservada this
É possível realizar a sobrecarga de métodos, porém isto não é realizado de forma direta como em C++ ou Java
Exemplo de Métodofunction showNameMethod(msg){
alert(msg + " “+ this.firstname);
}
function person(name,surname,age,eyecolor){thi fi t fi t
Programação para InternetFlávio de Oliveira Silva, M.Sc.
this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;
this.showName=showNameMethod //associação do método}
54
3/24/2011
28
JavascriptClasses e Objetos - Criação A linguagem oferece algumas forma para a criação de um objeto
Criação de uma instancia de objeto Neste não foi definida uma classe de objetos, apenas um objetopersonObj=new Object();personObj=new Object();
personObj.firstname="Flavio";
personObj.lastname="Silva";
document.write(personObj.firstname); //acesso a propriedade
Criação literal de um objeto Neste não foi definida uma classe de objetos, apenas um objeto que no fundo é um
dicionário
pObj1={firstname:"Flavio",lastname:"Silva"};
C i ã d bj t ti d t t
Programação para InternetFlávio de Oliveira Silva, M.Sc.
Criação de um objeto a partir do construtorvar pObj2= new person("Flavio","Silva","green");
55
JavascriptClasses e Objetos - Exemplo <html>
<body>
<script type="text/javascript">
//defines a person constructor
f ti h N M th d( ){ function showNameMethod(msg){
alert(msg+" "+this.firstname);
}
function person(fname,lname,ecolor){
this.firstname=fname;
this.lastname=lname;
this.eyecolor=ecolor;
this.showName=showNameMethod;
}
Obj ("Fl i " "Sil " " ")
Programação para InternetFlávio de Oliveira Silva, M.Sc.
var pObj= new person("Flavio","Silva","green");
for (x in pObj){
document.write(pObj[x] + " ");
}
pObj.showName("Name:");
</script>
</body>
</html>56
3/24/2011
29
JavaScriptArrays Criação
Um array pode ser criado de três formas
Construtor newvar myCars=new Array(); // criacaoy y(); //myCars[0]="Saab"; // atribuicaomyCars[1]="Volvo";myCars[2]="BMW";
Construtor new com parâmetrosvar myCars=new Array("Saab","Volvo","BMW");
Declaração Literalvar myCars=["Saab","Volvo","BMW"]
Acesso
Programação para InternetFlávio de Oliveira Silva, M.Sc.
var element = arrayVarName[arrayIndex];
Modificação arrayVarName[arrayIndex] = newValue;
57
JavaScriptEstrutura de Seleção (if-else) O comando if-else possui a seguinte sintaxe
if (condicao){
//codigo executado se condicao é true// g}
else
{//codigo executado se condicao é false
Programação para InternetFlávio de Oliveira Silva, M.Sc.
58
3/24/2011
30
JavaScriptEstrutura de Seleção (if-else)<html>
<body>
<script type="text/javascript">
var d = new Date();
ti d tH ()var time = d.getHours();
if (time < 10) {
document.write("<b>Good morning</b>");
}
else {
document.write("<b>Good afternoon</b>");
}
</script>
<p>Demonstracao do comando if-else.</p>
Programação para InternetFlávio de Oliveira Silva, M.Sc.
</body>
</html>
59
JavaScriptEstrutura de Seleção (switch) O comando switch possui a seguinte abaixo e permite a escolhe de um entre
vários blocos de código
O valor de n é comparado com o valor contido em cada “case” e caso sejam iguais o bloco é executado.iguais o bloco é executado. switch(n){case 1:
//executa bloco 1break;
case 2://executa bloco 2break;
default:
Programação para InternetFlávio de Oliveira Silva, M.Sc.
//codigo executado independente do valor de n}
60
3/24/2011
31
JavaScriptEstrutura de Controle(while) While
while (condicao){
//código excutado// g}
Exemplovar i=0;
while (i<=5){
document.write("valor: " + i);document.write("<br />");i++;
Programação para InternetFlávio de Oliveira Silva, M.Sc.
i++;}
61
JavaScriptEstrutura de Controle(do-while) do-while
do{
//bloco executado//
}while (condicao);
Exemplovar i=0;do{document.write(" valor:" + i);document write("<br />");
Programação para InternetFlávio de Oliveira Silva, M.Sc.
document.write( <br /> );i++;
}while (i<=5);
62
3/24/2011
32
JavaScriptEstrutura de Controle(for) for
for (countInit;countComparacao;contIncremento){
//bloco executado//};
Exemplovar i=0;for (i=0;i<=5;i++){
document.write(" valor: " + i);document.write("<br />");
}
Programação para InternetFlávio de Oliveira Silva, M.Sc.
63
JavaScriptEstrutura de Controle(for..in) Este método interage sobre as propriedades de um objeto ou de um array
for (variavel in object){
code to be executed}
Exemplo<html>
<body>
<script type="text/javascript">
var person={fname:"John",lname:"Doe",age:25};
for (x in person){
Programação para InternetFlávio de Oliveira Silva, M.Sc.
document.write(person[x] + " ");
}
</script>
</body>
</html
64
3/24/2011
33
JavaScriptEstruturas de Controle (break e continue) Em todas as estruturas de controle é possível utilizar os comandos: break e
continue
break Finaliza a execução do laço independente da condição Finaliza a execução do laço independente da condição
Continue Encerra a execução de um laço e continua no próximo passo
for
Programação para InternetFlávio de Oliveira Silva, M.Sc.
65
JavascriptExemplos - Eventos <html>
<head>
<script type="text/javascript">
function displayDate(){ function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
< id "d ">Thi i h </ >
Programação para InternetFlávio de Oliveira Silva, M.Sc.
<p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
66
3/24/2011
34
JavascriptExemplos - Validação<html>
<head>
<script type="text/javascript">
function validateForm(){
d t f [" F "][" il"] lvar x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
/h d
Programação para InternetFlávio de Oliveira Silva, M.Sc.
</head>
<body>
<form name="myForm" action="x" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>67
JavascriptExemplos – Objetos<html>
<body>
<script type="text/javascript">
//defines a person constructor
f ti (f l l ){function person(fname,lname,ecolor){
this.firstname=fname;
this.lastname=lname;
this.eyecolor=ecolor;
}
//constructs a new object pObj
var pObj= new person("Flavio","Silva","green");
for (x in pObj){
document.write(pObj[x] + " ");
}
Programação para InternetFlávio de Oliveira Silva, M.Sc.
}
</script>
</body>
</html>
68