9/24/2011
INTERNET
Grande conjunto de redes de computadores interligadas pelo
mundo.
Começou como uma rede interligando Universidades no E.U.A
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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
10
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 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
200.17.210.65
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
11
1
9/24/2011
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 serviço.
i
P
lti ídi (Texto;
(T t Imagem;
I
S
Principal
Possuii recursos multimídia
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;
g
http://www.fagen.ufu.br;
http://ww.uol.com.br; http://facic.ufu.br
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);
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
12
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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
13
2
9/24/2011
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 Internet
Flávio de Oliveira Silva, M.Sc.
14
HTTP Requests
Estrutura Geral
Um pedido Http contém a estrutura abaixo
ESTRUTURA
Metodo URI Versao
Header Geral
Header Pedido
Header Conteudo
Conteudo
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
Versão – Versão do protocolo utilizada
EXEMPLO
POST / HTTP/1.1
Connection: Keep-Alive
Host: www.site.com.br
Content-type: txt/html
query=book
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
Programação para Internet
15
Flávio de Oliveira Silva, M.Sc.
3
9/24/2011
HTTP Response
Estrutura Geral
A resposta contém a estrutura abaixo
ESTRUTURA
EXEMPLO
Versao Status Resposta
HTTP/1.1 200 OK
H d
G
l
Header
Geral
Date: Mon, 06 Feb 2010 20:54:26 GMT
Server: Apache/1.3.6 (Unix)
Content-length: 327
Content-type: text/html
<html>
<head>
<title>Página Hello</title>
</head>
<body>
<h1>Hello Web World!</h1>
</body>
</html>
Header Resposta
Header Conteúdo
Conteúdo
Headers – Informações adicionais enviadas juntamente com a resposta
Conteúdo – Informação enviada pelo servidor
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
16
HTTP Request e Response
Exemplos
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
Response
HTTP/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>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
17
4
9/24/2011
TELNET
Terminal 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 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úmero
da
um servidor
Nú
d porta.
t Para
P
id WEB geralmente
l
t é utilizada
tili d a porta
t 80
flavio@flavio-ubuntu:~$ telnet www.facom.ufu.br 80
Trying 192.168.3.2...
Connected to facom.ufu.br.
Escape character is '^]'.
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
18
Utilizando protocolo HTTP
Exemplo
flavio@flavio-ubuntu:~$ telnet 192.168.3.2 80
Trying 192.168.3.2...
Connected to 192.168.3.2.
Escape
p character is '^]'.
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
g 2010 01:21:19 GMT
Last-Modified: Fri, 13 Aug
ETag: "2a403f9-1614-4c649e0f"
Accept-Ranges: bytes
Content-Length: 5652
Content-Type: text/html
<html>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
19
5
9/24/2011
HTTP Request
Métodos
Principais métodos utilizado no protocolo HTTP
MÉTODO
GET
HEAD
POST
PUT
DELETE
DESCRIÇÃO
Permite obter um conteúdo em um servidor. O conteúdo pode ser um arquivo estático ou um resultado produzido de forma dinâmica
Obtém apenas informações (cabeçalho) associada ao conteúdo, sem no entanto, devolver este conteúdo
Permite o envio de informações para o servidor, por exemplo, ao preencher um formulário na Web.
Permite inserir ou alterar um conteúdo existente em um servidor
Utilizado para remover um conteúdo no servidor
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
20
HTTP Response
Server 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 cliente
FAIXA DO CÓDIGO
100‐199
200‐299
300‐399
400‐499
500
599
500‐599
SIGNIFICADO
Informação
Pedido atendido com sucesso
Pedido redirecionado
Pedido incompleto
Erros no servidor
no servidor
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
21
6
9/24/2011
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 [ other-header-value]
th
h d
l ]
header-name:
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
Entity Headers – Estão relacionados especificamente com o conteúdo sendo
transportado pelo protocolo
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
22
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)
Este rótulo é incluído como um header de conteúdo (Content-type)
Exemplos:
TIPO DOCUMENTO
Documento HTML
Arquivo texto
Imagem JPEG
Imagem GIF
Arquivo PDF
Arquivo Microsoft EXCEL
Video no formato QuickTime da Apple
Arquivo de aúdio no formato midi
Content-type:
Content-type:
Content-type:
Content-type:
Content-type:
Content-type:
Content-type:
Content-type:
HEADER CONTEÚDO
text/html
text/plain
image/jpeg
image/gif
application/pdf
application/vnd.ms-excel
video/quicktime
audio/midi
Para uma lista completa consulte o w3schools
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
23
7
9/24/2011
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
que consiste de elementos
g g
ç básica utilizada na WEB,, q
envolvidos 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
devidamente
fechada.
de idamente fechada
Exemplo
<elementName atributename1="attributeValue1" ... />
<elementName atributename1="attributeValue1" ... >
contentAppearAtBrowser
</elementName>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
24
HTML
Tags
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
Headings (Cabeçalhos)
<html>, <head>, <body>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Parágrafos
<p>, <br>
Links (Âncoras)
Imagens
Comentários
<a>
<img>
<!– This a comment -->
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
25
8
9/24/2011
HTML
Tags
Categorias de Tags
Formatação de Texto
Listas (Numeradas)
Listas (Marcadores)
Tabelas
<b>, <big>, <em>, <i>, <small>, <strong>, <sub>, <sup>,...
<ul>, <ol>
<ul>, <ol>, <li>
<table>, <tbody>, <thead>, <th>, <tr>, td
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
26
HTML
Tags
Categorias de Tags
<ul>, <ol>, <li>
<t bl > <tb
d > <th
d> <th>
> td
<table>,
<tbody>,
<thead>,
<th>, <t
<tr>,
<!– This a comment -->
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
27
9
9/24/2011
HTML
Tags
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 -->
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
28
Documento HTML
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Este é o conteudo visível da página
</body>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
29
10
9/24/2011
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 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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
30
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 Internet
Flávio de Oliveira Silva, M.Sc.
31
11
9/24/2011
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 p
pelo caractere “.”
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">
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
32
CSS (Cascade Style Sheets)
Aplicar Estilo
Existem três formas de aplicar os estilos
Arquivo externo com estilos
<head>
type="text/css"
href="mystyle.css"
<link rel="stylesheet"
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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
33
12
9/24/2011
CSS (Cascade Style Sheets)
Aplicar Estilo
Existem três formas de aplicar os estilos
Arquivo externo com estilos
<head>
type="text/css"
href="mystyle.css"
<link rel="stylesheet"
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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
34
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.
2.
3.
4.
Padrão do Navegador
Estilo definido em um arquivo externo
Estilo definido na seção <head>
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 Internet
Flávio de Oliveira Silva, M.Sc.
35
13
9/24/2011
CSS
Exemplo Básico
<html>
<head>
<style type="text/css">
p {color:red;text-align:center;}
g
h1
{
color:blue;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World! - Style p</p>
<p>This paragraph is styled with CSS - Style p.</p>
<h1>Heading - htyle h1 </h1>
</body>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
36
CSS
Composiçã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
Composição no atributo “class”
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)
É 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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
37
14
9/24/2011
CSS
Composiçã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 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>
<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>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
38
CSS
Composiçã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>
<p class="foo">Paragraph again only with .foo class<!p>
</div>
</body>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
39
15
9/24/2011
CSS
Composiçã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>
<p class="foo">Paragraph again only with .foo class<!p>
</div>
</body>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
40
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)
(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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
41
16
9/24/2011
JavaScript
Uso
Para inserir um código HTML é necessário utilizar a tag <script>
Código interno à página
<script type="text/javascript">
Códi em arquivo
i externo
t
à página,
á i
ffacilitando
ilit d seu reuso
Código
<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
ocorre. Neste elemento normalmente são colocadas todas as funções
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
42
JavaScript
Conceitos Gerais
Um código Javascript consiste de uma sequencia de comandos executados pelo
navegador
A linguagem é “case sensitive”
Comando
Blocos
Um comando pode ser finalizado por um caractere “;” e por uma quebra de linha
Uma sequencia de comandos pode ser agrupadas em blocos que neste caso iniciamse 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
/* Comentário
á i
Em várias linhas */
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
43
17
9/24/2011
JavaScript
Variá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
Exemplo
var x; //declaração
var itemName="Produto";
//declaração e atribuição
globalvar;
//variável global sem o uso da keyword "var”
Programação para Internet
44
Flávio de Oliveira Silva, M.Sc.
JavaScript
Operadores
Aritméticos
Atribuição
Operador
Descrição
Exemplo
Resultado
Contexto
+
-
Adição
Subtração
x=y+2
x=y-2
x=7
x=3
y=5
y=5
*
Multiplicação
x=y*2
x=10
y=5
/
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
--
Decremento
x=++y
x=y++
x=--y
x=y--
x=6
x=5
x=4
x=5
y=6
y=4
Operador
Exemplo
Equivalente
Resultado
=
+=
x=y
y
x+=y
x=x+y
y
x=5
x=15
-=
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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
45
18
9/24/2011
JavaScript
Operadores
Relacionais
É possível concatenar
strings
Se um número for
adicionado a uma string o
resultado será uma string
Lógicos
Operador
Descrição
Exemplo
==
igualdade
===
exatamente igual (valor e tipo)
x==8 is false
x===5 is true
x==="5" is false
!=
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
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
Operador condicional
!(x==y) is true
varivalue=(condicao)?value1:value2
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
46
JavaScript
Objetos
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 propriedade
p 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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
47
19
9/24/2011
Javascript
Funções
Possui a seguinte sintaxe
function nomeFuncao(var1,var2,...,varX)
{
//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 Internet
Flávio de Oliveira Silva, M.Sc.
48
Javascript
Eventos
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
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
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
49
20
9/24/2011
Javascript
Funções - Exemplo
<html>
<head>
<script type="text/javascript">
function displaymessage(){
alert("Hello World!"); //mostra mensagem alerta
}
</script>
</head>
<body>
<form>
<input
type="button"
<i
t t
"b tt " value="Click
l
"Cli k aqui!"
i!"
onclick="displaymessage()" />
</form>
<p>Ao pressionar o botao a funcao sera invocada</p>
</body>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
50
Javascript
Funções - Exemplo
<html>
<head>
<script type="text/javascript">
function displaymessage(){
alert("Hello World!"); //mostra mensagem alerta
}
</script>
</head>
<body>
<form>
<input
type="button"
<i
t t
"b tt " value="Click
l
"Cli k aqui!"
i!"
onclick="displaymessage()" />
</form>
<p>Ao pressionar o botao a funcao sera invocada</p>
</body>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
51
21
9/24/2011
Javascript
Classes 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 ou
propriedade
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
Em
definição
de objetos
E JJavascript
i tad
fi i ã d
bj t envolve:
l
Definição do Construtor
Definição de Métodos
Criação de objetos
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
52
Javascript
Classes 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 à
classe
É possível realizar a sobrecarga de construtores, porém isto não é realizado de
forma direta como em C++ ou Java
Exemplo de Construtor
function person(name,lastname,age,ecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.eyecolor=ecolor;
}
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
53
22
9/24/2011
Javascript
Classes 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 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étodo
function showNameMethod(msg){
alert(msg + " “+ this.firstname);
}
function person(name,lastname,age,eyecolor){
this.firstname=firstname;
thi fi t
fi t
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.showName=showNameMethod //associação do método
}
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
54
Javascript
Classes 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 objeto
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"};
Criação
de um objeto
do construtor
Ci ã d
bj t a partir
ti d
t t
var pObj2= new person("Flavio","Silva","green");
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
55
23
9/24/2011
Javascript
Classes 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;
}
var pObj=
Obj new person("Flavio","Silva","green");
("Fl i " "Sil " "
")
for (x in pObj){
document.write(pObj[x] + " ");
}
pObj.showName("Name:");
</script>
</body>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
56
JavaScript
Arrays
Criação
Construtor new com parâmetros
var myCars=new Array("Saab","Volvo","BMW");
Declaração Literal
var myCars=["Saab","Volvo","BMW"]
Acesso
Um array pode ser criado de três formas
Construtor new
Array();
var myCars=new
y
y(); // criacao
myCars[0]="Saab";
// atribuicao
myCars[1]="Volvo";
myCars[2]="BMW";
var element = arrayVarName[arrayIndex];
Modificação
arrayVarName[arrayIndex] = newValue;
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
57
24
9/24/2011
JavaScript
Estrutura de Seleção (if-else)
O comando if-else possui a seguinte sintaxe
if (condicao)
{
//codigo
//
g executado se condicao é true
}
else
{
//codigo executado se condicao é false
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
58
JavaScript
Estrutura de Seleção (if-else)
<html>
<body>
<script type="text/javascript">
var d = new Date();
ti
tH
()
var time
= d
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>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
59
25
9/24/2011
JavaScript
Estrutura 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.
switch(n){
case 1:
//executa bloco 1
break;
case 2:
//executa bloco 2
break;
default:
//codigo executado independente do valor de n
}
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
60
JavaScript
Estrutura de Controle(while)
While
while (condicao)
{
//código
//
g excutado
}
Exemplo
var i=0;
while (i<=5)
{
document.write("valor: " + i);
document.write("<br />");
i++;
}
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
61
26
9/24/2011
JavaScript
Estrutura de Controle(do-while)
do-while
do
{
//bloco executado
//
}
while (condicao);
Exemplo
var i=0;
do
{
document.write(" valor:" + i);
document.write(
<br />");
/> );
document write("<br
i++;
}
while (i<=5);
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
62
JavaScript
Estrutura de Controle(for)
for
for (countInit;countComparacao;contIncremento)
{
//bloco executado
//
};
Exemplo
var i=0;
for (i=0;i<=5;i++){
document.write(" valor: " + i);
document.write("<br />");
}
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
63
27
9/24/2011
JavaScript
Estrutura 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){
document.write(person[x] + " ");
}
</script>
</body>
</html
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
64
JavaScript
Estruturas de Controle (break e continue)
Em todas as estruturas de controle é possível utilizar os comandos: break e
continue
break
Continue
for
Finaliza a execução do laço independente da condição
Encerra a execução de um laço e continua no próximo passo
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
65
28
9/24/2011
Javascript
Exemplos - Eventos
<html>
<head>
<script type="text/javascript">
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p
id="demo">This
is a paragraph.</p>
< id
"d
">Thi i
h </ >
<button type="button" onclick="displayDate()">Display
Date</button>
</body>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
66
Javascript
Exemplos - Validação
<html>
<head>
<script type="text/javascript">
function validateForm(){
d
t f
[" F
"]["
il"]
l
var 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>
</head>
/h d
<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>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
67
29
9/24/2011
Javascript
Exemplos – 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] + " ");
}
</script>
</body>
</html>
Programação para Internet
Flávio de Oliveira Silva, M.Sc.
68
30
Download
