Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • JavaScript Avançado

    Încărcat de

    valpmg
    93 vizualizări21 pagini

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    93 vizualizări21 pagini

    JavaScript Avançado

    Încărcat de

    valpmg

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 21

    JavaScript Avanado

    Para ir mais alm da construo de pequenos programas que realizam funes muito simples, e comear a desenvolver aplicaes realmente teis em termos de World Wide Web, necessrio saber noes sintcticas de natureza mais avanada: as que se relacionam com a utilizao de objectos e as que esto mais directamente relacionadas com as funes.

    Funes
    O cdigo JavaScript habitualmente dividido em funes, ou seja, em blocos de cdigo. Uma funo permite agrupar uma poro de expresses JavaScript num bloco, designado por um determinado nome, e pronto para ser utilizado em qualquer zona do cdigo principal. Quando o nome da funo for utilizado no cdigo do programa, a funo executada. Uma funo declara-se com a seguinte sintaxe: function nome (parmetros) { expresso1; expresso2; expressoN return(valor); } A funo identificada pelo nome que tem e pode ser definida com um conjunto de parmetros (valores) que so passados para o interior da funo, na altura da chamada da funo. Estes parmetros so utilizados como vulgares variveis no interior da funo. Para alm da execuo das expresses colocadas no interior da funo, esta tambm pode devolver um determinado valor para a expresso que chamou a funo, atravs da instruo return. No exemplo da sintaxe anterior, o valor devolvido o contido na varivel "valor". As funes em JavaScript so utilizadas com dois objectivos: o primeiro a estruturao do cdigo, por forma a que este seja organizado de forma eficiente e prtica, a criao de funes evita, muitas vezes, a reescrita de cdigo, por haver reutilizao das linhas de cdigo existentes no corpo da funo. O segundo objectivo o associar de funes JavaScript a acontecimentos ocorridos na pgina Web, denominados eventos. Vejamos um exemplo de declarao e utilizao de uma funo em JavaScript. <script language="JavaScript"> function soma ( x, y ) { var sum; sum = x+y; return (sum); } var total = soma(5,4); document.write("Resultado da soma: ", total); </script> A funo est definida no topo do script, contudo, s chamada no final, no corpo principal do cdigo do programa. A chamada funo (total=soma(5,4)) feita passando como parmetros os valores "5" e "4", que so colocados nas variveis "x" e "y", internas funo em causa (no so conhecidas fora do corpo da funo e que, como parmetros fixos que so, no podem ser modificados no interior da funo. Igualmente interna funo soma() a varivel "sum", cujo valor por fim devolvido para o exterior da funo, utilizando para tal a instruo "return(sum)". O valor devolvido colocado na varivel "total", que foi utilizada na expresso de chamada da funo. A reutilizao de cdigo pode ser demonstrada com o exemplo seguinte. Nele utilizada uma funo "fact()", que simplesmente calcula o factorial de um nmero. Neste exemplo pretende-se calcular todos os factoriais de nmeros entre 1 e 10, bem como dar a oportunidade de calcular o factorial de um nmero escolha: <script language="JavaScript"> function fact(num) { var res=1; for (var k=num; k>=1; k--) { res *= k; } return(res); } // // // // Funo de Calculo do Factorial Varivel que vai conter o resultado final Clculo do factorial Expresso reduzida da multiplicao

    // Programa principal for (var k=1; k<=10; k++) { // Clculo dos factoriais entre 1 e 10 document.write(k, "! = " , fact(k), "<br/>"); } var x; x=prompt("Outro factorial a calcular:"); document.write(x, "! = " , fact(x)); </script>

    A utilizao da funo fact() para calcular os factoriais dos nmeros de 1 a 10 e depois a utilizao da mesma funo para calcular o factorial do nmero entrado pelo utilizador, permite efectuar reutilizao de cdigo, urna vez que a alternativa seria escrever duas vezes a rotina de clculo do factorial. Outro exemplo de escrever o mesmo cdigo seria: <html> <head> <title>Factorial</title> <script language="JavaScript"> function fact(num) { var res=1; for (var k=num; k>=1; k--) { res *= k; } return(res); } // Programa principal function main() { for (var k=1; k<=10; k++) { // Clculo dos factoriais entre 1 e 10 document.write(k, "! = " , fact(k), "<br/>"); } var x; x=prompt("Outro factorial a calcular:"); document.write(x, "! = " , fact(x)); } </script> </head> <body> <h3>Clculo do Factorial</h3> <script language="JavaScript"> main(); </script> </body> </html> Neste caso, o cdigo JavaScript foi colocado no cabealho (header) da pgina HTML, sob a forma de funes, estando a funo principal (main()) tambm residente nessa zona. O corpo da pgina HTML contm, neste exemplo, apenas a invocao da funo main(). Em muitas circunstncias, a forma corno se integram scripts em pginas HTML ser por recurso aos chamados eventos, ou seja, execuo de funes de cdigo corno resposta a determinadas ocorrncias numa pgina (por exemplo, um clique de rato), // // // // Funo de Calculo do Factorial Varivel que vai conter o resultado final Clculo do factorial Expresso reduzida da multiplicao

    // Fim da funo

    Objectos, Arrays e Mtodos


    Objectos:
    Os objectos so dos assuntos mais falados em linguagens de programao. Existem hoje variadssimas linguagens orientadas a objectos, ou seja, que tm a capacidade de organizar os dados segundo uma estrutura baseada em entidades que modelam elementos fsicos do mundo real: os objectos. Estes no so mais do que agrupamentos de dados, embora esse agrupamento seja feito de uma forma muito lgica e organizada. Conforme foi j referido, o JavaScript urna linguagem baseada em objectos e no orientada a objectos corno, por exemplo, o Java. Isto deve-se ao facto de faltarem, no JavaScript, os mecanismos para a criao de classes (entidades que servem de modelo para a criao de objectos) e herana de caractersticas das classes, mecanismos esses existentes nas linguagens orientadas a objectos. Um objecto em JavaScript constitudo por um conjunto de propriedades que de alguma forma o identificam. A definio de um objecto faz-se utilizando para tal uma funo denominada construtora, que tem o mesmo nome do objecto que ela define e que contm no seu interior a definio das respectivas propriedades. Para melhor entender este conceito, vejamos um exemplo de definio de um objecto veculo, que contm as caractersticas: marca, modelo, ano_matricula e cilindrada. A funo construtora utilizada tem o mesmo nome do objecto a definir: function veiculo(a,b,c,d) { this.marca = a; this.modelo = b; this.ano_matricula = c; this.cilindrada = d; Os parmetros passados para o interior do objecto so "a", "b", "c" e "d", que vo ser aplicados s diversas propriedades do objecto em causa (marca, modelo, ano da matricula e cilindrada). A palavra reservada "this" utilizada para fazer referncia ao objecto "corrente".

    A sintaxe acima descrita faz apenas a definio de um objecto, no efectua a criao de nenhum objecto concreto. Para criar um objecto, utiliza-se a palavra reservada new, chamando a funo construtora correspondente: var carro1 = new veiculo("Porche","Carrera","1998",2400); var carro2 = new veiculo("BMW","530","2004",2600); Os nomes dos objectos ("carro1" e "carro2") so tratados corno qualquer varivel e, portanto, existe a necessidade de serem declarados com a instruo "var", Ao efectuar a criao dos objectos, so passados como parmetros os valores necessrios para serem aplicados correspondentemente s diversas propriedades declaradas na funo construtora do objecto. A referncia a qualquer das propriedades de um determinado objecto faz-se recorrendo seguinte sintaxe: nome_do_objecto.propriedade Se, por exemplo, quisssemos enviar para o ecr a propriedade cilindrada do objecto do carro1, Utilizaramos para tal a seguinte notao: document.write("Cilindrada = ",carro1.cilindrada); Repare-se que o prprio "document.write" a utilizao de um mtodo "write",de um objecto "document. Deve-se ter um cuidado muito especial quando se atribui valores aos atributos de um objecto. Naturalmente que, durante a atribuio do valor a uma varivel, como lgico em JavaScript, no feita nenhuma verificao de tipos. Isso significa que a declarao da cilindrada pode ser 2400 e 2600 ambas so possveis e aceites, apesar de na primeira a cilindrada aparecer como uma String e na segunda surgir como um valor inteiro. Algum cuidado ser contudo, necessrio para prevenir erros como o seguinte, quando se procura fazer a soma de duas cilindradas e obtm-se um resultado bem diferente do pretendido: document.write("Soma das cilindradas: " ,carro1.cilindrada + carro4.cilindrada); Soma das cilindradas: 24002600

    Arrays:
    Os Arrays so entidades constitudas por conjuntos agrupados de valores de um determinado tipo de dados. Eles so utilizados em qualquer linguagem de programao. No JavaScript, contudo, um array nao pode ser visto como uma varivel, mas como um objecto. Pode ser criado um array de forma muito simples, utilizando a seguinte sintaxe: var norne_do_array = new Array(nmero_de_posies); Um array em JavaScript dividido em posies que vo de "0", at dimenso mxima do array, menos uma unidade. Para aceder ao contedo de uma determinada posio do array, utiliza-se a seguinte sintaxe: nome_do_array[posio] ; Por exemplo, o seguinte array:

    Posio:
    Pode ser declarado da seguinte forma: var lista = lista[0] lista[1] lista[2] lista[3] lista[4] new Array(5); = 4; = "ola"; = 4.6; = "Teste"; = false;

    4 0

    ola 1

    4.6 2

    teste 3

    false 4

    Uma das grandes facilidades que o JavaScript oferece no domnio dos arrays , de facto, possibilidade de colocar valores de tipos de dados bem distintos numa s estrutura de dados. Os arrays esto intimamente relacionados com as propriedades dos objectos, de tal forma que um array e um conjunto de propriedades de um objecto constituem duas formas distintas de acesso mesma informao. Um objecto pode ser, na verdade, visto como um array de propriedades e representado sintacticamente como tal. Vejamos o exemplo: var carro1 = new veiculo("Porche","Carrera","1998",2400); Utilizando uma sintaxe alternativa, baseando-nos na ideia de que um objecto composto por um array de propriedades, podamos escrever o seguinte script: var carro1 = new veiculo(); carro1[0] = "Porche "; carro1[1] = "Carrera ";

    carro1[2] = "1998"; carro1[3] = 2400; // Lista das propriedades do objecto for (var k=0; k<=3 ; k++) { document.write("Propriedade ",k," = ",carro1[k]," <p/> "); } A grande vantagem de utilizar arrays e ndices, em vez de nomes de propriedades, possibilidade de realizar operaes sobre as propriedades de um objecto, recorrendo a ciclos e fazendo variar as varveis de controlo, como aqui fizemos para listar o conjunto de propriedades do objecto (com o ciclo for), sem necessidade de escrita exaustiva de cdigo. Existe, ainda, uma outra notao que um pouco mista entre as duas anteriores, em que os ndices dos arrays aparecem na sintaxe como nomes, neste caso, os nomes das propriedades. No caso do exemplo que vimos h pouco, a sintaxe apareceria como se segue: var carro1 = new veiculo(); carro1[marca] = "Porche "; carro1[modelo] = "Carrera "; carro1[ano_matricula] = "1998"; carro1[cilindrada] = 2400; Poder utilizar qualquer uma das notaes baseadas em arrays sempre que achar vantajoso utilizar ndices para efectuar manipulao das propriedades dos objectos.

    Mtodos:
    Os mtodos so funes associadas aos objectos. Um objecto pode assim ser definido em termos de propriedades, no s pelas suas variveis, mas tambm pelos mtodos que tiver associados, que permitem no s realizar aces sobre as propriedades prprias do objecto, como tambm outros tipos de operaes diversas. Vejamos como podemos criar um mtodo para visualizar o estado das variveis que compem o conjunto de propriedades de um objecto: . <script language="JavaScript"> function veiculo(a,b,c,d) { this.marca = a; this.modelo = b; this.ano_matricula = c; this.cilindrada = d; this.listar_variaveis = listar_variaveis; } // Funo construtora do Objecto

    // Mtodo listar variveis

    function listar_variaveis() { for (var k=0; k<=3 ; k++) { document.write("Propriedade ",k," = " ,this[k], " <p/> "); } } var carro1 = new veiculo(); carro1[0] = "Porche "; carro1[1] = "Carrera "; carro1[2] = "1998"; carro1[3] = 2400; carro1.listar_variaveis(); </script> O mtodo "listar_variaveis()" utiliza um ciclo for para mostrar todas as propriedades do objecto, vistas como um array. A sintaxe utilizada para chamar um mtodo de um determinado objecto idntica que utilizada para fazer referncia a uma determinada propriedade do objecto, ou seja, o nome do objecto, um ponto" ." e o nome do mtodo, objecto.mtodo(argumentos);

    Objectos integrados no JavaScript


    O JavaScript incorpora, uma srie de objectos que permitem realizar as tarefas mais importantes que se esperam realizar com esta linguagem. Relativamente aos objectos que podem ser utilizados em scripts JavaScript, dividem-se em quatro tipos: Objectos para operaes com Strings Permitem efectuar as mas variadas operaes com texto e sequncias de caracteres. Operaes matemticas Implementam as operaes matemticas correntes. Data e Hora Esta famlia de objectos permite realizar operaes com datas e tempo.

    Objectos relacionados com o browser Estes objectos so os mais importantes, porque so os que permitem vrias operaes e manipulaes ao nvel do browser Web. No JavaScript h funes que no esto associadas a nenhum objecto e que, portanto, no podem ser consideradas mtodos Estas funes so as seguintes: escape(String) unEscape(String) eval(String) parseFloat(String) parseInt(String,base) As funes escape() e unEscape() tm uma finalidade muito especfica. Uma vez que certos caracteres (por exemplo, espaos em branco) no podem ser includos nos endereos Web (URL), necessrio fazer uma codificao, de forma a utiliz-los dessa forma. Assim, a funo escape() gera como resultado o cdigo correspondente a uma determinada entrada em texto simples, que pode ser incorporado num URL, enquanto o unEscape() realiza a funo inversa. Por exemplo: <script language="JavaScript"> var x = escape( ); var y = eval((12/4)*5); document.write("x = ",x); document.write("y = ",y); </script> Devolve o resultado: X = %20 Y = 15 Estas funes iro ser teis apenas para os leitores que utilizarem cookies, uma vez que poder ser necessrio colocar espaos e outros caracteres fora do comum, nos URL's. A funo eval(), procura avaliar o contedo que lhe passado corno parmetro e gera um resultado numrico. A funo eval() das mais teis deste conjunto de funes e , normalmente, muito utilizada nos programas para avaliao de expresses numricas. As funes parselnt() e parseFloat() tm caractersticas semelhantes. O objectivo converter o valor passado corno parmetro (uma String de texto) num valor numrico, inteiro no caso do parselnt(), ou de vrgula flutuante no caso do parseFloat().Vejamos dois exemplos de aplicao destas duas funes: caso do var x = parseInt("FF",16); var y = parseFloat("23.34 litros "); Obtm-se o seguinte resultado: x = 255 y = 23.34 O parselnt() converte a String que lhe passada num nmero inteiro na base indicada ("FF" na base 16 igual a 255 em decimal), O parseFloat() converte a String que lhe passada num nmero de vrgula flutuante (23.34, ignorando o restante texto).

    Strings
    O objecto String utilizado no JavaScript para todas as operaes que se possam realizar envolvendo strings. Este objecto pode ser utilizado sem sequer necessitarmos de o criar com a palavra reservada "new". No entanto, em termos formais, estaremos a chamar uma funo JavaScript e no a instanciar um objecto (o comportamento do cdigo dever ser exactamente igual). O objecto String composto por uma propriedade e por um largo conjunto de mtodos, que seguidamente se enunciam:

    Propriedades:
    length Comprimento da string (nmero de caracteres)

    Mtodos:
    anchor(name) Devolve uma String com o texto HTML correspondente ao elemento de link (Anchor <a name= "name">, com o parmetro name preenchido. big() Formatao HTML com o elemento <big> (texto grande).

    blink() Formatao HTML com o elemento <blink> (texto a piscar). bold() Formatao HTML com a marca <b> (Bold). charAt(posio) Devolve o carcter localizado na posio indicada da String de texto. charCodeAt(posio) Devolve o cdigo do carcter localizado na posio indicada da String de texto. concat(valor1, ...) Concatenar valores (1 a n) a uma string. fixed() Devolve uma String com a formatao HTML correspondente ao elemento <fixed>. fontcolor(cor) Devolve uma String com cdigo HTML, em que aplicado um elemento <font>, com um atributo color definido com o valor colocado em "cor", atributo esse definido na escala RGB, da forma que aplicado no HTML. fontSize(tamanho) Devolve formatao HTML baseada na marca <fontsize>, com o atributo size igual a "tamanho". fromCharcode(c1,c2,...) (static) cria uma string a partir de cdigos de carcter passados como parmetro. indexOf(string,loc) Devolve a posio em que se encontra a primeira ocorrncia da "string", a partir da posio indicada por "loc". Italics() Devolve uma String com a formatao HTML correspondente ao itlico (elemento <i>). lastIndexOf(string,loc) Idntico a "indexOf()", mas devolve a ltima ocorrncia de "string", em vez da primeira. link(href) Devolve uma String com o cdigo HTML correspondente colocao de um link (<a href = "href>), com o parmetro "href' preenchido. match( exp ) Procura uma expresso (exp) numa string e devolve a string, bem como outros dados sobre a parte encontrada. replace( exp, sub) Idem, mas subtituindo a expresso encontrada (exp) pela de substituio (sub). search(exp) Procura numa string uma determinada substring (exp), devolvendo a posio encontrada. slice(inicio,fim) Define um pedao de uma string entre as posies incio e fim. small() Formatao HTML com o elemento <small>. split( delimitador) Parte uma string num array de strings, delimitada pelo delimitador. strike() Formatao HTML com o elemento <strike>. sub() Formatao HTML com o elemento <sub>. substring(loc1 ,loc2) Devolve uma String contida na String me, localizada entre as posies "loc1" e "loc2".

    substr(inicio,comp) Define uma substring, a partir de incio e com o tamanho comp". sup() Forrnatao HTML com o elemento <sup>. toLowerCase() Devolve uma String com todos os caracteres convertidos para minsculas. toUpperCase() Idem, mas convertendo todos os caracteres para maisculas.

    Exemplo:
    <Script language = "JavaScript"> var s="Esta e uma string de texto"; document.write("Esta e uma string de texto", "</p>"); document.write("Tamanho da String = ",s.length, " caracteres"); document.write( <br/> "); // Definicao de uma Substring document.write("uma substring de texto", "</p>"); var s1 = s.substring(4,10); document.write(s1); document.write(" <br/> "); // Passagem para maiusculas var s2 = s1.toUpperCase(); document.write(s2); // Algumas formatacoes HTML document.write("<br/> Italico: ",s2.italics()); document.write("<br/> Bold: ",s2.bold()); document.write("<br/> Piscar: ",s2.blink()); </script>

    Neste exemplo, pode constatar que foi definida uma string logo no incio e colocada na varivel "s". Depois, foi calculado o tamanho da string e enviado para o ecr. Foi depois definida urna substring ("s1") que composta pelos caracteres localizados entre as posies 4 e 10 da string "s". Depois de enviada para o ecr , foi convertida para maisculas (com o correspondente mtodo toUpperCase() que coloca o resultado numa outra string "s2"). Finalmente, aplicaram-se algumas formataes HTML sobre esta string final, o que inclui o itlico, o Bold e o Blink.

    Operaes Matemticas
    Outro tipo de necessidades que existem em termos de programao a realizao de operaes de natureza matemtica. Estas so asseguradas por meio de um objecto denominado "Math". semelhana do objecto anterior (String), com este objecto tambm possvel tratar este tipo de elementos como funes, no utilizando o "new" para efectuar a sua criao. Este objecto "Math" tem como caracterstica fundamental o facto de as suas propriedades serem todas estticas, isto , no mudarem no decurso da utilizao do objecto. O objecto Math composto por propriedades e por um conjunto de mtodos, que seguidamente se enunciam:

    Propriedades: (constantes matemticas)


    E LN10 LN2 PI SQRT1_2 SQRT2 LOG10E LOG2E Nmero de neper. Logaritmo natural / neperiano de 10. Logaritmo natural / neperiano de 2. Nmero PI. Raiz quadrada de 1/2. Raiz quadrada de 2. Logaritmo base 10 de e. Logaritmo base 2 de e.

    Exemplo:
    <script language = "JavaScript"> document.write("E = ",Math.E); document.write("<br/>LN10 = ",Math.LN10); document.write("<br/>LN2 = ",Math.LN2); document.write("<br/>PI = ",Math.PI);

    document.write("<br/>SQRTC2 = ",Math.SQRT1_2); document.write("<br/>SQRT2 = ",Math.SQRT2); document.write("<br/>LOG10E = ",Math.LOG10E); document.write("<br/>LOG2E = ",Math.LOG2E); </script> Todo os nmeros, sendo reais e de clculo infinito, aparecem com a preciso mxima que possvel ser conseguida: E= 2,1718281828459045 LN10 = 2,302585092994046 LN2 = 0,6931471805599453 PI= 3,141592653589793 SQRT1_2 = 0,7071067811865476 SQRT2 = 1,4142135623730951 LOG10E = 0,4342944819032518 LOG2E = 1,4426950408889634

    Mtodos:
    nota: Todos os mtodos de natureza trigonomtrica funcionam com valores em radianos. abs(nmero) Valor absoluto do "nmero", ou seja, sempre o valor independentemente do sinal (positivo ou negativo). acos(nmero) Arco-coseno de "nmero". asin(nmero) Arco-seno de "nmero". atan(nmero) Arco tangente de "nmero". atan2(x,y) ngulo entre o eixo dos x e um ponto (identificado por x y). ceil(nrnero) Devolve o prximo inteiro maior que "nmero". cos(nrnero) Coseno de "nmero". exp(nmero) Devolve "e" levantado ao "nmero" (enmero). floor(nmero) Devolve o inteiro anterior menor que "nmero". log(nmero) Devolve o logaritmo de "nmero". max(num1,num2) Devolve o nmero maior dos nmeros "num1" e "num2", min(num1,num2) Devolve o nmero menor dos nmeros "num1" e "num2" . pow(num,expoente) Devolve "num" elevado a "expoente". random() Devolve um nmero aleatrio entre 0 e 1. round(nmero) Arredonda "nmero" para o inteiro mais prximo. sin(nmero) Seno de "nmero". sqrt(nmero)

    Raiz quadrada de "nmero". tan(nmero) Tangente de "nmero". Vejamos um conjunto de alguns exemplos de utilizao de mtodos do objecto "Math":

    Exemplo:
    <script language = "JavaScript"> // Coseno de PI (-1) document.write("<br/>Coseno de PI = ",Math.cos(Math.PI)); // Raiz quadrada de 9 (3) document.write("<br/>Raiz Quadrada de 9 = ", Math.sqrt(9)); // Arredondar um nmero (-5) var x = -4.56; document.write("<br/>Arredond. de -4.56 = ", Math.round(x)); //Gerar um nmero aleatrio inteiro entre 0 e 10 var y = 10*(Math.random()); var z = Math.round(y)); document.write("<br/>z = ", z); </script> //gerar um nmero // arrendondar

    Datas e Horas
    O trabalho com datas e tempo em JavaScript faz-se utilizando um objecto especfico, "Date". Este objecto criado e utilizado como qualquer outro objecto, sendo necessrio efectuar a criao de um objecto concreto para o poder utilizar. A criao de um objecto de tipo "Date" faz-se com a seguinte sintaxe: nome_objecto = new Date(parmetro); O "parmetro" bastante importante para a utilizao que se fizer do novo objecto criado. Se no for preenchido, a data que vai ficar contida no objecto a data e hora correntes. Caso contrrio, poder ser l colocada uma data e hora especficas, utilizando para tal a notao "ano,ms, dia,horas,minutos,segundos ou, em alternativa, o tempo em milissegundos (representao interna). O objecto Date composto por um largo conjunto mtodos. A data pode ser referenciada do seguinte modo, (aaaa,m-1,dd

    Mtodos:
    getDate() Devolve o dia do ms (inteiro entre 1 e 31). getDay() Devolve o dia da semana (0 = Domingo, 1 = Segunda-Feira, ... ,6 = Sbado). getFullYear() Devolve o ano correspondente data, com quatro dgitos. getHours() Devolve a hora (inteiro entre 0 e 23). getMilliseconds() Devolve o campo milissegundos. getMinutes() Devolve os minutos (inteiro entre 0 e 59). getMonth() Devolve o ms (inteiro entre 0 = Janeiro e 11 = Dezembro). getSeconds() Devolve os segundos (inteiro entre 0 e 59). getTime() Devolve um inteiro com o nmero de milissegundos que se passaram desde 1 de Janeiro de 1970 s 0:00:00. getTimezoneOffset() Devolve o nmero de minutos de diferena para a hora de Greenwich (GMT).

    getUTCDay() Devolve o dia da semana, estando a data expressa em tempo universal (UTC). getUTCFullYear() Devolve o ano (tempo UTC). getUTCHours() Devolve a hora (UTC). getUTCMilliseconds() Devolve o campo milissegundos (UTC). getUTCMinutes() Devolve minutos (UTC). getUTCMonth() Devolve o ms (UTC). getUTCSeconds() Devolve segundos (UTC). getYear() Devolve o ano correspondente data num formato de dois dgitos. parse(data) Devolve o nmero de milissegundos ocorridos entre 1 de Janeiro de 1970 e a data. setDate(valor) Coloca o Ms do objecto igual ao valor inteiro entre 1 e 31 passado em "valor". setFullYear(valor) Idem para o ano (ano completo 4 dgitos). setHours(valor) Idem para as horas ("valor" entre 0 e 23). setMilliseconds(valor) Idem para o campo milissegundos. setMinutes( valor) Idem para os minutos ("valor" entre 0 e 59). setMonth( valor) Idem para o ms ("valor" entre 0 e 11). setSeconds( valor) Idem para os segundos ("valor" entre 0 e 59). setTime(valor) Fixa a data, sendo o "valor" o nmero de milissegundos desde 1 de Janeiro de 1970 s 0:00:00. setUTCDate(dia_mes) Fixa o dia do ms (tempo UTC). setUTCFullYear(valor) Fixa o ano (UTC). setUTCHours(valor) Fixa a hora (UTC). setUTCMilliseconds() Fixa o campo milissegundos (UTC). setUTCMinutes() Fixa os minutos (UTC). setUTCMonth()

    Fixa o ms (UTC). setUTCSeconds() Fixa os segundos (UTC). setYear(valor) Fixa o ano. toString() toGMTString() toLocaleString() Diversas formas de obter diferentes Strings com a data representada no objecto em causa. Se usar o primeiro, obter uma representao corrente. toUTCString() Converte uma data para uma string (UTC) valueOf() Converte uma data para um nmero. UTC (ano,mes,dia,hora,minuto,segundo) - Devolve o nmero de milissegundos decorridos entre o dia 1 de Janeiro de 1970, s 0:00:00 GMT e a hora especificada. No exemplo de script que se segue, vemos como podemos utilizar estes mtodos para colocar no documento HTML exactamente aquilo que pretendemos, em ternos de data e hora:

    Exemplo:
    <Script language = "JavaScript"> var hoje = new Date(); var dia = hoje.getDate(); var hora = hoje.getHours(); var minuto = hoje.getMinutes(); var ontem = new Date(); ontem.setYear(2000) document.write("Hoje dia ", dia); document.write(" e so ",hora," horas e "); document.write(minuto," minutos", "</p> ");

    //Hoje dia dd e so hh horas e yy minutos

    document.write("Data: ", hoje.toLocaleString()); //Data: day, month dd, aaaa hh:yy:mm document.write("Diferena entre hoje e ontem = "); //aaaa 2000 document.write(hoje.getYear() ontem.getYear(),"anos. "); //Diferena de datas: </script>

    Objectos do Browser
    Neste domnio onde residem os maiores problemas de incompatibilidades entre Microsoft e Netscape. No aconselhado utilizar-se elementos que sejam especficos de um determinado browser.

    history
    Este objecto permite trabalhar sobre a lista de acessos a locais WWW existente no browser. As propriedades e mtodos disponveis so os seguintes:

    Propriedades:
    current Uma string que representa o URL do documento actual. length Representa o nmero de elementos da lista de acessos. next Representa o URL do elemento aps o corrente, na lista. previous Idem para o anterior.

    Mtodos:
    back() Retorna ao documento anteriormente visitado (como o boto Back do browser) na lista de acessos. forward() Avana para o documento seguinte na lista de acessos, go(posio) Avana para o documento WWW identificado por "posio". Se este argumento for um inteiro, a pgina identificada por este nmero na lista de acessos escolhida, se pelo contrrio for uma String, esta conter um URL ou parte dele na lista de acessos. toString() Devolve uma tabela HTML contendo o histrico de acessos do browser.

    Exemplo:
    history.go(-1); history.back(); So equivalentes a pressionar o boto Back do browser.

    document
    Este objecto criado quando uma determinada pgina WWW carregada e contm informao diversa acerca desse documento. Para alem disso, permite a sua manipulao com um conjunto e mtodos muito simples. Vejamos uma lista das propriedades e dos mtodos associados. Pela primeira vez vamos ver algumas propriedades que podem ser modificadas e no s lidas. No entanto, nem todas as propriedades que se seguem o permitem:

    Propriedades:
    alinkColor Representa a cor que um link, ou ponteiro de tipo Anchor do HTML, toma quando pressionado com o rato, mas antes de o boto deste ser largado. anchors[] Array de elementos de tipo Anchor do documento HTML. applets[] Array de objectos Java, um objecto por cada applet Java. bgColor A cor do fundo do documento. cookie Uma string com parmetros "cookie" do documento. domain String que designa o domnio Internet a que o documento pertence. ernbeds[] Array com objectos inseridos com <embed>. fgColor A cor do texto. forms[] Array de objectos Form existentes na pgina HTML. lmages[] Array de objectos imagem do documento (<img>). lastModified Uma String com a data da ltima alterao do documento. linkColor A cor com que os links aparecem no documento.

    links[] Um array contendo todos os links do documento. location Uma String com o URL do corrente documento. plugins[] Idntico ao embeds[]. referrer Uma String contendo o URL do documento a Partir do qual foi chamado o corrente. title O ttulo do documento HTML. URL URL do documento. vlinkColor Cor que tomam os links j visitados.

    Propriedades especficas Netscape:


    classes Array que contm objectos de estilo. height Altura em pixels do documento. ids Array de objectos de estilo (<id>). layers[] Array de objectos layer. tags Array de objectos composto pelo conjunto de elementos HTML do documento. width Largura em pixels do documento.

    Propriedades especficas Internet Explorer:


    activeElement Define o elemento <input> que tem o foco. alI[] Identifica todos os elementos HTML de um documento. charset Pgina de caracteres em uso. children[] Elementos HTML que compem o documento, pela ordem pela qual aparecem no documento. defaultCharset Pgina de caracteres predefinida para um documento. expando Se colocada a false, esta propriedade impede que um objecto seja expandido. parentWindow Define a janela que contm o documento. readyState Indica o estado de carregamento de um document (uninitialized - no comeou o carregamento, loading documento em carregamento, interactive - em carregamento, mas j possvel interaco com utilizador ou complete - pgina carregada).

    Ateno: nas propriedades, as cores so expressas em forma de texto ou em RGB com dados hexadecimais, por exemplo: document.bgColor = "Red"; ou em alternativa: document.bgColor = "FF0000"; Coloca o fundo de um documento a vermelho.

    Mtodos:
    clear() Limpa o contedo de uma janela. close() Termina a importao de um documento e d carregamento como terminado ("Done"). open(tipo) Abre um documento para recepo de dados (por exemplo vindos de um write()). O "tipo" um parmetro opcional, em que se pode colocar um outro tipo de dados (por exemplo, suportado por um plug-in - produto externo ao browser). write() Escreve texto (HTML) no documento. writeln() Escreve texto (HTML) no documento e coloca no final um carcter de fim de linha (s tem efeito se for utilizada formatao HTML <PRE>).

    Mtodos Netscape:
    captureEvents(mask) Define o tipo de eventos que o documento vai captar. contextual(est1,est2) Retoma um objecto de estilo que representa "est2" no contexto do "est1". getSelection() Retoma o texto que estiver seleccionado no documento. releaseEvents() Pra captura de eventos. routeEvent(evento) Passa um evento para um outro handler (gestor de evento).

    Mtodos Internet Explorer:


    elementFromPoint(x,y) Devolve o objecto HTML que estiver nas coordenadas em causa.

    location
    O objecto location providencia informao acerca do URL corrente. composto somente por propriedades. Todas as propriedades sao stings que representam vrias facetas distintas do URL:

    Propriedades:
    hash Uma string com o nome da URL. host O nome da mquina e o porto no URL. hostname O nome da mquina.

    href Todo o URL. pathname S a parte de caminho do URL. port S o porto. protocol O protocolo usado (incluindo o carcter ":"). search Informao eventualmente passada a um programa CGI (aparece a seguir a um carcter "?" no URL).

    Mtodos:
    reload() Recarrega o documento corrente. replace() Substitui o documento actual por outro, sem alterar a "histria" do browser. Como exemplo de utilizao deste, vejamos um pequeno script de teste, que envia para o ecr toda a informao relativa localizao em que o ficheiro HTML correspondente est:

    Exemplo:
    <script language = "JavaScript"> // Informao acerca do URL document.write("hash = ",location.hash); document.write("<br/>host = ",location.host); document.write("<br/>hostname = ",location.hostname); document.write("<br/>href = ",location.href); document.write("<br/>pathname = ",location.pathname); document.write("<br/>port = ",location.port); document.write("<br/>protocol = ",location.protocol); </script>

    window
    O objecto window funciona corno o objecto me, que incorpora documentos ou outros objectos. Operando sobre o window,tem-se a oportunidade de controlar directamente a janela do browser WWW utilizado.

    Propriedades:
    closed Boleano que especifica se uma janela foi ou no fechada. defaultStatus Uma string com o valor contido na barra de status. document Referencia o documento contido na janela. frames[] Um Array com todas as Frames que integram a janela. history Referncia ao objecto histrico na janela. length O nmero de Frames na janela. location Objecto location na janela.

    Math Referencia um objecto contendo funes matemticas. name O nome da janela. navigator Objecto navigator. offscreenBuffering Define o tipo de buffering que o browser faz. opener Referencia uma janela que tenha invocado uma funo open() para criar uma janela. parent O nome da janela principal que contm o conjunto de Frames (Frameset). screen Objecto screen. self O nome da janela corrente. status Valar a aparecer na barra de status (pode ser fixado atribuindo um valor a esta propriedade). top O nome da janela de topo. window O nome da janela corrente.

    Propriedades Netscape:
    crypto Referencia um objecto que implementa criptografia (crypto). innerHeight Altura da rea mostrvel do documento. innerWidth Largura da mesma rea. Java Referencia objecto global Java. locationbar Informa da presena, ou no, da barra de localizao do browser. menubar Idem para a barra de menus. netscape Referencia a classe Java netscape. outerHeight Altura em pixels da janela. outerWidth Largura em pixels da janela. Packages Referencia Packages Java. pageXOffset Numero de pixels que o documento corrente foi deslocado para a direita (com a barra de deslocao).

    pageYOffset Idem na posio vertical (para baixo). personalBar Identifica a presena ou no da barra pessoal do browser. screenX Coordenada X do canto superior esquerdo da janela. screenY Coordenada Y do canto superior esquerdo da janela. scrollbars Visibilidade das barras de deslocao do browser. statusbar Visibilidade da barra de status do browser. sun Package Java da Sun. toolbar Visibilidade da barra toolbar.

    Propriedades Internet Explorer:


    clientInformation Substituto da Microsoft para o objecto navigator. event Descreve o evento mais recente.

    Mtodos:
    alert(mensagem) Faz surgir uma janela de alerta com a mensagem passada como parmetro. A janela capta a ateno do utilizador (no o deixa fazer mais nada no browser) e s desaparece quando pressionado o boto. blur() Retira o foco do teclado da janela em causa, passando-o para a janela me. clearInterval(id) Pra uma execuo peridica de cdigo iniciada com um setInterval(). clearTimeout() Cancela um timeout (execuo diferida de cdigo). close() Fecha a janela. confirm(mensagem) Faz surgir uma janela de confirmao com botes "OK" e "Cancel". Conforme o boto pressionado, devolvido o valor "verdadeiro" ou "falso" ao utilizador. focus() D foco de teclado a uma janela (proporciona a ocorrncia de eventos de teclado). moveBy(x,y) Move uma janela x pixels para a direita e Y para baixo. moveTo(x,y) Move a janela para uma posio absoluta x,y. open(URL, nome, param) Abre uma janela e carrega o URL passado como parmetro. No "param" podem ser configurados alguns aspectos relativos ao aspecto da janela,

    prompt(msg,resp_defeito) Abre uma janela de dilogo, que aceita uma entrada do utilizador, que devolvida. "msg" contm o texto da pergunta e "resp_defeito" o valor inicial que aparece no campo a preencher. resizeBy(a,l) Altera o tamanho de uma janela de a pixels na altura e de I na largura. resizeTo(a,l) Altera as dimenses da janela para a por I pixels. scroll(x,y) Deslocao num documento para uma posio x,y. scrollBy(x,y) Deslocao no documento de x pixels para a direita e de y para baixo. scrollTo(x,y) Idntico ao scroll(), que veio substituir. setInterval(code,interv) Executa o cdigo Javascript code aps um perodo de tempo de interv milisegundos e de peridica. nome=setTimeout(exp,time) Avalia a expresso "exp" quando passar o nmero de milissegundos definido por "time".

    Mtodos Netscape:
    atob(str) Descodifica uma string em base-64. back() Idntico a pressionar o boto back. btoa(dados) Codifica os dados em base-64. captureEvents(event-mask) Especifica que eventos podem ser capturados. disableExtemalCapture() Impede a captura de eventos que ocorram num servidor diferente daquele em que corre o script. enableExtemalCapture() O oposto do anterior. find() Procurar texto no documento. forward() Equivalente a pressionar o boto forward do browser. handleEvent(evento) Passa um evento para o adequado gestor de eventos. home() Boto home do browser. print() Boto print do browser. releaseEvents(mask) Parar captura de eventos. routeEvent(mask) Passar evento para o prximo gestor de eventos. setHotkeys(comando) Activa ou desactiva a utilizao de teclas para dar comandos ao browser.

    setResizable(comando) Permite ou impede o ajuste do tamanho da janela. setZOptions() Controla o comportamento das janelas quando h mais do que uma aberta em simultneo. sop() Pra o carregamento do documento.

    Mtodos Internet Explorer:


    navigate(url) Carrega uma URL.

    Exemplo:
    <script language = "JavaScript"> window.open(http://www.google.com); </script>

    Debugging
    No JavaScript foi introduzido um par de funes muito til para questes de debugging ou correco de erros em programas. Trata-se dos mtodos: watch() unwatch() Estes mtodos aplicam-se a um determinado objecto e permitem que se force a execuo de uma determinada funo quando algo ocorre. O watch() aceita como argumentos o nome da propriedade a ser observada, bem corno o nome da funo a ser executada quando a propriedade em causa mudar. O unwatch() chama-se para desligar o efeito de debugging e cancelar o efeito do watch().

    Exemplo:
    <html> <head> <script language = "JavaScript"> function var_mudou() { alert("Varivel x foi modificada "); } </script> </head> <body> <script language = "JavaScript"> var x=0; watch('x', var_mudou); x=1; unwatch(); </script> </body> </html> O watch() aplica-se neste caso varivel "x", definindo-se a funo "var_mudou()" corno gestora do evento de mudana da varivel. Neste caso, a linha "x=1;" provoca a modificao da varivel x e, portanto, a execuo do cdigo constante da funo var_mudou(). . O mesmo aconteceria mesmo que o valor da varivel no tivesse sido modificado, mas desde que tivesse sido feita urna nova atribuio ao seu valor (por exemplo: x=0).

    Exemplos Prticos
    Uma empresa mudou recentemente de endereo Web, contudo, muitos dos seus clientes apenas conhecem o antigo e muitos bookmarks apontam ainda para l. Sendo assim, necessrio construir uma pgina HTML que redireccionasse os utilizadores que vierem pgina antiga, automaticamente para a pgina nova. O JavaScript a melhor soluo para conseguir este efeito, com um script extremamente simples. A pgina seguinte avisa o utilizador do novo endereo durante 10 segundos, findos os quais provoca o salto para esse mesmo endereo (neste caso, para "novo.html"). <html> <head> <title> Mudana de site </title>

    </head> <body> <h3>Ateno! As pginas Web que procura mudaram de local! Daqui a 10 segundos o seu browser ser reencamlnhado para o novo local! Por favor actualize as suas referncias para o novo endereo <ahref="Novo.html"> Novo.html</a></h3> <script language = "JavaScript"> window.setTimeout("expirou()" ,10000); function expirou() { window.open("novo.html"); } </script> </body> </html> O funcionamento do script muito simples. criado um mecanismo de temporizao (window.setTimeout)), findo o qual chamada a funo expirou(). Esta funo tem como funo carregar o novo URL numa outra janela. O utilizador pode ir directamente para o novo endereo seguindo o link HTML ou ento simplesmente esperar os 10000 milissegundos, findos os quais aberta uma nova janela que carrega o novo endereo. A janela antiga permanece aberta com a mensagem de aviso. // Passados 10 segundos // chama a funo

    Vamos procurar implementar um relgio de "rodap", isto , na base inferior da janela do browser (o mesmo local onde aparecem as mensagens do browser, tipo "Done"). Existem vrias verses de relgios em JAVA e JavaScript. <html> <head> <title> Relgio de rodap </title> </head> <body> <h3>Este o Relgio de Rodap</h3> <script language = "JavaScript"> function relogio() { var hoje = new Date(); window.status = hoje.toString(); setTimeout(" relgio()", 1000); } relogio() </script> </body> </html> O funcionamento gira em tomo da funo relgio(). Esta chamada uma nica vez. No entanto, depois cria no seu interior um temporizador que expira de segundo em segundo, chamando de novo a prpria funo. Dentro da funo acha-se a data e hora correntes e depois aplica-se barra de status da janela do browser, recorrendo propriedade status do objecto window.

    Finalmente, vamos criar uma pgina WWW que receba o visitante da forma mais calorosa possvel. Para isso, necessrio cumpriment-lo com Bom dia, Boa tarde ou Boa noite, consoante a hora a que e esteja a aceder pgina e mostrar -lhe as horas. <html> <head> <title>Ttulo</title> </head> <body> <h3> <script language = "JavaScript"> function cumprimentar() { var hoje = new Date(); var hora = hoje.getHours(); var minuto = hoje.getMinutes(); // A data de Hoje // A Hora corrente // Minutos

    // Conforme a hora o cumprimento e distinto if ((hora > 7) && (hora < 12)) { document.write("Bom dia!<p>"); } else { if ((hora > 12) && (hora < 20)) { document.write("Boa tarde!<p>"); } else { document.write("Boa noite!<p>"); } }

    // Colocar a hora e data document.write("So ",hora," : ",minuto, "<p>"); document.write(hoje.getDate()," / ", hoje.getMonth()+ 1," / "); document.write(hoje.getYear()); } cumprimentar() </script> <hr/>Pressione <a href="inexistente.html">aqui<la> para prosseguir... <p/> </h3> </body> </html> O script chama a funo cumprimentar() e determina se manh, tarde ou noite, tendo por base a hora corrente (obtida por intermdio de um mtodo getHours(), de um objecto Date). No caso de o acesso ser realizado noite (entre as 20:00 e as 07:00), a mensagem seleccionada "Boa noite!", surgindo depois a hora.

    S-ar putea să vă placă și