Javascript -, Notas de estudo de Informática

Baixe Javascript - e outras Notas de estudo em PDF para Informática, somente na Docsity! Javascript Javascript é uma linguagem que roda no lado cliente (já que quem suporta sua carga de processamento é o navegador)e é utilizada para criar pequenos programas que realizam ações em páginas web. Como é compatível com quase todos os navegadores modernos, é a linguagem do lado cliente mais utilizada.Com Javascript podemos criar páginas mais "inteligentes", inserindo efeitos especiais e recursos como: botões que mudam ao passar o mouse em cima, verificar se o preenchimento de um formulário está correto, dentre outras interatividades com o usuário. Centro de Difusão de Tecnologia e Conhecimento EliphasS 2010 P á g i n a | 1 Sumário Lição 1 - Introdução e História ...................................................................................................... 3 História do Javascript ................................................................................................................ 3 O que é Javascript? ................................................................................................................... 3 Diferenças Básicas entre Java e Javascript ................................................................................ 4 Lição 2 - Sintaxe e Variáveis .......................................................................................................... 6 Necessário para programar em Javascript ................................................................................ 6 Iniciando .................................................................................................................................... 6 Sintaxe Javascript ...................................................................................................................... 6 Case Sensitive ........................................................................................................................ 7 Separação de Instruções ....................................................................................................... 7 Variáveis .................................................................................................................................... 7 Global .................................................................................................................................... 7 Local ...................................................................................................................................... 7 Lição 3 - Strings e Mensagens ..................................................................................................... 10 As Strings ................................................................................................................................. 10 Concatenação ...................................................................................................................... 10 Métodos de String ............................................................................................................... 11 Métodos de String de Equivalência ..................................................................................... 12 Conversão entre os tipos de dados. ........................................................................................ 13 Mensagens .............................................................................................................................. 13 Alert ..................................................................................................................................... 13 Confirm ................................................................................................................................ 13 Prompt ................................................................................................................................. 14 Mensagens que rolam na barra de status ............................................................................... 14 Armazenando dados do usuário em variáveis ........................................................................ 15 Lição 4 - Objetos e Arrays ............................................................................................................ 17 Objetos .................................................................................................................................... 17 Manipulando Arrays ............................................................................................................ 17 Dividindo uma string ........................................................................................................... 17 Mais sobre vetores .............................................................................................................. 18 Ordenando um array ........................................................................................................... 19 Arrays multidimensionais .................................................................................................... 19 Lição 5 - Operadores e Comandos .............................................................................................. 22 Operadores .............................................................................................................................. 22 Lógicos ................................................................................................................................. 22 Matemáticos ....................................................................................................................... 22 Operadores em nível de bit ................................................................................................. 22 Operadores especiais .......................................................................................................... 23 Precedência de operadores ................................................................................................ 23 Comandos................................................................................................................................ 24 IF ... ELSE .............................................................................................................................. 24 Move condicional ................................................................................................................ 24 Switch .................................................................................................................................. 25 FOR ...................................................................................................................................... 25 WHILE .................................................................................................................................. 26 DO ... WHILE ........................................................................................................................ 26 Lição 6 - Eventos e Outros Comandos ......................................................................................... 27 Eventos .................................................................................................................................... 27 Outros comandos .................................................................................................................... 28 Var ....................................................................................................................................... 28 P á g i n a | 4 programação em que os códigos devem ser compilados ou traduzidos em código de máquina antes de serem executados. Diferenças Básicas entre Java e Javascript Uma das maiores confusões que acontecem quando se fala em Javascript é a inevitável comparação com a linguagem de programação "Java". É importante frisar, contudo, que Javascript não tem relação com a linguagem Java.. Estas são duas técnicas diferentes de programação e, portanto, não guardam entre si mais relação que a sintaxe e poucas coisas mais. Java é uma linguagem de programação. Javascript é basicamente uma linguagem de hipertexto. É útil, pois muitas vezes precisa-se, por exemplo, utilizar algum recurso que torne a página mais dinâmica e mais bonita, sem ter de se incomodar com a programação. É útil também porque é bastante simples e foi projetada para fazer as coisas com rapidez. Listo aqui algumas diferenças entre Javascript e Java: 1. A programação Java requer um kit de desenvolvimento e um compilador. Entretanto, Javascript não é uma linguagem que necessite que seus programas se compilem. Estes são interpretados pelo navegador quando ele lê a página; 2. Java é uma linguagem de programação fortemente “tipada”, ou seja, ao declarar uma variável é necessária a indicação de seu tipo e, então, não é permitida a mudança de seu tipo automaticamente. Por sua vez, Javascript não tem esta característica, e pode- se alocar em uma variável a informação que se deseja, independentemente de seu tipo. Ademais, pode-se mudar o tipo de informação de uma variável quando for necessário; 3. Java é muito mais potente que Javascript, pois Java é uma linguagem de propósito geral, com a qual se pode fazer aplicações para variadas funções. Javascript, entretanto, permite somente a escrita de programas que sejam posteriormente executados em páginas web; 4. Mini-aplicativos Java são compilados em arquivos de classe para serem utilizados em uma página da web. JavaScript, porém, utiliza comandos simples de texto, que podem ser incluídos no próprio documento de HTML; 5. Mini-aplicativos Java geralmente são exibidos em uma caixa dentro do documento de Web. Já scripts de JavaScript podem afetar qualquer parte do próprio documento da Web. Apesar de diferentes e úteis para diferentes coisas, as duas linguagens podem até ser utilizadas em conjunto para combinar suas vantagens. Javascript é uma linguagem que roda no lado cliente, utilizada para criar pequenos programas que realizam ações em páginas web. É bastante simples e foi projetada para fazer as coisas com rapidez. P á g i n a | 5 Como já citado anteriormente, Javascript é escrito e incluído em um documento HTML. Por essa razão, este curso presume conhecimentos ao menos básicos na linguagem de formatação HTML. P á g i n a | 6 Lição 2 - Sintaxe e Variáveis Nesta lição iniciaremos o aprendizado, vendo primeiramente a sintaxe e após isso as variáveis em Javascript. Necessário para programar em Javascript Para programar em Javascript necessitamos basicamente o mesmo que para programar páginas web com HTML. Um editor de textos e um navegador compatível com Javascript. Porém, apesar de um editor de texto simples ser suficiente para começar, talvez seja muito útil contar com outros programas que nos oferecem melhores prestações na hora de escrever as linhas de código. Estes editores avançados têm algumas vantagens, como colorir os códigos de nossos scripts, nos permitem trabalhar com vários documentos simultaneamente, têm ajudas, etc. Fica a critério de cada um a utilização de seu editor. Iniciando Em primeiro lugar devemos ter em mente que o código Javascript deve ser inserido dentro do código HTML. Isto, na prática, faz que se misturem na página as duas linguagens de programação. Para isso, é necessário o uso de delimitadores do código de script, que no caso é: <script> código javascript </script> Em uma mesma página podemos introduzir vários scripts, cada um que poderia se introduzir dentro das etiquetas <script> distintas. Podemos também escrever Javascript dentro de determinados atributos da página, como o atributo onclick. Estes atributos estão relacionados com as ações do usuário e são chamados de manejadores de eventos. Vamos ver mais detalhadamente essas duas maneiras de escrever scripts: Execução direta de scritps Neste caso se incluem as instruções dentro da etiqueta <script>, tal como comentamos anteriormente. Nele, o browser vai interpretando as linhas de código e vai executando uma após a outra. Resposta a um evento Eventos são ações que o usuário realiza. O Javascript é preparado para apagar eventos do usuário e gerar ações de resposta. Desta maneira são realizados programas interativos, já que controlamos os movimentos do usuário e respondemos a ele. Veremos mais adiante no curso este tipo de execução em profundidade e os tipos de eventos que existem. Sintaxe Javascript Javascript tem uma sintaxe muito parecida com a de Java por estar baseado nele. Também é muito parecida com a da linguagem C, de modo que se você conhece alguma destas duas linguagens poderá manejar com facilidade o código. P á g i n a | 9 alert ("Cuidado com o uso de \" ou ' em uma string"). P á g i n a | 10 Lição 3 - Strings e Mensagens Nesta lição falaremos sobre as strings e as mensagens, além de algumas maneiras de armazenar dados do usuário em variáveis. As Strings Podemos incluir dentro de uma string alguns caracteres especiais, a saber: CONTROLES ESPECIAIS SIGNIFICADO \b Retroceder espaço \f Avance página \n Passa para a próxima linha \r Return \t Posiciona o texto na próxima tabulação // Linha de comentário /* ... */ Bloco de comentário Tabela 1 Caracteres especiais de Strings Exemplo de uso: document.write("isto é uma\n frase"); que retorna: isto é uma frase Concatenação Para concatenar duas strings em javascript simplesmente usamos o operador (+). Exemplo: Frase1= "Isso é um teste!"; Frase2= "É um teste mesmo"; Valor= Frase1+Frase2; document.write(Valor); o que retorna: Isso é um teste!É um teste mesmo P á g i n a | 11 Métodos de String Todos os exemplos abaixo se baseiam na variável texto = "Aldeia Numaboa". MÉTODO FUNÇÃO charAt(x) Retorna o caractere da posição x. texto.charAt(2) retornará d. indexOf(substring) Retorna a posição da primeira ocorrência de substring. texto.indexOf(“boa”) retornará 11. lastIndexOf(substring) Retorna a posição da última ocorrência de substring. texto.lastIndexOf(“a”) retornará 13. substring(x,y) Retorna a substring entre a posição x e a posição y. texto.substring(2,6) retornará deia. toLowerCase() Retorna a string em minúsculas. texto.toLowerCase() retornará aldeia numaboa. toUpperCase() Retorna a string em maiúsculas. texto.toUpperCase() retornará ALDEIA NUMABOA. charCodeAt(x) Retorna o código ASCII do caractere na posição x. texto.charCodeAt(0) retorna 65. [65 é o valor ASCII de A] length Retorna o número de caracteres da string. texto.length retornará 14. Tabela 2 Métodos String em JavaScript P á g i n a | 14 if (confirm("Deseja Continuar?")) { alert("Continuando") } else { alert("Parando") } </Script > Prompt A mensagem prompt recebe informação do usuário via caixa de texto Input. Será explicada melhor a seguir. Mensagens que rolam na barra de status Com o conhecimento adquirido em strings, podemos agora mostrar como fazer mensagens rolarem na barra de status do browser. Inicialize, no script, a variável string a ser rolada na tela: frase="Olá, sejam bem vindos!" A seguir, defina uma segunda string chamada esp. Essa string será exibida entre as cópias da mensagem para tornar claro onde uma termina e a outra começa. Por exemplo : esp =”... ...”; Será necessária outra variável além das anteriores, uma variável numérica para armazenar a posição atual da string. Chame-a de pos e inicialize-a com 0: pos=0; A rolagem do texto será feita por uma função que chamaremos de rolamensagem: 1: function rolamensagem(){ 2: window.status=frase.substring(pos,frase.length)+esp+frase.substring(0,pos); 3: pos++; 4: if(pos>frase.length) 5: pos =0; 6: window.setTimeout(“rolamensagem()”, 500); 7: } Na linha 2, temos uma instrução que exibe uma string na linha de status (pelo uso de window.status). A string é composta da parte de 'frase' de 'pos' até o fim, seguida pelo espaço. É seguido, então, pela parte de 'frase' desde o início de 'pos'. Incrementamos então a variável 'pos'. Após isto temos uma instrução que verifica se 'pos' é maior que o comprimento de 'frase'. Se for, redefine-o para 0. Temos por último uma instrução que utiliza o método 'window.setTimeout', que permite configurar uma instrução a ser executada depois de um período de tempo. Nesse caso, execute a função rolamensagem depois do 0,5 segundo. P á g i n a | 15 Vemos abaixo como ficaria isto no código completo: <html> <head> <title> Mensagem rolando na tela</title> <script> frase="Ola alunos, sejam bem vindos!"; esp="... ... "; pos=0; function rolamensagem(){ window.status=frase.substring(pos,frase.length)+esp+frase.substring(0,pos); pos++; if (pos>frase.length) pos=0; window.setTimeout("rolamensagem()",300); } rolamensagem() </script> </head> <body> <h1> Mensagem rolando na tela</h1> Preste atenção à linha de status rolando na página! </body> </html> OBS.: O Script acima só é exibido corretamente no navegador Internet Explorer. Armazenando dados do usuário em variáveis Em certas ocasiões é necessário o armazenamento dos dados inseridos pelo usuário para uso na própria página. Para isso, utilizaremos a função 'prompt'. Ela é semelhante à função 'alert' mas é usada para dados de entrada do usuário. Por exemplo: titulo=prompt("digite o título da pagina"); nome=prompt("digite seu nome:"); A partir disso podemos utilizar o conteúdo das variáveis para personalizar o documento HTML. document.write(“<H1>”+ titulo+”</H1>”); document.write(“<H2> Criada por“+nome+”</H2>”); Para completar esse script, adicione as tags < SCRIPT> normais e uma estrutura HTML. O exemplo abaixo mostra o documento final de HTML. Após isso, e só carregar o documento em um browser e ver o resultado. <html> <head> <title> construcao de pagina </title> </head> <body> <script> nome=prompt(“digite seu nome:”); titulo=prompt(“digite o título da pagina”); P á g i n a | 16 document.write(“<h1>”+ titulo+”</h1>”); document.write(“<h2> Criada por ”+nome+“</h2>”); </script> <p> Página em construção.</p> </body> </html> P á g i n a | 19 Ou: Ana[0], Ana[1], Ana[2]; Outra maneira, portanto, de trabalhar com os vetores é criá-los e referenciar suas posições usando o atributo length, que retorna o número de campos do array: function Vetor(x){ this.length=x; for (var i=0 ; i<x ; i++){ this[i]=""; } } Há que observar que o loop for se executa sempre que i tiver um valor menor que a longitude do array, extraída de sua propriedade length. Chamaríamos a função assim: MesDoAno=Vetor(12); E incluiríamos os dados assim: MesDoAno[0]='Janeiro'; MesDoAno[1]='Fevereiro'; MesDoAno[2]='Março'; ... MesDoAno[3]= 'Dezembro'; Ordenando um array O Javascript também inclui o método sort para arrays, que retorna uma versão classificada do array (alfabeticamente ou numericamente). Por exemplo, as seguintes instruções inicializam um array de quatro nomes e o classifica: alunos[0]=”Fernanda Gomes da Silveira “ alunos[1]=”Leticia Vieira Santos”; alunos[2]=” Felipe Silva “; alunos[3]=” Marcos Cardoso”; ordenados=alunos.sort(); A última instrução atribui o array 'ordenados' à versão classificada de alunos utilizando o método join. Arrays multidimensionais Os arrays multidimensionais são estruturas de dados que armazenam os valores em mais de uma dimensão. Até aqui vimos arrays simples nos quais seus valores são armazenados em uma dimensão, o que requeria a utilização de apenas um índice para acessar suas posições. Em Javascript não existe um objeto array-multidimensinal particularmente definido. Para utilizá-los poderemos, porém, definir arrays onde, em cada uma de suas posições haverá outro P á g i n a | 20 array. No exemplo seguinte criamos um array multidimensional simplesmente juntando os dois métodos anteriores: Exemplo: Alunos = new Vetor(4); Alunos[0]=new Registro("José","Rua tal1","3333-3333"); Alunos[1]=new Registro("Ana","Rua tal2","2222-2222"); Alunos[2]=new Registro("João","Rua tal3"); Alunos[3]=new Registro("Carlos","Rua tal4","1111-1111"); O exemplo acima irá gerar: Alunos[0].nome="José"; Alunos[0].endereco="Rua tal1"; Alunos[0].telefone="3333-3333"; Alunos[1].nome="Ana"; Alunos[1].endereco="Rua tal2"; Alunos[1].telefone="2222-2222"; Alunos[2].nome="João"; Alunos[2].endereco="Rua tal3"; Alunos[2].telefone=null; E assim por diante. Outro exemplo de criação de arrays de mais de uma dimensão é: var PopulacaoCidade0 = new Array(3); PopulacaoCidade0[0] = 1200; PopulacaoCidade0[1] = 1000; PopulacaoCidade0[2] = 1100; var PopulacaoCidade1 = new Array(3); PopulacaoCidade1[0] = 5000; PopulacaoCidade1[1] = 3000; PopulacaoCidade1[2] = 2000; var PopulacaoCidade2 = new Array(3); PopulacaoCidade2[0] = 15000; PopulacaoCidade2[1] = 23000; PopulacaoCidade2[2] = 32000; E em seguida: var temperaturas_cidades = new Array(3); PopulacaoPais[0] = PopulacaoCidade0; PopulacaoPais[1] = PopulacaoCidade1; PopulacaoPais[2] = PopulacaoCidade2; P á g i n a | 21 Também é interessante ver como se faz o percurso por um array multidimensional: for (i=0;i<PopulacaoPais.length;i++){ document.write("País " + i); for (j=0;j<PopulacaoPais[i].length;j++){ document.write(PopulacaoPais[i][j]); } } Neste caso, com o primeiro loop, percorremos a primeira dimensão do array e utilizamos a variável i para levar à conta a posição atual. Para cada iteração, imprimimos o país da vez e o programa entra em outro loop. Neste, imprimimos, para cada país, o número relativo a cada novo índice j. P á g i n a | 24 » = += -= *= /= %= <<= >>= >>>= &= ^= != Atribuição Exemplo de avaliação dos operadores numa sentença: » 4 * 2 + 1 - 18 / 3 % 5 Portanto, esta avaliação se daria da seguinte maneira: » (4*2) + 1 - [(18/3) % 5] O resultado seria: 8 + 1 - 1 = 8. Comandos Existem algumas estruturas de controle que lhe permitem modificar o fluxo de execução de um programa. Isto é, contém comandos que condicionam a execução de certa tarefa à veracidade ou não de uma determinada condição, ou enquanto determinada condição for verdadeira. IF ... ELSE Um bloco if é formado primeiramente com o próprio 'if' e seguido por um teste booleano e uma instrução ou um bloco de instruções que precisam ser executadas caso o teste booleano seja verdadeiro. O 'else' pode ser usado caso o programador queira que o programa execute o bloco de instruções que o segue caso o teste booleano do 'if' não seja verdadeiro. if (condição){ ação para condição satisfeita; } else { ação para condição não satisfeita; } Exemplo : if (Idade < 18){ Categoria = "Menor" ; } else { Categoria = "Maior"; } Move condicional Existe um operador que ainda não vimos e é uma forma mais esquemática de realizar alguns IF simples. É um claro exemplo de economia de linhas e caracteres ao escrever os scripts. Ele não só realiza uma comparação de valores, como também atribui um valor a uma variável. O que faz é avaliar a condição (colocada entre parênteses) e se é positiva atribui o valor 1 à variável e no caso contrário lhe atribui o valor 2. Sua forma básica é, portanto: variável = ( (condição) ? valor1 : valor2); Exemplos: P á g i n a | 25 NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino"); momento = (hora_atual < 12) ? "Antes de meio-dia":"Depois de meio-dia"); Switch É uma expressão que se utiliza quando temos múltiplas possibilidades de resultado da avaliação de uma sentença. Sua sintaxe é a seguinte: switch (expressão) { case valor1: Sentenças a executar se a expressão tem como valor a valor1; break; case valor2: Sentenças a executar se a expressão tem como valor a valor2; break; case valor3: Sentenças a executar se a expressão tem como valor a valor3; break; default: Sentenças a executar se o valor não é nenhum dos anteriores; } Nota: A palavra break é opcional, mas se não a colocamos a partir de que se encontre coincidência com um valor se executarão todas as sentenças relacionadas com este e todas as seguintes. Isto é, se não houvesse expressão que fosse igual a valor1, se executariam sentenças relacionadas com valor1 e também as relacionadas com valor2, valor3 e default. Nota: Sempre é bom incluir um default, já que se todas as condições anteriores forem falsas, o switch entrará no default. Isso mostra a sua importância. Exemplo: farol = "verde"; switch (farol) { case "vermelho": alert("Pare"); break; case "amarelo": alert("Atencao"); break; case "verde": alert("Prossiga"); break; default: alert("Cor não existente"); } FOR É um comando que repete uma instrução determinado número de vezes até que alguma condição seja satisfeita. Sua forma básica é: P á g i n a | 26 for ( [inicialização];[condição];[incremento]){ ação; } Exemplo: for (x = 0 ; x <= 10 ; x++){ alert ("X igual a " + x) } WHILE É um comando que repete uma instrução até que alguma condição seja verdadeira. Primeiro testa a condição e depois entra no loop. Sua forma básica é: while (condição){ ação; } Exemplo: var Contador=1; while ( Contador < 11 ){ document.write(Contador++) ; } DO ... WHILE É um comando utilizado geralmente quando não sabemos quantas vezes haverá de se executar o loop, assim como o loop WHILE, com a diferença de que sabemos ao certo que o loop pelo menos se executará uma vez. Sua forma é: do { sentenças do loop; } while (condição) ; Exemplo: var x = 5; do { alert("o valor de x é: " + x); x++; } while (x < 9); P á g i n a | 29 Neste exemplo, quando a variável x atinge o valor 7 o loop é cancelado, e é impresso o número 7 na tela. for (var x= ; x < 8 ; x++){ if (x = = 7){ break; } } document.write(x); OBS.:No exemplo anterior o resultado impresso é o valor 7. Continue O comando Continue tem por objetivo o cancelamento da execução do bloco de comandos passando para o início do loop. Também só pode ser executado em loops For... ou While no caso do Javascript. Exemplo: Neste exemplo, serão impressos os números de 1 a 10, com exceção do número 5, ou seja, quando a variável x atinge o valor 5 a execução do bloco de comandos é interrompida e o controle retorna ao início do loop, onde a variável x será incrementada. for (var x=1 ; x < 10 ; x++){ if (x = = 5){ continue; } document.write(x); } P á g i n a | 30 Lição 7 - Controle de Tipos e Funções Nesta lição serão vistos o controle de tipos e o uso das funções em Javascript. Controle de tipos Vemos que em certos casos - como, por exemplo, o do '+' concatenador de strings em contraste ao '+' somador numérico - o tipo dos dados que estamos utilizando importa bastante e temos de estar cientes deste detalhe se quisermos que nossas operações se realizem tal como se espera. Para comprovar se um tipo de dado pode utilizar outro operador que está disponível usa-se o operador typeof, que devolve uma cadeia de texto que descreve o tipo do operador que se está comprovando. Exemplo de uso deste operador: var ok = true; document.write("<br>O tipo de 'ok' é: " + typeof ok); var num = 22; document.write("<br>O tipo de 'num' é: " + typeof num); var num_flutuante = 13.56; document.write("<br>O tipo de num_flutuante é: " + typeof num_flutuante); var texto = "texto de teste"; document.write("<br>O tipo de texto é: " + typeof texto); var data = new Date(); document.write("<br>O tipo de data é: " + typeof data); Este script imprime o seguinte: O tipo de 'ok' é: boolean O tipo de 'num' é: number O tipo de num_flutuante é: number O tipo de texto é: string O tipo de data é: object Funções Como já sabemos que o browser interpreta as instruções Javascript a partir da tag <script> e segue uma por uma até alcançar a tag de fechamento </script> ou, logicamente, até encontrar um erro. Apesar de parecer e realmente ser simples, esse formato acaba tornando confusa a leitura de scripts muito grandes. As funções são úteis, então, para torná-los mais fáceis e organizáveis. Uma função é, basicamente, um bloco de instrução criado para executar uma determinada tarefa específica. Dentro de uma função pode existir uma chamada a outra função. Podemos passar informações às funções que serão usadas e/ou atualizadas dentro delas. Podem retornar algum valor ou informação com o uso do comando Return. A forma básica de função com valor de retorno é similar à seguinte: P á g i n a | 31 function NomeDaFunção(parametro1, parametro2,..., parametroN){ Comandos; Return(Valor_De_Retorno); } 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. Os parâmetros podem escrever qualquer tipo de dados, numérico, textual, booleano ou um objeto. OBS.: Em Javascript os parâmetros se passam somente por valor, ou seja, mesmo que modifiquemos um parâmetro em uma função a variável original que havíamos passado como parâmetro não terá seu valor inicial alterado ao final, mesmo que tenha sido alterada para uso dentro da função. Exemplo: <html> <head> <script language="Javascript"> function varValor(param){ param = 10 document.write("mudança do valor da variável para 10") } </script> </head> <body> <script> var x = 5; varValor(x); document.write ("o valor da variavel é: " + x) ; </script> </body> </html> No exemplo anterior, o valor de x continuaria 5 ao final da execução. A chamada de funções é feita assim: NomeDaFunção(parametro1, parametro2,...,parametro N) As funções são declaradas dentro das tags <head></head> da página HTML o que parece razoável, já que são usualmente chamadas por eventos acionados pelo usuário. Para utilizar uma função é necessário chamá-la (em qualquer parte da página). Para chamar uma função, utiliza o nome da função como uma instrução em um script. Para isso, incluímos os parênteses e os valores para os parâmetros da função. P á g i n a | 34 Lição 8 - Classes: Math, Number e Boolean Nesta lição serão explicadas as 3 classes mais usadas em Javascript: Math, Boolean, e Number. Classe Math » Math.abs(número) - retorna o valor absoluto de número (ponto flutuante); » Math.ceil(número) - retorna o próximo valor inteiro maior que número; » Math.floor(número) - retorna o próximo valor inteiro menor que número; » Math.round(número ) - retorna o valor inteiro, arredondado, de número. O exemplo abaixo mostra uma função que arredonda números para duas casas decimais function round2(numero) { return Math.round(numero*100)/100; } Essa função multiplica o valor por 100 para mover o decimal e então arredonda o número para o inteiro mais próximo. Por fim, o valor é dividido por 100 para restaurar o decimal. » Math.pow(base, expoente) - retorna o cálculo do exponencial; » Math.max(número1, número2) - retorna o maior número dos dois fornecidos; » Math.min(número1, número2) - retorna o menor número dos dois fornecidos; » Math.sqrt(número) - retorna a raiz quadrada do número; » Math.SQRT2() - retorna a raiz quadrada de 2 (aproximadamente 1.414); » Math.SQRT_2() - retorna a raiz quadrada de 1/2 (aproximadamente 0.707); » Math.sin(número) - retorna o seno de um número (ângulo em radianos); » Math.asin(número) - retorna o arco seno de um número (em radianos); » Math.cos(número) - retorna o cosseno de um número (ângulo em radianos); » Math.acos(número) - retorna o arco cosseno de um número (em radianos); » Math.tan(número) - retorna a tangente de um número (ângulo em radianos); » Math.atan(número) - retorna o arco tangente de um número (em radianos); » Math.pi() retorna o valor de PI (aproximadamente 3.14159); » Math.log(número) - retorna o logaritmo de um número; » Math.E - retorna a base dos logaritmos naturais (aproximadamente 2.718); » Math.LN2 - retorna o valor do logaritmo de 2 (aproximadamente 0.693); » Math.LOG2E - retorna a base do logaritmo de 2 (aproximadamente 1.442) » Math.LN10 retorna o valor do logaritmo de 10 (aproximadamente 2.302); » Math.LOG10E - retorna a base do logaritmo de 10 (aproximadamente 0.434). P á g i n a | 35 Classe Number Modela o tipo de dados numéricos. É muito provável que você não chegue a utilizar em nenhuma ocasião. Mas é necessária, contudo, a explicação dela. O valor do objeto Number que se cria depende do que receba o construtor da classe Number. Com estas regras: » Se o construtor recebe um número, então inicia o objeto com o número que recebe; » Se receber um número entre aspas, o converte em um valor numérico, devolvendo também tal número; » No caso de não receber nada, devolve 0; » No caso de que receba um valor não numérico devolve NaN, que em inglês significa "Not a Number" (Não é um número); » Se receber false se inicia com 0; » Se receber true se inicia com 1. Exemplos: var n1 = new Number() document.write(n1 + "<br>") //mostra um 0 var n2 = new Number("oi") document.write(n2 + "<br>") //mostra NaN var n3 = new Number("123") document.write(n3 + "<br>") //mostra 123 var n4 = new Number("123MJGNOANGFJnvbjiahuemn") document.write(n4 + "<br>") //mostra NaN var n5 = new Number(123456) document.write(n5 + "<br>") //mostra 123456 var n6 = new Number(false) document.write(n6 + "<br>") //mostra 0 var n7 = new Number(true) document.write(n7 + "<br>") //mostra 1 Propriedades As seguintes propriedades, como são de classe, o acesso é feito pelo nome da classe: NaN - Not a Number Exemplo: document.write("NaN: " + Number.NaN) P á g i n a | 36 MAX_VALUE e MIN_VALUE Salvam o valor do máximo e do mínimo valor que se pode representar em Javascript. Exemplos: document.write("MAX_VALUE: " + Number.MAX_VALUE) document.write("MIN_VALUE: " + Number.MIN_VALUE) NEGATIVE_INFINITY e POSITIVE_INFINITY Representam os valores, negativos e positivos respectivamente, a partir dos quais há transbordamento. Exemplos: document.write("NEGATIVE_INFINITY: " + Number.NEGATIVE_INFINITY) document.write("POSITIVE_INFINITY: " + Number.POSITIVE_INFINITY) Classe Boolean Cria valores booleanos. Basicamente ela consegue os dados booleanos a partir de dados de qualquer outro tipo. Dependendo do que receba seu construtor, o valor do objeto que se cria será verdadeiro ou falso, da seguinte maneira: » Inicia-se a 'false' quando você não passa nenhum valor ao construtor, ou se passa uma cadeia de caracteres vazia, ou o número 0 ou obviamente a palavra false sem aspas; » Inicia-se a 'true' quando recebe qualquer valor ou cadeia entre aspas ou qualquer número distinto de 0. Exemplos: var x1 = new Boolean() document.write(x1 + "<br>") //retorna false var x2 = new Boolean("") document.write(x2 + "<br>") //retorna false var x3 = new Boolean(false) document.write(x3 + "<br>") //retorna false var x4 = new Boolean(0) document.write(x4 + "<br>") //retorna false var x5 = new Boolean("0") document.write(x5 + "<br>") //retorna true var x6 = new Boolean(7) document.write(x6 + "<br>") //retorna true var x7 = new Boolean("exemplo") P á g i n a | 39 Lição 9 – Date e Checkbox Aqui veremos como trabalhar com objetos de datas, veremos a hierarquia de objetos do browser, e ainda veremos sobre os checkboxes. Trabalhando com os objetos de datas O Javascript organiza os elementos de uma página dentro de uma hierarquia. Cada elemento é visto como um objeto. Os objetos podem ter propriedades, métodos e responder a certos eventos. Daí a importância de entender a hierarquia dos objetos HTML. Poderíamos citar diversos objetos existentes em Javascript, mas isso demandaria muitas páginas de explicação. Decidi citar todos e explicar apenas 2 deles para que fique claro o funcionamento básico. O primeiro desses dois é o objeto Date. Podemos criar objetos de datas das seguintes maneiras, dependendo de quais valores queremos configurar: Forma Geral: objeto = new Date() Exemplos: dia=new Date(); //neste caso a data atual é armazenada dia=new Date(“Julho 20, 2007, 11:00:00” ); dia=new Date(“07, 20, 2007” ); dia=new Date(“ 07,20, 2007,11,0,0” ); Métodos existentes no objeto Date getMonth getMonth() - obtém o 'número' do mês. Retornando um valor entre 0 e 11. (janeiro=0). Mes=objeto.getMonth() setMonth setMonth(mês) - estabelece um novo valor para o mês. O valor deve estar entre 0 e 11. NovoMes=objeto.setMonth(NumeroDoMes) getDate getDate() - obtém o número do dia, considerando-se o mês. Retornando um valor numérico entre 1 e 31. dia = objeto.getDate() setDate P á g i n a | 40 setDate(dia) - estabelece um novo valor para o dia do mês. Este valor deve estar entre 1 e 31. SetaData=objeto.setDate(NumeroDoDia) getDay getDay() - obtém o número do dia, considerando-se a semana. Retornando um valor numérico entre 0 e 6. Lembre-se de que a semana começa no domingo, logo 0, corresponde ao domingo. DiaDaSemana = objeto.getDay() getHours getHours() - obtém um número correspondente a hora. Retornando um valor numérico entre 0 e 23. Hora = objeto.getHours() setHours setHours(hora) - estabelece um novo valor para a hora. O valor deve estar entre 0 e 23. SetaHora = objeto.setHours(NovaHora) getMinutes getMinutes() - obtém um número correspondente aos minutos. Retornando um valor numérico entre 0 e 59. Minutos = objeto.getMinutes() setMinutes setMinutes(minutos) - estabelece um novo valor para os minutos. O valor deve estar entre 0..59 SetaMinutos = objeto.setMinutes(Minutos) getSeconds getSeconds() - obtém um número correspondente aos segundos. Retornando um valor numérico entre 0..59 Segundos = objeto.getSeconds() setSeconds setSeconds(segundos) - estabelece um novo valor para os segundos. O valor deve estar entre 0 e 59 SetaSegundos = objeto.setSeconds(Segundos) getTime getTime() - obtém o tempo decorrido desde 01/01/70 até o presente momento. O único incoveniente é que esta data é dada em milissegundos. P á g i n a | 41 TempoDecorrido = objeto.getTime() setTime setTime(tempo) - configura a hora e a data especificando o número de milissegundos, desde 1º de Janeiro. DataDeNascimento = New Date("August 2, 1970") Uma outra forma para definir a data seria: OutraForma = New Date() OutraForma.setTime(DataDeNascimento.getTime()) getTimeZoneOffset getTimeZoneOffset() - obtém a diferença entre o horário local e o horário do meridiano central (Greenwich). Este tempo é dado em minutos, logo, para saber o fuso-horário, deve-se dividir o resultado obtido por esta função por 60. FusoHorário = objeto.getTimezoneOffset() / 60 getYear getYear() - obtém um valor numérico correspondente ao ano. Retorna o ano, ao que se restou 1900. Por exemplo, para o 1995 retorna 95, para o 2005 retorna 105. Este método está obsoleto em Netscape a partir da versão 1.3 de Javascript e agora se utiliza getFullYear(). Ano = objeto.getYear() getFullYear getFullYear() - retorna o ano com todos os dígitos. Use este método para datas posteriores ao ano 2000. Ano = objeto.getFullYear() setYear setYear(ano) - estabelece um novo valor ao ano. O valor deve ser maior ou igual a 1900. SetaAno = objeto.setYear(1997) setFullYear setFullYear(ano) - muda o ano da data ao número que recebe por parâmetro. O número se indica completo ex: 2005 ou 1995. Utilizar este método para datas posteriores a 2000. SetaAno2 = objeto.setFullYear(2005) toGMTString toGMTString() - converte um objeto data para uma string seguindo o padrão Internet GMT. ConverteGMT = objeto.toGMTString() toLocaleString P á g i n a | 44 </center> </body> </html> P á g i n a | 45 Lição 10 - Ocultando Scripts Na primeira parte desta lição mostrarei como controlar o navegador e a ocultar os scripts em navegadores antigos. Introdução Aprenderemos a partir daqui a controlar o navegador e os distintos elementos da página. A partir daqui o curso ganha um caráter bastante prático, na medida em que até esta parte não trabalhávamos explicitamente com o navegador e com as páginas. Primeiramente, mostrarei a hierarquia de objetos do browser como um todo e como acessá- los. Figura 1 Hierarquia de objetos do browser P á g i n a | 46 Percebe-se que os objetos pertecem a um objeto maior chamado window, de modo que para acessar qualquer outro objeto desta hierarquia, devemos iniciar pelo objeto window: window.document.bgColor = "red"; window.document.write("O texto a escrever") ; Percebemos que muitos das propriedades de Window são na verdade outros objetos. Destacamos o objeto Document, que contém propriedades e métodos necessários para o controle de diversos aspectos da página. Quando carregamos uma página, o browser constrói a hierarquia na memória. Ainda constrói um array (vetor) dos objetos. Isto significa que, por exemplo, no caso das imagens, ele vai criando o array colocando na posição 0 (usualmente a inicial) a primeira imagem, na posição 1 a segunda imagem e assim por diante. Vejamos um exemplo dessa construção que percorre as imagens e imprime suas propriedades src, que contém a url onde se situa a imagem. for (i=0;i<document.images.length;i++){ document.write(document.images[i].src); document.write("<br>"); } Podemos também acessar um pouco mais adentro a hierarquia. Vamos em seguida acessar um formulário da página, ao que poderemos acessar pelo array de formulários, e dentro dele acessar a propriedade elements, que é outro array de objetos. Para cada elemento do formulário vamos escrever sua propriedade value, que corresponde com a propriedade value que colocamos em HTML. Percebemos que é um loop muito parecido com o anterior, com a diferença que agora percorremos o vetor elements, ao que acessamos pela hierarquia de objetos passando pelo array de formulários em sua posição 0, que corresponde como primeiro formulário da página. Vejamos: for (i=0;i<document.forms[0].elements.length;i++){ document.write(document. forms[0].elements[i].value); document.write("<br>"); } Ocultando scripts de navegadores antigos Alguns usuários ainda utilizam navegadores que não suportam JavaScript. Além disso, algumas pessoas tem suporte para JavaScript porém este está desativado em seus navegadores, seja por preocupação com segurança ou para evitar mensagem rolando na tela. O que acontece é que, por causa disso, o browser passa a ignorar a TAG <script> e, logicamente, todo o código que estiver limitado por ela, mostrando todo o código na tela como se fosse um simples texto HTML. Para evitar isso, é possível incluir o script dentro de tags de comentário de HTML, o que, na prática, diz ao navegador para ignorar o script caso não o entenda. Já os navegadores atuais "entendem" que o script não é realmente um comentário. As duas barras (//) na última linha são um comentário JavaScript, que evita que o comentário HTML seja detectado como um erro de JavaScript. P á g i n a | 49 </script> Utilizando, agora a hierarquia Javascript, faremos: window.document['nome_da_imagem'].src = variavel_imagem_javascript.src Teoricamente, os atributos HTML dos eventos onmouseover e onmouseout ficarão assim: onmouseover="window.document['imagem1'].src= primeira.src; onmouseout="window.document['imagem1'].src = segunda.src; E fim. Vamos ver agora o script completo: <script language=javascript> primeira = new Image(84,34); primeira.src = "imagem1.gif"; segunda = new Image(84,34); segunda.src = "imagem2.gif"; </script> <a href="linkaserclicado.html" onmouseover="window.document['img1'].src = primeira.src" onmouseout="window.document['img1'].src = segunda.src"> <img src="imagem1.gif" border=0 name="img1" width=84 height=34> </a> Navegador Dinâmico Diretamente ligado ao exemplo anterior é este exemplo seguinte. Podemos adaptar o rollover para criar uma barra de navegação para uma página que mude ao passar o mouse por cima de cada item. E é exatamente isso o que faremos agora. Evidentemente, existem muitas outras maneiras de fazer uma barra de navegação, mas esta é uma boa forma. Primeiramente devemos construir duas versões da barra, desta maneira: - javascript_principal1.jpeg - javascript_aba11.jpeg - javascript_aba21.jpeg - javascript_aba31.jpeg - javascript_principal2.jpeg - javascript_aba12.jpeg - javascript_aba22.jpeg - javascript_aba32.jpeg Com uma tabela de HTML faremos, então, a barra de navegação para a página, ainda sem movimento, detalhando assim: P á g i n a | 50 » Inserimos as imagens apagadas; » Cada imagem linka para uma página correspondente; » Nomeamos diferentemente cada imagem usando o atributo name; » Usaremos cellpadding e cellspacing 0 para que não exista separação entre as imagens; » Por esta última razão, também não devemos deixar espaço em branco no código HTML entre os TD's e as imagens. O código fica assim: <table cellspacing="0" cellpadding="0" border="0"> <tr> <td><a href="principal.html"><img src="javascript_principal1.jpeg" width=110 height=16 alt="Principal" border="0" name="imagem1"></a></td> </tr> <tr> <td><a href="aba1.html"><img src="javascript_aba11.jpeg" width=110 height=16 alt="Aba1" border="0" name="imagem2"></a></td> </tr> <tr> <td><a href="aba2.html"><img src="javascript_aba21.jpeg" width=110 height=16 alt="Aba2" border="0" name="imagem3"></a></td> </tr> <tr> <td><a href="aba3.html"><img src="javascript_aba31.jpeg" width=110 height=16 alt="Aba3" border="0" name="imagem4"></a></td> </tr> </table> Para ter as imagens já em nosso browser antes de que sejam utilizadas, devemos pré-carregá- las usando Javascript. Com isso, conseguiremos que o efeito de rollover seja rápido, e as imagens mudem velozmente segundo o passar do mouse: Para isto, utilizaremos o código seguinte, que deverá ser inserido no cabeçalho do documento HTML: <script> iluminada1 = new Image(110,16); iluminada1.src = "javascript_principal2.jpeg"; apagada1 = new Image(110,16); apagada1.src = "javascript_principal1.jpeg"; iluminada2 = new Image(110,16); iluminada2.src = "javascript_aba12.jpeg"; apagada2 = new Image(110,16); apagada2.src = "javascript_aba11.jpeg"; iluminada3 = new Image(110,16) ; iluminada3.src = "javascript_aba22.jpeg"; apagada3 = new Image(110,16); apagada3.src = "javascript_aba21.jpeg"; iluminada4 = new Image(110,16); iluminada4.src = "javascript_aba32.jpeg"; apagada4 = new Image(110,16); apagada4.src = "javascript_aba31.jpeg"; </script> Aqui usaremos o rollover, definindo os eventos onmouseover e onmouseout para cada um dos links, indicando a mudança da imagem à iluminada e à apagada respectivamente. P á g i n a | 51 onmouseover= "window.document['imagem1'].src=iluminada1.src"; onmouseout="window.document['imagem1'].src=apagada1.src"; onmouseover="window.document['imagem2'].src =iluminada2.src"; onmouseout="window.document['imagem2'].src = apagada2.src"; onmouseover="window.document['imagem3'].src =iluminada3.src"; onmouseout="window.document['imagem3'].src = apagada3.src"; onmouseover="window.document['imagem4'].src =iluminada4.src"; onmouseout="window.document['imagem4'].src = apagada4.src" ; O código completo ficaria assim e o resultado final podemos testar em um browser qualquer. <html> <head> <title>Navegador</title> <script> iluminada1 = new Image(98,26); iluminada1.src = "principal2.jpg"; apagada1 = new Image(98,26); apagada1.src = "principal1.jpg"; iluminada2 = new Image(98,26); iluminada2.src = "aba12.jpg"; apagada2 = new Image(98,26); apagada2.src = "aba11.jpg"; iluminada3 = new Image(98,26); iluminada3.src = "aba22.jpg"; apagada3 = new Image(98,26); apagada3.src = "aba21.jpg"; iluminada4 = new Image(98,26); iluminada4.src = "aba32.jpg"; apagada4 = new Image(98,26); apagada4.src = "aba31.jpg"; </script> </head> <body bgcolor="#6e6d52"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td> <a href="principal.html" onmouseover="window.document['imagem1'].src = iluminada1.src;" onmouseout="window.document['imagem1'].src = apagada1.src;"> <img src="principal1.jpg" width="98" height="26" alt="Principal" border="0" name="imagem1"> </a> </td> </tr> <tr> <td> <a href="aba1.html" onmouseover="window.document['imagem2'].src =iluminada2.src;" onmouseout="window.document['imagem2'].src = apagada2.src;"> <img src="aba11.jpg" width="98" height="26" alt="Aba1" border="0" name="imagem2"> </a> </td> </tr> <tr> <td> <a href="aba2.html" onmouseover="window.document['imagem3'].src =iluminada3.src;"onmouseout="window.document['imagem3'].src = apagada3.src;"> <img src="aba21.jpg" width="98" height="26" alt="Aba2" border="0" name="imagem3"> </a> </td> </tr> <tr> <td>