Java Script: fevereiro 2016

Usando o método getElementsByName() do objeto document para obter uma coleção de elementos HTML com o mesmo nome (atributo name)

O método getElementsByName() do objeto document é usado quando precisamos obter uma lista (coleção NodeList ou matriz) de elementos HTML que possuem o mesmo valor para sua propriedade name. Veja:

<html>

<head>

<title>Estudos JavaScript</title>

function localizarElementos(){

// vamos obter os elementos com o valor "linguagens"

// para sua propriedade name

var elems = document.getElementsByName("linguagens");

// encontramos algum elemento

if(elems.length > 0){

// vamos percorrer os elementos encontrados

for(var i = 0; i < elems.length; i++){

// vamos verificar se este radio button está selecionado

if(elems[i].checked){

window.alert("O " + (i + 1) +

"º radio button ESTÁ selecionado");

}

else{

window.alert("O " + (i + 1) +

"º radio button NÃO está selecionado");

}

else{

window.alert("Nenhum elemento localizado.");

}

</script>

</head>

<body>

<input name="linguagens" type="radio" value="1"

checked="checked" /> Java

<input name="linguagens" type="radio" value="1" /> Delphi

<input type="button" name="btn" onclick="localizarElementos()"

value="Verificar Radio Buttons" />

</form>

</body>

</html>

Neste exemplo nós temos três botões do tipo radio button, todos com o mesmo valor para seu atributo name. Quando clicamos no botão, este chama uma função personalizada que usa o método getElementsByName() do objeto document para obter os elementos como uma matriz. Note que é sempre uma boa idéia testar o tamanho da matriz retornada antes de efetuar qualquer procedimento.

O método getElementsByName() funciona de forma diferente dependendo do browser:

a) No Internet Explorer e Opera, o método pesquisa e retorna os elementos que possuem correspondência nos atributos id e name.

b) No Firefox, Google Chrome e Safari, somente elementos com correspondência no atributo name são retornados.

c) No Firefox, Opera, Google Chrome e Safari, o método é case-sensitive (sensível a maiúsculas e minúsculas) em relação ao valor da propriedade name (e id no Opera).

d) No Internet Explorer (IE), o método não é case-sensitive (sensível a maiúsculas e minúsculas) em relação ao valor da propriedade name e id.

Entendendo o objeto document

O objeto document representa a página HTML e fornece possibilidades para acessar, criar e manipular todos os elementos HTML no documento. Este objeto está logo abaixo do objeto window na hierarquia do DOM (Document Object Model), ou seja, podemos dizer que este elemento é filho do objeto window. Assim, para acessá-lo a partir de nossos códigos JavaScript podemos usar window.document ou simplesmente document. Veja:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

// vamos obter o título desta página

var titulo = window.document.title;

// vamos exibir o resultado em uma mensagem alert

window.alert("O título da página é: " + titulo);

</script>

</body>

</html>

Neste exemplo nós usamos o objeto window para obter o objeto document. O passo seguinte foi obter o valor de sua propriedade title, que é usada para definir ou obter o título da página HTML.

Para obter um elemento em um documento HTML nós podemos usar as coleções (all, anchors, applets, etc), os métodos getElementById(), getElementsByName() e getElementsByTagName() e algumas outras propriedades e métodos. Se precisarmos acessar o elemento body ou html, podemos usar as propriedades document.documentElement e document.body.

Veja um trecho de código no qual acessamos o corpo do documento HTML e definimos sua cor de fundo:

// vamos definir a cor de fundo da página HTML

window.document.body.bgColor = "Beige";

</script>

Uma vez que o objeto document é um objeto contâiner para um documento HTML, ele fornece métodos para a crição de novos elementos (por meio do método createElement()), nós textos (createTextNode()) e nós de comentários (createComment()). Depois que um nó (node) é criado, ele pode ser inserido no documento por meio de chamadas aos métodos appendChild() e insertBefore().

Veja um trecho de código no qual usamos o método createElement() para criar um novo elemento div e logo em seguida usamos o método appendChild() para adicionar o elemento recém-criado no final do documento HTML:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

// vamos criar um novo elemento div

var elem = document.createElement("div");

elem.innerHTML = "Sou uma div criada dinâmicamente";

elem.style.backgroundColor = "beige";

// vamos adicionar este novo elemento no final do documento

document.body.appendChild(elem);

</script>

</body>

</html>

Os documentos HTML contidos em elementos frames e iframes possuem seus próprios objetos document. Para obter tais objetos, devemos usar a propriedade contentDocument.

Conteúdo máximo de um cookie

A especificação de cookies para a maioria dos navegadores é a seguinte:

O total de cookies no computador do usuário não pode ultrapassar 300.
Se o total de cookies ultrapassar 300, o navegador excluirá o cookie mais antigo.
O tamanho máximo de um cookie é 4Kb, ou seja, 4000 bytes. Isso quer dizer que você pode armazenar aproximadamente 4000 caracteres em um cookie.
O número máximo de cookies por domínio ou servidor é 20.

Como detectar se JavaScript está desabilitado e direcionar o browser para outra página

O código abaixo foi testado com IE 6.0 e Firefox 1.0.7

<HTML>
<HEAD>
<TITLE></TITLE>

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="1;
     URL=http://www.outrapagina.com.br">
</noscript>

</HEAD>
<BODY>

</BODY>
</HTML>

Como usar o laço for para percorrer todos os elementos de uma matriz em JavaScript

Nesta dica mostrarei como usar o laço for (para) para percorrer todos os elementos de uma matriz em JavaScript. Como sabemos, o laço (loop) for nos permite definir o valor inicial de uma variável de controle e incrementá-la a cada iteração (repetição) do laço. Desta forma, esta mesma variável de controle pode ser usada como índice para os elementos do array.

Veja um código JavaScript no qual temos uma matriz contendo cinco elementos. Veja como usamos o laço for para percorrer e exibir o valor de cada um destes elementos:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

// vamos criar um array contendo cinco elementos

var numeros = new Array(5, 3, 19, 21, 74);

// vamos usar o laço for para percorrer todos os elementos

// da matriz

for(var i = 0; i < numeros.length; i++){

// vamos exibir o valor do elemento atual

window.alert(numeros[i]);

}

</script>

</body>

</html>

Aqui nós usamos a propriedade length do objeto Array para fixar o limite superior da variável de controle do laço.

Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6.

Como concatenar um array e um objeto

Adicionando três elementos ao final de um array


<script language="javascript">
<!--

  var valores = new Array(1, 2, 3, 4, 5);

  document.write("Valores no Array: " + valores + "<br>");
  valores.push(6, 7, 8);

  document.write("Adicionei três elementos ao final do array<br>");
  document.write("Valores no Array: " + valores);
//-->

</script>

segunda-feira, 29 de fevereiro de 2016