Notas de Aula – v1.0 Fevereiro de 2011
Transcrição
Notas de Aula – v1.0 Fevereiro de 2011
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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 2 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! FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 3 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 4 Í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 Aula 6 – Javascript (2 de 5) ............................................................................................ 35 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 Aula 7 – Javascript (3 de 5) ............................................................................................ 43 Objetos Browser (DOM) .............................................................................................. 43 Window..................................................................................................................... 43 Document ................................................................................................................. 44 History ...................................................................................................................... 46 Location .................................................................................................................... 46 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 5 Aula 8 – Javascript (4 de 5) ............................................................................................ 49 Date ......................................................................................................................... 49 Exercício ................................................................................................................... 51 Eventos .................................................................................................................... 52 Janelas ..................................................................................................................... 54 Exercício ................................................................................................................... 55 Imagens ................................................................................................................... 56 Exercício Resolvido ..................................................................................................... 57 Aula 9 – Javascript (5 de 5) ............................................................................................ 59 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 6 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). FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 7 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 8 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); FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 9 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 10 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? FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 11 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 12 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> <!-- ... Corpo do Documento ... --> <p>Corpo do Documento</p> </body> </html> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 13 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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 14 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"> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 15 <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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 16 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 <?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 13</title> </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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 17 <td colspan="2">Linha 1 Coluna 1</td> <td>Linha 1 Coluna 3</td> </tr> <tr> <td>Linha 2 Coluna 1</td> <td>Linha 2 Coluna 2</td> <td rowspan="2">Linha 2 Coluna 3</td> </tr> <tr> <td>Linha 3 Coluna 1</td> <td>Linha 3 Coluna 2</td> </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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 18 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 <?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 16</title> </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 /> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 19 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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 20 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 21 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 22 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 23 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 24 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 25 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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 26 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 ("). FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 27 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 28 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(). FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 29 <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”> aString = “Izaias”; document.write (aString.indexOf(“z”)); //retornará 1, pois I = 0 e z = 1, ou seja, começa do zero </script> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 30 Exemplo 2: <script Language=”JavaScript” Type=”text/JavaScript”> aString = “Izaias”; document.write (aString.indexOf(“x”)); //retornará -1 pois x não existe no nome Izaias </script> Exemplo 3: <script Language=”JavaScript” Type=”text/JavaScript”> aString = “Izaias”; 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: <script language=”JavaScript” Type=”Text/JavaScript”> minhaString= “Izaias”; document.write ( minhaString.toLowerCase()); </script> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 31 Exercício 1 <!-- Marquee na Barra de Status --> <head> <script language=”JavaScript” Type=”Text/JavaScript”> function mostrar() { status = tx; tx1 = tx.charat(0); tx2 = tx.substring(1, tx.length); tx = tx2 + tx1; setTimeout (“mostrar()”, 100); } </script> </head> <body> <script language=”JavaScript” Type=”Text/JavaScript”> tx = “mensagem na barra de status”; mostrar(); </script> </body> 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"); FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 32 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>") document.write("Texto escrito com o método toLowerCase -> "+ escrito com o método toUpperCase -> "+ exemplo.toLowerCase() +"<br>") document.write("Texto 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) : "+ exemplo.substring(4,2)) document.write("<br> exemplo.substring(4,6)) </script> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 33 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 34 Aula 6 – Javascript (2 de 5) 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[4] = undefined * frutas[5] = undefined * 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"] FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 35 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 36 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 37 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); FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 38 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 39 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!"); } FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 40 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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 41 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 42 Aula 7 – Javascript (3 de 5) 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 43 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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 44 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 45 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 46 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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 47 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 48 Aula 8 – Javascript (4 de 5) 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 49 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 50 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 51 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 52 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 53 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) FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 54 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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 55 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: FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 56 <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 <!-- é imagem mapeada do lado do servidor --> USEMAP="#mapa" <!-- é imagem mapeada por ‘mapa’ no cliente --> 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 57 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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 58 Aula 9 – Javascript (5 de 5) 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 59 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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 60 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(); FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 61 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 é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 16 – Verificação se foi digitado algum valor para o campo senha. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 22 – Verificação se foi digitado algum valor para o campo email. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 62 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 é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. 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 é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 73 – Se todos os valores foram digitados corretamente a função vai retornar true e o formulário será enviado. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 63 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 64 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). FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 65 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 66 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 67 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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </head> <body> <?php /* O código abaixo soma duas variáveis e exibe o valor encontrado */ $a = 10; $b = 15; $c = $a + $b; echo "$a mais $b é igual a $c"; ?> </body> </html> Figura 4 – Exemplo de código com comentários de mais de uma linha FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 68 Os comentários não aparecem no browser. <html> <head> <title>Teste PHP</title> </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 echo "$a mais $b é igual a $c"; ?> </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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 69 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 70 Aula 11 – PHP (2 de 3) 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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 71 • • • • • • • 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> <title>Teste PHP</title> </head> <body> <?php $frutas = array( 1 => "Laranja", 2 => "Maçã", 3 => "Uva"); echo "<li> $frutas[1]<br>"; echo "<li> $frutas[2]<br>"; echo "<li> $frutas[3]<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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 72 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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </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); FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 73 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. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 74 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?) FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 75 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 76 Aula 12 – PHP (3 de 3) 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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </head> <body> <?php $x = 5; if ($x > 10) { echo("O valor da variável é maior que 10."); } ?> </body> </html> Figura 23 – Código com declaração condicional if falso <html> <head> <title>Teste PHP</title> </head> <body> <?php $x = 5; if ($x > 10) { echo("O valor da variável é maior que 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> <title>Teste PHP</title> </head> <body> <?php $cor = "branco"; if ($cor == "vermelho") { echo("A variável contém o valor 'vermelho'."); } FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 77 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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </head> <body> <?php $i = 1; FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 78 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> <title>Teste PHP</title> </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> <title>Teste PHP</title> </head> <body> <?php function escreveTexto() { echo("Já sei criar funções!"); } escreveTexto(); ?> </body> </html> Figura 31 – Segundo exemplo de declaração de função FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 79 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> <title>Teste PHP</title> </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><!-- EXERCÍCIO 01 - PHP --> <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> FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 80 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> <title>Teste PHP</title> </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> <title>Página PHP</title> </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; ?> <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 42 – Código que cria um cookie com o nome do usuário que dura uma hora FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 81 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> <title>Página PHP</title> </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> <a href="teste.php?valor=2">link 2</a><br> <a href="teste.php?valor=3">link 3</a><br> <a href="teste.php?valor=4">link 4</a><br> <a href="teste.php?valor=5">link 5</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> <title>Página PHP</title> </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). FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 82 <html> <head> <title>Página PHP</title> </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>"; } ?> <form method="post" action="teste.php"> Primeiro Nome: <input type="text" name="pnome"> <br> Sobrenome: <input type="text" name="snome"> <br><br> <input type="submit" value="Enviar"> </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> <title>Página PHP</title> </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> <input type="submit" value="Enviar"> </form> </body> </html> Figura 46 – Código com formulário enviando dados através do método GET FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 83 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 84 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 85 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 86 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 87 Esta página foi deixada propositadamente em branco. FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 88 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 Allows you to add properties and methods to an object FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 89 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) FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 90 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 Allows you to add properties and methods to an object 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 91 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 92 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 93 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 browsers support it. 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 94 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 browsers support it. 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 browsers support it. 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 95 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 96 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 FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 97 es • • • • Table object TableCell object TableRow object Textarea object Referência: http://www.w3schools.com/jsref/default.asp FAETEC 2011.1 - Notas de Aula de PWEB – Prof. M. França – Página: 98