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()
<script type="text/javascript">
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));
</script>
Array
Exemplo push()
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr + "<br />");
document.write(arr.push("Kai Jim") + "<br />");
document.write(arr);
</script>
Imprime:
Jani,Hege,Stale
4
Jani,Hege,Stale,Kai Jim
Array
Exemplo unshift()
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr + "<br />");
document.write(arr.unshift("Kai Jim") + "<br />");
document.write(arr);
</script>
Imprime:
Jani,Hege,Stale
4
Kai Jim,Jani,Hege,Stale
Date
Objeto Date
dataAtual = new Date();
alert(dataAtual)
Mon Jun 26 2008 15: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).
// Uma forma
new Date().nomeDoMetodo();
// Outra forma
var data = new Date();
data.nomeDoMetodo();
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
<script type="text/javascript">
<!-// 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()
);
//-->
</script>
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 e-mail informado contém (@): " + to_match.match("@"));
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.: 0.8335737463859384
alert(Math.random()*59);
// Exibirá números aleatórios entre 0 e 59 - Ex.: 58.92792655560298
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
<script type="text/javascript">
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");
}
</script>
Boolean
Prototype
Propriedade que permite acrescer propriedades e métodos a um objeto
Sintaxe: object.prototype.name=value
<script type="text/javascript">
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
</script>
Boolean
toSource
Representa o source de um objeto
<script type="text/javascript">
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());
</script>
Imprime:
({name:"Fred Flintstone", jobtitle:"Caveman", born:1970})
Boolean
toString
Converte um valor booleano para string e retorna esse valor
<script type="text/javascript">
var boo = new Boolean(true);
document.write(boo.toString());
</script>
Imprime:
true
Boolean
valueOf
Retorna o valor primitivo de um objeto
<script type="text/javascript">
var boo = new Boolean(false);
document.write(boo.valueOf());
</script>
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
<img src="image.gif" onerror="alert('The image could not be loaded.')">
Eventos
Onresize
Quando uma janela ou frame é redimensionado
<body onresize="alert('You have changed the size of the window')">
....
</body>
Eventos
Onabort
Quando o carregamento de uma imagem é abortado
<img src="image_w3default.gif" onabort="alert('Error: Loading of the
image was aborted')">
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();" ...
<select ... onchange="funcaoParaChange();" ...>
Eventos
Onselect
Quando um texto é selecionado em uma textarea ou em um campo text
<form>
Selecione o texto: <input type="text" value="Hello world!"
onselect="alert(‘Voce selecionou texto.')">
<br /><br />
Seleciona o texto: <textarea cols="20" rows="5" onselect="alert(‘Voce
selecionou texto.')"> Hello world!</textarea>
</form>
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
<form onreset="alert('The form will be reset')">
Firstname: <input type="text" name="fname" value="John" />
<br />
Lastname: <input type="text" name="lname" />
<br /><br />
<input type="reset" value="Reset">
</form>
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.
<body onload="nomeDaFuncao();" onunload="nomeDa2ºFuncao();">
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
<html>
<body>
Campo1: <input type="text" id="field1" value="Hello World!"> <br />
Campo2: <input type="text" id="field2">
<br /><br />
Clique para copiar o conteudo do Campo1 para o Campo2 <br />
<button
ondblclick="document.getElementById('field2').value=“document.getElementById('fie
ld1').value">Copiar o conteudo</button>
</body>
</html>
Eventos
Onmousedown
Quando o botão do mouse é clicado
... onmousedown=“funcao()”...
<img src="image_w3default.gif" onmousedown="alert('You clicked the
picture!')">
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
<img src="image_w3default.gif" alt="W3Schools"
onmousemove="alert('Visit W3Schools!')" />
Eventos
Onmouseup
Quando o botão do mouse é solto
<img src="image_w3default.gif" onmouseup="alert('You clicked the
picture!')">