DHTML tópicos Hamilton Lima - 2002-2004 Conteúdo 1. meu primeiro script... 2 2. DOM Document Object Model...2 3. tipo de execução de scripts...2 4. resposta a um evento... 3 5. tipos de dados, variaveis e escopo...3 escopo...3 6. conversão de dados... 4 7. operadores... 4 8. estruturas de controle... 4 if...4 for... 4 9. criação de arrays...4 10. manipulação de janelas... 5 11. adicionais para interface com usuário... 5 12. navegabilidade...5 13. alterações do documento... 6 14. manipulacao de formulários...6 15. manipulação de alguns elementos do formulario...6 16. passagem de parametros por referencia...7 16. envio de formulário... 8 17. adicionar tags para definição de estilos em uma página... 8 18. modificação de estilo através do javascript...9 19. identificação da janela que chamou... 9 Página 1
1. meu primeiro script <script language="javascript"> document.write(navigator.appname + "-" + navigator.appversion ) </script> <body></body> 2. DOM Document Object Model estrutura padrão de objetos acessíveis via programacao +----------------------------------+ window +----------------------------------+ frame self top parent +---------------+------------------+ +------------+-------------+ history document location +------------+-------------+ link form anchor abaixo do form : text, textarea, password, radio, checkbox, submit, button, reset, select / option Página 2
3. tipo de execução de scripts imediatos = que são executados, independente da existência de um evento a ser tratado adiados = são executados, para tratamento de algum evento, ou executados a partir de uma tratador de eventos exemplo: <script language="javascript"> function feito(){ alert("pagina terminou de carregar") </script> <body onload="feito()"></body> os scripts podem ser embutidos na página, ou podem estar armazenados em um arquivo com a extensão.js o conteúdo destes arquivos deve conter somente o código javascript sem as tags iniciais e finais de <script> e o arquivo é chamado usando: <script src="arquivo.js"></script> 4. resposta a um evento para escrever um tratador de eventos basta incluir como atributo da tag o nome do evento a ser tratado seguido de igual abre aspas o nome da função a ser chamada com eventuais parametros as serem enviados para o tratador do evento exemplo: <body onload="feito()"> <input type="text" onchange="alterar(this)"> Página 3
5. tipos de dados, variaveis e escopo tipos de dados possiveis, apesar de nao haver declaracao de dados explicita string, numeros, true/false, null, Objetos, função um variavel eh declarada desta forma: var variavel = valor -- observar que a incicialização da variável ( = valor ) é opcional escopo quando uma variavel é declarada fora de uma função a mesma tem escopo de toda a pagina, porém quando a mesma é declarada dentro de uma função a mesma somente é visível dentro da função. caso haja sobreposição de nomes, prevalece a da função (dentro da função) 6. conversão de dados observar que : 3 + 3 + "3" = 63 para realizar a operacao seria necessario executar: 3 + 3 + parseint("3") = 9 além da conversão para inteiros, pode ser usado também a conversão para números de ponto flutuante, usando a função parsefloat() 7. operadores == igual!= diferente > < >= <= Página 4
8. estruturas de controle if if ( expressão que retorna boolean ) { else { for for( var i = 0; i < limite; i ++ ){ ' se necessario interromper usar : break 9. criação de arrays vale observar que um array é um objeto, veja estes exemplos: var lista = new Array[ 23 ] document.forms[0] o atributo length permite identificar o tamanho do array 10. manipulação de janelas var janela function nova(){ janela = window.open( "texto.html", "nome", "height=100,width=300" ) -- observar que o metodo close() nao é chamado de imediato, antes é testado se uma janela foi criada, e após fechar a janela a mesma é removida da variável através de atribuição do valor null function fechar(){ if ( janela ){ janela.close() janela = null a tag <body> pode possuir tratadores de eventos para onload e onunload que são executados respectivamente ao carregar a pagina e ao fechar Página 5
11. adicionais para interface com usuário alterando a status bar : onmouseover="window.status='este é um exemplo'; return true" exibir um valor para usuário: alert("texto") ou document.alert("texto") solicitar confirmação do usuário var resposta = confirm("confirma exclusão?") if ( confirm("confirma exclusão?") ){ 'executa... receber um input do usuário var resposta = prompt("confirma exclusão?") 12. navegabilidade alterar o endereço da página atual location.href = "novo endereço" voltar para página anterior history.back() avançar para próxima página na pilha de navegação history.foward() 13. alterações do documento podemos alterar a barra de titulo da janela da pagina, o conteúdo da mesma ou ainda abarra de status document.title = altera o titulo da janela document.write("") = permite escrever dentro da página document.status = altera a mensagem do rodape da pagina -- estes recursos podem ser usados em outra janela desde que seja informada a referencia da janela a ser alterada -- em scripts adiados o write("") limpa o documento -- após o uso de vários write("") deve ser usado o comando close() Página 6
14. manipulacao de formulários -- permite alterar o conteudo da action de um formulario document.forms[0].action = "pagina.php" -- recupera um referencia ao forumlário var formulario = document.forms[0] -- recupera o tamanho do array de elementos de um formulario form.elements.length -- exemplo para limpar todos editores texto de um form for( var n = 0; n < form.elements.length; n ++ ){ if ( form.elements[n].type == "text" ){ form.elements[n].value = "" 15. manipulação de alguns elementos do formulário check box forms[0].check.checked = true / false grupo de radio button forms[0].radio.length = comprimento da lista forms[0].radio[0].checked = indica se o mesmo esta selecionado ou nao forms[0].radio[0].value = indica o valor do radio button combobox forms[0].selecao.options[n].text = texto a ser exibido no item do combo forms[0].selecao.options[n].value = valor do item do combo forms[0].selecao.selectedindex = posicao atualmente selecionada text forms[0].texto.value = "ola" um <select> pode possuir por exemplo um tratador de eventos onchange que será executado quando o valor selecionado do combobox for alterado Página 7
16. passagem de parametros por referência o uso do parametro this permite a passagem por referencia do objeto que está sofrendo o evento. no exemplo abaixo, ao clicar em b1 sera exibido o valor do mesmo, pois a variavel botao, recebera um referencia ao botao b1, quando clicado o botao b2 da mesma forma ocorrerá, sendo exibido o valor do botão 2 exemplo: <script language="javascript"> function aviso(botao){ alert(botao.value) </script> <body> <form name="f"> <input type="button" name="b1" value="opcao 1" onclick="aviso(this)"> <input type="button" name="b2" value="opcao 2" onclick="aviso(this)"> </form> </body> neste outro exemplo, atraves da implementacao de somente um metodo será determinado que todo o conteudo dos editores chamados txt1 e txt2, será maiúsculo <script language="javascript"> function upper(texto){ texto.value = texto.value.touppercase() </script> <body> <form name="f"> <input type="text" name="txt1" onchange="upper(this)"> <input type="text" name="txt2" onchange="upper(this)"> </form> </body> Página 8
16. envio de formulário o envio de um formulário pode ocorrer de duas maneiras: a. com a chamada da função submit() do formulário ( forms[0].submit() ) b. através de um botao "submit" o envio de um formulário é tratado pelo evento onsubmit do formulário, caso este evento retorne true a submissão continua, caso retorne false a submissão é interrompida. veja o exemplo que nao permite o envio do formulario caso o editor nome nao esteja preenchido <script language="javascript"> function verificar(){ if( document.f.nome.value == "" ) { alert("nome nao pode ser vazio") return false return true </script> <body> <form name="f" onsubmit="return verificar()"> <input type="text" name="nome"> <input type="submit" name="b2" value="enviar"> </form> </body> 17. adicionar tags para definição de estilos em uma página as informações de estilo podem ser adicionadas entre tags <style> </style> ou em um arquivo separado, usando a tag <link> dentro da tag como segue o exemplo: <title>titulo da pagina</title> <link ref="stylesheet" type="text/css" href="arquivo.css"> e conteudo abaixo eh um exemplo de conteudo de um arquivo.css.par{ background-color : #FFEFD5;.impar{ background-color : #FAF0E6;.atual { background-color : #D2B48C; Página 9
que poderia estar entre tags de <style> <style>.par{ background-color : #FFEFD5;.impar{ background-color : #FAF0E6;.atual { background-color : #D2B48C; </style> 18. modificação de estilo através do javascript o exemplo abaixo ilustra como o estilo aplicado aum elemento de html pode ser alterado através de programação com javascript, estas alterações que determinam a essencia do DHTML, ou seja a possibilidade de alteração do comportamento visual através de programação executada no browser cliente. exemplo: <link rel="stylesheet" type="text/css" href="estilo.css"> <body> <table> <tr> <td onmouseover="this.classname='atual'" onmouseout="this.classname='par'" class="par">primeira</td> <td onmouseover="this.classname='atual'" onmouseout="this.classname='par'" class="par">primeira</td> </tr> <tr> <td onmouseover="this.classname='atual'" onmouseout="this.classname='impar'" class="impar">primeira</td> <td onmouseover="this.classname='atual'" onmouseout="this.classname='impar'" class="impar">primeira</td> </tr> </table> </body> 19. identificação da janela que chamou o objeto opener mantem o objeto que chamou a janela atual, é possível portanto manipular conteudo de componentes no formulario de origem opener.document.forms[0]... Página 10
prova de DHML aplicada em 2002-2 (Unicarioca) 1. escreva uma rquivo html que ao abrir, abra uma nova janela de largura 100 e altura 150 contendo um arquivo chamado promocao.html e este arquivo deve possuir fundo vermelho 2. crie um formulário de simulação de seguros onde o usuários deve informar o tipo do carro e o ano do carro, os calculos do seguro devem seguir as seguintes regras : se tipo do veículo for Fiat e ano até 1980o valor do seguro é R$ 100,00 a tabela abaixo descreve as demais situações Até 1980 Após 1980 Fiat R$ 100,00 R$ 200,00 Volks R$ 120,00 R$ 220,00 Ford R$ 130,00 R$ 230,00 Deve existir um botão calcular que le os valores informados e exibe o valor do seguro em uma caixa de texto. Página 11