ÍNDICE HTML 2 Tags (etiquetas) do HTML 2 TAGS PRINCIPAIS 3 TAGS DE CONFIGURAÇÃO DA PÁGINA 3 TAGS DE FORMATAÇÃO DE TEXTOS 3 TAGS DE MUDANÇA DE LINHA 4 TAG DAS HIPERLIGAÇÕES 4 TAG LISTAS 5 OUTRAS TAG 5 Tag <img> 6 Limitações do HTML 7 A linguagem JavaScript 7 COMENTÁRIOS 7 SRC 8 VARIÁVEIS 8 OPERADORES 9 CAIXAS DE MENSAGENS 9 CARACTERES ESPECIAIS 9 ESTRUTURAS DE CONTROLO 10 Funções, propriedades e Eventos 11 FUNÇÕES 11 EVENTOS 11 MANIPULADORES DE EVENTOS 11 Janelas e Documentos 13 OBJECTO WINDOW 13 OBJECTO DOCUMENT 14 Objectos Pré-definidos 15 Formulários (Forms) 18 ATRIBUTOS 18 ENTRADA DE DADOS 19 Css e Layers 21 Applets 23 Sites 24
Gestão de Recursos Partilhados HTML 2 HTML HTML significa Hyper Text Markup Language - Linguagem de Marcação de Hipertexto. HTML é a linguagem tradicional usada para criar páginas WEB com programação de hypertexto (documento com palavras ou imagens que acede a outras páginas com um simples clique). Essa linguagem foi crescendo conforme foram sendo inventados navegadores mais avançados com recursos de imagens, som e vídeo. É a estrutura básica de uma homepage, mas pode ser acompanhada por outros recursos como Java, Flash, etc.. O HTML é uma linguagem com código fonte aberto, isto é, é possível, através dos navegadores, ver a programação HTML da página apresentada. Para isso, basta procurar a opção "Exibir Código Fonte" no navegador e o código HTML será apresentado numa nova janela. Não é possível programar em linguagem HTML, pois é simplesmente uma linguagem de marcação que serve para indicar formatações de textos, inserir imagens e ligações de hipertexto. Os navegadores são os responsáveis por identificar as marcações em HTML e apresentar os documentos conforme o que foi especificado por essas marcações. A principal aplicação do HTML é a criação de páginas na Web. O HTML não é uma linguagem de programação, mas uma espécie de linguagem de formatação, um ficheiro de texto que é formatado através de uma série de comandos, os chamados tags. Para a criação de uma página em HTML não é necessário nenhum software especial. O próprio Bloco de Notas (Notepad) é suficiente para a criação de uma página, no entanto ao gravar terá de escolher o formato html. Depois é só fazer a pré-visualização num browser, como o Internet Explorer. TAGS (ETIQUETAS) DO HTML Aprender HTML é aprender como usar os diferentes tags. TAGS são os comandos utilizados pela linguagem HTML. Todos os tags são inseridos entre o sinal de menor < e maior >, com excepção dos tags que são usados para representar a posição de um objecto Todos os tags de formatação devem ser abertos e fechados, como é abaixo apresentado: <tag> </tag> Todos os tags obedecem a uma hierarquia: <a> <b> <c> </c> </b> </a> (o primeiro a abrir é o último a fechar, e vice-versa). É indiferente utilizar maiúsculas ou minúsculas nos tags : <tag> é igual a <TAG> e a <Tag>. Não é recomendável que os documentos Web contenham acentos.
Gestão de Recursos Partilhados HTML 3 TAGS PRINCIPAIS <HTML>...</HTML> : envolve todas as secções de um documento (HEAD e BODY). <HEAD>...</HEAD> : envolve a secção de cabeçalho do documento. <TITLE>...</TITLE> : indica o título do documento para o Browser. Geralmente os Browsers apresentam este título na barra de título da Janela. <BODY>...</BODY> : envolve a secção de corpo do documento. Aqui fica o conteúdo principal da Home Page. TAGS DE CONFIGURAÇÃO DA PÁGINA Os tags <BODY> e </BODY> contém também algumas configurações da página: BGCOLOR=COR definir a cor de fundo BACKGROUND=IMAGEM definir a figura de fundo TEXT=COR definir a cor do texto LINK=COR definir a cor dos links VLINK=COR - cor dos links já vistos ALINK=COR - cor dos links abertos naquele momento TAGS DE FORMATAÇÃO DE TEXTOS <Hn>... </Hn> - aplica estilos a títulos e subtítulos. Opções de alinhamento: ALIGN= LEFT alinhar à esquerda ALIGN= RIGHT - alinhar à direita ALIGN= CENTER - alinhar ao centro BLINK - piscar. <B>...</B> - Aplica o estilo NEGRITO. <I>...</I> - Aplica o estilo itálico. <U>...</U> - Aplica o estilo sublinhado (nem todos os browser o reconhecem). <SUP>...</SUP> - Faz com que o texto fique sobrescrito. <SUB>...</SUB> - Faz com que o texto fique subscrito. <PRE>...</PRE> - Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado. <FONT> - permite alterar os atributos das fontes de um texto: FACE tipo de letra SIZE tamanho da letra
Gestão de Recursos Partilhados HTML 4 COLOR cor da letra Deve-se utilizar sempre uma fonte conhecida (Arial, Times New Roman ou Verdana) pois ao utilizar fontes diferentes os visitantes podem não tê-las no computador. Pode-se definir mais de uma fonte para o mesmo texto. As fontes devem ser separadas por vírgula e o browser procura, no computador do cliente, qual delas ele possui para apresentar. Exemplo: <FONT FACE= Verdana, Anal, Helvetica > texto </FONT> O comando é o seguinte: <Font face="estilo" size=tamanho color="cor">...</p>. PALETA DE CORES #FF0000 #00FF00 #0000FF Representa o vermelho-puro Representa o verde-puro Representa o azul-puro #550000 Representa um tom de vermelho-escuro #FFCCCC Representa um tom de vermelho bem claro. #CCCCCC Um tom de cinza-claro #FFFFFF Branco #000000 Preto TAGS DE MUDANÇA DE LINHA <P> </P> - delimita um parágrafo, deixando uma linha em branco antes da próxima. <BR> - Faz uma quebra de linha no texto. Não deixa linha em branco antes da próxima. TAG DAS HIPERLIGAÇÕES Em HTML o elemento <a> </a> possibilita definir hiperligações: Para inserir um hyperlink que aponte para outra página: <a HREF= outropagina.html >Outro Página</a> Para alguém enviar um e-mail para uma conta de e-mail: Exemplo: <a HREF= MAILTO:seuemail@hotmail.com >Dúvidas, Críticas e sugestões envie um e-mail</a> Para incluir um assunto Subject para o e-mail. Exemplo: <a HREF= MAILTO:seuemail@hotmail.com?SUBJECT=JavaScript >JavaScript</a> Para incluir uma imagem como hyperlink. <a href="endereço"><img src="imagem.extensão" border=0 width=largura height=altura> </a> (Atribuir o valor 0 ao border, caso não se queira que a imagem tenha limite).
Gestão de Recursos Partilhados HTML 5 Adicionar: TARGET= _NEW - abre o endereço numa nova janela TARGET= _TOP - abre o endereço na mesma janela TARGET="_BLANK" - para que a página (link) se abra noutra janela. Exemplo: <a href="http://www.rafah.hpg.com.br/" target="_blank">rafael Web Site</a>. TAG LISTAS LISTAS NUMERADAS Listas ordenadas, são também denominadas listas numeradas, pois, quando um navegador encontra um tag, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando números, como 1, 2, 3, e assim sucessivamente. <OL> - listas ordenadas <LI> - tag utilizado para cada item da lista LISTAS NÃO ORDENADAS Listas não ordenadas são muito parecidas com as numeradas. A única diferença é o facto de elas não definirem explicitamente uma ordem, como é no caso das numeradas. São formadas por símbolos, que podem ser um círculo, um rectângulo ou círculo preenchido. <UL> - lista não ordenada <LI> - tag utilizado para cada item da lista Atributo TYPE - formata os marcadores da lista. Os valores aceites são: CIRCLE: círculo vazio SQUARE: rectângulo DISC: círculo preenchido, padrão. OUTRAS TAG <!-- [COMENTÁRIO] --> insere um comentário não compilável (executável) pelo browser. Tudo o que for escrito neste tag não será lido, excepto se alguém tiver acesso ao script (texto fonte) da página. <hr size=espessura> - adicionar uma barra à página.
Gestão de Recursos Partilhados HTML 6 TAG <IMG> O tag que manipula imagens é a <IMG>, porém o uso do atributo SRC (abreviatura de sourcedetermina a URL da imagem que se deseja apresentar) é obrigatório, afinal, ele determina a imagem a apresentar. SINTAXE: <IMG SRC= [url da imagem] ALIGN= [center/left/right/top/middle/bottom] WIDTH= [largura] HEIGHT= [altura] VSPACE= [espaçamento vertical] HSPACE= [espaçamento horizontal] BORDER= [borda] ALT= [texto referente] LOWSRC= [url de baixa qualidade] > Os formatos-padrão da Web e aceites por 100% dos browsers são o JPEG (Joint Photographic Experts Group) e o GIF (Graphics Interchange Format) que foram escolhidos por serem compactados, leves e possuírem boa qualidade de resolução. Em geral, imagens GIF são melhores para gráficos e desenhos; imagens JPEG são melhores para fotografia. Isto porque as imagens GIF são constituidas por 256 cores e as imagens JPEG por milhões de cores. Quanto melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é carregada no navegador. Ultimamente o formato PNG (Portable Network Graphics) tem-se tornado cada vez mais popular (principalemente em detrimento do formato GIF). O formato PNG é em vários aspectos melhor que os formatos JPEG e GIF: milhões de cores e efetiva compressão. ATRIBUTOS: Atributo ALIGN- Define o alinhamento da imagem. O alinhamento da imagem no documento HTML pode ser feito em função do: Texto imagem à direita, à esquerda, centrada, ao topo ou ao fundo do texto. Parágrafo imagem à direita ou à esquerda do parágrafo. Atributo WIDTH- Determina a largura da imagem em pixels ou em percentagem da área do browser. Atributo HEIGHT- Determina a altura da imagem em pixels ou em percentagem da área do browser. Atributo VSPACE- Atribui um espaçamento vertical em pixels à imagem.
Gestão de Recursos Partilhados HTML 7 Atributo HSPACE- Atribui um espaçamento horizontal em pixels à sua imagem. Atributo BORDER- Define um limite em torno da imagem, cuja espessura é atribuída em pixels. Atributo ALT- Texto alternativo. Caso não seja possível visualizar a imagem, é apresentado o texto alternativo. Outra vantagem do texto alternativo é que ele é apresentado quando o rato passa sobre a imagem. LIMITAÇÕES DO HTML Não é possível programar em linguagem HTML, pois é simplesmente uma linguagem de marcação que serve para indicar formatações de textos, inserir imagens e ligações de hipertexto. Os navegadores são os responsáveis por identificar as marcações em HTML e apresentar os documentos conforme o que foi especificado por essas marcações A maior limitação do HTML é o facto de ser uma linguagem estática, ou seja, a única interactividade que oferece sem auxílio de outras linguagens são os links entre as páginas. Porém, o HTML é totalmente compatível com inúmeras linguagens que fazem o trabalho pesado por ela, por exemplo, JavaScript, PHP, Asp.Net, etc. A LINGUAGEM JAVASCRIPT Javascript é uma linguagem de script - scripts são miniprogramas interpretados e voltados para execução de tarefas específicas. <script>... </script> - permite adicionar linhas de código, para qualquer linguagem de programação que o browser seja capaz de interpretar. Estas expressões são executadas quando o documento é carregado e poderão introduzir dinamismo ao documento. Através do atributo TYPE podemos indicar qual a linguagem utilizada. Exemplo: <script type= text/javascript >... </script>) neste exemplo, este atributo não é obrigatório, pois por defeito, é assumida a linguagem JavaScript. A linguagem Javascript é case sensitive. Todas as instruções terminam com ponto e vírgula (;). COMENTÁRIOS Existem duas formas de criar comentários no JavaScript: Comentários de uma única linha, utiliza-se //. Comentários em bloco, utiliza-se /* para iniciar um bloco e */para finalizá-lo.
Gestão de Recursos Partilhados HTML 8 SINTAXE: // [linha de comentário] /* [bloco de comentário] */ SRC Um recurso muito útil do script é poder-se criar um arquivo independente da página HTML com os principais scripts e depois criar uma referência em todas as páginas para esse arquivo. Isso ajuda muito a manter um padrão e a reutilizar o código JavaScript. Exemplo: <SCRIPT TYPE= text/javascript SRC= script/ola.js > </SCRIPT> VARIÁVEIS Variáveis são nomes dados aos locais na memória do computador onde alguns dados serão armazenados durante a execução dos scripts. Quando se declara uma variável num script, ela fica guardada na memória até que se feche a janela do script onde se encontra a variável. VAR - para declarar uma variável. SINTAXE: Var o nome da variável (que não pode ter sido declarada mais de uma vez no mesmo código) e o seu valor inicial. ASPAS - o JavaScript aceita tanto as aspas simples quanto as duplas, basta ter o cuidado de não abrir uma sentença com uma delas e fechar com a outra. As aspas devem envolver apenas os textos. Javascript apresenta algumas restrições quanto ao nome de variáveis/funções: Não é permitido colocar espaço em branco Não é permitido incluir um hífen ( - ) Não é permitido colocar os seguintes caracteres:., ;? Embora seja possível usar dígitos, o primeiro carácter tem de ser uma letra Não é permitido utilizar, como nome de uma nova variável/função, as palavras reservadas de Javascript. Em programação, os textos são denominados string e os números são classificados em inteiros e longos (quando possuem casas decimais). TIPOS DE VARIÁVEIS Ao contrário da maior parte das linguagens de programação existentes, em JavaScript as variáveis não têm um tipo específico, ou seja, uma variável pode conter um valor numérico e posteriormente uma expressão.
Gestão de Recursos Partilhados HTML 9 Os tipos de dados das variáveis: NUMÉRICO, TEXTO, BOOLEANO, FUNÇÃO, OBJECTO, ARRAY. VALIDADE DAS VARIÁVEIS É possível declarar variáveis dentro ou fora das funções. Se uma variável for declarada dentro de uma função é caracterizada como variável local e só é visível dentro da função. Se uma variável for declarada fora da função, é possível aceder-lhe pelas funções ou áreas de código existentes no documento HTML, até que a página seja fechada. OPERADORES São os sinais matemáticos e lógicos que ajudam a gerar e manipular as variáveis e tomar decisões no código. Operadores Significado + Soma ou concatenação de string - Subtracção * Multiplicação / Divisão % Resto de uma divisão + + Adiciona 1 -- Subtrai 1 = Atribui um valor a uma variável = = Verifica se dois valores são iguais!= Verifica se dois valores são diferentes > Verifica se um valor é maior que o outro > = Verifica se um valor é maior ou igual ao outro < Verifica se um valor é menor que o outro <= Verifica se um valor é menor ou igual ao outro && E (AND) Ou (OR)! Não (Not) Aritméticos Comparação Lógicos CAIXAS DE MENSAGENS Os principais tipos de caixas de mensagens são: ALERTA apresenta apenas o botão OK alert( [mensagem]) CONFIRMA apresenta a opção de cancelar, além de confirmar - confirm ([mensagem]) PROMPT mostra um campo de entrada de texto - prompt([mensagem], [valor]) CARACTERES ESPECIAIS Alguns caracteres (como as aspas) não são interpretados num texto porque o JavaScript interpreta-os como comandos. Para esses caracteres foi criada uma tabela de comandos que o JavaScript interpreta normalmente. COMANDO CÓDIGO Quebra de linha \n Tabulação \t
Gestão de Recursos Partilhados HTML 10 Aspas simples \ Aspas duplas \ Barra invertida \\ ESTRUTURAS DE CONTROLO CONDIÇÕES São decisões (sim ou não) que o código Javascript deve tomar quando são executadas. Por exemplo: 5 é menor que 8? ou o campo nome está vazio? O IF apresenta uma condição, a qual devolve um valor verdadeiro ou falso. Em cada uma destas condições pode-se criar um bloco de comandos que será executado apenas se o resultado da condição for verdadeiro e outro para ser executado apenas quando o resultado for falso. SINTAXE: IF ([condição]) { [bloco de comando executado para condição verdadeira] } ELSE { [bloco de comando executado para condição falsa] } LOOPS Ou ciclos lógicos, servem para executar mais de uma vez um conjunto de instruções. É importante sempre criar uma forma para o programa sair do ciclo; caso contrário, cria-se um loop infinito que trava o browser. O loop FOR utiliza-se para repetir mais instruções um determinado número de vezes. Entre todos os loops, o FOR costuma ser utilizado quando se sabe o número exacto de vezes que a sentença é executada. SINTAXE: for (iniciação;condição;atualização) { sentenças a executar em cada repetição } O loop WHILE utiliza-se quando se pretende repetir um número indefinido de vezes a execução de sentenças, sempre que se cumpra uma condição. SINTAXE: while ([condição de saída do loop]) { [instrução executada no loop] } O loop DO...WHILE utiliza-se geralmente quando não se sabe quantas vezes será executado o loop, assim como o loop WHILE. Mas, no Do While o loop é executado pelo menos uma vez.
Gestão de Recursos Partilhados HTML 11 SINTAXE: DO { sentenças do loop } While (condição) O loop é executado sempre uma vez e no final testa a condição para saber se executa outra vez o loop ou se termina sua execução. FUNÇÕES, PROPRIEDADES E EVENTOS FUNÇÕES Ao criar um programa existem determinados processos que se pode conceber de forma independente, e que são mais simples de resolver que o problema inteiro. Ademais, estes costumam ser realizados repetidas vezes ao longo da execução do programa. Estes processos podem ser agrupados numa função, definida para que não haja necessidade de repetir uma vez ou outra esse código nos scripts. SINTAXE: function nomefuncao ( )) { instruções da função } Para executar uma função, escreve-se o nome seguido dos parênteses. SINTAXE: NomeDaFuncao() As funções podem ser definidas em qualquer parte da página, mas sempre dentro dos tags <SCRIPT>. No entanto, é preferível defini-las logo no início do programa, para evitar chamá-las antes de estarem definidas. EVENTOS Javascript é uma linguagem dirigida por eventos. Eventos (tais como, clicar no mouse, ou pressionar um botão) são utilizados para controlar a interacção do utilizador com o aplicativo. Manipuladores Javascript são representados como atributos especiais que modificam o comportamento de um tag HTML ao qual são anexados. Atributos de manipulação de eventos começam todos com On e identificam os diversos eventos que podem ocorrer. O valor associado ao manipulador pode ser uma sequência de declarações Javascript, ou uma chamada de função Javascript. MANIPULADORES DE EVENTOS Manipuladores de eventos Javascript servem para interligar um script com actividades do sistema ou acções do utilizador. Eles são divididos em 2 categorias:
Gestão de Recursos Partilhados HTML 12 EVENTOS DE SISTEMA - OnLoad e OnUnload. Não exigem a interacção do utilizador para serem activados. EVENTOS DE MOUSE - OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e OnMouseOver. Exigem a interacção do utilizador para serem activados. ONLOAD Este evento é activado após a página HTML ser completamente carregada. Ele pode ser associado às tags <BODY> ou <FRAMESET>. ONUNLOAD Este evento é activado após a página HTML ser abandonada (seja através do clique sobre algum link, ou sobre os botões de avanço/retrocesso do browser). Ele pode ser associado às tags <BODY> ou <FRAMESET>. ONCLICK O evento mais básico de mouse é tratado pelo manipulador OnClick. Este evento é activado sempre que se dá um clique sobre um objecto que aceita evento de clique de mouse. Objectos que aceitam um evento OnClick são links, caixas de verificação e botões. ONMOUSEOVER Este evento é activado quando o ponteiro do mouse passa sobre um objecto do tipo links ou botões. ONFOCUS O foco ocorre quando um objecto se torna o item em foco. Isto acontece quando o utilizador clicar ou alternar para um objecto específico na página. Este evento pode ser associado aos objectos text, password, textarea e select (definidos pelos tags <INPUT>, <TEXTAREA> e <SELECT>). ONBLUR Este evento é activado quando um objecto deixa de ter foco - quando se muda para outra janela, ou aplicativo, ou quando se passa para outro objecto utilizando cliques do mouse, ou a tecla TAB. Ele é associado aos objectos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>).
Gestão de Recursos Partilhados HTML 13 ONCHANGE Este evento é activado sempre que um objecto perde o foco e o seu valor é alterado. Ele é associado aos objectos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>). ONSELECT Este evento é activado quando o utilizador selecciona (deixa em destaque) parte do texto num dos objectos aos quais está associado. São eles: text, password e textarea (definidos pelos tags <input> e <textarea>). ONSUBMIT Este evento é activado no momento de enviar os dados do formulário. Ele é associado ao objecto form (definido pelo tag <FORM>). JANELAS E DOCUMENTOS OBJECTO WINDOW O objecto Window representa a janela do navegador ou um frame. É criado um objecto window sempre que o navegador encontra um tag <BODY> ou <FRAMESET>. Também são criados objectos para cada frame definida. AS PROPRIEDADES MAIS UTILIZADAS: DEFAULTSTATUS: devolve uma mensagem que será exibida na barra de estado do navegador quando não tiver nenhuma outra. Cuidado para não confundir com a propriedade status, que reflecte mensagens transitórias, adequadas para um certo momento ou acção do utilizador; NAME: representa o nome da janela; SELF: referência à janela ou frame actual; TOP: referência à janela do browser. OS MÉTODOS MAIS UTILIZADOS: ALERT( ): exibe uma mensagem para o utilizador. A string com a mensagem deve ser passada para o método como parâmetro;
Gestão de Recursos Partilhados HTML 14 BACK( ): é equivalente a apertar o botão back do navegador. Ou seja, volta atrás na última navegação feita pelo utilizador; FORWARD( ): tem o mesmo efeito do botão forward do navegador. Ou seja, se o utilizador tiver clicado no botão back para voltar à última página visitada, o forward avança novamente para a página mais recente; OPEN( ): abre uma nova janela. O método recebe como parâmetros uma URL (o endereço da página que vai ficar na nova janela), o nome da janela e uma string com suas características; CLOSE( ): fecha a janela especificada. O Javascript somente pode fechar automaticamente janelas abertas por ele. Caso contrário, aparece uma caixa de confirmação para o utilizador; CONFIRM( ): exibe uma caixa de mensagem para o utilizador com duas opções: OK e Cancel. Caso o utilizador pressione OK, o método devolve true. Caso contrário, false. Ele recebe como parâmetro uma string com a mensagem a ser exibida para o utilizador; PROMPT( ): exibe uma caixa de mensagem e campo para o utilizador entrar com uma string. O método devolve a string digitada pelo utilizador. São aceitos dois parâmetros. O primeiro é uma string com a mensagem a ser exibida e o segundo é o valor padrão da string a ser digitada pelo utilizador. SETTIMEOUT(): estabelece um atraso da mensagem na invocação da expressão, e devolve um identificador que deverá ser guardado numa variável global. Os parâmetros são: expressão, mensagem e argumentos. CARACTERÍSTICAS DO MÉTODO OPEN() HEIGHT: esta propriedade contém a altura, em pixels, da janela do navegador; WIDTH: semelhante à propriedade anterior, porém trabalha com a largura; STATUS: especifica a mensagem a ser exibida na barra de estado do navegador. É muito útil para comunicar ao utilizador pequenas mensagens. MENUBAR: apresenta a barra de menus. SCROLLBARS: apresenta as scrollbars sempre que um documento seja maior que a janela do navegador. TOOLBAR: apresenta a barra de ferramentas do navegador. OBJECTO DOCUMENT PROPRIEDADES: bgcolor- Devolve ou atribui a cor de fundo. Cookie - Devolve ou atribui propriedades, no formato nome/valor, à cookie http associada ao domínio do documento, e armazenada no ficheiro cookie no computador cliente.
Gestão de Recursos Partilhados HTML 15 fgcolor - Devolve ou atribui a cor do texto. IastModified - Devolve a data da última modificação do documento. IinkColor - Devolve ou atribui a cor a uma ligação ainda não visitada. Title - Devolve ou atribui o título a apresentar na barra de título do browser. URL - Devolve ou atribui o URL do documento actual. vlinkcolor - Devolve ou atribui a cor a uma ligação após ser visitada. PRINCIPAL MÉTODO Write() - Adiciona conteúdo ao documento HTML. OBJECTOS PRÉ-DEFINIDOS Javascript considera HTML uma linguagem orientada a objectos, na qual os diversos tags HTML correspondem a diferentes tipos de objectos Javascript. Objecto NAVIGATOR Este objecto dá informações sobre o navegador. Apresenta as seguintes propriedades: appname: devolve o nome do browser do utilizador. Exemplo: navigator.appname = Netscape appversion: devolve a versão do browser e a versão do sistema operacional que está a ser utilizada. [formato: número da versão (plataforma; país)] Exemplo: navigator.appversion = 2.0 (Win95; I) appcodename: devolve o nome do código de desenvolvimento interno do criador de um browser específico. Exemplo: navigator.appcodename = Mozilla useragent: usada em cabeçalhos HTTP para fins de identificação, é a combinação das propriedades appcodename e appversion. Servidores Web usam esta informação para identificar os recursos que o navegador dispõe. Exemplo: navigator.useragent=mozilla/2.0 (Win95; I) Objecto LOCATION Este objecto é utilizado para identificar o documento corrente. Consiste numa URL completa no formato protocolo//servidor:porta/caminho seguidos de?search ou #hash.
Gestão de Recursos Partilhados HTML 16 As propriedades deste objecto são (cada uma de suas propriedades representa uma parte da URL total): protocol: devolve o protocolo de transporte do documento. Exemplo: location.protocol = http: hostname: identifica o nome do computador hospedeiro. port: especifica a porta para o endereço. Esta informação é utilizada apenas se uma porta não-padrão estiver sendo usada. pathname: define o caminho e o nome do arquivo. search: devolve quaisquer comandos de consulta que possam estar embutidos na URL corrente. Valores de search são separados do resto da URL por um sinal de interrogação (? ). Exemplo: location.search = nome=joao hash: devolve quaisquer âncoras que possam ter sido passadas na URL. Valores de hash são separados do resto da URL por um sinal de cardinal ( # ). Exemplo: location.hash = capitulo1 Objecto CHECKBOX Utilizado na construção de caixas de verificação. As propriedades são: value: especifica o valor da caixa. Exemplo: nomeform.nomecheckbox.value = 1 checked: valor booleano que especifica o estado de selecção da caixa (seleccionada ou não-seleccionada). Exemplo: if ( nomeform.nomecheckbox.checked == true ) { funcao(); } defaultchecked: valor booleano que especifica o estado default de selecção da caixa. Objecto RADIO Corresponde a um array de botões, onde todos os botões compartilham a mesma propriedade name. As propriedades são: name: especifica o nome do objecto. checked e defaultchecked: funcionamento idêntico ao definido em checkbox. length: especifica o comprimento do array.
Gestão de Recursos Partilhados HTML 17 Objecto HIDDEN Utilizado para enviar informações quando o formulário é submetido (este objecto não aparece no formulário). As propriedades são: name: especifica o nome do objecto. value: especifica a informação que está a ser passada. Objecto TEXT Utilizado para entrada/saída de dados. As propriedades são: name: especifica o nome do objecto. value: especifica o valor do objecto. defaultvalue: especifica o valor default do objecto. Objecto RESET Utilizado para limpar dados de um formulário. As propriedades são: name: especifica o nome do botão. value: especifica o título colocado na face do botão. Exemplo: document.form.botao.value= novo titulo Objecto SUBMIT Utilizado para intercalar Javascript e outros scripts/programas. As propriedades são: name: especifica o nome do botão. value: especifica o título colocado na face do botão. Objecto BUTTON Utilizado na construção de interfaces. As propriedades são: name: especifica o nome do botão. value: especifica o título colocado na face do botão. Objecto TEXTAREA Utilizado para entrada/saída de dados. As propriedades são: name: especifica o nome do objecto. value: especifica o valor do objecto.
Gestão de Recursos Partilhados HTML 18 defaultvalue: especifica o valor default do objecto. Objecto SELECT Utilizado para construir caixas de seleção. As propriedades são: name: especifica o nome do objecto. options: array que contém uma entrada para cada opção de uma caixa de selecção. length: especifica o comprimento do array de opções. FORMULÁRIOS (FORMS) A linguagem HTML também permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botões e passando informações. Por exemplo, um site com um Guest Book (formulário) que permite aos visitantes dar opiniões. Essas informações, devem ser tratadas por programas, denominados scripts, que podem armazená-las para uma posterior utilização. Os scripts podem ainda devolver um outro documento HTML, uma URL, ou algum outro tipo de dado para o cliente. O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele permite de uma maneira agradável e familiar recolher dados do utilizador através da criação de formulários com janelas de entrada de textos, botões, etc. É preciso ter em mente que o FORM recolhe dados, mas não os processa - os scripts é que são responsáveis por isso. É aí que entra a necessidade da interface CGI. Tal interface, permite que o servidor comunique com o script que vai actuar sobre essas informações, devolvendo os resultados para o navegador. Para criar um formulário, utiliza-se os tags <FORM> </FORM>. Todos os outros comandos, devem ficar dentro destes Tags. ATRIBUTOS NAME define o nome do formulário. METHOD define o método de envio de dados. Aceita os valores: GET os dados serão enviados pela URL da página. POST os dados serão enviados por meio de uma variável de ambiente (o utilizador não vê este processo). ACTION determina a URL de destino da informação.
Gestão de Recursos Partilhados HTML 19 ENTRADA DE DADOS O tag <INPUT> especifica uma variedade de campos editáveis dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas de texto, etc.), o nome da variável associada com o dado da entrada, o alinhamento e o campo do valor mostrado. SINTAXE: <INPUT TYPE= [tipo] NAME= [nome] ID= [identificador] VALUE= [valor padrão] SIZE= [tamanho] MAXLENGHT=[limite de caracteres] SRC= [URL] CHECKED READONLY DISABLED TABINDEX= [sequencia] ACCESSKEY= [tecla de atalho] > Os ATRIBUTOS do INPUT são: TYPE- determina o tipo de entrada de dados. Os valores válidos são: text: entrada de texto. Permite que um texto seja digitado apenas numa linha. Utilizado para entrada de nome, endereço, e-mali, telefone, etc. hidden: campo oculto. Permite que um dado seja submetido sem que o utilizador o veja no formulário. Utilizado para enviar dados como código de acesso, id do utilizador ou qualquer informação importante para o programa, mas que não precisa de interacção com o utilizador. password: entrada de senha. Funciona como o campo text, mas não apresenta os dados digitados. No lugar deles são apresentados asteriscos. <INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6> file: entrada de arquivo. Por meio desse campo é possível fazer upload de arquivos. Ele só funciona se o atributo ENCTYPE estiver com o valor multipart/form-data. submit: botão de envio. É o responsável por enviar o formulário para o seu destino. Exemplo: <INPUT TYPE="SUBMIT" VALUE="enviar"> Resultado: reset: botão de reset. Serve para limpar todos os dados inseridos pelo utilizador. Exemplo: <INPUT TYPE="RESET" VALUE="Limpar"> Resultado: checkbox: caixa de múltiplas opções. Permite que o utilizador responda a questões de múltipla escolha, ou seja, com mais de uma resposta.
Gestão de Recursos Partilhados HTML 20 Exemplo: <INPUT TYPE="CHECKBOX" NAME="Netscape" VALUE="net">Netscape<p> <INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp">Internet Explorer<p> <INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos">Mosaic<P> <INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot Java<P> Resultado: radio: caixa de opções simples. Possibilita que o utilizador responda a questões de múltipla escolha, em que escolhe apenas uma resposta. Exemplo: <INPUT TYPE="RADIO" NAME="Gostou desta home page?" VALUE="sim">sim<p> <INPUT TYPE="RADIO" NAME="Gostou desta home page?" VALUE="nao">não<p> Resultado: Gostou desta home page? button: botão genérico. Utilizado normalmente para executar funções em linguagens client-side como JavaScript ou vbscript. image: botão imagem. Funciona como um botão genérico, a diferença é que se associa uma imagem a ele. NAME - Atribui um nome ao dado. Esse campo é obrigatório, o qual identifica a informação enviada. ID - é um atributo de identificação que não serve apenas nos tags de formulário. Pode-se atribuir uma identificação a praticamente todos os tags HTML. VALUE- atribui ao campo um valor-padrão. Para os tipos text e password eles são opcionais, para os tipos hidden, checkbox e radio eles são obrigatórios, nos botões submit, reset e button é neste atributo que se insere o texto que será apresentado no botão (se não utilizá-lo, o botão aparece com o mesmo nome do seu tipo). SIZE determina o tamanho da entrada de texto em caracteres. Pode ser utilizado nos tipos text, file e password. MAXLENGHT- determina o nº máximo de caracteres que pode ser digitado numa entrada de texto. Pode ser utilizado nos tipos text, file e password. SRC define a URL da imagem para o botão do tipo image. TABINDEX determina a sequência que o navegador respeitará quando o utilizador pressionar a tecla TAB.