IMPORTANTE: este material não deve ser utilizado como única fonte de estudos. Os alunos deverão estudar toda a matéria vista em aula, realizar as práticas de laboratório e consultar a bibliografia do curso. O que é JavaScript? JavaScript é uma linguagem de programação usada para aumentar a interatividade de páginas Web. Um script JavaScript é um programa incluído em uma página HTML através da tag <SCRIPT>. A tag <SCRIPT> é encontrada com maior freqüência dentro da seção <HEAD> embora possa ser utilizada em qualquer local da página. O que JavaScript é capaz de Fazer? Criar uma interface ativa com o usuário. Validar dados (formulários) Etc. Controlar o navegador (abrir janela, fechar janela, personalizar barra de rolagem, etc) Validar dados (formulários) Etc. JavaScript NÃO É Java! Java é uma linguagem de programação completa, desenvolvida pela Sun Microsystems. JavaScript é uma linguagem de programação restrita, criada pela Netscape. Diferenças entre Java e JavaScript: Java acessa banco de dados, JavaScript não. Java acessa disco, JavaScript não. Java foi desenvolvida pela Sun, JavaScript pela Netscape. Java é uma linguagem compilada, JavaScript interpretada. Semelhanças entre Java e JavaScript: Sintaxe. Orientação a objetos. As duas permitem criar aplicações Web. Se JavaScript não é a mesma coisa que Java, porque possuem nomes semelhantes? 1
Quando a Netscape adicionou capacidades básicas de script ao seu navegador da Web, ela chamou aquela linguagem de LiveScript. Na mesma época, a linguagem Java estava sendo considerada pela mídia como "o próximo grande feita da informática". Quando a Netscape revisou o Navigator para executar applets Java no Navigator 2, ela renomeou o LiveScript para JavaScript,esperando obter um pouco do brilho do Java. Características JavaScript: Interpretada pelo Navegador (depende da tecnologia do lado do cliente). Case-sensitive (diferencia maiúsculo de minúsculo). Palavras reservadas não podem ser usadas como nome de variáveis e funções. Herdou a sintaxe do Java. Outras linguagens script: PHP, JScript, VBScript, etc. A tag <script> <script language="javascript" type="text/javascript" SRC= arquivo.js > Esta é a tag de abertura de script. Ela informa ao navegador que este deve esperar JavaScript em vez de HTML. O atributo language identifica ao navegador qual linguagem de script está sendo usada, e o atributo type define o tipo MINE, informando ao navegador que o script é texto sem formatação organizado como JavaScript. O atributo SRC informa ao navegador que o código JavaScript está em um arquivo externo. Caso o código JavaScript esteja inserido entre a tag SCRIPT na própria página HTML, o atributo SRC deve ser omitido. Encerra o JavaScript e informa que o navegador deve começar a esperar HTML 2
novamente. Escrevendo em um documento HTML com JavaScript <html> <head> <script language="javascript" type="text/javascript"> document.write("escrevendo com JavaScript"); </head> <body> </body> </html> Orientação a Objetos: JavaScript é uma linguagem baseada em orientação a objetos. Objeto: no mundo real, um objeto é alguma coisa que exite como por exemplo uma cadeira, uma bolsa, etc. Para o JavaScript, existem os objetos com que ele lida em navegadores Web, como janelas, formulários, elementos do formulário, dentre outros. Propriedades: os objetos possuem propriedades. As propriedades podem modificar os objetos, e a mesma propriedade pode se aplicar a objetos completamente diferentes. Nome, tamanho, cor são propriedades que podem ser encontradas na maioria dos objetos JavaScript. Métodos: os métodos são as ações que os objetos podem realizar. Imprimir, abrir uma janela, fechar uma janela, são exemplos de ações (métodos) que um objeto JavaScript pode realizar. Eventos: os são ações que o usuário executa enquanto visita a página. Exemplo: entrar na página, sair da página, clicar, passar o mouse, etc. Valores e Variáveis: Um fragmento de informação é um valor e as variáveis são os elementos que contêm essas valores. Existem tipos diferentes de valores e em JavaScript esses tipos são classificados em: Number: qualquer valor numérico. String: caracteres entre aspas. Boolean: tipo lógico (true/false). Null: vazio. 3
Object: qualquer valor associado ao objeto. Function: valor retornado por uma função. Operadores JavaScript Os operadores são símbolos usados para trabalhar com variáveis. Operadores Aritméticos: + soma (números) ou concatena (string) - subtração * multiplicação / divisão % MOD (resto da divisão inteira) -variavel inverte o sinal da variavel variavel++, ++variavel soma um a variavel variavel--, --variavel subtrai um da variavel Exemplo: y=x++ é o mesmo que: y=x; x=-x+1 y=++x é o mesmo que: x = x+1; y=x Operadores de Atribuição: x=y define x com o valor de y x+=y o mesmo que x=x+y x-=y o mesmo que x=x-y x*=y o mesmo que x=x*y x/=y o mesmo que x=x/y x%=y o mesmo que x=x%y Operadores de Comparação (lógicos) == igual!= diferente > maior >= maior ou igual < menos <= menor ou igual 4
&& e ou! não Ocultando script em navegadores antigos Navegadores mais antigos, não reconhecem JavaScript. Embora os navegadores devessem ignorar tudo que está entre tags e eles não reconhecem, nem sempre isso acontece, e algumas vezes, todos os comandos scripts podem ser listados na tela do usuário em forma de texto. Uma forma de resolver esse problema é dizer ao navegador que os comandos scripts são comentários HTML, então, caso o navegador não reconheça a tag script irá interpretar os comandos scripts como comentário HTML. <html> <head> <script language="javascript" type="text/javascript"> <!-- document.write("escrevendo com JavaScript"); --> </head> <body> </body> </html> Definindo uma versão mínima do JavaScript O atributo language da tag script permite especificar a versão mínima do JavaScript de que o navegador necessita para executar o script. <html> <head> <script language="javascript1.3" type="text/javascript"> <!-- código --> </head> <body> </body> </html> 5
Definindo um conteúdo alternativo para navegadores que estão com a execução de script bloqueado. <html> <head> <script language="javascript" type="text/javascript"> <!-- document.write("escrevendo com JavaScript"); --> <noscript> ERRO: Seu Navegador não suporta JavaScript. Para solucionar este problema siga as instruçõe abaixo: 1. Verifique a permissão de execução de script no seu navegador no menu Ferramentas, Opções da Internet, Segurança. 2. Verifique a versão do seu navegador e atualize se for necessário. 3. Entre em contato com seu técnico de informática. </noscript> </head> <body> </body> </html> Inserindo comentário JavaScript <html> <head> <script language="javascript" type="text/javascript"> <!-- // comentário de uma linha /* comentário de várias linhas */ --> </head> <body> </body> </html> 6
Métodos alert, confirm e prompt <html> <head> <script language="javascript" type="text/javascript"> <!-- var nome = prompt("digite seu nome",""); if(confirm("quer ver seu nome?")) alert("seu nome é: "+ nome); --> <noscript> ERRO: Seu Navegador não suporta JavaScript. </noscript> </head> <body> </body> </html> Caracteres especiais \n quebra de linha \t tabulação \' aspas simples \" aspas duplas \\ barra invertida <script language="javascript" type="text/javascript"> <!-- alert("você preencheu seu formulário de forma \'incorreta\', verifique os seguintes campos: \n\t Nome \n\t Endereço"); --> Condicionais São decisões (sim ou não) que o código JavaScript deve tomar quando são executadas. Em cada uma destas condições podemos criar um bloco de 7
comandos que será executado apenas se o resultado da condição for verdadeiro e outro para ser executado apenas quando o resultado for falso. if(condição) bloco de comandos para condição verdadeira else bloco de comandos para condição falsa <script language="javascript" type="text/javascript"> <!-- var idade = prompt("digite sua idade",""); // verifica se o valor digitado é numérico if(isnan(idade)) alert("valor inválido!"); else if(idade>=18) alert("ok, acesse o site."); else alert("você não pode acessar esse site!"); --> OBS: isnan significa is Not a Number e retorna verdadeiro se o valor não for numérico e falso caso contrário. switch(atributo) case valor1: bloco de comandos break; case valor2: bloco de comandos 8
break; default: bloco de comandos <!-- var x=prompt("entre com um número",""); var aux = x%2; switch(aux) case 0: alert("número par"); break; case 1: alert("número ímpar"); break; default: alert("valor inválido"); --> receptor = ((condição)?verdadeiro:falso); <script> sexo = prompt("digite o sexo (M/F)",""); nomesexo=((sexo=="m")?"masculino":"feminino"); alert(nomesexo); Loops Laços lógicos servem para executar mais de uma vez um trecho de código. É importante sempre criar uma forma para o programa sair do laço; caso contrário, é criado um loop infinito que trava o navegador. while(condição) bloco de comandos 9
<script language="javascript" type="text/javascript"> <!-- var idade; // enquanto o usuário não digitar a idade corretamente pergunta a idade. while(isnan(idade)) idade = prompt("digite sua idade",""); alert("sua idade é: "+idade); --> <script language="javascript" type="text/javascript"> <!-- var x=5; while(x>0) document.write(x+"<br>"); x--; --> do bloco de comandos while(condição); <script language="javascript" type="text/javascript"> <!-- var x=5; do document.write(x+"<br>"); x--; while(x>0); --> for(atributo inicial; condição; incremento) 10
bloco de comandos <script language="javascript" type="text/javascript"> <!-- for(i=1;i<=6;i++) document.write("<h"+i+">olá sala!</h"+i+">"); --> Eventos Eventos são ações identificáveis em um sistema (no caso do JavaScript no navegador) Os eventos Javascript, associados as funções, aos métodos e aos formulários, abrem uma grande porta para uma verdadeira interatividade nas páginas. OnLoad: Ocorre quando a página é carregada pelo browser. OnUnload: Ocorre quando o usuário sai da página. OnChange: Ocorre quando um campo que teve seu valor modificado perde o foco. OnBlur: Ocorre quando o elemento perde o foco. OnFocus: Ocorre quando o elemento recebe o foco. OnClick: Ocorre quando o elemento é clicado. OnDbClick: Ocorre quando o elemento é clicado. OnMouseover: Ocorre quando o cursor do mouse passa sobre o elemento. OnSelect: Ocorre quando o elemento é selecionado. OnSubmit: Ocorre quando o formulário é submetido. Exemplo 1: <HTML> <HEAD> </HEAD> <BODY onload="alert('bem Vindo!');" onunload="alert('adeus!');"> Conteúdo da Página </BODY> </HTML> 11
Exemplo 2: <FORM> <INPUT TYPE=text onfocus="alert('isto é um onfocus!')"> </FORM> Exemplo 3: <FORM> <INPUT TYPE="button" VALUE="Clicar" onclick="alert('acaba de clicar no botão')"> </FORM> Objeto Date: Com a função Date() obtemos a data e a hora correntes do computador do usuário no formato: Dia da Semana, Nome do mês, Dia do mês, Hora:minuto:segundo. Exemplo: Mon Sep 15 18:27:55 2008 Para se obter os dados separadamente, existem os seguintes métodos: getdate(): dia do mês (1 a 31) getday(): dia da semana (0 a 6) getmonth(): mês do ano (0 a 11) getyear(): ano (2008) gethours(): hora (0 a 12) getminutes(): minutos (0 a 59) getseconds(): segundos (0 a 59) Exemplo: <script language="javascript" type="text/javascript"> <!-- var data = new Date(); ano = data.getyear(); alert(ano); --> 12
Funções: O que é uma função? Na hora de fazer um programa levemente grande existem determinados processos que se podem 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 se agrupar em uma função, definida para que não tenhamos que repetir uma vez ou outra esse código em nossos scripts, e sim, simplesmente chamamos a função, e ela se encarrega de fazer tudo o que deve. Como se escreve uma função? function NomeFuncao() instruções da função Como chamar a uma função? NomeFuncao() O que são Parâmetros? Os parâmetros se usam para mandar valores à função, com os quais ela trabalhará para realizar as ações. São os valores de entrada que recebem uma função. Por exemplo, uma função que realizasse uma soma de dois números teria como parâmetros a esses dois números. <script> function BoasVindas(nome) document.write("olá " + nome) var x = window.prompt("entre com seu nome",""); BoasVindas(x); Múltiplos parâmetros: 13
Uma função pode receber tantos parâmetros quanto quisermos e para expressá-lo colocam-se os parâmetros separados por vírgulas dentro dos parênteses. Vejamos a sintaxe para que a função de antes receba dois parâmetros, primeiro, o nome a quem saudar e segundo, a cor do texto. <script> function BoasVindas(nome,cor) document.write("<font color=" + cor + ">"); document.write("olá " + nome); document.write("</font>"); var x = window.prompt("entre com seu nome",""); var y = window.prompt("entre com o código hexadecimal para a cor","#"); BoasVindas(x,y); Parâmetros passam-se por valor Para seguir a linha do uso de parâmetros em nossos programas Javascript, temos que indicar que os parâmetros das funções se passam por valor. Isto quer dizer que mesmo que modifiquemos um parâmetro em uma função a variável original que havíamos passado não mudará seu valor. Pode-se ver facilmente com um exemplo. <script> function passoporvalor(meuparametro) meuparametro = 32; document.write("o valor da variavel na função e: "+ meuparametro); var minhavariavel = 5; passoporvalor(minhavariavel); document.write ("o valor da variavel e: " + minhavariavel); Valores de retorno As funções também podem retornar valores, de modo que ao executar a função poderá se realizar ações e dar um valor como saída. Vejamos um exemplo de função que calcula a média de dois números. A função receberá os dois números 14
e retornará o valor da média. <script> function media(valor1,valor2) var resultado resultado = (valor1 + valor2) / 2 return resultado var minhamedia; var x = window.prompt("entre com o primeiro valor",""); var y = window.prompt("entre com o segundo valor",""); x = parsefloat(x); y = parsefloat(y); minhamedia = media(x,y); document.write(minhamedia); Múltiplos Retornos Em uma mesma função podemos colocar mais de um return. Logicamente só vamos poder retornar uma coisa, mas dependendo do que tenha acontecido na função poderá ser de um tipo ou de outro, com uns dados ou outros. Vejamos um exemplo de uma função que retorna zero se o parâmetro passado for par e retorna o valor do parâmetro de este for ímpar. <script> function multiploreturn(numero) var resto = numero % 2 if (resto == 0) return 0 else return numero var resposta var x = window.prompt("entre com um número",""); x = parsefloat(x); resposta = multiploreturn(x); document.write(resposta); Chamando funções com eventos: <html> 15
<head> <script> function exemplo() alert("você clicou no botão"); </head> <body> <input type="button" onclick="exemplo()"> <body> </html> Escopo das variáveis: As variáveis declaradas dentro da função são variáveis locais, ou seja, seu valor só vale para dentro da função. As variáveis criadas fora da função são variáveis globais e podem ser acessadas em qualquer parte do script. Arrays: Nas linguagens de programação existem estruturas de dados especiais que nos servem para salvar informações mais complexas do que simples variáveis. Uma estrutura típica em todas as linguagens é o Array, que é como uma variável onde podemos introduzir vários valores, ao invés de somente um como ocorre com as variáveis normais. Os arrays nos permitem salvar várias variáveis e acessá-las de maneira independente, é como ter uma variável com distintos compartimentos onde podemos introduzir dados distintos. Para isso utilizamos um índice que nos permite especificar o compartimento ou posição ao qual estamos nos referindo. Os arrays foram introduzidos em versões Javascript 1.1 ou superiores, ou seja, somente podemos utilizá-los a partir dos navegadores 3.0. Para navegadores antigos se pode simular o array utilizando sintaxe de programação orientada a objetos. Criação de Arrays O primeiro passo para utilizar um array é criá-lo. Para isso utilizamos um objeto Javascript já implementado no navegador: Array sem nenhum conteúdo: var NomeDoArray = new Array() Array com 10 posições: var NomeDoArray = new Array(10) 16
Inserindo valores em Arrays NomeDoArray[0] = 290 NomeDoArray[1] = 97 NomeDoArray[2] = 127 Lendo valores em Arrays var x = meuarray[0] Tipos de dados nos arrays Nos campos dos arrays podemos salvar dados de qualquer tipo, inclusive salvar tipos distintos em um mesmo Array. meuarray[0] = "Fulano de Tal"; meuarray[1] = 1275; meuarray[2] = true; Longitude dos Arrays Todos os arrays em javascript, além de armazenar o valor de cada uma de suas posições também armazenam o número de posições que têm. Para isso, utilizam uma propriedade do objeto array, a propriedade length. document.write( Tamanho do Array: + meuarray.length) Exemplo1: <script> var meuarray = new Array(2) meuarray[0] = "Colômbia" meuarray[1] = "Estados Unidos" meuarray[5] = "Brasil" for (i=0;i<meuarray.length;i++) document.write("posição " + i + " do array: " + meuarray[i] + "<br>") Para o exemplo acima as posições 2, 3 e 4 serão null ou undefined, dependendo do navegador. 17
Arrays multidimensionais Um array multidimensional é como um contêiner que guardará mais valores para cada posição, ou seja, como se os elementos do array fossem por sua vez outros arrays. Criando arrays multidimensionais Em Javascript não existe um autêntico objeto array-multidimensinal. Para utilizar estas estruturas poderemos definir arrays onde, em cada uma de suas posições haverá outro array. Lendo arrays multidimensionais var x = NomeArray[0][0] Exemplo2: <script> var nome = new Array(3) nome[0] = "Fulano" nome[1] = "Ciclano" nome[2] = "Beltrano" var telefone = new Array(3) telefone[0] = "3333-3333" telefone[1] = "4444-4444" telefone[2] = "5555-5555" var cadastro = new Array(2) cadastro[0] = nome cadastro[1] = telefone for (i=0;i<cadastro.length;i++) for (j=0;j<cadastro[i].length;j++) document.write(cadastro[i][j]) Iniciação de arrays 18
Também podemos iniciar os valores de um array ao mesmo tempo que o declaramos: var diassemana = new Array( Dom, "Seg","Ter","Qua,","Qui","Sex","Sáb") O array se cria com 7 campos, do 0 ao 6 e em cada campo se escreve o dia da semana correspondente. Também podemos criar arrays multidimensionais já com valores iniciais: var cadastro = new Array(new Array ("Fulano","Ciclano","Beltrano"), new Array("3333-3333","4444-4444","5555-5555") ) Funções Intrínsecas JavaScript: As funções intrínsecas são funções já incluídas na própria linguagem JavaScript. eval(): retorna o conteúdo da string. parseint(): transforma string em inteiro. parsefloat(): transforma string em número com ponto flutuante. Exemplo: <script> x=eval("(10+10)*2"); alert(x); y="10.5"; z="10.5"; alert(y+z); y=parseint(y); z=parseint(z); alert(y+z); y="10.5"; z="10.5"; y=parsefloat(y); z=parsefloat(z); alert(y+z); Funções Matemáticas: 19
Math.ceil(num): retorna o próximo inteiro maior que o número. (fica) Math.floor(num): retorna o próximo inteiro menor que o número. Math.round(num): retorna o valor inteiro, arredondado do número. Math.max(num1,num2,...): retorna o maior valor Math.min(num1,num2,...): retorna o menor valor Math.sqrt(num): retorna a raiz quadrada do número Math.random: gera um número aleatóriamente. Exemplo: <script> x=10.6; y=math.round(x); alert(y); // retorna 11 Manipulando Strings: string.length: retorna o tamanho da string. string.charat(posicao): retorna o caracter da posição especificada. string.indexof( string ): retorna o numero da posição onde começa a primeira ocorrência da string. string.lastindexof( string ): retorna o numero da posição onde começa a ultima ocorrência da string. string.substring(x,y): retorna o conteúdo da string que corresponde ao intervalo: x a y-1. string.touppercase(): transforma o conteúdo da string em maiúsculo. string.tolowercase(): transforma o conteúdo da string em minúsculo. escape( string ): retorna o valor ASCII da string precedido de %. unescape( string ): retorna um caracter a partir de um valor ASCII precedido de % Exemplo: <script> 20
x="uniban"; y=x.substring(2,4); alert(y); // retorna ib Objetos JavaScript: Window: É o objeto que ocupa o topo do esquema hierárquico em JavaScript. Propriedades: defaultstatus - Determina o conteúdo padrão da barra de status do browser. Ex: window.defaultstatus="qualquer coisa"; status - Define uma mensagem que irá aparecer no rodapé do browser, em substituição por exemplo, a URL de um link, quando estivermos com o mouse sobre o link. Ex: window.status="qualquer texto"; <html> <head> <script> window.defaultstatus="qualquer coisa"; </head> <body> <a href="#" onmousemove="window.status='qualquer texto' "> link </a> </body> </html> Métodos: alert, prompt, confirm close - Termina a sessão atual do browser. Ex: window.close() open - Abre uma nova sessão do browser. Sintaxe: window.open("url", "Nome", ["características"]) 21
URL - endereço selecionado inicialmente quando da abertura da nova janela. Nome - nome da nova janela, definido pelo programador. Características - série de opções de configuração da nova janela, se especificados devem estar na mesma string, separados por vírulas e sem conter espaços. toolbar=0 ou 1 - barra de ferramentas location=0 ou 1 - barra de endereços status=0 ou 1 - barra de status menubar=0 ou 1 - barra de menu scrollbars=0 ou 1 - barra de rolagem resizable=0 ou 1 - redimensionar width=valor inteiro positivo - largura height=valor inteiro positivo - altura Ex: window.open("arquivo.htm","blank","toolbar=1,location=1,s tatus=1,menubar=1,scrollbars=1,width=320,height=240") Location: Este objeto contém informações sobre a URL da página atual. Propriedades: host - Armazena uma string com o formato "hostname:port" da página HTML atual. Ex: alert('demostração da propriedade host: '+location.host) hostname - Armazena uma string, com o IP da página HTML atual. Ex: alert('demostração da propriedade hostname: '+location.hostname) href - String identica a mostrada na barra "location" do browser. Ex: alert('a URL desta página é: '+ location.href) History: Este objeto armazena todas as URLs das páginas HTML por onde o usuário passou durante a sessão atual do browser. É uma cópia das informações armazenadas na opção Go da barra de menu do Navigator. 22
Propriedades: lenght - Informa a quantidade de páginas visitadas. Ex: history.lenght Métodos: back - Retorna à página anterior, de acordo com a relação de páginas do objeto history. Equivale a clicar o botão back do browser. Ex: history.back() forward - Passa para a próxima página, de acordo com a relação de páginas do objeto history. Equivale a clicar o botão forward do browser. Ex: history.forward() go - Permite que qualquer URL que esteja presente na relação de páginas visitadas do objeto history, seja carregada. Ex: history.go(-1) Existem duas possibilidades para "parâmetro": 1 - parâmetro é um número: Ao definir um número, este deve ser inteiro. Se for positivo, a página alvo está "parâmetro"páginas à frente. Ao passo que se for negativo, a página alvo está "parâmetro" páginas para traz. 2 - parâmetro é uma string: Neste caso, o alvo é a URL que mais se assemelhe ao valor da string definida por "parâmetro". Document: Este objeto armazena todas as características da página HTML, como por exemplo: cor das letras, cor de fundo, figura que aparecerá como papel de parede, etc. Sempre que incluímos alguma declaração no <BODY> do documento, estamos alterando (sem perceber) o objeto Document. Forma geral: <BODY [BACKGROUND="Imagem"] [BGCOLOR="#CorDeFundo"] [FGCOLOR="#CorDoTexto"] [LINK="#CorDosLinks"] [ALINK="#CorDoLinkAtivado"] 23
[VLINK="#CorDoLinkVisitado"] [onload="função"] [onunload="funcao"]> Propriedades: bgcolor - Determina a cor de fundo da página HTML. Ex: document.bgcolor="#000000" fgcolor - Determina a cor das letras em uma página HTML. Esta propridade não altera o que já está impresso na página HTML. Ex: document.fgcolor="#0000ff" alinkcolor - Determina a cor do link enquanto o botão do o mouse estiver pressionado sobre o link. Ex: document.alinkcolor="#ffffff" linkcolor - Determina a cor dos links que ainda não foram visitados pelo usuário. Ex: document.linkcolor = "#00FF00" vlinkcolor - Determina a cor que o link aparecerá após ser visitado. Ex: document.vlinkcolor = "#80FF80" Exemplo: <html> <head> <script> document.bgcolor="#000000"; document.fgcolor="#ff0000"; </head> <body> <a href="#" onmousemove="window.status='qualquer texto' "> link </a><br> texto </body> </html> Métodos: write - Imprime informações na página HTML. 24
Ex: document.write("qualquer coisa" [,variável] [,..., expressão]) writeln - Imprime informações na página HTML e passa para a próxima linha. Em meus testes, esse método não apresentou diferença com relação ao método write. Ex: document.writeln("qualquer coisa" [,variável] [,..., expressão]) Outros Objetos: frames, forms, links, anchor, text fields, textarea, checkbox, password, radio, select, button, reset e submit. Formulários: Focando um objeto: document.form.campo.focus(); Capturando o valor de um objeto: document.form.campo.value; Enviando valor para um objeto: document.form.campo=valor; Validação de campo em branco: if(document.form.campo.value== ) alert( Preencha o campo! ); Validação de campos numéricos idade = document.form.idade.value; if(isnan(idade)) alert( Verifique o campo idade! ); Validação de e-mail (para só conter um arroba): 25
email=document.frm.email.value; if(email.indexof( @ ) == -1 ) alert("verifique o campo e-mail!") Validação radio e checkbox: x = document.frm.campo; aux=false; for(i=0; i<x.length; i++) if(x[i].checked) aux=true; if(aux==false) alert("selecione uma opção!") Desabilitar/habilitar campos: document.form.campo.disabled=true/false; Exibir/ocultar campos em determinada linha da tabela dependendo da opção marcada em outro campo do formulário: Na tabela: <tr style="display:none" id="fav"> Na função chamada ao se clicar em um botão, radio, etc... document.all.fav.style.display = ''; Bloquear ações específicas do teclado e mouse: Na tag Body: <body onkeydown="keydown();"> Na tag SCRIPT: 26
function KeyDown() var ctrl = window.event.ctrlkey; var code = window.event.keycode; //CTRL+P (print) if (ctrl && code==80) alert("ctrl + P bloqueado."); window.event.returnvalue = false; //CTRL+C (copy) else if (ctrl && code==67) alert("ctrl + C bloqueado."); window.event.returnvalue = false; //CTRL+A (select all) else if (ctrl && code==65) alert("ctrl + A bloqueado."); window.event.returnvalue = false; //CTRL+S (select all) else if (ctrl && code==83) alert("ctrl + S bloqueado."); window.event.returnvalue = false; //CTRL+N (New page) else if (ctrl && code==78) alert("ctrl + N bloqueado."); window.event.returnvalue = false; DHTML O que é o DHTML? Dynamic HTML, ou DHTML, é a união das tecnologias HTML, Javascript e uma linguagem de apresentação, como folhas de estilo CSS aliada a um Modelo de Objeto de Documentos, para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web. 27
Atualmente há pelo menos três grandes grupos trabalhando no DHTML: o W3C, que é o responsável pelas versões oficiais da HTML, a Netscape, e a Microsoft. Em relação a especificação oficial, a Netscape e a Microsoft incluíram vários recursos extras que ajudaram ainda mais o DHTML. Sendo assim, esses DHTMLs vão algo além da capacidade de alterar as propriedades das marcações tags HTML dinamicamente. O DHTML da Microsoft, por exemplo, permite que se adicionem efeitos como sombra e néon a imagens dentro de um documento HTML. Outro recurso conhecido como Fontes Dinâmicas (Dynamic Fonts), da Netscape, permite que fontes sejam transmitidas pelo servidor junto com o documento HTML, possibilitando, a qualquer browser que implemente esse recurso, mostrar os caracteres exatamente como planejou o autor do documento. Resumindo, DHTML é um conjunto de ingredientes que proporcionam um maior controle sobre a apresentação do conteúdo de páginas da Web, além de possibilitar a inclusão de componentes multimídia, como animações, diretamente no código HTML, sem a necessidade de plug-ins. O que é um Script de DHTML? Scripts de DHTML são scripts que tiram proveito da tecnologia de DHTML para tornar os sites interactivos. Estes podem ser escritos em várias linguagens, embora os mais populares são JavaScript e VBscript. Qual a diferença entre o script de DHTML e o de JavaScript? Pensa no script de DHTML como uma forma avançada de JavaScript, ambos são escritos usando a linguagem JavaScript. Os scripts de DHTML utilizam e tem acesso as características de DHTML dos browsers de versão 4 e superior, enquanto os de JavaScript não. Qual o browser que suporta melhor o DHTML, e porquê? O Netscape 4+ e o Internet Explorer 4+ suportam o DHTML, embora com algumas diferenças. O Internet Explorer 4 é mais compatível do que o Netscape, visto que é mais completo em DHTML, contem mais filtros e tags. Exemplo de código DHTML para exibir a hora no navegador <html> <head> <title>exemplo DHTML</title> <span id="liveclock" style="position:absolute;left:0;top:0;"> </span> <script language="javascript"> <!-- function show5() 28
if (!document.layers&&!document.all) return var Digital=new Date() var hours=digital.gethours() var minutes=digital.getminutes() var seconds=digital.getseconds() if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds //modifica o tamanho da font aqui myclock="<font size='5' face='arial' ><b><font size='1'>"+hours+":"+minutes+":" +seconds+" </b></font></font>" if (document.layers) document.layers.liveclock.document.write(myclock) document.layers.liveclock.document.close() else if (document.all) liveclock.innerhtml=myclock settimeout("show5()",1000) --> </head> <body onload="show5()"> </body> </html> Fonte do material e todos os créditos: Profa. Ana Carolina Gracioso 29