Manual curso php

862 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
862
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
32
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Manual curso php

  1. 1. Companhia de Processamento de Dados do Salvador PRODASAL ISO 9001:2000Curso: Linguagem PHPDiretoria Administrativa – Coordenadoria de Gestão de PessoasInstrutor: Edson Queiroz SantosPeríodo: 11 a 22/09/2006 Introdução à Linguagem HTMLHTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto).Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementossão as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioriadas etiquetas tem sua correspondente de fechamento: <etiqueta>...</etiqueta>Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, eassim marcamos onde começa e termina o texto com a formatação especificada por ela.Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inseremalguma coisa no documento:<etiqueta>Todos os elementos podem ter atributos:<etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>HTML é um recurso muito simples e acessível para a produção de documentos. Nestes“capítulos”, será possível aprender grande parte de seus elementos Edição de documentos HTMLOs documentos em HTML são como arquivos ASCII comuns, que podem ser editados em vi,emacs (que já tem versão para editar arquivos HTML), textedit, ou qualquer editor simples.Para facilitar a produção de documentos, existem editores HTML específicos:APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 1 -
  2. 2. Publicação de documentosPara ter sua homepage é necessário ter uma área na rede; o primeiro passo é criar um diretórioWWW (em letras maiúsculas) em sua área de rede. A partir do momento da criação dessediretório WWW, o URL:A seguir, certifique-se de que sua área e o diretório WWW dentro dela estejam com permissãode leitura para "todo mundo".Feito isso, basta contactar os Webmasters para que sua página seja referenciada através da listade "pessoas com página", ou da página do seu grupo de pesquisa.Obs.: Estas diretivas se aplicam em particular à rede do ICMC; outros sistemas podem ter outrasconfigurações, bem diferentes. Documento básico e seus componentesA estrutura de um documento HTML apresenta os seguintes componentes:<HTML><HEAD><TITLE>Titulo do Documento</TITLE></HEAD><BODY>texto,imagem,links,...</BODY></HTML>As etiquetas HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>,<html>, <HtMl>, ...Os documentos se dividem em duas seções principais, que veremos a seguir.A Seção <HEAD><HEAD> contém informações sobre o documento; o elemento <TITLE>, por exemplo, defineum título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definidoassim:<HEAD><TITLE>Documento basico em HTML</TITLE></HEAD>Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede,dando uma identidade ao documento.É sugerido que os títulos dos documentos sejam sugestivos, evitando-se, portanto, títulos como"Introducao". De preferência, os títulos não devem conter acentos ou outros caracteres especiais(eles não serão mostrados corretamente pelos sistemas de janela em algumas plataformas).Além do título, HEAD contém outras informações que podem ser recuperadas por robôs depesquisa na Internet; esses campos de informação facilitam a classificação do documento emcatálogos de busca, entre outras aplicações.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 2 -
  3. 3. A Seção <BODY>Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendoapresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links paraoutros documentos, e imagens.Veja um documento básico em HTML.<BODY> tem alguns atributos de apresentação que são aplicados ao documento Atributos gerais de um documentoComo visto anteriormente (documento básico e seus componentes), <HEAD> contéminformações sobre o documento. Além de <TITLE>, existem diversos outros campos deinformação, sendo os campos <META> os mais usados.Campos <META>Os campos <META> têm dois atributos principais:  NAME, indicando um nome para a informação.  HTTP-EQUIV, que faz uma correspondência com campos de cabeçalho do protocolo HTTP; a informação desse campo pode ser lida pelos browsers, e provocar algumas ações.<HEAD><TITLE>Titulo do Documento</TITLE><META NAME="nome" CONTENT="valor"><META HTTP-EQUIV="nome" CONTENT="valor"></HEAD>Este documento, por exemplo, tem as seguintes informações:<HEAD><TITLE>Atributos de documentos em HTML</TITLE><meta name=“Author” content=“Maria Alice Soares de Castro(masc@icmc.sc.usp.br)”><META NAME=“Description” CONTENT=“Tutorial basico-avancado para suporte `aeditoracao de documentos Web.”><META NAME=“KeyWords” CONTENT=“HTML, WWW, Webpublishing”><META NAME=“Editor” CONTENT=“W3e - 5.22c”></HEAD>Alguns desses atributos são inseridos automaticamente pelos editores.Um exemplo de uso do atributo HTTP-EQUIV é promover a mudança automática de páginas.<HEAD><TITLE> ... </TITLE>APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 3 -
  4. 4. <META HTTP-EQUIV="Refresh" CONTENT="segundos; URL= pagina.html"></HEAD> onde:pagina.html é a página a ser carregada automaticamentesegundos é o número de segundos passados até que a página indicada seja carregada.Como foi comentado no exemplo, o efeito é interessante, mas para que serve? Se não pensamosem uma finalidade útil para esse efeito, caímos na tentação de usá-lo “à toa”.A aplicação mais utilizada é a atualização automática de um documento que, por exemplo, tenhauma foto produzida por uma câmara de vídeo: pode-se forçar, com o refresh, a atualização dessapágina, mostrando para o leitor sempre uma imagem mais atual de algum evento sendofocalizado pela câmara. Outra utilização é em “chats”, ou em páginas que desviem a navegaçãopor documentos desenvolvidos para browsers avançados.Atributos de <BODY>Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo daspáginas, bem como uma imagem de fundo (marca d’água):<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb"VLINK="#rrggbb" BACKGROUND="URL">onde:BGCOLOR cor de fundo (padrão: cinza ou branco)TEXT cor dos textos da página (padrão: preto)LINK a cor dos links (padrão: azul)ALINK cor dos links, quando acionados (padrão: vermelho)VLINK cor dos links, depois de visitados (padrão: azul escuro ou roxo)Seus valores são dados em valores hexadecimais, equivalentes a cores no padrão RGB (Red,Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores jáoferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nospreocuparmos com números esdrúxulos tais como #FF80A0.Browsers que seguem a definição de HTML 3.2 também aceitam 16 nomes de cores, tirados dapaleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsersmais antigos não apresentarão as cores indicadas.Este documento tem a seguinte definição de atributos gerais:APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 4 -
  5. 5. <BODY BGCOLOR="#FFFFFF" LINK="#008000" VLINK="#000000" ALINK="#FFFF00">BACKGROUND indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água. Veja o exemplo de uma página cuja imagem de fundo é . CabeçalhosHá seis níveis de cabeçalhos em HTML, de <H1> a <H6>:<H1>Este é um cabeçalho de nível 1</H1><H2>Este é um cabeçalho de nível 2</H2><H3>Este é um cabeçalho de nível 3</H3><H4>Este é um cabeçalho de nível 4</H4><H5>Este é um cabeçalho de nível 5</H5><H6>Este é um cabeçalho de nível 6</H6>Esses cabeçalhos são mostrados da seguinte forma:Este é um cabeçalho de nível 1Este é um cabeçalho de nível 2Este é um cabeçalho de nível 3Este é um cabeçalho de nível 4Este é um cabeçalho de nível 5Este é um cabeçalho de nível 6Os cabeçalhos não podem ser aninhados, isto é:<H2>Este é <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível2</H2>Embora em alguns browsers esse aninhamento possa dar um resultado (por exemplo,Este éum cabeçalho de nível 1dentro de um cabeçalho de nível 2), o aninhamento de cabeçalhos não é previsto pela definição de HTML.É bom notar que o título do documento não precisa ter necessariamente o mesmo texto docabeçalho principal.Os cabeçalhos têm atributos de alinhamento:<H2 ALIGN=CENTER>Cabeçalho centralizado</H2> Cabeçalho centralizado<H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3>APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 5 -
  6. 6. Cabeçalho alinhado à direita<H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default)</H4>Cabeçalho alinhado à esquerda (default) SeparadoresComo vimos no primeiro exemplo, as quebras de linha do texto fonte não são significativas naapresentação de documentos em HTML. Para organizar os textos, precisamos de separadores,apresentados aqui.Quebra de linhaQuando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quandoqueremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhasautomaticamente para apresentar os textos.Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esseelemento tem um atributo especial, que será apresentado no item sobre inserção de imagens.ParágrafosPara separar blocos de texto, usamos o elemento <P>:Parágrafo 1;<P>Parágrafo 2.que produz:Parágrafo1;Parágrafo2.Combinando parágrafos e quebras de linha, temos:Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2.O resultado da marcação acima é:Parágrafo 1;linha 1 do parágrafo 1,linha 2 do parágrafo 1.Parágrafo 2;linha 1 do parágrafo 2,linha 2 do parágrafo 2.<P> tem atributo de alinhamento, como os cabeçalhos:<P ALIGN=CENTER>Assim como os trens, as boas idéias às vezes chegam comatraso. <BR>(Giovani Guareschi)</P>Assim como os trens, as boas idéias às vezes chegam com atraso.(Giovani Guareschi)<P ALIGN=RIGHT>Como diz o provérbio chinês: “É melhor passar por ignoranteuma vez do que permanecer ignorante para sempre”.</P>Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecerignorante para sempre”.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 6 -
  7. 7. <P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não voucolocar nenhuma frase especial.</P>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.Linha Horizontal<HR> insere uma linha horizontal:Essa linha tem diversos atributos, oferecendo resultados diversos.<HR SIZE=7> insere uma linha de largura 7 (pixels):<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço disponível:<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (doespaço disponível), alinhada à direita, sem efeito tridimensional:<HR SIZE=30 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 30, comprimento 2,alinhada à esquerda: Listas em HTMLHá vários tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadaspelos browsers:Listas de DefiniçãoEstas listas são chamadas também “Listas de Glossário”, uma vez que têm o formato:<DL><DT>termo a ser definido<DD>definição<DT>termo a ser definido<DD>definição</DL>Que produz:termo a ser definido definiçãotermo a ser definido definiçãoEste tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por permitir atabulação do texto. Um exemplo são os índices de navegação presentes nas pági nas destetutorial; outro exemplo é a lista composta abaixo:<DL><DT>Imperadores do Brasil:<DD>D. Pedro I <DL>APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 7 -
  8. 8. <DD>Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon </DL> <DD>D. Pedro II <DL> <DD>Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga </DL> </DL> Imperadores do Brasil: D. Pedro I Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon D. Pedro II Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael GonzagaListas não-numeradasSão equivalentes às listas com marcadores do MS Word:<UL><LI>item de uma lista<LI>item de uma lista, que pode ser tão grande quanto se queira, sem que sejanecessário se preocupar com a formatação das margens de texto<LI>item</UL>  item de uma lista  item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto  item A diferença está na mudança dos marcadores, assinalando os diversos níveis de listas compostas: <UL> <LI>Documentos básicos <LI>Documentos avançados <UL> <LI>formulários <UL> <LI>CGI </UL> <LI>contadores APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 8 -
  9. 9. <LI>relógios </UL><LI>Detalhes sobre imagens</UL>  Documentos básicos  Documentos avançados  formulários  CGI  contadores  relógios  Detalhes sobre imagensSegundo o HTML 3.2, essa lista pode ter marcadores diferentes, indicados através do atributoTYPE, que assume os valores CIRCLE, SQUARE e DISC (default):<UL TYPE=CIRCLE><LI>um item<LI>mais um item</UL>  item um  mais um itemCada item também pode ter seu atributo específico:<UL><LI TYPE=DISC>um item<LI TYPE=CIRCLE>mais um item<LI TYPE=SQUARE>último item</UL>  um item mais um item último itemObservação 1: Boa parte dos editores HTML (WYSIWYG ou não), insere marcaçõesque não existem em listas. Exemplos típicos são </DD>, </DT> ; e </LI>. Porém, comoessas etiquetas não são reconhecidas pelos browsers, não causam efeito colateralalgum nos documentos.Observação 2: Nestes exemplos, o texto fonte aparece tabulado apenas para efeito demelhor visualização, uma vez que já foi visto que os espaços em branco e tabulaçõesoriginais não têm efeito no documento final.Observação 3: Se você não está vendo diferença alguma entre as listas comuns e asque têm atributos de HTML 3.2, isso se deve ao fato de seu browse r não estarreconhecendo esses atributos como válidos. Trata-se de um browser de versão antiga.Isso deve ser pensado quando usamos atributos mais recentes: nem todo usuáriopoderá ver o resultado das novas marca&cced il;ões.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 9 -
  10. 10. Listas Numeradas<OL><LI>item de uma lista numerada<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, semque seja necessário se preocupar com a formatação das margens de texto<LI>item de lista numerada</OL> 1. item de uma lista numerada 2. item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto 3. item de lista numeradaEstas listas não apresentam numeração em formato 1.1, 1.2 etc., quando compostas: 1. Documentos básicos 2. Documentos avançados 1. formulários 1. CGI 2. contadores 3. relógios 2. Detalhes sobre imagens Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens: <OL TYPE=I> <LI>Documentos básicos <LI>Documentos avançados <OL TYPE=a> <LI >formulários <OL TYPE=i> <LI>CGI </OL> <LI>contadores <LI>relógios </OL> <LI>Detalhes sobre imagens </OL> I. Documentos básicos II. Documentos avançados a. formulários i. CGI b. contadores c. relógios III. Detalhes sobre imagens Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista:APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 10 -
  11. 11. <OL START=4 TYPE=A> <LI>um item <LI>outro item <LI>mais um item </OL> D. um item E. outro item F. mais um item Formatação de textos e caracteresHá dois tipos de formatação em HTML: lógico e físico. Os efeitos de apresentação na tela são osmesmos: o motivo da distinção entre eles se deve à idéia básica de independência entreespecificação e apresentação.Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipode cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado àesquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para obrowser - o dispositivo de apresentação do documento - que pode ser configurado de acordo como leitor (usuário final).Desse modo, além de facilitar enormemente o trabalho de quem escreve os documentos, alinguagem garante a uniformidade de apresentação de cabeçalhos, parágrafos, listas, etc.A formatação lógica segue o significado lógico do texto marcado: um endereço de e-mail, umacitação etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados maisricos.A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifadoetc. Sua apresentação final não sofre grandes variações. Blocos de textoHTML oferece as seguintes formatações de blocos de texto:<PRE>Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha etabulações:<pre>uma linha aqui,outra ali, etc.</pre>Resulta em:uma linha aqui,outra ali, etc.Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa marcaçãodentro de outra marcação que já apresente tabulações e espaços específicos.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 11 -
  12. 12. Até o momento, somente como uso de <PRE> é possível gerar parágrafos com texto justificado àesquerda e à direita.<BLOCKQUOTE>É usado para citações longas:<blockquote>A massa do Sol arqueia o espaço-tempo de tal maneira que, aindaque a Terra siga uma trajetória reta no espaço-tempo quadridimensional,parece-nos que se desloca em órbita circular no espaçotridimensional.</blockquote> (Stephen W. Hawking, “Uma Breve História doTempo”) A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.(Stephen W. Hawking, “Uma Breve História do Tempo”)<ADDRESS>Usado para formatar endereços E-mail e referências a autores de documentos:Envie críticas e sugestões para <address>masc@icmc.sc.usp.br </address> Formatação de frasesComo visto anteriormente (em Formatação de Textos e Caracteres), HTML permite dois tipos deformatação: lógico e físico; aqui veremos as formatações mais utilizadas:Estilos Lógicos<CITE>Para títulos de livros, filmes, e citações curtas. Exemplo: Assisti Guerra nas Estrelas umas oito vezes!<CODE>Para indicar trechos de código de programas. Exemplo: for (x=0); cl &&(!feof(stdin)); x++));<DFN>Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo: CERN: Centre d’Éstudes et Recherches Nucleaires<EM>Ênfase, também normalmente apresentado em itálico. Exemplo: É preciso pesquisar muito para encontrar o termo exato.<KBD>Indica uma entrada via teclado. Exemplo:APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 12 -
  13. 13. Para ler mensagens recebidas, digite pine -i<SAMP>Indica uma seqüência de caracteres, por exemplo uma mensagem de erro ou um resultado.Exemplo: O resultado do primeiro applet é: Hello, World!<STRONG>Forte ênfase, mostrado normalmente em negrito. Exemplo: Antes de enviar um e-mail, confira o campo “Subject:”!<VAR>Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico.Exemplo: No campo Login, escreva guest.Estilos Físicos<B>Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecersublinhado)<I>Itálico (em alguns casos, caracteres apenas inclinados)<TT>Tipo teletype - fonte de espaçamento fixo.<U>Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links.<STRIKE> ou <S>Frase riscada.<BIG>Fonte um pouco maior.<SMALL>Fonte um pouco menor.<SUB>Frase em estilo índice, como em H2O.<SUP>Frase em estilo expoente, como em Km2.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 13 -
  14. 14. Caracteres EspeciaisHTML permite que caracteres especiais sejam representados por sequências de escape, indicadaspor três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caracterdesejado, e um ; final.Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentrode documentos seguindo a correspondência: Entidade Caracter &lt; < &gt; > &amp; & Outras seqüências de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com os caracteres mais utilizados em Português: Entidade Caracter Entidade Caracter &aacute; á &Aacute; Á &acirc; â &Acirc; Â &agrave; à &Agrave; À &atilde; ã &Atilde; Ã &ccedil; ç &Ccedil; Ç &eacute; é &Eacute; É &ecirc; ê &Ecirc; Ê &iacute; í &Iacute; Í &oacute; ó &Oacute; Ó &ocirc; ô &Ocirc; Ô &otilde; õ &Otilde; Õ &uacute; ú &Uacute; Ú &uuml; ü &Uuml; Ü Como vemos, as sequências de escape são sensíveis à caixa.Ao usar caracteres acentuados, pode-se inserir uma indicação do esquema de codificação ISOLatin1, escrevendo:<HTML><HEAD><TITLE>...</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"></HEAD>...APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 14 -
  15. 15. Cores e Fontes CoresAs cores são introduzidas através do elemento <FONT>, usando o sistema RGB para cores (damesma forma que vimos para cores de documentos):<FONT COLOR="#rrggbb">Texto</FONT>Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita atravésdos atributos de <BODY>.TamanhoA formatação<FONT SIZE=tamanho_da_letra>Texto</FONT>permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. Otamanho básico dos textos é 3. Podemos indicar tamanhos relativos a esse, por exemplo:<FONT SIZE=+2>Letra maior</FONT>Letra normal<FONT SIZE=-2>Letra menor</FONT>Letra maior Letra normal Letra menorFontesUma evolução que permite a escolha da fonte para os textos, é o atributo FACE:<FONT FACE=fonte_da_letra>Texto</FONT>Por exemplo:<FONT FACE=Times COLOR="#0000AA">Fonte Times azul</FONT>Fonte Times azul<FONT FACE=Arial COLOR="#00AA00">Fonte Arial verde</FONT>Fonte Arial verde<FONT FACE=Courier COLOR="#AA0000">Fonte Courier vermelha</FONT>Fonte Courier vermelha MarqueeÉ possível obter o efeito de animação de texto, através da formatação <MARQUEE>.<MARQUEE BEHAVIOR=efeito>Texto</MARQUEE>Atributos de largura e direção do efeito permitem diversas apresentações diferentes. Por exemplo<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE><MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE><MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 15 -
  16. 16. Ligações (uso de links)Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outrodocumento. Nestas páginas, temos visto exemplos dessas ligações: o browser destaca essasregiões e imagens do texto, indicando que são ligações de hipertexto - também chamadashypertext links ou hiperlinks ou simplesmente links.Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:<A HREF = "arq_dest">âncora</A>onde:arq_dest é o URL do documento de destino;âncora é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. Caminhos para o documento de destinoCaminho relativoO caminho relativo pode ser usado sempre que queremos fazer referência a um documento queesteja no mesmo servidor do documento atual.Através do campo Location do browser, vemos que este documento está localizado em umdiretório /manuals/HTML/ do servidor www.icmc.sc.usp.br. Para escrevermos um link destedocumento para o documento doc2.html no diretório /manuals/HTML/exemplos, tudo queprecisamos fazer é escrever:Veja o <A HREF="exemplos/doc2.html">exemplo de caminho relativo</A>.que é apresentado como:Veja o exemplo de caminho relativo.Da mesma forma, se quisermos um link deste documento para um outro que esteja em diretóriodiferente neste mesmo servidor, escrevemos, por exemplo:<A HREF="/Portugues/ICMC/">Instituto de Ciências Matemáticas e deComputação</A>que produz o link: Instituto de Ciências Matemáticas e de ComputaçãoPara usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório doservidor no qual estamos trabalhando.O esquema do diretório de nosso servidor está disponível no Relatório no. 35 e no relatório doservidor Web (em final de preparação).APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 16 -
  17. 17. Caminho absolutoUtilizamos caminho absoluto quando desejamos referenciar um documento que esteja em outroservidor, por exemplo:<A HREF="http://www.intermidia.icmc.sc.usp.br/">Grupo Intermídia</A>que oferece um link para um documento no servidor WWW do Grupo de Pesquisa Intermídia:Grupo IntermídiaCom a mesma sintaxe, é possível escrever links para qualquer servidor de informações daInternet.Ligações para trechos de documentosAlém do atributo href, que indica um documento destino de uma ligação hipertexto, o elementoA possui um atributo NAME que permite indicar um trecho de documento como ponto de chegadade uma ligação hipertexto.Neste documento temos diversos parágrafos marcados como chegada de um link, por exemplo:<h3><A NAME="relativo">Caminho relativo</A></h3>que faz com que a âncora Caminho relativo seja o destino de um link. Se escrevermos:Leia sobre <A HREF="#relativo">caminhos relativos</A>.teremos uma ligação hipertexto para um trecho deste mesmo documento:Leia sobre caminhos relativos.Da mesma forma, construímos links para trechos determinados de outros documentos, desde quesaibamos quais trechos do documento destino estão marcados para ponto de chegada de um link.Por exemplo:São Carlos é um <A HREF= "/Portugues/Sao_Carlos/histprog.html#polo">pólo dealta tecnologia</A>.que produz um link para um parágrafo marcado no arquivo histprogr.html sobre a cidade deSão Carlos, no diretório /Portugues/Sao_Carlos/:São Carlos é um pólo de alta tecnologia. Inserção de ImagensO elemento IMG insere imagens que são apresentadas junto com os textos. Um atributo SRCdeve estar presente, da seguinte forma:<IMG SRC="URL_imagem">onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir; pode serreferenciada uma imagem que esteja em um outro servidor (o que, logicamente, não éconveniente).Assim, escrevendo:<IMG SRC = "/icones/newred.gif">inserimos a figura no documento.As imagens usadas na Web são armazenadas em arquivos com extensão *.gif, *.xbm, *.jpg(ou *.jpeg).APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 17 -
  18. 18. Atributos básicosALTIndica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar daimagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsersgráficos. É recomendável que esteja sempre presente.<IMG SRC="URL_imagem" ALT="descrição_da_imagem">WIDTH e HEIGHTAtributos de dimensão da imagem, em pixels. Grande parte dos editores HTML colocaautomaticamente os valores destes atributos, quando indicamos a inserção de uma imagem.<IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente aspáginas, por saber de antemão o espaço que deverá ser reservado a elas.BORDERQuando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando umaimagem faz as vezes de âncora, ganha uma borda que indica sua condição. Por exemplo: bordaPorém, por questões de apresentação, nem sempre interessa termos essa borda ao redor daimagem. Assim, com o atributo BORDER, podemos controlar esse detalhe.Se quisermos uma borda maior... borda<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=4></A>Se quisermos uma imagem sem borda... borda<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=0></A>ALIGN<IMG SRC="imagem" ALT="descrição" ALIGN=alinhamento>Existem também atributos de alinhamento, que produzem os seguintes resultados:ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas oresultado não seja muito bom.ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhascompridas o resultado não seja muito bomALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem (default)ALIGN=RIGHT Alinha imagem à direita, e tudo o que houver ao redor (texto, outrasimagens) a partir do topo da imagem.ALIGN=LEFT Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens)a partir do topo da imagem.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 18 -
  19. 19. Molduras de imagemPara melhorar ainda mais a apresentação das imagens junto com os textos, foram desenvolvidosatributos de moldura. Estes atributos definem o espaço - vertical e horizontal - deixado entre asimagens e os textos circundantes: <IMG SRC="imagem" VSPACE=esp_vertical> <IMG SRC="imagem" HSPACE=esp_horizontal> TabelasA formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. Amanipulação de tabelas, mesmo em editores, é trabalhosa; a maior diferença entre tabelas emHTML e em edit ores como o MS Word, entretanto, é o fato das tabelas em HTML seremdefinidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrerdestas páginas.As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas épossível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delasvoltada exclusivamente aos links de navega&cced il;ão e observações. Tabelas implementam umconceito importante de layout: as “grades”, segundo as quais organizamos textos e ilustrações demaneira harmoniosa.Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, diversasoutras formatações - inclusive outras tabelas. Novas versões de HTML e de browsers popularesvêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com amaioria desses recursos disponíveis. Elementos básicos de tabelas<TABLE>...</TABLE> delimita uma tabela. Um atributo básico é BORDER, que indica aapresentação da borda.<TABLE BORDER="borda">...</TABLE>Títulos, linhas e elementos<CAPTION>...</CAPTION> define o título da tabela<TR>...</TR> delimita uma linha<TH>...</TH> define um cabeçalho para colunas ou linhas (dentro de <TR>)<TD>...</TD>APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 19 -
  20. 20. delimita um elemento ou célula (dentro de <TR>)Uma tabela simples:<TABLE BORDER=4><CAPTION>Primeiro exemplo</CAPTION><TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR><TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR><TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR></TABLE>Primeiro exemplo Coluna 1 Coluna 2linha1, coluna 1 linha 1, coluna 2linha 2, coluna 1 linha 2, coluna 2Títulos compreendendo mais de uma coluna ou linhaÉ possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) eROWSPAN (para linhas):<TABLE BORDER=1><TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR><TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR><TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR><TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR><TR><TD>duas linhas</TD></TR><TR><TD>tres linhas</TD></TR></TABLE> Colunas 1 e 2linha1, coluna 1 linha 1, coluna 2linha 2, coluna 1 linha 2, coluna 2 uma linha 3 linhas duas linhas tres linhasNeste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); ocabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).Tabelas sem bordaAs páginas deste tutorial foram construídas com tabelas sem borda. Para tanto, foi empregada aseguinte delaração:<TABLE BORDER="0">...</TABLE>APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 20 -
  21. 21. Alinhamentos em tabelastabelas: O Instituto de Ciências Matemáticas de São Carlos (ICMSC-USP) é formado pelos Departamentos de Matemática e de Ciências de Computação e Estatística.Prédio principal do ICMSC-USP O ICMSC originou-se em 1953, como Departamento de Matemática da Escola de Engenharia de São Carlos (EESC-USP), fundado por renomados matemáticos italianos e brasileiros. Atualmente, o Departamento de Matemática oferece cursos de Licenciatura e Bacharelado em Matemática emDepartamento de nível de graduação, além de um programa de pós-Matemática (SMA) graduação que inclui mestrado e doutorado na área de Matemática. O Departamento de Computação e Estatística é responsável pelo curso de Bacharelado em Ciência deDepartamento de Computação, no qual ingressam 40 alunos por ano. EmComputação e Estatística nível de pós-graduação oferece, desde 1975, o programa(SCE) de mestrado em Ciências de Computação e Matemática Computacional e, a partir de agosto de 1995, o programa de doutorado na mesma área.Para maiores informações: Cursos de Graduação: "grad@icmsc.sc.usp.br Cursos de Pós-Graduação: "posgrad@icmsc.sc.usp.brO conteúdo é informativo, porém a apresentação não é agradável devido à disposição do texto natabela.Primeiro, vamos mexer com os alinhamentos.Alinhamentos simplesOs alinhamentos padrão em tabelas, como podemos ver no exemplo acima, são: no sentido horizontal: alinhamento à esquerda no sentido vertical: alinhamento no centro da célulaAs linhas e células podem ter alinhamentos definidos através dos atributos: ALIGN = alin_horizontal VALIGN = alin_verticalVejamos como esses alinhamentos funcionam nas células: <TD ALIGN=alin_horizontal>Texto da célula</TD> <TD VALIGN=alin_vertical>Texto da célula</TD>APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 21 -
  22. 22. Padrão ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT VALIGN=TOPPadrão VALIGN=MIDDLE VALIGN=BOTTOMObs.: a tabela acima foi feita especialmente para testar os alinhamentos. Uma tabela comumajusta o tamanho de suas células ao conteúdo:Padrão align=left align=center align=rightPadrão valign=top valign=middle valign=bottomAlinhamentos combinadosUma mesma célula pode ter atributos ALIGN e VALIGN. <TD ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TD>Por exemplo:Padrão ALIGN=CENTER, ALIGN=RIGHT, ALIGN=LEFT, VALIGN=TOP VALIGN=MIDDLE VALIGN=BOTTOMAlinhamentos de linhasO alinhamento pode ser aplicado a linhas inteiras, com: <TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TR>Porém, o alinhamento declarado em uma célula prevalece sobre o alinhamento da linha, como sevê no exemplo:center center center TD ALIGN=RIGHT TD VALIGN=TOP bottom bottombottomIsso pode ser interessante para algumas aplicações.Já conseguimos mexer um pouco na tabela inicial, inserindo alinhamentos combinados; serãonecessários mais alguns passos para que a tabela fique realmente "apresentável" - o exemplocontinua nas seções sobre larguras e espaçamentos.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 22 -
  23. 23. Prédio principal do ICMSC-USP O Instituto de Ciências Matemáticas de São Carlos (ICMSC-USP) é formado pelos Departamentos de Matemática e de Ciências de Computação e Estatística. O ICMSC originou-se em 1953, como Departamento de Matemática da Escola de Engenharia de São Carlos (EESC-USP), fundado por renomados matemáticos italianos e brasileiros.Departamento de Atualmente, o Departamento de Matemática ofereceMatemática (SMA) cursos de Licenciatura e Bacharelado em Matemática em nível de graduação, além de um programa de pós- graduação que inclui mestrado e doutorado na área de Matemática.Departamento de O Departamento de Computação e Estatística éComputação e Estatística responsável pelo curso de Bacharelado em Ciência de(SCE) Computação, no qual ingressam 40 alunos por ano. Em nível de pós-graduação oferece, desde 1975, o programa de mestrado em Ciências de Computação e Matemática Computacional e, a partir de agosto de 1995, o programa de doutorado na mesma área.Para maiores informações: Atributos de larguraNa seção anterior, foi comentado que uma tabela comum ajusta o tamanho de suas células aoconteúdo. Por exemplo:janeiro fevereiro marçoabril maio junhoPara apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributoWIDTH. Esse atributo pode ser aplicado também a linhas e células.Essa largura pode ser definida em porcentagem (do espaço disponível): WIDTH=x%ou em pixels: WIDTH=xEx.1: Tabela ocupando 50% do espaço disponível<TABLE BORDER=1 width=50%>janeiro fevereiro marçoabril maio junhoAPOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 23 -
  24. 24. Ex.2: Tabela ocupando 50% do espaço disponível, com uma coluna de 60% do espaçodisponível na tabela<TABLE BORDER=1 width=50%><TR> <TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>março</TD></TR><TR> <TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD></TR></TABLE>janeiro fevereiro marçoabril maio junhoEx3.: O controle da largura da tabela está limitado à dimensão de seu conteúdo:<TABLE BORDER=1 width=50%><TR> <TD>janeiro</TD><TD width=1%>fevereiro</TD><TD>março</TD></TR><TR> <TD>abril</TD><TD width=1%>maio</TD><TD>junho</TD></TR></TABLE>janeiro fevereiro marçoabril maio junhoAlguns editores WYSIWYG não trabalham com atributos de largura. Nestes casos, épreciso editar o arquivo fonte.De volta ao exemplo inicial, já podemos melhorar um pouco mais nossa tabela. Mantendo osalinhamentos definidos na seção anterior, aplicaremos atributos de largura:Prédio principal do ICMSC-USP O Instituto de Ciências Matemáticas de São Carlos (ICMSC- USP) é formado pelos Departamentos de Matemática e de Ciências de Computação e Estatística. O ICMSC originou-se em 1953, como Departamento de Matemática da Escola de Engenharia de São Carlos (EESC- USP), fundado por renomados matemáticos italianos e brasileiros.Departamento de Atualmente, o Departamento de Matemática oferece cursos deMatemática (SMA) Licenciatura e Bacharelado em Matemática em nível deAPOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 24 -
  25. 25. graduação, além de um programa de pós-graduação que inclui mestrado e doutorado na área de Matemática.Departamento de O Departamento de Computação e Estatística é responsávelComputação e pelo curso de Bacharelado em Ciência de Computação, noEstatística (SCE) qual ingressam 40 alunos por ano. Em nível de pós-graduação oferece, desde 1975, o programa de mestrado em Ciências de Computação e Matemática Computacional e, a partir de agosto de 1995, o programa de doutorado na mesma área.Para maiores informações: Cursos de Graduação: "grad@icmsc.sc.usp.br Cursos de Pós-Graduação: "posgrad@icmsc.sc.usp.brAinda faltam detalhes. Um deles é evitar que o texto fique grudado nas bordas da tabela;veremos na próxima seção, sobre espaçamentos Atributos de espaçamentoDois atributos permitem o controle de espaçamento em tabelas: CELLPADDING - espaço entre o texto e as bordas da célula CELLSPACING - espaço entre célulasTomemos a mesma tabela simples da seção anterior:janeiro fevereiro marçoabril maio junhoEx.1: Espaço entre o texto e as bordas<TABLE BORDER=1 CELLPADDING=20> ma janeiro fevereiro rço jun abril maio hoEx.2: Espaço entre células<TABLE BORDER=1 CELLSPACING=20>janeiro fevereiro marçoabril maio junhoAPOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 25 -
  26. 26. Ex3.: Espaço entre texto e bordas, e espaço entre células<TABLE BORDER=1 CELLPADDING=20 CELLSPACING=20> ma janeiro fevereiro rço jun abril maio ho<HREF=".HTML"Folhas de Estilo<HREF=".HTML"HTML dinâmicoAssim, damos mais uma mexida na tabela inicial: Prédio principal do ICMSC-USP O Instituto de Ciências Matemáticas de São Carlos (ICMSC- USP) é formado pelos Departamentos de Matemática e de Ciências de Computação e Estatística. O ICMSC originou-se em 1953, como Departamento de Matemática da Escola de Engenharia de São Carlos (EESC- USP), fundado por renomados matemáticos italianos e brasileiros. Departamento de Atualmente, o Departamento de Matemática oferece cursos Matemática (SMA) de Licenciatura e Bacharelado em Matemática em nível de graduação, além de um programa de pós-graduação que inclui mestrado e doutorado na área de Matemática. Departamento de O Departamento de Computação e Estatística é responsável Computação e pelo curso de Bacharelado em Ciência de Computação, no Estatística (SCE) qual ingressam 40 alunos por ano. Em nível de pós- graduação oferece, desde 1975, o programa de mestrado em Ciências de Computação e Matemática Computacional e, a partir de agosto de 1995, o programa de doutorado na mesma área. Para maiores informações: Cursos de Graduação: "grad@icmsc.sc.usp.br Cursos de Pós-Graduação: "posgrad@icmsc.sc.usp.brComo toque final, retiramos a borda:APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 26 -
  27. 27. O Instituto de Ciências Matemáticas de São Carlos (ICMSC- Prédio principal do ICMSC-USP USP) é formado pelos Departamentos de Matemática e de Ciências de Computação e Estatística. O ICMSC originou-se em 1953, como Departamento de Matemática da Escola de Engenharia de São Carlos (EESC- USP), fundado por renomados matemáticos italianos e brasileiros. Departamento de Atualmente, o Departamento de Matemática oferece cursos Matemática (SMA) de Licenciatura e Bacharelado em Matemática em nível de graduação, além de um programa de pós-graduação que inclui mestrado e doutorado na área de Matemática. Departamento de O Departamento de Computação e Estatística é responsável Computação e pelo curso de Bacharelado em Ciência de Computação, no Estatística (SCE) qual ingressam 40 alunos por ano. Em nível de pós- graduação oferece, desde 1975, o programa de mestrado em Ciências de Computação e Matemática Computacional e, a partir de agosto de 1995, o programa de doutorado na mesma área. Para maiores informações: Cursos de Graduação: "grad@icmsc.sc.usp.br Cursos de Pós-Graduação: "posgrad@icmsc.sc.usp.brAgora já vimos grande parte dos recursos disponíveis para manipular tabelas, que permitemproduzir bons efeitos de apresentação. Extensões de Tabelas Diversas extensões de tabelas possibilitam a apresentação de efeitos muito bons nas páginas.Cor de fundo<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9"> janeiro fevereiro março abril maio junhoCor de borda<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9"BORDERCOLOR="#00FF00"> janeiro fevereiro março abril maio junho<HREF=".HTML"Folhas de EstiloAPOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 27 -
  28. 28. <HREF=".HTML"HTML dinâmicoImagem de fundo<TABLE BORDER=5 BACKGROUND="imagem"> janeiro fevereiro março abril maio junho FormuláriosUm formulário é um modelo para a entrada de um conjunto de dados. O primeiro passo parafazer formulários é aprender as etiquetas que desenham as janelinhas de entrada de dados, paradepois trabalharmos com os scripts, que são os programas que tratam esses dados, oferecendo osserviços desejados (acesso a banco de dados, envio de e-mail, etc.).O elemento <FORM> delimita um formulário e contém uma seqüência de elementos de entrada ede formatação do documento.<FORM ACTION="URL_de_script" METHOD=método>...</FORM>Os atributos de FORM que nos interessam agora são:ACTION Especifica o URL do script ao qual serão enviados os dados do formulário.METHOD Seleciona um método para acessar o URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do browser para o servidor, com a seguinte diferença básica:  POST - os dados entrados fazem parte do corpo da mensagem enviada para o servidor; - transfere grande quantidade de dados.  GET - os dados entrados fazem parte do URL associado à consulta enviada para o servidor; - suporta até 128 caracteres.FORM também pode apresentar o atributo:ENCTYPEIndica o tipo de codificação dos dados enviados através do formulário. O tipo default éapplication/x-www-form-urlencoded. Outro tipo aceito por alguns browsers é text/plain,m as sua utilização ainda não está padronizada.Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - excetooutros formulários. Em especial, colocamos dentro da marcação de <FORM> as formatações paracampos de entrada de dados, que são três: <INPUT>, <SELECT> e <TEXTAREA>.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 28 -
  29. 29. Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome,utilizado posteriormente pelo script. São os scripts que organizam esses dados de entrada em umconjunto de informações significativas para determinado propósito. Primeiro vamos ver os tiposde campos para montar um formulário, e depois passaremos aos scripts. INPUTO campo <INPUT> tem um atributo TYPE, ao qual atribuímos seis valores diferentes para gerarseis tipos diferentes de entrada de dados.Campo de dados textoQuando INPUT não apresenta atributos, é assumido TYPE=TEXT (default); a formatação: <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome"> </FORM>ou apenas: <FORM> Nome: <INPUT NAME="Nome"> </FORM>produz o resultado:Nome:Campo de dados senhaEntrada de texto na qual os caracteres são escondidos por asteriscos, como se pode ver noexemplo. <FORM> Login: <INPUT TYPE=TEXT NAME=login><br> Password: <INPUT TYPE=PASSWORD NAME="senha"> </FORM> mascLogin:Password:Alguns atributosVALUE pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Dessemodo, se o usuário não preencher este campo, será adotado este valor padrão. Se o usuário quiserentra r dados, ele somente precisará apagar o que já estiver escrito.Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome"> Seu nomeNome:APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 29 -
  30. 30. SIZE especifica o tamanho do espaço no display para o campo do formulário. Só é válido paracampos TEXT e PASSWORD. O valor default (padrão) é 20. <FORM> Endereço: <INPUT TYPE=TEXT SIZE=35> </FORM>Endereço:MAXLENGHT é o número de caracteres aceitos em um campo de dados; este atributo só é válidopara campos de entrada TEXT e PASSWORD. <FORM> Dia do mês: <INPUT TYPE=TEXT NAME="ex" MAXLENGHT=2> </FORM>produz o resultado:Dia do mês:Apenas 2 caracteres serão lidos pelo formulário, não importa o quanto se escreva neste campo.Múltipla escolhaCHECKBOX insere um botão para escolha de opções. A cada alternativa corresponde um valor a sermanipulado pelo script que processa os dados. Pode ser escolhida mais de uma alternativa.<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="basquete">Basquete <br ><INPUT TYPE=CHECKBOX NAME=esporte VALUE=bocha>BochaUma diretiva CHECKED marca uma escolha inicial, isto é, se o usuário não escolher nenhumaopção, o formulário irá considerar a alternativa "pré-escolhida":<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED& gt;Vôlei<br><INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">FutebolEsportes que você pratica: futebol Futebol volei Vôlei natacao Natação basquete Basquete tenis Tênis bocha BochaEscolha únicaRADIO insere um botão de escolha de valores para uma opção, isto é, somente uma alternativapode ser escolhidaAPOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 30 -
  31. 31. <INPUT TYPE=RADIO NAME="time" VALUE="palm">Palmeiras <br><INPUT TYPE=RADIO NAME="time" VALUE="inte">InternacionalUma diretiva CHECKED marca uma escolha inicial - se o usuário não escolher nenhuma opção, oformulário irá considerar a alternativa "pré-escolhida":<INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>AEA <br><INPUT TYPE=RADIO NAME="time" VALUE="naut">NáuticoSeu time do coração: palm naut flam grem Palmeiras; Náutico; Flamengo; Grêmio; sant atle cori flum Santos; Atlético; Corinthians; Fluminense; inte cruz bota sant Internacional; Cruzeiro; Botafogo; Santa saop aeaCruz; São Paulo; AEA.Botões de açãoSUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor; <FORM> <INPUT TYPE=SUBMIT> </FORM> Enviar consulÉ possível modificar a mensagem desse botão através do atributo VALUE <FORM> <INPUT TYPE=SUBMIT VALUE="Envia mensagem"> </FORM> EnviaRESET restaura os valores iniciais das entradas de dados. <FORM> <INPUT TYPE=RESET> </FORM> RedefinirÉ possível modificar a mensagem desse botão através do atributo VALUE <FORM> <INPUT TYPE=RESET VALUE="Apaga tudo!"> </FORM> Apaga tudo! SELECT e TEXTAREAAPOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 31 -
  32. 32. <SELECT> apresenta uma lista de valores, através de campos OPTION.<SELECT NAME="sabor"><OPTION>Abacaxi<OPTION>Creme<OPTION>Morango<OPTION>Chocolate</SELECT> AbacaxiTambém é possível estabelecer uma escolha-padrão, através do atributo SELECTED<SELECT NAME="sabor"><OPTION>Abacaxi<OPTION SELECTED>Creme<OPTION>Morango<OPTION>Chocolate</SELECT> CremeCom o atributo SIZE, escolhe-se quantos itens da lista serão mostrados (no exemplo, SIZE=4): Abacaxi Creme Morango Chocolate<TEXTAREA> abre uma área para entrada de texto, de acordo com atributos para número decolunas, linhas, e - se for o caso - um valor inicial.<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA> Deixe seu comentário Submissão de FormuláriosSuponhamos um formulário cuja marcação principal seja: <FORM ACTION="/cgi-bin/masc/manual" METHOD=método> ... </FORM>onde ACTION indica o URL do script que receberá os dados (ainda não vamos nos preocupar como campo METHOD)APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 32 -
  33. 33. Vejamos o que ocorre quando acionamos o botão de SUBMIT desse formulário: o browser prepara a requisição, organizando os dados do formulário em pares nome-valor, onde: nome foi definido nas etiquetas do formulário (pelo atributo NAME); valor é a entrada oferecida pelo usuário. No script, esses valores serão armazenados em uma estrutura deste tipo: typedef struct { char *name char *val; } entry; O único detalhe diferente na manipulação da entrada dos dados no script é a necessidade de decodificá-los.Por exemplo, um campo do tipo... <INPUT TYPE=TEXT NAME="nome">cuja entrada tenha sido... Prof. Achilleserá organizado pelo browser da seguinte forma: nome=Prof.+Achille+BassiSe o formulário tiver mais campos, por exemplo: <INPUT TYPE=TEXT NAME="email">com uma entrada bassi@icmsco browser estará gerando uma linha semelhante a:nome=Prof.+Achille+Bassi& email=bassi@icmsc.sc.usp.brNote que os campos de informação são separados por &. Também todos os acentos e símbolosespeciais são codificados em hexadecimal para o envio dos dados. Esta codificação dos dados de umformulário é padrão.Para testar como é feita a codificação dos dados de um formulário com vários campos, entre seu e-mail no campo abaixo; ele será usado para enviar uma mensagem para você mesmo (se o e-mailusado no teste for inválido, não será possível realizar o teste corretamente): Testa exemplo ApagaO browser envia a requisição para o URL indicado em ACTION, que está associado a um script. Umadas funções do script será separar os campos de informação (retirar os &) e "limpar" os dados dossinais de + e símbolos hexadecimais.No exemplo (se você testou), foi possível ver uma entrada "suja", pois em vez de script foi usado omailto para ACTION.Uma forma de ter uma mensagem "limpa" com a entrada de formulários é declarar a codificaçãotext/plain. O detalhe é que essa codificação não é ainda padronizada. Você pode testar se seubrowser aceita esse formato ao submeter formulários, através de um segundo exemplo, bastandoentrar no campo abaixo o seu e-mail: Testa exemplo Apaga APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 33 -
  34. 34. Métodos de HTTPO protocolo HTTP utiliza vários métodos de manipulação e organização dos dados. Atualmente,dois métodos são mais utilizados para submeter dados de formulários: POST e GET. A diferençaentre estes métodos é a seguinte:POST  com POST, os dados entrados pelo formulário fazem parte do corpo da mensagem enviada para o servidor;  a cadeia de caracteres de entrada é lida como entrada padrão de comprimento CONTENT_LENGTH;  é possível transferir grande quantidade de dados.GET  com GET, os dados de entrada do script fazem parte do URL associado à consulta enviada para o servidor (por exemplo, nas consultas a catálogos do tipo Yahoo e Surf);  a cadeia de entrada é colocada na variável de ambiente QUERY_STRING;  suporta somente até 128 caracteres;  como os dados da consulta fazem parte do URL, ela pode ser encapsulada em um URL de link ou bookmark;  um detalhe é que os dados de entrada são copiados no regsitro de acessos ao site; portanto, informações que exigem segurança não devem ser manipuladas por este método. Métodos de HTTPO protocolo HTTP utiliza vários métodos de manipulação e organização dos dados. Atualmente,dois métodos são mais utilizados para submeter dados de formulários: POST e GET. A diferençaentre estes métodos é a seguinte:POST  com POST, os dados entrados pelo formulário fazem parte do corpo da mensagem enviada para o servidor;  a cadeia de caracteres de entrada é lida como entrada padrão de comprimento CONTENT_LENGTH;  é possível transferir grande quantidade de dados.GET  com GET, os dados de entrada do script fazem parte do URL associado à consulta enviada para o servidor (por exemplo, nas consultas a catálogos do tipo Yahoo e Surf);  a cadeia de entrada é colocada na variável de ambiente QUERY_STRING;  suporta somente até 128 caracteres;  como os dados da consulta fazem parte do URL, ela pode ser encapsulada em um URL de link ou bookmark;  um detalhe é que os dados de entrada são copiados no regsitro de acessos ao site; portanto, informações que exigem segurança não devem ser manipuladas por este método.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 34 -
  35. 35. Além de procurarmos lidar sempre com pequenos trechos de áudio e vídeo, podemos explorartecnologias recentes que permitem a transmissão em tempo real ÁudioHá duas maneiras de inserir som em uma página:- para browsers Netscape: <EMBED SRC="audio.som">- para browsers Internet Explorer: <BGSOUND SRC="audio.som">Essas formatações, porém, não farão efeito algum quando o browser não estiver configuradopara "tocar" música, ou se o computador que receber a página não tiver uma placa de som.É possível configurar a apresentação do arquivo de som, como veremos nos próximos passos... VídeoEm geral, embutimos um arquivo de video em um documento desta maneira <EMBED SRC="video.vid">Essa formatação, porém, não fará efeito algum quando o browser não estiver configurado para"tocar" o vídeo. Quando usar GIF e quando usar JPEGPara alguns tipos de imagens, o formato GIF é superior em qualidade de imagem, tamanho dearquivo, ou ambos. O que precisamos saber é para que tipo de imagens devemos aplicar JPEG.De maneira geral, JPEG é melhor aplicado a imagens com variações de cor - fotografiasdigitalizadas, por exemplo - coloridas ou com no mínimo 16 níveis em tons de cinza. Quantomais complexa a imagem, melhor o resultado com JPEG.GIF é melhor para imagens com cores lisas (bordas, áreas com cores "puras") realizando, nessescasos, uma compressão muito melhor do que JPEG faria. Nestes casos, JPEG produz imagensdesfocadas. Por isso, imagens em preto-e-branco puros (sem tons de cinza) não devem serprocessados em JPEG.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 35 -
  36. 36. Introdução ao JavaScriptJavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML(HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores detexto, como o NotePad, Write, etc. Porém, existem editores próprios para gerar HTML, taiscomo HotDog e (mais recomendado) Microsoft FrontPage.Os parágrafos de lógica do javaScript podem estar "soltos" ou atrelados a ocorrência de eventos.Os parágrafos soltos são executados na seqüência em que aparecem na página (documento) e osAtrelados a eventos são executados apenas quando o evento ocorre. Para inserir parágrafos deprogramação dentro do HTML é necessário identificar o início e o Fim do set de JavaScript, daseguinte forma:<SCRIPT>Set de instruções</SCRIPT>Este procedimento pode ser adotado em qualquer local da página. Entretanto, para melhorvisualização e facilidade de manutenção, recomenda-se que toda a lógica seja escrita no início dodocumento, através da criação de funções a serem invocadas quando se fizer necessário(normalmente atreladas a eventos).Se a lógica é escrita a partir de um determinado evento, não é necessário o uso dos comandos<SCRIPT> e </SCRIPT>.Os comandos JavaScript são sensíveis ao tipo de letra (maiúsculas e minúsculas) em sua sintaxe.Portanto, é necessário que seja obedecida a forma de escrever os comandos, de acordo com aforma apresentada ao longo deste manual. Caso seja cometido algum erro de sintaxe quando daescrita de um comando, o JavaScript interpretará, o que seria um comando, como sendo o nomede uma variável. OPERADORES LÓGICOSSão operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE.Os comandos condicionais serão vistos mais a frente.= = Igual!= Diferente> Maior>= Maior ou Igual< Menor<= Menor ou Igual&& EAPOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 36 -
  37. 37. OPERADORES MATEMÁTICOSSão operadores a serem utilizados em cálculos, referências de indexadores e manuseio de strings.Ao longo do manual estes operadores serão largamente utilizados, dando, assim, uma noção maisprecisa do seu potencial.+ adição de valor e concatenação de strings- subtração de valores* multiplicação de valores/ divisão de valores% obtém o resto de uma divisão:+= concatena /adiciona ao string/valor já existente. Ou seja:x +=y é o mesmo que x = x + yda mesma forma podem ser utilizados: -= , *= , /= ou %=Um contador pode ser simplificado utilizando-se :X++ ou X-- o que equivale as expressões:X = X + 1 ou X = X - 1 respectivamente. Para inverter sinal: X = -X negativo para positivo ou positivo para negativo. CONTROLES ESPECIAISb - backspacef - form feedn - new line caractersr - carriage returnt - tab characters// - Linha de comentário/*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentário.Os delimitadores naturais para uma string são " ou . Caso seja necessário a utilização destescaracteres como parte da string, utilize precedendo " ou .Ex. alert ("Cuidado com o uso de " ou em uma string") COMANDOS CONDICIONAISSão comandos que condicionam a execução de uma certa tarefa à veracidade ou não de umadeterminada condição, ou enquanto determinada condição for verdadeira.São eles:APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 37 -
  38. 38. Comando IFif (condição){ ação para condição satisfeita }[ else{ ação para condição não satisfeita } ]Ex.if (Idade < 18){Categoria = "Menor" }else{Categoria = "Maior"}Comando FORfor ( [inicialização/criação de variável de controle ;][condição ;][incremento da variável de controle] ){ ação }Ex.for (x = 0 ; x <= 10 ; x++){alert ("X igual a " + x) }ComandoWHILEExecuta uma ação enquanto determinada condição for verdadeira.while (condição){ ação }Ex.var contador = 10while (contador > 1){ contador-- }Move condicionalreceptor = ( (condição) ? verdadeiro : falso)Ex.NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")OBS:Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper a condiçãoprincipal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma ação (sedeterminada condição ocorrer) mas volta para o loop. Diretivas/condições entre [ ] significamque são opcionais.APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 38 -
  39. 39. EVENTOSSão fatos que ocorrem durante a execução do sistema, a partir dos quais o programador podedefinir ações a serem realizadas pelo programa.Abaixo apresentamos a lista dos eventos possíveis, indicando os momentos em que os mesmospodem ocorrer, bem como, os objetos passíveis de sua ocorrência.onload - Ocorre na carga do documento. Ou seja, só ocorre no BODY do documento.onunload - Ocorre na descarga (saída) do documento. Também só ocorre no BODY.onchange - Ocorre quando o objeto perde o focus e houve mudança de conteúdo. válido para os objetos Text, Select e Textarea.onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudança. válido para os objetos Text, Select e Textarea.onfocus - Ocorre quando o objeto recebe o focus. válido para os objetos Text, Select e Textarea.onclick - Ocorre quando o objeto recebe um Click do Mouse. válido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto. válido apenas para Link.onselect - Ocorre quando o objeto é selecionado. válido para os objetos Text e Textarea.onsubmit - Ocorre quando um botão tipo Submit recebe um click do mouse. válido apenas para o Form. CRIANDO VARIÁVEISA variável é criada automaticamente, pela simples associação de valores a mesma.Ex. NovaVariavel = "Jose"Foi criada a variável de nome NovaVariavel que, passou a conter a string Jose.As variáveis podem ser Locais ou Globais. As variáveis que são criadas dentro de uma funçãosão Locais e referenciáveis apenas dentro da função. As variáveis criadas fora de funções sãoGlobais, podendo serem referenciadas em qualquer parte do documento.Desta forma, variáveis que precisam ser referenciadas por várias funções ou em outra parte dodocumento, precisam ser definidas como globais.Embora não seja recomendável, em uma função, pode ser definida uma variável local com omesmo nome de uma variável global. Para isso utiliza-se o método de definição var.Ex. Variável Global : MinhaVariavel = ""Variável Local : var MinhaVariavel = "” ESCREVENDO NO DOCUMENTOO JavaScript permite que o programador escreva linhas dentro de uma página (documento),APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 39 -
  40. 40. através do método write. As linhas escritas desta forma, podem conter textos, expressõesJavaScript e comandos Html. As linhas escritas através deste método aparecerão no ponto da telaonde o comando for inserido.Ex:<script>valor = 30document.write ("Minha primeira linha")document.write ("Nesta linha aparecerá o resultado de : " + (10 * 10 + valor))</script>A idéia do exemplo acima é escrever duas linhas. Entretanto o método write não insere mudançade linha, o que provocará o aparecimento de apenas uma linha com os dois textos emendados.Para evitar este tipo de ocorrência, existe o método writeln que escreve uma linha e espaceja paraa seguinte. Entretanto, em nossos testes, este comando não surtiu efeito,obtendo-se o mesmoresultado do método write. A solução encontrada para esta situação foi a utilização do comandode mudança de parágrafo da linguagem Html.Ex:<script>valor = 30document.write ("<p>Minha primeira linha</p>")document.write ("<p>Nesta linha aparecerá o resultado de : " + (10 * 10 + valor) + "</p>")</script>Isto resolve a questão da mudança de linha, porém, vai gerar uma linha em branco, entre cadalinha, por se tratar de mudança de parágrafo. Caso não seja desejado a existência da linha embranco, a alternativa é utilizar o comando Html <br> que apenas muda de linha.Ex:<script>valor = 30document.write ("<br>Minha primeira linha")document.write ("<br>Nesta linha aparecerá o resultado de : " + (10 * 10 + valor) )</script> MENSAGENSExistem três formas de comunicação com o usuário através de mensagens.Apenas Observação.alert ( mensagem )Ex.alert ("Certifique-se de que as informações estão corretas")Mensagem que retorna confirmação de OK ou CANCELARconfirm (mensagem)Ex.if (confirm ("Algo está errado...devo continuar??")){ alert("Continuando") }APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 40 -
  41. 41. else{ alert("Parando") }Recebe mensagem via caixa de texto InputReceptor = prompt ("Minha mensagem", "Meu texto")Onde:Receptor é o campo que vai receber a informação digitada pelo usuário Minha mensagem é amensagem que vai aparecer como Label da caixa de input Meu texto é um texto, opcional, queaparecerá na linha de digitação do usuário.Ex.Entrada = prompt("Informe uma expressão matemática", "")Resultado = eval (Entrada)document.write("O resultado é = " + Resultado) CRIANDO FUNÇÕESUma função é um set de instruções, que só devem ser executadas quando a função for acionada.A sintaxe geral é a seguinte:function NomeFunção (Parâmetros){ Ação }Suponha uma função que tenha como objetivo informar se uma pessoa é maior ou menor deidade, recebendo como parâmetro a sua idade.function Idade (Anos) {if (Anos > 17){ alert ("Maior de Idade") }else{ alert ("menor de Idade") }}Para acionar esta função, suponha uma caixa de texto, em um formulário, na qual seja informadaa idade e, a cada informação, a função seja acionada.<form><input type=text size=2 maxlength=2 name="Tempo"onchange="Idade(Tempo.value)"></form>Observe-se que o parâmetro passado (quando ocorre o evento "onchange") foi o conteúdo dacaixa de texto "Tempo" (propriedade "value") e que, na função, chamamos de "Anos". Ou seja,não existe co-relação entre o nome da variável passada e a variável de recepção na função.Apenas o conteúdo é passadoAPOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 41 -
  42. 42. FUNÇÕES INTRÍNSECASSão funções embutidas na própria linguagem. A sintaxe geral é a seguinte:Result = função (informação a ser processada)- eval = Calcula o conteúdo da string- parseInt - Transforma string em inteiro- parseFloat - Transforma string em número com ponto flutuante- date() - Retorna a data e a hora (veja o capítulo manipulando datas)ex1: Result = eval ( " (10 * 20) + 2 - 8")ex2: Result = eval (string)No primeiro exemplo Result seria igual a 194. No segundo, depende do conteúdo da string, quetambém pode ser o conteúdo (value) de uma caixa de texto. - Funções tipicamente Matemáticas: -Math.abs(número) - retorna o valor absoluto do número (ponto flutuante)Math.ceil(número) - retorna o próximo valor inteiro maior que o númeroMath.floor(número) - retorna o próximo valor inteiro menor que o númeroMath.round(número) - retorna o valor inteiro, arredondado, do númeroMath.pow(base, expoente) - retorna o cálculo do exponencialMath.max(número1, número2) - retorna o maior número dos dois fornecidosMath.min(número1, número2) - retorna o menor número dos dois fornecidosMath.sqrt(número) - retorna a raiz quadrada do númeroMath.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)Math.sin(número) - retorna o seno de um número (anglo em radianos)Math.asin(número) - retorna o arco seno de um número (em radianos)Math.cos(número) - retorna o cosseno de um número (anglo em radianos)Math.acos(número) - retorna o arco cosseno de um número (em radianos)Math.tan(número) - retorna a tangente de um número (anglo em radianos)Math.atan(número) - retorna o arco tangente de um número (em radianos)Math.pi retorna o valor de PI (aproximadamente 3.14159)Math.log(número) - retorna o logarítmo de um númeroMath.E - retorna a base dos logarítmos naturais (aproximadamente 2.718)Math.LN2 - retorna o valor do logarítmo de 2 (aproximadamente 0.693)Math.LOG2E - retorna a base do logarítmo de 2 (aproximadamente 1.442)Math.LN10 retorna o valor do logarítmo de 10 (aproximadamente 2.302)Math.LOG10E - retorna a base do logarítmo de 10 (aproximadamente 0.434)Observação:Em todas as funções, quando apresentamos a expressão "(número)", na verdade queremos nosreferir a um argumento que será processado pela função e que poderá ser: um número, umavariável ou o conteúdo de um objeto (propriedade value).APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 42 -
  43. 43. CRIANDO NOVAS INSTÂNCIASAtravés do operador new podem ser criadas novas instâncias a objetos já existentes, mudando oseu conteúdo, porém, mantendo suas propriedades.A sintaxe geral é a seguinte:NovoObjeto = new ObjetoExistente (parâmetros)Ex1.MinhaData = new Date ()MinhaData passou a ser um objeto tipo Date, com o mesmo conteúdo existente em Date(data e hora atual)Ex2:MinhaData = new Date(1996, 05, 27)MinhaData passou a ser um objeto tipo Date, porém, com o conteúdo de uma nova data.Ex3:Suponha a existência do seguinte objeto chamado Empresasfunction Empresas (Emp, Nfunc, Prod){ this.Emp = Empthis.Nfunc = Nfuncthis.Prod = Prod }Podemos criar novas instâncias, usando a mesma estrutura, da seguinte forma:Elogica = new Empresas("Elogica", "120", "Serviços")Pitaco = new Empresas("Pitaco", "35", "Software")Corisco = new Empresas("Corisco", "42", "Conectividade")Assim, a variável Elogica.Nfunc terá o seu conteúdo igual a 120 MANIPULANDO ARRAYSO JavaScript não tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalharcom arrays é necessário a criação de um objeto com a propriedade de criação de um array. Noexemplo abaixo, criaremos um objeto tipo array de tamanho variável e com a função de "limpar"o conteúdo das variáveis cada vez que uma nova instância seja criada a partir dele.function CriaArray (n) {this.length = nfor (var i = 1 ; i <= n ; i++){ this[i] = "" } }Agora podemos criar novas instâncias do objeto "CriaArray" e alimentá-los com os dadosnecessários.NomeDia = new CriaArray(7)NomeDia[0] = "Domingo"NomeDia[1] = "Segunda"NomeDia [2] = "Terça"NomeDia[3] = "Quarta"NomeDia[4] = "Quinta"APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 43 -
  44. 44. NomeDia[5] = "Sexta"NomeDia[6] = "Sábado"Atividade = new CriaArray(5)Atividade[0] = "Analista"Atividade[1] = "Programador"Atividade[2] = "Operador"Atividade[3] = "Conferente"Atividade[4] = "Digitador"Agora poderemos obter os dados diretamente dos arrays.DiaSemana = NomeDia[4]Ocupação = Atividade[1]DiaSemana passaria a conter Quinta e Ocupação conteria Programador.Outra forma de se trabalhar com arrays é criar novas instâncias dentro do próprio objeto doarray, o que proporciona o mesmo efeito de se trabalhar com matriz. Isso pode ser feito daseguinte forma:function Empresas (Emp, Nfunc, Prod) {this.Emp = Empthis.Nfunc = Nfuncthis.Prod = Prod }TabEmp = new Empresas(3)TabEmp[1] = new Empresas("Elogica", "120", "Serviços")TabEmp[2] = new Empresas("Pitaco", "35", "Software")TabEmp[3] = new Empresas("Corisco", "42", "Conectividade")Assim, poderemos obter a atividade da empresa número 3, cuja resposta seria Conectividade, daseguinte forma:Atividade = TabEmp[3].Prod MANIPULANDO STRINGsO JavaScript é bastante poderoso no manuseio de String´s, fornecendo ao programador uma totalflexibilidade em seu manuseio.Abaixo apresentamos os métodos disponíveis para manuseio de string´s.string.length - retorna o tamanho da string (quantidade de bytes)string.charAt(posição) - retorna o caracter da posição especificada (inicia em 0)string.indexOf("string") - retorna o número da posição onde começa a primeira "string"string.lastindexOf("string") - retorna o número da posição onde começa a última "string"string.substring(index1, index2) - retorna o conteúdo da string que corresponde ao intervaloespecificado. Começando no caracter posicionado em index1 e terminando no caracterimediatamente anterior ao valor especificado em index2.Ex.Todo = "Elogica"Parte = Todo.substring(1, 4)(A variável Parte receberá a palavra log)string.toUpperCase() - Transforma o conteúdo da string para maiúsculo (Caixa Alta)string.toLowerCase() - Transforma o conteúdo da string para minúsculo (Caixa Baixa)escape ("string") - retorna o valor ASCII da string (vem precedido de %)APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 44 -
  45. 45. unscape("string") - retorna o caracter a partir de um valor ASCII (precedido de %) MANIPULANDO DATASExiste apenas uma função para que se possa obter a data e a hora. É a função Date(). Esta funçãodevolve data e hora no formato:Dia da semana, Nome do mês, Dia do mês,Hora:Minuto:Segundo e AnoEx.Fri May 24 16:58: 02 1996Para se obter os dados separadamente, existem os seguintes métodos:getDate() - Obtém o dia do mês (numérico de 1 a 31)getDay() - Obtém o dia da semana (0 a 6)getMonth() - Obtém o mês (numérico de 0 a 11)getYear() - Obtém o anogetHours() - Obtém a hora (numérico de 0 a 23)getMinutes() - Obtém os minutos (numérico de 0 a 59)getSeconds() - Obtém os segundos (numérico de 0 a 59)No exemplo abaixo obteremos o dia da semana. Para tal, utilizaremos a variável DataToda paraarmazenar data/hora e a variável DiaHoje para armazenar o número do dia da semana.DataToda = new Date()DiaHoje = DataToda.getDay()Para obter o dia da semana alfa, teremos que construir uma tabela com os dias da semana eutilizar a variável DiaHoje como indexador.function CriaTab (n) {this.length = nfor (var x = 1 ; x<= n ; x++){ this[x] = "" } }NomeDia = new CriaTab(7)NomeDia[0] = "Domingo"NomeDia[1] = "Segunda"NomeDia [2] = "Terça"NomeDia[3] = "Quarta"NomeDia[4] = "Quinta"NomeDia[5] = "Sexta"NomeDia[6] = "Sábado"DiaSemana = NomeDia[DiaHoje]Para criar uma variável tipo Date com o conteúdo informado pela aplicação, existe o métodoset. Assim, temos os seguintes métodos: setDate, setDay, setMonth, setYear, setHours,setMinutes e setSeconds.Seguindo o exemplo acima, para mudar o mês para novembro, teríamos:DataToda.setMonth(10)APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 45 -
  46. 46. Exemplos adicionais serão encontrados no capítulo "Usando Timer e Date INTERAGINDO COM O USUÁRIOA interação com o usuário se dá através de objetos para entrada de dados (textos), marcação deopções (radio, checkbox e combo), botões e links para outras páginas.Conceitualmente, os objetos são divididos em: Input, Textarea e Select. O objeto Input divide-se(propriedade Type) em:•Password •Text •Hidden •Checkbox •Radio •Button •Reset •SubmitA construção destes objetos é feita pela linguagem HTML (HiperText Mark-up Language).Portanto, é aconselhável que sejam criados utilizando-se ferramentas de geração de páginasHTML, como o HotDog ou, mais recomendado, FrontPage.Objeto Input TEXTÉ o principal objeto para entrada de dados.Suas principais propriedades são: type, size, maxlength, name e value.type=text : Especifica um campo para entrada de dados normalsize : Especifica o tamanho do campo na tela.maxlength : Especifica a quantidade máxima de caracteres permitidos.name : Especifica o nome do objetovalue : Armazena o conteúdo do campo.Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect.Ex:<form name="TText"><p>Entrada de Texto <input type=text size=20 maxlength=30 name="CxTexto" value=""onchange="alert (Voce digitou + CxTexto.value)"></p></form>Objeto Input PASSWORDÉ o objeto para entrada de Senhas de acesso (password). Os dados digitados neste objeto sãocriptografados e, só são interpretados (vistos) pelo "server", por razões de segurança.Suas principais propriedades são: type, size, maxlength, name e value.type=password : Especifica um campo para entrada de senha. Os dados digitados sãosubstituidos (na tela) por "*".size : Especifica o tamanho do campo na tela.maxlength : Especifica a quantidade máxima de caracteres permitidos.name : Especifica o nome do objetovalue : Armazena o conteúdo digitado no campo.Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect.Ex:<form name="TPassword"><p>Entrada de Senha<input type=password size=10 maxlength=10 name="Senha" value=""></p></form>APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 46 -
  47. 47. Objeto Input HIDDENÉ um objeto semelhante ao input text, porém, invisível para o usuário. Este objeto deve serutilizado para passar informações ao "server" (quando o formulário for submetido) sem que ousuário tome conhecimento. Suas propriedades são: name e value.name : Especifica o nome do objeto.value : Armazena o conteúdo do objetoEx:<form name="THidden"><input type=hidden size=20 maxlength=30 name="HdTexto" value="" ></form></p>Objeto Input CHECKBOXSão objetos que permitem ao usuário ligar ou desligar uma determinada opção.Suas principais propriedades são: name, value e checked.name : Especifica o nome do objetovalue : Especifica o valor que será enviado ao "server" se o objeto estiver ligado (checked).Caso seja omitido, será enviado o valor default "on" .Esta propriedade também serve para ativar comandos lógicos, testando-se a condição de"checked".checked : Especifica que o objeto inicialmente estará ligadoO único evento associado a este objeto é onclick.Ex:No exemplo abaixo, criaremos um objeto input.text e três objetos checkbox. O primeirocheckbox, quando ativado, transformará o texto em caracteres minúsculos. O segundo checkbox,quando ativado, transformará o texto em caracteres maiúsculos. O terceiro checkbox, quandoativado, dará um aviso do conteúdo que será recebido pelo "server" caso o formulário sejasubmetido para este.<SCRIPT>function AltMaiusc () {document.TCheck.Muda.value = document.TCheck.Muda.value.toUpperCase()document.TCheck.Opt1.checked = false}function AltMinusc () {document.TCheck.Muda.value = document.TCheck.Muda.value.toLowerCase()document.TCheck.Opt2.checked = false}</SCRIPT><p><form name="TCheck">Muda Case <input type=text size=20 maxlength=20 name="Muda"> </p><p>Minusculo<input type=checkbox name="Opt1" value="1" checkedonclick="if (this.checked){ AltMinusc() } ">Maiusculo<input type=checkbox name="Opt2" value="2"APOSTILA CURSO – INTRODUÇÃO HTML, JAVASCRIPT E PHP Pagina - 47 -

×