Verifique se a propriedade pertence àquele objeto

Além do nosso amigo do exemplo anterior, no JavaScript temos o loop for-in que usamos pra iterar em objetos. Uma coisa bacana de se fazer e que pode evitar que algo que você não queira aconteça, é usar o método hasOwnProperty(). Esse método simplesmente vai filtrar apenas as propriedades do objeto em si, excluindo as propriedades herdadas pelo prototype.

Um exemplo rápido:

var burger = {
    queijo: 'cheddar',
    pao: 'integral',
    hamburguer: 'picanha',
    molho: 'barbecue'
};

Aí em uma parte obscura, aparece algo que adiciona uma propriedade a todos os objetos.

if(!Object.prototype.feijao) {
  Object.prototype.feijao = 'preto';
}

O que aconteceu acima foi que verificamos se existe a propriedade feijao em Object e, caso ela não exista definimos ela com o valor preto. Aí que está o negócio da coisa do JavaScript, nosso objeto burger, já herda a propriedade feijao via prototype.

Com isso, para evitarmos que feijao apareça quando listarmos as propriedades de burger (até porque feijão, na minha opinião, não combina muito com hamburguer), fazemos o seguinte:

for(var i in burger) {
  if(burger.hasOwnProperty(i)) {
     console.log(i + ' => ' + burger[i]);
  }
}
 
// Resultará no seguinte:
// queijo => cheddar
// pao => integral
// hamburguer => picanha
// molho => barbecue

Do contrário, caso não fizéssemos essa verificação, teríamos algo assim:

for(var i in burger) {
    console.log(i + ' => ' + burger[i]);
}
 
// Resultará no seguinte:
// queijo => cheddar
// pao => integral
// hamburguer => picanha
// molho => barbecue
// feijao => preto

---

Era isso! Dicas rápidas sobre a linguagem, que para alguns podem ser básicas, mas que muita gente ainda pode não conhecer e, que podem evitar alguns problemas no futuro.

Guarde o tamanho do array

Guarde o tamanho do array

No JavaScript temos nossos brothers loops for, que conseguem iterar em arrays ou também em objetos semelhantes a arrays. Semelhantes? Como assim!? Por exemplo os objetos arguments e HTMLCollection. Provavelmente você já deve ter se deparado com um loop for (já deve ter escrito alguns):

for(var i = 0; i < arrayFabeni.length; i++) {
    // magic
}

De bate pronto, conseguimos perceber algo não tão bacana no código acima. O comprimento (length) do array é acessado em toda iteração do loop. Isso não fica tão legal quando por exemplo, o objeto é um HTMLCollection. Lembra o que são esses caras? Eles que são retornados quando a gente chama:

• getElementsByName()
• getElementsByClassName()
• getElementsByTagName()

Tá! Legal! Mas eaí né?! A zica mesmo é que toda vez que a gente itera sobre esses caras significa que estamos consultando o nosso DOM ao vivo e a cores, e a *toda hora*, o que não é nada bacana.

Com base nisso, uma solução que podemos chegar seria guardarmos o comprimento do array; algo parecido com isso:

for(var i = 0, max = arrayFabeni.length;  i < max; i++) {
    // magic
}

O que fizemos acima foi armazenar o valor da propriedade length, evitando assim ter que calculá-la a cada iteração do loop.

Looping sobre matrizes

Alguns dos métodos que utilizamos em jQuery estão disponíveis com o padrão ES5. Para iteração, podemos usar forEach e map em vez de suas versões do jQuery – each() e do map(). Só tome cuidado para as diferenças de argumentos e padrão este valor nos retornos de chamada.

var tartarugasNinja = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];

// ForEach iterai automaticamente através de uma matriz.

tartarugasNinja.forEach(function (ninja) {
    console.log(ninja);
});

// O método mapa chama uma função em cada elemento de uma matriz e cria uma nova matriz com os resultados.

var amantesDaPizza = tartarugasNinja.map(function (ninja) {

    return ninja.concat(" ama pizza!");

});

console.log(amantesDaPizza);

Manipulando classes e atributos

Manipular nomes de classes sem jQuery costumava ser muito inconveniente. Não mais, graças à propriedade classList. E se você precisa para manipular atributos, você tem setAttribute.

var botao = document.querySelectorAll("button"),
    div = document.querySelector("#exemplo");

botao[0].addEventListener("click", function (e) {

    // Resgata o ID da div de forma fácil
    console.log(div.id);
    div.innerHTML = "ID: " + div.id;
});


// O Elemento.classList guarda todas as classes do elemento.

var classes = div.classList;

botao[1].addEventListener("click", function () {

    console.log(classes);
    div.innerHTML = "Classes: " + classes;

});

botao[2].addEventListener("click", function () {

    // Se for suportado, adicionará a classe vermelho.
    classes.add("vermelho");

});

botao[3].addEventListener("click", function () {

    // You can also toggle a class on and off
    classes.toggle("esconder");

});

Efeito "Ir para o topo" com rolagem suave

Bom dia galera, meu primeiro tutorial aqui no site.
Vocês aprenderão hoje a criar um botão "Ir para o topo da página" com jQuery + o plugin jQuery Easing para deixar a rolagem suave.

Primeiramente você deve verificar se a sua página já possui o jQuery, se não tiver, faça o download aqui (http://jquery.com/download/). Feito isso vamos ao código.

O código é bem simples e funcional, vamos usar a função .animate() do jQuery para o efeito.

Código:

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script>

function toTop(){
$('html, body').animate({
scrollTop: 0
}, 1000, 'linear');
}
</script>

<a href="javascript:toTop();" title="Para o alto, e avante!" />Ir para o topo!</a>

Ok, aqui temos o efeito pronto, já pode ser usado.
Mas eu não fico satisfeito com o simples haha, então vamos adicionar efeitos de easing para a rolagem até o topo ficar mais... interessante.

Teremos que fazer o download do pluguin jQuery Easing aqui (http://gsgd.co.uk/sandbox/jquery/easing/), ou você também pode usar o jQuery UI, pois ele já vem com esses efeitos. Aqui vamos usar o jQuery Easing por ser menor e menos complicado de baixar.. Feito isso vamos melhorar o código.

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jquery/jquery.easing.js" type="text/javascript"></script>
<script>

function toTop(){
$('html, body').animate({
scrollTop: 0
}, 1000, 'easeInOutCirc');
}

</script>

Se você testar vai ver que o efeito é completamente diferente. Isso acontece por usamos o efeito easing. O site http://easings.net/pt-br tem a referencia completa para os efeitos easing, é só passar o mouse por cima que você verá o efeito acontecendo. Gostou de algum? Quer mudar? É só trocar ali onde está 'easeInOutCirc' pelo nome do easing que deseja..

Como usar o método getElementById() do objeto document para localizar um elemento HTML baseado em seu id

O método getElementById() do objeto document é usado quando queremos localizar e retornar um elemento HTML baseado no valor de sua propriedade id. Veja um exemplo:

<html>
<head>
<title>Estudos JavaScript</title>

<script type="text/javascript">
  function localizarElemento(){
    // vamos localizar o elemento com o id "aviso"
    var elem = document.getElementById("aviso");

    // o elemento foi localizado
    if(elem != null){
      // vamos definir o conteúdo do elemento encontrado    
      elem.innerHTML = "Vejam este texto.";
    }
    else{
      window.alert("O elemento HTML pesquisado não foi encontrado."); 
    }
  }
</script>

</head>
<body>

<button onclick="localizarElemento()">Localizar DIV</button>

<div id="aviso"></div>

</body>
</html>

Execute o exemplo e clique no botão. Você verá que o texto do elemento div com o id "aviso" é definido para "Vejam este texto.". Note que, se o elemento não for encontrado, o retorno do método getElementById() é null na maioria dos browsers.

Há algumas observações interessantes em relação ao método getElementById() do objeto document:

a) Se o valor da propriedade id pertencer a uma coleção, ou seja, se houver mais de um elemento HTML com o mesmo id, o método retornará o primeiro elemento na coleção.

b) No Firefox, Opera, Google Chrome, Safari e Internet Explorer (IE) a partir da versão 8, o método getElementById() é case-sensitive (sensível a maiúsculas e minúsculas) em relação ao valor da propriedade id. Nas versões anteriores do IE isso não acontecia.

Confirmar o envio de um formulário

<html>
<head>
<title>Estudando JavaScript</title>

<script language="JavaScript">
  function confirmar(){
    // só permitirá o envio se o usuário responder OK
    var resposta = window.confirm("Deseja mesmo" + 
                   " enviar o formulário agora?");
    if(resposta)
      return true;
    else
      return false; 
  }
</script>

</head>
<body>

<form name="cadastro" action="pagina2.asp" method="post" 
     onsubmit="return confirmar()">
  Usuário:<br>
  <input type="text" name="nome"><br>
  Senha:<br>
  <input type="password" name="senha"><br>
  <input type="submit" value="Entrar!">
</form>

</body>
</html>

Como formatar um número de acordo com as configurações do sistema

<script language="javascript">
<!--
  var valor = 4297.96;
  var res = valor.toLocaleString();
  document.write("Resultado: " + res);
//-->
</script>

Como exibir um número em notação exponencial

<script language="javascript">
<!--
  var valor = 423.32;
  var res = valor.toExponential(2);
  document.write("Resultado: " + res);
//-->
</script>

Como obter o índice da primeira ocorrência em uma busca usando expressões regulares

<script language="javascript">
<!--
  var pesquisa = /Java/gi;
  var frase = "Gosto de programar em Java e JavaScript";

  var res = frase.match(pesquisa);
  document.write(res.toString() + "<br>");
  document.write("Índice da 1ª ocorrência: " + res.index);
//-->
</script>

Um calendário para o ano inteiro

<HTML>

<HEAD><TITLE>Um calendário para o ano inteiro</TITLE>

</HEAD>
<BODY>

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

    document.write("<TD ALIGN=center WIDTH=35>"+day_name+"</TD>")
  function day_title(day_name){
  }
  function fill_table(month,month_length){ 

    document.write("<TD COLSPAN=7 ALIGN=center><B>"+month+"   "+year+"</B><TR>")
    day = 1
    document.write("<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=%3><TR>")

    day_title("Qui")
    day_title("Dom")
    day_title("Seg")
    day_title("Ter")
    day_title("Qua")
    day_title("Sex")

      document.write("<TD>")
    day_title("Sáb")
  
    document.write("</TR><TR>")
    for(var i = 1;i < start_day; i++){
    }
  

    document.write("<TR>")
    for(var i = start_day; i < 8; i++){
      document.write("<TD ALIGN=center>"+day+"</TD>")
      day++
    }
  

        document.write("<TD ALIGN=center>"+day+"</TD>");
    while (day <= month_length) {
      for(var i = 1; i <= 7 && day <= month_length; i++){
        day++;
      }

  year = 2005; // define o ano
      document.write("</TR><TR>");
      start_day = i;
    }
    document.write("</TR></TABLE><BR>");
  }
</script>
<script language="javascript">

  fill_table("Fevereiro",28) // não se esqueça de verificar se o ano é bissexto ou não
  today = new Date("January 1, " + year);
  start_day = today.getDay() + 1;
  fill_table("Janeiro",31)
  fill_table("Março",31)
  fill_table("Abril",30)
  fill_table("Maio",31)

</script>
  fill_table("Junho",30)
  fill_table("Julho",31)
  fill_table("Agosto",31)
  fill_table("Setembro",30)
  fill_table("Outubro",31)
  fill_table("Novembro",30)
  fill_table("Dezembro",31)
</BODY>

</HTML>

Obter a quantidade de dias restantes para o fim do ano

<script type="text/javascript">
<!--
  var hoje = new Date();
  var fimAno = new Date(hoje.getFullYear(), 11, 31);
  var dia = 1000 * 60 * 60 * 24;
  var restantes = Math.ceil((fimAno.getTime() - hoje.getTime()) / (dia));
  document.write('Faltam ' + restantes + ' dias para o fim do ano.');
//-->
</script>

Como usar o objeto Date para exibir a data e hora atual

<script language="javascript">
<!--
  var data = Date();
  document.write("Data e hora atuais: " + data);
//-->
</script>

Como usar o método toLocaleTimeString para exibir a hora de acordo com as configurações do computador do usuário

<script language="javascript">
<!--
  var data = new Date();

  document.write("Horas: " + data.toLocaleTimeString());
//-->

</script>

Como usar o método toLocaleTimeString para exibir a hora de acordo com as configurações do computador do usuário

<script language="javascript">
<!--
  var data = new Date();
  document.write("Horas: " + data.toLocaleTimeString());
//-->
</script>

Como usar o método toLocaleString para exibir a data e a hora de acordo com as configurações do computador do usuário

<script language="javascript">
<!--
  var data = new Date();
  document.write("Hoje é: " + data.toLocaleString());
//-->
</script>

Como obter o valor das horas em um objeto Date

<script language="javascript">
<!--
  var data = new Date();
  var hora = data.getHours();
  document.write("O valor da hora é: " + hora);
//-->
</script>

Como obter o dia da semana em um objeto Date

<script language="javascript">
<!--
  var dias_semana = new Array("Domingo", "Segunda-feira",
      "Terça-feira", "Quarta-feira", "Quinta-feira",
      "Sexta-feira", "Sábado");
  var data = new Date();
  var dia = data.getDay();
  document.write("Dia da Semana: " + dias_semana[dia]);
//-->
</script>

Como obter a quantidade de milisegundos desde a meia-noite de 1º de janeiro de 1970 UTC

<script language="javascript">
<!--
  var data = new Date();
  var milis = Number(data);
  document.write("Milisegundos desde 01/01/1970: " + milis); 
//-->
</script>

Como obter a quantidade de dias para um determinado mês e ano

<script type="text/javascript">
<!--

     return 32 - new Date(ano, mes, 32).getDate();
  function diasNoMes(mes, ano){
  }

  document.write(diasNoMes(10, 2006));
  
  // o mês começa com 0
//-->

</script>

Como construir uma determinada data e hora usando o construtor do objeto Date

Em algumas situações precisamos construir um objeto Date representando uma determinada data e hora. Para isso podemos usar o construtor deste objeto. Veja a sintaxe:

new Date(year, month[, date[, h[, m[, s[, ms]]]]]);

Veja que temos que fornecer os argumemtos na ordem ano, mês, dia, horas, minutos, segundos e milissegundos. Apenas os argumentos para os parâmetros ano e mês são obrigatórios. Veja, por exemplo, como podemos construir a data 01/08/2010:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

<script type="text/javascript">

  // vamos construir a data 01/08/2010

  var data = new Date(2010, 7);

  // vamos exibir o resultado

  document.write("A data é: " + data); 

</script>

</body>

</html>

Este trecho de código exibirá o seguinte resultado:

A data é: Sun Aug 1 00:00:00 UTC-0300 2010.

É importante ficar atento à faixa de valores permitida para cada um dos parâmetros:

year - Exigido. Aqui devemos fornecer o ano completo, por exemplo, 1997 (e não 97).

month - Exigido. Devemos fornecer o mês como um inteiro na faixa de 0 a 11 (janeiro é 0 enquanto dezembro é 11).

date - Opcional. Aqui devemos fornecer o dia como um inteiro na faixa de 1 a 31.

hours - Opcional. Devemos fornecer as horas como um inteiro na faixa de 0 a 23.

minutes - Opcional. Devemos fornecer os minutos como um inteiro na faixa de 0 a 59.

seconds - Opcional. Devemos fornecer os segundos como um inteiro na faixa de 0 a 59.

ms - Opcional. Um inteiro na faixa de 0 a 999.

Veja agora um trecho de código no qual construímos a data 14/05/2010 às 17:50:

<script type="text/javascript">

  // vamos construir a data 14/05/2010 às 17:50

  var data = new Date(2010, 4, 14, 17, 50);

  // vamos exibir o resultado

  document.write("A data é: " + data); 

</script>

Este código exibirá o seguinte resultado:

A data é: Fri May 14 17:50:00 UTC-0300 2010.

Como adicionar horas a um objeto Date

<script type="text/javascript">
<!--
  function adicionarHoras(data, horas){
     return new Date(data.getTime() + (horas * 60 * 60 * 1000));
  }

  document.write('Agora são: ' + (new Date()).toLocaleString() + '<br>');
  document.write('Daqui 5 horas será: ' + adicionarHoras(new Date(), 5).toLocaleString());
//-->
</script>

Usando o laço do-while da linguagem JavaScript

O laço do..while (também chamado de loop ou laço repita enquanto) da linguagem JavaScript é usado quando queremos repetir uma instrução ou um grupo de instruções ENQUANTO uma condição for satisfeita. Veja sua sintáxe:

do{

  // uma instrução ou grupo de instruções

}while(condição);

A condição pode ser qualquer expressão que resulte em um valor boolean (true ou false). Note também que, diferente do laço while (enquanto) o teste condicional do laço do-while é feito DEPOIS de cada iteração (repetição) do laço. Isso faz com que este laço seja executado no mínimo uma vez.

Veja um trecho de código no qual usamos o laço do..while para contar de 0 até 10:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

<script type="text/javascript">

  var i = 0;

  

  do{

    document.write(i + "<br>");

    i++;

  }while(i <= 10);  

</script>

</body>

</html>

Ao executarmos este código teremos o seguinte resultado:

0

1

2

3

4

5

6

7

8

9

10

Veja que declaramos uma variável de controle i e a inicializamos com o valor 0. No corpo do laço nós exibimos o valor da variável de controle e a incrementamos em 1. Em seguida nós verificamos se seu valor é menor ou igual a 10. Como esta condição é satisfeita, o laço é executado pela segunda vez. Dessa forma o ciclo continua até que o valor da variável de controle seja maior que 10, o que faz com que o laço cesse sua repetição.

Veja agora como modificar o laço do-while anterior para exibir os números de 10 até 0:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

<script type="text/javascript">

  var i = 10;

  

  do{

    document.write(i + "<br>");

    i--;

  }while(i >= 0);  

</script>

</body>

</html>

Agora o resultado do código será:

10

9

8

7

6

5

4

3

2

1

0

Aprenda a usar o laço for da linguagem JavaScript

O laço for (também chamado de loop for ou laço para) é usado quando queremos repetir uma instrução ou um conjunto de instruções um determinado número de vezes. Este laço é composto de três partes: inicialização, teste de continuidade e incremento ou decremento da variável de controle. Veja:

for(inicialização; teste; incremento/decremento){

  instrução ou conjunto de instruções

}

Na parte da inicialização nós podemos inicializar a variável a ser usada para controlar a quantidade de repetições do laço. Na parte do teste de continuidade nós avaliamos uma condição boolean (verdadeiro/falso) para determinar se o laço deve ser interrompido ou continuar sua execução. Na parte de incremento/decremento nós incrementamos ou decrementamos o valor da variável de controle.

Veja um trecho de código no qual usamos o laço for para contar de 0 até 10:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

<script type="text/javascript">

  for(var i = 0; i <= 10;  i++){

    document.write(i + "<br>");

  }  

</script>

</body>

</html>

Este código exibirá o seguinte resultado:

0

1

2

3

4

5

6

7

8

9

10

Veja que a condição de continuídade do laço é o valor da variável i menor ou igual a 10. Eis agora uma modificação deste código que conta de 10 até 0: 

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

<script type="text/javascript">

  for(var i = 10; i >= 0;  i--){

    document.write(i + "<br>");

  }  

</script>

</body>

</html>

Agora o código exibirá o seguinte resultado:

10

9

8

7

6

5

4

3

2

1

0

Agora que já vimos um exemplo do uso deste laço, é importante saber quando e quantas vezes as três partes de um laço for são executadas:

a) A parte de inicialização é executada apenas uma vez, ou seja, na entrada da estrutura do laço.

b) O teste de continuídade é feito ANTES de cada repetição (iteração) do laço. Se o teste de continuída não resultar satisfatório já na primeira repetição, as instruções contidas no laço não serão executadas e o fluxo do código continuará após sua chave de fechamento. 

c) A parte de incremento/decremento da variável de controle é feita DEPOIS de cada repetição do laço.

Com exceção do teste de continuídade, as demais partes de um laço for podem conter mais de uma instrução. Quando isso acontece nós as separamos usando vírgulas. Veja um exemplo:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

<script type="text/javascript">

  for(var i = 0, j = 2; i <= 10;  i++, j = j + 3){

    document.write("i = " + i + "; j = " + j + "<br>");

  }  

</script>

</body>

</html>

Ao executar este código teremos o seguinte resultado:

i = 0; j = 2

i = 1; j = 5

i = 2; j = 8

i = 3; j = 11

i = 4; j = 14

i = 5; j = 17

i = 6; j = 20

i = 7; j = 23

i = 8; j = 26

i = 9; j = 29

i = 10; j = 32

Saiba mais sobre o objeto window

O objeto window representa a janela do browser, uma janela em um frame ou janela de diálogo contendo um documento HTML. Este objeto fornece várias informações a respeito da janela (name, navigator, location, history, etc.), permite acesso ao documento contido na janela e suporta vários métodos úteis (alert(), confirm(), addEventListener(), attachEvent(), etc).

Veja uma página HTML na qual temos um código JavaScript que acessa a janela atual e usa seu método alert() para exibir uma mensagem ao usuário:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

<script type="text/javascript">

  // vamos exibir uma mensagem ao usuário

  window.alert("JavaScript é muito bacana!");

</script>

</body>

</html>

O objeto window pode também representar uma janela contida em um frame ou em um elemento iframe, ou ainda em uma janela secundária (criada com os métodos open(), showModalDialog() ou showModelessDialog()). Eis algumas observações que devem ser bem memorizadas:

a) Se a janela estiver contida em um frame ou elemento iframe, ela é uma janela filha da janela que contém o elemento frame. Para obter a janela mãe só precisamos usar a propriedade parent da janela filha. Veja:

<script type="text/javascript">

  // vamos obter a janela mãe

  var janela_mae = window.parent;

</script>

b) Se a janela for aberta por meio dos métodos open(), showModalDialog() ou showModelessDialog(), então a janela que a criou pode ser acessada por meio da propriedade opener. 

Os membros da janela atual podem ser acessados diretamente, sem a necessidade de passarmos pelo objeto window, ou seja, podemos usar alert() em vez de window.alert(), ainda que a última forma é a preferida.

O objeto window está disponível para acesso a partir de qualquer ponto de nossos códigos JavaScript. Assim, devemos nos esforçar ao máximo para não termos variáveis com o mesmo nome das propriedades e métodos deste objeto.

Como obter entrada do usuário em seus códigos JavaScript usando o método prompt() do objeto window

O método prompt() do objeto window é usado quando precisamos obter entrada do usuário. Este método exibe uma caixa de mensagem contendo uma mensagem e uma caixa de texto. Veja sua assinatura:

vTextData = window.prompt([sMessage] [, sDefaultValue])

O parâmetro sMessage (opcional) nos permite definir a mensagem que será exibida ao usuário. O parâmetro sDefaultValue permite definir o valor inicial da caixa de texto. Por padrão, este valor é "undefined" no IE e vazio nos demais browsers. Ambos os parâmetros são do tipo string.

O retorno do método prompt() é uma String ou Integer. Se a mensagem for fechada usando-se o botão Cancelar ou o botão de sistema Fechar, o retorno do método será null no Internet Explorer, Firefox, Google Chrome e Safari, enquanto no Opera o retorno é "undefined". 

Veja uma página HTML na qual usamos o método prompt() para solicitar que o usuário informe seu nome. Em seguida usamos o retorno para exibir uma mensagem de boas-vindas:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

<script type="text/javascript">

  // vamos obter o nome do usuário

  var nome = window.prompt("Seu nome:", "");  

  // vamos verificar se o usuário informou alguma coisa

  if(nome != null){

    window.alert("Bem-vindo(a) ao site, " + nome);

  }

  else{

    window.alert("Você não informou seu nome.");

  }

</script>

</body>

</html>

Veja agora um trecho de código no qual pedimos ao usuário que informe um valor inteiro:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

<script type="text/javascript">

  // vamos solicitar um valor inteiro

  var numero = window.prompt("Informe um inteiro de 0 a 10:", "0");  

  // vamos verificar se o usuário informou um valor menor ou igual a 5

  if(numero != null){

    if(numero <= 5){

      window.alert("O número informado é menor ou igual a 5");

    }

    else{

      window.alert("O número informado é maior que 5");

    }

  }

  else{

    window.alert("Você não informou um valor.");

  }

</script>

</body>

</html>

Como criar um tabela (elemento HTML table) dinamicamente, contendo linhas e colunas

Em algumas situações nós precisamos criar tabelas dinamicamente. Nesta dica eu mostro como isso pode ser feito. O primeiro passo é criar o elemento HTML table com uma chamada ao método createElement() do objeto document. Em seguida usamos este mesmo método para criar o elemento tbody da tabela. Finalmente usamos os métodos insertRow() do objeto tbody e insertCell() do objeto tr (que representa cada linha da tabela) para criar as linhas e colunas. 

Veja o código completo para o exemplo: 

<html>

<head>

<title>Estudos JavaScript</title>

<script type="text/javascript">

  function criarTabela(){

    // vamos criar o elemento HTML table

    var tabela = document.createElement("table");

    tabela.border = "1px";

    tabela.cellSpacing = "0px";

    tabela.cellPadding = "3px";

    // vamos criar o corpo da tabela, ou seja, o tbody 

    var corpo = document.createElement("tbody");

    tabela.appendChild(corpo);

    

    // vamos criar três linhas contendo quatro células cada uma

    for(var i = 0; i < 3; i++){

      var linha = corpo.insertRow(-1);

      

      for(var j = 0; j < 4; j++){

         var celula = linha.insertCell(-1);

         celula.innerHTML = "Célula " + i + ", " + j + "";

      }

    }

    // vamos anexar a tabela recém-criada a um elemento div

    var container = document.getElementById("container");

    container.appendChild(tabela);

  }  

</script>

</head>

<body>

<div id="container"></div>

<br>

<button onclick="criarTabela()">Criar tabela dinamicamente</button>

</body>

</html>

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>

<script type="text/javascript">

  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>

<form name="form1">

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

    checked="checked" /> Java

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

  <input name="linguagens" type="radio" value="1" />  C#<br />

  <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>

<script type="text/javascript">

  // 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:

<script type="text/javascript">

  // 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>

<script type="text/javascript">

   // 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.