Notas de aula – Introdução à Tecnologia Web – Segundo semestre 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, Validar dados (formulários) Etc.

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. Pergunta: Se JavaScript não é a mesma coisa que Java, porque possuem nomes semelhantes? Resposta: 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"> 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. </script> Encerra o JavaScript e informa que o navegador deve começar a esperar HTML novamente. Escrevendo em um documento HTML com JavaScript <html> <head> <script language="JavaScript" type="text/JavaScript"> document.write("Escrevendo com JavaScript"); </script> </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.

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 && 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"); --> </script> </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 --> </script> </head> <body> </body> </html> 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"); --> </script> <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 */ --> </script> </head> <body> </body> </html> 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); } --> </script> <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"); --> </script> 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 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érco 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!"); } } --> </script> 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 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");

} --> </script> 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 } <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> <script language="JavaScript" type="text/JavaScript"> <!-var x=5; while(x>0){ document.write(x+"<br>"); x--; } --> </script> 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); --> </script> for(atributo inicial; condição; incremento){ bloco de comandos } <script language="JavaScript" type="text/JavaScript">

<!-for(i=1;i<=6;i++){ document.write("<h"+i+">Olá sala!</h"+i+">"); } --> </script> Exercício: Escreva um script que leia um número, calcule seu fatorial e exiba na tela. Resposta: <script language="JavaScript" type="text/JavaScript"> <!-var num=eval(prompt("Entre com um número","")); var res = 1; for(i=num;i>1;i--){ res *= i; } alert(res); --> </script> 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 said a página. OnChange: Ocorre quando o valor de um campo é modificado. OnBlur: Ocorre quando o elemento perde o foco. OnFocus: Ocorre quando o elemento recebe o foco. OnClick: 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> 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 31) getMinutes(): minutos (0 a 31) getSeconds(): segundos (0 a 59) Exemplo: <script language="JavaScript" type="text/JavaScript"> <!-var data = new Date(); ano = data.getYear(); alert(ano); --> </script> 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); </script> Múltiplos parâmetros: 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); </script> 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. Podese 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); </script> 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 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",""); x = parseFloat(x); var y = window.prompt("Entre com o segundo valor",""); y = parseFloat(y); minhaMedia = media(x,y); document.write(minhaMedia); </script> 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); </script> Chamando funções com eventos: <html> <head> <script> function exemplo(){ alert("Você clicou no botão"); } </script> </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) 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>") } </script> Para o exemplo acima as posições 2, 3 e 4 serão null ou undefined, dependendo do navegador. 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]) } } </script> Iniciação de arrays 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); </script> Funções Matemáticas: Math.abs(num): retorna o valor absoluto de um número. Math.ceil(num): retorna o próximo inteiro maior que o número. 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.pow(base,expoente): retorna o cálculo do exponencial. 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.sin(num): retorna o seno de do número. Math.asin(num): retorna o arco seno de um número Math.cos(num): retorna o cosseno de um número. Math.acos(num): retorna o arco cosseno de um número. Math.tan(num): retorna a tangente de um número.

Math.atan(num): retorna o arco tangente de um número. Math.pi: retorna o valor de PI (3.14159) Math.log(num): retorna o lagaritmo de um número. Math.E: retorna a base dos logaritmos naturais (2.718) Exemplo: <script> x=10.6; y=Math.round(x); alert(y); // retorna 11 </script> 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> x="Uniban"; y=x.substring(2,4); alert(y); // retorna ib </script> Move Condicional receptor = ((condição)?verdadeiro:falso); Exemplo: <script> sexo = prompt("Digite o sexo (M/F)",""); nomesexo=((sexo=="M")?"Masculino":"Feminino"); alert(nomesexo); </script>

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"; </script> </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. Ex: window.open("URL", "Nome" , ["características"]) 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,status=1,menubar=1,scrollbars=1,w

idth=320,height=240") Location: Este objeto contém informações sobre a URL da página atual. Forma geral: location.propriedade location.metodo()

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. Forma geral: history.propriedade history.método

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(parâmetro) 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 incluimos 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"] [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"; </script> </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. 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]) Eventos: onLoad, onUnload 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 if(document.form.campo.value==””){ alert(“Preencha o campo!”); } Validação de e-mail: email=document.frm.email.value; if(email!=""){ aux=false;

for(i=0; i<email.length; i++){ if(email.charAt(i)=="@"){ aux=true; } } } if((email=="") || (aux==false)){ 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: 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; } }

Sign up to vote on this title
UsefulNot useful