Notas de Aula – v2.0 Janeiro de 2012

Transcrição

FUNDAÇÃO DE APOIO À ESCOLA TÉCNICA
DO
ESTADO DO RIO DE JANEIRO - FAETEC
Nome da Disciplina
Período
Carga Horária
PROGRAMAÇÃO PARA A WEB – PWEB
3º
6 aulas/semana
Notas de Aula – v2.0
Janeiro de 2012
Professor M. França
[email protected]
http://www.franca.pro.br/prof
FAETEC 2012 - Notas de Aula de PWEB – Prof. M. França – Página: 1
Esta página foi deixada propositadamente em branco.
O Autor
Marcelo França é técnico em Processamento de Dados, tecnólogo em Processamento de Dados,
analista de sistemas pós-graduado pela PUC-Rio, bacharel em Administração de Sistemas de Informação,
licenciado em Informática pelo Instituto Superior de Educação do Rio de Janeiro – ISERJ,
mestre em Informática pela Universidade Federal do Estado do Rio de Janeiro – UNIRIO,
aluno do MBA em gerenciamento de projetos da Fundação Getúlio Vargas,
certificado MCAD pela Microsoft, certificado SCJA pela Sun,
certificado RAD Associate pela IBM, certificado OCJP 6 (SCJP) pela Oracle,
professor de Informática da FAETEC e da Faculdade de Informática Lemos de Castro,
e especialista de sistemas da IBM Brasil.
Estuda Informática desde 1990 e trabalha com Informática desde 1994.
Dedicatória
Dedico este trabalho a todos os meus alunos e ex-alunos.
Desejo a todos vocês muito sucesso profissional.
Que seus objetivos sejam alcançados e que vocês sempre perseverem, mantendo o foco!
Agradecimentos
Agradeço a Deus pela iluminação e por ter sido tão feliz na escolha desta profissão.
Obrigado, Senhor!
Índice
Índice ............................................................................................................................ 5
Aula 1 – Internet ............................................................................................................. 7
Introdução à Internet ................................................................................................... 7
Visão Geral de Aplicações Web ..................................................................................... 10
Exercícios: ................................................................................................................ 13
Aula 2 – Revisão de HTML (1 de 2) .................................................................................. 15
Tags ......................................................................................................................... 15
HTML ........................................................................................................................ 15
XHTML ...................................................................................................................... 16
Imagens ................................................................................................................... 16
Links ........................................................................................................................ 17
CSS .......................................................................................................................... 20
Aula 3 – Revisão de HTML (2 de 2) .................................................................................. 23
XHTML 1.0 ................................................................................................................ 23
Tabelas ..................................................................................................................... 23
Tableless ................................................................................................................... 25
Formulários ............................................................................................................... 28
Aula 4 – Programação Orientada a Objetos ....................................................................... 33
Programação Orientada a Objetos ................................................................................ 33
Diagrama de Classes da UML ....................................................................................... 34
Exercícios .................................................................................................................. 35
Aula 5 – Javascript (1 de 5) ............................................................................................ 39
Introdução ao JavaScript: ........................................................................................... 39
Variáveis ................................................................................................................... 41
Constantes ................................................................................................................ 43
Tipos de Dados .......................................................................................................... 44
Strings - Manipulação de Strings. ................................................................................. 45
Matrizes .................................................................................................................... 53
Funções de Conversão ................................................................................................ 54
Operadores ............................................................................................................... 55
Funções .................................................................................................................... 55
Estruturas de Controle e Laços ..................................................................................... 56
Caixas de Diálogo (Alert, Prompt e Confirm) .................................................................. 59
Objetos Browser (DOM) .............................................................................................. 61
Window..................................................................................................................... 61
Exercício ................................................................................................................... 63
Document ................................................................................................................. 64
History ...................................................................................................................... 66
Location .................................................................................................................... 66
Diferença entre “name” e “id” ...................................................................................... 68
Date ......................................................................................................................... 71
Eventos .................................................................................................................... 74
Imagens ................................................................................................................... 76
Exercício Resolvido ..................................................................................................... 78
Formulários e Validação .............................................................................................. 79
Aula 10 – PHP (1 de 3) ................................................................................................... 85
1 Introdução.............................................................................................................. 85
2 Exemplo de Script ................................................................................................... 85
3 Configuração (php.ini) ............................................................................................. 87
4 Sintaxe Básica ........................................................................................................ 88
Aula 11 – PHP (2 de 3) ................................................................................................... 91
5 Variáveis ................................................................................................................ 91
6 Tipos de dados ........................................................................................................ 91
7 Constantes ............................................................................................................. 92
8 Expressões ............................................................................................................. 93
9 Operadores ............................................................................................................. 93
Aula 12 – PHP (3 de 3) ................................................................................................... 97
10 Estruturas de Controle ........................................................................................... 97
11 Funções ................................................................................................................ 99
15 Inclusão de Arquivos ............................................................................................. 100
Aula 13 – PHP (aula extra) ............................................................................................ 103
16 Cookies ............................................................................................................... 103
17 Parâmetros (Query String) ..................................................................................... 104
18 Formulários.......................................................................................................... 104
Bibliografia/Créditos ..................................................................................................... 106
Apêndice A – Questionário de Avaliação do Curso ............................................................. 108
Apêndice B – Referências .............................................................................................. 110
JavaScript Objects Reference ...................................................................................... 110
Browser Objects Reference ......................................................................................... 113
HTML DOM Objects Reference ..................................................................................... 116
Aula 1 – Internet
Introdução à Internet
Apresentação da Internet: rede mundial de computadores.
A Internet é um conglomerado de redes em escala mundial, composta de milhões de
computadores interligados pelo Protocolo de Internet (IP), que permite o acesso a informações e todo
tipo de transferência de dados. A Internet é a principal das novas tecnologias de informação e
comunicação. De acordo com dados de março de 2007, a Internet é usada por 16,9% da população
mundial (em torno de 1,1 bilhão de pessoas).
Observações:
•
Brasil: 27% possuem banda larga;
•
Por que usa-se o termo “web” (teia)?
•
MODEM mesmo? (“modem digital”)
•
Problema com o esgotamento do número de IPs disponíveis (IPv6);
•
Como surgiu a Internet? (militar acadêmico comercial)
•
Facebook: No início de 2011, o Facebook possui 500.000.000 de usuários ativos.
Aproximadamente 1 em cada 13 pessoas no planeta. Metade deles está logada em
qualquer dia. 48% dos usuários entre 18 e 34 anos checam o Facebook assim que
acordam. 28% checam o Facebook de seus smartphones antes de sair da cama. Pessoas
com mais de 35 anos agora representam mais de 30% de toda a base de usuários.
Internet como plataforma (ubiqüidade/redes Wi-Max)
As redes WiMAX funcionam de maneira semelhante à das redes Bluetooth. As transmissões de
dados podem chegar aos 1Gbps a uma distância de até 50Km (radial), com estudos científicos para se
chegar a 10Gbps. O funcionamento é parecido com o do Bluetooth e o Wi-Fi (no ponto de vista de ser
transmissão e recepção de ondas de rádio), usado para comunicação entre pequenos dispositivos de
uso pessoal, como PDAs, telefones celulares (telemóveis) de nova geração, computadores portáteis,
mas também é utilizado para a comunicação de periféricos, como impressoras, scanners, etc. O WiMAX
opera na faixa ISM (Industrial, Scientific, Medical) centrada em 2,45 GHz, que era formalmente
reservada para alguns grupos de usuários profissionais. Nos Estados Unidos, a faixa ISM varia de 2400
a 2483,5 MHz. Na maioria da Europa, a mesma banda também está disponível. No Japão, a faixa varia
de 2400 a 2500 MHz.
VPN – Virtual Private Network
Rede Privada Virtual é uma rede de comunicações privada normalmente utilizada por uma
empresa ou um conjunto de empresas e/ou instituições, construída “em cima” de uma rede de
comunicações pública (como por exemplo, a Internet). O tráfego de dados é levado pela rede pública
utilizando protocolos padrão, não necessariamente seguros.
VPNs
seguras
usam
protocolos
de
criptografia
por
tunelamento
que
fornecem
a
confidencialidade, autenticação e integridade necessárias para garantir a privacidade das comunicações
requeridas. Quando adequadamente implementados, estes protocolos podem assegurar comunicações
seguras através de redes inseguras.
Deve ser notado que a escolha, implementação e uso destes protocolos não é algo trivial, e
várias soluções de VPN inseguras são distribuídas no mercado. Adverte-se os usuários para que
investiguem com cuidado os produtos que fornecem VPNs. Por si só, o rótulo VPN é apenas uma
ferramenta de marketing.
Protocolos Internet (HTTP, FTP, SMTP, HTTPS, POP, IMAP)
O modelo TCP/IP de encapsulamento busca fornecer abstração aos protocolos e serviços para
diferentes camadas de uma pilha de estruturas de dados (ou simplesmente pilha).
No caso do TCP/IP, a pilha possui cinco camadas:
As camadas mais próximas do topo estão logicamente mais perto do usuário, enquanto aquelas
mais abaixo estão logicamente mais perto da transmissão física do dado. Cada camada tem um
protocolo de camada acima e um protocolo de camada abaixo (exceto as camadas da ponta,
obviamente) que podem usar serviços de camadas anteriores ou fornecer um serviço, respectivamente.
Enxergar as camadas como fornecedores ou consumidores de serviço é um método de
abstração para isolar protocolos de camadas acima dos pequenos detalhes de transmitir bits através,
digamos, de ethernet, e a detecção de colisão enquanto as camadas abaixo evitam ter de conhecer os
detalhes de todas as aplicações e seus protocolos.
Essa abstração também permite que camadas de cima forneçam serviços que as camadas de
baixo não podem fornecer. Por exemplo, o IP é projetado para não ser confiável e é um protocolo best
effort delivery. Isso significa que toda a camada de transporte deve indicar se irá ou não fornecer
confiabilidade e em qual nível.
O TCP (Transmission Control Protocol - Protocolo de Controle de Transmissão), é um protocolo
orientado a conexões confiável que permite a entrega sem erros de um fluxo de bytes.
O UDP fornece integridade de dados (via um checksum) mas não fornece entrega garantida; já
o TCP fornece tanto integridade dos dados quanto garantia de entrega (retransmitindo até que o
destinatário receba o pacote).
A Camada de Aplicação
A camada de aplicação é a camada que a maioria dos programas de rede usa de forma a se
comunicar através de uma rede com outros programas. Processos que rodam nessa camada são
específicos da aplicação; o dado é passado do programa de rede, no formato usado internamente por
essa aplicação, e é codificado dentro do padrão de um protocolo.
Alguns programas específicos são levados em conta nessa camada. Eles provêem serviços que
suportam diretamente aplicações do usuário. Esses programas e seus correspondentes protocolos
incluem o HTTP (navegação na World Wide Web), FTP (transporte de arquivos), SMTP (envio de email),
SSH (login remoto seguro), DNS (pesquisas nome <-> IP) e muitos outros.
Uma vez que o dado de uma aplicação foi codificado dentro de um padrão de um protocolo da
camada de aplicação ele será passado para a próxima camada da pilha IP.
Na camada de transporte, aplicações irão em sua maioria fazer uso de TCP ou UDP, e aplicações
servidoras são frequentemente associadas com um número de porta. Portas para aplicações servidores
são oficialmente alocadas pela IANA (Internet Assigned Numbers Authority) mas desenvolvedores de
novos protocolos hoje em dia freqüentemente escolhem os números de portas por eles mesmos. Uma
vez que é raro ter mais que alguns poucos programas servidores no mesmo sistema, problemas com
conflito de portas são raros. Aplicações também geralmente permitem que o usuário especifique
números de portas arbitrários através de parâmetros em tempo de execução.
Aplicações cliente conectando para fora geralmente usam um número de porta aleatório
determinado pelo sistema operacional.
O pacote relacionado à camada de aplicação é chamado Mensagem.
Intranet: uso privado de tecnologias “Internet”
Uma intranet é uma rede de computadores privada que utiliza a suite de protocolos da Internet.
Consequentemente, todos os conceitos da última aplicam-se também numa intranet, como, por
exemplo, o paradigma de cliente-servidor.
Resumidamente, o conceito de intranet pode ser interpretado como "uma versão privada da
Internet", ou uma mini-Internet confinada a uma organização.
O termo foi utilizado pela primeira vez a 19 de Abril de 1995, num artigo da autoria técnica de
Stephen Lawton, na Digital News & Reviews.
Extranet: acesso externo a uma Intranet, (ou) ligação de duas Intranets.
“Rede entre parceiros.”
A Extranet de uma empresa é a porção de sua rede de computadores que faz uso da Internet
para partilhar com segurança parte do seu sistema de informação.
Tomado o termo em seu sentido mais amplo, o conceito confunde-se com Intranet. Uma
Extranet também pode ser vista como uma parte da empresa que é estendida a usuários externos
("rede extra-empresa"), tais como representantes e clientes. Outro uso comum do termo Extranet
ocorre na designação da "parte privada" de um site, onde somente "usuários registrados" podem
navegar, previamente autenticados por sua senha (login).
Visão Geral de Aplicações Web
Arquitetura Cliente/Servidor (desenho);
GET (querystring)
POST (formulário)
Modelo em Camadas: Modelo em três camadas, derivado do modelo 'n' camadas, recebe esta
denominação quando um sistema cliente-servidor é desenvolvido retirando-se a camada de negócio do
lado do cliente. O desenvolvimento é mais demorado no início comparando-se com o modelo em duas
camadas pois é necessário dar suporte a uma maior quantidade de plataformas e ambientes diferentes.
Em contrapartida, o retorno vem em forma de respostas mais rápidas nas requisições, excelente
performance tanto em sistemas que rodam na Internet ou em intranet e mais controle no crescimento
do sistema.
Arquitetura MVC: Model-view-controller (MVC) é um modelo de desenvolvimento de Software,
atualmente considerado uma "arquitetura padrão" utilizada na Engenharia de Software. O modelo isola
a "lógica" (A lógica da aplicação) da interface do usuário (Inserir e exibir dados), permitindo
desenvolver, editar e testar separadamente cada parte.
Este modelo arquitetural é muito usado em aplicações
Web.
Componentes: O modelo (model) é usado para
definir e gerenciar o domínio da informação e notificar
observadores sobre mudanças nos dados. Ele é uma
representação detalhada da informação que a aplicação
opera. A lógica de negócio adiciona valor semântico
aos dados, e quando há mudança de estado o modelo
notifica
seus
observadores.
Por
exemplo,
aluno,
professor e turma fazem parte do domínio de um
sistema acadêmico. Operações como calcular a média final do aluno ou o índice de faltas da turma
fazem parte da lógica de domínio. A forma como o dado é armazenado ou acessado não é de interesse
do MVC, assume-se que é de responsabilidade do modelo. É a camada de persistência.
A visão (view) apresenta o modelo num formato adequado ao utilizador, na saída de dados, e
diferentes visões podem existir para um mesmo modelo, para diferentes propósitos. Baseada no reuso
dos outros componentes.
O controlador (controller) recebe a entrada de dados e inicia a resposta ao utilizador ao invocar
objetos do modelo, e por fim uma visão baseada na entrada. Ele também é responsável pela validação
e filtragem da entrada de dados. Exemplo: um servlet Java.
Um caso prático é uma aplicação web em que a visão é um documento HTML (ou derivado)
gerado pela aplicação. O controlador recebe uma entrada GET ou POST após um estímulo do utilizador
e decide como processá-la, invocando objetos do domínio para tratar a lógica de negócio, e por fim
invocando uma visão para apresentar a saída.
Thin Client
O cliente pode ser “magro”, pois o “peso” do processamento reside no servidor web.
A comunicação se dá por http REQUEST (requisição) e http RESPONSE (resposta).
Browsers
Ou navegadores (Microsoft IE, Opera/Smartphones, Firefox/Mozilla, Google Chrome);
Servers
Ou servidores Web (Microsoft IIS, Apache/Unix/Linux, Tomcat, IBM WAS);
Páginas Estáticas x Páginas Dinâmicas
Código que gera páginas dinamicamente; Um código que gera código (HTML/XHTML)
Páginas dinâmicas: .php, .jsp, .aspx
Páginas estáticas: .html, htm
Protocolo http:
Request (Requisição): Normalmente de 2 tipos: GET (links/querystring); POST (formulários).
Response (Resposta).
Obs.: Existem outros métodos como o PUT (upload) e o DELETE.
Linguagem HTML: HyperText Markup Language;
Linguagem de “marcação” – TAGs.
Versão 4 é a última versão “em produção”. O XHTML se baseou nesta versão.
Versão 5, em testes, deve incluir recurso para competir com o Adobe Flash (descontinuado) e
com o Microsoft Silverlight.
HTML5 (Hypertext Markup Language, versão 5) é uma linguagem para estruturação e
apresentação de conteúdo para a World Wide Web e é uma tecnologia chave da Internet originalmente
proposto por Opera Software.[1] É a quinta versão da linguagem HTML. Esta nova versão traz consigo
importantes mudanças quanto ao papel do HTML no mundo da Web, através de novas funcionalidades
como semântica e acessibilidade. Com novos recursos, antes só possíveis por meio de outras
tecnologias. Sua essência tem sido melhorar a linguagem com o suporte para as mais recentes
multimídias, enquanto a
mantém
facilmente legível
por seres
humanos e consistentemente
compreendida por computadores e outros dispositivos (navegadores, parsers, etc). O HTML5 será o
novo padrão para HTML, XHTML, e HTML DOM. Atualmente, está em fase de esboço, porém diversos
navegadores já implementam algumas de suas funcionalidades.
XHTML
XML + HTML Um HTML mais rígido, mais sintaticamente correto;
Recomendado pelo W3C.
O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de
marcação HTML, baseada em XML. Combina as tags de marcação HTML com regras da XML. Este
processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão,
palm, celular, etc). Sua intenção é melhorar a acessibilidade.
XHTML1: A mais recente Recomendação XHTML da W3C é o XHTML 1.1: Module-based XHTML,
que é uma reformulação do XHTML 1.0 Strict, com pequenas modificações, usando alguns módulos de
um conjunto definido em Modularização de XHTML,[2] uma Recomendação W3C que cria uma
modularização de frames, um padrão de módulos, e várias outras definições. Todas as ferramentas
depreciadas de HTML, como elementos presencionais e framesets, e até mesmo os atributos lang e o
atributo de âncoras name, que ainda eram permitidos no XHTML 1.0 Strict, foram removidos desta
versão. A apresentação é controlada puramente pelas Folhas de Estilo em Cascata (CSS). Esta versão
também permite suporte à marcação rubi, necessária para línguas do Extremo Oriente (especialmente
CJK).
DHTML
Uso em conjunto das tecnologias: (X)HTML; + Javascript; + CSS; e DOM (Document Object
Model).
Dynamic HTML, ou DHTML, não é uma linguagem mas sim a união das tecnologias HTML,
javascript e uma linguagem de apresentação, como folhas de estilo CSS aliada a um Modelo de Objeto
de Documentos, para permitir que uma página Web seja modificada dinamicamente na própria
máquina cliente, sem necessidade de novos acessos ao servidor web.
Atualmente há pelo menos três grandes grupos trabalhando no DHTML: o W3C, que é o
responsável pelas versões oficiais da HTML, a Netscape, e a Microsoft.
Em relação à especificação oficial, a Netscape e a Microsoft incluíram vários recursos extras que
ajudaram ainda mais o DHTML. Sendo assim, esses DHTMLs vão algo além da capacidade de alterar as
propriedades das marcações tags HTML dinamicamente. O DHTML da Microsoft, por exemplo, permite
que se adicionem efeitos como sombra e néon a imagens dentro de um documento HTML. Outro
recurso conhecido como Fontes Dinâmicas (Dynamic Fonts), da Netscape, permite que fontes sejam
transmitidas pelo servidor junto com o documento HTML, possibilitando, a qualquer browser que
implemente esse recurso, mostrar os caracteres exatamente como planejou o autor do documento.
Resumindo, DHTML é um conjunto de ingredientes que proporcionam um controle sem
precedentes sobre a apresentação do conteúdo de páginas da Web, além de possibilitar a inclusão de
componentes multimédia, como animações, diretamente no código HTML, sem a necessidade de plugins. Toda a curiosidade em torno do HTML Dinâmico se justifica então, já que o mesmo estabelece
novos patamares de interação e movimento na internet a um baixo custo - medido em velocidade,
abrangência e flexibilidade, por exemplo, melhor do que em moeda corrente.
Exercícios:
Responda (Pesquise)
1. O que é Internet?
2. O que é World Wide Web?
3. O que é um browser?
4. O que é um Web Server?
5. Qual a diferença entre um http GET e um http POST?
6. O que é HTML?
7. Relacione Internet, Intranet e Extranet.
8. O que é Hipertexto?
9. O que é um Hiperlink?
10. O que é uma URL?
11. Qual a relação entre DNS e um endereço IP?
12. Explique o conceito de Web 2.0.
13. O que é e-mail?
14. Qual é considerado o serviço mais popular da Internet?
15. Qual a diferença entre WWW e Internet?
16. O que é VNC?
17. O que é Groupware? Dê exemplos.
18. O que é chat? Dê exemplo de um software.
19. O que é um wiki? Dê exemplo de um site.
20. O que é um arquivo/protocolo Torrent?
21. Orkut, Facebook e Twitter são exemplos de que?
22. O que é DHTML?
23. O que é AJAX?
24. Explique a técnica QueryString. Qual é o seu “problema”?
25. O que é Cloud Computing (SaaS)?
26. Explique o conceito de Sessão (Web).
27. O que são e para que servem os Cookies?
Aula 2 – Revisão de HTML (1 de 2)
Tags
Tags de início e fim.
<html> </html>
cabeçalho
<head></head>
meta (tag informativa)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
título
<title> </title>
corpo
<body> </body>
HTML
Exemplo/Exercício
Usando o Bloco de Notas e o navegador para testar o código escrito:
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the Head First Lounge</h1>
<img src="drinks.gif">
<p>
Join us any evening for refreshing elixirs, conversation and maybe
a game or two of <em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the
center of
downtown Webville. Come join
us!
</p>
</body>
</html>
No
Bloco
de
Notas:
Arquivo/Salvar,
alterando a opção “Tipo” para Todos os arquivos
(*.*), senão o Bloco de Notas pode adicionar
automaticamente a extensão “.txt”.
XHTML
Exemplo/Exercício
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título do Documento</title>
</head>
<body>

<p>Corpo do Documento</p>
</body>
</html>
Note as diferenças entre o HTML e o XHTML: Neste últimos, as tags sempre devem ser escritas
em minúsculas, sempre fechadas!
Imagens
Tag <img />
Browsers handle <img > elements a little differently than other elements. Take an element like
an <h1> or a <p>. When the browser sees these tags in a page, all it needs to do is display them.
Pretty simple. But, when a browser sees an <img> element something very different happens: the
browser has to retrieve the image before it can be displayed in a page.
The best way to understand this is to look at an example. Let's take a quick look back at the
elixirs page from the Head First Lounge, which has four <img> elements:
Observação:
•
“./” diretório atual, ou seja, onde a página (arquivo) reside.
•
“../” volta/sobe 1 nível
Exercício/Exemplo
<html>
<head><title>Head First Lounge Elixirs</title></head>
<body>
<h1>Our Elixirs</h1><h2>Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p><h2>Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg">
Combining raspberry juice with lemon grass,
citrus peel and rosehips, this icy drink
will make your mind feel clear and crisp.
</p><h2>Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg">
Blueberries and cherry essence mixed into a base
of elderflower herb tea will put you in a relaxed
state of bliss in no time.
</p>We've got four images in this HTML.
<h2>Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg">
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
</p>
<p>
<a href="../lounge.html">Back to the Lounge</a>
</p>
</body>
</html>
Tipos de Imagem
“Atualmente” os navegadores aceitam três formatos de figuras: GIF, JPEG e PNG, que podem
ser incluídas nas páginas através do elemento <img />. Este elemento possui o atributo “alt”, que
deve ser utilizado para fornecer um texto alternativo (acessibilidade) quando a imagem não puder ser
visualizada, já o atributo “src” deve ser utilizado para indicar a localização da figura.
Por exemplo:
<img src=”../papagaio.jpg” alt=”charge do papagaio” />
Links
Introdução
As ligações hipertexto (ou hiperlinks) são figuras ou trechos de textos que, quando clicados, ou
acionados, redirecionam o navegador ou leitor XHML a outro documento, ou a outro ponto do
documento atual. Neste contexto, há o conceito de página de origem, na qual existe a ligação, e a
página destino, para a qual a ligação aponta.
Em XHTML existem as ligações absolutas, normalmente utilizadas para documentos em outros
servidores, e as ligações relativas, utilizadas para referenciar páginas que estão hospedadas no mesmo
servidor que a página de origem.
Elemento <a> </a>
O elemento <a> </a> é utilizado para criar as ligações nos documentos, que são feitas através
do uso do atributo “href”, cujo valor é o endereço de destino da ligação:
<a href=”endereço de destino”> texto da ligação </a>
Uma ligação relativa pode se parecer com:
<a href=”../aulas-ambiente-internet.html”> Notas de aulas </a>
E uma ligação absoluta:
<a href=”http://www.franca.pro.br/filc/aulas.xhtml”> Notas de aulas </a>
Onde: “http://” é o nome do protocolo utilizado, que poderia ser substituído por “ftp://” ou
“mailto:”
dependendo
da
necessidade
–
este
último
usado
para
envio
de
e-mail. Outro atributo que pode ser utilizado pelo elemento <a> é o “name”, utilizado na criação de
ancoras dentro do mesmo documento.
<a name=”nome”> Texto da ancora </a>
Para referenciar um ancora no mesmo documento pode usar:
<a href=”#ancora”> Texto da ligação </a>
Para referenciar um ancora em outro documento:
<a href=”endereço do documento#ancora”> Texto da ligação </a>
Uma opção ao atributo name, mas que só funciona nos navegadores mais recentes é o atributo
“id” presente na maioria dos elementos do XHTML, por exemplo:
<h6 id=”ambiente_internet”> Ambiente Internet </h6>
Para definir uma ligação no mesmo documento para este elemento poderíamos utilizar:
<a href=”ambiente_internet”> Material das aulas <a>
Exercício XHTML
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML Exemplo 09</title>
</head>
<body>
<h1> Exemplo de uso de Ligações Hipertexto </h1>
<p> Menu :</p>
<p> [-] <a href="#uteis">Links Úteis</a></p>
<p> [-] <a href="#busca">Sites de Busca</a></p>
<p> [-] <a href="#ref">Referencias</a></p>
<p> <a name="uteis">Links Úteis :</a> </p>
<p> | <a href="http://www.yahoo.com.br">http://www.ig.com.br</a>
| <a href="http://www.bol.com.br">http://www.bol.com.br</a>
| <a href="http://www.gmail.com">http://www.gmail.com</a>
| <a href="http://www.hotmail.com">http://www.hotmail.com</a> | </p>
<p> <a name="busca">Sites de Busca :</a> </p>
<p> | <a href="http://www.google.com.br">http://www.google.com.br</a>
| <a href="http://www.yahoo.com.br">http://www.yahoo.com.br</a>
| <a href="http://www.altavista.com.br">http://www.altavista.com.br</a>
| <a href="http://www.cade.com.br">http://www.cade.com.br</a> |</p>
<p> <a name="ref">Referencias :</a> </p>
<p> | <a href="http://www.openoffice.org.br/saite/">Open Office</a>
| <a href="http://www.debian.org/">Debian Linux</a>
| <a href="http://www.suse.com"> SuSe Linux</a> | </p>
</body>
</html>
CSS
Introdução – Estilo “Inline”
CSS é uma recomendação do W3C para facilitar a manutenção de sites.
Inline: Inline styles are when you just insert the type of style you want inside another tag, using
the style attribute. This is usually the least useful way to use CSS.
<p style="width:100%; color:#660099; text-align:right; background-color:#ffcc00;"
> is the style for this example. </p>
Tag <style>
Styles can also be placed in the document using the <style> tag. The <style> tag is usually
placed in the head section of the document, where it will apply to the whole document.
When using styles that are not inline styles. A style is defined for a particular tag or for a named
class. The syntax for creating a style for an HTML tag is to write tag { styles } . Note that you do not
need " marks around the styles when written this way. It is a good idea to put  comment
tags in between the <style> and </style> tags, just to make sure that their contents aren't
accidentally displayed in the page.
Exemplo:
<html>
<head>
<title>
Basic styling!
</title>
<style>
<!-p { color:#009900;
font-family:"comic sans ms",sans-serif; }
h1 { color:#660000; font-size:12pt; }
-->
</style>
</head>
<body>
<h1>
Hello World!</h1>
<p>I am a very basic page.</p>
Use your back button to
get out of here.
</body>
</html>
Classes CSS
Styles can also be applied to classes. A class is just a name you make up for your style.
To specify the style for a class, just write the class name with a . in front of it and then define
your style as you would have done for an html tag.
To use your class, just put class="whatever_your_class_is" in your opening tag.
<div> & <span>
Don't have an appropriate tag to put the style in? Two special tags were introduced to take care
of just this.
Use <div> when the area you want to apply the style to has other tags inside it and is a selfcontained unit of anywhere from a paragraph to most of a page.
Use <span> when the area you want to apply the style to is only part of a paragraph, perhaps a
single word.
Exemplo:
<html>
<head>
<title>
Basic styling!
</title>
<style>
<!-.green { color:#009900; text-decoration:underline; }
.red { color:#660000; font-size:12pt; }
p { color:#000099; }
-->
</style>
</head>
<body>
<h1 class="green">
Hello World!</h1>
<p class="red">I am a very basic page.</p>
<p>Use your back button to
get out of here.</p>
</body>
</html>
Estilos Externos
Styles can also be set in an external style sheet which is linked to the page with a <link> tag.
For example the style sheet for this site is included like this:
<link rel="stylesheet" type="text/css" href="class.css" />
The advantage of doing this is that the same style sheet can be used in every page on your site.
Your entire site can be updated by changing just this one file.
You can also include different styles for different devices in the same xhtml page. Just add the
attribute media=type_of_media. Where type of media is something like screen, print, aural, etc. See
HtmlHelp for a list of media types and more on span, div, and adding styles.
Inside an external css file you just list your selectors and their specifications like you would
between <style> tags, but You do not put <style> tags inside an external style sheet.
Cascading
How order matters: The term "Cascading" is used because styles "cascade" or are inherited. If
more than one style can apply to something on the page, then the one that is closest to it is what is
applied.
There may be some parts of a previous style that aren't contradicted by the current style, these
are also supposed to apply. For example: If the attributes in an inline style change the font size to
20pt, but don't say anything about font type, then whatever font type is specified earlier in the
document for this tag still applies.
Aula 3 – Revisão de HTML (2 de 2)
XHTML 1.0
Tipos
São três os tipos de DOCTYPE para XHTML:
•
STRICT;
•
TRANSITIONAL;
•
FRAMESET.
Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Strict//EN"
Esta é a mais rígida das declarações. Os documentos
XHTML no modo Strict não admitem
qualquer item de formatação dentro dos elementos e nem elementos em desuso "deprecated" segundo
as recomendações do W3C. São indicados para uso com folhas de estilo em cascata, com marcação
totalmente independente da apresentação;
Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Transitional//EN"
Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda
utilizem elementos em desuso ("deprecated"), regras de apresentação embutidas em tags e também
para documentos destinados a exibição em browsers sem suporte para CSS. Não admite qualquer tipo
de marcação para frames;
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Esta declaração permite tudo da declaração transational e mais os elementos especificos para
frames.
Tabelas
Introdução
O elemento “<table> </table>” é o responsável pela manutenção das tabelas nesta linguagem.
Na construção de uma tabela podemos utilizar os elementos da tabela ao lado para definir suas partes.
Uma célula pode se estender por mais de uma coluna. Para isto, deve ser utilizado o atributo “colspan”
seguido do número de colunas que a célula deve se expandir. Caso a célula tenha de ocupar mais de
uma linha o atributo a ser utilizado é o “rowspan”, ambos devem ser inseridos dentro de uma
declaração <td> </td>.
Exemplo (Vai ocupar 3 colunas):
<td colspan=3>Vendas de Automóveis no Varejo por Fabricante</td>
Exemplo/Exercício
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
</head>
<body>
<h1> Exemplo de uso de Tabelas </h1>
<br />
<table align=center width=90% border=2 cellspacing=5
cellpadding=5 bgcolor=#BBFFBB>
<caption align=bottom>Exemplo 2: Uma tabela mais elaborada
<tr>
<th colspan=4 bgcolor=aqua>Vendas de Automóveis no Varejo por Modelo
<tr bgcolor=#FFCCC8>
<th>Fabricante
<th align=left nowrap>Marca (incluindo todos os modelos e categorias)
<th align=right>1995
<th align=right>1996
<tr>
<th valign=top rowspan=2 bgcolor=yellow>Fiat
<td>Tempra
<td align=right>12.345
<tr>
<td>Uno
<tr>
<th valign=top bgcolor=lime>Ford
<td>Fiesta
<tr>
<th
valign=top rowspan=3 bgcolor=silver>General Motors
<td>Corsa
<tr>
<td>Monza
<tr>
<td>Vectra
<tr>
<th valign=top rowspan=2 bgcolor=red>Volkswagem
<td>Gol
<tr>
<td>Parati
</table>
</body>
</html>
Resultado:
Qual o problema/erro do código acima?
Tableless
Introdução
Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de
conteúdo na página (recomendada pela W3C), pois defende que os códigos HTML deveriam ser usados
para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares. Para
a disposição da página o recomendado seria usar CSS. Para layout: div + CSS.
Para desenvolver um site usando tabelas muitas ferramentas e desenvolvedores abusam de
recursos como criar tabelas com células possuindo elementos com Gifs com um único pixel
transparente apenas para manter a célula visível e forçar o layout da página ficar visualmente
elegante, porém o código torna-se totalmente incoerente se comparado com o conteúdo do site. A W3C
também não desaprova o uso de tabelas, desde que elas sejam utilizadas para tabular dados e não
para formatar layout. Muitos navegadores travam ou exibem incorretamente formatações usando
tabelas.
Vantagens
Adotar este padrão de desenvolvimento também facilita a separação da camada de
apresentação (XHTML) da aplicação para o arquivo de estilo (CSS).
Diminuição de Banda. Os navegadores modernos cacheam arquivos css e javascripts
(performance), se a maneira que o site será visualizado é guardado em um css (padrão tableless)
então o arquivo será cacheado após o primeiro acesso e todos os acessos seguintes não carregarão
este arquivo, carregarão apenas o conteúdo (texto) do site. Quando se usa tabela, a apresentação das
tabelas (tags como tr e td,gifs vazios, atributos como cellspacing e border) são carregados todas as
vezes que o usuário acesar o site.[3]
Manutenção. Estando o estilo separado do arquivo html, facilita quando o desenvolvedor deseja
mudar algo relacionado ao conteúdo, pois o conteúdo do site deixa de ficar oculto dentro de tabelas e
subtabelas para estarem dentro de divs (caixas de conteúdo) que não trazem nenhuma informação de
aparência. Caso ele deseje alterar o estilo, basta ir no arquivo CSS e não precisará procurá-lo entre
códigos e conteúdos que não tem relação com a aparência e apresentação do site.
Observação: Excelente site - http://tableless.com.br/artigos/tutorial/?cont=1
Exemplo:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
<html>
<head>
<title>Layout com 3 colunas em tableless</title>
</head>
<style>
body {
text-align:center;
}
p {
margin:0 0 10px 0;
}
#box {
margin:0 auto 0 auto;
width:770px;
}
Strict//EN"
#coluna_esquerda, #coluna_direita {
width:98px;
}
#coluna_esquerda, #coluna_direita, #coluna_principal {
float:left;
text-align:left;
border:1px solid black;
padding:10px;
}
#coluna_esquerda {
background:#cccccc;
}
#coluna_direita {
background:#fedc67;
}
#coluna_principal {
width:488px;
margin:0 10px 0 10px;
}
</style>
<body>
<div id="box">
<div id="coluna_esquerda"><b>coluna da esquerda</b></div>
<div
id="coluna_principal"><p><b>coluna
principal</b></p><p>Lorem
ipsum
dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis
condimentum.
Aliquam
nonummy
auctor
massa.
Pellentesque
habitant
morbi
tristique
senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus
magna,
auctor
et,
sagittis
ac,
posuere
eu,
lectus.
Nam
mattis,
felis
ut
adipiscing.</p></div>
<div id="coluna_direita"><b>coluna da direita</b></div>
</div>
<script>
objeto_esquerda = document.getElementById('coluna_esquerda');
objeto_principal = document.getElementById('coluna_principal');
objeto_direita = document.getElementById('coluna_direita');
altura_principal = parseInt(objeto_principal.offsetHeight) - 22 + 'px';
objeto_esquerda.style.height
=
objeto_direita.style.height
altura_principal;
</script>
</body>
</html>
=
Resultado:
Formulários
Introdução
Um dos conceitos mais importantes em XHTML, os formulários são utilizados para o envio de
informações ao servidor, ou para a interação do usuário com a página através do uso de JavaScripts.
Os dados do formulário serão tratados somente quando ocorrer sua submissão, que pode ser realizada
através do botão de “submit”. Os valores inseridos nos formulários são retornados em pares, onde a
primeira parte é o nome (id) do elemento e a segunda é o valor atribuído, sendo que eles são
separados uns dos outros pelo sinal “=”;
Os dados podem ser submetidos através de dois métodos GET (QueryString) e POST. No
método GET os dados serão anexados à URL e enviados ao servidor, já o método POST envia os dados
junto com as demais informações contidas no cabeçalho do HTTP. Ao contrário do POST que pode
manipula qualquer quantidade de informações, o GET fica limitado pelo tamanho máximo permitido
para uma URL, além disto, o GET é menos seguro, mas seu uso permite o reenvio de um formulário
sem que o mesmo seja re-digitado.
Para a construção dos formulários devemos fazer uso do elemento “<form> </form>”. Para
armazenar as informações fornecidas pelo usuário podemos fazer uso do elemento “<input />”.
Tags Form e Input
From http://www.w3schools.com (Copyright Refsnes Data)
HTML <form> Tag
Example
A simple HTML form with two input fields and one submit button:
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
Definition and Usage
The <form> tag is used to create an HTML form for user input. A form can contain input
elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain
select menus, textarea, fieldset, legend, and label elements. Forms are used to pass data to a server.
Browser Support
The <form> tag is supported in all major browsers.
Differences Between HTML and XHTML
In XHTML, the name attribute of the <form> tag is deprecated, and will be removed. Use the id
attribute instead.
Tips and Notes
Note: The form element is a block-level element, and creates a line break before and after itself.
Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Optional Attributes
Standard Attributes
The <form> tag supports the following standard attributes:
Event Attributes
The <form> tag supports the following event attributes:
HTML <input> Tag
Example
A simple HTML form with two input fields and one submit button:
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
Definition and Usage
The <input> tag is used to select user information.
An input field can vary in many ways, depending on the type attribute. An input field can be a
text field, a checkbox, a password field, a radio button, a button, and more.
Browser Support
The <input> tag is supported in all major browsers.
Differences Between HTML and XHTML
In HTML, the <input> tag has no end tag.
In XHTML, the <input> tag must be properly closed, like this <input />.
Tips and Notes
Tip: Use the <label> tag to define labels for input elements.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Standard Attributes
The <input> tag supports the following standard attributes:
Exemplo/Exercício
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
</head>
<body>
<br /><br />
<h1> Exemplo de uso de formulários: </h1>
<form action="http://www.franca.pro.br" method="post" name="form01">
Nome......: <input type="text" id="nome" name="nome" /><br /><br />
Endereço: <input type="text" id="endereco" name="endereco" readonly="true" />
<br /><br />
E-mail....: <input type="text" id="mail" name="mail" /><br /><br />
Telefone.: <input type="text" id="tel" name="tel" /><br /><br />
Senha.....: <input type="password" name="senha" id="senha" /><br /><br />
Curriculo: <input type="file" id="cv" name="cv" /> <br /><br />
Idade .....:
<input type="radio" name="idade" id="idade" value="maior" /> Maior de Idade |
<input type="radio" name="idade" id="idade" value="menor"/> Menor de Idade
<br /><br />
Sistema Operacional:
<input type="checkbox" name="so" id="so" value="linux" /> Linux |
<input type="checkbox" name="so" id="so" value="bsd" /> BSD |
<input type="checkbox" name="so" id="so" value="aix" /> AIX |
<input type="checkbox" name="so" id="so" value="solaris" /> Solaris |
<input type="checkbox" name="so" id="so" value="macos" /> MacOS |
<input type="checkbox" name="so" id="so" value="outro" /> Outro
<br /><br />
Estado Civil :
<select name="civil" id="civil">
<option> Casado </option>
<option> Solteiro </option>
</select> <br /><br />
<input type="submit" name="enviar" id="enviar" value="Enviar" />
<input type="reset" name="cancelar" id="cancelar" value="Cancelar" />
<input type="button" name="validar" id="validar" value="Validar" />
<input type="image" name="validar2" id="validar2" src="alinux.jpg" />
</form>
</body>
</html>
Aula 4 – Programação Orientada a Objetos
Programação Orientada a Objetos
Introdução
POO é um paradigma, forma de se pensar para resolver um problema.
A Orientação a Objetos foca no reuso. E uma linguagem ser OO não significa que ela não seja
estruturada (sequência, seleção, repetição).
Exemplo
Ler 2 números e exibir sua soma (Programação Estruturada vs. OO).
Programação Estruturada (Como?)
PROGRAMA SOMA
VARIÁVEIS
N1, N2: REAL
INÍCIO
ESCREVA “ENTRE COM DOIS NÚMEROS:”
LEIA N1, N2
ESCREVA “A SOMA É:”, N1+N2
FIM
LOC = 8
Programação OO (Com o quê?)
CLASSE CALCULADORA
ATRIBUTOS
N1, N2: REAL
MÉTODOS
INFORMAR_N1(N: REAL)
N1  N
FIM-INFORMAR_N1
INFORMAR_N2(N: REAL)
N2  N
FIM-INFORMAR_N2
RETORNAR_SOMA(): REAL
RETORNO (N1+N2)
FIM-RETORNAR_SOMA
FIM-CLASSE
PROGRAMA SOMA
VARIÁVEIS
C: CALCULADORA
N: REAL
INÍCIO
C  NOVO CALCULADORA
ESCREVA “ENTRE COM DOIS NÚMEROS:”
LEIA N
C.INFORMAR_N1(N)
LEIA N
C.INFORMAR_N2(N)
ESCREVA “A SOMA É:”, C.RETORNAR_SOMA()
FIM
LOC=27 Só se justifica pelo reuso e facilidade de manutenção.
Conceitos:
Classes e Objetos
Classes possuem um estado (state) e um comportamento (behavior).
O estado são Atributos ou Propriedades;
O comportamento são Métodos ou Operações;
A convensão JavaBeans diz que, para cada atributo, teremos dois métodos acessores: get e set
(ou is).
Obs.: The methods that change a property’s value are called setter methods, and the methods
that retrieve a property’s value are called getter methods.
Diagrama de Classes da UML
Escopo ou visibilidade:
+ publico, qualquer classe pode acessar
- privado, somente a própria classe
# protegido (protected), somente a própria classe ou classes filhas
~ pacote (friend), somente classes no mesmo pacote, além da própria classe podem acessar
Exemplo:
Calculadora
- N1: Real
- N2: Real
+ InformarN1 (N: Real)
+ InformarN2 (N: Real)
+ RetornarSoma(): Real
Observação: Em Java, protected = package + kids.
Princípios OO:
Abstração (só o que for relevante);
Encapsulamento (Information Hiding); segurança, simplicidade, coesão.
Herança (atributos + métodos); A herança tem que ser natural (is-a).
Polimorfismo (só métodos);
Programação Orientada a Eventos versus POO
Uma linguagem pode ser OO e não ser OE (Pascal), bem como pode ser OE (Visual Basic 6,
Javascript) e não suportar totalmente a OO.
Linguagens Orientadas a Objetos:
•
•
•
•
•
Pascal
Java
Linguagens .NET (VB.NET, C#.NET)
C++
PHP
Obs.: Palavra-chave static em Java: atributos e métodos estáticos (da classe), não pertencem
às instâncias, mas são compartilhados.
Exercícios
Responda:
1.
2.
3.
4.
5.
Relacione os termos “classe”, “objeto” e “instância”.
Defina os princípios/conceitos do paradigma OO.
Defina a estrutura de uma classe.
Qual a diferença entre programação orientada a eventos e programação orientada a objetos?
Defina a classe Java Pessoa com os atributos nome e idade, e seus respectivos métodos
getters e setters.
6. Faça um programa que instancie duas Pessoas: João e Maria. O programa deve exibir os
dados de ambos os objetos.
Marque a melhor resposta:
Questão 1)
Prova: FCC - 2011 - NOSSA CAIXA DESENVOLVIMENTO - Analista de Sistemas
Na programação orientada a objetos, subprogramas (ou subrotinas) são encapsuladas nos
próprios objetos e passam a designar-se
a)
b)
c)
d)
e)
atributo.
herança.
instância.
método.
encapsulamento.
Questão 2)
1. Crie uma classe Java para representar uma lâmpada. A lâmpada pode ser ligada e desligada.
Implemente um método main() no qual você vai: criar um objeto do tipo lâmpada, ligar a lâmpada,
imprimir na tela o estado atual da lâmpada, desligar a lâmpada, e imprimir novamente o seu estado.
Resposta:
1. public class Lampada {
2.
private boolean estado; //ligado ou não
3.
4.
public Lampada(){
5.
//a lampada comeca desligada
6.
this.estado = false;
7.
}
8.
9.
//metodo que seta o estado da lampada
10.
public void setEstado(boolean estado){
11.
this.estado = estado;
12.
}
13.
14.
//metodo que retorna o estado atual da lampada
15.
public boolean getEstado(){
16.
return this.estado;
17.
}
18. }
1. public class Main {
2.
public static void main(String[] args){
3.
//cria o objeto lampada
4.
Lampada minhaLampada = new Lampada();
5.
6.
//ligar a lampada
7.
minhaLampada.setEstado(true);
8.
System.out.println("A lampada esta ligada.");
9.
10.
//desliga a lampada
11.
minhaLampada.setEstado(false);
12.
System.out.println("A lampada esta desligada.");
13.
}
14. }
Questão 3)
Em relação aos princípios da orientação a objetos, a separação dos aspectos externos de um
objeto, acessíveis por outros, dos detalhes internos da implementação que ficam ocultos dos demais, é
uma característica conhecida por
(A) Polimorfismo.
(B) Compartilhamento.
(C) Encapsulamento.
(D) Herança.
(E) Classes.
Questão 4)
Na orientação a objetos, é um recurso que serve para inicializar os atributos e é executado
automaticamente sempre que um novo objeto é criado:
a)
b)
c)
d)
e)
método.
polimorfismo.
interface.
classe.
construtor.
Questão 5)
Um detalhe importante que deve ser especificado para os atributos e operações das classes é a
visibilidade. Desta forma, os símbolos: + (sinal de mais), # (sinal de número), - (sinal de menos) e ~
(til) correspondem respectivamente a:
a)
b)
c)
d)
e)
público, pacote, privado e protegido.
público, protegido, privado e pacote.
privado, protegido, público e pacote.
privado, pacote, público e protegido.
pacote, protegido, privado e público.
Questão 6)
Prova: UFG - 2010 - UFG - Analista de TI - Desenvolvimento de Sistemas
O mecanismo de separação de aspectos internos e externos de um objeto que visa a impedir o
acesso direto ao estado de um objeto e disponibilizar externamente apenas os métodos que alteram
este estado, chama-se
a)
b)
c)
d)
abstração.
encapsulamento.
herança.
proteção de código.
Aula 5 – Javascript (1 de 5)
Introdução ao JavaScript:
Definição
Javascript é uma linguagem de programação utilizada para criar pequenos programas
encarregados de realizar ações dentro do âmbito de uma página web. Com Javascript podemos criar
efeitos especiais nas páginas e definir interatividades com o usuário. O navegador do cliente é o
encarregado de interpretar as instruções Javascript e executá-las para realizar estes efeitos e
interatividades, de modo que o maior recurso, e talvez o único, com que conta esta linguagem é o
próprio navegador.
Netscape, depois de fazer seus navegadores compatíveis com os applets, começou a
desenvolver uma linguagem de programação ao que chamou LiveScript que permitisse criar pequenos
programas nas páginas e que fosse muito mais simples de utilizar que Java. De modo que o primeiro
Javascript se chamou LiveScript, mas não durou muito esse nome, pois antes de lançar a primeira
versão do produto se forjou uma aliança com Sun Microsystems (hoje Oracle), criadora do Java, para
desenvolver em conjunto essa nova linguagem.
A aliança fez com que Javascript (sintaxe Java like) se desenhara como um irmão pequeno do
Java, somente útil dentro das páginas web e muito mais fácil de utilizar, de modo que qualquer pessoa,
sem conhecimentos de programação pudesse aprofundar-se na linguagem e utilizá-la. Ademais, para
programar Javascript não é necessário um kit de desenvolvimento, nem compilar os scripts, nem
realizá-los em ficheiros externos ao código HTML, como ocorreria com os applets.
Netscape 2.0 foi o primeiro navegador que entendia Javascript e seu rastro foi seguido pelos
navegadores da companhia Microsoft a partir da versão 3.0.
Que fique claro que Javascript não tem nada a ver com Java, salvo em suas origens. Atualmente
são produtos totalmente distintos e não guardam entre si mais relação que a sintaxe idêntica e pouco
mais. Algumas diferenças entre estas duas linguagens são as seguintes:
Compilador. Para programar em Java necessitamos um Kit de desenvolvimento e um
compilador. Entretanto, Javascript não é uma linguagem que necessite que seus programas se
compilem, senão que estes se interpretem por parte do navegador quando este lê a página.
Orientado a objetos. Java é uma linguagem de programação orientada a objetos. (Mais tarde
veremos que quer dizer orientado a objetos, para quem ainda não sabe) Javascript não é orientado a
objetos, isto quer dizer que poderemos programar sem necessidade de criar classes, tal como se
realiza nas linguagens de programação estruturada como C ou Pascal.
Propósito. Java é muito mais potente que Javascript, isto é devido a que Java é uma linguagem
de propósito geral, com o que se podem fazer aplicações do mais variado, entretanto, com Javascript
somente podemos escrever programas para que se executem em páginas web.
Estruturas fortes. Java é uma linguagem de programação fortemente tipada, isto quer dizer que
ao declarar uma variável teremos que indicar seu tipo e não poderá mudar de um tipo a outro
automaticamente. Por sua parte, Javascript não tem esta característica, e podemos colocar em uma
variável a informação que desejarmos, independentemente do tipo desta. Ademais, poderemos mudar
o tipo de informação de uma variável quando quisermos.
Outras características. Como vemos Java é muito mais complexo, mas também, mais potente,
robusto e seguro. Tem mais funcionalidades que Javascript e as diferenças que os separam são o
suficientemente importantes como para distinguí-los facilmente.
Javascript (Resumo)
“LP” cliente para páginas Web. Usada para criação de efeitos especiais (inicialmente). Interação
com o usuário (eventos). O navegador executa o código. Histórico: Netscape/Livescript, Aliança com
Sun/Javascript, Sintaxe Java-like (case sensitive)/ponto-e-vírgula.
Javascript não é Java.
Diferenças: Compilador/kit, OO, propósito, robustez, tipagem forte.
Estrutura Básica
The HTML <script> tag inserts a Javascript in a HTML page:
<html>
<head>
<title></title>
<script type=”text/javascript”> </script>
</head>
<body>
<script type=”text/javascript”> </script>
</body>
</html>
Você também pode vincular um arquivo .js externo.
<script src='arquivo.js' type='text/javascript'></script>
Variáveis
Introdução
Uma variável é um espaço em memória onde se armazena um dado, um espaço onde podemos
salvar qualquer tipo de informação que necessitemos para realizar as ações de nossos programas. Por
exemplo, se nosso programa realiza somas, será muito normal guardarmos em variáveis as distintas
parcelas que participam na operação e o resultado da soma. O efeito seria algo parecido a isto.
parcela1 = 23
parcela2 = 33
soma = parcela1 + parcela2
Neste exemplo temos três variáveis, parcela1, parcela2 e soma, onde guardamos o resultado.
Vemos que seu uso para nós é como se tivéssemos um apartado onde salvar um dado e que se pode
acessá-los colocando somente seu nome.
Os nomes das variáveis devem ser construídos com caracteres alfanuméricos e o caractere
sublinhado (_). A parte disso, há uma série de regras adicionais para construir nomes para variáveis. A
mais importante é que tem de começar por um caractere alfabético ou sublinhado. Não podemos
utilizar caracteres raros como o signo +, um espaço ou um $. Nomes admitidos para as variáveis
poderiam ser:
Idade
PaísDeNascimento
_nome
Obs.: Em Java, podemos começar com letra, “_” (underscore) ou “$”, mas no Javascript não
podemos usar “$”.
Também há que evitar utilizar nomes reservados como variáveis, por exemplo não poderemos
usar no nome da variável “palavras” como return ou for, que já veremos que são utilizadas para
estruturas da própria linguagem. Vejamos agora alguns nomes de variáveis que não são permitidos:
12meses
seu nome
return
pe%pe
Lembre-se que: Variable names are case sensitive (y and Y are two different variables). Variable
names must begin with a letter or the underscore character.
Declaração de variáveis
Boa prática, porém não obrigatória.
Declarar variáveis consiste em definir e de passo informar ao sistema de que se vai utilizar uma
variável. É um costume habitual nas linguagens de programação definir as variáveis que serão
utilizadas nos programas e para isso, seguem-se algumas regras restritas. Porém, javascript ultrapassa
muitas regras por ser uma linguagem mais livre na hora de programar e um dos casos no qual outorga
um pouco de liberdade é na hora de declarar as variáveis, já que não estamos obrigados a fazê-lo, ao
contrário do que acontece na maioria das linguagens de programação.
De qualquer forma, é aconselhável declarar as variáveis, além de um bom costume e para isso
Javascript conta com a palavra var. Como é lógico, utiliza-se essa palavra para definir a variável antes
de utilizá-la.
var operando1
var operando2
var x;
var carname;
Ou
var x = 5;
var carname = “Volvo”;
Também pode-se atribuir um valor à variável quando se está declarando
var operando1 = 23
var operando2 = 33
Também se permite declarar várias variáveis na mesma linha, sempre que se separem por
vírgulas.
var operando1, operando2
Escopo das Variáveis
Variáveis globais
Como dissemos, as variáveis globais são as que estão declaradas no âmbito mais amplo
possível, que em Javascript é uma página web. Para declarar uma variável global à página
simplesmente faremos em um script, com a palavra var.
Fora de uma função ou sem usar a palavra-chave var.
<script>
var variávelGlobal
</script>
Variáveis locais (bloco)
Também poderemos declarar variáveis em lugares mais dimensionados, como por exemplo,
uma função. A estas variáveis chamaremos de locais. Quando se declarem variáveis locais somente
poderemos acessá-las dentro do lugar aonde tenham sido declaradas, ou seja, se havíamos declarado
em uma função somente poderemos acessá-la quando estivermos nessa função.
As variáveis podem ser locais em uma função, mas também podem ser locais a outros âmbitos,
como por exemplo, um loop. Em geral, são âmbitos locais qualquer lugar dimensionado por chaves.
<script>
function minhaFuncao() {
var variavelLocal
}
</script>
Exemplo
<script>
var numero = 2
function minhaFuncao (){
var numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
</script>
Diferenças entre utilizar var ou não
Como dissemos, em Javascript temos liberdade para declarar ou não as variáveis com a palavra
var, mas os efeitos que conseguiremos em cada caso serão distintos. Na verdade, quando utilizamos
var, estamos fazendo com que a variável que estamos declarando seja local ao âmbito onde se declara.
Por outro lado, se não utilizarmos a palavra var para declarar uma variável esta será global a toda a
página, seja qual for o âmbito no qual tenha sido declarada.
Constantes
Introdução
Constantes do programador; Boa prática, manutenção.
Palavra-chave “final” em Java.
As constantes, têm a mesma função das variáveis, porém um valore de uma constante não
pode ser alterado, apenas isso que diferencia-a de uma variável. Para se declarar constantes usa-se :
const MAXIMO=10;
Exemplos: média mínima, aulas por semana, etc..
Nota: Você não pode declarar uma constante dentro do escopo de uma função, e também não
pode declarar uma constante com o nome de uma variável.
Tendo isso em mente veja os códigos abaixo que resultarão em erro:
//ISTO IRÁ CAUSAR UM ERRO!
function f{};
const f = 5;
//ISTO IRÁ CAUSAR UM ERRO TAMBÉM !
function f{
const g=5;
var g;
}
ATENÇÂO: você só poderá usar constantes no JavaScript 1.5, pois isso é uma inovação desta
versão do JavaScript. Caso tente usar o comando const para declarar uma constante usando JavaScript
1.4 e anteriores, ocorrerá uma mensagem de erro de sintaxe.
Tipos de Dados
Introdução
Em uma variável podemos introduzir vários tipos de informação, por exemplo, texto, números
inteiros ou reais, etc. A estas distintas classes de informação conhecemos como tipos de dados. Cada
um tem características e usos distintos, vejamos quais são os tipos de dados de Javascript.
Números (inteiro ou real)
Para começar temos o tipo numérico, para salvar números como 9 ou 23.6
String (Classe)
O tipo cadeia de caractere salva um texto. Sempre que escrevemos uma cadeia de caracteres
devemos utilizar as aspas (").
Boleanos
Também contamos com o tipo boleano, que salva uma informação que pode valer como sim
(true) ou não (false).
Por último seria relevante assinalar aqui que nossas variáveis podem conter coisas mais
complicadas, como poderia ser um objeto, uma função, ou vazio (null) mas já o vermos mais adiante.
Na verdade nossas variáveis não estão forçadas a salvar um tipo de dados em concreto e
portanto, não especificamos nenhum tipo de dados para uma variável quando a estamos declarando.
Podemos introduzir qualquer informação em uma variável de qualquer tipo, inclusive podemos ir
mudando o conteúdo de uma variável de um tipo a outro sem nenhum problema. Vamos ver isto com
um exemplo.
var nome_cidade = "Salvador"
var revisado = true
nome_cidade = 32
revisado = "no"
Strings - Manipulação de Strings.
Tabela com todos os caracteres de escape
o
o
o
o
o
o
o
o
Quebra de linha: \n
Aspas simples: \'
Aspas dupla: \"
Tabulador: \t
Enter: \r
Avance de página: \f
Retroceder espaço: \b
Contra-barra: \\
replace (method)
variável.replace (<o que busco>, <pelo que quero substituir>)
Observação: no Java, substitui todas as ocorrências, não apenas a 1ª (javascript).
substring (substr)
Esta é uma função de manipulação de strings, e serve para que você possa obter um trecho ou
uma pequena parte de uma grande string, isto sendo informado por intervalos de números, os quais
você pode contar os caracteres.
Exemplo:
<Script>
var frase = “Alface é bom para saúde”;
var parte = frase.substring(0,2);
document.write(parte);
</Script>
Como podemos ver a função substring arrancou uma parte da minha frase, esse é o objetivo
desta função, como vimos onde eu tinha “Alface é bom para saúde” eu fiquei apenas com a palavra Al.
Isso aconteceu porque eu mandei que o Script começasse a contar à partir do zero, ou seja, contar à
partir da primeira string encontrada (da esquerda para a direita), e terminar quando chegar o total da
conta em 2 caracteres.
Exemplo: “Boa noite, galera!”
Intervalos [5, 10[ = {5, 6, 7, 8, 9}
Não entendeu? Vamos para mais uma explicação como outro exemplo.
<Script>
var frase = “Alface é bom para saúde”;
var parte = frase.substring(1,2);
document.write(parte); //retornará L
</Script>
Agora, depois de testarmos este Script, vimos que foi retornado apenas o caracter “l”(L) , pois
agora mandamos o Script começar a contar depois que ele visse o primeiro caracter (da esquerda para
a direita), e terminar sua contagem, assim que visse o segundo caracter. Acho que agora deu para
entender e ter uma noção básica desta função.
length (método)
Função: Retorna o número de caracteres que um string têm.
Sintaxe: string.length;
Exemplo:
<script Language=”JavaScript” Type=”text/javaScript”>
aString = “Izaias”;
document.write (aString.length); //exibe 6, pois o nome contém 6 caracteres
</script>
Exemplo: Associando Eventos (rotinas) a Botões de Formulário
No primeiro passo, vamos criar um formulário com apenas um botão
<HTML>
<HEAD>
<TITLE> Botão de teste </TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" name="botao" value="teste">
</FORM>
</BODY>
</HTML>
Associe um evento ao formulário. O evento onclick é associado à função. Dê um nome ao
formulário "meuform".
<FORM name="meuform">
<INPUT type="button" name="botao" value="teste" onclick="iteste()">
Insira a função no cabeçalho do documento. Esta função irá reescrever o código HTML do
documento utilizando o método write().
<SCRIPT type="text/javascript">
function iteste() {
document.write("<h1>Oi<h1><p>Após o <i>clique</i>, o documento
foi reescrito.<br> O título também!")
document.title="Novo teste"
}
</SCRIPT>
charAt
Função: Retorna o caracter da posição especificada.
Sintaxe: string.charAt(numero_da_posicao);
Exemplo:
<script Language="JavaScript" Type="text/javaScript">
aString = "Lisboa";
document.write ( aString.charAt(4) ); //retornará 'o'
</script>
indexOf
Função: Retorna a posição do primeiro caracter encontrado em uma string. -1 se não encontrar.
Sintaxe: string.indexOf(“parte_da_string”);
Exemplo:
<script Language=”JavaScript” Type=”text/javaScript”>
document.write (aString.indexOf(“z”));
//retornará 1, pois I = 0 e z = 1, ou seja, começa do zero
</script>
Exemplo 2:
<script Language=”JavaScript” Type=”text/JavaScript”>
document.write (aString.indexOf(“x”));
//retornará -1 pois x não existe no nome Izaias
</script>
Exemplo 3:
<script Language=”JavaScript” Type=”text/JavaScript”>
document.write (aString.indexOf(“a”)); //retornará 2, pois I=0, z=1, e a=2,
//e o primeiro ‘a’ encontrado será o 2º caracter
//encontrado iniciando pelo zero...
</script>
lastIndexOf
Função: Quase igual ao indexOf, porém com o objetivo de trazer a posição do último caracter
encontrado,
e não do primeiro assim como no indexOf.
Sintaxe: string.lastIndexOf(“parte_da_string”);
toUpperCase
Função: Retorna a string convertida em maiúsculas.
Sintaxe: string.toUpperCase();
Exemplo:
<script language=”JavaScript” Type=”Text/JavaScript”>
minhaString= “Izaias”;
document.write ( minhaString.toUpperCase());
</script>
toLowerCase
Função: Retorna a string convertida em minúsculas.
Sintaxe: string.toLoewrCase();
Exemplo:
<script language=”JavaScript” Type=”Text/JavaScript”>
minhaString= “Izaias”;
document.write ( minhaString.toLowerCase());
</script>
Exercício 1
<html>

<head>
<script language=”JavaScript” type=”text/javascript”>
function mostrar() {
status = tx;
tx1 = tx.charAt(0);
tx2 = tx.substring(1, tx.length);
tx = tx2 + tx1;
setTimeout (“mostrar()”, 100);
}
</script>
</head>
<body>
<script language=”JavaScript” type=”text/javascript”>
tx = “mensagem na barra de status”;
mostrar();
</script>
</body>
</html>
Exercício 2
Faça um script para ler 3 notas (função Prompt) e passar como parâmetros para uma função
calcular a média. A média é devolvida para ser exibida fora da função.
Observação:
O método prompt()
No mesmo estilo do que o método alert(), Javascript dispõe de uma outra caixa de diálogo, no
caso presente é chamada caixa de convite, que é composto por um campo que contém uma entrada a
completar pelo utilizador. Esta entrada contém um valor por defeito.
A sintaxe é: prompt("texto da caixa de convite","valor por defeito");
Ao clicar no OK, o método reenvia o valor escrito pelo utilizador ou a resposta proposta por
defeito.
Se
utilizador
clica
em
Cancel,
o
valor
nulo
é
então
reenviado.
Prompt() é porvez utilizado para incrementar dados fornecidos pelo utilizador.
Exercício 3
<script language="JavaScript">
exemplo = "JavaScript"
document.write("Texto escrito com o método big -> "+ exemplo.big() +"<br>")
document.write("Texto escrito com o método bold -> "+ exemplo.bold() +"<br>")
document.write("Texto escrito com o método blink -> "+ exemplo.blink() +"<br>")
document.write("Texto escrito com o método italics -> "+ exemplo.italics()
+"<br>")
document.write("Texto escrito com o método small -> "+ exemplo.small() +"<br>")
document.write("Texto
+"<br>")
escrito
com
o
método
strike
->
"+
exemplo.strike()
document.write("Texto escrito com o método sup -> "+ exemplo.sup() +"<br>")
document.write("Texto escrito com o método sub -> "+ exemplo.sub() +"<br>")
escrito
exemplo.toLowerCase() +"<br>")
com
o
método
toLowerCase
->
"+
escrito
exemplo.toUpperCase() +"<br>")
com
o
método
toUpperCase
->
"+
document.write("<br> Conteúdo da variável exemplo: "+ exemplo)
document.write("<br>Conteúdo
exemplo.substring(0,4))
de
exemplo.substring(0,4):
"+
document.write("<br> Conteúdo de exemplo.substring(4): "+ exemplo.substring(4))
document.write("<br>
Conteúdo
de
exemplo.substring(4,2)
:
"+
document.write("<br>
Conteúdo
de
exemplo.substring(4,6)
:
"+
</script>
Resumo: JavaScript String Object
The String object is used to manipulate a stored piece of text.
String objects are created with new String().
Syntax
var txt = new String("string");
or more simply:
var txt = "string";
String Object Properties
Property
constructor
length
prototype
Description
Returns the function that created the String object's prototype
Returns the length of a string *(NO JAVA É MÉTODO)
Allows you to add properties and methods to an object
String Object Methods
Method
charAt()
charCodeAt()
concat()
fromCharCode()
indexOf()
lastIndexOf()
match()
Description
Returns the character at the specified index
Returns the Unicode of the character at the specified index
Joins two or more strings, and returns a copy of the joined strings
Converts Unicode values to characters
Returns the position of the first found occurrence of a specified value in a string
Returns the position of the last found occurrence of a specified value in a string
Searches for a match between a regular expression and a string, and returns the matches
Searches for a match between a substring (or regular expression) and a string, and replaces the
replace()
matched substring with a new substring *(NO JAVA, SUBSTITUI TODAS AS OCORRÊNCIAS)
Searches for a match between a regular expression and a string, and returns the position of the
search()
match
slice()
Extracts a part of a string and returns a new string
Splits a string into an array of substrings
split()
Extracts the characters from a string, beginning at a specified start position, and through the
substr()
specified number of character
Extracts the characters from a string, between two specified indices
substring()
Converts a string to lowercase letters
toLowerCase()
Converts a string to uppercase letters
toUpperCase()
valueOf()
Returns the primitive value of a String object
String HTML Wrapper Methods
The HTML wrapper methods return the string wrapped inside the appropriate HTML tag.
Method
anchor()
big()
blink()
bold()
fixed()
fontcolor()
fontsize()
italics()
link()
small()
strike()
sub()
sup()
Description
Creates an anchor
Displays a string using a big font
Displays a blinking string
Displays a string in bold
Displays a string using a fixed-pitch font
Displays a string using a specified color
Displays a string using a specified size
Displays a string in italic
Displays a string as a hyperlink
Displays a string using a small font
Displays a string with a strikethrough
Displays a string as subscript text
Displays a string as superscript text
Desafio: Construir uma rotina (função) que receba 2 strings e performe um
“ReplaceAll”.
Observação: “maçã,pera,caju”.split(“,”)[1]
Exercício (quadro):
<script type=”text/javascript”>
var nome=“França”;
document.write(nome.length); ______
document.write(nome.substring(0,3)); ______
document.write(nome.charAt(1)); ______
document.write(nome.indexOf(“a”)); ______
document.write(nome.lastIndexOf(“a”)); ______
document.write(nome.toLowerCase());______
document.write(nome.toUpperCase());______
document.write(nome.concat(“Prof.”)); ______
document.write(nome); ______
document.write(nome.replace(“a”, “o”)); ______
var vetor=”maça,pera,caju”;
vetor=vetor.split(“,”);
document.write(vetor[1]); ______
</script>
Matrizes
Introdução
The Array object is used to store multiple values in a single variable.
Matrizes (ou arrays) são variáveis que contêm vários elementos em seu interior. A declaração
de uma matriz é feita utilizando ou elementos delimitados por colchetes “[]” ou pelo objeto Array().
Exemplo:
var frutas = ["laranja", "banana", "pera"];
var nomes = new Array("Sérgio", "Eduardo", "Rodrigues");
var nomes = new Array(10);
var valores = [1.34, 10, 50, 13e2];
Os elementos individuais são acessados colocando-se a posição do elemento entre colchetes
após o nome da matriz. Lembre sempre que as matrizes iniciam pelo elemento zero (0). Por exemplo,
para acessar o primeiro elemento da matriz valores, escreveríamos valores[0]. Podemos tanto ler
quanto alterar elementos da matriz.
Podem-se utilizar elementos vazios na declaração de uma matriz, por exemplo:
var frutas = ["laranja","banana",,"pera",,,"abacaxi"];
O resultado seria:
* frutas[0] = "laranja"
* frutas[1] = "banana"
* frutas[2] = undefined
* frutas[3] = "pera"
* frutas[6] = "abacaxi"
You don’t need to tell Javascript how many items to size the Array for. Javascript will
automatically increase the size of the Array as needed, as you add items into the Array.
var meuArray = [];
length é um atributo especial (is NOT read-only) que possui a quantidade de elementos da
matriz. Não é uma função; ou seja, tentar utilizar frutas.length() causará um erro. A maneira correta
de usar o atributo é frutas.length, sem os parênteses.
* Multi-Dimensional Arrays
* Arrays are passed by Reference
* Arrays are assigned by reference
var newArray = myArray[]
newArray[1] = ‘changed’;
Funções de Conversão
Introdução
Diferente da maioria das linguagens o Javascript define as variáveis dinamicamente, portanto ao
atribuir uma variável ele escolhe o tipo conforme o valor passado para a variável, não sendo necessário
especificar o mesmo.
var numero = 1;
var texto = "M. França";
var valor = 123.45;
var ativo= true;
var nascimento = new Date(1969,1,4)
Nome
Tipo
numero
numérica inteira
texto
string
valor
numérica com ponto flutuante
ativo
booleana
nascimento
objeto date
1
Esta forma de tratar variáveis tem o curioso nome, em inglês, de "duck typing" .
Convertendo
Uma variável pode ser atribuída para outro tipo, ou utilizando uma função de conversão ou
então fazendo operações aritméticas.
Como por exemplo, quando atribuímos ao numero o valor 1, ele se encontra no tipo numérico
inteiro, se o dividirmos por 2 ele irá para o tipo numérico ponto flutuante:
numero = 1; // inteiro 1
numero = numero / 2; // Vai para flutuante 0.5
numero = " " + numero; // ele é convertido para string (somado à outra string)
numero = parseFloat(numero); // Ele irá resultar no número 0.5
numero = parseInt(numero); // Vai para o inteiro 0
1
In computer programming with object-oriented programming languages, duck typing is a
style of dynamic typing in which an object's current set of methods and properties determines the valid
semantics, rather than its inheritance from a particular class or implementation of a specific interface.
Operadores
Aritiméticos
+, -, *, /, %(módulo), ++, -Exemplo:
x=5;
y=x++;
z=++y;
? x, y, z
? -5%-2
Lógicos
!, &&, ||
Relacionais
!=, ==, >, <, >=, <=
Funções
isNaN(valor)
Identifica se o valor não é um numero
eval()
Converte uma string para um valor inteiro ou ponto flutuante. Esta função, avalia o valor de
uma expressão, por exemplo:
val = eval("1+2*3-4/2"); //atribui a variável o valor 5
eval(“2+2+2a+22”);
parseInt()
Converte uma string para um inteiro, retornando o primeiro inteiro encontrado na string da
esquerda para a direita.
val = parseInt("12b13"); // variável recebe 12
parseFloat()
Semelhante à função parseInt(), porém esta busca por uma string com um ponto flutuante.
toString()
Converte o objeto para sua representação em uma string.
typeof
Esta função, que pode ser considerada um operador, retorna o tipo do objeto que opera. Os
valores retornados são strings que podem ser: "undefined", "object", "function", "number", "Boolean",
ou "string". O exemplo:
typeof 10 // retorna a string "number".
Exercício
<script language=“javascript” type=“text/javascript”>
var notas=[5, 6, 7, 8, 5];
for (i=0; i<notas.length; i++){
document.write(“nota: ”);
document.write(notas[i]);
document.write(“<br />”);
}
for (i in notas){
document.write(“e ” + i + “<hr />”;
document.write(“e ” + notas[i] + “<hr />”;
}
</script>
Estruturas de Controle e Laços
If
if(valor==3){
document.write("Valor é três!");
} else {
document.write(Valor não é três!);
}
Switch
switch(dia){
case 1:
document.write("Domingo<br>");
break;
case 2:
document.write("Segunda<br>");
break;
default:
document.write("Nao estÃ¡ entre os dois primeiros da semana!<br>");
}
While
var i=0;
while(i<3){
document.write("Esta é a "+i+"<sup>a</sup>iteração.<br />");
i++;
}
Do - While
Este exemplo mostra os dias da semana! ;)
dias
=
new
Array("Domingo",
"Segunda",
"Terça",
"Quarta",
"Quinta",
"Sexta",
"Quinta",
"Sexta",
"Sábado");
var dia = 0;
do {
document.write(days[dias[dia] + "é o " + eval(dia+1)
+ "<sup>o</sup> da semana.<br>");
} while(dia < 7);
Exercício
var x = 0;
var y = 10;
do {
y--;
++x;
} while (x<5);
document.write(x);
document.write(y);
For
O exemplo seguinte determina a posição do dia na semana.
dias =
"Sábado");
new
Array("Domingo",
"Segunda",
"Terça",
"Quarta",
var dia="Quarta";
var posicao;
for(i=0;i<dias.length;i++){
if(dia == dias[i]){
posicao = i+1;
}
}
document.write(dia+" é o dia "+posicao+" na semana<br />");
Exercício
for (i=0; i<10; i++){
if(i==1)
continue;
if(i==3)
break;
document.write(i);
} // continue
Break
Salta fora de um If, Do-While, For, ou de um Switch.
Continue
"Pula" os comandos que estão abaixo de si nas mesmas estruturas que o break.
Exercício Javascript 1
Quais os valores finais das variáveis “x”, “y” e “z” no código abaixo:
x = 5;
y = x++;
z = ++y;
Exercício Javascript 2
[Marinha - Técnico em PD - 2005]
Observe a rotina abaixo:
<script type="text/javascript">
i = 0
t = 0
do {
i++
t=t+i+i
}
while (i <= 5)
i = 0
while (i <= 5)
{
i++
t=t+i+i
}
document.write(t)
</script>
Que valor será apresentado no BROWSER, após a execução da rotina listada acima?
a) 80
b) 81
c) 82
d) 83
e) 84
Caixas de Diálogo (Alert, Prompt e Confirm)
alert(mensagem)
Mostra uma caixa de alerta ( Janelinha com o botão OK ) com a string "mensagem". Útil para
depurar o script. Exemplo:
alert("Vai catar coquinho!!!");
alert("A variável tosca está¡ com o valor"+tosca+"<br />");
confirm(mensagem)
Mostra uma caixa de diálogo com os botões "OK" e "Cancelar" e com a string "mensagem".
Retorna true se clicado em "OK" ou false se em "Cancelar".
Exemplo:
if(confirm("Posso apagar todos os seus dados?")){
document.write("Deletando...");
} else {
document.write("Cancelado!");
}
prompt(mensagem, respostapadrao)
Mostra uma caixa de diálogo, um campo de texto, e os botões "OK" e "Cancelar". Retorna a
string digitada no campo de texto ou NULL se cancelado. Exemplo:
nome=prompt("Digite seu nome, por favor:","Fulano");
if(!nome){
alert("Bem-vindo, anônimo!");
} else {
alert("Bem-vindo, caro "+nome);
}
Exercício
<script language="Javascript">
for( i = 2004; i >= 1977; i-- )
document.write( i, '<br>' );
alert(i);
</script>
var squares = 81;
//no head
incr(++squares);
function incr(squares){
document.write(squares);
squares += 10; // = squares + 10
}
Objetos Browser (DOM)
Introdução
Retirado de: http://www.juliobattisti.com.br/tutoriais/keniareis/jsbasico011.asp
DOM
=
Document
Object
Model.
Modelo
de
objetos
do
browser,
que
pode
ser
utilizado/manipulado por uma linguagem script como o Javascript.
Trabalhando com Objetos Browser
Uma vantagem que o JavaScript tem até mesmo em relção a linguagens mais sofisticadas
como Java é que os scripts podem manipular o navegador da web. Seu script pode carregar uma nova
página no navegador, trabalhar com partes da janela e do documento do navegador e até abrir novas
janelas.
A fim de trabalhar com o navegador e os documentos, o JavaScript utiliza uma variedade de
objetos browser. Cada Objeto browser representa parte de uma pagina web. Por exemplo , uma janela
, um documento ou uma imagem. Os objetos browser, que permitem trabalhar com partes da página
da Web.
Os objetos browser estão organizados em uma hieraquia de objetos pai e filho. Quando
referencia um objeto, você utiliza o nome do objeto pai seguido pelo nome ou nomes do objeto filho,
separados por pontos. Por exemplo, O JavaScript armazena objetos para representar imagens em
documento como filhos do objeto document. Como no exemplo abaixo:
Exemplo: window.document.imagem01
O exemplo acima se refere ao objeto imagem01, um filho do objeto document, que é filho do
objeto window.
Window
Introdução
O objeto window está na parte superior da hierarquia de objeto browser. O diagrama abaixo
mostra a hierarquia do objeto e uma variável de seus objetos.
Esse diagrama inclui somente os objetos básicos de um navegador que serão abordados a
seguir. Uma variedade de outros objetos também entra na hierarquia e será discutidos ao longo dos
tutoriais.
Utilizando objetos window.
Na parte superior da hierarquia de objeto browser está o objeto window, que representa uma
janela de navegador. Você já utilizou alguns métodos e propriedades do objeto window, como por
exemplo:
Você utilizou a propriedade window.status para alterar o conteúdo da linha de status do
navegador. Observação: Window é opcional, e depende do browser.
Você utilizou os métodos window.alert, window.confirm e window.prompt para exibirem caixa de
diálogos de mensagem para o usuário.
Pode haver vários objetos window por vez, cada um representando uma janela de navegador
aberta. Os frames são também representados por objetos window.
Janelas – Métodos
Vamos ver agora os distintos métodos que tem o objeto window. Muitos destes métodos terão
que ser vistos separadamente porque são muito úteis e ainda não o utilizamos, agora vamos lista-los e
já veremos alguns exemplos.
alert(texto)
Apresenta uma janela de alerta onde se pode ler o texto que recebe por parâmetro.
back()
Ir uma página atrás no histórico de páginas visitadas. Funciona como o botão de voltar da barra
de ferramentas. (Javascript 1.2)
blur()
Tirar o foco da janela atual. (Javascript 1.1)
close()
Fecha a janela. (Javascript 1.1)
confirm(texto)
Mostra uma janela de confirmação e permite aceitar ou rejeitar.
find()
Mostra uma janelinha de busca. (Javascript 1.2 para Netscape)
focus()
Coloca o foco da aplicação na janela. (Javascript 1.1)
forward()
Ir uma página adiante no histórico de páginas visitadas. Como se clicássemos o botão de
adiante do navegador. (Javascript 1.2)
home()
Ir à página de início o explorador que tenha configurado. (Javascript 1.2)
open()
Abre uma janela secundária do navegador.
print()
Como se clicássemos o botão de imprimir do navegador. (Javascript 1.2)
prompt(pergunta,inicio_da_resposta)
Mostra uma caixa de diálogo para pedir um dado. Devolve o dado que se escreveu.
setInterval()
Define um script para que seja executado indefinidamente em cada intervalo de tempo.
(Javascript 1.2)
setTimeout(sentença,segundos)
Define um script para que seja executado uma vez depois de um tempo de espera determinado.
stop()
Como clicar o botão de stop da janela do navegador. (Javascript 1.2)
Para ilustrar um pouco melhor o funcionamento de algum destes métodos, criamos uma página
web que os utiliza. O código da página mostra-se a seguir e também podemos ver a página em
funcionamento.
Exercício
Código HTML
<form>
<input
type="button"
value="Janela
de
busca
(Somente
Netscape)"
onClick="window.find()">
<br> <br>
<input type="button" value="Mover a janela 10 direita,10 abaixo" onClick="moveBy(10,
10)">
<br> <br>
<input
type="button"
value="Mover
a
janela
ao
ponto
(100,10)"
onClick="moveTo(100,
10)">
<br> <br>
<input type="button" value="Imprimir esta página" onClick="print()">
<br> <br>
<input
type="button"
value="Aumentar
a
janela
10
largura,10
comprimento"
onClick="resizeBy(10, 10)">
<br> <br>
<input
type="button"
value="Fixar
o
tamanho
da
janela
em
400
onClick="resizeTo(400, 200)">
<br> <br>
<input type="button" value="Scroll acima de tudo" onClick="scroll(0,0)">
<br> <br>
<input type="button" value="Scroll acima 10 pixels" onClick="scrollBy(0,-10)">
</form>
x
200"
Document
Trabalhando com documentos da Web
O objeto document representa um documento ou página da Web. Os documentos da web são
exibidos dentro das janelas do navegador, então não deve supreende-lo aprender que o objeto
document é filho do objeto window.
Como o objeto window sempre representa a janela atual ou seja aquela que contém o script,
você pode utilizar a window.document para referenciar o documento atual. Lembre-se que você já
utilizou o método document.write para exibir texto dentro de um documento na Web.Os exemplos nos
tutoriais anteriores utilizaram somente uma única janela e documento. Se múltiplas janelas ou frames
estiverem em utilização, talvez haja vários objetos window, cada um com seu próprio objeto document.
Para utilizar um desses objetos document, você utiliza o nome da janela e o nome do documento.
Exemplo:
var d = window.document;
d.write(“<h1>” + d.title + “</h1>”);
Obtendo informações sobre o documento
Várias propriedades do objeto document incluem informações sobre o documento atual em
geral. Por exemplo:
A propriedade URL especifica o URL do documento. Esse é um campo de texto simples. Você
não pode alterar essa propriedade. Por isso se você precisar enviar o usuário para uma localização
diferente, o ideal é utiliza o objeto window.location, que vai ser especificado mais adiante.
A propriedade title lista o titulo da página atual, definido pela tag HTML<TITLE>.
A propriedade referrer é o URL da página que o usuario esta visualizando antes da pagina atual,
normalmente, a página com um link para a página atual.
A propriedade lastModified é a ultima data em que o documento foi modificado. Essa data é
enviada ao servidor junto com a página. O exemplo abaixo mostra um script de um document de
HTML que exibe a data da sua última modificação.
Exercício
<HTML>
<HEAD> <TITLE>Teste do Document</TITLE></HEAD>
<BODY>
Esta pagina foi modificada em:
<SCRIPT>
document.write(document. lastModified);
</SCRIPT>
<BR></body>
</HTML>
Isso pode dizer ao usuario quando a página foi alterada pela ultima vez. Se utilizar JavaScript,
você não tem de se lembrar de atualizar a data toda vez que modificar a página.
Nota: Você talvez ache que a propriedade document.lasModified não funciona em suas páginas
da Web. A data é recebida do servidor da Web e alguns servidores não mantêm data de modificações
corretamente.
Escrevendo Texto em um Documento
Os métodos do objeto document mais simples são também aqueles que você utilizará mais
freqüentemente. De fato, você já os utilizou. Os métodos document.write imprime texto como parte da
página de HTML em uma janela de documento. Essa instrução é utilizada sempre que você precisar
incluir saída em uma página da Web.
Uma instrução alternativa, document.writeln, também imprime texto, mas também inclui um
caracter de nova linha (/n) no final. Isso é útil quando você quer que seu texto seja a utima coisa da
linha.
Nota: Lembre-se de que o caractere de nova linha é ignorado pelo HTML, exceto dentro do
contêiner <PRE>. Você precisará utilizar a tag<BR> se quiser uma quebra de linha real.
Você pode utilizar esses métodos somente dentro do corpo da página da Web, de modo que eles
serão executados quando a página carregar. O método document.write pode ser utilizado somente
dentro de uma tag <SCRIPT> no corpo de um documento HTML. Você também pode utiliza-lo em uma
função, contanto que você inclua uma chamada para a função dentro do corpo do documento.
Utilizando links e âncoras
Outro filho do objeto document é o objeto link. Podem haver múltiplos objetos link em um
documento, mas cada um inclui informações diferentes sobre um link para outra localização ou âncora.
Nota: As âncoras são lugares identificados em um documento de HTML para quais se podem
pular diretamente. Você as define com uma tag como esta : < A NAME=”index1”>. Você então se
vincular a eles: < A HREF=”#index1”>.
Pode-se acessar objeto link como o array links. Cada membro do array é um dos objetos link na
pagina atual. Uma propriedade do array, document.links.length, indica o numero de links na página.
Cada objeto link tem uma lista de propriedades que define o URL. Você pode referi-se a uma
propriedade indicando o numero do link e o nome da propriedade. Por exemplo, a seguinte instrução
atribui o URL inteiro do primeiro link à variável link1:
link1=document.links[0].href;
Os objetos anchor são também filhos do objeto document. Cada objeto anchor representa uma
âncora no documento atual, uma localização particular para a qual se pode pular diretamente.
Como nos links,você pode acessar âncoras com um array: ânchors. Cada elemento desse array
é um objeto anchor. A propriedade document.anchors.length fornece o numero de elementos no array
anchors.
Exercício:
Listar todos os links de uma página ao clicar em um botão.
History
Acessando o histórico da Janela
O objeto history é outra propriedade do objeto window. Esse objeto armazena as informações
sobre os URLs que foram visitados antes e depôs do atual e inclui métodos para ir para as localizações
anteriores ou próximas.
O objeto history tem algumas propriedades:
history.length: monitora o comprimento da lista de histórico em outras palavras, o numero de
localizações diferentes que o usuário visitou.
history.next: é o valor da próxima entrada na lista de histórico, o URL ao qual o usuário será
enviado se ele pressionar o botão Forward do navegador. Como o botão Forward somente funciona
quando você já utilizou o botão Back, nem sempre pode haver um valor para a propriedade
history.next.
history.previous: é a entrada anterior do histórico, o URL ao qual o usuários será enviado se ele
utilizar o navegador de botão Back.
Você também pode tratar o objeto history como array. Cada entrada contém um dos URLs na
lista de histórico, com history[0] sendo a entrada atual. Por ultimo, mas não menos importantes, o
objeto history tem três métodos:
history.go: abre um URL da lista de histórico. Para utilizar esse método, especifique um numero
positivo ou negativo entre parênteses. Por exemplo , history.go(-2) é equivalente a pressionar o botão
Back duas vezes.
history.back:carrega o URL anterior a lista de histórico, o equivalente a pressionar o bota Back.
history.forward: carrega o próximo URL na lista de histórico, se disponível. Isso é equivalente a
pressionar o botão Forward.
Nota: Os métodos history.back e history. Forward não funcionam corretamente em algumas
versões do Netscape Navigotor.
Por essa razão, é melhor utilizar history.go(-1) e history.go(1).
Location
Trabalhando com objeto location
Este objeto armazena as informações sobre o URL atual armazenado na janela.
Por exemplo, a seguinte instrução carrega um URL na janela atual:
window.location.href=“http://www.franca.pro.br”;
A propriedade href utilizada nessa instrução contém o URL inteiro da localização atual da janela.
Você também pode acessar partes do URL com varias propriedades do objeto location por exemplo :
location.protocol é a parte de protocolo do URL.
O objeto location tem dois métodos:
location.reload: Recarrega o documento atual [F5].
location.replace: Substitui a localização atual por uma nova.
Criando os botões Back e Forward
Exercício:
Uma utilização comum para os métodos back e forward do objeto history é adicionar seus
próprios botões Back e Forward a um documento na Web. Isso aprimora a interface com o usuário de
suas paginas.
Como um exemplo do uso do objeto history, você agora criara um script que exibe os botões
Back e Forward e utiliza esses métodos para o navegador.
Você utilizará imagens gráficas para os botões Back e Forward. Abaixo esta a parte do script
que tratará o botão Back:
<A HREF=”javascript:history.go(-1);”>
<IMG BORDER=0 SRC= “left.gif”>
</A>
Isso utiliza um URL javascript: para executar um commando quando o usuario dá cliques em um
link. Nesse caso, o link é a imagem da seta esquerda. O script para o botão Forward é quase idêntico:
<A HREF=”javascript:history.go(1);”>
<IMG BORDER=0 SRC= “right.gif”>
</A>
Com os scripts dos botões em mãos, agora precisamos contruir o restante de um documento
HTML. O exemplo abaixo mostra o documento completo de HTML e a Figura 1.0 mostra como o
Internet Explorer exibe seu documento. Depois de você carregar esse documento em um navegador,
visite outras URL e certifique se os botões estão funcionando.
<html>
<head><title> Testando os botões</title></head>
<body>
<h1> Botões Back e Forward</h1>
<h1> Esta página é um teste para os botões Back e Forward. Depois carregar esse
documento , visite outras URL e certifique se os botões estão funcionando. </h1>
<HR>
<A HREF=”javascript:history.go(-1);”>
<IMG BORDER=0 SRC= left.jpg>
</A>
<A HREF=”javascript:history.go(1);”>
<IMG BORDER=0 SRC= right.jpg>
</A>
<HR>
</BODY>
<HTML>
Depois de carregada, seu exemplo deve ficar parecido com a figura abaixo.
Nota: Esse script é uma exemplo de quanto o JavaScript pode fazer com muito pouco. Note que
não foram utilizadas as tags< Script>, mas apenas dois comando do JavaScript.
Exercício:
<html>
<head> <title>Conteúdo da Caixa</title>
<script language=“Javascript” type=“text/javascript”>
function exibeConteudo(){
window.alert(window.document.form1.txtNome.value);
}
</script></head>
<body>
<h1>Testando DOM</h1>
<h2>Através do Javascript</h2>
<form name=“form1”>
Nome: <input type=“text” name=“txtNome” />
<input type=“button” value=“Exibir” onClick=“exibeConteudo();” />
</form>
<p>By Testando…</p>
</body>
</html>
Diferença entre “name” e “id”
Introdução
The definitive "guide" (the W3C HTML 4.01 spec) is here: <URL:http://www.w3.org/TR/html4/>
You may want to also look at xhtml, but for now HTML 4.01 is it.
To speed your resolution of name/id, the full list of attributes and the elements they apply to is
here:
<URL:http://www.w3.org/TR/html4/index/attributes.html>
Now my understanding is that:
When Netscape created JavaScript, they used "name" to identify elements. MS built IE to copy
Netscape, so also supported "name".
However, the HTML spec decided to use id to identify elements but keep name for backwards
compatibility. Name still applies to form elements and lots of others (e.g. name is mandatory on
PARAM elements). MS seem to hate ever removing functionality, so they continue to support name as
if it was ID.
Now you're really confused, right?
Many programmers put the same name and ID on form elements. This isn't required, but may
be helpful if you intend to reference the element using both the forms.elements collection and
getElementById.
e.g. <form name="aForm" ... >
<input name="aa" id="aa" ... >
Can be referenced using the name as:
document.forms['aForm'].elements['aa']
or the id as:
document.getElementById('aa')
You can put the same name on a number of form elements to create a collection - e.g. radio
buttons - but use with care.
The only reason to give any element an id is if you intend to reference if in some way, otherwise
it is unnecessary. The name of form elements is included in the data sent when the form is submitted,
the id isn't.
If you use document.getElementById('blah') in IE, it will match <... name="blah"> as well as
<... id="blah">. Other browsers will only match id.
So the bottom line is:
Form elements must have a name if you want them to be submitted (put a name on all of them
unless you are certain you want to do otherwise - e.g. buttons)
Some element *must* have a name.
Use id only if you need to refer to an element (usually using getElementById).
If an element needs both an ID and a name, it's probably convenient to make them the same.
Keep names and ids of different elements unique (mandatory for IDs).
In addidion to that, ID's are used by CSS when containing a style declared with an id selector
(#):
The id selector is different from the class selector(.). While a class selector may apply to
SEVERAL elements on a page, an id selector always applies to only ONE element. An ID attribute must
be unique within the document. The style rule below will match a p element that has the id value
"para1":
p#para1
{
text-align: center;
color: red
}
The XHTML spec says:
"Note that in XHTML 1.0, the name attribute of these elements is formally deprecated, and will
be removed in a subsequent version of XHTML." <http://www.w3.org/TR/xhtml1/#h-4.10>
Use 'id'.
Date
Introdução
Sobre este objeto recai todo o trabalho com datas em Javascript, como obter uma data, o dia, a
hora e outras coisas. Para trabalhar com datas necessitamos instanciar um objeto da classe Date e
com ele já podemos realizar as operações que necessitamos.
Um objeto da classe Date pode ser criado de duas maneiras distintas. Por um lado podemos
criar o objeto com o dia e hora atuais e por outro podemos cria-lo com um dia e hora distintos aos
atuais. Isto depende dos parâmetros que passemos ao construir os objetos.
Para criar um objeto fecha com o dia e hora atuais, colocamos os parênteses vazios ao chamar
ao construtor da classe Date.
minhaDataAtual = new Date()
Para criar um objeto data com um dia e hora diferentes dos atuais temos que indicar entre
parênteses o momento para iniciar o objeto. Existem várias maneiras de expressar um dia e hora
válida, por isso podemos construir uma data nos guiando por vários esquemas. Estes são dois deles,
suficientes para criar todo tipo de datas e horas.
minhaData = new Date(ano,mês,dia,hora,minutos,segundos)
minhaData = new Date(ano,mês,dia)
Os valores que deve receber o construtor são sempre numéricos. Um detalhe, o mês começa
por 0, ou seja, janeiro é o mês 0. Se não indicamos a hora, o objeto data se cria com hora 00:00:00.
Métodos
Os objetos da classe Date não têm propriedades, mas possuem diversos métodos.
getDate() *
Devolve o dia do mês.
getDay()
Devolve o dia da semana.
getHours()
Retorna a hora.
getMinutes()
Devolve os minutos.
getMonth() *
Devolve o mês (atenção ao mês que começa por 0).
getSeconds()
Devolve os segundos.
getTime()
Devolve os segundos transcorridos entre o dia 1 de janeiro de 1970 e a data correspondente ao
objeto ao que se passa a mensagem.
getYear()
Retorna o ano, ao que se restou 1900. Por exemplo, para o 1995 retorna 95, para o 2005
retorna 105. Este método está obsoleto em Netscape a partir da versão 1.3 de Javascript e agora se
utiliza getFullYear().
getFullYear() *
Retorna o ano com todos os dígitos. Usar este método para estar certos de que funcionará todo
bem em datas posteriores ao ano 2000.
setDate() *
Atualiza o dia do mês.
setHours()
Atualiza a hora.
setMinutes()
Muda os minutos.
setMonth() *
Muda o mês (atenção ao mês que começa por 0).
setSeconds()
Muda os segundos.
setTime()
Atualiza a data completa. Recebe um número de segundos desde 1 de janeiro de 1970.
setYear()
Muda o ano recebe um número, ao que lhe soma 1900 antes de coloca-lo como ano da data. Por
exemplo, se recebe 95 colocará o ano 1995. Este método está obsoleto a partir de Javascript 1.3 em
Netscape. Agora se utiliza setFullYear(), indicando o ano com todos os dígitos.
setFullYear() *
Muda o ano da data ao número que recebe por parâmetro. O número se indica completo ex:
2005 ou 1995. Utilizar este método para estar certo de que tudo funciona para datas posteriores a
2000.
Como foi possível apreciar, há algum método obsoleto por questões relativas ao ano 2000:
setYear() e getYear(). Estes métodos se comportam bem na Internet Explorer e não nos dará nenhum
problema utiliza-los. Entretanto, não funcionarão corretamente em Netscape, portanto é interessante
utilizarmos em seu lugar os métodos getFullYear() e setFullYear(), que funcionam bem em Netscape e
Internet Explorer.
Neste exemplo vamos criar duas datas, uma com o instante atual e outra com data do passado.
Em seguida, imprimiremos as duas e extrairemos seu ano para imprimi-lo também. Logo,
atualizaremos o ano de uma das datas e voltaremos a escrevê-la com um formato mais legível.
Exercício
<html><head><title>Exercício de Data</title></head><body>
<script type=“text/javascript”>
//nestas linhas criamos as datas
minhaDataAtual = new Date();
minhaDataPassada = new Date(1998,4,23);
//nestas linhas imprimimos as datas.
document.write (minhaDataAtual);
document.write ("<br />");
document.write (minhaDataPassada);
//extraímos o ano das duas datas
anoAtual = minhaDataAtual.getFullYear()
anoPassado = minhaDataPassada.getFullYear()
//Escrevemos em ano na página
document.write("<br>O ano atual é: " + anoAtual)
document.write("<br>O ano passado é: " + anoPassado)
//mudamos o ano na data atual
minhaDataAtual.setFullYear(2005)
//extraímos o dia, mês e ano
dia = minhaDataAtual.getDate()
mes = parseInt(minhaDataAtual.getMonth()) + 1
ano = minhaDataAtual.getFullYear()
//escrevemos a data em um formato legível
document.write ("<br>")
document.write (dia + "/" + mes + "/" + ano)
</script></body></html>
Há que destacar um detalhe antes de terminar, é que o número do mês pode começar desde 0.
Pelo menos no Netscape com o qual realizamos as provas começava o mês em 0. Por esta razão
somamos um ao mês que devolve o método getMonth.
Existem mais detalhes para destacar, pois é que no Netscape o método getFullYear() devolve os
anos transcorridos desde 1900, com o qual ao obter o ano de uma data de, por exemplo, 2005, indica
que é o ano 105. Para obter o ano completo temos a nossa disposição o método getFullYear() que
devolveria 2005 da mesma forma que em Netscape e Internet Explorer.
Muita atenção no trabalho com datas em distintas plataformas, visto que poderia ser
problemático o fato de oferecerem distintas saídas aos métodos de manejo de datas, dependendo
sempre da marca e versão de nosso navegador.
Desafio
Como criar uma função que calcule a diferença entre duas datas?
Como criar uma função que receba uma data de nascimento e retorne true caso a pessoa seja
maior de idade.
Eventos
Introdução
Os eventos são a maneira que temos em Javascript de controlar as ações dos visitantes e definir
um comportamento da página quando se produzam. Quando um usuário visita uma página web e
interage com ela se produzem os eventos e com Javascript podemos definir o que queremos que ocorra
quando se produzam.
Com Javascript podemos definir o que acontece quando se produz um evento como poderia ser
que um usuário clique sobre um botão, edite um campo de texto ou abandone a página.
O manejo de eventos é o cavalo de batalha para fazer páginas interativas, porque com eles
podemos responder às ações dos usuários. Até agora neste manual podemos ver muitos exemplos de
manejo de um dos eventos de Javascript, o evento onclick, que se produz ao clicar um elemento da
página. Até agora aplicamos sempre o evento a um botão, mas poderíamos aplica-lo a outros
elementos da página.
Como se define um evento
Para definir as ações que queremos realizar ao produzir um evento utilizamos os manipuladores
de eventos. Existem muitos tipos de manipuladores de eventos, para muitos tipos de ações do usuário.
O manipulador de eventos (event handler) se coloca na tag HTML do elemento da página que
queremos que responda às ações do usuário, através de um atributo identificador do evento.
Por exemplo, temos o manipulador de eventos onclick, que serve para descrever ações que
queremos que se executem quando se clique. Se quisermos que ao clicar sobre um botão aconteça
alguma coisa, escrevemos o manipulador onclick na tag <input type=button> desse botão. Algo
parecido a isto.
<input type=button value="clica-me" onclick="sentencas_javascript...">
Coloca-se um atributo novo na tag que tem o mesmo nome que o evento, neste caso onclick. O
atributo se iguala às sentenças Javascript que queremos que se executem ao se produzir o evento.
Exemplo
<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"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Principais Eventos
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that
can be detected by JavaScript.
Every element on a web page has certain events which can trigger a JavaScript. For example,
we can use the onClick event of a button element to indicate that a function will run when a user clicks
on the button. We define the events in the HTML tags.
Examples of events:
•
•
•
•
•
•
Note:
A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input field in an HTML form
Submitting an HTML form
A keystroke
Events are normally used in combination with functions, and the function will not be
executed before the event occurs!
Nos manipuladores de eventos tem que se especificar a hierarquia inteira de objetos do
navegador, começando sempre pelo objeto window. Isto é necessário porque existe algum browser
antigo que não subentende o objeto window quando se escrevem sentenças Javascript vinculadas a
manipuladores de eventos.
Agora vamos ver uma lista de alguns manipuladores de eventos que existem disponíveis em
Javascript, oferecendo uma pequena descrição de cada um.
onblur *
Desata-se um evento onblur quando um elemento perde o foco da aplicação. O foco da
aplicação é o lugar onde está situado o cursor, por exemplo, pode estar situado sobre um campo de
texto, uma página, um botão ou qualquer outro elemento.
onchange *
Desata-se este evento quando muda o estado de um elemento de formulário, às vezes não se
produz até que o usuário retire o foco da aplicação do elemento. Javascript 1.0
onclick *
Produz-se quando se clica o botão do mouse sobre um elemento da página, geralmente um
botão ou um link.
onfocus *
O evento onfocus é o contrário de onblur. Produz-se quando um elemento da página ou a janela
ganham o foco da aplicação.
onkeydown
Este evento é produzido no instante que um usuário pressiona uma tecla, independentemente
que a solte ou não. É produzido no momento do clique.
onkeypress
Ocorre um evento onkeypress quando o usuário deixa uma tecla clicada por um tempo
determinado. Antes deste evento se produz um onkeydown no momento que se clica a tecla..
onkeyup
Produz-se quando o usuário deixa de apertar uma tecla. É produzido no momento que se libera
a tecla.
onload *
Este evento se desata quando a página, ou em Javascript 1.1 as imagens, terminaram de se
carregar.
onmouseover *
Este evento desata-se quando a seta do mouse entra na área ocupada por um elemento da
página.
onselect *
Executa-se quando um usuário realiza uma seleção de um elemento de um formulário.
Javascript 1.0. Executa um código JavaScript quando o usuário seleciona um texto em uma caixa.
Usado para Text, Textarea, na forma onSelect="algumaCoisa", onde "algumaCoisa" é uma função ou
código de JavaScript.
onsubmit *
Ocorre quando o visitante aperta sobre o botão de enviar o formulário. Executa-se antes do
envio propriamente dito.
onunload *
Ao abandonar uma página, seja porque se clique em um link que nos leva a outra página ou
porque se fecha a janela do navegador, se executa o evento onunload.
Imagens
Introdução
Inicialmente não aparecem na página e transferir seus arquivos previamente em background,
para que estejam disponíveis na memória na hora da substituição. Com esses recursos, pode-se
incrementar a página com recursos dinâmicos, como ícones que mudam de aparência quando ocorre
um evento, animações e banners.
As imagens utilizadas em JavaScript podem ser carregadas de duas formas: através do HTML e
através de instruções JavaScript. As imagens estáticas, fornecidas pela página HTML através do
descritor <img>, atributo src, são representadas como objetos da página (document), acessíveis através
da sua propriedade images: um vetor que contém referências para todas as imagens do documento. As
imagens dinâmicas, que não são fornecidas pelo HTML, podem ser criadas como objetos JavaScript
dentro de qualquer bloco <SCRIPT> ou atributo HTML de eventos usando o operador ‘new’ e o
construtor Image().
Neste capítulo, conheceremos as duas formas de manipular imagens em JavaScript, e como
utilizá-las para criar páginas dinâmicas eficientes.
Classe Image
Tanto uma imagem visível em uma página HTML como uma imagem carregada na memória,
porém invisível, podem ser representadas em JavaScript por um objeto do tipo Image.. Para criar uma
referência para uma imagem que não existe na página, é preciso usar new:
figura5 = new Image(50, 100);
onde os números passsados como parâmetros (opcionais) correspondem respectivamente à
largura e altura da imagem na página em pixels. Pode-se também usar:
figura6 = new Image()
que calculará o tamanho da imagem quando ela for carregada. Depois que um objeto do tipo
Image é criado, e suas dimensões definidas, seu tamanho não pode mais ser alterado. Todas as
imagens passadas para a referência figura5 abaixo serão redimensionadas para 50x100 pixels:
figura5.src = "square.gif"; // square.gif agora tem 50x100 pixels
A propriedade src tem a mesma função do atributo SRC do descritor HTML <IMG>: indicar a
URL do arquivo-fonte da imagem. Toda página que possui o descritor HTML <IMG> já possui um objeto
Image que pode ser manipulado através da sua propriedade document.images (do tipo Array). Para
criar uma nova imagem no documento, é preciso usar HTML e o descritor <IMG>, cuja sintaxe geral
está mostrada abaixo:
<img src="url do arquivo-fonte da imagem"
NAME="nome_do_objeto"
ALT="texto alternativo (descrição da imagem)"
LOWSRC="URL de arquivo-fonte de baixa-resolução"
HEIGHT="altura em pixels"
WIDTH="largura em pixels"
HSPACE="margens externas laterais em pixels"
VSPACE="margens externas verticais em pixels"
BORDER="largura da borda de contorno em pixels "
ALIGN="left" ou "right" ou "top" ou "middle" ou "bottom" ou
"texttop" ou "absmiddle" ou "absbottom" ou "baseline"
ISMAP 
USEMAP="#mapa" 
ONABORT="Código JavaScript"
ONERROR="Código JavaScript"
ONLOAD="Código JavaScript" >
Todos os atributos, com exceção de SRC, são optionais. Para manipular uma imagem do HTML
em JavaScript, é preciso usar o vetor images que contém referências para cada uma das imagens do
documento, na ordem em que elas aparecem no código HTML:
prima = document.images[0]; // primeira imagem da página atual
nona = document.images[8]; // nona imagem da página atual
Assim como formulários e frames, que são acessíveis através de vetores ou nomes, as imagens
podem receber um nome, para tornar o seu acesso mais fácil. O atributo HTML opcional NAME, se
presente, pode ser usado pelo JavaScript para fazer referência à imagem, em vez de usar o vetor
images. É uma boa idéia, pois torna o código mais legível e independente da ordem e número de
imagens na página. Por exemplo, a imagem:
<img src="tapir.gif" name="anta" width=380 height=200>
pode ser referenciada do JavaScript da forma:
prima = document.anta;
Exemplo:
id=“simp” // ou document.getElementById(“simp”);
Exercício Resolvido
Escreva o Código
Crie um icone ativo (link em torno de uma imagem) em uma página HTML que muda de cor
quando o mouse passa sobre ele. Utilize duas imagens. A
primeira,
dullbart.gif,
mais
apagada,
deve
estar
presente na página quando ela for carregada; a outra
brightbart.gif, deve substituir a primeira quando o
mouse estiver sobre ela (evento ONMOUSEOVER do link <A>).
A primeira imagem deverá voltar a ocupar a sua posição
quando o mouse deixar a imagem (evento ONMOUSEOUT do
link <A>). Há um esqueleto disponível em bart.html.
A substituição deve ser imediata. As duas imagens devem estar
carregadas na memória antes de haver qualquer substituição.
Solução
A listagem a seguir apresenta uma possível solução ao problema proposto (está no arquivo
bartsol.html).
<html>
<head>
<title>Imagens</title>
<script>
apagado = new Image();
aceso = new Image();
apagado.src = "dullbart.gif";
aceso.src = "brightbart.gif";
function apaga() {
document.images[0].src = apagado.src;
}
function acende() {
document.images[0].src = aceso.src;
}
</script>
</head><body>
<a href="" onmouseover="acende()" onmouseout="apaga()">
<img src="dullbart.gif" width=43 height=58 border=0>
</a>
</body>
</html>
Formulários e Validação
Validação de formulário
A validação de formulários é um dos usos mais comuns na programação Javascript. A validação
de dados por meio da programação Javascript é muito fácil e rápida por que a verificação é feita no
browser, sem necessitar ir até o servidor para transmitir dados.
A validação é feita para não haver inconsistência de dados quando forem enviados para a base
de dados. Uma checagem no servidor seria necessária no caso do Javascript estar desligado ou se, de
alguma maneira, alguém tentar driblar a validação de forma maliciosa ou por engano. Para a maioria
das pessoas a validação Javascript consegue economizar muito tempo.
A validação no cliente é feita para poupar tempo (round trip). A revalidação no servidor é feita
para termos garantia de consistência nos dados.
Para podermos trabalhar com a validação de formulário, foi criado um formulário padrão para
podermos testar. A figura abaixo será o nosso exemplo:
Com uma noção de onde pretendemos chegar vamos construir o nosso formulário baseado na
imagem acima.
Exemplo
<form
name="cadastro"
action="teste.php"
method="post"
onSubmit="return
validaForm()">
<table
width="40%"
border="1"
cellpadding="5"
bordercolor="#000000">
<tr>
<td>nome:</td>
<td><input name="nome" type="text"></td>
</tr>
<tr>
<td>user:</td>
<td><input name="user" type="text"></td>
</tr>
<tr>
<td>senha:</td>
<td><input name="senha" type="password"></td>
</tr>
<tr>
<td>email:</td>
<td><input name="email" type="text"> ([email protected])</td>
</tr>
<tr>
<td>telefone:</td>
<td><input name="telefone" type="text"></td>
</tr>
<tr>
<td>Data de nascimento:</td>
<td><input name="nasce" type="text"> (dd/mm/yyyy)</td>
</tr>
<tr>
<td>Sexo :</td>
<td>
<input name="sexo[]" type="radio" value="masculino" id="sexo">
Masculino
<input name="sexo[]" type="radio" value="feminino" id="sexo">
Feminino
</td>
</tr>
<tr>
<td colspan="2">
<div align="right">
<input name="enviar" type="submit" value="enviar">
</div>
</td> </tr> </table> </form>
cellspacing="0"
O codigo HTML é uma estrutura de tabela com um formulário, tudo bem simples. Basta apenas
prestar atenção para os nomes das caixas de entradas e dos botões radio bos para não ter problemas
na hora da programação.
No formulário acima, o evento onSubmit chama a função validaForm que será responsável pela
validação dos dados do formulário. Se os dados estiverem corretos retornará true e o formulário será
enviado. Caso contrário uma mensagem será mostrada determinando o local do erro.
Com o formulário criado agora vamos partir para o desenvolvimento do código. Neste formulário
será
feita
a
checagem
de
seis
caixas
de
entrada
de
dados
e
de
um
radio
box.
Para validação das as caixas de entradas é feita uma verifição se foi digitado algum valor.
Para o campo e-mail a verificação é mais elaborada para saber se é um endereço de email válido.
Para o campo telefone, só são aceito números.
Para o campo Data de nascimento é verificado se a data esta correta com o padrão
estabelecido. Para o campo Sexo é verificao se algum valor foi selecionado.
Exemplo
1 function validaForm(){
2
d = document.cadastro;
3
//validar nome
4
if (d.nome.value == ""){
5
alert("O campo " + d.nome.name + " deve ser preenchido!");
6
d.nome.focus();
7
return false;
8
}
9
//validar user
10
if (d.user.value == ""){
11
alert("O campo " + d.user.name + " deve ser preenchido!");
12
d.user.focus();
13
return false;
14
}
15
//validar senha
16
if (d.senha.value == ""){
17
alert("O campo " + d.senha.name + " deve ser preenchido!");
18
d.senha.focus();
19
return false;
20
}
21
//validar email
22
if (d.email.value == ""){
23
alert("O campo " + d.email.name + " deve ser preenchido!");
24
d.email.focus();
25
return false;
26
}
27
//validar email(verificao de endereco eletrônico)
28
parte1 = d.email.value.indexOf("@");
29
parte2 = d.email.value.indexOf(".");
30
parte3 = d.email.value.length;
31
if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) {
32
alert ("O campo " + d.email.name + " deve ser conter um endereco eletronico!");
33
d.email.focus();
34
return false;
35
}
36
//validar telefone
37
if (d.telefone.value == ""){
38
alert ("O campo " + d.telefone.name + " deve ser preenchido!");
39
d.telefone.focus();
40
return false;
41
}
42
//validar telefone(verificacao se contem apenas numeros)
43
if (isNaN(d.telefone.value)){
44
alert ("O campo " + d.telefone.name + " deve conter apenas numeros!");
45
d.telefone.focus();
46
return false;
47
}
48
//validar data de nascimento
49
erro=0;
50
hoje = new Date();
51
anoAtual = hoje.getFullYear();
52
barras = d.nasce.value.split("/");
53
if (barras.length == 3){
54
dia = barras[0];
55
mes = barras[1];
56
ano = barras[2];
57
resultado = (!isNaN(dia) && (dia > 0) && (dia < 32)) && (!isNaN(mes) && (mes > 0) && (mes < 13)) &&
(!isNaN(ano) && (ano.length == 4) && (ano <= anoAtual && ano >= 1900));
58
if (!resultado) {
59
alert("Formato de data invalido!");
60
d.nasce.focus();
61
return false;
62
}
63
} else {
64
alert("Formato de data invalido!");
65
d.nasce.focus();
66
return false;
67
}
68
//validar sexo
69
if (!d.sexo[0].checked && !d.sexo[1].checked) {
70
alert("Escolha o sexo!")
71
return false;
72
}
73
return true;
74 }
Linha 1 – Declaração da função responsável pela validação dos dados do formulário.
Linha 2 – Declaração de uma variável para economizar tempo e prováveis erros de digitação.
Linha 4 – Verificação se foi digitado algum valor para o campo nome. Se retornar falso é
enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.
Linha 10 – Verificação se foi digitado algum valor para o campo user. Se retornar falso é
Linha 16 – Verificação se foi digitado algum valor para o campo senha. Se retornar falso é
Linha 22 – Verificação se foi digitado algum valor para o campo email. Se retornar falso é
Linha 28 – Declaração de uma variável que armazenara a posição do caractere “@” na caixa de
entrada email.
Linha 29 – Declaração de uma variável que armazenara a posição do caractere “.” na caixa de
entrada email.
Linha 30 – Declaração de uma variável que armazenara a quantidade de caracteres digitados na
caixa de entrada email.
Linha 31 – Estrutura condicional para verificação se o caractere “@” está no mínimo depois de
três letras, o caractere “.” está no mínimo depois de seis e se foi digitado no mínimo 9 letras. Se
retornar falso, é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a
correção.
Linha 37 - Verificação se foi digitado algum valor para o campo telefone. Se retornar falso é
Linha 43 - Verificação se o valor digitado no campo telefone possui apenas números. Se
retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a
correção.
Linha 50 – Declaração de uma variável que armazena uma nova Data.
Linha 51 - Declaração de uma variável que armazena o valor do ano no formato completo com 4
caracteres.
Linha 52 – Declaração de uma variável que separa o valor da caixa de entrada referente a data
de nascimento e coloca em uma matriz, a “/” é utilizada para separar os valores entre elas, é suposto
ter 3 valores referente a dia, mês e ano respectivamente.
Linha 53 - Estrutura condicional para verificação se tem 3 valores para a matriz criada. Se
retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a
correção.
Linha 54 - Declaração de uma variável que recebe o primeiro valor da matriz, valor esse
referente ao dia.
Linha 55 - Declaração de uma variável que recebe o segundo valor da matriz, valor esse
referente ao mês.
Linha 56 - Declaração de uma variável que recebe o terceiro valor da matriz, valor esse
referente ao ano completo com 4 caracteres.
Linha 57 - Declaração de uma variável que faz a verificação das variáveis criadas anteriormente
referente a dia, mês e ano, é feita uma checagem se os valores são números e se estão no padrão
estabelecido.
Linha 58 - Estrutura condicional para checagem se o resultado da verificação dos dados
digitados. Se retornar falso é é enviado uma mensagem de erro e a caixa de entrada recebe o foco
para se feita a correção.
Linha 69 - Verificação se foi selecionado algum valor referente ao sexo. Se retornar falso é
Linha 73 – Se todos os valores foram digitados corretamente a função vai retornar true e o
formulário será enviado.
Aula 10 – PHP (1 de 3)
1 Introdução
PHP
PHP (Personal Home Page) é uma sigla recursiva que significa PHP HyperText Preprocessor. O PHP é
uma linguagem de código-fonte aberto, muito utilizada na Internet e especialmente criada para o
desenvolvimento de aplicativos Web.
Note como isso é diferente de scripts CGI escritos em outras linguagens como Perl ou C --- ao
invés de escrever um programa com um monte de comandos para imprimir HTML, você escreve um
arquivo HTML com algum código inserido para fazer alguma coisa (nesse caso, imprimir um pouco de
texto). O código PHP é delimitado por tags iniciais e finais que lhe permitem pular pra dentro e pra fora
do “modo PHP”.
A melhor coisa em usar PHP está no fato de ele ser extremamente simples para um iniciante,
mas oferece muitos recursos para o programador profissional.
Para testar scripts PHP é necessário um servidor com suporte a esta tecnologia. Normalmente, o
mais utilizado é o Apache. O banco de dados mais utilizado com os scripts PHP é o MySQL. Um
exemplo de pacote pronto para execução de um ambiente Apache + PHP + MySQL é o EasyPHP
(http://www.easyphp.org). Qualquer editor de textos pode ser usado para escrever os scripts PHP (ex.
bloco de notas/Komodo ou a ferramenta free MPS PHP Designer em http://www.mpsoftware.dk).
As páginas PHP devem ser salvas no diretório (D:\Minhas Páginas) raiz do servidor. Para testes
locais com o EasyPHP, essa pasta é c:\Arquivos de programas\EasyPHP\www. Para acessar a página,
deve-se abrir o browser Internet Explorer e digitar-se o nome do domínio (http://127.0.0.1 ou localhost)
e o nome da página com extensão .php. Quando o EasyPHP está sendo executado, aparece um ícone
com uma letra “e” ao lado do relógio do Windows.
Observação: *LAMP = Linux, Apache, MySql e PHP.
2 Exemplo de Script
Introdução
Para criar o primeiro exemplo, digite o seguinte código-fonte no seu editor e salve com o nome
de teste.php dentro do diretório raiz do servidor.
Exemplo (usar Firefox)
<html>
<head>
<title>Teste PHP</title>
</head>
<body>
<?php echo "<p>Alô Mundo</p>"; ?>
</body>
</html>
Figura 1 – Primeiro script
No browser, digite o endereço http://127.0.0.1/teste.php e veja o resultado. Veja também o
código fonte da página (Exibir _ Código fonte). É interessante notar que os comandos PHP não
aparecem porque o servidor interpreta todos os scripts antes de enviar a página para o browser.
Observação: Para acessar o mySql pelo php temos que programar para acessar via aluno/aluno
no ip do servidor do banco de dados (10.0.0.3).
O que PHP pode fazer ?
O PHP é focado para ser uma linguagem de script do lado do servidor, portanto, você pode fazer
qualquer coisa que outro programa CGI pode fazer, como: coletar dados de formulários, gerar páginas
com conteúdo dinâmico ou enviar e receber cookies. Mas o PHP pode fazer muito mais.
Esses são os maiores campos onde os scripts PHP podem se utilizados:
• Script no lado do servidor (server-side). Este é o mais tradicional e principal campo de atuação
do PHP. Você precisa de três coisas para seu trabalho. O interpretador do PHP (como CGI ou módulo),
um servidor web e um browser. Basta rodar o servidor web conectado a um PHP instalado. Você pode
acessar os resultados de seu programa PHP com um browser, visualizando a página PHP através do
servidor web.
• Script de linha de comando. Você pode fazer um script PHP funcionar sem um servidor web ou
browser. A única coisa necessária é o interpretador. Esse tipo de uso é ideal para script executados
usando o cron ou o Agendador de Tarefas (no Windows). Esses scripts podem ser usados também
para rotinas de processamento de texto.
• Escrevendo aplicações GUI no lado do cliente (client-side). O PHP não é (provavelmente) a
melhor linguagem para produção de aplicações com interfaces em janelas, mas o PHP faz isso muito
bem, e se você deseja usar alguns recursos avançados do PHP em aplicações no lado do cliente poderá
utilizar o PHP-GTK para escrever esses programas. E programas escritos desta forma ainda serão
independentes de plataforma. O PHP-GTK é uma extensão do PHP, não disponível na distribuição
oficial. Se você está interessado no PHP-GTK, visite o site http://gtk.php.net.
O PHP pode ser utilizado na maioria dos sistemas operacionais, incluindo Linux, várias variantes
Unix (incluindo HP-UX, Solaris e OpenBSD), Microsoft Windows, Mac OS X, RISC OS, e provavelmente
outros. O PHP também é suportado pela maioria dos servidores web atuais, incluindo Apache, Microsoft
Internet Information Server, Personal Web Server, Netscape and iPlanet Servers, Oreilly Website Pro
Server, Caudium, Xitami, OmniHTTPd, e muitos outros. O PHP pode ser configurado como módulo para
a maioria dos servidores, e para os outros como um CGI comum.
Com o PHP, portanto, você tem a liberdade para escolher o sistema operacional e o servidor
web. Do mesmo modo, você pode escolher entre utilizar programação estrutural ou programação
orientada a objeto, ou ainda uma mistura deles. Mesmo não desenvolvendo nenhum recurso padrão de
OOP (Object Oriented Programming, Programação Orientada a Objetos) na versão atual do PHP, muitas
bibliotecas de código e grandes aplicações (incluindo a biblioteca PEAR) foram escritos somente
utilizando OOP.
Com PHP você não está limitado a gerar somente HTML. As habilidades do PHP incluem geração
de imagens, arquivos PDF e animações Flash (utilizando libswf ou Ming) criados dinamicamente. Você
pode facilmente criar qualquer padrão texto, como XHTML e outros arquivos XML. O PHP pode gerar
esses padrões e os salvar no sistema de arquivos, em vez de imprimi-los, formando um cache dinâmico
de suas informações no lado do servidor.
Talvez a mais forte e mais significativa característica do PHP é seu suporte a uma ampla
variedade de banco de dados. Escrever uma página que consulte um banco de dados é incrivelmente
simples.
Os seguintes bancos de dados são atualmente suportados:
Adabas D Ingres Oracle (OCI7 and OCI8)
dBase InterBase Ovrimos
Empress FrontBase PostgreSQL
FilePro (read-only) mSQL Solid
Hyperwave Direct MS-SQL Sybase
IBM DB2 MySQL Velocis
Informix ODBC Unix dbm
Adicionalmente, o PHP suporta ODBC (Open Database Connection, ou Padrão Aberto de
Conexão com Bancos de Dados), permitindo que você utilize qualquer outro banco de dados que
suporte esse padrão mundial.
O PHP também tem suporte para comunicação com outros serviços utilizando protocolos como
LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (em Windows) e incontáveis outros. Você pode abrir
sockets de rede e interagir diretamente com qualquer protocolo. O PHP também suporta o intercâmbio
de dados complexos WDDX, utilizado em virtualmente todas as linguagens de programação para web.
Falando
de
comunicação,
o
PHP
implementa
a
instanciação
de
objetos
Java
e
os
utiliza
transparentemente como objetos PHP. Você ainda pode usar sua extensão CORBA para acessar objetos
remotos.
O PHP é extremamente útil em recursos de processamento de texto, do POSIX Estendido ou
expressões regulares Perl até como interpretador para documentos XML. Para acessar e processar
documentos XML, são suportados os padrões SAX e DOM. Você ainda pode usar nossa extensão XSLT
para transformar documentos XML.
Utilizando o PHP no campo do e-commerce, você poderá usar as funções específicas para
Cybescash, CyberMUT, Verysign Payflow Pro e CCVS, práticos sistemas de pagamento online.
Por último mas longe de terminar, temos também outras extensões interessantes: funções para
o search engine mnoGoSearch, funções para Gateway IRC, vários utilitários de compressão (gzip, bz2),
calendário e conversões de datas, tradução, etc.
3 Configuração (php.ini)
As configurações do PHP ficam armazenadas em um arquivo denominado php.ini e que
é carregado cada vez que o servidor é iniciado. No Windows, ele fica na pasta c:\Windows.
Exemplo:
[PHP]
;;;;;;;;;;;
; WARNING ;
;;;;;;;;;;;
; This is the default settings file for new PHP installations.
; By default, PHP installs itself with a configuration suitable for
; development purposes, and *NOT* for production purposes.
; For several security-oriented considerations that should be taken
; before going online with your site, please consult php.inirecommended
; and http://php.net/manual/en/security.php.
;;;;;;;;;;;;;;;;;;;
; About this file ;
;;;;;;;;;;;;;;;;;;;
; This file controls many aspects of PHP's behavior. In order for PHP
to
; read it, it must be named 'php.ini'. PHP looks for it in the
current
; working directory, in the path designated by the environment
variable
; PHPRC, and in the path that was defined in compile time (in that
order).
; Under Windows, the compile-time path is the Windows directory. The
; path in which the php.ini file is looked for can be overridden using
; the -c argument in command line mode.
;
; The syntax of the file is extremely simple. Whitespace and Lines
; beginning with a semicolon are silently ignored (as you probably
guessed).
; Section headers (e.g. [Foo]) are also silently ignored, even though
; they might mean something in the future.
Figura 2 – Trecho de exemplo do php.ini
Através de modificações neste arquivo é possível alterar várias opções no comportamento do
PHP. Todas as linhas iniciadas por ponto-e-vírgula são comentários.
4 Sintaxe Básica
Tags especiais indicam ao PHP onde estão os blocos de código. A tag de abertura é formada por
um sinal de “menor que” (<), um sinal de interrogação (?) e a sigla php. A tag de fechamento é
formada por um ponto interrogação (?) e sinal de “maior que” (>).
Ex:
<?php
...
?>
Exercício
Digite o código da figura 1 e salve no diretório raiz do servidor Apache. Veja o resultado da
página através de seu carregamento no browser.
O sinal de ponto-e-vírgula (;) indica o final de um comando (ver figura 1). A próxima figura
mostra outro exemplo.
<html>
<head>
</head>
<body>
<?php
$a = 10;
$b = 15;
$c = $a + $b;
echo "$a mais $b é igual a $c";
?>
</body>
</html>
Figura 3 – Exemplo de código
Os comentários de mais de uma linha no PHP são obtidos através de /* e */. Os comentários de
apenas uma linha são obtidos através de //.
<html>
<head>
</head>
<body>
<?php
/*
O código abaixo soma duas variáveis
e exibe o valor encontrado
*/
$a = 10;
$b = 15;
$c = $a + $b;
?>
</body>
</html>
Figura 4 – Exemplo de código com comentários de mais de uma linha
Os comentários não aparecem no browser.
<html>
<head>
</head>
<body>
<?php
$a = 10; //A variável $a recebe o valor 10
$b = 15; //A variável $b recebe o valor 15
//A variável $c recebe o valor da soma
$c = $a + $b;
//O resultado obtido é exibido
?>
</body>
</html>
Figura 5 - Exemplo de código com comentários de uma linha
Palavras-chave do PHP
and do for include require true
break else foreach list return var
case elseif function new static virtual
class extends global not switch xor
continue false if or this while default
Exercício
<?
# Páginas Dinâmicas com PHP e MySQL
# Exercício 1 - Meu primeiro script em PHP
?>
<html>
<head>
<title>IME-USP, Verão 2007, PHP e MySQL - Meu primeiro script em
PHP</title>
</head>
<body text="#660099" link="#3399CC" alink="#FF6600" vlink="#66CC00">
<?
# como imprimir?
print "<p>Olá mundo!</p>";
# operações aritméticas
$a = 2;
$b = 3;
$soma = $a + $b;
$diferença = $a - $b;
$produto = $a * $b;
$divisão = $a / $b;
$resto = $a % $b;
# tipos de impressão
print "<p>Os números $a e $b possuem soma $soma, diferença $diferença,
produto $produto e a divisão dá $divisão com resto $resto.</p>"; #
variáveis podem ser impressas somente dentro de aspas duplas
print '<p>Os números $a e $b são primos?</p>'; # variáveis não podem
ser impressas em aspas simples
print '<p>Os números '.$a.' e '.$b.' são primos?</p>'; #para
concatenar strings usamos o operador .
?>
</body> </html>
obs.: tanto faz áspas ou apóstrofo
5 Variáveis
Variáveis armazenam valores. Pode-se referir a variáveis para obter seu valor ou para
alterar seu conteúdo. No PHP elas são representadas por um cifrão ($) mais o nome da variável.
Os nomes de variáveis válidos são iniciados por letras ou por um subscrito ( _ ). Existe diferenciação
entre nomes de variáveis maiúsculas e minúsculas.
Ex: $a, $_A, $_a
<html>
<head>
</head>
<body>
<?php
$a = 10;
$A = 20;
echo "O valor de 'a' é $a e o de 'A' é $A";
?>
</body>
</html>
Figura 6 – Exemplo de código com variáveis minúscula e maiúscula
Quando a variável é declarada dentro de uma função, ela só estará disponível para o código
desta função. O código a seguir gera um erro devido a essa característica.
<html>
<head>
</head>
<body>
<?php
function soma($a)
{
$b = $a + 5;
}
soma(10);
echo "o valor de 'b' é $b";
?>
</body>
</html>
Figura 7 – Declaração de variável dentro de função
Para evitar este tipo de problema, deve-se definir a variável como global. O código a seguir
resolve o problema do código anterior. Compare os resultados dos dois scripts.
<html>
<head>
</head>
<body>
<?php
function soma($a)
{
global $b;
$b = $a + 5;
}
soma(10);
echo "o valor de 'b' é $b";
?>
</body>
</html>
Figura 8 – Declaração de variável global
6 Tipos de dados
O PHP suporta vários tipos de dados:
•
Inteiro – Números inteiros (isto é, números sem ponto decimal)
•
•
•
•
•
•
•
•
Números de dupla precisão – Números reais (isto é, números que contêm um ponto
decimal)
String – Texto entre aspas simples (´ ´) ou duplas (“ “)
Booleanos – armazenam valores verdadeiros ou falsos, usados em testes de condições
Array – Grupo de elementos do mesmo tipo
Objeto – Grupo de atributos e métodos
Recurso – Uma origem de dados externa
Nulo – Nenhum valor
As variáveis do tipo matriz ou array permitem o armazenamento de diversos elementos
referenciados por uma mesma referência.
<html>
<head>
</head>
<body>
<?php
$frutas = array(
1 => "Laranja",
2 => "Maçã",
3 => "Uva");
echo "<li> $frutas[1]<br>";
?>
</body>
</html>
Figura 13 – Código com matriz
7 Constantes
Constantes são identificadores para valores simples. O seu conteúdo não muda durante a
execução do código. Elas são criadas com a função define e, por convenção, são escritas com letras
maiúsculas e não usam o cifrão no início.
<html>
<head>
</head>
<body>
<?php
define("CONSTANTE", "Alô mundo.");
echo CONSTANTE;
?>
</body>
</html>
Figura 14 – Código com constante
O PHP implementa algumas constantes, a maioria são matemáticas. O código seguinte
demonstra o uso da constante M_PI.
<html>
<head>
</head>
<body>
<?php
function calculaAreaCirculo($raio)
{
return M_PI * pow($raio, 2);
}
$meuRaio = 5;
$area = calculaAreaCirculo($meuRaio);
echo "<b>Raio</b> = $meuRaio<br>";
echo "<b>Área</b> = $area";
?>
</body>
</html>
Figura 15 – Código com a constante M_PI
8 Expressões
Tudo que tem um valor pode ser considerado uma expressão. O código a seguir demonstra na
prática.
<html>
<head>
</head>
<body>
<?php
$b = ($a = 5);
echo "O valor de 'b' é $b";
?>
</body>
</html>
Figura 16 – Código com uso de expressão
<html>
<head>
</head>
<body>
<?php
$b = $a = 5;
echo "O valor de 'b' é $b";
?>
</body>
</html>
Figura 17 – Variação do código anterior
Expressões de comparação retornam valores booleanos, sendo vazio representando verdadeiro
e um representando falso. As expressões de comparação são usadas em declarações condicionais para
determinar se um bloco de código será executado ou não.
<html>
<head>
</head>
<body>
<?php
$valor = (5 < 10);
echo "O valor da expressão '5 > 10' é $valor";
?>
</body>
</html>
Figura 18 – Código com expressão de comparação
9 Operadores
São usados para efetuarem operações sobre as variáveis e constantes. Os operadores são:
+ soma
- subtração
* multiplicação
/ divisão
^ exponenciação
% módulo, resto da divisão
++ acrescenta um a uma variável
-- subtrai um de uma variável
+= soma um valor a uma variável e lhe atribui o resultado
<html>
<head><title>Teste PHP</title></head>
<body>
<?php
$x = 2;
echo($x + 2);
echo "<br>";
$x = 2;
echo(5 - $x);
echo "<br>";
$x = 4;
echo($x * 5);
echo "<br>";
$x = 15;
echo($x / 5);
echo "<br>";
$x = 10;
echo($x % 8);
echo "<br>";
$x = 5;
$x++;
echo($x);
echo "<br>";
$x = 5;
$x--;
echo($x);
echo "<br>";
$x = 8;
echo($x);
echo "<br>";
$x = 8;
$x = $x + 10;
echo($x);
echo "<br>";
$x = 8;
$x += 10;
echo($x);
?>
</body>
</html>
Figura 19 – Código com diversas operações matemáticas
Há também os operadores de comparação. Uma comparação sempre gera um dos dois valores
possíveis: vazio, que corresponde a falso, e 1, que corresponde a verdadeiro.
= = é igual a
! = não é igual a
> é maior que
< é menor que
>= é maior ou igual a
<= é menor ou igual a
Operadores lógicos
and ou && - operador lógico “e”, apenas retornando verdadeiro quando as duas condições
envolvidas no teste forem verdadeiras
or ou | | operador lógico “ou”, retornando verdadeiro quando uma ou as duas condições
envolvidas no teste forem verdadeiras
! operador lógico “não”, invertendo o resultado de um teste
xor – operador lógico “ou exclusivo” que determina se uma de duas condições é verdadeira mas
não ambas. Se ambas forem verdadeiras, o teste final será falso
Exercício [MPU 2010]
<?php
$Publico = "Uniao";
$Uniao = "Prova";
$Ministerio = "Publico";
$a="Ministerio";
print $a;
print $$a;
print $$$a;
?>
Com relação ao código anterior, escrito em PHP, julgue os itens subsequentes.
a) O código na linha 6 produzirá a apresentação na tela do computador, da palavra Ministerio,
que será, no momento da apresentação, o conteúdo da >> variável $a. (C ou E?)
b) Nas linhas 7 e 8, existem erros de sintaxe, pois os nomes das variáveis em PHP admitem
somente um único símbolo $. (C ou E?)
c) O código na linha 8 produzirá a apresentação, na tela do computador, da palavra Uniao, pois
esse será, no momento da apresentação, o conteúdo da variável $$$a. (C ou E?)
10 Estruturas de Controle
No PHP, as estruturas de controle são formadas por declarações condicionais e de looping:
if – executa uma ação se uma condição for atendida. O bloco de comandos a ser executado
deve ser escrito entre chaves;
else – pode-se colocar um conjunto de comandos alternativos caso o teste do if seja negativo. A
declaração else deve vir logo após o bloco de código relacionado ao if (ver figura 24). O comando if
também pode ser usado após a declaração else (figura 25).
<html>
<head>
</head>
<body>
<?php
$x = 20;
if ($x > 10)
{
echo("O valor da variável é maior que 10.");
}
?>
</body>
</html>
Figura 22 – Código com declaração condicional if verdadeiro
<html>
<head>
</head>
<body>
<?php
$x = 5;
if ($x > 10)
{
}
?>
</body>
</html>
Figura 23 – Código com declaração condicional if falso
<html>
<head>
</head>
<body>
<?php
$x = 5;
if ($x > 10)
{
}
else
{
echo("O valor da variável é menor que 10.");
}
?>
</body>
</html>
Figura 24 – Código com declaração condicional if e else
<html>
<head>
</head>
<body>
<?php
$cor = "branco";
if ($cor == "vermelho")
{
echo("A variável contém o valor 'vermelho'.");
}
else if
{
echo("A
}
else if
{
echo("A
}
else
{
echo("O
}
?>
</body>
</html>
($cor == "azul")
variável contém o valor 'azul'.");
($cor == "amarelo")
variável contém o valor 'amarelo'.");
valor da variável não foi identificado.");
Figura 25 – Código com declaração condicional if e else if
switch / case – forma de testar uma dentre várias possibilidades. A declaração default executa
caso nenhuma das opções for verdadeira (figura 26). A declaração break faz com que o restante do
código não seja executado caso o teste seja verdadeiro.
<html>
<head>
</head>
<body>
<?php
$d = getdate();
switch ($d['wday'])
{
case 5:
echo("Finalmente Sexta");
break;
case 6:
echo("Super Sábado");
break;
case 0:
echo("Domingo Sonolento");
break;
default:
echo("Estou esperando pelo fim da semana");
}
?>
</body>
</html>
Figura 26 – Código com declaração condicional switch e case
for – estrutura de looping que executa um bloco de código quantas vezes for indicado em uma
variável. Deve-se definir a variável que será testada no looping, uma condição de teste e o incremento
(ou decremento) da variável de controle.
<html>
<head>
</head>
<body>
<?php
for ($i = 1; $i < 10; $i++)
{
echo("Linha $i <br>");
}
?>
</body>
</html>
Figura 27 – Código com looping definido pelo comando if
while – estrutura de looping que não necessita de um número determinado de iterações. Ele é
executado enquanto uma condição for verdadeira.
<html>
<head>
</head>
<body>
<?php
$i = 1;
while ($i < 10000)
{
echo($i);
$i *= 2;
echo(" vezes 2 é igual a $i <br>");
}
?>
</body>
</html>
Figura 28 – Código com declaração condicional while
do-while– outra forma de looping que executa um bloco de código, testa uma condição e repete
novamente o bloco de código (ou não).
<html>
<head>
</head>
<body>
<?php
$i = 1;
do
{
echo ("Linha $i <br>");
$i++;
}
while ($i < 10)
?>
</body>
</html>
Figura 29 - Código com declaração condicional do-while
11 Funções
Uma função é um bloco de código reutilizável que é executado devido a um evento ou pela
chamada de outra função. Deve-se usar a declaração function para criar uma função. Os parâmetros
usados pela função são declarados entre parênteses. Os comandos a serem executados pela função
devem estar entre chaves (figura 30). A declaração return retorna um valor quando a função é
chamada. Esta declaração não é necessária se a função não retorna nenhum valor.
Para se chamar uma função, deve-se escrever seu nome e indicar os parâmetros entre
parênteses.
<html>
<head><title>Teste PHP</title></head>
<body>
<?php
function soma($valor1, $valor2)
{
$resultado = $valor1 + $valor2;
return ($resultado);
}
$x = soma(7, 8);
echo($x);
?>
</body>
</html>
Figura 30 – Exemplo de uma função
<html>
<head>
</head>
<body>
<?php
function escreveTexto()
{
echo("Já sei criar funções!");
}
escreveTexto();
?>
</body>
</html>
Figura 31 – Segundo exemplo de declaração de função
15 Inclusão de Arquivos
O comando include permite a inclusão de outros arquivos php dentro do script que está sendo
executado. Pode-se criar uma função que imprime a data atual e pode-se reusá-lo sem precisar
reescrever o código cada vez que for necessário. No exemplo a seguir, pode-se chamar o primeiro
script de cabecalho.php e o próximo script o inclui através do comando include.
<html>
<head>
</head>
<body>
<?php
$meses = array(1 => "Janeiro",
2 => "Fevereiro",
3 => "Março",
4 => "Abril",
5 => "Maio",
6 => "Junho",
7 => "Julho",
8 => "Agosto",
9 => "Setembro",
10 => "Outubro",
11 => "Novembro",
12 => "Dezembro");
$hoje = getdate();
$dia = $hoje["mday"];
$mes = $hoje["mon"];
$nomeMes = $meses[$mes];
$ano = $hoje["year"];
echo "Olá. Hoje é dia $dia de $nomeMes de $ano."
?>
</body>
</html>
Figura 38 – Script que é salvo com o nome de cabecalho.php
<html>
<head>
<title>Página PHP</title>
</head>
<body>
<?php
include("cabecalho.php");
?>
</body>
</html>
Figura 39 – Código com inclusão de arquivo externo chamado cabecalho.php
Exercícios
Editar e salvar com o nome de Exe01.php:
<HTML>
<HEAD><TITLE>Exercício 01</TITLE></HEAD>
<BODY BGCOLOR="blue" TEXT="white">
<?php
//Estou utilizando esta linha para comentário
echo "<H1><CENTER>Testando PHP com HTML<P></H1>";
echo "Estou usando PHP !!!<HR>";
?>
<SCRIPT LANGUAGE=php>
//Outra forma de utilizar o PHP
echo "<H3>Aluno1 - Aluno2</h3>";
echo "<FONT FACE='arial' SIZE='4' COLOR='yellow'>Colégio Singular</FONT>";
</SCRIPT>
</CENTER></BODY></HTML>
Aula 13 – PHP (aula extra)
16 Cookies
Cookies são formas de armazenar informações a respeito de uma sessão dentro do disco rígido
do usuário cliente. O comando setcookie armazena um cookie com as informações que se desejam
recuperar em seguida. Quando não for declarado um tempo de vida, o cookie se auto-destrói quando a
sessão é encerrada (quando o browser for fechado).
<?php
if (isset($HTTP_POST_VARS['usuario'])) {
$user = $HTTP_POST_VARS['usuario'];
setcookie("usuario", $user);
$mensagem = "Usuário $user conectado.<p>";
}
else
{
$mensagem = "Digite o seu nome de usuário<p>";
}
?>
<html>
<head>
</head>
<body>
<?
echo $mensagem;
?>
<form method="post" action="teste.php">
Nome de Usuário: <input type="text" name="usuario">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Figura 40 – Código que cria um cookie com o nome do usuário
<html>
<head>
</head>
<body>
<?php
$user = $_COOKIE["usuario"];
echo "O usuário $user está conectado.";
?>
</body>
</html>
Figura 41 – Código que recupera os dados do cookie criado anteriormente
O código a seguir demonstra o uso de um cookie com “tempo de vida” definido em 3600
segundos, isto é, uma hora. Após uma hora decorrida de sua criação, ele é removido.
<?php
if (isset($_POST['usuario'])) {
$user = $_POST['usuario'];
setcookie("usuario", $user, time() + 3600); // Expira em uma hora
$mensagem = "Usuário $user conectado.<p>";
}
else
{
$mensagem = "Digite o seu nome de usuário<p>";
}
?>
<html><head><title>Teste PHP</title></head>
<body>
<?
echo $mensagem;
?>
Nome de Usuário: <input type="text" name="usuario">
<br><input type="submit" value="Enviar">
</form></body></html>
Figura 42 – Código que cria um cookie com o nome do usuário que dura uma hora
17 Parâmetros (Query String)
O uso de parâmetros facilita a programação porque permite a passagem de dados entre o
browser e o script ou entre scripts. A passagem de parâmetros entre o browser e o script é feita dentro
da URL, por exemplo e é manipulada pela função $_GET.
Nesse exemplo a seguir, cada um dos links envia um valor diferente para a página que é aberta
(teste.php). Para enviar um parâmetro, a sintaxe inclui um sinal de interrogação, o nome da variável,
um sinal de igual e o valor da variável.
<html>
<head>
</head>
<body>
<?php
if (isset($_GET["valor"]))
{
$valor = $_GET["valor"];
echo "Você clicou no link $valor <p>";
}
else
{
echo "Clique em um dos links abaixo:<p>";
}
?>
<a href="teste.php?valor=1">link 1</a><br>
</body>
</html>
Figura 43 – Código com passagem de parâmetro
Caso exista necessidade de se passar mais de um parâmetro, deve-se separá-los através de “e
comercial” (&), conforme figura 44.
<html>
<head>
</head>
<body>
<?php
if (isset($_GET["nome"]) && isset($_GET["sobrenome"])) {
$nome = $_GET["nome"];
$sobrenome = $_GET["sobrenome"];
echo "O nome selecionado foi $nome $sobrenome<p>";
}
else
{
echo "Selecione um nome<p>";
}
?>
<a href="teste.php?nome=Pedro&sobrenome=Silva">Pedro Silva</a><br>
<a href="teste.php?nome=Maria&sobrenome=Santos">Maria Santos</a><br>
</body>
</html>
Figura 44 – Código com passagem de mais de um parâmetro
18 Formulários
Os valores enviados através de um formulário podem ser recuperados pela variável predefinida
$_POST. Através dela é possível obter os dados que foram enviados através do método POST do HTML,
bastando indicar o nome do campo do formulário. No comando action do formulário, deve-se indicar a
página PHP que irá receber os valores. O mesmo documento pode conter o código e o formulário
(figura 45).
<html>
<head>
</head>
<body>
<?php
if (isset($_POST["pnome"]) && isset($_POST["snome"]))
{
$pnome = $_POST["pnome"];
$snome = $_POST["snome"];
echo "Olá $pnome $snome.<p>";
}
else
{
echo "Digite o seu nome.<p>";
}
?>
Primeiro Nome: <input type="text" name="pnome">
<br>
Sobrenome: <input type="text" name="snome">
<br><br>
</form>
</body>
</html>
Figura 45 – Código com formulário enviando dados através do método POST
Se for usado o método GET, os dados podem ser visualizados na URL do browser. Para
recuperar estes dados, deve-se usar a variável pré-definida $_GET. Executar os códigos das figuras 45
e 46 e analisar o comportamento do browser.
<html>
<head>
</head>
<body>
<?php
if (isset($_GET["pnome"]) && isset($_GET["snome"]))
{
$pnome = $_GET["pnome"];
$snome = $_GET["snome"];
echo "Olá $pnome $snome.<p>";
}
else
{
echo "Digite o seu nome.<p>";
}
?>
<form method="get" action="teste.php">
Primeiro Nome: <input type="text" name="pnome">
<br>
Sobrenome: <input type="text" name="snome">
<br><br>
</form></body>
</html>
Figura 46 – Código com formulário enviando dados através do método GET
Bibliografia/Créditos
•
Apostila de PHP do Prof. Cristiano Cachapuz e Lima
•
Wikipédia, a enciclopédia livre.
•
Apostila de XHTML - Prof. Luís Gonçalves
•
Apostila de CSS - Prof. Luís Gonçalves
•
Apostila de Javascript - Prof. Luís Gonçalves
•
JavaScript – Aplicações Interativas para a Web - ADRIANO GOMES LIMA
•
http://www.maujor.com/tutorial/xhtml.php
•
Head First HTML with CSS & XHTML [ILLUSTRATED] (Paperback)
•
Head First JavaScript [ILLUSTRATED] (Paperback)
•
http://www.criarweb.com/artigos/204.php
•
http://www.dimap.ufrn.br/~jair/webdesign/exerciciosjavascript.html
•
http://www.maujor.com/tutorial/formac-a.php
•
http://cursophp.thiagorodrigo.com.br
•
http://www.singularsantoandre.com.br/portal/epd/ar/professores/gallao
•
http://imasters.uol.com.br/artigo/2114/javascript/validacao_de_formulario/
Apêndice A – Questionário de Avaliação do Curso
FAETEC – Rio de Janeiro
Professor M. França
Disciplina:
Aluno:
__________
_______________________________________________
Data:
________
Período/Turma: ________
Observação: Solicite ao professor o endereço para preenchimento eletrônico.
Atenção: Procure dar respostas completas, evitando monossílabos: “sim”, “não”, “é”, “fui” etc..
E não se esqueça de perguntar ao professor sobre o 0,5 ponto relativo ao preenchimento deste.
1) O curso: O curso Técnico em Informática da Escola Técnica Estadual República possui um bom nível? As
matérias são atuais e relevantes? Ele proporciona um ambiente para que alunos interessados possam adquirir
conhecimentos aplicáveis profissionalmente?
2) A disciplina: A disciplina em questão (PWEB) possui um conteúdo atual? O programa foi totalmente coberto?
A carga horária semanal foi suficiente para explanação e resolução de exercícios? As aulas práticas (se for o
caso) foram suficientes e em condições adequadas (máquinas)?
3) O professor: O professor possuía domínio da disciplina (conhecimento)? Ele explica bem (didático)? Ele é
cordial e atencioso para com os alunos? Ele estava sempre disposto a explicar novamente algum conceito mal
compreendido? Existe algum ponto positivo e/ou negativo no professor?
4) O aluno: Você freqüenta as aulas assiduamente? Você faz os exercícios/estuda em casa? Você presta atenção
na explicação do professor? Você se considera um aluno agitado/disperso? Você conseguiu aprender os
principais conceitos da disciplina? Você tentou tirar suas dúvidas com o professor?
5) Livre: Que sugestões, ou críticas, você gostaria de fornecer para a melhoria do processo?
6) Nota: Dê uma nota para a disciplina (PWEB), de 0 (muito insatisfeito) a 10 (muito satisfeito): ______
Muito obrigado. Desejo a todos muito sucesso profissional e boas férias; Sem radicalismos!
“Teu coração é livre.
Tenha coragem para segui-lo!”
Brave Heart
Apêndice B – Referências
JavaScript Objects Reference
•
Array object
o The Array object is used to store multiple values in a single variable.
Array Object Properties
Property
Description
constructor
Returns the function that created the Array object's prototype
length
Sets or returns the number of elements in an array
prototype
Array Object Methods
Method
Description
concat()
Joins two or more arrays, and returns a copy of the joined arrays
join()
Joins all elements of an array into a string
pop()
Removes the last element of an array, and returns that element
push()
Adds new elements to the end of an array, and returns the new length
reverse()
Reverses the order of the elements in an array
shift()
Removes the first element of an array, and returns that element
slice()
Selects a part of an array, and returns the new array
sort()
Sorts the elements of an array
splice()
Adds/Removes elements from an array
toString()
Converts an array to a string, and returns the result
unshift()
valueOf()
•
•
Adds new elements to the beginning of an array, and returns the new
length
Returns the primitive value of an array
Boolean object
Date object
o The Date object is used to work with dates and times.
o Date objects are created with new Date().
o There are four ways of instantiating a date:
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
Date Object Properties
Property
Description
constructor
Returns the function that created the Date object's prototype
prototype
Date Object Methods
Method
Description
getDate()
Returns the day of the month (from 1-31)
getDay()
Returns the day of the week (from 0-6)
getFullYear()
Returns the year (four digits)
getHours()
Returns the hour (from 0-23)
getMilliseconds()
Returns the milliseconds (from 0-999)
getMinutes()
Returns the minutes (from 0-59)
getMonth()
Returns the month (from 0-11)
getSeconds()
Returns the seconds (from 0-59)
getTime()
Returns the number of milliseconds since midnight Jan 1, 1970
getTimezoneOffset()
Returns the time difference between GMT and local time, in minutes
getUTCDate()
Returns the day of the month, according to universal time (from 1-31)
getUTCDay()
Returns the day of the week, according to universal time (from 0-6)
getUTCFullYear()
Returns the year, according to universal time (four digits)
getUTCHours()
Returns the hour, according to universal time (from 0-23)
getUTCMilliseconds()
Returns the milliseconds, according to universal time (from 0-999)
getUTCMinutes()
Returns the minutes, according to universal time (from 0-59)
getUTCMonth()
Returns the month, according to universal time (from 0-11)
getUTCSeconds()
Returns the seconds, according to universal time (from 0-59)
getYear()
Deprecated. Use the getFullYear() method instead
parse()
Parses a date string and returns the number of milliseconds since
midnight of January 1, 1970
setDate()
Sets the day of the month (from 1-31)
setFullYear()
Sets the year (four digits)
setHours()
Sets the hour (from 0-23)
setMilliseconds()
Sets the milliseconds (from 0-999)
setMinutes()
Set the minutes (from 0-59)
setMonth()
Sets the month (from 0-11)
setSeconds()
Sets the seconds (from 0-59)
setTime()
Sets a date and time by adding or subtracting a specified number of
milliseconds to/from midnight January 1, 1970
setUTCDate()
Sets the day of the month, according to universal time (from 1-31)
setUTCFullYear()
Sets the year, according to universal time (four digits)
setUTCHours()
Sets the hour, according to universal time (from 0-23)
setUTCMilliseconds()
Sets the milliseconds, according to universal time (from 0-999)
setUTCMinutes()
Set the minutes, according to universal time (from 0-59)
setUTCMonth()
Sets the month, according to universal time (from 0-11)
setUTCSeconds()
Set the seconds, according to universal time (from 0-59)
setYear()
Deprecated. Use the setFullYear() method instead
toDateString()
Converts the date portion of a Date object into a readable string
toGMTString()
Deprecated. Use the toUTCString() method instead
Returns the date portion of a Date object as a string, using locale
toLocaleDateString()
conventions
toLocaleTimeString()
Returns the time portion of a Date object as a string, using locale
conventions
toLocaleString()
Converts a Date object to a string, using locale conventions
toString()
Converts a Date object to a string
toTimeString()
Converts the time portion of a Date object to a string
toUTCString()
Converts a Date object to a string, according to universal time
Returns the number of milliseconds in a date string since midnight of
UTC()
January 1, 1970, according to universal time
valueOf()
•
•
•
Returns the primitive value of a Date object
Math object
Number object
String object
o The String object is used to manipulate a stored piece of text.
o String objects are created with new String().
var txt = new String(string);
or more simply:
var txt = string;
String Object Properties
Property
Description
constructor
Returns the function that created the String object's prototype
length
Returns the length of a string
prototype
String Object Methods
Method
Description
charAt()
Returns the character at the specified index
charCodeAt()
Returns the Unicode of the character at the specified index
concat()
Joins two or more strings, and returns a copy of the joined strings
fromCharCode()
Converts Unicode values to characters
indexOf()
lastIndexOf()
match()
Returns the position of the first found occurrence of a specified value in a
string
Returns the position of the last found occurrence of a specified value in a
string
Searches for a match between a regular expression and a string, and
returns the matches
replace()
search()
Searches for a match between a substring (or regular expression) and a
string, and replaces the matched substring with a new substring
Searches for a match between a regular expression and a string, and
returns the position of the match
slice()
Extracts a part of a string and returns a new string
split()
Splits a string into an array of substrings
substr()
Extracts the characters from a string, beginning at a specified start
position, and through the specified number of character
substring()
Extracts the characters from a string, between two specified indices
toLowerCase()
Converts a string to lowercase letters
toUpperCase()
Converts a string to uppercase letters
valueOf()
Returns the primitive value of a String object
String HTML Wrapper Methods
The HTML wrapper methods return the string wrapped inside the appropriate HTML tag.
Method
Description
anchor()
Creates an anchor
big()
Displays a string using a big font
blink()
Displays a blinking string
bold()
Displays a string in bold
fixed()
Displays a string using a fixed-pitch font
fontcolor()
Displays a string using a specified color
fontsize()
Displays a string using a specified size
italics()
Displays a string in italic
link()
Displays a string as a hyperlink
small()
Displays a string using a small font
strike()
Displays a string with a strikethrough
sub()
Displays a string as subscript text
sup()
Displays a string as superscript text
•
•
RegExp object
Global properties and functions
Browser Objects Reference
•
Window object
o The window object represents an open window in a browser.
o If a document contain frames (<frame> or <iframe> tags), the browser creates one
window object for the HTML document, and one additional window object for each frame.
Note: There is no public standard that applies to the Window object, but all major
browsers support it.
Window Object Properties
Property
Description
Returns a Boolean value indicating whether a window has been closed or
closed
not
defaultStatus
Sets or returns the default text in the statusbar of a window
document
Returns the Document object for the window (See Document object)
frames
Returns an array of all the frames (including iframes) in the current window
history
Returns the History object for the window (See History object)
innerHeight
Sets or returns the the inner height of a window's content area
innerWidth
Sets or returns the the inner width of a window's content area
length
Returns the number of frames (including iframes) in a window
location
Returns the Location object for the window (See Location object)
name
Sets or returns the name of a window
navigator
Returns the Navigator object for the window (See Navigator object)
opener
Returns a reference to the window that created the window
outerHeight
Sets or returns the outer height of a window, including toolbars/scrollbars
outerWidth
Sets or returns the outer width of a window, including toolbars/scrollbars
pageXOffset
pageYOffset
Returns the pixels the current document has been scrolled (horizontally)
from the upper left corner of the window
Returns the pixels the current document has been scrolled (vertically) from
the upper left corner of the window
parent
Returns the parent window of the current window
screen
Returns the Screen object for the window (See Screen object)
screenLeft
Returns the x coordinate of the window relative to the screen
screenTop
Returns the y coordinate of the window relative to the screen
screenX
Returns the x coordinate of the window relative to the screen
screenY
Returns the y coordinate of the window relative to the screen
self
Returns the current window
status
Sets the text in the statusbar of a window
top
Returns the topmost browser window
Window Object Methods
Method
Description
alert()
Displays an alert box with a message and an OK button
blur()
Removes focus from the current window
clearInterval()
Clears a timer set with setInterval()
clearTimeout()
Clears a timer set with setTimeout()
close()
Closes the current window
confirm()
Displays a dialog box with a message and an OK and a Cancel button
createPopup()
Creates a pop-up window
focus()
Sets focus to the current window
moveBy()
Moves a window relative to its current position
moveTo()
Moves a window to the specified position
open()
Opens a new browser window
print()
Prints the content of the current window
prompt()
Displays a dialog box that prompts the visitor for input
resizeBy()
Resizes the window by the specified pixels
resizeTo()
Resizes the window to the specified width and height
scroll()
scrollBy()
Scrolls the content by the specified number of pixels
scrollTo()
Scrolls the content to the specified coordinates
setInterval()
setTimeout()
•
Calls a function or evaluates an expression at specified intervals (in
milliseconds)
Calls a function or evaluates an expression after a specified number of
milliseconds
Navigator object
o The navigator object contains information about the browser.
Note: There is no public standard that applies to the navigator object, but all major
Navigator Object Properties
Property
Description
appCodeName
Returns the code name of the browser
appName
Returns the name of the browser
appVersion
Returns the version information of the browser
cookieEnabled
Determines whether cookies are enabled in the browser
platform
Returns for which platform the browser is compiled
userAgent
Returns the user-agent header sent by the browser to the server
Navigator Object Methods
Method
Description
javaEnabled()
Specifies whether or not the browser has Java enabled
taintEnabled()
Specifies whether or not the browser has data tainting enabled
•
•
Screen object
History object
o
o
The history object contains the URLs visited by the user (within a browser window).
The history object is part of the window object and is accessed through the
window.history property.
Note: There is no public standard that applies to the history object, but all major
History Object Properties
Property
Description
length
Returns the number of URLs in the history list
History Object Methods
Method
Description
back()
Loads the previous URL in the history list
forward()
Loads the next URL in the history list
go()
Loads a specific URL from the history list
•
Location object
o The location object contains information about the current URL.
o The location object is part of the window object and is accessed through the
window.location property.
Note: There is no public standard that applies to the location object, but all major
Location Object Properties
Property
Description
hash
Returns the anchor portion of a URL
host
Returns the hostname and port of a URL
hostname
Returns the hostname of a URL
href
Returns the entire URL
pathname
Returns the path name of a URL
port
Returns the port number the server uses for a URL
protocol
Returns the protocol of a URL
search
Returns the query portion of a URL
Location Object Methods
Method
Description
assign()
Loads a new document
reload()
Reloads the current document
replace()
Replaces the current document with a new one
HTML DOM Objects Reference
•
Document object
o Each HTML document loaded into a browser window becomes a Document object.
o The Document object provides access to all HTML elements in a page, from within a script.
Tip: The Document object is also part of the Window object, and can be accessed
through the window.document property.
Document Object Collections
W3C: W3C Standard.
Collection
Description
anchors[]
Returns an array of all the anchors in the document
forms[]
Returns an array of all the forms in the document
images[]
Returns an array of all the images in the document
links[]
Returns an array of all the links in the document
3C
es
es
es
es
Document Object Properties
Property
Description
cookie
Returns all name/value pairs of cookies in the document
documentMode
domain
3C
es
Returns the mode used by the browser to render the
document
o
Returns the domain name of the server that loaded the
document
es
lastModified
Returns the date and time the document was last modified
readyState
Returns the (loading) status of the document
referrer
o
o
Returns the URL of the document that loaded the current
document
es
title
Sets or returns the title of the document
URL
Returns the full URL of the document
es
es
Document Object Methods
Method
close()
getElementById()
Description
Closes
the
3C
output
stream
previously
opened
document.open()
Accesses the first element with the specified id
with
es
es
getElementsByName()
Accesses all elements with a specified name
getElementsByTagName()
Accesses all elements with a specified tagname
Opens
open()
output
stream
to
collect
the
es
output
from
document.write() or document.writeln()
write()
Writes HTML expressions or JavaScript code to a document
es
es
Same as write(), but adds a newline character after each
writeln()
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
an
es
statement
Event object
HTMLElement object
Anchor object
Area object
Base object
Body object
Button object
Form object
Frame/IFrame object
Frameset object
Image object
Input Button object
Input Checkbox object
Input File object
Input Hidden object
Input Password object
Input Radio object
Input Reset object
Input Submit object
Input Text object
Link object
Meta object
Object object
Option object
Select object
Style object
Table object
TableCell object
TableRow object
Textarea object
Referência: http://www.w3schools.com/jsref/default.asp
es

Notas de Aula – v2.0 Janeiro de 2012

Transcrição

Documentos relacionados

4) Digite o trecho de programa abaixo e salve

Gabriel Silva Gandolfo

Procuro programador freelancer PHP

PROGRAMADOR WEB Html e Css . Jquery . Php e

Chat Box em PHP - Comunidade Portuguesa de PHP

alguns comandos html - Professor Jose Alves

curso php prático

JAVAScript COMPLETO

Trabalho 1 1 Introdução 2 Descrição 3 Avaliação

Duvida url ftp - Comunidade Portuguesa de PHP