Programação para Internetflavio/pi/files/2011-01... · JavaServer Pages Scripts e Expressões...

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;


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


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


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


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


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


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.


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


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)


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


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


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

E-mail

WEB


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


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


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>


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


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


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


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


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


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


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


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


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>


<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


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


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>


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


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


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


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


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>


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


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


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>


<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


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>


.foo {background-color: white; color: blue;}

.bar {background-color: yellow; color: inherit; font-weight: bold;}

</style>

</head>

<body>


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


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


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


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


<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


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


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


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


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


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


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


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


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


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


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


function displaymessage(){ function displaymessage(){

alert("Hello World!"); //mostra mensagem alerta

}

</script>

</head>

<body>

<form>

<i t t "b tt " l "Cli k i!"


<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


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;


}

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


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


Criação de um objeto a partir do construtorvar pObj2= new person("Flavio","Silva","green");

55

JavascriptClasses e Objetos - Exemplo <html>

<body>


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


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


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


58

3/24/2011

30

JavaScriptEstrutura de Seleção (if-else)<html>

<body>


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>


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


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


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


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

}


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>


var person={fname:"John",lname:"Doe",age:25};

for (x in person){


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


65

JavascriptExemplos - Eventos <html>

<head>


function displayDate(){ function displayDate(){

document.getElementById("demo").innerHTML=Date();

}

</script>

</head>

<body>

<h1>My First Web Page</h1>

< id "d ">Thi i h </ >


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


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


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


//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] + " ");

}


}

</script>

</body>

</html>

68

Programação para Internetflavio/pi/files/2011-01... · JavaServer Pages Scripts e Expressões...

Documents

Transcript of Programação para Internetflavio/pi/files/2011-01... · JavaServer Pages Scripts e Expressões...