aplicações e serviços de internet - isutc · exemplo de um documento com seu mapa de objetos...

11/9/18

1

1

Aplicações e Serviços de Internet

Scripting no ClienteJavaScript & DOM

1

2

Controlo de Dados

Conteúdo– JavaScript– DOM

2

11/9/18

2

3

Lado Cliente: Como chamar JavaScript?1. Escrever sua função* e inseri-la na página HTML 2. Escolher qual evento* será a “gatilha” para chamar sua

função à por exemplo: utilizador clicar num certo botão3. Inserir um atributo “onXXX” para chamar sua função, no

tag HTML que vai “receber” o evento à exemplo:<input type=“submit” onclick=“checarIdade()” />

4. Quando chamado, sua função vai manipular os objectos* da página, usando o Document Object Model à ex:

function checarIdade(){if(documento.formPessoa.idade.value < 18){alert(“Voce é criança. Volte em casa!”);

}}

* termos marcados com asterisco são explicados a parte, no “JavaScript Referência”

4

Hierarquia de Objectos do Browser

• O browser instancia um conjunto de objectos que permitem a manipulação em javascript dos vários elementos das páginas carregadas.

• Chamado Document Object Model (DOM)

• Os atributos e métodos do objecto window podem ser acedidos sem referir explicitamente o objecto

Exs: window.document ó document

checkbox

anchorsdocument

locationwindow

forms

images

links

history

buttons

radio

navigator

11/9/18

3

5

Modelo de objetos comum dos browsers Microsoft e Netscape

Window

AreaImageForm

TextAreaHiddenRadioTextResetButton

Option

Submit Imagen Password Checkbox File Select

Link Applet Anchor

Window

HistoryLocationDocument Navigator

ultima janela

janela adicionaiso frames

<form>

<html>

<input type=“objeto”>

<area> <a name><a href> <applet><img>

<select>

<option>

<textarea>

somentebrowserMicrosoft

10..n

1

1 1 1 1

10..n

10..n

objetos fornecidos pelo HTML objetos globais do client-side JavaScript

Navigator

Mimetypes

PlugIn

somente browserNetscape

6

<html><head><title> Mapa </title>

</head><body><form name=“form1”><input type=“text” name=“user” ><input type=“button” name=“bt1”>

</form></body></html>

window

document

button

form

text

location

Exemplo de um documento com seu mapa de objetos

windowwindow.documentwindow.document.form1

document.form1.userdocument.form1.bt1

Como um scriptreferencia os objectosde um documento HTMLUso do atributo “name”(window pode omitirse)

Quando uma pagina é carregada o browser mantém na sua memória um mapa dos objectos gerados pela “tags” HTML no documento

11/9/18

4

7

Manipulação de objetos de HTML

Todos os objectos criados em HTML estão automaticamente disponíveis em JavaScript, mesmo que um nome não seja atribuído a eles.

Os objectos formam um “array” de elementos. Ver cardinalidade no diagrama. Independente do tipo de componente de formulário, eles podem ser acessados na odem em que aparecem através da propiedad elements.

<html><head><title> Mapa </title>

</head><body><form><input type=“text”” ><input type=“button”>

</form></body></html>

documentdocument.forms[0]document.forms[0].elements[0]document.forms[0].elements[1]

8

filha.navigate(“http://google.com”)Mande a janela carregar este novo URL

navigate(“URL”)

if (confirm(“Você tem certeza?”) ) …

Abre janela de diálogo, retorna true caso usuário clique OK

confirm(“msg”)

alert(“Tenha Cuidado!”);Abre uma janela de diálogoalert(“msg”)

prompt(“Digite seu nome:”,””);Abre uma janela de diálogo, e devolve o string digitado caso o usuário clique em OK.

prompt(“msg”)

filha.close();Fecha uma janela close()

filha=open(“http://com/abc.html”);

Abre nova janela com documento indicado por URL. Retorna referência de tipo Window para a janela criada.

open(“URL”)

Descrição ExemploFunção

O objecto windowA janela do browser é manipulável de várias formas com JavaScript. Pode-se alterar dinamicamente suas características como tamanho, aparência e posição, transferir informações entre janelas e frames, abrir e fechar novas janelas e criar janelas de diálogo.

http://google.com/

11/9/18

5

9

quando ocorre um erroonerror

antes que a página seja substituida por outra ou a janela fechada.

onunloaddepois que a página é carregada na janela. onloadquando a janela pasa a ser a janela ativa. onfocusquando a janela deixa de ser a janela ativa onblurDescriçãohandler

O objecto window (eventos)

São aplicáveis aos descritores HTML <BODY> e <FRAME>.Estes eventos podem ser utilizados como “gatilhas” para chamar funções.

10

Objecto location• O objecto location permite aceder às características do URL da

página corrente.

StringStringStringStringTipo

O protocol da URL. protocolO caminho. pathnameO URL completa.href O nome do servidorhostname

DescriçãoAtributo

Carrega a página especificada pela URL. replace(“URL”)

Sem parametro recarrega a página actual caso não tenha sido modificada. Com o argumento true, carrega a pagina incondicionalmente

reload() oureload(true)

DescriçãoMétodo

Veja Exemplo 1 no ASI

11/9/18

6

11

Objecto documentO objecto document representa o documento HTML actual, é uma propiedade de window e por tanto pode ser usado sem fazer referencia a window.

Contém string, usado para ler e armazenar preferencias do usuário no computador do cliente.

r/wcookie

Contém array de objectos Formrforms

Recupera o título do documento.rtitle

Contém objecto location do documento (URL)rlocation

r/w

r/w

r/w

Acesso

Define ou recupera cor de links na páginas.linkColor

Define ou recupera cor do texto na pagina.fgColor

Define ou recupera cor de fundo da página. Pode um strign contendo código hexadecimal ou nome da cor.

bgColorFunçãoPropriedade

Propiedades

12

Objectos linkRepresentam vínculos (referências de hipertexto) criados a partir de um <a href=“URL”>

O acceso a todos os vínculos de um documento é obtido a partir da propiedade links de document.

O nome da janela ou frame onde a URL será exibida

targetO protocol da URL. protocolO caminho. pathnameO URL completa.hrefO nome do servidorhostname

DescriçãoPropriedades

Eventos: onmouseover, onmouseout, onclickMétodos: Não há.

Exemplo 7

11/9/18

7

13

JavaScript: Formularios

Os objetos de formulário consistem de doze objetos, situados abaixo de Form, no modelo DOM. São referências aos tags HTML <input>, <select>, <option> e <textarea>.

Um dos principais uso do JavaScript, é a validação de dados em aplicações Web. Verificar se os campos de um formulário foram preenchidos corretamente antes de enviar os dados a um programa no servidor, economiza bastante conexões de rede desnecessárias.

Reflete o valor do atibuto HTML TARGET.targetReflete o valor do atibuto HTML ENCTYPE.encodingReflete o valor do atibuto HTML NAME.name

Reflete o valor do atibuto HTML METHOD.methodReflete o valor do atibuto HTML ACTION.action

Vector de elementos do formulario. (array)elements


14

Elementos de um formulario

As propriedades do objeto Form incluem todos os elementos de formulário e imagens que estão dentro do bloco <FORM> na página HTML.

Estes objetos podem ser referenciados

• pelos seus nomes – propriedades de Form criadas com o atributo name de cada componente,

• ou através da propriedade elements – vetor que contém todos os elementos contidos no bloco <FORM> na ordem em que aparecem no HTML.

11/9/18

8

15

Elementos de um formulario

Propriedades comuns

Contém o tipo do elemento. Pode ter um dos seguintes valores: select-one, select-multiple, textarea, text, password, checkbox, radio, button, submit, reset, file, hidden

typeReflete o valor do atibuto HTML NAME.name

Referencia ao formuário que contém este elemento (FORM)

form


16

Objectos Form (métodos, eventos)

Tira a seleção do formularioblur()

Seleciona o formulariofocus()

Envia o formulariosubmit()

Reinicializa o formularioreset()

AcçãoMétodo

Eventos: onsubmit, onresetOs eventos acima são sempre tratados antes das ações correspondentes acontecerem.

O código em ONSUBMIT, por exemplo, será interpretado antes que o envio dos dados seja realizado. Se o código JavaScript dentro do ONSUBMIT produzir o valor false, os dados não serão enviados. Isto permite que os dados sejam verificados antes de enviados.

Estes eventos apresentam várias incompatibilidades entre browsers.

11/9/18

9

17

Objectos Button, Reset, SubmitButton, Reset e Submit são todos botões criados em HTML.

Contém o valor do atributo HTML VALUE, que especifica o texto que aparece no botão. Pode ser lida ou alterada

value


Desactiva o botãoblur()

Activa o botãofocus()

Realiza as tarefas programadas para o clique do botão (executa o código JavaScript contido no atributo ONCLICK sem que o botão precise ser apertado

click()

AcçãoMétodo

Eventos: ONCLICK, ONFOCUS, ONBLUR

Exemplo 2 Exemplo 3

18

Objectos Text, Password, Textarea

Os objetos do tipo Password, Text e Textarea são usados para entrada de texto. Possuem as mesmas propriedades. Objetos Text e Password definem caixas de texto de uma única linha enquanto que os objetos Textarea entendem quebras de linha.

Conteúdo do campo de texto. Valor que pode ser redefinidovalue


Desactiva o componenteblur()

Activa o componentefocus()

Selecciona o campo editável do componente (faz o cursor aparecer piscando dentro do campo de texto ou selecciona o texto nele contido.

select()

AcçãoMétodo

Eventos: ONCHANGE, ONFOCUS, ONBLUR,ONSELECT

Exemplo 4

11/9/18

10

19

Objectos Checkbox e RadioOs objetos Checkbox e Radio representam dispositivos de entrada booleanos cuja informação relevante consiste em saber se uma opção foi selecionada ou não. As únicas diferenças entre os objetos Checkbox e Radio são a sua aparência na tela do browser.

Um grupo não é tratado como um elemento de formulário, mas os nomes dos grupos são referências do tipo Array * em JavaScript.

Exemplo 5

20

Comprimento do vector de objectos Radio ou Checkbox. Aplica-se apenas a grupos de elementos identificados pelo nome

length

Conteúdo do atributo HTML VALUE. O valor de esta propriedade pode ser alterado dinamicamente.

value

Retorna true se um Checkbox ou Radio está actualmente ligado. O valor desta propriedade pode ser alterado dinamicamente em JavaScript.

checked

Retorna true se o elemento HTML que representa o objecto contém o atributo “checked” (read only)

defaultchecked


Objectos Checkbox e Radio



Marca (selecciona) o componenteclick()

AcçãoMétodo

Eventos: ONCLICK, ONFOCUS, ONBLUR

11/9/18

11

21

Objectos Select e Option

Um objecto SELECT pode ser visualizado com uma lista instantânea ou como uma lista rolável, sendo que a última permite múltipla selecção.

Um objeto Select pode ter uma ou mais objetos Option, que refletem elementos <OPTION>.

Objetos Select só podem ser criados em HTML. Objetos Optionpodem tanto ser criados em HTML como em JavaScript através do construtor Option(). Desta forma, é possível ter listas que crescem (ou diminuem) dinamicamente.

Exemplo 6

22

Mesma coisa que selectedIndexoption.selectedIndex

Índice da opção actualmente seleccionada. Para listas múltiplas contém o primeiro índice seleccionado.

selectedIndex

Número de objectos contidos no objecto options.length

Vector de objetos Option contidos no objecto Selectoptions

DescriçãoPropriedadesSelect

Objectos Select

11/9/18

12

23

O texto dentro de <option> ... </option> que aparece na lista de opções. Pode ser alterado. Este texto não será enviado ao servidor se existir um atributo VALUE.

text

Contém o conteúdo do atributo HTML VALUE (que contém os dados que serão enviados ao servidor)

value

Retorna true se objecto está seleccionado. Pode ser alterado para seleccionar ou deseleccionar dinamicamente.

selected

Retorna true se o elmento HTML que representa o objeto contém o atributo SELECTED

defaultSelected

Cntém o índice desta opção dentro do vector options do objecto select ao qual pertence

index

DescriçãoPropriedadesOption

Objectos Option

24

Objectos Select e Option



AcçãoMétodo

Eventos: ONCHANGE, ONFOCUS, ONBLUR

11/9/18

13

25

Bibliografía

1. JavaScript (conceitos iniciais), Anderson Pazin, Colégio Salesiano de Lins “Dom Henrique Mourão” www.salesianolins.br/~notas/apostilas/ Ensino_Medio/Anderson/JavaScript.doc

2. Criação de Web Sites III (Material de referencia). Helder da Rocha (Abr 2000). www.supervirtual.com.br/acervo/index(9).html

3. JavaScript (um guia simplificado) ISEL 2001-2002. DEETC Secção de Programação www.deetc.isel.ipl.pt/programação/pg/sildes/JavaScript/Jsguide.ppt

aplicações e serviços de internet - isutc · exemplo de um documento com seu mapa de objetos...

Documents