Tópicos avançados em internet B Carlos Oberdan Rolim Ciência da Computação

Javascript (parte 2)

Objetos e eventos Orientação a objetos Métodos Propriedades Eventos

Array Objeto Array definido através da palavra-chave new var diasSemana = new Array(); var diasSemana = new Array(7); var diasSemana = newArray(); diasSemana[0] = Domingo; diasSemana[1] = Segunda; diasSemana[2] = Terca; diasSemana[2] = Quarta; diasSemana[3] = Quinta; diasSemana[4] = Sexta; diasSemana[5] = Sabado; var diasDaSemana = new Array("Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado");

Array Métodos join() Coloca todos os elementos de um Array em uma string e os separam por um delimitador especificado. shift() Retorna o primeiro valor de um Array e remove os demais. Unshift() Acresce um ou mais elementos ao inicio de um Array e retorna o novo tamanho pop() Retorna o último elemento de um Array e remove os demais. push() Acresce um ou mais elementos ao final de um Array reverse() Inverte a ordem dos elementos de um Array. slice() Retorna os elementos selecionados de um Array. sort() Ordena os elementos de um Array. concat() Concatenar duas ou mais arrays

Array var diasDaSemana = new Array(); diasDaSemana[0] = "Domingo"; diasDaSemana[1] = "Segunda"; diasDaSemana[2] = "Terça"; diasDaSemana[3] = "Quarta"; diasDaSemana[4] = "Quinta"; diasDaSemana[5] = "Sexta"; diasDaSemana[6] = "Sábado"; alert("Utilizando o método join().\n\n" + diasDaSemana.join(" - | - ") + "\n\nElementos separados por um delimitador: - | -."); alert("Utilizando o método shift().\n\n" + diasDaSemana.shift() + "\n\nApenas o primeiro elemento (valor): Domingo."); alert("Utilizando o método pop().\n\n" + diasDaSemana.pop() + "\n\nApenas o último elemento (valor): Sábado.");

Array Exemplo concat() var arr = new Array(3); arr[0] = "Jani"; arr[1] = "Tove"; arr[2] = "Hege"; var arr2 = new Array(3); arr2[0] = "John"; arr2[1] = "Andy"; arr2[2] = "Wendy"; document.write(arr.concat(arr2));

Array Exemplo push() var arr = new Array(3); arr[0] = "Jani"; arr[1] = "Hege"; arr[2] = "Stale"; document.write(arr + " "); document.write(arr.push("Kai Jim") + " "); document.write(arr); Imprime: Jani,Hege,Stale 4 Jani,Hege,Stale,Kai Jim

Array Exemplo unshift() var arr = new Array(3); arr[0] = "Jani"; arr[1] = "Hege"; arr[2] = "Stale"; document.write(arr + " "); document.write(arr.unshift("Kai Jim") + " "); document.write(arr); Imprime: Jani,Hege,Stale 4 Kai Jim,Jani,Hege,Stale

Date Objeto Date dataAtual = new Date(); alert(dataAtual) Mon Jun :29:13 GMT-0300 (Hora oficial do Brasil) Exemplo para mostrar data no formato dd/mm/aaaa var data = new Date(); var mes = new Array(12) mes[0] = "Janeiro"; mes[1] = "Fevereiro"; mes[2] = "Março"; mes[3] = "Abril"; mes[4] = "..."; alert(data.getDate() + "/" + mes[data.getMonth()] + "/" + data.getFullYear());

Date Métodos Date()Retorna a data e o horário atual. getDate()Retorna o dia do mês (1-31). getDay()Retorna o dia da semana (0-6). getMonth()Retorna o mês (0-11) getFullYear()Retorna o ano com quatro dígitos. getHours()Retorna a hora (0-23). getMinutes()Retorna os minutos (0-59). getSeconds()Retorna os segundos (0-59). getMilliseconds()Retorna os milisegundos (0-999). getTimezoneOffset()Retorna a diferença em minutos entre o tempo local e o do Meridiano de Greenwich (GMT) toString converte um objeto Date para string // Uma forma new Date().nomeDoMetodo(); // Outra forma var data = new Date(); data.nomeDoMetodo();

<!-- // Instanciando o objeto Date() var data = new Date(); // Referenciando aos dias da semana através de Array var diasDaSemana = new Array(); diasDaSemana[0] = "Domingo"; diasDaSemana[1] = "Segunda-feira"; diasDaSemana[2] = "Terça-feira"; diasDaSemana[3] = "Quarta-feira"; diasDaSemana[4] = "Quinta-feira"; diasDaSemana[5] = "Sexta-feira"; diasDaSemana[6] = "Sábado-feira"; // Referenciando aos meses do ano através de Array var mes = new Array(); mes[0] = "Janeiro"; mes[1] = "Fevereiro"; mes[2] = "Março"; mes[3] = "Abril"; mes[4] = "Maio"; mes[5] = "Junho"; mes[6] = "Julho"; mes[7] = "Agosto"; mes[8] = "Setembro"; mes[9] = "Outubro"; mes[10] = "Novembro"; mes[11] = "Dezembro"; // Dia da semana, dia do mês de mês de ano. alert(Hoje " + diasDaSemana[data.getDay()] + ", " + data.getDate() + " de " + mes[data.getMonth()] + " de " + data.getFullYear() ); //-->

String String literal x Objeto String Métodos do objeto string em string literal convertem a última para objeto var v1 = teste"; var v2 = new String(teste"); alert("A variável v1 contém: " + v1.length + " caracteres."); alert("A variável v2 contém: " + v2.length + " caracteres."); // Ambos retornam 5

String Métodos indexOf()Retorna a posição da primeira ocorrência de um valor especificado em uma string. lastIndexOf()Retorna a posição da última ocorrência de um valor especificado em uma string. match()Procura por um valor específico em uma string. Se encontrado, ele (valor) é retornado, caso contrário, retorna null. replace()Substitue alguns caracteres por outros caracteres em uma string. toLowerCase()Exibe os caracteres da string em minúsculos. toUpperCase()Exibe os caracteres da string em maiúsculos. substr()Extrai uma quantidade específica de caracteres de uma string a partir de um índice inicial. substring()Extrai os caracteres de uma string entre dois índices

var to_indexOf = "Brasil"; alert("A posição da letra \"s\" na palavra Brasil é: " + to_indexOf.indexOf("s") + "\nLembrando que a contagem inicia-se do zero."); var to_lastIndexOf = "Minas Gerais"; alert("A última letra \"s\" no nome Minas Gerais está na posição: " + to_lastIndexOf.lastIndexOf("s") + "\nLembrando que a contagem inicia-se do zero."); var to_match = ober|oberdan"; alert("O informado contém " + var to_replace = "Exemplo do método replace.\nViva a violência.\nSeja feliz!\n:)"; alert(to_replace.replace("Viva","Diga não ")); var to_cases = "Exemplo do método toLowerCase() e toUpperCase respectivamente.\nObErDaN"; alert(to_cases.toLowerCase()); alert(to_cases.toUpperCase()); var to_substr = "Ódio e Amor"; alert(to_substr.substr(7)); var to_substring = Testando o uso de substring."; alert(to_substring.substring(0,9));

Math Objeto usado para tarefas matemáticas Relação dos valores matemáticos que podem ser acessados pelo objeto Math.

Math Métodos ceil() Arredonda o valor informado para cima até o número inteiro mais próximo. Veja o exemplo: var numero = 6.1; alert(Math.ceil(numero)); // Exibirá o valor 7. floor() Arredonda o valor informado para baixo até número inteiro mais próximo. Veja o exemplo: var numero = 6.1; alert(Math.floor(numero)); // Exibirá o valor 6.

Math max() Retorna o número de maior valor entre dois números especificados. var numero1 = 6.7; var numero2 = 3.8; alert(Math.max(numero1,numero2)); // Exibirá o valor 6.7 min() Retorna o número de menor valor entre dois números especificados. var numero1 = 6.7; var numero2 = 3.8; alert(Math.min(numero1,numero2)); // Exibirá o valor 3.8

Math random() Retorna um número entre 0 e 1. alert(Math.random()); // Exibirá números aleatórios entre 0 e 1 - Ex.: alert(Math.random()*59); // Exibirá números aleatórios entre 0 e 59 - Ex.: round() Arredonda o valor informado para o número inteiro mais próximo, seja positivo ou negativo. var numero1 = 6.7; alert(Math.round(numero1)); // Exibirá o valor 7 var numero2 = -3.8; alert(Math.round(numero2)); // Exibirá o valor -4

Boolean Constructor Propriedade constructor é uma referencia a função que criou o objeto var test=new Boolean(); if (test.constructor==Array) { document.write("This is an Array"); } if (test.constructor==Boolean) { document.write("This is a Boolean"); } if (test.constructor==Date) { document.write("This is a Date"); } if (test.constructor==String) { document.write("This is a String"); }

Boolean Prototype Propriedade que permite acrescer propriedades e métodos a um objeto Sintaxe: object.prototype.name=value function employee(name,jobtitle,born) { this.name=name; this.jobtitle=jobtitle; this.born=born; } var fred=new employee("Fred Flintstone","Caveman",1970); employee.prototype.salary=null; fred.salary=20000; document.write(fred.salary); // imprime 200

Boolean toSource Representa o source de um objeto function employee(name,jobtitle,born) { this.name=name; this.jobtitle=jobtitle; this.born=born; } var fred=new employee("Fred Flintstone","Caveman",1970); document.write(fred.toSource()); Imprime: ({name:"Fred Flintstone", jobtitle:"Caveman", born:1970})

Boolean toString Converte um valor booleano para string e retorna esse valor var boo = new Boolean(true); document.write(boo.toString()); Imprime: true

Boolean valueOf Retorna o valor primitivo de um objeto var boo = new Boolean(false); document.write(boo.valueOf()); Imprime: false

Eventos Onsubmit Esse evento trabalha em conjunto com uma função da seguinte forma: associamos ao formulário a chamada de uma função e esta tem por objetivo validar os dados submetidos e retornar um valor verdadeiro (true) ou falso (false). Se o valor retornado for verdadeiro, o formulário é enviado, caso contrário, o envio é bloqueado até que os dados sejam preenchidos como desejamos onsubmit="return confereFormulario();"...

Eventos Onerror Quando um erro de leitura de uma página ou imagem ocorre

Eventos Onresize Quando uma janela ou frame é redimensionado....

Eventos Onabort Quando o carregamento de uma imagem é abortado

Eventos onfocus, onblur e onchange onfocus ocorre quando o usuário clica em um link ou em um campo de texto e o foco é mantido até que outro elemento o ganhe. onblur é executado quando o elemento perde o foco onchange (ao trocar/mudar) é quando alteramos uma opção na lista de um combobox.. onfocus="funcaoParaFocus();" onblur="funcaoParaBlur();"...

Eventos Onselect Quando um texto é selecionado em uma textarea ou em um campo text Selecione o texto: Seleciona o texto: Hello world!

Eventos onkeydown, onkeypress e onkeyup onkeydown e onkeypress são semelhantes e ocorrem quando uma tecla é pressionada pelo usuário em seu teclado. onkeyup é executado quando a tecla é liberada, ou seja, ela foi pressionada e em seguida liberada.... onkeydown="funcaoParaKeyDown();" onkeypress="funcaoParaKeyPress();" onkeyup="funcaoParaKeyUp();"...

Eventos Onreset Quando o botão reset é pressionado Firstname: Lastname:

Eventos Onload e unload evento onload é executado quando uma página HTML é carregada por completa, incluindo as imagens Já o evento onunload ocorre quando o usuário sai de uma página.

Eventos Onclick Ocorre quando clica em algum elemento da página... onclick="javascript:nomeDaFuncao(algumParametroSeHouver);"... Onmouseover e onmouseout nmouseover é acionado quando o mouse se localiza na área de um elemento, onmouseout é executado quando ele (mouse) sai dessa área onmouseover="funcaoParaMouseOver();" onmouseout="funcaoParaMouseOut();"

Eventos Ondblclick Quando ocorre um duplo-click Campo1: Campo2: Clique para copiar o conteudo do Campo1 para o Campo2 Copiar o conteudo

Eventos Onmousedown Quando o botão do mouse é clicado... onmousedown=funcao()...

Eventos Onmousemove Quando o ponteiro do mouse é movido Por padrão o onmousemove não é um evento de nenhum objeto já que esse evento acontece muito frequentemente Cuidado no uso: cada vez que mouse é movido e o evento é tratado recursos do SO são consumidos

Eventos Onmouseup Quando o botão do mouse é solto