Notas de Aula – v1.0 Fevereiro de 2011

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º/4º
1 aula/semana
Notas de Aula – v1.0
Fevereiro de 2011
Professor M. França
[email protected]
http://www.franca.pro.br
FAETEC 2011.1 - 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,
professor de Informática na FAETEC 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 ....................................................................................... 9
Exercícios (Pesquise): ................................................................................................. 11
Aula 2 – Revisão de HTML (1 de 2) .................................................................................. 13
Tags de início e fim. ................................................................................................... 13
cabeçalho .................................................................................................................. 13
corpo ........................................................................................................................ 13
Exemplo/Exercício HTML (Bloco de Notas + Navegador) .................................................. 13
Exemplo/Exercício XHTML ........................................................................................... 13
Imagens ................................................................................................................... 14
Links ........................................................................................................................ 15
Aula 3 – Revisão de HTML (2 de 2) .................................................................................. 17
Tabelas ..................................................................................................................... 17
Formulários ............................................................................................................... 19
Aula 4 – Programação Orientada a Objetos ....................................................................... 21
Introdução à Programação Orientada a Objetos ............................................................. 21
Linguagens Orientadas a Objetos: ................................................................................ 22
Exercícios .................................................................................................................. 22
Aula 5 – Javascript (1 de 5) ............................................................................................ 23
Introdução ao JavaScript: ........................................................................................... 23
Variáveis ................................................................................................................... 24
Declaração de variáveis .............................................................................................. 25
Constantes ................................................................................................................ 27
Tipos de Dados .......................................................................................................... 27
Strings - Manipulação de Strings. ................................................................................. 28
Matrizes .................................................................................................................... 35
Funções de Conversão ................................................................................................ 36
Funções .................................................................................................................... 37
Estruturas de Controle e Laços (Operações Condicionais e Loops) .................................... 38
Caixas de Diálogo (Alert, Prompt e Confirm) .................................................................. 40
Objetos Browser (DOM) .............................................................................................. 43
Window..................................................................................................................... 43
Document ................................................................................................................. 44
History ...................................................................................................................... 46
Location .................................................................................................................... 46
Date ......................................................................................................................... 49
Exercício ................................................................................................................... 51
Eventos .................................................................................................................... 52
Janelas ..................................................................................................................... 54
Exercício ................................................................................................................... 55
Imagens ................................................................................................................... 56
Exercício Resolvido ..................................................................................................... 57
Formulários e Validação .............................................................................................. 59
Aula 10 – PHP (1 de 3) ................................................................................................... 65
1 Introdução.............................................................................................................. 65
2 Exemplo de Script ................................................................................................... 65
3 Configuração (php.ini) ............................................................................................. 67
4 Sintaxe Básica ........................................................................................................ 68
Aula 11 – PHP (2 de 3) ................................................................................................... 71
5 Variáveis ................................................................................................................ 71
6 Tipos de dados ........................................................................................................ 71
7 Constantes ............................................................................................................. 72
8 Expressões ............................................................................................................. 73
9 Operadores ............................................................................................................. 73
Aula 12 – PHP (3 de 3) ................................................................................................... 77
10 Estruturas de Controle ........................................................................................... 77
11 Funções ................................................................................................................ 79
15 Inclusão de Arquivos .............................................................................................. 80
Aula 13 – PHP (aula extra) ............................................................................................. 81
16 Cookies ................................................................................................................ 81
17 Parâmetros (Query String) ...................................................................................... 82
18 Formulários........................................................................................................... 82
Bibliografia/Créditos ...................................................................................................... 85
Apêndice A – Questionário de Avaliação do Curso .............................................................. 87
Apêndice B – Referências ............................................................................................... 89
JavaScript Objects Reference ....................................................................................... 89
Browser Objects Reference .......................................................................................... 93
HTML DOM Objects Reference ...................................................................................... 96
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).
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)
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 assenta sobre 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);
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)
Protocolo http:
Request (Requisição): Normalmente de 2 tipos: GET (links); 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.
XHTML
XML + HTML Um HTML mais rígido, mais sintaticamente correto;
DHTML
Soma 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 a 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 (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 é BitTorrent?
21. Orkut e Twitter são exemplos de que?
22. O que é DHTML?
Aula 2 – Revisão de HTML (1 de 2)
Tags de início e fim.
<html> </html>
cabeçalho
meta (tag informativa)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
título
<title> </title>
corpo
<body> </body>
Exemplo/Exercício HTML (Bloco de Notas + Navegador)
<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>
Exemplo/Exercício XHTML
<!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>
Imagens
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, “../” volta 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
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.
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.xhtml”> 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>
Aula 3 – Revisão de HTML (2 de 2)
Tabelas
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/Exercício
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
</head>
<body>
<h1> Exemplo de uso de Tabelas </h1>
<br />
<table border="1" frame="box" rules="groups" bgcolor="#00C0C0" >
<caption> Título da Tabela</caption>
<thead>
Cabeçalho da Tabela
</thead>
<tbody>
<tr>
<td colspan="2">Linha 1 Coluna 1</td>
<td>Linha 1 Coluna 3</td>
</tr>
<tr>
<td rowspan="2">Linha 2 Coluna 3</td>
</tr>
<tr>
</tr>
</tbody>
<tfoot>
Rodapé da tabela
</tfoot>
</table>
</body>
</html>
Tableless
Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de
conteúdo na página sugerido 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 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 da aplicação para o arquivo de estilo (CSS).
Diminuição de Banda. Os navegadores modernos cacheam arquivos css e javascripts, 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
Formulários
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 da página com o usuário 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 />”.
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
Introdução à Programação Orientada a Objetos
Exemplo: Ler 2 números e exibir sua soma (Programação Estruturada vs. OO).
(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
(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
Conceitos:
Classes e Objetos
Atributos ou Propriedades;
Métodos ou Operações;
Diagrama de Classes da UML
Escopo ou visibilidade: +, -, # (protected), ~ (friend/pacote)
Exemplo:
Calculadora
- N1: Real
- N2: Real
+ InformarN1 (N: Real)
+ InformarN2 (N: Real)
+ RetornarSoma(): Real
Princípios OO:
Abstração (só o que for relevante);
Encapsulamento (Information Hiding); segurança, simplicidade, coesão.
Herança (atributos + métodos);
Polimorfismo (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
Exercícios
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.
Aula 5 – Javascript (1 de 5)
Introdução ao JavaScript:
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, criador de Java, para desenvolver em
conjunto essa nova linguagem.
A aliança fez com que Javascript se desenhara como um irmão pequeno de 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.
Queremos 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
<html>
<head>
<title></title>
<script></script>
</head>
<body>
<script></script>
</body>
</html>
Variáveis
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
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 é permitido
utilizar:
12meses
seu nome
return
pe%pe
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
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.
<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 tenha 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
Constantes do programador; Boa prática, manutenção.
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;
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
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
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: \\
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. veja meu 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
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
);
//retornará
6,
pois
o
nome
Izaias contém 6 caracteres
</script>
Exercício: 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.
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: Muda a string para maiúsculo
Sintaxe: string.toUpperCase();
Exemplo:
<script language=”JavaScript” Type=”Text/JavaScript”>
minhaString= “Izaias”;
document.write ( minhaString.toUpperCase());
</script>
toLowerCase
Função: Muda a string para minúsculo.
Sintaxe: string.toLoewrCase();
Exemplo:
minhaString= “Izaias”;
document.write ( minhaString.toLowerCase());
</script>
Exercício 1

<head>
function mostrar() {
status = tx;
tx1 = tx.charat(0);
tx2 = tx.substring(1, tx.length);
tx = tx2 + tx1;
setTimeout (“mostrar()”, 100);
}
</script>
</head>
<body>
tx = “mensagem na barra de status”;
mostrar();
</script>
</body>
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
escrito
com
o
método
strike
->
"+
exemplo.strike()
+"<br>")
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
com
o
método
toLowerCase
->
"+
escrito
com
o
método
toUpperCase
->
"+
exemplo.toLowerCase() +"<br>")
exemplo.toUpperCase() +"<br>")
document.write("<br> Conteúdo da variável exemplo: "+ exemplo)
document.write("<br>Conteúdo
de
exemplo.substring(0,4):
"+
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)
:
"+
Conteúdo
de
exemplo.substring(4,6)
:
"+
document.write("<br>
</script>
Matrizes
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 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"
length é um atributo especial 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.
Métodos
concat
Retorna uma nova matriz, concatenando a primeira matriz (original) com os valores ou matrizes
dados como argumentos. Exemplo:
var m = ["sergio", "eduardo"];
var n = m.concat("rodrigues");
n terá valor: ["sergio", "eduardo", "rodrigues"]
join
Junta todos os elementos da matriz em uma string, colocando um separador entre os itens.
Exemplo:
var m = ["sergio", "eduardo", "rodrigues"];
var n = m.join("+ ");
n terá valor: "sergio+ eduardo+ rodrigues"
pop
remove o último elemento da matriz, retornando o elemento removido.
shift
remove o primeiro elemento da matriz, retornando o elemento removido.
Funções de Conversã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.
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.
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
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
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".
Number(objeto)
Converte a string num valor ponto flutuante
Estruturas de Controle e Laços (Operações Condicionais e Loops)
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",
"Sábado");
var dia = 0;
do {
document.write(days[dias[dia] + "é o " + eval(dia+1) + "<sup>o</sup> da
semana.<br>");
} while(dia < 7);
For
O exemplo seguinte determina a posição do dia na semana.
dias
=
new
Array("Domingo",
"Segunda",
"Terça",
"Quarta",
"Quinta",
"Sexta",
"Sábado");
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 />");
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.
For In
Existem alguns outros, que são mais variantes, como o "for in statement":
for(propriedade in document){
document.write(propriedade+"<br>");
}
Este exemplo acima lista todas as propriedades do objeto document.
With
Tem também o "with", que altera as propriedades do objeto entre parênteses.
Exemplo:
with(document)
for(propriedade in this){
write(propriedade+"<br>");
}
Este exemplo lista as propriedades do documento, sem referenciar o objeto document para
executar a ação.
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>
Objetos Browser (DOM)
Retirado de: http://www.juliobattisti.com.br/tutoriais/keniareis/jsbasico011.asp
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 representa parte de uma pagina da 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
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. Mas isso ainda é assunto de outra
parte do tutorial.
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.
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.
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.
Date
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.
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
//nestas linhas criamos as datas
minhaDataaAtual = new Date()
minhaDataPassada = new Date(1998,4,23)
//nestas linhas imprimimos as datas.
document.write (minhaDataAtual)
document.write ("<br>")
document.write (minhaDtaPassada)
//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)
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.
Eventos
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 se coloca na etiqueta HTML do elemento da página que queremos que
responda às ações do usuário.
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 etiqueta <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 etiqueta 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.
Hierarquia pelo objeto window
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
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.
Janelas
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
<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
onClick="resizeBy(10, 10)">
<br>
<br>
comprimento"
<input
type="button"
value="Fixar
o
tamanho
da
janela
em
400
x
200"
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>
Imagens
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>, 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;
Exercício Resolvido
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
Obs.: Retirado de:
http://imasters.uol.com.br/artigo/2114/javascript/validacao_de_formulario/
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 (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
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>
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
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: O nome é opcional, sinta-se livre para omiti-lo!
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 o curso (conjunto), de 0 a 10, onde 0 = totalmente insatisfeito e 10 = totalmente
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
Allows you to add properties and methods to an object
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)
getUTCMillisecond
s()
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)
setUTCMillisecond
Sets the milliseconds, according to universal time (from 0-999)
s()
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
toLocaleDateStrin
Returns the date portion of a Date object as a string, using locale
g()
conventions
toLocaleTimeStrin
g()
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
UTC()
Returns the number of milliseconds in a date string since midnight of
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
fromCharCod
e()
indexOf()
Converts Unicode values to characters
Returns the position of the first found occurrence of a specified value in a
string
lastIndexOf()
match()
replace()
search()
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 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()
substring()
toLowerCase
()
toUpperCase
()
valueOf()
Extracts the characters from a string, beginning at a specified start
position, and through the specified number of character
Extracts the characters from a string, between two specified indices
Converts a string to lowercase letters
Converts a string to uppercase letters
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
closed
Description
Returns a Boolean value indicating whether a window has been closed or
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 The history object contains the URLs visited by the user (within a browser window).
o 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
es
Returns the mode used by the browser to render the
document
o
Returns the domain name of the server that loaded the
document
lastModified
Returns the date and time the document was last modified
readyState
Returns the (loading) status of the document
referrer
3C
es
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
Description
Closes
close()
output
stream
previously
opened
with
document.open()
getElementById()
es
Accesses the first element with the specified id
getElementsByName(
)
getElementsByTagNa
me()
es
Accesses all elements with a specified name
es
Accesses all elements with a specified tagname
Opens
open()
an
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()
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
the
3C
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
es
•
•
•
•
Table object
TableCell object
TableRow object
Textarea object
Referência: http://www.w3schools.com/jsref/default.asp

Notas de Aula – v1.0 Fevereiro de 2011

Transcrição

Documentos relacionados

4) Digite o trecho de programa abaixo e salve

Gabriel Silva Gandolfo

Procuro programador freelancer PHP

Chat Box em PHP - Comunidade Portuguesa de PHP

PROGRAMADOR WEB Html e Css . Jquery . Php e

Comunicação entre janelas em domínios diferentes utilizando

Duvida url ftp - Comunidade Portuguesa de PHP

alguns comandos html - Professor Jose Alves

Duvida ajuda pff Re:Duvida ajuda pff

Softwares e versões